/* =========================================================================
   Reply Engine — Design System
   Source of truth: this file. Do not add inline <style> blocks to index.html.
   ========================================================================= */

/* ---------- Self-hosted fonts ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/space-grotesk-var.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}

/* ---------- Design system ---------- */
:root{
    --font-display:'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-ui:'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    --fs-display:clamp(2.6rem, 6vw, 4.4rem);
    --fs-h2:clamp(2rem, 4.4vw, 3.2rem);
    --fs-h3:clamp(1.55rem, 2.8vw, 2.2rem);
    --fs-lede:clamp(1.05rem, 1.7vw, 1.26rem);

    /* Reply Engine "signal" — DARK mode (deep indigo-navy) */
    --bg:#0c1020;            /* deep indigo-navy ground */
    --bg-soft:#0f1428;       /* slightly lifted band */
    --panel:#12172e;         /* card / panel surface */
    --panel-2:#161c38;       /* panel header / inset surface */
    --ink:#eef1fb;           /* primary text */
    --ink-soft:#aab2d0;      /* secondary text */
    --ink-mute:#7a82a6;      /* muted text (AA on dark panels) */
    --accent:#6366f1;        /* indigo accent */
    --accent-on-light:#818cf8; /* lighter indigo — legible accent ON dark */
    --accent-soft:rgba(99,102,241,.16);  /* accent wash on dark */
    --accent-ring:rgba(99,102,241,.34);
    --warm:#7dd3fc;          /* soft cyan-violet highlight */
    --warm-soft:rgba(125,211,252,.14);
    --ok:#5ec98c;            /* slate-green, lifted for dark */
    --ok-soft:rgba(94,201,140,.16);
    --amber:#e0b558;
    --amber-soft:rgba(224,181,88,.16);
    --clay:#e07d76;
    --clay-soft:rgba(224,125,118,.16);
    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,255,255,.18);

    --maxw:1180px;
    --radius:18px;
    --radius-sm:12px;
    --radius-lg:26px;

    --shadow-card:0 24px 50px -22px rgba(0,0,0,.55), 0 6px 16px -8px rgba(0,0,0,.40);
    --shadow-float:0 38px 80px -30px rgba(0,0,0,.66), 0 12px 26px -12px rgba(0,0,0,.46);

    --ease:cubic-bezier(.16,1,.3,1);
    --dur-fast:.25s; --dur:.4s; --dur-slow:.8s;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    font-family:var(--font-ui);
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 60%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 60%);
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.018em}
  .tnum{font-variant-numeric:tabular-nums}

  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);position:relative;z-index:1}

  .skip{position:absolute;left:14px;top:-60px;z-index:10000;background:var(--accent);color:#fff;
    padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s var(--ease)}
  .skip:focus{top:14px}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

  /* WORDMARK */
  .wm{display:inline-flex;flex-direction:column;align-items:flex-start}
  .wm .word{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--ink);display:inline-flex;gap:.26em}
  .wm .word .eng{color:var(--accent);display:inline-block;transform:skewX(-6deg)}
  .wm .rule{height:.085em;width:100%;margin-top:.32em;border-radius:2px;
    background:linear-gradient(90deg,var(--accent) 0%,var(--warm) 55%,rgba(79,70,229,0) 100%)}
  .wm.nav .word{font-size:21px}
  .wm.foot .word{font-size:20px}
  .brand{display:inline-flex;align-items:center;gap:11px}

  /* NAV */
  header.nav{position:fixed;inset:0 0 auto 0;z-index:1000;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease),box-shadow .4s var(--ease)}
  header.nav.scrolled{background:rgba(12,16,32,.82);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a.navlink{font-size:14.5px;color:var(--ink-soft);font-weight:500;transition:color .2s var(--ease)}
  @media(pointer:fine){.nav-links a.navlink:hover{color:var(--ink)}}
  .nav-links a.navlink{position:relative}
  .nav-links a.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .4s cubic-bezier(.16,1,.3,1)}
  @media(pointer:fine){.nav-links a.navlink:hover::after{right:0}}
  @media (prefers-reduced-motion:reduce){.nav-links a.navlink::after{transition:none}}
  .nav-cta{display:flex;align-items:center;gap:12px}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;border-radius:11px;
    padding:11px 19px;cursor:pointer;border:1px solid transparent;
    transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(79,70,229,.55)}
  @media(pointer:fine){.btn-primary:hover{transform:translateY(-2px);background:var(--accent-on-light);box-shadow:0 14px 30px -10px rgba(79,70,229,.6)}}
  .btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-strong)}
  @media(pointer:fine){.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);border-color:var(--accent-ring)}}
  .btn-lg{padding:15px 26px;font-size:15.5px}
  .nav-toggle{display:none;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);border-radius:10px;padding:9px;cursor:pointer}
  .nav-toggle svg{stroke:var(--ink);display:block}

  @media(max-width:880px){
    .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
      background:rgba(12,16,32,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
      padding:8px 0 18px;transform:translateY(-120%);opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .3s var(--ease)}
    .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
    .nav-links a.navlink{padding:15px clamp(20px,5vw,40px);border-top:1px solid var(--line);font-size:16px}
    .nav-links .mobile-cta{padding:16px clamp(20px,5vw,40px) 4px}
    .nav-links .mobile-cta .btn{width:100%;justify-content:center}
    .desktop-cta{display:none}
    .nav-toggle{display:inline-flex}
  }
  @media(min-width:881px){.mobile-cta{display:none}}

  /* HERO */
  .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 70px}
  .hero::before{content:"";position:absolute;z-index:0;top:-20%;right:-8%;width:60vw;max-width:820px;height:90%;
    background:radial-gradient(closest-side, rgba(79,70,229,.16), transparent 72%);filter:blur(10px);pointer-events:none}
  .hero::after{content:"";position:absolute;z-index:0;bottom:-10%;left:-6%;width:46vw;max-width:620px;height:70%;
    background:radial-gradient(closest-side, rgba(14,165,183,.12), transparent 72%);filter:blur(10px);pointer-events:none}
  /* dominant scrimmed hero background image (self-hosted, lazy, aspect-ratio set) */
  .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .hero-bg img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;filter:saturate(1.08) contrast(1.06);animation:kenburns 24s ease-in-out infinite alternate}
  .hero-field{position:absolute;inset:0;background:radial-gradient(900px 520px at 18% 12%,rgba(99,102,241,.26),transparent 60%),radial-gradient(760px 600px at 90% 86%,rgba(79,70,229,.2),transparent 60%),linear-gradient(160deg,#0b0f24,#0d1330 58%,#0b0f24)}
  .hero-mesh{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(124,131,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(124,131,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(820px 560px at 30% 20%,#000,transparent 78%);mask:radial-gradient(820px 560px at 30% 20%,#000,transparent 78%)}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(8,11,24,.62) 0%, rgba(10,13,28,.74) 55%, rgba(12,16,32,.92) 100%),
      radial-gradient(120% 90% at 78% 14%, rgba(99,102,241,.28), transparent 58%)}
  .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;width:100%}
  .hero-copy{max-width:600px}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent-on-light);background:var(--accent-soft);border:1px solid var(--accent-ring);
    padding:7px 14px;border-radius:100px;margin-bottom:24px}
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
  .hero h1{font-size:var(--fs-display);font-weight:600;margin-bottom:22px;letter-spacing:-.025em}
  .hero h1 .grad{color:var(--accent)}/* solid indigo accent — no gradient on headline text (palette blessed 2026-06-05) */
  .hero p.lede{font-size:var(--fs-lede);color:var(--ink-soft);max-width:520px;margin-bottom:14px}
  .hero .sig{font-size:14px;color:var(--ink-mute);max-width:520px;margin-bottom:28px;border-left:3px solid var(--accent-ring);padding-left:14px;line-height:1.5}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-note{margin-top:20px;font-size:13.5px;color:var(--ink-mute);display:flex;align-items:center;gap:8px}
  .hero-note svg{stroke:var(--ok);flex:0 0 auto}

  /* ===================================================================
     HERO — "The Masthead" recomposition (SHIPPED from hero-v2.html
     2026-07-15, founder card fa-20260715T082116-fa106e). Anti-sameness
     wave-1: breaks the eyebrow-pill + left-copy/right-panel sibling
     grammar into a full-bleed masthead dateline + oversized headline as
     architecture, with the provenance demo staged BELOW as lead art.
     Namespaced under .hv2; the .hero base rules above still supply the
     field/mesh/glow ground. Specificity-clean; no .hv2 selector exists
     elsewhere. Kept intact: locked palette + verbatim charter copy, the
     re-workbench-cite GSAP signature (byte-identical stage DOM), founder
     tempo, reduced-motion / no-JS legibility. -------------------------- */
  .hv2{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:112px 0 52px}
  .hv2 .wrap{position:relative;z-index:2;width:100%}
  .hv2-col{max-width:1120px;margin:0}
  .hv2-head{margin-bottom:clamp(28px,3.6vw,44px)}

  /* Desktop: full-width MASTHEAD BAND on top (dateline + oversized headline
     as architecture), then a secondary "story" row — editorial deck at left,
     the provenance lead-art at right, in the first fold. The full-width
     masthead band is what breaks the sibling grammar. */
  @media(min-width:921px){
    .hv2-col{display:grid;column-gap:clamp(36px,4.5vw,64px);
      grid-template-columns:minmax(0,1.08fr) minmax(348px,.92fr);
      grid-template-areas:"mast mast" "deck stage";align-items:start}
    .hv2-head{grid-area:mast}
    .hv2-deck{grid-area:deck;align-self:start}
    .hv2-stage{grid-area:stage;margin-top:0}
  }

  /* Oversized reply-chevron watermark occupying the upper-right void the
     left-anchored column leaves — static, decorative, aria-hidden. */
  .hv2-mark{position:absolute;z-index:1;top:6%;right:-3%;width:min(46vw,560px);color:var(--accent);
    opacity:.05;pointer-events:none;filter:drop-shadow(0 0 60px rgba(99,102,241,.25))}
  .hv2-mark svg{width:100%;height:auto;display:block}

  /* MASTHEAD DATELINE: the eyebrow-pill replacement. A full-column hairline
     masthead bar — kicker at left, framework register at right, accent
     top-rule above. Reads as a publication masthead, not a chip. */
  .hv2-dateline{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    padding:14px 0 15px;border-top:2px solid var(--accent);border-bottom:1px solid var(--line-strong);
    margin-bottom:clamp(26px,4vw,42px)}
  .hv2-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-on-light)}
  .hv2-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
  .hv2-frameworks{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;
    color:var(--ink-mute)}

  /* MASTHEAD HEADLINE: type-as-architecture. Pushed past the index display
     scale so the wrapped verbatim headline reads as a built masthead block,
     not a caption. Verbatim charter copy, unchanged. */
  .hv2-mast{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,5.6vw,4.7rem);
    line-height:1.0;letter-spacing:-.03em;max-width:20ch;margin:0}
  .hv2-mast .grad{color:var(--accent)}   /* solid indigo accent, palette-blessed — no gradient on headline text */

  /* Editorial deck: lede + accountability line at a single readable measure,
     left-anchored under the masthead. */
  .hv2-deck{max-width:560px}
  .hv2-deck .lede{font-size:var(--fs-lede);color:var(--ink-soft);margin:0 0 14px}
  .hv2-deck .sig{font-size:14px;color:var(--ink-mute);border-left:3px solid var(--accent-ring);
    padding-left:14px;line-height:1.5;margin:0 0 28px}
  .hv2-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .hv2-note{font-size:13.5px;color:var(--ink-mute);display:flex;align-items:center;gap:8px;margin-top:6px}
  .hv2-note svg{stroke:var(--ok);flex:0 0 auto}

  /* PROVENANCE DEMO AS LEAD ART: staged BELOW the masthead (not a right
     panel). Left-anchored and capped, hung off an editorial column-rule so
     the citation lineage reads as descending FROM the masthead. The demo's
     own internal source->thread->answer geometry is byte-identical to the
     prior hero, so the registered signature runs unchanged. */
  .hv2-stage{position:relative;max-width:560px;margin-top:clamp(40px,5.5vw,64px);padding-left:34px}
  .hv2-stage::before{content:"";position:absolute;left:0;top:-24px;bottom:16%;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent) 0%,var(--accent-ring) 42%,transparent 100%)}
  .hv2-stage::after{content:"";position:absolute;left:-4px;top:-28px;width:10px;height:10px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
  /* Small "lead art" label riding the column-rule, editorial caption voice. */
  .hv2-artcap{position:absolute;left:34px;top:-30px;font-family:var(--font-mono);font-size:10px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}

  /* The demo card frame inherits every .prov-* rule above unchanged; this
     only seats it inside the stage at full width. */
  .hv2-stage .work{max-width:none;width:100%}

  /* Tablet/phone: single vertical read; reorder to dateline -> headline ->
     provenance lead-art -> deck, so the signature "blind ID" moment sits
     directly under the headline in the first fold. The .prov-* mobile
     compaction (@max-width:560px) is class-scoped, so it still applies. */
  @media(max-width:920px){
    .hv2-col{max-width:640px;display:flex;flex-direction:column}
    .hv2-head{order:1}
    .hv2-stage{order:2;margin-top:clamp(26px,5vw,40px);max-width:560px}
    .hv2-deck{order:3;margin-top:clamp(26px,5vw,38px);max-width:560px}
    .hv2-mark{opacity:.035;top:2%;right:-8%}
  }
  @media(max-width:560px){
    .hv2{padding:92px 0 44px;min-height:0}
    .hv2-head{margin-bottom:0}
    .hv2-mast{font-size:clamp(2.1rem,9vw,2.7rem);letter-spacing:-.026em;max-width:none}
    .hv2-dateline{margin-bottom:18px;padding:11px 0 12px}
    .hv2-frameworks{display:none}          /* masthead bar stays clean on phone */
    .hv2-mark{display:none}
    .hv2-stage{order:2;padding-left:20px;margin-top:22px;max-width:none}
    .hv2-deck{order:3;margin-top:26px}
    .hv2-artcap{left:20px}
  }

  .work{position:relative;perspective:1600px}
  .work-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);
    overflow:hidden;will-change:transform;transform-style:preserve-3d;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}/* transition owned by the retire-at-settle rule below (two-band law) */
  .work-card .pp{transform-style:preserve-3d}
  .work-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel-2)}
  .wh-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
  .wh-dot.a{background:var(--accent)} .wh-dot.t{background:var(--warm)}
  .wh-title{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-left:6px;display:inline-flex;align-items:center;gap:7px}
  .wh-title svg{stroke:var(--accent)}
  .wh-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--accent);letter-spacing:.06em}
  .wh-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-ring);animation:pulse 2.6s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,70,229,.45)}70%{box-shadow:0 0 0 9px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}

  .work-prog{padding:13px 18px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
  .wp-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
  .wp-name{font-size:13px;font-weight:600;color:var(--ink)}
  .wp-count{font-size:12px;color:var(--ink-mute)}
  .wp-count b{color:var(--accent);font-weight:700}
  .wp-track{height:7px;border-radius:100px;background:rgba(255,255,255,.10);overflow:hidden}
  .wp-fill{height:100%;width:var(--wp-fill,18%);border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--warm));
    transition:width 1.1s var(--ease)}

  .work-body{padding:8px 12px 14px}
  /* FIXED-FRAME: each row is a locked height sized for its FINAL (done, citation-visible) state.
     The frame never resizes; the answer text + citation only fade IN within the reserved space.
     No height/max-height transition anywhere on the row, body or card. */
  .qrow{display:grid;grid-template-columns:22px 1fr auto;gap:11px;align-items:start;padding:12px 10px;border-radius:12px;
    border:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease);
    height:108px;overflow:hidden}
  .qrow + .qrow{border-top:1px solid var(--line)}
  .qstate{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;margin-top:1px;
    background:rgba(255,255,255,.07);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
  .qstate svg{stroke:#6c75a0;width:13px;height:13px;transition:stroke .4s var(--ease)}
  .qstate .spin{animation:spin 1s linear infinite;transform-origin:center}
  @keyframes spin{to{transform:rotate(360deg)}}
  .qmid{min-width:0}
  .qq{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px;line-height:1.35}
  .qa{font-size:12px;color:var(--ink-mute);line-height:1.5;height:36px;
    overflow:hidden;transition:color .4s var(--ease)}
  .qa .typed{border-right:1.5px solid transparent}
  /* citation always reserves its space (no display toggle -> no frame growth); only fades in on done */
  .qsrc{display:flex;margin-top:7px;font-size:10.5px;color:var(--accent-on-light);font-weight:600;align-items:center;gap:6px;
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease)}
  .qsrc svg{stroke:var(--accent-on-light)}
  .qconf{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:100px;white-space:nowrap;
    background:#eef0f5;color:var(--ink-mute);transition:background .4s var(--ease),color .4s var(--ease);align-self:center}

  .qrow.done .qstate{background:var(--ok-soft)}
  .qrow.done .qstate svg{stroke:var(--ok)}
  .qrow.done .qa{color:var(--ink-soft)}
  .qrow.done .qsrc{display:flex}
  .qrow.done .qconf{background:var(--ok-soft);color:var(--ok)}
  .qrow.busy .qstate{background:var(--accent-soft);box-shadow:0 0 0 4px rgba(79,70,229,.08)}
  .qrow.busy .qstate svg{stroke:var(--accent)}
  .qrow.busy .qconf{background:var(--accent-soft);color:var(--accent-on-light)}

  .work-chip{position:absolute;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;
    box-shadow:var(--shadow-card);padding:12px 14px;z-index:5;will-change:transform;transform-style:preserve-3d;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}/* transition owned by the retire-at-settle rule below (two-band law) */
  .chip-export{right:-22px;bottom:-22px;width:218px}
  .chip-export .ce-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:6px}
  .chip-export .ce-lbl svg{stroke:var(--accent)}
  .chip-export .ce-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);font-weight:600}
  .chip-export .ce-row .tick{width:18px;height:18px;border-radius:6px;background:var(--ok-soft);display:grid;place-items:center;flex:0 0 auto}
  .chip-export .ce-row .tick svg{stroke:var(--ok)}
  .chip-export .ce-meta{margin-top:6px;font-size:10.5px;color:var(--ink-mute)}
  .chip-time{left:-26px;top:74px;width:182px}
  .chip-time .ct-k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);font-weight:600;margin-bottom:4px}
  .chip-time .ct-v{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
  .chip-time .ct-sub{font-size:10.5px;color:var(--ink-mute);font-weight:500;margin-top:2px}

  /* ============================================================
     HERO SIGNATURE — "re-workbench-cite" (PROVENANCE composition)
     The act of citing is the hero: a drafted answer resolves FROM the
     user's own prior document. Source card -> connective thread (the
     citation token rides it down) -> cited draft. Transform/opacity only,
     CLS-safe (fixed-frame cards, no height animation), tilt via [data-pp].
     The legacy .work-card/.qrow terminal styles above are retained for
     defense.html (static, no signature). @signature re-workbench-cite
     ============================================================ */
  .prov{display:grid;gap:0;align-content:center}
  .prov-source,.prov-answer{position:relative;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-float);margin:0;will-change:transform;
    transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}/* transition owned by the retire-at-settle rule below (two-band law) */
  .prov-source .pp,.prov-answer .pp{transform-style:preserve-3d;padding:16px 18px}

  /* SOURCE — the user's own prior, approved answer (the protagonist) */
  .prov-source{background:var(--panel-2)}
  .ps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .ps-doc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);min-width:0}
  .ps-doc svg{stroke:var(--ink-mute);flex:0 0 auto}
  .ps-sec{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-mute);
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:100px;padding:3px 9px;white-space:nowrap;flex:0 0 auto}
  .ps-body{display:grid;gap:7px}
  .ps-line{font-size:11.5px;line-height:1.5;color:var(--ink-mute);opacity:.5}
  .ps-cited{position:relative;color:var(--ink-soft);opacity:1;font-weight:500;isolation:isolate}
  .ps-mark{position:relative;z-index:1}
  .ps-hl{position:absolute;left:-4px;right:-4px;top:-2px;bottom:-2px;z-index:0;border-radius:5px;
    background:var(--accent-soft);border:1px solid var(--accent-ring);transform:scaleX(1);transform-origin:0 50%}
  .ps-tag{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-size:10.5px;font-weight:600;
    letter-spacing:.02em;color:var(--accent-on-light)}
  .ps-node{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:0 0 auto}

  /* THREAD — provenance connector + the traveling citation token */
  .prov-link{position:relative;height:58px;display:flex;align-items:center;justify-content:center}
  .prov-thread{width:2px;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--warm));
    transform:scaleY(1);transform-origin:50% 0}
  .prov-token{position:absolute;bottom:2px;left:50%;margin-left:-32px;display:inline-flex;align-items:center;gap:5px;
    font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--accent-on-light);background:var(--panel);
    border:1px solid var(--accent-ring);border-radius:100px;padding:4px 9px;box-shadow:var(--shadow-card);white-space:nowrap}
  .prov-token svg{stroke:var(--accent-on-light);flex:0 0 auto}

  /* DRAFT — the cited answer, drawn from the source above */
  .pa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
  .pa-doc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);min-width:0}
  .pa-doc svg{stroke:var(--accent);flex:0 0 auto}
  .pa-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--accent);flex:0 0 auto}
  .pa-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-ring);animation:pulse 2.6s infinite}
  .pa-q{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:8px}
  .pa-a{font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
  .pa-src{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
    font-size:10.5px;font-weight:600;color:var(--accent-on-light)}
  .pa-src svg{stroke:var(--accent-on-light);flex:0 0 auto}
  .pa-node{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:0 0 auto}
  .pa-foot{display:flex;align-items:center;gap:12px;margin-top:13px;flex-wrap:wrap}
  .pa-conf{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:4px 10px;border-radius:100px;
    background:var(--ok-soft);color:var(--ok);transform-origin:50% 50%}
  .pa-gate{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--ink-mute)}
  .pa-gate svg{stroke:var(--ok);flex:0 0 auto}

  /* FRAMEWORK STRIP (no fabricated customers) */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
  .trust-in{padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
  .trust-label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;max-width:260px;line-height:1.5}
  .trust-logos{display:flex;align-items:center;gap:clamp(22px,4vw,46px);flex-wrap:wrap}
  .tlogo{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-weight:700;font-size:15.5px;letter-spacing:-.01em;opacity:.85}
  .tlogo svg{stroke:var(--accent);flex:0 0 auto}
  .tlogo .mono{font-family:var(--font-mono);font-weight:600}

  section.block{padding:clamp(80px,12vw,140px) 0;position:relative}
  .sec-head{max-width:680px;margin-bottom:clamp(48px,7vw,72px)}
  .sec-head.center{margin-inline:auto;text-align:center}
  .kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--warm);margin-bottom:16px;display:block}
  .sec-head h2{font-size:var(--fs-h2);font-weight:600;margin-bottom:18px}
  .sec-head h2 .grad{color:var(--accent)}/* solid indigo accent — no gradient on prose headline text (SS-06 de-gradient; matches blessed hero, palette 2026-06-05) */
  .sec-head p{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--ink-soft)}

  .feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;margin-bottom:clamp(64px,9vw,118px)}
  .feat>*{min-width:0}/* grid items default to min-width:auto -> a nowrap descendant (.lib-sub) can force the track wider than its column, causing 390px overflow */
  .feat:last-child{margin-bottom:0}
  .feat.rev .feat-media{order:2}
  .feat-copy h3{font-size:var(--fs-h3);margin-bottom:16px;font-weight:600}
  .feat-copy p.fp{color:var(--ink-soft);font-size:1.05rem;margin-bottom:22px}
  .feat-list{list-style:none;display:grid;gap:13px}
  .feat-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink-soft)}
  .feat-list .ic{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--accent-soft);display:grid;place-items:center;margin-top:1px}
  .feat-list .ic svg{stroke:var(--accent-on-light)}
  .feat-list b{color:var(--ink);font-weight:600}

  .feat-media{position:relative;perspective:1200px}
  .ui-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;
    will-change:transform;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}/* transition owned by the retire-at-settle rule below (two-band law) */
  .ui-panel .pp{transform-style:preserve-3d}
  .up-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}
  .up-head .t{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px}
  .up-head .t svg{stroke:var(--accent)}
  .up-head .badge{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:4px 9px;border-radius:100px;background:var(--accent-soft);color:var(--accent-on-light)}

  .lib-body{padding:14px 16px 16px}
  .lib-search{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-bottom:13px}
  .lib-search svg{stroke:var(--ink-mute);flex:0 0 auto}
  .lib-search span{font-size:13px;color:var(--ink-mute)}
  .lib-row{display:flex;align-items:center;gap:11px;padding:11px;border-radius:11px;border:1px solid var(--line);margin-bottom:9px;
    transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
  .lib-row:last-child{margin-bottom:0}
  @media(pointer:fine){.lib-row:hover{transform:translateX(3px);border-color:var(--accent-ring);background:var(--accent-soft)}}
  .lib-ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;background:var(--accent-soft)}
  .lib-ic svg{stroke:var(--accent-on-light)}
  .lib-ic.t{background:var(--warm-soft)} .lib-ic.t svg{stroke:var(--warm)}
  .lib-meta{flex:1;min-width:0}
  .lib-name{font-size:13px;font-weight:600;color:var(--ink)}
  .lib-sub{font-size:11.5px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lib-tag{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:100px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}

  .rev-body{padding:15px 16px 17px}
  .rev-q{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.4}
  .rev-ans{font-size:12.5px;color:var(--ink-soft);line-height:1.55;padding:12px;border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:10px;background:var(--bg);margin-bottom:12px}
  .rev-src{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--accent-on-light);font-weight:600;margin-bottom:14px}
  .rev-src svg{stroke:var(--accent-on-light)}
  .rev-actions{display:flex;gap:9px}
  .rev-btn{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:10px;border-radius:10px;border:1px solid transparent;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .rev-btn.app{background:var(--ok);color:#fff}
  @media(pointer:fine){.rev-btn.app:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(63,164,106,.55)}}
  .rev-btn.edit{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
  @media(pointer:fine){.rev-btn.edit:hover{transform:translateY(-1px);border-color:var(--accent-ring)}}

  .photo-frame{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;background:var(--bg-soft);box-shadow:var(--shadow-card);border:1px solid var(--line)}
  .photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);will-change:transform}
  @media(pointer:fine){.feat-media:hover .photo-frame img{transform:scale(1.04)}}
  .photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(79,70,229,.05),rgba(21,24,43,.18))}
  .ph-overlay{position:absolute;z-index:3;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-float);
    overflow:hidden;will-change:transform;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}/* transition owned by the retire-at-settle rule below (two-band law) */
  .ph-overlay .pp{transform-style:preserve-3d}
  .ov-br{right:-16px;bottom:-18px;width:min(252px,76%)}
  .ov-pad{padding:13px 15px}
  .ov-lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:7px}
  .ov-lbl svg{stroke:var(--accent)}
  .ov-stat{display:flex;align-items:baseline;gap:8px}
  .ov-stat .big{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
  .ov-stat .small{font-size:12px;color:var(--ink-mute);font-weight:600}
  .ov-bar{height:6px;border-radius:100px;background:rgba(255,255,255,.10);margin-top:10px;overflow:hidden}
  .ov-bar i{display:block;height:100%;width:92%;border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--warm))}

  .metrics{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,40px);text-align:center}
  .metric .mnum{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;letter-spacing:-.02em;
    background:linear-gradient(95deg,var(--accent),var(--warm));-webkit-background-clip:text;background-clip:text;color:transparent}
  .metric .mlbl{font-size:13.5px;color:var(--ink-soft);margin-top:6px}
  .metrics-note{text-align:center;font-size:12px;color:var(--ink-mute);margin-top:28px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,28px)}
  .step{position:relative;padding:32px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden;
    transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
  @media(pointer:fine){.step:hover{transform:translateY(-5px);border-color:var(--accent-ring);box-shadow:var(--shadow-card)}}
  .step::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--accent),var(--warm),transparent)}
  .step-n{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--accent-on-light);margin-bottom:18px;display:inline-flex;
    align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:var(--accent-soft)}
  .step h3{font-size:1.35rem;margin-bottom:11px;font-weight:600}
  .step p{font-size:14.5px;color:var(--ink-soft)}

  .pricing{background:var(--panel);border-top:1px solid var(--line)}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
  .price-card{display:flex;flex-direction:column;padding:32px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
    transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
  @media(pointer:fine){.price-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow-card)}}
  .price-card.featured{border-color:var(--accent);box-shadow:0 30px 70px -30px rgba(79,70,229,.34);position:relative;background:var(--panel)}
  .feat-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:100px;box-shadow:0 8px 20px -8px rgba(79,70,229,.55)}
  .price-name{font-family:var(--font-display);font-size:1.35rem;font-weight:600;margin-bottom:6px}
  .price-desc{font-size:13.5px;color:var(--ink-mute);margin-bottom:22px;min-height:40px}
  .price-amt{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
  .price-amt .num{font-family:var(--font-display);font-size:3rem;font-weight:700;letter-spacing:-.025em}
  .price-amt .per{font-size:14px;color:var(--ink-mute)}
  .price-bill{font-size:12.5px;color:var(--ink-mute);margin-bottom:24px}
  .price-feats{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1}
  .price-feats li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-soft)}
  .price-feats svg{stroke:var(--accent-on-light);flex:0 0 auto;margin-top:3px}
  .price-card .btn{width:100%;justify-content:center}
  .price-note{text-align:center;font-size:12.5px;color:var(--ink-mute);margin-top:26px}

  .cta-final{position:relative;overflow:hidden;text-align:center;padding:clamp(90px,14vw,160px) 0;background:#11132a}
  .cta-bg{position:absolute;inset:0;z-index:0}
  .cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(1.2) contrast(1.06);animation:kenburns 26s ease-in-out infinite alternate}
  .cta-bg::after{content:"";position:absolute;inset:0;
    background:radial-gradient(120% 120% at 50% 0%, rgba(79,70,229,.40), transparent 60%),
      linear-gradient(180deg,rgba(17,19,42,.72),rgba(17,19,42,.92))}
  .cta-inner{position:relative;z-index:2;max-width:720px;margin-inline:auto}
  .cta-inner .kicker{color:#9aa6ff}
  .cta-inner h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;margin-bottom:20px;color:#fff}
  .cta-inner h2 .grad{color:var(--accent-on-light)}/* solid legible-on-dark indigo — no gradient on prose headline (SS-06); brighter token for contrast on the indigo-lifted CTA panel, matches .cta-inner .kicker */
  .cta-inner p{font-size:1.15rem;color:#c4c9e6;margin-bottom:34px}
  .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .cta-actions .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
  @media(pointer:fine){.cta-actions .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}}
  .cta-note{margin-top:22px;font-size:13.5px;color:#9298bd;display:flex;align-items:center;justify-content:center;gap:8px}
  .cta-note svg{stroke:#5ee2ee}

  footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--bg)}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
  .foot-about{font-size:14px;color:var(--ink-mute);max-width:300px;margin-top:16px}
  .foot-col h4{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:18px}
  .foot-col a{display:block;font-size:14.5px;color:var(--ink-soft);margin-bottom:12px;transition:color .2s var(--ease)}
  @media(pointer:fine){.foot-col a:hover{color:var(--accent-on-light)}}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:26px;font-size:12.5px;color:var(--ink-mute)}
  .foot-wm{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
  .foot-wm .eng{color:var(--accent-on-light);display:inline-block;transform:skewX(-6deg)}
  .foot-mark{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
  .foot-glyph{display:inline-flex;width:22px;height:22px;border-radius:6px;background:var(--accent);align-items:center;justify-content:center;flex:0 0 auto}
  .foot-disc{flex:1 1 240px;min-width:200px;color:var(--ink-mute);text-align:center}
  .foot-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .foot-right>a{color:var(--ink-mute);transition:color .2s var(--ease)}
  @media(pointer:fine){.foot-right>a:hover{color:var(--accent-on-light)}}
  .foot-bottom .socials{display:flex;gap:12px}
  .foot-bottom .socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
  @media(pointer:fine){.foot-bottom .socials a:hover{border-color:var(--accent-ring);background:var(--accent-soft);color:var(--accent-on-light)}}

  /* Reveal base + the 8 variant classes are owned by vendor/ellis-v3-motion.css
     (v3.2 dark-tech register: RISE default, JS-gated pre-state so no-JS and
     crawlers get the final legible layout — never opacity:0). Only the legacy
     per-element cascade delays remain here, now tokenized to the reveal band. */
  .reveal[data-d="1"]{transition-delay:var(--stagger-2)}
  .reveal[data-d="2"]{transition-delay:calc(var(--stagger-2) * 2)}
  .reveal[data-d="3"]{transition-delay:calc(var(--stagger-2) * 3)}

  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:64px}
    .hero-copy{max-width:none}
    .work{max-width:480px;margin-inline:auto;width:100%}
    .feat{grid-template-columns:1fr;gap:34px}
    .feat.rev .feat-media{order:0}
    .metrics-grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}
    .steps{grid-template-columns:1fr}
    .price-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media(max-width:560px){
    .chip-time{left:0;top:60px}
    .chip-export{right:0}
    .ov-br{right:0}
    .foot-grid{grid-template-columns:1fr}
    .trust-in{flex-direction:column;align-items:flex-start;gap:20px}
    .trust-label{max-width:none}

    /* --- Mobile-only hero compaction: bring the provenance-signature moment
       (the surface's one scope-A "blind ID" beat) into the first phone fold.
       Desktop/tablet hero (>560px) and every locked verbatim are untouched —
       this only tightens vertical rhythm + connector height so the source
       card is visible without a scroll, instead of reordering past the
       eyebrow/headline (which stay the first beat, per house hero grammar). */
    .hero{padding:64px 0 40px;min-height:0}
    .hero-grid{gap:26px}
    .hero-copy .eyebrow{margin-bottom:14px}
    .hero h1{font-size:clamp(1.9rem,8.6vw,2.4rem);margin-bottom:14px}
    .hero p.lede{margin-bottom:10px}
    .hero .sig{margin-bottom:16px}
    .hero-actions{gap:10px}
    .hero-note{margin-top:10px}
    .prov-link{height:34px}
    .prov-source .pp,.prov-answer .pp{padding:13px 14px}
    .ps-body{gap:5px}
  }
  @media (prefers-reduced-motion:reduce){
    /* Global animation/transition kill + .reveal final-state are already owned,
       at higher/tied specificity and later in load order, by
       vendor/ellis-v3-tokens.css (*,*::before,*::after duration collapse) and
       vendor/ellis-v3-motion.css (.reveal family opacity/transform/filter) —
       no need to re-assert them here (was dead-weight duplication). */
    /* Tilt (--rx/--ry) never engages under reduced-motion (site.js bails before
       setting either custom property), so these already resolve to the
       rotateX(0)/rotateY(0) fallback; this just also wins the transform:none
       tie-break cleanly since it's declared after every base rule above. */
    .work-card,.work-chip,.prov-source,.prov-answer,.ui-panel,.ph-overlay{transform:none}
    .qrow{background:transparent}
    /* .qrow.busy sets a competing (higher-specificity, equal here since
       repeated) qstate/qconf color under normal motion; repeat the .busy
       compound so this settles to the "answered" look under reduced motion
       regardless of in-flight state, without needing !important. */
    .qrow .qa{color:var(--ink-soft)}
    .qrow .qsrc{display:flex}
    .qrow.busy .qstate,.qrow .qstate{background:var(--ok-soft)}
    .qrow.busy .qstate svg,.qrow .qstate svg{stroke:var(--ok)}
    .qrow.busy .qconf,.qrow .qconf{background:var(--ok-soft);color:var(--ok)}
    .wp-fill{width:78%}/* wp-fill's demo value now comes in via --wp-fill custom
      property (defense.html), not an inline width — a normal specificity/
      source-order win, no bang needed */
  }

  /* === HOVER-STRIPE (ported from EllisIQ apex; auto-themes via var(--accent)) + ken-burns keyframe === */
  @keyframes kenburns{from{transform:scale(1.0)}to{transform:scale(1.06)}}
  .price-card,.feat-media .ui-panel,.feat-media .photo-frame{position:relative}
  .price-card::after,.feat-media .ui-panel::after,.feat-media .photo-frame::before{content:"";position:absolute;left:0;right:100%;top:0;height:2px;z-index:4;background:linear-gradient(90deg,var(--accent),var(--warm));transition:right .55s var(--ease);border-radius:2px;pointer-events:none}
  @media(pointer:fine){.price-card:hover::after,.feat-media:hover .ui-panel::after,.feat-media:hover .photo-frame::before{right:0}}
  @media(pointer:fine){.price-card:hover{border-color:color-mix(in oklab,var(--accent) 36%,var(--line-strong))}}
  @media (prefers-reduced-motion:reduce){
    .hero-bg img,.cta-bg img{animation:none}
    .price-card::after,.feat-media .ui-panel::after,.feat-media .photo-frame::before{display:none}
  }

  /* === DEFENSE VERTICAL + RESOURCE PAGES ===================================
     Bug fix: citations should be visible when qrow reaches done state.
     The base .qsrc rule has opacity:0;visibility:hidden — override here.
  =========================================================================== */
  .qrow.done .qsrc{opacity:1;visibility:visible}
  @media(prefers-reduced-motion:reduce){
    /* (0,2,0) already beats the base .qsrc hide rule (0,1,0); .qrow.done .qsrc
       agrees on the same value, so no bang needed to settle every row visible. */
    .qrow .qsrc{opacity:1;visibility:visible}
  }

  /* Defense framework strip */
  .def-fwk{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
  .def-fwk-in{padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
  .def-fwk-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;max-width:220px;line-height:1.5}
  .def-fwk-items{display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap}
  .def-fwk-item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink-soft);opacity:.88}
  .def-fwk-item svg{stroke:var(--accent);flex:0 0 auto}
  .def-fwk-item .mono{font-family:var(--font-mono);font-size:12.5px;font-weight:600}

  /* Resource card grid (on defense.html) */
  .res-section{padding:clamp(72px,10vw,120px) 0;background:var(--bg-soft);border-top:1px solid var(--line)}
  .res-head{max-width:620px;margin-bottom:clamp(40px,6vw,60px)}
  .res-head h2{font-size:var(--fs-h2);font-weight:600;margin-bottom:0}
  .res-head h2 .grad{color:var(--accent)}/* solid indigo accent — no gradient on prose headline text (SS-06 de-gradient; matches blessed hero) */
  .res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .res-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
    transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);text-decoration:none;color:inherit;position:relative;overflow:hidden}
  .res-card::before{content:"";position:absolute;left:0;right:100%;top:0;height:2px;z-index:2;
    background:linear-gradient(90deg,var(--accent),var(--warm));transition:right .55s var(--ease);border-radius:2px}
  @media(pointer:fine){.res-card:hover{transform:translateY(-4px);border-color:var(--accent-ring);box-shadow:var(--shadow-card)}}
  @media(pointer:fine){.res-card:hover::before{right:0}}
  .res-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-on-light);background:var(--accent-soft);
    padding:4px 10px;border-radius:100px;margin-bottom:14px;display:inline-block}
  .res-title{font-family:var(--font-display);font-size:1.18rem;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.25}
  .res-desc{font-size:14px;color:var(--ink-soft);flex:1;line-height:1.6;margin-bottom:18px}
  .res-arrow{font-size:13px;font-weight:600;color:var(--accent-on-light);display:inline-flex;align-items:center;gap:6px;margin-top:auto}
  .res-arrow svg{stroke:var(--accent-on-light);transition:transform .25s var(--ease)}
  @media(pointer:fine){.res-card:hover .res-arrow svg{transform:translateX(4px)}}

  /* Article pages */
  .article-hero{position:relative;overflow:hidden;padding:clamp(100px,12vw,138px) 0 clamp(48px,7vw,72px)}
  .article-hero .hero-field{position:absolute;inset:0;z-index:0;
    background:radial-gradient(900px 520px at 20% 15%,rgba(99,102,241,.18),transparent 62%),linear-gradient(160deg,#0b0f24,#0d1330 58%,#0b0f24)}
  .art-hero-in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
  .art-copy{max-width:760px}
  .art-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-mute);margin-bottom:22px;flex-wrap:wrap}
  .art-meta a{color:var(--accent-on-light)}
  @media(pointer:fine){.art-meta a:hover{text-decoration:underline}}
  .art-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-mute);display:inline-block;flex:0 0 auto}
  .art-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);padding-bottom:clamp(80px,12vw,140px)}
  .art-body{max-width:720px}
  .art-body h2{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:600;color:var(--ink);margin:clamp(36px,5vw,52px) 0 14px;letter-spacing:-.016em;line-height:1.15}
  .art-body h3{font-size:1.15rem;font-weight:600;color:var(--ink);margin:24px 0 10px}
  .art-body p{font-size:1.05rem;color:var(--ink-soft);line-height:1.78;margin-bottom:20px}
  .art-body ul,.art-body ol{color:var(--ink-soft);font-size:1.05rem;line-height:1.78;margin-bottom:20px;padding-left:1.5em}
  .art-body li{margin-bottom:8px}
  .art-body a{color:var(--accent-on-light);text-decoration:underline;text-underline-offset:3px}
  .art-body strong{color:var(--ink);font-weight:600}
  .callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:20px 24px;margin:28px 0}
  .callout p{margin:0;font-size:.97rem;color:var(--ink-soft);line-height:1.72}
  .callout p + p{margin-top:12px}
  .callout strong{color:var(--ink);font-weight:600}
  .art-cta{margin:clamp(48px,7vw,72px) 0 0;padding:32px 36px;background:var(--panel);border:1px solid var(--accent-ring);
    border-radius:var(--radius);box-shadow:0 20px 40px -20px rgba(99,102,241,.22)}
  .art-cta h3{font-size:1.35rem;font-weight:600;margin-bottom:10px}
  .art-cta p{font-size:1rem;color:var(--ink-soft);margin-bottom:24px}

  @media(max-width:700px){
    .res-grid{grid-template-columns:1fr}
    .def-fwk-in{flex-direction:column;align-items:flex-start;gap:18px}
    .def-fwk-label{max-width:none}
    .art-cta{padding:24px 20px}
  }

  /* =========================================================================
     ELEVATION LAYER — ellis_ui v3.2, register: dark-tech
     Additive on top of vendor/ellis-v3-tokens.css + ellis-v3-motion.css.
     Rules: two-band split (feedback 80-200ms on --ease-swift vs reveal band),
     lead-and-cascade, settle-once, depth-is-light, one signature. Palette/spacing
     LOCKED — every value below is a shared token or the existing indigo/line ink.
     ========================================================================= */

  /* --- Pervasive micro-interaction personality: LIFT + LIGHT (dark-tech).
     Chrome answers YOU in the feedback band; content unfurls in the reveal band
     (principle 7: fast frame, slow story). --lift = -2px, light = brighter
     border/accent. Applied to every chrome atom, hover AND focus-visible. */
  .btn{transition:transform var(--dur-2) var(--ease-swift),background var(--dur-2) var(--ease-swift),
    box-shadow var(--dur-2) var(--ease-swift),border-color var(--dur-2) var(--ease-swift)}
  .btn:focus-visible{transform:translateY(var(--lift))}
  .btn-primary:focus-visible{background:var(--accent-on-light);box-shadow:0 14px 30px -10px rgba(79,70,229,.6)}
  .btn-ghost:focus-visible{background:rgba(255,255,255,.08);border-color:var(--accent-ring)}
  .btn:active{transform:translateY(0) scale(.98)}
  .nav-links a.navlink{transition:color var(--dur-2) var(--ease-swift)}
  .nav-links a.navlink::after{transition:right var(--dur-3) var(--ease-swift)}
  .nav-links a.navlink:focus-visible{color:var(--ink)}
  .nav-links a.navlink:focus-visible::after{right:0}
  .foot-bottom .socials a{transition:border-color var(--dur-2) var(--ease-swift),
    background var(--dur-2) var(--ease-swift),color var(--dur-2) var(--ease-swift),transform var(--dur-2) var(--ease-swift)}
  @media(pointer:fine){.foot-bottom .socials a:hover{transform:translateY(var(--lift))}}
  .foot-bottom .socials a:focus-visible{transform:translateY(var(--lift))}
  .nav-toggle{transition:border-color var(--dur-2) var(--ease-swift),background var(--dur-2) var(--ease-swift)}
  @media(pointer:fine){.nav-toggle:hover{border-color:var(--accent-ring);background:rgba(255,255,255,.07)}}
  .nav-toggle:focus-visible{border-color:var(--accent-ring);background:rgba(255,255,255,.07)}

  /* --- Hero overture: the workbench is the LCP frame -> opacity-only reveal
     (--reveal--soft, no filter cost on LCP). The copy column leads-and-cascades
     from the headline (data-lead) via [data-stagger]. */
  [data-hero]{--stagger-default:var(--stagger-2)}
  .work.reveal--soft{transition-duration:var(--dur-5)}

  /* --- SIGNATURE pending pre-state: "re-workbench-cite" (provenance).
     ONLY under html.re-anim (set in <head> when JS runs AND motion is allowed).
     No-JS and reduced-motion never set .re-anim -> the source + cited draft
     render their resolved, fully-cited frame with zero flash (highlight shown,
     thread drawn, token settled at the draft). gsap.set() drives the stamp-in
     from here; .sig-done (added by the signature) returns ownership to CSS.
     @signature re-workbench-cite */
  html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .ps-hl{transform:scaleX(0)}
  html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .prov-thread{transform:scaleY(0)}
  html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .prov-token,
  html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .pa-a,
  html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .pa-src,
  html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .pa-foot{opacity:0}
  /* Settled/no-JS conf chip reads as an approved answer (green), not a dash. */
  .qrow.done .qconf{background:var(--ok-soft);color:var(--ok)}

  /* --- Depth is light: one low-opacity accent glow already lives behind the hero
     (::before) and the featured price card. Formalize the featured card as the
     Clerk-style backlit focal card (single diffuse accent glow, hairline siblings). */
  .price-card.featured::before{content:"";position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 62%)}
  .price-card.featured > *{position:relative;z-index:1}

  /* --- prefers-reduced-motion: the elevation layer strips to instant final state.
     (tokens.css already zeroes --dur-*; this pins the signature + focal states.)
     Re-anim only arms on initial load when motion is allowed, and doesn't get
     removed if the OS preference flips mid-session — so the pre-state rule
     above (html.re-anim […]:not(.sig-done), specificity 0,4,1) can still be
     live. Match its exact selector prefix here (same specificity, declared
     later in this file) to win the tie-break cleanly, no bang required. */
  @media (prefers-reduced-motion:reduce){
    .btn:active{transform:none}
    html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .ps-hl{transform:scaleX(1)}
    html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .prov-thread{transform:scaleY(1)}
    html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .prov-token,
    html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .pa-a,
    html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .pa-src,
    html.re-anim [data-signature="re-workbench-cite"]:not(.sig-done) .pa-foot{opacity:1}
  }

  /* =========================================================================
     FOUNDER TEMPO CALIBRATION (2026-07-14) — hold-then-perform choreography.
     Canon §A.16: a section HOLDS until ~35% in view, then PERFORMS — the lead
     (section head) enters, a BEAT elapses, then supports cascade in reading
     order. Per-element reveals firing at the viewport edge are perceptually
     invisible at any duration; this is the model that reads as motion.
     Trigger: [data-chor] + .play (IntersectionObserver, threshold .35, in
     index.html). Tokens (v3.2 fold, dark-tech as-calibrated): --dur-chor 900ms,
     --stagger-chor-beat 420ms, --stagger-chor-card 180ms -> ~1.9s/section.
     No-JS / reduced-motion: pre-state is html.ellisui-js-gated -> final layout.
     ========================================================================= */
  [data-chor] .chor{transition:opacity var(--dur-chor) var(--ease-out),
    transform var(--dur-chor) var(--ease-out),filter var(--dur-chor) var(--ease-out)}
  /* dark-tech RISE default; text leads never blur, only visual supports do */
  html.ellisui-js [data-chor]:not(.play) .chor{opacity:0;transform:translateY(var(--rise-3))}
  html.ellisui-js [data-chor]:not(.play) .chor--blur{filter:blur(5px)}
  [data-chor].play .chor{opacity:1;transform:none;filter:none}
  /* the lead lands immediately; supports wait one beat, then cascade */
  [data-chor].play .chor[data-lead]{transition-delay:0ms}
  [data-chor].play .chor:not([data-lead]){
    transition-delay:calc(var(--stagger-chor-beat) + var(--ci,0) * var(--stagger-chor-card))}

  /* Chor'd interactive cards: the entrance owns opacity/transform/filter (reveal
     band); hover answers in the LIGHT channel only (border/shadow/bg, feedback
     band). No hover transform -> no reveal-ease swim (§A.17 avoided by
     construction, since a CSS-only .tilt/.chor pairing has no clean fix yet;
     text-heavy cards get light-only per §A.18). */
  [data-chor] .step.chor,[data-chor] .price-card.chor,[data-chor] .res-card.chor{
    transition:opacity var(--dur-chor) var(--ease-out),transform var(--dur-chor) var(--ease-out),
      filter var(--dur-chor) var(--ease-out),border-color var(--dur-2) var(--ease-swift),
      box-shadow var(--dur-2) var(--ease-swift),background var(--dur-2) var(--ease-swift)}
  @media(pointer:fine){.step.chor:hover,.price-card.chor:hover,.res-card.chor:hover{transform:none}}

  /* Retire-at-settle (§A.17 / two-band law): pointer-follow tilt answers in the
     feedback band, never the reveal band — the reveal-band transform must not
     linger on a settled interactive surface (the tilt-swim bug). */
  .ui-panel,.ph-overlay,.work-chip,.prov-source,.prov-answer,.work-card{
    transition:transform var(--dur-2) var(--ease-swift)}

  /* Pseudo-element collision audit (§A.17 rule 5): the featured card's hover
     stripe (.price-card::after, z-index 4) must not paint over the "Most
     popular" badge — lift the badge above the stripe. */
  .price-card.featured .feat-badge{z-index:5}

  /* Soft-rise display headline (§A.18): replaces clip-slice for display type at
     the calibrated (slower) tempo — clip dwells visibly in half-cut glyph
     states. Per-line ink rises on --dur-headline / --stagger-headline. The
     container is a no-op wrapper (opacity/transform owned by the ink lines). */
  .reveal.reveal--rise-headline{transition:none}
  html.ellisui-js .reveal.reveal--rise-headline:not(.in){opacity:1;transform:none}
  .reveal--rise-headline .reveal__ink{display:block;
    transition:opacity var(--dur-headline) var(--ease-out),transform var(--dur-headline) var(--ease-out);
    transition-delay:calc(var(--i,0) * var(--stagger-headline))}
  html.ellisui-js .reveal--rise-headline:not(.in) .reveal__ink{opacity:0;transform:translateY(var(--rise-3))}
  .reveal--rise-headline.in .reveal__ink{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    html.ellisui-js [data-chor]:not(.play) .chor{opacity:1;transform:none;filter:none}
    html.ellisui-js .reveal--rise-headline:not(.in) .reveal__ink{opacity:1;transform:none}
  }

/* Two-band law for choreographed cards (2026-07-14 verify finding): once .settled
   (JS marks after the section performance completes), interaction answers in the
   feedback band — without this, pricing/step cards hover-swim through 900ms. */
[data-chor].play .chor.settled{transition:opacity 200ms var(--ease-swift),transform 140ms var(--ease-swift),filter 200ms var(--ease-swift);transition-delay:0ms}