:root {
      --base: #F2EFF0;
      --surface: #FFFFFF;
      --sub: #F3F6FA;
      --line: #D3DBE5;
      --line2: #BFCAD9;
      --ink: #0F172A;
      --mute: #58687F;
      --faint: #8494A9;
      --cyan: #2FB7DA;
      --steel: #2C4F7C;
      /* The whole page uses exactly three surfaces + one section-padding token. */
      --surface-hero: #F2EFF0;
      --surface-dark: #0F172A;
      --surface-white: #FFFFFF;
      --sec-pad: clamp(72px, 10vw, 128px);
      --display: 'Montserrat', system-ui, sans-serif;
      --body: 'IBM Plex Sans', system-ui, sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
      --pad: clamp(20px, 5vw, 72px);
      --r: 14px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      scroll-padding-top: 82px
    }

    body {
      margin: 0;
      background: var(--surface-hero);
      color: var(--ink);
      font-family: var(--body);
      font-size: 17px;
      line-height: 1.62;
      -webkit-font-smoothing: antialiased
    }

    .wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 var(--pad)
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      font-weight: 600;
      letter-spacing: -.028em;
      line-height: 1.06;
      margin: 0
    }

    p {
      margin: 0
    }

    a {
      color: inherit
    }

    [id] {
      scroll-margin-top: 90px
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--faint);
      margin: 0 0 20px
    }

    .lead {
      color: var(--mute);
      font-size: 19px;
      max-width: 48ch
    }

    header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(242, 239, 240, .86);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      transition: background .3s
    }

    header.stuck {
      background: rgba(242, 239, 240, .97)
    }

    .bar {
      display: flex;
      align-items: center;
      gap: 34px;
      height: 82px
    }

    .mark {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      font-family: var(--display);
      font-weight: 600;
      letter-spacing: .11em;
      font-size: 15px
    }

    .nav {
      display: flex;
      gap: 26px;
      margin-left: auto;
      font-size: 15px
    }

    .nav a {
      text-decoration: none;
      color: var(--mute);
      position: relative
    }

    .nav a.active {
      color: var(--ink)
    }

    .nav a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -9px;
      height: 2px;
      background: var(--cyan)
    }

    .nav a:hover {
      color: var(--ink)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      font-family: var(--body);
      font-weight: 500;
      font-size: 15px;
      padding: 12px 24px;
      border-radius: 0;
      text-decoration: none;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .18s, background .18s, border-color .18s, color .18s
    }

    .btn-primary {
      background: var(--ink);
      color: #fff
    }

    .btn-primary:hover {
      background: var(--steel)
    }

    #hdrCta {
      transition: opacity .25s ease, visibility .25s
    }

    #hdrCta.hide-over-cta {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
    }

    .btn-ghost {
      border-color: var(--line2);
      color: var(--ink)
    }

    .btn-ghost:hover {
      border-color: var(--ink);
      transform: translateY(-1px)
    }

    .btn-onink {
      background: #fff;
      color: var(--ink)
    }

    .btn-onink:hover {}

    .btn-onink-ghost {
      border-color: rgba(255, 255, 255, .28);
      color: #fff
    }

    .btn-onink-ghost:hover {
      border-color: #fff
    }

    .hero {
      padding: clamp(48px, 7vw, 92px) 0 clamp(28px, 3.5vw, 48px);
      position: relative;
      overflow: hidden
    }

    .hero-in {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1.18fr;
      gap: clamp(32px, 5vw, 72px);
      align-items: center
    }

    .hero-copy {
      max-width: 600px
    }

    .hero h1 {
      font-size: clamp(34px, 4.7vw, 58px);
      letter-spacing: -.04em
    }

    .hero h1 em {
      font-style: normal;
      color: var(--steel)
    }

    .hub {
      font-family: var(--display);
      font-weight: 500;
      letter-spacing: -.02em;
      font-size: clamp(19px, 2.3vw, 26px);
      margin-top: 20px;
      color: var(--ink)
    }

    /* typing line — choreography replicated from Benchling's hero Lottie
     ("Scrolling Text Combined", 24fps): per-glyph 125ms fades staggered
     ~42ms; underline sweeps in parallel with cubic-bezier(.507,0,.516,1);
     delete = selection box expanding cubic-bezier(0,.8,0,1) then hard cut;
     caret & underline ease home on cubic-bezier(.9,0,.1,1), offset starts. */
    .typebox {
      position: relative;
      font-family: var(--display);
      font-weight: 500;
      letter-spacing: -.02em;
      font-size: clamp(19px, 2.3vw, 26px);
      line-height: 1.3;
      min-height: 1.7em;
      margin-top: 4px
    }

    .tword {
      position: relative;
      display: inline-block;
      color: var(--steel);
      white-space: nowrap
    }

    .tchars {
      position: relative;
      z-index: 1
    }

    .tchars span {
      opacity: 0
    }

    .tsel {
      position: absolute;
      top: -.04em;
      bottom: -.08em;
      left: -2px;
      width: 0;
      z-index: 0;
      background: rgba(47, 183, 218, .28)
    }

    .tcaret {
      position: absolute;
      top: .02em;
      left: 0;
      width: 2.5px;
      height: 1.12em;
      z-index: 2;
      background: #9FB4CC;
      opacity: .8;
      animation: tblink 1s cubic-bezier(.65, 0, .35, 1) infinite
    }

    .tword.typing .tcaret {
      animation: none;
      opacity: .8
    }

    @keyframes tblink {

      0%,
      100% {
        opacity: .8
      }

      50% {
        opacity: .06
      }
    }

    .tline {
      display: none
    }

    .vh {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    .hero .lead {
      margin: 20px 0 0;
      font-size: clamp(16px, 1.8vw, 19px);
      max-width: 29rem;
      color: rgba(15, 23, 42, .8)
    }

    /* static thesis line, directly under the H1 and above the typing sub-line */
    .hero-thesis {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(17px, 1.95vw, 21px);
      line-height: 1.32;
      letter-spacing: -.012em;
      color: var(--ink);
      margin: 18px 0 0;
      max-width: 29rem
    }

    /* four-check value strip — a thin full-width band directly under the hero,
     four checks on one row at body-small size (not fine print). "Faster, and
     measured" links to the /contact measurement protocol. */
    .hero-strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--surface-hero);
      padding: 18px 0
    }

    .hero-checks {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px 24px;
      font-family: var(--body);
      font-size: 15.5px;
      color: var(--mute)
    }

    .hero-checks li {
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.4
    }

    .hero-checks li::before {
      content: "\2713";
      color: var(--cyan);
      font-weight: 600
    }

    .hero-checks a {
      color: var(--mute);
      text-decoration: underline;
      text-underline-offset: 2px
    }

    .hero-checks a:hover {
      color: var(--ink)
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px
    }

    /* (The capability strip that used to sit here moved into the hero media as the
     carousel's tab navigation — see .hg4-tabs / .hg4-callout below.) */

    /* hero media — SINGLE CONFIDENT SHOT (right column only). One product window,
     a soft brand glow behind it, floating callout cards. The window tilts gently
     toward the pointer (3D) and the cards drift; both settle on leave. */
    .hero-media {
      position: relative;
      perspective: 1500px;
      margin-top: -20px
    }

    /* align shot top with the title */
    .hg4-glow {
      position: absolute;
      inset: -9% -7% -13% -7%;
      z-index: 0;
      border-radius: 44px;
      pointer-events: none;
      background: radial-gradient(58% 58% at 72% 18%, rgba(47, 183, 218, .24), transparent 70%),
        radial-gradient(58% 58% at 18% 92%, rgba(44, 79, 124, .20), transparent 72%);
      filter: blur(12px)
    }

    .hg4 {
      position: relative;
      z-index: 1;
      transform-style: preserve-3d;
      will-change: transform
    }

    .hg4-win {
      position: relative;
      aspect-ratio: 16/10.4;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 44px 84px -42px rgba(15, 23, 42, .52)
    }

    /* Carousel frame — .hg4-slide panels swap with a FOCUS PULL, not a slide: the
     outgoing frame softens (blur), eases back in scale and fades; the incoming
     one resolves from a slightly-scaled soft blur into sharp focus. Depth + focus
     read as substitution; there is no directional travel, so it never reads as a
     second carousel. */
    .hg4-track {
      position: absolute;
      inset: 0
    }

    .hg4-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.04);
      filter: blur(12px);
      transition: opacity .55s ease, transform .8s cubic-bezier(.22, .61, .19, 1), filter .55s ease;
      will-change: opacity, transform, filter
    }

    .hg4-slide[data-active="true"] {
      opacity: 1;
      transform: scale(1);
      filter: blur(0)
    }

    .hg4-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      backface-visibility: hidden
    }

    /* M1 (carousel slide 3): zoom in inside the 16:10.4 window. Negative translate
       with a left/top origin so it pans right/down without uncovering the corner.
       Sits on the <img>; the slide's own focus-pull transform is on .hg4-slide, so
       the two do not collide. */
    .hg4-slide img.hg4-img--m1 {
      transform-origin: left top;
      transform: translate(-28%, -26%) scale(2.5)
    }

    /* M2 (carousel slide 1): same treatment as M1. */
    .hg4-slide img.hg4-img--m2 {
      transform-origin: left top;
      transform: translate(-28%, -26%) scale(2.5)
    }

    /* Compact nav — one row: the active claim as text on the left (it cross-fades
     on change), three dots on the right with the active one stretched to a short
     bar so its position reads at a glance. The dot transition shares the claim
     fade's duration so the two read as one gesture. No autoplay: the typewriter
     on the left is the only timer. A reserved row height stops the frame and the
     content below from shifting when a longer/shorter claim swaps in. */
    .hg4-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-top: 20px
    }

    .hg4-claim {
      margin: 0;
      display: flex;
      align-items: center;
      min-height: 2.8em;
      font-family: var(--body);
      font-style: italic;
      font-size: clamp(13px, 1.3vw, 15px);
      line-height: 1.4;
      color: var(--mute);
      transition: opacity .3s ease, filter .3s ease;
      will-change: opacity, filter
    }

    .hg4-claim[data-fading="true"] {
      opacity: 0;
      filter: blur(5px)
    }

    .hg4-dots {
      display: flex;
      gap: 9px;
      flex-shrink: 0
    }

    .hg4-dot {
      position: relative;
      appearance: none;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      height: 6px;
      width: 6px;
      border-radius: 3px;
      background: var(--line2);
      transition: width .25s ease, background .25s ease
    }

    /* invisible hit area — the visible dot is 6px, but the click/tap target is ~30px
     tall so it is easy to hit (the 6px dot alone is below a usable target size). */
    .hg4-dot::after {
      content: "";
      position: absolute;
      top: -12px;
      bottom: -12px;
      left: -5px;
      right: -5px
    }

    .hg4-dot:hover {
      background: var(--mute)
    }

    .hg4-dot[aria-selected="true"] {
      width: 26px;
      background: var(--cyan)
    }

    .hg4-dot:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px
    }

    @media (max-width:640px) {
      .hg4-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
      }
    }

    /* Reduced motion: instant swap — no cross-fade, focus pull, blur or dot stretch. */
    @media (prefers-reduced-motion:reduce) {

      .hg4-slide,
      .hg4-claim,
      .hg4-dot {
        transition: none !important
      }

      .hg4-slide {
        transform: none !important;
        filter: none !important
      }

      .hg4-claim[data-fading="true"] {
        filter: none !important
      }
    }

    /* Generic image lightbox — any <img class="zoomable"> opens a full-view overlay
     (capped at the viewport AND the image's own natural size). Click the backdrop
     or the ✕ (or press Esc) to close. */
    .zoomable {
      cursor: zoom-in
    }

    .lb {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15, 23, 42, .86);
      opacity: 0;
      transition: opacity .2s ease
    }

    .lb[hidden] {
      display: none
    }

    /* author display:flex would otherwise beat UA [hidden] and keep it clicking */
    .lb.open {
      opacity: 1
    }

    .lb img {
      display: block;
      max-width: min(95vw, 100%);
      max-height: 92vh;
      width: auto;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .65);
      cursor: default
    }

    .lb-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 0;
      background: rgba(255, 255, 255, .14);
      color: #fff;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s
    }

    .lb-close:hover {
      background: rgba(255, 255, 255, .26)
    }

    .lb-close:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px
    }

    @media (prefers-reduced-motion:reduce) {
      .lb {
        transition: none
      }
    }

    /* partners — placeholder logos, replace once real partners approved.
     Eyebrow left-aligned in flow, same treatment as the hero eyebrow. */
    .partners {
      padding: clamp(6px, 1.5vw, 16px) 0 clamp(26px, 4vw, 48px)
    }

    .partners .eyebrow {
      margin-bottom: 22px
    }

    /* title left, in flow */
    .logos {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(22px, 4.5vw, 58px);
      align-items: center;
      justify-content: center
    }

    .logos li {
      width: 130px;
      height: 42px;
      border: 1px dashed var(--line2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .72
    }

    .logos span {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .fnote {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--faint)
    }

    section {
      padding: var(--sec-pad) 0
    }

    .sec-head {
      max-width: 54ch;
      margin-bottom: clamp(34px, 4.2vw, 58px)
    }

    .sec-head h2 {
      font-size: clamp(29px, 4vw, 50px)
    }

    .sec-head p {
      margin-top: 20px
    }

    .why {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(20px, 2.6vw, 40px)
    }

    .why>div {
      border-top: 1px solid var(--line2);
      padding-top: 24px
    }

    .prob {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.34;
      letter-spacing: -.018em;
      margin-top: 15px
    }

    .gain {
      margin-top: 15px;
      color: var(--mute);
      font-size: 15.5px
    }

    /* Section surfaces alternate: four-card WHY on off-white, the differentiators
     row-section on white (the dark band sits above WHY). Padding carries the
     rhythm, not fixed grid rows. */
    #why {
      background: var(--surface-hero);
      padding: var(--sec-pad) 0
    }

    #different-home {
      background: var(--surface-white);
      padding: var(--sec-pad) 0
    }

    /* WHY headline — full grid width, deliberate two-line break (hard <br>),
     measure capped so it stays two lines, not a ragged wrap. Eyebrow unaffected. */
    #why .sec-head {
      max-width: none
    }

    #why .sec-head h2 {
      max-width: 34ch
    }

    /* WHY — four uniform cards, 2×2, equal rank; the eyebrow carries the
     differentiation, not the type scale. Top rule only, no fills/shadows/radius.
     Natural row heights (no fixed height, so no dead space); align-items:stretch
     + margin-top:auto keeps each row's two resolution lines on a shared baseline. */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 48px
    }

    .wcard {
      display: flex;
      flex-direction: column;
      border-top: 1px solid #D6DCE6;
      padding-top: 24px
    }

    .w-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #64748B;
      margin: 0
    }

    .w-quote {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.34;
      letter-spacing: -.018em;
      color: #0F172A;
      margin: 14px 0 0
    }

    .w-res {
      margin-top: auto;
      padding-top: 16px;
      font-size: 15.5px;
      line-height: 1.5;
      color: rgba(15, 23, 42, .55)
    }

    /* WHAT AXIOME DOES DIFFERENTLY — real H2, three alternating text/visual rows,
     then a slim full-width sovereignty band, CTA last. */
    #different-home .sec-head {
      max-width: none;
      margin-bottom: 64px
    }

    .alt-rows {
      display: flex;
      flex-direction: column;
      gap: 96px
    }

    .alt-row {
      display: flex;
      align-items: center;
      gap: clamp(32px, 5vw, 72px)
    }

    .alt-row.media-left {
      flex-direction: row-reverse
    }

    .alt-text {
      flex: 1 1 auto
    }

    .alt-text h3 {
      font-family: var(--display);
      font-weight: 600;
      letter-spacing: -.02em;
      font-size: clamp(22px, 2.4vw, 29px);
      line-height: 1.18;
      margin: 0
    }

    .alt-text p {
      margin-top: 16px;
      color: var(--mute);
      font-size: clamp(16px, 1.7vw, 18px);
      max-width: 46ch
    }

    .alt-media {
      flex: 0 0 520px;
      max-width: 520px
    }

    .alt-frame {
      aspect-ratio: 520/360;
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: var(--surface);
      overflow: hidden;
      padding: 0;
      display: flex;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 44px -32px rgba(15, 23, 42, .35)
    }

    .alt-img {
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      object-fit: cover;
      object-position: center top
    }

    /* M3 (volcano detail): zoom + shift up so the frame holds just the chart + table,
     cropping the app bar / breadcrumb above and the whitespace below. */
    .alt-img--favor {
      object-position: center top;
      transform: translateX(30px) scale(1.4) translateY(-11%)
    }

    /* M5 (interpretations): anchor top-left so the nav + title survive the crop,
     zoom from that corner to drop the empty lower half. */
    .alt-img--m5 {
      transform-origin: left top;
      transform: translate(-5%, -25%) scale(2.2)
    }

    /* M8 (differentiator row 2): zoom + offset. Negative translate with a left/top
       origin, so it pans right/down across the image without uncovering the corner. */
    .alt-img--m8 {
      transform-origin: left top;
      transform: translate(-5%, -15%) scale(1.6)
    }

    .sovereignty {
      margin-top: 96px;
      border-top: 1px solid var(--line2);
      border-bottom: 1px solid var(--line2);
      padding: 26px 0
    }

    .sovereignty p {
      font-size: clamp(16px, 1.7vw, 18.5px);
      color: var(--ink);
      line-height: 1.5;
      margin: 0
    }

    .sovereignty strong {
      font-weight: 600
    }

    /* PRODUCT OVERVIEW — underline tabs (Benchling pattern): text-only tabs on a
     full-width 1px #D6DCE6 rule, active #0F172A with a 2px #2FB7DA underline
     sitting on the rule. Cyan is used ONLY here, nowhere else in this section.
     Off-white surface so it separates from the white differentiators above. */
    #overview {
      background: var(--surface-hero);
      padding: var(--sec-pad) 0
    }

    #overview .sec-head {
      max-width: none;
      margin-bottom: clamp(28px, 3.5vw, 40px)
    }

    #overview .sec-head .lead {
      margin-top: 16px
    }

    .ov-tabs {
      display: flex;
      gap: 32px;
      border-bottom: 1px solid #D6DCE6;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none
    }

    .ov-tabs::-webkit-scrollbar {
      display: none
    }

    .ov-tab {
      font-family: var(--body);
      font-size: 16px;
      font-weight: 400;
      color: #64748B;
      background: none;
      border: 0;
      padding: 0 0 14px;
      margin-bottom: -1px;
      cursor: pointer;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color .18s, border-color .18s
    }

    .ov-tab:hover {
      color: #0F172A;
      border-bottom-color: #D6DCE6
    }

    .ov-tab[aria-selected="true"] {
      color: #0F172A;
      font-weight: 500;
      border-bottom-color: #2FB7DA
    }

    .ov-panels {
      margin-top: 48px
    }

    .ov-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
      gap: clamp(28px, 5vw, 64px);
      /* stretch, not start, so the caption column matches the media's height and the
         CTA can be pushed to the bottom of it */
      align-items: stretch
    }

    .ov-panel[hidden] {
      display: none
    }

    /* Caption column is a flex column so the CTA can sit at its foot. */
    .ov-cap {
      display: flex;
      flex-direction: column
    }

    .ov-cap-text {
      font-family: var(--display);
      font-weight: 500;
      letter-spacing: -.018em;
      font-size: clamp(19px, 2.1vw, 24px);
      line-height: 1.4;
      color: var(--ink);
      max-width: 30ch;
      margin: 0 0 32px
    }

    /* margin-top:auto drops the button to the bottom of the caption column, so it
       lines up with the foot of the screenshot. align-self keeps it from stretching
       to the full column width inside the flex column. */
    .ov-cta {
      margin-top: auto;
      align-self: flex-start
    }

    .ov-media {
      max-width: 560px;
      width: 100%;
      /* never stretch to the row height: .ov-media--clip has a border and
         overflow:hidden, so stretching would show empty space inside the frame */
      align-self: start
    }

    .ov-shot {
      aspect-ratio: 16/10;
      border: 1px dashed var(--line2);
      border-radius: 4px;
      background: repeating-linear-gradient(-45deg, var(--sub) 0 10px, transparent 10px 20px);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ov-shot span {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--faint);
      background: var(--surface);
      padding: 6px 12px;
      border: 1px solid var(--line)
    }

    /* S2 "Where it runs" — inline animated diagram in the fourth overview tab.
       Palette vars and text classes are scoped to .s2flow, so generic names like
       .mono, .org, .arrow and .divider cannot leak into the rest of the page. */
    .s2flow {
      --axiome: #0B1F3B;
      --gray: #D6DCE6;
      --off: #FFFFFF;
      --muted: #A3AEBE;
      display: block;
      width: 100%
    }

    .s2flow svg {
      display: block;
      width: 100%;
      height: auto
    }

    .s2flow .mono {
      font-family: var(--mono);
      font-weight: 500
    }

    .s2flow .t-band {
      font-size: 52px;
      letter-spacing: 5px;
      fill: var(--steel)
    }

    .s2flow .t-tag {
      font-size: 46px;
      letter-spacing: 5px;
      fill: var(--steel)
    }

    .s2flow .t-org {
      font-size: 56px;
      letter-spacing: 5px;
      fill: var(--axiome)
    }

    .s2flow .t-seg {
      font-size: 44px;
      letter-spacing: 4px;
      fill: var(--axiome)
    }

    .s2flow .t-bar {
      font-size: 40px;
      letter-spacing: 3px;
      fill: var(--steel)
    }

    .s2flow .t-bar.ghost {
      fill: var(--muted)
    }

    .s2flow .t-role {
      font-size: 38px;
      letter-spacing: 2.5px;
      fill: var(--steel)
    }

    /* real screenshot in a tab panel (replaces .ov-shot placeholder), 16:10 to match */
    .ov-img {
      display: block;
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      object-position: center top;
      border-radius: 8px;
      border: 1px solid var(--line);
      box-shadow: 0 22px 46px -28px rgba(15, 23, 42, .4)
    }

    /* A zoomed overview image needs a clipping frame: .ov-img carries its own border,
       radius and shadow and nothing clips it, so a scale() would spill across the
       layout instead of cropping. Move the frame onto the wrapper (the shadow too, or
       overflow:hidden would clip it) and let the image be cropped by it. */
    .ov-media--clip {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 22px 46px -28px rgba(15, 23, 42, .4);
      line-height: 0
    }

    .ov-media--clip .ov-img {
      border: 0;
      border-radius: 0;
      box-shadow: none
    }

    /* M2 (Explore tab): same crop as M8 in the differentiator rows. */
    .ov-img--m2 {
      transform-origin: left top;
      transform: translate(-100%, -30%) scale(2.2)
    }

    /* M4 (Review tab): same crop. */
    .ov-img--m4 {
      transform-origin: left top;
      transform: translate(-140%, -20%) scale(2.4)
    }

    /* M5 (Interpret tab): same crop. */
    .ov-img--m5 {
      transform-origin: left top;
      transform: translate(-17%, -27%) scale(2.4)
    }

    /* USE-CASE TEASERS — dark band, three 2.4:1 slots (M8 / M10 / S1). It sits
     directly under the "same room" band on the same dark surface, so the two
     read as one block: drop the band's bottom pad and the teasers' top pad. */
    .band.room-band {
      padding-bottom: clamp(36px, 4.5vw, 60px)
    }

    .teasers-sec {
      padding-top: 0
    }

    .teasers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(20px, 2.6vw, 40px)
    }

    .teaser-shot img {
      cursor: zoom-in
    }

    .teaser {
      margin: 0
    }

    .teaser-shot {
      aspect-ratio: 2.4/1;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .03)
    }

    .teaser-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block
    }

    /* M8 (stakeholder view): zoom in inside the fixed 2.4:1 frame, like M3, and
     shift 20% left to favour the finding/evidence side. */
    .teaser-img--zoom {
      transform-origin: left top;
      transform: translateX(0%) scale(1.9)
    }

    /* M10 (subject delta view): zoom in 60% inside the fixed 2.4:1 frame. */
    .teaser-img--zoom-m10 {
      transform-origin: left top;
      transform: translate(-40%, -220%) scale(4)
    }

    /* S1 (several institutions, one study): zoom in inside the fixed 2.4:1 frame.
       Negative translate with a left/top origin, like M8 and M10: it pans the frame
       further right/down across the image without ever uncovering the top-left
       corner. A positive translate would slide the image off its anchor and expose
       the dark band behind it. */
    .teaser-img--zoom-s1 {
      transform-origin: left top;
      transform: translate(-36%, -46%) scale(4)
    }

    .teaser-ph {
      display: flex;
      align-items: center;
      justify-content: center;
      border-style: dashed;
      border-color: rgba(255, 255, 255, .28)
    }

    .teaser-ph span {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4)
    }

    .teaser figcaption {
      margin-top: 18px;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(16px, 1.7vw, 19px);
      line-height: 1.36;
      letter-spacing: -.014em;
      color: #fff
    }

    .ink {
      background: var(--surface-dark);
      color: #fff
    }

    .ink .lead,
    .ink .gain,
    .ink .sec-head p {
      color: rgba(255, 255, 255, .66)
    }

    .ink .eyebrow,
    .ink .tagline {
      color: var(--cyan)
    }

    .two {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(20px, 2.6vw, 44px)
    }

    .two>div {
      border-top: 1px solid rgba(255, 255, 255, .18);
      padding-top: 24px
    }

    .ink .prob {
      color: #fff
    }

    .band {
      text-align: center;
      padding: var(--sec-pad) 0 clamp(48px, 6vw, 72px)
    }

    .band h2 {
      font-size: clamp(29px, 4.6vw, 56px);
      letter-spacing: -.035em;
      max-width: 22ch;
      margin: 0 auto
    }

    .band p {
      margin: 24px auto 0;
      color: rgba(255, 255, 255, .7);
      max-width: 54ch;
      font-size: 17.5px
    }

    .band .cta-row {
      justify-content: center;
      margin-top: 32px
    }

    /* Closing-band footnote — sans (mono is reserved for eyebrows), 13px, dimmed,
     forced to one line on desktop; middots carry 12px either side.
     Selector out-specifies `.band p` so its 17.5px/white-70%/24px don't win. */
    .band .band-meta {
      font-family: var(--body);
      font-size: 13px;
      color: #94A3B8;
      margin-top: 40px;
      line-height: 1.6;
      white-space: nowrap;
      max-width: none
    }

    .band-meta span:not(:last-child)::after {
      content: "·";
      margin: 0 12px;
      color: #94A3B8
    }

    .pointers {
      display: flex;
      flex-direction: column
    }

    .pointers a {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
      padding: 14px 0;
      border-top: 1px solid var(--line2);
      text-decoration: none;
      color: var(--ink)
    }

    .pointers a:last-child {
      border-bottom: 1px solid var(--line2)
    }

    .pointers .p-label {
      font-family: var(--display);
      font-weight: 500;
      font-size: 17px;
      letter-spacing: -.012em
    }

    .pointers .p-desc {
      color: var(--mute);
      font-size: 15px
    }

    .pointers .p-arrow {
      margin-left: auto;
      color: var(--faint);
      transition: transform .18s, color .18s
    }

    .pointers a:hover .p-arrow {
      color: var(--ink);
      transform: translateX(3px)
    }

    .continuity .sec-head {
      margin-bottom: 0
    }

    .axis-row {
      position: relative;
      height: 168px;
      margin-top: clamp(64px, 8vw, 108px)
    }

    .axis-track {
      position: absolute;
      top: 64px;
      left: 8%;
      width: 52%;
      height: 2px;
      background: rgba(255, 255, 255, .32)
    }

    .axiome-track {
      position: absolute;
      top: 64px;
      left: 78%;
      width: 12%;
      height: 2px;
      background: var(--cyan)
    }

    .station {
      position: absolute;
      top: 0;
      width: 140px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center
    }

    .station-data {
      left: 8%
    }

    .station-pipelines {
      left: 34%
    }

    .station-analysis {
      left: 60%
    }

    .axiome-station {
      left: 90%
    }

    .station .node {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .8);
      margin-top: 59px
    }

    .station .station-label {
      margin-top: 16px;
      font-family: var(--mono);
      font-size: 12.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .8)
    }

    .station.axiome-station .node {
      background: var(--cyan)
    }

    .station.axiome-station .station-label {
      color: var(--cyan)
    }

    .fragments {
      position: absolute;
      top: 0;
      left: 67%;
      width: 200px;
      height: 48px;
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(255, 255, 255, .4)
    }

    .fragments span {
      position: absolute;
      white-space: nowrap
    }

    .fragments span:nth-child(1) {
      top: 4px;
      left: 0
    }

    .fragments span:nth-child(2) {
      top: 28px;
      left: 26px
    }

    .fragments span:nth-child(3) {
      top: 0;
      left: 120px
    }

    .fragments span:nth-child(4) {
      top: 34px;
      left: 96px
    }

    .continuity-caption {
      margin-top: clamp(56px, 7vw, 92px);
      max-width: 56ch
    }

    .fragments span:nth-child(4) {
      margin-top: 8px
    }

    .uses-section {
      min-height: calc(100vh - 82px);
      display: flex;
      align-items: center;
      scroll-snap-align: start;
      padding: clamp(32px, 4vw, 56px) 0
    }

    .uc-preview {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(20px, 2.6vw, 40px)
    }

    .uc-preview>a {
      display: flex;
      flex-direction: column;
      border-top: 1px solid rgba(255, 255, 255, .18);
      padding-top: 24px;
      text-decoration: none;
      color: inherit;
      height: 100%
    }

    .uc-shot {
      aspect-ratio: 2.4/1;
      border: 1px dashed rgba(255, 255, 255, .28);
      background: rgba(255, 255, 255, .03);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px
    }

    .uc-shot span {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4)
    }

    .uc-preview h3 {
      font-size: clamp(19px, 2vw, 22px);
      letter-spacing: -.018em;
      line-height: 1.3;
      min-height: 2.6em
    }

    .uc-preview p {
      margin-top: 13px;
      color: rgba(255, 255, 255, .66);
      font-size: 15px
    }

    .learn-more {
      display: inline-block;
      margin-top: 16px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--cyan)
    }

    .uc-preview>a .learn-more {
      margin-top: auto;
      padding-top: 16px
    }

    .uc-preview>a:hover .learn-more {
      text-decoration: underline
    }

    .uc-preview-foot {
      margin-top: clamp(32px, 4vw, 48px);
      text-align: right
    }

    footer {
      background: var(--surface-dark);
      color: rgba(255, 255, 255, .6);
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding: clamp(46px, 5.5vw, 76px) 0 42px;
      font-size: 14.5px
    }

    .f-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 36px
    }

    footer h5 {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .34);
      margin: 0 0 16px;
      font-weight: 400
    }

    footer ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px
    }

    footer a {
      text-decoration: none
    }

    footer a:hover {
      color: #fff
    }

    .f-mark {
      display: flex;
      align-items: center;
      gap: 11px;
      font-family: var(--display);
      font-weight: 600;
      letter-spacing: .11em;
      font-size: 15px;
      color: #fff
    }

    .f-legal {
      margin-top: 50px;
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      font-family: var(--mono);
      font-size: 11.5px;
      color: rgba(255, 255, 255, .34);
      line-height: 2.1
    }

    .reveal {
      opacity: 0;
      transform: translateY(16px)
    }

    .reveal.in {
      opacity: 1;
      transform: none;
      transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1)
    }

    :focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
      border-radius: 4px
    }

    @media (max-width:1040px) {}

    @media (max-width:900px) {

      .why,
      .two,
      .uc-preview,
      .teasers {
        grid-template-columns: 1fr
      }

      .why-grid {
        grid-template-columns: 1fr
      }

      .alt-row,
      .alt-row.media-left {
        flex-direction: column;
        align-items: stretch;
        gap: 22px
      }

      .alt-media {
        flex-basis: auto;
        max-width: 100%
      }

      .alt-rows {
        gap: 56px
      }

      .sovereignty {
        margin-top: 56px
      }

      .ov-panel {
        grid-template-columns: 1fr;
        gap: 22px
      }

      .ov-media {
        max-width: 100%
      }

      .hero-in {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 40px)
      }

      .nav {
        display: none
      }

      .f-grid {
        grid-template-columns: 1fr 1fr
      }

      .uses-section {
        min-height: 0;
        display: block;
        scroll-snap-align: none;
        padding: clamp(60px, 7.5vw, 116px) 0
      }

      .uc-preview-foot {
        text-align: left
      }

      .axis-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        height: auto;
        margin-top: clamp(32px, 4vw, 44px)
      }

      .axis-track,
      .axiome-track {
        display: none
      }

      .station {
        position: static;
        width: auto;
        transform: none;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        text-align: left
      }

      .station .node {
        margin-top: 0
      }

      .station .station-label {
        margin-top: 0
      }

      .fragments {
        position: static;
        width: auto;
        height: auto;
        margin: 6px 0 6px 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px
      }

      .fragments span {
        position: static;
        top: auto;
        left: auto
      }

      .axiome-station {
        margin-top: 22px
      }

      .pointers a {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
      }

      .pointers .p-arrow {
        margin-left: 0
      }
    }

    @media (max-width:640px) {
      .band .band-meta {
        white-space: normal;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        line-height: 1.5
      }

      .band-meta span:not(:last-child)::after {
        content: none
      }
    }

    @media (max-width:560px) {
      body {
        font-size: 16px
      }

      .f-grid {
        grid-template-columns: 1fr
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      .reveal {
        opacity: 1;
        transform: none
      }

      html {
        scroll-behavior: auto;
        scroll-snap-type: none
      }
    }