:root {
      --base: #F2EFF0;
      --surface-hero: #F2EFF0;
      --surface-dark: #0F172A;
      --surface-white: #FFFFFF;
      --sec-pad: clamp(72px, 10vw, 128px);
      --surface: #FFFFFF;
      --sub: #F3F6FA;
      --line: #D3DBE5;
      --line2: #BFCAD9;
      --ink: #0F172A;
      --mute: #58687F;
      --faint: #8494A9;
      --cyan: #2FB7DA;
      --steel: #2C4F7C;
      --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
    }

    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)
    }

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

    .btn-onink:hover {}

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

    /* Page hero — left-aligned, matching the home and platform heroes.
     Centring here was the first break in the page's vertical rhythm:
     every heading below it is left-aligned. */
    .page-hero {
      padding-top: clamp(48px, 7vw, 92px);
      padding-bottom: clamp(28px, 3.5vw, 48px)
    }

    /* Two-column hero — same grid, proportions and copy width as the home hero. */
    .page-hero-in {
      display: grid;
      grid-template-columns: 1fr 1.18fr;
      gap: clamp(32px, 5vw, 72px);
      align-items: center
    }

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

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

    .page-hero .lead {
      margin: 20px 0 0;
      font-size: clamp(16px, 1.8vw, 19px);
      max-width: 56ch
    }

    /* Hero media — identical frame to the home hero window (.hg4-win): borderless,
       rounded 16px, strong shadow, no inner padding; the screenshot fills it. */
    .hero-media {
      position: relative;
      margin-top: -20px
    }

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

    .hero-shot .ph {
      width: 100%;
      height: 100%;
      border: 1px dashed var(--line2);
      border-radius: 8px;
      background: repeating-linear-gradient(-45deg, var(--sub) 0 10px, transparent 10px 20px);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .hero-shot .ph 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)
    }

    /* real screenshot replacing the placeholder */
    .hero-shot>img {
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      object-fit: cover;
      object-position: center top;
      border-radius: 8px
    }

    /* M8 hero: zoom + offset, matching the index M8 teaser. */
    .hero-img--zoom {
      transform-origin: left top;
      transform: translate(-18%, -20%) scale(2.1)
    }

    /* Single section rhythm token, shared with the home page. This page was on
     clamp(40px,5.5vw,80px), roughly half the home value, which is why the
     sections read as compressed against the rest of the site. */
    section {
      padding: var(--sec-pad) 0
    }

    .ink {
      background: var(--surface-dark);
      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
    }

    .band .band-meta {
      font-family: var(--body);
      font-size: 13px;
      color: #94A3B8;
      margin-top: 40px;
      white-space: nowrap;
      max-width: none
    }

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

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

    .tagline {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .prob {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(19px, 2.2vw, 25px);
      line-height: 1.4;
      letter-spacing: -.018em;
      margin-top: 15px;
      max-width: 64ch
    }

    /* Underline tabs — same system as the homepage 'What it looks like' section:
     text-only, inactive #64748B, active #0F172A with a 2px cyan underline on a
     full-width 1px #D6DCE6 rule; hover shows a grey underline for affordance.
     overflow-x:auto clips vertically as well, which was cutting the active
     underline sitting at margin-bottom:-1px. Scrolling is only needed on narrow
     viewports, so it moves into the media query and stays visible here. */
    .uc-tabs {
      display: flex;
      gap: 32px;
      border-bottom: 1px solid #D6DCE6;
      margin-bottom: clamp(30px, 4vw, 44px)
    }

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

    .uc-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
    }

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

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

    /* No border and no padding on the panel container. The bordered card read as
     a widget bolted onto the page and had no counterpart on the home page.
     All panels share ONE grid cell, so the container is always as tall as the
     tallest panel and switching tabs never shifts the page. Hidden panels use
     visibility (not display:none) so they still contribute their height; they
     stay in the DOM, remain crawlable, and carry `inert` so assistive tech and
     keyboard focus skip them. */
    .uc-panels {
      display: grid
    }

    .uc-panels>.uc-body {
      grid-area: 1 / 1;
      visibility: hidden
    }

    .uc-panels>.uc-body.on {
      visibility: visible;
      animation: fade .3s ease
    }

    @keyframes fade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .uc-body>h3 {
      font-size: clamp(23px, 2.8vw, 32px);
      margin-bottom: 8px
    }

    .uc-who {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--faint);
      letter-spacing: .02em
    }

    .case {
      padding: 26px 0;
      border-top: 1px solid var(--line)
    }

    .case-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(20px, 3vw, 52px)
    }

    .case q {
      display: block;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(17px, 1.85vw, 20px);
      line-height: 1.4;
      letter-spacing: -.016em;
      font-style: normal
    }

    .side-lbl {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .side-val {
      font-size: 15px;
      margin-top: 8px;
      color: var(--mute)
    }

    .side-val strong {
      color: var(--ink);
      font-weight: 500
    }

    .side-block+.side-block {
      margin-top: 18px
    }

    .field-note {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--faint);
      margin-top: clamp(44px, 5.5vw, 72px);
      padding-top: 22px;
      border-top: 1px solid var(--line)
    }

    /* Boundary note. Previously set at .prob display scale, which made the
     page's last word a disqualification. Dropped to body scale so it reads
     as an honest aside, and given its own vertical room so it does not sit
     squeezed between the tab panel and what follows. */
    .disqualifier {
      margin-top: clamp(36px, 4.5vw, 56px)
    }

    .disqualifier p {
      font-size: 16px;
      color: var(--mute);
      max-width: none
    }

    .disqualifier strong {
      color: var(--ink);
      font-weight: 500
    }

    .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
    }

    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
    }


    @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:900px) {
      .page-hero-in {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 40px)
      }

      .uc-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px
      }

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

      .nav {
        display: none
      }

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

    @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
      }
    }

    /* Generic image lightbox — any <img class="zoomable"> opens a full-view overlay. */
    .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
    }

    .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
      }
    }