/* ==========================================================================
   Groundtell marketing site — prototype
   Tokens taken verbatim from platform/web/src/app.css so the site and the
   product read as one thing.
   ========================================================================== */

:root {
  /* light ground (page default) */
  --bg-primary:#faf8f6;
  --bg-secondary:#f0edea;
  --bg-surface:#fff;
  --bg-card:#fff;
  --bg-card-hover:#f5f3f0;
  --text-primary:#1a1a1a;
  --text-secondary:#3d3d3d;
  --text-muted:#6b6b6b;
  --accent:#5f8a9b;
  --accent-hover:#4e7a8b;
  --accent-dim:rgba(95,138,155,.1);
  --border:rgba(0,0,0,.08);
  --border-hover:rgba(0,0,0,.15);

  /* dark stage (map workspace theme) */
  --d-bg:#12161a;
  --d-bg-surface:#1a2024;
  --d-text:#edf1f3;
  --d-text-secondary:#b9c2c7;
  --d-text-muted:#7c8a91;
  --d-accent:#7aa5b5;
  --d-border:rgba(255,255,255,.09);

  --font-display:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --radius-sm:6px;
  --radius:12px;
  --radius-lg:20px;

  --nav-h:68px;
  --wrap:1320px;
  --pad:40px;

  /* motion — affinity.studio's measured system */
  --ease-out:cubic-bezier(0,0,.13,1);
  --ease-move:cubic-bezier(.68,0,.23,1);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:auto}
body{
  margin:0;font-family:var(--font-body);background:var(--bg-primary);
  color:var(--text-primary);line-height:1.6;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0}
p{margin:0}
/* height:auto matters: every img carries width/height attributes so the layout
   reserves space before it loads, and without this the attribute wins as a
   literal pixel height the moment CSS sets a width. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

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

/* ---------- buttons & links ---------- */
.cta{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  padding:15px 32px;border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(95,138,155,.3);
  transition:background .15s ease-in-out,transform .15s var(--ease-out),box-shadow .15s ease-in-out;
}
.cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(95,138,155,.42)}
.cta:active{transform:scale(.99)}
.cta-sm{padding:10px 20px;font-size:.9rem;border-radius:var(--radius-sm);box-shadow:none;white-space:nowrap}
.cta-sm:hover{box-shadow:0 4px 14px rgba(95,138,155,.3)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:.94rem;font-weight:500;color:var(--accent);
  transition:color .15s ease-in-out;
}
.link-arrow span{transition:transform .18s var(--ease-out)}
.link-arrow:hover{color:var(--accent-hover)}
.link-arrow:hover span{transform:translateX(4px)}
.link-on-dark{color:var(--d-text)}
.link-on-dark:hover{color:#fff}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  color:var(--d-text);
  transition:transform .3s var(--ease-out),background-color .25s ease-in-out,
             border-color .25s ease-in-out,color .25s ease-in-out;
  border-bottom:1px solid transparent;
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:100%;
  display:flex;align-items:center;gap:40px;
}
.nav[data-solid="true"]{
  background:rgba(250,248,246,.88);backdrop-filter:blur(10px);
  border-bottom-color:var(--border);color:var(--text-primary);
}
.nav[data-hidden="true"]{transform:translateY(-100%)}

.nav-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark,.brand-word{
  display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.brand-mark{
  width:30px;height:28px;
  -webkit-mask-image:url(brand/groundtell-logomark.svg);
  mask-image:url(brand/groundtell-logomark.svg);
}
.brand-word{
  width:104px;height:24px;
  -webkit-mask-image:url(brand/groundtell-wordmark.svg);
  mask-image:url(brand/groundtell-wordmark.svg);
}

.nav-links{display:flex;gap:30px;font-size:.92rem;font-weight:500}
.nav-links a{opacity:.82;transition:opacity .15s ease-in-out}
.nav-links a:hover{opacity:1}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav-signin{font-size:.92rem;font-weight:500;opacity:.82}
.nav-signin:hover{opacity:1}

/* ==========================================================================
   7.1 HERO — pinned layer assembly
   ========================================================================== */
.hero{position:relative;height:480vh;background:var(--d-bg)}
/* The fourth plate and its step are the phone's alone: on desktop the workspace
   walk covers flow with a frame of its own, and two readings of one layer is one
   too many. */
@media (min-width:721px){
  .hero-layer[data-i="3"],.readout-steps i:nth-child(4){display:none}
}
.hero-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--d-bg);color:var(--d-text);
}

/* the scene scales down into an app window at the end of the pin */
.hero-scene{position:absolute;inset:0;display:grid;place-items:center;will-change:transform}
.hero-map{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--d-bg);
}
/* set once when the window starts forming, not tweened per scroll frame */
.hero-map.is-framed{
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.hero-layers{position:absolute;inset:0}
/* NO transition on any scroll-driven opacity. These values are written on
   every rAF tick, and a transition makes the browser ease toward a target that
   has already moved — which reads as lag and stepping, not smoothing.
   will-change promotes each plate so a fade is a GPU composite, not a repaint. */
.hero-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity;
}
.hero-layer.is-on{opacity:1}

/* scrim: darkens only where the headline sits, so the terrain still reads */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(68% 52% at 50% 45%,
      rgba(18,22,26,.84) 0%,rgba(18,22,26,.70) 30%,rgba(18,22,26,.44) 58%,
      rgba(18,22,26,.16) 82%,rgba(18,22,26,0) 100%),
    linear-gradient(to bottom,rgba(18,22,26,.52) 0%,rgba(18,22,26,0) 18%),
    linear-gradient(to top,rgba(18,22,26,.34) 0%,rgba(18,22,26,0) 16%);
  will-change:opacity;
}

/* the workspace frames — one per analysis layer, stacked and cross-faded */
.hero-app{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity}
.app-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity;
}
.app-frame[data-i="0"]{opacity:1}

/* instrument readout */
.readout{
  position:absolute;right:var(--pad);bottom:26px;text-align:right;z-index:5;
  will-change:opacity;
}
.readout-name{
  font-family:var(--font-mono);font-size:.82rem;font-weight:500;
  color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.75);
}
.readout-desc{
  font-size:.8rem;color:rgba(255,255,255,.8);margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7);
}
.readout-steps{display:flex;gap:5px;justify-content:flex-end;margin-top:10px}
.readout-steps i{
  display:block;width:26px;height:2px;border-radius:1px;
  background:rgba(255,255,255,.18);transition:background .25s ease-in-out;
}
.readout-steps i.is-on{background:var(--d-accent)}

/* headline */
.hero-copy{
  position:relative;z-index:4;text-align:center;
  max-width:900px;margin:0 auto;padding:0 var(--pad);
  height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:center;pointer-events:none;will-change:transform,opacity;
}
.hero-copy > *{pointer-events:auto}
.hero-copy h1{
  font-weight:800;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.04;
  letter-spacing:-.045em;color:#fff;
  text-shadow:0 2px 8px rgba(12,16,19,.55),0 6px 44px rgba(12,16,19,.5);
}
.hero-copy h1 .verb{color:var(--d-accent)}
.hero-sub{
  margin-top:22px;font-size:1.08rem;font-weight:600;line-height:1.6;max-width:600px;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 4px rgba(12,16,19,.7),0 2px 22px rgba(12,16,19,.55);
}
.hero-ctas{margin-top:34px;display:flex;align-items:center;gap:28px}

.hero-hint{
  position:absolute;left:var(--pad);bottom:28px;z-index:4;
  font-size:.78rem;letter-spacing:.02em;color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7);
  will-change:opacity;
}

/* ==========================================================================
   7.3 PILLARS
   ========================================================================== */
.pillars{background:var(--bg-primary);padding:126px 0 118px}
.section-h{
  font-weight:800;font-size:clamp(1.9rem,3.2vw,2.4rem);letter-spacing:-.025em;
  line-height:1.12;text-align:center;max-width:16em;margin:0 auto 68px;
}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.pillar .ico{
  width:38px;height:38px;stroke:var(--accent);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px;
}
.pillar h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.pillar p{margin:9px 0 16px;font-size:.93rem;color:var(--text-secondary)}

/* ==========================================================================
   DESIGN TOOLS — three panels at their own size, then all of them at work
   ========================================================================== */
/* A CTA that closes a section rather than sitting in a layout. Used at the
   foot of the four rows and of the steps list — both places where an argument
   finishes and the only thing left to do is the one thing the page wants. */
.sec-cta{display:flex;justify-content:center;margin-top:clamp(48px,5vw,72px)}

/* ---------- the four things: alternating rows -------------------------------
   Replaced a four-across card strip. Four cards across gave each step a
   sentence and a thumbnail and did justice to neither; a row each gives the
   capture room to actually be watched, and alternating the side keeps the page
   reading downwards instead of turning into a list. */
/* Bottom padding carries the gap to the next section; the section below
   adds a much smaller top padding, because both sit on the same ground
   and their two paddings were being read as one hole. */
.fx{background:var(--bg-primary);padding:126px 0 76px}
.fx .section-h{margin-bottom:clamp(40px,5vw,64px)}
.fx-rows{display:grid;gap:clamp(64px,7vw,110px)}
.fx-row{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
/* Media first in the DOM, so the default row is media-left. The flip is a
   pure re-order — the reading order of the markup never changes. The columns
   have to be mirrored with it: leave them and the flipped rows hand the media
   the NARROW column, so Read and Deliver come out visibly smaller than Fetch
   and Design. */
.fx-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.fx-flip .fx-media{order:2}
.fx-flip .fx-copy{order:1}

.fx-media{margin:0;line-height:0}
.fx-vid{
  /* One shape for all four slots. The posters are stills pulled from the app
     and are not all the same crop — without this the export menu renders twice
     the height of the contour shot and the row stops alternating cleanly. It
     holds for the finished loops too, which will not be pixel-identical
     either. */
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius-lg);border:1px solid var(--border);
  box-shadow:0 18px 48px rgba(26,26,26,.16);
  background:var(--bg-secondary);
}
.fx-copy{max-width:26em}
.fx-n{
  display:block;margin-bottom:12px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);
}
.fx-copy h3{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:700;letter-spacing:-.028em;line-height:1.1}
.fx-copy p{margin-top:16px;font-size:1.04rem;line-height:1.6;color:var(--text-secondary)}
.fx-copy p strong{color:var(--text-primary);font-weight:600}

@media (max-width:820px){
  .fx{padding:84px 0 76px}
  .fx-row{grid-template-columns:1fr;gap:26px}
  /* On one column the flip would put the copy above its own picture on every
     other row, which reads as the copy belonging to the row before it. */
  .fx-flip .fx-media{order:1}
  .fx-flip .fx-copy{order:2}
}

.draw{background:var(--bg-secondary);padding:120px 0 128px}
/* the section heading carries a lead here; .section-h's own margin would
   leave the two too far apart to read as one block */
.draw .section-h{margin-bottom:18px}
.section-lead{
  max-width:44em;margin:0 auto 62px;text-align:center;
  font-size:1.05rem;color:var(--text-secondary);
}

/* ---------- input → outcome rows ----------
   Two columns: the argument on one side, the pair of pictures on the other.
   The input sits ON the outcome rather than beside it, because the point being
   made is one of scale — a panel this small produced a result that big — and
   two images side by side at similar widths make the opposite point. */
.io{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.35fr);
  gap:clamp(32px,4vw,64px);align-items:center;
  margin-top:clamp(56px,6vw,88px);
}
.io-flip .io-copy{order:2}
.io-flip .io-shots{order:1}

.io-copy{max-width:30em}
.io-n{
  display:block;margin-bottom:12px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);
}
.io-copy h3{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.io-copy p{margin-top:14px;font-size:1rem;color:var(--text-secondary)}
.io-fact{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:.84rem;color:var(--text-primary);
}

.io-shots{position:relative}
.io-out{
  width:100%;border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:0 18px 48px rgba(26,26,26,.16);
}

/* A panel shot is not a photograph. These are cut out of the app with their own
   rounded corners left transparent, so they carry a shadow of their own shape —
   a border or a box-shadow would draw a rectangle around a corner that isn't
   there, and the map behind the corners is exactly what was cropped away. */
.io-panel{
  border:0;box-shadow:none;background:none;border-radius:0;
  filter:drop-shadow(0 16px 34px rgba(10,14,16,.42));
}

/* The input, overlapped into the corner and deliberately small. */
.io-in{
  /* Big enough to READ. At 17% the grade card rendered as a 140px smudge —
     "deliberately small" stops working the moment you cannot make out the one
     field the row is about. It still reads as small against the outcome. */
  position:absolute;left:-24px;bottom:-28px;width:clamp(190px,26%,280px);
}
.io-flip .io-in{left:auto;right:-22px}
/* Row 02's inset is a chart, not a settings card — it has to be read, not
   glanced at, so it takes about half the frame. It still sits ON the map,
   because the ground is the subject in all three rows. */
.io-in-lg{width:clamp(260px,48%,430px);bottom:-34px}

/* ---------- row 01: the app's own "Grade on map", over the app's own map ----
   Two captures of one framing, cross-fading. The control is the product's
   control — same label, same shape — because the thing being shown is what that
   switch does to a drawn line, and a visitor should be able to try it before
   they ever open the app. */
.io-frame{position:relative;line-height:0}
.io-alt{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:var(--radius);
  opacity:0;transition:opacity .22s cubic-bezier(0,0,.13,1);
}
.io-frame[data-grade="off"] .io-alt{opacity:1}

.io-switch{
  position:absolute;top:14px;right:14px;
  display:flex;align-items:center;gap:10px;
  padding:7px 9px 7px 13px;border-radius:999px;
  background:rgba(18,22,26,.84);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.8rem;line-height:1;color:#e8eef1;white-space:nowrap;
}
.io-sw{
  position:relative;width:38px;height:22px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.24);cursor:pointer;
  transition:background .18s cubic-bezier(0,0,.13,1);
}
.io-sw[aria-checked="true"]{background:var(--accent)}
.io-sw:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.io-knob{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .18s cubic-bezier(0,0,.13,1);
}
.io-sw[aria-checked="true"] .io-knob{transform:translateX(16px)}
@media (prefers-reduced-motion:reduce){
  .io-alt,.io-sw,.io-knob{transition:none}
}

.io-more{
  list-style:none;margin:clamp(56px,6vw,84px) 0 0;padding:26px 0 0;
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px 40px;
}
.io-more li{font-size:.93rem;color:var(--text-secondary)}
.io-more b{font-weight:600;color:var(--text-primary)}


/* ==========================================================================
   7.4 PRODUCT BAND — the full-bleed pattern
   ========================================================================== */
.band{
  position:relative;background:var(--d-bg);color:var(--d-text);
  min-height:min(100vh,940px);display:flex;align-items:center;overflow:hidden;
}
.band-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.85);
}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,22,26,.94) 0%,rgba(18,22,26,.8) 38%,rgba(18,22,26,.35) 68%,rgba(18,22,26,.15) 100%);
}
.band-grid{
  position:relative;z-index:2;width:100%;max-width:none;
  padding-left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  padding-right:var(--pad);
}
.band-copy{position:relative;z-index:2;max-width:32em;padding:150px 0}
.band-copy h2{
  font-weight:800;font-size:clamp(1.9rem,3.4vw,2.65rem);line-height:1.08;
  letter-spacing:-.03em;color:#fff;
}
.band-copy p{margin-top:20px;font-size:1rem;color:var(--d-text-secondary);max-width:33em}
.band-ctas{margin-top:34px;display:flex;align-items:center;gap:26px}

/* the panel bleeds off the right and bottom edges — cropped by the viewport,
   no browser chrome, no device mockup: it reads as bigger than the page */
.band-panel{
  position:absolute;z-index:2;
  left:47%;right:-80px;top:104px;bottom:-72px;
}
.band-panel img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:left center;
  border-radius:var(--radius-lg) 0 0 0;
  border:1px solid var(--d-border);border-right:0;border-bottom:0;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

/* ==========================================================================
   7.5 THE LAYERS — accordion drives one swapping map panel
   ========================================================================== */
/* Grounds alternate across the whole page — primary / secondary / dark — so
   that two adjacent sections never share one. Changing this section's ground
   means checking .draw, .band-alt and .steps, which are its neighbours. */
.layers{background:var(--bg-primary);padding:120px 0 126px}
.layers-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,4.5vw,72px);align-items:start}

/* the panel follows the list: six rows is taller than one 7:5 plate, and a
   comparison you have to scroll away from is not a comparison */
.layers-panel{position:sticky;top:calc(var(--nav-h) + 28px);margin:0}
.lyr-stack{
  position:relative;aspect-ratio:1400/1034;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--border);
  background:var(--d-bg);
}
/* every plate is the same site at the same camera, so the cross-fade reads as
   one map changing its mind rather than two photographs swapping */
.lyr{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s var(--ease-out);
}
.lyr.is-on{opacity:1}
.lyr-cap{
  margin-top:13px;font-family:var(--font-mono);font-size:.71rem;
  letter-spacing:.01em;color:var(--text-muted);
}

.acc-item{border-top:1px solid var(--border)}
.acc-item:last-of-type{border-bottom:1px solid var(--border)}
.acc-head{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:19px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);color:inherit;text-align:left;
}
.acc-name{
  flex:1;font-size:1.1rem;font-weight:600;letter-spacing:-.018em;
  transition:color .15s ease-in-out;
}
.acc-head:hover .acc-name{color:var(--accent)}
.acc-item.is-open .acc-name{color:var(--accent)}
/* the uncertainty verb: measured, derived or modelled. Not decoration — it is
   the one thing a GIS-literate reader checks first. */
.acc-verb{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;
  color:var(--text-muted);
}
.acc-chev{
  width:16px;height:16px;flex:0 0 auto;
  stroke:var(--text-muted);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease-in-out;
}
.acc-item.is-open .acc-chev{transform:rotate(180deg)}

/* 0fr → 1fr animates to the row's natural height without measuring it in JS */
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease-out)}
.acc-item.is-open .acc-body{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}
.acc-inner > p{font-size:.94rem;color:var(--text-secondary);max-width:34em}
.acc-facts{list-style:none;margin:15px 0 24px;padding:0;display:grid;gap:7px}
.acc-facts li{position:relative;padding-left:23px;font-size:.85rem;color:var(--text-muted)}
.acc-facts li::before{
  content:"";position:absolute;left:1px;top:.5em;width:9px;height:5px;
  border-left:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);
  transform:rotate(-45deg);
}
.acc-more{margin-top:30px}

/* ==========================================================================
   7.6 DESIGN BAND — 7.4's grammar mirrored onto a light ground
   ========================================================================== */
.band-alt{
  position:relative;background:var(--bg-secondary);overflow:hidden;
  display:grid;grid-template-columns:1.04fr .96fr;align-items:center;
  gap:clamp(36px,4.5vw,80px);padding:clamp(84px,8vw,132px) 0;
}
/* Bleeds off the left edge, cropped by the viewport — same "bigger than the
   page" move as 7.4, handed to the other side. Kept shallower than 7.4's:
   the drawn lines start close to the site's western boundary, and a deep bleed
   takes the first swale with it. */
.alt-panel{margin-left:clamp(-90px,-5vw,-40px)}
.alt-panel img{
  width:100%;border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  border:1px solid var(--border);border-left:0;
  box-shadow:0 22px 64px rgba(26,26,26,.16);
}
.alt-copy{
  max-width:34em;
  padding-right:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
}
.alt-copy h2{
  font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.08;
  letter-spacing:-.03em;
}
.alt-copy > p{margin-top:20px;font-size:1rem;color:var(--text-secondary)}
.alt-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.alt-list li{position:relative;padding-left:23px;font-size:.92rem;color:var(--text-secondary)}
.alt-list li::before{
  content:"";position:absolute;left:1px;top:.62em;width:9px;height:5px;
  border-left:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);
  transform:rotate(-45deg);
}
/* The format list leads with the format, not the sentence — a reader scanning
   for "does it do DXF" should find DXF without reading a line of prose. */
.alt-formats li{padding-left:0;color:var(--text-secondary)}
.alt-formats li::before{display:none}
.alt-formats b{
  font-family:var(--font-mono);font-weight:500;font-size:.88em;
  color:var(--text-primary);
}

/* Points at the panel rather than reproducing it: a second, smaller copy of
   the same menu would be too small on the page to read, which would make the
   evidence weaker than the sentence claiming it. */
.alt-note{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border);
  font-size:.85rem;color:var(--text-muted);
}

.band-alt .band-ctas{margin-top:34px}

/* ==========================================================================
   7.7 HOW IT WORKS — affinity's sheet-counter discipline, unpinned
   ========================================================================== */
/* Last of the three sections that share this ground, so it carries the
   full gap down to the form rather than the small between-section one. */
.steps{background:var(--bg-primary);padding:52px 0 110px}
.step-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:38px}
.step{padding-top:24px;border-top:1px solid var(--border-hover)}
.step-n{
  display:block;margin-bottom:15px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);
}
.step h3{font-size:1.06rem;font-weight:600;letter-spacing:-.015em}
.step p{margin-top:10px;font-size:.93rem;color:var(--text-secondary)}

/* ==========================================================================
   7.8 FOUNDING COHORT — one card, plain type, no scarcity theatrics
   ========================================================================== */
.founding{background:var(--d-bg);color:var(--d-text);padding:114px 0}
.founding-card{
  max-width:760px;margin:0 auto;text-align:center;
  background:var(--d-bg-surface);border:1px solid var(--d-border);
  border-radius:var(--radius-lg);padding:clamp(42px,6vw,72px) clamp(26px,5vw,64px);
}
.founding-card h2{
  font-weight:800;font-size:clamp(1.8rem,3.2vw,2.5rem);
  letter-spacing:-.032em;line-height:1.1;text-wrap:balance;color:#fff;
}
.founding-lead{margin-top:14px;font-family:var(--font-mono);font-size:1.02rem;color:var(--d-accent)}
.founding-card > p:not(.founding-lead):not(.wait-msg){
  margin:20px auto 0;font-size:1rem;color:var(--d-text-secondary);max-width:33em;
}
.founding .band-ctas{margin-top:34px;justify-content:center}
/* the fixed nav would otherwise sit over the heading when #interest is jumped to */
#interest{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* The card is centred; the form inside it is not. Labelled fields need a
   common left edge to scan down, so the form gets its own measure and sits
   left-aligned within the centred card. */
.interest-form{max-width:520px;margin:32px auto 0;text-align:left}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin:0 0 14px}
.field label{
  display:block;margin-bottom:7px;font-size:.82rem;font-weight:500;
  color:var(--d-text-secondary);
}
.field .opt{font-weight:400;color:var(--d-text-muted)}
.field input,.field select{
  width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--d-text);
  padding:13px 15px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--d-border);
  transition:border-color .15s ease-in-out,background-color .15s ease-in-out;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--d-accent);background:rgba(255,255,255,.08);
}

/* dial code + number: one control in two boxes, the select only as wide as
   the longest "🇬🇧  +999" it has to hold */
.phone-row{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:8px}
/* The flag sits INSIDE the code box rather than beside it, so the two read as
   one control and the row still has only two boxes in it. */
.dial-box{position:relative}
.dial-flag{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:1.05rem;line-height:1;pointer-events:none;
}
.dial-box input{padding-left:38px}
/* A code that matches no country is not an error — plenty are unlisted — so it
   is muted rather than marked. */
.dial-box input[data-unknown]{color:var(--d-text-muted)}

/* country combobox */
.field-ac{position:relative}
.ac-list{
  position:absolute;z-index:30;top:100%;left:0;right:0;margin:5px 0 0;padding:4px;
  list-style:none;max-height:244px;overflow-y:auto;
  background:var(--d-bg);border:1px solid var(--d-border);
  border-radius:var(--radius-sm);box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.ac-option{
  padding:9px 11px;border-radius:4px;cursor:pointer;
  font-size:.94rem;color:var(--d-text-secondary);
}
/* keyboard and pointer share ONE highlight — two highlights on screen at once
   is the classic combobox bug, so hover writes the same index the arrows do */
.ac-option.is-on{background:rgba(122,165,181,.16);color:#fff}
/* The focused-and-invalid case needs saying out loud: `.field input:focus`
   scores higher than `.field [aria-invalid]`, and the first bad field IS
   focused on submit — so without this the one field the reader is looking at
   is the one that does not look wrong. */
.field [aria-invalid="true"],
.field input[aria-invalid="true"]:focus{border-color:#c96a5c;box-shadow:0 0 0 1px #c96a5c}
.field-err{margin:6px 0 0;font-size:.78rem;line-height:1.4;color:#e0917f}
/* Mandatory is marked, optional is not — the form is mostly required, so
   flagging the exceptions the other way round meant more marks, not fewer.
   The asterisk is aria-hidden: `required` already tells a screen reader. */
/* The honeypot. Off-screen rather than display:none — some bots skip fields
   they can tell are hidden, and this one is meant to be filled in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.req{color:var(--d-accent)}
.form-note{margin:2px 0 14px;font-size:.78rem;color:var(--d-text-muted)}
.founding-card strong{color:var(--d-text);font-weight:600}
.interest-form .cta{width:100%;margin-top:8px}
/* holds its line whether or not there is a message, so submitting does not
   jog the card upward */
/* Once the lead is in, the card stops asking and starts answering: the
   pitch, the form and the status line all go, and the confirmation is the
   only thing left on screen. */
.founding-card.is-done > h2,
.founding-card.is-done > p,
.founding-card.is-done > form{display:none}
.wait-done{outline:none}
.wait-done h3{
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;
  letter-spacing:-.024em;line-height:1.2;color:#fff;
}
.wait-done p{margin:14px 0 0;font-size:1rem;line-height:1.55;color:var(--d-text-secondary)}
.wait-done strong{font-weight:600;color:var(--d-text)}

.interest-msg{min-height:1.5em;margin:16px 0 0;font-size:.88rem;color:var(--d-text-muted)}
.interest-msg[data-state="ok"]{color:var(--d-accent)}
.interest-msg[data-state="err"]{color:#e0917f}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   7.9 CLOSING CTA — bookends the hero on the same terrain family
   ========================================================================== */
.close{
  position:relative;background:var(--d-bg);color:#fff;overflow:hidden;
  min-height:min(76vh,700px);display:flex;align-items:center;text-align:center;
}
/* The plate is a hillshade — light by nature. Darkened here rather than in the
   file so the same asset keeps serving the hero, where it is wanted bright. */
.close-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62;filter:brightness(.7) saturate(.9);
}
/* Held down only where the type sits. The hero opens on this same terrain
   family and the bookend only works if the contours are still legible here —
   scrimmed to black it reads as a dark box, not as the ground. */
.close::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(64% 56% at 50% 50%,
    rgba(18,22,26,.7) 0%,rgba(18,22,26,.42) 52%,rgba(18,22,26,.14) 80%,rgba(18,22,26,.26) 100%);
}
.close-inner{position:relative;z-index:2}
.close h2{
  font-weight:800;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.06;
  letter-spacing:-.035em;
  text-shadow:0 2px 8px rgba(12,16,19,.55),0 6px 40px rgba(12,16,19,.5);
}
.close p{
  margin-top:18px;font-size:1.04rem;color:rgba(255,255,255,.88);
  text-shadow:0 1px 4px rgba(12,16,19,.7);
}
.cta-light{
  margin-top:36px;background:#fff;color:var(--d-bg);
  box-shadow:0 6px 24px rgba(0,0,0,.34);
}
.cta-light:hover{background:#fff;color:#000;box-shadow:0 12px 32px rgba(0,0,0,.44)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  position:relative;overflow:hidden;
  background:var(--d-bg);color:var(--d-text-muted);
  padding:86px 0 30px;border-top:1px solid var(--d-border);
}
.foot .wrap{position:relative}
.foot-grid{
  position:relative;z-index:2;
  /* Two link columns now, not four — Product and Coverage existed only to
     route into the detail pages, which are unlinked for this draft. Not
     auto-fit: repeat(auto-fit, …) needs every other track definite, and a
     leading `1.7fr` is not, so the whole declaration is thrown away and the
     footer collapses to one column. */
  display:grid;grid-template-columns:1.7fr repeat(2,minmax(140px,1fr));gap:40px;
}
.foot-brand .nav-brand{color:var(--d-text)}
.foot-line{margin-top:18px;font-size:.88rem;max-width:19em;line-height:1.55}
.foot-col h4{
  font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-muted);
  margin-bottom:15px;
}
.foot-col a{display:block;padding:5px 0;font-size:.9rem;color:var(--d-text-secondary);transition:color .15s ease-in-out}
.foot-col a:hover{color:#fff}

/* the mark at poster scale — affinity's giant-wordmark move, our own mark.
   Absolute so it cannot push the bottom bar around. */
.foot-art{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:0;line-height:0}
.foot-art .brand-mark{width:min(560px,74vw);height:min(514px,68vw);color:var(--d-text);opacity:.045}

.foot-bar{
  position:relative;z-index:2;margin-top:186px;padding-top:22px;
  border-top:1px solid var(--d-border);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 30px;font-size:.78rem;
}
.foot-bar a{color:var(--d-text-muted);transition:color .15s ease-in-out}
.foot-bar a:hover{color:var(--d-text-secondary)}
/* With the middle note gone the credit is the last item, and it keeps the
   right edge the note used to hold. */
.foot-bar p:last-child{margin-left:auto;opacity:.72}

/* ==========================================================================
   scroll reveals
   ========================================================================== */
.reveal{opacity:0;transform:translateY(20px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1100px){
  .nav-links{display:none}
  .pillar-grid{grid-template-columns:1fr 1fr;gap:40px}
  .band{min-height:0;flex-direction:column;align-items:stretch}
  .band-grid{order:1}
  .band-copy{max-width:none;padding:80px 0 40px}
  .band-panel{
    order:2;position:relative;left:auto;right:calc(var(--pad) * -1);top:auto;bottom:auto;
    height:56vh;min-height:340px;margin:0 0 -40px var(--pad);
  }
  .band-panel img{object-position:left center}
  .chrome-panel{width:220px}

  /* one column: at this width the copy and a big picture cannot share a row */
  .io{grid-template-columns:1fr;gap:26px}
  .io-flip .io-copy{order:0}
  .io-flip .io-shots{order:0}
  .io-copy{max-width:none}
  /* the third card would sit alone on a two-up row — let it run full width
     with its panel cropped shallower instead of leaving a hole */
  .layers-grid{grid-template-columns:1fr;gap:38px}
  .layers-panel{position:static}
  .band-alt{grid-template-columns:1fr;gap:44px;padding:76px 0 84px}
  .alt-panel{margin-left:calc(var(--pad) * -1)}
  .alt-copy{max-width:none;padding:0 var(--pad)}
  .step-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-grid{grid-template-columns:repeat(4,1fr);gap:34px}
  .foot-brand{grid-column:1 / -1;margin-bottom:8px}
  .foot-art .brand-mark{width:min(400px,66vw);height:min(367px,60vw)}
  .foot-bar{margin-top:150px}
}
@media (max-width:720px){
  :root{--pad:20px}
  .pillar-grid{grid-template-columns:1fr;gap:36px}
  .hero-ctas,.band-ctas{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-ctas{align-items:stretch;gap:16px}
  .hero-copy h1{font-size:2.1rem}
  .nav-signin{display:none}
  .nav-inner{gap:12px}
  .cta-sm{padding:9px 14px;font-size:.82rem}
  .brand-word{width:92px;height:21px}
  /* A 1600px workspace screenshot is unreadable at 390px, so the phone gets
     the terrain read and stops there rather than a wall of illegible UI.
     Four plates now rather than three, so the pin is longer to match: at 220vh
     the last change landed a third of the way down and the rest of the hero
     held still on relief, which reads as a page that has stopped working. */
  .hero{height:260vh}
  .hero-app{display:none}
  .chrome-rail,.chrome-panel,.chrome-toolbar{display:none}

  .layers,.steps,.draw{padding:78px 0 84px}
  .section-lead{margin-bottom:40px;font-size:.98rem}
  /* the overlap costs more than it says at this size — inline it instead */
  .io-in{position:static;width:58%;margin:14px 0 0;display:block}
  .io-more{grid-template-columns:1fr}
  /* the switch stays — it is the one thing on this page you can operate — but
     at 390px the label and the pill need the room a smaller type size gives */
  .io-switch{top:9px;right:9px;padding:6px 8px 6px 11px;gap:8px;font-size:.72rem}
  .io-sw{width:32px;height:19px}
  .io-knob{width:13px;height:13px;top:3px}
  .io-sw[aria-checked="true"] .io-knob{transform:translateX(13px)}
  /* Square, not letterbox. One column gives each panel the full 350px of
     width, and 16:9 then cut the grade card off above its readouts — which
     are the only reason that card is on the page. */
  /* A 1600px workspace is a texture at 390px, not a screenshot. Same call the
     hero already makes, for the same reason — the three cards carry the
     section here, and this saves 200kB on the connection least able to spare
     it. */
  .step-grid{grid-template-columns:1fr;gap:30px}
  .founding{padding:76px 0}
  .founding-lead{font-size:.86rem}
  /* Two-up rows leave 141px a field at 390px, which is too narrow for a last
     name and far too narrow for the country list that hangs off one of them.
     `.field` already carries the vertical rhythm, so the gap goes to zero. */
  .field-row{grid-template-columns:1fr;gap:0}
  /* the centred card keeps its stacked buttons centred, not flush left */
  .founding .band-ctas{align-items:center;gap:18px}
  .close{min-height:0;padding:96px 0 104px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot{padding:64px 0 26px}
  .foot-art .brand-mark{width:min(300px,72vw);height:min(275px,66vw)}
  .foot-bar{margin-top:120px;gap:10px 0;flex-direction:column}
  .foot-bar p:last-child{margin-left:0}
}

/* ==========================================================================
   reduced motion — substitute a calm state, never a broken one
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero{height:100vh}
  .hero-stage{position:relative}
  .hero-copy,.hero-scene,.hero-layer,.readout{transition:none!important}
  .hero-hint{display:none}
  .reveal{opacity:1;transform:none;transition:none}
  .cta,.link-arrow span,.nav{transition:none}
  /* the accordion still opens and the panel still swaps — it just does both
     immediately. Substitute a calm state, never a broken one. */
  .lyr,.acc-body,.acc-chev,.acc-name,.foot-col a{transition:none}
}

/* ==========================================================================
   SECONDARY PAGES — /platform /layers /coverage /about /sources /404 + legal
   Generated by scripts/build_pages.py. Everything below is additive: the
   homepage's blocks (.io, .steps, .band, .cta, .foot) are reused as they are,
   and these are the four new ones the other pages needed.
   ========================================================================== */

/* ---------- image placeholders ----------
   Every picture on these pages is a labelled box until the layout is approved.
   The label names the file it stands in for, so the boxes double as the shot
   list — and a page that still has boxes on it cannot be mistaken for done. */
.ph{
  /* No position here. `.ph` is appended after `.io-in`, and a `relative`
     would beat that rule's `absolute` — the overlapped panel then leaves the
     corner and stacks under the picture, doubling the row's height. */
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:6px;text-align:center;padding:16px;
  aspect-ratio:var(--ar,16/10);
  /* NOT width:100%. `.ph` is appended after `.io-in`, so an explicit width here
     wins the cascade and the small overlapped panel on an io row stretches to
     the full column — then aspect-ratio makes it 700px tall. A div fills its
     container on its own; the places that need a width set one themselves. */
  border:1px dashed var(--border-hover);border-radius:var(--radius);
  background-color:var(--bg-secondary);
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(0,0,0,.035) 9px 10px);
  color:var(--text-muted);
}
.ph-dark{
  border-color:var(--d-border);background-color:var(--d-bg-surface);
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px);
  color:var(--d-text-muted);
}
.ph-file{font-family:var(--font-mono);font-size:.76rem;color:var(--accent)}
.ph-dark .ph-file{color:var(--d-accent)}
.ph-note{font-size:.8rem;line-height:1.45;max-width:34ch}

/* ---------- word hero — the quiet opener every page below the homepage uses */
.wordhero{
  padding:calc(var(--nav-h) + 76px) 0 64px;
  background:var(--bg-primary);border-bottom:1px solid var(--border);
}
.wh-kicker{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px;
}
.wordhero h1{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:16em;
}
.wh-lead{margin-top:20px;max-width:52em;font-size:1.05rem;color:var(--text-secondary)}
.wordhero .cta{margin-top:30px}

/* ---------- /platform: the plain band, the chip grid, the FAQ ---------- */
/* The wide workspace shot. Deliberately NOT the homepage's `.band`: that one
   is a dark stage with a gradient scrim and a 100vh floor, and this is just a
   picture across the page. */
.platband{padding:clamp(46px,6vw,80px) 0;background:var(--bg-secondary)}
.platband .ph{max-width:var(--wrap);margin:0 auto;width:calc(100% - var(--pad) * 2)}

.chipsec{background:var(--bg-primary);padding:52px 0 76px}
.chip-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;
}
.chip-grid li{
  padding:13px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-surface);font-size:.92rem;font-weight:500;
}

.faqsec{background:var(--bg-secondary);padding:104px 0 110px}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,72px)}
.faq-head .section-h{text-align:left;margin-bottom:14px}
.faq-head p{font-size:.95rem;color:var(--text-secondary)}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--border)}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-weight:500;font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease-out);
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 0 22px}
.faq-a p{max-width:58em;color:var(--text-secondary);font-size:.97rem}

/* ---------- /layers: the reference row ----------
   Ten identical rows on one ground, deliberately. A reference page that varies
   is a reference page that is hiding something. */
.reflist{background:var(--bg-primary);padding:80px 0 96px}
.refrow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(24px,3.5vw,52px);align-items:center;
  padding:clamp(28px,3.5vw,44px) 0;border-bottom:1px solid var(--border);
}
.refrow:first-child{padding-top:0}
.refrow:last-child{border-bottom:0}
.ref-copy h3{
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
/* The honesty word, and the only chip on the site — it marks a real
   distinction (measured / derived / modelled), not a decorative state.
   Named `ref-verb`, not `verb`: the hero's `<span class="verb">design</span>`
   got here first, and a bare `.verb` turns that word into a pill. */
.ref-verb{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;font-weight:400;cursor:help;
}
.ref-verb-measured{background:rgba(74,124,93,.13);color:#3d6b4d}
.ref-verb-derived{background:var(--accent-dim);color:var(--accent-hover)}
.ref-verb-modelled{background:rgba(168,106,18,.13);color:#8a5810}
.ref-shows{margin-top:12px;color:var(--text-secondary)}
.ref-reads{margin-top:12px;font-size:.93rem;color:var(--text-muted)}
.ref-reads b{
  display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);font-weight:400;margin-bottom:3px;
}

.provenance{background:var(--bg-secondary);padding:88px 0 96px}
.provenance h2{font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.02em}
.provenance p{margin-top:16px;max-width:60em;color:var(--text-secondary)}

/* ---------- the disqualifier — the most persuasive block on the site ------- */
.disq{background:var(--d-bg);color:var(--d-text);padding:96px 0 104px}
.disq h2{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;
  letter-spacing:-.025em;max-width:18em;
}
.disq ul{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:20px;max-width:64em}
.disq li{
  padding-left:22px;position:relative;color:var(--d-text-secondary);font-size:1rem;line-height:1.6;
}
.disq li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:1.5px;background:var(--d-accent);
}
.disq b{color:var(--d-text);font-weight:600}

/* ---------- /coverage + /sources: the map and the tables ---------- */
.covermap{background:var(--bg-secondary);padding:72px 0 80px}
.cover-note{margin-top:20px;max-width:60em;font-size:.93rem;color:var(--text-muted)}
.srcsec{background:var(--bg-primary);padding:88px 0 96px}
.srcsec .section-h{text-align:left;margin-bottom:26px}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface)}
.srctable{border-collapse:collapse;width:100%;min-width:660px;font-size:.93rem}
.srctable-wide{min-width:860px}
.srctable th,.srctable td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top}
.srctable thead th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);font-weight:400;background:var(--bg-secondary);white-space:nowrap;
}
.srctable tbody tr:last-child td,.srctable tbody tr:last-child th{border-bottom:0}
.srctable tbody th{font-weight:600;white-space:nowrap}
.src-product{display:block;font-size:.85rem;color:var(--text-muted);margin-top:2px}
.src-attr{color:var(--text-secondary);font-size:.86rem;line-height:1.5;max-width:38em}
.srctable .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.byo{background:var(--bg-secondary);padding:88px 0 96px}
.byo h2{font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.02em}
.byo p{margin-top:16px;max-width:58em;color:var(--text-secondary)}

/* ---------- /about: a poster, not a page ---------- */
.stanza{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background:var(--d-bg);color:var(--d-text);overflow:hidden;
}
.stanza-bg{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border:0;border-radius:0;opacity:.42;
}
.stanza-inner{position:relative;padding:calc(var(--nav-h) + 80px) 0 90px}
.stanza-inner p{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.4rem,3.1vw,2.3rem);line-height:1.28;max-width:20em;
  margin-bottom:1.1em;
}
.stanza-close{color:var(--d-accent)}
.aboutwho{background:var(--bg-primary);padding:96px 0 104px}
.aboutwho h2{font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.02em}
.aboutwho p{margin-top:16px;max-width:56em;color:var(--text-secondary)}

/* ---------- prose pages + 404 ---------- */
.prose{background:var(--bg-primary);padding:80px 0 96px}
.prose h2{
  font-family:var(--font-display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
  margin-top:44px;
}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:15px;max-width:60em;color:var(--text-secondary)}
.prose b{color:var(--text-primary);font-weight:600}
.stub{
  margin-top:26px;padding:14px 18px;border-radius:var(--radius-sm);
  background:rgba(168,106,18,.09);color:#8a5810;font-size:.9rem;
}
.nf{background:var(--bg-primary);padding:calc(var(--nav-h) + 140px) 0 160px}
.nf h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(2rem,4.4vw,3rem)}
.nf p{margin-top:18px;max-width:44em;color:var(--text-secondary)}

@media (max-width:980px){
  .faq-wrap{grid-template-columns:1fr;gap:30px}
  .refrow{grid-template-columns:1fr;gap:20px}
  .chipsec,.faqsec,.reflist,.provenance,.srcsec,.byo,.aboutwho,.disq{padding:72px 0 78px}
}
@media (max-width:720px){
  .wordhero{padding:calc(var(--nav-h) + 52px) 0 46px}
  .stanza{min-height:0}
  .stanza-inner{padding:calc(var(--nav-h) + 56px) 0 66px}
  .chip-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
}