/* ---------------------------------------------------------------------------
   STANDING ORDER. Ported from the app's apps/web/src/index.css so the site and
   the product stop being two different companies. Light lives on bare :root;
   dark is redefined in BOTH guards below, and no component is ever styled with
   a colour that exists only inside one of them.
   --------------------------------------------------------------------------- */
:root{
  /* Neutrals: sea-slate, hue 206 to 196 */
  --n1:#f8fcfc; --n2:#f3f8f8; --n3:#ebf2f2; --n4:#e4ebec; --n5:#dce5e5;
  --n6:#d2dbdc; --n7:#c1cbcc; --n8:#a9b3b4; --n9:#6a7474; --n10:#5c6565;
  --n11:#4b5656; --n12:#111c1c;

  /* Signet Teal */
  --teal-9:#007775; --teal-10:#006c69; --teal-11:#005c5b;

  --bg-app:var(--n1); --bg-surface:var(--n2); --bg-well:var(--n3);
  --bg-hover:var(--n4); --bg-active:var(--n5);

  --text-primary:var(--n12); --text-secondary:var(--n11); --text-tertiary:var(--n9);
  /* Its own value, not --n9. At #6a7474 this role measured 4.49:1 on
     --bg-surface and 4.24:1 on --bg-well; AA asks 4.5:1 of normal text and this
     role paints roughly 34 small captions, some of which sit on those grounds.
     #616b6b measures 5.31 / 5.12 / 4.84 across app, surface and well. The ramp
     is left alone because --n9 also paints placeholders and solids. */
  --text-tertiary: #616b6b;

  /* Border roles carry their own values, NOT ramp steps: WCAG 1.4.11 asks 3:1
     of any boundary identifying a component or its state, and PRODUCT.md makes
     that binding. The ramp steps measured 1.41:1, 1.66:1 and 2.14:1. */
  --border-subtle:#8a9596; --border-interactive:#717b7b; --border-strong:#5c6565;

  --accent-solid:var(--teal-9); --accent-link:var(--teal-11);
  --accent-border:var(--teal-9); --accent-tint:rgba(0,119,117,.10);

  --danger-text:#912828; --danger-wash:#f9e5e3; --danger-border:#e7b8b3;
  --info-text:#125a98; --info-wash:#ebf5fd; --info-border:#b0cfea; --ctl-h-lg:40px; --motion-moderate:200ms;
  --leading-tight:1.25; --stagger-step:24ms; --ok-solid:#2e854d;
  --focus-ring:0 0 0 2px var(--bg-app),0 0 0 4px var(--focus);
  --danger-solid:#ac3534; --scrim:rgba(9,14,15,.42); --focus:#0070f7; --ctl-h:36px; --ctl-h-sm:30px; --motion-instant:0ms;
  --shadow-floating:0 0 0 1px rgba(17,28,28,.07),0 2px 4px rgba(20,60,60,.05),0 12px 28px rgba(20,60,60,.09);
  /* Tokens the memo surface depends on, copied verbatim from the app's
     index.css so its rules can be pasted unchanged. */
  --ok-text:#1f6f3d; --ok-wash:#e8f9eb; --ok-border:#b1dabb;
  --warn-text:#804d0c; --warn-wash:#fef4df; --warn-border:#eac992;
  --text-xs:11.5px; --text-sm:14px; --text-base:15px; --text-md:17px; --text-lg:22px;
  --w-regular:480; --w-medium:530; --w-semibold:590; --w-strong:630; --track-heading:-0.014em;
  --shadow-raised:0 0 0 1px rgba(17,28,28,0.07);
  --ink:var(--n12); --ink-hover:#24302f; --paper:#ffffff;
  --hairline:rgba(17,28,28,0.45);

  /* Verified: a NEW role, distinct from --accent-link. In the app teal means
     link/active and green means confirmed-against-source; the landing site
     had no green, so its citation markers and authority pills were rendering
     teal, collapsing that distinction. Value chosen to hit 4.5:1 on all three
     --bg-* grounds: #0e6b3c measures 6.38:1 / 6.15:1 / 5.81:1 (app/surface/well). */
  --verified-text:#0e6b3c; --verified-wash:#e6f5ec; --verified-border:#3f9660;

  --font-ui:"Geist","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --font-mono:"Geist Mono",ui-monospace,Consolas,monospace;

  --r-control:6px; --r-card:8px; --r-floating:12px;
  --motion-fast:100ms; --motion-base:160ms; --motion-moderate:200ms;
  --motion-slow:250ms; --motion-sheet:500ms;
  --ease-out:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-sheet:cubic-bezier(0.32,0.72,0,1);

  /* kept: the site's own layout and scroll easing, not brand */
  --white:#ffffff; --wrap:74rem; --dur:.8s; --ease:cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --n1:#090e0f; --n2:#0f1516; --n3:#161d1e; --n4:#1c2425; --n5:#232b2c;
    --n6:#2b3435; --n7:#374040; --n8:#4a5454; --n9:#616b6b; --n10:#6f7979;
    --n11:#a9b4b4; --n12:#e3e9e9;
    /* Its own value, not --n9. At #616b6b this role measured 3.54:1 on --bg-app
       and 3.36:1 on --bg-surface; AA asks 4.5:1 of normal text and this role
       paints ~34 small captions. The ramp is left alone because --n9 also paints
       placeholders and solids. Same reasoning the three border roles carry their
       own values. Measures 5.19:1 and 4.93:1 on those two grounds. */
    --text-tertiary: #7c8686;
    --teal-9:#009b92; --teal-10:#00a89f; --teal-11:#59c5bf;
    --border-subtle:#5c6666; --border-interactive:#6d7777; --border-strong:#828c8c;
    --accent-tint:rgba(0,155,146,.14);
    --danger-text:#e08f88; --danger-wash:#261210; --danger-border:#59302d;
    --info-text:#73b0ee; --info-wash:#12202f; --info-border:#284a6c;
    --ok-solid:#359658;
    --danger-solid:#b54a46; --focus:#52a8ff;
    --shadow-floating:0 0 0 1px rgba(227,233,233,.09),0 4px 10px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.55);
    --ok-text:#6bc987; --ok-wash:#132217; --ok-border:#284c32;
    --warn-text:#e8aa4e; --warn-wash:#261c0d; --warn-border:#5e4216;
    --shadow-raised:0 0 0 1px rgba(227,233,233,0.07);
    --ink-hover:#f2f6f6; --paper:#111c1c;
    --hairline:rgba(227,233,233,0.42);
    /* rgb(107,201,135) is the app's own measured dark-mode verified colour,
       carried over exactly. Clears AA with room: 9.55:1 / 9.07:1 / 8.41:1. */
    --verified-text:#6bc987; --verified-wash:#0e2216; --verified-border:#529069;
    --white:#0f1516;
  }
}
:root[data-theme="dark"]{
  --n1:#090e0f; --n2:#0f1516; --n3:#161d1e; --n4:#1c2425; --n5:#232b2c;
  --n6:#2b3435; --n7:#374040; --n8:#4a5454; --n9:#616b6b; --n10:#6f7979;
  --n11:#a9b4b4; --n12:#e3e9e9;
  /* Its own value, not --n9. At #616b6b this role measured 3.54:1 on --bg-app
     and 3.36:1 on --bg-surface; AA asks 4.5:1 of normal text and this role
     paints ~34 small captions. The ramp is left alone because --n9 also paints
     placeholders and solids. Same reasoning the three border roles carry their
     own values. Measures 5.19:1 and 4.93:1 on those two grounds. */
  --text-tertiary: #7c8686;
  --teal-9:#009b92; --teal-10:#00a89f; --teal-11:#59c5bf;
  --border-subtle:#5c6666; --border-interactive:#6d7777; --border-strong:#828c8c;
  --accent-tint:rgba(0,155,146,.14);
  --danger-text:#e08f88; --danger-wash:#261210; --danger-border:#59302d;
  --info-text:#73b0ee; --info-wash:#12202f; --info-border:#284a6c;
  --ok-solid:#359658;
  --danger-solid:#b54a46; --focus:#52a8ff;
  --shadow-floating:0 0 0 1px rgba(227,233,233,.09),0 4px 10px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.55);
  --ok-text:#6bc987; --ok-wash:#132217; --ok-border:#284c32;
  --warn-text:#e8aa4e; --warn-wash:#261c0d; --warn-border:#5e4216;
  --shadow-raised:0 0 0 1px rgba(227,233,233,0.07);
  --ink-hover:#f2f6f6; --paper:#111c1c;
  --hairline:rgba(227,233,233,0.42);
  --verified-text:#6bc987; --verified-wash:#0e2216; --verified-border:#529069;
  --white:#0f1516;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-app);color:var(--text-primary);font-family:var(--font-ui);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* The serif's display cut, matching the app's wordmark and headings. Without
   the opsz axis set, the browser picks the text cut and the headings read
   noticeably softer than the product's. */
.hero-slogan,.section-h,h1,h2{font-family:var(--font-serif);font-variation-settings:"opsz" 60;font-weight:560}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.6rem}

/* ---- atmosphere (subtle teal light) ---- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35;will-change:transform}
.glow-a{width:44rem;height:44rem;top:-18rem;right:-14rem;background:radial-gradient(circle,color-mix(in oklch, var(--accent-solid) 9%, transparent),transparent 60%)}
.glow-b{width:38rem;height:38rem;top:58%;left:-20rem;background:radial-gradient(circle,color-mix(in oklch, var(--accent-solid) 6%, transparent),transparent 60%)}
.glow-c{width:42rem;height:42rem;bottom:-20rem;right:-10rem;background:radial-gradient(circle,color-mix(in oklch, var(--accent-solid) 3.5%, transparent),transparent 60%)}
.grain{position:absolute;inset:0;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*:not(.atmos):not(.nav):not(.progress):not(.cal-modal-overlay){position:relative;z-index:1}

/* ---- scroll progress ---- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-solid),var(--accent-link))}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.95rem;font-weight:700;line-height:1;padding:.9rem 1.6rem;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s}
.btn:active{transform:scale(.97)}
.btn-brass{background:var(--accent-solid);color:var(--n1);border-color:var(--accent-solid)}
.btn-brass:hover{background:var(--accent-link);border-color:var(--accent-link);box-shadow:0 12px 30px -12px color-mix(in oklch, var(--accent-solid) 50%, transparent)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-interactive)}
.btn-ghost:hover{border-color:var(--text-primary);background:color-mix(in oklch, var(--text-primary) 4%, transparent)}
/* Hero CTA pair: same shape as the brass/ghost pair above, on the current
   token names. Kept distinct so a future rename of one does not silently
   restyle the other. */
.btn-primary{background:var(--accent-solid);color:var(--n1);border-color:var(--accent-solid)}
.btn-primary:hover{background:var(--accent-link);border-color:var(--accent-link);box-shadow:0 12px 30px -12px color-mix(in oklch, var(--accent-solid) 50%, transparent)}
.btn-quiet{background:transparent;color:var(--text-primary);border-color:var(--border-interactive)}
.btn-quiet:hover{border-color:var(--text-primary);background:var(--bg-hover)}
.btn-block{width:100%}
.btn:focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:1.05rem 1.6rem;display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in oklch, var(--white) 85%, transparent);backdrop-filter:blur(14px);box-shadow:0 1px 12px -6px rgba(0,0,0,.12)}
.nav.scrolled .nav-inner{border-bottom-color:var(--border-subtle)}
.nav-logo{display:flex;align-items:center;gap:.5rem;min-width:0}
.nav-mark{height:2.45rem;width:auto;flex:none;transition:height .3s var(--ease)}
.nav-wordmark{height:1.4rem;width:auto;transition:width .3s var(--ease)}
.nav.scrolled .nav-mark{height:2.1rem}
.nav.scrolled .nav-wordmark{height:1.25rem}
.nav-links{display:flex;gap:1.7rem;margin-left:auto;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--text-tertiary);transition:color .2s}
.nav-links a:hover{color:var(--text-primary)}
.nav-cta{padding:.62rem 1.15rem;font-size:.9rem}
/* E12 — Log in. The voice of .nav-links (quiet, --muted, ink on hover), not of
   .btn: an existing user signing in is utility, and dressing it as a second
   pill would set it competing with "Book a demo", which is what the page is
   actually for. min-height keeps a real 44px target on touch even though the
   text is small.

   NO margin-left. `.nav-inner` is a flex row with `gap:24px`, so a margin here
   is added ON TOP of that gap, not instead of it. A 1.7rem margin (matching
   `.nav-links`' own internal gap, which looked right in isolation) measured
   56.8px of ink-to-ink space on the left against 29.6px on the right and
   27.2px between the nav links — three different rhythms in one row.
   The 0.2rem padding is what tunes it: 24px container gap + 3.2px padding =
   27.2px on BOTH sides, exactly the gap the nav links already use. */
.nav-login{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;
  font-size:.92rem;font-weight:500;color:var(--text-tertiary);
  white-space:nowrap;transition:color .2s var(--ease)}
.nav-login:hover{color:var(--text-primary)}
.nav-login:focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px;border-radius:6px}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:7rem 1.25rem 5rem;background:var(--bg-app)}
/* The hero's ground: one thin gradient-stroked curve, the technique the
   reference uses (jude.law: a single SVG path, fill none, stroke-width 1px,
   stroked with a userSpaceOnUse linearGradient that runs bright at one end and
   fades to nothing at the other, absolutely positioned top-right with
   pointer-events none). The path here is ours, drawn to pass behind the type
   rather than through it. Two strokes rather than one so the corner has depth.

   It replaced a full-bleed 20px grid, which read as an unfinished wireframe.
   A curve gives the corner somewhere to go; a grid just tiles. */
.hero-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* THE HERO'S PROPORTIONS, which were the real complaint. It was 900px of near
   black holding 536px of content: the type sat small in the middle of a void
   and the evidence card floated with dead air on both sides. The reference
   solves it by making the product enormous and letting it CROP at the fold, so
   the page reads as having more below. Same move here: the slogan gets real
   scale, the frame gets real width, and the hero stops trying to centre
   everything in a full viewport it cannot fill. */
.hero {
  min-height: auto;
  place-items: start center;
  padding: 9rem 1.25rem 0;
}
.hero-inner {
  max-width: 64rem;
}
.hero-slogan {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
}
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 46ch;
}
.hero-cta {
  margin-top: 2.2rem;
}
@media (max-width: 700px) {
  .hero { padding-top: 6rem; }
  .hero-proof { min-height: 20rem; }
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:52rem;display:flex;flex-direction:column;align-items:center}
.hero-slogan{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.06;letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance;color:var(--text-primary)}
.hero-sub{color:var(--text-secondary);font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:46ch;margin:0 auto 2rem;font-weight:450}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}

@media (max-width:560px){.hero-proof-head{flex-direction:column;align-items:flex-start}}

/* ---- shared section type ---- */
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-link);margin:0 0 1.1rem;font-weight:600}
.section-h{font-family:var(--font-serif);font-weight:600;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1.2rem;text-wrap:balance;max-width:18ch;color:var(--text-primary)}
.section-h.big{font-size:clamp(2.2rem,5vw,3.4rem)}
.section-lede{color:var(--text-secondary);font-size:clamp(1.08rem,1.7vw,1.28rem);max-width:56ch;margin:0}
.section-foot{color:var(--text-secondary);font-size:1.05rem;max-width:52ch;margin:2.4rem 0 0}
.section-foot em{color:var(--accent-link);font-style:normal;font-weight:700}
.band{padding:clamp(5rem,11vw,10rem) 0;position:relative}

/* ---- statement (problem) ---- */
.stmt{padding:clamp(6rem,14vw,12rem) 0;position:relative;text-align:center;background:var(--bg-well)}
.stmt-h{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.02em;margin:0 auto 1.4rem;text-wrap:balance;color:var(--text-primary)}
.stmt-sub{color:var(--text-secondary);font-size:clamp(1.05rem,1.8vw,1.28rem);max-width:52ch;margin:0 auto 2.4rem}
.halluc{font-family:var(--font-serif);font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.5;max-width:44ch;margin:0 auto;padding:2rem 2.2rem;border:1px solid var(--danger-border);background:color-mix(in oklch,var(--danger-text) 9%,var(--bg-well));border-radius:0 14px 14px 0;text-align:left;color:var(--text-primary)}
.fake{color:var(--danger-text);text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:2px;transition:text-decoration-color .6s var(--ease),color .4s}
.halluc.struck .fake{text-decoration-color:var(--danger-text)}
.halluc-flag{display:block;margin-top:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--danger-text);font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .5s .3s var(--ease),transform .5s .3s var(--ease)}
.halluc.struck .halluc-flag{opacity:1;transform:none}
.stmt-foot{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--text-primary);max-width:30ch;margin:3rem auto 0}
.stmt-foot em{color:var(--accent-link);font-style:italic}

/* ---- verification demo ---- */
.see{padding:clamp(5rem,11vw,10rem) 0;text-align:center;background:var(--bg-app)}
.see .eyebrow,.see .section-h,.see .section-lede{margin-left:auto;margin-right:auto}
.see .section-lede{margin-bottom:2.6rem}
.vdemo{position:relative;max-width:44rem;margin:0 auto;text-align:left;background:var(--white);border:1px solid var(--border-subtle);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -46px color-mix(in oklch, var(--accent-solid) 32%, transparent),0 2px 8px -4px rgba(0,0,0,.06)}
.vdemo-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);min-width:0}
.vdemo-dot{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
.vdemo-title{margin-left:.7rem;font-family:var(--font-mono);font-size:.74rem;color:var(--text-tertiary);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdemo-body{padding:1.8rem 1.9rem;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.9;color:var(--text-primary)}
.tok{position:relative;transition:color .3s}
.tok[data-cite]{font-family:var(--font-mono);font-size:.82em;color:var(--accent-link);padding:0 .05em}
.tok[data-cite].verified{color:var(--accent-link);font-weight:600}
.tok[data-cite].verified::after{content:"✓";margin-left:.15em;font-size:.85em;color:var(--accent-solid)}
.tok[data-cite].verifying{color:var(--accent-solid);animation:pulse .5s ease}
@keyframes pulse{50%{opacity:.4}}
.tok-flag{border-radius:4px;padding:.05em .25em;transition:background .4s,color .4s,box-shadow .4s}
.tok-flag.flagged{background:var(--danger-wash);color:var(--danger-text);box-shadow:inset 0 -2px 0 color-mix(in oklch, var(--danger-text) 50%, transparent)}
.vdemo-status{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.9rem 1.3rem;border-top:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;color:var(--text-tertiary);min-height:1.2em}
.vdemo-status .ok{color:var(--accent-link);font-weight:600} .vdemo-status .flag{color:var(--danger-text);font-weight:600}
.vstatus-text{min-width:0}
.vdemo-run{display:flex;margin:2rem auto 0}
.vdemo-run:disabled{opacity:.55;cursor:default}
.vscale{flex:none;width:22px;height:22px;display:block;color:var(--text-tertiary);transition:color .4s var(--ease)}
.vscale svg{width:100%;height:100%;display:block;overflow:visible}
.vscale-beam{transform-origin:110px 44px;transform-box:view-box}
/* shared compositor sway for every demo's scales (throttle-proof) */
.vscale-beam.swaying,.cscale-beam.swaying,.rscale-beam.swaying{animation:beamSway 1.9s ease-in-out infinite}
@keyframes beamSway{0%,100%{transform:rotate(-9deg)}25%,75%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
.vdemo.scanning .vscale{color:var(--accent-solid)}
.vdemo.done .vscale{color:var(--accent-link)}
.vdemo.scanning .vdemo-dot{animation:vdot 1.1s ease-in-out infinite}
.vdemo.scanning .vdemo-dot:nth-child(2){animation-delay:.18s}
.vdemo.scanning .vdemo-dot:nth-child(3){animation-delay:.36s}
@keyframes vdot{0%,100%{background:var(--border-strong);transform:scale(1)}50%{background:var(--accent-solid);transform:scale(1.3)}}
.vs-idle{color:var(--text-tertiary)}

/* once verified, the first citation quietly pulses in the accent teal to invite a click, and the
   status line adds a soft prompt to open a source (the span-verified proof is the payoff) */
/* resting highlight is always visible, so the citation is marked even if the
   animation is frozen (iOS Low Power Mode) or throttled; the pulse breathes on top */
.tok[data-cite].invite{border-radius:4px;background:color-mix(in oklch, var(--accent-solid) 11%, transparent);box-shadow:0 0 0 1px color-mix(in oklch, var(--accent-solid) 24%, transparent);animation:tokInvite 2s ease-in-out infinite}
@keyframes tokInvite{0%,100%{box-shadow:0 0 0 1px color-mix(in oklch, var(--accent-solid) 24%, transparent);background:color-mix(in oklch, var(--accent-solid) 11%, transparent)}50%{box-shadow:0 0 11px 2px color-mix(in oklch, var(--accent-solid) 38%, transparent);background:color-mix(in oklch, var(--accent-solid) 20%, transparent)}}
.vdemo-status .vs-cta{color:var(--accent-link)}
@media (prefers-reduced-motion:reduce){.tok[data-cite].invite{animation:none;background:color-mix(in oklch, var(--accent-solid) 14%, transparent);box-shadow:0 0 0 2px color-mix(in oklch, var(--accent-solid) 35%, transparent)}}


/* ---- timeline ---- */
.how{background:var(--bg-app)}
.timeline{list-style:none;margin:2.8rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:1.15rem;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(180deg,var(--accent-solid),color-mix(in oklch, var(--accent-solid) 20%, transparent))}
.tstep{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start;padding:1.3rem 0;position:relative}
.tstep-n{font-family:var(--font-mono);font-size:.8rem;color:var(--n1);background:var(--accent-solid);width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;font-weight:700;z-index:1;box-shadow:0 0 0 6px var(--bg-app)}
/* The icon sits BESIDE the step's text, not above it (founder, 2026-09-08). The
   inner div is a two-column grid: icon in the first column spanning both rows,
   heading and body stacked in the second. */
.tstep>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;align-items:start}
.tstep-ico{width:40px;height:40px;display:block;margin:.1rem 0 0;grid-row:1/3}
.tstep h3{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0 0 .4rem;line-height:1.15;color:var(--text-primary)}
.tstep p{color:var(--text-secondary);margin:0;max-width:54ch}

/* ---- proof (light "moment") ---- */
.proof{overflow:hidden;text-align:center;background:var(--bg-well);position:relative}
.proof::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 42%,color-mix(in oklch, var(--accent-solid) 13%, transparent),transparent 72%)}
.proof .wrap{position:relative;z-index:2}
.proof .section-h,.proof .section-lede{margin-left:auto;margin-right:auto}
.badge{display:inline-flex;align-items:center;gap:.6rem;border:1.5px solid var(--accent-solid);color:var(--accent-link);border-radius:999px;padding:.45rem .95rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.6rem;font-weight:600}
.badge svg{width:20px;height:20px}

/* ---- demo ---- */
.demo{background:var(--bg-surface)} /* the waitlist band sits directly on the footer, which is the well; two wells read as one slab */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:start}
.demo-list{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.8rem}
.demo-list li{position:relative;padding-left:2rem;color:var(--text-secondary)}
.demo-list li::before{content:"";position:absolute;left:4px;top:.18em;width:8px;height:14px;border:solid var(--accent-solid);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.demo-form{background:var(--white);border:1px solid var(--border-subtle);border-radius:18px;padding:2rem;display:grid;gap:1rem;box-shadow:0 40px 80px -50px color-mix(in oklch, var(--accent-solid) 30%, transparent)}
.field{display:grid;gap:.4rem}
.field label{font-size:.82rem;color:var(--text-secondary);font-weight:600}
.field .opt{color:var(--text-tertiary);font-weight:400}
.field input,.field textarea{font-family:var(--font-ui);font-size:1rem;color:var(--text-primary);background:var(--bg-app);border:1.5px solid var(--border-interactive);border-radius:10px;padding:.75rem .9rem;width:100%;resize:vertical;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-solid);box-shadow:0 0 0 3px var(--accent-tint)}
.form-status{margin:.2rem 0 0;font-size:.9rem;min-height:1.2em}
.form-status.ok{color:var(--accent-link);font-weight:600} .form-status.err{color:var(--danger-text)}

/* demo page back-link + landing-page final CTA */
.nav-back{margin-left:auto;color:var(--text-tertiary);font-size:.92rem;font-weight:500;transition:color .2s var(--ease)}
.nav-back:hover{color:var(--text-primary)}
.cta-final{background:var(--white);text-align:center}
.cta-final-inner{max-width:44rem;margin:0 auto}
.cta-final .eyebrow,.cta-final .section-h,.cta-final .section-lede{margin-left:auto;margin-right:auto}
.cta-final .btn{margin-top:1.8rem}

/* pricing page */
.pricing{background:var(--bg-well);text-align:center}
.pricing .eyebrow,.pricing .section-h,.pricing .section-lede{margin-left:auto;margin-right:auto}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:64rem;margin:3.4rem auto 0;text-align:left;align-items:stretch}
.price-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:18px;padding:2rem 1.7rem;display:flex;flex-direction:column;gap:1.05rem;box-shadow:0 30px 70px -52px color-mix(in oklch, var(--accent-solid) 30%, transparent);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.price-card:hover{transform:translateY(-6px);box-shadow:0 40px 84px -48px color-mix(in oklch, var(--accent-solid) 40%, transparent)}
/* the popular tier is a dark, lifted card with a teal glow so it pulls the eye.
   Dark is var(--text-primary) itself, not a literal, so in dark mode (where
   text-primary is the light end of the ramp) this card inverts to the
   brightest thing on the page instead of vanishing into an already-dark
   ground — the same "stand out regardless of theme" job the old literal
   charcoal did, done with a token instead of an invented hex. */
.price-card.featured{background:radial-gradient(115% 55% at 50% -6%, color-mix(in oklch, var(--accent-solid) 17%, transparent), transparent 60%), var(--text-primary);color:var(--bg-app);border:1px solid color-mix(in oklch, var(--accent-solid) 50%, transparent);box-shadow:0 0 0 1px color-mix(in oklch, var(--accent-solid) 26%, transparent),0 46px 92px -36px rgba(0,0,0,.55),0 0 74px -12px color-mix(in oklch, var(--accent-solid) 40%, transparent);position:relative}
.price-card.featured:not(.premium){transform:translateY(-16px)}   /* Counsel rises as the popular pick */
.price-card.featured:hover{box-shadow:0 0 0 1px color-mix(in oklch, var(--accent-solid) 42%, transparent),0 56px 100px -36px rgba(0,0,0,.6),0 0 94px -8px color-mix(in oklch, var(--accent-solid) 50%, transparent)}
.price-card.featured:not(.premium):hover{transform:translateY(-22px)}
.price-card.featured.premium:hover{transform:translateY(-8px)}
.price-card.featured .price-name{color:var(--bg-app)}
.price-card.featured .price-tagline{color:color-mix(in oklch, var(--bg-app) 60%, transparent)}
.price-card.featured .price-amount{color:var(--bg-app)}
.price-card.featured .price-amount span{color:color-mix(in oklch, var(--bg-app) 62%, transparent)}
.price-card.featured .price-feats li{color:color-mix(in oklch, var(--bg-app) 85%, transparent)}
/* Partner — the elite tier's edge, re-composed for teal. Gold carried this
   tier on warmth, which teal cannot do, so it carries it on contrast instead:
   a solid opaque ring (not Counsel's translucent color-mix border) plus a
   wider halo, so Partner reads as MORE teal rather than just "also teal".
   These rules sit after the shared .featured block on purpose — .premium's
   price-amount override has the same selector specificity as .featured's, so
   it must come later in the file to win the cascade. */
.price-card.premium{border-color:var(--accent-solid);box-shadow:0 0 0 1.5px var(--accent-solid),0 0 0 7px color-mix(in oklch, var(--accent-solid) 20%, transparent),0 48px 96px -34px rgba(0,0,0,.6),0 0 100px -6px color-mix(in oklch, var(--accent-solid) 55%, transparent)}
.price-card.premium:hover{box-shadow:0 0 0 1.5px var(--accent-solid),0 0 0 9px color-mix(in oklch, var(--accent-solid) 28%, transparent),0 58px 104px -34px rgba(0,0,0,.62),0 0 120px -4px color-mix(in oklch, var(--accent-solid) 65%, transparent)}
.price-card.premium .price-amount{color:var(--accent-solid)}
.price-card.premium .price-amount span{color:color-mix(in oklch, var(--accent-solid) 65%, transparent)}
.price-badge{position:absolute;top:-.78rem;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent-solid),var(--accent-link));color:var(--n1);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:.34rem .75rem;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px -6px color-mix(in oklch, var(--accent-solid) 60%, transparent)}
.price-head{display:flex;flex-direction:column;gap:.25rem}
.price-name{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;color:var(--text-primary);line-height:1}
.price-tagline{color:var(--text-tertiary);font-size:.9rem}
.price-amount{font-family:var(--font-serif);font-size:2.75rem;font-weight:600;color:var(--text-primary);line-height:1;margin:.3rem 0 .4rem}
.price-amount span{font-family:var(--font-ui);font-size:1rem;font-weight:500;color:var(--text-tertiary)}
.price-feats{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;flex:1}
.price-feats li{position:relative;padding-left:1.7rem;color:var(--text-secondary);font-size:.94rem;line-height:1.4}
.price-feats li::before{content:"";position:absolute;left:2px;top:.15em;width:7px;height:12px;border:solid var(--accent-solid);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.price-card .btn{margin-top:.4rem}
.price-note{color:var(--text-tertiary);font-size:.85rem;margin-top:2.2rem}
.price-note a{color:var(--accent-link);font-weight:600}
@media (max-width:820px){.price-grid{grid-template-columns:1fr;max-width:27rem}}

/* ---- footer ---- */
.foot{border-top:1px solid var(--border-subtle);padding:3.5rem 0 4rem;background:var(--bg-well)}
.foot-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.foot-logo{display:flex;align-items:center;gap:.5rem}
.foot-mark{height:2.1rem;width:auto;flex:none}
.foot-wordmark{height:1.2rem;width:auto}
.foot-tag{font-family:var(--font-serif);font-weight:600;font-size:1.3rem;color:var(--accent-link);margin:.4rem 0 0}
.foot-fine{color:var(--text-tertiary);font-size:.82rem;margin:.4rem 0 0}

/* ---- see-section closing notes: balanced two-column ---- */
.see-notes{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;max-width:52rem;margin:2.8rem auto 0;text-align:left}
.see-notes p{color:var(--text-secondary);margin:0;font-size:1.02rem;line-height:1.6}
.see-notes em{color:var(--accent-link);font-style:normal;font-weight:700}
@media(max-width:640px){.see-notes{grid-template-columns:1fr;gap:1.4rem;text-align:center}}

/* ---- contract analyser demo ---- */
.contract{background:var(--bg-well);text-align:center}
.contract .eyebrow,.contract .section-h,.contract .section-lede{margin-left:auto;margin-right:auto}
.contract .section-lede{margin-bottom:2.6rem}
.cdemo{max-width:62rem;margin:0 auto;text-align:left;background:var(--white);border:1px solid var(--border-subtle);border-radius:18px;overflow:hidden;box-shadow:0 44px 90px -48px color-mix(in oklch, var(--accent-solid) 32%, transparent),0 2px 8px -4px rgba(0,0,0,.06)}
.cdemo-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.15rem;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
.cdemo-file{display:flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.78rem;color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cscale{width:20px;height:20px;flex:none;display:block;color:var(--text-secondary);transition:color .4s var(--ease)}
.cscale svg{width:100%;height:100%;display:block;overflow:visible}
.cscale-beam{transform-origin:110px 44px;transform-box:view-box}
.cdemo.cwork .cscale{color:var(--accent-solid)}
.cdemo-status{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--text-tertiary);flex:none}
.cdemo-status.scanning{
  background:linear-gradient(90deg,var(--accent-link) 0%,var(--accent-link) 38%,color-mix(in srgb,var(--text-primary) 88%,transparent) 50%,var(--accent-link) 62%,var(--accent-link) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:text-shimmer 2.1s linear infinite
}
@keyframes text-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
  /* Sweep off. The fill MUST come back: transparent text over a static
     gradient is invisible, not just still. */
  .cdemo-status.scanning{animation:none;-webkit-text-fill-color:var(--accent-link);color:var(--accent-link)}
}
.cdemo-status.done{color:var(--danger-text);font-weight:600}
.cdemo-body{display:grid;grid-template-columns:1.15fr .85fr}
.cdoc{position:relative;padding:1.6rem 1.7rem 2.5rem;border-right:1px solid var(--border-subtle);overflow-y:auto;overscroll-behavior:contain;height:27rem;font-size:.9rem;line-height:1.7;color:var(--text-secondary);scrollbar-width:thin;scrollbar-color:var(--border-interactive) transparent}
/* fog pinned to the scrollport bottom; fades away once you've scrolled to the end */
.cdoc::after{content:"";position:sticky;display:block;bottom:-2.5rem;height:3rem;margin-top:-3rem;pointer-events:none;z-index:1;background:linear-gradient(transparent,var(--white));opacity:1;transition:opacity .3s var(--ease)}
.cdoc.at-end::after{opacity:0}
.cdoc::-webkit-scrollbar{width:8px}
.cdoc::-webkit-scrollbar-thumb{background:var(--border-interactive);border-radius:4px}
.cdoc::-webkit-scrollbar-track{background:transparent}
.cdoc h4{font-family:var(--font-serif);font-weight:700;font-size:1.05rem;color:var(--text-primary);text-align:center;letter-spacing:.03em;margin:0 0 1.1rem}
.clause{margin:0 0 .7rem;padding:.25rem .4rem;border-radius:6px;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.clause b{color:var(--text-primary)}
.clause.flagged{background:color-mix(in oklch, var(--danger-text) 9%, transparent);box-shadow:inset 3px 0 0 var(--danger-text)}
.scanline{position:absolute;left:0;right:0;top:-64px;height:64px;pointer-events:none;opacity:0;z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in oklch, var(--accent-solid) 16%, transparent),color-mix(in oklch, var(--accent-solid) 34%, transparent),color-mix(in oklch, var(--accent-solid) 16%, transparent),transparent)}
.cdemo.analysing .scanline{opacity:1;animation:scan 1.5s ease-in-out infinite}
@keyframes scan{0%{top:-64px}100%{top:calc(100% + 8px)}}
.cpanel{padding:1.5rem;position:relative;display:flex;flex-direction:column;justify-content:center;background:var(--white)}
.cpanel-empty{color:var(--text-tertiary);font-size:.9rem;text-align:center}
.cfinding{opacity:0;transform:translateX(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.cfinding.in{opacity:1;transform:none}
.cflag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--danger-text);border:1px solid color-mix(in oklch, var(--danger-text) 40%, transparent);background:var(--danger-wash);border-radius:999px;padding:.3rem .65rem;margin-bottom:.9rem}
.cfinding h5{font-family:var(--font-serif);font-weight:700;font-size:1.18rem;margin:0 0 .55rem;color:var(--text-primary);line-height:1.15}
.cfinding>p{color:var(--text-secondary);font-size:.9rem;line-height:1.6;margin:0 0 1.1rem}
.cfinding>p b{color:var(--text-primary)}
.type-cursor{display:inline-block;width:.52em;height:1.02em;transform:translateY(.16em);background:var(--accent-solid);margin-left:2px;border-radius:1px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cfinding>p{min-height:1.6em}
.cauth{border:1px solid var(--border-subtle);border-radius:12px;padding:1rem 1.05rem;background:var(--bg-app);opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cauth.in{opacity:1;transform:none}
.cauth-hold{min-height:1.5em}
.cauth-title{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-link);margin-bottom:.5rem;font-weight:600}
.cauth-case{font-family:var(--font-serif);font-weight:600;font-size:.98rem;color:var(--text-primary);margin-bottom:.35rem}
.cauth-hold{color:var(--text-secondary);font-size:.84rem;line-height:1.5;margin-bottom:.85rem}
.cauth-meta{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.7rem;color:var(--text-tertiary);margin-top:.85rem;opacity:0;transition:opacity .45s var(--ease)}
.cauth-meta.in{opacity:1}
.cite-count{color:var(--accent-link);font-weight:700}
.verified-mark{color:var(--accent-link)}
.cite-link{color:var(--accent-link);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in oklch, var(--accent-solid) 35%, transparent);padding-bottom:1px;white-space:nowrap;transition:border-color .2s,color .2s}
.cite-link:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}
.cauth-title{min-height:1em}.cauth-case{min-height:1.1em}
#cHeading{min-height:1.1em}
.cdemo-run{display:flex;margin:1.8rem auto 0}
@media(max-width:760px){
  .cdemo-body{grid-template-columns:1fr}
  .cdoc{border-right:0;border-bottom:1px solid var(--border-subtle);height:20rem}
}
@media(max-width:600px){
  /* let the See-it demo question wrap instead of getting cut off with an ellipsis */
  .vdemo-bar{align-items:flex-start}
  .vdemo-dot{margin-top:.4rem}
  .vdemo-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;font-size:.72rem}
}

/* ---- legal research demo ---- */
.research{background:var(--white);text-align:center}
.research .eyebrow,.research .section-h,.research .section-lede{margin-left:auto;margin-right:auto}
.research .section-lede{margin-bottom:2.6rem}
.rdemo{max-width:52rem;margin:0 auto;text-align:left;background:var(--white);border:1px solid var(--border-subtle);border-radius:18px;overflow:hidden;box-shadow:0 44px 90px -48px color-mix(in oklch, var(--accent-solid) 32%, transparent),0 2px 8px -4px rgba(0,0,0,.06)}
.rdemo-ask{display:flex;gap:.85rem;align-items:flex-start;padding:1.3rem 1.6rem;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
.rdemo-q-label{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--text-primary);color:var(--bg-app);font-family:var(--font-mono);font-size:.78rem;font-weight:700;display:grid;place-items:center;margin-top:.1rem}
.rdemo-q{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;color:var(--text-primary);line-height:1.4}
.rdemo-answer-btn{flex:none;margin-left:auto;align-self:center;font-family:var(--font-ui);font-size:.85rem;font-weight:600;color:var(--n1);background:var(--accent-solid);border:none;border-radius:9px;padding:.5rem 1.15rem;cursor:pointer;transition:background .2s,transform .12s,opacity .2s}
.rdemo-answer-btn:hover{background:var(--accent-link)}
.rdemo-answer-btn:active{transform:translateY(1px)}
.rdemo-answer-btn:disabled{opacity:.55;cursor:default}
@media(max-width:600px){.rdemo-answer-btn{margin-left:0;align-self:flex-start}}
.rdemo-pipe{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.6rem;border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;color:var(--text-tertiary)}
.rscale{flex:none;width:22px;height:22px;display:block;color:var(--text-tertiary);transition:color .4s var(--ease)}
.rscale svg{width:100%;height:100%;display:block;overflow:visible}
.rscale-beam{transform-origin:110px 44px;transform-box:view-box}
.rdemo-pipe.work{color:var(--accent-link)}
.rdemo-pipe.work .rscale{color:var(--accent-solid)}
.rdemo-pipe.done{color:var(--accent-link);font-weight:600}
.rdemo-pipe.done .rscale{color:var(--accent-link)}
.rdemo-answer{padding:1.55rem 1.6rem;font-size:1.05rem;line-height:1.78;color:var(--text-secondary);min-height:2.5em}
.rdemo-answer p{margin:0}
.rdemo-answer b{color:var(--text-primary)}
.rquote{color:var(--text-primary);font-style:italic}
.rcite{font-family:var(--font-mono);font-size:.78em;color:var(--accent-link);white-space:nowrap;transition:color .35s}
.rdemo.verified .rcite{color:var(--accent-link);font-weight:600}
.rdemo.verified .rcite::after{content:"✓";margin-left:.2em;color:var(--accent-solid)}
.rsource{max-height:0;opacity:0;overflow:hidden;border-top:1px solid transparent;transition:max-height .6s var(--ease),opacity .5s var(--ease),border-color .5s var(--ease)}
.rsource.in{max-height:24rem;opacity:1;border-top-color:var(--border-subtle)}
.rsource-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:1.05rem 1.6rem .1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.rsource-label{color:var(--accent-link);font-weight:700}
.rsource-cite{color:var(--text-secondary)}
.rsource-verify{margin-left:auto;color:var(--text-tertiary);opacity:0;transition:opacity .5s var(--ease)}
.rsource.lit .rsource-verify{opacity:1;color:var(--accent-link);font-weight:600}
.rsource-text{margin:.7rem 1.6rem 1.5rem;padding:.1rem 0 .1rem 1rem;border-left:2px solid var(--border-interactive);font-family:var(--font-serif);font-size:1rem;line-height:1.7;color:var(--text-secondary);min-height:3.4em}
.rsource-text mark{background:transparent;color:inherit;border-radius:3px;padding:.05em 0;transition:background .6s var(--ease),color .6s var(--ease),box-shadow .6s var(--ease)}
.rsource.lit .rsource-text mark{background:color-mix(in oklch, var(--accent-solid) 20%, transparent);color:var(--text-primary);box-shadow:inset 0 -2px 0 color-mix(in oklch, var(--accent-solid) 60%, transparent)}
.rdemo-run{display:flex;margin:1.8rem auto 0}
@media(max-width:600px){.rdemo-answer{font-size:1rem}.rdemo-q{font-size:1.02rem}}

/* ---- reveal ---- */
/* Hidden ONLY once app.js has armed the reveal (it adds `js` to <html> right
   before it starts tracking). An un-armed document shows every section: a
   crawler, a link preview, a full-page capture, or a script error upstream
   all used to get 31 invisible blocks and a page that was 60% blank. */
html.js .reveal:not(.in){opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---- responsive ---- */
@media(max-width:860px){
  .demo-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  /* .nav-links is gone here, so the login link becomes what pushes the CTA
     right — otherwise it keeps a gap measured against a list that no longer
     exists and the two controls drift apart. */
  .nav-login{margin-left:auto}
  .nav-cta{margin-left:.5rem}
}
@media(max-width:520px){
  .wrap{padding:0 1.25rem}
  .nav-inner{padding:.8rem 1.25rem;gap:.75rem}
  .nav-cta{flex:0 0 auto}
  .nav-logo{flex:0 1 auto;gap:.45rem}
  .nav-mark{height:2.1rem}
  .nav-wordmark{height:1.2rem;max-width:44vw}
  .nav.scrolled .nav-mark{height:1.9rem}
  .nav.scrolled .nav-wordmark{height:1.1rem}
  .nav-cta{padding:.55rem 1rem;font-size:.85rem}
  .nav-login{font-size:.85rem;padding:0 .2rem}
  .hero{padding:5.5rem 1.1rem 4rem}
  .hero-sub{max-width:38ch}
  .halluc{padding:1.5rem 1.4rem}
  .vdemo-body{padding:1.4rem 1.3rem;line-height:1.85}
  .vdemo-status{padding:.8rem 1.3rem 1.1rem}
  .vdemo-title{font-size:.68rem}
  .demo-form{padding:1.5rem}
  .btn{padding:.9rem 1.35rem}
  .hero-cta{flex-direction:column;width:100%;gap:.7rem;max-width:22rem;margin-inline:auto}
  .hero-cta .btn{width:100%}
}

/* E12: below ~400px the lockup, the login link and the demo CTA stop fitting
   on one row — measured at 320px: 44 + 88 + 45 + 130 = 305px of content in a
   320px viewport, and the login link landed on top of the wordmark. The
   WORDMARK gives way, not the login: the geo mark alone IS the logo (favicon,
   and the site's schema.org `logo`) and the hero carries a full-size wordmark
   immediately below — so the brand is not lost, while an existing user on a
   small phone has nowhere else to find a way in.

   Its own query, deliberately. Folding it into the 520px block above would
   fire it 120px too early; a first attempt closed that block early instead and
   swept 13 hero rules down into a 400px breakpoint. Braces still
   balanced and the file still parsed — balance is not structure. */
@media(max-width:400px){
  /* The wordmark used to be hidden here because the j mark still named
     the brand beside it. The j is gone, so hiding this would leave the
     nav anonymous: it shrinks instead. */
  .nav-wordmark{height:1.05rem;max-width:52vw}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .proof-video,.glow{animation:none!important}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
}

/* ---- proof panel: click a highlight, read the exact source ---- */
.proof-backdrop{position:fixed;inset:0;z-index:79;background:var(--scrim);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.proof-backdrop.open{opacity:1;pointer-events:auto}
.proof-panel{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(28rem,100vw);
  background:var(--bg-app);border-left:1px solid var(--border-interactive);box-shadow:-28px 0 70px -28px rgba(22,21,16,.4);
  padding:1.7rem 1.9rem 2.4rem;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--border-interactive) transparent;
  transform:translateX(105%);transition:transform .55s var(--ease);visibility:hidden}
.proof-panel::-webkit-scrollbar{width:8px}
.proof-panel::-webkit-scrollbar-thumb{background:var(--border-interactive);border-radius:4px}
.proof-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent-solid),var(--accent-link) 55%,var(--accent-solid))}
.proof-panel.is-flag::before{background:linear-gradient(90deg,var(--danger-text),color-mix(in oklch, var(--danger-text) 70%, black) 55%,var(--danger-text))}
.proof-panel.open{transform:translateX(0);visibility:visible}
/* content settles in with a gentle stagger */
.proof-panel>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.proof-panel.open>*{opacity:1;transform:none}
.proof-panel.open>*:nth-child(2){transition-delay:.06s}
.proof-panel.open>*:nth-child(3){transition-delay:.1s}
.proof-panel.open>*:nth-child(4){transition-delay:.15s}
.proof-panel.open>*:nth-child(5){transition-delay:.2s}
.proof-panel.open>*:nth-child(6){transition-delay:.26s}
.proof-panel.open>*:nth-child(7){transition-delay:.32s}
.proof-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.3rem;
  padding-bottom:1rem;border-bottom:3px double var(--border-interactive)}
.proof-id{display:flex;align-items:center;gap:.6rem;min-width:0}
.proof-mark{height:1.5rem;width:auto;flex:none;opacity:.85}
.proof-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-tertiary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proof-close{border:1px solid var(--border-interactive);background:var(--bg-app);color:var(--text-secondary);width:2.2rem;height:2.2rem;
  border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;flex:none;
  transition:border-color .2s,color .2s,transform .3s var(--ease)}
.proof-close:hover{border-color:var(--text-primary);color:var(--text-primary);transform:rotate(90deg)}
.proof-badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;border-radius:999px;padding:.34rem .9rem;margin-bottom:1rem}
.proof-badge.ok{background:var(--accent-tint);color:var(--accent-link);border:1px solid color-mix(in oklch, var(--accent-solid) 40%, transparent)}
.proof-badge.flag{background:var(--danger-wash);color:var(--danger-text);border:1px solid color-mix(in oklch, var(--danger-text) 35%, transparent)}
.proof-title{font-family:var(--font-serif);font-weight:700;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 1.4rem;color:var(--text-primary);text-wrap:balance}
.proof-block{margin:0 0 1.35rem}
.proof-label{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:.55rem}
.proof-label::after{content:"";flex:1;height:1px;background:var(--border-subtle)}
.proof-claim{margin:0;font-family:var(--font-serif);font-style:italic;font-size:1rem;line-height:1.65;color:var(--text-secondary);
  border-left:3px solid var(--accent-solid);padding:.2rem 0 .2rem 1rem}
.proof-panel.is-flag .proof-claim{border-left-color:var(--danger-text)}
.proof-src{position:relative;margin:0;font-family:var(--font-serif);font-size:1.04rem;line-height:1.75;color:var(--text-primary);
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:1.15rem 1.3rem;overflow:hidden}
.proof-src::after{content:"\A7";position:absolute;right:.55rem;bottom:-.4rem;font-family:var(--font-serif);
  font-size:3.4rem;line-height:1;color:var(--text-primary);opacity:.05;pointer-events:none}
.proof-src mark{background:color-mix(in oklch, var(--accent-solid) 20%, transparent);color:var(--text-primary);border-radius:3px;padding:.08em .14em;
  box-shadow:inset 0 -2px 0 color-mix(in oklch, var(--accent-solid) 55%, transparent);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.proof-panel.is-flag .proof-src mark{background:color-mix(in oklch, var(--danger-text) 10%, transparent);box-shadow:inset 0 -2px 0 color-mix(in oklch, var(--danger-text) 45%, transparent)}
.proof-note{font-size:.92rem;line-height:1.7;color:var(--text-secondary);margin:0 0 1.5rem}
.proof-note em{color:var(--accent-link);font-style:normal;font-weight:700}
.proof-panel.is-flag .proof-note em{color:var(--danger-text)}
.proof-prov{font-family:var(--font-mono);font-size:.68rem;line-height:1.8;color:var(--text-tertiary);
  border:1px dashed var(--border-interactive);border-radius:10px;padding:.75rem 1rem;background:var(--accent-tint)}
.proof-panel.is-flag .proof-prov{background:var(--danger-wash)}
@media(max-width:640px){
  .proof-panel{top:auto;left:0;width:100%;max-height:86dvh;border-left:none;border-top:1px solid var(--border-interactive);
    border-radius:20px 20px 0 0;box-shadow:0 -28px 70px -28px rgba(22,21,16,.45);
    transform:translateY(105%);padding:1.9rem 1.3rem 2.2rem}
  .proof-panel.open{transform:translateY(0)}
  /* the accent bar becomes a grab handle on the bottom sheet */
  .proof-panel::before,.proof-panel.is-flag::before{top:.55rem;left:50%;right:auto;width:2.6rem;height:.32rem;
    border-radius:999px;transform:translateX(-50%);background:var(--border-interactive)}
}
@media(prefers-reduced-motion:reduce){
  .proof-panel,.proof-backdrop,.proof-panel>*{transition:none}
  .proof-panel>*{opacity:1;transform:none}
}

/* clickable highlights: every verified/flagged span opens the proof panel */
.tok[data-cite],.tok-flag,.rcite,.rquote,.rsource-text mark,.clause.flagged,.cauth-case{cursor:pointer}
.tok[data-cite]:hover,.rdemo .rcite:hover{text-decoration:underline;text-underline-offset:3px}
.tok-flag.flagged:hover{background:color-mix(in oklch, var(--danger-text) 16%, transparent)}
.clause.flagged:hover{background:color-mix(in oklch, var(--danger-text) 12%, transparent)}
.cauth-case:hover{color:var(--accent-link);text-decoration:underline;text-underline-offset:3px}
.rsource.lit .rsource-text mark:hover{background:color-mix(in oklch, var(--accent-solid) 32%, transparent)}
.rquote:hover{color:var(--accent-link)}
.rsource-cite{cursor:pointer}
.rsource-cite:hover{color:var(--accent-link)}
/* the global body>* position/z-index rule outweighs .proof-panel: IDs win */
#proofPanel{position:fixed;z-index:80}
#proofBackdrop{position:fixed;z-index:79}
/* page scroll locks while the proof panel is open: body pinned at its scroll offset */
html.proof-open body{position:fixed;left:0;right:0;overflow:hidden}
/* the flagged sentence's citation number matches the others at rest, danger red once flagged */
.tok-num{font-family:var(--font-mono);font-size:.82em;color:var(--accent-link);padding:0 .05em}
.tok-flag.flagged .tok-num{color:var(--danger-text)}

/* ===== Sanctions strip: live "time since" monument (main page) ===== */
.sanctions-strip{padding:clamp(4.5rem,9vw,7.5rem) 0;background:var(--bg-surface); /* the statement above it sits on the well; two wells in a row read as one slab (founder, 2026-09-08) */text-align:center;
  border-top:1px solid var(--border-interactive);border-bottom:1px solid var(--border-interactive)}
.sanctions-inner{max-width:58rem;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.sanctions-strip .eyebrow,.sanctions-strip .section-h,.sanctions-strip .section-lede{margin-left:auto;margin-right:auto}
.sanctions-strip .section-h{max-width:24ch}
.sanctions-strip .section-lede{max-width:50ch}

/* the monument: scales swaying above a large centered timer */
.sanc-monument{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1.6vw,1.1rem);
  margin:clamp(2.4rem,5vw,3.6rem) auto clamp(2.2rem,4.5vw,3rem)}
.sanc-scales{width:clamp(118px,16vw,176px)}
.sanc-scales svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px color-mix(in oklch, var(--accent-solid) 20%, transparent))}
.sanc-scale-beam{transform-origin:110px 44px;transform-box:view-box;animation:sway 7s ease-in-out infinite}
/* the sway itself, as the baseline drew it (f73a14d:90); it was lost when the hero was rebuilt and every user of it went still */
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.sanc-scale-beam{animation:none}}

.sanc-timer{display:flex;flex-direction:column;align-items:center;gap:.85rem;max-width:42rem}
.timer-label{font-family:var(--font-mono);font-size:clamp(.58rem,1.15vw,.74rem);letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-tertiary);line-height:1.5;font-weight:600;white-space:nowrap}
.timer-clock{display:flex;align-items:flex-start;gap:clamp(.3rem,1.2vw,.6rem);color:var(--text-primary)}
.tseg{display:flex;flex-direction:column;align-items:center;min-width:3.6rem}
.tseg b{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.9rem,9vw,5.2rem);line-height:1;color:var(--text-primary);
  font-variant-numeric:tabular-nums;font-style:normal;letter-spacing:-.01em}
.tseg i{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-tertiary);
  font-style:normal;margin-top:.6rem}
.tsep{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.2rem,7vw,4.2rem);line-height:1;color:var(--accent-solid);
  font-variant-numeric:tabular-nums}
.timer-sub{font-family:var(--font-ui);font-size:.95rem;color:var(--text-secondary);max-width:42ch;line-height:1.55;margin-top:.35rem}
.timer-sub strong{color:var(--text-primary);font-weight:600}

.sanc-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;width:100%;max-width:50rem;margin:0 auto}
.sanc-stat{flex:1 1 13rem;min-width:12rem;display:flex;flex-direction:column;gap:.4rem;
  padding:1.3rem 1rem;border:1px solid var(--border-subtle);border-radius:16px;background:color-mix(in oklch, var(--white) 50%, transparent)}
.sanc-stat-num{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--accent-link);
  line-height:1;font-variant-numeric:tabular-nums}
.sanc-stat-label{font-size:.85rem;color:var(--text-tertiary);line-height:1.4}

.sanc-micro{margin:clamp(1.8rem,4vw,2.4rem) auto 0;max-width:56ch;font-size:.84rem;line-height:1.65;color:var(--text-tertiary)}
.sanc-micro strong{color:var(--text-secondary);font-weight:600}
.sanc-micro a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px}
.sanc-micro a:hover{color:var(--accent-solid)}

@media(max-width:560px){
  .tseg{min-width:2.9rem}
  .timer-clock{gap:.22rem}
  .timer-label{white-space:normal;max-width:32ch;letter-spacing:.12em}
  .sanc-stats{flex-direction:column;gap:.7rem}
  .sanc-stat{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){ .sanc-scale-beam{animation:none} }

/* ===== Payment + onboarding (founder request 2026-07-30) ===== */

/* ===== payment.html: the transaction surface (design pass) =====
   Two bands, not one. The choice keeps pricing.html's tint so the cards read
   identically across the sibling pages; the commitment moves to white, so the
   trust moment is visibly a different part of the document. */

/* ---- the commercial terms, stated before the cards, not under them ---- */
.pay-terms{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.4rem 1.1rem;margin:1.5rem 0 0;padding:0;
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-tertiary)}
.pay-terms li{display:flex;align-items:center;gap:1.1rem}
.pay-terms li:not(:last-child)::after{content:"";width:1px;height:.85em;background:var(--border-interactive)}

/* ---- the tariff. A credit is the unit being sold, so it is set as a rate
       card: serif figure over a mono-scale label. ---- */
.pay-rate{max-width:46rem;margin:clamp(2.6rem,5vw,3.6rem) auto 0;padding:1.5rem 0 1.4rem;
  border-top:1px solid var(--border-interactive);border-bottom:1px solid var(--border-interactive)}
.pay-rate-head{margin:0 0 1.2rem;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-link)}
.rate-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem .8rem}
.rate-rows li{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.rate-rows b{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.55rem,3.4vw,2.15rem);line-height:1;
  color:var(--accent-link);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rate-rows span{font-size:.8rem;line-height:1.4;color:var(--text-tertiary);max-width:16ch;text-align:center}
.pay-rate-foot{margin:1.3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--border-subtle);
  font-size:.82rem;line-height:1.6;color:var(--text-tertiary)}
.pay-rate-foot a{color:var(--accent-link);font-weight:600}

/* ---- pricing.html: a tight masthead ----
   On this page the cards ARE the content, not a reward for scrolling. The
   generic .band rhythm (10rem of air, a 4.4rem hero headline that wraps to two
   lines, 3.4rem before the grid) pushed the first card off a laptop fold, so
   you met the page before you met a price.

   Everything here is scoped to .pricing so index.html's hero rhythm is
   untouched. The floor on padding-top stays above the fixed nav (~68px, ~56px
   on mobile) — the cards can move up, but not under the masthead. */
.pricing{padding-top:clamp(5.4rem,6vw,5.6rem);padding-bottom:clamp(3.4rem,7vw,5.5rem)}
/* Smaller and wider: "Plans for every practice." now sets on one line, which is
   worth ~80px of fold on its own. Still the largest thing on the page. */
.pricing .section-h.big{font-size:clamp(2rem,4.2vw,3.1rem);max-width:26ch;margin-bottom:.8rem}
.pricing .section-lede{max-width:68ch}   /* 2 lines instead of 3, still inside a readable measure */
.pricing .pay-terms{margin-top:1.5rem}
.pricing .bill-toggle{margin-top:1.1rem}
/* The gap before the grid has a hard floor that is easy to miss: the featured
   card is pulled up 16px (translateY) and its "Most popular" badge sits another
   ~13px above that, so anything under ~30px puts the badge THROUGH the billing
   toggle. 3rem leaves the badge ~18px of clear air. Card internals are left at
   their original values — tightening them made the cards read cramped. */
.pricing .price-grid{margin-top:2.85rem}

/* ---- the continuation cue ----
   Below the cards sit the credit tariff and a whole second band about what
   happens when you pay, and nothing on the page admitted it. This is the
   printed convention for that, not a bouncing chevron: a continuation line,
   with a hairline the eye follows down. It is a real anchor, so the cue is also
   the shortcut.

   NOT named .scroll-cue: that class is already taken by the hero's mouse pill
   (line ~82), which is position:absolute and whose `.scroll-cue span` rule
   force-sizes every child span to 4x8px. Reusing the name silently collapsed
   this whole block to a 6px sliver. */
.more-below{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  width:max-content;max-width:100%;margin:clamp(.9rem,2vw,1.25rem) auto 0;border-radius:8px}
.more-lead{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-link);transition:color .2s var(--ease)}
.more-note{font-size:.86rem;line-height:1.5;color:var(--text-tertiary);max-width:54ch;text-align:center}
.more-rule{position:relative;display:block;width:1px;height:38px;margin-top:.15rem;
  background:linear-gradient(180deg,var(--border-interactive),transparent)}
.more-rule i{position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--accent-solid);animation:more-fall 2.6s var(--ease) infinite}
@keyframes more-fall{
  0%{transform:translateY(0);opacity:0}
  16%{opacity:1}
  72%{opacity:1}
  100%{transform:translateY(34px);opacity:0}
}
.more-below:hover .more-lead{color:var(--accent-solid)}
.more-below:hover .more-rule i{animation-duration:1.5s}
.more-below:focus-visible{outline:2px solid var(--accent-solid);outline-offset:6px}
/* Frozen animations (Low Power Mode) must still read as a cue, so the resting
   state is a dot sitting at the bottom of the rule rather than nothing. */
@media(prefers-reduced-motion:reduce){
  .more-rule i{animation:none;top:auto;bottom:0;opacity:1}
}

/* ---- band two: the commitment ---- */
.pay-after{background:var(--white);text-align:center;border-top:1px solid var(--border-interactive);
  padding:clamp(4.5rem,9vw,7.5rem) 0;
  scroll-margin-top:5rem}   /* the cue anchors here; clear the fixed nav */
.pay-assure{max-width:58rem;margin:0 auto}
.pay-after .eyebrow,.pay-after .section-h,.pay-after .section-lede{margin-left:auto;margin-right:auto}
.pay-after .section-lede{max-width:46ch}

/* the mark, swaying: the page's one use of the scales, at the moment of commitment */
.pay-mark{width:clamp(72px,9.5vw,104px);margin:0 auto 1.4rem;color:var(--text-primary)}
.pay-mark svg{width:100%;height:auto;display:block}
.pay-beam{transform-origin:110px 44px;transform-box:view-box;animation:sway 7s ease-in-out infinite}
.pay-pivot{fill:var(--accent-solid)}
@media(prefers-reduced-motion:reduce){.pay-beam{animation:none}}

/* three ruled columns: a printed notice, not a bordered box */
.pay-steps{counter-reset:paystep;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  margin:clamp(2.6rem,5vw,3.4rem) 0 0;padding:0;text-align:left}
.pay-steps li{counter-increment:paystep;padding:0 clamp(1.1rem,2.4vw,1.9rem)}
.pay-steps li+li{border-left:1px solid var(--border-subtle)}
.pay-steps li::before{content:counter(paystep);display:block;margin:0 0 .6rem;
  font-family:var(--font-serif);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;
  color:var(--accent-solid);font-variant-numeric:tabular-nums}
.pay-steps h3{margin:0 0 .45rem;font-family:var(--font-serif);font-weight:700;font-size:1.12rem;
  line-height:1.25;letter-spacing:-.01em;color:var(--text-primary)}
.pay-steps p{margin:0;font-size:.92rem;line-height:1.65;color:var(--text-secondary)}

/* the small print, set as terms: a double rule and section marks. Three
   discrete clauses, not one grey run-on. */
.pay-fine{max-width:44rem;margin:clamp(2.4rem,4.5vw,3.2rem) auto 0;padding-top:1.3rem;
  border-top:3px double var(--border-interactive);text-align:left}
.pay-fine-head{margin:0 0 .85rem;font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-tertiary);text-align:center}
.pay-fine ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pay-fine li{position:relative;padding-left:1.2rem;font-size:.78rem;line-height:1.6;color:var(--text-tertiary)}
.pay-fine li::before{content:"\A7";position:absolute;left:0;top:0;font-family:var(--font-serif);color:var(--accent-solid)}
.pay-fine a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px}
.pay-fine a:hover{color:var(--accent-solid)}

@media(max-width:760px){
  .pay-steps{grid-template-columns:1fr}
  .pay-steps li{padding:0}
  .pay-steps li+li{border-left:0;border-top:1px solid var(--border-subtle);margin-top:1.5rem;padding-top:1.5rem}
}
@media(max-width:640px){
  .rate-rows{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .pay-terms{flex-direction:column;gap:.35rem}
  .pay-terms li:not(:last-child)::after{display:none}
}

/* ---- onboarding.html ----
   Two bands, not one flat column: the wait sits on tinted "page" stock with the
   status ladder lifted onto white (the same card treatment .demo-form and
   .price-card use), then the prep and the way in sit on white below it, so the
   tinted footer still alternates. */
.onboard{background:var(--bg-well);padding-bottom:clamp(4rem,8vw,6.5rem)}
.onboard-next{background:var(--white);padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:clamp(4.5rem,9vw,7.5rem)}
.onboard-inner{max-width:46rem;margin:0 auto;text-align:center}
.onboard-next .onboard-inner{max-width:58rem}
.onboard-next .section-h{max-width:22ch}
.onboard-inner .eyebrow,.onboard-inner .section-h,.onboard-inner .section-lede{margin-left:auto;margin-right:auto}
.onboard-inner .section-lede{max-width:52ch}

/* the mark at monument scale, cf. .sanc-scales: on this page the scales are
   literally weighing the firm, so they are given the room to say it once. */
.onboard-mark{width:clamp(86px,11.5vw,124px);margin:0 auto 1.5rem;color:var(--text-primary)}
.onboard-mark svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px color-mix(in oklch, var(--accent-solid) 20%, transparent))}
.onboard-beam{transform-origin:110px 44px;transform-box:view-box;animation:sway 7s ease-in-out infinite}

/* ---- the status card: the heart of the page ---- */
.onboard-card{margin:clamp(2.6rem,5.5vw,3.6rem) 0 0;text-align:left;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:18px;padding:clamp(1.5rem,3.4vw,2.25rem);
  box-shadow:0 40px 80px -50px color-mix(in oklch, var(--accent-solid) 30%, transparent),0 2px 8px -4px rgba(0,0,0,.06)}
.onboard-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.onboard-stage{margin:0;color:var(--accent-link)}
.onboard-stage b{font-weight:700}
.onboard-asof{margin:0;color:var(--text-tertiary);letter-spacing:.14em}
.onboard-asof[hidden]{display:none}

/* three segments: settled, running, ahead. The middle one sweeps because we
   genuinely do not know how far through it is; an indeterminate bar is honest. */
.onboard-meter{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.95rem 0 clamp(1.7rem,3.6vw,2.2rem)}
.onboard-meter span{display:block;position:relative;height:3px;border-radius:999px;background:var(--border-interactive);overflow:hidden}
.onboard-meter .is-done{background:var(--accent-solid)}
.onboard-meter .is-active{background:var(--accent-tint)}
.onboard-meter .is-active i{position:absolute;inset:0;display:block;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--accent-solid),transparent);
  transform:translateX(-100%);animation:onboardSweep 3.2s var(--ease) infinite}
@keyframes onboardSweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---- the ladder ---- */
.onboard-steps{list-style:none;margin:0;padding:0;text-align:left}
.onboard-steps li{position:relative;display:flex;gap:1.15rem;padding:0 0 clamp(1.5rem,3.2vw,2rem)}
.onboard-steps li:last-child{padding-bottom:0}
/* the rail runs teal behind what is settled, hairline ahead of it */
.onboard-steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:2.15rem;bottom:.3rem;
  width:2px;border-radius:1px;background:var(--border-interactive)}
.onboard-steps li.is-done:not(:last-child)::before{background:var(--accent-solid)}
.onboard-steps li.is-active:not(:last-child)::before{background:linear-gradient(180deg,var(--accent-solid),var(--border-interactive))}

/* Numerals, not symbols. A dot inside a ring reads as a radio button or a
   target: it is the one marker that carried no meaning of its own, while the
   check said "done" and the empty ring said "not yet". Numbering all three
   makes them one sequence, and the state is already stated in words by the
   chip beside each heading. */
.step-mark{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--border-interactive);background:var(--bg-app);color:var(--text-tertiary);
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1;position:relative;z-index:1;box-shadow:0 0 0 5px var(--white)}
.onboard-steps .is-done .step-mark{border-color:var(--accent-solid);background:var(--accent-solid);color:var(--white);
  font-family:var(--font-ui);font-size:.9rem}
.onboard-steps .is-active .step-mark{border-color:var(--accent-solid);color:var(--accent-solid);
  box-shadow:0 0 0 5px var(--white),0 0 0 9px color-mix(in oklch, var(--accent-solid) 12%, transparent)}

.step-body{min-width:0;padding-top:.05rem}
.step-head{display:flex;align-items:baseline;gap:.5rem .8rem;flex-wrap:wrap;margin:0 0 .45rem}
.onboard-steps h2{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.24rem,2.2vw,1.5rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--text-primary);margin:0}
.onboard-steps p{margin:0;font-size:1rem;line-height:1.7;color:var(--text-secondary);max-width:52ch}
.onboard-steps li:not(.is-done):not(.is-active) h2{color:var(--text-tertiary)}

/* state as words, not only as colour */
.step-tag{flex:none;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;white-space:nowrap;padding:.34rem .62rem;border-radius:999px;
  border:1px solid var(--border-interactive);background:var(--bg-surface);color:var(--text-tertiary)}
.onboard-steps .is-done .step-tag{border-color:color-mix(in oklch, var(--accent-solid) 40%, transparent);background:var(--accent-tint);color:var(--accent-link)}
.onboard-steps .is-active .step-tag{border-color:var(--accent-solid);background:var(--white);color:var(--accent-link)}

.onboard-card-note{margin:clamp(1.4rem,3vw,1.85rem) 0 0;padding-top:1.1rem;border-top:1px solid var(--border-subtle);
  font-size:.86rem;line-height:1.65;color:var(--text-tertiary)}
.onboard-card-note strong{color:var(--text-secondary);font-weight:600}

/* ---- worth having ready: three print notes under hairlines ---- */
.onboard-prep{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin:clamp(2.6rem,5vw,3.4rem) 0 0;padding:0;text-align:left}
.onboard-prep li{padding:1.4rem 0 0;border-top:1.5px solid var(--border-interactive)}
.prep-num{display:block;font-family:var(--font-serif);font-weight:700;font-size:1.7rem;line-height:1;
  color:var(--accent-solid);font-variant-numeric:tabular-nums;margin:0 0 .7rem}
.onboard-prep h3{font-family:var(--font-serif);font-weight:700;font-size:1.16rem;line-height:1.25;
  letter-spacing:-.01em;color:var(--text-primary);margin:0 0 .45rem}
.onboard-prep p{margin:0;font-size:.93rem;line-height:1.65;color:var(--text-secondary)}

/* ---- the way in: one action, on its own rule-bounded plate ---- */
.onboard-cta{margin:clamp(2.8rem,5.5vw,3.6rem) 0 0;padding:clamp(1.9rem,4vw,2.5rem) 1.2rem;text-align:center;
  border-top:1.5px solid var(--border-interactive);border-bottom:1.5px solid var(--border-interactive)}
.onboard-cta-kicker{margin:0 0 1.1rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-link)}
.onboard-cta-note{margin:1.15rem 0 0;font-size:.86rem;color:var(--text-tertiary)}
.onboard-cta-note b{font-family:var(--font-mono);font-size:.95em;font-weight:600;color:var(--accent-link)}

.onboard-foot{margin:1.7rem auto 0;max-width:58ch;font-size:.82rem;line-height:1.6;color:var(--text-tertiary)}
.onboard-foot a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px}

@media(max-width:820px){
  .onboard-prep{grid-template-columns:1fr}
}
@media(max-width:600px){
  .onboard-steps li{gap:.9rem}
  .onboard-steps li:not(:last-child)::before{left:13px;top:1.95rem}
  .step-mark{width:28px;height:28px;font-size:.82rem}
  .onboard-cta .btn{width:100%;max-width:22rem}
}
@media(prefers-reduced-motion:reduce){
  .onboard-beam{animation:none}
  .onboard-meter .is-active i{animation:none;transform:none;
    background:linear-gradient(90deg,var(--accent-solid) 0 55%,transparent 55%)}
}

/* ===== preview.html: the internal contents page =====
   A table of contents, set the way a table of authorities is: each entry runs
   out to its filename on dot leaders, with a state chip beneath. Internal only,
   so it can be plainer than the public pages. */
.idx{background:var(--bg-surface)}
.idx-inner{max-width:52rem;margin:0 auto}
.idx-inner .section-lede{max-width:56ch}

.idx-group{margin:clamp(2.6rem,5vw,3.4rem) 0 .9rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--text-primary);
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-link)}

.idx-list{list-style:none;margin:0;padding:0}
.idx-row{padding:1.15rem 0;border-bottom:1px solid var(--border-subtle)}
.idx-row:last-child{border-bottom:0}

/* the entry line: name, leaders, filename */
.idx-open{display:flex;align-items:baseline;gap:.7rem;text-decoration:none}
.idx-name{font-family:var(--font-serif);font-weight:700;font-size:1.24rem;letter-spacing:-.01em;color:var(--text-primary);
  transition:color .16s var(--ease)}
.idx-open:hover .idx-name{color:var(--accent-link)}
.idx-leader{flex:1 1 auto;height:2px;align-self:center;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--text-primary) 32%,transparent) 1px,transparent 1.15px);
  background-size:6px 2px;background-repeat:repeat-x}
.idx-file{flex:none;font-family:var(--font-mono);font-size:.76rem;color:var(--text-tertiary);
  transition:color .16s var(--ease)}
.idx-open:hover .idx-file{color:var(--accent-link)}

.idx-note{margin:.5rem 0 0;font-size:.93rem;line-height:1.65;color:var(--text-secondary);max-width:62ch}
.idx-state{display:inline-block;margin:.7rem 0 0;padding:.28rem .6rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--border-interactive);background:var(--bg-app);color:var(--text-tertiary)}
.idx-state.is-live{border-color:color-mix(in oklch, var(--accent-solid) 45%, transparent);background:var(--accent-tint);color:var(--accent-link)}
.idx-state.is-hold{border-color:var(--border-interactive);background:var(--bg-app);color:var(--text-tertiary)}
.idx-state.is-wait{border-color:color-mix(in oklch, var(--danger-text) 30%, transparent);background:var(--danger-wash);color:var(--danger-text)}

/* what is still open */
.idx-open-items{margin:clamp(2.8rem,5.5vw,3.6rem) 0 0;padding:clamp(1.6rem,3.5vw,2.2rem);
  border:1px solid var(--border-interactive);border-radius:2px;background:var(--white)}
.idx-open-head{margin:0 0 1.2rem;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-link)}
.idx-todo{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.idx-todo li{display:flex;gap:1rem}
.idx-todo-num{flex:none;font-family:var(--font-serif);font-weight:700;font-size:1.35rem;line-height:1.1;
  color:var(--accent-solid);font-variant-numeric:tabular-nums}
.idx-todo h2{margin:0 0 .35rem;font-family:var(--font-serif);font-weight:700;font-size:1.1rem;
  line-height:1.25;letter-spacing:-.01em;color:var(--text-primary)}
.idx-todo p{margin:0;font-size:.9rem;line-height:1.65;color:var(--text-secondary);max-width:60ch}
.idx-todo code{font-family:var(--font-mono);font-size:.88em;color:var(--accent-link)}

.idx-foot{margin:1.8rem 0 0;font-size:.84rem;color:var(--text-tertiary)}
.idx-foot a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px}

@media(max-width:600px){
  .idx-open{flex-wrap:wrap;gap:.3rem .6rem}
  .idx-leader{display:none}
  .idx-file{width:100%}
}

/* Purchase button, pre-launch. A plan whose Stripe link is not filled in yet
   shows the real button, visibly inert, with the reason stated beneath it.
   Better than a live-looking control that goes nowhere, and better than
   swapping the CTA for something that changes what the page is. */
.btn.is-pending{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none}
.buy-pending-note{display:block;margin:.55rem 0 0;text-align:center;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
.price-card.featured .buy-pending-note{color:color-mix(in oklch, var(--bg-app) 60%, transparent)}

/* ---- billing period toggle (monthly / annual) ----
   Plain buttons, by founder decision: the earlier version made the scales
   themselves the control and it was rejected as too much for a price switch.
   What survives from it is the thing that was actually wrong in the first place
   — the old control had the active background TELEPORT between the two options.
   Here a thumb slides, and its width animates too, because the two buttons are
   very different widths (Annual carries the saving badge). Defaults to annual.

   The thumb's offset and width are MEASURED by JS and written to the track as
   custom properties rather than hardcoded, so the control survives a copy change
   or a font fallback. */
.bill-toggle{position:relative;display:inline-flex;align-items:stretch;gap:.25rem;margin:1.4rem auto 0;padding:.28rem;
  border:1px solid var(--border-interactive);border-radius:999px;background:var(--bg-app);
  box-shadow:inset 0 1px 2px rgba(22,21,16,.035)}
.bill-thumb{display:none;position:absolute;top:.28rem;bottom:.28rem;left:0;
  width:var(--thumb-w,0);transform:translateX(var(--thumb-x,0));
  border-radius:999px;background:var(--text-primary);pointer-events:none;
  box-shadow:0 6px 16px -8px rgba(22,21,16,.5);
  transition:transform .44s var(--ease),width .44s var(--ease)}
.bill-toggle.has-thumb .bill-thumb{display:block}
.bill-opt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1.05rem;border:0;border-radius:999px;
  background:none;cursor:pointer;font-family:var(--font-ui);font-size:.86rem;font-weight:600;color:var(--text-tertiary);
  transition:background .18s var(--ease),color .3s var(--ease)}
.bill-opt:hover{color:var(--text-primary)}
/* No-JS fallback: the active button paints its own background. Once JS has
   measured and revealed the thumb, that background gets out of the way. */
.bill-opt.is-on{background:var(--text-primary);color:var(--bg-app)}
.bill-toggle.has-thumb .bill-opt.is-on{background:none}
.bill-opt:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}
.bill-save{font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.2rem .45rem;border-radius:999px;background:var(--accent-tint);color:var(--accent-link);white-space:nowrap;
  transition:background .34s var(--ease),color .34s var(--ease)}
.bill-opt.is-on .bill-save{background:color-mix(in oklch, var(--bg-app) 16%, transparent);color:var(--accent-solid)}

/* At full size the pill is ~290px, which overflows a 320px viewport once the
   wrap padding is taken off. Tighten the button padding and the badge rather
   than letting it wrap, which would break the thumb (it spans the whole track). */
@media(max-width:400px){
  .bill-opt{padding:.5rem .8rem;font-size:.82rem}
  .bill-save{font-size:.52rem;letter-spacing:.06em;padding:.18rem .38rem}
}

/* The figures arrive rather than blink. The grid is re-rendered on each switch,
   so instead of fading the whole thing out (which reads as a flash on the dark
   cards) only the new price and its cycle line animate in. */
@keyframes price-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.price-grid.is-swapped .price-amount{animation:price-in .44s var(--ease) both}
.price-grid.is-swapped .price-cycle{animation:price-in .44s var(--ease) .05s both}

@media(prefers-reduced-motion:reduce){
  .price-grid.is-swapped .price-amount,.price-grid.is-swapped .price-cycle{animation:none}
}

/* the billing-cycle line under each price */
.price-cycle{margin:.15rem 0 1.15rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-tertiary);line-height:1.5}
.price-card.featured .price-cycle{color:color-mix(in oklch, var(--bg-app) 62%, transparent)}
/* the Partner card has no figure, so its "price" is a phrase */
.price-amount.price-talk{font-size:1.5rem;line-height:1.2}

/* ---- The frame: a piece of the product, on a tint --------------------------
   The reference (jude.law) puts a raster screenshot on a pastel ground. This is
   the same object built in markup: crisp at any density, correct in dark mode,
   and it cannot go stale when the app's UI moves. --frame-tint is set per card;
   the primitive owns no colour of its own. */
.frame{
  --frame-tint:var(--bg-well);
  background:var(--frame-tint);
  border-radius:var(--r-floating);
  padding:1.1rem 1.1rem 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:11rem;
}
/* The inner surface reads as the app's own window: it sits ON the tint and is
   cropped by the frame's foot, which is what makes it read as a screenshot
   rather than a diagram. */
.frame-win{
  background:var(--bg-app);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-card) var(--r-card) 0 0;
  border-bottom:0;
  padding:.7rem .8rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.frame-pill{flex:none;padding:.1rem .4rem;border-radius:3px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-link);background:var(--accent-tint)}

/* ---- Frame content: the six bento frames below are now built from the
   app's own markup and CSS (see the "SIX BENTO FRAMES" block further down,
   next to .hero-proof). */

/* ---- The feature bento ----------------------------------------------------
   Uneven by design: 5 then 7, then three thirds. An even grid of five matching
   cards is the tell this layout exists to avoid, and the tints carry the
   differentiation the borders would otherwise have to. The card is NOT a card:
   no border, no background, no padding. Only the frame is an object. */
.features{background:var(--bg-well)}
.feat-grid{display:grid;margin-top:2.4rem}
.feat{display:flex;flex-direction:column}
.feat-h{margin:0;font-family:var(--font-ui);font-size:1rem;font-weight:600;
  color:var(--text-primary)}
.feat-p{margin:0;font-family:var(--font-ui);font-size:.9rem;line-height:1.6;
  color:var(--text-secondary);max-width:42ch}
/* Five tints, one per card. Each is the accent or a neutral at low chroma, so
   the set reads as one palette rather than a swatch book. */
.feat-1 .frame{--frame-tint:var(--accent-tint)}
.feat-3 .frame{--frame-tint:color-mix(in oklch,var(--accent-solid) 7%,var(--bg-well))}
.feat-4 .frame{--frame-tint:color-mix(in oklch,var(--accent-solid) 5%,var(--bg-surface))}
.feat-5 .frame{--frame-tint:color-mix(in oklch,var(--accent-solid) 12%,var(--bg-well))}

/* ---- One place: a wide split on the frame primitive -----------------------
   Sits between the bento (#features, --bg-well) and How it works (#how,
   --bg-app); --white keeps the well/app alternation from repeating a ground
   on either side. --white is not a new tint: it is the existing card-white
   token, which already inverts to a near-black surface in dark mode. */
.one-place{background:var(--white)}
.op-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;align-items:center}
@media (max-width:900px){.op-split{grid-template-columns:minmax(0,1fr)}}
.op-frame{--frame-tint:color-mix(in oklch,var(--accent-solid) 9%,var(--bg-well));
  min-height:16rem}
.op-recept{margin:1.2rem 0 0;font-family:var(--font-serif);
  font-variation-settings:"opsz" 32;font-size:1rem;line-height:1.6;
  color:var(--text-primary)}
.op-caveat{margin:1rem 0 0;font-family:var(--font-mono);font-size:.72rem;
  color:var(--text-tertiary)}

/* ---- Proof measure: the score, with its method ----------------------------
   A number without how it was produced is exactly the kind of claim this
   product exists to refuse, so the reverted 5/10 run is named beside the
   current 9/10 rather than trimmed to just the good figure. */
.proof-measure{margin:1.4rem 0 0;padding:1rem 1.1rem;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  font-family:var(--font-ui);font-size:.92rem;line-height:1.6;
  color:var(--text-secondary)}


/* ============================================================================
   THE HERO FRAME IS THE APP'S OWN MEMO SURFACE. Every rule below is copied from
   apps/web/src/agent-surface.css unchanged and only prefixed with .hero-proof;
   the markup uses the app's class names. The first cut rebuilt this surface
   from descriptions of its computed styles and read as an approximation of the
   product. The founder's answer was to copy the code. This is that.
   ========================================================================== */
.hero-proof{max-width:58rem;margin:3.2rem auto 0;min-height:26rem;text-align:left;position:relative}
.hero-proof.is-artifact{background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:var(--r-card);box-shadow:var(--shadow-raised);padding:22px 26px 18px}
.hero-proof .artifact-head{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border-subtle)}
.hero-proof .artifact-kind{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--text-tertiary);font-variant-numeric:tabular-nums;margin:0 0 6px}
.hero-proof .artifact-title{margin:0;font-family:var(--font-ui);font-size:var(--text-lg);font-weight:var(--w-strong);letter-spacing:var(--track-heading);line-height:1.3;color:var(--text-primary)}
.hero-proof .artifact-meta{margin:4px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.hero-proof .agent-section{margin:4px 0}
.hero-proof .agent-section p{margin:0 0 12px;font-family:var(--font-serif);font-size:var(--text-md);line-height:1.6;color:var(--text-primary)}
.hero-proof .agent-section>details>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 0 6px;cursor:pointer;user-select:none}
.hero-proof .agent-section>details>summary::-webkit-details-marker{display:none}
.hero-proof .agent-section>details>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--text-tertiary);border-bottom:1.5px solid var(--text-tertiary);transform:rotate(-45deg);transition:transform var(--motion-fast) var(--ease-out);flex:none}
.hero-proof .agent-section>details[open]>summary::before{transform:rotate(45deg)}
.hero-proof .agent-section h3{margin:0;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-strong);letter-spacing:.03em;color:var(--text-primary)}
.hero-proof .claim-line{border-radius:2px;transition:background-color var(--motion-fast) var(--ease-out)}
.hero-proof .claim-line:hover{background:var(--bg-well)}
.hero-proof .claim-ref{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;margin:0 1px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-well);font-family:var(--font-mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text-secondary);cursor:pointer;vertical-align:2px;text-decoration:none;transition:border-color var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out)}
.hero-proof .claim-ref:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.hero-proof .claim-ref.matched{color:var(--ok-text);background:var(--ok-wash);border-color:var(--ok-border)}
.hero-proof .claim-ref:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}
.hero-proof .agent-citations{margin-top:18px}
.hero-proof .agent-citations h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-strong);letter-spacing:.03em;color:var(--text-primary)}
.hero-proof .cite-count{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;color:var(--text-tertiary);background:var(--bg-well);border-radius:4px;padding:1px 6px}
.hero-proof .citation{border-top:1px solid var(--hairline)}
.hero-proof .citation:last-of-type{border-bottom:1px solid var(--hairline)}
.hero-proof .citation>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 4px;cursor:pointer;user-select:none}
.hero-proof .citation>summary::-webkit-details-marker{display:none}
.hero-proof .citation:hover>summary{background:var(--bg-surface)}
.hero-proof .cite-num{width:22px;height:22px;flex:none;display:grid;place-items:center;background:var(--bg-well);border-radius:4px;font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.hero-proof .cite-ref{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hero-proof .cite-name{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--text-primary)}
.hero-proof .cite-sub{font-family:var(--font-ui);font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-proof .verify{flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;border:1px solid var(--border-subtle);background:var(--bg-well);font-family:var(--font-ui);font-size:11px;font-weight:var(--w-semibold);white-space:nowrap}
.hero-proof .verify.matched{color:var(--ok-text);background:var(--ok-wash);border-color:var(--ok-border)}
.hero-proof .verify.failed{color:var(--warn-text);background:var(--warn-wash);border-color:var(--warn-border)}
.hero-proof .verify svg{width:13px;height:13px}
.hero-proof .citation-body{padding:4px 4px 12px 2.4rem;font-family:var(--font-ui);font-size:12.5px;color:var(--text-secondary)}
.hero-proof .answer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
/* .ask-btn, verbatim from agent-surface.css:2536, plus its two variants. */
.hero-proof .ask-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--border-interactive);border-radius:var(--r-control);background:var(--bg-app);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.hero-proof .ask-btn.pdf-btn{background:var(--ink);border-color:transparent;color:var(--paper)}
.hero-proof .ask-btn.pdf-btn:hover:not(:disabled){background:var(--ink-hover)}
.hero-proof .ask-btn:disabled{background:var(--n5);border-color:transparent;color:var(--n9);cursor:not-allowed}
.hero-proof .ask-btn:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}

/* Review state, driven by app.js: a reviewed authority's numeral goes to the
   verified green, and Export loses its gate label once both are opened. */
.hero-proof .citation.is-reviewed .cite-num{background:var(--ok-wash);color:var(--ok-text)}
.hero-proof .ask-btn.pdf-btn.is-ready{background:var(--accent-solid);color:var(--white)}

/* ============================================================================
   THE SIX BENTO FRAMES ARE THE APP'S OWN SURFACES. Same method as the hero:
   feat-1 reuses the .hero-proof rules just above by carrying that class on its
   .frame-win (only its outer sizing is overridden, since a bento card is not
   the hero). feat-2 through op-frame copy their app sheet's rules unchanged,
   prefixed with the frame's own scope, with the app's class names in the
   markup. Where an app surface is itself a bordered container (vault's
   .vault-doclist, a conversation's .conv-msgs), .frame-win stays the outer
   crop — the one device common to all six frames — and the nested container's
   own border/background is switched off so the two boxes don't double up.
   ========================================================================== */

/* ---- feat-1: research memo, cropped to kind line / title / short answer --- */
.feat-1 .frame-win.hero-proof{max-width:none;margin:0;min-height:0}


/* ---- feat-3: Vault locker, the top of a document list -------------------- */
/* Copied unchanged from apps/web/src/vault-surface.css:317-379, prefixed
   .feat-3 .frame-win. .vault-doclist loses its own border/background here
   because .frame-win is already that box for this crop. */
.feat-3 .frame-win .vault-doclist{border:none;border-radius:0;background:none}
.feat-3 .frame-win .vault-doc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 16px;padding:8px 0;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.feat-3 .frame-win .vault-doc-row:last-child{border-bottom:none}
.feat-3 .frame-win .vault-doc-main{min-width:0;flex:1 1 320px;display:flex;flex-direction:column;gap:3px}
.feat-3 .frame-win .vault-doc-line{display:flex;align-items:center;gap:7px;font-size:var(--text-sm)}
.feat-3 .frame-win .vault-doc-ic{color:var(--text-tertiary);flex:none}
.feat-3 .frame-win .vault-doc-name{overflow-wrap:anywhere;font-weight:var(--w-medium);color:var(--text-primary)}
.feat-3 .frame-win .vault-doc-kind{font-size:11px;font-weight:var(--w-semibold);color:var(--text-tertiary);letter-spacing:.02em;white-space:nowrap}
.feat-3 .frame-win .vault-doc-meta{font-size:12px;color:var(--text-secondary);overflow-wrap:anywhere}

/* ---- feat-4: one conversation thread, an inbound message + Jubitus's draft */
/* Copied unchanged from apps/web/src/conversations-surface.css:514-708,
   prefixed .feat-4 .frame-win. .conv-msgs loses its scroll box for the same
   reason .vault-doclist loses its border in feat-3. */
.feat-4 .frame-win .conv-msgs{display:flex;flex-direction:column;gap:12px;padding:0;overflow:visible}
.feat-4 .frame-win .conv-msg{width:fit-content;max-width:100%;padding:2px 0 2px 14px;border-left:1px solid var(--border-strong)}
.feat-4 .frame-win .conv-msg.is-out{margin-left:auto;border-left:none;border-right:1px solid var(--border-strong);padding:2px 14px 2px 0}
.feat-4 .frame-win .conv-msg.is-in{border-left-color:var(--border-subtle)}
.feat-4 .frame-win .conv-msg-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.feat-4 .frame-win .conv-msg-from{font-weight:var(--w-semibold);color:var(--text-primary)}
.feat-4 .frame-win .conv-msg-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;font-size:11px;color:var(--text-tertiary)}
.feat-4 .frame-win .conv-msg-text{margin:0;font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:16px;line-height:1.65;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere}
.feat-4 .frame-win .conv-msg.conv-draft{border:1px dashed var(--border-strong);border-radius:var(--r-card);background:var(--bg-surface);padding:12px 14px;max-width:100%}
.feat-4 .frame-win .conv-draft-label{font-size:11px;font-weight:var(--w-semibold);letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.feat-4 .frame-win .conv-msg-body{font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:16px;line-height:1.65;color:var(--text-primary);display:flex;flex-direction:column;gap:10px}
.feat-4 .frame-win .conv-msg-body p{margin:0}

/* ---- feat-5: the memo's refusal state ------------------------------------ */
/* Copied unchanged from apps/web/src/agent-surface.css:2598-2617, prefixed
   .feat-5 .frame-win. */
.feat-5 .frame-win .agent-refusal{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--danger-wash);border:1px solid var(--danger-border);border-radius:var(--r-card);font-size:var(--text-sm);line-height:1.55;color:var(--danger-text)}
.feat-5 .frame-win .agent-refusal svg{flex:none;margin-top:2px}
.feat-5 .frame-win .agent-refusal p{margin:0;color:var(--text-primary)}

/* ---- op-frame: the Integrations grid, four connector cards ---------------- */
/* Copied unchanged from apps/web/src/integrations.css:86-134 and
   apps/web/src/ui/ui.css:250-264, prefixed .op-frame .frame-win. */
.op-frame .frame-win .intg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:12px}
.op-frame .frame-win .intg-card{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:var(--r-card)}
.op-frame .frame-win .intg-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.op-frame .frame-win .intg-card-tile{width:28px;height:28px;flex:none;display:grid;place-content:center;background:var(--bg-well);border:1px solid var(--border-subtle);border-radius:var(--r-control);color:var(--text-secondary)}
.op-frame .frame-win .intg-card-name{flex:1;min-width:0;font-size:var(--text-sm);font-weight:var(--w-semibold);letter-spacing:var(--track-heading);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-frame .frame-win .ui-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;border:1px solid var(--border-subtle);background:var(--bg-well);color:var(--text-secondary);font-size:11px;font-weight:var(--w-semibold);line-height:1;white-space:nowrap;flex:none}

/* ---- The hero holds the WHOLE product on first look. Stacked, the frame ran
   off the fold and read as cropped (founder, 2026-09-08). So at desktop the copy
   sits beside it and the frame takes the viewport's height; below 1100px it
   stacks again. The frame is capped at the viewport and scrolls inside itself
   rather than being cut by the fold: it is an app surface, and that is what an
   app surface does. */
.hero{min-height:100svh;padding:6.5rem 1.6rem 3rem;place-items:center}
/* Wider than the page wrap on purpose: the copy needs a real column. At 74rem the
   54rem frame left it 213px and the slogan broke a word per line. */
.hero-inner{max-width:88rem;display:grid;grid-template-columns:minmax(22rem,1fr) minmax(0,48rem);gap:3.5rem;align-items:center;text-align:left}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-slogan{font-size:clamp(2.2rem,4.6vw,4.2rem);margin-bottom:1.2rem}
.hero-sub{margin:0;max-width:34ch}
.hero-cta{justify-content:flex-start;margin-top:2rem}
.hero-proof{margin:0;min-height:0;max-height:calc(100svh - 9.5rem);overflow:auto;overscroll-behavior:contain;justify-self:end;width:100%}
@media (max-width:1100px){
  .hero{padding-top:6rem}
  .hero-inner{grid-template-columns:minmax(0,1fr);text-align:center}
  .hero-copy{align-items:center}
  .hero-sub{max-width:46ch}
  .hero-cta{justify-content:center}
  .hero-proof{max-height:none;overflow:visible;justify-self:stretch}
}

/* ============================================================================
   ONE GEOMETRY FOR EVERY FRAME (founder, 2026-09-08: "this feels sloppy"). Each
   frame had been exactly as tall as whatever was pasted into it, 432/201/385/
   300/176px across the five cards, so row-mates differed by 230px and the
   captions could not line up. Now every frame is the same height and its
   window is always taller than the frame, so all six crop at the same foot,
   the way screenshots do. Content that runs short shows the surface's own
   ground at the bottom, never the tint.
   ========================================================================== */
/* Top-anchored, now that every window is taller than its frame: bottom-anchoring
   was pushing the window's head (its rounded top, the memo's title) out above the
   frame, so the crop was happening at the top. A screenshot crops at the foot. */
.feat .frame{height:22rem;min-height:0;justify-content:flex-start}
/* Tall enough for the Receptionist, WhatsApp and Gmail cards in full, Connect
   buttons and all; Calendar crops at the foot. It sits beside copy, so it has
   the height. */
.op-frame{height:36rem;min-height:0;justify-content:flex-start} /* three whole cards; the fourth crops at its top edge, not mid-card */
.frame-win{flex:none;min-height:calc(100% + 2rem)}
/* The memo surface reused inside a frame must not carry the hero's sizing. */
.frame-win.hero-proof{max-width:none;margin:0;min-height:calc(100% + 2rem);max-height:none;overflow:visible;justify-self:auto;width:auto}


/* Integrations frame: one column, so the name has room (two 140px columns left
   it 0px beside the 96px badge), and each card carries its blurb and Connect
   exactly as the app's card does. .intg-blurb and .intg-card-foot are the
   app's rules; .intg-connect takes the app's .ask-btn body since the landing
   site has no .ui-btn. */
.op-frame .frame-win .intg-grid{grid-template-columns:1fr;gap:10px}
.op-frame .frame-win .intg-blurb{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-frame .frame-win .intg-card-foot{margin-top:auto;padding-top:4px}
.op-frame .frame-win .intg-connect{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:32px;padding:0 14px;border:1px solid var(--border-interactive);border-radius:var(--r-control);background:var(--bg-app);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);cursor:pointer}
.op-frame .frame-win .intg-connect:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}

/* ============================================================================
   THE DIARY BEHIND THE CLICK-ME ARROW (founder, 2026-09-08). The calendar card
   in the integrations frame opens the app's own week view with a week of the
   app's own fixture events. Every .cal-* rule below is copied from
   apps/web/src/calendar-surface.css (and .ui-iconbtn from ui/ui.css) and only
   prefixed with .cal-modal. The dialog shell itself carries the values of
   21st.dev ddoemonn/modal (id 23539).
   ========================================================================== */
/* Outranks .op-frame .frame-win .intg-connect: the ink fill is the point. */
.op-frame .frame-win .intg-connect.cal-peek{position:relative;background:var(--ink);border-color:transparent;color:var(--paper);gap:8px}
.op-frame .frame-win .intg-connect.cal-peek:hover{background:var(--ink-hover)}
.cal-peek-arrow{display:inline-flex;animation:cal-peek-nudge 1.4s cubic-bezier(.23,1,.32,1) infinite}
.cal-peek-arrow svg{display:block}
@keyframes cal-peek-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.cal-peek:hover .cal-peek-arrow{animation-play-state:paused;transform:translateX(6px)}

.cal-modal-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem}
/* display:grid above would beat the hidden attribute and leave an invisible sheet over the whole page, eating every click. */
.cal-modal-overlay[hidden]{display:none}
@media (min-width:640px){.cal-modal-overlay{padding:1.5rem}}
.cal-modal-backdrop{position:absolute;inset:0;background:rgba(22,21,16,.4);touch-action:none;opacity:0;transition:opacity .2s cubic-bezier(.23,1,.32,1)}
.cal-modal{position:relative;display:flex;flex-direction:column;width:100%;max-width:74rem;height:min(84dvh,52rem);overflow:hidden;
  border:1px solid var(--border-subtle);border-radius:14px;background:var(--bg-app);color:var(--text-primary);
  box-shadow:0 28px 56px -24px rgba(24,22,20,.45);outline:none;
  opacity:0;transform:scale(.96) translateY(12px);
  transition:opacity .16s cubic-bezier(.23,1,.32,1),transform .32s cubic-bezier(.23,1,.32,1)}
.cal-modal-overlay.open .cal-modal-backdrop{opacity:1}
.cal-modal-overlay.open .cal-modal{opacity:1;transform:none}
.cal-modal-overlay.leaving .cal-modal-backdrop{opacity:0;transition:opacity .15s cubic-bezier(.4,0,1,1)}
.cal-modal-overlay.leaving .cal-modal{opacity:0;transform:scale(.98) translateY(6px);transition:opacity .15s cubic-bezier(.4,0,1,1),transform .15s cubic-bezier(.4,0,1,1)}
html.cal-open body{overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cal-modal-backdrop{background:rgba(0,0,0,.65)}}
:root[data-theme="dark"] .cal-modal-backdrop{background:rgba(0,0,0,.65)}
@media (prefers-reduced-motion:reduce){
  .cal-peek-arrow{animation:none}
  .cal-modal,.cal-modal-backdrop{transition:none}
}

/* ---- the app's calendar surface, verbatim under .cal-modal ---- */
.cal-modal .cal-view{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-app);font-family:var(--font-ui);font-size:var(--text-base)}
.cal-modal .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cal-modal .cal-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-subtle)}
.cal-modal .cal-head-month{display:flex;align-items:center;gap:2px;margin-right:6px}
.cal-modal .cal-title{min-width:12ch;margin:0;text-align:center;font-family:var(--font-ui);font-size:var(--text-lg);font-weight:var(--w-strong);letter-spacing:var(--track-heading);font-variant-numeric:tabular-nums lining-nums;color:var(--text-primary)}
.cal-modal .ui-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--r-control);background:none;color:var(--text-secondary);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.cal-modal .ui-iconbtn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}
.cal-modal .cal-head-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:none;border-radius:var(--r-control);background:none;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.cal-modal .cal-head-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.cal-modal .cal-head-btn[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent-link)}
.cal-modal .cal-modes{display:inline-flex;gap:2px;padding:2px;background:var(--bg-well);border-radius:calc(var(--r-control) + 2px)}
.cal-modal .cal-account{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.cal-modal .cal-week{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--n7) transparent}
.cal-modal .cal-week::-webkit-scrollbar{width:10px;height:10px}
.cal-modal .cal-week::-webkit-scrollbar-thumb{background:var(--n7);border:3px solid transparent;background-clip:padding-box;border-radius:8px}
.cal-modal .cal-wk-grid{--cal-wk-rail:4.5rem;--cal-wk-hour-h:5.5rem;display:grid;grid-template-columns:var(--cal-wk-rail) repeat(7,minmax(0,1fr));min-width:100%}
.cal-modal .cal-wk-corner{position:sticky;top:0;left:0;z-index:5;background:var(--bg-app);border-bottom:1px solid var(--border-subtle)}
.cal-modal .cal-wk-headcell{position:sticky;top:0;z-index:4;display:flex;background:var(--bg-app);border-left:1px solid var(--hairline);border-bottom:1px solid var(--border-subtle)}
.cal-modal .cal-wk-daybtn{min-height:44px;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 4px;border:none;background:none;font:inherit;cursor:pointer}
.cal-modal .cal-wk-daybtn:hover{background:var(--bg-hover)}
.cal-modal .cal-wk-daybtn[aria-pressed="true"]{background:var(--accent-tint)}
.cal-modal .cal-wk-dow{font-size:11px;font-weight:var(--w-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}
.cal-modal .cal-wk-daynum{min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:var(--text-base);font-weight:var(--w-medium);font-variant-numeric:tabular-nums lining-nums;color:var(--text-secondary)}
.cal-modal .cal-wk-daynum.is-today{background:var(--bg-active);color:var(--text-primary);font-weight:var(--w-strong)}
.cal-modal .cal-wk-allday-label{position:sticky;left:0;z-index:3;display:flex;align-items:center;padding:0 8px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-size:10.5px;font-weight:var(--w-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}
.cal-modal .cal-wk-allday-cell{min-height:44px;min-width:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:6px;border:none;border-left:1px solid var(--hairline);border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);font:inherit;text-align:left;cursor:pointer}
.cal-modal .cal-wk-allday-cell:hover{background:var(--bg-hover)}
.cal-modal .cal-wk-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 6px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-well);font-size:11px;color:var(--text-primary)}
.cal-modal .cal-wk-rail{position:sticky;left:0;z-index:2;min-height:calc(var(--cal-wk-hour-h) * 24);background:var(--bg-app);border-right:1px solid var(--border-subtle)}
.cal-modal .cal-wk-hour{position:absolute;right:6px;transform:translateY(-50%);font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-wk-col{position:relative;min-width:0;min-height:calc(var(--cal-wk-hour-h) * 24);border-left:1px solid var(--hairline);background-image:repeating-linear-gradient(to bottom,var(--hairline) 0 1px,transparent 1px calc(100% / 24))}
.cal-modal .cal-wk-evt{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px;min-height:0;overflow:hidden;padding:3px 6px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-well);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out)}
.cal-modal .cal-wk-evt:hover{background:var(--bg-hover)}
.cal-modal .cal-wk-evt-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:var(--w-medium);color:var(--text-primary)}
.cal-modal .cal-wk-evt-time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-wk-now{position:absolute;left:0;right:0;z-index:3;height:2px;background:var(--text-primary);pointer-events:auto}
.cal-modal .cal-wk-now::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:999px;background:var(--text-primary)}

/* ---- the rest of the app's calendar surface, verbatim under .cal-modal:
   panes, month grid, year minis, agenda (calendar-surface.css) ---- */
/* inline style sets these per cell; the gate wants a home for them. */
.cal-modal{--cal-row:0;--cal-card:0}
.cal-modal .cal-panes{flex:1;min-height:0;display:flex;align-items:stretch;overflow:auto}
.cal-modal .cal-agenda-slot{flex:0 0 0rem;min-width:0;overflow:hidden;transition:flex-basis var(--motion-sheet) var(--ease-sheet)}
.cal-modal .cal-panes.has-day .cal-agenda-slot{flex-basis:22rem}
.cal-modal .cal-week-pane{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;animation:cal-week-in var(--motion-slow) var(--ease-out) both}
.cal-modal .cal-week-pane[data-dir="fwd"]{--cal-wk-slide:12px}
.cal-modal .cal-week-pane[data-dir="back"]{--cal-wk-slide:-12px}
.cal-modal .cal-week-pane[data-dir="still"]{--cal-wk-slide:0px}
@keyframes cal-week-in{from{opacity:0;transform:translateX(var(--cal-wk-slide,0px))}71%{opacity:1}to{opacity:1;transform:translateX(0)}}
.cal-modal .cal-month{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:10px 16px 16px;animation:cal-month-in var(--motion-slow) var(--ease-out) both}
.cal-modal .cal-month[data-dir="fwd"]{--cal-slide:10px}
.cal-modal .cal-month[data-dir="back"]{--cal-slide:-10px}
.cal-modal .cal-month[data-dir="still"]{--cal-slide:0px}
@keyframes cal-month-in{from{opacity:0}to{opacity:1}}
.cal-modal .cal-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0 0 6px}
.cal-modal .cal-weekdays span{padding-left:8px;font-size:11px;font-weight:var(--w-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}
.cal-modal .cal-grid{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.cal-modal .cal-day{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;overflow:hidden;padding:6px;border:none;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:none;text-align:left;font:inherit;color:var(--text-primary);cursor:pointer;animation:cal-day-in var(--motion-slow) var(--ease-out) both;animation-delay:calc(var(--cal-row,0) * .03s);transition:background-color var(--motion-fast) var(--ease-out)}
@keyframes cal-day-in{from{opacity:0;transform:translateX(var(--cal-slide,0px))}to{opacity:1;transform:translateX(0)}}
.cal-modal .cal-day:hover{background:var(--bg-surface)}
.cal-modal .cal-day[aria-pressed="true"]{background:var(--accent-tint)}
.cal-modal .cal-day.is-out,.cal-modal .cal-day.is-out .cal-day-num{color:var(--text-tertiary)}
.cal-modal .cal-day-num{align-self:flex-start;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px;font-weight:var(--w-medium);font-variant-numeric:tabular-nums lining-nums;color:var(--text-secondary)}
.cal-modal .cal-day-num.is-today{background:var(--bg-active);color:var(--text-primary);font-weight:var(--w-strong)}
.cal-modal .cal-evt{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.5;color:var(--text-primary)}
.cal-modal .cal-evt-time{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.01em;color:var(--text-secondary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-evt-untitled{color:var(--text-tertiary);font-style:italic}
.cal-modal .cal-more{font-size:11px;color:var(--text-tertiary)}
.cal-modal .cal-year{flex:1 1 auto;min-width:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:12px;align-content:start;padding:16px;scrollbar-width:thin;scrollbar-color:var(--n7) transparent}
.cal-modal .cal-mini{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border-subtle);border-radius:var(--r-card);background:var(--bg-app);font:inherit;text-align:left;cursor:pointer;animation:cal-mini-in var(--motion-base) var(--ease-out) both;animation-delay:calc(var(--cal-card,0) * .03s)}
.cal-modal .cal-mini:hover{border-color:var(--border-strong);background:var(--bg-surface)}
@keyframes cal-mini-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.cal-modal .cal-mini-title{font-size:var(--text-sm);font-weight:var(--w-semibold);color:var(--text-primary)}
.cal-modal .cal-mini-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10.5px;text-transform:uppercase;color:var(--text-tertiary)}
.cal-modal .cal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.cal-modal .cal-mini-day{position:relative;display:flex;align-items:center;justify-content:center;height:1.4rem;font-size:10.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-mini-day time{display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;border-radius:999px}
.cal-modal .cal-mini-day.is-today time{background:var(--bg-active);color:var(--text-primary);font-weight:var(--w-strong)}
.cal-modal .cal-mini-dot{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:999px;background:var(--n8)}
.cal-modal .cal-mini-dot.dot-2{width:4px;height:4px;background:var(--n11)}
.cal-modal .cal-agenda{width:22rem;height:100%;display:flex;flex-direction:column;border-left:1px solid var(--border-subtle);background:var(--bg-surface);animation:cal-agenda-in var(--motion-base) var(--ease-out) both}
@keyframes cal-agenda-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.cal-modal .cal-agenda-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hairline)}
.cal-modal .cal-agenda-title{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-size:var(--text-base);font-weight:var(--w-strong);letter-spacing:var(--track-heading);font-variant-numeric:tabular-nums lining-nums;color:var(--text-primary)}
.cal-modal .cal-agenda-back,.cal-modal .cal-agenda-close{flex:none}
.cal-modal .cal-agenda-scroll{flex:1;min-height:0;overflow-y:auto;padding:4px 0 12px;scrollbar-width:thin;scrollbar-color:var(--n7) transparent}
.cal-modal .cal-agenda-empty{margin:0;padding:24px 14px;font-size:var(--text-sm);color:var(--text-secondary)}
.cal-modal .cal-agenda-list{list-style:none;margin:0;padding:0}
.cal-modal .cal-agenda-row{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-bottom:1px solid var(--hairline)}
.cal-modal .cal-agenda-line{display:flex;align-items:baseline;gap:10px;min-width:0}
.cal-modal .cal-agenda-time{flex:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.01em;color:var(--text-secondary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-agenda-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.cal-modal .cal-agenda-name{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);overflow-wrap:break-word}
.cal-modal .cal-agenda-untitled{font-size:var(--text-sm);font-style:italic;color:var(--text-tertiary)}
.cal-modal .cal-agenda-loc{font-size:12px;color:var(--text-tertiary)}
@media (prefers-reduced-motion:reduce){
  .cal-modal .cal-week-pane,.cal-modal .cal-month,.cal-modal .cal-day,.cal-modal .cal-mini,.cal-modal .cal-agenda{animation:none}
  .cal-modal .cal-agenda-slot{transition:none}
}

/* ---- the rest of the app's calendar, verbatim under .cal-modal: the year
   zoom, the agenda's free/busy strip, edit and delete rows, the New event
   sheet and the confirm dialog (calendar-surface.css, ui/ui.css) ---- */
.cal-modal .cal-month[data-zoom="year"]{transform-origin:var(--cal-origin,50% 50%);animation:cal-month-zoom-in var(--motion-base) var(--ease-out) both}
@keyframes cal-month-zoom-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.cal-modal{--cal-origin:50% 50%}
.cal-modal .cal-wk-slots{position:absolute;inset:0;width:100%;z-index:1;padding:0;border:none;border-radius:0;background:none;cursor:pointer}
.cal-modal .cal-fb{padding:10px 14px 0}
.cal-modal .cal-fb-track{position:relative;height:12px;overflow:hidden;border:1px solid var(--hairline);border-radius:4px;background:var(--bg-well)}
.cal-modal .cal-fb-block{position:absolute;top:0;bottom:0;background:var(--n8)}
.cal-modal .cal-fb-block:hover,.cal-modal .cal-fb-block:focus-visible{background:var(--n9)}
.cal-modal .cal-fb-now{position:absolute;top:0;bottom:0;width:2px;background:var(--text-primary)}
.cal-modal .cal-fb-ends{display:flex;justify-content:space-between;margin-top:3px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-agenda-row.is-hot{background:var(--bg-hover)}
.cal-modal .cal-agenda-actions{display:flex;align-items:center;gap:4px}
.cal-modal .cal-agenda-acts{display:inline-flex;gap:2px}
.cal-modal .cal-evt-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--r-control);background:none;color:var(--text-secondary);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.cal-modal .cal-evt-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.cal-modal .cal-evt-del:hover{background:var(--danger-wash);color:var(--danger-text)}
.cal-modal .cal-agenda-rename{flex:1;min-width:0;height:26px;padding:0 6px;border:1px solid var(--focus);border-radius:var(--r-control);background:var(--bg-app);font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-primary)}
.cal-modal .cal-agenda-times{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}
.cal-modal .cal-agenda-time-field{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text-secondary)}
.cal-modal .cal-time-input{height:28px;padding:0 6px;border:1px solid var(--border-interactive);border-radius:var(--r-control);background:var(--bg-app);font-family:var(--font-mono);font-size:12px;color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums}
.cal-modal .cal-evt-save{height:26px;padding:0 10px;border:none;border-radius:var(--r-control);background:var(--ink);color:var(--paper);font-family:var(--font-ui);font-size:12px;font-weight:var(--w-medium);cursor:pointer}
.cal-modal .cal-evt-save:hover:not(:disabled){background:var(--ink-hover)}
.cal-modal .cal-evt-cancel{height:26px;padding:0 10px;border:none;border-radius:var(--r-control);background:none;font-family:var(--font-ui);font-size:12px;font-weight:var(--w-medium);color:var(--text-secondary);cursor:pointer}
.cal-modal .cal-evt-cancel:hover{background:var(--bg-hover);color:var(--text-primary)}
.cal-modal .cal-confirm-item{margin:0 0 6px;font-weight:var(--w-semibold);color:var(--text-primary)}
/* ui/ui.css: dialog, buttons, fields, checkbox */
.cal-modal .ui-dialog-backdrop{position:fixed;inset:0;z-index:60;background:var(--scrim);display:grid;place-items:center;padding:24px}
.cal-modal .ui-dialog{width:min(480px,100%);max-height:min(640px,calc(100dvh - 48px));display:flex;flex-direction:column;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:var(--r-floating);box-shadow:var(--shadow-floating);outline:none}
:root[data-theme="dark"] .cal-modal .ui-dialog,:root[data-theme="dark"] .cal-modal .cal-sheet{background:var(--n2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cal-modal .ui-dialog,:root:not([data-theme="light"]) .cal-modal .cal-sheet{background:var(--n2)}}
@media (prefers-reduced-motion:no-preference){.cal-modal .ui-dialog{animation:ui-dialog-enter var(--motion-base) var(--ease-out)}}
@keyframes ui-dialog-enter{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.cal-modal .ui-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0}
.cal-modal .ui-dialog__title{margin:0;font-family:var(--font-ui);font-size:var(--text-md);font-weight:var(--w-strong);letter-spacing:var(--track-heading);color:var(--text-primary)}
.cal-modal .ui-dialog__body{padding:12px 20px 16px;overflow-y:auto;font-size:var(--text-sm);color:var(--text-secondary)}
.cal-modal .ui-dialog__body p{margin:0}
.cal-modal .ui-dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--hairline)}
.cal-modal .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ctl-h);padding:0 14px;border-radius:var(--r-control);border:1px solid transparent;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);line-height:1;cursor:pointer;user-select:none;white-space:nowrap;background:none;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.cal-modal .ui-btn:disabled{cursor:not-allowed}
.cal-modal .ui-btn--primary{background:var(--ink);color:var(--paper)}
.cal-modal .ui-btn--primary:hover:not(:disabled){background:var(--ink-hover)}
.cal-modal .ui-btn--primary:disabled{background:var(--n5);color:var(--n9)}
.cal-modal .ui-btn--secondary{background:var(--bg-app);border-color:var(--border-interactive);color:var(--text-primary)}
.cal-modal .ui-btn--secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}
.cal-modal .ui-btn--danger{background:var(--danger-solid);color:#ffffff}
.cal-modal .ui-btn--danger:hover:not(:disabled){background:var(--danger-text)}
.cal-modal .ui-btn:active:not(:disabled){transition-duration:var(--motion-instant)}
.cal-modal .ui-field{display:flex;flex-direction:column;gap:6px}
.cal-modal .ui-field__label{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary)}
.cal-modal .ui-field__hint{font-size:12px;color:var(--text-secondary)}
.cal-modal .ui-input{width:100%;height:var(--ctl-h);padding:0 12px;background:var(--bg-app);border:1px solid var(--border-interactive);border-radius:var(--r-control);font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-primary);transition:border-color var(--motion-fast) var(--ease-out)}
.cal-modal .ui-input:hover:not(:disabled){border-color:var(--border-strong)}
.cal-modal .ui-input:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 22%,transparent);border-radius:var(--r-control)}
.cal-modal .ui-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;padding:4px 0}
.cal-modal .ui-check input{appearance:none;width:16px;height:16px;margin:0;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-app);cursor:pointer;display:grid;place-content:center;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.cal-modal .ui-check input:checked{background:var(--accent-solid);border-color:var(--accent-solid)}
.cal-modal .ui-check input:checked::before{content:"";width:9px;height:9px;clip-path:polygon(13% 52%,5% 65%,40% 92%,95% 20%,84% 10%,38% 71%);background:var(--n1)}
/* the New event sheet */
.cal-modal .cal-sheet-backdrop{justify-items:end;align-items:stretch;padding:0}
.cal-modal .cal-sheet{width:min(24rem,100vw);height:100%;display:flex;flex-direction:column;background:var(--bg-app);border-left:1px solid var(--border-subtle);box-shadow:var(--shadow-floating);animation:cal-sheet-in var(--motion-sheet) var(--ease-sheet) both}
@keyframes cal-sheet-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.cal-modal .cal-sheet-head{padding:16px 16px 0}
.cal-modal .cal-sheet-title{margin:0;font-family:var(--font-ui);font-size:var(--text-md);font-weight:var(--w-strong);letter-spacing:var(--track-heading);color:var(--text-primary)}
.cal-modal .cal-sheet-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.cal-modal .cal-sheet-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cal-modal .cal-sheet-actions{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--hairline)}
.cal-modal .cal-sheet-hint{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--warn-text)}
.cal-modal .cal-sheet-buttons{display:flex;justify-content:flex-end;gap:8px}
@media (prefers-reduced-motion:reduce){
  .cal-modal .cal-month[data-zoom="year"],.cal-modal .cal-sheet,.cal-modal .ui-dialog{animation:none}
  .cal-modal .cal-head-btn,.cal-modal .cal-day,.cal-modal .cal-wk-evt,.cal-modal .cal-evt-btn,.cal-modal .cal-panes{transition:none}
}

/* ============================================================================
   THE FEATURE FRAMES ARE LIVE (founder, 2026-09-08: "make every frame live").
   Each frame is a preview of a real surface: taller, its crop fading into
   the frame's own tint so the cut reads as a fold and never as a mistake,
   with a Click me action at the foot (the calendar's, .cal-peek) that opens
   the surface itself in the dialog.
   ========================================================================== */
.feat .frame{position:relative}
.feat .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5rem;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg-app) 82%)}  /* fades into the window's own surface, so the last lines fold away in both themes */
.feat .frame-cta{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;width:auto;min-width:11rem;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-control);
  background:var(--ink);color:var(--paper);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);cursor:pointer;box-shadow:0 2px 8px -2px rgba(0,0,0,.28)}
.feat .frame-cta:hover{background:var(--ink-hover)}
.feat .frame-cta:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}

/* the surface dialog: the diary's shell with a head naming the surface */
.surf-modal{max-width:78rem;height:min(88dvh,56rem)}
.surf-head{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--border-subtle);background:var(--bg-app)}
.surf-title{flex:1;min-width:0;margin:0;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-semibold);letter-spacing:var(--track-heading);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surf-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;background:var(--bg-app);scrollbar-width:thin;scrollbar-color:var(--n7) transparent}
.surf-memo .surf-body,.surf-refusal .surf-body{padding:24px;background:var(--bg-surface)}
.surf-memo-doc.hero-proof{max-width:58rem;width:100%;margin:0 auto;min-height:0;max-height:none;overflow:visible;text-align:left}
.surf-memo-doc .agent-citations-note{margin:0 0 8px;font-family:var(--font-ui);font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
.surf-memo-doc .artifact-title{font-size:var(--text-lg)}
/* the proof panel opens ABOVE the dialog while one is up */
html.cal-open #proofBackdrop{z-index:129}
html.cal-open #proofPanel{z-index:130}



/* ==== SURFACE VAULT: verbatim app rules, prefixed .surf-vault (extracted from apps/web/src) ==== */
/* ---- vault-surface.css: page scaffold ---- */
.surf-vault .vault-view{display:flex;flex-direction:column;gap:20px;}
.surf-vault .vault-view h2{font-size:var(--text-lg);}
.surf-vault .vault-h3{font-size:var(--text-md);}
.surf-vault .vault-sub{font-size:var(--text-sm);color:var(--text-secondary);max-width:62ch;margin:4px 0 0;}
.surf-vault .vault-section{display:flex;flex-direction:column;gap:10px;}
.surf-vault .vault-back{align-self:flex-start;}
.surf-vault .vault-locker-title{display:flex;align-items:center;gap:8px;font-size:var(--text-lg);overflow-wrap:anywhere;}
.surf-vault .vault-locker-title svg{color:var(--text-tertiary);flex:none;}
.surf-vault .vault-priv-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.surf-vault .vault-loading{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:var(--text-sm);}

/* ---- vault-surface.css: inline status lines ---- */
.surf-vault .vault-error,
.surf-vault .vault-notice{display:flex;align-items:flex-start;gap:6px;font-size:var(--text-sm);line-height:1.45;border-radius:var(--r-control);padding:7px 10px;margin:0;}
.surf-vault .vault-error{color:var(--danger-text);background:var(--danger-wash);border:1px solid var(--danger-border);}
.surf-vault .vault-notice{color:var(--info-text);background:var(--info-wash);border:1px solid var(--info-border);}
.surf-vault .vault-error svg,
.surf-vault .vault-notice svg{flex:none;margin-top:2px;}

/* ---- vault-surface.css: ledger table trimmings ---- */
.surf-vault .vault-name-cell{display:inline-flex;align-items:center;gap:7px;min-width:0;font-weight:var(--w-medium);}
.surf-vault .vault-name-cell svg,
.surf-vault .vault-doc-ic{color:var(--text-tertiary);flex:none;}
.surf-vault .vault-row-actions{text-align:right;white-space:nowrap;}
.surf-vault .vault-row-actions .ui-btn{margin-left:2px;}
.surf-vault .ui-btn.vault-act-danger{color:var(--danger-text);}
.surf-vault .ui-btn.vault-act-danger:hover:not(:disabled){background:var(--danger-wash);color:var(--danger-text);}

/* ---- vault-surface.css: upload controls ---- */
.surf-vault .vault-upload-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.surf-vault .vault-upload-row .ui-field{width:200px;}
.surf-vault .vault-upload-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border-interactive);border-radius:var(--r-control);background:var(--bg-app);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);}
.surf-vault .vault-upload-btn:hover{background:var(--bg-hover);border-color:var(--border-strong);}
.surf-vault .vault-upload-btn:focus-within{box-shadow:var(--focus-ring);}
.surf-vault .vault-upload-btn svg{flex:none;color:var(--text-secondary);}
.surf-vault .vault-upload-btn[aria-disabled="true"]{cursor:default;border-color:var(--border-subtle);}

/* ---- vault-surface.css: drop zones ---- */
.surf-vault .vault-dropzone{display:flex;flex-direction:column;gap:10px;padding:8px;margin:-8px;border:1px dashed transparent;border-radius:var(--r-card);transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out);}
.surf-vault .vault-dropzone.is-dragover{background:var(--bg-hover);border-color:var(--border-strong);box-shadow:inset 0 0 0 1px var(--border-strong);}
.surf-vault .vault-drop-hint{font-size:var(--text-sm);color:var(--text-secondary);}

/* ---- vault-surface.css: upload ledger ---- */
.surf-vault .vault-upload-status:empty{display:none;}
.surf-vault .vault-upload-report-head{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);}
.surf-vault .vault-upload-report-list{list-style:none;margin:0;padding:0;border:1px solid var(--border-subtle);border-radius:var(--r-card);background:var(--bg-app);}
.surf-vault .vault-upload-report-row{display:flex;align-items:flex-start;gap:7px;padding:7px 10px;font-size:var(--text-sm);color:var(--text-secondary);border-bottom:1px solid var(--hairline);}
.surf-vault .vault-upload-report-row:last-child{border-bottom:none;}
.surf-vault .vault-upload-report-row svg,
.surf-vault .vault-upload-report-row .ui-record-square{flex:none;margin-top:2px;}
.surf-vault .vault-upload-report-row.is-failed{color:var(--danger-text);}
.surf-vault .vault-upload-report-row.is-failed svg{color:var(--danger-text);}
.surf-vault .vault-upload-report-name{font-weight:var(--w-medium);color:var(--text-primary);}
.surf-vault .vault-upload-report-row.is-failed .vault-upload-report-name{color:var(--danger-text);}
.surf-vault .vault-upload-report-note{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--info-text);}
.surf-vault .vault-upload-report-note svg{color:var(--info-text);}

/* ---- vault-surface.css: locker document rows (detail view) ---- */
.surf-vault .vault-doclist{border:1px solid var(--border-subtle);border-radius:var(--r-card);background:var(--bg-app);}
.surf-vault .vault-doc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 16px;padding:10px 12px;border-bottom:1px solid var(--hairline);flex-wrap:wrap;}
.surf-vault .vault-doc-row:last-child{border-bottom:none;}
.surf-vault .vault-doc-main{min-width:0;flex:1 1 320px;display:flex;flex-direction:column;gap:3px;}
.surf-vault .vault-doc-line{display:flex;align-items:center;gap:7px;font-size:var(--text-sm);}
.surf-vault .vault-doc-open{display:inline-flex;align-items:baseline;gap:8px;min-width:0;border:none;background:none;padding:0;font:inherit;font-weight:var(--w-medium);color:var(--text-primary);text-align:left;cursor:pointer;}
.surf-vault .vault-doc-open:hover .vault-doc-name{text-decoration:underline;text-underline-offset:2px;}
.surf-vault .vault-doc-name{overflow-wrap:anywhere;}
.surf-vault .vault-doc-kind{font-size:11px;font-weight:var(--w-semibold);color:var(--text-tertiary);letter-spacing:0.02em;white-space:nowrap;}
.surf-vault .vault-doc-meta{font-size:12px;color:var(--text-secondary);overflow-wrap:anywhere;}
.surf-vault .vault-doc-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.surf-vault .vault-rename{height:28px;width:min(360px, 100%);}
.surf-vault .vault-doc-actions .doc-download{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:none;border-radius:var(--r-control);background:none;font-size:12px;font-weight:var(--w-medium);color:var(--text-secondary);cursor:pointer;text-decoration:none;}
.surf-vault .vault-doc-actions .doc-download:hover{background:var(--bg-hover);color:var(--text-primary);}

/* ---- vault-surface.css: parse with AI ---- */
.surf-vault .vault-parse{display:flex;align-items:flex-end;gap:8px;}
.surf-vault .vault-parse .ui-field{flex:1;min-width:0;}
.surf-vault .vault-parse-result{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border-subtle);border-radius:var(--r-card);background:var(--bg-surface);padding:12px 14px;}
.surf-vault .vault-parse-result.is-refusal{border-color:var(--warn-border);background:var(--warn-wash);}
.surf-vault .vault-parse-meta{font-size:12px;color:var(--text-secondary);}
.surf-vault .vault-refusal-line{display:flex;align-items:flex-start;gap:6px;font-size:var(--text-sm);color:var(--warn-text);}
.surf-vault .vault-refusal-line svg{flex:none;margin-top:2px;}
.surf-vault .vault-cite{border-top:1px solid var(--hairline);padding-top:10px;display:flex;flex-direction:column;gap:6px;}
.surf-vault .vault-cite-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--text-sm);font-weight:var(--w-medium);}
.surf-vault .vault-cite-quote{margin:0;color:var(--text-secondary);}
.surf-vault .vault-cite-verif{font-size:12px;color:var(--text-tertiary);}

/* ---- vault-surface.css: confirm body ---- */
.surf-vault .vault-confirm-name{font-weight:var(--w-semibold);color:var(--text-primary);overflow-wrap:anywhere;margin:0 0 6px;}

/* ---- vault-surface.css: J90 privilege door ---- */
.surf-vault .vault-priv-list{display:flex;flex-direction:column;gap:2px;margin-top:8px;max-height:40vh;overflow-y:auto;}
.surf-vault .vault-priv-email{margin-left:6px;font-size:12px;color:var(--text-tertiary);}
.surf-vault .vault-priv-shut{color:var(--text-secondary);}

/* ---- vault-surface.css: focusable-but-invisible file inputs ---- */
.surf-vault .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- file-drop.css: shared drag vocabulary ---- */
.surf-vault .jb-drop-cue{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);border-bottom:1px solid var(--border-subtle);}
.surf-vault .jb-drop-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- ui/ui.css: buttons ---- */
.surf-vault .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ctl-h);padding:0 14px;border-radius:var(--r-control);border:1px solid transparent;font-size:var(--text-sm);font-weight:var(--w-medium);line-height:1;cursor:pointer;user-select:none;white-space:nowrap;background:none;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);}
.surf-vault .ui-btn:disabled{cursor:not-allowed;}
.surf-vault .ui-btn--primary{background:var(--ink);color:var(--paper);}
.surf-vault .ui-btn--primary:hover:not(:disabled){background:var(--ink-hover);}
.surf-vault .ui-btn--primary:disabled{background:var(--n5);color:var(--n9);}
.surf-vault .ui-btn--secondary{background:var(--bg-app);border-color:var(--border-interactive);color:var(--text-primary);}
.surf-vault .ui-btn--secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong);}
.surf-vault .ui-btn--secondary:disabled{color:var(--n9);border-color:var(--border-subtle);}
.surf-vault .ui-btn--ghost{color:var(--text-secondary);}
.surf-vault .ui-btn--ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);}
.surf-vault .ui-btn--ghost:disabled{color:var(--n9);}
.surf-vault .ui-btn--danger{background:var(--danger-solid);color:#ffffff;}
.surf-vault .ui-btn--danger:hover:not(:disabled){background:var(--danger-text);}
.surf-vault .ui-btn--danger:disabled{background:var(--n5);color:var(--n9);}
.surf-vault .ui-btn--sm{height:var(--ctl-h-sm);padding:0 11px;font-size:13px;}
.surf-vault .ui-btn--lg{height:var(--ctl-h-lg);padding:0 18px;font-size:var(--text-base);}
.surf-vault .ui-btn:active:not(:disabled){transition-duration:var(--motion-instant);}
.surf-vault .ui-btn--secondary:active:not(:disabled),
.surf-vault .ui-btn--ghost:active:not(:disabled){background:var(--bg-active);}
.surf-vault .ui-btn[data-loading="true"]{pointer-events:none;}

/* ---- ui/ui.css: inputs ---- */
.surf-vault .ui-input,
.surf-vault .ui-textarea,
.surf-vault .ui-select{width:100%;height:var(--ctl-h);padding:0 12px;background:var(--bg-app);border:1px solid var(--border-interactive);border-radius:var(--r-control);font-size:var(--text-sm);color:var(--text-primary);transition:border-color var(--motion-fast) var(--ease-out);}
.surf-vault .ui-textarea{height:auto;min-height:84px;padding:10px 12px;line-height:1.5;resize:vertical;}
.surf-vault .ui-input:hover:not(:disabled),
.surf-vault .ui-textarea:hover:not(:disabled),
.surf-vault .ui-select:hover:not(:disabled){border-color:var(--border-strong);}
.surf-vault .ui-input:focus-visible,
.surf-vault .ui-textarea:focus-visible,
.surf-vault .ui-select:focus-visible{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent);border-radius:var(--r-control);}
.surf-vault .ui-input:disabled,
.surf-vault .ui-textarea:disabled,
.surf-vault .ui-select:disabled{background:var(--bg-well);color:var(--n9);cursor:not-allowed;}
.surf-vault .ui-input[aria-invalid="true"],
.surf-vault .ui-textarea[aria-invalid="true"]{border-color:var(--danger-border);}
.surf-vault .ui-input[aria-invalid="true"]:focus-visible,
.surf-vault .ui-textarea[aria-invalid="true"]:focus-visible{border-color:var(--danger-solid);box-shadow:0 0 0 3px color-mix(in oklab, var(--danger-solid) 20%, transparent);}
.surf-vault .ui-field{display:flex;flex-direction:column;gap:6px;}
.surf-vault .ui-field__label{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary);}
.surf-vault .ui-field__hint{font-size:12px;color:var(--text-secondary);}
.surf-vault .ui-field__error{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--danger-text);}

/* ---- ui/ui.css: checkbox ---- */
.surf-vault .ui-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);cursor:pointer;padding:4px 0;}
.surf-vault .ui-check input{appearance:none;width:16px;height:16px;margin:0;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-app);cursor:pointer;display:grid;place-content:center;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);}
.surf-vault .ui-check input:checked{background:var(--accent-solid);border-color:var(--accent-solid);}
.surf-vault .ui-check input:checked::before{content:"";width:9px;height:9px;clip-path:polygon(13% 52%, 5% 65%, 40% 92%, 95% 20%, 84% 10%, 38% 71%);background:var(--n1);}
.surf-vault .ui-check input:disabled{border-color:var(--border-subtle);background:var(--bg-well);cursor:not-allowed;}

/* ---- ui/ui.css: status badges ---- */
.surf-vault .ui-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;border:1px solid var(--border-subtle);background:var(--bg-well);color:var(--text-secondary);font-size:11px;font-weight:var(--w-semibold);line-height:1;white-space:nowrap;}
.surf-vault .ui-badge--ok{color:var(--ok-text);background:var(--ok-wash);border-color:var(--ok-border);}
.surf-vault .ui-badge--warn{color:var(--warn-text);background:var(--warn-wash);border-color:var(--warn-border);}
.surf-vault .ui-badge--danger{color:var(--danger-text);background:var(--danger-wash);border-color:var(--danger-border);}
.surf-vault .ui-badge--info{color:var(--info-text);background:var(--info-wash);border-color:var(--info-border);}
.surf-vault .ui-badge--record{color:var(--accent-link);background:var(--accent-tint);border-color:var(--accent-border);}

/* ---- ui/ui.css: record square ---- */
.surf-vault .ui-record-square{display:inline-block;width:10px;height:10px;background:var(--accent-solid);flex:none;}
.surf-vault .ui-record-square--sm{width:8px;height:8px;}
@media (prefers-reduced-motion: no-preference) {
  .surf-vault .ui-record-square[data-land="true"]{animation:ui-record-land var(--motion-base) var(--ease-out) both;}
}
@keyframes ui-record-land { from { transform: scale(0.8); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }

/* ---- ui/ui.css: spinner ---- */
.surf-vault .ui-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border-subtle);border-top-color:var(--n9);border-radius:50%;animation:ui-spin 800ms linear infinite;flex:none;}
.surf-vault .ui-spinner--lg{width:20px;height:20px;}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---- ui/ui.css: ledger text ---- */
.surf-vault .ui-ledger{font-family:var(--font-mono);font-size:0.9em;font-feature-settings:"zero" on, "liga" 0, "calt" 0;letter-spacing:0.01em;}
/* ==== /SURFACE VAULT ==== */

/* index.css: the reading face and the screen-reader-only class the surfaces use */
.surf-body .serif-reading{font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:var(--text-md);line-height:1.65;max-width:68ch}
.surf-body .sr-only,.surf-body .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.surf-body{font-family:var(--font-ui);font-size:var(--text-base);color:var(--text-primary)}

/* ==== SURFACE CONV: verbatim app rules, prefixed .surf-conv (extracted from apps/web/src) ==== */
.surf-conv .conv-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

.surf-conv .conv-panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

/* ---- The list pane ------------------------------------------------------- */
.surf-conv .conv-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-app);
}
.surf-conv .conv-list-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 16px 8px;
}
.surf-conv .conv-list-title,
.surf-conv .contacts-title {
  font-size: var(--text-md);
  font-weight: var(--w-strong);
  letter-spacing: var(--track-heading);
  margin-right: auto;
}

/* The feature family's quiet control — the ui secondary button recipe, kept
   as its own class because the busy/pressed contracts ride on it. */
.surf-conv .conv-head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-control);
  border: 1px solid var(--border-interactive);
  background: var(--bg-app);
  font-size: 12px;
  font-weight: var(--w-medium);
  color: var(--text-primary);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.surf-conv .conv-head-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.surf-conv .conv-head-btn:active:not(:disabled) {
  background: var(--bg-active);
  transition-duration: var(--motion-instant);
}
.surf-conv .conv-head-btn:disabled {
  color: var(--n9);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}
.surf-conv .conv-head-btn[aria-pressed="true"] {
  background: var(--bg-well);
  border-color: var(--border-strong);
}

/* Search + matter filter, one wrapping row. */
.surf-conv .conv-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 10px;
}
.surf-conv .conv-filter-input {
  flex: 1;
  min-width: 11rem;
  height: 30px;
  padding: 0 10px;
  background: var(--bg-app);
  border: 1px solid var(--border-interactive);
  border-radius: var(--r-control);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.surf-conv .conv-filter-input:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.surf-conv .conv-matter-filter {
  position: relative;
  flex: none;
}

.surf-conv .conv-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 12px;
}

.surf-conv .conv-section-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 10px 16px 2px;
}
.surf-conv .conv-section-head.is-quiet {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}
.surf-conv .conv-section-count {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.surf-conv .conv-rows,
.surf-conv .contact-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.surf-conv .conv-row-item {
  animation: conv-enter var(--motion-base) var(--ease-out) both;
}
.surf-conv .conv-row {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  padding: 9px 16px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--motion-fast) var(--ease-out);
}
.surf-conv .conv-row:hover {
  background: var(--bg-surface);
}
/* Selection is a sanctioned teal use. */
.surf-conv .conv-row.is-selected,
.surf-conv .conv-row.is-selected:hover {
  background: var(--accent-tint);
}
.surf-conv .conv-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.surf-conv .conv-row-who {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.surf-conv .conv-row-who.is-unknown {
  color: var(--text-secondary);
}
.surf-conv .conv-row.is-unread .conv-row-who {
  font-weight: var(--w-strong);
}
/* Timestamps are record data: the ledger voice, digits aligned. */
.surf-conv .conv-row-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 11px;
  color: var(--text-tertiary);
  flex: none;
}
/* Unread count — tabular, ink on paper; never colour-only (the row carries a
   visually-hidden sentence too). */
.surf-conv .conv-row-unread {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 10.5px;
  font-weight: var(--w-strong);
  line-height: 1;
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  padding: 3px 5px;
  flex: none;
}
.surf-conv .conv-row-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 1px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
}
.surf-conv .conv-row.is-unread .conv-row-sub {
  font-weight: var(--w-semibold);
}
.surf-conv .conv-row-matter {
  font-size: 11px;
  font-weight: var(--w-regular);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
  max-width: 45%;
}
.surf-conv .conv-row-preview {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- The thread pane ----------------------------------------------------- */
.surf-conv .conv-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-app);
}

.surf-conv .conv-thread-head {
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.surf-conv .conv-thread-subject {
  font-size: var(--text-md);
  font-weight: var(--w-strong);
  letter-spacing: var(--track-heading);
  /* A stranger names the subject: an unbroken run must wrap, not overflow. */
  overflow-wrap: anywhere;
}
.surf-conv .conv-thread-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.surf-conv .conv-thread-who {
  font-weight: var(--w-semibold);
  color: var(--text-primary);
}
.surf-conv .conv-thread-matter {
  color: var(--text-secondary);
}
.surf-conv .conv-thread-count {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-tertiary);
}
.surf-conv .conv-thread-assign,
.surf-conv .conv-thread-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Messages: sides, not bubbles. Received left, sent right. ------------ */
.surf-conv .conv-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Content-bound row with a floor under short messages and a reading cap.
   The neutral rail hugs the outside edge of whichever side the row sits on. */
.surf-conv .conv-msg {
  width: fit-content;
  min-width: min(16rem, 100%);
  max-width: min(48rem, 82%);
  padding: 2px 0 2px 14px;
  border-left: 1px solid var(--border-strong);
}
.surf-conv .conv-msg.is-out {
  margin-left: auto;
  border-left: none;
  border-right: 1px solid var(--border-strong);
  padding: 2px 14px 2px 0;
}
.surf-conv .conv-msg.is-in {
  border-left-color: var(--border-subtle);
}

.surf-conv .conv-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.surf-conv .conv-msg-from {
  font-weight: var(--w-semibold);
  color: var(--text-primary);
  /* An address is the sender's own string: it wraps rather than overflows
     the phone-width row (the .conv-msg-tolist rule, for the same reason). */
  overflow-wrap: anywhere;
}
.surf-conv .conv-msg-to {
  color: var(--text-secondary);
}
/* The message stamp is record data: ledger voice. */
.surf-conv .conv-msg-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Correspondence reads in the serif register — the reading pane's sanctioned
   home. pre-wrap keeps the sender's own line breaks. */
.surf-conv .conv-msg-text {
  margin: 0;
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 13;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.surf-conv .conv-msg-body {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 13;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- The proposed-reply card (J45) — drafted, not yet on the record.
   Doubled class outranks .conv-msg.is-out's rail and padding. ------------- */
.surf-conv .conv-msg.conv-draft {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--bg-surface);
  padding: 12px 14px;
}
.surf-conv .conv-draft-label {
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.surf-conv .conv-draft-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ---- Shared utilities ---------------------------------------------------- */
/* Kept for this cluster (and the pickers embedded in it): screen-reader-only
   text. Mirrors .sr-only in src/index.css. */
.surf-conv .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One entrance for rows and arrivals: fade + 3px rise, no overshoot. */
@keyframes conv-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- The phone: one pane at a time (spec §4.5) --------------------------- */
@media (max-width: 760px) {
  .surf-conv .conv-panes {
    display: block;
    min-height: 0;
    overflow: hidden;
  }
  .surf-conv .conv-panes[data-pane="list"] .conv-thread {
    display: none;
  }
  .surf-conv .conv-panes[data-pane="thread"] .conv-list {
    display: none;
  }
  .surf-conv .conv-list {
    height: 100%;
    border-right: none;
  }
  /* The thread column takes the scroll so the composer's sticky foot works. */
  .surf-conv .conv-thread {
    overflow-y: auto;
    height: 100%;
  }
  .surf-conv .conv-msgs {
    overflow: visible;
    flex: none;
  }
  .surf-conv .conv-msg {
    max-width: 100%;
  }
  .surf-conv .conv-thread-head,
  .surf-conv .conv-msgs,
  .surf-conv .reply-composer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- Reduced motion: entrances collapse to presence ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .surf-conv .conv-row-item {
    animation: none;
  }
}

/* ---- Buttons (src/ui/ui.css) --------------------------------------------- */
.surf-conv .ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--ctl-h);
  padding: 0 14px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: none;
  transition: background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}
.surf-conv .ui-btn:disabled {
  cursor: not-allowed;
}

/* Primary wears ink — the teal stays scarce. */
.surf-conv .ui-btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.surf-conv .ui-btn--primary:hover:not(:disabled) {
  background: var(--ink-hover);
}
.surf-conv .ui-btn--primary:disabled {
  background: var(--n5);
  color: var(--n9);
}

.surf-conv .ui-btn--secondary {
  background: var(--bg-app);
  border-color: var(--border-interactive);
  color: var(--text-primary);
}
.surf-conv .ui-btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.surf-conv .ui-btn--secondary:disabled {
  color: var(--n9);
  border-color: var(--border-subtle);
}

.surf-conv .ui-btn--ghost {
  color: var(--text-secondary);
}
.surf-conv .ui-btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.surf-conv .ui-btn--ghost:disabled {
  color: var(--n9);
}

.surf-conv .ui-btn--sm {
  height: var(--ctl-h-sm);
  padding: 0 11px;
  font-size: 13px;
}

/* Pressed state: instant, no scale — precision, not bounce. */
.surf-conv .ui-btn:active:not(:disabled) {
  transition-duration: var(--motion-instant);
}
.surf-conv .ui-btn--secondary:active:not(:disabled),
.surf-conv .ui-btn--ghost:active:not(:disabled) {
  background: var(--bg-active);
}
/* ==== /SURFACE CONV ==== */
/* the app's views sit inside .shell-main's own inset; the dialog gives them the same room */
.surf-vault{padding:16px 24px 24px}

/* interaction states the extractors skipped (conversations-surface.css, vault-surface.css, verbatim) */
.surf-conv .conv-refresh-spin{animation:conv-spin 800ms linear infinite;flex:none}
@keyframes conv-spin{to{transform:rotate(360deg)}}
.surf-conv .conv-no-match{padding:16px;font-size:var(--text-sm);color:var(--text-secondary)}
.surf-conv .conv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 24px;text-align:center}
.surf-conv .conv-thread>.conv-empty{flex:1}
.surf-conv .conv-empty p{margin:0;font-size:var(--text-sm);color:var(--text-secondary);max-width:44ch}
.surf-conv .conv-hint{margin:0;padding:14px 24px;font-size:var(--text-sm);color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.surf-conv .conv-draft-edit{width:100%;padding:8px 10px;background:var(--bg-app);border:1px solid var(--border-interactive);border-radius:var(--r-control);font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:16px;line-height:1.6;color:var(--text-primary);resize:vertical;min-height:6rem}
.surf-vault .vault-undo{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 32px));padding:12px 14px;overflow:hidden;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:var(--r-card);box-shadow:var(--shadow-floating);font-size:var(--text-sm)}
:root[data-theme="dark"] .surf-vault .vault-undo{background:var(--n3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .surf-vault .vault-undo{background:var(--n3)}}
.surf-vault .vault-undo-msg{color:var(--text-primary)}
.surf-vault .vault-undo-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--border-strong);transform-origin:left;animation-name:vault-undo-drain;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes vault-undo-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.surf-vault .vault-doc-row.is-open{background:var(--accent-tint)}
@media (prefers-reduced-motion:reduce){.surf-conv .conv-refresh-spin,.surf-vault .vault-undo-bar{animation:none}}
.surf-conv .conv-msg.conv-draft.is-editing{max-width:100%;width:100%;margin-left:0}
.surf-conv .conv-msg.conv-draft.is-editing .conv-draft-edit{min-height:16rem;box-sizing:border-box}
.surf-conv .reply-composer{position:sticky;bottom:0;border-top:1px solid var(--border-subtle);background:var(--bg-app);padding:12px 24px 14px;display:flex;flex-direction:column;gap:8px;margin:0}
.surf-conv .reply-text{width:100%;box-sizing:border-box;padding:8px 10px;background:var(--bg-app);border:1px solid var(--border-interactive);border-radius:var(--r-control);font-family:var(--font-ui);font-size:var(--text-base);line-height:1.5;color:var(--text-primary);resize:none;transition:border-color var(--motion-fast) var(--ease-out)}
.surf-conv .reply-text:hover:not(:read-only){border-color:var(--border-strong)}
.surf-conv .reply-text[aria-busy="true"]{background:var(--bg-well);color:var(--text-secondary)}
.surf-conv .reply-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.surf-conv .reply-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-control);border:1px solid var(--border-interactive);background:var(--bg-app);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);line-height:1;color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.surf-conv .reply-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}
.surf-conv .reply-btn:active:not(:disabled){background:var(--bg-active);transition-duration:var(--motion-instant)}
.surf-conv .reply-btn:disabled{color:var(--n9);border-color:var(--border-subtle);cursor:not-allowed}
.surf-conv .reply-btn.is-primary{background:var(--ink);border-color:transparent;color:var(--paper)}
.surf-conv .reply-btn.is-primary:hover:not(:disabled){background:var(--ink-hover)}
.surf-conv .reply-btn.is-primary:disabled{background:var(--n5);color:var(--n9)}
.surf-conv .reply-send{margin-left:auto}
.surf-conv .reply-hint{margin:0;font-size:12px;color:var(--text-secondary)}
.surf-conv .reply-btn .reply-dots{display:inline-flex;align-items:center;gap:3px;margin-left:5px}
.surf-conv .reply-btn .reply-dots>span{width:4px;height:4px;border-radius:999px;background:currentColor;animation:conv-breathe 1.2s var(--ease-out) infinite}
.surf-conv .reply-btn .reply-dots>span:nth-child(2){animation-delay:.2s}
.surf-conv .reply-btn .reply-dots>span:nth-child(3){animation-delay:.4s}
.surf-conv .conv-msg.conv-drafting{border-style:dashed;min-width:14rem}
.surf-conv .conv-drafting-dots{display:inline-flex;gap:5px;align-items:center;height:16px}
.surf-conv .conv-drafting-dots>span{width:6px;height:6px;border-radius:999px;background:var(--text-tertiary);animation:conv-breathe 1.2s var(--ease-out) infinite}
.surf-conv .conv-drafting-dots>span:nth-child(2){animation-delay:.2s}
.surf-conv .conv-drafting-dots>span:nth-child(3){animation-delay:.4s}
@keyframes conv-breathe{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.surf-conv .reply-dots>span,.surf-conv .conv-drafting-dots>span{animation:none}}

/* agent-surface.css, verbatim: the ComposerPicker menu the Snippets button opens */
.surf-conv .composer-picker{position:relative;display:inline-flex}
.surf-conv .composer-picker .menu{position:absolute;z-index:50;min-width:230px;max-width:min(340px,90vw);padding:4px;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:var(--r-floating);box-shadow:var(--shadow-floating)}
:root[data-theme="dark"] .surf-conv .composer-picker .menu{background:var(--n3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .surf-conv .composer-picker .menu{background:var(--n3)}}
.surf-conv .composer-picker .menu-up{bottom:calc(100% + 6px);left:0}
.surf-conv .composer-picker .menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 9px;border:none;border-radius:var(--r-control);background:none;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-primary);text-align:left;cursor:pointer}
.surf-conv .composer-picker .menu-item:hover,.surf-conv .composer-picker .menu-item.is-active{background:var(--bg-hover)}
.surf-conv .menu-item-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.surf-conv .menu-item-name{font-weight:var(--w-medium);line-height:1.35}
.surf-conv .menu-item-desc{font-size:12px;color:var(--text-tertiary);line-height:1.35}
.surf-conv .composer-picker .menu-filtered{display:flex;flex-direction:column;min-width:260px}
.surf-conv .composer-picker-search{flex:none;padding:4px 4px 6px;border-bottom:1px solid var(--hairline);margin-bottom:4px}
.surf-conv .composer-picker-search-input{width:100%;box-sizing:border-box;height:28px;padding:0 9px;background:var(--bg-app);border:1px solid var(--border-interactive);border-radius:var(--r-control);font-family:var(--font-ui);font-size:12.5px;color:var(--text-primary)}
.surf-conv .composer-picker-list{min-height:0;overflow-y:auto;max-height:16rem}
.surf-conv .composer-picker .menu-filtered .menu-item{padding:5px 9px}
.surf-conv .composer-picker .menu-filtered .menu-item-text{flex-direction:row;align-items:baseline;gap:8px}
.surf-conv .composer-picker .menu-filtered .menu-item-name{white-space:nowrap}
.surf-conv .composer-picker .menu-filtered .menu-item-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.surf-conv .composer-picker-empty{margin:0;padding:10px;font-size:12.5px;color:var(--text-tertiary)}
.surf-conv .reply-actions .composer-picker>.model-picker{display:none}

/* ============================================================================
   TWO PAGES (founder, 2026-09-08, after jude.law): the landing is the product
   in five cards, each a bordered card with the surface as its image area and
   the title and copy beneath, two wide then three; the trust story moved to
   why.html, which the bottom of the landing hands over to.
   ========================================================================== */
.feat-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.feat{grid-column:span 2;gap:0;border:1px solid var(--border-subtle);border-radius:16px;background:var(--bg-app);overflow:hidden}
.feat-wide{grid-column:span 3}
.feat .frame{margin:14px 14px 0;border-radius:12px;border:1px solid var(--border-subtle)}
.feat-text{padding:18px 32px 22px}
.feat-text .feat-h{font-size:1.1rem;font-weight:var(--w-strong);letter-spacing:var(--track-heading);margin:0 0 .45rem}
.feat-text .feat-p{font-size:.95rem;line-height:1.6;color:var(--text-secondary)}
.feat-grid-one{grid-template-columns:1fr}
.feat-grid-one .feat-wide{grid-column:auto}
.refuses .op-split{align-items:center}
.cta-final-actions{justify-content:center;margin-top:2rem}
.why-head{padding-top:clamp(8rem,14vw,11rem)}
.why-head .section-h{max-width:16ch}
@media (max-width:980px){.feat,.feat-wide{grid-column:span 6}}
@media (max-width:640px){.feat-grid{gap:14px}.feat-text{padding:14px 16px 18px}}
/* the diary card: the calendar week drawn straight into the card (calendar.js), under the calendar's own scope class */
.feat .frame-win.cal-modal{position:static;height:100%;min-height:0;max-width:none;opacity:1;transform:none;border:none;border-radius:0;box-shadow:none;overflow:hidden;transition:none;display:flex;flex-direction:column;padding:0}
.feat .cal-preview .cal-week-pane{flex:1;min-height:0;animation:none}
.feat .cal-preview .cal-week{flex:1;min-height:0;height:100%}
.feat .cal-preview .cal-wk-grid{--cal-wk-hour-h:4rem;--cal-wk-rail:3.4rem}
.feat-6 .frame{--frame-tint:color-mix(in oklch,var(--accent-solid) 7%,var(--bg-well))}
.feat-7 .frame{--frame-tint:color-mix(in oklch,var(--accent-solid) 9%,var(--bg-well))}
.feat-7 .frame.op-frame{height:22rem}

/* ============================================================================
   REVIEW PASS, CSS (2026-09-08): the phone hero, a tablet state for the cards,
   a phone menu, the week grid on a phone, the memo on a phone, the channels
   card, the card lift in dark, the proof scrim, the clock at three digits.
   ========================================================================== */
@media (max-width:520px){.hero{padding:5.5rem 0 3rem}.hero-sub{max-width:40ch}}
@media (max-width:980px) and (min-width:641px){
  .feat-grid:not(.feat-grid-one){grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-grid:not(.feat-grid-one) .feat,.feat-grid:not(.feat-grid-one) .feat-wide{grid-column:span 1}
  .feat-grid:not(.feat-grid-one) .feat:last-child{grid-column:span 2}
}
@media (max-width:640px){.feat .frame{height:17rem}.feat .frame::after{height:4rem}}
/* the phone menu: a disclosure in the nav, shown where the links are hidden */
.nav-menu{display:none;position:relative;margin-left:auto}
.nav-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 .4rem;font-size:.92rem;font-weight:500;color:var(--text-secondary);cursor:pointer}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px;border-radius:6px}
.nav-menu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:12rem;padding:6px;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:var(--r-floating);box-shadow:var(--shadow-floating);display:flex;flex-direction:column;z-index:60}
.nav-menu-list a{display:block;padding:10px 12px;border-radius:var(--r-control);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--text-primary)}
.nav-menu-list a:hover{background:var(--bg-hover)}
@media (max-width:860px){.nav-menu{display:block}}
/* the week grid keeps its columns and scrolls sideways on a phone; the diary card shrinks its scale instead */
@media (max-width:640px){
  .cal-modal .cal-wk-grid{min-width:44rem}
  .feat .cal-preview .cal-wk-grid{--cal-wk-rail:2.6rem;--cal-wk-hour-h:3.2rem;min-width:0}
  .feat .cal-preview .cal-wk-daynum{min-width:0;height:20px;font-size:12px}
  .hero-proof.is-artifact{padding:16px 16px 14px}
  .hero-proof .citation>summary{flex-wrap:wrap;row-gap:6px}
  .hero-proof .verify{order:3;margin-left:32px}
  .hero-proof .answer-actions{flex-direction:column;align-items:stretch}
  .hero-proof .ask-btn{height:auto;min-height:32px;padding:7px 12px;justify-content:center;text-align:center}
  .surf-conv .reply-composer{padding:12px 16px 14px}
  .timer-clock{flex-wrap:wrap;justify-content:center;gap:.2rem .5rem}.tsep{display:none}
}
/* the conversations panes split by the dialog's width, not the window's */
@media (max-width:900px){.surf-conv .conv-panes{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) minmax(0,1fr)}.surf-conv .conv-panes .conv-list{border-right:none;border-bottom:1px solid var(--border-subtle)}}
/* the channels card shows four connectors, two by two, above the fold */
@media (min-width:641px){.feat-7 .frame-win .intg-grid{grid-template-columns:1fr 1fr}.feat-7 .frame-win .intg-blurb{-webkit-line-clamp:1}}
/* the card lifts above the well in dark, as the dialogs do */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .feat{background:var(--n4)}:root:not([data-theme="light"]) .proof-backdrop{background:rgba(0,0,0,.65)}}
:root[data-theme="dark"] .feat{background:var(--n4)}
:root[data-theme="dark"] .proof-backdrop{background:rgba(0,0,0,.65)}
/* the hero memo is a scroller: a fold says so */

/* THE FRAMES ARE SCREENSHOTS (founder, 2026-09-08): nothing inside a card's
   window responds until Click me opens the surface. The window is inert in
   the markup (no focus, no keyboard) and ignores the pointer here; the diary
   card is a still of the week at 08:00 with no scrollbar and no all-day strip. */
.feat .frame-win,.feat .frame-win *{pointer-events:none!important}
.feat .frame-win{user-select:none;-webkit-user-select:none}
.feat .cal-preview .cal-week{overflow:hidden;scrollbar-width:none}
.feat .cal-preview .cal-week::-webkit-scrollbar{display:none}
.feat .cal-preview .cal-wk-allday-label,.feat .cal-preview .cal-wk-allday-cell{display:none}
.feat .cal-preview .cal-wk-grid{--cal-wk-hour-h:4.6rem}
.feat-7 .frame .frame-cta{display:inline-flex}

/* ============================================================================
   THE CARD IMAGES ARE BUILT, NOT CAPTURED (founder, 2026-09-08, after
   jude.law): a tinted ground, one product card offset into it and bleeding
   off an edge, a few large legible elements, nothing interactive. Type here
   is the app's, one size up, because a still is read from further away.
   ========================================================================== */
.frame-shot{padding:0;overflow:hidden}
.frame-shot::after{display:none}
.feat .frame-win.shot{position:absolute;inset:0;min-height:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;overflow:hidden;display:block}
.shot-card{position:absolute;left:9%;top:12%;width:108%;padding:18px 20px;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:var(--shadow-floating);font-family:var(--font-ui);font-size:15px;line-height:1.45;color:var(--text-primary)}
.shot-card p{margin:0}
.shot-kind{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--text-tertiary);margin-bottom:10px!important}
.shot-label{font-size:11.5px;font-weight:var(--w-semibold);letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px!important}
.shot-serif{font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:16.5px;line-height:1.55}
.shot-m{font-family:var(--font-mono);font-size:11.5px;color:var(--text-tertiary);font-weight:400}
/* the thread */
.shot-conv{left:8%;top:10%}
.shot-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.shot-ava{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg-well);border:1px solid var(--border-subtle);font-size:12px;font-weight:var(--w-semibold);color:var(--text-secondary)}
.shot-ava.is-ic{color:var(--accent-link)}
.shot-body{min-width:0}
.shot-t{font-weight:var(--w-semibold);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.shot-s{color:var(--text-secondary);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-draft{margin-top:12px;padding:12px 14px;border:1px dashed var(--border-strong);border-radius:var(--r-card);background:var(--bg-surface)}
.shot-acts{display:flex;gap:8px;margin-top:10px}
.shot-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-control);border:1px solid var(--border-interactive);background:var(--bg-app);font-size:13px;font-weight:var(--w-medium)}
.shot-btn.is-primary{background:var(--ink);color:var(--paper);border-color:transparent}
/* the memo */
.shot-memo{left:8%;top:9%}
.shot-ref{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;margin:0 2px;border:1px solid var(--ok-border);border-radius:4px;background:var(--ok-wash);color:var(--ok-text);font-family:var(--font-mono);font-size:11px;vertical-align:2px}
.shot-cite{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--hairline);margin-top:2px}
.shot-cite:first-of-type{margin-top:12px}
.shot-num{flex:none;width:1.4rem;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);text-align:right}
.shot-cite-name{flex:1;min-width:0;font-family:var(--font-mono);font-size:14px;font-weight:var(--w-semibold);white-space:nowrap}
.shot-verify{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:5px;border:1px solid var(--ok-border);background:var(--ok-wash);color:var(--ok-text);font-size:11.5px;font-weight:var(--w-semibold);white-space:nowrap}
.shot-verify svg{width:13px;height:13px}
.shot-q{font-size:19px;font-weight:var(--w-strong);letter-spacing:var(--track-heading);line-height:1.3;margin-bottom:12px!important}
.shot-refusal{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:12px;background:var(--danger-wash);border:1px solid var(--danger-border);border-radius:var(--r-card);color:var(--danger-text)}
.shot-refusal svg{flex:none;margin-top:2px}
.shot-refusal p{color:var(--text-primary);font-size:14.5px}
/* the locker */
.shot-vault{left:9%;top:10%}
.shot-doc{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline);color:var(--text-secondary)}
.shot-doc svg{flex:none}
.shot-doc-name{font-weight:var(--w-semibold);color:var(--text-primary);white-space:nowrap}
.shot-chip{flex:none;padding:1px 7px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-well);font-size:11.5px;font-weight:var(--w-semibold);color:var(--text-secondary)}
.shot-doc .shot-m{margin-left:auto;padding-right:8px}
.shot-drop{margin-top:12px;padding:12px;border:1px dashed var(--border-strong);border-radius:var(--r-card);text-align:center;font-size:13px;color:var(--text-secondary)}
/* the diary */
.shot-cal{left:7%;top:10%;padding:0;width:112%}
.shot-cal-head{display:grid;grid-template-columns:3.2rem repeat(3,1fr);border-bottom:1px solid var(--border-subtle)}
.shot-cal-head>span{padding:10px 6px;text-align:center;font-size:11.5px;font-weight:var(--w-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);border-left:1px solid var(--hairline);display:flex;flex-direction:column;gap:3px;align-items:center}
.shot-cal-head>span b{font-size:17px;font-weight:var(--w-medium);color:var(--text-secondary);letter-spacing:0;text-transform:none}
.shot-cal-head>span.is-today b{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-active);color:var(--text-primary);font-weight:var(--w-strong)}
.shot-cal-head>.shot-cal-rail{border-left:0}
.shot-cal-grid{display:grid;grid-template-columns:3.2rem repeat(3,1fr);height:15.5rem;background-image:repeating-linear-gradient(to bottom,var(--hairline) 0 1px,transparent 1px 20%)}
.shot-cal-grid .shot-cal-rail{display:flex;flex-direction:column;justify-content:space-between;padding:0 6px 0 0;text-align:right;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);border-right:1px solid var(--border-subtle);transform:translateY(-.55em)}
.shot-cal-col{position:relative;border-left:1px solid var(--hairline)}
.shot-cal-col.is-today{background:color-mix(in oklch,var(--accent-solid) 5%,transparent)}
.shot-evt{position:absolute;left:4px;right:4px;display:flex;flex-direction:column;gap:2px;padding:5px 8px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:5px;background:var(--bg-well);font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.shot-evt b{font-family:var(--font-ui);font-size:12.5px;font-weight:var(--w-medium);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-now{position:absolute;left:0;right:0;height:2px;background:var(--text-primary)}
.shot-now::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:999px;background:var(--text-primary)}
.shot-allday{position:absolute;left:4px;right:4px;top:6px;padding:4px 8px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-well);font-size:12px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the channels: tiles on the ground, as jude.law's flags */
.shot-tiles{position:absolute;left:10%;top:12%;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.shot-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;background:var(--bg-app);border:1px solid var(--border-subtle);border-radius:14px;box-shadow:var(--shadow-floating)}
.shot-tile-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-link)}
.shot-tile-name{font-size:15px;font-weight:var(--w-semibold)}
.shot-tile-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;border:1px solid var(--border-subtle);background:var(--bg-well);color:var(--text-secondary);font-size:11px;font-weight:var(--w-semibold)}
.shot-tile-badge.is-on{color:var(--ok-text);background:var(--ok-wash);border-color:var(--ok-border)}
@media (max-width:640px){.shot-card{font-size:14px;padding:14px 16px}.shot-serif{font-size:15px}.shot-cal-grid{height:13rem}}

/* the Click me sits on the ground at the foot, left, where the still leaves room; a soft scrim keeps it legible where a tall still runs under it */
.frame-shot .frame-cta{left:1.1rem;bottom:1rem;transform:none;box-shadow:0 2px 10px -2px rgba(0,0,0,.45),0 0 0 6px color-mix(in oklch,var(--frame-tint) 70%,transparent)}

/* ============================================================================
   STILLS THAT FIT (founder, 2026-09-08): the picture sits inside the frame with
   even margins and no text cut mid-word; Click me lives under the copy, not
   over the picture; the diary is the day's agenda, which reads at any width.
   ========================================================================== */
.shot-card,.shot-conv,.shot-memo,.shot-vault,.shot-cal,.shot-tiles{left:20px;right:20px;top:22px;width:auto}
.shot-tiles{gap:12px}
.shot-tile{padding:14px}
.shot-s{white-space:normal;overflow:visible;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shot-cite-name{white-space:normal}
.shot-verify{font-size:11px;padding:0 7px}
.shot-doc{gap:8px}
.shot-doc .shot-m{padding-right:0}
.shot-drop{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-agenda{padding:0}
.shot-agenda-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
.shot-agenda-day{font-size:15px;font-weight:var(--w-strong);letter-spacing:var(--track-heading)}
.shot-agenda-row{display:flex;gap:12px;align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--hairline)}
.shot-agenda-row:last-child{border-bottom:0}
.shot-agenda-time{flex:none;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.shot-agenda-row .shot-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.shot-agenda-row b{font-size:14px;font-weight:var(--w-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-agenda-row span:not(.shot-agenda-time){font-size:12px;color:var(--text-tertiary)}
.shot-agenda-now{position:relative;height:2px;margin:0 0 0 0;background:var(--text-primary)}
.shot-agenda-now::before{content:"";position:absolute;left:-1px;top:-2px;width:6px;height:6px;border-radius:999px;background:var(--text-primary)}
/* Click me under the copy */
.feat-cta{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;margin-top:14px;border:1px solid transparent;border-radius:var(--r-control);background:var(--ink);color:var(--paper);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);cursor:pointer}
.feat-cta:hover{background:var(--ink-hover)}
.feat-cta:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}
.feat-text{padding-bottom:22px}

/* the thread still ends inside its frame: tighter rows, one-line draft */
.shot-conv{top:18px}
.shot-conv .shot-row{padding:8px 0}
.shot-conv .shot-s{-webkit-line-clamp:1}
.shot-conv .shot-draft{margin-top:10px;padding:10px 12px}
.shot-conv .shot-serif{font-size:15.5px;line-height:1.45}
.shot-conv .shot-acts{margin-top:8px}
/* the memo and locker stills end a few px short of the frame, border included */
.shot-memo,.shot-vault{top:14px;padding-bottom:12px}

/* the locker and thread stills, tidied (founder screenshots, 2026-09-09): a name
   truncates before a size wraps; the drop hint fits; a thread row is one line */
.shot-doc-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.shot-doc .shot-chip{flex:none}
.shot-doc .shot-m{flex:none;white-space:nowrap;margin-left:auto}
.shot-vault .shot-doc{padding:11px 0}
.shot-conv .shot-body{flex:1;min-width:0}
.shot-conv .shot-s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-conv .shot-t .shot-m{white-space:nowrap}

/* the locker still: name and kind on one line, size beneath, so nothing truncates at card width */
.shot-doc{flex-wrap:wrap;row-gap:2px;padding:10px 0}
.shot-doc-name{flex:1 1 auto;white-space:nowrap;overflow:visible;text-overflow:clip}
.shot-doc .shot-m{flex:0 0 100%;margin-left:0;padding-left:26px}
/* the diary still: titles wrap to two lines rather than truncate */
.shot-agenda-row b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.shot-agenda-row{align-items:flex-start}
.shot-agenda-time{padding-top:2px}
/* the memo is a scroller on a short viewport: the cue is its own foot rule, not a
   wash over the last row (founder, 2026-09-09: "the bottom is blurred for some reason") */
.hero .hero-proof.is-artifact{scrollbar-width:thin;scrollbar-color:var(--n7) transparent}

/* ============================================================================
   WHY, IN THE LANDING'S IDIOM (founder, 2026-09-09: "the first page we land on
   feels quality, the why.html is missing that"). Chapters after
   jude.law/features: a centred headline, a two-line lede, then a row of cards
   with built stills. The eyebrow-per-section scaffold is gone; the chapter
   headings carry the rhythm instead.
   ========================================================================== */
.chapter{padding:clamp(4.5rem,9vw,8rem) 0}
.chapter-head{max-width:46rem;margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center}
.chapter-head .section-h{max-width:none;margin:0 auto 1rem}
.chapter-head .section-lede{margin:0 auto}
.chapter-how{background:var(--bg-app)}
.feat-step{margin:0 0 .3rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-link);font-weight:600}
/* the why hero: centred, with the fabricated citation as its punch */
.why-head{text-align:center}
.why-head .section-h{max-width:none;margin:0 auto 1.2rem}
.why-head .section-lede{max-width:52rem;margin:0 auto}
.why-head .halluc{max-width:40rem;margin:clamp(2.2rem,4.5vw,3.2rem) auto 0;text-align:left}
.why-foot{max-width:34rem;margin:clamp(1.8rem,3.5vw,2.6rem) auto 0;font-family:var(--font-serif);font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.5;color:var(--text-primary)}
.why-foot em{font-style:italic;color:var(--accent-link)}
/* the proof chapter reads as a closing claim, centred like the rest */
.proof .wrap{text-align:center}
.proof .section-h,.proof .section-lede,.proof-measure{margin-left:auto;margin-right:auto}
/* ---- the stills these chapters need ---- */
.shot-proof-title{font-family:var(--font-mono);font-size:15px;font-weight:var(--w-semibold);margin:0 0 10px!important}
.shot-src{font-size:15.5px;line-height:1.6}
.shot-src mark{background:color-mix(in oklch,var(--accent-solid) 16%,transparent);color:var(--text-primary);box-shadow:inset 0 -2px 0 color-mix(in oklch,var(--accent-solid) 50%,transparent)}
.shot-verify-line{display:flex;align-items:center;gap:10px;margin-top:12px!important;flex-wrap:wrap}
.shot-steps{padding:16px 18px}
.shot-src-row{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--hairline);color:var(--text-secondary)}
.shot-src-row:last-child{border-bottom:0}
.shot-src-row svg{flex:none}
.shot-src-name{flex:1;min-width:0;font-family:var(--font-mono);font-size:13.5px;font-weight:var(--w-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-claim{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hairline)}
.shot-claim:last-of-type{border-bottom:0}
.shot-claim-text{flex:1;min-width:0;font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:15px;line-height:1.4}
.shot-verify.is-warn{color:var(--warn-text);background:var(--warn-wash);border-color:var(--warn-border)}
.shot-cite-tag{flex:none;padding:2px 8px;border:1px solid var(--ok-border);border-radius:5px;background:var(--ok-wash);font-family:var(--font-mono);font-size:11.5px;font-weight:var(--w-semibold);color:var(--ok-text)}
.shot-export{margin-top:14px!important;padding:8px 14px;border-radius:var(--r-control);background:var(--ink);color:var(--paper);font-size:13px;font-weight:var(--w-medium);text-align:center}
.kind-memo{--frame-tint:var(--accent-tint)}
.kind-proof{--frame-tint:color-mix(in oklch,var(--accent-solid) 7%,var(--bg-well))}
.kind-refusal{--frame-tint:color-mix(in oklch,var(--danger-text) 9%,var(--bg-well))}
.kind-retrieve{--frame-tint:color-mix(in oklch,var(--accent-solid) 6%,var(--bg-surface))}
.kind-verify{--frame-tint:color-mix(in oklch,var(--accent-solid) 9%,var(--bg-well))}
.kind-resolve{--frame-tint:color-mix(in oklch,var(--accent-solid) 12%,var(--bg-well))}

/* the why chapters' stills fit their frames: three-up cards are narrow, so the
   source names wrap and each still is trimmed to what reads at that width */
.shot-src-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.shot-steps .shot-src-row{padding:9px 0}
.shot-steps .shot-claim{padding:9px 0}
.shot-steps .shot-claim-text{font-size:14px}
.kind-retrieve .shot-card,.kind-verify .shot-card,.kind-resolve .shot-card,.kind-proof .shot-card,.kind-refusal .shot-card,.kind-memo .shot-card{top:16px}
.chapter .feat .frame{height:20rem}
.chapter .feat .frame{height:22rem}
.chapter .shot-cite{padding:8px 4px}
.chapter .shot-serif{font-size:15px;line-height:1.5}
.shot-src-name{overflow-wrap:anywhere}
/* a chapter still is centred in its ground, the way jude's image areas sit */
.chapter .shot-card{top:50%;transform:translateY(-50%)}
.chapter .shot-cite-name{font-size:13px}
/* the proof chapter's measure line is a footnote, not a full-bleed box */
.proof-measure{max-width:44rem;font-size:.92rem}
.proof .wrap{padding-bottom:0}

/* ============================================================================
   THE WHY HERO CARRIES THE ARGUMENT (founder, 2026-09-09: "this feels weak
   af"). Two columns like the landing's, the same curve behind, and the image
   is the claim written twice: general AI's invented citation struck through,
   beside the verified line with the statute's own words under it.
   ========================================================================== */
.hero-why .hero-slogan{font-size:clamp(2.2rem,4.4vw,3.9rem)}
.hero-why .hero-sub{max-width:38ch}
.hero-emph{margin:1.6rem 0 0;max-width:34ch;font-family:var(--font-serif);font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.5;color:var(--text-primary)}
.hero-emph em{font-style:italic;color:var(--accent-link)}
.compare{position:relative;z-index:2;display:flex;flex-direction:column;gap:1rem;width:100%}
.compare-half{padding:18px 20px;border-radius:var(--r-card);border:1px solid var(--border-subtle);background:var(--bg-app);box-shadow:var(--shadow-raised)}
.compare-half.is-bad{border-color:var(--danger-border);background:color-mix(in oklch,var(--danger-wash) 55%,var(--bg-app))}
.compare-half.is-good{border-color:var(--ok-border);background:color-mix(in oklch,var(--ok-wash) 32%,var(--bg-app))}
.compare-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.compare-who{font-family:var(--font-ui);font-size:.72rem;font-weight:var(--w-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.compare-tag{flex:none;padding:2px 9px;border-radius:5px;border:1px solid var(--border-subtle);background:var(--bg-well);font-family:var(--font-ui);font-size:11px;font-weight:var(--w-semibold);color:var(--text-secondary);white-space:nowrap}
.compare-tag.is-bad{color:var(--danger-text);background:var(--danger-wash);border-color:var(--danger-border)}
.compare-tag.is-good{color:var(--ok-text);background:var(--ok-wash);border-color:var(--ok-border)}
.compare-text{margin:0;font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.55;color:var(--text-primary)}
.compare-half .fake{color:var(--danger-text);text-decoration:none;transition:none}
.compare-half.struck .fake{text-decoration:line-through;text-decoration-color:var(--danger-text)}
.compare-flag{margin:.7rem 0 0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--danger-text);opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.compare-half.struck .compare-flag{opacity:1;transform:none}
.compare-src{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--hairline)}
.compare-src-head{display:flex;align-items:center;gap:10px;margin:0 0 .5rem;flex-wrap:wrap}
.compare-quote{margin:0;font-family:var(--font-serif);font-variation-settings:"opsz" 13;font-size:.95rem;line-height:1.55;color:var(--text-secondary)}
.compare .shot-ref{vertical-align:1px}
.compare .shot-verify{height:20px;font-size:11px}
@media (max-width:1180px){.hero-why .hero-inner{grid-template-columns:1fr;gap:2.6rem}.hero-why .hero-copy{align-items:flex-start}.compare{max-width:44rem}}
@media (prefers-reduced-motion:reduce){.compare-flag{transition:none}}
/* the General AI card is a .compare-half first; the old statement box's own
   measure, margins and type must not reach it */
.compare .halluc{max-width:none;width:100%;margin:0;font-size:inherit;line-height:inherit;text-align:left}
.compare .halluc::before,.compare .halluc::after{display:none}

/* ============================================================================
   THE WHY TAIL CARRIES WEIGHT (founder, 2026-09-09: "these two pages weak af").
   The proof chapter states its receipts as three tiles instead of a footnote in
   a box, and the page closes on a panel with both doors rather than one button
   in a void. Plus: the refusal reads red in the dialog, and a short surface
   sizes its own dialog instead of stranding at the top of a tall one.
   ========================================================================== */
.surf-modal.surf-memo,.surf-modal.surf-refusal{height:auto;max-height:min(88dvh,56rem)}
.surf-body .agent-refusal{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--danger-wash);border:1px solid var(--danger-border);border-radius:var(--r-card);font-size:var(--text-sm);line-height:1.55}
.surf-body .agent-refusal svg{flex:none;margin-top:2px;width:16px;height:16px}
.surf-body .agent-refusal p{margin:0;color:var(--text-primary)}
.surf-body .agent-citations-note{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
/* the receipts */
.chapter-proof{background:var(--bg-well)}
.chapter-proof .proof-badge{display:inline-flex;align-items:center;gap:8px;margin:0 auto 1.4rem;padding:.34rem .8rem;border:1px solid var(--accent-border);border-radius:999px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-link)}
.chapter-proof .proof-badge svg{width:14px;height:14px}
.receipts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.receipt{padding:26px 26px 28px;border:1px solid var(--border-subtle);border-radius:16px;background:var(--bg-app)}
.receipt-fig{margin:0 0 .9rem;font-family:var(--font-serif);font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--accent-link);font-variant-numeric:tabular-nums lining-nums}
.receipt-fig span{font-size:.5em;color:var(--text-tertiary);letter-spacing:0}
.receipt-h{margin:0 0 .5rem;font-family:var(--font-ui);font-size:1.02rem;font-weight:var(--w-strong);letter-spacing:var(--track-heading);color:var(--text-primary)}
.receipt-p{margin:0;font-family:var(--font-ui);font-size:.94rem;line-height:1.6;color:var(--text-secondary)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .receipt{background:var(--n4)}}
:root[data-theme="dark"] .receipt{background:var(--n4)}
@media (max-width:900px){.receipts{grid-template-columns:1fr}}
/* the closing panel */
.cta-final .closer{max-width:56rem;margin:0 auto;padding:clamp(2.6rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem);text-align:center;border:1px solid var(--border-subtle);border-radius:20px;background:var(--bg-app);box-shadow:var(--shadow-floating)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta-final .closer{background:var(--n3)}}
:root[data-theme="dark"] .cta-final .closer{background:var(--n3)}
.cta-final .closer .section-h{max-width:24ch;margin:0 auto 1.1rem}
.cta-final .closer .section-lede{max-width:46ch;margin:0 auto}
.closer-cta{justify-content:center;margin-top:2rem}
.closer-fine{margin:1.6rem 0 0;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
/* a dialog that sizes to its content is centred in the overlay, not pinned high */
/* every dialog is centred in the overlay, whatever its height: flex centring with
   auto margins, so a content-sized panel and a full-height one both sit true */
.cal-modal-overlay{display:flex;align-items:center;justify-content:center}
.cal-modal-overlay>.cal-modal{margin:auto}

/* ==== SURFACE DASH: verbatim app rules, prefixed .surf-dash ==== */
/* liveSurface.ts publishes these per-element at runtime (pointer position and tilt);
   the still surface never moves, so they resolve to their at-rest values here. */
.surf-dash [data-live]{--mx:50%;--my:50%;--rx:0deg;--ry:0deg}
/* ---- The page ----------------------------------------------------------- */
.surf-dash .dash-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* The tilted tiles rotate a few degrees in 3D, which pushes their corners
     past the layout box; without this the surface grows a horizontal
     scrollbar it has nothing to scroll to. */
  overflow-x: hidden;
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Full-bleed by founder direction (2026-09-02): the ledger uses the whole
   display; only the page padding holds the margins. */
.surf-dash .dash-view > * {
  width: 100%;
}

/* The ledger prints top-to-bottom: each block rises in sequence on mount.
   Caps at five steps; reduced motion collapses. */
@keyframes dash-block-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.surf-dash .dash-view > * {
  animation: dash-block-enter var(--motion-slow) var(--ease-out) backwards;
}
.surf-dash .dash-view > *:nth-child(2) { animation-delay: var(--stagger-step); }
.surf-dash .dash-view > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.surf-dash .dash-view > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.surf-dash .dash-view > *:nth-child(n + 5) { animation-delay: calc(var(--stagger-step) * 4); }

.surf-dash .dash-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.surf-dash .dash-title {
  font-size: var(--text-lg);
  font-weight: var(--w-strong);
  letter-spacing: var(--track-heading);
}
.surf-dash .dash-date {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}
.surf-dash .dash-head-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

/* ---- Liveness ----------------------------------------------------------- */
.surf-dash .dash-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.surf-dash .dash-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ok-solid);
}
.surf-dash .dash-live.is-working {
  color: var(--text-secondary);
}
@media (prefers-reduced-motion: no-preference) {
  .surf-dash .dash-live-dot {
    animation: dash-breathe 2600ms var(--ease-out) infinite;
  }
  .surf-dash .dash-live.is-working .dash-live-dot {
    animation-duration: 900ms;
  }
}
@keyframes dash-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---- The rolling figure (21st "Animate Digits", unlumen) ---------------- */
.surf-dash .live-digits {
  display: inline-block;
}
.surf-dash .live-digits-cells {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums lining-nums;
}
.surf-dash .live-digit {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 1ch;
  overflow: hidden;
}
.surf-dash .live-digit > * {
  grid-area: 1 / 1;
}
.surf-dash .live-digit-out {
  pointer-events: none;
}
.surf-dash .live-digit-sep {
  display: inline-block;
}

/* ---- The stat strip ----------------------------------------------------- */
.surf-dash .dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  background: var(--hairline);
  overflow: hidden;
}
.surf-dash .dash-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: none;
  background: var(--bg-app);
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.surf-dash button.dash-kpi {
  cursor: pointer;
}
.surf-dash button.dash-kpi:hover {
  background: var(--bg-surface);
}
.surf-dash button.dash-kpi:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus);
  border-radius: 0;
}
.surf-dash .dash-kpi-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.surf-dash .dash-kpi-icon {
  display: inline-flex;
  color: var(--text-tertiary);
  flex: none;
}
.surf-dash .dash-kpi-label {
  font-size: 12px;
  font-weight: var(--w-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.surf-dash .dash-kpi-value {
  font-size: var(--text-lg);
  font-weight: var(--w-strong);
  letter-spacing: var(--track-heading);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.surf-dash .dash-kpi-hint,
.surf-dash .dash-kpi-change {
  font-size: 12px;
  color: var(--text-tertiary);
}
.surf-dash .dash-kpi-change {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums lining-nums;
}
/* The direction is information and stays neutral: up is not good and down is
   not bad for half these figures. */
.surf-dash .dash-kpi-arrow {
  color: var(--text-secondary);
}

/* ---- The asymmetric row ------------------------------------------------- */
.surf-dash .dash-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.surf-dash .dash-main {
  flex: 1 1 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.surf-dash .dash-side {
  flex: 1 1 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Tiles — a labelled panel of hairline rows -------------------------- */
.surf-dash .dash-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  background: var(--bg-app);
}
.surf-dash .dash-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.surf-dash .dash-tile-label {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-heading);
}
/* The whole-surface jump speaks in the link voice — a sanctioned teal use. */
.surf-dash .dash-tile-action {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: var(--w-medium);
  color: var(--accent-link);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent-link) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--motion-fast) var(--ease-out);
}
.surf-dash .dash-tile-action:hover {
  text-decoration-color: var(--accent-link);
}
.surf-dash .dash-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2px 0 4px;
}
.surf-dash .dash-tile-body > * + * {
  border-top: 1px solid var(--hairline);
}
.surf-dash .dash-note {
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.surf-dash .dash-more {
  padding: 7px 14px 9px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ---- Rows — every figure is a door -------------------------------------- */
.surf-dash .dash-row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.surf-dash button.dash-row-item {
  cursor: pointer;
}
.surf-dash button.dash-row-item:hover {
  background: var(--bg-surface);
}
.surf-dash .dash-row-item.is-static {
  cursor: default;
}
.surf-dash .dash-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.surf-dash .dash-row-primary {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surf-dash .dash-row-secondary {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Trailing figures — times, ages, counts — speak the ledger voice and line
   up as a column of digits. */
.surf-dash .dash-row-meta {
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-feature-settings: "zero" on, "liga" 0, "calt" 0;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* ---- The activity feed — hairline rows with a kind glyph ---------------- */
.surf-dash .dash-feed {
  display: flex;
  flex-direction: column;
}
.surf-dash .dash-feed > * + * {
  border-top: 1px solid var(--hairline);
}
.surf-dash .dash-feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.surf-dash button.dash-feed-item {
  cursor: pointer;
}
.surf-dash button.dash-feed-item:hover {
  background: var(--bg-surface);
}
.surf-dash .dash-feed-item.is-static {
  cursor: default;
}
/* A bare glyph, quiet — which KIND of event, not a decorated tile. */
.surf-dash .dash-feed-glyph {
  display: inline-flex;
  flex: none;
  color: var(--text-tertiary);
}

/* ---- The funnel --------------------------------------------------------- */
.surf-dash .funnel {
  display: flex;
  flex-direction: column;
}
.surf-dash .funnel > * + * {
  border-top: 1px solid var(--hairline);
}
.surf-dash .funnel-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: 1px;
  width: 100%;
  padding: 9px 14px 11px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.surf-dash button.funnel-col {
  cursor: pointer;
}
.surf-dash button.funnel-col:hover {
  background: var(--bg-surface);
}
.surf-dash .funnel-col.is-static {
  cursor: default;
}
.surf-dash .funnel-stage {
  grid-column: 1;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-primary);
}
.surf-dash .funnel-value {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-mono);
  font-feature-settings: "zero" on, "liga" 0, "calt" 0;
  font-size: 12px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.surf-dash .funnel-count {
  grid-column: 1;
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Thin meter: square at the baseline, rounded at the data end. */
.surf-dash .funnel-meter {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  margin-top: 6px;
  background: var(--bg-well);
  border-radius: 0 2px 2px 0;
  overflow: hidden;
}
.surf-dash .funnel-meter-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 0 2px 2px 0;
}

@media (max-width: 900px) {
  .surf-dash .dash-row {
    flex-direction: column;
  }
}
@media (max-width: 859px) {
  .surf-dash .dash-view {
    padding: 56px 16px 24px;
  }
}

/* ---- Ambient life: the border beam -------------------------------------- */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .surf-dash .dash-tile,
  .surf-dash .dash-kpi {
    position: relative;
    isolation: isolate;
  }
  .surf-dash .dash-tile::after,
  .surf-dash .dash-kpi::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
      from var(--beam-angle),
      transparent 0deg 250deg,
      color-mix(in oklab, var(--accent-solid) 25%, transparent) 300deg,
      var(--accent-solid) 340deg,
      color-mix(in oklab, var(--accent-solid) 25%, transparent) 356deg,
      transparent 360deg
    );
    -webkit-mask:
      /* mask stencil, alpha only */
      linear-gradient(#000 0 0) content-box,
      /* mask stencil, alpha only */
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      /* mask stencil, alpha only */
      linear-gradient(#000 0 0) content-box,
      /* mask stencil, alpha only */
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: dash-beam 5s linear infinite;
    pointer-events: none;
  }
  /* Out of phase, so the grid breathes rather than marching. */
  .surf-dash .dash-kpi:nth-child(2)::after { animation-delay: -1.2s; }
  .surf-dash .dash-kpi:nth-child(3)::after { animation-delay: -2.5s; }
  .surf-dash .dash-kpi:nth-child(4)::after { animation-delay: -3.7s; }
  .surf-dash .dash-row .dash-side .dash-tile:nth-child(2)::after { animation-delay: -1.9s; }
  .surf-dash .dash-row:nth-of-type(2) .dash-main .dash-tile::after { animation-delay: -3.1s; }
  .surf-dash .dash-row:nth-of-type(2) .dash-side .dash-tile::after { animation-delay: -4.4s; }
}

@keyframes dash-beam {
  to { --beam-angle: 360deg; }
}
/* ---- The live surface --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* ---- 2 · The substrate ------------------------------------------------ */
  .surf-dash .dash-view {
    position: relative;
    isolation: isolate;
  }
  .surf-dash .dash-view::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(
        0deg,
        color-mix(in oklab, var(--accent-solid) 7%, transparent) 0 1px,
        transparent 1px 44px
      ),
      repeating-linear-gradient(
        90deg,
        color-mix(in oklab, var(--accent-solid) 7%, transparent) 0 1px,
        transparent 1px 44px
      );
    background-position: 0 0, 0 0;
    animation: dash-drift 24s linear infinite;
    /* mask stencil, alpha only — fades the grid before it meets the chrome */
    -webkit-mask: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
    /* mask stencil, alpha only */
    mask: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  }
  /* Aurora: two large fields breathing out of phase. */
  .surf-dash .dash-view::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(
        44rem 30rem at 12% 8%,
        color-mix(in oklab, var(--accent-solid) 13%, transparent),
        transparent 70%
      ),
      radial-gradient(
        38rem 26rem at 88% 42%,
        color-mix(in oklab, var(--ok-solid) 9%, transparent),
        transparent 72%
      );
    animation: dash-aurora 19s var(--ease-out) infinite alternate;
  }

  /* ---- 1 · Panels answer the cursor ------------------------------------- */
  .surf-dash .dash-tile,
  .surf-dash .dash-kpi {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition:
      transform var(--motion-moderate) var(--ease-out),
      border-color var(--motion-base) var(--ease-out);
    will-change: transform;
    background-image: radial-gradient(
      14rem 14rem at var(--mx, -100px) var(--my, -100px),
      color-mix(in oklab, var(--accent-solid) 14%, transparent),
      transparent 68%
    );
    background-repeat: no-repeat;
  }
  .surf-dash .dash-tile:hover,
  .surf-dash .dash-kpi:hover {
    border-color: color-mix(in oklab, var(--accent-solid) 55%, var(--border-subtle));
  }

  /* ---- 3 · The sweep ---------------------------------------------------- */
  .surf-dash .dash-sweep {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  .surf-dash .dash-sweep::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 38vh;
    top: -40vh;
    background: linear-gradient(
      180deg,
      transparent,
      color-mix(in oklab, var(--accent-solid) 10%, transparent) 62%,
      color-mix(in oklab, var(--accent-solid) 22%, transparent) 84%,
      transparent
    );
    animation: dash-sweep 11s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* ---- 4 · The boot ----------------------------------------------------- */
  .surf-dash .dash-kpis > *,
  .surf-dash .dash-row {
    animation: dash-boot var(--motion-sheet) var(--ease-sheet) backwards;
  }
  .surf-dash .dash-kpis > *:nth-child(1) { animation-delay: 40ms; }
  .surf-dash .dash-kpis > *:nth-child(2) { animation-delay: 100ms; }
  .surf-dash .dash-kpis > *:nth-child(3) { animation-delay: 160ms; }
  .surf-dash .dash-kpis > *:nth-child(4) { animation-delay: 220ms; }
  .surf-dash .dash-row:nth-of-type(1) { animation-delay: 280ms; }
  .surf-dash .dash-row:nth-of-type(2) { animation-delay: 360ms; }

  .surf-dash .dash-kpi-value {
    animation: dash-bloom 4.5s var(--ease-out) infinite;
  }
  .surf-dash .dash-kpi:nth-child(2) .dash-kpi-value { animation-delay: -1.1s; }
  .surf-dash .dash-kpi:nth-child(3) .dash-kpi-value { animation-delay: -2.2s; }
  .surf-dash .dash-kpi:nth-child(4) .dash-kpi-value { animation-delay: -3.3s; }
}

@keyframes dash-drift {
  to { background-position: 44px 44px, 44px 44px; }
}
@keyframes dash-aurora {
  0% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@keyframes dash-sweep {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  55% { opacity: 1; }
  70%, 100% { transform: translateY(180vh); opacity: 0; }
}
@keyframes dash-boot {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    filter: blur(6px);
  }
}
@keyframes dash-bloom {
  0%, 100% { text-shadow: none; }
  50% {
    text-shadow: 0 0 18px color-mix(in oklab, var(--accent-solid) 45%, transparent);
  }
}

/* ---- The light (bare :root) vocabulary: subtractive, not additive -------- */
.surf-dash .dash-view::before {
  background-image:
    repeating-linear-gradient(
      0deg,
      /* ink hairline: the grid wants an alpha no --hairline token carries */
      rgba(17, 28, 28, 0.045) 0 1px,
      transparent 1px 44px
    ),
    repeating-linear-gradient(
      90deg,
      /* ink hairline, as above */
      rgba(17, 28, 28, 0.045) 0 1px,
      transparent 1px 44px
    );
}

.surf-dash .dash-view::after {
  background:
    radial-gradient(
      52rem 34rem at 14% 4%,
      color-mix(in oklab, var(--accent-solid) 5%, transparent),
      transparent 68%
    ),
    /* corner shade, ink at a very low alpha — depth, not colour */
    radial-gradient(140% 100% at 50% 0%, transparent 55%, rgba(17, 28, 28, 0.05) 100%);
  animation-duration: 26s;
  opacity: 0.9;
}

.surf-dash .dash-tile,
.surf-dash .dash-kpi {
  background-image: radial-gradient(
    9rem 9rem at var(--mx, -100px) var(--my, -100px),
    color-mix(in oklab, var(--accent-solid) 7%, transparent),
    transparent 62%
  );
}

.surf-dash .dash-sweep::before {
  background: linear-gradient(
    180deg,
    transparent,
    /* passing shade, ink at low alpha */
    rgba(17, 28, 28, 0.035) 62%,
    /* the leading edge, slightly deeper */
    rgba(17, 28, 28, 0.06) 84%,
    transparent
  );
}

/* NO BLOOM ON LIGHT. */
.surf-dash .dash-kpi-value {
  animation: none;
}

.surf-dash .dash-tile::after,
.surf-dash .dash-kpi::after {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg 270deg,
    color-mix(in oklab, var(--accent-solid) 18%, transparent) 315deg,
    color-mix(in oklab, var(--accent-solid) 62%, transparent) 342deg,
    transparent 360deg
  );
}

/* ---- Dark keeps the loud version ---------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .surf-dash .dash-view::before {
      background-image:
        repeating-linear-gradient(
          0deg,
          color-mix(in oklab, var(--accent-solid) 8%, transparent) 0 1px,
          transparent 1px 44px
        ),
        repeating-linear-gradient(
          90deg,
          color-mix(in oklab, var(--accent-solid) 8%, transparent) 0 1px,
          transparent 1px 44px
        );
    }
  :root[data-theme="dark"] .surf-dash .dash-view::after {
      background:
        radial-gradient(
          44rem 30rem at 12% 8%,
          color-mix(in oklab, var(--accent-solid) 16%, transparent),
          transparent 70%
        ),
        radial-gradient(
          38rem 26rem at 88% 42%,
          color-mix(in oklab, var(--ok-solid) 11%, transparent),
          transparent 72%
        );
      animation-duration: 19s;
      opacity: 1;
    }
  :root[data-theme="dark"] .surf-dash .dash-tile,
  :root[data-theme="dark"] .surf-dash .dash-kpi {
      background-image: radial-gradient(
        14rem 14rem at var(--mx, -100px) var(--my, -100px),
        color-mix(in oklab, var(--accent-solid) 16%, transparent),
        transparent 68%
      );
    }
  :root[data-theme="dark"] .surf-dash .dash-sweep::before {
      background: linear-gradient(
        180deg,
        transparent,
        color-mix(in oklab, var(--accent-solid) 12%, transparent) 62%,
        color-mix(in oklab, var(--accent-solid) 26%, transparent) 84%,
        transparent
      );
    }
  :root[data-theme="dark"] .surf-dash .dash-tile::after,
  :root[data-theme="dark"] .surf-dash .dash-kpi::after {
      background: conic-gradient(
        from var(--beam-angle),
        transparent 0deg 250deg,
        color-mix(in oklab, var(--accent-solid) 25%, transparent) 300deg,
        var(--accent-solid) 340deg,
        color-mix(in oklab, var(--accent-solid) 25%, transparent) 356deg,
        transparent 360deg
      );
    }
  :root[data-theme="dark"] .surf-dash .dash-kpi-value {
      animation: dash-bloom 4.5s var(--ease-out) infinite;
    }
    .surf-dash .dash-kpi:nth-child(2) .dash-kpi-value { animation-delay: -1.1s; }
    .surf-dash .dash-kpi:nth-child(3) .dash-kpi-value { animation-delay: -2.2s; }
    .surf-dash .dash-kpi:nth-child(4) .dash-kpi-value { animation-delay: -3.3s; }
}

@media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .surf-dash .dash-view::before {
      background-image:
        repeating-linear-gradient(
          0deg,
          color-mix(in oklab, var(--accent-solid) 8%, transparent) 0 1px,
          transparent 1px 44px
        ),
        repeating-linear-gradient(
          90deg,
          color-mix(in oklab, var(--accent-solid) 8%, transparent) 0 1px,
          transparent 1px 44px
        );
    }
  :root:not([data-theme="light"]) .surf-dash .dash-view::after {
      background:
        radial-gradient(
          44rem 30rem at 12% 8%,
          color-mix(in oklab, var(--accent-solid) 16%, transparent),
          transparent 70%
        ),
        radial-gradient(
          38rem 26rem at 88% 42%,
          color-mix(in oklab, var(--ok-solid) 11%, transparent),
          transparent 72%
        );
      animation-duration: 19s;
      opacity: 1;
    }
  :root:not([data-theme="light"]) .surf-dash .dash-tile,
  :root:not([data-theme="light"]) .surf-dash .dash-kpi {
      background-image: radial-gradient(
        14rem 14rem at var(--mx, -100px) var(--my, -100px),
        color-mix(in oklab, var(--accent-solid) 16%, transparent),
        transparent 68%
      );
    }
  :root:not([data-theme="light"]) .surf-dash .dash-sweep::before {
      background: linear-gradient(
        180deg,
        transparent,
        color-mix(in oklab, var(--accent-solid) 12%, transparent) 62%,
        color-mix(in oklab, var(--accent-solid) 26%, transparent) 84%,
        transparent
      );
    }
  :root:not([data-theme="light"]) .surf-dash .dash-tile::after,
  :root:not([data-theme="light"]) .surf-dash .dash-kpi::after {
      background: conic-gradient(
        from var(--beam-angle),
        transparent 0deg 250deg,
        color-mix(in oklab, var(--accent-solid) 25%, transparent) 300deg,
        var(--accent-solid) 340deg,
        color-mix(in oklab, var(--accent-solid) 25%, transparent) 356deg,
        transparent 360deg
      );
    }
  :root:not([data-theme="light"]) .surf-dash .dash-kpi-value {
      animation: dash-bloom 4.5s var(--ease-out) infinite;
    }
    .surf-dash .dash-kpi:nth-child(2) .dash-kpi-value { animation-delay: -1.1s; }
    .surf-dash .dash-kpi:nth-child(3) .dash-kpi-value { animation-delay: -2.2s; }
    .surf-dash .dash-kpi:nth-child(4) .dash-kpi-value { animation-delay: -3.3s; }
}

/* ---- The morning brief -------------------------------------------------- */
.surf-dash .dash-brief {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  background: var(--bg-surface);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.surf-dash .dash-brief-greet {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--w-semibold);
  color: var(--text-primary);
  letter-spacing: var(--track-heading);
}
.surf-dash .dash-brief-name {
  color: var(--text-secondary);
  font-weight: var(--w-regular);
}
.surf-dash .dash-brief-clear {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.surf-dash .dash-brief-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.surf-dash .dash-brief-line {
  min-width: 0;
}
.surf-dash .dash-brief-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 32px;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.surf-dash button.dash-brief-row {
  cursor: pointer;
}
.surf-dash button.dash-brief-row:hover {
  background: var(--bg-hover);
}
.surf-dash button.dash-brief-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.surf-dash .dash-brief-count {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--w-strong);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.surf-dash .dash-brief-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
/* The marker. Present in both themes and at rest. */
.surf-dash .dash-brief-mark {
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--border-strong);
}
.surf-dash .dash-brief-mark.is-urgent {
  background: var(--accent-solid);
}

@media (prefers-reduced-motion: no-preference) {
  .surf-dash .dash-brief-mark.is-urgent::before,
  .surf-dash .dash-brief-mark.is-urgent::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--accent-solid);
    animation: dash-brief-ring 2600ms var(--ease-out) infinite;
  }
  .surf-dash .dash-brief-mark.is-urgent {
    position: relative;
  }
  .surf-dash .dash-brief-mark.is-urgent::after {
    animation-delay: -1300ms;
  }
}

@keyframes dash-brief-ring {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(3.4);
    opacity: 0;
  }
}

/* ==== SURFACE INTG: verbatim app rules, prefixed .surf-intg ==== */
/* ---- View chrome --------------------------------------------------------- */
.surf-intg .intg-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px 56px;
}
.surf-intg .intg-col {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.surf-intg .intg-head h1 {
  font-size: var(--text-lg);
}
.surf-intg .intg-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 64ch;
  margin-top: 6px;
}

/* ---- Tab row — active tab is a sanctioned teal use ----------------------- */
.surf-intg .intg-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-subtle);
}
.surf-intg .intg-tab {
  position: relative;
  padding: 8px 12px 10px;
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}
.surf-intg .intg-tab:hover {
  color: var(--text-primary);
}
.surf-intg .intg-tab.is-active {
  color: var(--text-primary);
}
.surf-intg .intg-tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--accent-solid);
}

/* ---- Search --------------------------------------------------------------- */
.surf-intg .intg-search {
  position: relative;
  width: min(340px, 100%);
}
.surf-intg .intg-search svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.surf-intg .intg-search .ui-input {
  padding-left: 30px;
}

/* ---- The marketplace grid ------------------------------------------------- */
.surf-intg .intg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 12px;
}
.surf-intg .intg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.surf-intg .intg-card:hover {
  border-color: var(--border-interactive);
}
.surf-intg .intg-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.surf-intg .intg-card-tile {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-content: center;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  color: var(--text-secondary);
}
.surf-intg .intg-card-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-heading);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surf-intg .intg-card-head .ui-badge {
  flex: none;
}
.surf-intg .intg-blurb {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.surf-intg .intg-card-foot {
  margin-top: auto;
  padding-top: 4px;
}
.surf-intg .intg-card-foot .ui-btn {
  width: 100%;
}

/* Facts — record data (numbers, paths, ids) keeps tabular figures; code is
   already the ledger voice via the base sheet. */
.surf-intg .intg-fact {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* ---- Narrow screens -------------------------------------------------------- */
@media (max-width: 859px) {
  .surf-intg .intg-view {
    padding: 56px 16px 32px;
  }
}

/* ---- Buttons (src/ui/ui.css) --------------------------------------------- */
.surf-intg .ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--ctl-h);
  padding: 0 14px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: none;
  transition: background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}
.surf-intg .ui-btn:disabled {
  cursor: not-allowed;
}
.surf-intg .ui-btn--secondary {
  background: var(--bg-app);
  border-color: var(--border-interactive);
  color: var(--text-primary);
}
.surf-intg .ui-btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.surf-intg .ui-btn--secondary:disabled {
  color: var(--n9);
  border-color: var(--border-subtle);
}
.surf-intg .ui-btn--sm {
  height: var(--ctl-h-sm);
  padding: 0 11px;
  font-size: 13px;
}
/* Pressed state: instant, no scale — precision, not bounce. */
.surf-intg .ui-btn:active:not(:disabled) {
  transition-duration: var(--motion-instant);
}
.surf-intg .ui-btn--secondary:active:not(:disabled) {
  background: var(--bg-active);
}
.surf-intg .ui-btn[data-loading="true"] {
  pointer-events: none;
}

/* ---- Inputs (src/ui/ui.css) ---------------------------------------------- */
.surf-intg .ui-input {
  width: 100%;
  height: var(--ctl-h);
  padding: 0 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-interactive);
  border-radius: var(--r-control);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.surf-intg .ui-input:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.surf-intg .ui-input:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent);
  border-radius: var(--r-control);
}
.surf-intg .ui-input:disabled {
  background: var(--bg-well);
  color: var(--n9);
  cursor: not-allowed;
}
.surf-intg .ui-input[aria-invalid="true"] {
  border-color: var(--danger-border);
}
.surf-intg .ui-input[aria-invalid="true"]:focus-visible {
  border-color: var(--danger-solid);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger-solid) 20%, transparent);
}

/* ---- Status badges — icon + label, never color alone (src/ui/ui.css) ----- */
.surf-intg .ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-well);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--w-semibold);
  line-height: 1;
  white-space: nowrap;
}
.surf-intg .ui-badge--ok {
  color: var(--ok-text);
  background: var(--ok-wash);
  border-color: var(--ok-border);
}
.surf-intg .ui-badge--warn {
  color: var(--warn-text);
  background: var(--warn-wash);
  border-color: var(--warn-border);
}
.surf-intg .ui-badge--info {
  color: var(--info-text);
  background: var(--info-wash);
  border-color: var(--info-border);
}

/* THE DASHBOARD IN A DIALOG DROPS ITS AMBIENT DECORATION (founder, 2026-09-09:
   "looks cheap when minimised because u can see the boarder or the scanning
   glow"). In the app these effects run edge to edge on a full viewport; inside
   a panel they get clipped and you see the seam, so the wide sweep, the
   drifting grid, the corner bloom and the pointer bloom are off here. The beam
   that travels around each card's border STAYS (founder, 2026-09-09: "the glow
   should still pass around the cards, just not the wide sweep"). */
.surf-dash .dash-sweep{display:none}
.surf-dash .dash-view::before,.surf-dash .dash-view::after{display:none!important;content:none!important}
.surf-dash .dash-tile,.surf-dash .dash-kpi{animation:none}  /* the entrance, not the beam: the beam lives on ::after and stays */
.surf-dash .dash-view{background:none}
.surf-dash .dash-view>*{animation:none}
.surf-dash .dash-tile,.surf-dash .dash-kpi{background-image:none!important}
.surf-dash .dash-tile:hover,.surf-dash .dash-kpi:hover{background-image:none!important}
.surf-dash .dash-kpis>*,.surf-dash .dash-row,.surf-dash .dash-kpi-value{animation:none}

/* the dashboard card's still, and the grid at six cards: two wide, then four */
.kind-dash{--frame-tint:color-mix(in oklch,var(--accent-solid) 8%,var(--bg-surface))}
.shot-dash{padding:16px 18px}
.shot-dash-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.shot-dash-greet{font-family:var(--font-serif);font-size:17px;font-weight:var(--w-strong);letter-spacing:var(--track-heading)}
.shot-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
.shot-live-dot{width:6px;height:6px;border-radius:999px;background:var(--ok-solid)}
.shot-dash-brief{padding:10px 0 12px;border-bottom:1px solid var(--hairline)}
.shot-dash-line{display:flex;align-items:center;gap:9px;margin:0 0 7px!important;font-size:14px;color:var(--text-secondary)}
.shot-dash-line:last-child{margin-bottom:0!important}
.shot-dash-line b{font-family:var(--font-mono);font-size:15px;font-weight:var(--w-strong);color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums}
.shot-dash-mark{width:7px;height:7px;border-radius:2px;background:var(--border-strong);flex:none}
.shot-dash-mark.is-urgent{background:var(--danger-text)}
.shot-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:12px}
.shot-kpi{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-well)}
.shot-kpi-label{font-size:11px;font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary)}
.shot-kpi-value{font-family:var(--font-mono);font-size:17px;font-weight:var(--w-strong);color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums}
/* the app's own dashboard and integrations pages inside the dialog get the shell's inset */
.surf-dash,.surf-intg{padding:16px 24px 24px}
.surf-dash .dash-sweep,.surf-dash .dash-live-dot{animation:none}

/* six cards, one shape: two wide, then three, then the channels card across the
   foot. Its still lays the four connectors out in a row, which only reads at
   full width. */
.feat-full{grid-column:span 6}
.feat-full .frame{height:16rem}
.feat-full .feat-text{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr) auto;align-items:center;gap:0 2.4rem}
.feat-full .feat-h{margin:0}
.feat-full .feat-p{margin:0}
.feat-full .feat-cta{margin:0}
.feat-full .shot-tiles{grid-template-columns:repeat(4,minmax(0,1fr));left:24px;right:24px;top:50%;transform:translateY(-50%)}
.feat-full .shot-tile{align-items:flex-start}
@media (max-width:980px){.feat-full{grid-column:span 6}.feat-full .feat-text{grid-template-columns:1fr;gap:.45rem}.feat-full .feat-cta{margin-top:1rem}.feat-full .shot-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.feat-full .frame{height:20rem}}
.shot-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.shot-kpi:last-child{grid-column:span 2}
.shot-kpi-value{font-size:16px}
.feat-full .feat-text{padding:20px 26px 24px}
.feat-full .frame{height:15rem;margin-bottom:0}

/* THE INTEGRATIONS CARDS EXPLAIN THEMSELVES (founder, 2026-09-10: "some of
   these are missing connect etc"). The app clamps each blurb to two lines and
   gives no action to the cards that have nothing to press yet: the Meta pair
   waits on Meta's approval, Calendar connects per person from Settings, Email
   is built in. Clamped, that reads as a broken card. Unclamped, each card says
   why, which is the app's own copy doing its job. The names wrap for the same
   reason: "Jubitus Rece..." is not a product name. */
.surf-intg .intg-blurb{display:block;-webkit-line-clamp:unset;overflow:visible}
.surf-intg .intg-card-name{white-space:normal;overflow:visible;text-overflow:clip}
.surf-intg .intg-card-head{align-items:flex-start}

/* every Click me sits on one line across a row, whatever the title above it
   wraps to (founder, 2026-09-10: "i dont like how these click mes are
   different heigths") */
.feat{display:flex;flex-direction:column}
.feat-text{display:flex;flex-direction:column;flex:1}
.feat-text .feat-p{flex:1}
.feat-cta{align-self:flex-start;margin-top:auto}
.feat-full .feat-text{display:grid}
.feat-full .feat-cta{margin-top:0;align-self:center}

/* ============================================================================
   THE WORDMARK IS THE WHOLE LOCKUP (founder, 2026-09-10: "remove this j and
   reposition the wordmark"). With the j mark dropped from the nav and the
   footer there is nothing to sit beside, so the gap that separated them goes
   too and the wordmark aligns to the leading edge on its own.
   ========================================================================== */
.nav-logo{gap:0}
.nav-wordmark{display:block;height:1.5rem;margin-block:.1rem}
.nav.scrolled .nav-wordmark{height:1.3rem}
.foot-logo{gap:0}
.foot-wordmark{height:1.35rem}
@media(max-width:980px){
  .nav-logo{gap:0}
  .nav-wordmark{display:block;height:1.25rem;max-width:46vw}
  .nav.scrolled .nav-wordmark{height:1.15rem}
}

/* ============================================================================
   THE MOBILE MENU OPENS INTO THE PAGE (founder, 2026-09-10: "menu doesnt show
   properly"). .nav-menu has margin-left:auto but the login link and the CTA
   follow it, so its summary lands left of centre, not at the right edge. The
   panel was anchored right:0 and grew 12rem leftwards, off the viewport, which
   sheared the labels. It opens from its left edge now, and max-width keeps it
   inside the screen whichever way it goes.
   ========================================================================== */
.nav-menu-list{left:0;right:auto;max-width:min(16rem,calc(100vw - 2rem))}
/* the wordmark is the whole lockup now, so it must yield to the controls
   beside it rather than run under them */
.nav-inner{gap:.5rem}
.nav-logo{flex:0 1 auto;min-width:0;overflow:hidden}
@media(max-width:860px){
  .nav-wordmark{height:1.15rem;max-width:min(38vw,9rem)}
  .nav.scrolled .nav-wordmark{height:1.05rem}
}
@media(max-width:400px){
  .nav-wordmark{height:1rem;max-width:32vw}
}

/* ============================================================================
   THE WORDMARK SHRINKS INSTEAD OF BEING SHEARED. It was sized by height with
   width:auto, so when .nav-logo shrank as a flex item the image kept its
   intrinsic width and overflow:hidden sliced the final S off. Driving it from
   width lets max-width:100% actually bind, and the intrinsic 1600x357 keeps
   the ratio, so it scales down whole.
   ========================================================================== */
.nav-wordmark{height:auto;width:10rem;max-width:100%}
.nav.scrolled .nav-wordmark{height:auto;width:8.75rem}
.foot-wordmark{height:auto;width:9rem;max-width:100%}
@media(max-width:980px){
  .nav-wordmark{height:auto;width:8.5rem}
  .nav.scrolled .nav-wordmark{height:auto;width:7.75rem}
}
@media(max-width:860px){
  .nav-wordmark{height:auto;width:7.5rem}
  .nav.scrolled .nav-wordmark{height:auto;width:7rem}
}
@media(max-width:400px){
  .nav-wordmark{height:auto;width:6.5rem}
  .nav.scrolled .nav-wordmark{height:auto;width:6.25rem}
}

/* ============================================================================
   PRICE CARDS SIT SIDE BY SIDE ON A PHONE TOO (founder, 2026-09-10: "price
   cards should be next to eachother not ontop of eachother"). They already do
   from 820px up; below that they were stacking. Three static columns at 390px
   gives each card about 110px, which is unreadable, so the row stays a row and
   scrolls: one card at a time, snapped, swipeable.

   overflow-x:auto forces overflow-y to compute as auto, which would clip the
   MOST POPULAR badge sitting above the card, so the scroller carries top
   padding to keep the badge inside its own box.
   ========================================================================== */
@media (max-width:820px){
  .price-grid{
    display:flex;
    grid-template-columns:none;
    max-width:none;
    gap:1rem;
    padding:1.6rem 1.25rem .5rem;
    margin-inline:-1.25rem;          /* bleed to the screen edges */
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .price-grid::-webkit-scrollbar{display:none}
  .price-grid > *{
    flex:0 0 min(78vw,20rem);
    scroll-snap-align:center;
    margin-top:0;
  }
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .price-grid{scroll-behavior:smooth}
}

/* ============================================================================
   MOBILE AUDIT, 2026-09-10. Two real defects, both from the same cause: too
   much asked of too little width.

   1. THE NAV ROW. logo + Menu + Log in + CTA. The CTA is flex:0 0 auto and the
   login link is nowrap, so .nav-logo was the only thing that could shrink and
   it took all of it: the wordmark computed to ~60px wide at 390px and ~35px at
   360px, illegible. Log in moves into the menu below 640px, where the other
   nav links already live, and the logo stops shrinking. Note the earlier
   height/max-width rules on .nav-wordmark are dead: the width-driven sizing
   below is what actually applies.

   2. THE BUILT STILLS. One shared 17rem frame at <=640px cropped every still
   mid-content. The memo lost both "Verified against source" rows, so the card
   whose entire claim is "it cites its sources" showed no citation at all.
   ========================================================================== */
@media(max-width:640px){
  .nav-login{display:none}            /* it lives in the menu at this width */
  .nav-menu-login{border-top:1px solid var(--hairline);margin-top:4px;padding-top:12px!important}
  .nav-logo{flex:0 0 auto;min-height:44px;align-items:center}
  .nav-wordmark{width:7rem}
  .nav.scrolled .nav-wordmark{width:6.5rem}
  .nav-cta{margin-left:0;min-height:44px;display:inline-flex;align-items:center}
  .nav-menu-list a{padding:12px}
}
@media(max-width:400px){
  .nav-wordmark{width:6.25rem}
  .nav.scrolled .nav-wordmark{width:6rem}
}

/* the stills get room to finish their sentence, and the citation rows stop
   stacking one word per line in a 39px column */
@media(max-width:640px){
  .feat .frame{height:21rem}
  .kind-memo{height:24rem}
  .shot-memo .shot-serif{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .shot-cite{flex-wrap:wrap;row-gap:6px}
  .shot-cite-name{flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .shot-conv .shot-acts{display:none}
  .shot-kpis > :last-child{display:none}
}
/* .feat-full .frame is declared unconditionally late in this file, so it beat
   both earlier mobile heights and clipped the channels still top AND bottom */
@media(max-width:980px){
  .feat-full .frame{height:21rem}
  .feat-full .shot-tiles{top:20px;transform:none}
  .feat-full .feat-text{display:flex;flex-direction:column}
  .feat-full .feat-cta{align-self:flex-start;margin-top:1rem}
}
/* the hero headline could not go below 35px, so it broke to four tight lines */
@media(max-width:640px){
  .hero-slogan{font-size:clamp(1.9rem,7vw,4.2rem)}
  .ask-btn{min-height:44px}
}

/* .kind-memo (0,1,0) lost to .feat .frame (0,2,0) above, so the memo kept the
   shared height and still cropped its citations. Matched specificity, and the
   answer clamps to three lines to make the rows fit rather than just growing
   the card. */
@media(max-width:640px){
  .feat .frame.kind-memo{height:25rem}
  .shot-memo .shot-serif{-webkit-line-clamp:3}
}

/* ============================================================================
   THE SURFACES ON A PHONE, 2026-09-10 audit.
   ========================================================================== */

/* Conversations: the list pane was hidden with no route back to it, so the
   whole left side of the surface was unreachable. The back control only exists
   below the width where the panes split. */
.conv-back{display:none}
@media (max-width:760px){
  .surf-conv .conv-panes[data-pane="thread"] .conv-back{
    display:inline-flex;align-items:center;gap:6px;width:100%;min-height:44px;
    padding:10px 16px;border:0;border-bottom:1px solid var(--hairline);
    background:var(--bg-surface);color:var(--text-secondary);
    font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--w-medium);cursor:pointer
  }
  .surf-conv .conv-panes[data-pane="list"] .conv-thread{display:none}
}

/* The citation rows stacked one word per line. .cite-ref had min-width:0, so
   it shrank to ~90px next to the nowrap "Verified against source" badge
   instead of wrapping it onto the next line. A full-width basis forces the
   wrap that flex-wrap alone could not. */
@media (max-width:640px){
  .hero-proof .cite-ref{flex:1 1 100%;min-width:0}
  .hero-proof .cite-name{white-space:normal}
  .hero-proof .verify{margin-left:32px}
}

/* Calendar: picking a day gave the agenda a 22rem fixed basis inside a 356px
   pane and crushed the week to a 4px sliver. One pane at a time instead. The
   toolbar was also taking up to 170px of a 628px dialog because the account
   line and four mode buttons cannot share one row. */
@media (max-width:640px){
  .cal-modal .cal-panes.has-day .cal-agenda-slot{flex-basis:100%}
  .cal-modal .cal-panes.has-day .cal-week-pane{display:none}
  .cal-modal .cal-agenda{width:100%;border-left:none}
  .cal-modal .cal-account{display:none}
  .cal-modal .cal-title{min-width:0;font-size:var(--text-md)}
  .cal-modal .cal-modes{margin-left:auto}
  .cal-modal .ui-iconbtn,.cal-modal .cal-head-btn,.cal-modal .cal-evt-btn{min-height:44px;min-width:44px}
}

/* Dashboard and integrations carried the app's 56px top-bar allowance, but the
   dialog already has its own head, so both opened on a dead band. They also
   paid the inset twice. */
.cal-modal .surf-dash .dash-view,.cal-modal .surf-intg .intg-view{padding-top:16px}
@media (max-width:640px){
  .surf-vault,.surf-dash,.surf-intg{padding:12px}
  .surf-dash .dash-tile-action,.surf-intg .intg-tab{min-height:44px;display:inline-flex;align-items:center}
}

/* The why hero on a phone. An earlier pass answered "cannot see the full hero"
   by shrinking type and closing up every gap, which only made it feel squished:
   a hero does not have to fit one screen on a phone, it has to read. So the
   spacing is generous again and only the headline is held back, enough to keep
   it on two lines instead of breaking to four. */
@media (max-width:640px){
  .hero-why{padding-top:6.5rem;padding-bottom:3.75rem}
  .hero-why .hero-slogan{font-size:clamp(2rem,7.6vw,3rem);line-height:1.12}
  .hero-why .hero-sub{margin-top:1.5rem;font-size:1.02rem;line-height:1.62}
  .hero-why .hero-emph{margin-top:2rem;font-size:1.06rem;line-height:1.55}
  .hero-why .hero-cta{margin-top:2.25rem;gap:.75rem}
  .hero-why .compare{margin-top:3rem;gap:1.1rem}
  .hero-why .compare-half{padding:17px 18px}
  .hero-why .compare-text{font-size:1rem;line-height:1.6}
}

/* The calendar dialog was a fixed 81% of the screen whatever it held, so a day
   with two events left a large empty tail below the agenda. It sizes to its
   content now and only caps out when the week or month grid needs the room,
   which is how the memo and refusal dialogs already behave. */
@media (max-width:640px){
  #calOverlay .cal-modal{height:auto;max-height:88dvh}
  /* the app's compact control sizes are fine with a mouse and too small for a
     thumb; these are the icon buttons, the arrows and the per-event actions */
  #calOverlay .ui-iconbtn,#calOverlay .cal-head-btn,#calOverlay .cal-evt-btn,
  #calOverlay .cal-mode,#calOverlay .cal-today{min-height:44px;min-width:44px}
}

/* ============================================================================
   THE SANCTIONS CLOCK NEEDED AIR (founder, 2026-09-10: "squished"). Two
   separate causes ran together. The colons are hidden below 640px, and the gap
   was then pulled down to .22rem, so with nothing between them the four
   numbers read as one run: "2 20 03 43". And .timer-sub carried a 42ch
   max-width, which is wider than the phone, so the case name ran off the right
   edge; long case names have no break opportunity to save it.
   ========================================================================== */
@media(max-width:640px){
  .sanc-monument{gap:1.5rem}
  .sanc-timer{gap:1.25rem;width:100%}
  /* the separators stay hidden, but the units get a real gap so they read as
     four values rather than one number */
  .timer-clock{gap:1rem;flex-wrap:nowrap;justify-content:center}
  .tseg{min-width:0;flex:0 0 auto}
  .tseg b{font-size:clamp(2.3rem,13vw,3.2rem)}
  .tseg i{margin-top:.5rem;font-size:.6rem;letter-spacing:.14em}
  .timer-label{max-width:26ch;line-height:1.7;letter-spacing:.11em}
  .timer-sub{max-width:100%;margin-top:.75rem;line-height:1.6;overflow-wrap:anywhere;text-wrap:pretty}
  .sanc-micro{max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:560px){
  /* this block previously tightened the gap to .22rem, which is what closed
     the numbers up in the first place */
  .timer-clock{gap:.85rem}
  .tseg{min-width:0}
}

/* ============================================================================
   THE WHY HERO GETS ONE EDGE (founder, 2026-09-10: "this positioning feels
   bad"). Everything was centred, and with three text blocks of different
   lengths (headline, sub, the emphasis line) that gives four different left
   edges and nothing for the eye to sit against. The container made it worse:
   .hero-copy is align-items:flex-start below 1180px while the text inside
   stayed centred, so blocks packed left but their contents drifted.

   One left edge on a phone, shared by the headline, both paragraphs and both
   buttons. The landing hero stays centred: it carries two short blocks, which
   centres cleanly, where this one does not.
   ========================================================================== */
@media (max-width:860px){
  .hero-why .hero-copy{align-items:stretch;text-align:left}
  .hero-why .hero-slogan,
  .hero-why .hero-sub,
  .hero-why .hero-emph{text-align:left;margin-left:0;margin-right:0;max-width:34ch}
  .hero-why .hero-emph{max-width:32ch}
  .hero-why .hero-cta{justify-content:flex-start;align-items:stretch}
  .hero-why .hero-cta .btn{justify-content:center}
  /* the strap and the emphasis now sit on the same measure, so the rag reads
     as one column rather than three competing ones */
  .hero-why .hero-sub{margin-top:1.35rem}
  .hero-why .hero-emph{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--hairline)}
}

/* The label was the squished part, not the digits. At 26ch the sentence broke
   to four lines of tracked uppercase mono with tight leading, which reads as a
   block of noise above the clock. A wider measure takes it to two or three
   lines, the leading opens up, and the monument gets real gaps between its
   three parts: scales, label, clock. */
@media(max-width:640px){
  .sanc-monument{gap:2.1rem}
  .sanc-timer{gap:1.6rem}
  .timer-label{max-width:34ch;line-height:2;font-size:.67rem;letter-spacing:.1em}
  .tseg i{margin-top:.75rem}
}
@media(max-width:560px){
  .timer-label{max-width:30ch}
}

/* .nav-inner{gap:.5rem} was added for the mobile row and left unscoped, so it
   also tightened the desktop nav: the links sat 27px apart from each other but
   only 8px from "Log in", which crowded Pricing against it. The tight gap
   belongs to mobile only; desktop gets a gap that matches the link rhythm. */
.nav-inner{gap:1.7rem}
@media(max-width:860px){ .nav-inner{gap:.5rem} }

/* The hero curve is decorative and belongs behind the words. .hero-trace is
   position:absolute with z-index:0, while .hero-copy was static and unlayered,
   and a positioned element paints above static content in the same stacking
   context. So the strokes ran across the headline and straight through both
   pills. .compare was already raised to 2 when this hero was built; the copy
   never was. It is only ever a paint order problem, not a hit-testing one:
   the SVG takes no pointer events, so the buttons always worked. */
.hero-copy{position:relative;z-index:2}

/* ============================================================================
   MOBILE SWEEP FIXES, 2026-09-10. Mostly tap targets that the earlier passes
   declared but lost on specificity, plus the leading on the landing headline.
   ========================================================================== */
@media(max-width:860px){
  /* .ask-btn{min-height:44px} was set at 0-1-0 and lost to
     .hero-proof .ask-btn{min-height:32px} at 0-2-0, so the memo's two primary
     buttons stayed 34px tall. Matched specificity. */
  .hero-proof .ask-btn{min-height:44px;padding:11px 12px}
  /* the six Click me buttons open the product surfaces: the main interaction
     on the page, and they were 115x32 */
  .feat-cta{height:auto;min-height:44px;padding:0 18px}
  /* a 14px input makes iOS zoom the page on focus */
  .surf-conv .conv-filter-input{font-size:16px;height:44px}
  .surf-conv .conv-head-btn,.surf-conv .conv-scope-btn{min-height:44px;font-size:13px}
  .nav-back{display:inline-flex;align-items:center;min-height:44px;padding:.65rem .25rem}
}
@media(max-width:640px){
  /* why.html's headline got its leading opened; the landing's never did, and
     at 30.4px type on a 1.06 line-height the two lines nearly touched. This
     was the biggest "squished" tell above the fold. */
  .hero-slogan{line-height:1.14}
  /* mono microcopy reads smaller than its number suggests once it is tracked,
     so these get a floor rather than shrinking further on the narrowest screens */
  .bill-save{font-size:11px}
  .step-tag,.tseg i,.price-cycle,.price-badge,.pay-fine-head{font-size:11px}
  .timer-label{font-size:11px}
  /* the tightest rhythm on the page: 4px between blocks 150-280px tall */
  .hero-proof .agent-section{margin:12px 0}
  .hero-proof .citation>summary{padding:11px 4px}
}
@media(max-width:400px){
  .bill-save{font-size:11px}
}

/* ============================================================================
   DESKTOP SWEEP FIXES, 2026-09-10. Three of these are mobile rules that were
   appended without a media query and had been quietly changing desktop.
   ========================================================================== */

/* The active billing toggle sits on --text-primary, so the badge's teal
   resolved to 1.99:1 against it: a light-mode casualty, since --accent-solid
   is now the light-ground teal but this pill is on a dark ground. */
.bill-opt.is-on .bill-save{color:var(--bg-app)}

/* .shot-kpis was re-gridded to 2 columns with the last tile spanning both,
   outside any media query, so the dashboard still showed 2-over-1 at 1440.
   It pairs with the rule that hides the third KPI under 640px, which is where
   it was always meant to apply. */
@media(min-width:641px){
  .shot-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shot-kpi:last-child{grid-column:auto}
}

/* overflow:hidden was for the flex-shrink case on mobile; on desktop it is
   just a clipping ancestor around the nav's only image and its focus ring */
.nav-logo{overflow:visible}
@media(max-width:860px){ .nav-logo{overflow:hidden} }

/* the home link was the one interactive element falling back to the UA outline */
.nav-logo:focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px;border-radius:6px}

/* a two-line receipt heading was leaving a 26% last line at 1024 */
.receipt-h{text-wrap:balance}

/* this is marketing copy inside a still, not a real disabled control, and
   readers are meant to read it */
.hero-proof .ask-btn:disabled{color:var(--text-tertiary)}

/* ============================================================================
   MOBILE PAINT COST (founder, 2026-09-10: "laggy on mobile", fine on desktop).
   A 4x-throttled 390px trace put LCP at 801ms with 800ms of it render delay
   and only 1ms of TTFB: nothing was slow to arrive, the browser was busy
   painting before it could show anything.

   The cost is the atmosphere layer. Three .glow circles are 608-704px wide,
   nearly twice a phone viewport, each carrying filter:blur(110px) and a
   permanent will-change:transform inside a position:fixed parent. A 110px
   blur forces the compositor to rasterise a texture far larger than the
   element, three times over, for the life of the page. The visual loss from
   dropping it is close to nil, because each glow is already a radial-gradient
   fading to transparent at 60%: the blur was softening something soft.

   The rest are the same class of problem: backdrop-filter repaints the region
   behind the sticky nav every scroll frame, a full-viewport mix-blend-mode
   pulls the whole page into a blend group for a 3%-opacity grain nobody can
   see on a phone, and the reveal transition animates filter:blur on all 31
   blocks as they enter.
   ========================================================================== */
@media (max-width:860px){
  .glow{filter:none;will-change:auto;opacity:.5}
  .grain{display:none}
  .nav.scrolled{backdrop-filter:none;background:color-mix(in oklch,var(--white) 97%,transparent)}
  html.js .reveal:not(.in){filter:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
  /* the third glow sits below the fold on a phone and only adds a layer */
  .glow-c{display:none}
}

/* ============================================================================
   TWO MOBILE BUGS, 2026-09-10.

   1. CITATION LAG. .proof-backdrop is position:fixed inset:0 with
   backdrop-filter:blur(3px). That asks the compositor to snapshot and blur the
   entire viewport every frame while the panel transitions in, which is the
   pause on tapping a citation. A phone gets a plain scrim instead; the blur
   was never doing much at 3px.

   2. CALENDAR SMEARING. .cal-week scrolls on both axes, because the grid is
   pinned to min-width:44rem inside a ~356px pane. Inside it, the corner and
   head cells are sticky on top:0 while the rail and all-day label are sticky
   on left:0. Mixed-axis sticky inside a two-axis scroller is the pattern that
   detaches and smears during momentum scrolling on mobile: the layers are
   repositioned by the compositor on one axis while being laid out on the
   other. Dropping to static inside the dialog on a phone costs pinned headers
   and fixes the corruption. The grid keeps its width, so nothing reflows.
   ========================================================================== */
@media (max-width:860px){
  .proof-backdrop{backdrop-filter:none;background:color-mix(in oklch,var(--scrim) 100%,black 12%)}
}
@media (max-width:760px){
  .cal-modal .cal-wk-corner,
  .cal-modal .cal-wk-headcell,
  .cal-modal .cal-wk-allday-label,
  .cal-modal .cal-wk-rail{position:static}
  /* the header row still needs to read as a header once it cannot pin */
  .cal-modal .cal-wk-headcell,.cal-modal .cal-wk-corner{box-shadow:0 1px 0 var(--border-subtle)}
}

/* ============================================================================
   THE MOBILE LAG, MEASURED. 2026-09-10.

   The earlier passes went after CSS blur and blend, which were real but small.
   A 4x-throttled 390px trace of an 8s scroll of /why.html put 2753ms of the
   page's 2753ms of Paint into exactly two nodes: svg.hero-trace (734ms) and
   the root #document layer it sits in (1968ms). Both repainted 3573 times in
   nine seconds, roughly six paints per displayed frame, while .progress (the
   one thing genuinely changing) repainted 227 times and the nav 37.

   The cause is not CSS at all: the hero curve's four strands are stroked with
   linearGradients that carry sixteen SMIL <animate> elements, x1/y1/x2/y2 on a
   7-12s repeatCount="indefinite" loop, so a lit segment travels each stroke.
   SMIL gradient animation is not composited. Every attribute tick dirties the
   gradient, which dirties every path referencing it, which dirties the root
   layer, which is 390x8731 — the WHOLE document, not the viewport. Two of the
   strands then run that through filter="url(#traceGlow)", an feGaussianBlur, so
   the invalidated region is re-blurred on the CPU each time. It never stops and
   it does not care that the hero left the screen 8000px ago.

   The SVG lives in index.html and why.html, which this pass does not own, and
   SMIL cannot be paused from CSS. What CSS can do is stop the animated strands
   from rendering, which removes every path that references an animated
   gradient and leaves the four static hairlines that actually draw the curve.
   The curve stays; the travelling light does not. Desktop keeps both.

   Measured, same 8s scroll, same throttle, why.html Paint total:
     before                       2753.3ms over 7436 paints
     hero-trace display:none       233.6ms   (-91%)  loses the curve
     glow filter removed only     1616.2ms   (-41%)  gradients still tick
     + will-change:transform      1841.8ms   (WORSE — reverted, not shipped)
     animated strands hidden        167.6ms   (-94%)  curve kept   <- shipped
   ========================================================================== */
@media (max-width:860px){
  /* Every path stroked with a gradient is a SMIL-animated one; the static
     strands are stroked with the token directly. Hiding by that distinction
     keeps the drawing and drops the animation. */
  .hero-trace path[stroke^="url("]{display:none}
}

/* ============================================================================
   THE WEEK VIEW FITS THE PHONE (founder, 2026-09-10: the calendar is "piss
   poor on mobile", and it should not open on a day agenda).

   The previous attempts dodged this. min-width:44rem forced 704px of grid into
   a 356px pane, so the week scrolled on both axes at once. That is what smeared
   the sticky header against the sticky rail, and it is why an earlier pass
   dropped sticky entirely and then opened on the agenda to avoid the grid
   altogether. Both were workarounds for a grid that simply did not fit.

   It fits now: the hour rail narrows and the grid drops its min-width, so seven
   columns of about 44px sit inside the pane. Only the vertical axis scrolls,
   which means sticky is safe again and the day headers and hour rail can pin
   properly. Event chips lose their text at this width, as a phone week view
   should: the week is for shape, and tapping a day opens the agenda for detail.
   ========================================================================== */
@media (max-width:760px){
  .cal-modal .cal-wk-grid{min-width:0;--cal-wk-rail:2.3rem;--cal-wk-hour-h:3.1rem}
  /* single-axis scrolling again, so these can pin without tearing */
  .cal-modal .cal-wk-corner{position:sticky;top:0;left:0;z-index:5}
  .cal-modal .cal-wk-headcell{position:sticky;top:0;z-index:4}
  .cal-modal .cal-wk-allday-label,.cal-modal .cal-wk-rail{position:sticky;left:0}
  .cal-modal .cal-week{overflow-x:hidden;overflow-y:auto}

  /* a 44px column cannot carry a title, and a sheared one reads as breakage */
  .cal-modal .cal-wk-evt{padding:2px 3px;font-size:0;line-height:0;border-radius:3px}
  .cal-modal .cal-wk-evt-time,.cal-modal .cal-wk-evt-title{display:none}
  .cal-modal .cal-wk-chip{font-size:9.5px;padding:0 3px}

  /* day letters, not day names, at this width */
  .cal-modal .cal-wk-dayname{font-size:9.5px;letter-spacing:.04em}
  .cal-modal .cal-wk-daynum{font-size:12px;min-width:0;height:22px}
  .cal-modal .cal-wk-hour{font-size:9.5px}
}

/* ============================================================================
   DIALOGS ARE SHEETS ON A PHONE, NOT FLOATING CARDS. At 390px the calendar was
   a 358x472 card adrift in the middle of the page with hero copy above it and
   section copy below, which is why it read as a stray box rather than a screen
   you had opened. Every surface dialog had the same shape. They now fill the
   viewport, which also hands the calendar's cramped toolbar and the week grid
   the height they were short of.
   ========================================================================== */
@media (max-width:760px){
  .cal-modal-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .cal-modal-overlay > .cal-modal,
  .cal-modal-overlay > .surf-modal{
    margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;
    border-radius:0;border-left:0;border-right:0;border-top:0
  }
  /* the day agenda's "Close" returns to the week, it does not close the dialog:
     two controls reading "close" in one screen is the confusion, so this one
     says what it does */
  .cal-modal .cal-agenda-close{font-size:0}
  .cal-modal .cal-agenda-close::after{content:"Back to week";font-size:13px}
}

/* #calOverlay .cal-modal (1,1,0) set max-height:88dvh earlier, to stop a short
   day agenda leaving a dead tail. Now that a phone gets a full sheet, that rule
   outranks the sheet and left an 843px viewport showing a 743px dialog with
   page copy under it. Matched on specificity; the fit-to-content behaviour is
   still what desktop and tablets get. */
@media (max-width:760px){
  #calOverlay .cal-modal{height:100dvh;max-height:none}
}