.landing-hero {
  --landing-hero-shape-reveal-duration: 950ms;
  color: var(--landing-page-text, #302f2b);
  min-height: min(50rem, calc(100svh - 5rem));
  position: relative;
}

.landing-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding: clamp(5.5rem, 10vh, 7.5rem) 0 clamp(5rem, 9vh, 7rem);
}

.landing-hero .landing-hero__eyebrow {
  animation: landing-hero-enter var(--motion-reveal-duration) var(--motion-ease) both;
  color: var(--landing-page-secondary, #65625b);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  line-height: var(--type-eyebrow-line-height);
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}

.landing-hero .landing-hero__title {
  animation: landing-hero-enter var(--motion-reveal-duration) var(--motion-ease) 40ms both;
  color: var(--landing-page-text, #302f2b) !important;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--type-page-hero-size) !important;
  font-weight: 500;
  letter-spacing: var(--type-page-hero-tracking);
  line-height: var(--type-page-hero-line-height) !important;
  margin: 0;
  max-width: 10.8ch;
  text-wrap: balance;
}

.landing-hero .landing-hero__lead {
  animation: landing-hero-enter var(--motion-reveal-duration) var(--motion-ease) 150ms both;
  color: var(--landing-page-text, #302f2b);
  font-size: clamp(1.06rem, 1.35vw, 1.18rem);
  line-height: 1.68;
  margin: 2rem 0 0;
  max-width: 32.5rem;
}

/* Shared .brand-button owns appearance; this file only positions the CTA. */
.landing-hero__cta,
.landing-demo-section__cta {
  margin-top: 2rem;
}

.landing-hero__cta {
  animation: landing-hero-enter var(--motion-reveal-duration) var(--motion-ease) 300ms both;
  align-self: flex-start;
}

.landing-hero .landing-hero__tagline {
  animation: landing-hero-enter var(--motion-reveal-duration) var(--motion-ease) 340ms both;
  color: var(--landing-page-secondary, #65625b);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.5;
  margin: 1rem 0 0;
}

.landing-hero__mobile-octagons {
  display: none;
}

.landing-hero__octagon--secondary {
  display: none;
}

.landing-hero__octagon--tertiary {
  display: none;
}

.landing-hero__octagon--quaternary {
  display: none;
}

.landing-hero-debug-switcher {
  display: none;
}

@keyframes landing-hero-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .landing-hero {
    min-height: 100vh;
    min-height: 100svh;
    overflow: clip;
  }

  .landing-hero__inner {
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(4rem, 9vw, 5.5rem) 0 clamp(3.5rem, 8vw, 5rem);
  }

  .landing-hero .landing-hero__title {
    max-width: 12ch;
  }

  .landing-hero__mobile-octagons {
    align-items: center;
    align-self: flex-end;
    display: flex;
    justify-content: flex-end;
    margin-right: calc(-1 * clamp(3rem, 14vw, 4rem));
    margin-top: clamp(3.5rem, 14vw, 4.1rem);
    min-height: clamp(13.75rem, 61vw, 16.25rem);
    width: 100%;
  }

  .landing-hero__octagon {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    position: relative;
  }

  .landing-hero__octagon--single {
    --landing-hero-octagon-fill: var(--hex-gold);
    --landing-hero-octagon-opacity: 1;
    width: clamp(13.75rem, 61vw, 16.25rem);
    z-index: 2;
  }

  .landing-hero__octagon-base,
  .landing-hero__octagon-rounded {
    fill: var(--landing-hero-octagon-fill);
    transform-box: fill-box;
    transform-origin: center;
  }

  .landing-hero__octagon-base {
    opacity: 0;
  }

  .landing-hero__octagon-rounded {
    opacity: 1;
  }

  .js .landing-hero__octagon {
    opacity: 0;
    transform: translateY(7px);
  }

  .js .landing-hero__octagon-base {
    opacity: 1;
  }

  .js .landing-hero__octagon-rounded {
    opacity: 0;
  }

  .js .landing-hero__octagon--single {
    animation: landing-hero-octagon-enter var(--landing-hero-shape-reveal-duration) var(--motion-ease) 180ms forwards;
  }

  .js .landing-hero__octagon--single .landing-hero__octagon-base,
  .js .landing-hero__octagon--single .landing-hero__octagon-rounded {
    animation-duration: var(--motion-polygon-morph-duration);
    animation-fill-mode: forwards;
    animation-timing-function: var(--motion-ease);
  }

  .js .landing-hero__octagon--single .landing-hero__octagon-base {
    animation-delay: 860ms;
    animation-name: landing-hero-octagon-sharpen-out;
  }

  .js .landing-hero__octagon--single .landing-hero__octagon-rounded {
    animation-delay: 860ms;
    animation-name: landing-hero-octagon-soften-in;
  }

}

@media (max-width: 767px) {
  .landing-hero {
    --landing-hero-cell-half: clamp(3rem, 14vw, 3.625rem);
    --landing-hero-cell-size: clamp(6rem, 28vw, 7.25rem);
    --landing-hero-grid-left: calc(
      50% - var(--landing-hero-cell-half) - var(--landing-hero-grid-step-x) - 1.5rem
    );
    --landing-hero-grid-row-1: -1.5rem;
    --landing-hero-grid-row-2: calc(
      var(--landing-hero-grid-row-1) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-3: calc(
      var(--landing-hero-grid-row-2) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-4: calc(
      var(--landing-hero-grid-row-3) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-5: calc(
      var(--landing-hero-grid-row-4) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-6: calc(
      var(--landing-hero-grid-row-5) + var(--landing-hero-grid-step-y)
    );
    /* One equilateral centre lattice owns every cell position. The horizontal
       step is twice the half-step; the row step is half-step * sqrt(3), so
       horizontal and diagonal neighbours have the same centre distance. */
    --landing-hero-grid-step-half: clamp(2.85rem, 13.35vw, 3.475rem);
    --landing-hero-grid-step-x: calc(
      var(--landing-hero-grid-step-half) + var(--landing-hero-grid-step-half)
    );
    --landing-hero-grid-step-y: clamp(4.936rem, 23.123vw, 6.019rem);
    --landing-hero-mobile-gutter: clamp(1.25rem, 6vw, 2.5rem);
    --landing-hero-visual-gap: clamp(1.5rem, 6vw, 2rem);
    --landing-hero-visual-height: calc(
      var(--landing-hero-grid-row-3)
      + var(--landing-hero-cell-size)
      + var(--landing-hero-visual-gap)
    );
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .landing-hero__inner {
    isolation: isolate;
    justify-content: flex-start;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: calc(var(--mobile-nav-reserved, 6.5rem) + 1.25rem);
    padding-top: env(safe-area-inset-top);
    position: relative;
  }

  .landing-hero .landing-hero__eyebrow,
  .landing-hero .landing-hero__title,
  .landing-hero .landing-hero__lead,
  .landing-hero__cta {
    position: relative;
    z-index: 3;
  }

  .landing-hero__mobile-octagons {
    align-self: auto;
    display: block;
    flex: 0 0 var(--landing-hero-visual-height);
    height: var(--landing-hero-visual-height);
    left: auto;
    margin: 0 calc(-1 * var(--landing-hero-mobile-gutter));
    min-height: 0;
    order: -1;
    pointer-events: none;
    position: relative;
    right: auto;
    top: auto;
    width: calc(
      100% + var(--landing-hero-mobile-gutter) + var(--landing-hero-mobile-gutter)
    );
    z-index: 0;
  }

  .landing-hero-debug-switcher {
    align-items: center;
    background: color-mix(in srgb, var(--brand-surface) 92%, transparent);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    box-shadow: 0 0.35rem 1.25rem color-mix(in srgb, var(--brand-text-primary) 10%, transparent);
    display: flex;
    gap: 0.2rem;
    left: 50%;
    padding: 0.25rem;
    position: fixed;
    top: max(0.65rem, env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 60;
  }

  .landing-hero-debug-switcher a {
    border-radius: 999px;
    color: var(--brand-text-secondary);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.55rem 0.7rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .landing-hero-debug-switcher a[aria-current="page"] {
    background: var(--hex-gold);
    color: var(--brand-button-primary-ink);
  }

  :root[data-theme="dark"]
    .landing-hero
    .landing-hero__mobile-octagons[data-decorative-hexagon-overlap],
  :root.dark
    .landing-hero
    .landing-hero__mobile-octagons[data-decorative-hexagon-overlap] {
    --decorative-hexagon-alpha: 0.84;
  }

  /* DEBUG reference keeps the preceding three-shape composition available
     without affecting the public desktop-derived honeycomb. */
  .landing-hex-system[data-mobile-hero-variant="reference"] .landing-hero {
    --landing-hero-big-right: clamp(-4rem, -13vw, -3.25rem);
    --landing-hero-big-size: clamp(24.5rem, 112vw, 28.75rem);
    --landing-hero-big-top: clamp(-5.5rem, -9svh, -4rem);
    --landing-hero-middle-left: clamp(1.25rem, calc(2vw + 1rem), 1.75rem);
    --landing-hero-middle-size: clamp(11.5rem, 48vw, 13rem);
    --landing-hero-middle-top: calc(clamp(2.25rem, 6svh, 3rem) + 3.875rem);
    --landing-hero-small-right: calc(clamp(0.75rem, 3vw, 1.5rem) + 1.375rem);
    --landing-hero-small-size: clamp(6.5rem, 25.875vw, 7.6rem);
    --landing-hero-small-top: calc(clamp(9.75rem, calc(18svh + 0.75rem), 10.75rem) + 6.625rem);
    --landing-hero-visual-height: calc(
      max(
        calc(var(--landing-hero-big-top) + var(--landing-hero-big-size)),
        calc(var(--landing-hero-middle-top) + var(--landing-hero-middle-size)),
        calc(var(--landing-hero-small-top) + var(--landing-hero-small-size))
      )
      + var(--landing-hero-visual-gap)
    );
  }

  .landing-hero__octagon {
    position: absolute;
  }

  .landing-hero__honeycomb-cell {
    width: var(--landing-hero-cell-size);
  }

  .landing-hero__honeycomb-cell path {
    transform: rotate(30deg);
  }

  .landing-hero__honeycomb-cell--0,
  .landing-hero__honeycomb-cell--2,
  .landing-hero__honeycomb-cell--4,
  .landing-hero__honeycomb-cell--5,
  .landing-hero__honeycomb-cell--7,
  .landing-hero__honeycomb-cell--8,
  .landing-hero__honeycomb-cell--10,
  .landing-hero__honeycomb-cell--11 {
    --landing-hero-octagon-fill: var(--hex-cream);
  }

  .landing-hero__honeycomb-cell--1 {
    --landing-hero-octagon-fill: var(--hex-soft);
  }

  .landing-hero__honeycomb-cell--2 {
    --decorative-hexagon-alpha: 0.82;
    --landing-hero-octagon-fill: var(--hex-soft);
  }

  .landing-hero__honeycomb-cell--3 {
    --landing-hero-octagon-fill: var(--hex-gold);
  }

  .landing-hero__honeycomb-cell--6 {
    --landing-hero-octagon-fill: color-mix(
      in srgb,
      var(--hex-ochre) 78%,
      var(--hex-soft)
    );
  }

  .landing-hero__honeycomb-cell--0,
  .landing-hero__honeycomb-cell--1 {
    top: var(--landing-hero-grid-row-1);
    z-index: 0;
  }

  .landing-hero__honeycomb-cell--0 {
    left: calc(var(--landing-hero-grid-left) + var(--landing-hero-grid-step-half));
  }

  .landing-hero__honeycomb-cell--1 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--2,
  .landing-hero__honeycomb-cell--3,
  .landing-hero__honeycomb-cell--4 {
    top: var(--landing-hero-grid-row-2);
    z-index: 1;
  }

  .landing-hero__honeycomb-cell--2 {
    left: var(--landing-hero-grid-left);
  }

  .landing-hero__honeycomb-cell--3 {
    left: calc(var(--landing-hero-grid-left) + var(--landing-hero-grid-step-x));
  }

  .landing-hero__honeycomb-cell--4 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--5,
  .landing-hero__honeycomb-cell--6,
  .landing-hero__honeycomb-cell--7 {
    top: var(--landing-hero-grid-row-3);
    z-index: 2;
  }

  .landing-hero__honeycomb-cell--5 {
    left: calc(var(--landing-hero-grid-left) + var(--landing-hero-grid-step-half));
  }

  .landing-hero__honeycomb-cell--6 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--7 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--8 {
    --decorative-hexagon-alpha: 0.7;
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-4);
    z-index: 1;
  }

  .landing-hero__honeycomb-cell--10 {
    --decorative-hexagon-alpha: 0.76;
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-1);
    z-index: 0;
  }

  .landing-hero__honeycomb-cell--11 {
    --decorative-hexagon-alpha: 0.72;
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-2);
    z-index: 1;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--2,
  :root.dark .landing-hero__honeycomb-cell--2 {
    --decorative-hexagon-alpha: 0.88;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--8,
  :root.dark .landing-hero__honeycomb-cell--8 {
    --decorative-hexagon-alpha: 0.76;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--10,
  :root.dark .landing-hero__honeycomb-cell--10 {
    --decorative-hexagon-alpha: 0.82;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--11,
  :root.dark .landing-hero__honeycomb-cell--11 {
    --decorative-hexagon-alpha: 0.78;
  }

  .js .landing-hero__honeycomb-cell {
    animation: landing-hero-octagon-enter var(--landing-hero-shape-reveal-duration) var(--motion-ease) forwards;
    animation-delay: 160ms;
  }

  .js .landing-hex-system.has-randomized-hero-reveal .landing-hero__honeycomb-cell {
    animation-delay: var(--landing-hero-random-reveal-delay, 160ms);
  }

  .landing-hero__octagon--single {
    right: var(--landing-hero-big-right);
    top: var(--landing-hero-big-top);
    width: var(--landing-hero-big-size);
    z-index: 0;
  }

  .landing-hero__octagon--secondary {
    --landing-hero-octagon-fill: var(--hex-soft);
    --landing-hero-octagon-opacity: 1;
    display: block;
    left: var(--landing-hero-middle-left);
    right: auto;
    top: var(--landing-hero-middle-top);
    width: var(--landing-hero-middle-size);
    z-index: 1;
  }

  .landing-hero__octagon--tertiary {
    --landing-hero-octagon-fill: var(--hex-ochre);
    --landing-hero-octagon-opacity: 1;
    display: block;
    right: var(--landing-hero-small-right);
    top: var(--landing-hero-small-top);
    width: var(--landing-hero-small-size);
    z-index: 1;
  }

  /* DEBUG-only mobile studies derived from the four coloured cells in the
     desktop honeycomb (indices 1, 3, 6 and 10). The horizontal step is about
     half a cell and the vertical step about four fifths of a cell, matching
     the desktop grid rather than forming a new freehand cluster. */
  .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__mobile-octagons {
    --desktop-crop-anchor-right: -2.25rem;
    --desktop-crop-cell: clamp(8.75rem, 40vw, 10rem);
    --desktop-crop-step-x: clamp(3.75rem, 16.5vw, 4.35rem);
    --desktop-crop-step-y: clamp(6.45rem, 28vw, 7rem);
    --decorative-hexagon-alpha: 0.76;
  }

  .landing-hex-system[data-mobile-hero-variant="desktop-b"]
    .landing-hero__mobile-octagons {
    --desktop-crop-anchor-right: -0.75rem;
  }

  :root[data-theme="dark"] .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__mobile-octagons,
  :root.dark .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__mobile-octagons {
    --decorative-hexagon-alpha: 0.82;
  }

  .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__octagon {
    width: var(--desktop-crop-cell);
  }

  .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__octagon path {
    transform: rotate(30deg);
  }

  .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__octagon--single {
    --landing-hero-octagon-fill: var(--hex-soft);
    right: var(--desktop-crop-anchor-right);
    top: -3.75rem;
    z-index: 0;
  }

  .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__octagon--secondary {
    --landing-hero-octagon-fill: var(--hex-gold);
    left: auto;
    right: calc(var(--desktop-crop-anchor-right) + var(--desktop-crop-step-x));
    top: calc(-3.75rem + var(--desktop-crop-step-y));
    z-index: 1;
  }

  .landing-hex-system:is(
      [data-mobile-hero-variant="desktop-a"],
      [data-mobile-hero-variant="desktop-b"]
    ) .landing-hero__octagon--tertiary {
    --landing-hero-octagon-fill: var(--hex-ochre);
    right: var(--desktop-crop-anchor-right);
    top: calc(-3.75rem + var(--desktop-crop-step-y) + var(--desktop-crop-step-y));
    z-index: 2;
  }

  .landing-hex-system[data-mobile-hero-variant="desktop-b"]
    .landing-hero__octagon--quaternary {
    --landing-hero-octagon-fill: var(--hex-soft);
    --landing-hero-octagon-opacity: 1;
    display: block;
    right: calc(var(--desktop-crop-anchor-right) - var(--desktop-crop-step-x));
    top: calc(
      -3.75rem
      + var(--desktop-crop-step-y)
      + var(--desktop-crop-step-y)
      + var(--desktop-crop-step-y)
    );
    z-index: 3;
  }

  .js .landing-hex-system[data-mobile-hero-variant="desktop-b"]
    .landing-hero__octagon--quaternary {
    animation: landing-hero-octagon-enter var(--landing-hero-shape-reveal-duration) var(--motion-ease) 640ms forwards;
  }

  .js .landing-hero__octagon--secondary {
    animation: landing-hero-octagon-enter var(--landing-hero-shape-reveal-duration) var(--motion-ease) 360ms forwards;
  }

  .js .landing-hero__octagon--tertiary {
    animation: landing-hero-octagon-enter var(--landing-hero-shape-reveal-duration) var(--motion-ease) 500ms forwards;
  }

  .landing-hero .landing-hero__lead {
    animation-delay: 60ms;
    font-size: 1.04rem;
  }

  .landing-hero__cta {
    animation-delay: 100ms;
  }

  .landing-hero .landing-hero__title {
    font-size: var(--type-page-hero-size-mobile) !important;
    line-height: var(--type-page-hero-line-height-mobile) !important;
  }
}

@media (max-width: 420px) {
  .landing-hero {
    --landing-hero-mobile-gutter: 1.4rem;
  }

  .landing-hero__inner {
    padding-bottom: calc(var(--mobile-nav-reserved, 6.5rem) + 1rem);
  }

  .landing-hero .landing-hero__eyebrow {
    font-size: 0.74rem;
    letter-spacing: var(--type-eyebrow-tracking);
    margin-bottom: 0.65rem;
  }

  .landing-hero .landing-hero__title {
    font-size: var(--type-page-hero-size-mobile) !important;
  }

  .landing-hero .landing-hero__lead {
    font-size: 1.02rem;
    line-height: 1.58;
    margin-top: 1.35rem;
  }

  .landing-hero__cta {
    margin-top: 1.4rem;
  }

  .js .landing-hero__octagon--single {
    animation-delay: 160ms;
  }

  .js .landing-hero__octagon--secondary {
    animation-delay: 300ms;
  }

  .js .landing-hero__octagon--tertiary {
    animation-delay: 440ms;
  }

  .js .landing-hero__octagon--single .landing-hero__octagon-base,
  .js .landing-hero__octagon--single .landing-hero__octagon-rounded,
  .js .landing-hero__octagon--secondary .landing-hero__octagon-base,
  .js .landing-hero__octagon--secondary .landing-hero__octagon-rounded,
  .js .landing-hero__octagon--tertiary .landing-hero__octagon-base,
  .js .landing-hero__octagon--tertiary .landing-hero__octagon-rounded {
    animation-delay: 860ms;
  }

}

@media (max-width: 420px) and (max-height: 699px) {
  .landing-hero__inner {
    min-height: calc(100svh + var(--mobile-nav-reserved, 6.5rem));
    padding-bottom: calc(
      var(--mobile-nav-reserved, 6.5rem) + max(2rem, env(safe-area-inset-bottom))
    );
  }

  .landing-hero__cta {
    scroll-margin-bottom: calc(var(--mobile-nav-reserved, 6.5rem) + 2rem);
  }
}

.landing-hero__honeycomb-cell--tablet-extension {
  display: none;
}

/* Tablet portrait reuses the established phone honeycomb, but scales it for
   the wider canvas. This is deliberately isolated from both the <768px phone
   composition and the >=1280px desktop hero. */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .landing-hero {
    --landing-tablet-inline-gutter: clamp(1.5rem, 3vw, 2rem);
    --landing-hero-cell-half: clamp(3.2rem, 8.3vw, 3.8rem);
    --landing-hero-cell-size: clamp(6.75rem, 17vw, 8.125rem);
    --landing-hero-grid-step-half: clamp(3.2rem, 8.3vw, 3.8rem);
    --landing-hero-grid-step-x: calc(
      var(--landing-hero-grid-step-half) + var(--landing-hero-grid-step-half)
    );
    --landing-hero-grid-step-y: clamp(5.543rem, 14.376vw, 6.582rem);
    --landing-hero-grid-left: calc(
      50% - var(--landing-hero-cell-half) - var(--landing-hero-grid-step-x) - 1rem
      + var(--landing-tablet-visual-shift-x)
    );
    --landing-tablet-visual-shift-x: clamp(5rem, 12vw, 7.5rem);
    --landing-hero-grid-row-0: calc(
      var(--landing-hero-grid-row-1) - var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-1: 1.25rem;
    --landing-hero-grid-row-2: calc(
      var(--landing-hero-grid-row-1) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-3: calc(
      var(--landing-hero-grid-row-2) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-grid-row-4: calc(
      var(--landing-hero-grid-row-3) + var(--landing-hero-grid-step-y)
    );
    --landing-hero-visual-gap: 0.75rem;
    --landing-hero-visual-height: calc(
      var(--landing-hero-grid-row-3)
      + var(--landing-hero-cell-size)
      + var(--landing-hero-visual-gap)
    );
    min-height: min(51rem, calc(100svh - 5rem));
    overflow: visible;
    width: calc(
      100vw - var(--landing-tablet-inline-gutter) - var(--landing-tablet-inline-gutter)
    );
    z-index: 2;
  }

  .landing-hero__inner {
    isolation: isolate;
    justify-content: flex-start;
    max-width: 35rem;
    min-height: inherit;
    padding: 0 0 3rem;
    position: relative;
  }

  .landing-hero .landing-hero__lead {
    max-width: 32rem;
  }

  .landing-hero .landing-hero__eyebrow,
  .landing-hero .landing-hero__title,
  .landing-hero .landing-hero__lead,
  .landing-hero__cta {
    position: relative;
    z-index: 3;
  }

  .landing-hero__mobile-octagons {
    display: block;
    flex: 0 0 var(--landing-hero-visual-height);
    height: var(--landing-hero-visual-height);
    margin-inline: calc(-1 * var(--landing-tablet-inline-gutter));
    min-height: 0;
    order: -1;
    pointer-events: none;
    position: relative;
    width: 100vw;
    z-index: 0;
  }

  .landing-hero__octagon {
    display: block;
    overflow: visible;
    position: absolute;
  }

  .landing-hero__octagon-base,
  .landing-hero__octagon-rounded {
    fill: var(--landing-hero-octagon-fill);
    transform-box: fill-box;
    transform-origin: center;
  }

  .landing-hero__octagon-base {
    opacity: calc(1 - var(--mobile-corner-progress, 0));
  }

  .landing-hero__octagon-rounded {
    opacity: var(--mobile-corner-progress, 0);
  }

  .landing-hero__honeycomb-cell {
    width: var(--landing-hero-cell-size);
  }

  .landing-hero__honeycomb-cell--tablet-extension {
    --decorative-hexagon-alpha: 0.72;
    --landing-hero-octagon-fill: var(--hex-cream);
    display: block;
  }

  .landing-hero__honeycomb-cell path {
    transform: rotate(30deg);
  }

  .landing-hero__honeycomb-cell--0,
  .landing-hero__honeycomb-cell--2,
  .landing-hero__honeycomb-cell--4,
  .landing-hero__honeycomb-cell--7,
  .landing-hero__honeycomb-cell--8,
  .landing-hero__honeycomb-cell--10,
  .landing-hero__honeycomb-cell--11 {
    --landing-hero-octagon-fill: var(--hex-cream);
  }

  .landing-hero__honeycomb-cell--1 {
    --landing-hero-octagon-fill: var(--hex-soft);
  }

  .landing-hero__honeycomb-cell--2 {
    --decorative-hexagon-alpha: 0.82;
    --landing-hero-octagon-fill: var(--hex-soft);
  }

  .landing-hero__honeycomb-cell--3 {
    --landing-hero-octagon-fill: var(--hex-gold);
  }

  .landing-hero__honeycomb-cell--6 {
    --landing-hero-octagon-fill: color-mix(
      in srgb,
      var(--hex-ochre) 78%,
      var(--hex-soft)
    );
  }

  .landing-hero__honeycomb-cell--0,
  .landing-hero__honeycomb-cell--1 {
    top: var(--landing-hero-grid-row-1);
    z-index: 0;
  }

  .landing-hero__honeycomb-cell--0 {
    left: calc(var(--landing-hero-grid-left) + var(--landing-hero-grid-step-half));
  }

  .landing-hero__honeycomb-cell--1 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--2,
  .landing-hero__honeycomb-cell--3,
  .landing-hero__honeycomb-cell--4 {
    top: var(--landing-hero-grid-row-2);
    z-index: 1;
  }

  .landing-hero__honeycomb-cell--12,
  .landing-hero__honeycomb-cell--13,
  .landing-hero__honeycomb-cell--14,
  .landing-hero__honeycomb-cell--15 {
    top: var(--landing-hero-grid-row-0);
    z-index: 0;
  }

  .landing-hero__honeycomb-cell--12 {
    left: calc(var(--landing-hero-grid-left) + var(--landing-hero-grid-step-x));
  }

  .landing-hero__honeycomb-cell--13 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--14 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--15 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--16,
  .landing-hero__honeycomb-cell--17 {
    top: var(--landing-hero-grid-row-1);
    z-index: 0;
  }

  .landing-hero__honeycomb-cell--16 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--17 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--18 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-2);
    z-index: 1;
  }

  .landing-hero__honeycomb-cell--19 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-4);
    z-index: 1;
  }

  .landing-hero__honeycomb-cell--2 {
    left: var(--landing-hero-grid-left);
  }

  .landing-hero__honeycomb-cell--3 {
    left: calc(var(--landing-hero-grid-left) + var(--landing-hero-grid-step-x));
  }

  .landing-hero__honeycomb-cell--4 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--6,
  .landing-hero__honeycomb-cell--7 {
    top: var(--landing-hero-grid-row-3);
    z-index: 2;
  }

  .landing-hero__honeycomb-cell--6 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--7 {
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
  }

  .landing-hero__honeycomb-cell--8 {
    --decorative-hexagon-alpha: 0.7;
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-4);
    z-index: 1;
  }

  .landing-hero__honeycomb-cell--10 {
    --decorative-hexagon-alpha: 0.76;
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-half)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-1);
    z-index: 0;
  }

  .landing-hero__honeycomb-cell--11 {
    --decorative-hexagon-alpha: 0.72;
    left: calc(
      var(--landing-hero-grid-left)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
      + var(--landing-hero-grid-step-x)
    );
    top: var(--landing-hero-grid-row-2);
    z-index: 1;
  }

  .js .landing-hero__honeycomb-cell {
    animation: landing-hero-octagon-enter
      var(--landing-hero-shape-reveal-duration)
      var(--motion-ease)
      forwards;
    animation-delay: var(--landing-hero-random-reveal-delay, 160ms);
    opacity: 0;
    transform: translateY(7px);
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--2,
  :root.dark .landing-hero__honeycomb-cell--2 {
    --decorative-hexagon-alpha: 0.88;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--8,
  :root.dark .landing-hero__honeycomb-cell--8 {
    --decorative-hexagon-alpha: 0.76;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--10,
  :root.dark .landing-hero__honeycomb-cell--10 {
    --decorative-hexagon-alpha: 0.82;
  }

  :root[data-theme="dark"] .landing-hero__honeycomb-cell--11,
  :root.dark .landing-hero__honeycomb-cell--11 {
    --decorative-hexagon-alpha: 0.78;
  }
}

/* Large portrait tablets have substantially more vertical and inline space
   than the smaller tablet composition, while using the same honeycomb and
   mobile motion controller. Scale only the typographic group and let the
   hero grow with it; the geometry above remains untouched. */
@media (min-width: 834px) and (max-width: 1279px) and (min-height: 1100px) and (orientation: portrait) {
  .landing-hero {
    min-height: min(58rem, calc(100svh - 5rem));
  }

  .landing-hero__inner {
    padding-bottom: clamp(3.5rem, 5svh, 4rem);
  }

  .landing-hero .landing-hero__eyebrow {
    margin-top: clamp(2.25rem, 4.5svh, 3.75rem);
  }

  .landing-hero .landing-hero__title {
    font-size: clamp(3.85rem, 6.25vw, 4rem) !important;
  }

  .landing-hero .landing-hero__lead {
    font-size: clamp(1.1rem, 1.8vw, 1.125rem);
    line-height: 1.65;
    max-width: 32rem;
  }

  .landing-hero__cta {
    --interaction-primary-font-size: 1rem;
    --interaction-primary-height: 3.25rem;
    --interaction-primary-padding-block: 0.95rem;
    --interaction-primary-padding-inline: 1.75rem;
  }
}

@media (max-width: 767px) {
  .js .landing-hero__octagon .landing-hero__octagon-base,
  .js .landing-hero__octagon .landing-hero__octagon-rounded {
    animation: none;
  }

  .js .landing-hero__octagon .landing-hero__octagon-base {
    opacity: calc(1 - var(--mobile-corner-progress, 0));
  }

  .js .landing-hero__octagon .landing-hero__octagon-rounded {
    opacity: var(--mobile-corner-progress, 0);
  }
}

@keyframes landing-hero-octagon-enter {
  to {
    opacity: var(--landing-hero-octagon-opacity, 1);
    transform: translateY(0);
  }
}

@keyframes landing-hero-octagon-sharpen-out {
  to {
    opacity: 0;
  }
}

@keyframes landing-hero-octagon-soften-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero .landing-hero__eyebrow,
  .landing-hero .landing-hero__title,
  .landing-hero .landing-hero__lead,
  .landing-hero__cta {
    animation: none;
  }

  .landing-hero__cta,
  .landing-demo-section__cta {
    transition: none;
  }

  .js .landing-hero__octagon {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .landing-hero__octagon-base {
    animation: none;
    opacity: 0;
  }

  .js .landing-hero__octagon-rounded {
    animation: none;
    opacity: 1;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__grid {
    animation: none !important;
  }
}

@media (min-width: 1280px) {
  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__grid {
    animation: none;
    opacity: 1;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex {
    animation: landing-desktop-hexagon-enter
      var(--landing-hero-shape-reveal-duration, 950ms)
      var(--motion-ease)
      var(--landing-desktop-hexagon-reveal-delay, 160ms)
      backwards;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="13"] {
    --landing-desktop-hexagon-reveal-delay: 160ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="12"] {
    --landing-desktop-hexagon-reveal-delay: 250ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="0"] {
    --landing-desktop-hexagon-reveal-delay: 340ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="1"] {
    --landing-desktop-hexagon-reveal-delay: 430ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="14"] {
    --landing-desktop-hexagon-reveal-delay: 520ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="2"] {
    --landing-desktop-hexagon-reveal-delay: 610ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="3"] {
    --landing-desktop-hexagon-reveal-delay: 700ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="4"] {
    --landing-desktop-hexagon-reveal-delay: 790ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="5"] {
    --landing-desktop-hexagon-reveal-delay: 880ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="6"] {
    --landing-desktop-hexagon-reveal-delay: 970ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="7"] {
    --landing-desktop-hexagon-reveal-delay: 1060ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="9"] {
    --landing-desktop-hexagon-reveal-delay: 1150ms;
  }

  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex[data-hex-index="10"] {
    --landing-desktop-hexagon-reveal-delay: 1240ms;
  }
}

@keyframes landing-desktop-hexagon-enter {
  from {
    opacity: 0;
  }
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
  .js .page-landing .hexagon-pattern--desktop .hexagon-pattern__hex {
    animation: none !important;
  }
}