*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

    :root{
      /* Surfaces — near-black, layered */
      --bg:#08080B;
      --bg-2:#0C0C10;
      --bg-3:#121218;
      --bg-4:#191921;
      --bg-5:#22222C;

      /* Hairlines / dividers */
      --bd:rgba(255,255,255,0.06);
      --bd-2:rgba(255,255,255,0.10);
      --bd-3:rgba(255,255,255,0.16);

      /* Text */
      --t1:#FAFAFA;
      --t2:#A8A8B3;
      --t3:#8E8E99;
      --t4:#6A6A75;

      /* Brand — from logo #4D47C3 */
      --brand:#4D47C3;
      --brand-2:#6A63DC;
      --brand-3:#8B83F0;
      --brand-bg:rgba(77,71,195,0.10);
      --brand-bg-2:rgba(77,71,195,0.18);
      --brand-glow:rgba(122,115,232,0.32);
      --brand-glow-soft:rgba(122,115,232,0.14);

      /* Semantic — used sparingly */
      --green:#4ADE80;
      --green-bg:rgba(74,222,128,0.12);
      --amber:#F59E0B;
      --amber-bg:rgba(245,158,11,0.12);
      --red:#F87171;
      --red-bg:rgba(248,113,113,0.12);

      /* Type */
      --f-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

      /* Layout */
      --gutter:24px;
      --max:1240px;
      --r:8px;
      --r-lg:14px;
      --r-xl:20px;
    }
    @media(min-width:900px){ :root{--gutter:40px;} }

    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip}

    body{
      font-family:var(--f-sans);
      font-size:16px;
      line-height:1.55;
      color:var(--t1);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
      font-feature-settings:"ss01","ss02","cv11","kern";
      min-height:100dvh;
      overflow-x:hidden;
    }

    ::selection{ background:var(--brand); color:#fff; }

    a{ color:var(--t1); text-decoration:none; transition:color .15s; }
    a:hover{ color:var(--brand-3); }

    button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

    h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.03em; color:var(--t1); }

    a:focus-visible, button:focus-visible, summary:focus-visible{
      outline:2px solid var(--brand-2);
      outline-offset:3px;
      border-radius:4px;
    }

    img, svg{ display:block; max-width:100%; }

    /* Ambient indigo halo — one moment, top of page */
    .ambient{
      position:absolute;
      top:-260px;
      left:50%;
      transform:translateX(-50%);
      width:1600px;
      height:900px;
      background:
        radial-gradient(ellipse 60% 50% at 50% 40%, var(--brand-glow) 0%, transparent 55%),
        radial-gradient(ellipse 35% 40% at 50% 50%, var(--brand-glow-soft) 0%, transparent 60%);
      pointer-events:none;
      z-index:0;
      filter:blur(40px);
    }

    /* Noise overlay — very subtle */
    body::after{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:0.035;
      z-index:2000;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); position:relative; }

    /* ═══════════════════════════════════════════════════════
       NAV
       ═══════════════════════════════════════════════════════ */
    #nav{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(8,8,11,0.55);
      backdrop-filter:blur(12px) saturate(140%);
      -webkit-backdrop-filter:blur(12px) saturate(140%);
      border-bottom:1px solid transparent;
      transition:border-color .2s, background .2s;
    }
    #nav.scrolled{
      background:rgba(8,8,11,0.82);
      border-bottom-color:var(--bd);
    }
    .nav-inner{
      max-width:var(--max);
      margin:0 auto;
      padding:14px var(--gutter);
      display:flex;
      align-items:center;
      gap:36px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:600;
      font-size:18px;
      letter-spacing:-0.02em;
      color:var(--t1);
    }
    .brand-glyph{
      width:28px; height:28px;
      display:inline-block;
      flex-shrink:0;
    }
    .brand-glyph img{
      width:100%; height:100%;
      display:block;
      border-radius:7px;
    }

    .nav-links{
      display:none;
      align-items:center;
      gap:24px;
      margin-left:16px;
      font-size:14px;
      color:var(--t2);
    }
    /* Tighten the gap a touch on the smallest desktop widths so
       the 6-item nav doesn't push into the right-side CTA. */
    @media(min-width:900px) and (max-width:1100px){
      .nav-links{ gap:18px; font-size:13.5px; margin-left:10px; }
    }
    @media(min-width:900px){ .nav-links{ display:flex; } }
    .nav-links a{ color:var(--t2); transition:color .15s; }
    .nav-links a:hover{ color:var(--t1); }
    /* Active-state: matches Astro.url.pathname (Header.astro). Brand-3 hairline
       under the link does the work — no background-fill or weight-shift so the
       nav row doesn't twitch on navigation. */
    .nav-links a[aria-current="page"]{ color:var(--t1); position:relative; }
    .nav-links a[aria-current="page"]::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-6px;
      height:1.5px;
      background:var(--brand-3);
    }
    /* Mobile menu — bolden the active row instead of the underline rule, since
       the panel's items are stacked vertically and an underline reads as a
       row divider. */
    .nav-mobile-panel a[aria-current="page"]{
      color:var(--t1);
      background:rgba(122,115,232,0.08);
    }

    .nav-right{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .nav-signin{
      font-size:14px;
      color:var(--t2);
      padding:8px 14px;
      border-radius:6px;
      transition:color .15s, background .15s;
    }
    .nav-signin:hover{ color:var(--t1); background:var(--bg-3); }
    .nav-cta{
      font-size:14px;
      font-weight:500;
      color:#fff;
      background:var(--brand);
      padding:9px 16px;
      border-radius:7px;
      display:inline-flex;
      align-items:center;
      gap:7px;
      border:1px solid var(--brand);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
      transition:background .15s, border-color .15s;
    }
    .nav-cta:hover{
      color:#fff;
      background:var(--brand-2);
      border-color:var(--brand-2);
    }
    .nav-cta .arr{ width:13px; height:13px; transition:transform .2s; }
    .nav-cta:hover .arr{ transform:translateX(2px); }

    /* ═══════════════════════════════════════════════════════
       MOBILE NAV (hamburger + slide-out panel)

       Lives in this external stylesheet (not in Header.astro's scoped
       <style>) because vercel.json's CSP is style-src-elem 'self' —
       no 'unsafe-inline', no nonce — so any inline <style> tag is
       refused by the browser. The component still owns the markup;
       this file owns the layout/visuals.
       ═══════════════════════════════════════════════════════ */
    .nav-mobile{
      display:none;
      position:relative;
    }
    @media (max-width: 899px){
      .nav-mobile{
        display:block;
        /* Breathing room from .nav-cta on tablets 521-899px (.nav-cta
           is hidden ≤520px so on phones this is just margin from the
           brand). 4px in the previous version had the buttons kissing. */
        margin-left:10px;
      }
    }
    /* Hamburger trigger. 40×40 sits close to iOS 44pt / Material 48dp
       once optical bounds are added. Border is transparent at rest so
       the bar feels calm; picks up bd-2 on hover. */
    .nav-mobile summary{
      list-style:none;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px;
      height:40px;
      border-radius:10px;
      color:var(--t2);
      border:1px solid transparent;
      background:transparent;
      transition:background .15s ease, color .15s ease, border-color .15s ease;
    }
    .nav-mobile summary::-webkit-details-marker{ display:none; }
    .nav-mobile summary::marker{ content:""; }
    .nav-mobile summary:hover{
      color:var(--t1);
      background:var(--bg-3);
      border-color:var(--bd-2);
    }
    .nav-mobile[open] summary{
      color:var(--t1);
      background:var(--bg-3);
      border-color:var(--bd-3);
    }
    .nav-mobile-bars{ flex-shrink:0; }

    /* Slide-out panel. Anchored to .nav-mobile (which is position:relative);
       right-aligned so it doesn't run off-screen on small viewports. */
    .nav-mobile-panel{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      min-width:264px;
      max-width:calc(100vw - 24px);
      background:var(--bg-2);
      border:1px solid var(--bd-2);
      border-radius:14px;
      padding:10px;
      display:flex;
      flex-direction:column;
      gap:1px;
      box-shadow:0 18px 50px rgba(0,0,0,0.6);
      z-index:100;
      animation:navMobileIn .18s cubic-bezier(.22,1,.36,1);
    }
    @media (prefers-reduced-motion: reduce){
      .nav-mobile-panel{ animation:none; }
    }
    @keyframes navMobileIn{
      from{ opacity:0; transform:translateY(-6px); }
      to  { opacity:1; transform:none; }
    }
    .nav-mobile-panel a{
      display:block;
      color:var(--t2);
      font-size:15px;
      padding:12px 14px;
      border-radius:9px;
      text-decoration:none;
      transition:background .12s ease, color .12s ease;
    }
    .nav-mobile-panel a:hover,
    .nav-mobile-panel a:active{
      background:var(--bg-3);
      color:var(--t1);
    }
    .nav-mobile-divider{
      height:1px;
      background:var(--bd);
      margin:8px 8px;
    }
    /* Featured CTA at the top of the panel. Same brand fill as the
       desktop .nav-cta so the visual identity carries across breakpoints. */
    .nav-mobile-panel .nav-mobile-cta{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin:2px 2px 4px;
      padding:13px 16px;
      background:var(--brand);
      color:#fff;
      font-size:14.5px;
      font-weight:600;
      border:1px solid var(--brand);
      border-radius:10px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
      transition:background .15s ease, border-color .15s ease;
    }
    .nav-mobile-panel .nav-mobile-cta:hover,
    .nav-mobile-panel .nav-mobile-cta:active{
      background:var(--brand-2);
      color:#fff;
      border-color:var(--brand-2);
    }
    .nav-mobile-panel .nav-mobile-cta .arr{
      width:13px;
      height:13px;
      flex-shrink:0;
    }
    .nav-mobile-signin{
      font-family:var(--f-mono);
      font-size:13px;
      letter-spacing:.04em;
      color:var(--t3);
    }
    .nav-mobile-signin:hover{ color:var(--t1); }

    /* ═══════════════════════════════════════════════════════
       HERO
       ═══════════════════════════════════════════════════════ */
    .hero{
      position:relative;
      padding:72px 0 56px;
      overflow:hidden;
    }
    @media(min-width:900px){ .hero{ padding:100px 0 72px; } }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:var(--f-mono);
      font-size:12px;
      color:var(--t2);
      background:var(--bg-3);
      border:1px solid var(--bd-2);
      padding:6px 12px;
      border-radius:100px;
      margin-bottom:28px;
    }
    .hero-badge .dot{
      width:6px; height:6px;
      border-radius:50%;
      background:var(--brand-2);
      box-shadow:0 0 0 3px var(--brand-bg);
    }
    .hero-badge strong{ color:var(--t1); font-weight:500; }

    .hero h1{
      font-size:clamp(44px, 7vw, 88px);
      line-height:0.96;
      letter-spacing:-0.045em;
      font-weight:600;
      max-width:18ch;
      margin-bottom:28px;
      color:var(--t1);
    }
    .hero h1 .grad{
      background:linear-gradient(90deg, var(--t1) 0%, var(--brand-3) 60%, var(--t1) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .hero-deck{
      font-size:clamp(17px, 1.4vw, 20px);
      line-height:1.5;
      color:var(--t2);
      max-width:58ch;
      margin-bottom:40px;
    }
    .hero-deck strong{ color:var(--t1); font-weight:500; }

    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      margin-bottom:44px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:15px;
      font-weight:500;
      letter-spacing:-0.01em;
      padding:13px 22px;
      border-radius:10px;
      transition:background .15s, border-color .15s, color .15s;
      white-space:nowrap;
      cursor:pointer;
      border:1px solid transparent;
    }
    .btn .arr{ width:14px; height:14px; transition:transform .2s; flex-shrink:0; }
    .btn:hover .arr{ transform:translateX(3px); }

    .btn-primary{
      color:#fff;
      background:var(--brand);
      border-color:var(--brand);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.13);
    }
    .btn-primary:hover{
      background:var(--brand-2);
      border-color:var(--brand-2);
      color:#fff;
    }

    .btn-ghost{
      color:var(--t1);
      background:transparent;
      border-color:var(--bd-3);
    }
    .btn-ghost:hover{
      background:var(--bg-3);
      border-color:var(--bd-3);
      color:var(--t1);
    }

    .hero-trust{
      font-family:var(--f-mono);
      font-size:12px;
      color:var(--t3);
      display:flex;
      flex-wrap:wrap;
      gap:20px;
      margin-bottom:56px;
    }
    .hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
    .hero-trust svg{ width:14px; height:14px; color:var(--green); }

    /* ═══ PRODUCT UI MOCKUP ═══ */
    .app-shot{
      position:relative;
      background:var(--bg-2);
      border:1px solid var(--bd-2);
      border-radius:var(--r-xl);
      overflow:hidden;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 40px 80px -20px rgba(0,0,0,0.6),
        0 16px 40px -16px rgba(77,71,195,0.3);
    }
    .app-shot::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:var(--r-xl);
      background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 20%);
      pointer-events:none;
    }
    .app-chrome{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 16px;
      background:var(--bg-3);
      border-bottom:1px solid var(--bd);
    }
    .app-traffic{
      display:flex;
      gap:7px;
    }
    .app-traffic span{
      width:11px; height:11px; border-radius:50%;
      background:var(--bg-5);
    }
    .app-url{
      font-family:var(--f-mono);
      font-size:11.5px;
      color:var(--t3);
      flex:1;
      text-align:center;
      background:var(--bg-2);
      border:1px solid var(--bd);
      padding:4px 10px;
      border-radius:6px;
      max-width:360px;
      margin:0 auto;
    }
    .app-url .host{ color:var(--t2); }

    /* Hero product-preview placeholder — sits inside .app-shot */
    .app-placeholder{
      position:relative;
      min-height:420px;
      background:
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    @media(min-width:900px){
      .app-placeholder{ min-height:500px; }
    }
    .app-placeholder-grid{
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(var(--bd) 1px, transparent 1px),
        linear-gradient(90deg, var(--bd) 1px, transparent 1px);
      background-size:48px 48px;
      mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 78%);
      -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 78%);
      opacity:0.7;
      pointer-events:none;
    }
    .app-placeholder-inner{
      position:relative;
      z-index:1;
      text-align:center;
      padding:40px 24px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:14px;
    }
    .app-placeholder-logo{
      width:56px;
      height:56px;
      border-radius:14px;
      box-shadow: 0 0 0 1px var(--bd-2), 0 20px 60px -10px var(--brand-glow);
      margin-bottom:4px;
    }
    .app-placeholder-title{
      font-size:20px;
      font-weight:500;
      letter-spacing:-0.015em;
      color:var(--t1);
    }
    .app-placeholder-sub{
      font-family:var(--f-mono);
      font-size:12.5px;
      color:var(--t3);
      letter-spacing:0.01em;
      max-width:36ch;
      line-height:1.6;
    }
    .app-placeholder-sub a{
      color:var(--brand-3);
      border-bottom:1px solid rgba(139,131,240,0.35);
      padding-bottom:1px;
    }
    .app-placeholder-sub a:hover{
      color:var(--t1);
      border-bottom-color:var(--t1);
    }

    /* ═══════════════════════════════════════════════════════
       MARQUEE (profile names)
       ═══════════════════════════════════════════════════════ */
    .marquee{
      border-top:1px solid var(--bd);
      border-bottom:1px solid var(--bd);
      padding:22px 0;
      overflow:hidden;
      position:relative;
      background:var(--bg);
    }
    .marquee-head{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:0.14em;
      text-transform:uppercase;
      color:var(--t4);
      text-align:center;
      margin-bottom:18px;
    }
    .marquee-track{
      display:flex;
      gap:52px;
      width:max-content;
      animation:marquee 50s linear infinite;
      font-family:var(--f-mono);
      font-size:14px;
      color:var(--t2);
      letter-spacing:-0.01em;
      white-space:nowrap;
    }
    .marquee-track span{ opacity:0.7; transition:opacity .2s, color .2s; }
    .marquee-track span:hover{ color:var(--t1); opacity:1; }
    .marquee-track .sep{ color:var(--t4); opacity:0.5; }
    @keyframes marquee{ to { transform:translateX(-50%); } }
    .marquee::before,
    .marquee::after{
      content:"";
      position:absolute;
      top:0; bottom:0;
      width:120px;
      z-index:2;
      pointer-events:none;
    }
    .marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
    .marquee::after{ right:0; background:linear-gradient(-90deg, var(--bg), transparent); }

    /* ═══════════════════════════════════════════════════════
       SECTION BASE
       ═══════════════════════════════════════════════════════ */
    .section{
      padding:80px 0;
      position:relative;
    }
    @media(min-width:900px){ .section{ padding:120px 0; } }

    .section-head{
      max-width:720px;
      margin-bottom:56px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:var(--f-mono);
      font-size:12px;
      color:var(--brand-3);
      letter-spacing:0.02em;
      margin-bottom:20px;
    }
    .eyebrow::before{
      content:"";
      width:6px; height:6px; border-radius:50%;
      background:var(--brand-2);
      box-shadow:0 0 12px var(--brand-glow);
    }
    .section h2{
      font-size:clamp(32px, 4.5vw, 54px);
      line-height:1.04;
      letter-spacing:-0.035em;
      font-weight:600;
      max-width:20ch;
      margin-bottom:20px;
    }
    .section h2 .muted{ color:var(--t3); }
    .section .deck{
      font-size:18px;
      line-height:1.5;
      color:var(--t2);
      max-width:60ch;
    }

    /* ═══════════════════════════════════════════════════════
       ENGINE SECTION
       ═══════════════════════════════════════════════════════ */
    .engine-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:56px;
      align-items:start;
    }
    @media(min-width:1000px){
      .engine-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:80px; }
    }

    .engine-copy p{
      font-size:17px;
      line-height:1.6;
      color:var(--t2);
      margin-bottom:18px;
      max-width:52ch;
    }
    .engine-copy p strong{ color:var(--t1); font-weight:500; }
    .feat-list{
      list-style:none;
      display:grid;
      gap:16px;
      margin-top:32px;
    }
    .feat-list li{
      display:grid;
      grid-template-columns:36px 1fr;
      gap:14px;
      align-items:start;
    }
    .feat-list .feat-ic{
      width:32px; height:32px;
      border-radius:8px;
      background:var(--bg-3);
      border:1px solid var(--bd-2);
      display:grid; place-items:center;
      color:var(--brand-3);
    }
    .feat-list .feat-ic svg{ width:16px; height:16px; }
    .feat-list h4{
      font-size:15px;
      font-weight:500;
      margin-bottom:3px;
      color:var(--t1);
    }
    .feat-list p{
      font-size:14px;
      margin:0;
      color:var(--t2);
      line-height:1.5;
      max-width:none;
    }

    /* Terminal-style engine output card */
    .term{
      background:var(--bg-2);
      border:1px solid var(--bd-2);
      border-radius:var(--r-lg);
      overflow:hidden;
      font-family:var(--f-mono);
      font-size:12.5px;
      box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);
    }
    .term-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:11px 16px;
      background:var(--bg-3);
      border-bottom:1px solid var(--bd);
      color:var(--t3);
      font-size:11px;
      letter-spacing:0.04em;
    }
    .term-head .t-title{ color:var(--t2); }
    .term-head .t-title strong{ color:var(--t1); font-weight:500; }
    .term-body{
      padding:18px 20px;
      display:grid;
      gap:12px;
      line-height:1.6;
    }
    .t-line{ display:grid; grid-template-columns:110px 1fr auto; gap:14px; align-items:center; }
    .t-phase{
      color:var(--t3);
      font-size:11.5px;
      letter-spacing:0.04em;
    }
    .t-phase.active{ color:var(--brand-3); }
    .t-phase.done{ color:var(--green); }
    .t-msg{ color:var(--t2); font-size:12.5px; }
    .t-msg strong{ color:var(--t1); font-weight:500; }
    .t-time{
      color:var(--t4);
      font-size:11px;
      letter-spacing:0.02em;
    }

    .bar{
      height:4px;
      background:var(--bg-4);
      border-radius:2px;
      overflow:hidden;
      margin:10px 0 2px;
    }
    .bar i{
      display:block;
      height:100%;
      background:linear-gradient(90deg, var(--brand-2), var(--brand-3));
    }

    /* ═══════════════════════════════════════════════════════
       FEATURE BANDS (alternating split)
       ═══════════════════════════════════════════════════════ */
    .feature-band{
      display:grid;
      grid-template-columns:1fr;
      gap:56px;
      align-items:center;
    }
    @media(min-width:1000px){
      .feature-band{ grid-template-columns:1fr 1fr; gap:80px; }
      .feature-band.reverse > :first-child{ order:2; }
    }

    .band-copy h3{
      font-size:clamp(28px, 3.3vw, 40px);
      line-height:1.08;
      letter-spacing:-0.03em;
      margin-bottom:18px;
    }
    .band-copy .deck{
      font-size:16px;
      max-width:48ch;
      margin-bottom:22px;
    }
    .band-copy .mini-list{
      list-style:none;
      display:grid;
      gap:10px;
      font-size:14px;
      color:var(--t2);
    }
    .band-copy .mini-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .band-copy .mini-list li::before{
      content:"";
      flex-shrink:0;
      width:14px; height:14px;
      margin-top:3px;
      border-radius:50%;
      background:var(--brand-bg-2);
      box-shadow: inset 0 0 0 1px var(--brand-bg-2);
      background-image:radial-gradient(circle, var(--brand-2) 0%, var(--brand-2) 30%, transparent 31%);
    }

    /* Phantom scan · engine readout */
    .matrix-card{
      background: linear-gradient(180deg, var(--bg-2) 0%, #0A0A0E 100%);
      border:1px solid var(--bd-2);
      border-radius:var(--r-lg);
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .matrix-card::before{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.014) 3px 4px);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.15));
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.15));
      z-index:0;
    }
    .matrix-card > *{ position:relative; z-index:1; }

    .matrix-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding-bottom:14px;
      margin-bottom:16px;
      border-bottom:1px solid var(--bd);
      font-family:var(--f-mono);
      font-size:10px;
      color:var(--t4);
      letter-spacing:0.06em;
      text-transform:uppercase;
    }
    .mh-left{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
    .mh-dot{
      width:7px; height:7px;
      flex-shrink:0;
      border-radius:50%;
      background:var(--brand-2);
      box-shadow:0 0 0 0 rgba(122,115,232,0.6);
      animation: mhPulse 1.6s ease-in-out infinite;
    }
    @keyframes mhPulse{
      0%,100%{ box-shadow: 0 0 0 0 rgba(122,115,232,0.5); }
      50%{ box-shadow: 0 0 0 6px rgba(122,115,232,0); }
    }
    .mh-left strong{
      color:var(--t1);
      font-family:var(--f-sans);
      font-weight:500;
      font-size:13px;
      letter-spacing:-0.01em;
      text-transform:none;
    }
    .mh-proj{ color:var(--t3); text-transform:none; font-size:11px; font-family:var(--f-sans); }
    .mh-meta{ color:var(--t3); white-space:nowrap; }

    /* Labeled board — keys × cylinders */
    .scanboard{
      display:grid;
      grid-template-columns: 62px repeat(10, 1fr);
      column-gap:5px;
      row-gap:4px;
      font-family:var(--f-mono);
      margin-bottom:14px;
    }
    .sb-spacer{}
    .sb-col{
      font-size:9.5px;
      color:var(--t4);
      text-align:center;
      padding-bottom:6px;
      letter-spacing:0.04em;
    }
    .sb-row-lbl{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:5px;
      font-size:10.5px;
      color:var(--t2);
      padding-right:10px;
      letter-spacing:0.02em;
      font-variant-numeric:tabular-nums;
    }
    .sb-row-lbl .tag{ color:var(--t4); font-size:9px; letter-spacing:0.04em; }
    .sb-cell{
      height:22px;
      border-radius:3px;
      background: rgba(255,255,255,0.018);
      border:1px solid rgba(255,255,255,0.04);
    }
    .sb-cell.l1{ background:rgba(77,71,195,0.30); border-color:rgba(77,71,195,0.42); }
    .sb-cell.l2{ background:rgba(77,71,195,0.58); border-color:rgba(122,115,232,0.55); }
    .sb-cell.l3{
      background:rgba(122,115,232,0.88);
      border-color:rgba(180,176,245,0.55);
      box-shadow: inset 0 0 6px rgba(255,255,255,0.12);
    }
    .sb-cell.ph{
      background:var(--red);
      border-color:rgba(248,113,113,0.9);
      box-shadow: 0 0 0 2px rgba(248,113,113,0.22), 0 0 14px rgba(248,113,113,0.55);
      animation: phPulse 1.8s ease-in-out 1.3s infinite;
      position:relative;
    }
    .sb-cell.ph::after{
      content:"!";
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      color:#fff;
      font-family:var(--f-sans);
      font-weight:600;
      font-size:12px;
      line-height:1;
    }
    @keyframes phPulse{
      0%,100%{ box-shadow: 0 0 0 2px rgba(248,113,113,0.22), 0 0 14px rgba(248,113,113,0.50); }
      50%{    box-shadow: 0 0 0 4px rgba(248,113,113,0.32), 0 0 22px rgba(248,113,113,0.80); }
    }

    /* Legend */
    .matrix-legend{
      display:flex;
      flex-wrap:wrap;
      gap:10px 18px;
      font-family:var(--f-mono);
      font-size:10.5px;
      color:var(--t3);
      padding: 10px 0 14px;
      border-top:1px solid var(--bd);
      border-bottom:1px solid var(--bd);
      margin-bottom:14px;
    }
    .matrix-legend .leg{ display:inline-flex; align-items:center; gap:7px; }
    .matrix-legend .sw{ width:10px; height:10px; border-radius:2px; }
    .matrix-legend .sw.l1{ background:rgba(77,71,195,0.30); }
    .matrix-legend .sw.l2{ background:rgba(77,71,195,0.58); }
    .matrix-legend .sw.l3{ background:rgba(122,115,232,0.88); }
    .matrix-legend .sw.ph{
      background:var(--red);
      box-shadow: 0 0 6px rgba(248,113,113,0.55);
    }

    /* Terminal scan log */
    .scan-log{
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t2);
      line-height:1.45;
    }
    .sl-head{
      display:flex;
      justify-content:space-between;
      gap:10px;
      color:var(--t4);
      font-size:9.5px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      padding-bottom:8px;
      margin-bottom:6px;
      border-bottom:1px dashed var(--bd);
    }
    .sl-rows{ display:grid; gap:2px; }
    .sl-row{
      display:grid;
      grid-template-columns: 44px 44px 1fr;
      gap:10px;
      align-items:baseline;
      padding:3px 6px;
      border-radius:4px;
      border:1px solid transparent;
    }
    .sl-row .t{ color:var(--t4); font-variant-numeric:tabular-nums; }
    .sl-row .op{
      text-transform:uppercase;
      font-size:9.5px;
      letter-spacing:0.08em;
      color:var(--t4);
      font-weight:600;
    }
    .sl-row .op-pass{ color:var(--green); }
    .sl-row .op-flag{ color:var(--red); }
    .sl-row .op-done{ color:var(--brand-3); }
    .sl-row .msg{ color:var(--t2); }
    .sl-row .msg strong{ color:var(--t1); font-weight:500; }
    .sl-row.bad{
      background: rgba(248,113,113,0.07);
      border-color: rgba(248,113,113,0.28);
    }
    .sl-row.bad .msg{ color:var(--t1); }
    .sl-row.bad .msg strong{ color:var(--red); }
    .sl-row .sev{
      display:inline-block;
      margin-left:6px;
      padding:1px 6px 2px;
      border-radius:3px;
      font-size:9px;
      letter-spacing:0.1em;
      font-weight:600;
      vertical-align:1px;
    }
    .sl-row .sev-hi{
      background:rgba(248,113,113,0.20);
      color:var(--red);
      border:1px solid rgba(248,113,113,0.45);
    }
    .sl-row.done{
      margin-top:4px;
      padding-top:7px;
      border-top:1px dashed var(--bd);
      border-radius:0;
    }
    .sl-row.done .msg{ color:var(--t1); }

    /* Staggered reveal of scan log lines */
    .reveal.in .sl-rows .sl-row{
      animation: slIn .45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .reveal.in .sl-rows .sl-row:nth-child(1){ animation-delay: .15s; }
    .reveal.in .sl-rows .sl-row:nth-child(2){ animation-delay: .35s; }
    .reveal.in .sl-rows .sl-row:nth-child(3){ animation-delay: .55s; }
    .reveal.in .sl-rows .sl-row:nth-child(4){ animation-delay: .85s; }
    .reveal.in .sl-rows .sl-row:nth-child(5){ animation-delay: 1.10s; }
    .reveal.in .sl-rows .sl-row:nth-child(6){ animation-delay: 1.35s; }
    @keyframes slIn{
      from{ opacity:0; transform:translateY(3px); }
      to{ opacity:1; transform:none; }
    }

    /* Result ribbon */
    .scan-result{
      margin-top:14px;
      padding:10px 12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      font-family:var(--f-mono);
      font-size:11px;
      background: linear-gradient(90deg, rgba(77,71,195,0.14), rgba(77,71,195,0.04));
      border:1px solid rgba(122,115,232,0.28);
      border-radius:var(--r);
      color:var(--t1);
    }
    .sr-left{ display:inline-flex; align-items:center; gap:9px; color:var(--t1); }
    .sr-dot{
      width:7px; height:7px; border-radius:50%;
      background:var(--brand-2);
      box-shadow:0 0 6px rgba(122,115,232,0.7);
    }
    .sr-right{ color:var(--t3); font-variant-numeric:tabular-nums; }

    /* Deliverables card (for feature bands) */
    .deliverable-card{
      background:var(--bg-2);
      border:1px solid var(--bd-2);
      border-radius:var(--r-lg);
      padding:22px;
    }
    .deliverable-card h4{
      font-size:13px;
      font-weight:500;
      color:var(--t1);
      margin-bottom:14px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .deliverable-card h4 .tag{
      font-family:var(--f-mono);
      font-size:10.5px;
      color:var(--t3);
      font-weight:400;
      letter-spacing:0.04em;
    }

    .pinning-mini{
      display:grid;
      grid-template-columns:auto repeat(6, minmax(0,1fr));
      gap:4px 10px;
      font-family:var(--f-mono);
      font-size:12px;
      padding:12px 0;
      border-top:1px solid var(--bd);
      border-bottom:1px solid var(--bd);
    }
    .pinning-mini .lbl{
      color:var(--t3);
      font-size:10.5px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      align-self:center;
    }
    .pinning-mini .pos{
      text-align:center;
      color:var(--t4);
      font-size:10.5px;
      letter-spacing:0.08em;
      text-transform:uppercase;
    }
    .pinning-mini .v{
      text-align:center;
      color:var(--t1);
      font-weight:500;
      font-variant-numeric:tabular-nums;
      padding:3px 0;
    }
    .pinning-mini .v.dim{ color:var(--t4); }

    .mini-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:12px;
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t3);
    }
    .mini-foot .ok{ color:var(--green); }

    /* ═══════════════════════════════════════════════════════
       FEATURE GRID (6-up)
       ═══════════════════════════════════════════════════════ */
    .fgrid{
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:var(--r-lg);
      overflow:hidden;
    }
    @media(min-width:700px){ .fgrid{ grid-template-columns:1fr 1fr; } }
    @media(min-width:1000px){ .fgrid{ grid-template-columns:repeat(3, 1fr); } }

    .fcard{
      background:var(--bg-2);
      padding:26px 24px 28px;
      display:flex;
      flex-direction:column;
      gap:12px;
      position:relative;
      transition:background .2s;
    }
    .fcard:hover{ background:var(--bg-3); }
    .fcard .fic{
      width:36px; height:36px;
      border-radius:8px;
      background:var(--bg-4);
      border:1px solid var(--bd-2);
      display:grid; place-items:center;
      color:var(--brand-3);
      margin-bottom:6px;
    }
    .fcard .fic svg{ width:18px; height:18px; }
    .fcard h4{
      font-size:16px;
      font-weight:500;
      letter-spacing:-0.01em;
      color:var(--t1);
    }
    .fcard p{
      font-size:14px;
      line-height:1.55;
      color:var(--t2);
    }
    .fcard .f-tag{
      font-family:var(--f-mono);
      font-size:10.5px;
      color:var(--t4);
      letter-spacing:0.08em;
      text-transform:uppercase;
      margin-top:4px;
    }

    /* ═══════════════════════════════════════════════════════
       PRICING
       ═══════════════════════════════════════════════════════ */
    .price-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
    }
    /* Asymmetric weighting on desktop — Pro (middle, .featured) gets the extra
       width so the recommended tier reads as the recommended tier instead of
       just one of three peers. The audit flagged the prior repeat(3,1fr) as
       the canonical 'three equal cards' antipattern. */
    @media(min-width:900px){ .price-grid{ grid-template-columns:1fr 1.4fr 1fr; align-items:start; } }

    .plan{
      background:var(--bg-2);
      border:1px solid var(--bd-2);
      border-radius:var(--r-lg);
      padding:32px 28px;
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    .plan.featured{
      background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
      border-color:var(--brand);
      box-shadow: 0 0 0 1px var(--brand-bg-2), 0 20px 60px -20px var(--brand-glow);
      position:relative;
    }
    /* "Most popular" badge — real DOM element targeted by JS for the
       scale-pop entry choreography on chapter 06 visible. Visual
       treatment unchanged from the prior ::before pseudo. */
    .plan-popular-badge{
      position:absolute;
      top:-10px;
      right:20px;
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      background:linear-gradient(180deg, var(--brand-2), var(--brand));
      color:#fff;
      padding:4px 10px;
      border-radius:100px;
      box-shadow: 0 4px 12px -4px var(--brand-glow);
      transform-origin:50% 100%;
    }

    .plan-name{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
    }
    .plan-name h3{
      font-size:20px;
      font-weight:500;
      letter-spacing:-0.01em;
    }
    .plan-name .plan-tag{
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t3);
      letter-spacing:0.04em;
    }

    .plan-price{
      display:flex;
      align-items:baseline;
      gap:8px;
    }
    .plan-price .big{
      font-size:46px;
      font-weight:600;
      letter-spacing:-0.03em;
      line-height:1;
      font-variant-numeric:tabular-nums;
    }
    .plan-price .per{
      font-family:var(--f-mono);
      font-size:12.5px;
      color:var(--t3);
    }

    .plan-desc{
      font-size:14.5px;
      line-height:1.55;
      color:var(--t2);
    }

    .plan-list{
      list-style:none;
      display:grid;
      gap:10px;
      font-size:14px;
      color:var(--t2);
      margin-top:8px;
    }
    .plan-list li{
      display:grid;
      grid-template-columns:18px 1fr;
      gap:10px;
      align-items:start;
    }
    .plan-list li::before{
      content:"";
      margin-top:5px;
      width:12px; height:12px; border-radius:50%;
      background:var(--brand-bg-2);
      background-image:radial-gradient(circle, var(--brand-2) 0%, var(--brand-2) 30%, transparent 35%);
    }
    .plan-list li strong{ color:var(--t1); font-weight:500; }

    .plan .btn{ margin-top:auto; justify-content:center; }

    .plan-foot{
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t4);
      text-align:center;
      letter-spacing:0.02em;
    }

    /* ═══════════════════════════════════════════════════════
       FAQ
       ═══════════════════════════════════════════════════════ */
    .faq{
      display:grid;
      gap:0;
      border-top:1px solid var(--bd);
    }
    .faq details{
      border-bottom:1px solid var(--bd);
      padding:22px 0;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:center;
      font-size:17px;
      font-weight:500;
      letter-spacing:-0.01em;
      color:var(--t1);
    }
    .faq summary::-webkit-details-marker{ display:none; }
    .faq summary .plus{
      width:26px; height:26px;
      border-radius:50%;
      border:1px solid var(--bd-2);
      display:grid; place-items:center;
      color:var(--t2);
      transition:transform .25s, background .2s, border-color .2s;
      flex-shrink:0;
      font-size:18px;
      line-height:0;
      font-weight:400;
    }
    .faq details[open] summary .plus{
      transform:rotate(45deg);
      background:var(--brand);
      border-color:var(--brand);
      color:#fff;
    }
    .faq .ans{
      font-size:15px;
      line-height:1.6;
      color:var(--t2);
      padding:14px 50px 4px 0;
      max-width:720px;
    }
    .faq .ans strong{ color:var(--t1); font-weight:500; }

    /* ═══════════════════════════════════════════════════════
       FINAL CTA
       ═══════════════════════════════════════════════════════ */
    .final{
      padding:120px 0;
      position:relative;
      border-top:1px solid var(--bd);
      overflow:hidden;
    }
    .final .final-glow{
      position:absolute;
      inset:0;
      background:radial-gradient(ellipse 70% 80% at 50% 50%, var(--brand-glow-soft) 0%, transparent 60%);
      pointer-events:none;
      z-index:-1;
    }
    .final .wrap{ text-align:center; }
    .final h2{
      font-size:clamp(40px, 6vw, 72px);
      line-height:1.02;
      letter-spacing:-0.04em;
      margin-bottom:22px;
      max-width:20ch;
      margin-inline:auto;
    }
    .final h2 .grad{
      background:linear-gradient(90deg, var(--t1), var(--brand-3), var(--t1));
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .final p{
      font-size:18px;
      color:var(--t2);
      max-width:56ch;
      margin:0 auto 36px;
    }
    .final .hero-cta{
      justify-content:center;
      margin-bottom:28px;
    }
    .final-fine{
      font-family:var(--f-mono);
      font-size:12px;
      color:var(--t4);
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:16px 24px;
    }

    /* ═══════════════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════════════ */
    footer{
      border-top:1px solid var(--bd);
      padding:56px 0 32px;
      background:var(--bg);
    }
    .foot-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:40px;
      margin-bottom:44px;
    }
    @media(min-width:800px){ .foot-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; gap:56px; } }

    .foot-brand-block p{
      font-size:14px;
      line-height:1.55;
      color:var(--t2);
      margin-top:16px;
      max-width:34ch;
    }
    .foot-col h4{
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t3);
      letter-spacing:0.08em;
      text-transform:uppercase;
      margin-bottom:14px;
    }
    .foot-col ul{ list-style:none; display:grid; gap:10px; }
    .foot-col a{
      font-size:14px;
      color:var(--t2);
      transition:color .15s;
    }
    .foot-col a:hover{ color:var(--t1); }

    .foot-bottom{
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:12px;
      padding-top:28px;
      border-top:1px solid var(--bd);
      font-family:var(--f-mono);
      font-size:11.5px;
      color:var(--t4);
    }

    /* ═══════════════════════════════════════════════════════
       REVEAL / MOTION
       ═══════════════════════════════════════════════════════ */
    .reveal{
      opacity:0;
      transform:translateY(14px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .reveal.in{ opacity:1; transform:none; }

    .hero .hero-badge, .hero h1, .hero-deck, .hero-cta, .hero-trust, .app-shot{
      animation:heroIn .9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .hero h1{ animation-delay:.06s; }
    .hero-deck{ animation-delay:.12s; }
    .hero-cta{ animation-delay:.18s; }
    .hero-trust{ animation-delay:.24s; }
    .app-shot{ animation-delay:.30s; }
    @keyframes heroIn{
      from{ opacity:0; transform:translateY(12px); }
      to{ opacity:1; transform:none; }
    }

    @media(prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; }
      .reveal{ opacity:1; transform:none; }
      html{ scroll-behavior:auto; }
      .marquee-track{ animation:none; }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE — preserve the desktop look, scale cleanly
       below 1000px. Three breakpoints: tablet (≤960px),
       small tablet / large phone (≤720px), phone (≤480px).
       ═══════════════════════════════════════════════════════ */

    /* Stack hero + final CTAs as full-width buttons below 600px so
       primary actions are thumb-reachable on phones. */
    @media (max-width: 600px) {
      .hero-cta{ flex-direction:column; align-items:stretch; }
      .hero-cta .btn{ justify-content:center; width:100%; }
      .final .hero-cta{ flex-direction:column; align-items:stretch; }
    }

    /* ── Tablet: ≤ 960px ───────────────────────────────────── */
    @media (max-width: 960px) {
      .section{ padding:72px 0; }
      .section-head{ margin-bottom:44px; }
      .engine-grid{ gap:48px; }
      .feature-band{ gap:48px; }

      /* Engine terminal: drop the time column, give the message
         room to breathe. The phase label still anchors each row. */
      .t-line{ grid-template-columns:96px 1fr; gap:12px; }
      .t-line .t-time{ display:none; }
    }

    /* ── Small tablet / large phone: ≤ 720px ───────────────── */
    @media (max-width: 720px) {
      :root{ --gutter:20px; }

      .nav-inner{ gap:12px; padding:12px var(--gutter); }

      .hero{ padding:56px 0 44px; }
      .hero h1{ letter-spacing:-0.04em; max-width:none; margin-bottom:22px; }
      .hero-deck{ font-size:16px; margin-bottom:32px; }
      .hero-trust{ gap:14px 18px; margin-bottom:40px; }

      .app-placeholder{ min-height:340px; }
      .app-url{ max-width:none; }

      .marquee{ padding:18px 0; }
      .marquee-track{ gap:40px; font-size:13px; }
      .marquee::before, .marquee::after{ width:80px; }

      .section{ padding:64px 0; }
      .section h2{ font-size:clamp(30px, 6.4vw, 44px); max-width:none; }
      .section .deck{ font-size:16px; }

      .engine-grid, .feature-band{ gap:40px; }
      .engine-copy p{ font-size:16px; }
      .feat-list{ gap:14px; margin-top:26px; }

      .term-body{ padding:16px 16px; gap:11px; }
      .t-msg{ font-size:12px; }

      .matrix-card{ padding:18px; }
      .matrix-head{ flex-wrap:wrap; gap:6px 12px; }
      .mh-meta{ font-size:10px; }

      /* Tighten the 11-column scanboard so cells stay legible. */
      .scanboard{
        grid-template-columns: 52px repeat(10, minmax(0, 1fr));
        column-gap:3px;
      }
      .sb-col{ font-size:9px; }
      .sb-row-lbl{ font-size:10px; padding-right:6px; gap:3px; }
      .sb-row-lbl .tag{ font-size:8px; }
      .sb-cell{ height:20px; }

      .scan-log{ font-size:10.5px; }
      .sl-row{ grid-template-columns:38px 40px 1fr; gap:8px; }

      .scan-result{ flex-wrap:wrap; gap:8px; }

      .deliverable-card{ padding:18px; }
      .pinning-mini{ font-size:11px; gap:3px 6px; }

      .fcard{ padding:24px 22px 26px; }

      .plan{ padding:28px 24px; gap:18px; }
      .plan-price .big{ font-size:42px; }

      .faq details{ padding:20px 0; }
      .faq summary{ font-size:16px; gap:12px; }
      .faq .ans{ font-size:14.5px; padding:12px 38px 4px 0; }

      .final{ padding:80px 0; }
      .final h2{ font-size:clamp(34px, 7vw, 56px); }
      .final p{ font-size:17px; margin-bottom:32px; }

      footer{ padding:48px 0 28px; }
      .foot-grid{ gap:32px; margin-bottom:36px; }
      .foot-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
    }

    /* ── Phone: ≤ 520px ────────────────────────────────────── */
    @media (max-width: 520px) {
      :root{ --gutter:16px; }

      /* Nav on phones: brand + hamburger only. The inline "Start free"
         CTA was kissing the hamburger and made the bar feel cramped;
         it's relocated to a featured button at the top of the open
         menu (see Header.astro .nav-mobile-cta) so the conversion
         action stays one tap away. Sign-in moves into the menu too. */
      .nav-inner{ gap:8px; padding:11px var(--gutter); }
      .brand{ font-size:16px; gap:8px; }
      .brand-glyph{ width:24px; height:24px; }
      .nav-signin{ display:none; }
      .nav-cta{ display:none; }

      .hero{ padding:40px 0 32px; }
      .hero-badge{ font-size:11px; padding:5px 11px; margin-bottom:20px; }
      .hero-badge span:not(.dot){
        white-space:normal; line-height:1.4;
      }
      .hero-badge strong{ display:inline-block; white-space:nowrap; }
      .hero-badge .sep{ margin:0 2px; opacity:.55; }
      .hero h1{
        font-size:clamp(34px, 11vw, 44px);
        line-height:1.02;
        letter-spacing:-0.035em;
        margin-bottom:18px;
      }
      .hero-deck{ font-size:15.5px; margin-bottom:26px; }
      .hero-trust{ gap:10px 14px; font-size:11px; margin-bottom:32px; }

      .btn{ font-size:14.5px; padding:12px 18px; gap:8px; }

      .app-chrome{ padding:10px 12px; gap:10px; }
      .app-traffic span{ width:9px; height:9px; }
      .app-traffic{ gap:6px; }
      .app-url{ font-size:10.5px; padding:3px 8px; }
      .app-placeholder{ min-height:260px; }
      .app-placeholder-inner{ padding:24px 18px; gap:12px; }
      .app-placeholder-logo{ width:44px; height:44px; border-radius:11px; }
      .app-placeholder-title{ font-size:17px; }
      .app-placeholder-sub{ font-size:12px; }

      .marquee{ padding:14px 0; }
      .marquee-head{ font-size:10px; margin-bottom:14px; }
      .marquee-track{ gap:32px; font-size:12.5px; }
      .marquee::before, .marquee::after{ width:48px; }

      .section{ padding:52px 0; }
      .section-head{ margin-bottom:32px; }
      .eyebrow{ font-size:11px; margin-bottom:14px; }
      .section h2{ font-size:clamp(26px, 8.5vw, 32px); margin-bottom:14px; }
      .section .deck{ font-size:15.5px; }

      .engine-grid{ gap:32px; }
      .engine-copy p{ font-size:15.5px; max-width:none; }
      .feat-list{ gap:14px; margin-top:22px; }
      .feat-list li{ grid-template-columns:32px 1fr; gap:12px; }
      .feat-list .feat-ic{ width:30px; height:30px; }

      .term-head{ padding:9px 12px; font-size:10px; }
      .term-body{ padding:14px 13px; gap:10px; }
      .t-line{ grid-template-columns:auto 1fr; gap:6px 10px; }
      .t-phase{ font-size:10px; }
      .t-msg{ font-size:11.5px; }

      .feature-band{ gap:32px; }
      .band-copy h3{ font-size:clamp(24px, 7.5vw, 30px); margin-bottom:14px; }
      .band-copy .deck{ font-size:15.5px; max-width:none; margin-bottom:18px; }

      /* Phantom matrix on phones: shrink labels + cells.
         The board still renders all 10 columns, just smaller. */
      .matrix-card{ padding:14px; }
      .matrix-head{ font-size:9px; padding-bottom:11px; margin-bottom:13px; }
      .mh-left strong{ font-size:12px; }
      .mh-proj{ display:none; }
      .mh-meta{ font-size:9.5px; }
      .scanboard{
        grid-template-columns: 38px repeat(10, minmax(0, 1fr));
        column-gap:2px;
        margin-bottom:12px;
      }
      .sb-col{ font-size:8px; padding-bottom:4px; }
      .sb-row-lbl{ font-size:9.5px; padding-right:4px; }
      .sb-row-lbl .tag{ display:none; }
      .sb-cell{ height:17px; border-radius:2px; }
      .sb-cell.ph::after{ font-size:9px; }
      .matrix-legend{
        font-size:9.5px; gap:6px 12px;
        padding:9px 0 11px; margin-bottom:12px;
      }
      .matrix-legend .sw{ width:9px; height:9px; }

      .scan-log{ font-size:10px; }
      .sl-head{ font-size:8.5px; }
      .sl-row{ grid-template-columns:34px 36px 1fr; gap:6px; padding:2px 4px; }
      .sl-row .sev{ font-size:8px; padding:1px 4px 2px; }
      .scan-result{ font-size:10.5px; padding:9px 11px; }

      .deliverable-card{ padding:16px; }
      .deliverable-card h4{ font-size:12.5px; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
      .pinning-mini{
        grid-template-columns:auto repeat(6, minmax(0, 1fr));
        gap:3px 5px; font-size:10.5px; padding:10px 0;
      }
      .pinning-mini .lbl{ font-size:9px; letter-spacing:0.05em; }
      .pinning-mini .pos{ font-size:9px; letter-spacing:0.05em; }
      .pinning-mini .v{ padding:2px 0; }
      .mini-foot{ font-size:10px; gap:8px; flex-wrap:wrap; }

      .fgrid{ border-radius:12px; }
      .fcard{ padding:22px 20px 24px; gap:10px; }
      .fcard .fic{ width:34px; height:34px; }
      .fcard h4{ font-size:15.5px; }
      .fcard p{ font-size:13.5px; }
      .fcard .f-tag{ font-size:10px; }

      .plan{ padding:24px 22px; gap:16px; border-radius:12px; }
      .plan-popular-badge{
        right:auto; left:50%; transform:translateX(-50%);
        font-size:9.5px; padding:3px 10px;
        transform-origin:50% 100%;
      }
      .plan-name h3{ font-size:18px; }
      .plan-price .big{ font-size:38px; }
      .plan-desc{ font-size:14px; }
      .plan-list{ font-size:13.5px; }

      .faq details{ padding:18px 0; }
      .faq summary{ font-size:15.5px; gap:10px; line-height:1.35; }
      .faq summary .plus{ width:24px; height:24px; font-size:16px; }
      .faq .ans{ font-size:14px; padding:10px 30px 2px 0; }

      .final{ padding:64px 0; }
      .final h2{ font-size:clamp(30px, 9vw, 44px); margin-bottom:18px; }
      .final p{ font-size:15.5px; margin-bottom:28px; }
      .final-fine{ font-size:11px; gap:8px 16px; }

      footer{ padding:40px 0 24px; }
      .foot-grid{ gap:28px; margin-bottom:32px; }
      .foot-brand-block p{ max-width:none; }
      .foot-bottom{ font-size:11px; padding-top:22px; }
    }

    /* ── Tiny phones (≤ 360px, eg. iPhone SE 1st gen) ──────── */
    /* Sub-360px (very small phones). Tighten gutter; the rest of the
       nav (brand + hamburger only at ≤520px) already fits. */
    @media (max-width: 360px) {
      :root{ --gutter:14px; }
      /* .nav-cta is display:none below 520px — see the phone block above.
         No CTA tweaks needed here; brand + hamburger already fit. */
      .hero h1{ font-size:30px; }
      .section h2{ font-size:24px; }
      .scanboard{ grid-template-columns: 32px repeat(10, minmax(0, 1fr)); }
      .sb-row-lbl{ font-size:9px; padding-right:3px; }
    }

    /* ═══════════════════════════════════════════════════════
       MOBILE POLISH
       Additive fixes for horizontal-scroll bleed, tap-target
       minimums, and iPhone notch safety. All rules are additive
       — no existing selector is overridden structurally.
       ═══════════════════════════════════════════════════════ */

    /* Bulletproof viewport clip. `overflow-x: hidden` on body alone
       isn't reliable on older iOS Safari when combined with
       min-height:100vh + absolutely-positioned wide children. */
    html, body{
      max-width: 100vw;
      overflow-x: hidden;
    }

    /* iPhone notch: push the sticky nav below the safe-area inset.
       No-op on devices without a notch (env() returns 0). */
    #nav{
      padding-top: env(safe-area-inset-top, 0);
    }

    /* Constrain the ambient halo on narrow viewports so its 1600×900
       gradient blob can't spill past the viewport right edge.
       At desktop widths the halo is still large; at phone widths it
       shrinks to the viewport so no swipe-left bleed is possible. */
    @media (max-width: 900px){
      .ambient{
        width: 100vw;
        height: 560px;
        top: -180px;
        max-width: 100%;
      }
    }

    /* Touch-friendly tap targets. iOS HIG 44pt / Material 48dp.
       Tablets 521-899px still show the inline CTA — give it a real
       tap target. Phones ≤520px hide it (see :nav-cta display:none
       above) and route the action through the menu button instead. */
    @media (max-width: 899px){
      .nav-cta{
        min-height: 40px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
      }
      .faq summary{
        min-height: 44px;
        padding-top: 14px;
        padding-bottom: 14px;
      }
    }

    /* Data grids that could still exceed 320px: allow horizontal
       scroll *inside the card* with native momentum, so the page
       itself stays locked. Safety net — at the current breakpoints
       the minmax(0,1fr) rules already fit. */
    @media (max-width: 600px){
      .scanboard,
      .pinning-mini{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .scanboard::-webkit-scrollbar,
      .pinning-mini::-webkit-scrollbar{ display: none; }
    }

    /* The matrix header meta line uses white-space:nowrap (desktop
       want). On a narrow card it can escape the flex row. Ellipsise
       it instead so the header stays single-line. */
    @media (max-width: 600px){
      .mh-meta{
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw;
      }
    }

    /* Landscape phones: avoid the hero squashing into a strip. */
    @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
      .hero{ padding-top: 32px; padding-bottom: 32px; }
    }

    /* ── Footer compaction on mobile ────────────────────────────
       The default single-column footer stacks 4 sections vertically
       at 40px gap each, ending up ~800px tall on iPhone 14 (taller
       than the viewport). Below 800px, lay the link sections out in
       a 2-column grid with the brand block spanning both, and
       tighten the inter-section + inter-link gaps. ── */
    @media (max-width: 799px){
      .foot-grid{
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        row-gap: 24px;
        margin-bottom: 28px;
      }
      .foot-brand-block{
        grid-column: 1 / -1;
      }
      .foot-brand-block p{
        margin-top: 12px;
        font-size: 13.5px;
      }
      .foot-col h4{
        margin-bottom: 10px;
      }
      .foot-col ul{ gap: 6px; }
      .foot-col a{ font-size: 13.5px; }
    }

    /* ═══════════════════════════════════════════════════════
       2026 POLISH — additive refinements, no structural changes
       ═══════════════════════════════════════════════════════ */

    /* Motion & easing tokens (new) */
    :root{
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --dur-fast: .15s;
      --dur-base: .24s;
      --dur-slow: .42s;
    }

    /* Ambient halo: slow breathing drift for a living page feel */
    .ambient{
      animation: haloDrift 18s ease-in-out infinite alternate;
    }
    @keyframes haloDrift{
      0%   { transform: translate(-50%, 0)       scale(1);    opacity: 1; }
      100% { transform: translate(-50%, 14px)    scale(1.015); opacity: .9; }
    }

    /* Hero badge dot: slow pulse — signals the product is live */
    .hero-badge .dot{
      animation: dotPulse 2.4s ease-in-out infinite;
    }
    @keyframes dotPulse{
      0%, 100% { box-shadow: 0 0 0 0 rgba(122,115,232,.55); }
      50%      { box-shadow: 0 0 0 6px rgba(122,115,232,0);   }
    }

    /* Buttons: layered shadows, spring micro-lift, radial bloom on hover */
    .btn{
      position: relative;
      transition:
        background var(--dur-fast),
        border-color var(--dur-fast),
        color var(--dur-fast),
        transform var(--dur-base) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out);
    }
    .btn-primary{
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 1px 2px rgba(77,71,195,0.24),
        0 6px 14px rgba(77,71,195,0.18);
    }
    .btn-primary:hover{
      transform: translateY(-1.5px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 2px 4px rgba(77,71,195,0.28),
        0 14px 32px rgba(122,115,232,0.36);
    }
    .btn-primary:active{
      transform: translateY(0);
      transition-duration: .08s;
    }
    .btn-ghost{
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
    }
    .btn-ghost:hover{
      transform: translateY(-1.5px);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.16),
        0 10px 24px rgba(0,0,0,0.35);
    }
    .btn-ghost:active{
      transform: translateY(0);
      transition-duration: .08s;
    }

    /* Nav CTA: same treatment, smaller footprint */
    .nav-cta{
      transition:
        background var(--dur-fast),
        transform var(--dur-base) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 4px 10px rgba(77,71,195,0.18);
    }
    .nav-cta:hover{
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 8px 22px rgba(122,115,232,0.32);
    }

    /* Focus ring: layered (halo + crisp ring) — meets WCAG, feels considered */
    a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible{
      outline: none;
      box-shadow:
        0 0 0 2px var(--bg),
        0 0 0 4px var(--brand-2),
        0 0 0 8px rgba(122,115,232,0.22);
      border-radius: 6px;
    }

    /* Hero gradient headline: richer vertical sheen */
    .hero h1 .grad{
      background: linear-gradient(180deg,
        #FFFFFF 0%,
        #E4E1F7 38%,
        #B8B2EC 72%,
        var(--brand-2) 115%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Plan cards: deeper lift on hover */
    .plan{
      transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
    }
    .plan:hover{
      transform: translateY(-3px);
      border-color: var(--bd-2);
      box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(138,131,240,.10) inset;
    }
    /* CTA arrow nudge on plan-card hover. Inline 14px SVG, transition
       on transform only — paint-cheap, no layout. Reduced-motion is
       handled by the existing @media block below that disables the
       parent .plan transform. */
    .plan .btn .arr{
      transition: transform var(--dur-base) var(--ease-out);
    }
    .plan:hover .btn .arr{
      transform: translateX(3px);
    }

    /* FAQ details: smoother summary interaction */
    details summary{
      transition: background var(--dur-fast), color var(--dur-fast);
      cursor: pointer;
    }

    /* Section scroll-snap: subtle, optional — lets the page feel chaptered
       without hijacking scroll (proximity, not mandatory) */
    @media (min-width: 900px) and (prefers-reduced-motion: no-preference){
      html{ scroll-snap-type: y proximity; scroll-padding-top: 80px; }
      .section, .hero, .final, footer{ scroll-snap-align: start; }
    }

    /* Respect reduced-motion everywhere polished */
    @media (prefers-reduced-motion: reduce){
      .ambient, .hero-badge .dot{ animation: none !important; }
      .btn, .btn-primary, .btn-ghost, .nav-cta, .plan{
        transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
        transform: none !important;
      }
    }


    /* ═══════════════════════════════════════════════════════
       FEATURES PAGE — engine-accurate, ethereal-glass vibe

       Six chapters mapped to real engine capabilities (verified via
       engine-src/, src/profiles.js, src/exporters.js, etc.):
         01 Pipeline (8-phase build)
         02 Allocation (4-tier hierarchy + CMK / Maison / KA / KD / SK)
         03 Validation (8 safety checks + phantom scan callout)
         04 Library (41 profiles by region + hardware catalogue)
         05 Interchange (5 export + 3 import formats)
         06 Operations (workshop / customer / team / account)

       Design language follows leonxlnx high-end-visual-design +
       redesign-existing-projects skills, adapted for Astro + vanilla
       CSS (no Tailwind, no Framer): Ethereal Glass vibe, Asymmetric
       Bento layout, eyebrow-chip pattern, mono-tabular numbers,
       coloured severity stripes, staggered .reveal scroll-in.

       All rules live in this external file; CSP refuses inline
       <style> elements. See feedback_no_inline_style_blocks memory.
       ═══════════════════════════════════════════════════════ */

    /* ── Stagger setup — children read --i and offset their
       animation. .reveal toggles to .in via landing-init.js's
       IntersectionObserver. */
    @keyframes ftrFadeUp{
      from{ opacity:0; transform:translateY(12px); }
      to  { opacity:1; transform:none; }
    }
    .ftr-pipe-row,
    .ftr-tile,
    .ftr-check-row,
    .ftr-region,
    .ftr-file,
    .ftr-team-strip li{
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .ftr-pipe-row,
    .reveal.in .ftr-tile,
    .reveal.in .ftr-check-row,
    .reveal.in .ftr-region,
    .reveal.in .ftr-file,
    .reveal.in.ftr-team-strip li{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 60ms);
    }
    @media (prefers-reduced-motion: reduce){
      .ftr-pipe-row,
      .ftr-tile,
      .ftr-check-row,
      .ftr-region,
      .ftr-file,
      .ftr-team-strip li{
        opacity:1;
        transform:none;
        animation:none !important;
      }
    }

    /* ── Hero ───────────────────────────────────────────── */
    .ftr-hero{
      padding:88px 0 32px;
      position:relative;
      overflow:hidden;
    }
    @media (max-width: 720px){ .ftr-hero{ padding:56px 0 16px; } }
    /* Subtle ambient glow — single radial, low opacity, no big purple
       wash. Sits below content via z-index. */
    .ftr-hero::before{
      content:"";
      position:absolute;
      top:-180px; left:50%;
      width:680px; height:680px;
      transform:translateX(-50%);
      background:radial-gradient(closest-side, rgba(77,71,195,0.18), transparent 70%);
      filter:blur(40px);
      pointer-events:none;
      z-index:0;
    }
    .ftr-hero > .wrap{ position:relative; z-index:1; }
    .ftr-hero-wrap{ max-width:1040px; }

    .ftr-hero-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--t3);
      padding:7px 14px;
      border:1px solid var(--bd-2);
      border-radius:999px;
      margin-bottom:36px;
      background:rgba(255,255,255,0.02);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .ftr-hero-eyebrow .dot{
      width:6px; height:6px;
      border-radius:999px;
      background:var(--brand-3);
      box-shadow:0 0 8px rgba(182,178,240,.6);
    }
    .ftr-hero-eyebrow .sep{ color:var(--t4); margin:0 4px; }

    .ftr-hero-title{
      font-family:var(--f-sans);
      font-size:clamp(44px, 9vw, 104px);
      line-height:.92;
      letter-spacing:-0.045em;
      font-weight:600;
      color:var(--t1);
      margin:0 0 32px;
      text-wrap:balance;
    }
    /* Sub-page hero accent — solid brand-3 word emphasis. Replaces the
       gradient-text fill that used to live on .ftr-hero-title .grad — the
       audit flagged it as the AI-default purple-gradient cliché stamped on
       every sub-page hero. Home (.hero h1 .grad) and FinalCTA (.final h2
       .grad) keep the gradient because they're load-bearing moments. */
    .brand-accent{ color:var(--brand-3); }

    .ftr-hero-deck{
      font-size:19px;
      line-height:1.55;
      color:var(--t2);
      max-width:60ch;
      margin:0 0 48px;
    }
    @media (max-width: 540px){
      .ftr-hero-deck{ font-size:16px; margin-bottom:36px; }
    }

    /* Stat strip — true grid, mono numbers, no card chrome. Hairline
       dividers via gap:1px on a bd background. */
    .ftr-hero-stats{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:1px;
      margin:0;
      padding:0;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:16px;
      overflow:hidden;
    }
    @media (min-width: 760px){
      .ftr-hero-stats{ grid-template-columns:repeat(4, 1fr); }
    }
    .ftr-hero-stats > div{
      background:var(--bg);
      padding:22px 22px 20px;
      display:flex;
      flex-direction:column;
      gap:6px;
      transition:background .25s cubic-bezier(.32,.72,0,1);
    }
    .ftr-hero-stats > div:hover{ background:var(--bg-2); }
    .ftr-hero-stats dt{
      font-family:var(--f-mono);
      font-size:clamp(26px, 4.6vw, 38px);
      font-weight:600;
      letter-spacing:-0.025em;
      color:var(--t1);
      font-variant-numeric:tabular-nums;
      line-height:1;
    }
    .ftr-hero-stats dd{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.08em;
      color:var(--t3);
      margin:0;
      text-transform:uppercase;
    }

    /* ── Section + chapter header ──────────────────────────── */
    .ftr-section{
      padding:96px 0 32px;
      border-top:1px solid var(--bd);
    }
    @media (max-width: 720px){ .ftr-section{ padding:64px 0 20px; } }

    .ftr-chap{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:22px;
      align-items:start;
      margin-bottom:56px;
      max-width:880px;
    }
    @media (max-width: 540px){
      .ftr-chap{ gap:16px; margin-bottom:40px; }
    }
    .ftr-chap-num{
      font-family:var(--f-mono);
      font-size:clamp(40px, 7.5vw, 64px);
      font-weight:300;
      line-height:1;
      letter-spacing:-0.05em;
      color:var(--t4);
      font-variant-numeric:tabular-nums;
      padding-top:8px;
    }
    .ftr-chap-body{ min-width:0; }
    .ftr-chap-body .eyebrow{ margin-bottom:12px; }
    .ftr-h2{
      font-family:var(--f-sans);
      font-size:clamp(28px, 5.2vw, 48px);
      line-height:1.04;
      letter-spacing:-0.028em;
      font-weight:500;
      color:var(--t1);
      margin:0 0 16px;
      text-wrap:balance;
    }
    .ftr-h2 .muted{ color:var(--t3); font-weight:400; }
    .ftr-chap-deck{
      font-size:16px;
      line-height:1.6;
      color:var(--t2);
      margin:0;
      max-width:62ch;
    }

    /* ── 01 Pipeline (8 phases) ─────────────────────────── */
    .ftr-pipe{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:14px;
      overflow:hidden;
    }
    @media (min-width: 760px){
      .ftr-pipe{ grid-template-columns:1fr 1fr; }
    }
    .ftr-pipe-row{
      display:grid;
      grid-template-columns:48px 1fr;
      gap:14px;
      padding:22px 22px 22px 18px;
      background:var(--bg);
      align-items:start;
      transition:background .25s cubic-bezier(.32,.72,0,1);
    }
    .ftr-pipe-row:hover{ background:var(--bg-2); }
    .ftr-pipe-num{
      font-family:var(--f-mono);
      font-size:13px;
      font-weight:500;
      letter-spacing:.04em;
      color:var(--brand-3);
      font-variant-numeric:tabular-nums;
      padding-top:3px;
    }
    .ftr-pipe-body h3{
      font-size:16px;
      font-weight:500;
      letter-spacing:-0.005em;
      color:var(--t1);
      margin:0 0 4px;
      line-height:1.25;
    }
    .ftr-pipe-body p{
      color:var(--t2);
      font-size:14px;
      line-height:1.55;
      margin:0;
      max-width:42ch;
    }

    /* ── 02 / 06 Bento (asymmetric tiles) ───────────────── */
    .ftr-bento{
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:16px;
      overflow:hidden;
    }
    @media (min-width: 760px){
      .ftr-bento{ grid-template-columns:repeat(3, 1fr); }
      .ftr-bento .ftr-tile-wide{ grid-column:span 2; }
    }
    .ftr-tile{
      background:var(--bg);
      padding:30px 28px 32px;
      display:flex;
      flex-direction:column;
      gap:8px;
      transition:background .25s cubic-bezier(.32,.72,0,1);
      position:relative;
    }
    .ftr-tile:hover{ background:var(--bg-2); }
    .ftr-tile-tag{
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:500;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--brand-3);
      margin-bottom:10px;
    }
    .ftr-tile h4{
      font-size:18px;
      font-weight:500;
      letter-spacing:-0.012em;
      color:var(--t1);
      margin:0;
      line-height:1.25;
    }
    .ftr-tile p{
      color:var(--t2);
      font-size:14.5px;
      line-height:1.55;
      margin:0;
      max-width:46ch;
    }

    /* ── 03 Validation list (severity stripes) ──────────── */
    .ftr-checks-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .ftr-check-row{
      display:grid;
      grid-template-columns:72px 1fr;
      grid-template-areas:
        "tag name"
        "tag line";
      gap:2px 18px;
      align-items:start;
      padding:20px 16px 20px 18px;
      border-top:1px solid var(--bd);
      border-left:3px solid transparent;
      transition:background .2s cubic-bezier(.32,.72,0,1), border-left-color .2s ease;
    }
    .ftr-check-row:last-child{ border-bottom:1px solid var(--bd); }
    .ftr-check-row:hover{ background:var(--bg-2); }
    .ftr-sev-crit{ border-left-color:#EF4444; }
    .ftr-sev-warn{ border-left-color:#F59E0B; }
    .ftr-sev-req { border-left-color:#A8A8B3; }
    .ftr-sev-qual{ border-left-color:var(--brand); }
    .ftr-check-tag{
      grid-area:tag;
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:600;
      letter-spacing:.14em;
      padding:4px 8px;
      border-radius:4px;
      align-self:start;
      text-align:center;
    }
    .ftr-sev-crit .ftr-check-tag{ background:rgba(239,68,68,.14); color:#FCA5A5; }
    .ftr-sev-warn .ftr-check-tag{ background:rgba(245,158,11,.14); color:#FCD34D; }
    .ftr-sev-req  .ftr-check-tag{ background:rgba(168,168,179,.10); color:var(--t2); }
    .ftr-sev-qual .ftr-check-tag{ background:rgba(77,71,195,.14); color:#B6B2F0; }
    .ftr-check-name{
      grid-area:name;
      font-size:16px;
      font-weight:500;
      color:var(--t1);
      letter-spacing:-0.005em;
      line-height:1.3;
    }
    .ftr-check-line{
      grid-area:line;
      color:var(--t2);
      font-size:14px;
      line-height:1.5;
      margin-top:4px;
      max-width:60ch;
    }

    /* Phantom callout — Vantablack card, minimal chrome */
    .ftr-callout{
      margin:36px 0 0;
      padding:28px 30px;
      background:var(--bg-2);
      border:1px solid var(--bd-2);
      border-radius:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .ftr-callout-tag{
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:600;
      letter-spacing:.18em;
      color:var(--brand-3);
    }
    .ftr-callout p{
      font-size:15px;
      line-height:1.6;
      color:var(--t2);
      margin:0;
      max-width:70ch;
    }

    /* ── 04 Region cards + hardware ─────────────────────── */
    .ftr-regions{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      margin-bottom:36px;
    }
    @media (min-width: 600px){ .ftr-regions{ grid-template-columns:1fr 1fr; } }
    .ftr-region{
      padding:22px 24px 20px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition:background .25s cubic-bezier(.32,.72,0,1), border-color .25s ease;
    }
    .ftr-region:hover{
      background:var(--bg-3);
      border-color:var(--bd-2);
    }
    .ftr-region-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
    }
    .ftr-region-tag{
      font-family:var(--f-mono);
      font-size:11px;
      font-weight:600;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t2);
    }
    .ftr-region-count{
      font-family:var(--f-mono);
      font-size:24px;
      font-weight:500;
      letter-spacing:-0.02em;
      color:var(--t1);
      font-variant-numeric:tabular-nums;
    }
    .ftr-region p{
      font-size:13.5px;
      line-height:1.55;
      color:var(--t3);
      margin:0;
    }

    .ftr-hw{
      padding:26px 28px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:14px;
      display:grid;
      gap:18px;
    }
    @media (min-width: 760px){
      .ftr-hw{ grid-template-columns:auto 1fr; gap:36px; align-items:start; }
    }
    .ftr-hw-head .eyebrow{ margin-bottom:8px; }
    .ftr-hw-head h3{
      font-size:20px;
      font-weight:500;
      letter-spacing:-0.012em;
      color:var(--t1);
      margin:0;
      line-height:1.25;
      white-space:nowrap;
    }
    @media (max-width: 540px){
      .ftr-hw-head h3{ white-space:normal; }
    }
    .ftr-hw-head .muted{ color:var(--t4); margin:0 4px; }
    .ftr-hw-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:6px;
    }
    .ftr-hw-list li{
      font-size:14px;
      color:var(--t2);
      line-height:1.45;
      padding-left:18px;
      position:relative;
    }
    .ftr-hw-list li::before{
      content:"";
      position:absolute;
      left:0; top:9px;
      width:6px; height:1px;
      background:var(--t4);
    }

    /* ── 05 Interchange (export + import side-by-side) ──── */
    .ftr-interchange{
      display:grid;
      grid-template-columns:1fr;
      gap:32px;
    }
    @media (min-width: 880px){
      .ftr-interchange{ grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
    }
    .ftr-io{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .ftr-io-head{
      display:flex;
      align-items:baseline;
      gap:14px;
      padding:0 0 14px;
      border-bottom:1px solid var(--bd);
    }
    .ftr-io-arrow{
      font-family:var(--f-mono);
      font-size:22px;
      line-height:1;
      color:var(--brand-3);
      font-weight:300;
    }
    .ftr-io-cap{
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:.08em;
      color:var(--t4);
      margin-left:auto;
      text-transform:uppercase;
    }

    .ftr-files{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:1fr;
    }
    .ftr-file{
      display:grid;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:"ext name line";
      gap:0 22px;
      align-items:center;
      padding:16px 0;
      border-bottom:1px solid var(--bd);
      transition:padding .2s cubic-bezier(.32,.72,0,1), background .2s ease;
    }
    .ftr-file:hover{ background:var(--bg-2); padding-left:8px; padding-right:8px; }
    @media (max-width: 660px){
      .ftr-file{
        grid-template-columns:auto 1fr;
        grid-template-areas:
          "ext name"
          "ext line";
        gap:2px 16px;
        align-items:start;
      }
      .ftr-file:hover{ padding-left:0; padding-right:0; }
    }
    .ftr-file-ext{
      grid-area:ext;
      font-family:var(--f-mono);
      font-size:13px;
      font-weight:500;
      color:var(--brand-3);
      background:var(--bg-3);
      padding:6px 10px;
      border-radius:6px;
      letter-spacing:.02em;
      width:max-content;
      min-width:54px;
      text-align:center;
    }
    .ftr-file-name{
      grid-area:name;
      font-size:15.5px;
      font-weight:500;
      color:var(--t1);
      letter-spacing:-0.005em;
    }
    .ftr-file-line{
      grid-area:line;
      font-size:13.5px;
      color:var(--t2);
      line-height:1.5;
    }
    @media (min-width: 660px){
      .ftr-file-line{ text-align:right; }
    }

    /* ── 06 Team strip (small horizontal list) ──────────── */
    .ftr-team-strip{
      list-style:none;
      margin:32px 0 0;
      padding:18px 22px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px 16px;
      font-family:var(--f-mono);
      font-size:12.5px;
      color:var(--t2);
      letter-spacing:.02em;
    }
    .ftr-team-strip li{
      position:relative;
      padding-left:14px;
    }
    .ftr-team-strip li::before{
      content:"·";
      position:absolute;
      left:0; top:0;
      color:var(--t4);
    }
    .ftr-team-strip li:first-child{ padding-left:0; }
    .ftr-team-strip li:first-child::before{ content:""; }

    /* ═══════════════════════════════════════════════════════
       PRICING PAGE — editorial 2-tier (Pro primary, Team
       secondary) + trial lifecycle strip + diff list

       Reuses the .ftr-* hero / chap / bento / tile primitives
       from the features page. .pri-* classes are pricing-only
       (the 2-tier plan layout, trial steps, diff list, honest
       columns). Same CSP constraint — all rules live here.
       ═══════════════════════════════════════════════════════ */

    /* ── 01 Plans — asymmetric 2-card ───────────────────── */
    .pri-plans{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
    }
    @media (min-width: 880px){
      /* Pro takes 1.4fr, Team takes 1fr — visually larger card
         with more breathing room, primary action emphasised. */
      .pri-plans{ grid-template-columns:1.4fr 1fr; gap:20px; }
    }

    .pri-plan{
      position:relative;
      padding:34px 32px 32px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:18px;
      display:flex;
      flex-direction:column;
      gap:20px;
      transition:border-color .25s cubic-bezier(.32,.72,0,1), background .25s ease;
    }
    .pri-plan:hover{ border-color:var(--bd-2); }

    /* Pro card — ambient brand-coloured glow above the border to
       mark primary without painting the whole card purple. The
       glow is a thin gradient hairline, not a shadow halo. */
    .pri-plan-pro{
      background:
        radial-gradient(120% 80% at 50% 0%, rgba(77,71,195,0.08), transparent 60%),
        var(--bg-2);
      border-color:var(--bd-2);
    }
    .pri-plan-pro::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(180deg, rgba(182,178,240,0.45) 0%, transparent 30%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
              mask-composite:exclude;
      pointer-events:none;
    }

    .pri-plan-head{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .pri-plan-meta{
      display:flex;
      align-items:baseline;
      gap:14px;
      flex-wrap:wrap;
    }
    .pri-plan-tag{
      font-family:var(--f-sans);
      font-size:22px;
      font-weight:500;
      letter-spacing:-0.012em;
      color:var(--t1);
    }
    .pri-plan-sub{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .pri-plan-price{
      display:flex;
      align-items:baseline;
      gap:10px;
    }
    .pri-plan-amt{
      font-family:var(--f-mono);
      font-size:clamp(40px, 6vw, 56px);
      font-weight:600;
      letter-spacing:-0.03em;
      color:var(--t1);
      font-variant-numeric:tabular-nums;
      line-height:1;
    }
    .pri-plan-per{
      font-family:var(--f-mono);
      font-size:12px;
      letter-spacing:.06em;
      color:var(--t3);
      text-transform:uppercase;
    }

    .pri-plan-deck{
      font-size:15px;
      line-height:1.6;
      color:var(--t2);
      margin:0;
      max-width:48ch;
    }
    .pri-plan-list{
      list-style:none;
      margin:0;
      padding:14px 0 0;
      display:flex;
      flex-direction:column;
      gap:10px;
      border-top:1px solid var(--bd);
    }
    .pri-plan-list li{
      font-size:14px;
      color:var(--t2);
      line-height:1.5;
      padding-left:22px;
      position:relative;
    }
    .pri-plan-list li::before{
      content:"";
      position:absolute;
      left:2px; top:8px;
      width:8px; height:8px;
      border-radius:999px;
      background:var(--brand-3);
      opacity:.45;
    }
    .pri-plan-pro .pri-plan-list li::before{ opacity:.7; }
    .pri-plan-list strong{ color:var(--t1); font-weight:500; }

    /* CTA — nested icon (button-in-button) per the high-end-
       visual-design skill. Tactile push on :active. */
    .pri-plan-cta{
      display:inline-flex;
      align-items:center;
      gap:10px;
      align-self:flex-start;
      padding:12px 18px 12px 22px;
      background:transparent;
      color:var(--t1);
      font-size:14.5px;
      font-weight:500;
      letter-spacing:-0.005em;
      border:1px solid var(--bd-3);
      border-radius:999px;
      transition:background .2s cubic-bezier(.32,.72,0,1), border-color .2s ease, transform .15s ease;
    }
    .pri-plan-cta:hover{
      background:var(--bg-3);
      border-color:var(--brand-3);
      color:var(--t1);
    }
    .pri-plan-cta:active{ transform:translateY(1px); }
    .pri-plan-cta-primary{
      background:var(--brand);
      border-color:var(--brand);
      color:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .pri-plan-cta-primary:hover{
      background:var(--brand-2);
      border-color:var(--brand-2);
      color:#fff;
    }
    .pri-plan-cta-icon{
      width:24px; height:24px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,0.10);
      transition:transform .2s cubic-bezier(.32,.72,0,1), background .2s ease;
    }
    .pri-plan-cta:hover .pri-plan-cta-icon{
      transform:translateX(2px);
    }
    .pri-plan-cta-primary .pri-plan-cta-icon{ background:rgba(255,255,255,0.16); }

    .pri-plan-foot{
      font-family:var(--f-mono);
      font-size:11.5px;
      letter-spacing:.04em;
      color:var(--t3);
      margin:0;
      padding-top:6px;
    }
    .pri-plan-foot strong{ color:var(--t1); font-weight:600; }
    /* Refund-policy callout — visually subordinate to the annual pricing
       above, but still readable. Same mono font; italics drop the
       authoritative weight so it reads as supplementary trust signal,
       not a feature claim. */
    .pri-plan-refund{
      display:inline-block;
      margin-top:2px;
      font-style:italic;
      color:var(--t2);
    }

    /* ── 02 Trial 4-step strip ──────────────────────────── */
    .pri-trial{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
    }
    @media (min-width: 720px){
      .pri-trial{ grid-template-columns:repeat(4, 1fr); gap:14px; }
    }
    .pri-trial-step{
      padding:22px 22px 24px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:14px;
      display:flex;
      flex-direction:column;
      gap:6px;
      transition:background .25s cubic-bezier(.32,.72,0,1), border-color .25s ease;
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .pri-trial-step{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 80ms);
    }
    @media (prefers-reduced-motion: reduce){
      .pri-trial-step{ opacity:1; transform:none; animation:none !important; }
    }
    .pri-trial-step:hover{ background:var(--bg-3); border-color:var(--bd-2); }
    .pri-trial-num{
      font-family:var(--f-mono);
      font-size:11px;
      font-weight:500;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--brand-3);
      margin-bottom:4px;
    }
    .pri-trial-step h3{
      font-size:18px;
      font-weight:500;
      letter-spacing:-0.01em;
      color:var(--t1);
      margin:0;
      line-height:1.25;
    }
    .pri-trial-step p{
      font-size:13.5px;
      line-height:1.55;
      color:var(--t2);
      margin:0;
      max-width:32ch;
    }

    /* ── 04 Team adds — diff list with "+" markers ──────── */
    .pri-adds{
      list-style:none;
      margin:0;
      padding:0;
    }
    .pri-add-row{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:18px;
      padding:22px 16px 22px 18px;
      border-top:1px solid var(--bd);
      border-left:3px solid transparent;
      transition:background .2s cubic-bezier(.32,.72,0,1), border-left-color .2s ease;
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .pri-add-row{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 60ms);
    }
    @media (prefers-reduced-motion: reduce){
      .pri-add-row{ opacity:1; transform:none; animation:none !important; }
    }
    .pri-add-row:last-child{ border-bottom:1px solid var(--bd); }
    .pri-add-row:hover{
      background:var(--bg-2);
      border-left-color:var(--brand);
    }
    .pri-add-mark{
      font-family:var(--f-mono);
      font-size:22px;
      font-weight:300;
      line-height:1;
      color:var(--brand-3);
      align-self:start;
      padding-top:4px;
      width:24px;
      text-align:center;
    }
    .pri-add-body h3{
      font-size:17px;
      font-weight:500;
      letter-spacing:-0.005em;
      color:var(--t1);
      margin:0 0 4px;
      line-height:1.25;
    }
    .pri-add-body p{
      font-size:14px;
      color:var(--t2);
      line-height:1.55;
      margin:0;
      max-width:60ch;
    }

    /* ── 05 Honest 2-up (never charged · never gated) ───── */
    .pri-honest{
      display:grid;
      grid-template-columns:1fr;
      gap:24px;
    }
    @media (min-width: 760px){
      .pri-honest{ grid-template-columns:1fr 1fr; gap:32px; }
    }
    .pri-honest-col{
      padding:28px 30px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:16px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .pri-honest-col .eyebrow{ margin-bottom:0; }
    .pri-honest-col ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .pri-honest-col li{
      font-size:14px;
      color:var(--t2);
      line-height:1.55;
      padding-left:18px;
      position:relative;
    }
    .pri-honest-col li::before{
      content:"";
      position:absolute;
      left:0; top:9px;
      width:8px; height:1px;
      background:var(--t4);
    }

    /* ═══════════════════════════════════════════════════════
       PROFILES PAGE — typography-driven spec-sheet catalogue

       Design vibe (different from features/pricing per the
       high-end-visual-design "never the same layout twice"
       rule): editorial reference catalogue. Mono carries the
       technical data; sans carries the names. No card boxes
       per row — hairline dividers + hover bg shift.

       Reuses .ftr-hero / .ftr-section / .ftr-chap primitives.
       prf-* classes are catalogue-specific.
       ═══════════════════════════════════════════════════════ */

    /* ── 01 Schema chip row ─────────────────────────────── */
    .prf-schema{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:14px;
      overflow:hidden;
    }
    @media (min-width: 660px){
      .prf-schema{ grid-template-columns:repeat(3, 1fr); }
    }
    @media (min-width: 1000px){
      .prf-schema{ grid-template-columns:repeat(6, 1fr); }
    }
    .prf-schema li{
      background:var(--bg);
      padding:18px 20px 16px;
      display:flex;
      flex-direction:column;
      gap:4px;
      transition:background .25s cubic-bezier(.32,.72,0,1);
    }
    .prf-schema li:hover{ background:var(--bg-2); }
    .prf-schema-key{
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .prf-schema-val{
      font-family:var(--f-mono);
      font-size:14px;
      font-weight:500;
      color:var(--t1);
      letter-spacing:-0.005em;
      font-variant-numeric:tabular-nums;
    }

    /* ── 02 Library — region sections ───────────────────── */
    .prf-regions{
      display:flex;
      flex-direction:column;
      gap:48px;
    }
    @media (max-width: 540px){ .prf-regions{ gap:36px; } }

    .prf-region-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:18px;
      padding:0 0 16px;
      border-bottom:1px solid var(--bd);
      margin-bottom:4px;
    }
    .prf-region-meta{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .prf-region-tag{
      font-family:var(--f-sans);
      font-size:clamp(22px, 3vw, 28px);
      font-weight:500;
      letter-spacing:-0.018em;
      color:var(--t1);
      line-height:1;
    }
    .prf-region-sub{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .prf-region-count{
      font-family:var(--f-mono);
      font-size:clamp(28px, 4vw, 40px);
      font-weight:300;
      letter-spacing:-0.04em;
      color:var(--t4);
      font-variant-numeric:tabular-nums;
      flex-shrink:0;
    }

    /* ── Profile rows — typography-driven, no card chrome ─ */
    .prf-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .prf-row{
      opacity:0;
      transform:translateY(6px);
    }
    .reveal.in .prf-row{
      animation:ftrFadeUp .45s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 30ms);
    }
    @media (prefers-reduced-motion: reduce){
      .prf-row{ opacity:1; transform:none; animation:none !important; }
    }
    .prf-row-inner{
      display:grid;
      grid-template-columns:1fr auto;
      grid-template-areas:
        "name arrow"
        "specs arrow";
      gap:4px 18px;
      align-items:center;
      padding:18px 16px 18px 18px;
      border-top:1px solid var(--bd);
      border-left:3px solid transparent;
      transition:background .2s cubic-bezier(.32,.72,0,1), border-left-color .2s ease, padding-left .25s cubic-bezier(.32,.72,0,1);
      text-decoration:none;
      color:inherit;
    }
    .prf-row:last-child .prf-row-inner{ border-bottom:1px solid var(--bd); }
    @media (min-width: 760px){
      .prf-row-inner{
        grid-template-columns:minmax(220px, 0.9fr) 1fr auto;
        grid-template-areas:"name specs arrow";
        padding:20px 16px 20px 18px;
        align-items:baseline;
      }
    }
    .prf-row-link:hover{
      background:var(--bg-2);
      border-left-color:var(--brand);
    }
    .prf-row-link:hover .prf-arrow{
      color:var(--brand-3);
      transform:translateX(3px);
    }
    .prf-name{
      grid-area:name;
      font-family:var(--f-sans);
      font-size:16px;
      font-weight:500;
      letter-spacing:-0.01em;
      color:var(--t1);
      line-height:1.25;
    }
    .prf-specs{
      grid-area:specs;
      display:flex;
      flex-wrap:wrap;
      align-items:baseline;
      gap:0 6px;
      font-family:var(--f-mono);
      font-size:12px;
      color:var(--t3);
      letter-spacing:.02em;
      font-variant-numeric:tabular-nums;
    }
    @media (min-width: 760px){
      .prf-specs{
        justify-content:flex-end;
      }
    }
    .prf-spec{ color:var(--t2); }
    .prf-spec-mfr{ color:var(--t1); font-weight:500; }
    .prf-spec-blank{ color:var(--brand-3); }
    .prf-sep{ color:var(--t4); }
    .prf-arrow{
      grid-area:arrow;
      font-family:var(--f-mono);
      font-size:18px;
      font-weight:300;
      color:var(--t4);
      line-height:1;
      transition:color .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
      align-self:center;
    }
    /* Inline arrow used in deck copy. */
    .prf-arrow-inline{
      font-family:var(--f-mono);
      color:var(--brand-3);
      padding:0 1px;
    }

    /* ── 03 Custom-profile schema callout ───────────────── */
    .prf-custom{
      padding:32px 32px 28px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:18px;
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    @media (max-width: 540px){
      .prf-custom{ padding:24px 22px 22px; }
    }
    .prf-custom-head .eyebrow{ margin-bottom:0; }
    .prf-custom-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:12px;
      overflow:hidden;
      margin:0;
    }
    @media (min-width: 660px){
      .prf-custom-grid{ grid-template-columns:repeat(4, 1fr); }
    }
    .prf-custom-grid > div{
      background:var(--bg);
      padding:18px 20px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .prf-custom-grid dt{
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .prf-custom-grid dd{
      margin:0;
    }
    .prf-custom-grid code{
      font-family:var(--f-mono);
      font-size:14.5px;
      font-weight:500;
      color:var(--t1);
      background:var(--bg-3);
      padding:4px 10px;
      border-radius:6px;
      letter-spacing:-0.005em;
      display:inline-block;
    }
    .prf-custom-foot{
      font-size:13.5px;
      line-height:1.55;
      color:var(--t3);
      margin:0;
      max-width:60ch;
    }

    /* ═══════════════════════════════════════════════════════
       GLOSSARY PAGE — editorial dictionary

       Vibe: editorial reference. Different layout from features,
       pricing, and profiles per the high-end-visual-design skill's
       "never the same layout twice" rule. This one leans into:
       - A-Z navigation strip (anchor jumps; CSS-only)
       - Letter-led editorial rows (massive mono letter as section
         mark on the left, terms cascade beside it)
       - Category-colored left rules per term row to keep visual
         rhythm without painting whole rows
       ═══════════════════════════════════════════════════════ */

    /* ── 01 Category overview cards ─────────────────────── */
    .gls-cats{
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:16px;
      overflow:hidden;
    }
    @media (min-width: 660px){
      .gls-cats{ grid-template-columns:repeat(2, 1fr); }
    }
    @media (min-width: 1000px){
      .gls-cats{ grid-template-columns:repeat(4, 1fr); }
    }
    .gls-cat{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:24px 26px 28px;
      background:var(--bg);
      text-decoration:none;
      color:inherit;
      position:relative;
      transition:background .25s cubic-bezier(.32,.72,0,1);
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .gls-cat{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 70ms);
    }
    @media (prefers-reduced-motion: reduce){
      .gls-cat{ opacity:1; transform:none; animation:none !important; }
    }
    .gls-cat:hover{ background:var(--bg-2); }
    /* Top-edge accent — colour communicates category without painting
       the whole card. Subtle. */
    .gls-cat::before{
      content:"";
      position:absolute;
      top:0; left:0; right:0;
      height:2px;
      background:var(--accent, var(--brand));
      opacity:.55;
      transition:opacity .25s ease;
    }
    .gls-cat:hover::before{ opacity:.9; }
    .gls-cat-hw   { --accent:#A8A8B3; }
    .gls-cat-key  { --accent:#B6B2F0; }
    .gls-cat-math { --accent:#FCD34D; }
    .gls-cat-comp { --accent:#FCA5A5; }
    .gls-cat-wf   { --accent:#86EFAC; }

    .gls-cat-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
    }
    .gls-cat-name{
      font-family:var(--f-sans);
      font-size:20px;
      font-weight:500;
      letter-spacing:-0.012em;
      color:var(--t1);
      line-height:1;
    }
    .gls-cat-count{
      font-family:var(--f-mono);
      font-size:24px;
      font-weight:300;
      letter-spacing:-0.03em;
      color:var(--t4);
      font-variant-numeric:tabular-nums;
      line-height:1;
    }
    .gls-cat-blurb{
      font-size:13.5px;
      line-height:1.55;
      color:var(--t3);
      margin:0;
      max-width:34ch;
    }

    /* ── A–Z navigation strip ───────────────────────────── */
    .gls-az{
      display:flex;
      flex-wrap:wrap;
      gap:4px;
      margin:0 0 32px;
      padding:14px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:14px;
    }
    .gls-az-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:32px;
      border-radius:6px;
      font-family:var(--f-mono);
      font-size:13px;
      font-weight:500;
      letter-spacing:.02em;
      color:var(--t1);
      text-decoration:none;
      transition:background .2s cubic-bezier(.32,.72,0,1), color .2s ease;
    }
    .gls-az-btn:hover{
      background:var(--brand);
      color:#fff;
    }
    .gls-az-empty{
      color:var(--t4);
      pointer-events:none;
      cursor:default;
    }
    .gls-az-empty:hover{ background:transparent; color:var(--t4); }

    /* ── Letter sections — big mark + term rows ─────────── */
    .gls-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .gls-letter{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
      padding:28px 0;
      border-top:1px solid var(--bd);
      scroll-margin-top:90px;
    }
    .gls-letter:first-child{ padding-top:8px; border-top:0; }
    @media (min-width: 760px){
      .gls-letter{
        grid-template-columns:140px 1fr;
        gap:32px;
        align-items:start;
        padding:36px 0;
      }
    }
    .gls-letter-mark{
      font-family:var(--f-mono);
      font-size:clamp(64px, 10vw, 120px);
      font-weight:300;
      line-height:.85;
      letter-spacing:-0.06em;
      color:var(--t4);
      font-variant-numeric:tabular-nums;
      position:sticky;
      top:90px;
      align-self:start;
    }
    @media (max-width: 759px){
      .gls-letter-mark{ position:static; font-size:48px; }
    }

    .gls-terms{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
    }
    .gls-term{
      opacity:0;
      transform:translateY(6px);
    }
    .reveal.in .gls-term{
      animation:ftrFadeUp .45s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 35ms);
    }
    @media (prefers-reduced-motion: reduce){
      .gls-term{ opacity:1; transform:none; animation:none !important; }
    }

    .gls-term-link{
      display:grid;
      grid-template-columns:1fr auto;
      grid-template-areas:
        "name arr"
        "cat  arr"
        "def  def";
      gap:6px 16px;
      padding:18px 16px 18px 18px;
      border-top:1px solid var(--bd);
      border-left:3px solid transparent;
      text-decoration:none;
      color:inherit;
      transition:background .2s cubic-bezier(.32,.72,0,1), border-left-color .2s ease, padding-left .25s cubic-bezier(.32,.72,0,1);
    }
    .gls-terms .gls-term:last-child .gls-term-link{ border-bottom:1px solid var(--bd); }
    @media (min-width: 760px){
      .gls-term-link{
        grid-template-columns:minmax(180px, 1fr) auto 2fr auto;
        grid-template-areas:"name cat def arr";
        align-items:baseline;
        gap:0 22px;
        padding:18px 18px 18px 18px;
      }
    }
    .gls-term-link:hover{
      background:var(--bg-2);
    }
    /* Per-category coloured left rule on hover — same palette as the
       category cards above. */
    .gls-cat-hw:hover  { border-left-color:#A8A8B3; }
    .gls-cat-key:hover { border-left-color:#B6B2F0; }
    .gls-cat-math:hover{ border-left-color:#FCD34D; }
    .gls-cat-comp:hover{ border-left-color:#FCA5A5; }
    .gls-cat-wf:hover  { border-left-color:#86EFAC; }
    .gls-term-link:hover .gls-term-arr{
      color:var(--brand-3);
      transform:translateX(3px);
    }

    .gls-term-name{
      grid-area:name;
      font-family:var(--f-sans);
      font-size:clamp(18px, 2.3vw, 22px);
      font-weight:500;
      letter-spacing:-0.012em;
      color:var(--t1);
      line-height:1.2;
    }
    .gls-term-cat{
      grid-area:cat;
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:500;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
      align-self:center;
      white-space:nowrap;
    }
    .gls-term-def{
      grid-area:def;
      font-size:14px;
      line-height:1.5;
      color:var(--t2);
      max-width:60ch;
    }
    @media (min-width: 760px){
      .gls-term-def{ font-size:14.5px; line-height:1.45; }
    }
    .gls-term-arr{
      grid-area:arr;
      font-family:var(--f-mono);
      font-size:18px;
      font-weight:300;
      color:var(--t4);
      line-height:1;
      align-self:center;
      transition:color .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
    }

    /* ═══════════════════════════════════════════════════════
       COMPARE PAGE — directional task pairs

       Vibe: forensic comparison. Different layout from features /
       pricing / profiles / glossary per the high-end-visual-design
       "never the same layout twice" rule. Each task reads
       "spreadsheet → engine" with an SVG arrow connector between
       on desktop (rotates to ↓ on mobile). The spotlight row
       (phantom scan) gets an asymmetric treatment that lets
       Keyzee dominate while spreadsheet gets a single-line dismissal.

       Spreadsheet column: muted text, amber 1px left rule (warning).
       Keyzee column: primary text, brand 3px left rule (the upgrade).

       All rules in landing.css; .astro file ships with no scoped
       <style> block.
       ═══════════════════════════════════════════════════════ */

    .cmp-tasks{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:36px;
    }
    @media (min-width: 760px){ .cmp-tasks{ gap:56px; } }

    .cmp-task{
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .cmp-task{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 80ms);
    }
    @media (prefers-reduced-motion: reduce){
      .cmp-task{ opacity:1; transform:none; animation:none !important; }
    }

    /* Task chapter header */
    .cmp-head{
      display:grid;
      grid-template-columns:auto 1fr;
      grid-template-areas:
        "num title"
        "num sub";
      gap:6px 18px;
      align-items:start;
      margin-bottom:22px;
      padding-bottom:18px;
      border-bottom:1px solid var(--bd);
    }
    @media (max-width: 540px){
      .cmp-head{ gap:4px 14px; margin-bottom:18px; padding-bottom:14px; }
    }
    .cmp-num{
      grid-area:num;
      font-family:var(--f-mono);
      font-size:13px;
      font-weight:500;
      letter-spacing:.04em;
      color:var(--brand-3);
      font-variant-numeric:tabular-nums;
      padding-top:4px;
      align-self:start;
    }
    .cmp-num-total{ color:var(--t4); font-weight:300; }
    .cmp-title{
      grid-area:title;
      font-family:var(--f-sans);
      font-size:clamp(20px, 3vw, 28px);
      font-weight:500;
      letter-spacing:-0.018em;
      color:var(--t1);
      margin:0;
      line-height:1.15;
    }
    .cmp-sub{
      grid-area:sub;
      font-size:14.5px;
      line-height:1.55;
      color:var(--t3);
      margin:6px 0 0;
      max-width:60ch;
    }

    /* The pair — two cards with an arrow connector between */
    .cmp-pair{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      align-items:stretch;
    }
    @media (min-width: 760px){
      .cmp-pair{
        grid-template-columns:1fr auto 1fr;
        gap:14px 16px;
      }
    }

    .cmp-side{
      padding:22px 24px 24px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:14px;
      display:flex;
      flex-direction:column;
      gap:14px;
      transition:background .25s cubic-bezier(.32,.72,0,1), border-color .25s ease;
    }
    .cmp-side-sheet{
      border-left:3px solid #F59E0B;
      background:linear-gradient(180deg, rgba(245,158,11,0.04), var(--bg-2) 60%);
    }
    .cmp-side-keyzee{
      border-left:3px solid var(--brand);
      background:linear-gradient(180deg, rgba(77,71,195,0.06), var(--bg-2) 60%);
    }
    .cmp-side-sheet:hover{ background:var(--bg-3); }
    .cmp-side-keyzee:hover{
      background:linear-gradient(180deg, rgba(77,71,195,0.10), var(--bg-3) 60%);
    }

    .cmp-side-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .cmp-side-label{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .cmp-side-tag{
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:600;
      letter-spacing:.14em;
      padding:3px 8px;
      border-radius:4px;
    }
    .cmp-side-tag-sheet{
      background:rgba(245,158,11,.14);
      color:#FCD34D;
    }
    .cmp-side-tag-keyzee{
      background:rgba(77,71,195,.16);
      color:#B6B2F0;
    }

    .cmp-side p{
      font-size:14.5px;
      line-height:1.6;
      margin:0;
      max-width:42ch;
    }
    .cmp-side-sheet p{ color:var(--t3); }
    .cmp-side-keyzee p{ color:var(--t2); }

    /* Connector arrow — between the two cards on desktop, rotates
       to ↓ on mobile. Subtle circle backing for definition against
       the bg gradient. */
    .cmp-arrow{
      display:flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:999px;
      background:var(--bg-3);
      border:1px solid var(--bd-2);
      color:var(--brand-3);
      flex-shrink:0;
      align-self:center;
      justify-self:center;
      transition:transform .3s cubic-bezier(.32,.72,0,1), background .25s ease;
    }
    .cmp-task:hover .cmp-arrow{
      background:var(--brand);
      color:#fff;
      border-color:var(--brand);
    }
    @media (max-width: 759px){
      .cmp-arrow{
        transform:rotate(90deg);
        margin:0 auto;
      }
      .cmp-task:hover .cmp-arrow{
        transform:rotate(90deg);
      }
    }

    /* Spotlight task — phantom scan row. Asymmetric: spreadsheet
       column shrinks, Keyzee column dominates. Used only for the
       killer-feature row. */
    @media (min-width: 760px){
      .cmp-task-spot .cmp-pair{
        grid-template-columns:0.55fr auto 1.45fr;
      }
      .cmp-task-spot .cmp-side-keyzee{
        padding:28px 30px 30px;
      }
      .cmp-task-spot .cmp-side-keyzee .cmp-side-label{
        font-size:12px;
      }
      .cmp-task-spot .cmp-side-keyzee p{
        font-size:15.5px;
        max-width:54ch;
      }
    }

    /* ── Break-even math — 3-up financial summary ───────── */
    .cmp-math{
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:18px;
      overflow:hidden;
    }
    @media (min-width: 760px){
      .cmp-math{ grid-template-columns:1fr 1fr 1fr; }
    }
    .cmp-math-side,
    .cmp-math-result{
      background:var(--bg);
      padding:28px 28px 30px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition:background .25s cubic-bezier(.32,.72,0,1);
    }
    .cmp-math-side:hover,
    .cmp-math-result:hover{ background:var(--bg-2); }
    .cmp-math-side-keyzee{
      background:linear-gradient(180deg, rgba(77,71,195,0.08), var(--bg) 70%);
    }
    .cmp-math-side-keyzee:hover{
      background:linear-gradient(180deg, rgba(77,71,195,0.12), var(--bg-2) 70%);
    }
    .cmp-math-result{
      background:var(--bg-2);
    }
    .cmp-math-result:hover{ background:var(--bg-3); }
    .cmp-math-label{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .cmp-math-num{
      font-family:var(--f-mono);
      font-size:clamp(34px, 5.5vw, 48px);
      font-weight:600;
      letter-spacing:-0.025em;
      color:var(--t1);
      font-variant-numeric:tabular-nums;
      line-height:1;
    }
    .cmp-math-unit{
      font-size:14px;
      font-weight:400;
      letter-spacing:.04em;
      color:var(--t3);
      margin-left:4px;
    }
    .cmp-math-side p,
    .cmp-math-result p{
      font-size:13.5px;
      line-height:1.55;
      color:var(--t2);
      margin:6px 0 0;
      max-width:34ch;
    }

    /* ═══════════════════════════════════════════════════════
       COMPARE PAGE v2 — show, don't tell

       Same job rendered two ways: a literal Excel-style WHITE
       card (mono cells, column letters, yellow flags, red margin
       notes) followed by the Keyzee equivalent in dark mode (clean
       schedule, mono bittings, validation panel, grade badge).

       The contrast IS the persuasion — light-on-dark for the
       spreadsheet, dark-on-dark for Keyzee, both viewed on the
       same dark page. Visual juxtaposition.

       All v1 .cmp-* rules above are still in this file; they're
       dead code now but harmless. New rules below override the
       handful that share names (.cmp-math-* is shared).
       ═══════════════════════════════════════════════════════ */

    /* ── 01 The job spec ──────────────────────────────── */
    .cmp-job{
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:14px;
      overflow:hidden;
      margin:0;
      padding:0;
    }
    @media (min-width: 600px){ .cmp-job{ grid-template-columns:repeat(3, 1fr); } }
    @media (min-width: 1000px){ .cmp-job{ grid-template-columns:repeat(6, 1fr); } }
    .cmp-job > div{
      background:var(--bg);
      padding:18px 20px;
      display:flex;
      flex-direction:column;
      gap:6px;
      transition:background .25s cubic-bezier(.32,.72,0,1);
    }
    .cmp-job > div:hover{ background:var(--bg-2); }
    .cmp-job dt{
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .cmp-job dd{
      font-family:var(--f-mono);
      font-size:15px;
      font-weight:500;
      color:var(--t1);
      letter-spacing:-0.005em;
      margin:0;
    }
    .cmp-job-sub{
      font-family:var(--f-mono);
      font-size:11.5px;
      font-weight:400;
      color:var(--t3);
      letter-spacing:.04em;
      display:block;
      margin-top:2px;
    }

    /* ── 02 The stage (artifact stack) ────────────────── */
    .cmp-stage{
      display:flex;
      flex-direction:column;
      gap:32px;
    }
    @media (min-width: 760px){ .cmp-stage{ gap:48px; } }

    .cmp-art{
      border-radius:18px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }

    .cmp-art-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:14px 22px;
      flex-wrap:wrap;
    }
    .cmp-art-tag{
      font-family:var(--f-mono);
      font-size:11px;
      font-weight:600;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .cmp-art-file{
      font-family:var(--f-mono);
      font-size:12.5px;
      letter-spacing:.02em;
      opacity:.7;
    }

    .cmp-art-foot{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1px;
      padding:0;
    }
    @media (min-width: 760px){ .cmp-art-foot{ grid-template-columns:repeat(4, 1fr); } }
    .cmp-art-foot > div{
      padding:14px 18px;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .cmp-art-foot-k{
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.65;
    }
    .cmp-art-foot-v{
      font-family:var(--f-mono);
      font-size:13.5px;
      font-weight:500;
      letter-spacing:-0.005em;
    }
    .cmp-art-foot-good{ color:#86EFAC; }
    .cmp-art-foot-bad{ color:#FCA5A5; }

    /* ── Spreadsheet artifact (LIGHT-MODE Excel feel) ─── */
    .cmp-art-sheet{
      background:#F4F1E8;
      color:#1f1f1f;
      border:1px solid rgba(0,0,0,0.08);
      box-shadow:0 24px 60px rgba(0,0,0,0.45);
      transform:rotate(-0.3deg);
      transition:transform .4s cubic-bezier(.32,.72,0,1);
    }
    .cmp-art-sheet:hover{ transform:rotate(0deg); }
    .cmp-art-sheet .cmp-art-head{
      background:#E8E4D5;
      border-bottom:1px solid rgba(0,0,0,0.10);
      color:#3a3a3a;
    }
    .cmp-art-sheet .cmp-art-tag{ color:#8a6d2e; }
    .cmp-art-sheet .cmp-art-file{ color:#6b6b6b; opacity:1; }

    .ssht{
      background:#FFFFFF;
      padding:0;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    /* Excel-style grid: column-letter row + row-number column +
       data cells. The first track is 36px (row numbers); columns
       are auto-sized after that. */
    .ssht-grid{
      display:grid;
      grid-template-columns:36px repeat(9, minmax(46px, auto));
      min-width:540px;
      font-family:var(--f-mono);
      font-size:12px;
      color:#1a1a1a;
    }
    .ssht-corner{
      background:#E8E4D5;
      border-right:1px solid #C8C4B5;
      border-bottom:1px solid #C8C4B5;
    }
    .ssht-col-h,
    .ssht-row-h{
      background:#E8E4D5;
      color:#3a3a3a;
      font-weight:500;
      padding:5px 8px;
      text-align:center;
      border-right:1px solid #C8C4B5;
      border-bottom:1px solid #C8C4B5;
      letter-spacing:.04em;
    }
    .ssht-row-h{ border-bottom:1px solid #E0DCCD; }
    .ssht-cell{
      padding:6px 8px;
      border-right:1px solid #E0DCCD;
      border-bottom:1px solid #E0DCCD;
      background:#FFFFFF;
      color:#1a1a1a;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .ssht-th{
      background:#F0EDDF;
      color:#3a3a3a;
      font-weight:600;
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .ssht-stamp{
      background:#FAF8EE;
      font-weight:500;
      color:#1a1a1a;
    }
    .ssht-bit{
      text-align:center;
    }
    /* Yellow flag — Excel's classic "I'll come back to this" highlight */
    .ssht-cell-flag{
      background:#FFF4B8;
      font-weight:600;
    }
    .ssht-note{
      color:#6b6b6b;
      font-style:italic;
      letter-spacing:.02em;
    }
    .ssht-note-warn{
      color:#B91C1C;
      font-weight:500;
      font-style:normal;
    }

    .ssht-margin{
      padding:18px 22px 16px;
      background:#FFF4B8;
      border-top:1px solid #C8C4B5;
      color:#3a3a3a;
      font-family:var(--f-mono);
      font-size:13px;
      font-style:italic;
      letter-spacing:.02em;
      transform:rotate(0.4deg);
      margin:8px 16px 12px;
      border:1px solid #D4C97A;
      border-radius:2px;
      box-shadow:0 4px 8px rgba(0,0,0,0.06);
    }
    .ssht-margin-tag{
      display:block;
      font-style:normal;
      font-weight:600;
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#7a5e1a;
      margin-bottom:6px;
    }
    .ssht-margin ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .ssht-margin li{
      padding:2px 0 2px 14px;
      position:relative;
      color:#3a3a3a;
    }
    .ssht-margin li::before{
      content:"•";
      position:absolute;
      left:0;
      color:#7a5e1a;
    }

    .cmp-art-sheet .cmp-art-foot{
      background:#E8E4D5;
      border-top:1px solid #C8C4B5;
    }
    .cmp-art-sheet .cmp-art-foot > div{
      background:#F0EDDF;
      color:#1a1a1a;
    }
    .cmp-art-sheet .cmp-art-foot-k{ color:#6b6b6b; }
    .cmp-art-sheet .cmp-art-foot-v{ color:#1a1a1a; }
    .cmp-art-sheet .cmp-art-foot-bad{ color:#B91C1C; }

    /* ── Keyzee artifact (DARK-MODE app feel) ────────── */
    .cmp-art-keyzee{
      background:linear-gradient(180deg, var(--bg-2), var(--bg) 70%);
      color:var(--t1);
      border:1px solid var(--bd-2);
      box-shadow:0 24px 60px rgba(77,71,195,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .cmp-art-keyzee .cmp-art-head{
      background:var(--bg-3);
      border-bottom:1px solid var(--bd-2);
    }
    .cmp-art-keyzee .cmp-art-tag{ color:var(--brand-3); }
    .cmp-art-keyzee .cmp-art-file{ color:var(--t3); }

    .kz{
      padding:24px 24px 20px;
      display:flex;
      flex-direction:column;
      gap:24px;
    }
    @media (max-width: 540px){ .kz{ padding:18px 16px; gap:18px; } }

    /* Status row — grade badge + counters */
    .kz-status{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      padding:18px 22px;
      background:var(--bg-3);
      border:1px solid var(--bd-2);
      border-radius:12px;
    }
    .kz-grade{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .kz-grade-tag{
      font-family:var(--f-mono);
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .kz-grade-val{
      font-family:var(--f-sans);
      font-size:36px;
      font-weight:600;
      letter-spacing:-0.04em;
      color:#86EFAC;
      line-height:1;
      padding:6px 14px;
      background:rgba(34,197,94,0.10);
      border:1px solid rgba(34,197,94,0.25);
      border-radius:10px;
    }
    .kz-counts{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      font-family:var(--f-mono);
      font-size:12px;
      color:var(--t3);
      letter-spacing:.04em;
    }
    .kz-count strong{
      color:var(--t1);
      font-weight:600;
      font-variant-numeric:tabular-nums;
      margin-right:4px;
    }

    /* The schedule — dense table-ish layout, mono bittings */
    .kz-sched{
      display:grid;
      grid-template-columns:1fr;
      gap:0;
      background:var(--bg-3);
      border:1px solid var(--bd-2);
      border-radius:12px;
      overflow:hidden;
    }
    .kz-sched-h,
    .kz-row{
      display:grid;
      grid-template-columns:60px minmax(70px, 1fr) minmax(160px, 2fr) 1fr;
      gap:0 14px;
      padding:11px 18px;
      align-items:center;
      font-family:var(--f-mono);
      font-size:13px;
      border-top:1px solid var(--bd);
    }
    .kz-sched-h{
      background:var(--bg-4);
      border-top:none;
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
      font-weight:500;
    }
    .kz-row{
      transition:background .15s ease;
    }
    .kz-row:hover{ background:var(--bg-4); }
    .kz-role{
      font-size:10.5px;
      font-weight:600;
      letter-spacing:.12em;
      padding:2px 7px;
      border-radius:4px;
      width:max-content;
      text-align:center;
    }
    .kz-row-tmk .kz-role{ background:rgba(239,68,68,0.16); color:#FCA5A5; }
    .kz-row-gmk .kz-role{ background:rgba(245,158,11,0.16); color:#FCD34D; }
    .kz-row-ck  .kz-role{ background:rgba(77,71,195,0.16);  color:#B6B2F0; }
    .kz-stamp{
      color:var(--t1);
      font-weight:500;
      letter-spacing:-0.005em;
    }
    .kz-bit{
      display:flex;
      gap:6px;
      font-variant-numeric:tabular-nums;
    }
    .kz-bit-d{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:22px;
      height:22px;
      background:var(--bg);
      border:1px solid var(--bd);
      border-radius:5px;
      font-weight:500;
      color:var(--t1);
      font-size:12px;
    }
    .kz-opens{
      color:var(--t3);
      font-size:12.5px;
      letter-spacing:.02em;
    }
    @media (max-width: 660px){
      .kz-sched-h{ display:none; }
      .kz-row{
        grid-template-columns:auto 1fr;
        grid-template-areas:
          "role stamp"
          "bit  bit"
          "opens opens";
        gap:8px 10px;
        padding:14px 16px;
      }
      .kz-row .kz-role{ grid-area:role; align-self:start; }
      .kz-row .kz-stamp{ grid-area:stamp; }
      .kz-row .kz-bit{ grid-area:bit; }
      .kz-row .kz-opens{ grid-area:opens; font-size:11.5px; }
    }

    /* Validation panel — all 8 checks with green ticks */
    .kz-validate{
      padding:18px 22px;
      background:rgba(34,197,94,0.05);
      border:1px solid rgba(34,197,94,0.18);
      border-radius:12px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .kz-validate-tag{
      font-family:var(--f-mono);
      font-size:11px;
      font-weight:600;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#86EFAC;
    }
    .kz-validate ul{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:6px 16px;
    }
    @media (min-width: 660px){
      .kz-validate ul{ grid-template-columns:repeat(4, 1fr); }
    }
    .kz-validate li{
      font-family:var(--f-mono);
      font-size:12.5px;
      color:var(--t2);
      display:flex;
      align-items:center;
      gap:8px;
    }
    .kz-validate-tick{
      color:#86EFAC;
      font-weight:600;
    }

    .cmp-art-keyzee .cmp-art-foot{
      background:var(--bg-3);
      border-top:1px solid var(--bd-2);
    }
    .cmp-art-keyzee .cmp-art-foot > div{
      background:var(--bg-2);
    }
    .cmp-art-keyzee .cmp-art-foot-k{ color:var(--t3); }
    .cmp-art-keyzee .cmp-art-foot-v{ color:var(--t1); }

    /* ═══════════════════════════════════════════════════════
       ABOUT PAGE — editorial portrait

       Vibe: magazine feature. Different layout from every other
       page per the high-end-visual-design "never the same twice"
       rule. This one uses:
       - Asymmetric 2-up founders grid with prominent monogram
         tiles (no fake photos — just initials on a per-founder
         hue-driven radial gradient)
       - Manifesto-style numbered principles (each with a tag
         chip + a serif-feeling sans h3 + body)
       - Editorial talk-to-us callout split into meta + body

       Reuses .ftr-* primitives. .ab-* classes are about-only.
       ═══════════════════════════════════════════════════════ */

    /* ── Founders ───────────────────────────────────────── */
    .ab-founders{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
    }
    @media (min-width: 760px){
      .ab-founders{ grid-template-columns:1fr 1fr; gap:22px; }
    }
    .ab-founder{
      padding:24px 26px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:16px;
      display:flex;
      align-items:center;
      gap:20px;
      transition:border-color .25s cubic-bezier(.32,.72,0,1), background .25s ease;
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .ab-founder{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 80ms);
    }
    @media (prefers-reduced-motion: reduce){
      .ab-founder{ opacity:1; transform:none; animation:none !important; }
    }
    .ab-founder:hover{
      border-color:var(--bd-2);
      background:var(--bg-3);
    }

    /* Monogram tile — circular, per-founder hue-driven gradient,
       initials in big display-weight sans. Replaces the AI-default
       SVG-egg-avatar trap from the design-taste skill. */
    .ab-mono{
      grid-area:mono;
      width:88px;
      height:88px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
      flex-shrink:0;
      background:
        radial-gradient(120% 120% at 30% 25%, hsla(var(--hue, 250), 70%, 70%, 0.45), transparent 60%),
        linear-gradient(135deg, hsla(var(--hue, 250), 60%, 35%, 0.85), hsla(var(--hue, 250), 70%, 22%, 0.95));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.30),
        0 6px 18px rgba(0,0,0,0.35);
    }
    .ab-mono span{
      font-family:var(--f-sans);
      font-size:32px;
      font-weight:600;
      letter-spacing:-0.04em;
      color:#fff;
      text-shadow:0 1px 2px rgba(0,0,0,0.25);
      position:relative;
      z-index:1;
    }
    /* Single-letter monogram — bump the type a touch so the
       letter fills the tile rather than floating in it. */
    .ab-mono-single span{
      font-size:42px;
      letter-spacing:-0.05em;
    }
    @media (max-width: 540px){
      .ab-mono{ width:72px; height:72px; }
      .ab-mono span{ font-size:26px; }
      .ab-mono-single span{ font-size:34px; }
    }

    .ab-meta{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      flex:1;
    }
    .ab-name{
      font-family:var(--f-sans);
      font-size:22px;
      font-weight:500;
      letter-spacing:-0.018em;
      color:var(--t1);
      margin:0;
      line-height:1.15;
    }
    @media (max-width: 540px){
      .ab-name{ font-size:19px; }
    }
    .ab-role{
      font-family:var(--f-mono);
      font-size:11.5px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--brand-3);
      margin:6px 0 2px;
    }
    .ab-city{
      font-family:var(--f-mono);
      font-size:11.5px;
      letter-spacing:.06em;
      color:var(--t3);
      margin:0;
    }
    .ab-bio{
      grid-area:bio;
      font-size:15px;
      line-height:1.65;
      color:var(--t2);
      margin:0;
      max-width:60ch;
    }

    /* ── Principles — manifesto rows ────────────────────── */
    .ab-principles{
      list-style:none;
      margin:0;
      padding:0;
    }
    .ab-principle{
      padding:24px 22px 26px;
      border-top:1px solid var(--bd);
      border-left:3px solid transparent;
      transition:background .2s cubic-bezier(.32,.72,0,1), border-left-color .2s ease, padding-left .25s cubic-bezier(.32,.72,0,1);
      opacity:0;
      transform:translateY(8px);
    }
    .reveal.in .ab-principle{
      animation:ftrFadeUp .55s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 90ms);
    }
    @media (prefers-reduced-motion: reduce){
      .ab-principle{ opacity:1; transform:none; animation:none !important; }
    }
    .ab-principle:last-child{ border-bottom:1px solid var(--bd); }
    .ab-principle:hover{
      background:var(--bg-2);
      border-left-color:var(--brand);
      padding-left:26px;
    }
    .ab-principle-tag{
      display:inline-block;
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:600;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--brand-3);
      margin-bottom:12px;
      padding:3px 9px;
      background:rgba(77,71,195,0.10);
      border-radius:4px;
    }
    .ab-principle h3{
      font-family:var(--f-sans);
      font-size:clamp(20px, 2.6vw, 26px);
      font-weight:500;
      letter-spacing:-0.018em;
      color:var(--t1);
      margin:0 0 8px;
      line-height:1.2;
      text-wrap:balance;
    }
    .ab-principle p{
      font-size:15px;
      line-height:1.6;
      color:var(--t2);
      margin:0;
      max-width:62ch;
    }

    /* ── Talk-to-us callout ─────────────────────────────── */
    .ab-talk{
      margin-top:36px;
      padding:30px 32px;
      background:linear-gradient(180deg, var(--bg-2), var(--bg) 70%);
      border:1px solid var(--bd-2);
      border-radius:18px;
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    }
    @media (min-width: 760px){
      .ab-talk{ grid-template-columns:1fr 1.4fr; gap:32px; align-items:start; }
    }
    .ab-talk-meta{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .ab-talk-meta .eyebrow{ margin-bottom:4px; }
    .ab-talk-meta h3{
      font-family:var(--f-sans);
      font-size:clamp(20px, 2.5vw, 24px);
      font-weight:500;
      letter-spacing:-0.012em;
      color:var(--t1);
      margin:0;
      line-height:1.25;
      text-wrap:balance;
    }
    .ab-talk p{
      font-size:15px;
      line-height:1.65;
      color:var(--t2);
      margin:0;
      max-width:60ch;
    }
    .ab-talk a{
      color:var(--brand-3);
      text-decoration:none;
      border-bottom:1px solid rgba(182,178,240,0.32);
      transition:border-bottom-color .15s ease;
    }
    .ab-talk a:hover{ border-bottom-color:var(--brand-3); }

    /* ═══════════════════════════════════════════════════════
       HERO APP-SHOT MOCKUP

       Replaces the .app-placeholder block inside .app-shot. Built
       in HTML/CSS so it stays sharp at any DPI and never goes
       stale. Two perpetual animations only — Grade A badge soft
       glow + URL bar live dot. Both wrapped in
       prefers-reduced-motion. Validation ticks are static (8/8)
       to keep the schedule the focus.
       ═══════════════════════════════════════════════════════ */

    .shot{
      display:flex;
      flex-direction:column;
      background:linear-gradient(180deg, var(--bg-2), var(--bg) 80%);
      min-height:380px;
      padding:18px 20px 22px;
      position:relative;
      overflow:hidden;
    }
    .shot::before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(ellipse at top right, rgba(77,71,195,0.10), transparent 60%);
      pointer-events:none;
    }

    /* Header — system meta on left, Grade A on right */
    .shot-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:4px 4px 14px;
      border-bottom:1px solid var(--bd);
      margin-bottom:14px;
      position:relative;
      z-index:1;
      flex-wrap:wrap;
    }
    .shot-meta{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .shot-tag{
      font-family:var(--f-mono);
      font-size:9.5px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .shot-id{
      font-family:var(--f-mono);
      font-size:16px;
      font-weight:600;
      color:var(--t1);
      letter-spacing:-0.01em;
      line-height:1;
    }
    .shot-sub{
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t3);
      letter-spacing:.04em;
      line-height:1.2;
    }

    /* Grade A pill — soft glow pulse */
    .shot-grade{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 14px 6px 12px;
      background:rgba(34,197,94,0.10);
      border:1px solid rgba(34,197,94,0.30);
      border-radius:10px;
      position:relative;
    }
    .shot-grade::after{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius:inherit;
      border:1px solid rgba(34,197,94,0.45);
      opacity:0;
      animation:shotGradeGlow 2.6s ease-in-out infinite;
      pointer-events:none;
    }
    .shot-grade-tag{
      font-family:var(--f-mono);
      font-size:9.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(134,239,172,0.75);
    }
    .shot-grade-val{
      font-family:var(--f-sans);
      font-size:22px;
      font-weight:600;
      letter-spacing:-0.04em;
      color:#86EFAC;
      line-height:1;
    }
    @keyframes shotGradeGlow{
      0%, 100% { opacity:0; transform:scale(1); }
      50%      { opacity:1; transform:scale(1.04); }
    }

    /* Body — split layout (sched on left, validations on right);
       stacks on mobile. */
    .shot-body{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      position:relative;
      z-index:1;
    }
    @media (min-width: 760px){
      .shot-body{ grid-template-columns:1.5fr 1fr; gap:14px; }
    }

    /* Key schedule — compact mono table, no scrollbars */
    .shot-sched{
      background:var(--bg-3);
      border:1px solid var(--bd-2);
      border-radius:10px;
      overflow:hidden;
    }
    .shot-sched-h,
    .shot-row{
      display:grid;
      grid-template-columns:46px 60px 1fr;
      gap:0 10px;
      padding:8px 14px;
      align-items:center;
      font-family:var(--f-mono);
      font-size:11px;
      border-top:1px solid var(--bd);
    }
    .shot-sched-h{
      border-top:none;
      background:var(--bg-4);
      font-size:9.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--t3);
      font-weight:500;
    }
    .shot-role{
      font-size:9.5px;
      font-weight:600;
      letter-spacing:.12em;
      padding:2px 6px;
      border-radius:3px;
      width:max-content;
      text-align:center;
    }
    .shot-row-tmk .shot-role{ background:rgba(239,68,68,0.16); color:#FCA5A5; }
    .shot-row-gmk .shot-role{ background:rgba(245,158,11,0.16); color:#FCD34D; }
    .shot-row-ck  .shot-role{ background:rgba(77,71,195,0.16);  color:#B6B2F0; }
    .shot-stamp{
      color:var(--t1);
      font-weight:500;
      letter-spacing:-0.005em;
    }
    .shot-bit{
      display:flex;
      gap:3px;
      font-variant-numeric:tabular-nums;
    }
    .shot-bit > span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;
      height:18px;
      background:var(--bg);
      border:1px solid var(--bd);
      border-radius:4px;
      color:var(--t1);
      font-size:10.5px;
      font-weight:500;
    }

    /* Validation panel — green-tinted card, all 8 ticks visible */
    .shot-validate{
      background:rgba(34,197,94,0.04);
      border:1px solid rgba(34,197,94,0.18);
      border-radius:10px;
      padding:14px 16px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .shot-validate-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      padding-bottom:8px;
      border-bottom:1px solid rgba(34,197,94,0.15);
    }
    .shot-validate-tag{
      font-family:var(--f-mono);
      font-size:9.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(134,239,172,0.85);
      font-weight:600;
    }
    .shot-validate-sum{
      font-family:var(--f-mono);
      font-size:12px;
      font-weight:600;
      color:#86EFAC;
      font-variant-numeric:tabular-nums;
    }
    .shot-validate ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:5px;
    }
    .shot-validate li{
      font-family:var(--f-mono);
      font-size:11px;
      color:var(--t2);
      display:flex;
      align-items:center;
      gap:7px;
      letter-spacing:.02em;
    }
    .shot-tick{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:14px;
      height:14px;
      background:rgba(34,197,94,0.16);
      color:#86EFAC;
      border-radius:999px;
      font-size:9px;
      font-weight:700;
      flex-shrink:0;
    }
    .shot-validate-foot{
      display:flex;
      gap:14px;
      font-family:var(--f-mono);
      font-size:10.5px;
      color:var(--t3);
      letter-spacing:.04em;
      padding-top:8px;
      border-top:1px solid rgba(34,197,94,0.15);
    }
    .shot-validate-foot strong{
      color:#86EFAC;
      font-weight:600;
      margin-right:3px;
      font-variant-numeric:tabular-nums;
    }

    /* Pulsing live-dot in the chrome URL bar */
    .app-live-dot{
      display:inline-block;
      width:6px;
      height:6px;
      border-radius:999px;
      background:#86EFAC;
      margin-right:7px;
      vertical-align:middle;
      box-shadow:0 0 0 0 rgba(134, 239, 172, 0.7);
      animation:shotLiveDot 2.2s ease-in-out infinite;
    }
    @keyframes shotLiveDot{
      0%, 100% { box-shadow:0 0 0 0 rgba(134, 239, 172, 0.55); }
      50%      { box-shadow:0 0 0 6px rgba(134, 239, 172, 0); }
    }

    /* Reduced-motion guard — kill all perpetual loops on this shot */
    @media (prefers-reduced-motion: reduce){
      .shot-grade::after{ animation:none; opacity:0; }
      .app-live-dot{ animation:none; }
    }

    /* ═══════════════════════════════════════════════════════
       FEATURES — "At a glance" summary grid + 2-col hero bento
       variant for the 5-item Allocation section.
       ═══════════════════════════════════════════════════════ */

    /* Glance section — sits between hero and chapter 01 */
    .ftr-glance-section{
      padding:24px 0 48px;
    }
    @media (max-width: 720px){ .ftr-glance-section{ padding:16px 0 32px; } }

    .ftr-glance-head{
      max-width:680px;
      margin:0 0 28px;
    }
    .ftr-glance-head .eyebrow{ margin-bottom:10px; }
    .ftr-glance-head h2{
      font-family:var(--f-sans);
      font-size:clamp(22px, 3.5vw, 30px);
      line-height:1.15;
      letter-spacing:-0.02em;
      font-weight:500;
      color:var(--t1);
      margin:0;
      text-wrap:balance;
    }
    .ftr-glance-head .muted{ color:var(--t3); font-weight:400; }

    /* The grid — 1 col mobile, 2 cols tablet, 3 cols desktop. 6
       items always fill cleanly across all three. */
    .ftr-glance{
      display:grid;
      grid-template-columns:1fr;
      gap:1px;
      background:var(--bd);
      border:1px solid var(--bd);
      border-radius:14px;
      overflow:hidden;
    }
    @media (min-width: 600px){ .ftr-glance{ grid-template-columns:1fr 1fr; } }
    @media (min-width: 1000px){ .ftr-glance{ grid-template-columns:repeat(3, 1fr); } }

    .ftr-glance-card{
      display:grid;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:
        "num  title arr"
        ".    line  .";
      gap:4px 14px;
      padding:18px 20px 20px;
      background:var(--bg);
      text-decoration:none;
      color:inherit;
      transition:background .25s cubic-bezier(.32,.72,0,1), padding-left .25s ease;
      opacity:0;
      transform:translateY(6px);
    }
    .reveal.in .ftr-glance-card{
      animation:ftrFadeUp .5s cubic-bezier(.32,.72,0,1) both;
      animation-delay:calc(var(--i, 0) * 60ms);
    }
    @media (prefers-reduced-motion: reduce){
      .ftr-glance-card{ opacity:1; transform:none; animation:none !important; }
    }
    .ftr-glance-card:hover{
      background:var(--bg-2);
    }
    .ftr-glance-card:hover .ftr-glance-arr{
      color:var(--brand-3);
      transform:translateX(3px);
    }
    .ftr-glance-num{
      grid-area:num;
      font-family:var(--f-mono);
      font-size:11.5px;
      font-weight:500;
      letter-spacing:.06em;
      color:var(--brand-3);
      font-variant-numeric:tabular-nums;
      align-self:center;
    }
    .ftr-glance-title{
      grid-area:title;
      font-family:var(--f-sans);
      font-size:16px;
      font-weight:500;
      letter-spacing:-0.01em;
      color:var(--t1);
      margin:0;
      line-height:1.2;
      align-self:center;
    }
    .ftr-glance-line{
      grid-area:line;
      font-family:var(--f-mono);
      font-size:12px;
      line-height:1.5;
      color:var(--t3);
      margin:2px 0 0;
      letter-spacing:.01em;
    }
    .ftr-glance-arr{
      grid-area:arr;
      font-family:var(--f-mono);
      font-size:16px;
      font-weight:300;
      color:var(--t4);
      align-self:center;
      transition:color .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
    }

    /* 2-col hero-bento variant — for the 5-item Allocation section.
       The wide tile spans BOTH cols (full width hero), narrows fill
       symmetrical pairs below. Mobile: still 1 col, hero just sits on
       top like every other tile. */
    @media (min-width: 720px){
      .ftr-bento.ftr-bento-hero{
        grid-template-columns:1fr 1fr;
      }
      .ftr-bento.ftr-bento-hero .ftr-tile-wide{
        grid-column:span 2;
      }
    }

    /* ─── /help — guides hub & long-form articles ─────────────────
       Reuses the .ftr-section padding rhythm and the .reveal stagger
       from elsewhere. The .hlp-* family is local to /help so it can't
       leak into the marketing pages. */
    .hlp-hero{
      padding:96px 0 56px;
    }
    @media (max-width:720px){ .hlp-hero{ padding:64px 0 36px; } }
    .hlp-h1{
      font-family:var(--f-display);
      font-size:clamp(34px, 5.5vw, 56px);
      font-weight:700;
      line-height:1.05;
      letter-spacing:-.02em;
      margin:14px 0 18px;
      color:var(--t1);
    }
    .hlp-deck{
      font-size:clamp(16px, 2vw, 19px);
      line-height:1.55;
      color:var(--t2);
      max-width:62ch;
      margin:0;
    }
    .hlp-grid-section{ padding:24px 0 96px; }
    @media (max-width:720px){ .hlp-grid-section{ padding:16px 0 64px; } }
    .hlp-grid{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
      gap:14px;
    }
    .hlp-card{ display:block; }
    .hlp-card-link{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:24px;
      border-radius:14px;
      border:1px solid var(--bd);
      background:var(--card-bg);
      text-decoration:none;
      transition:border-color .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
      height:100%;
    }
    .hlp-card-link:hover{
      border-color:var(--p);
      transform:translateY(-1px);
    }
    .hlp-card-meta{
      display:flex;
      gap:10px;
      align-items:baseline;
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.04em;
      color:var(--t3);
    }
    .hlp-card-aud{
      text-transform:uppercase;
      color:var(--p);
      font-weight:600;
    }
    .hlp-card-min{
      margin-left:auto;
    }
    .hlp-card-title{
      font-family:var(--f-display);
      font-size:20px;
      font-weight:700;
      letter-spacing:-.01em;
      color:var(--t1);
      margin:0;
      line-height:1.25;
    }
    .hlp-card-deck{
      font-size:14.5px;
      line-height:1.55;
      color:var(--t2);
      margin:0;
      flex:1;
    }
    .hlp-card-cta{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-family:var(--f-mono);
      font-size:12px;
      letter-spacing:.04em;
      color:var(--p);
      font-weight:600;
      margin-top:auto;
      padding-top:6px;
    }
    .hlp-also{
      margin-top:48px;
      padding:24px;
      border-radius:12px;
      border:1px solid var(--bd);
      background:var(--card-bg-soft, transparent);
    }
    .hlp-also p{
      margin:0 0 12px;
      font-size:14.5px;
      line-height:1.6;
      color:var(--t2);
    }
    .hlp-also p:last-child{ margin-bottom:0; }

    /* ── Article view ── */
    .hlp-article{
      padding:64px 0 80px;
    }
    @media (max-width:720px){ .hlp-article{ padding:40px 0 56px; } }
    .hlp-crumb{
      font-family:var(--f-mono);
      font-size:12px;
      letter-spacing:.04em;
      color:var(--t3);
      margin-bottom:24px;
    }
    .hlp-crumb a{ color:inherit; text-decoration:none; }
    .hlp-crumb a:hover{ color:var(--p); }
    .hlp-hd{
      max-width:65ch;
      margin:0 0 40px;
    }
    .hlp-hd-meta{
      display:flex;
      gap:10px;
      align-items:baseline;
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.04em;
      color:var(--t3);
      margin-bottom:14px;
    }
    .hlp-hd-aud{
      text-transform:uppercase;
      color:var(--p);
      font-weight:600;
    }
    .hlp-body{
      max-width:65ch;
      font-size:16px;
      line-height:1.7;
      color:var(--t2);
    }
    .hlp-body h2{
      font-family:var(--f-display);
      font-size:24px;
      font-weight:700;
      color:var(--t1);
      letter-spacing:-.01em;
      margin:48px 0 14px;
      line-height:1.2;
    }
    .hlp-body h3{
      font-family:var(--f-display);
      font-size:18px;
      font-weight:700;
      color:var(--t1);
      margin:24px 0 8px;
      line-height:1.3;
    }
    .hlp-body p{ margin:0 0 16px; }
    .hlp-body ul, .hlp-body ol{
      margin:0 0 16px;
      padding-left:22px;
    }
    .hlp-body li{ margin-bottom:6px; }
    .hlp-body a{
      color:var(--p);
      text-decoration:underline;
      text-decoration-color:rgba(140, 130, 230, .35);
      text-underline-offset:2px;
    }
    .hlp-body a:hover{ text-decoration-color:var(--p); }
    .hlp-body strong{ color:var(--t1); font-weight:600; }
    .hlp-body em{ font-style:italic; color:var(--t1); }
    .hlp-body code{
      font-family:var(--f-mono);
      font-size:.9em;
      padding:2px 6px;
      border-radius:4px;
      background:rgba(140, 130, 230, .12);
      color:var(--t1);
    }
    .hlp-pre{
      font-family:var(--f-mono);
      font-size:13px;
      line-height:1.55;
      padding:16px 20px;
      border-radius:8px;
      border:1px solid var(--bd);
      background:rgba(0,0,0,.18);
      color:var(--t1);
      overflow-x:auto;
      white-space:pre;
      margin:0 0 20px;
    }
    .hlp-table{
      width:100%;
      border-collapse:collapse;
      margin:8px 0 24px;
      font-size:14.5px;
    }
    .hlp-table th, .hlp-table td{
      padding:10px 12px;
      text-align:left;
      border-bottom:1px solid var(--bd);
      vertical-align:top;
    }
    .hlp-table th{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:var(--t3);
      font-weight:600;
    }
    .hlp-table code{
      font-size:13px;
      padding:1px 5px;
    }
    .hlp-next{
      display:flex;
      gap:12px;
      align-items:baseline;
      margin-top:48px;
      padding-top:24px;
      border-top:1px solid var(--bd);
    }
    .hlp-next-label{
      font-family:var(--f-mono);
      font-size:11px;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:var(--t3);
    }
    .hlp-next-link{
      font-size:18px;
      font-weight:600;
      color:var(--t1);
      text-decoration:none;
      letter-spacing:-.01em;
    }
    .hlp-next-link:hover{ color:var(--p); }

    /* ── /compare/keyzee-vs-spreadsheet — benefit-driven layout (rewritten
       2026-05). The previous scenario-driven mockups (cmp-stage / cmp-art-*
       / ssht-* / kz-*) are intentionally kept in this file for now — the
       components are unused but harmless, and pulling them risks breaking
       any one-off override I haven't found. Schedule a follow-up sweep. */
    .cmp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
    }
    .cmp-chips li {
      font-family: var(--f-mono);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--brand-3);
      background: rgba(122,115,232,.08);
      border: 1px solid rgba(122,115,232,.22);
      padding: 6px 12px;
      border-radius: 999px;
    }

    .cmp-benefits {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 800px) { .cmp-benefits { grid-template-columns: 1fr; } }
    .cmp-benefit {
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: var(--r-lg);
      padding: 26px 28px;
    }
    .cmp-benefit-tag {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--brand-3);
      margin-bottom: 14px;
    }
    .cmp-benefit h3 {
      font-size: 19px;
      letter-spacing: -.01em;
      color: var(--t1);
      margin-bottom: 10px;
      line-height: 1.35;
    }
    .cmp-benefit p {
      font-size: 14.5px;
      color: var(--t2);
      line-height: 1.65;
    }

    /* Comparison table — flat, mono-numerics-adjacent. Two truth columns
       (sheet / keyzee), the left "what you need" column anchors each row.
       No striped backgrounds, just hairline dividers between rows. */
    .cmp-table-wrap { overflow-x: auto; }
    .cmp-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .cmp-table th {
      text-align: left;
      padding: 16px 22px;
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      background: var(--bg-3);
      border-bottom: 1px solid var(--bd);
      font-weight: 700;
    }
    .cmp-table td {
      padding: 18px 22px;
      vertical-align: top;
      border-top: 1px solid var(--bd);
      color: var(--t2);
      line-height: 1.5;
    }
    .cmp-table tbody tr:first-child td { border-top: none; }
    .cmp-table td strong {
      display: block;
      color: var(--t1);
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: -.005em;
      margin-bottom: 4px;
    }
    .cmp-table-sub {
      display: block;
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: .04em;
      color: var(--t3);
    }
    .cmp-table-bad { color: #C8966B; }
    .cmp-table-good { color: var(--green); }
    @media (max-width: 720px) {
      .cmp-table th, .cmp-table td { padding: 12px 14px; }
      .cmp-table { font-size: 13px; }
    }

    /* ── /profiles/[slug] page (moved out of the .astro <style> block —
       same CSP issue as 404.astro: scoped styles get stripped because
       vercel.json's style-src-elem 'self' has no nonce/hash). Namespaced
       under .prof-* + .spec-* so they don't collide with /glossary/[slug]
       which has its own .gloss-* / .gloss-rel-grid namespace below. ── */
    .prof-back {
      font-family: var(--f-mono);
      font-size: 12px;
      letter-spacing: .04em;
      margin-bottom: 24px;
    }
    .prof-back a { color: var(--t3); text-decoration: none; }
    .prof-back a:hover { color: var(--brand-3); }

    .spec-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    @media (max-width: 720px) { .spec-grid { grid-template-columns: 1fr 1fr; } }

    .spec-card {
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 20px 22px;
    }
    .spec-label {
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 6px;
    }
    .spec-val {
      font-size: 20px;
      font-weight: 600;
      color: var(--t1);
      letter-spacing: -.005em;
    }

    .prof-fc {
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 22px 24px;
    }
    .prof-fc h3 {
      font-size: 16.5px;
      letter-spacing: -.005em;
      color: var(--t1);
      margin-bottom: 8px;
    }
    .prof-fc p {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.65;
    }

    .use-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 720px) { .use-list { grid-template-columns: 1fr; } }
    .use-list li {
      display: flex;
      align-items: baseline;
      gap: 12px;
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 14px 18px;
      color: var(--t1);
      font-size: 14.5px;
    }
    .ul-bullet {
      color: var(--brand-3);
      font-family: var(--f-mono);
      font-weight: 700;
    }

    /* prof-rel-grid + prof-rel — was .related-grid + .rel-card. Renamed
       on the move so /glossary/[slug] can have its own (different) values. */
    .prof-rel-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    @media (max-width: 880px) { .prof-rel-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px) { .prof-rel-grid { grid-template-columns: 1fr; } }

    .prof-rel {
      display: block;
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 18px 20px;
      text-decoration: none;
      transition: border-color .15s ease;
    }
    .prof-rel:hover { border-color: var(--bd-3); }
    .prof-rel:hover .rel-go { color: var(--brand-3); }

    .rel-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }
    .rel-name { font-size: 16px; font-weight: 600; color: var(--t1); letter-spacing: -.005em; }
    .rel-meta { font-family: var(--f-mono); font-size: 11px; color: var(--t3); letter-spacing: .04em; white-space: nowrap; }
    .prof-rel p { font-size: 13px; color: var(--t2); line-height: 1.55; margin-bottom: 12px; }
    .rel-go { font-family: var(--f-mono); font-size: 11.5px; color: var(--t2); letter-spacing: .04em; transition: color .15s ease; }

    /* ── /glossary/[...slug] page (moved out of the .astro <style> block).
       Same CSP fix as profiles above. ── */
    .gloss-back {
      font-family: var(--f-mono);
      font-size: 12px;
      letter-spacing: .04em;
    }
    .gloss-back a { color: var(--t3); text-decoration: none; }
    .gloss-back a:hover { color: var(--brand-3); }

    .gloss-head {
      padding: 36px 0 26px;
      border-bottom: 1px solid var(--bd);
      margin-bottom: 32px;
    }
    .gloss-cat {
      font-family: var(--f-mono);
      font-size: 11.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--brand-3);
      margin-bottom: 14px;
    }
    .gloss-head h1 {
      font-size: 36px;
      letter-spacing: -.02em;
      line-height: 1.15;
      color: var(--t1);
      margin-bottom: 14px;
    }
    @media (max-width: 540px) { .gloss-head h1 { font-size: 28px; } }
    .gloss-deck {
      font-size: 17px;
      color: var(--t2);
      line-height: 1.6;
    }

    .gloss-body {
      color: var(--t2);
      font-size: 16px;
      line-height: 1.75;
    }
    .gloss-body h2 {
      font-size: 22px;
      color: var(--t1);
      letter-spacing: -.005em;
      margin: 32px 0 12px;
      line-height: 1.3;
    }
    .gloss-body p { margin-bottom: 14px; }
    .gloss-body strong { color: var(--t1); }
    .gloss-body ul, .gloss-body ol { padding-left: 22px; margin-bottom: 18px; }
    .gloss-body li { margin-bottom: 6px; }
    .gloss-body a {
      color: var(--brand-3);
      text-decoration: none;
      border-bottom: 1px solid rgba(182,178,240,.3);
    }
    .gloss-body a:hover { border-bottom-color: var(--brand-3); }
    .gloss-body code {
      font-family: var(--f-mono);
      font-size: 14px;
      background: var(--bg-3);
      padding: 1px 6px;
      border-radius: 4px;
      color: var(--brand-3);
    }
    .gloss-body table {
      width: 100%;
      border-collapse: collapse;
      margin: 22px 0;
      font-size: 14px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--bd);
    }
    .gloss-body th, .gloss-body td {
      padding: 9px 14px;
      text-align: left;
      border-top: 1px solid var(--bd);
    }
    .gloss-body th {
      background: var(--bg-3);
      color: var(--t1);
      font-family: var(--f-mono);
      font-size: 11.5px;
      letter-spacing: .04em;
      text-transform: uppercase;
      border-top: none;
    }
    .gloss-body td { color: var(--t2); }

    .gloss-related {
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid var(--bd);
    }
    /* gloss-rel-grid + gloss-rel — was .related-grid + .rel-card. Renamed
       on the move; the two-column layout here differs from .prof-rel-grid's
       three-column, hence the namespace. */
    .gloss-rel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 540px) { .gloss-rel-grid { grid-template-columns: 1fr; } }

    .gloss-rel {
      display: block;
      padding: 16px 18px;
      background: var(--bg-2);
      border: 1px solid var(--bd);
      border-radius: 10px;
      text-decoration: none;
      transition: border-color .15s ease;
    }
    .gloss-rel:hover { border-color: var(--bd-3); }
    .gloss-rel h3 {
      font-size: 15px;
      color: var(--t1);
      letter-spacing: -.005em;
      margin-bottom: 4px;
    }
    .gloss-rel p { color: var(--t2); font-size: 12.5px; line-height: 1.55; }

    .gloss-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0 36px;
      margin-top: 36px;
      border-top: 1px solid var(--bd);
      font-family: var(--f-mono);
      font-size: 12px;
      letter-spacing: .04em;
    }
    .gloss-foot a { color: var(--brand-3); text-decoration: none; }

    /* ── 404 page (moved out of pages/404.astro <style> block — CSP blocks
       scoped Astro styles in production, leaving the page unstyled) ── */
    .not-found-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
    }
    @media (max-width:880px){ .not-found-grid{ grid-template-columns:1fr 1fr; } }
    @media (max-width:540px){ .not-found-grid{ grid-template-columns:1fr; } }
    .nf-card{
      display:block;
      padding:22px 24px;
      background:var(--bg-2);
      border:1px solid var(--bd);
      border-radius:12px;
      text-decoration:none;
      transition:border-color .15s ease;
    }
    .nf-card:hover{ border-color:var(--bd-3); }
    .nf-card h3{
      font-size:17px;
      letter-spacing:-.005em;
      color:var(--t1);
      margin-bottom:6px;
    }
    .nf-card p{
      font-size:13.5px;
      color:var(--t2);
      line-height:1.6;
    }

    /* ═══════════════════════════════════════════════════════
       WORKSHOP FLOW (homepage chapter 05)
       Editorial 4-column process layout — Survey / Design /
       Cut & issue / Audit & evolve. Replaces the old 6-tile
       bento. On desktop (≥1100px): four columns separated by
       hairline left-borders, no card chrome — reads like a
       newspaper feature. On tablet (720-1099px): 2x2 cards
       with full chrome. On mobile (<720px): stacked single
       column. The shape change at each breakpoint is
       deliberate — no responsive "shrink the cards" awkwardness.
       ═══════════════════════════════════════════════════════ */
    .workshop-flow{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
    }
    @media (min-width:720px){
      .workshop-flow{
        grid-template-columns:1fr 1fr;
        gap:32px 28px;
      }
    }
    @media (min-width:1100px){
      .workshop-flow{
        grid-template-columns:repeat(4, 1fr);
        gap:0;
      }
    }

    .workshop-step{
      position:relative;
      padding:24px 26px;
      background:var(--bg-2);
      border-radius:12px;
      border:1px solid var(--bd);
    }
    @media (min-width:1100px){
      .workshop-step{
        background:transparent;
        border:none;
        border-radius:0;
        border-left:1px solid var(--bd);
        padding:0 28px;
      }
      .workshop-step:first-child{
        padding-left:0;
        border-left:none;
      }
      .workshop-step:last-child{
        padding-right:0;
      }
    }

    .workshop-step-meta{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .workshop-step-num{
      font-family:var(--f-mono);
      font-size:12px;
      font-weight:700;
      color:var(--brand-3);
      letter-spacing:.04em;
      font-variant-numeric:tabular-nums;
    }
    .workshop-step-phase{
      font-family:var(--f-mono);
      font-size:10.5px;
      font-weight:600;
      color:var(--t3);
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .workshop-step h4{
      font-size:18px;
      font-weight:700;
      color:var(--t1);
      margin:0 0 18px;
      letter-spacing:-.012em;
      line-height:1.25;
    }
    @media (min-width:1100px){
      .workshop-step h4{
        font-size:17px;
        margin-bottom:20px;
      }
    }

    .workshop-step-items{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .workshop-step-items li{
      font-size:13.5px;
      color:var(--t2);
      line-height:1.5;
      padding-left:18px;
      position:relative;
    }
    .workshop-step-items li::before{
      content:"→";
      position:absolute;
      left:0;
      top:0;
      color:var(--brand-3);
      font-family:var(--f-mono);
      font-size:12px;
      line-height:1.6;
    }

    .workshop-team-note{
      margin-top:32px;
      padding:18px 22px;
      background:var(--bg-2);
      border-radius:10px;
      border:1px solid var(--bd);
      font-size:14px;
      color:var(--t2);
      line-height:1.55;
    }
    .workshop-team-note strong{
      color:var(--t1);
      font-weight:600;
    }
    @media (min-width:1100px){
      .workshop-team-note{
        margin-top:48px;
      }
    }