/* ══════════════════════════════════════════════════════════════════════════
   StateProof — Home
   Scoped to body.sp-home so nothing here can reach the pages that share
   shell.css. Racing Green surfaces, product-semantic status colours,
   iridescent environmental light, cream lower sections.
   ══════════════════════════════════════════════════════════════════════════ */

body.sp-home{
  background-color:#0e1a2b;
  /* ⚡ SCROLL COST — the wash is NOT a background-image on this element.
     It used to be, with background-attachment:fixed. A fixed-attachment
     background is anchored to the VIEWPORT rather than the document, so the
     browser cannot simply translate a cached layer as you scroll — it has to
     repaint both full-viewport radial gradients on every single frame. That is
     the heavy/janky scrolling. The wash now lives on body::before below, which
     is position:fixed — viewport-anchored in exactly the same way, pixel for
     pixel, but on its own compositor layer that is rasterised once.
     §3.2 still holds (inset:0 runs the wash from y=0, so the header strip is
     never a flat raw rectangle) and §3.3 still holds — do NOT add a
     `background:` shorthand here or below, it would reset the image. */

  /* ── surfaces: deep water ───────────────────────────────────────────── */
  --s-abyss:#0e1a2b; --s-navy:#122137; --s-navy2:#1a2d4a;
  --amb1:#122b51; --amb2:#1d3c6b33; --amb3:#0c1e3a33;

  /* ── cream lower sections ───────────────────────────────────────────── */
  --s-cream:#f1f0ed; --s-cream2:#e6e5e2; --cream-line:#ccd0d6;
  --hink:#0b131f; --hink2:#2e394a; --hmuted:#5f6a7a;

  /* ── ink on dark ────────────────────────────────────────────────────── */
  --on-dark:#f4f3f0; --on-dark2:#a9b5c6; --on-dark3:#6b798d;

  /* ── brass accent ───────────────────────────────────────────────────── */
  --brass:#c9a961; --brass-lo:#856813; --brass-hi:#e6cd8b;

  /* Status colours are the product's own (shell.css) — inherited, never
     redeclared here, so the map, legends and pills cannot drift.
     --live is the one deliberate exception: deeper teal for the dark surface. */
  --live:#1d8a66;

  /* ── motion ─────────────────────────────────────────────────────────── */
  --e:cubic-bezier(.22,1,.36,1); --t-fast:160ms; --t-mid:280ms; --t-slow:520ms;

  /* Fluid on wide monitors. It was a hard 1400px, so on a ~2000px display the
     whole page sat in a 1400px column with ~300px of dead margin each side and
     read as shrunken, while the Workspace (full-width body) did not. The lower
     bound keeps every layout at or below 1400px byte-identical to what was
     verified; only genuinely wide screens grow. index.html .topbar carries the
     SAME value so the DESIGN_SYSTEM §4 header row still matches on all four pages. */
  --w-max:clamp(1400px, 92vw, 1840px);
  /* NOTE: no `background:` shorthand here — it would reset background-color and
     re-introduce the flat slab. The wash itself lives on ::before. */
  color:var(--on-dark);
}

/* The ambient wash. position:fixed reproduces background-attachment:fixed
   exactly — anchored to the viewport, running from y=0 — but as its own layer,
   so scrolling translates it instead of repainting it. z-index:-1 keeps it
   behind all page content and above body's background-color. */
body.sp-home::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1100px 620px at 66% -6%,#122b5166 0%,transparent 62%),
    radial-gradient(820px 480px at 8% -4%,#1d3c6b2e 0%,transparent 60%);
  background-repeat:no-repeat}

body.sp-home a{text-decoration:none;color:inherit}

/* ── scroll reveal ─────────────────────────────────────────────────────── */
.sp-home .rv{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e)}
.sp-home .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sp-home .rv{opacity:1;transform:none;transition:none}
  .sp-home *{animation:none!important}
}

/* ══ HEADER ═══════════════════════════════════════════════════════════════ */
.sp-home .hdr{position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;transition:background var(--t-mid) var(--e),border-color var(--t-mid) var(--e)}
.sp-home .hdr.stuck{background:#0e1a2bf2;border-bottom-color:#c9a96124}
.sp-home .hdr-in{max-width:var(--w-max);margin:0 auto;padding:0 48px;height:70px;
  display:flex;align-items:center;gap:56px}
.sp-home .brand{display:flex;align-items:center;gap:11px;color:var(--on-dark);
  font-weight:640;font-size:17px;letter-spacing:-.3px}
.sp-home .brand .mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brass),var(--brass-lo));color:#1a1408;
  font-size:11px;font-weight:750;box-shadow:inset 0 1px 0 #ffffff5c,0 3px 12px #c9a96140}
/* §3.4 shell.css bleed — shell.css:35 is `.nav{gap:2px;margin-left:8px}`. The
   gap was redeclared here but margin-left was NOT, so Home's nav sat 8px right
   of Directory's and State's (both of which do write margin-left:0). Measured:
   Home nav x=551.1 vs 543.1 everywhere else. */
.sp-home .nav{display:flex;gap:4px;margin-left:0}
.sp-home .nav a{padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:500;
  color:var(--on-dark2);transition:color var(--t-fast) var(--e),background var(--t-fast) var(--e)}
.sp-home .nav a:hover{color:var(--on-dark);background:#c9a9611f}
.sp-home .nav a.on{color:#fff;background:#c9a9612b}
.sp-home .hdr-r{margin-left:auto}
.sp-home .cov-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--on-dark2);background:#c9a96117;border:1px solid #c9a9612b;
  padding:7px 14px;border-radius:999px}
.sp-home .cov-pill i{width:7px;height:7px;border-radius:50%;background:var(--live);
  animation:sp-beat 2.6s ease-in-out infinite}
@keyframes sp-beat{0%,100%{box-shadow:0 0 0 0 #1d8a6666}50%{box-shadow:0 0 0 5px #1d8a6600}}
/* Was #060e1a — darker than the page behind it, so it read as a black block
   sitting on top of the hero rather than part of the surface. Transparent keeps
   the disclosure legible without cutting a hard band across the page.
   Mirrored in the Workspace's own .gov-note so both headers match. */
.sp-home .gov-note{background:transparent;color:var(--on-dark3);font-size:11.5px;
  text-align:center;padding:7px 24px;border-bottom:1px solid #c9a96117}
.sp-home .gov-note b{color:var(--on-dark2);font-weight:600}

/* ══ HERO — copy left, map right. They never overlap. ═════════════════════ */
.sp-home .band{position:relative;background:transparent;overflow:hidden;
  padding:64px 0 84px}
.sp-home .band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1000px 680px at 66% 44%,var(--amb1) 0%,transparent 66%),
  radial-gradient(760px 460px at 10% 8%,var(--amb2) 0%,transparent 64%),
  radial-gradient(620px 520px at 88% 84%,var(--amb3) 0%,transparent 62%)}
/* film grain — texture, not glass */
.sp-home .band::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>")}

/* iridescent environmental light — lower-left, gone before the map */
.sp-home .irid{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 14%,transparent 38%);
  mask-image:linear-gradient(90deg,#000 0%,#000 14%,transparent 38%)}
.sp-home .irid i{position:absolute;border-radius:50%;mix-blend-mode:screen;display:block}
.sp-home .irid .i1{width:46%;height:26%;left:-15%;top:63%;transform:rotate(-11deg);
  filter:blur(74px);opacity:.5;
  background:linear-gradient(94deg,#1a3cff 0%,#0066ff 16%,#5f9fff 30%,#f9f4ea 44%,#e8c98a 64%,#a87c33 78%,transparent 94%)}
.sp-home .irid .i2{width:32%;height:11%;left:-10%;top:67%;transform:rotate(-11deg);
  filter:blur(28px);opacity:.46;
  background:linear-gradient(94deg,#3e8bff 4%,#a8cbff 24%,#ffffff 44%,#f0d9a8 66%,transparent 92%)}
.sp-home .irid .i3{width:19%;height:2%;left:-6%;top:69.6%;transform:rotate(-11deg);
  filter:blur(7px);opacity:.62;
  background:linear-gradient(90deg,#f6efdf 6%,#fff 36%,#f5e2b8 64%,transparent 93%)}

.sp-home .band-in{position:relative;z-index:4;max-width:var(--w-max);margin:0 auto;
  padding:0 48px;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:56px;align-items:center}
.sp-home .band-copy{position:relative;max-width:600px}
/* Legibility scrim behind the headline. This used to be a 72%-opaque PURE BLACK
   radial (#000000b8) that faded out at 80% — invisible against the old near-black
   surface, but once the surface was lifted it read as a hard-edged black slab
   sitting behind the copy. It is now the surface colour rather than black, much
   weaker, and fades the whole way out, so it darkens without ever becoming a
   shape you can see the edge of. */
.sp-home .band-copy::before{content:"";position:absolute;inset:-26% -30% -26% -46%;z-index:-1;
  background:radial-gradient(58% 54% at 36% 50%,#071120cc 0%,#0711208c 38%,#07112040 62%,transparent 100%)}
.sp-home .eyebrow-l{display:inline-flex;align-items:center;gap:8px;font-size:11px;
  font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-hi);
  margin-bottom:22px}
.sp-home .eyebrow-l::before{content:"";width:28px;height:1px;background:var(--brass-hi);opacity:.6}
.sp-home .eyebrow-l .dot{display:none}
.sp-home .band-copy h1{font-size:clamp(32px,3.9vw,56px);line-height:1.02;letter-spacing:-1.8px;
  font-weight:680;color:var(--on-dark);margin:0 0 22px}
.sp-home .band-copy h1 .ac{display:block;
  background:linear-gradient(100deg,#f0dda6,#c9a961 68%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sp-home .band-copy p{color:var(--on-dark2);font-size:16px;max-width:46ch;margin:0 0 28px;line-height:1.65}

/* ── search ───────────────────────────────────────────────────────────── */
.sp-home .qbox{max-width:600px}
.sp-home .qmode{display:inline-flex;gap:3px;background:#c9a96117;border:1px solid #c9a9612b;
  border-radius:999px;padding:4px;margin-bottom:16px}
.sp-home .qmode button{border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--on-dark2);padding:7px 18px;border-radius:999px;
  transition:color var(--t-fast) var(--e),background var(--t-fast) var(--e)}
.sp-home .qmode button.on{color:#1a1408;
  background:var(--brass);
  box-shadow:0 2px 10px #c9a96147}
.sp-home .qrow{display:flex;gap:0;background:#0d192bd9;border:1px solid #c9a96140;
  border-radius:999px;padding:5px;align-items:center;
  transition:border-color var(--t-fast) var(--e),box-shadow var(--t-fast) var(--e)}
.sp-home .qrow:focus-within{border-color:var(--brass);box-shadow:0 0 0 4px #c9a96129}
.sp-home .qf-f{display:flex;flex-direction:column;min-width:0;flex:1}
.sp-home .qf-f label{display:none}
.sp-home .qrow input{width:100%;background:none;border:0;outline:0;color:var(--on-dark);
  font-size:14.5px;font-family:inherit;padding:9px 18px}
.sp-home .qrow input::placeholder{color:var(--on-dark3)}
.sp-home .qf-s{flex:0 0 auto;max-width:190px}
.sp-home .qrow select{background:#c9a9611a;border:0;color:var(--on-dark2);font-family:inherit;
  font-size:13px;border-radius:999px;padding:9px 12px;outline:0;cursor:pointer;max-width:180px}
.sp-home .qrow select option{background:#0d192b;color:var(--on-dark)}
.sp-home .qgo{border:0;cursor:pointer;font-family:inherit;font-weight:640;font-size:13.5px;
  padding:11px 24px;border-radius:999px;color:#1a1408;display:inline-flex;align-items:center;gap:7px;
  background:var(--brass);
  box-shadow:0 3px 14px #c9a96154,inset 0 1px 0 #ffffff59;
  transition:transform var(--t-fast) var(--e),box-shadow var(--t-fast) var(--e),filter var(--t-fast) var(--e)}
.sp-home .qgo:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 6px 20px #c9a9616b}
.sp-home .qgo:active{transform:scale(.985)}
.sp-home .qgo:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.sp-home .qnote{color:var(--on-dark3);font-size:12.5px;margin:14px 0 0;max-width:52ch;line-height:1.6}

/* ── map column ───────────────────────────────────────────────────────── */
.sp-home .mapwrap{position:relative;width:112%;margin-right:-12%;
  filter:drop-shadow(0 40px 90px #00000073)}
/* height is set by the host script to the frame's own content height —
   this is only the pre-load fallback */
/* ⛔ WHITE FLASH ON LOAD — the frame starts at src="about:blank", and about:blank
   is an OPAQUE WHITE document. Its canvas paints over whatever is behind the
   iframe, so `background:transparent` here cannot help and neither can a dark
   colour on .mapwrap: the white is INSIDE the frame, not behind it. The frame is
   therefore hidden until it has actually loaded map.html (whose document IS
   transparent), then faded in. JS adds .ready on the frame's load event, with a
   timeout fallback so a frame that never fires load can never stay invisible.
   ⛔ Do NOT "fix" this with color-scheme — that paints the canvas opaque white
   permanently (see the note in dir.css). */
.sp-home .mapwrap{background-color:#0e1a2b;border-radius:14px}
.sp-home .mapwrap iframe{width:100%;height:600px;border:0;display:block;
  background:transparent;color-scheme:normal;overflow:hidden;
  opacity:0;transition:opacity .25s var(--e)}
.sp-home .mapwrap iframe.ready{opacity:1}

/* ══ EDITORIAL BAND — narrow text, big type, breaks the rhythm ═══════════ */
.sp-home .say{background:#0a1220;padding:96px 48px;border-top:1px solid #c9a9611a}
/* editorial copy and the two legends share one surface: a 12-column
   container, so the copy sits 5/7 and the legends run full width under it */
.sp-home .say-in{max-width:var(--w-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(12,1fr);gap:96px 72px;align-items:start}
.sp-home .say-in>h2{grid-column:span 5}
.sp-home .say-in>div:not(.stage-hd):not(.stage-grid){grid-column:span 7}
.sp-home .say-in>.stage-hd,.sp-home .say-in>.stage-grid{grid-column:1 / -1}
/* the editorial closes the block — keep it clear of the legend panel */
.sp-home .say-in>h2,
.sp-home .say-in>div:not(.stage-hd):not(.stage-grid){margin-top:88px}
.sp-home .say h2{font-size:clamp(26px,3vw,42px);line-height:1.1;letter-spacing:-1.5px;
  font-weight:660;color:var(--on-dark);margin:0}
.sp-home .say h2 span{color:var(--on-dark3)}
.sp-home .say p{color:var(--on-dark2);font-size:15.5px;line-height:1.75;margin:0;max-width:54ch}
.sp-home .stat{display:flex;gap:56px;margin-top:40px;padding-top:28px;
  border-top:1px solid #c9a96124;flex-wrap:wrap}
.sp-home .stat div b{display:block;font-size:38px;font-weight:680;letter-spacing:-1.5px;
  color:var(--on-dark);font-family:ui-monospace,"SF Mono",monospace}
.sp-home .stat div span{font-size:12.5px;color:var(--on-dark3)}

/* ══ FOOTER ══════════════════════════════════════════════════════════════ */
.sp-home .ft{background:#080f1b;border-top:1px solid #c9a9611f;padding:64px 48px 0}
.sp-home .ft-in{max-width:var(--w-max);margin:0 auto;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:44px;
  border-bottom:1px solid #c9a96124}
.sp-home .ft h5{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--on-dark3);margin:0 0 16px;font-weight:640}
.sp-home .ft a{display:block;font-size:13.5px;padding:5px 0;color:var(--on-dark2);
  transition:color var(--t-fast) var(--e)}
.sp-home .ft a:hover{color:var(--on-dark)}
.sp-home .ft .brand{display:inline-flex;margin-bottom:14px}
.sp-home .ft .blurb{font-size:13px;line-height:1.7;color:var(--on-dark3);max-width:40ch;margin:0}

/* ══ LEGENDS — inside the editorial band, same surface ══════════════════ */
/* legends run first in this block now, editorial closes it */
.sp-home .stage-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding:0 0 28px;flex-wrap:wrap}
.sp-home .stage-hd .eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--brass-hi);margin-bottom:10px}
.sp-home .stage-hd h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-1.1px;font-weight:660;
  margin:0;color:var(--on-dark);max-width:22ch;line-height:1.12}
.sp-home .mapmode{display:inline-flex;gap:3px;background:#c9a96117;border:1px solid #c9a9612b;
  border-radius:999px;padding:4px}
.sp-home .mapmode button{border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--on-dark2);padding:7px 20px;border-radius:999px;
  transition:color var(--t-fast) var(--e),background var(--t-fast) var(--e)}
.sp-home .mapmode button.on{color:#1a1408;
  background:var(--brass)}

.sp-home .stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid #c9a96124;border-left:1px solid #c9a96124}
.sp-home .rail{padding:32px;border-right:1px solid #c9a96124;border-bottom:1px solid #c9a96124;
  transition:opacity var(--t-mid) var(--e),background var(--t-mid) var(--e)}
.sp-home .rail.dim{opacity:.42}
.sp-home .rail.on{background:#c9a96110}
.sp-home .rail h3{display:flex;align-items:center;gap:10px;margin:0 0 20px;
  font-size:14px;font-weight:640;color:var(--on-dark);letter-spacing:-.2px}
.sp-home .rail .rk{font-size:10px;font-weight:750;letter-spacing:.9px;padding:4px 9px;
  border-radius:5px;background:#c9a96124;color:var(--brass-hi)}
.sp-home .rail .lg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sp-home .rail .lg li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  padding:11px 10px;border-radius:8px;transition:background var(--t-fast) var(--e)}
.sp-home .rail .lg li:hover{background:#c9a96114}
.sp-home .rail .lg i.sw{width:12px;height:12px;border-radius:4px;margin-top:3px;
  box-shadow:inset 0 0 0 1px #c9a96140}
.sp-home .rail .lg i.sw.live{background:var(--live)}
.sp-home .rail .lg i.sw.public{background:var(--public)}
.sp-home .rail .lg i.sw.acct{background:var(--acct)}
.sp-home .rail .lg i.sw.paid{background:var(--paid)}
.sp-home .rail .lg i.sw.off{background:#3d4858}
.sp-home .rail .lg b{font-size:13px;font-weight:600;color:var(--on-dark)}
.sp-home .rail .lg span{grid-column:2;font-size:12.5px;color:var(--on-dark3);line-height:1.5}
.sp-home .rail-n{margin:20px 0 0;padding-top:16px;border-top:1px solid #c9a96124;
  font-size:12px;color:var(--on-dark3);line-height:1.6}

/* ══ TOOLS — cream paper, one connected surface, no floating cards ═══════ */
.sp-home .tools{background:var(--s-cream);border-top:1px solid var(--cream-line);color:var(--hink)}
.sp-home .tools-in{max-width:var(--w-max);margin:0 auto;padding:0 48px}
.sp-home .tools h3{font-size:clamp(26px,3vw,40px);letter-spacing:-1.5px;font-weight:660;
  line-height:1.08;max-width:16ch;color:var(--hink);margin:0;padding:80px 0 44px}
.sp-home .tgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;
  border-top:1px solid var(--cream-line);border-left:1px solid var(--cream-line)}
.sp-home .tool{display:block;padding:44px 32px;position:relative;overflow:hidden;
  border-right:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line);
  color:var(--hink);transition:background var(--t-mid) var(--e)}
.sp-home .tool::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--brass),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t-mid) var(--e)}
.sp-home .tool:hover{background:var(--s-cream2)}
.sp-home .tool:hover::after{transform:scaleY(1)}
.sp-home .t1{grid-column:span 7;min-height:280px}
.sp-home .t2{grid-column:span 5;min-height:280px}
.sp-home .t3{grid-column:span 5}
.sp-home .t4{grid-column:span 7}
.sp-home .tool .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:22px;background:#ffffffcc;border:1px solid var(--cream-line);color:var(--brass-lo);
  transition:transform var(--t-fast) var(--e)}
.sp-home .tool:hover .ic{transform:translateY(-3px)}
.sp-home .tool h4{margin:0 0 10px;font-size:21px;font-weight:640;letter-spacing:-.6px}
.sp-home .tool p{margin:0;font-size:14px;line-height:1.65;color:var(--hmuted);max-width:40ch}
.sp-home .tool .go{margin-top:22px;font-size:13px;font-weight:620;display:flex;
  align-items:center;gap:7px;color:var(--brass-lo)}
.sp-home .tool .go svg{transition:transform var(--t-fast) var(--e)}
.sp-home .tool:hover .go svg{transform:translateX(4px)}
.sp-home .tool .art{position:absolute;right:-40px;bottom:-40px;opacity:.07;
  pointer-events:none;color:var(--hink)}

/* ══ WIDGETS — cream paper, one connected surface, hairline dividers ═════ */
.sp-home .widgets{background:var(--s-cream);border-top:1px solid var(--cream-line);
  color:var(--hink)}
.sp-home .widgets-in{max-width:var(--w-max);margin:0 auto;padding:0 48px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-left:1px solid var(--cream-line)}
.sp-home .wd{padding:44px 32px;border-right:1px solid var(--cream-line);
  position:relative;transition:background var(--t-mid) var(--e)}
.sp-home .wd::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--brass),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t-mid) var(--e)}
.sp-home .wd:hover{background:var(--s-cream2)}
.sp-home .wd:hover::after{transform:scaleY(1)}
.sp-home .wd header{margin-bottom:22px}
.sp-home .wd .eyebrow{display:block;font-size:10.5px;font-weight:640;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--hmuted);margin-bottom:8px}
.sp-home .wd h4{margin:0;font-size:20px;font-weight:650;letter-spacing:-.6px;color:var(--hink)}

.sp-home .jinput{width:100%;padding:11px 14px;border:1px solid var(--cream-line);
  border-radius:9px;font-family:inherit;font-size:13.5px;outline:0;background:#fff;color:var(--hink);
  transition:border-color var(--t-fast) var(--e),box-shadow var(--t-fast) var(--e)}
.sp-home .jinput:focus{border-color:var(--brass-lo);box-shadow:0 0 0 3px #c9a96129}
.sp-home .jlist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.sp-home .jlist li a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;
  transition:background var(--t-fast) var(--e)}
.sp-home .jlist li a:hover{background:#fff}
.sp-home .jab{font-family:ui-monospace,"SF Mono",monospace;font-size:11.5px;font-weight:700;
  color:var(--hink);background:var(--s-cream2);padding:3px 7px;border-radius:5px;flex:none}
.sp-home .jn{font-size:13px;color:var(--hink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-home .am{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:10.5px;font-weight:650;padding:3px 9px;border-radius:999px}
.sp-home .am i{width:6px;height:6px;border-radius:50%;background:currentColor}
.sp-home .am.live{background:var(--live-bg);color:var(--live-ink)}
.sp-home .am.public{background:var(--public-bg);color:var(--public-ink)}
.sp-home .am.off{background:#eae9e8;color:#5f6a7a}
.sp-home .jempty{font-size:12.5px;color:var(--hmuted);padding:9px 10px}

.sp-home .fgrp{margin-bottom:18px}
.sp-home .fgrp .fh{display:block;font-size:10.5px;font-weight:650;letter-spacing:1px;
  text-transform:uppercase;color:var(--hmuted);margin-bottom:9px}
.sp-home .chips{display:flex;flex-wrap:wrap;gap:6px}
.sp-home .chips span{font-size:12px;padding:5px 10px;border-radius:7px;
  background:#fff;border:1px solid var(--cream-line);color:var(--hink2)}
.sp-home .chips span.hl{background:var(--live-bg);border-color:transparent;color:var(--live-ink);font-weight:620}

.sp-home .steps{display:flex;flex-direction:column;gap:2px}
.sp-home .stp{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:9px;
  transition:background var(--t-fast) var(--e)}
.sp-home .stp:hover{background:#fff}
.sp-home .stp .sn{font-family:ui-monospace,"SF Mono",monospace;font-size:11px;font-weight:700;
  color:var(--brass-lo);background:var(--s-cream2);width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;flex:none}
.sp-home .stp b{display:block;font-size:13.5px;font-weight:620;color:var(--hink)}
.sp-home .stp em{display:block;font-style:normal;font-size:12px;color:var(--hmuted);margin-top:2px}
.sp-home .stp .sa{margin-left:auto;color:var(--brass-lo);font-size:15px;
  transition:transform var(--t-fast) var(--e)}
.sp-home .stp:hover .sa{transform:translateX(3px)}

/* ══ FOOT ════════════════════════════════════════════════════════════════ */
.sp-home .foot{max-width:var(--w-max);margin:0 auto;color:var(--on-dark3);font-size:12px;
  line-height:1.8;padding:24px 0 48px}
.sp-home .foot b{color:var(--on-dark2);font-weight:620}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .sp-home .band-in{grid-template-columns:1fr;gap:40px}
  .sp-home .band-copy{max-width:none}
  .sp-home .band-copy::before{display:none}
  .sp-home .mapwrap{width:100%;margin-right:0}
  .sp-home .mapwrap iframe{height:min(58vh,460px)}
  .sp-home .widgets-in{grid-template-columns:1fr}
  .sp-home .wd{border-right:0;border-bottom:1px solid var(--cream-line)}
  .sp-home .hdr-in{gap:24px;padding:0 24px}
  .sp-home .say-in{gap:0 32px}
  .sp-home .say-in>h2,.sp-home .say-in>div:not(.stage-hd):not(.stage-grid){grid-column:1 / -1}
  .sp-home .say-in>h2{margin-bottom:28px}
  .sp-home .ft-in{grid-template-columns:1fr 1fr;gap:32px}
  .sp-home .tgrid>*{grid-column:span 12}
  .sp-home .t1,.sp-home .t2{min-height:0}
}
@media (max-width:820px){
  .sp-home .stage-grid{grid-template-columns:1fr}
  .sp-home .rail.dim{opacity:1}
  .sp-home .hdr-in{height:auto;padding:12px 20px;flex-wrap:wrap;gap:12px}
  .sp-home .nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sp-home .nav a{white-space:nowrap;padding:7px 13px;font-size:13px}
  .sp-home .hdr-r{margin-left:auto}
  .sp-home .cov-pill{font-size:11.5px;padding:6px 11px}
  .sp-home .band{padding:36px 0 56px}
  .sp-home .band-in{padding:0 20px}
  .sp-home .band-copy h1{letter-spacing:-1.6px}
  .sp-home .qrow{flex-wrap:wrap;border-radius:18px;gap:6px}
  .sp-home .qf-f{flex:1 1 100%}
  .sp-home .qf-s{max-width:none;flex:1 1 100%}
  .sp-home .qrow select{width:100%;max-width:none}
  .sp-home .qgo{flex:1 1 100%;justify-content:center}
  .sp-home .stage-in,.sp-home .widgets-in{padding-left:20px;padding-right:20px}
  .sp-home .rail{padding:24px 20px}
  .sp-home .wd{padding:32px 20px}
  .sp-home .tools-in{padding-left:20px;padding-right:20px}
  .sp-home .tools h3{padding:48px 0 28px}
  .sp-home .tool{padding:32px 20px}
  .sp-home .say{padding:56px 20px}
  .sp-home .stat{gap:32px}
  .sp-home .ft{padding:44px 20px 0}
  .sp-home .ft-in{grid-template-columns:1fr;gap:28px}
  .sp-home .foot{padding:20px 0 36px}
  .sp-home .irid{display:none}
}

/* ══ LARGE SCREENS ═══════════════════════════════════════════════════════
   The missing upward step — see the matching block in dir.css. Every other
   breakpoint here is `max-width`, so above 1400px the page kept laptop type and
   only gained margins. Header metrics are deliberately untouched (DESIGN_SYSTEM
   §4 contract, shared with the other three pages). Prose measures are in `ch`,
   so the text columns widen with the type and line length holds. */
@media (min-width:1700px){
  .sp-home .band{padding:84px 0 104px}
  .sp-home .band-copy p{font-size:17.5px;margin-bottom:32px}
  .sp-home .qnote{font-size:13.5px}
  .sp-home .say p{font-size:17px}
  .sp-home .rail .lg b{font-size:14px}
  .sp-home .rail .lg span{font-size:13.5px}
  .sp-home .rail-n{font-size:13px}
  .sp-home .tool{padding:56px 40px}
  .sp-home .tool h4{font-size:23px}
  .sp-home .tool p{font-size:15.5px}
  .sp-home .stat div span{font-size:13.5px}
  .sp-home .ft a{font-size:14.5px}
  .sp-home .ft .blurb{font-size:14px}
  .sp-home .tools h3{padding:96px 0 52px}
}