/* ───────── tokens (S-Docs editorial-dark) ───────── */
    :root {
      --bg:                 #141416;   /* page canvas — dark grey */
      --bg-light:           #FAFAF9;

      --surface-card:       #0A0A0A;   /* inset/card surface — near-black, intentionally darker than canvas */
      --surface-light-card: #F4F4F2;

      --text-primary:       #F4F4F2;
      --text-secondary:     #A1A1A1;
      --text-tertiary:      #6B6B6B;
      --text-on-light:      #0A0A0A;
      --text-on-light-sec:  #5C5C5C;

      --accent:             #FF7A59;
      --accent-hover:       #FF6B47;
      --accent-bg:          rgba(255, 122, 89, 0.12);
      --atmosphere-cyan:    oklch(from var(--accent) 0.7 0.14 calc(h + 145));
      --atmosphere-blue:    oklch(from var(--accent) 0.62 0.18 calc(h + 190));
      --atmosphere-violet:  oklch(from var(--accent) 0.62 0.19 calc(h + 255));
      --hero-fluid-blue:    #1A7DCE;
      --hero-fluid-cyan:    #37ACD9;
      --hero-fluid-violet:  #655EB8;

      --border-subtle:      rgba(255, 255, 255, 0.06);
      --border-light:       rgba(0, 0, 0, 0.08);
      --token-bg:           rgba(255, 255, 255, 0.05);
      --token-bg-light:     rgba(0, 0, 0, 0.05);

      --font-display: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
      --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

      /* type scale — clamped between mobile (≤640) and desktop targets */
      --fs-h1:   clamp(40px, 7.4vw, 96px);
      --fs-pos:  clamp(32px, 4.6vw, 56px);
      --fs-h2:   clamp(26px, 3.4vw, 40px);
      --fs-section: clamp(30px, 3.9vw, 50px);
      --fs-h3:   clamp(20px, 1.9vw, 24px);
      --fs-lead: clamp(17px, 1.5vw, 19px);
      --fs-body: 17px;
      --fs-small:15px;
      --fs-cap:  13px;
      --fs-eye:  11px;

      /* grid */
      --frame: 1440px;
      --pad:   clamp(24px, 5vw, 64px);
      --rhythm:clamp(96px, 11vw, 160px);
      --rhythm-end: clamp(120px, 14vw, 200px);

      /* features DECK (05): the numbered menu bar pins 60px from the top — directly
         under the (tightened) topnav, which is sized to match --nav-h. blocks pin
         below the bar at --deck-top and center their panel in the viewport. */
      --nav-h:   84px;
      --toc-h:   52px;
      --toc-gap: 60px;                                          /* #2: air between nav and pinned menu bar */
      --deck-top: calc(var(--nav-h) + var(--toc-gap) + var(--toc-h));
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.6;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; color: inherit; }
    p { margin: 0; text-wrap: pretty; }
    h1, h2, h3 { margin: 0; text-wrap: balance; }

    /* ───────── primitives ───────── */
    .frame { max-width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
    .section { padding-block: var(--rhythm); }
    .section--end { padding-block: var(--rhythm-end); }
    .on-light { background: var(--bg-light); color: var(--text-on-light); }

    .eyebrow {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--fs-eye);
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      margin: 0 0 24px;
    }
    .on-light .eyebrow { color: var(--text-on-light-sec); }

    .h1 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--fs-h1);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
    .h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--fs-h2);
      line-height: 1.15;
      letter-spacing: -0.01em;
    }
    .section-headline { font-size: var(--fs-section); line-height: 1.08; }
    .h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--fs-h3);
      line-height: 1.25;
    }
    .lead {
      font-family: var(--font-body);
      font-size: var(--fs-lead);
      line-height: 1.5;
      color: var(--text-primary);
    }
    .cap { font-family: var(--font-body); font-size: var(--fs-cap); color: var(--text-secondary); line-height: 1.5; }

    /* ───────── buttons ───────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: var(--fs-small);
      line-height: 1;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 14px 24px;
      transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
      white-space: nowrap;
    }
    .btn:active { transform: translateY(1px); }
    .btn--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
    .signup-cta { color: #fff; }
    .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
    .btn--outline {
      background: transparent;
      color: var(--text-primary);
      border-color: color-mix(in oklab, var(--text-primary) 42%, transparent);
    }
    .btn--outline:hover { background: color-mix(in oklab, var(--text-primary) 10%, transparent); border-color: var(--text-primary); }
    .btn--outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .btn--ghost { background: transparent; color: var(--text-primary); padding-inline: 4px; border-radius: 0; }
    .btn--ghost .arw { transition: transform .15s ease; color: var(--accent); }
    .btn--ghost:hover .arw { transform: translateX(4px); }
    .on-light .btn--ghost { color: var(--text-on-light); }
    .btn--login { background: transparent; color: var(--text-secondary); padding: 10px 4px; }
    .btn--login:hover { color: var(--text-primary); }
    .hero-signup { padding: 18px 36px; font-size: var(--fs-lead); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
    .hero-signup:hover { transform: scale(1.06); }
    .hero-demo {
      padding: 18px 36px;
      border-color: color-mix(in oklab, var(--text-primary) 34%, transparent);
      border-radius: 999px;
      font-size: var(--fs-lead);
      transition: transform .2s ease, border-color .2s ease, color .2s ease;
    }
    .hero-demo:hover { border-color: var(--text-primary); transform: scale(1.06); }

    /* ───────── topnav ───────── */
    .topnav {
      position: absolute; inset: 0 0 auto; z-index: 50;
      background: transparent;
      border-bottom: 0;
    }
    /* The first masthead belongs to the hero. After its CRM logo row has passed,
       JS promotes this same header to the viewport and brings it in from above. */
    .topnav.is-pinned {
      position: fixed;
      inset: 0 0 auto;
      background: color-mix(in oklab, var(--bg) 86%, transparent);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      animation: topnav-enter 200ms ease-out both;
    }
    @keyframes topnav-enter {
      from { opacity: 0; transform: translateY(-100%); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .topnav.is-pinned { animation: none; }
    }
    .topnav-inner { display: flex; align-items: center; gap: 40px; padding-block: 20px; }
    .brand { display: inline-flex; color: var(--text-primary); }
    .brand-logo { width: 128px; height: auto; }
    .navlinks { display: flex; gap: 32px; margin-left: 8px; }
    .navlinks a { font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary); }
    .navlinks a:hover { color: var(--text-primary); }
    .nav-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
    .nav-ai-cta { display: none; }
    .topnav.is-pinned .nav-ai-cta { display: inline-flex; }

    /* ───────── 01 hero ───────── */
    main { margin-top: 0; }
    .hero {
      position: relative;
      isolation: isolate;
      padding-top: calc(90px + var(--nav-h));
      padding-bottom: 0;
      overflow: hidden;
    }
    /* Quiet fallback behind the WebGL field. It remains visible for reduced motion
       and browsers without WebGL2, with no line or dot motifs. */
    .hero::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: -18% -12% -10%;
      pointer-events: none;
      opacity: .62;
      background:
        radial-gradient(ellipse 56% 62% at 18% 24%, color-mix(in oklab, var(--hero-fluid-violet) 76%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 54% at 80% 22%, color-mix(in oklab, var(--hero-fluid-blue) 72%, transparent), transparent 72%),
        radial-gradient(ellipse 48% 42% at 58% 64%, color-mix(in oklab, var(--accent) 64%, transparent), transparent 74%),
        radial-gradient(ellipse 58% 38% at 20% 80%, color-mix(in oklab, var(--hero-fluid-cyan) 58%, transparent), transparent 76%);
      filter: blur(46px) saturate(1.36);
    }
    .hero-atmosphere {
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      background: var(--bg);
      -webkit-mask-image: linear-gradient(to bottom, var(--text-primary) 0%, var(--text-primary) 68%, transparent 100%);
      mask-image: linear-gradient(to bottom, var(--text-primary) 0%, var(--text-primary) 68%, transparent 100%);
    }
    .hero-atmosphere::after {
      content: '';
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(to right, color-mix(in oklab, var(--bg) 70%, transparent) 0%, color-mix(in oklab, var(--bg) 58%, transparent) 42%, color-mix(in oklab, var(--bg) 32%, transparent) 67%, transparent 86%),
        linear-gradient(to bottom, color-mix(in oklab, var(--bg) 38%, transparent), transparent 38%, color-mix(in oklab, var(--bg) 30%, transparent));
    }
    .hero-fluid-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      opacity: 0;
      filter: saturate(1.14) contrast(1.12) brightness(.78);
      transform: scale(1.025);
      transition: opacity 1.2s ease;
      will-change: opacity;
    }
    .hero.is-fluid-ready .hero-fluid-canvas { opacity: 1; }
    .hero .hero-content-and-logo-bar {
      position: relative;
      z-index: 1;
      padding-inline: calc(var(--pad) + 60px);
    }
    /* Darken into the page canvas beneath the logo band without affecting content. */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: linear-gradient(to bottom,
        transparent 0%,
        transparent 42%,
        color-mix(in oklab, var(--bg) 26%, transparent) 68%,
        var(--bg) 100%);
    }
    .hero-stack { margin-top: 0; margin-bottom: 120px; max-width: 1248px; }
    .hero .h1 { font-family: var(--font-display); font-size: clamp(34px, 5.4vw, 67px); letter-spacing: -0.035em; word-spacing: -0.3em; margin-bottom: 24px; }
    .hero-sub { max-width: 594px; margin-bottom: 40px; color: color-mix(in oklab, var(--text-primary) 72%, var(--text-secondary)); }
    .cta-pair { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
    .hero-cta-group, .closing-cta-group { display: inline-grid; justify-items: center; }
    .hero-announcement {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
      font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; color: var(--accent);
    }
    .hero-announcement span { color: var(--text-secondary); }
    .hero-announcement:hover span { color: var(--text-primary); }
    .hero-note { margin: 18px 0 36px; color: color-mix(in oklab, var(--text-primary) 66%, var(--text-secondary)); font-size: var(--fs-small); text-align: center; }
    .works-with { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 100px; color: var(--text-secondary); }
    .works-label { font-family: var(--font-display); font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
    .works-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: clamp(18px, 2.2vw, 32px); width: 100%; }
    .integration-logo {
      display: block;
      width: 100%;
      height: clamp(22px, 2.1vw, 30px);
      object-fit: contain;
      object-position: center;
      filter: brightness(0) invert(1);
      transform: scale(var(--integration-logo-scale, 1));
      opacity: .9;
    }
    .integration-logo--salesforce { --integration-logo-scale: 1.55; }
    .integration-logo--google-sheets { --integration-logo-scale: .9; }
    .integration-logo--airtable { --integration-logo-scale: .96; }
    .integration-logo--pipedrive { --integration-logo-scale: .9; }
    .integration-logo--servicenow { --integration-logo-scale: .8; }

    /* animated doc-type word — vertical slot roll; auto-width column, clipped to one line */
    .roller {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
      height: 1.05em;
      vertical-align: bottom;
      color: var(--accent);
    }
    .roller-track {
      display: flex;
      flex-direction: column;
      transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    }
    .roller-word {
      height: 1.05em;
      line-height: 1.05;
      white-space: nowrap;
    }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .roller-track { transition: none; }
      .hero-fluid-canvas, .closing-fluid-canvas { display: none; }
      .ai-intro::before { animation: none; }
    }

    .hero-ui-wrap { padding: 0; position: relative; overflow-x: clip; }
    /* Linear-style metallic silver glow — a true linear sheen pooling low behind the screenshot,
       contained to the hero so it never bleeds into the pillars below */
    .hero-ui-wrap::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 120%;
      max-width: 1600px;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background:
        /* vertical metallic band: dark up top → bright silver low */
        linear-gradient(to bottom,
          transparent 0%,
          transparent 42%,
          rgba(176, 188, 210, 0.20) 68%,
          rgba(236, 240, 248, 0.34) 88%,
          rgba(120, 134, 160, 0.14) 100%),
        /* darken the sides so the band reads as a centered glow */
        linear-gradient(to right,
          #141416 0%,
          transparent 22%,
          transparent 78%,
          #141416 100%);
      filter: blur(40px);
    }
    .hero-ui {
      position: relative;
      z-index: 1;
      border-radius: 14px 14px 0 0;
      border: 1px solid var(--border-subtle);
      border-bottom: 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
      overflow: hidden;
      background: var(--surface-card);
    }
    .hero-ui img { width: 100%; height: auto; }

    /* === Product workflow showcase === */
    .workflow-showcase { padding-top: 0; }
    .workflow-showcase .frame { padding-inline: 0; }
    .workflow-stage { display: flex; flex-direction: column; gap: 28px; }
    .workflow-shot-card {
      position: relative; width: calc(100% - (2 * var(--pad))); max-height: 700px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden;
      background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px;
      box-shadow: 0 32px 64px -32px rgba(0,0,0,.6); cursor: pointer; scroll-margin-top: 100px;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    @media (prefers-reduced-motion: no-preference) {
      .workflow-shot-card:hover { transform: scale(1.02); box-shadow: 0 38px 72px -32px rgba(0,0,0,.72); }
    }
    .workflow-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .4s ease; }
    .workflow-frame.is-active { opacity: 1; }
    .workflow-play {
      position: absolute; top: 50%; left: 50%; z-index: 2;
      display: grid; width: 76px; height: 76px; place-items: center;
      border: 1px solid color-mix(in oklab, var(--text-primary) 68%, transparent);
      border-radius: 999px;
      background: color-mix(in oklab, var(--bg) 62%, transparent);
      color: var(--text-primary);
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .workflow-play svg { width: 30px; height: 30px; margin-left: 3px; }
    .workflow-shot-card:hover .workflow-play {
      border-color: var(--text-primary);
      background: color-mix(in oklab, var(--bg) 76%, transparent);
      transform: translate(-50%, -50%) scale(1.08);
    }
    .workflow-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 3vw, 48px); max-width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
    .workflow-tab {
      display: block; position: relative; padding: 18px 30px 0; border: 0; border-top: 1px solid var(--border-subtle);
      background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; font: inherit; transition: color .2s ease;
    }
    .workflow-tab:hover, .workflow-tab.is-active { color: var(--text-primary); }
    .workflow-tab-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; transform: translateY(-100%); }
    .workflow-tab-line i { display: block; width: 0; height: 100%; background: var(--accent); }
    .workflow-tab-title { display: block; margin-bottom: 14px; color: inherit; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.22; }
    .workflow-tab-body { display: block; font-size: .95rem; line-height: 1.5; }
    .workflow-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

    /* === Integrations === */
    .integrations { background: var(--bg); }
    .integrations-head { max-width: 660px; margin-bottom: clamp(48px, 6vw, 80px); }
    .integrations-head .section-headline { margin-bottom: 24px; }
    .integrations-head .lead { color: var(--text-secondary); }
    .integrations-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid color-mix(in oklab, var(--text-primary) 20%, transparent);
      border-left: 1px solid color-mix(in oklab, var(--text-primary) 20%, transparent);
    }
    .integration-cell {
      display: flex;
      min-height: 132px;
      align-items: center;
      justify-content: center;
      padding: 28px;
      border-right: 1px solid color-mix(in oklab, var(--text-primary) 20%, transparent);
      border-bottom: 1px solid color-mix(in oklab, var(--text-primary) 20%, transparent);
    }
    .integration-cell .integration-logo { width: min(100%, 132px); height: 30px; }
    .works-with .integration-logo,
    .integration-cell .integration-logo { opacity: .62; }
    .integration-wordmark {
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: clamp(18px, 1.8vw, 26px);
      font-weight: 600;
      letter-spacing: -.05em;
      line-height: 1;
      opacity: .9;
      white-space: nowrap;
    }
    .integration-wordmark--box { font-weight: 500; letter-spacing: -.09em; }
    .integration-wordmark--dropbox { font-size: clamp(17px, 1.55vw, 23px); letter-spacing: -.04em; }
    .integration-wordmark--sendgrid { font-size: clamp(17px, 1.55vw, 23px); letter-spacing: -.06em; }
    .integration-wordmark--twilio { font-weight: 500; letter-spacing: -.08em; }
    .integration-wordmark--google-drive { font-size: clamp(16px, 1.45vw, 22px); letter-spacing: -.06em; }

    /* === S-Docs AI === */
    .ai-intro {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--bg);
      color: var(--text-primary);
      padding-block: 150px;
    }
    .ai-intro::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: -12% -8% -10%;
      pointer-events: none;
      opacity: .98;
      background:
        radial-gradient(ellipse 54% 52% at 8% 89%, color-mix(in oklab, var(--atmosphere-violet) 71%, transparent), transparent 68%),
        radial-gradient(ellipse 45% 65% at 82% 86%, color-mix(in oklab, var(--atmosphere-blue) 69%, transparent), transparent 70%),
        radial-gradient(ellipse 43% 48% at 52% 66%, color-mix(in oklab, var(--accent) 62%, transparent), transparent 69%),
        radial-gradient(ellipse 56% 31% at 43% 100%, color-mix(in oklab, var(--atmosphere-cyan) 54%, transparent), transparent 75%),
        conic-gradient(from 232deg at 47% 84%, transparent 0deg 36deg, color-mix(in oklab, var(--atmosphere-blue) 34%, transparent) 94deg, transparent 156deg 236deg, color-mix(in oklab, var(--atmosphere-violet) 24%, transparent) 286deg, transparent 336deg),
        radial-gradient(ellipse 66% 62% at 50% 100%, transparent 20%, color-mix(in oklab, var(--bg) 63%, transparent) 100%);
      background-blend-mode: screen, screen, screen, screen, soft-light, normal;
      filter: blur(14px) saturate(1.3);
      animation: aiAtmosphere 30s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    }
    .ai-intro::after {
      content: '';
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to bottom,
        var(--bg) 0%,
        var(--bg) 20%,
        color-mix(in oklab, var(--bg) 92%, transparent) 38%,
        color-mix(in oklab, var(--bg) 72%, transparent) 56%,
        color-mix(in oklab, var(--bg) 34%, transparent) 76%,
        transparent 96%);
    }
    .ai-intro .frame { position: relative; z-index: 1; }
    @keyframes aiAtmosphere {
      0% { background-position: -4% 3%, 5% 4%, -2% -3%, 4% -4%, 0 0, 0 0; transform: scale(1.04) translate3d(-1%, .8%, 0) rotate(-2deg); }
      100% { background-position: 5% -4%, -4% -3%, 4% 5%, -3% 4%, 8% -5%, 0 0; transform: scale(1.12) translate3d(1%, -.7%, 0) rotate(2deg); }
    }
    .ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
    .ai-intro .eyebrow { color: var(--text-secondary); }
    .ai-intro-copy .h2 { margin-bottom: 20px; color: var(--text-primary); }
    .ai-intro-copy .lead { margin-bottom: 24px; color: var(--text-secondary); }
    .ai-cta-group { display: inline-grid; justify-items: center; }
    .ai-note { margin: 10px 0 0; color: var(--text-secondary); font-size: var(--fs-small); text-align: center; }
    .ai-cta {
      padding: 16px 30px;
      border-color: color-mix(in oklab, var(--text-primary) 46%, transparent);
      background: color-mix(in oklab, var(--bg) 34%, transparent);
      color: var(--text-primary);
      font-size: 16px;
    }
    .ai-cta:hover { border-color: var(--text-primary); background: color-mix(in oklab, var(--bg) 62%, transparent); }
    .ai-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .ai-cards article { min-height: 220px; padding: 28px; background: color-mix(in oklab, var(--surface-card) 62%, transparent); border: 1px solid var(--border-subtle); border-radius: 14px; backdrop-filter: blur(16px); }
    .ai-cards h3 { margin: 0 0 14px; color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.22; }
    .ai-cards p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.55; }

    /* === S-Docs AI invite dialog === */
    .ai-dialog {
      width: min(720px, calc(100% - 48px));
      max-height: min(860px, calc(100% - 48px));
      margin: auto;
      padding: clamp(28px, 4vw, 48px);
      overflow: auto;
      color: var(--text-primary);
      background: var(--surface-card);
      border: 1px solid var(--border-subtle);
      border-radius: 18px;
      box-shadow: 0 32px 64px -24px color-mix(in oklab, var(--bg) 74%, transparent);
    }
    .ai-dialog::backdrop { background: color-mix(in oklab, var(--bg) 76%, transparent); backdrop-filter: blur(8px); }
    .ai-dialog-close {
      position: absolute; top: 18px; right: 18px;
      display: grid; width: 34px; height: 34px; place-items: center;
      padding: 0;
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      background: transparent;
      color: var(--text-secondary);
      font-size: 22px;
      line-height: 1;
      transition: color .2s ease, border-color .2s ease;
    }
    .ai-dialog-close:hover { border-color: var(--text-primary); color: var(--text-primary); }
    .ai-dialog-panel .eyebrow { margin-bottom: 16px; }
    .ai-dialog-panel .h2 { max-width: 19ch; color: var(--text-primary); }
    .ai-dialog-copy { max-width: 58ch; margin: 16px 0 28px; color: var(--text-secondary); }
    .invite-code-form { display: grid; gap: 24px; }
    .invite-code-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
    .invite-code-inputs input,
    .ai-request-form input,
    .ai-request-form select {
      width: 100%;
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      background: transparent;
      color: var(--text-primary);
      font: inherit;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .invite-code-inputs input { height: 58px; padding: 0; text-align: center; font-family: var(--font-display); font-size: 24px; }
    .ai-request-form input, .ai-request-form select { height: 48px; padding: 0 14px; }
    .invite-code-inputs input:focus,
    .ai-request-form input:focus,
    .ai-request-form select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
    .invite-code-submit { justify-self: start; }
    .ai-dialog-help { margin-top: 24px; color: var(--text-secondary); font-size: var(--fs-small); }
    .ai-dialog-link { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; }
    .ai-dialog-link:hover { color: var(--text-primary); text-decoration: underline; }
    .ai-request-form { display: grid; gap: 24px; }
    .ai-request-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .ai-request-grid label { display: grid; gap: 8px; color: var(--text-secondary); font-size: var(--fs-small); }
    .ai-request-status { min-height: 1.5em; color: var(--accent); font-size: var(--fs-small); }

    /* === AI template setup === */
    .ai-dialog:has(.ai-template-flow.is-active) {
      width: min(800px, calc(100% - 48px));
      height: min(600px, calc(100% - 48px));
      max-height: min(600px, calc(100% - 48px));
      padding: 0;
      overflow: visible;
    }
    .ai-template-flow { height: 100%; }
    .ai-dialog [hidden] { display: none !important; }
    .template-flow-layout { height: 100%; }
    .template-flow-main { display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 38px 44px 22px; }
    .template-flow-step { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; }
    .template-flow-step .eyebrow { margin-bottom: 14px; }
    .template-flow-step .h2 { max-width: 20ch; color: var(--text-primary); }
    .template-flow-step .h2:focus { outline: 0; }
    .template-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .template-upload-field { margin-top: 22px; }
    .template-dropzone { display: grid; min-height: 210px; padding: 28px; place-items: center; align-content: center; gap: 9px; border: 1px dashed color-mix(in oklab, var(--text-primary) 28%, transparent); border-radius: 14px; background: color-mix(in oklab, var(--token-bg) 54%, transparent); color: var(--text-secondary); text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
    .template-dropzone:hover, .template-dropzone:focus-visible, .template-dropzone.is-dragging { border-color: var(--accent); background: var(--accent-bg); outline: 0; }
    .template-dropzone-icon { display: grid; width: 48px; height: 48px; margin-bottom: 6px; place-items: center; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--accent); background: var(--surface-card); }
    .template-dropzone-icon svg { width: 22px; height: 22px; }
    .template-dropzone strong { color: var(--text-primary); font-size: var(--fs-small); font-weight: 500; }
    .template-dropzone span { font-size: var(--fs-small); }
    .template-dropzone b { color: var(--accent); font-weight: 500; }
    .template-dropzone small { margin-top: 5px; color: var(--text-tertiary); font-size: 12px; }
    .template-file-selected { display: flex; min-height: 210px; padding: 28px; align-items: center; gap: 16px; border: 1px solid color-mix(in oklab, var(--accent) 66%, transparent); border-radius: 14px; background: color-mix(in oklab, var(--accent-bg) 56%, transparent); }
    .template-file-selected-icon { display: grid; flex: 0 0 auto; width: 48px; height: 48px; place-items: center; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-card); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
    .template-file-selected-details { display: grid; min-width: 0; gap: 5px; }
    .template-file-selected-details strong { overflow: hidden; color: var(--text-primary); font-size: var(--fs-small); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .template-file-selected-details span { color: var(--text-secondary); font-size: 12px; }
    .template-file-remove { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-small); cursor: pointer; }
    .template-file-remove:hover { color: var(--text-primary); text-decoration: underline; }
    .template-file-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .template-file-status { min-height: 24px; margin-top: 12px; color: var(--text-secondary); font-size: var(--fs-small); }
    .template-file-status.is-error { color: var(--accent); }
    .template-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
    .template-option { position: relative; display: grid; min-height: 88px; padding: 14px; align-content: space-between; border: 1px solid var(--border-subtle); border-radius: 12px; background: color-mix(in oklab, var(--surface-card) 64%, transparent); color: var(--text-secondary); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
    .template-option input { position: absolute; opacity: 0; pointer-events: none; }
    .template-option:hover { border-color: color-mix(in oklab, var(--text-primary) 32%, transparent); color: var(--text-primary); }
    .template-option.is-selected { border-color: var(--accent); background: var(--accent-bg); color: var(--text-primary); box-shadow: 0 0 0 1px var(--accent); }
    .template-option-logo { width: 78px; height: 29px; --integration-logo-color: var(--text-primary); }
    .template-option > span:last-child { font-size: 13px; font-weight: 500; }
    .template-option--text { align-content: center; }
    .template-object-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
    .template-object-list .template-option { display: flex; min-height: 58px; align-items: center; padding: 16px; }
    .template-object-list .template-option::after { width: 16px; height: 16px; margin-left: auto; border: 1px solid var(--text-tertiary); border-radius: 999px; content: ''; }
    .template-object-list .template-option.is-selected::after { border: 5px solid var(--accent); }
    .template-flow-footer { display: flex; min-height: 68px; align-items: end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border-subtle); }
    .template-flow-back { color: var(--text-secondary); }
    .template-flow-next { margin-left: auto; }
    .template-flow-next:disabled { cursor: not-allowed; background: color-mix(in oklab, var(--text-secondary) 44%, transparent); border-color: transparent; color: color-mix(in oklab, var(--bg) 80%, transparent); }
    .template-building { display: grid; align-content: start; padding-bottom: 20px; }
    .ai-dialog > :not(.template-confetti):not(.ai-dialog-close) { position: relative; z-index: 1; }
    .template-confetti { position: fixed; z-index: 0; inset: 0; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none; }
    .template-confetti-piece {
      position: absolute;
      top: var(--confetti-top);
      left: var(--confetti-left);
      width: var(--confetti-width);
      height: var(--confetti-height);
      border-radius: var(--confetti-radius, 1px);
      background: var(--confetti-color);
      box-shadow: 0 2px 8px color-mix(in oklab, var(--confetti-color) 62%, transparent);
      filter: saturate(1.35) brightness(1.22);
      opacity: 0;
    }
    .template-confetti.is-active .template-confetti-piece { animation: template-confetti-fall var(--confetti-duration) cubic-bezier(.16, .84, .44, 1) var(--confetti-delay) both; }
    @keyframes template-confetti-fall {
      0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.4); }
      10% { opacity: 1; }
      68% { opacity: 1; transform: translate3d(var(--confetti-burst-x), var(--confetti-burst-y), 0) rotate(var(--confetti-rotate)) scale(1); }
      100% { opacity: 0; transform: translate3d(var(--confetti-end-x), var(--confetti-end-y), 0) rotate(var(--confetti-rotate-end)) scale(.92); }
    }
    .template-build-list { display: grid; gap: 12px; margin-top: 24px; }
    .template-build-list li { display: flex; align-items: center; gap: 12px; color: var(--text-tertiary); font-size: var(--fs-small); transition: color .2s ease; }
    .template-build-indicator { display: block; width: 20px; height: 20px; border: 1px solid var(--border-subtle); border-radius: 999px; }
    .template-build-list li.is-active { color: var(--text-primary); }
    .template-build-list li.is-active .template-build-indicator { border-color: var(--accent); border-top-color: transparent; animation: template-spin .8s linear infinite; }
    .template-build-list li.is-complete { color: var(--text-secondary); }
    .template-build-list li.is-complete .template-build-indicator { display: grid; place-items: center; border-color: var(--accent); color: var(--accent); }
    .template-build-list li.is-complete .template-build-indicator::after { content: '✓'; font-size: 13px; }
    .template-building-note { max-width: 54ch; margin-top: 24px; color: var(--text-tertiary); font-size: var(--fs-small); }
    .template-complete { display: grid; justify-items: start; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
    .template-complete p { color: var(--text-primary); font-size: var(--fs-small); }
    @media (prefers-reduced-motion: reduce) { .template-confetti { display: none; } }
    @keyframes template-spin { to { transform: rotate(360deg); } }

    /* ───────── 02 pillars ───────── */
    .head-block { max-width: 720px; margin-bottom: 64px; }
    .head-block .h2 { color: var(--text-primary); }
    .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .pcard {
      position: relative;
      background: var(--surface-card);
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      padding: 32px 32px 0;
      display: flex; flex-direction: column;
      overflow: hidden;
      min-height: 460px;
    }
    .pcard .h3 { margin-bottom: 14px; }
    .pcard p { color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.6; margin-bottom: 22px; }
    .pcard-link {
      font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
      color: var(--accent); display: inline-flex; align-items: center; gap: 7px;
      margin-bottom: 32px; align-self: flex-start;
    }
    .pcard-link .arw { transition: transform .15s ease; }
    .pcard:hover .pcard-link .arw { transform: translateX(4px); }

    /* product-UI mockup, anchored to the bottom and bleeding off the card edge */
    .pcard-visual {
      margin-top: auto;
      background: #0E0E10;
      border: 1px solid var(--border-subtle);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 -14px 40px rgba(0,0,0,0.35);
      overflow: hidden;
      font-family: var(--font-display);
      font-size: 12px; line-height: 1.5;
      transition: transform .4s cubic-bezier(.22,1,.36,1);
    }
    .pcard:hover .pcard-visual { transform: translateY(-6px); }

    /* shared mockup chrome */
    .mock-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
    .mock-bar span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.14); }

    /* card 1 — Connect: HubSpot record panel */
    .mock-record { padding: 16px; }
    .rec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
    .rec-title { color: var(--text-primary); font-weight: 500; font-size: 12.5px; letter-spacing: -0.01em; }
    .rec-stage {
      font-size: 10px; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
      color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(255,122,89,0.25);
    }
    .rec-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 0; border-top: 1px solid var(--border-subtle);
    }
    .rec-row span { color: var(--text-tertiary); }
    .rec-row b { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }

    /* card 2 — Compose: template/code editor */
    .mock-code .code { margin: 0; padding: 16px 18px; white-space: pre; tab-size: 2; }
    .c-com { color: var(--accent); }
    .c-key { color: #7AA2F7; }
    .c-str { color: #9ECE6A; }
    .c-fn  { color: var(--text-primary); }
    .c-mut { color: var(--text-tertiary); }

    /* card 3 — Close: agreement status tracker */
    .mock-doc { padding: 16px; }
    .doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
    .doc-title { color: var(--text-primary); font-weight: 500; font-size: 12.5px; letter-spacing: -0.01em; }
    .doc-badge {
      font-size: 10px; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
      color: var(--text-secondary); background: var(--token-bg); border: 1px solid var(--border-subtle);
    }
    .doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
    .doc-ico { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; }
    .doc-ico.done { background: rgba(120,200,120,0.16); color: #7FCF8A; }
    .doc-ico.wait { border: 1px solid var(--border-subtle); color: var(--text-tertiary); }
    .doc-label { color: var(--text-secondary); flex: 1; }
    .doc-status { font-size: 10.5px; color: #7FCF8A; }
    .doc-btn { font-size: 10.5px; color: var(--accent); border: 1px solid rgba(255,122,89,0.3); border-radius: 6px; padding: 3px 9px; }

    /* line-art illustrations (Connect · Compose · Close) */
    .mock-illus { padding: 18px 20px 0; }
    .illus { width: 100%; height: auto; display: block; }
    .illus text { font-family: var(--font-display); }

    /* ───────── 03 positioning ───────── */
    .pos-text {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--fs-pos);
      line-height: 1.15;
      letter-spacing: -0.035em;
      word-spacing: -0.3em;
      color: var(--text-primary);
      max-width: 1040px;
    }
    .pos-text .hl { color: var(--accent); }

    /* ───────── 04 industries carousel ───────── */
    .ind-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
    .carousel-controls { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
    .dots { display: flex; gap: 8px; }
    .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-subtle); border: 0; padding: 0; transition: background .2s ease, width .2s ease; }
    .dot[aria-current="true"] { background: var(--accent); width: 22px; }
    .arrows { display: flex; gap: 8px; }
    .arrow {
      width: 44px; height: 44px; border-radius: 999px;
      background: transparent; border: 1px solid var(--border-subtle);
      display: grid; place-items: center; color: var(--text-secondary);
      transition: border-color .15s ease, color .15s ease, background .15s ease;
    }
    .arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .arrow:disabled { opacity: 0.3; cursor: default; }
    .arrow svg { width: 18px; height: 18px; }

    /* Full-bleed BOTH sides: the viewport (track-vp) spans the entire browser width, so the
       browser edge is the only clip — cards scroll all the way to x=0 before disappearing.
       The first card is positioned under the headline via padding-left on the track itself,
       NOT by clipping the container. --track-left uses 50vw so it also drives the card width calc. */
    .ind-track { --track-left: max(var(--pad), calc(50vw - var(--frame) / 2 + var(--pad))); }
    .track-vp { overflow: hidden; }
    .track {
      display: flex; gap: 24px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding-left: var(--track-left);
      scroll-padding-left: var(--track-left);
      padding-right: var(--pad);
      padding-bottom: 4px;
      scrollbar-width: none;
      cursor: grab;
    }
    .track::-webkit-scrollbar { display: none; }
    .track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
    .track.dragging * { pointer-events: none; }
    /* card width: 2.75 cards visible within the track viewport (100vw - left gutter) */
    .icard {
      position: relative;
      flex: 0 0 calc((100vw - var(--track-left)) / 2.75 - 24px);
      aspect-ratio: 3 / 4;
      scroll-snap-align: start;
      background: #1c1c1f;
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      overflow: hidden;
      display: flex; flex-direction: column; justify-content: flex-end;
    }
    /* full-bleed background image */
    .icard-img { position: absolute; inset: 0; overflow: hidden; }
    .icard-img img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: brightness(0.92) contrast(1.02);
      transition: transform .55s cubic-bezier(.22,1,.36,1), filter .35s ease;
    }
    .icard:hover .icard-img img { transform: scale(1.05); filter: brightness(1) contrast(1.02); }
    /* darkening scrim — keeps text legible over any photo */
    .icard-scrim {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to top,
        rgba(8,8,9,0.94) 0%, rgba(8,8,9,0.85) 22%,
        rgba(8,8,9,0.45) 46%, rgba(8,8,9,0.08) 66%, transparent 82%);
    }
    /* frosted blur fade behind the text, masked so the blur dissolves upward */
    .icard-blur {
      position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 1; pointer-events: none;
      -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
      -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
              mask-image: linear-gradient(to top, #000 30%, transparent 100%);
    }
    .icard-body { position: relative; z-index: 2; padding: 30px 30px 30px; }
    .icard .ikicker {
      display: inline-block;
      font-family: var(--font-display); font-weight: 400; font-size: var(--fs-eye);
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
    }
    .icard .h3 { margin-bottom: 12px; color: var(--text-primary); text-wrap: balance; }
    .icard p { color: rgba(244,244,242,0.82); font-size: var(--fs-small); line-height: 1.55; }
    .icard-link {
      display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
      font-family: var(--font-display); font-weight: 400; font-size: var(--fs-eye);
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary);
    }
    .icard-link svg { width: 15px; height: 15px; transition: transform .2s ease; color: var(--accent); }
    .icard-link:hover { color: var(--accent); }
    .icard-link:hover svg { transform: translateX(4px); }

    /* ───────── 05a platform — dark intro (headline + sub + shot) ───────── */
    .platform-intro { background: var(--bg); color: var(--text-primary); }
    /* headline left, subheadline right — top-aligned, like the reference */
    .pi-head {
      display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(40px, 7vw, 96px); align-items: start;
    }
    .pi-headline .h2 { color: var(--text-primary); max-width: none; text-wrap: balance; }
    .pi-sub { padding-top: 6px; }
    .pi-sub .lead { color: var(--text-secondary); max-width: 46ch; }
    .pi-tag {
      display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
      font-family: var(--font-display); font-size: var(--fs-cap); letter-spacing: 0.04em;
      color: var(--text-tertiary);
    }
    .pi-tag span { color: var(--accent); transition: transform .15s ease; }
    .pi-tag:hover { color: var(--text-secondary); }
    .pi-tag:hover span { transform: translateX(4px); }

    /* large framed product shot below the head row */
    .pi-shot {
      position: relative; margin-top: clamp(48px, 6vw, 80px);
      aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
      display: grid; place-items: center;
      background: #0c0c0d;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 120px rgba(0,0,0,0.55);
    }
    .pi-shot-bg {
      position: absolute; inset: 0; z-index: 0;
      background:
        radial-gradient(at 18% 20%, hsl(18 90% 56% / .34) 0, transparent 52%),
        radial-gradient(at 84% 14%, hsl(36 90% 55% / .26) 0, transparent 48%),
        radial-gradient(at 78% 88%, hsl(8 80% 50% / .30) 0, transparent 52%),
        radial-gradient(at 8% 90%, hsl(28 55% 26% / .34) 0, transparent 55%),
        hsl(20 30% 9%);
    }
    .pi-shot-card {
      position: relative; z-index: 1;
      width: 82%; max-width: 920px;
      aspect-ratio: 16 / 10; background: #fff;
      border-radius: 12px; overflow: hidden;
      box-shadow: 0 40px 80px -28px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.1);
    }

    /* platform-intro workflow tabs */
    .pi-stage { display: flex; flex-direction: column; gap: 28px; }
    .pi-shot-card .pi-frame {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: contain;
      opacity: 0; transition: opacity .4s ease;
    }
    .pi-shot-card .pi-frame.is-active { opacity: 1; }

    .pi-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
    .pi-tab {
      display: block; text-align: left; cursor: pointer;
      background: none; border: 0; padding: 18px 0 0; margin: 0;
      font: inherit; color: var(--text-secondary);
      border-top: 1px solid var(--border-subtle);
      position: relative; transition: color .2s ease;
    }
    .pi-tab:hover { color: var(--text-primary); }
    .pi-tab-line {
      position: absolute; top: -1px; left: 0; right: 0; height: 2px;
      background: transparent; overflow: hidden;
    }
    .pi-tab-line i { display: block; height: 100%; width: 0; background: var(--text-primary); }
    .pi-tab.is-active { color: var(--text-primary); }
    .pi-tab-title { display: block; font-weight: 600; font-size: 1.05rem; color: var(--text-primary); margin-bottom: 8px; }
    .pi-tab-body { display: block; font-size: .95rem; line-height: 1.5; color: var(--text-secondary); }
    .pi-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

    @media (prefers-reduced-motion: reduce) { .pi-shot-card .pi-frame { transition: none; } }

    /* ───────── 05b features — 3-column sticky-stack (light) ───────── */
    .on-light .head-block .h2 { color: var(--text-on-light); }
    /* headline sits on its own line; air before the stack begins */
    #features .head-block { margin-bottom: 96px; }

    /* ═════════ 05c features DECK — pinned top menu bar + centered slide-up deck ═════════
       The only features section (#features-deck). Add/remove a feature = edit ONE
       <article class="fd-block">: the menu rows and active-tracking re-derive in JS.
       The section is dark (matches the rest of the page). Each block is one viewport
       tall and flex-centers its panel, so the active feature sits mid-screen; later
       blocks rise to OPAQUELY cover earlier ones — a clean slide-up wipe, no cross-fade. */
    .fd-wrap { background: var(--bg); color: var(--text-primary); padding-top: var(--rhythm); padding-bottom: 0; }
    .fd-head { max-width: 760px; margin: 0 auto; text-align: center; }
    .fd-head .h2 { color: var(--text-primary); }

    /* ── pinned numbered menu bar (generated by JS from the blocks) ──
       a centered, contained 1080px bar — NOT full-bleed across the page. pins 60px
       from the top (--nav-h), directly under the topnav. */
    .fd-toc {
      position: sticky; top: calc(var(--nav-h) + var(--toc-gap)); z-index: 40;
      width: min(1080px, calc(100% - 2 * var(--pad)));
      margin: 60px auto 0;   /* 60px breathing room above the pinned menu bar */
      height: var(--toc-h);
      display: flex; align-items: stretch;
      background: color-mix(in oklab, var(--bg) 70%, transparent);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      overflow: hidden;   /* clip active-tab highlight + ink to the rounded bar */
    }
    .fd-toc-row {
      flex: 1 1 0; min-width: 0; position: relative;
      display: flex; align-items: center; gap: 10px;
      background: transparent; border: 0; padding: 0 clamp(12px, 1.4vw, 20px);
      font-family: var(--font-display); font-weight: 400;
      font-size: var(--fs-cap); letter-spacing: 0.03em; text-transform: uppercase;
      color: var(--text-secondary);
      transition: color .2s ease, background .2s ease;
    }
    .fd-toc-row + .fd-toc-row { border-left: 1px solid var(--border-subtle); }
    .fd-toc-row:hover { color: var(--text-primary); }
    .fd-toc-num { flex: none; font-size: var(--fs-eye); color: var(--text-secondary); transition: color .2s ease; }
    .fd-toc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fd-toc-row[aria-current="true"] { color: var(--accent); background: var(--accent-bg); }
    .fd-toc-row[aria-current="true"] .fd-toc-num { color: var(--accent); }
    /* accent rule that slides under the active tab (the ElevenAgents progress-line nod) */
    .fd-toc-ink {
      position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
      background: var(--accent); pointer-events: none;
      transition: transform .3s ease, width .3s ease;
    }

    /* ═════════ 05c features DECK — pin-and-scrub cross-fade stage ═════════
       A tall track (.fd-deck, height = N×100vh) gives scroll room. The stage
       (.fd-stage) pins below the menu bar and holds every block absolutely
       stacked; JS drives each block's opacity + translateY from a scroll-derived
       progress (0..N-1). A page-color vignette at the stage's top/bottom edges
       (#4) hides the seam so blocks dissolve over each other. Scroll-jack (JS)
       makes each gesture advance exactly one block, locked, so the half-faded
       state can never be parked on. --fd-n is set from JS = block count. */
    .fd-deck { position: relative; height: calc(var(--fd-n, 5) * 100vh); }
    .fd-stage {
      position: sticky; top: var(--deck-top);
      height: calc(100vh - var(--deck-top));
      overflow: hidden;
    }
    /* #4 vignette — blocks fade into the PAGE COLOR (--bg) at top & bottom.
       outer 80px solid --bg, inner 80px --bg→transparent. (Stop order is a
       visual-review item; flip here if the user wants edge-transparent.) */
    .fd-stage::before, .fd-stage::after {
      content: ""; position: absolute; left: 0; right: 0; height: 160px;
      pointer-events: none; z-index: 5;
    }
    .fd-stage::before { top: 0;
      background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 80px, transparent 160px); }
    .fd-stage::after { bottom: 0;
      background: linear-gradient(to top, var(--bg) 0, var(--bg) 80px, transparent 160px); }

    /* every block fills the stage and is absolutely stacked; JS animates these */
    .fd-block {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; will-change: opacity, transform;
    }
    /* #1: content centered within the 1440 frame with 80px side gutters; text + square
       grouped toward the middle (not spread to the edges). The 80px padding also keeps
       content off the viewport edge on sub-1440 laptops. */
    .fd-panel {
      width: min(var(--frame), 100%);
      margin-inline: auto;
      padding-inline: 80px;
      display: grid;
      grid-template-columns: minmax(0, 500px) auto;   /* text ≤500, square sizes itself */
      column-gap: clamp(64px, 6vw, 120px);
      justify-content: center;
      align-items: center;
    }
    .fd-inner { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
    .fd-block .h3 { color: var(--text-primary); font-size: clamp(26px, 2.35vw, 32px); line-height: 1.16; }
    .fd-body { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.6; margin: 14px 0 26px; max-width: 44ch; }
    .fd-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
    .fd-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.45; color: var(--text-primary); }
    .ck { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
    /* #1: square mesh tile — scales with the viewport but capped well under its height,
       so it never fills the stage; vertically centered with clear top/bottom margin */
    .fd-img {
      position: relative; overflow: hidden;
      display: grid; place-items: center;
      align-self: center;
      width: min(64vh, 640px);
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      padding: clamp(28px, 3vw, 56px);
    }
    .fd-bg { position: absolute; inset: 0; z-index: 0; }
    /* #1: screenshot card scales with the square (no fixed max-width cap) */
    .fd-card {
      position: relative; z-index: 1;
      width: 82%; height: auto;
      border-radius: 12px; overflow: hidden;
      box-shadow: 0 32px 64px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1);
    }
    .fd-card img { width: 100%; height: auto; display: block; }

    /* mesh gradients — one per feature, cycling hue so each block reads distinctly */
    .fd-img[data-fx="0"] .fd-bg { background:
      radial-gradient(at 18% 22%, hsl(162 70% 38% / .55) 0, transparent 55%),
      radial-gradient(at 82% 12%, hsl(190 75% 42% / .45) 0, transparent 50%),
      radial-gradient(at 75% 88%, hsl(150 65% 30% / .55) 0, transparent 55%),
      radial-gradient(at 10% 90%, hsl(172 60% 25% / .50) 0, transparent 55%),
      hsl(168 45% 12%); }
    .fd-img[data-fx="1"] .fd-bg { background:
      radial-gradient(at 20% 18%, hsl(216 80% 52% / .50) 0, transparent 55%),
      radial-gradient(at 85% 20%, hsl(245 75% 60% / .45) 0, transparent 50%),
      radial-gradient(at 78% 85%, hsl(205 80% 45% / .50) 0, transparent 55%),
      radial-gradient(at 8% 88%, hsl(230 60% 30% / .50) 0, transparent 55%),
      hsl(224 50% 12%); }
    .fd-img[data-fx="2"] .fd-bg { background:
      radial-gradient(at 22% 20%, hsl(270 70% 58% / .50) 0, transparent 55%),
      radial-gradient(at 82% 14%, hsl(300 65% 55% / .42) 0, transparent 50%),
      radial-gradient(at 76% 86%, hsl(255 70% 48% / .50) 0, transparent 55%),
      radial-gradient(at 10% 90%, hsl(285 55% 30% / .50) 0, transparent 55%),
      hsl(272 45% 13%); }
    .fd-img[data-fx="3"] .fd-bg { background:
      radial-gradient(at 20% 20%, hsl(18 90% 56% / .50) 0, transparent 55%),
      radial-gradient(at 84% 16%, hsl(36 95% 55% / .45) 0, transparent 50%),
      radial-gradient(at 78% 88%, hsl(8 80% 50% / .50) 0, transparent 55%),
      radial-gradient(at 8% 88%, hsl(28 60% 28% / .50) 0, transparent 55%),
      hsl(18 50% 12%); }
    .fd-img[data-fx="4"] .fd-bg { background:
      radial-gradient(at 20% 22%, hsl(200 45% 48% / .45) 0, transparent 55%),
      radial-gradient(at 84% 16%, hsl(180 45% 45% / .40) 0, transparent 50%),
      radial-gradient(at 76% 86%, hsl(215 38% 38% / .50) 0, transparent 55%),
      radial-gradient(at 10% 90%, hsl(195 30% 22% / .50) 0, transparent 55%),
      hsl(210 32% 13%); }
    .fd-img[data-fx="5"] .fd-bg { background:
      radial-gradient(at 18% 20%, hsl(162 70% 38% / .48) 0, transparent 55%),
      radial-gradient(at 84% 14%, hsl(190 75% 42% / .40) 0, transparent 50%),
      radial-gradient(at 78% 88%, hsl(150 65% 30% / .48) 0, transparent 55%),
      radial-gradient(at 8% 90%, hsl(172 60% 25% / .44) 0, transparent 55%),
      hsl(168 45% 12%); }

    /* ───────── 06 security — compliance certifications (dark) ───────── */
    .security { background: var(--bg); }
    .sec-head { max-width: var(--frame); margin-inline: auto; text-align: left; }
    .sec-head .eyebrow { margin-bottom: 20px; }
    /* headline left, subhead + trust link right, sharing one row */
    .sec-head-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: clamp(32px, 6vw, 96px);
    }
    .sec-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(34px, 5vw, 60px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin: 0;
    }
    .sec-head-aside { flex: 0 1 46ch; text-align: right; }
    .sec-sub {
      font-family: var(--font-body);
      font-size: var(--fs-lead);
      line-height: 1.55;
      color: var(--text-secondary);
      margin: 0;
    }
    .sec-trust-link {
      font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
      color: var(--accent); display: inline-flex; align-items: center; gap: 7px;
      margin-top: 20px;
    }
    .sec-trust-link .arw { transition: transform .15s ease; }
    .sec-trust-link:hover .arw { transform: translateX(4px); }

    /* cert wall — four separated cards on the grey surface, no frame or dividers */
    .cert-grid {
      margin-top: clamp(48px, 6vw, 76px);
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px, 1.6vw, 24px);
    }
    .cert {
      display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
      text-align: left;
      padding: clamp(28px, 2.6vw, 38px);
      background: var(--surface-card);
      border-radius: 16px;
    }
    .cert-ico {
      width: 69px; height: 69px; color: var(--text-secondary);
      transition: color .2s ease, transform .35s cubic-bezier(.22,1,.36,1);
    }
    .cert:hover .cert-ico { color: var(--accent); transform: translateY(-3px); }
    .cert-label {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -0.01em;
      color: var(--text-primary);
    }
    .cert-desc {
      font-family: var(--font-body); font-size: var(--fs-small);
      line-height: 1.5; color: var(--text-secondary);
    }
    @media (max-width: 980px) {
      .sec-head-row { flex-direction: column; gap: 24px; }
      .sec-head-aside { flex: none; text-align: left; max-width: 60ch; }
      .sec-sub { text-align: left; }
    }
    @media (max-width: 820px) {
      .cert-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 420px) {
      .cert-grid { grid-template-columns: 1fr; }
    }

    /* ───────── 07 closing ───────── */
    .closing {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--bg);
      min-height: min(84vh, 860px);
      display: flex;
      align-items: center;
    }
    .closing::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--bg) 24%, transparent) 34%, color-mix(in oklab, var(--bg) 52%, transparent) 72%, var(--bg) 100%);
    }
    .closing-atmosphere {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 48% 38% at 18% 100%, color-mix(in oklab, var(--hero-fluid-violet) 54%, transparent), transparent 72%),
        radial-gradient(ellipse 46% 34% at 82% 102%, color-mix(in oklab, var(--accent) 48%, transparent), transparent 72%),
        var(--bg);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 12%) 38%, var(--text-primary) 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 12%) 38%, var(--text-primary) 100%);
    }
    .closing-fluid-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      transform: scale(1.025);
      transition: opacity 1.2s ease;
      will-change: opacity;
    }
    .closing.is-fluid-ready .closing-fluid-canvas { opacity: .3; }
    .closing .frame { position: relative; z-index: 1; max-width: var(--frame); width: 100%; }
    .closing .h1 { max-width: 28ch; margin-bottom: 28px; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.08; }
    .closing-copy { max-width: 660px; margin-bottom: 40px; }
    .closing-copy .section-headline { margin-bottom: 24px; }
    .closing-copy .lead { max-width: 520px; color: var(--text-secondary); }
    .closing-cta-group { display: flex; align-items: center; gap: 16px; }
    .closing-note { max-width: 560px; margin: 0; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.5; text-align: left; }

    /* ───────── footer ───────── */
    .pagefoot { border-top: 1px solid var(--border-subtle); padding-block: 56px; }
    .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 56px; }
    .foot-brand .brand { font-size: 19px; margin-bottom: 16px; display: inline-block; }
    .foot-brand p { color: var(--text-secondary); font-size: var(--fs-small); max-width: 30ch; }
    .foot-col h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-eye); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 20px; }
    .foot-col a { display: block; font-size: var(--fs-small); color: var(--text-secondary); margin-bottom: 12px; }
    .foot-col a:hover { color: var(--text-primary); }
    .foot-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border-subtle); padding-top: 28px; }
    .foot-base span { font-size: var(--fs-cap); color: var(--text-tertiary); }

    /* ───────── motion: load + scroll reveals ───────── */
    @media (prefers-reduced-motion: no-preference) {

      /* hero — staggered load-in: headline → sub → buttons → screenshot */
      @keyframes heroRise {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .hero .h1       { animation: heroRise .85s cubic-bezier(.22,1,.36,1) .05s both; }
      .hero .hero-sub { animation: heroRise .85s cubic-bezier(.22,1,.36,1) .20s both; }
      .hero .cta-pair { animation: heroRise .85s cubic-bezier(.22,1,.36,1) .35s both; }
      .hero-ui-wrap   { animation: heroRise 1s   cubic-bezier(.22,1,.36,1) .52s both; }

      /* generic scroll reveal — fade + rise, toggled by IntersectionObserver.
         Optional per-element stagger via inline --reveal-delay. */
      [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity   .7s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
          transform .7s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
      }
      [data-reveal].is-in { opacity: 1; transform: none; }
    }

    /* ───────── responsive ───────── */
    @media (max-width: 1024px) {
      .pillars { grid-template-columns: 1fr; }
      .foot-grid { grid-template-columns: 1fr 1fr; }
      .foot-brand { grid-column: 1 / -1; }
      .ai-grid { grid-template-columns: 1fr; gap: 40px; }
    }
    /* 05c deck unwind — linear flow, no pin/jack/fade (mobile AND reduced-motion) */
    @media (max-width: 980px), (prefers-reduced-motion: reduce) {
      .fd-deck  { height: auto; }
      .fd-stage { position: static; height: auto; overflow: visible; }
      .fd-stage::before, .fd-stage::after { display: none; }
      .fd-block {
        position: static; inset: auto;
        opacity: 1 !important; transform: none !important; visibility: visible !important;
        display: block;
      }
      .fd-block + .fd-block { margin-top: 56px; }
      .fd-panel { grid-template-columns: 1fr; column-gap: 0; row-gap: 28px; padding-inline: var(--pad); }
      .fd-inner { order: 1; }
      .fd-img { order: 2; width: 100%; aspect-ratio: 4 / 3; max-height: none; justify-self: stretch; }
    }
    /* menu bar reverts to a full-width horizontally-scrollable strip (mobile only) */
    @media (max-width: 980px) {
      .fd-toc { width: auto; margin-inline: 0; border: 0; border-block: 1px solid var(--border-subtle); border-radius: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .fd-toc-row { flex: 0 0 auto; }
      .fd-toc-ink { display: none; }
    }
    @media (max-width: 880px) {
      .navlinks { display: none; }
      .ind-head { flex-direction: column; align-items: flex-start; gap: 28px; }
    }
    @media (max-width: 820px) {
      /* stack headline over subheadline */
      .pi-head { grid-template-columns: 1fr; gap: 24px; }
      .pi-headline .h2 { max-width: none; }
      .pi-shot { aspect-ratio: 4 / 3; }
      .pi-shot-card { width: 88%; }
      .pi-tabs { grid-template-columns: 1fr; gap: 20px; }
      .pi-stage { gap: 22px; }
      .workflow-tabs { grid-template-columns: 1fr; gap: 20px; }
      .ai-cards { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .cta-pair { gap: 16px; }
      .hero-stack { margin-top: 0; margin-bottom: 150px; }
      .hero-ui-wrap { padding: 0; }
      .works-with { grid-template-columns: 1fr; gap: 10px; }
      .works-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
      .integration-logo {
        height: clamp(14px, 4.2vw, 20px);
      }
      .nav-right .btn--login { display: none; }
      .foot-base { flex-direction: column; align-items: flex-start; }
    }

    /* ───────── light mode — :root[data-theme="light"] ─────────
       The whole page goes light with dark text. We remap the dark token NAMES onto
       the existing light VALUES, so every var() consumer flips at once. Two element
       kinds stay dark on purpose — the product-UI mockups (.pcard-visual) and the
       photo industry cards (.icard) — because they're embedded screens / photography,
       not page background; their dark text tokens are restored locally so the content
       inside them stays legible. */
    :root[data-theme="light"] {
      --bg:             #FAFAF9;
      --surface-card:   #F4F4F2;
      --text-primary:   #0A0A0A;
      --text-secondary: #5C5C5C;
      --text-tertiary:  #737373;
      --border-subtle:  rgba(0, 0, 0, 0.08);
      --token-bg:       rgba(0, 0, 0, 0.05);
    }
    /* dark islands keep their interior (light text on dark UI / over photos) */
    :root[data-theme="light"] .pcard-visual,
    :root[data-theme="light"] .icard {
      --text-primary:   #F4F4F2;
      --text-secondary: #A1A1A1;
      --text-tertiary:  #6B6B6B;
      --border-subtle:  rgba(255, 255, 255, 0.06);
    }
    /* keep the strong dark-on-accent contrast on the primary button */
    :root[data-theme="light"] .btn--primary { color: #0A0A0A; }
    :root[data-theme="light"] .signup-cta { color: #fff; }
    /* drop the dark hero grounding gradient + metallic glow when the page is light */
    :root[data-theme="light"] .hero::before,
    :root[data-theme="light"] .hero::after,
    :root[data-theme="light"] .hero-ui-wrap::before { display: none; }
    /* smooth the flip on the main surfaces */
    body, .topnav, .pcard, .cert-grid, .hero-ui, .pagefoot {
      transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    }

    /* ───────── theme toggle (16px sun/moon, click on / off) ───────── */
    .theme-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; padding: 0; flex: none;
      border: 1px solid var(--border-subtle); border-radius: 999px;
      background: transparent; color: var(--text-secondary);
      transition: color .15s ease, border-color .15s ease;
    }
    .theme-toggle:hover { color: var(--text-primary); border-color: color-mix(in oklab, var(--text-primary) 24%, transparent); }
    .theme-toggle svg { width: 16px; height: 16px; }
    .theme-toggle .ico-moon { display: none; }
    :root[data-theme="light"] .theme-toggle .ico-sun  { display: none; }
    :root[data-theme="light"] .theme-toggle .ico-moon { display: block; }

    /* === Feature accordion === */
    .fd-wrap { padding: var(--rhythm) 0; }
    .fd-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: clamp(32px, 6vw, 96px);
      row-gap: 20px;
      max-width: none;
      margin: 0;
      text-align: left;
      align-items: end;
    }
    .fd-head .section-headline { grid-column: 1 / -1; max-width: none; }
    .fd-head .lead { max-width: 54ch; color: var(--text-secondary); }
    .fd-head-cta { align-self: center; border-bottom: 1px solid var(--text-secondary); }
    .fd-accordion-layout {
      display: grid;
      grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
      gap: clamp(32px, 6vw, 96px);
      align-items: start;
      margin-top: clamp(64px, 8vw, 112px);
    }
    .fd-accordion-list { border-top: 1px solid var(--border-subtle); }
    .fd-accordion-item { border-bottom: 1px solid var(--border-subtle); }
    .fd-accordion-item.is-active { background: color-mix(in oklab, var(--surface-card) 58%, var(--bg)); }
    .fd-accordion-trigger {
      display: block;
      width: 100%;
      padding: 22px clamp(18px, 2vw, 28px);
      border: 0;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      text-align: left;
      transition: color .2s ease;
    }
    .fd-accordion-trigger:hover, .fd-accordion-item.is-active .fd-accordion-trigger { color: var(--text-primary); }
    .fd-accordion-trigger:focus { outline: 0; }
    .fd-accordion-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .fd-accordion-title { font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.2; }
    .fd-accordion-content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 100ms ease-out; }
    .fd-accordion-item.is-active .fd-accordion-content { grid-template-rows: 1fr; }
    .fd-accordion-content .fd-inner { min-height: 0; overflow: hidden; display: block; padding: 0 clamp(18px, 2vw, 28px); transition: padding-bottom 100ms ease-out; }
    .fd-accordion-item.is-active .fd-accordion-content .fd-inner { padding-bottom: 24px; }
    .fd-accordion-content .fd-body { max-width: none; margin: 0 0 20px; font-size: var(--fs-small); }
    .fd-accordion-content .fd-checks { gap: 10px; }
    .fd-accordion-content .fd-checks li { font-size: var(--fs-cap); }
    .fd-accordion-progress { display: block; width: 100%; height: 2px; background: var(--border-subtle); }
    .fd-accordion-progress i { display: block; width: 0; height: 100%; background: var(--text-primary); }
    .fd-visual-stage { position: relative; min-height: clamp(460px, 48vw, 680px); overflow: hidden; border-radius: 18px; }
    .fd-visual-stage .fd-block {
      position: absolute;
      inset: 0;
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .28s ease-out, visibility 0s linear .28s;
    }
    .fd-visual-stage .fd-block.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
    .fd-visual-stage .fd-panel { width: 100%; height: 100%; margin: 0; padding: 0; display: block; }
    .fd-visual-stage .fd-img { width: 100%; height: 100%; aspect-ratio: auto; padding: clamp(28px, 4vw, 64px); border-radius: 18px; }
    .fd-visual-stage .fd-card { width: 84%; max-height: 86%; }
    .fd-visual-stage .fd-card img { width: 100%; height: auto; }