/* Epoch Studio — getepochstudio.com
   ==========================================================================
   Palette lifted from the application itself (app/globals.css): near-black canvas,
   electric cyan, magenta, violet, lime. The site should look like the thing it sells.

   Self-contained by requirement: no web fonts, no CDN, and no analytics. One small
   same-origin controller swaps Studio Door rooms; Field Notes contacts Buttondown only on submit.
   ========================================================================== */

:root {
  --canvas:   #0a0a0a;
  --surface:  #111113;
  --raised:   #18181b;
  --border:   #27272a;
  --border-2: #3f3f46;

  --text:     #ededed;
  --muted:    #c4c4cc;
  --faint:    #8b8b96;

  --cyan:     #33dcf2;
  --violet:   #9b7bff;
  --amber:    #ffb64a;

  /* Body-copy links get their own token rather than borrowing --cyan: the light
     override of --cyan (#0a7f93) measures 4.31:1 on the light canvas, which is under
     the 4.5:1 floor for text. --link is the same colour family, darkened until it
     passes in BOTH themes — measured, not eyeballed. */
  --link:      var(--cyan);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --col: 42rem;
}

/* The identity is a lit screen in a dark room. It commits to one world on purpose —
   but the reading pages still answer the viewer's theme, because a privacy policy
   should be comfortable to actually read. */
:root[data-theme="light"] .doc,
:root[data-theme="light"] footer.site { --canvas:#f7f5f0; --surface:#fffefb; --raised:#efece4;
  --border:#ddd8cc; --text:#16181c; --muted:#484c52; --faint:#6f747c; --cyan:#0a7f93; --violet:#5b3fd0;
  --link:#0a6b7c; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .doc,
  :root:not([data-theme="dark"]) footer.site { --canvas:#f7f5f0; --surface:#fffefb; --raised:#efece4;
    --border:#ddd8cc; --text:#16181c; --muted:#484c52; --faint:#6f747c; --cyan:#0a7f93; --violet:#5b3fd0;
    --link:#0a6b7c; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
:root { scrollbar-color: var(--border-2) var(--canvas); }
::selection { color: var(--canvas); background: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ── header ──────────────────────────────────────────────────────────────── */
header.site { position: relative; z-index: 3; border-bottom: 1px solid var(--border); background: rgba(10,10,10,.72); backdrop-filter: blur(8px); }
header.site .inner { max-width: 74rem; margin: 0 auto; padding: .9rem 1.4rem; display: flex; align-items: center; gap: 1rem; }
.brand { font-family: var(--mono); font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.brand em { font-style: normal; color: var(--cyan); }
header.site nav { margin-left: auto; display: flex; gap: 1.2rem; }
header.site nav a { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-decoration: none; }
header.site nav a:hover { color: var(--cyan); }
header.site nav a[aria-current="page"] { color: var(--cyan); }
.nav-steam { color: var(--text) !important; }
.nav-steam:hover { color: var(--cyan) !important; }

/* ── direct, product-led opening ─────────────────────────────────────────── */
.hero { max-width: 80rem; min-height: calc(100svh - 3.6rem); margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) 1.4rem; display: grid;
  grid-template-columns: minmax(29rem, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 4vw, 4.25rem); }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 13ch; font-size: clamp(3rem, 4.6vw, 4.8rem); line-height: .98; }
.hero-lede { max-width: 39rem; margin: 1.8rem 0 0; color: var(--muted);
  font: clamp(1.08rem, 1.8vw, 1.28rem)/1.58 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-note { max-width: 38rem; margin: 1rem 0 0; color: var(--faint); font-size: .78rem; line-height: 1.55; }
.hero-product { min-width: 0; margin: 0; }
.hero-product img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2);
  border-radius: 10px; background: var(--surface);
  box-shadow: 0 40px 100px -50px #000, 0 0 80px -55px var(--cyan); }
.hero-product figcaption { margin-top: .7rem; color: var(--faint); font-size: .8rem; }
.hero-home { min-height: auto; display: block; max-width: 74rem; padding-top: clamp(5rem, 10vw, 8.5rem);
  padding-bottom: clamp(4rem, 9vw, 7.5rem); }
.hero-home .hero-copy { max-width: 60rem; }
.hero-home h1 { max-width: 18ch; font-size: clamp(3.4rem, 6.8vw, 5.5rem); }
.hero-home .hero-lede { max-width: 48rem; }
.hero-home .hero-product { margin-top: clamp(3rem, 7vw, 5.5rem); }
.hero-home .hero-product img { width: 100%; }

.tour { max-width: 74rem; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1.4rem;
  border-top: 1px solid var(--border); }
.tour-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.tour h2 { max-width: 12ch; margin: 0; font: 600 clamp(2.6rem, 5vw, 4.8rem)/.98 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.tour-copy p { max-width: 34rem; margin: 0 0 .35rem; color: var(--muted);
  font: 1.08rem/1.6 var(--serif); }
.tour-frame { padding: clamp(.35rem, 1vw, .65rem); border: 1px solid var(--border-2);
  border-radius: 12px; background: var(--surface); box-shadow: 0 36px 100px -55px #000; }
.tour video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 7px; background: #050505; }
.tour-transcript { max-width: 46rem; margin: 1.25rem 0 0 auto; border-top: 1px solid var(--border); }
.tour-transcript summary { min-height: 44px; padding: .85rem 0; color: var(--muted); cursor: pointer;
  font: .82rem/1.4 var(--mono); letter-spacing: .04em; }
.tour-transcript summary::marker { color: var(--cyan); }
.tour-transcript[open] summary { color: var(--cyan); }
.tour-transcript p { margin: 0 0 .75rem; color: var(--muted); font: 1rem/1.6 var(--serif); }

/* The homepage is a doorway, not the manual. The full feature walk lives at
   /product/; this is the one connected path a stranger needs to understand. */
.home-path { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 8.5rem) 1.4rem;
  display: grid; grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--border); }
.home-path h2, .home-trust h2 { margin: 0; font: 600 clamp(2.7rem, 5.5vw, 4.8rem)/.98 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.home-path-head > p { max-width: 34rem; margin: 1.5rem 0 0; color: var(--muted); font: 1.08rem/1.65 var(--serif); }
.home-path-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-2); }
.home-path-steps li { display: grid; grid-template-columns: minmax(9rem, .55fr) minmax(0, 1fr);
  gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border-2); }
.home-path-steps strong { color: var(--text); font: 600 1.2rem/1.4 var(--serif); }
.home-path-steps span { color: var(--muted); line-height: 1.6; }
.home-path-link { grid-column: 2; margin: -4.5rem 0 0; }

.case-screen-home { background: var(--surface); }
.case-screen-home .case { max-width: 48rem; }

.home-trust { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 8.5rem) 1.4rem;
  display: grid; grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--border); }
.home-trust-copy > p { max-width: 36rem; margin: 1.5rem 0 1.4rem; color: var(--muted); font: 1.08rem/1.65 var(--serif); }
.home-trust-facts { border-top: 1px solid var(--border-2); }
.home-trust-facts p { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1fr); gap: 1.5rem;
  margin: 0; padding: 1.35rem 0; border-bottom: 1px solid var(--border-2); }
.home-trust-facts strong { color: var(--text); font: 600 1.08rem/1.45 var(--serif); }
.home-trust-facts span { color: var(--muted); line-height: 1.55; }

/* ── homepage: words ignite an expanding studio ───────────────────────────
   One manuscript current connects the real product states. The page uses
   ordinary scrolling; supported browsers receive a restrained view reveal. */
.expanding-studio { overflow: clip; }
.expanding-studio h2,
.expanding-studio h3 { text-wrap: balance; }

.expanse-hero {
  position: relative; isolation: isolate; min-height: calc(100svh - 3.6rem);
  max-width: 90rem; margin: 0 auto; padding: clamp(3.5rem, 6vw, 5.5rem) 1.4rem clamp(5rem, 9vw, 8rem);
  display: grid; grid-template-columns: minmax(23rem, .78fr) minmax(36rem, 1.45fr);
  align-items: center; gap: clamp(2rem, 4vw, 4.5rem);
}
.expanse-hero::before {
  content: ""; position: absolute; z-index: -2; inset: 8% -20% 0 46%;
  background:
    linear-gradient(90deg, rgba(51,220,242,.12) 1px, transparent 1px) 0 0 / 6rem 100%,
    linear-gradient(rgba(155,123,255,.08) 1px, transparent 1px) 0 0 / 100% 4.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 75%, transparent);
  transform: perspective(55rem) rotateY(-9deg) rotateZ(-1deg);
}
.expanse-copy { position: relative; z-index: 2; }
.expanse-copy h1 {
  max-width: 10.5ch; font-size: clamp(3.5rem, 5.8vw, 5.2rem); line-height: .88;
  letter-spacing: -.04em;
}
.expanse-copy h1 span { display: block; max-width: 12ch; margin-top: .18em; color: var(--cyan); font-size: .8em; line-height: .98; font-style: italic; font-weight: 400; }
.expanse-copy > p:first-of-type {
  max-width: 36rem; margin: 1.8rem 0 0; color: var(--muted);
  font: clamp(1.08rem, 1.5vw, 1.27rem)/1.55 var(--serif);
}
.hero-watch {
  min-height: 44px; display: inline-flex; align-items: center; gap: .55rem; color: var(--muted);
  font: .78rem/1.2 var(--mono); letter-spacing: .04em; text-decoration: none;
}
.hero-watch:hover { color: var(--cyan); }
.hero-watch span { color: var(--cyan); font-size: 1rem; }
.hero-maker { max-width: 35rem; margin: 1rem 0 0; color: var(--faint); font: .74rem/1.55 var(--mono); }

.expanse-window { position: relative; z-index: 1; min-width: 0; margin: 0 -11vw -3rem -4vw; transform: perspective(80rem) rotateY(-4deg); transform-origin: left center; }
.expanse-window::before {
  content: "WRITE"; position: absolute; z-index: -1; right: 5%; top: -4rem;
  color: rgba(255,255,255,.035); font: 700 clamp(7rem, 17vw, 14rem)/1 var(--sans); letter-spacing: -.04em;
}
.expanse-window a { display: block; color: inherit; }
.expanse-window img {
  display: block; width: 100%; min-width: 49rem; height: auto; border: 1px solid rgba(51,220,242,.42);
  border-radius: 10px 0 0 10px; background: var(--surface);
  box-shadow: -24px 42px 110px -45px #000, -8px 0 75px -55px var(--cyan);
}
.expanse-window figcaption {
  width: min(30rem, 70%); margin: .9rem 0 0 1.2rem; color: var(--faint); font-size: .78rem;
}
.expanse-window figcaption strong { color: var(--text); font-weight: 600; }
.manuscript-current {
  position: absolute; z-index: 3; left: 1.4rem; right: 0; bottom: 1.25rem; margin: 0;
  display: flex; align-items: center; gap: 1rem; color: var(--cyan);
  font: .68rem/1 var(--mono); letter-spacing: .2em;
}
.manuscript-current::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--cyan), var(--violet), transparent 88%); }

.truth-reveal { position: relative; padding: clamp(5rem, 10vw, 9rem) 1.4rem; background: #0d0d10; border-block: 1px solid var(--border); }
.truth-copy { max-width: 76rem; margin: 0 auto clamp(2.5rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(22rem, 1.1fr); gap: clamp(2rem, 8vw, 8rem); align-items: end; }
.truth-copy h2 { max-width: 11ch; margin: 0; font: 600 clamp(3rem, 6vw, 5.6rem)/.92 var(--serif); letter-spacing: -.04em; }
.truth-copy p { max-width: 37rem; margin: 0 0 .35rem; color: var(--muted); font: 1.15rem/1.62 var(--serif); }
.truth-stage { position: relative; max-width: 82rem; min-height: 48rem; margin: 0 auto; }
.truth-world { width: 78%; margin: 0; opacity: .57; transform: translateX(-8%); }
.truth-world img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2); border-radius: 8px; filter: saturate(.72) contrast(1.03); }
.truth-world figcaption { margin-top: .7rem; color: var(--faint); font: .72rem/1.5 var(--mono); }
.truth-collision {
  position: absolute; right: 0; top: clamp(4rem, 10vw, 8rem); width: min(43rem, 62%);
  padding: clamp(2rem, 4vw, 3.5rem); color: var(--text); background: rgba(10,10,12,.96);
  border: 1px solid rgba(255,182,74,.52); box-shadow: 0 36px 100px -45px #000;
}
.truth-line { margin: 0; font: clamp(1.55rem, 3vw, 2.35rem)/1.34 var(--serif); }
.truth-line mark { color: var(--text); background: linear-gradient(transparent 60%, rgba(255,182,74,.33) 60%); }
.truth-sources { margin-top: 2rem; border-top: 1px solid var(--border-2); }
.truth-sources p { position: relative; margin: 0; padding: 1rem 5.5rem 1rem 0; border-bottom: 1px solid var(--border); }
.truth-sources strong { display: block; color: var(--text); font: 600 1rem/1.4 var(--serif); }
.truth-sources span { display: block; color: var(--muted); font-size: .86rem; }
.truth-sources cite { position: absolute; right: 0; top: 1.2rem; color: var(--cyan); font: normal .67rem/1.3 var(--mono); }
.truth-clash { margin: 2.1rem 0 .75rem; color: var(--amber); font: 700 clamp(1.9rem, 4vw, 3.2rem)/1 var(--mono); letter-spacing: -.04em; text-transform: uppercase; }
.truth-choice { margin: 0; color: var(--muted); font: 1rem/1.6 var(--serif); }
.truth-choice a, .truth-copy a { color: var(--link); }
.truth-source { margin: 1.4rem 0 0; color: var(--faint); font: .72rem/1.5 var(--mono); }

.studio-journey { max-width: 82rem; margin: 0 auto; padding: clamp(6rem, 12vw, 11rem) 1.4rem; display: grid; grid-template-columns: minmax(18rem, .68fr) minmax(0, 1.5fr); gap: clamp(3rem, 8vw, 8rem); }
.journey-guide { position: relative; }
.journey-guide-sticky { position: sticky; top: 7rem; padding-bottom: 6rem; }
.journey-guide h2 { max-width: 8ch; margin: 0; font: 600 clamp(3rem, 5.5vw, 5.2rem)/.92 var(--serif); letter-spacing: -.04em; }
.journey-guide p { max-width: 30rem; margin: 1.6rem 0 1.2rem; color: var(--muted); font: 1.08rem/1.65 var(--serif); }
.journey-guide a, .local-boundary a, .maker-copy a { color: var(--link); text-underline-offset: .22em; }
.journey-scenes { display: grid; gap: clamp(5rem, 11vw, 10rem); }
.journey-scene { position: relative; min-height: 34rem; margin: 0; }
.journey-scene figure { margin: 0; position: relative; }
.journey-scene figure::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -120px 100px -80px #070708; pointer-events: none; }
.journey-scene img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); box-shadow: 0 32px 95px -46px #000; }
.journey-scene > div { position: relative; z-index: 1; max-width: 31rem; margin: -2.5rem 2rem 0 auto; padding: 1.5rem 0 0 1.7rem; background: var(--canvas); border-top: 1px solid var(--cyan); }
.journey-scene:nth-child(2) > div { margin-left: 1rem; margin-right: auto; border-color: var(--violet); }
.journey-scene:nth-child(3) > div { border-color: #57f5a9; }
.journey-scene h3 { margin: 0; font: 600 clamp(2rem, 4vw, 3.4rem)/1 var(--serif); letter-spacing: -.035em; }
.journey-scene p { margin: .85rem 0 0; color: var(--muted); line-height: 1.62; }

.tour-portal { position: relative; max-width: 90rem; margin: 0 auto; padding: clamp(6rem, 11vw, 10rem) 1.4rem; display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.45fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; border-top: 1px solid var(--border); }
.tour-portal::before { content: ""; position: absolute; inset: 12% 2% 5% 35%; z-index: -1; border: 1px solid rgba(155,123,255,.16); transform: rotate(1.5deg); }
.tour-portal h2 { margin: 0; font: 600 clamp(2.8rem, 5vw, 4.8rem)/.94 var(--serif); letter-spacing: -.04em; }
.tour-portal-copy p { max-width: 29rem; margin: 1.5rem 0 0; color: var(--muted); font: 1.05rem/1.65 var(--serif); }
.tour-portal-media { min-width: 0; }
.tour-portal video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border-2); border-radius: 8px; background: #050505; box-shadow: 0 38px 105px -52px #000; }

.human-close { position: relative; border-top: 1px solid var(--border); background: #0d0d0f; }
.local-boundary { max-width: 76rem; margin: 0 auto; padding: clamp(5rem, 9vw, 8rem) 1.4rem; display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(20rem, 1.1fr); gap: 1.4rem clamp(3rem, 9vw, 9rem); align-items: start; }
.local-boundary h2 { grid-row: span 2; max-width: 8ch; margin: 0; font: 600 clamp(3.1rem, 6vw, 5.5rem)/.92 var(--serif); letter-spacing: -.04em; }
.local-boundary p { max-width: 35rem; margin: .35rem 0 0; color: var(--muted); font: 1.1rem/1.65 var(--serif); }
.local-boundary a { justify-self: start; }
.maker-invitation { max-width: 76rem; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1.4rem; display: grid; grid-template-columns: 6rem minmax(18rem, .8fr) minmax(20rem, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; border-top: 1px solid var(--border-2); }
.maker-signature { width: 5.5rem; height: 5.5rem; margin: 0; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font: 1.15rem/1 var(--mono); letter-spacing: .18em; }
.maker-copy h2 { max-width: 13ch; margin: 0; font: 600 clamp(2.1rem, 3.5vw, 3.2rem)/1 var(--serif); letter-spacing: -.035em; }
.maker-copy p { max-width: 31rem; margin: 1.1rem 0 0; color: var(--muted); line-height: 1.62; }
.maker-form { align-self: center; }
.maker-form > label { font: 600 1.08rem/1.4 var(--serif); }
.maker-form .field-notes-controls { margin-top: .8rem; }
.steam-finale { max-width: 76rem; min-height: 42rem; margin: 0 auto; padding: clamp(7rem, 14vw, 12rem) 1.4rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-top: 1px solid var(--border-2); }
.steam-finale h2 { max-width: 12ch; margin: 0 0 2.2rem; font: 600 clamp(3.5rem, 8vw, 6rem)/.9 var(--serif); letter-spacing: -.04em; }
.steam-finale > span { margin-top: 1rem; color: var(--faint); font: .74rem/1.5 var(--mono); }

@supports (animation-timeline: view()) {
  .truth-collision { animation: epoch-collision cubic-bezier(.16, 1, .3, 1) both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  @keyframes epoch-collision { from { transform: translateY(2.5rem); box-shadow: 0 10px 40px -35px #000; } to { transform: none; box-shadow: 0 36px 100px -45px #000; } }
}

@media (prefers-reduced-motion: reduce) {
  .truth-collision { animation: none !important; transform: none !important; }
}

h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 6.5rem); line-height: .96; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}
.big { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 8vw, 4.4rem); line-height: 1; letter-spacing: -.03em; margin: 0; }
.tiny { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--faint); margin: 2.4rem 0 0; }

/* ── the product around the proof ──────────────────────────────────────────
   The opening demonstrates one intelligence capability. This section shows the
   actual application and the complete author journey around it. Every capture is
   from the isolated public-domain sample project, never a private manuscript. */
.product { border-top: 1px solid var(--border); overflow: hidden; }
.product-intro { max-width: 74rem; margin: 0 auto; padding: clamp(6rem, 12vw, 10rem) 1.4rem 4rem; }
.product-intro h2,
.workflow h2,
.local-first h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.product-intro h2 { max-width: 11ch; font-size: clamp(3rem, 8vw, 6.2rem); line-height: .94; margin: 0; }
.product-intro > p:last-child { max-width: 43rem; margin: 2rem 0 0; color: var(--muted); font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.55; }

.workspace { max-width: 74rem; margin: 0 auto; padding: clamp(4.5rem, 9vw, 8rem) 1.4rem;
  display: grid; grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; border-top: 1px solid var(--border); }
.workspace:nth-of-type(odd) .workspace-copy { order: 2; }
.workspace:nth-of-type(odd) .product-shot { order: 1; }
.workspace-copy { position: relative; z-index: 1; }
.step { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 1.2rem; }
.workspace h2, .workspace h3 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.02;
  letter-spacing: -.03em; font-weight: 600; text-wrap: balance; margin: 0; }
.workspace-copy > p:not(.step) { color: var(--muted); margin: 1.4rem 0 0; font-family: var(--serif);
  font-size: 1.05rem; line-height: 1.6; }
.capabilities { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .62rem; }
.capabilities li { color: var(--muted); font-family: var(--mono); font-size: .86rem; line-height: 1.45; letter-spacing: .015em;
  padding-left: 1.1rem; position: relative; }
.capabilities li::before { content: ""; position: absolute; left: 0; top: .67em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(51,220,242,.55); }

.product-shot { margin: 0; min-width: 0; position: relative; }
.product-shot::before { content: ""; position: absolute; inset: 8% 10% -5%; z-index: -1;
  background: radial-gradient(ellipse, rgba(51,220,242,.18), transparent 68%); filter: blur(28px); }
.workspace-world .product-shot::before { background: radial-gradient(ellipse, rgba(155,123,255,.2), transparent 68%); }
.workspace-analyze .product-shot::before { background: radial-gradient(ellipse, rgba(255,69,176,.16), transparent 68%); }
.workspace-proof .product-shot::before { background: radial-gradient(ellipse, rgba(87,245,169,.15), transparent 68%); }
.shot-link { display: block; position: relative; color: inherit; text-decoration: none; }
.product-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); box-shadow: 0 32px 90px -38px #000, 0 0 0 1px rgba(255,255,255,.025) inset; }
.shot-action { position: absolute; right: .65rem; bottom: .65rem; min-height: 36px; padding: .48rem .7rem;
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(10,10,10,.88); color: var(--text); font: .75rem/1 var(--mono); letter-spacing: .03em;
  box-shadow: 0 8px 24px rgba(0,0,0,.36); }
.shot-link:hover .shot-action, .shot-link:focus-visible .shot-action { border-color: var(--cyan); color: var(--cyan); }
.product-shot figcaption { margin-top: .8rem; color: var(--faint); font-family: var(--mono); font-size: .8rem;
  letter-spacing: .05em; }

.workflow { max-width: 74rem; margin: 0 auto; padding: clamp(6rem, 11vw, 10rem) 1.4rem;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--border); }
.workflow h2 { font-size: clamp(2.5rem, 5.6vw, 4.8rem); line-height: .98; margin: 0; }
.workflow-steps { list-style: none; padding: 0; margin: 0; counter-reset: workflow; }
.workflow-steps li { counter-increment: workflow; display: grid; grid-template-columns: 2.5rem 1fr;
  padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.workflow-steps li:first-child { border-top: 1px solid var(--border); }
.workflow-steps li::before { content: "0" counter(workflow); color: var(--cyan); font: .76rem/1.8 var(--mono); letter-spacing: .07em; }
.workflow-steps span { color: var(--text); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.workflow-steps p { grid-column: 2; color: var(--faint); margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; }

.local-first { max-width: 74rem; margin: 0 auto clamp(4rem, 8vw, 8rem); padding: clamp(3rem, 7vw, 6rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 7rem); border: 1px solid var(--border);
  border-radius: 12px; background:
    radial-gradient(80% 100% at 0 0, rgba(51,220,242,.09), transparent 72%), var(--surface); }
.local-first h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1; margin: 0; }
.principles { align-self: center; }
.principles p { color: var(--muted); margin: 0; padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
.principles p:first-child { border-top: 1px solid var(--border); }
.principles strong { display: block; color: var(--text); font-family: var(--serif); font-size: 1.1rem; margin-bottom: .25rem; }

/* ── search questions, written for people first ───────────────────────────
   A compact reading index rather than a grid of SEO cards. The answer remains
   in the HTML whether or not a crawler or visitor opens the disclosure. */
.faq { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 1.4rem;
  display: grid; grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--border); }
.faq-head { align-self: start; }
.faq h2 { max-width: 11ch; margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 5.5vw, 4.8rem);
  font-weight: 600; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.faq-head p { max-width: 32rem; margin: 1.5rem 0 0; color: var(--muted); font-family: var(--serif);
  font-size: 1.08rem; line-height: 1.6; }
.faq-list { border-top: 1px solid var(--border-2); }
.faq details { border-bottom: 1px solid var(--border-2); }
.faq summary { min-height: 56px; padding: 1rem .15rem; color: var(--text); cursor: pointer;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.4; }
.faq summary::marker { color: var(--cyan); }
.faq details[open] summary { color: var(--cyan); }
.faq details p { max-width: 44rem; margin: -.2rem 0 1.35rem; color: var(--muted); line-height: 1.7; }
.faq details a { color: var(--link); text-underline-offset: .16em; }
.faq details a:hover { color: var(--text); }

/* ── field notes ──────────────────────────────────────────────────────────
   One real letter invitation, not a growth-widget card. The ruled form reads
   like a reply line in the author's case and makes the external handoff plain. */
.field-notes { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) 1.4rem;
  display: grid; grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr);
  align-items: end; gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--border); }
.field-notes-copy h2 { max-width: 11ch; margin: 0; font: 600 clamp(2rem, 5vw, 3.5rem)/1.02 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.field-notes-copy > p { max-width: 35rem; margin: 1.5rem 0 0; color: var(--muted);
  font: 1.08rem/1.65 var(--serif); }
.field-notes-copy .field-notes-proof { color: var(--faint); font: .75rem/1.55 var(--mono);
  letter-spacing: .03em; }
.field-notes-signup { padding: clamp(1.4rem, 4vw, 2.5rem) 0 .35rem;
  border-block: 1px solid var(--border-2); }
.field-notes-name { margin: 0 0 2rem; color: var(--cyan); font: .75rem/1.4 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; }
.field-notes-form label { display: block; margin-bottom: .8rem; color: var(--text);
  font: 600 1.08rem/1.4 var(--serif); }
.field-notes-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
.field-notes-controls input { width: 100%; min-height: 48px; padding: .72rem .9rem;
  border: 1px solid var(--border-2); border-radius: 3px; background: var(--canvas); color: var(--text);
  font: 1.08rem/1.3 var(--sans); caret-color: var(--cyan); }
.field-notes-controls input::placeholder { color: var(--faint); opacity: 1; }
.field-notes-controls input:hover { border-color: var(--muted); }
.field-notes-controls input:focus-visible { border-color: var(--cyan); }
.field-notes-controls input:user-invalid { border-color: var(--amber); }
.field-notes-controls button { min-height: 48px; padding: .72rem 1rem; border: 1px solid var(--cyan);
  border-radius: 999px; background: var(--cyan); color: var(--canvas); cursor: pointer;
  font: 700 .75rem/1.2 var(--mono); letter-spacing: .055em; }
.field-notes-controls button:hover { border-color: var(--text); background: var(--text); }
.field-notes-controls button:disabled { border-color: var(--border-2); background: var(--raised); color: var(--muted); cursor: wait; }
.field-notes-status { max-width: 38rem; margin: .85rem 0 0; color: var(--muted); font: .875rem/1.55 var(--sans); }
.field-notes-terms { max-width: 38rem; margin: .85rem 0 0; color: var(--faint); font: .75rem/1.55 var(--sans); }
.field-notes-terms a, .field-notes-archive { color: var(--link); text-underline-offset: .18em; }
.field-notes-archive { display: inline-block; margin-top: 1.3rem; font: .75rem/1.4 var(--mono); letter-spacing: .035em; }
.field-notes-about { margin-bottom: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--border); }
.field-notes-home { padding-block: clamp(5rem, 10vw, 7rem); }
.field-notes-proof a { color: var(--link); text-underline-offset: .18em; }

.close { min-height: 82svh; display: grid; place-items: center; padding: 6rem 1.4rem;
  text-align: center; border-top: 1px solid var(--border); background:
  radial-gradient(55% 55% at 50% 45%, rgba(155,123,255,.13), transparent 70%); }
.close-wrap { max-width: 58rem; }
.close-copy { max-width: 38rem; margin: 2rem auto 0; color: var(--muted); font-family: var(--serif); font-size: 1.15rem; }
.close-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .68rem 1rem;
  border: 1px solid var(--border-2); border-radius: 999px; color: var(--text); font-family: var(--mono);
  font-size: .78rem; letter-spacing: .07em; text-decoration: none; }
.button.primary { color: var(--canvas); background: var(--cyan); border-color: var(--cyan); font-weight: 700; }
.button.primary:hover { background: var(--text); border-color: var(--text); }
.button.secondary:hover { border-color: var(--cyan); }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.field-notes-confirmation { min-height: calc(100svh - 11rem); padding-top: clamp(4rem, 10vw, 7rem); }
.field-notes-confirmation h1 { font-size: clamp(2.8rem, 9vw, 5rem); line-height: .96; letter-spacing: -.04em; }
.doc.field-notes-confirmation .meta { color: var(--muted); }
.field-notes-confirmation .button.primary { color: var(--canvas); background: var(--link); border-color: var(--link); }

/* ── the case file ───────────────────────────────────────────────────────────
   One sentence opened into the world it implies, and the contradiction inside it.
   Zero motion by design — no transitions, no transforms, no reveal-on-scroll — so
   it reads identically under prefers-reduced-motion and can be judged sitting
   still. Everything here is grid + type; if it needs animation to work, it does
   not work. */
.case-screen { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 1.4rem;
  border-top: 1px solid var(--border); }
.case { max-width: 42rem; text-align: left; margin: 0 auto; }
.case h2 { max-width: 12ch; margin: 0; font: 600 clamp(2.5rem, 5vw, 4.6rem)/1 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.case-intro { max-width: 35rem; margin: 1.4rem 0 2.8rem; color: var(--muted);
  font: 1.08rem/1.6 var(--serif); }
.case-answer { margin: .8rem 0 0; color: var(--muted); font: 1rem/1.6 var(--serif); }
.case-answer a, .principles a { color: var(--link); text-underline-offset: .17em; }
.case-answer a:hover, .principles a:hover { color: var(--text); }
.case-source { margin: 1.7rem 0 0; color: var(--faint); font-size: .75rem; }
.case-source cite { color: var(--muted); }

.sentence { font-family: var(--serif); font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  line-height: 1.42; color: var(--text); margin: 1.1rem 0 2.2rem; }
.sentence .flag { color: var(--amber); }

/* The unfold: the sentence's people, and the relation between them. Wraps to one
   column under ~30rem rather than shrinking the type. */
.unfold { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 1.2rem 1rem; }
.ent { font-family: var(--mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); text-align: center; }
.ent span { display: block; margin-top: .3rem; font-size: .76rem; letter-spacing: .05em;
  text-transform: none; color: var(--faint); }
.rel { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); text-align: center; border-top: 1px solid var(--border-2); padding-top: .5rem; }

.knows { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.knows li { font-family: var(--serif); font-size: .98rem; line-height: 1.55; color: var(--muted);
  padding: .6rem 0 .6rem .9rem; border-left: 1px solid var(--border-2); margin-bottom: .5rem; }
.knows b { color: var(--text); font-weight: 600; }
.knows cite { display: block; margin-top: .25rem; font-family: var(--mono); font-size: .76rem;
  font-style: normal; letter-spacing: .08em; color: var(--cyan); }

.clash { font-family: var(--mono); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); margin: 1.5rem 0 0; padding-left: .9rem; border-left: 1px solid var(--amber); }
.verdict { font-family: var(--serif); font-size: clamp(1.15rem, 3.4vw, 1.45rem); color: var(--text);
  margin: 1.8rem 0 0; }

@media (max-width: 30rem) {
  .unfold { grid-template-columns: 1fr; gap: .55rem; }
  .rel { border-top: 0; padding-top: 0; }
}

/* ── authored answer pages ─────────────────────────────────────────────────
   The site needs durable answers, but not a stack of interchangeable SEO
   templates. These pages inherit the product's lit-screen world and behave like
   an annotated case file: direct answer, real artifact, evidence, honest edge. */
.answer-page { overflow: hidden; }
.answer-page article { min-width: 0; }
.answer-hero { max-width: 74rem; margin: 0 auto; padding: clamp(4.5rem, 8vw, 7rem) 1.4rem clamp(3.5rem, 7vw, 6rem); }
.answer-hero h1 { max-width: 19ch; font-size: clamp(3.2rem, 6vw, 5.8rem); }
.answer-lede { max-width: 54rem; margin: 2rem 0 0; color: var(--muted);
  font: clamp(1.18rem, 2.1vw, 1.48rem)/1.55 var(--serif); }
.answer-lede strong { color: var(--text); font-weight: 600; }
.answer-date { margin: 1.65rem 0 0; color: var(--faint); font: .74rem/1.6 var(--mono); letter-spacing: .035em; }

.answer-proof { max-width: 74rem; margin: 0 auto; padding: 0 1.4rem clamp(5rem, 10vw, 8.5rem); }
.answer-proof a { display: block; color: inherit; }
.answer-proof img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2);
  border-radius: 9px; background: var(--surface); box-shadow: 0 38px 110px -48px #000; }
.answer-proof figcaption { max-width: 42rem; margin: 1rem 0 0 auto; color: var(--faint);
  font: .78rem/1.55 var(--mono); letter-spacing: .025em; }
.answer-proof-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(13rem, .5fr);
  align-items: end; gap: clamp(1.2rem, 4vw, 3rem); }
.answer-proof-split figcaption { margin: 0 0 .25rem; }

.answer-body { max-width: 48rem; margin: 0 auto; padding: 0 1.4rem clamp(5.5rem, 11vw, 9rem); }
.answer-body section + section { margin-top: clamp(4.5rem, 9vw, 7rem); }
.answer-body h2, .founder-statement h2 { max-width: 18ch; margin: 0 0 1.35rem;
  font: 600 clamp(2rem, 5vw, 3.5rem)/1.02 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.answer-body p, .founder-statement p { max-width: 68ch; margin: 0 0 1.1rem; color: var(--muted);
  font: 1.08rem/1.72 var(--serif); }
.answer-body a, .founder-statement a { color: var(--link); text-underline-offset: .18em; }
.answer-body a:hover, .founder-statement a:hover { color: var(--text); }
.definition { padding: clamp(1.4rem, 4vw, 2.25rem); border: 1px solid var(--border);
  border-radius: 8px; background: linear-gradient(135deg, rgba(51,220,242,.075), transparent 45%), var(--surface); }
.definition h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.definition p:last-child, .status-note p:last-child { margin-bottom: 0; }

.fact-lines { border-top: 1px solid var(--border); }
.fact-line { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.3fr); gap: 1.5rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--border); }
.fact-line strong { color: var(--text); font: 600 1.05rem/1.45 var(--serif); }
.fact-line span { color: var(--muted); font: .94rem/1.62 var(--sans); }
.answer-aside { margin-top: 1.4rem !important; color: var(--faint) !important; font-size: .94rem !important; }
.answer-table { overflow-x: auto; margin: 1.5rem 0; border-top: 1px solid var(--border-2); }
.answer-table:focus-visible { outline-offset: 5px; }
.answer-table table { min-width: 42rem; }
.answer-table th, .answer-table td { padding: .9rem .75rem; }

.answer-break { max-width: 80rem; margin: 0 auto clamp(5.5rem, 11vw, 9rem); padding: clamp(4rem, 9vw, 7rem) clamp(1.4rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(17rem, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 8vw, 8rem);
  border-block: 1px solid var(--border); background:
  radial-gradient(75% 120% at 0 50%, rgba(155,123,255,.12), transparent 62%), var(--surface); }
.answer-break h2 { max-width: 12ch; margin: 0; font: 600 clamp(2.7rem, 6vw, 5.3rem)/.96 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.answer-break p { max-width: 58ch; margin: 0 0 1.2rem; color: var(--muted); font: 1.08rem/1.7 var(--serif); }
.answer-break p:last-child { margin-bottom: 0; }
.text-link { color: var(--cyan); font: .82rem/1.5 var(--mono); letter-spacing: .035em; text-underline-offset: .2em; }

.question-list { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: questions; }
.question-list li { counter-increment: questions; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: 1.35rem 0; border-bottom: 1px solid var(--border); }
.question-list li:first-child { border-top: 1px solid var(--border); }
.question-list li::before { content: "0" counter(questions); grid-row: 1 / 3; color: var(--cyan);
  font: .72rem/1.8 var(--mono); letter-spacing: .08em; }
.question-list strong { color: var(--text); font: 600 1.08rem/1.5 var(--serif); }
.question-list span { grid-column: 2; margin-top: .25rem; color: var(--faint); font-size: .9rem; line-height: 1.55; }
.status-note { padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); }
.status-note h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

.answer-close { max-width: 74rem; min-height: 70svh; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 1.4rem;
  display: grid; align-content: center; justify-items: center; text-align: center; border-top: 1px solid var(--border); }
.answer-close h2 { max-width: 14ch; margin: 0; font: 600 clamp(3rem, 8vw, 6.4rem)/.95 var(--serif);
  letter-spacing: -.04em; text-wrap: balance; }
.answer-close > p { max-width: 40rem; margin: 1.7rem 0 0; color: var(--muted); font: 1.08rem/1.65 var(--serif); }

/* The category guide is an authored decision instrument, not a roundup. The
   numbered line is a test an author can reuse; real product evidence carries
   more visual weight than any feature claim. */
.guide-first-view { max-width: 80rem; min-height: calc(100svh - 3.5rem); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6.5rem) 1.4rem;
  display: grid; grid-template-columns: minmax(24rem, .86fr) minmax(0, 1.14fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ai-guide-hero { max-width: none; margin: 0; padding: 0; }
.ai-guide-hero h1 { max-width: 13ch; font-size: clamp(3rem, 4.35vw, 4.55rem); }
.ai-guide-hero .answer-lede { font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.guide-opening { max-width: 74rem; margin: 0 auto clamp(5.5rem, 11vw, 9rem); padding: clamp(4.5rem, 9vw, 7rem) 1.4rem;
  border-block: 1px solid var(--border); }
.guide-instrument { display: grid; grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); column-gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.guide-instrument h2 { margin: 0; font: 600 clamp(2.3rem, 4.5vw, 3.8rem)/.98 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.guide-instrument > p { margin: 1rem 0 0; color: var(--muted); font: 1.04rem/1.62 var(--serif); }
.guide-instrument ol { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-2); }
.guide-instrument li { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: .7rem; padding: .72rem 0;
  border-bottom: 1px solid var(--border-2); color: var(--muted); font-size: .92rem; line-height: 1.42; }
.guide-instrument li span { color: var(--cyan); font: .68rem/1.8 var(--mono); letter-spacing: .08em; }
.guide-hero-proof { min-width: 0; margin: 0; }
.guide-hero-proof a, .guide-proof figure a { display: block; color: inherit; }
.guide-hero-proof img, .guide-proof img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2);
  border-radius: 10px; background: var(--surface); box-shadow: 0 40px 100px -50px #000, 0 0 80px -60px var(--cyan); }
.guide-hero-proof figcaption, .guide-proof figcaption { margin-top: .72rem; color: var(--faint); font: .76rem/1.5 var(--mono); }
.guide-intro { padding-top: 0; }
.guide-criteria { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 8.5rem) 1.4rem;
  border-top: 1px solid var(--border); }
.guide-criteria-head { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(20rem, 1.1fr);
  gap: clamp(2rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.guide-criteria-head h2 { max-width: 12ch; margin: 0; font: 600 clamp(2.8rem, 5.8vw, 5.2rem)/.94 var(--serif);
  letter-spacing: -.04em; text-wrap: balance; }
.guide-criteria-head p { max-width: 34rem; margin: 0 0 .3rem; color: var(--muted); font: 1.08rem/1.66 var(--serif); }
.criterion-lines { border-top: 1px solid var(--border-2); }
.criterion { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--border-2); }
.criterion-number { margin: .25rem 0 0; color: var(--cyan); font: .78rem/1 var(--mono); letter-spacing: .1em; }
.criterion h3 { max-width: 23ch; margin: 0; font: 600 clamp(1.8rem, 3.5vw, 2.8rem)/1.03 var(--serif); letter-spacing: -.03em; }
.criterion div > p { max-width: 66ch; margin: 1.1rem 0 0; color: var(--muted); font: 1.02rem/1.68 var(--serif); }
.criterion .epoch-answer { color: var(--text); }
.criterion .epoch-answer strong { color: var(--cyan); font-weight: 600; }
.guide-proof { max-width: 80rem; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 1.4rem;
  display: grid; grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.guide-proof-copy h2 { margin: 0; font: 600 clamp(2.7rem, 5vw, 4.8rem)/.96 var(--serif); letter-spacing: -.04em; text-wrap: balance; }
.guide-proof-copy p { max-width: 36rem; margin: 1.25rem 0 0; color: var(--muted); font: 1.05rem/1.68 var(--serif); }
.guide-proof-copy a { color: var(--link); text-underline-offset: .2em; }
.guide-proof figure { min-width: 0; margin: 0; }
.guide-close { background: radial-gradient(80% 100% at 50% 100%, rgba(155,123,255,.1), transparent 70%); }

/* Product depth is progressive disclosure from the homepage, not a second sales
   pitch. It uses the same real captures, but gives each room enough room to read. */
.product-page-hero h1 { max-width: 15ch; }
.product-page-proof { padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.product-principle { max-width: 54rem; margin: 0 auto; padding: 0 1.4rem clamp(5rem, 10vw, 8rem); }
.product-principle h2, .product-questions h2 { margin: 0; font: 600 clamp(2.5rem, 5.5vw, 4.7rem)/.98 var(--serif);
  letter-spacing: -.035em; text-wrap: balance; }
.product-principle p { max-width: 67ch; margin: 1.6rem 0 0; color: var(--muted); font: 1.12rem/1.72 var(--serif); }
.product-workflow { border-top: 1px solid var(--border); }
.product-questions { max-width: 74rem; margin: 0 auto; padding: clamp(5rem, 10vw, 8.5rem) 1.4rem;
  display: grid; grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--border); }
.product-questions > div:first-child > p { max-width: 30rem; margin: 1.35rem 0 0; color: var(--muted); font: 1.06rem/1.65 var(--serif); }
.product-question-lines { border-top: 1px solid var(--border-2); }
.product-question-lines p { margin: 0; padding: 1.35rem 0; border-bottom: 1px solid var(--border-2); }
.product-question-lines strong { display: block; color: var(--text); font: 600 1.08rem/1.45 var(--serif); }
.product-question-lines span { display: block; margin-top: .38rem; color: var(--muted); line-height: 1.62; }
.product-close .hero-actions { justify-content: center; }

/* Continuity has one signature artifact: a contradiction opened into its two
   manuscript claims. It is typography and evidence, not dashboard chrome. */
.continuity-case { max-width: 64rem; margin: 0 auto clamp(6rem, 12vw, 10rem); padding: 0 1.4rem; }
.case-line { padding: clamp(1.7rem, 5vw, 3rem); border: 1px solid var(--border-2); border-radius: 8px 8px 0 0; background: var(--surface); }
.case-label { margin: 0 0 1rem; color: var(--faint); font: .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.case-line > p:last-child { max-width: 31ch; margin: 0; color: var(--text); font: clamp(1.55rem, 4vw, 2.5rem)/1.38 var(--serif); }
.case-line mark { color: var(--amber); background: transparent; }
.case-evidence { display: grid; grid-template-columns: 1fr 1fr; border-inline: 1px solid var(--border-2); }
.case-evidence > div { padding: clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid var(--border-2); }
.case-evidence > div + div { border-left: 1px solid var(--border-2); }
.case-evidence strong { display: block; color: var(--text); font: 600 1rem/1.45 var(--serif); }
.case-evidence span { display: block; margin-top: .45rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.case-evidence cite { display: block; margin-top: .7rem; color: var(--cyan); font: normal .7rem/1.4 var(--mono); letter-spacing: .08em; }
.case-question { padding: clamp(1.8rem, 5vw, 3rem); border: 1px solid var(--border-2); border-top: 0; border-radius: 0 0 8px 8px;
  background: radial-gradient(80% 100% at 0 100%, rgba(255,182,74,.1), transparent 70%), var(--raised); }
.case-question h2 { margin: 0; font: 600 clamp(2.2rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -.035em; }
.case-question p { margin: 1rem 0 0; color: var(--muted); font: 1.04rem/1.65 var(--serif); }
.case-origin { margin: .85rem 0 0; color: var(--faint); font: .72rem/1.5 var(--mono); }
.truth-ledger { border-top: 1px solid var(--border); }
.truth-ledger > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--border); }
.truth-ledger strong { color: var(--cyan); font: .76rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.truth-ledger span { color: var(--muted); line-height: 1.6; }

/* The founder page uses no stock portrait. The signature is deliberately a
   modest maker's mark; the real manuscript and product remain the proof. */
.founder-hero h1 { max-width: 16ch; }
.founder-statement { max-width: 58rem; margin: 0 auto; padding: 0 1.4rem clamp(5.5rem, 11vw, 9rem);
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.founder-signature { width: 7rem; height: 7rem; display: grid; place-items: center; border: 1px solid var(--border-2);
  border-radius: 50%; color: var(--cyan); background: var(--surface); font: 1.2rem/1 var(--mono); letter-spacing: .18em;
  box-shadow: 0 22px 60px -32px rgba(51,220,242,.7); }
.founder-principles { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.founder-principles blockquote { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.founder-principles blockquote p { margin: 0; color: var(--text); font: 600 clamp(1.35rem, 3vw, 1.8rem)/1.35 var(--serif); }
.founder-principles blockquote span { display: block; margin-top: .45rem; color: var(--faint); font-size: .9rem; line-height: 1.55; }

@media (max-width: 720px) {
  .answer-hero { padding-top: 4rem; }
  .answer-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .answer-proof-split, .answer-break, .founder-statement { grid-template-columns: 1fr; }
  .answer-proof-split figcaption { margin-top: 0; }
  .answer-break { gap: 2rem; }
  .fact-line { grid-template-columns: 1fr; gap: .45rem; }
  .case-evidence { grid-template-columns: 1fr; }
  .case-evidence > div + div { border-left: 0; }
  .founder-statement { gap: 1.75rem; }
  .founder-signature { width: 5.5rem; height: 5.5rem; }
  .guide-first-view, .guide-instrument, .guide-criteria-head, .guide-proof { grid-template-columns: 1fr; }
  .guide-first-view { min-height: auto; gap: 2rem; padding-block: 2.5rem 4.5rem; }
  .ai-guide-hero { order: -1; }
  .ai-guide-hero h1 { font-size: clamp(2.55rem, 12vw, 3.2rem); }
  .ai-guide-hero .answer-lede { font-size: .98rem; line-height: 1.55; }
  .guide-instrument ol { grid-column: auto; grid-row: auto; margin-top: 2rem; }
  .guide-criteria-head { gap: 1.4rem; }
  .criterion { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .guide-proof { gap: 2rem; }
  .guide-proof figure { order: -1; }
}

/* ── long-form pages ─────────────────────────────────────────────────────── */
.doc { background: var(--canvas); color: var(--text); font-family: var(--serif); font-size: 17px; line-height: 1.62; padding: 2.6rem 1.4rem 4rem; }
.doc > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); max-width: var(--col); }
.doc h2 { font-family: var(--serif); font-size: 1.16rem; margin: 2.6rem auto .7rem; display: flex; align-items: baseline; gap: .7rem; }
.doc h2 .s { font-family: var(--mono); font-size: .68rem; color: var(--cyan); flex: none; padding-top: .16rem; letter-spacing: .06em; }
.doc p, .doc ul { color: var(--muted); }
.doc .meta { font-family: var(--mono); font-size: .72rem; color: var(--faint); line-height: 1.75; margin-bottom: 1.8rem; }
.doc ul { padding-left: 1.15rem; } .doc li { margin-bottom: .5rem; }
/* Body links had NO rule, so they fell through to the user-agent's #0000EE — measured
   live at 2.11:1 against the near-black canvas, on the privacy policy's own "email us
   to exercise your rights" address. --link carries the legible answer per theme
   (11.94:1 dark, 5.66:1 light, both measured in a browser). Underline stays; the
   affordance was never the problem. */
.doc a { color: var(--link); text-underline-offset: .15em; }
.doc a:hover { color: var(--text); }
.doc a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.promise { background: linear-gradient(135deg, rgba(51,220,242,.07), transparent 48%), var(--surface);
  border: 1px solid var(--border); border-radius: 3px; padding: 1.2rem 1.3rem; margin: 1.8rem auto; }
.promise p { margin: 0; color: var(--text); } .promise p + p { margin-top: .75rem; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1.4rem 1.3rem; margin: 1.9rem auto; }
.feature > h2 { margin-top: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.6rem auto; }
.scroll { overflow-x: auto; margin: 1.1rem auto; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .9rem; font-family: var(--sans); }
th, td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--muted); }
th { font-family: var(--mono); font-size: .66rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
td strong { color: var(--text); }
code { font-family: var(--mono); font-size: .88em; background: var(--raised); border: 1px solid var(--border); border-radius: 2px; padding: .05em .35em; }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--border); background: var(--surface); }
footer.site .inner { max-width: var(--col); margin: 0 auto; padding: 1.7rem 1.4rem 3rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: var(--faint); line-height: 1.95; }
footer.site a { color: var(--muted); }

@media (max-width: 560px) {
  header.site { position: sticky; top: 0; }
  header.site .inner { min-height: 3.5rem; padding: .7rem 1rem; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; font-size: .76rem;
    letter-spacing: .12em; white-space: nowrap; }
  header.site nav { gap: .72rem; }
  header.site nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .75rem; letter-spacing: .06em; }
  header.site nav .nav-secondary { display: none; }

  .case-screen { padding: 4.5rem 1rem; }

  .product-intro { padding: 5rem 1rem 3rem; }
  .product-intro h2 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .product-intro > p:last-child { margin-top: 1.4rem; font-size: 1.08rem; }
  .workspace { grid-template-columns: 1fr; gap: 1.7rem; padding: 3.75rem 1rem; }
  .workspace:nth-of-type(odd) .workspace-copy,
  .workspace:nth-of-type(odd) .product-shot { order: initial; }
  .workspace .product-shot { order: -1 !important; }
  .workspace-copy { max-width: 34rem; }
  .workspace h2, .workspace h3 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .workspace-copy > p:not(.step) { margin-top: 1rem; font-size: 1rem; }
  .capabilities { grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-top: 1.35rem; }
  .capabilities li { font-size: .82rem; }
  .product-shot { margin-inline: 0; }
  .shot-link { height: min(76vw, 19rem); overflow: hidden; border: 1px solid var(--border-2); border-radius: 7px; }
  .product-shot img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
  .workspace-write .product-shot img { object-position: 50% 45%; }
  .workspace-world .product-shot img { object-position: 24% 50%; }
  .workspace-analyze .product-shot img { object-position: 57% 50%; }
  .workspace-proof .product-shot img { object-position: 54% 58%; }
  .shot-action { right: .5rem; bottom: .5rem; min-height: 40px; }
  .product-shot figcaption { margin-top: .65rem; line-height: 1.45; }
  .home-path, .home-trust, .workflow, .local-first, .faq, .field-notes, .product-questions { grid-template-columns: 1fr; }
  .home-path, .home-trust, .product-questions { gap: 2.5rem; padding: 4.5rem 1rem; }
  .home-path-link { grid-column: auto; margin: 0; }
  .home-path-steps li, .home-trust-facts p { grid-template-columns: 1fr; gap: .4rem; }
  .workflow { gap: 2.25rem; padding: 4.5rem 1rem; }
  .workflow h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .workflow-steps li { padding: 1.15rem 0; }
  .local-first { margin-inline: 1rem; padding: 2.2rem 1.3rem; }
  .local-first h2 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .faq { gap: 2.5rem; padding: 4.5rem 1rem; }
  .faq h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .faq summary { min-height: 56px; font-size: 1.06rem; }
  .field-notes { gap: 2.4rem; padding: 4.5rem 1rem; }
  .field-notes-controls { grid-template-columns: 1fr; }
  .field-notes-controls button { width: 100%; }
  .close { min-height: auto; padding-block: 5rem; }
  .close-actions { display: grid; }
  .button { width: 100%; }
  footer.site .inner { padding-inline: 1rem; }
}

/* Studio Door homepage ---------------------------------------------------- */
.studio-door-page {
  min-width: 320px;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 58% 34%, rgba(51, 220, 242, .07), transparent 38%),
    radial-gradient(ellipse at 88% 76%, rgba(255, 182, 74, .035), transparent 32%),
    #050506;
}

.studio-door-page ::selection { color: #051012; background: rgba(115, 235, 250, .9); }
.studio-door-page :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.studio-door-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(104deg, transparent 0 13px, rgba(255,255,255,.035) 14px, transparent 15px),
    repeating-linear-gradient(17deg, transparent 0 19px, rgba(255,255,255,.025) 20px, transparent 21px);
}

.studio-door {
  position: relative;
  z-index: 1;
  height: 100svh;
  padding: clamp(.45rem, 1vw, .85rem);
}

.door-shell {
  position: relative;
  display: grid;
  grid-template-columns: clamp(10.75rem, 13vw, 12.5rem) minmax(0, 1fr) clamp(16.5rem, 20vw, 19rem);
  grid-template-rows: 3rem minmax(0, 1fr) 3rem;
  grid-template-areas:
    "title title title"
    "rail stage inspector"
    "status status status";
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #303038;
  border-radius: 9px;
  background: #0a0a0d;
  box-shadow: 0 28px 90px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255,255,255,.018);
}

.door-titlebar {
  grid-area: title;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-width: 0;
  padding: 0 .55rem 0 1rem;
  border-bottom: 1px solid #27272c;
  background: linear-gradient(90deg, #111115, #0d0f12 60%, #111115);
}

.door-brand {
  justify-self: start;
  color: var(--text);
  font: 600 .94rem/1 var(--serif);
  letter-spacing: -.015em;
  text-decoration: none;
}

.door-brand em { color: var(--cyan); font: 600 .63rem/1 var(--mono); font-style: normal; letter-spacing: .11em; text-transform: uppercase; }
.door-titlebar > p { margin: 0; color: #b1b1ba; font: .63rem/1 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.status-light { display: inline-block; width: .42rem; height: .42rem; margin-right: .45rem; border-radius: 50%; background: #57f5a9; box-shadow: 0 0 12px rgba(87,245,169,.48); }

.door-steam {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .62rem .9rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  color: #041012;
  background: var(--cyan);
  font: 750 .62rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px -18px rgba(51,220,242,.9);
  transition: transform 160ms cubic-bezier(.16,1,.3,1), background-color 160ms ease;
}
.door-steam:hover { color: #041012; background: #82eefb; transform: translateY(-1px); }

.room-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.65rem) .65rem 1rem;
  border-right: 1px solid #242429;
  background: #0b0b0e;
}
.room-rail > p:first-child { margin: 0 .55rem 1rem; color: #a0a0aa; font: .62rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.room-tabs { display: grid; gap: .28rem; }
.room-tab {
  position: relative;
  display: grid;
  min-height: 58px;
  padding: .7rem .65rem .6rem 1rem;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #a8a8b1;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.room-tab::before { content: ""; position: absolute; left: 0; top: .72rem; bottom: .72rem; width: 1px; background: #3d3d45; }
.room-tab span { font: 600 1.08rem/1.05 var(--serif); }
.room-tab small { margin-top: .25rem; color: #858590; font: .59rem/1.2 var(--mono); letter-spacing: .045em; }
.room-tab:hover { color: var(--text); background: #111116; }
.room-tab.is-current { color: var(--text); border-color: #262c30; background: linear-gradient(90deg, rgba(51,220,242,.1), rgba(51,220,242,.018)); }
.room-tab.is-current::before { background: var(--cyan); box-shadow: 0 0 13px rgba(51,220,242,.55); }
.room-tab.is-current small { color: #9fc9ce; }
.room-rail-note { margin: auto .55rem 0; color: #8e8e98; font: .61rem/1.55 var(--mono); }
.room-rail-note strong { display: block; margin-bottom: .38rem; color: #d5d5dc; font: 600 .88rem/1.2 var(--serif); }

.room-stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px),
    radial-gradient(ellipse at 48% 76%, rgba(51,220,242,.035), transparent 48%),
    #09090c;
  background-size: 100% 44px, 44px 100%, auto;
}
.room-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 100px rgba(0,0,0,.42);
}
.room-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(1.2rem, 2.25vw, 2rem) clamp(1.15rem, 2.6vw, 2.35rem) clamp(1rem, 2vw, 1.75rem);
}
.room-panel[hidden] { display: none; }
.room-panel.is-current { animation: door-room-in 420ms cubic-bezier(.16,1,.3,1) both; }
@keyframes door-room-in { from { clip-path: inset(0 0 5% 0); filter: blur(3px); } to { clip-path: inset(0); filter: none; } }

.room-intro { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(14rem, .9fr) minmax(15rem, .82fr); gap: clamp(1.25rem, 2.4vw, 2.5rem); align-items: end; margin-bottom: clamp(.85rem, 1.8vh, 1.25rem); }
.room-intro h1, .room-intro h2 { max-width: 11ch; margin: 0; color: var(--text); font: 600 clamp(2rem, 3.65vw, 3.9rem)/.93 var(--serif); letter-spacing: -.04em; text-wrap: balance; }
.room-intro h1 span { display: block; margin-top: .12em; color: var(--cyan); font-size: .76em; font-style: italic; font-weight: 400; line-height: 1; }
.room-intro p { max-width: 44ch; margin: 0 0 .15rem; color: #c7c7cf; font: clamp(.88rem, 1vw, 1rem)/1.48 var(--serif); }

.room-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #383841;
  border-radius: 6px;
  background: #050506;
  box-shadow: 0 24px 74px -35px #000, 0 0 0 1px rgba(255,255,255,.012);
}
.room-media > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.01); }

.test-media > img { opacity: .7; filter: saturate(.72); }
.test-media figcaption { position: absolute; right: clamp(.8rem, 2vw, 1.7rem); bottom: clamp(.8rem, 2vw, 1.7rem); width: min(24rem, 68%); padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid rgba(255,182,74,.5); background: rgba(7,7,9,.96); box-shadow: 0 20px 60px -30px #000; }
.test-media figcaption strong { display: block; color: var(--amber); font: 700 clamp(1.2rem, 2vw, 2rem)/1 var(--mono); letter-spacing: -.04em; text-transform: uppercase; }
.test-media figcaption span { display: block; margin: .75rem 0; color: #d1d1d6; font: .9rem/1.45 var(--serif); }
.test-media figcaption a { color: var(--cyan); font: .58rem/1 var(--mono); }

.room-tour { display: grid; place-items: center; overflow: hidden; padding: clamp(.75rem, 2vw, 1.5rem); }
.room-tour video { display: block; width: min(100%, 64rem); max-height: 100%; border: 1px solid #313138; background: #000; }
.room-tour .tour-transcript { position: absolute; z-index: 4; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); width: auto; max-width: min(26rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); margin: 0; overflow: auto; border: 1px solid #383841; border-radius: 4px; background: rgba(9,9,12,.96); box-shadow: 0 18px 55px -28px #000; }
.room-tour .tour-transcript summary { min-height: 36px; padding: .65rem .8rem; color: #c8c8d0; font: .58rem/1 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.room-tour .tour-transcript[open] { width: min(26rem, calc(100% - 2rem)); padding-bottom: .5rem; }
.room-tour .tour-transcript p { margin: 0 .8rem .65rem; color: #c0c0c8; font-size: .82rem; line-height: 1.45; }

.studio-inspector {
  grid-area: inspector;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(.95rem, 1.8vw, 1.5rem);
  border-left: 1px solid #242429;
  background: linear-gradient(180deg, #101015, #0d0d11 68%, #11100e);
  scrollbar-width: thin;
  scrollbar-color: #3e3e47 transparent;
}
.inspector-close { display: none; }
.inspector-label { margin: 0 0 .55rem; color: var(--cyan); font: .61rem/1.3 var(--mono); letter-spacing: .085em; text-transform: uppercase; }
.inspector-copy h2, .field-notes-card h2 { margin: 0; color: var(--text); font: 600 clamp(1.4rem, 1.8vw, 1.85rem)/1 var(--serif); letter-spacing: -.025em; }
.inspector-copy > p:not(.inspector-label), .field-notes-card > p:not(.chris-mark) { margin: .65rem 0; color: #bebec7; font: .84rem/1.46 var(--serif); }
.inspector-copy > a, .inspector-links a { color: var(--cyan); font: .61rem/1.4 var(--mono); text-underline-offset: .2em; }
.field-notes-card { margin-top: clamp(1rem, 2.4vh, 1.55rem); padding-top: clamp(1rem, 2.4vh, 1.55rem); border-top: 1px solid #34343c; }
.chris-heading { display: flex; gap: .7rem; align-items: center; }
.chris-heading > div > p { margin: .22rem 0 0; color: #8f8f99; font: .58rem/1.3 var(--mono); }
.chris-mark { flex: 0 0 auto; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; margin: 0; border: 1px solid rgba(51,220,242,.55); border-radius: 50%; color: var(--cyan); font: .58rem/1 var(--mono); }
.studio-inspector .field-notes-form { margin-top: .7rem; }
.studio-inspector .field-notes-form > label { color: #c7c7cf; font: .59rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.studio-inspector .field-notes-controls { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-top: .45rem; }
.studio-inspector .field-notes-controls input, .studio-inspector .field-notes-controls button { width: 100%; min-height: 44px; }
.studio-inspector .field-notes-controls input { padding: .65rem .72rem; border: 1px solid #35353e; border-radius: 4px; color: var(--text); background: #08080a; }
.studio-inspector .field-notes-controls button { border: 1px solid rgba(255,255,255,.18); border-radius: 5px; color: #031012; background: var(--cyan); font: 750 .6rem/1 var(--mono); letter-spacing: .055em; text-transform: uppercase; cursor: pointer; transition: background-color 160ms ease, transform 160ms cubic-bezier(.16,1,.3,1); }
.studio-inspector .field-notes-controls button:hover { background: #82eefb; transform: translateY(-1px); }
.studio-inspector .field-notes-status { margin: .55rem 0 0; color: #a8a8b2; font: .68rem/1.45 var(--sans); }
.studio-inspector .field-notes-terms { margin: .5rem 0 0; color: #a1a1ab; font: .68rem/1.45 var(--sans); }
.studio-inspector .field-notes-terms a { color: #b6b6c0; text-underline-offset: .18em; }
.inspector-links { margin: .65rem 0 0; color: #777781; font: .58rem/1.4 var(--mono); }

.door-statusbar {
  grid-area: status;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  align-items: center;
  min-width: 0;
  padding: 0 1rem;
  border-top: 1px solid #27272c;
  background: #0e0e11;
}
.door-statusbar > p { margin: 0; color: #a0a0a9; font: .59rem/1 var(--mono); letter-spacing: .065em; text-transform: uppercase; }
.door-statusbar > p span { color: var(--cyan); }
.door-statusbar nav { display: flex; justify-self: end; gap: 1rem; }
.door-statusbar nav a { color: #a0a0a9; font: .59rem/1 var(--mono); text-decoration: none; }
.door-statusbar nav a:hover { color: var(--text); }
.notes-toggle { display: none; }
.inspector-backdrop { display: none; }

@media (max-width: 1050px) {
  .door-shell { grid-template-columns: 10.25rem minmax(0, 1fr) 16rem; }
  .room-intro { grid-template-columns: 1fr; gap: .65rem; align-items: start; }
  .room-intro h1, .room-intro h2 { font-size: clamp(2rem, 4.7vw, 3.5rem); }
  .room-intro p { max-width: 55ch; }
}

@media (max-width: 860px) {
  .studio-door { padding: 0; }
  .door-shell {
    border: 0;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 3rem minmax(0, 1fr) 4.1rem 3rem;
    grid-template-areas: "title" "stage" "rail" "status";
  }
  .door-titlebar { grid-template-columns: 1fr auto; padding-left: .75rem; }
  .door-titlebar > p { display: none; }
  .door-steam { min-height: 44px; padding: .58rem .72rem; }
  .room-stage { border-bottom: 1px solid #29292e; }
  .room-panel { grid-template-rows: auto auto; align-content: center; padding: 1rem .75rem .75rem; }
  .room-intro { display: block; margin-bottom: .8rem; }
  .room-intro h1, .room-intro h2 { max-width: 12ch; font-size: clamp(2rem, 8.8vw, 3rem); }
  .room-intro h1 span { display: inline; margin-left: .15em; }
  .room-intro p { max-width: 46ch; margin-top: .55rem; font-size: .82rem; line-height: 1.4; }
  .room-panel:not([data-panel="make"]) .room-media { aspect-ratio: 16 / 9; }
  .room-media { border-radius: 5px; }
  .room-media > img { object-fit: cover; }
  .test-media figcaption { width: min(21rem, 78%); padding: .9rem; }
  .test-media figcaption span { margin: .5rem 0; font-size: .78rem; }
  .room-tour { padding: .5rem; }
  .room-tour .tour-transcript { font-size: .75rem; }

  .room-rail { padding: .35rem .45rem; border: 0; background: #0b0b0e; }
  .room-rail > p, .room-rail-note { display: none; }
  .room-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .22rem; }
  .room-tab { place-items: center; min-height: 52px; padding: .55rem .2rem; text-align: center; }
  .room-tab::before { left: .45rem; right: .45rem; top: auto; bottom: 0; width: auto; height: 1px; }
  .room-tab span { font-size: .92rem; }
  .room-tab small { display: none; }

  .studio-inspector {
    position: fixed;
    z-index: 20;
    inset: 3.25rem .65rem .65rem;
    display: flex;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(1.25rem) scale(.985);
    pointer-events: none;
    border: 1px solid #34343c;
    border-radius: 8px;
    box-shadow: 0 30px 100px #000;
    transition: opacity 180ms ease, transform 260ms cubic-bezier(.16,1,.3,1), visibility 0s 260ms;
  }
  .notes-open .studio-inspector { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .inspector-close { display: block; align-self: flex-end; min-height: 44px; margin: -.35rem -.35rem .25rem 0; padding: 0 .8rem; border: 1px solid #34343d; border-radius: 999px; color: #bcbcc5; background: #111116; font: .68rem/1 var(--mono); cursor: pointer; }
  .field-notes-card { margin-top: 2rem; }
  .inspector-backdrop { position: fixed; z-index: 19; inset: 0; border: 0; background: rgba(0,0,0,.72); }
  .notes-open .inspector-backdrop { display: block; }

  .door-statusbar { grid-template-columns: 1fr auto; padding: 0 .65rem; }
  .door-statusbar > p { display: none; }
  .door-statusbar nav { gap: .7rem; overflow: hidden; }
  .door-statusbar nav a:nth-child(2), .door-statusbar nav a:nth-child(3) { display: none; }
  .notes-toggle { display: block; min-height: 44px; padding: 0 .8rem; border: 1px solid rgba(51,220,242,.42); border-radius: 999px; color: var(--cyan); background: rgba(51,220,242,.06); font: 700 .68rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
}

@media (max-width: 560px), (max-height: 650px) {
  .room-panel { padding-top: .72rem; }
  .room-intro { margin-bottom: .55rem; }
  .room-intro h1, .room-intro h2 { font-size: clamp(1.72rem, 8vw, 2.4rem); line-height: .94; }
  .room-intro p { margin-top: .38rem; font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .room-panel.is-current { animation: none; }
  .studio-inspector { transition: none; }
}

@media (max-width: 960px) {
  .hero:not(.hero-home) { min-height: auto; grid-template-columns: 1fr; padding-block: 4.5rem 3.5rem; }
  .hero h1 { max-width: 11ch; font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .hero-home h1 { max-width: 18ch; }
  .hero-product { margin-top: .5rem; }
  .tour-copy { grid-template-columns: 1fr; gap: 1rem; }
  .tour h2 { font-size: clamp(2.5rem, 11vw, 3.8rem); }
}

@media (max-width: 350px) {
  header.site nav { gap: .65rem; }
  header.site nav a { font-size: .68rem; }
  .brand em { display: none; }
  .capabilities { grid-template-columns: 1fr; }
  .shot-action { font-size: .7rem; }
}

@media (max-width: 1100px) {
  .expanse-hero { grid-template-columns: minmax(20rem, .8fr) minmax(31rem, 1.25fr); }
  .expanse-window { margin-right: -18vw; }
  .truth-stage { min-height: 43rem; }
  .studio-journey { grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.35fr); gap: 4rem; }
}

@media (max-width: 800px) {
  .expanse-hero {
    min-height: auto; grid-template-columns: 1fr; gap: 2.5rem;
    padding: 4.5rem 1rem 5rem;
  }
  .expanse-copy h1 { max-width: 9.5ch; font-size: clamp(3.4rem, 12vw, 5.2rem); }
  .expanse-copy > p:first-of-type { max-width: 38rem; }
  .expanse-window { width: calc(100% + 1rem); margin: 0 -1rem 0 0; transform: none; }
  .expanse-window img { min-width: 0; border-radius: 8px 0 0 8px; }
  .expanse-window figcaption { width: 85%; margin-left: 0; }
  .manuscript-current { left: 1rem; bottom: 1rem; }

  .truth-copy { grid-template-columns: 1fr; gap: 1.5rem; }
  .truth-copy h2 { max-width: 12ch; }
  .truth-stage { min-height: 0; }
  .truth-world { width: 105%; transform: translateX(-5%); }
  .truth-collision { position: relative; top: auto; right: auto; width: calc(100% - 1.2rem); margin: -4rem 0 0 auto; }

  .studio-journey { grid-template-columns: 1fr; gap: 4rem; padding-block: 6rem; }
  .journey-guide-sticky { position: static; padding-bottom: 0; }
  .journey-guide h2 { max-width: 11ch; }
  .journey-scenes { gap: 5rem; }
  .journey-scene { min-height: 0; }

  .tour-portal { grid-template-columns: 1fr; gap: 2.5rem; }
  .tour-portal::before { inset: 34% 0 4% 5%; }
  .local-boundary { grid-template-columns: 1fr; gap: 1.5rem; }
  .local-boundary h2 { grid-row: auto; max-width: 11ch; }
  .maker-invitation { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .maker-form { grid-column: 2; }
}

@media (max-width: 560px) {
  header.site nav a[href="/local-ai-writing-software/"] { display: none; }
  .expanse-hero { padding-top: 3.1rem; padding-bottom: 4.25rem; gap: 1.8rem; }
  .expanse-hero::before { inset: 42% -50% 0 10%; opacity: .65; }
  .expanse-copy h1 { font-size: clamp(3rem, 14vw, 4.35rem); }
  .expanse-copy h1 span { margin-top: .12em; }
  .expanse-copy > p:first-of-type { margin-top: 1.25rem; font-size: 1.03rem; }
  .expanse-copy .hero-actions { margin-top: 1.35rem; }
  .expanse-copy .button { width: 100%; }
  .hero-watch { width: auto; }
  .hero-maker { margin-top: .75rem; font-size: .68rem; }
  .expanse-window { width: calc(100% + 1rem); }
  .expanse-window figcaption { width: 96%; font-size: .72rem; }
  .manuscript-current { font-size: .57rem; letter-spacing: .12em; }

  .truth-reveal { padding: 4.75rem 1rem; }
  .truth-copy { margin-bottom: 2.25rem; }
  .truth-copy h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .truth-copy p { font-size: 1.02rem; }
  .truth-world { width: 110%; transform: translateX(-8%); }
  .truth-world figcaption { max-width: 85%; }
  .truth-collision { width: calc(100% - .6rem); margin-top: -2.4rem; padding: 1.35rem 1.15rem 1.5rem; }
  .truth-line { font-size: 1.38rem; }
  .truth-sources p { padding-right: 0; }
  .truth-sources cite { position: static; display: block; margin-top: .25rem; }
  .truth-clash { font-size: 1.8rem; }

  .studio-journey { padding: 5rem 1rem; }
  .journey-guide h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .journey-scenes { gap: 4.5rem; }
  .journey-scene figure { width: calc(100% + 1rem); }
  .journey-scene > div,
  .journey-scene:nth-child(2) > div { max-width: calc(100% - 1rem); margin: -1.5rem 0 0 auto; padding: 1.15rem 0 0 1rem; }
  .journey-scene h3 { font-size: 2.25rem; }

  .tour-portal { padding: 5rem 1rem; }
  .tour-portal h2 { font-size: clamp(2.7rem, 13vw, 3.9rem); }
  .tour-portal-media { width: calc(100% + 1rem); }
  .tour-portal video { border-radius: 7px 0 0 7px; }
  .tour-portal .tour-transcript { width: calc(100% - 1rem); margin-left: 0; }

  .local-boundary { padding: 4.75rem 1rem; }
  .local-boundary h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .maker-invitation { padding: 4.5rem 1rem; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.5rem 1rem; }
  .maker-signature { width: 4.25rem; height: 4.25rem; }
  .maker-copy h2 { font-size: 2.1rem; }
  .maker-form { grid-column: 1 / -1; }
  .steam-finale { min-height: 34rem; padding: 6rem 1rem; }
  .steam-finale h2 { font-size: clamp(3.1rem, 14vw, 4.4rem); }
  .steam-finale .button { width: 100%; }
}

/* -- Press kit (/press/) -------------------------------------------------------------- */
.press-media { max-width: 74rem; margin: 0 auto; padding: 0 1.4rem clamp(4.5rem, 9vw, 7rem); }
.press-media h2 { margin: 0 0 1.35rem; color: var(--text); font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--serif); }
.press-note { max-width: 68ch; margin: 0 0 1.4rem; color: var(--muted); line-height: 1.6; }
.press-video { margin: 0; }
.press-video video { display: block; width: 100%; height: auto; border: 1px solid var(--border-2); background: var(--surface); }
.press-video figcaption, .press-grid figcaption, .press-logos figcaption { margin-top: .75rem; color: var(--faint); line-height: 1.55; }
.press-media figcaption a { color: var(--link); text-underline-offset: .18em; }
.press-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.press-grid figure, .press-logos figure { margin: 0; }
.press-grid a { display: block; }
.press-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--border-2); }
.press-grid a:focus-visible img, .press-grid a:hover img { border-color: var(--cyan); }
.press-grid figcaption strong { color: var(--text); }
.press-logos { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: flex-end; }
.press-logos img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); background: var(--surface); }
.press-logo-wide img { width: min(600px, 100%); }
@media (max-width: 720px) {
  .press-grid { grid-template-columns: minmax(0, 1fr); }
}