/* ============================================================
   stray finds — landing
   Design ("the product is the page" pass, 2026-07-22; originated
   as project_meta/design/archive/landing_v3): benchmarked against
   linear.app / raycast.com / stripe.com / mercury.com — violet-cast
   near-black canvas with ambient color washes (2026-07-22 pass),
   hairline borders, light primary button, bold-lead text
   pattern, one crop per claim, and exactly two vivid moments
   (the capture scene, the big graph).
   Typography: Schibsted Grotesk (display, the app's own face) ·
   Helvetica (body) · Young Serif only as the wordmark glyph.
   Mono is the system stack and appears only where the app itself
   renders mono (timestamps, URLs, keycaps, code) - never as a
   marketing-voice style. Tokens mirror the app.
   ============================================================ */

:root {
  /* base carries a real violet cast (chroma ~0.013, hue ~278): flat
     near-achromatic dark read as default-theme black */
  --bg:        oklch(0.180 0.014 280);
  --panel:     oklch(0.228 0.013 277);
  --panel-2:   oklch(0.257 0.013 277);
  --well:      oklch(0.155 0.012 277);
  --text:  oklch(0.975 0.004 255);
  --body:  oklch(0.865 0.005 260);
  --muted: oklch(0.705 0.006 260);
  --faint: oklch(0.555 0.007 260);
  --hairline:        oklch(1 0 0 / 0.085);
  --hairline-strong: oklch(1 0 0 / 0.15);
  --surface:        oklch(1 0 0 / 0.032);
  --surface-hover:  oklch(1 0 0 / 0.05);
  --accent:      oklch(0.670 0.17 270);
  --accent-soft: oklch(0.72 0.13 270);
  --warm:        oklch(0.745 0.14 62);
  --good:        oklch(0.74 0.15 162);
  --t-gray:   oklch(0.72 0.01 250);
  --t-orange: oklch(0.72 0.18 60);
  --t-green:  oklch(0.74 0.15 165);
  --t-pink:   oklch(0.68 0.22 350);
  --t-indigo: oklch(0.65 0.20 280);
  --t-purple: oklch(0.66 0.20 310);
  --t-red:    oklch(0.65 0.22 25);
  --t-teal:   oklch(0.74 0.13 180);
  --t-blue:   oklch(0.66 0.18 245);
  --t-yellow: oklch(0.80 0.14 95);
  --c0: oklch(0.72 0.14 355);
  --c1: oklch(0.72 0.14 137.5);
  --c2: oklch(0.72 0.14 275);
  --c3: oklch(0.72 0.14 52.5);
  --c4: oklch(0.72 0.14 190);
  --c5: oklch(0.72 0.14 230);

  --sans: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --grotesk: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Young Serif", Georgia, serif;

  --maxw: 1120px;

  /* the foreign light apps' surface set (the Safari in the capture scene, the
     Notes and Preview windows in the any-app peek). Deliberately one notch off
     pure white, with the page's violet cast: #fff on this canvas reads as a
     lightbox punched through the page, and #fff behind near-black ink is also a
     wider contrast range than anything else on the site. Tune the whole family
     from here; no light mock should reintroduce #fff or near-black ink. */
  --lt-page:        oklch(0.918 0.005 285);
  --lt-page-2:      oklch(0.882 0.005 285); /* recessed page areas, inline pills */
  --lt-chrome:      oklch(0.872 0.005 285);
  --lt-chrome-2:    oklch(0.845 0.006 285);
  --lt-chrome-hair: oklch(0.770 0.007 285);
  --lt-well:        oklch(0.812 0.006 285); /* url pill, inset controls */
  --lt-ink:         oklch(0.300 0.008 285);
  --lt-ink-2:       oklch(0.475 0.008 285);
  --lt-ink-3:       oklch(0.595 0.008 285);
  --lt-skel:        oklch(0.755 0.006 285);
  --lt-skel-2:      oklch(0.828 0.005 285);

  /* the mocks' glass set (only used inside the hero scene) */
  --ws-win:         oklch(0.193 0.010 272 / 0.64);
  --ws-win-border:  oklch(1 0 0 / 0.14);
  --ws-chrome-soft: oklch(0.242 0.012 272 / 0.55);
  --ws-well:        oklch(0.138 0.010 272 / 0.55);
  --ws-hair:        oklch(1 0 0 / 0.09);
  --ws-hair-soft:   oklch(1 0 0 / 0.06);
  --ws-card-shadow: 0 2px 8px oklch(0 0 0 / 0.28), 0 1px 0 oklch(1 0 0 / 0.10) inset;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* film grain: a static noise overlay that dithers the washes' gradients
   (they band on dark displays otherwise) and gives the black some tooth */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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");
  background-size: 220px 220px;
}
::selection { background: color-mix(in oklch, var(--accent) 40%, transparent); color: var(--text); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; text-wrap: pretty; }
button { font: inherit; cursor: pointer; }
main { position: relative; z-index: 1; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---- topbar ---------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: calc(var(--maxw) - 20px); margin: 10px auto 0; padding: 10px 12px 10px 20px;
  position: sticky; top: 14px; z-index: 30;
  border-radius: 14px;
  background: oklch(0.213 0.013 278 / 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.30);
}
.wm { display: inline-flex; align-items: center; gap: 11px; }
/* The brand mark. `mark.svg` is written here by `pnpm icons:build` from the same
   measurement the app icon is drawn from, so the site's mark and the shipped icon cannot
   drift. It is the mark WITH NO TILE, which every placement outside the OS's own icon
   slots uses, and it is slightly taller than it is wide - hence the two different numbers
   on every one of these boxes. One drawing serves every size: the mark has no fine
   structure to lose, so the old artwork's 56-pixel floor and its second, reduced file both
   retired with it.
   The shadow is a drop-shadow filter, not a box-shadow, so it follows the mark's own
   silhouette instead of boxing the transparent corners. */
.wm-mark {
  width: 28px; height: 30px; flex-shrink: 0;
  background: url(mark.svg) center / contain no-repeat;
  filter: drop-shadow(0 4px 14px oklch(0 0 0 / 0.30));
}
.wm-name { font-weight: 600; font-size: 17px; letter-spacing: -0.2px; color: var(--text); }
.topnav { display: flex; align-items: center; gap: 24px; }
.topnav a { font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color .15s; }
.topnav a:hover { color: var(--text); }

/* ---- buttons & shared bits ------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .25s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #e9e9eb);
  color: oklch(0.25 0.008 270);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.35), 0 8px 26px oklch(0 0 0 / 0.30);
}
/* hover: the halo blooms, a violet-tinted sheen sweeps the white face, and
   the download arrow dips toward its tray. No movement of the button
   itself. Never swap `background` here: transitioning a gradient to a
   flat color passes through a translucent frame and flashes dark over
   this page. */
.btn-primary::after {
  content: ''; position: absolute; top: -45%; bottom: -45%; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent, oklch(0.70 0.16 275 / 0.38) 42%, oklch(0.85 0.11 290 / 0.30) 60%, transparent 92%);
  transform: skewX(-18deg) translateX(-160%);
  opacity: 0; pointer-events: none;
}
.btn-primary svg { transition: transform .32s cubic-bezier(.3, 1.8, .4, 1); }
.btn-primary:hover {
  filter: brightness(1.04);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.35), 0 10px 30px oklch(0 0 0 / 0.34),
    0 0 0 6px color-mix(in oklch, var(--accent) 22%, transparent),
    0 0 52px color-mix(in oklch, var(--accent) 45%, transparent);
}
.btn-primary:hover svg { transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { animation: btnSheen .75s ease-out; }
  @keyframes btnSheen {
    0% { opacity: 1; transform: skewX(-18deg) translateX(-160%); }
    100% { opacity: 1; transform: skewX(-18deg) translateX(340%); }
  }
}
.btn-sm { height: 38px; padding: 0 15px; font-size: 13.5px; border-radius: 10px; }
.btn-price { width: 100%; }
.kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 6px; background: oklch(1 0 0 / 0.07); border: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}

/* the voice of the page: bold white lead, gray continuation */
.lead { font-size: 17px; line-height: 1.65; color: var(--muted); }
.lead b, .lead strong { color: var(--text); font-weight: 600; }
.lead .stepnum { font-family: var(--grotesk); font-size: 12px; font-weight: 600; letter-spacing: 0.11em; color: var(--faint); display: block; margin-bottom: 10px; }

/* display headings */
.d1 { font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; color: var(--text); }
.d2 { font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.018em; line-height: 1.12; color: var(--text); }

/* scroll reveal */
.io { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.io.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .io { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   AMBIENT WASHES: every section leaks a little of its own color
   into the page, so no scroll position sits on flat black. All
   of them live in the negative z layer, behind every section's
   content.
   ============================================================ */
.moment, .mempage, .find, .utils, .trust, .agents, .pricing, .faq, .closer { position: relative; }
.moment::before, .mempage::before, .find::before,
.utils::before, .trust::before, .agents::before, .pricing::before, .faq::before, .closer::before {
  content: ''; position: absolute; left: 0; right: 0;
  z-index: -1; pointer-events: none;
}
/* the capture scene's sunset, bleeding up into the hero and out */
.moment::before {
  top: -420px; bottom: -140px;
  background:
    radial-gradient(42% 46% at 50% 55%, oklch(0.55 0.10 45 / 0.30), transparent 70%),
    radial-gradient(30% 34% at 24% 40%, oklch(0.52 0.11 305 / 0.26), transparent 72%),
    radial-gradient(26% 30% at 76% 42%, oklch(0.64 0.12 62 / 0.22), transparent 72%);
}
/* the memo page: cool blue, the map card's hue, plus a hint of the tag
   palette's pink and teal on the shoulders for the memo-pill switcher */
.mempage::before {
  top: -40px; bottom: -60px;
  background:
    radial-gradient(44% 46% at 50% 42%, oklch(0.52 0.10 245 / 0.22), transparent 72%),
    radial-gradient(30% 36% at 22% 22%, oklch(0.54 0.11 340 / 0.13), transparent 72%),
    radial-gradient(30% 36% at 78% 76%, oklch(0.54 0.09 195 / 0.12), transparent 72%);
}
/* the graph story: violet around the focus graph and the big graph */
.find::before {
  top: 60px; bottom: -80px;
  background:
    radial-gradient(36% 26% at 50% 30%, oklch(0.52 0.12 285 / 0.28), transparent 72%),
    radial-gradient(44% 24% at 50% 82%, oklch(0.48 0.11 300 / 0.24), transparent 72%);
}
/* the everyday utilities: a small, quiet yellow */
.utils::before {
  top: -40px; bottom: -40px;
  background: radial-gradient(38% 52% at 50% 50%, oklch(0.60 0.08 95 / 0.10), transparent 72%);
}
/* your-data: the faintest cool green, echoing the verified checks */
.trust::before {
  top: -60px; bottom: 0;
  background: radial-gradient(46% 44% at 50% 32%, oklch(0.57 0.09 172 / 0.26), transparent 72%);
}
/* agents: indigo, the accent's own hue */
.agents::before {
  top: -40px; bottom: -60px;
  background: radial-gradient(42% 46% at 50% 40%, oklch(0.52 0.11 278 / 0.22), transparent 72%);
}
/* pricing: warm again, closing the loop with the capture scene */
.pricing::before {
  top: -80px; bottom: -60px;
  background: radial-gradient(40% 48% at 50% 42%, oklch(0.61 0.11 55 / 0.26), transparent 72%);
}
/* faq: barely-there violet, a rest between the two warm peaks */
.faq::before {
  top: -40px; bottom: -40px;
  background: radial-gradient(42% 50% at 50% 45%, oklch(0.50 0.09 285 / 0.15), transparent 72%);
}
/* closer: the hero's night sky again behind the last constellation */
.closer::before {
  top: -60px; bottom: 0;
  background:
    radial-gradient(44% 52% at 50% 55%, oklch(0.52 0.11 275 / 0.24), transparent 72%),
    radial-gradient(26% 34% at 72% 40%, oklch(0.55 0.10 45 / 0.15), transparent 72%);
}

/* ============================================================
   HERO — one claim, then the product
   ============================================================ */
.hero { padding: 112px 0 30px; text-align: center; position: relative; overflow: hidden; }
/* The mark above the headline, and the only thing on this page that carries the forming
   loop: the planes arrive one coverage level at a time and the middle they share lands
   last, which is the headline's own sentence drawn rather than written. The loop lives
   inside mark-forming.svg, so it runs from a plain background-image and honours reduced
   motion there; the reveal below is only its entrance. It rhymes with the closer, which
   already sets the mark above a headline - the same device opening and closing the page. */
.wm-hero {
  display: block; width: 76px; height: 80px; margin: 0 auto 28px;
  background-image: url(mark-forming.svg);
}
.hero h1 { font-size: clamp(34px, 4vw, 54px); max-width: 20ch; margin: 0 auto; }
.hero h1 .hl { color: var(--accent-soft); white-space: nowrap; }
.hero .sub { font-size: clamp(16.5px, 1.5vw, 18px); color: var(--muted); line-height: 1.65; max-width: 52ch; margin: 22px auto 0; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.hero-under { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.hero-money { font-weight: 500; font-size: 16px; color: var(--text); }
.hero-money [data-price] { color: var(--accent-soft); }
.hero-note { font-size: 13.5px; color: var(--muted); max-width: 52ch; }

/* faint constellation behind the hero: the signature motif, whispered */
.constellation {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
  width: 1200px; height: 480px; z-index: -1; pointer-events: none; opacity: 0.9;
  -webkit-mask-image: radial-gradient(78% 88% at 50% 32%, #000 42%, transparent 84%);
  mask-image: radial-gradient(78% 88% at 50% 32%, #000 42%, transparent 84%);
}
.constellation .gnode2 { opacity: 0.8; }
.constellation svg { position: absolute; inset: 0; }
.constellation svg line { stroke: oklch(1 0 0 / calc(0.17 + var(--lp, 0) * 0.3)); stroke-width: 1; transition: stroke .35s ease; }

/* the constellation breathes: each cluster (its pills and its lines,
   sharing a cl-* class so they move as one unit) drifts ~15px on its
   own slow period, dots twinkle staggered, and every ~6s one edge
   re-draws itself brighter, a connection quietly forming (picked
   from landing-flow.js, which toggles .form; lines carry
   pathLength="100" so one dash length fits them all) */
.constellation .gnode2 { transition: color .35s ease, border-color .35s ease, box-shadow .35s ease; }

/* the constellation answers the cursor: landing-flow.js writes --p on
   each pill and --lp on each line (0..1 proximity, eased per frame), and
   everything below blends continuously with it - glow, text, border,
   dots, duo gradients, line brightness. No threshold, no movement.
   These rules sit BEFORE the .form ones so a forming edge still outshines
   the cursor at equal specificity */
.constellation .gnode2 {
  box-shadow: 0 0 calc(var(--p, 0) * 26px) color-mix(in oklch, var(--nc) 50%, transparent);
}
.constellation .gnode2.dim {
  color: color-mix(in oklch, var(--text) calc(var(--p, 0) * 100%), var(--muted));
  border-color: color-mix(in oklch, var(--nc) calc(52% + var(--p, 0) * 48%), transparent);
}
.constellation .gnode2.dim .dot {
  background: color-mix(in oklch, var(--td, var(--nc)) calc(60% + var(--p, 0) * 40%), transparent);
}
.constellation .gnode2.dim.duo {
  border-color: transparent;
  background:
    linear-gradient(oklch(0.26 0.010 265 / 0.97), oklch(0.26 0.010 265 / 0.97)) padding-box,
    linear-gradient(115deg,
      color-mix(in oklch, var(--td) calc(45% + var(--p, 0) * 55%), transparent),
      color-mix(in oklch, var(--td2, var(--td)) calc(45% + var(--p, 0) * 55%), transparent)) border-box;
}

.constellation .gnode2.form {
  color: var(--body);
  border-color: color-mix(in oklch, var(--nc) 80%, transparent);
  box-shadow: 0 0 16px color-mix(in oklch, var(--nc) 25%, transparent);
}
.constellation .gnode2.form .dot { background: var(--td, var(--nc)); }
@media (prefers-reduced-motion: no-preference) {
  /* drift animates `translate`, never `transform`: the pills center
     themselves with transform, and the two must compose */
  .constellation .cl-a { animation: cdrift1 24s ease-in-out infinite; }
  .constellation .cl-b { animation: cdrift2 30s ease-in-out infinite; }
  .constellation .cl-c { animation: cdrift3 21s ease-in-out infinite; }
  .constellation .cl-d { animation: cdrift2 27s ease-in-out infinite reverse; }
  .constellation .cl-e { animation: cdrift1 33s ease-in-out infinite reverse; }
  @keyframes cdrift1 { 0%, 100% { translate: 0 0; } 33% { translate: 14px -16px; } 66% { translate: -12px 12px; } }
  @keyframes cdrift2 { 0%, 100% { translate: 0 0; } 30% { translate: -16px 12px; } 65% { translate: 12px -14px; } }
  @keyframes cdrift3 { 0%, 100% { translate: 0 0; } 40% { translate: 12px 14px; } 70% { translate: -14px -10px; } }
  .constellation .gnode2 .dot { animation: ctwinkle 6.5s ease-in-out infinite; }
  .constellation .gnode2:nth-of-type(2n) .dot { animation-delay: -3.1s; }
  .constellation .gnode2:nth-of-type(3n) .dot { animation-delay: -5.4s; }
  @keyframes ctwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .constellation line.form {
    stroke: color-mix(in oklch, var(--accent-soft) 65%, transparent);
    stroke-dasharray: 100;
    animation: cform 1.7s ease forwards;
  }
  @keyframes cform { 0% { stroke-dashoffset: 100; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
  @keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   THE MOMENT — capture box over a busy screen (vivid moment #1)
   ============================================================ */
.moment { padding: 56px 0 56px; }
/* The stage is a fixed-pixel composition (see the .gfit note): the menu bar,
   the browser behind, the capture box and the app window are all placed
   against the stage's own coordinate space, so it scales as one unit and
   never reflows. Narrow screens get a TIGHTER frame rather than a smaller
   copy of the wide one - the stage crops in to just past the capture box,
   so the scaler has far less left to shrink away and the mock stays legible.
   overflow is visible here, unlike the graph canvases: the stage's drop
   shadow falls outside its own box and a clipping scaler would cut it off. */
.moment-fit { --fit-w: 1020; --fit-h: 560; overflow: visible; }
.moment-stage {
  position: relative; width: 1020px; height: 560px; transform-origin: 0 0;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(40% 12% at 30% 30%, oklch(0.95 0.04 70 / 0.25), transparent 70%),
    radial-gradient(52% 10% at 70% 44%, oklch(0.90 0.05 50 / 0.20), transparent 72%),
    radial-gradient(78% 55% at 80% 8%, oklch(0.90 0.11 70 / 0.90), transparent 58%),
    radial-gradient(60% 45% at 12% 88%, oklch(0.52 0.09 18 / 0.70), transparent 62%),
    radial-gradient(50% 40% at 62% 66%, oklch(0.72 0.07 40 / 0.45), transparent 66%),
    linear-gradient(180deg, oklch(0.44 0.10 268) 0%, oklch(0.55 0.09 300) 38%, oklch(0.67 0.10 46) 72%, oklch(0.42 0.09 24) 100%);
  box-shadow: 0 36px 90px oklch(0 0 0 / 0.5);
}
.ws-menubar {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 5;
  display: flex; align-items: center; gap: 18px; padding: 0 14px;
  background: oklch(0.16 0.01 265 / 0.16);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
  font-size: 12.5px; color: oklch(0.97 0.004 265);
}
.ws-apple { width: 12px; height: 12px; border-radius: 4px; background: oklch(0.97 0.004 265); opacity: 0.92; }
.ws-menubar b { font-weight: 700; letter-spacing: -0.1px; }
.ws-menubar .mi { opacity: 0.82; }
.ws-menubar .sp { flex: 1; }
/* The app's own menu bar icon, on the right of the bar where macOS puts the status items,
   because that presence is a thing the product actually has and the mocks were leaving it out.
   NOT mark.svg: the bar carries its own reading of the drawing, so `menubar-icon.svg` is the
   very file the app ships (generated - see the icons note in README.md). Full opacity and no
   filter, on purpose: the shipped glyph carries colour and takes no tint from the system, so
   dimming it here would be showing an icon the user will not get. Sized against the bar the way
   the platform sizes it, 18 of the bar's 24 points. */
.ws-extra {
  width: 19px; height: 19px; margin-right: -6px; flex: none;
  background: url(menubar-icon.svg) center / contain no-repeat;
}
/* the clock is the same system UI face as the menus, never mono */
.ws-clock { font-size: 12px; font-weight: 500; opacity: 0.9; font-variant-numeric: tabular-nums; }

/* the browser behind (dimmed, out of focus) */
.fb {
  position: absolute; left: 60px; right: 60px; top: 44px; bottom: -30px;
  border-radius: 14px; overflow: hidden;
  background: oklch(0.185 0.008 265 / 0.82);
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--ws-win-border);
  box-shadow: 0 30px 70px -18px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0 0 0 / 0.28);
  filter: blur(1px) brightness(0.85) saturate(0.94);
  font-size: 13px;
}
.fb-play {
  width: 56px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--t-red); color: #fff;
  box-shadow: 0 6px 20px oklch(0.65 0.22 25 / 0.4);
}
.fb-play svg { width: 20px; height: 20px; margin-left: 2px; }
.fb-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 36%; background: var(--t-red); }

/* the capture box */
.cap2 {
  --yt: oklch(0.64 0.22 25);
  position: absolute; left: 50%; top: 258px; transform: translateX(-50%);
  width: 680px; border-radius: 18px; overflow: hidden;
  background: var(--ws-win);
  backdrop-filter: blur(40px) saturate(1.7); -webkit-backdrop-filter: blur(40px) saturate(1.7);
  border: 1px solid var(--ws-win-border);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 2px 6px oklch(0 0 0 / 0.30), 0 30px 70px oklch(0 0 0 / 0.50);
  font-size: 13px;
}
/* The living accent: inset past the corner radius with rounded caps, so it
   reads as a deliberate accent line, never as a broken colored border. */
.cap2-sheen {
  position: absolute; top: 0; left: 20px; right: 20px; height: 3px; z-index: 1;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--yt) 0%, color-mix(in oklch, var(--yt) 55%, white) 14%, var(--yt) 30%, var(--yt) 70%, color-mix(in oklch, var(--yt) 55%, white) 86%, var(--yt) 100%);
  background-size: 200% 100%;
}
.cap2-glow {
  position: absolute; top: -50px; left: -40px; width: 250px; height: 175px;
  pointer-events: none; opacity: 0.7;
  background: radial-gradient(circle, color-mix(in oklch, var(--yt) 22%, transparent), transparent 70%);
}
.cap2-grip { display: flex; justify-content: center; padding: 9px 0 1px; color: var(--faint); }
.cap2-grip svg { display: block; }
.cap2-body { display: flex; gap: 18px; padding: 11px 24px 18px; }
.cap2-tile {
  width: 118px; height: 118px; border-radius: 14px; flex-shrink: 0; position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, oklch(0.42 0.05 26) 0 9px, oklch(0.48 0.055 26) 9px 18px);
  box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--yt) 55%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.10);
  display: grid; place-items: center;
}
.cap2-tdisc {
  width: 45px; height: 45px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.15 0.01 26 / 0.55); color: oklch(0.96 0.02 26);
}
.cap2-tdisc svg { width: 22px; height: 22px; margin-left: 2px; }
.cap2-cap {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px;
  background: oklch(0.14 0.005 250 / 0.74); font-family: var(--mono); font-size: 9px;
  color: oklch(0.9 0.01 250); letter-spacing: 0.3px;
}
.cap2-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.cap2-meta { display: flex; align-items: center; gap: 9px; }
.cap2-xpill {
  padding: 3px 8px; border-radius: 6px;
  background: color-mix(in oklch, var(--yt) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--yt) 42%, transparent);
  color: color-mix(in oklch, var(--yt) 70%, white);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
}
.cap2-app { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.cap2-title { font-family: var(--grotesk); font-size: 21px; font-weight: 600; color: var(--text); letter-spacing: -0.4px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap2-sub { font-size: 14px; font-weight: 500; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap2-chips { display: flex; gap: 7px; margin-top: 2px; }
.cap2-chips span {
  padding: 3px 9px; border-radius: 7px; background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.10);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.cap2-foot {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 18px;
  border-top: 1px solid var(--ws-hair-soft); background: var(--ws-well);
}
.cap2-esc {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px;
  background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.10);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.3px;
}
.cap2-guides {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
  background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.10);
  font-size: 12px; font-weight: 500; color: var(--muted);
}
.cap2-foot .sp { flex: 1; }
.cap2-primary {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 8px 7px 14px; border-radius: 9px; border: none;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.20), 0 1px 2px oklch(0 0 0 / 0.3), 0 6px 18px oklch(0.66 0.17 270 / 0.35);
}
.cap2-key {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 5px; background: oklch(1 0 0 / 0.16);
  font-family: var(--mono); font-size: 11px; line-height: 1;
}
/* the narrow frame: the stage crops in to just past the capture box, and the
   browser behind it comes with it, so the whole scene survives the scale */
@media (max-width: 860px) {
  .moment-fit { --fit-w: 720; }
  .moment-stage { width: 720px; }
  .fb { left: 20px; right: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cap2-sheen { animation: capSheen 5.5s linear infinite; }
  .cap2-glow { animation: capGlow 5.5s ease-in-out infinite; }
  @keyframes capSheen { to { background-position: -200% 0; } }
  @keyframes capGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }
  @keyframes hintIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================
   ANY APP - the capture box over whatever's in front. One
   run-on sentence whose app name swaps with the cropped visual
   below it; the whole comp fades into the page toward the right.
   ============================================================ */
.anyapp { padding: clamp(64px, 9vw, 110px) 0 0; }
.anyapp .runon-p { max-width: 800px; font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 26px; }
.appswap { display: inline-grid; text-align: left; }
.appswap i {
  grid-area: 1 / 1; font-style: normal; font-weight: 600; white-space: nowrap;
  color: color-mix(in oklch, var(--ac, var(--text)) 82%, white);
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.appswap i.on { opacity: 1; transform: none; }
/* the roster coda under the stage: site readers as tinted names, one size down */
.anyapp .runon-coda { margin: 4px 0 0; font-size: clamp(16px, 1.8vw, 19px); }
.anyapp .runon-coda em { font-style: normal; font-weight: 600; white-space: nowrap; color: color-mix(in oklch, var(--ac) 55%, white); }
.anyapp-stage {
  --fit-w: 1280; --fit-h: 520;
  -webkit-mask-image: linear-gradient(90deg, #000 28%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 28%, transparent 62%);
}
.anyapp-canvas { width: 1280px; height: 520px; }

/* the app window behind the box */
.bk {
  position: absolute; left: 56px; top: 30px; width: 700px; height: 340px;
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -18px oklch(0 0 0 / 0.55);
  opacity: 0; transform: translateY(10px) scale(0.99);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.25,1);
  font-size: 13px; text-align: left;
}
.bk.on { opacity: 1; transform: none; }
.bk-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 13px; flex-shrink: 0; }
/* Spotify-like (dark) */
.bk-sp { background: #121214; border: 1px solid oklch(1 0 0 / 0.12); }
.bk-sp .bk-bar { background: #1a1a1e; border-bottom: 1px solid #26262b; }
.bk-pill { position: absolute; left: 50%; transform: translateX(-50%); width: 220px; height: 22px; border-radius: 999px; background: #26262b; }
.bk-sp .bk-body { flex: 1; display: flex; gap: 18px; padding: 18px; min-height: 0; }
.bk-rail { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.bk-rail i { height: 11px; border-radius: 6px; background: #232327; }
.bk-rail i:nth-child(2n) { width: 68%; }
.bk-main { flex: 1; display: flex; gap: 20px; align-items: flex-start; padding-top: 4px; }
.bk-art { width: 148px; height: 148px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(155deg, oklch(0.50 0.09 270), oklch(0.22 0.03 290)); box-shadow: 0 12px 30px oklch(0 0 0 / 0.5); }
.bk-meta { padding-top: 10px; }
.bk-meta em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #85858d; }
.bk-meta b { display: block; margin-top: 7px; font-family: var(--grotesk); font-size: 26px; letter-spacing: -0.3px; color: #fff; }
.bk-meta span { display: block; margin-top: 6px; font-size: 13px; color: #9a9aa2; }
.bk-player { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; background: #1a1a1e; border-top: 1px solid #26262b; flex-shrink: 0; }
.bk-part { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(155deg, oklch(0.50 0.09 270), oklch(0.22 0.03 290)); }
.bk-ptxt b { display: block; font-size: 12px; color: #eee; }
.bk-ptxt span { display: block; font-size: 10.5px; color: #85858d; }
.bk-prog { flex: 1; height: 4px; border-radius: 2px; background: #2c2c31; position: relative; margin: 0 16px; }
.bk-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 2px; background: oklch(0.72 0.16 158); }
.bk-time { font-family: var(--mono); font-size: 10px; color: #85858d; }
/* Notes-like (light) */
.bk-nt { background: var(--lt-page); border: 1px solid oklch(0 0 0 / 0.25); }
.bk-nt .bk-bar { background: linear-gradient(180deg, var(--lt-chrome), var(--lt-chrome-2)); border-bottom: 1px solid var(--lt-chrome-hair); }
.bk-tools { margin-left: auto; display: flex; gap: 10px; }
.bk-tools i { width: 20px; height: 14px; border-radius: 4px; background: var(--lt-well); }
.bk-nt .bk-body { flex: 1; display: flex; min-height: 0; }
.bk-list { width: 210px; flex-shrink: 0; border-right: 1px solid var(--lt-well); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--lt-page-2); }
.bk-noterow { border-radius: 8px; padding: 9px 10px; }
/* the selected row keeps Notes' yellow (it is the app's whole cue), one notch
   down in lightness to sit with the rest of the --lt-* family */
.bk-noterow.sel { background: oklch(0.855 0.105 88); }
.bk-noterow b { display: block; font-size: 11.5px; color: var(--lt-ink); }
.bk-noterow span { display: block; margin-top: 3px; font-size: 10px; color: oklch(0.45 0.05 85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-noterow i { display: block; height: 9px; border-radius: 5px; background: var(--lt-skel-2); }
.bk-notebody { flex: 1; min-width: 0; padding: 16px 24px; }
.bk-date { display: block; text-align: center; font-size: 10px; color: var(--lt-ink-3); }
.bk-notebody h4 { margin: 16px 0 0; font-size: 17.5px; color: var(--lt-ink); }
.bk-notebody p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.65; color: oklch(0.38 0.008 285); max-width: 54ch; }
/* Preview-like (PDF): unified toolbar, thumbnail sidebar, gray canvas */
.bk-pv { background: oklch(0.60 0.006 285); border: 1px solid oklch(0 0 0 / 0.3); }
.bk-pv .bk-bar { height: 42px; gap: 10px; background: linear-gradient(180deg, var(--lt-chrome), var(--lt-chrome-2)); border-bottom: 1px solid var(--lt-chrome-hair); }
.pv-side { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: var(--lt-well); color: var(--lt-ink-2); }
.pv-side svg { width: 13px; height: 13px; }
.pv-side svg:last-child { width: 10px; height: 10px; }
.pv-title { display: inline-flex; align-items: baseline; gap: 7px; margin-left: 2px; min-width: 0; }
.pv-title b { font-size: 12px; font-weight: 600; color: var(--lt-ink); white-space: nowrap; }
.pv-title span { font-size: 10.5px; color: var(--lt-ink-3); white-space: nowrap; }
.pv-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 13px; color: var(--lt-ink-2); }
.pv-tools svg { width: 14px; height: 14px; }
.pv-search { display: inline-flex; align-items: center; gap: 5px; width: 104px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--lt-page); border: 1px solid var(--lt-well); color: var(--lt-ink-3); font-size: 10.5px; flex-shrink: 0; }
.pv-search svg { width: 11px; height: 11px; }
.pv-body { flex: 1; display: flex; min-height: 0; }
.pv-thumbs { width: 76px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 13px 0; background: oklch(0.68 0.005 285); border-right: 1px solid oklch(0.60 0.006 285); }
.pv-th { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pv-pg { width: 42px; height: 54px; border-radius: 2px; background: var(--lt-page); box-shadow: 0 1px 3px oklch(0 0 0 / 0.3); padding: 7px 5px; }
.pv-pg i { display: block; height: 3px; border-radius: 2px; background: var(--lt-skel-2); margin-top: 3px; }
.pv-pg i:first-child { margin-top: 0; width: 60%; margin-left: 20%; }
.pv-th.sel .pv-pg { outline: 2px solid #3478f6; outline-offset: 1px; }
.pv-th b { font-size: 8.5px; font-weight: 500; line-height: 13px; color: var(--lt-ink); }
.pv-th.sel b { color: var(--lt-page); background: #3478f6; padding: 0 6px; border-radius: 999px; }
.bk-pagewrap { flex: 1; display: grid; place-items: center; padding: 18px; min-height: 0; }
.bk-page { width: 320px; max-height: 100%; background: var(--lt-page); border-radius: 3px; box-shadow: 0 14px 40px oklch(0 0 0 / 0.45); padding: 24px 26px; overflow: hidden; }
.bk-page b { display: block; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; color: var(--lt-ink); }
.bk-page em { display: block; text-align: center; margin-top: 7px; font-style: normal; font-size: 8.5px; line-height: 1.5; color: var(--lt-ink-2); }
.bk-page i { display: block; height: 6px; border-radius: 3px; background: var(--lt-skel-2); margin-top: 7px; }
.bk-page i.first { margin-top: 16px; }

/* the capture card, one pane per source */
.anyapp-pane {
  position: absolute; left: 120px; top: 252px; width: 680px;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.anyapp-pane.on { opacity: 1; visibility: visible; }
/* over the near-black page the glass tint reads too see-through; keep the
   blur but make the card mostly opaque */
.anyapp-pane .cap2 { position: relative; left: auto; top: auto; transform: none; background: oklch(0.235 0.013 270 / 0.95); }
.ct-glyph { background: linear-gradient(150deg, color-mix(in oklch, var(--yt) 30%, oklch(0.30 0.01 260)) 0%, color-mix(in oklch, var(--yt) 11%, oklch(0.21 0.01 260)) 100%); }
.ct-glyph .cap2-tdisc { background: oklch(0.14 0.01 260 / 0.5); color: color-mix(in oklch, var(--yt) 65%, white); }
.ct-glyph .cap2-tdisc svg { margin-left: 0; }
.ct-spotify { background: linear-gradient(155deg, oklch(0.50 0.09 270) 0%, oklch(0.24 0.04 290) 60%, oklch(0.17 0.02 300) 100%); }
/* Narrow screens get the comp framed tight around the window and the box
   instead of a scaled-down copy of the wide one. The fade toward the right
   is a wide-screen idiom - it needs room to be a crop of something larger,
   and on a phone it would spend half the width fading - so the mask comes
   off and the empty right third it was fading through comes out with it. */
@media (max-width: 860px) {
  .anyapp-stage { --fit-w: 800; --fit-h: 460; -webkit-mask-image: none; mask-image: none; }
  .anyapp-canvas { width: 800px; height: 460px; }
  .bk { left: 20px; top: 16px; }
  .anyapp-pane { left: 80px; top: 226px; }
}

/* ============================================================
   THE APP WINDOW mock - one dark glass sheet, shared by the
   scene stage and the memo-page sections
   ============================================================ */
.vapp {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px;
  background: oklch(0.196 0.013 270 / 0.78);
  backdrop-filter: blur(34px) saturate(1.25); -webkit-backdrop-filter: blur(34px) saturate(1.25);
  border: 1px solid oklch(1 0 0 / 0.14);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 30px 80px oklch(0 0 0 / 0.55);
  text-align: left; font-size: 13px;
}
.vapp-tb { position: relative; display: flex; align-items: center; height: 34px; padding: 0 13px; flex-shrink: 0; }
.vapp-lights, .vsaf-lights { display: flex; gap: 7px; }
.vapp-lights i, .vsaf-lights i { width: 11px; height: 11px; border-radius: 50%; }
.vapp-lights i:nth-child(1), .vsaf-lights i:nth-child(1) { background: #ff5f57; }
.vapp-lights i:nth-child(2), .vsaf-lights i:nth-child(2) { background: #febc2e; }
.vapp-lights i:nth-child(3), .vsaf-lights i:nth-child(3) { background: #28c840; }
.vapp-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); }
.vapp-main { display: flex; flex: 1; min-height: 0; }
.vapp-rail { width: 54px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0 12px; }
/* The mark in the mock app's own rail: the app draws it bare, so the depiction does too. */
.vapp-mark {
  width: 28px; height: 30px; margin-bottom: 10px; flex-shrink: 0;
  background: url(mark.svg) center / contain no-repeat;
}
.vapp-ico {
  position: relative; width: 34px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; color: var(--muted);
}
.vapp-ico svg { width: 16px; height: 16px; }
.vapp-ico.on { background: oklch(1 0 0 / 0.10); color: var(--text); }
.vapp-ico .vbadge {
  position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
}
.vapp-ico.set { margin-top: auto; }
.vapp-content { flex: 1; min-width: 0; position: relative; padding: 6px 16px 14px 4px; }

/* toolbar + filter row (graph scene) */
.vtb { display: flex; align-items: center; gap: 10px; }
.vtb .fsearch { flex: 1; height: 34px; }
.vswitch { display: flex; padding: 3px; border-radius: 9px; background: var(--well); border: 1px solid oklch(1 0 0 / 0.06); flex-shrink: 0; }
.vswitch span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.vswitch span svg { width: 12px; height: 12px; }
.vswitch span.on { background: oklch(1 0 0 / 0.10); color: var(--text); }
.vnew {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; flex-shrink: 0;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), 0 4px 14px oklch(0.66 0.17 270 / 0.3);
}
.vfil { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.vfil .cap { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.vfil .fbar-add { padding: 3px 9px; font-size: 11px; }
.vfil .count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ── the scene stage: capture, then the app itself, in phases ── */
.vstage { user-select: none; }
.vstage .hint {
  position: absolute; left: 50%; transform: translateX(-50%); top: 466px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; color: oklch(0.93 0.008 265);
  background: oklch(0.2 0.012 265 / 0.8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
  transition: opacity .4s ease;
}
.vstage .hint .kbd { background: oklch(0.32 0.008 255); }

/* the Safari-like light browser (overrides the landing's dark .fb). Its whole
   Safari read is shape, not luminance: three lights, the centered lock-and-url
   pill, chevrons left and share/plus right. So it can lose a lot of light and
   stay recognizable, which is the point of the --lt-* set it is painted from. */
.vstage .fb {
  /* a narrower footprint than the generic browser-behind, with its bottom edge
     on the stage rather than bled off it: the window reads as a window on a
     desktop, and the backdrop it sits on gets to show around it */
  left: 92px; right: 92px; bottom: 26px;
  display: flex; flex-direction: column;
  /* the frame, not the page: current Safari floats the web content inside the
     window chrome, so this colour is what shows around the inset page */
  background: var(--lt-chrome-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: none;
  border: 1px solid oklch(0 0 0 / 0.26);
  box-shadow: 0 30px 70px -18px oklch(0 0 0 / 0.5), 0 0 0 0.5px oklch(1 0 0 / 0.18) inset;
  transition: opacity .55s ease, filter .55s ease, transform .6s cubic-bezier(.2,.8,.25,1);
}
/* the scene's own light falls across the browser: warm from the backdrop's
   bright blob at top right, deep red from its lower left. Without this the
   window ignores the gradient it sits on and reads as a sticker pasted over
   the composition, which is half of why pure white felt aggressive here. */
.vstage .fb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 95% at 90% -10%, oklch(0.90 0.11 70 / 0.17), transparent 58%),
    radial-gradient(95% 85% at 4% 110%, oklch(0.45 0.10 20 / 0.15), transparent 62%);
}
/* no divider under the toolbar: the inset page below is what separates them */
.vsaf-bar {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--lt-chrome), var(--lt-chrome-2));
}
.vsaf-side { display: inline-flex; align-items: center; gap: 2px; margin-left: 3px; color: var(--lt-ink-2); }
.vsaf-side svg { width: 15px; height: 15px; }
.vsaf-side .vsaf-chev { width: 9px; height: 9px; opacity: 0.7; }
.vsaf-nav { display: flex; gap: 14px; color: var(--lt-ink-3); }
.vsaf-nav svg { width: 14px; height: 14px; }
.vsaf-nav svg:last-child { opacity: 0.45; }
/* the url field: lock left, address centred, reload right, sized as a field
   rather than hugging its text (a short domain in a wide window otherwise
   reads as a chip) */
.vsaf-cap {
  margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  width: 34%; min-width: 210px; height: 26px; padding: 0 9px; border-radius: 8px;
  background: var(--lt-well); color: var(--lt-ink-2); font-size: 11.5px;
}
.vsaf-cap b { font-weight: 400; text-align: center; }
.vsaf-cap svg { width: 11px; height: 11px; color: var(--lt-ink-3); }
.vsaf-acts { display: flex; align-items: center; gap: 13px; color: var(--lt-ink-3); }
.vsaf-acts svg { width: 14px; height: 14px; }
.vsaf-acts .vsaf-ov { width: 15px; height: 15px; }
/* the page floats inside the frame with its own rounded corners, so page
   content that runs past the fold clips against the page, not the window */
.vsaf-body {
  flex: 1; min-height: 0; display: flex; gap: 20px; padding: 18px 20px;
  margin: 0 8px 8px; border-radius: 10px; overflow: hidden;
  background: var(--lt-page);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.07), 0 1px 3px oklch(0 0 0 / 0.10);
}
.vyt-main { flex: 1.85; min-width: 0; }
.vyt-player {
  position: relative; height: 232px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(155deg, #24262b, #0e0f12);
}
.vyt-player .fb-play {
  width: 56px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--t-red); color: #fff;
  box-shadow: 0 6px 20px oklch(0.65 0.22 25 / 0.4);
}
.vyt-player .fb-play svg { width: 20px; height: 20px; margin-left: 2px; }
.vyt-player .fb-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: #f03; }
.vyt-title { margin-top: 12px; font-size: 15.5px; font-weight: 700; color: var(--lt-ink); letter-spacing: -0.1px; }
.vyt-chrow { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.vyt-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(140deg, oklch(0.72 0.01 285), oklch(0.63 0.012 285)); }
.vyt-chtxt b { display: block; font-size: 12.5px; color: var(--lt-ink); line-height: 1.25; }
.vyt-chtxt span { display: block; font-size: 10.5px; color: var(--lt-ink-2); }
.vyt-subbtn { margin-left: 10px; height: 29px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--lt-ink); color: var(--lt-page); font-size: 11.5px; font-weight: 600; }
.vyt-pills { margin-left: auto; display: flex; gap: 8px; }
.vyt-pill { height: 29px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--lt-page-2); color: var(--lt-ink); font-size: 11px; font-weight: 500; }
.vyt-pill svg { width: 13px; height: 13px; }
/* description panel and one comment: the page used to end at the channel row,
   leaving a tall blank field that was the window's brightest single region */
.vyt-desc { margin-top: 14px; padding: 10px 13px 12px; border-radius: 11px; background: var(--lt-page-2); }
.vyt-desc b { display: block; font-size: 11px; font-weight: 600; color: var(--lt-ink); }
.vyt-desc i { display: block; height: 7px; border-radius: 4px; background: var(--lt-skel); margin-top: 8px; }
.vyt-cmt { display: flex; gap: 10px; margin-top: 15px; }
.vyt-cav { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(140deg, oklch(0.70 0.025 300), oklch(0.59 0.03 300)); }
.vyt-clines { flex: 1; min-width: 0; padding-top: 4px; }
.vyt-clines i { display: block; height: 7px; border-radius: 4px; background: var(--lt-skel); }
.vyt-clines i + i { margin-top: 6px; background: var(--lt-skel-2); }
.vyt-rail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vyt-rec { display: flex; gap: 9px; }
/* the recommended thumbnails carry real mid-dark tone rather than a near-white
   placeholder: five blank light rectangles were a third of the window's glare
   on their own, and perceived brightness is area as much as lightness. Low
   chroma so they read as photographs without fighting the page's palette. */
.vyt-rec i {
  width: 96px; height: 54px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(150deg, oklch(0.62 0.05 250), oklch(0.42 0.04 265));
}
.vyt-rec:nth-child(2) i { background: linear-gradient(150deg, oklch(0.66 0.06 78), oklch(0.45 0.05 42)); }
.vyt-rec:nth-child(3) i { background: linear-gradient(150deg, oklch(0.58 0.04 160), oklch(0.38 0.03 195)); }
.vyt-rec:nth-child(4) i { background: linear-gradient(150deg, oklch(0.61 0.05 320), oklch(0.40 0.04 292)); }
.vyt-rec:nth-child(5) i { background: linear-gradient(150deg, oklch(0.64 0.025 250), oklch(0.44 0.02 250)); }
.vyt-rec:nth-child(6) i { background: linear-gradient(150deg, oklch(0.60 0.05 30), oklch(0.41 0.04 15)); }
.vyt-rec:nth-child(7) i { background: linear-gradient(150deg, oklch(0.63 0.04 200), oklch(0.43 0.035 225)); }
.vyt-rec div { flex: 1; min-width: 0; padding-top: 2px; }
.vyt-rec b { display: block; height: 8px; border-radius: 4px; background: var(--lt-skel); width: 92%; }
.vyt-rec b + b { margin-top: 5px; width: 70%; }
.vyt-rec span { display: block; height: 7px; border-radius: 4px; background: var(--lt-skel-2); width: 55%; margin-top: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .vstage .fb-prog { animation: vProg 30s linear infinite; }
  @keyframes vProg { from { width: 30%; } to { width: 82%; } }
}

/* phase 2: the capture box */
.vstage .cap2 {
  opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.985);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2,.8,.25,1);
  z-index: 5;
}
.vstage[data-phase="2"] .cap2 { opacity: 1; transform: translateX(-50%); }
/* once the box is up it is the subject: the page behind takes a small step
   back, one stop on the same axis the 4-7 hand-off uses further down */
.vstage[data-phase="2"] .fb { filter: blur(0.6px) brightness(0.93) saturate(0.96); }
.vstage .cap2-tile, .vstage .cap2-meta, .vstage .cap2-title, .vstage .cap2-sub, .vstage .cap2-chips, .vstage .cap2-foot {
  opacity: 0; transform: translateY(7px); transition: opacity .4s ease, transform .4s ease;
}
.vstage[data-phase="2"] .cap2-tile { opacity: 1; transform: none; transition-delay: .15s; }
.vstage[data-phase="2"] .cap2-meta { opacity: 1; transform: none; transition-delay: .28s; }
.vstage[data-phase="2"] .cap2-title { opacity: 1; transform: none; transition-delay: .40s; }
.vstage[data-phase="2"] .cap2-sub { opacity: 1; transform: none; transition-delay: .50s; }
.vstage[data-phase="2"] .cap2-chips { opacity: 1; transform: none; transition-delay: .60s; }
.vstage[data-phase="2"] .cap2-foot { opacity: 1; transform: none; transition-delay: .72s; }

/* phases 4-7: the app window takes the stage */
.vstage .vapp {
  position: absolute; left: 56px; right: 56px; top: 46px; bottom: 20px; z-index: 6;
  opacity: 0; transform: translateY(18px) scale(0.985);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.25,1);
  pointer-events: none;
}
.vstage:is([data-phase="4"],[data-phase="5"],[data-phase="6"],[data-phase="7"]) .vapp { opacity: 1; transform: none; }
/* the hand-off dim is a step down from the browser's resting tone, not an
   absolute: once the resting state stopped being pure white, the old
   0.5/0.75 pair erased the window entirely and the scene lost the "another
   app is behind this" cue the phase change trades on. The offset is there for
   the same reason: the browser is narrower than the app window that lands in
   front of it, so without it nothing of the browser shows at all - two windows
   on a desktop are never concentric anyway. */
.vstage:is([data-phase="4"],[data-phase="5"],[data-phase="6"],[data-phase="7"]) .fb {
  opacity: 0.66; filter: blur(3px) brightness(0.88) saturate(0.92);
  transform: translate(-56px, 26px);
}
.vstage:is([data-phase="4"],[data-phase="5"],[data-phase="6"],[data-phase="7"]) .hint { opacity: 0; }
.vstage:is([data-phase="4"],[data-phase="5"],[data-phase="6"],[data-phase="7"]) .cap2 {
  opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.94);
  transition: opacity .3s ease, transform .35s ease;
}
.vapp-pane { position: absolute; inset: 6px 16px 14px 4px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.vstage:is([data-phase="4"],[data-phase="5"]) .vpage-drafts { opacity: 1; visibility: visible; }
.vstage[data-phase="6"] .vpage-review { opacity: 1; visibility: visible; }
.vstage[data-phase="7"] .vpage-graph { opacity: 1; visibility: visible; }
.vstage:is([data-phase="4"],[data-phase="5"],[data-phase="6"]) .vapp-ico[data-sec="drafts"] { background: oklch(1 0 0 / 0.10); color: var(--text); }
.vstage[data-phase="7"] .vapp-ico[data-sec="memos"] { background: oklch(1 0 0 / 0.10); color: var(--text); }
.vstage .vapp-ico .vbadge { transition: opacity .3s ease; }
.vstage[data-phase="7"] .vapp-ico .vbadge { opacity: 0; }

/* drafts page */
.vph { display: flex; align-items: baseline; gap: 10px; padding: 8px 8px 12px 12px; }
.vph b { font-family: var(--grotesk); font-size: 17px; font-weight: 600; color: var(--text); }
.vph span { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.vpage-drafts .draft-row { margin: 0 8px 8px 12px; }
.vpage-drafts .draft-row.old { opacity: 0.5; }
.vpage-drafts .pill-working { opacity: 1; transition: opacity .3s ease; }
.vpage-drafts .pill-review { opacity: 0; transition: opacity .3s ease; }
.vpage-drafts .dm-before { opacity: 1; transition: opacity .3s ease; }
.vpage-drafts .dm-after { opacity: 0; transition: opacity .3s ease; }
.vstage[data-phase="5"] .vpage-drafts .pill-working { opacity: 0; }
.vstage[data-phase="5"] .vpage-drafts .pill-review { opacity: 1; transition-delay: .12s; }
.vstage[data-phase="5"] .vpage-drafts .dm-before { opacity: 0; }
.vstage[data-phase="5"] .vpage-drafts .dm-after { opacity: 1; transition-delay: .12s; }
.vrevbtn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 26px; padding: 0 11px; border-radius: 7px;
  background: oklch(1 0 0 / 0.07); border: 1px solid oklch(1 0 0 / 0.1);
  font-size: 11.5px; font-weight: 600; color: var(--body);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.vstage[data-phase="5"] .vrevbtn { background: var(--accent); border-color: transparent; color: #fff; }

/* macOS notification */
.vnotif {
  position: absolute; top: 34px; right: 14px; z-index: 8;
  display: flex; gap: 11px; align-items: center; width: 330px; padding: 10px 13px;
  border-radius: 14px;
  background: oklch(0.3 0.012 265 / 0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(1 0 0 / 0.14);
  box-shadow: 0 16px 44px oklch(0 0 0 / 0.45);
  opacity: 0; transform: translateX(26px);
  transition: opacity .45s cubic-bezier(.2,.8,.25,1), transform .45s cubic-bezier(.2,.8,.25,1);
}
.vstage[data-phase="5"] .vnotif { opacity: 1; transform: none; transition-delay: .55s; }
.vnotif b { display: block; font-size: 12px; color: var(--text); }
.vnotif p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.vnotif .toast-ico { width: 32px; height: 32px; }

/* review + graph pages */
.vpage-review .rev { margin: 4px 8px 0 12px; }
.vpage-review .rev-map { grid-template-columns: 1.7fr 1fr; }
.vpage-review .rev-diagram { min-height: 230px; }
@media (prefers-reduced-motion: no-preference) {
  .vstage[data-phase="6"] .vpage-review .rev-pill-wrap { opacity: 0; animation: popIn2 .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--nd, .45s); }
  .vstage[data-phase="6"] .vpage-review .rev-medge { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw2 .7s ease forwards; animation-delay: var(--ed, .9s); }
  .vstage[data-phase="7"] .vpage-graph .gnode2.new { opacity: 0; animation: popIn .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--nd, .6s); }
  .vstage[data-phase="7"] .vpage-graph .gedge2.new { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw .8s ease forwards; animation-delay: var(--ed, 1.2s); }
}

/* the scene rail + its captions */
.vrail { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.vrail button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 9px; border: 1px solid transparent; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.vrail button .n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.vrail button.on { background: oklch(1 0 0 / 0.09); border-color: var(--hairline); color: var(--text); }
/* the four steps tighten rather than wrap: a 3 + 1 break reads as a mistake
   and costs the same vertical room a legible stage needs */
@media (max-width: 520px) {
  .vrail { gap: 2px; flex-wrap: nowrap; }
  .vrail button { padding: 8px 8px; gap: 5px; font-size: 12.5px; }
  .vrail button .n { font-size: 9.5px; }
}
.vscene-caps { display: grid; justify-items: center; margin-top: 10px; }
.vscene-caps p { grid-area: 1 / 1; margin: 0; text-align: center; font-size: 15px; color: var(--muted); max-width: 66ch; opacity: 0; transition: opacity .35s ease; }
.vscene-caps p.on { opacity: 1; }
.vscene-caps b { color: var(--text); font-weight: 600; }

/* a crop: one piece of real UI on a flat panel */
.crop {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.35);
  font-size: 13px;
  overflow: hidden;
  position: relative;
}

/* draft row + status pills (drafts scene) */
.draft-row {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--hairline); box-shadow: var(--ws-card-shadow);
}
.pill-review {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--good) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--good) 45%, transparent);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--good); line-height: 1.5;
}
.pill-review .rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.pill-stack { display: inline-grid; flex-shrink: 0; justify-items: start; align-items: center; }
.pill-stack > * { grid-area: 1 / 1; }
.pill-working {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent-soft); line-height: 1.5;
  opacity: 0;
}
.wspin {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid color-mix(in oklch, var(--accent-soft) 30%, transparent);
  border-top-color: var(--accent-soft);
}
.dm-tick { display: inline-grid; justify-items: end; align-items: center; }
.dm-tick span { grid-area: 1 / 1; }
.dm-tick .dm-before { opacity: 0; font-style: italic; }
.draft-row .dt { font-family: var(--grotesk); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-row .dm { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--faint); }
/* The icon in the mock macOS notification, and the ONE place on this page that shows the
   TILED artwork: a notification carries the app's own icon, which is the one placement that
   keeps its tile because macOS draws every app icon into a rounded shape of its own. */
.toast-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  background: url(app-icon.svg) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .wspin { animation: wrot .7s linear infinite; }
  @keyframes wrot { to { transform: rotate(360deg); } }
  @keyframes fadeOut { to { opacity: 0; } }
}

/* review crop - mirrors the app's draft item: queue line, review header
   with the Graph/List toggle, sectioned Memos/Links groups, footer */
.rev {
  border-radius: 12px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--hairline);
  box-shadow: var(--ws-card-shadow);
}
.rev-line { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.rev-title { font-family: var(--grotesk); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rev-head {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px 8px 14px;
  border-top: 1px solid oklch(1 0 0 / 0.06); border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.rev-counts { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--body); white-space: nowrap; }
.rev-counts svg { width: 12px; height: 12px; color: var(--muted); }
.rev-sep { color: var(--faint); }
.rev-hair { width: 1px; height: 13px; background: var(--hairline-strong); }
.rev-cap { font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.rev-toggle {
  display: flex; padding: 3px; border-radius: 9px;
  background: var(--well); border: 1px solid oklch(1 0 0 / 0.06);
}
.rev-toggle button {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border: none; border-radius: 6px; background: transparent;
  font-size: 11.5px; font-weight: 500; color: var(--muted);
}
.rev-toggle button svg { width: 12px; height: 12px; }
.rev-toggle button.on { background: oklch(1 0 0 / 0.09); color: var(--text); }
.rev-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
.rev-seccap { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.rev-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.rev-chip { padding: 1px 7px; border-radius: 5px; background: oklch(1 0 0 / 0.07); font-family: var(--mono); font-size: 9.5px; color: var(--body); }
.rev-group {
  border-radius: 10px; overflow: hidden;
  background: oklch(1 0 0 / 0.035); border: 1px solid oklch(1 0 0 / 0.06);
}
.rev-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; }
.rev-group .rev-row + .rev-row { border-top: 1px solid oklch(1 0 0 / 0.06); }
.rcheck {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  background: var(--accent); display: grid; place-items: center; color: #fff;
}
.rcheck svg { width: 10px; height: 10px; }
.rev-av {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--av, var(--muted));
  background: color-mix(in oklch, var(--av, var(--muted)) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--av, var(--muted)) 30%, transparent);
}
.rev-av svg { width: 13px; height: 13px; }
.rev-row .rtitle { font-family: var(--grotesk); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-row .rhost { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* the Graph review view: diagram + inspector, mirroring the app */
.rev-map { display: grid; grid-template-columns: 1.55fr 1fr; }
.rev-diagram {
  position: relative; overflow: hidden; min-height: 240px;
  border-right: 1px solid oklch(1 0 0 / 0.06);
  background-image:
    radial-gradient(oklch(1 0 0 / 0.055) 1px, transparent 1px),
    radial-gradient(120% 100% at 35% 45%, oklch(0.255 0.007 262), oklch(0.185 0.008 265));
  background-size: 26px 26px, auto;
}
.rev-medge { stroke: var(--mc, var(--hairline-strong)); stroke-width: 1.6; stroke-opacity: 0.7; }
.rev-pill-wrap { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.rev-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 11px; border-radius: 999px; white-space: nowrap;
  background: oklch(0.285 0.010 265);
  border: 1.5px solid color-mix(in oklch, var(--pc) 42%, oklch(1 0 0 / 0.10));
  color: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: -0.1px;
  box-shadow: var(--ws-card-shadow);
}
.rev-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex-shrink: 0; }
.rev-pill--hub {
  color: var(--text); font-size: 12px;
  border-color: color-mix(in oklch, var(--pc) 70%, oklch(1 0 0 / 0.10));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--pc) 22%, transparent), 0 6px 18px oklch(0 0 0 / 0.4);
  max-width: 230px; overflow: hidden; text-overflow: ellipsis;
}
.rev-pill-x {
  position: absolute; top: -7px; right: -7px; z-index: 3;
  width: 17px; height: 17px; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--hairline-strong);
  color: var(--muted); font-size: 11px; line-height: 1;
  box-shadow: var(--ws-card-shadow);
}
.rev-badge {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  padding: 4px 9px; border-radius: 999px;
  background: oklch(0.2 0.005 250 / 0.82); border: 1px solid oklch(1 0 0 / 0.08);
  font-family: var(--mono); font-size: 9px; color: var(--muted);
}
.rev-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 5px; padding: 8px 10px;
  border-radius: 10px;
  background: oklch(0.2 0.005 250 / 0.82); border: 1px solid oklch(1 0 0 / 0.08);
  backdrop-filter: blur(8px);
}
.rev-legend-row { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; color: var(--body); }
.rev-legend-row i { width: 7px; height: 7px; border-radius: 50%; }
.rev-inspector { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.rev-insp-name { font-family: var(--grotesk); font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.rev-insp-source { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.rev-insp-tags { display: flex; gap: 6px; }
.rev-insp-note { font-size: 11px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.tagp {
  --tc: var(--t-gray);
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 2px 8px; border-radius: 5px;
  background: color-mix(in oklch, var(--tc) 15%, transparent);
  color: color-mix(in oklch, var(--tc) 80%, white);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.6;
}
.tagp .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tc); }
.tag-yellow{--tc:var(--t-yellow)} .tag-indigo{--tc:var(--t-indigo)} .tag-gray{--tc:var(--t-gray)}
.tag-blue{--tc:var(--t-blue)} .tag-purple{--tc:var(--t-purple)} .tag-teal{--tc:var(--t-teal)}
.tag-orange{--tc:var(--t-orange)} .tag-green{--tc:var(--t-green)} .tag-red{--tc:var(--t-red)}
.rev-link .rsm { font-size: 12px; font-weight: 500; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-link .rsm.strong { color: var(--text); font-weight: 600; }
.rev-link .rarr { color: var(--faint); font-size: 12px; flex-shrink: 0; }
.rev-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: oklch(0.17 0.008 265); border-top: 1px solid oklch(1 0 0 / 0.06); }
.rev-note { font-family: var(--mono); font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
.accept {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 14px; flex-shrink: 0;
  border: none; border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 14px oklch(0.66 0.17 270 / 0.32), 0 1px 0 oklch(1 0 0 / 0.18) inset;
}
.accept svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes popIn2 { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%); } }
  @keyframes draw2 { to { stroke-dashoffset: 0; } }
}

/* fixed-size graph canvases: pill coordinates and svg share one pixel
   space (no stretching), the whole canvas scales down as a unit via JS */
.gfit { position: relative; width: 100%; overflow: hidden; }
.gcanvas { position: relative; transform-origin: 0 0; }
.gcanvas > svg { position: absolute; inset: 0; }
.gdots {
  background-image: radial-gradient(oklch(1 0 0 / 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
}
.gnode2 {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px;
  background: oklch(0.26 0.010 265 / 0.97);
  border: 1.5px solid color-mix(in oklch, var(--nc, var(--hairline-strong)) 85%, transparent);
  font-family: var(--grotesk); font-size: 11.5px; font-weight: 500;
  color: var(--body); white-space: nowrap;
}
.gnode2 .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--td, var(--nc, var(--hairline-strong))); }
.gnode2 .dot + .dot { margin-left: -4px; }
.gnode2.dim { color: var(--muted); border-color: color-mix(in oklch, var(--nc, var(--hairline-strong)) 52%, transparent); }
.gnode2.dim .dot { background: color-mix(in oklch, var(--td, var(--nc)) 60%, transparent); }
/* multi-tag pill: one dot per tag, border fades between the tag colors */
.gnode2.duo {
  border-color: transparent;
  background:
    linear-gradient(oklch(0.26 0.010 265 / 0.97), oklch(0.26 0.010 265 / 0.97)) padding-box,
    linear-gradient(115deg,
      color-mix(in oklch, var(--td) 80%, transparent),
      color-mix(in oklch, var(--td2, var(--td)) 80%, transparent)) border-box;
}
.gnode2.dim.duo {
  border-color: transparent;
  background:
    linear-gradient(oklch(0.26 0.010 265 / 0.97), oklch(0.26 0.010 265 / 0.97)) padding-box,
    linear-gradient(115deg,
      color-mix(in oklch, var(--td) 45%, transparent),
      color-mix(in oklch, var(--td2, var(--td)) 45%, transparent)) border-box;
}
.constellation .gnode2.duo.form { border-color: transparent; }
.gnode2.new { color: var(--text); border-color: var(--nc); box-shadow: 0 0 18px color-mix(in oklch, var(--nc) 30%, transparent); }
.gedge2 { stroke: oklch(1 0 0 / 0.20); stroke-width: 1.2; }
.gedge2.new { stroke: color-mix(in oklch, var(--accent-soft) 65%, transparent); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes popIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%); } }
}

/* ============================================================
   THE MEMO PAGE - the full page as anchor + satellite crops (2A)
   ============================================================ */
.mempage { padding: clamp(88px, 12vw, 130px) 0 56px; }

/* a desktop-wallpaper backdrop so the app's glass reads. Deliberately a
   quiet dusk, never the capture stage's sunset (2026-07-24 rhythm pass):
   the page's vivid-backdrop budget is two moments, the capture stage and
   the big graph, so this desk reads by its content (covers, tags, map) */
.vdesk {
  border-radius: 14px; position: relative; overflow: hidden;
  background:
    radial-gradient(46% 40% at 76% 4%, oklch(0.44 0.05 278 / 0.55), transparent 64%),
    radial-gradient(42% 36% at 10% 92%, oklch(0.37 0.05 225 / 0.5), transparent 66%),
    radial-gradient(34% 20% at 55% 102%, oklch(0.46 0.07 50 / 0.22), transparent 70%),
    linear-gradient(180deg, oklch(0.300 0.036 272) 0%, oklch(0.262 0.030 256) 55%, oklch(0.225 0.026 236) 100%);
}

/* the memo detail page inside the app window */
.vdet .vapp-content { padding: 0; }
.vdet-crumb { padding: 2px 16px 6px; font-size: 11px; color: var(--faint); }
.vdet-cover {
  height: 122px; position: relative; margin: 0 12px; border-radius: 10px; overflow: hidden;
  background-color: oklch(0.2 0.01 265); background-size: cover; background-position: center 55%; background-repeat: no-repeat;
}
.cov-kyoto { background-image: url("img/kyoto.jpg"); background-position: center 58%; }
.cov-dune { background-image: url("img/dune.jpg"); background-position: center 62%; }
.cov-focaccia { background-image: url("img/focaccia.jpg"); background-position: center 42%; }
.vdet-inner { display: flex; gap: 16px; padding: 14px 16px 16px; }
.vdet-mainc { flex: 1; min-width: 0; }
.vdet-titler { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.vdet-titler h3 { flex-basis: 100%; font-family: var(--grotesk); font-size: 21px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); margin: 0; }
.vdet-note { font-size: 12.5px; line-height: 1.65; color: var(--body); }
.vdet-note p { margin: 10px 0 0; }
.vdet-note a { color: var(--accent-soft); border-bottom: 1px solid color-mix(in oklch, var(--accent-soft) 40%, transparent); }
.vdet-note h4 { font-family: var(--grotesk); font-size: 13.5px; font-weight: 600; color: var(--text); margin: 13px 0 0; }
.vdet-note ul, .vdet-note ol { margin: 6px 0 0; padding-left: 19px; }
.vdet-note li { margin-top: 3px; }
.vdet-note li::marker { color: var(--faint); }
.vdet-note blockquote { margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--hairline-strong); color: var(--muted); font-style: italic; }
.vdet-sec { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--ws-hair-soft); }
.vdet-sec b { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.vdet-sec span { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.vdet-sec .mini { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--well); border: 1px solid var(--hairline); font-size: 10.5px; color: var(--faint); }
.vdet-sec .mini svg { width: 10px; height: 10px; }
.vdet-links { margin-top: 9px; }
.vdet-links .vl-row { margin-bottom: 6px; padding: 7px 10px; }
.vdet-map { height: 84px; border-radius: 10px; margin-top: 12px; position: relative; overflow: hidden;
  background: url("img/map-basemap.jpg") center 32% / 170% auto no-repeat oklch(0.16 0.01 250); }
.vdet-map .mattrib { font-size: 8px; }

/* the aside, mirroring the app: status row, then eyebrow sections */
.vdet-aside { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 11px; }
/* status pill + Actions + Delete stay on one line, never wrapping */
.vdet-status { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.vdet-status .pill-review { opacity: 1; padding: 3px 6px; gap: 5px; font-size: 8.5px; letter-spacing: 0.04em; }
.vdet-status .sp { flex: 1; }
.vdet-abtn {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border-radius: 7px;
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.09);
  font-size: 10px; font-weight: 500; color: var(--body); white-space: nowrap;
}
.vdet-abtn svg { width: 10px; height: 10px; color: var(--muted); }
.vdet-abtn.danger { color: color-mix(in oklch, var(--t-red) 78%, white); background: color-mix(in oklch, var(--t-red) 8%, transparent); border-color: color-mix(in oklch, var(--t-red) 25%, transparent); }
.vdet-hr { height: 1px; background: var(--ws-hair-soft); }
.vdet-asec { display: flex; flex-direction: column; gap: 3px; }
.vdet-eyebrow { font-size: 8.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.vdet-eyerow { display: flex; align-items: baseline; gap: 8px; }
.vdet-eyerow .acts { margin-left: auto; font-size: 9.5px; color: var(--faint); }
.vdet-val { font-family: var(--mono); font-size: 10.5px; color: var(--body); }
.vdet-subv { font-size: 10px; color: var(--faint); }
.vdet-cthumb {
  height: 46px; border-radius: 7px; overflow: hidden; margin-top: 2px;
  background-color: oklch(0.2 0.01 265); background-size: cover; background-position: center 55%; background-repeat: no-repeat;
}
.vdet-url { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--accent-soft); }
.vdet-url svg { width: 9px; height: 9px; }
.vdet-stub { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--faint); }
.vdet-stub svg { width: 10px; height: 10px; }
.vdet-terms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.vdet-term { padding: 2px 7px; border-radius: 6px; background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.09); font-family: var(--mono); font-size: 9.5px; color: var(--body); }
.vdet-file { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--body); }
.vdet-file svg { width: 11px; height: 11px; color: var(--muted); flex-shrink: 0; }

/* typed-link rows */
.vl-row {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin-bottom: 7px;
  border-radius: 9px; background: oklch(1 0 0 / 0.045); border: 1px solid var(--hairline);
  box-shadow: var(--ws-card-shadow);
  max-height: 60px; overflow: hidden;
}
.vl-type {
  flex-shrink: 0; padding: 2px 7px; border-radius: 999px;
  background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.10);
  font-family: var(--mono); font-size: 9.5px; color: var(--muted); white-space: nowrap;
}
.vl-arr { color: var(--faint); flex-shrink: 0; width: 12px; height: 12px; }
.vl-target { font-family: var(--grotesk); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-row .tagp { margin-left: auto; }

/* the anchor layout: the pill rail across the top, the page left below
   it, satellite crops right, with a clear gutter so each crop floats on
   the wallpaper by itself (satellite tops sit below the pill rail) */
.vanchor { position: relative; min-height: 874px; max-width: 1020px; margin: 0 auto; padding: 24px 0 26px 16px; border-radius: 18px; box-shadow: 0 36px 90px oklch(0 0 0 / 0.5); }
.vanchor .kpills { margin-right: 16px; }
.vanchor .kstage { width: 600px; }
.vsat { position: absolute; left: 668px; width: 316px; }
.vsat .crop { padding: 16px; box-shadow: 0 28px 60px oklch(0 0 0 / 0.45); }
.vsat .vcap { font-size: 12.5px; color: var(--body); margin: 10px 2px 0; text-shadow: 0 1px 3px oklch(0 0 0 / 0.45), 0 2px 10px oklch(0 0 0 / 0.4); }
.vsat .vcap b { color: var(--text); font-weight: 600; }
.vsat.s-links { top: 84px; }
.vsat.s-map { top: 372px; }
.vsat.s-extract { top: 644px; }
@media (max-width: 1080px) {
  .vanchor { min-height: 0; padding: 26px; }
  .vanchor .kpills { margin-right: 0; }
  .vanchor .kstage { width: 100%; }
  .vsat { position: static; width: auto; max-width: 640px; margin: 22px auto 0; }
}

/* satellite loops */
.vlinks .fsearch { height: 32px; margin-bottom: 10px; }
.vlinks .vl-count { display: grid; justify-items: start; margin-bottom: 9px; }
.vlinks .vl-count span { grid-area: 1/1; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.vlinks .vl-count .after { opacity: 0; color: var(--accent-soft); }
.vlinks .vl-row { background: var(--panel-2); }
@media (prefers-reduced-motion: no-preference) {
  .play .vlinks .fs-caret { animation: hintIn .15s ease both .5s, vCaret 1s steps(2, start) infinite .6s; }
  .play .vlinks .fs-ph { animation: fadeOut .2s ease both .65s; }
  .play .vlinks .fs-typed { animation: vType .5s steps(4, end) both .8s; }
  .play .vlinks .vl-row.miss { animation: vMiss .4s ease both 1.75s; }
  .play .vlinks .vl-count .before { animation: fadeOut .3s ease both 1.75s; }
  .play .vlinks .vl-count .after { animation: hintIn .3s ease both 1.95s; }
  @keyframes vCaret { 50% { opacity: 0; } }
  @keyframes vType { from { width: 0; } to { width: 33px; } }
  @keyframes vMiss { to { max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .vlinks .fs-ph { display: none; }
  .vlinks .fs-typed { width: auto; }
}
.vmap { position: relative; height: 200px; border-radius: 12px; overflow: hidden;
  background: url("img/map-basemap.jpg") 62% 30% / 220% auto no-repeat oklch(0.16 0.01 250); }
.vmap .mattrib { z-index: 4; }
.vmap .mpin.hero { left: 52%; top: 52%; }
.vmap .vring {
  position: absolute; left: 52%; top: 52%; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid color-mix(in oklch, var(--t-orange) 70%, transparent); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .play .vmap .mpin.hero { animation: vDrop .5s cubic-bezier(.2,.9,.3,1.25) both .7s; }
  .play .vmap .mpin.small { opacity: 0; animation: hintIn .4s ease both 1.8s; }
  .play .vmap .vring { animation: vRipple 1s ease-out both 1.15s; }
  @keyframes vDrop { from { opacity: 0; transform: translate(-50%, -240%); } to { opacity: 1; transform: translate(-50%, -100%); } }
  @keyframes vRipple { from { opacity: 0.9; } to { opacity: 0; width: 64px; height: 64px; } }
}
.vext { position: relative; text-align: left; }
.vext .vx-note { font-size: 13px; line-height: 1.7; color: var(--body); margin: 0; }
.vext .vx-sel {
  background-image: linear-gradient(color-mix(in oklch, var(--accent) 38%, transparent), color-mix(in oklch, var(--accent) 38%, transparent));
  background-repeat: no-repeat; background-size: 0% 100%; border-radius: 3px;
  color: var(--text);
}
.vext .vx-menu {
  position: absolute; left: 18px; top: -14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: 9px; background: var(--panel-2); border: 1px solid var(--hairline-strong);
  box-shadow: 0 12px 30px oklch(0 0 0 / 0.45);
  font-size: 11.5px; font-weight: 500; color: var(--text); white-space: nowrap;
  opacity: 0;
}
.vext .vx-menu svg { width: 12px; height: 12px; color: var(--accent-soft); }
.vext .vx-result { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; opacity: 0; flex-wrap: wrap; }
.vext .vx-result .vl-type { color: var(--body); }
@media (prefers-reduced-motion: no-preference) {
  .play .vext .vx-sel { animation: vSweep .55s ease-out both .6s; }
  .play .vext .vx-menu { animation: vPop .4s cubic-bezier(.2,.9,.3,1.3) both 1.45s; }
  .play .vext .vx-result { animation: vPop .45s cubic-bezier(.2,.9,.3,1.3) both 2.5s; }
  @keyframes vSweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
  @keyframes vPop { from { opacity: 0; transform: translateY(7px) scale(0.92); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .vext .vx-sel { background-size: 100% 100%; }
  .vext .vx-menu, .vext .vx-result { opacity: 1; }
}

/* ── the memo-pill switcher (3A), merged into the anchor desk 2026-07-24:
   graph-style pills swap which example page fills the anchor window;
   the caption rail below the desk follows ── */
.kpills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.kpill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
  background: oklch(0.24 0.010 265 / 0.92);
  border: 1.5px solid color-mix(in oklch, var(--td) 45%, transparent);
  color: var(--body); font-family: var(--grotesk); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: color .25s, border-color .25s, box-shadow .25s;
}
.kpill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--td); flex-shrink: 0; }
.kpill .dot + .dot { margin-left: -4px; }
/* multi-tag pill, same idiom as the graph's .gnode2.duo: one dot per tag,
   border fades between the tag colors */
.kpill.duo {
  border-color: transparent;
  background:
    linear-gradient(oklch(0.24 0.010 265 / 0.92), oklch(0.24 0.010 265 / 0.92)) padding-box,
    linear-gradient(115deg,
      color-mix(in oklch, var(--td) 45%, transparent),
      color-mix(in oklch, var(--td2, var(--td)) 45%, transparent)) border-box;
}
.kpill.on {
  color: var(--text); border-color: var(--td);
  box-shadow: 0 0 0 4px color-mix(in oklch, color-mix(in oklch, var(--td) 50%, var(--td2, var(--td))) 20%, transparent),
              0 0 18px color-mix(in oklch, color-mix(in oklch, var(--td) 50%, var(--td2, var(--td))) 28%, transparent);
}
.kpill.duo.on {
  border-color: transparent;
  background:
    linear-gradient(oklch(0.24 0.010 265 / 0.92), oklch(0.24 0.010 265 / 0.92)) padding-box,
    linear-gradient(115deg, var(--td), var(--td2, var(--td))) border-box;
}
/* panes share one grid cell, so the stage is as tall as the tallest page */
.kstage { display: grid; }
.kpane { grid-area: 1 / 1; min-width: 0; display: flex; justify-content: center; align-items: flex-start; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.kpane.on { opacity: 1; visibility: visible; }
.kpane .vdet { width: 100%; max-width: 640px; min-width: 0; }
.kind-caps { display: grid; justify-items: center; margin-top: 22px; }
.kind-caps p { grid-area: 1 / 1; margin: 0; text-align: center; font-size: 15px; color: var(--muted); max-width: 66ch; opacity: 0; transition: opacity .35s ease; }
.kind-caps p.on { opacity: 1; }
.kind-caps b { color: var(--text); font-weight: 600; }

/* ============================================================
   FIND IT AGAIN — the story section + vivid moment #2
   ============================================================ */
.find { padding: clamp(130px, 17vw, 210px) 0 80px; text-align: center; }
.find .d1 { font-size: clamp(32px, 4.2vw, 56px); }
.find .find-sub { font-size: 17.5px; color: var(--muted); max-width: 56ch; margin: 20px auto 0; }
.find-steps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 22px;
  max-width: 1020px; margin: 52px auto 0; text-align: left;
}
/* each column subgrids into (crop, caption) rows so the two crops share one
   height; the shorter graph crop centers its canvas in the leftover space */
.find-steps > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.find-steps .crop { padding: 20px; }
.crop-focus { display: flex; flex-direction: column; justify-content: center; }
.step-cap { margin-top: 16px; font-size: 15px; }

/* search crop */
.fsearch {
  display: flex; align-items: center; gap: 9px; height: 36px;
  padding: 0 12px; border-radius: 10px; min-width: 0;
  background: var(--well); border: 1px solid var(--hairline);
}
.fs-ico { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; }
.fs-q { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; font-size: 13px; }
.fs-ph { position: absolute; left: 0; color: var(--faint); white-space: nowrap; overflow: hidden; }
.fs-typed { display: inline-block; overflow: hidden; white-space: nowrap; color: var(--text); width: 0; }
.fs-caret { width: 1.5px; height: 15px; background: var(--accent-soft); margin-left: 2px; flex-shrink: 0; opacity: 0; }
.fs-kbd {
  font-family: var(--mono); font-size: 9.5px; color: var(--faint); flex-shrink: 0;
  padding: 2px 6px; border-radius: 5px;
  background: oklch(1 0 0 / 0.06); border: 1px solid var(--hairline);
}
/* the app's filter bar: label, applied chips, add-filter affordance */
.fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fbar-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 10px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 50%, transparent);
  color: var(--text); font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.fchip > svg { width: 12px; height: 12px; color: var(--accent-soft); flex-shrink: 0; }
.fchip-field { color: var(--faint); }
.fchip-x { display: inline-flex; opacity: 0.65; color: var(--body); }
.fchip-x svg { width: 10px; height: 10px; }
.fbar-add {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  background: transparent; border: 1px dashed var(--hairline-strong);
  color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.nlv { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.nlv-gh { display: flex; align-items: center; gap: 10px; padding: 6px 2px 4px; }
.nlv-gd { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.nlv-gr { flex: 1; height: 1px; background: oklch(1 0 0 / 0.06); }
.nlv-gc { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.nlv-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 10px; background: var(--panel-2);
  border: 1px solid var(--hairline); box-shadow: var(--ws-card-shadow);
}
.nlv-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--cc, var(--muted));
  background: color-mix(in oklch, var(--cc, var(--muted)) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--cc, var(--muted)) 30%, transparent);
}
.nlv-ico svg { width: 15px; height: 15px; }
.nlv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.nlv-meta { display: flex; align-items: center; gap: 8px; }
.nlv-title { font-family: var(--grotesk); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-sum { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-time { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .crop-search.play .fs-caret { animation: hintIn .15s ease both .6s, caretB 1s steps(2, start) infinite .75s; }
  .crop-search.play .fs-ph { animation: fadeOut .2s ease both .75s; }
  .crop-search.play .fs-typed { animation: typek .5s steps(5, end) both .9s; }
  .crop-search.play .nlv-row { opacity: 0; animation: rowIn .35s cubic-bezier(.2,.8,.25,1) both 1.5s; }
  .crop-search.play .nlv-row:nth-of-type(3) { animation-delay: 1.62s; }
  .crop-search.play .nlv-row:nth-of-type(5) { animation-delay: 1.78s; }
  @keyframes typek { from { width: 0; } to { width: 40px; } }
  @keyframes caretB { 50% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .fs-ph { display: none; }
  .fs-typed { width: auto; }
  .fs-caret { opacity: 1; }
}

/* focus crop */
.crop-focus { padding: 0; }
.gring-outer { opacity: 0.75; }
.fpill {
  position: absolute; left: 20px; top: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--warm) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--warm) 35%, transparent);
  font-size: 11.5px; color: var(--body);
}
.fpill svg { width: 12px; height: 12px; color: var(--warm); }
.fpill-f { color: var(--faint); }
.fpill-v { font-family: var(--grotesk); font-weight: 600; color: var(--text); }
.fpill-d { display: inline-grid; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.fpill-d .fd { grid-area: 1 / 1; white-space: nowrap; }
.fpill-d .fd1 { opacity: 0; }
.gring { fill: none; stroke: oklch(1 0 0 / 0.22); stroke-width: 1.2; stroke-dasharray: 3 7; }
.gedge2.fspoke { stroke: oklch(1 0 0 / 0.24); stroke-width: 1.3; }
.gedge2.fspoke2 { stroke: oklch(1 0 0 / 0.17); stroke-width: 1.2; }
.gnode2.fnode { color: var(--text); border-color: color-mix(in oklch, var(--nc) 60%, transparent); }
.gnode2.fnode2 { color: var(--body); border-color: color-mix(in oklch, var(--nc) 40%, transparent); }
.gnode2.focus-hub {
  color: var(--text); border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent), 0 0 22px color-mix(in oklch, var(--accent) 32%, transparent);
}
.gnode2.faded { opacity: 0.30; }
@media (prefers-reduced-motion: no-preference) {
  .crop-focus.play .fnode { opacity: 0; animation: popIn .45s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--nd, .5s); }
  .crop-focus.play .gring { opacity: 0; animation: hintIn .5s ease both .4s; }
  .crop-focus.play .gedge2.fspoke { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw .7s ease forwards; animation-delay: var(--ed, .6s); }
  /* second beat: the depth stepper ticks to 2, the outer ring lights up,
     and level-2 neighbours spoke out from the level-1 nodes */
  .crop-focus.play .gring-outer { animation-delay: 1.9s; }
  .crop-focus.play .gedge2.fspoke2 { stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw .7s ease forwards; animation-delay: var(--ed, 2.1s); }
  .crop-focus.play .fnode2 { opacity: 0; animation: popIn .45s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--nd, 2.1s); }
  .crop-focus.play .fpill-d .fd1 { opacity: 1; animation: hintOut .25s ease both 1.85s; }
  .crop-focus.play .fpill-d .fd2 { opacity: 0; animation: hintIn .25s ease both 1.85s; }
  @keyframes hintOut { to { opacity: 0; } }
}

/* the payoff: the big graph, full width */
.gbig-cap { text-align: center; color: var(--muted); font-size: 16px; max-width: 560px; margin: 84px auto 20px; }
.gbig-cap b { color: var(--text); font-weight: 600; }
/* The zoomed-out graph window: the same .vapp chrome as the scene stage, sitting
   on a desktop wallpaper (the app at home on a Mac), with a canvas painting the
   baked real layout (graph-data.json + graph-window.js). The canvas is
   DPR-aware, so the picture stays crisp at any zoom/screen. */
.gbig-frame {
  position: relative; margin: 0 auto; padding: 58px 44px 48px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 36px 90px oklch(0 0 0 / 0.5);
}
.gbig-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Quiet the wallpaper toward the page's dark mood so the window stays the star. */
.gbig-frame::before { content: ''; position: absolute; inset: 0; background: oklch(0.15 0.02 250 / 0.12); }
.gbig-app {
  position: relative; aspect-ratio: 1400 / 960;
  /* Real glass over a bright wallpaper: dim the transmitted light in the
     backdrop filter (brightness) instead of blocking it with opacity, so the
     wallpaper's two lighting zones read through the window while the graph
     keeps its dark contrast. */
  background: oklch(0.196 0.013 270 / 0.55);
  backdrop-filter: blur(40px) saturate(1.2) brightness(0.55);
  -webkit-backdrop-filter: blur(40px) saturate(1.2) brightness(0.55);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 30px 70px oklch(0 0 0 / 0.55);
}
.gbig-content { display: flex; flex-direction: column; }
.gbig-content .vtb { padding: 4px 8px 0 12px; }
.gbig-content .vfil { padding: 0 8px 0 14px; }
.gbig-canvas { position: relative; flex: 1; min-height: 0; margin: 6px 8px 0 12px; border-radius: 10px; overflow: hidden; }
/* The app's own faint dot grid under the transparent graph canvas. */
.gbig-canvas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image: radial-gradient(oklch(1 0 0 / 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.gbig-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 720px) {
  .gbig-frame { padding: 42px 16px 16px; border-radius: 14px; }
  .gbig-frame .ws-menubar .mi { display: none; }
  .gbig-app { aspect-ratio: 1 / 1.05; }
  .gbig-content .vtb .fs-kbd, .gbig-content .vfil .fs-kbd, .gbig-content .vnew { display: none; }
  .gbig-content .vswitch span:not(.on) { display: none; }
  .gbig-content .fsearch { min-width: 0; }
  .gbig-content .fs-q { overflow: hidden; white-space: nowrap; }
  .gbig-content .vfil .cap { display: none; }
  .gbig-content .vfil .count { white-space: nowrap; }
}

/* ============================================================
   VIEWS: the same memos four ways, as an editorial strip
   (2026-07-24 rhythm pass; replaced the 400px tab-switcher
   window). Quiet fragments at rest; hovering one grows it into
   the app's own view (a fixed-height horizontal accordion,
   CSS-only, no JS). The grown tile reveals the app chrome
   around its fragment: the search bar and filter row on List,
   the toolbar with the view switcher on Graph, the year-scrubber
   rail on Timeline. Map and graph growth is a crop reveal,
   never a zoom. Touch and reduced motion keep the quiet strip.
   ============================================================ */
.views { padding: clamp(110px, 14vw, 170px) 0 0; }
.views .runon-p { max-width: 860px; color: var(--muted); }
.vs-grid { display: flex; align-items: stretch; gap: 14px; margin-top: 34px; }
.vs-tile {
  margin: 0; display: flex; flex-direction: column;
  flex: 1 1 0; min-width: 0; height: 300px;
  border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline);
  font-size: 13px;
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.vs-tile figcaption {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 2px; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.vs-tile figcaption svg { width: 13px; height: 13px; color: var(--faint); flex-shrink: 0; }
/* detail only the grown tile shows */
.vs-more { opacity: 0; transition: opacity .35s ease .12s; }
/* the app chrome above a view, revealed by the growth */
.vs-chrome { max-height: 0; opacity: 0; overflow: hidden; padding: 0 12px; flex-shrink: 0; transition: max-height .5s ease, opacity .35s ease .12s; }
.vs-chrome .fsearch { height: 30px; }
.vs-chrome .fs-q { font-size: 12px; }
.vs-chrome .fs-ph { max-width: 100%; text-overflow: ellipsis; }
.vs-chrome > .fsearch, .vs-chrome > .vs-tbrow { margin-top: 8px; }
.vs-chrome .fbar { margin-top: 8px; }
.vs-chrome .vfil { margin-top: 8px; }
.vs-tbrow { display: flex; gap: 10px; }
.vs-tbrow .fsearch { flex: 1; min-width: 0; }
@media (hover: hover) {
  .vs-tile:hover { flex-grow: 2.4; border-color: var(--hairline-strong); }
  /* the map only grows to the basemap crop's own width, never past it */
  .vs-tile.t-map:hover { flex-grow: 2.05; }
  .vs-tile:hover .vs-more { opacity: 1; }
  .vs-tile:hover .vs-chrome { max-height: 88px; opacity: 1; }
  .vs-tile:hover .vs-list .nlv-sum { max-height: 18px; opacity: 1; }
  .vs-tile:hover .vs-list .nlv-time { max-width: 60px; opacity: 1; }
  .vs-tile:hover .vs-tl { padding-right: 124px; }
  .vs-tile:hover .vs-tl .tlv-card .tagp { max-width: 90px; padding-left: 8px; padding-right: 8px; }
}
.vs-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 12px; }
.vs-list .nlv-row { padding: 7px 9px; gap: 9px; flex-shrink: 0; }
.vs-list .nlv-sum { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .35s ease .12s; }
.vs-list .nlv-time { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .5s ease, opacity .35s ease .12s; }
/* the map is a fixed-size crop: a wider tile reveals more of it, and the
   pins are anchored in the same pixel space so they stay on their spots */
.vs-map {
  position: relative; flex: none; height: 251px; margin: 10px 12px 12px; border-radius: 9px; overflow: hidden;
  background: url("img/map-basemap.jpg") -130px 0 / 550px auto no-repeat oklch(0.16 0.01 250);
}
/* timeline: months and cards at left; the app's year-scrubber rail
   slides in on the right when the tile grows */
.vs-tl { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 8px 14px 12px; transition: padding-right .55s cubic-bezier(.2,.7,.2,1); }
.vs-tl-head { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 2px; flex-shrink: 0; }
.vs-tl .tlv-ynum b { font-size: 22px; }
.vs-tl .tlv-bars { gap: 4px; height: 28px; }
.vs-tl .tlv-bars i { width: 7px; }
.vs-tl .tlv-letters { gap: 4px; }
.vs-tl .tlv-letters span { width: 7px; }
.vs-tl .tlv-month { padding: 2px 0; flex-shrink: 0; }
.vs-tl .tlv-card { margin-bottom: 0; padding: 6px 10px; flex-shrink: 0; }
/* card tag chips collapse to zero width when compact, so titles keep the
   room (their fade rides on .vs-more, which must keep owning opacity) */
.vs-tl .tlv-card .tagp { max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; transition: max-width .5s ease, padding .5s ease; }
.vs-scrub {
  position: absolute; right: 0; top: 0; bottom: 0; width: 112px;
  padding: 12px 12px; border-left: 1px solid oklch(1 0 0 / 0.06);
  display: flex; flex-direction: column; gap: 7px;
}
.vs-graph { position: relative; flex: 1; min-height: 0; margin: 10px 12px 12px; border-radius: 9px; overflow: hidden; }
.vs-graph svg { position: absolute; left: 0; top: 0; }
@media (max-width: 980px) { .vs-grid { flex-wrap: wrap; } .vs-tile { flex-basis: calc(50% - 7px); } }
@media (max-width: 640px) { .vs-list .nlv-gc, .vs-tl .tlv-date { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .vs-tile, .vs-more, .vs-chrome, .vs-tl, .vs-list .nlv-sum, .vs-list .nlv-time, .vs-tl .tlv-card .tagp { transition: none; }
}

/* ODbL requires this credit wherever the basemap is shown */
.mattrib {
  position: absolute; right: 8px; bottom: 6px;
  font-family: var(--mono); font-size: 9px; color: oklch(0.60 0.01 250 / 0.8);
  text-shadow: 0 1px 3px oklch(0 0 0 / 0.6);
}
.mcluster {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 30%, oklch(0.22 0.01 265));
  border: 1.5px solid color-mix(in oklch, var(--accent-soft) 70%, transparent);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 14%, transparent), 0 4px 14px oklch(0 0 0 / 0.4);
  font-family: var(--grotesk); font-size: 12.5px; font-weight: 700; color: var(--text);
}
.mcluster.small { width: 26px; height: 26px; font-size: 11px; }
.mpin { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mpin i {
  width: 13px; height: 13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--pc, var(--t-orange));
  border: 1.5px solid oklch(1 0 0 / 0.65);
  box-shadow: 0 0 14px color-mix(in oklch, var(--pc, var(--t-orange)) 55%, transparent), 0 2px 6px oklch(0 0 0 / 0.5);
}
.mpin span {
  order: -1; padding: 3px 10px; border-radius: 999px;
  background: oklch(0.24 0.01 260 / 0.96); border: 1px solid var(--hairline-strong);
  font-family: var(--grotesk); font-size: 11.5px; font-weight: 500; color: var(--body); white-space: nowrap;
  box-shadow: 0 3px 10px oklch(0 0 0 / 0.4);
}
.mpin.small i { width: 9px; height: 9px; opacity: 0.8; }

/* the timeline idiom (year number, sparkline, month dividers, cards,
   scrubber rows), used by the strip's Timeline tile */
.tlv-ynum b { display: block; font-family: var(--grotesk); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.tlv-ynum span { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.tlv-spark { display: flex; flex-direction: column; gap: 4px; }
.tlv-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; }
.tlv-bars i { width: 9px; border-radius: 3px 3px 1px 1px; height: var(--bh, 3px); background: oklch(0.35 0.008 260); }
.tlv-bars i.on { background: color-mix(in oklch, oklch(0.68 0.07 2) 55%, oklch(0.35 0.008 260)); }
.tlv-letters { display: flex; gap: 5px; }
.tlv-letters span { width: 9px; text-align: center; font-family: var(--mono); font-size: 8px; color: var(--faint); opacity: 0.6; }
.tlv-letters span.on { opacity: 1; color: var(--muted); }
.tlv-eyebrow { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.tlv-month { display: flex; align-items: center; gap: 10px; padding: 14px 0 8px; }
.tlv-month span { font-family: var(--grotesk); font-size: 12.5px; font-weight: 600; color: var(--body); }
.tlv-month i { flex: 1; height: 1px; background: oklch(1 0 0 / 0.06); }
.tlv-month b { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--faint); }
.tlv-card {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 6px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hairline);
}
.tlv-card .nlv-ico { width: 26px; height: 26px; border-radius: 7px; }
.tlv-card .nlv-ico svg { width: 13px; height: 13px; }
.tlv-title { font-family: var(--grotesk); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlv-date { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.tlv-srow {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  border: none; background: transparent; text-align: left;
}
.tlv-srow span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tlv-srow.on span { color: var(--text); }
.tlv-srow i { height: 5px; border-radius: 3px; opacity: 0.55; }
.tlv-srow.on i { opacity: 1; }
.tlv-span-eyebrow { margin-top: 16px; }
.tlv-span { font-family: var(--mono); font-size: 11.5px; color: var(--body); }
.tlv-span span { color: var(--faint); }
.tlv-spancap { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }

/* ============================================================
   UTILITIES — one run-on paragraph (after Raycast): the active
   clause lights up and a product fragment below answers; cycles
   slowly until the reader hovers a clause
   ============================================================ */
.utils { padding: clamp(84px, 10vw, 130px) 0 56px; }
.runon { max-width: 860px; }
.runon-p {
  font-family: var(--grotesk); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--faint); text-wrap: pretty;
}
.runon-intro { color: var(--text); font-weight: 600; }
.ro { cursor: default; transition: color .45s ease; }
.ro.on { color: var(--text); }
.runon-stage { position: relative; height: 150px; margin-top: 34px; }
.rofrag {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease; pointer-events: none;
}
.rofrag.on { opacity: 1; transform: none; }
.rofrag .frag-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rocap { font-size: 13.5px; color: var(--muted); max-width: 52ch; }

/* small product fragments shared by the run-on stage */
.vrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hairline);
  box-shadow: var(--ws-card-shadow); color: var(--body); font-size: 12.5px;
}
.vrow svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.vrow .grow { flex: 1; }
.vdots { letter-spacing: 3px; color: var(--muted); font-size: 12px; }
.vchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.10);
  font-size: 12px; color: var(--body); white-space: nowrap;
}
.vchip svg { width: 12px; height: 12px; }
.vok { color: var(--good); }
.vok svg { width: 14px; height: 14px; }
.wlights { display: flex; gap: 6px; }
.wlights i { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.42 0.008 255); }

/* ============================================================
   TRUST — your data, verifiably
   ============================================================ */
.trust { padding: clamp(130px, 17vw, 210px) 0 56px; }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 680px; margin: 0 auto 48px; text-align: center; align-items: center; }
.section-head .d2 { font-size: clamp(27px, 3.2vw, 40px); }
.section-head p { color: var(--muted); font-size: 17px; }
/* the proof composition (after Superhuman): clickable claims drive one
   window that shows each claim being checked; cycles until interaction */
.proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: center; }
.proof-claims { display: flex; flex-direction: column; }
.pclaim {
  display: flex; align-items: flex-start; gap: 13px; width: 100%;
  padding: 13px 12px; margin: 0 -12px; border: none; border-radius: 11px;
  background: transparent; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  transition: background .25s ease;
}
.pclaim:last-child { border-bottom: none; }
.pclaim:hover { background: oklch(1 0 0 / 0.035); }
.pclaim-ck {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-strong); color: var(--faint);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.pclaim-ck svg { width: 9px; height: 9px; }
.pclaim.on .pclaim-ck {
  border-color: color-mix(in oklch, var(--good) 55%, transparent);
  background: color-mix(in oklch, var(--good) 14%, transparent);
  color: var(--good);
}
.pclaim-tx { min-width: 0; flex: 1; }
.pclaim-tx b {
  display: block; font-family: var(--grotesk); font-size: 15px; font-weight: 600;
  letter-spacing: -0.2px; color: var(--muted); transition: color .3s ease;
}
.pclaim.on .pclaim-tx b, .pclaim:hover .pclaim-tx b { color: var(--text); }
.pclaim-how { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.pclaim.on .pclaim-how { grid-template-rows: 1fr; }
.pclaim-how-in { overflow: hidden; min-height: 0; display: block; }
.pclaim-how-in span { display: block; padding-top: 5px; font-size: 12.5px; color: var(--faint); }
.pclaim-how-in span.code { font-family: var(--mono); font-size: 11px; }

.proof-win {
  border-radius: 14px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.35); font-size: 12px;
}
.pwin-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
.pwin-title { font-family: var(--mono); font-size: 11px; color: var(--body); margin: 0 auto; transition: opacity .18s ease; }
.pwin-stage { position: relative; height: 336px; }
.pwin-pane {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  display: flex; flex-direction: column;
}
.proof-win[data-k="export"] .pane-export, .proof-win[data-k="offline"] .pane-offline,
.proof-win[data-k="network"] .pane-network, .proof-win[data-k="key"] .pane-key {
  opacity: 1; visibility: visible; transform: none;
}

/* pane · Settings shells (export + key) */
.sx { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; }
.sx-h { font-family: var(--grotesk); font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; padding-bottom: 12px; border-bottom: 1px solid oklch(1 0 0 / 0.06); margin-bottom: 6px; }
.sx-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid oklch(1 0 0 / 0.045); }
.sx-row:last-of-type { border-bottom: none; }
.sx-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--muted);
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.08);
}
.sx-ic svg { width: 15px; height: 15px; }
.sx-tx { flex: 1; min-width: 0; }
.sx-tx b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.sx-tx span { font-size: 11px; color: var(--faint); }
.sx-btn {
  padding: 5px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 500; color: var(--body);
  background: oklch(1 0 0 / 0.07); border: 1px solid var(--hairline);
}
.sx-status { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--good); }
.sx-status svg { width: 13px; height: 13px; }
.sx-status .dim { color: var(--faint); }
.sx-radio {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--hairline-strong); display: grid; place-items: center;
}
.sx-radio.on { border-color: var(--accent-soft); }
.sx-radio.on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); }
.sx-field {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  padding: 8px 12px; border-radius: 9px;
  background: var(--well); border: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11px; color: var(--body);
}
.sx-field .ok { margin-left: auto; color: var(--good); font-family: var(--sans); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.sx-field .ok svg { width: 12px; height: 12px; }
.sx-note { font-size: 11px; color: var(--faint); margin-top: 10px; }

/* pane · Terminal */
.term { flex: 1; padding: 16px 18px; font-family: var(--mono); font-size: 11.5px; line-height: 1.9; color: var(--body); position: relative; }
.term .p { color: var(--accent-soft); margin-right: 8px; }
.term .out { color: var(--muted); }
.term .big { color: var(--text); font-size: 13px; }
.term-caret { display: inline-block; width: 7px; height: 13px; background: var(--body); vertical-align: -2px; }
.term-chip {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.09);
  font-family: var(--sans); font-size: 10.5px; color: var(--muted);
}
.term-chip svg { width: 12px; height: 12px; }

/* pane · Network */
.net { flex: 1; display: flex; flex-direction: column; }
.net-filter { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
.net-filter .box {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 7px;
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.07);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.net-filter .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--t-red); margin-left: auto; }
.net-head, .net-row { display: grid; grid-template-columns: minmax(0,1fr) 64px 70px 70px; gap: 10px; padding: 6.5px 14px; font-family: var(--mono); font-size: 10.5px; }
.net-head { color: var(--faint); border-bottom: 1px solid oklch(1 0 0 / 0.08); background: oklch(1 0 0 / 0.025); }
.net-row { color: var(--body); border-bottom: 1px solid oklch(1 0 0 / 0.045); }
.net-row .st { color: var(--good); }
.net-row .dim { color: var(--faint); }
.net-empty { padding: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); display: flex; align-items: baseline; gap: 8px; }
.net-empty b { color: var(--good); font-weight: 500; }

/* pane entrance micro-animations, keyed to the active pane */
@media (prefers-reduced-motion: no-preference) {
  .proof-win[data-k="export"] .sx-row { opacity: 0; animation: rowIn .3s ease both .12s; }
  .proof-win[data-k="export"] .sx-row:nth-of-type(2) { animation-delay: .22s; }
  .proof-win[data-k="export"] .sx-status { animation: hintIn .4s ease both .45s; }
  .proof-win[data-k="key"] .sx-row { opacity: 0; animation: rowIn .3s ease both .12s; }
  .proof-win[data-k="key"] .sx-row:nth-of-type(2) { animation-delay: .22s; }
  .proof-win[data-k="key"] .sx-field { opacity: 0; animation: rowIn .3s ease both .34s; }
  .proof-win[data-k="key"] .sx-note { animation: hintIn .4s ease both .5s; }
  .proof-win[data-k="offline"] .term-l { opacity: 0; animation: hintInTo .25s ease both .1s; }
  .proof-win[data-k="offline"] .term-l:nth-child(3) { animation-delay: .5s; }
  .proof-win[data-k="offline"] .term-l:nth-child(4) { animation-delay: .95s; }
  .proof-win[data-k="offline"] .term-l:nth-child(5) { animation-delay: 1.3s; }
  .proof-win[data-k="network"] .net-row { opacity: 0; animation: rowIn .3s ease both .12s; }
  .proof-win[data-k="network"] .net-row:nth-of-type(3) { animation-delay: .24s; }
  .proof-win[data-k="network"] .net-empty { animation: hintIn .4s ease both .45s; }
  .term-caret { animation: caretB2 1s steps(2, start) infinite; }
  @keyframes popEl { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
  @keyframes hintInTo { from { opacity: 0; } to { opacity: 1; } }
  @keyframes caretB2 { 50% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .pwin-pane, .rofrag, .pclaim-how { transition: none; }
}
.trust-line { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 34px; color: var(--muted); font-size: 14.5px; }
.trust-line svg { width: 17px; height: 17px; color: var(--good); flex-shrink: 0; }

/* ============================================================
   AGENTS — the ask, then the review (round-7 pick 6B): the app's
   review screen back-right in its Graph tab, Claude's chat window
   in front, overlapping diagonally like real window positioning.
   Two conversations alternate via data-scene (a research handoff,
   then a graph edit), driven by landing-flow.js.
   ============================================================ */
.agents { padding: clamp(120px, 16vw, 200px) 0 56px; }
/* the agents head is editorial, heading left and claim right: the one
   deliberate break from the centered section-head formula
   (2026-07-24 rhythm pass) */
.ag-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; margin-bottom: 44px; }
.ag-head .d2 { font-size: clamp(27px, 3.2vw, 40px); }
.ag-head p { color: var(--muted); font-size: 16.5px; margin: 0; }
@media (max-width: 860px) { .ag-head { grid-template-columns: 1fr; align-items: start; } }
.ag-desk { position: relative; height: 560px; max-width: 1020px; margin: 0 auto 44px; }
.ag-appwin {
  position: absolute; right: 0; top: 0; width: 620px; max-width: 68%;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.5), 0 1px 0 oklch(1 0 0 / 0.06) inset;
}
.ag-appwin .vapp-content { padding: 6px 16px 14px 4px; }
.ag-pane .rev { margin: 0 0 0 8px; }
.ag-pane .rev-diagram { min-height: 230px; }
.ag-chat {
  position: absolute; left: 0; bottom: 0; width: 430px; max-width: 90%; z-index: 2;
  border-radius: 12px; overflow: hidden;
  background: oklch(0.165 0.012 270);
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: 0 34px 90px oklch(0 0 0 / 0.6), 0 1px 0 oklch(1 0 0 / 0.08) inset;
}
.ag-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 13px; border-bottom: 1px solid oklch(1 0 0 / 0.07); position: relative; }
.ag-bt { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); }
.ag-chatbody { padding: 16px; min-height: 196px; font-size: 12.5px; }
/* the two scenes stack in one cell, in both windows */
.ag-panes, .ag-convos { display: grid; }
.ag-pane, .ag-convo { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; min-width: 0; }
.ag-convo { display: flex; flex-direction: column; gap: 10px; }
.ag-desk[data-scene="a"] .s-a, .ag-desk[data-scene="b"] .s-b { opacity: 1; visibility: visible; }
.ag-bub { max-width: 84%; padding: 9px 13px; border-radius: 13px; line-height: 1.5; opacity: 0; transform: translateY(8px); }
.ag-bub.u { align-self: flex-end; background: color-mix(in oklch, var(--accent) 26%, oklch(0.24 0.012 270)); color: var(--text); border-bottom-right-radius: 5px; }
.ag-bub.a { align-self: flex-start; background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.08); color: var(--body); border-bottom-left-radius: 5px; }
.ag-toolchip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 8px;
  background: oklch(1 0 0 / 0.04); border: 1px dashed oklch(1 0 0 / 0.14);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  opacity: 0; transform: translateY(8px);
}
.ag-toolchip b { color: var(--text); }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--good); box-shadow: 0 0 8px color-mix(in oklch, var(--good) 50%, transparent); }
.ag-inputbar { margin: 0 16px 16px; padding: 8px 13px; border-radius: 10px; background: oklch(1 0 0 / 0.045); border: 1px solid oklch(1 0 0 / 0.09); font-size: 12px; color: var(--faint); }
.ag-badge { transform: scale(0); }
/* the drafts pane's empty state: what the window shows before the agent
   has created anything - the draft must never predate its tool call */
.ag-empty { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; }
.ag-empty-in { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; padding-bottom: 40px; text-align: center; }
.ag-empty-in svg { width: 24px; height: 24px; color: var(--faint); }
.ag-empty-in p { font-size: 12.5px; color: var(--faint); max-width: 24ch; line-height: 1.5; }
/* each scene's pane stacks two states: the queue (the draft as the app
   first shows it, a collapsed row) and the opened review */
.ag-pane { display: grid; }
.ag-queue, .ag-review { grid-area: 1 / 1; min-width: 0; }
.ag-queue { align-self: start; }
.ag-queue .draft-row { margin: 2px 8px 0 12px; }
.ag-queue .vrevbtn { background: var(--accent); border-color: transparent; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  /* causality: ask (0.4s) → tool call (1.6s) → the draft lands
     collapsed in the queue (2.4s) and the badge ticks (2.6s) → Claude
     confirms (3.0s) → the draft opens into the review (3.7s) → the
     subgraph pops in (4.2s+) */
  .ag-desk:not(.play) .ag-panes .ag-pane { opacity: 0; }
  .ag-desk:not(.play) .ag-empty { opacity: 1; visibility: visible; }
  .ag-desk.play .ag-empty { opacity: 1; visibility: visible; animation: agOut .35s ease forwards 2.4s; }
  .ag-desk.play .ag-pane { animation: agPaneIn .45s ease both 2.4s; }
  .ag-desk.play .ag-queue .draft-row { animation: agRowIn .45s cubic-bezier(.2,.8,.25,1) both 2.45s; }
  .ag-desk.play .ag-queue { animation: agOut .3s ease forwards 3.7s; }
  .ag-desk.play .ag-review { animation: agPaneIn .4s ease both 3.85s; }
  .ag-desk.play .ag-bub.u { animation: agPop .45s ease forwards .4s; }
  .ag-desk.play .ag-toolchip { animation: agPop .45s ease forwards 1.6s; }
  .ag-desk.play .ag-bub.a { animation: agPop .45s ease forwards 3.0s; }
  .ag-desk.play .ag-badge { animation: agCk .45s cubic-bezier(.2,.9,.3,1.4) forwards 2.6s; }
  .ag-desk.play .rev-pill-wrap { opacity: 0; animation: popIn2 .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--nd, 4.2s); }
  .ag-desk.play .rev-medge { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw2 .7s ease forwards; animation-delay: var(--ed, 5.0s); }
  @keyframes agPop { to { opacity: 1; transform: none; } }
  @keyframes agCk { to { transform: scale(1); } }
  @keyframes agPaneIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes agOut { to { opacity: 0; visibility: hidden; } }
  @keyframes agRowIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .ag-bub, .ag-toolchip { opacity: 1; transform: none; }
  .ag-badge { transform: none; }
  .ag-queue { display: none; }
}
@media (max-width: 980px) {
  .ag-desk { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .ag-appwin, .ag-chat { position: static; width: 100%; max-width: none; }
  .ag-chat { order: -1; }
}
.pill-agent {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  background: oklch(1 0 0 / 0.05);
  border: 1px solid oklch(1 0 0 / 0.16);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); line-height: 1.5;
}
.pill-agent .apdot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.agents-leads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; max-width: 680px; margin: 0 auto; }
.agents-leads .lead { font-size: 15px; }

/* ============================================================
   PRICING — the statement
   ============================================================ */
.pricing { padding: clamp(140px, 18vw, 220px) 0 60px; text-align: center; }
.price-big {
  font-family: var(--grotesk); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(64px, 9vw, 120px); line-height: 1; color: var(--text);
}
.price-big [data-price] { color: var(--accent-soft); }
.price-sub { font-size: 17.5px; color: var(--muted); max-width: 56ch; margin: 22px auto 0; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 52px auto 0; text-align: left; }
.price {
  display: flex; flex-direction: column; gap: 20px;
  padding: 30px 28px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--hairline);
}
.price.full {
  border-color: color-mix(in oklch, var(--accent) 45%, oklch(1 0 0 / 0.10));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 18%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 8%, transparent), transparent 55%), var(--surface);
}
.price-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.price-name { font-size: 15px; font-weight: 600; color: var(--text); }
.price-tagline { font-size: 13.5px; color: var(--faint); margin-top: 4px; }
.price-flag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-soft); padding: 5px 9px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.price-fig { display: flex; align-items: baseline; gap: 8px; }
.price-fig .amt { font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.02em; font-size: 44px; color: var(--text); line-height: 1; }
.price-fig .per { font-size: 13.5px; color: var(--faint); }
.price-list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; padding: 0; }
.price-list li { display: flex; align-items: flex-start; gap: 11px; list-style: none; font-size: 14.5px; color: var(--body); }
.price-list .ck { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--good); }
.price-foot { margin-top: auto; }
.explain-body { display: flex; flex-direction: column; gap: 14px; }
.explain-body p { font-size: 14px; color: var(--muted); line-height: 1.62; }
.explain-body b { color: var(--text); font-weight: 600; }
.guarantee {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 34px; color: var(--muted); font-size: 15px;
}
.guarantee svg { width: 18px; height: 18px; color: var(--good); flex-shrink: 0; }
.guarantee b { color: var(--text); font-weight: 600; }

/* ============================================================
   FAQ / CLOSER / FOOTER
   ============================================================ */
.faq { padding: 100px 0 130px; }
.qa-list { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.qa { border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); }
.qa summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--text);
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-size: 17px; color: var(--faint);
  transition: transform .18s ease;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa > p { padding: 0 20px 18px; font-size: 14.5px; color: var(--muted); line-height: 1.65; }
.qa a { color: var(--accent-soft); border-bottom: 1px solid color-mix(in oklch, var(--accent-soft) 35%, transparent); }
.qa a:hover { color: var(--text); border-color: var(--accent-soft); }

.closer { padding: clamp(100px, 12vw, 130px) 0 130px; text-align: center; position: relative; overflow: hidden; }
.closer .constellation { top: auto; bottom: -120px; opacity: 0.35; }
.closer-in { display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; }
.wm-xl { width: 61px; height: 64px; }
.closer .d1 { font-size: clamp(30px, 3.8vw, 48px); }

.foot { padding: 20px 0 60px; }
.foot .rule { height: 1px; background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.14), transparent); margin-bottom: 32px; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: var(--body); font-size: 14px; transition: color .15s; }
.foot-links a:hover { color: var(--text); }
.foot .made { font-size: 12.5px; color: var(--faint); }
/* Attribution for the two CC BY-SA cover photos. Required by their license, so
   it ships with the images: removing one means removing the other. */
.foot-credits { margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
.foot-credits a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: oklch(1 0 0 / 0.22); transition: color .15s; }
.foot-credits a:hover { color: var(--body); }

/* ---- responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .find-steps { grid-template-columns: minmax(0, 1fr); }
  .proof { grid-template-columns: 1fr; gap: 30px; }
  .agents-leads { grid-template-columns: 1fr; gap: 20px; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 860px) {
  .topnav { display: none; }
}
@media (max-width: 680px) {
  .container, .topbar { padding-left: 20px; padding-right: 20px; }
  .topbar { top: 8px; margin-left: 12px; margin-right: 12px; }
  .runon-stage { height: 180px; }
  .rev-map { grid-template-columns: 1fr; }
  .rev-diagram { border-right: none; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
  .vdet-inner { flex-direction: column; }
  .vdet-aside { width: auto; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}