.main-redesign {
  --use-label: #1d4ed8;
  --use-copy: #526078;
  --use-caption: #223044;
}

.main-redesign .landing-hero {
  position: relative;
  min-height: clamp(680px, 56.25vw, 900px);
  background: #eaf0f5;
}

.main-redesign .landing-hero-media {
  position: absolute;
  isolation: isolate;
  inset: 0 0 0 auto;
  width: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
}

.main-redesign .landing-hero-media img,
.main-redesign .landing-hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.main-redesign .landing-hero-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease;
}

.main-redesign .landing-hero-media img {
  opacity: var(--hero-media-opacity, 1);
}

.main-redesign .landing-hero-media video.is-frame-pending,
.main-redesign .landing-hero-media video.is-active,
.main-redesign .landing-hero-media video.is-entering {
  visibility: visible;
}

.main-redesign .landing-hero-media video.is-active,
.main-redesign .landing-hero-media video.is-entering.is-visible {
  opacity: var(--hero-media-opacity, 1);
}

.main-redesign .landing-hero-media video.is-active {
  z-index: 1;
}

.main-redesign .landing-hero-media video.is-entering {
  z-index: 2;
}

.main-redesign .landing-hero-media.is-video-ready img {
  opacity: 0;
  transition: opacity 500ms ease;
}

.main-redesign .landing-hero-video-toggle {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--figma-ink);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  --hero-control-background: 255 255 255;
}

.main-redesign .landing-hero-video-toggle::before {
  position: absolute;
  z-index: -1;
  inset: 8px;
  border-radius: 6px;
  background: rgb(var(--hero-control-background) / 25%);
  content: "";
  transition: background-color 180ms ease;
}

.main-redesign .landing-hero-video-toggle[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .main-redesign .landing-hero-video-toggle:hover::before {
    background: rgb(var(--hero-control-background) / 60%);
  }
}

.main-redesign .landing-hero-video-toggle:focus-visible {
  outline: 3px solid var(--figma-blue);
  outline-offset: -3px;
}

.main-redesign .landing-hero-video-toggle:focus-visible::before {
  background: rgb(var(--hero-control-background) / 60%);
}

html[data-bs-theme="dark"] .main-redesign .landing-hero-video-toggle {
  color: #fff;
  --hero-control-background: 8 24 39;
}

.main-redesign .landing-hero-media::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 3;
  background: linear-gradient(90deg, #eaf0f5, rgb(234 240 245 / 0%) 18%);
}

.main-redesign .landing-contact-fab {
  z-index: 3;
  bottom: 46px;
}

.main-redesign .landing-hero-copy {
  width: 100%;
  margin-left: 0;
  transform: none;
}

.main-redesign .landing-hero-copy h1 {
  margin: 0 0 52px;
  color: var(--figma-ink);
  font-size: 64px;
  line-height: 84px;
  letter-spacing: 0;
  white-space: normal;
}

.main-redesign .landing-hero-copy h1 span {
  display: block;
}

.main-redesign .landing-hero-copy .landing-hero-intro {
  max-width: none;
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 33px;
}

.main-redesign .landing-hero-intro span + span {
  margin-top: 3px;
}

.main-redesign .landing-hero-copy .landing-hero-note {
  max-width: none;
  margin: 0 0 68px;
  font-size: 18px;
  line-height: 27px;
}

.main-redesign .landing-hero-container {
  position: relative;
  z-index: 1;
  min-height: clamp(680px, 56.25vw, 900px);
  padding-top: 88px;
  padding-bottom: 64px;
}

.main-use-cases {
  padding: 100px 0 0;
}

.main-use-heading {
  display: grid;
  gap: 28px;
  margin-bottom: 28px;
}

.main-use-heading span {
  color: var(--figma-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.main-use-heading h2 {
  margin: 0;
  color: var(--figma-ink);
  font-size: 48px;
  font-weight: 800;
  line-height: 67px;
}

.main-use-heading p {
  margin: 0;
  color: var(--figma-muted);
  font-size: 20px;
  line-height: 28px;
}

.main-use-list {
  display: grid;
  gap: 56px;
}

.main-use-row {
  display: grid;
  min-height: 520px;
  padding: 40px;
  grid-template-columns: minmax(0, 650fr) minmax(0, 622fr);
  align-items: center;
  gap: 48px;
  border-radius: 24px;
  background: #e4edff;
}

.main-use-row:nth-child(even) {
  grid-template-columns: minmax(0, 622fr) minmax(0, 650fr);
}

.main-use-row:nth-child(even) .main-use-visual {
  order: 2;
}

.main-use-row.is-customer {
  background: #dff2e8;
}

.main-use-row.is-event {
  background: #ebe1f7;
}

.main-use-row.is-team {
  background: #f8ebd6;
}

.main-use-visual,
.main-use-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

.main-use-image {
  padding: 12px;
}

.main-use-image img {
  display: block;
  width: 100%;
  height: 292px;
  object-fit: contain;
}

.main-use-visual figcaption {
  color: var(--use-caption);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.main-use-visual p,
.main-use-label {
  margin: 0;
  color: var(--use-label);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.main-use-copy h3 {
  margin: 0;
  color: var(--figma-ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
}

.main-use-copy p {
  margin: 0;
  color: var(--use-copy);
  font-size: 18px;
  line-height: 26px;
}

.main-use-copy .figma-copy-lines span + span {
  margin-top: 0;
}

.main-use-recommendation {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  background: rgb(255 255 255 / 65%);
}

.main-use-recommendation strong {
  color: var(--use-label);
  font-size: 18px;
  line-height: 25px;
}

.main-use-recommendation p {
  font-size: 16px;
  line-height: 22px;
}

.main-use-copy > a {
  display: grid;
  width: 260px;
  max-width: 100%;
  min-height: 48px;
  padding: 12px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #2563ff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}

.main-use-copy > .main-use-guide {
  background: transparent;
  text-align: left;
}

.main-use-footnote {
  margin: 28px 0 0;
  color: var(--figma-muted);
  font-size: 16px;
  line-height: 22px;
}

.main-enterprise {
  padding: 80px 0;
}

.main-redesign .figma-overview {
  padding-top: 0;
}

.main-enterprise .figma-policy-callout {
  margin-top: 0;
  min-height: 210px;
}

.main-redesign #features {
  padding-bottom: 80px !important;
}

.main-redesign .figma-capabilities {
  padding-bottom: 0;
}

.main-device-showcase {
  padding: 64px 0 0;
}

.main-device-heading {
  margin-bottom: 24px;
  text-align: center;
}

.main-device-heading h2 {
  margin: 0 0 6px;
  color: var(--figma-ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.main-device-heading p {
  margin: 0;
  color: var(--figma-copy);
  font-size: 20px;
  line-height: 30px;
}

.main-device-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 490;
  overflow: hidden;
}

.main-device-stage img {
  position: absolute;
  object-fit: cover;
}

.main-device-stage .device-monitor {
  top: 6.3536%;
  left: 38.1776%;
  width: 41.2362%;
  height: 63.1216%;
}

.main-device-stage .device-laptop {
  top: 41.8508%;
  left: 18.2121%;
  width: 24.0262%;
  height: 40.6077%;
}

.main-device-stage .device-phone {
  top: 41.7127%;
  left: 77.1900%;
  width: 7.8798%;
  height: 48.7569%;
  border-radius: 12px;
}

.main-device-stage .device-hardware {
  top: 0;
  left: .8571%;
  width: 105%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.main-redesign .figma-process {
  padding-bottom: 0;
}

.main-start-section {
  padding: 80px 0 100px;
}

.main-start-card {
  display: flex;
  min-height: 220px;
  padding: 40px 48px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 20px;
  background: #f6fbff;
}

.main-start-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 24px;
}

.main-start-copy img {
  flex: 0 0 auto;
  width: 72px;
  height: auto;
}

.main-start-copy h2 {
  margin: 0 0 12px;
  color: var(--figma-copy);
  font-size: 32px;
  font-weight: 600;
  line-height: 42px;
}

.main-start-copy p {
  margin: 0;
  color: var(--figma-copy);
  font-size: 18px;
  line-height: 28px;
}

.main-start-card .landing-hero-actions {
  flex: 0 0 auto;
}

.main-redesign a:focus-visible {
  outline: 3px solid var(--figma-blue);
  outline-offset: 4px;
}

html[data-bs-theme="dark"] .main-redesign {
  --use-label: #89b2ff;
  --use-copy: #a0a0aa;
  --use-caption: #c3c3cd;
}

html[data-bs-theme="dark"] .main-redesign .landing-hero {
  background: #081827;
}

html[data-bs-theme="dark"] .main-redesign .landing-hero-media {
  --hero-media-opacity: .8;
}

html[data-bs-theme="dark"] .main-redesign .landing-hero-media::after {
  background: linear-gradient(90deg, #081827, rgb(8 24 39 / 0%) 20%);
}

html[data-bs-theme="dark"] .main-redesign .landing-hero-copy h1,
html[data-bs-theme="dark"] .main-redesign .landing-hero-copy p {
  color: var(--figma-ink);
}

html[data-bs-theme="dark"] .main-use-row {
  background: #0f2342;
}

html[data-bs-theme="dark"] .main-use-row.is-customer {
  background: #102c29;
}

html[data-bs-theme="dark"] .main-use-row.is-event {
  background: #211d3a;
}

html[data-bs-theme="dark"] .main-use-row.is-team {
  background: #302619;
}

html[data-bs-theme="dark"] .main-use-recommendation {
  background: #0b1831;
}

html[data-bs-theme="dark"] .main-use-heading span {
  color: var(--figma-blue-light);
}

html[data-bs-theme="dark"] .main-enterprise .figma-policy-callout {
  border-color: var(--figma-blue);
  background: #0b1831;
}

html[data-bs-theme="dark"] .main-enterprise .figma-policy-callout h3 {
  color: var(--figma-blue-light);
}

html[data-bs-theme="dark"] .main-redesign .figma-overview-panel {
  background: linear-gradient(90deg, #132b50, #173b77);
}

html[data-bs-theme="dark"] .main-redesign #mainNav .navbar-brand img.theme-logo-invert {
  filter: brightness(0) invert(1) !important;
}

html[data-bs-theme="dark"] .main-redesign #mainNav .nav-link {
  color: var(--figma-ink) !important;
}

html[data-bs-theme="dark"] .main-redesign #mainNav::before {
  opacity: var(--navbar-scroll-progress);
  background: rgb(8 27 45 / 94%);
}

html[data-bs-theme="dark"] .main-redesign .figma-section {
  background: var(--figma-canvas);
}

html[data-bs-theme="dark"] .main-redesign .figma-metric-circle {
  background: #0b1831;
  border-color: rgb(88 144 249 / 50%);
  box-shadow: 0 20px 20px rgb(28 88 200 / 50%);
}

html[data-bs-theme="dark"] .main-redesign .figma-glass-pill {
  background: rgb(11 24 49 / 10%);
  border-color: rgb(42 60 87 / 40%);
  box-shadow: 0 20px 40px rgb(28 88 200 / 50%);
}

html[data-bs-theme="dark"] .main-redesign .figma-story-panel.is-problem {
  background: #302119;
}

html[data-bs-theme="dark"] .main-redesign .figma-story-points > div {
  background: #0b1831;
  box-shadow: 0 5px 5px rgb(210 180 165 / 50%);
}

html[data-bs-theme="dark"] .main-redesign .figma-solution-card {
  border: 1px solid #073a9a;
  background: #0b1831;
  box-shadow: 4px 4px 5px rgb(0 0 0 / 25%);
}

html[data-bs-theme="dark"] .main-redesign .figma-process-panel {
  background: #15376d;
}

html[data-bs-theme="dark"] .main-start-card {
  background: #0b1831;
}

html[data-bs-theme="dark"] .main-start-card .btn-light {
  border: 1px solid var(--figma-blue);
}

@media (min-width: 1200px) {
  .main-redesign .landing-hero {
    min-height: 760px;
  }

  .main-redesign .landing-hero-container {
    justify-content: center;
    width: calc(100% - 56px);
    max-width: 1040px;
    min-height: 760px;
    padding: 100px 0 76px;
  }

  .main-redesign .landing-hero-copy {
    text-align: center;
  }

  .main-redesign .landing-hero-copy h1 {
    margin-bottom: 32px;
    font-size: 60px;
    line-height: 76px;
  }

  .main-redesign .landing-hero-copy .landing-hero-intro {
    margin-bottom: 20px;
  }

  .main-redesign .landing-hero-intro span + span {
    margin-top: 8px;
  }

  .main-redesign .landing-hero-copy .landing-hero-note {
    margin-bottom: 40px;
  }

  .main-redesign .landing-hero-copy .landing-hero-actions {
    justify-content: center;
  }

  .main-redesign .landing-hero-intro span,
  .main-redesign .landing-hero-copy .landing-hero-note {
    display: block;
    width: auto;
    max-width: none;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .main-redesign .landing-hero {
    --hero-background: 255 255 255;
    background: var(--figma-canvas);
  }

  .main-redesign .landing-hero-media img,
  .main-redesign .landing-hero-media video {
    object-fit: contain;
  }

  .main-redesign .landing-hero-media::after {
    background: linear-gradient(90deg, rgb(var(--hero-background)), rgb(var(--hero-background) / 0%) 24%);
  }

  .main-redesign .landing-hero-media::before {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background: linear-gradient(180deg, rgb(var(--hero-background) / 0%), rgb(var(--hero-background)));
    content: "";
  }

  .main-redesign .landing-hero::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    content: "";
    background: radial-gradient(ellipse 55.556% 50% at center, rgb(var(--hero-background) / 86%), rgb(var(--hero-background) / 82%) 48%, rgb(var(--hero-background) / 58%) 78%, rgb(var(--hero-background) / 38%));
    filter: none;
    pointer-events: none;
  }

  html[data-bs-theme="dark"] .main-redesign .landing-hero {
    --hero-background: 8 24 39;
  }

  html[data-bs-theme="dark"] .main-redesign .landing-hero-media {
    --hero-media-opacity: .86;
  }

  html[data-bs-theme="dark"] .main-redesign .landing-hero-media::after {
    background: linear-gradient(90deg, rgb(var(--hero-background)), rgb(var(--hero-background) / 0%) 24%);
  }

  html[data-bs-theme="dark"] .main-redesign .landing-hero-copy p {
    color: var(--figma-copy);
  }

}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .main-redesign .landing-hero-media {
    inset: auto 0 0 auto;
    width: min(100%, 906.6667px);
  }

  .main-redesign .landing-hero-copy .landing-hero-intro {
    font-size: clamp(16px, 1.9vw, 22px);
    line-height: 1.5;
  }

  .main-redesign .landing-hero-container {
    justify-content: center;
  }

  .main-redesign .landing-hero-copy {
    text-align: center;
  }

  .main-redesign .landing-hero-copy .landing-hero-actions {
    justify-content: center;
  }

  .main-redesign .landing-hero-intro span,
  .main-redesign .landing-hero-copy .landing-hero-note {
    display: block;
    width: auto;
    max-width: none;
    margin-left: 0;
    padding: 0;
    background: transparent;
    white-space: nowrap;
  }

  html[data-bs-theme="dark"] .main-redesign .landing-hero-intro span,
  html[data-bs-theme="dark"] .main-redesign .landing-hero-copy .landing-hero-note {
    background: transparent;
  }

}

@media (min-width: 768px) {
  .main-redesign .landing-hero-copy h1 span {
    white-space: nowrap;
  }
}

@media (max-width: 1399.98px) {
  .main-use-row {
    padding: 32px;
    gap: 32px;
  }

  .main-start-card {
    flex-wrap: wrap;
  }
}

@media (max-width: 1199.98px) {
  .main-redesign .landing-hero-copy h1 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.3;
  }
}

@media (max-width: 767.98px) {
  .main-redesign .landing-hero {
    min-height: 0;
    background: #f5f9ff;
  }

  .main-redesign .landing-hero-copy {
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    text-align: center;
  }

  .main-redesign .landing-hero-copy p {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .main-redesign .landing-hero-copy h1 {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .main-redesign .landing-hero-container {
    display: block;
    min-height: 0;
    padding-top: 128px;
    padding-bottom: 24px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .main-redesign .landing-hero-copy h1 {
    margin-bottom: 28px;
    font-size: 36px;
    line-height: 1.3;
  }

  .main-redesign .landing-hero-copy .landing-hero-intro {
    font-size: 18px;
    line-height: 27px;
    text-wrap: balance;
  }

  .main-redesign .landing-hero-copy .landing-hero-note {
    margin-bottom: 36px;
    font-size: 16px;
    line-height: 27px;
    text-wrap: balance;
  }

  html[data-bs-theme="dark"] .main-redesign .landing-hero-copy p {
    color: var(--figma-copy);
  }

  .main-redesign .landing-hero-copy .landing-hero-actions {
    flex-direction: column;
  }

  .main-redesign .landing-hero-copy .landing-hero-actions .btn {
    width: 100%;
  }

  .main-redesign .landing-hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .main-redesign .landing-hero-media img {
    position: absolute;
    inset: 0;
  }

  .main-redesign .landing-hero-media::after,
  html[data-bs-theme="dark"] .main-redesign .landing-hero-media::after {
    background: none;
  }
}

@media (max-width: 991.98px) {
  .main-use-row,
  .main-use-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .main-use-row:nth-child(even) .main-use-visual {
    order: 0;
  }

  .main-use-image img {
    height: auto;
    aspect-ratio: 626 / 292;
  }
}

@media (max-width: 575.98px) {
  .main-use-cases {
    padding: 64px 0 0;
  }

  .main-enterprise {
    padding: 48px 0;
  }

  .main-start-section {
    padding-top: 48px;
  }

  .main-device-showcase {
    padding-top: 48px;
  }

  .main-redesign #features {
    padding-bottom: 48px !important;
  }

  .main-redesign .figma-process {
    padding-top: 80px;
  }

  .main-use-heading {
    gap: 20px;
  }

  .main-use-heading h2 {
    font-size: 32px;
    line-height: 1.4;
  }

  .main-use-list {
    gap: 28px;
  }

  .main-use-row {
    padding: 24px;
  }

  .main-use-copy h3 {
    font-size: 24px;
    line-height: 1.4;
  }

  .main-use-image {
    padding: 0;
  }

  .main-device-heading h2 {
    font-size: 28px;
    line-height: 1.4;
  }

  .main-device-heading p {
    font-size: 18px;
    line-height: 1.5;
  }

  .main-start-card {
    padding: 28px 24px;
  }

  .main-start-copy {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-start-copy h2 {
    font-size: 28px;
  }

  .main-start-card .landing-hero-actions {
    width: 100%;
    flex-direction: column;
  }
}