/* Groundwork: site styles (public site, legal pages and subscriber portal).
   No external fonts or libraries, so the Content-Security-Policy stays strict.
   Dynamic values (pointer position, scroll progress) arrive as CSS custom properties set from site.js. */

:root {
  --night: #12150f;
  --night-2: #181c14;
  --night-3: #1f2719;
  --night-line: rgba(243, 236, 214, .09);
  --paper: #f5f1e8;
  --paper-2: #efe9dc;
  --card: #fffdf8;
  --line: #e2dbcc;
  --text: #17201a;
  --muted: #5a655e;
  --muted-night: #aaac99;
  --on-night: #f3f0e6;
  --green: #2f5d3a;
  --green-2: #3b7249;
  --leaf: #8fd3a0;
  --gold: #e8c547;
  --radius: 16px;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@supports (overflow: clip) { html { overflow-x: clip; } } /* only where clip exists: overflow:hidden here would unpin sticky scenes on older iPhones */
body { margin: 0; font: 17px/1.6 var(--sans); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
::selection { background: rgba(127, 214, 154, .35); }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 8px; }
.paper :focus-visible { outline-color: var(--green); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 200; border-radius: 6px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1180px, 100% - 44px); margin-inline: auto; }
.eyebrow { font: 600 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 10px; align-items: center; }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .6; }
h1, h2, .dawn-copy p { text-wrap: balance; }
p { text-wrap: pretty; }
.hidden { display: none !important; }
.note { font: 11.5px/1.6 var(--mono); color: var(--muted-night); margin-top: 14px; }
.paper .note { color: var(--muted); }

/* ---------- buttons ---------- */
.btn { --bg: var(--green); --tx: 0px; --ty: 0px; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
       padding: 14px 22px; border-radius: 999px; background: var(--bg); color: #fff; text-decoration: none; font-weight: 650; font-size: 16px; border: 0; cursor: pointer;
       transform: translate(var(--tx), var(--ty)); transition: transform .35s var(--ease-out), background .25s, box-shadow .25s;
       box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 30px -14px rgba(47,93,58,.8); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { background: var(--green-2); }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px rgba(128,140,132,.55); }
.btn.ghost::after { display: none; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px currentColor; }
.btn.light { --bg: var(--paper); color: var(--night); box-shadow: 0 12px 30px -14px rgba(0,0,0,.6); }
.btn.light:hover { background: #fff; }
.btn.small { padding: 9px 15px; font-size: 14.5px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--on-night); transition: background .35s, color .35s, box-shadow .35s; }
.nav::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--green), var(--leaf), var(--gold)); transform-origin: left; transform: scaleX(var(--progress, 0)); opacity: .85; }
.nav.scrolled { background: rgba(12, 20, 16, .66); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); box-shadow: 0 1px 0 var(--night-line); }
.nav.light { color: var(--text); }
.nav.scrolled.light { background: rgba(245, 241, 232, .8); color: var(--text); box-shadow: 0 1px 0 var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 700 15px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.logo svg { width: 26px; height: 26px; transition: transform .6s var(--ease-out); }
.logo:hover svg { transform: rotate(-6deg) scale(1.06); }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nav ul a { text-decoration: none; opacity: .72; transition: opacity .2s; position: relative; }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .35s var(--ease-out); }
.nav ul a:hover, .nav ul a.current { opacity: 1; }
.nav ul a:hover::after, .nav ul a.current::after { transform: scaleX(1); }
.nav .actions { display: flex; gap: 10px; align-items: center; }
.signin { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1px rgba(128,140,132,.6); transition: box-shadow .2s, background .2s; }
.signin svg { width: 17px; height: 17px; }
.signin:hover { background: rgba(127,127,127,.12); box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 40ms + var(--d, 0ms)); }
.split.in .w > span { transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- badges ---------- */
.badge { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .07em; padding: 5px 9px; border-radius: 999px; }
.badge.A { background: rgba(127,214,154,.14); color: var(--leaf); box-shadow: inset 0 0 0 1px rgba(127,214,154,.35); }
.badge.B { background: rgba(232,197,71,.13); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,197,71,.35); }
.badge.C { background: rgba(214,232,220,.07); color: var(--muted-night); box-shadow: inset 0 0 0 1px rgba(214,232,220,.18); }
.paper .badge.A, .page .badge.A, .call-row .badge.A { background: rgba(47,93,58,.1); color: var(--green); box-shadow: inset 0 0 0 1px rgba(47,93,58,.28); }
.paper .badge.B, .page .badge.B, .call-row .badge.B { background: rgba(232,197,71,.22); color: #7a5f06; box-shadow: inset 0 0 0 1px rgba(184,146,20,.3); }

/* ---------- generic sections ---------- */
section { position: relative; padding: 128px 0; }
.night { background: var(--night); color: var(--on-night); }
.paper { background: var(--paper); color: var(--text); }
.section-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-bottom: 52px; }
h2 { font-size: clamp(34px, 4.3vw, 56px); line-height: 1.04; letter-spacing: -.034em; margin: 16px 0 0; font-weight: 710; }
.section-head p { margin: 0; font-size: 18px; max-width: 32em; color: var(--muted); }
.night .section-head p, .night .eyebrow { color: var(--muted-night); }
.spot { --x: 50%; --y: 50%; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--x) var(--y), rgba(127,214,154,.10), transparent 45%); }
.spot:hover::before { opacity: 1; }

/* ================================================================ HERO: the job site as a plan window on paper
   Calm paper page with the headline on clean ground; a real commercial job site sits to the right and dissolves into the
   paper on its left and bottom edges, marked up like a survey, and flows straight into the map section.
   The resting state is the finished picture; the intro (html.hero-intro, set by boot.js before first paint) only plays when motion is allowed. */
.hero-site { position: relative; overflow: hidden; isolation: isolate; min-height: min(92svh, 860px); display: grid; background: var(--paper); color: var(--text); --px: 0px; --py: 0px; --scroll: 0; }
.hero-site::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(23,32,26,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,32,26,.05) 1px, transparent 1px); background-size: 88px 88px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%), linear-gradient(180deg, #000 55%, transparent 92%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000, transparent 55%), linear-gradient(180deg, #000 55%, transparent 92%); mask-composite: intersect; }
.hero-media { position: absolute; top: 0; bottom: 0; left: 36%; right: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 34%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 12%, #000 24%, #000 64%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 34%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 12%, #000 24%, #000 64%, transparent 100%); mask-composite: intersect; }
/* survey marks live in their own layer over the same box, so the photo's fade never dims them */
.hero-overlay { position: absolute; top: 0; bottom: 0; left: 36%; right: 0; z-index: 1; pointer-events: none; } /* above the copy's layout box so marks stay clickable; only the marks take clicks */
.hero-depth { position: absolute; inset: -3%; transform: translate3d(var(--px), calc(var(--py) + var(--scroll) * 70px), 0) scale(calc(1.02 + var(--scroll) * .05)); transition: transform .9s var(--ease-out); will-change: transform; }
.hero-photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 64% 88%; filter: saturate(.88) contrast(1.06) brightness(.9) sepia(.06); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,26,20,.1), rgba(18,26,20,.22)); }
.hero-plan { position: absolute; inset: 0; pointer-events: none; opacity: .42;
  background-image: linear-gradient(rgba(23,32,26,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(23,32,26,.2) 1px, transparent 1px),
                    linear-gradient(rgba(23,32,26,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(23,32,26,.07) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px; background-position: -1px -1px; mix-blend-mode: multiply; }
.hero-scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--green) 40%, #b8921a); box-shadow: 0 0 18px 3px rgba(47,93,58,.28); }

/* survey marks, in % of the picture so they stay on the slab */
.hero-marks { position: absolute; inset: 0; transform: translate3d(calc(var(--px) * 1.8), calc(var(--py) * 1.8), 0); transition: transform .9s var(--ease-out); }
.survey { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.survey path { fill: none; vector-effect: non-scaling-stroke; }
.survey-box { stroke: #b8921a; stroke-width: 1.8; }
.survey-dim { stroke: rgba(23,32,26,.6); stroke-width: 1; stroke-dasharray: 3 4; }
.survey-label { position: absolute; left: 34%; top: 45%; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 5px 7px; background: rgba(12,20,16,.72); border-radius: 4px; }
.mark { position: absolute; display: flex; align-items: center; gap: 10px; pointer-events: auto; color: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; }
.mark-tag { transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.mark-go { display: block; max-height: 0; overflow: hidden; opacity: 0; font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--leaf); transition: max-height .3s var(--ease-out), opacity .25s, margin .3s; }
.mark.hot .mark-go { color: var(--gold); }
.mark:hover .mark-tag, .mark:focus-visible .mark-tag { transform: translateY(-3px); border-color: var(--leaf); box-shadow: 0 22px 40px -18px rgba(0,0,0,.7); }
.mark.hot:hover .mark-tag, .mark.hot:focus-visible .mark-tag { border-color: var(--gold); }
.mark:hover .mark-go, .mark:focus-visible .mark-go { max-height: 16px; opacity: 1; margin-top: 4px; }
.mark:hover i, .mark:focus-visible i { transform: scale(1.25); }
.mark i { transition: transform .3s var(--ease-out); }
.mark:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }
@media (hover: none) { .mark-go { max-height: 16px; opacity: .9; margin-top: 4px; } }
.mark i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(12,20,16,.55); flex: none; }
.mark i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--leaf); opacity: 0; animation: markPing 2.8s var(--ease-out) infinite; }
.mark.hot i { background: var(--gold); }
.mark.hot i::after { border-color: var(--gold); }
@keyframes markPing { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.mark-tag { display: grid; gap: 3px; padding: 8px 11px 8px 12px; border-radius: 8px; background: rgba(12,20,16,.82); border: 1px solid rgba(143,211,160,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 16px 34px -18px rgba(0,0,0,.6); white-space: nowrap; }
.mark-tag small { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); }
.mark.hot .mark-tag { border-color: rgba(232,197,71,.45); }
.mark.hot .mark-tag small { color: var(--gold); }
.mark-tag b { font-size: 14px; font-weight: 650; color: #fff; }
.m1 { left: 36%; top: 19%; }
.m2 { left: 66%; top: 31%; }
.m3 { left: 60%; top: 62%; }

/* reticle: a surveyor's crosshair over the photo with live coordinates (desktop only) */
.reticle { position: absolute; z-index: 2; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0; pointer-events: none; transform: translate3d(var(--rx, 50vw), var(--ry, 50vh), 0); transition: opacity .3s; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgba(12,20,16,.8); }
.reticle::before { left: 50%; top: 0; bottom: 0; width: 1px; -webkit-mask-image: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); mask-image: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); }
.reticle::after { top: 50%; left: 0; right: 0; height: 1px; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 30% 70%, #000 70%); mask-image: linear-gradient(90deg, #000 30%, transparent 30% 70%, #000 70%); }
.reticle-xy { position: absolute; left: 42px; top: 40px; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: #fff; white-space: nowrap; padding: 4px 6px; border-radius: 4px; background: rgba(12,20,16,.72); }
.hero-site.aiming .reticle { opacity: 1; }

/* copy on clean paper */
.hero-inner { position: relative; display: flex; align-items: center; padding: 120px 0 64px; }
.hero-copy { max-width: 600px; }
.hero-site h1 { font-size: clamp(42px, 5.2vw, 78px); line-height: .98; letter-spacing: -.045em; margin: 0 0 24px; font-weight: 760; color: var(--text); }
.hero-site h1 em { font-style: normal; color: transparent; background: linear-gradient(95deg, var(--green) 10%, #5f8a3f 55%, #b8921a 95%); -webkit-background-clip: text; background-clip: text; }
.hero-site .lede { font-size: 19px; line-height: 1.55; color: #3c4540; max-width: 28em; margin: 0 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* intro: the photo develops out of the paper; pure CSS, one pass; every keyframe fills backwards only */
.hero-intro .hero-site .hero-depth { animation: heroDepth 2.4s var(--ease-out) backwards; }
.hero-intro .hero-site .hero-photo { animation: heroDevelop 1.8s var(--ease-out) .1s backwards; }
.hero-intro .hero-site .hero-plan { animation: heroWipe 1.2s cubic-bezier(.6,.05,.3,1) .15s backwards; }
.hero-intro .hero-site .hero-scanline { animation: sweep 1.2s cubic-bezier(.6,.05,.3,1) .15s both; }
.hero-intro .hero-site .survey { animation: heroFade .8s var(--ease-out) 1s backwards; }
.hero-intro .hero-site .mark, .hero-intro .hero-site .survey-label { animation: heroRise .6s var(--ease-out) backwards; }
.hero-intro .hero-site .m1 { animation-delay: .8s; } .hero-intro .hero-site .m2 { animation-delay: 1s; } .hero-intro .hero-site .m3 { animation-delay: 1.2s; } .hero-intro .hero-site .survey-label { animation-delay: 1.3s; }
.hero-intro .hero-site h1 { animation: heroText .7s var(--ease-out) .05s backwards; }
.hero-intro .hero-site h1 em { animation: heroInk .9s var(--ease-out) .45s backwards; }
.hero-intro .hero-site .lede { animation: heroRise .7s var(--ease-out) .3s backwards; }
.hero-intro .hero-site .cta-row { animation: heroRise .7s var(--ease-out) .42s backwards; }
@keyframes heroDepth { from { transform: scale(1.12); } }
@keyframes heroDevelop { from { opacity: 0; filter: grayscale(1) brightness(1.5) contrast(.5) blur(6px); } }
@keyframes heroWipe { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } }
@keyframes sweep { 0% { opacity: 0; top: 0%; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes heroFade { from { opacity: 0; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(10px); } }
@keyframes heroText { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } }
@keyframes heroInk { from { opacity: 0; filter: blur(10px); } }
.section-head p b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ================================================================ FUNNEL */
#pipeline { padding: 40px 0 110px; }
.funnel { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 40px; padding: 0; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.funnel::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--leaf), var(--gold)); transform-origin: left; transform: scaleX(0); transition: transform 2.4s var(--ease-out) .3s; }
.funnel.in::after { transform: scaleX(1); }
.funnel li { position: relative; padding: 26px 20px 24px 0; }
.funnel li + li { padding-left: 38px; }
.funnel li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; border-top: 1.5px solid rgba(127,214,154,.55); border-right: 1.5px solid rgba(127,214,154,.55); transform: translate(-30%, -50%) rotate(45deg); }
.funnel b { display: block; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.035em; font-weight: 690; font-variant-numeric: tabular-nums; line-height: 1.1; }
.funnel span { font: 11.5px/1.4 var(--mono); color: var(--muted-night); letter-spacing: .04em; }
.funnel .hot b { color: var(--leaf); }

/* ================================================================ EXPLORER (map + list) */
.ex { display: grid; gap: 16px; }
.ex-tools { display: grid; grid-template-columns: minmax(220px, 1fr) 200px 300px; gap: 14px; align-items: end; }
.ex-search { position: relative; }
.ex-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted-night); pointer-events: none; }
.ex-search input { width: 100%; height: 46px; padding: 0 44px 0 40px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--night-line); color: var(--on-night); font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
.ex-search input::placeholder { color: #6f8177; }
.ex-search input:focus { outline: none; border-color: rgba(127,214,154,.6); box-shadow: 0 0 0 4px rgba(127,214,154,.12); background: rgba(255,255,255,.05); }
.ex-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; border: 1px solid var(--night-line); color: var(--muted-night); }
.ex-select { display: grid; gap: 6px; }
.ex-select span, .timing label { font: 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-night); }
.ex-select select { height: 46px; padding: 0 36px 0 14px; border-radius: 12px; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.035) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aaba0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; border: 1px solid var(--night-line); color: var(--on-night); cursor: pointer; }
.ex-select select option { background: #111c16; color: var(--on-night); }
.timing label { display: flex; justify-content: space-between; gap: 12px; }
.timing output { color: var(--on-night); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.timing .ticks { display: flex; justify-content: space-between; font: 10px/1 var(--mono); color: #6f8177; margin-top: -2px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 13px/1 var(--sans); color: #d6e3da; background: transparent; border: 1px solid var(--night-line); padding: 10px 14px; border-radius: 999px; cursor: pointer; transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease-out); }
.chip:hover { border-color: rgba(214,232,220,.32); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.chip .n { font: 600 11px/1 var(--mono); margin-left: 6px; opacity: .6; }

.ex-main { display: grid; grid-template-columns: 1.14fr .86fr; gap: 22px; align-items: start; }
.map-card { position: relative; border-radius: 20px; border: 1px solid var(--night-line); background: radial-gradient(ellipse at 50% 38%, #222a1b, var(--night-2) 70%); padding: 14px; overflow: hidden; }
.ex-map-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 34px; margin: 0 2px 10px 6px; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-night); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgba(127,214,154,.6); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(127,214,154,0); } 100% { box-shadow: 0 0 0 0 rgba(127,214,154,0); } }
.live b { color: var(--on-night); font-weight: 600; }
.tools { display: flex; gap: 6px; }
.tool { height: 34px; min-width: 34px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(214,232,220,.06); border: 1px solid var(--night-line); color: var(--on-night); cursor: pointer; font: 600 15px/1 var(--sans); transition: background .2s, border-color .2s, color .2s; }
.tool:hover { border-color: rgba(214,232,220,.3); background: rgba(214,232,220,.1); }
.tool[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--night); }
.tool.label { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; gap: 6px; grid-auto-flow: column; }
.tool svg { width: 15px; height: 15px; }
.tool:disabled { opacity: .35; cursor: default; }
.map { position: relative; border-radius: 14px; overflow: hidden; outline: none; touch-action: pan-y; }
.map:focus-visible { box-shadow: 0 0 0 2px var(--leaf); }
.map.zoomed { cursor: grab; }
.map.dragging { cursor: grabbing; }
.map.yard-mode, .map.yard-mode .dot { cursor: crosshair; }
.map svg { width: 100%; height: auto; }
.map .city { fill: rgba(232,214,160,.05); stroke: rgba(226,221,178,.55); stroke-width: 1.3; stroke-linejoin: round; fill-rule: evenodd; vector-effect: non-scaling-stroke; }
.map .city.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2.8s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.map .gridlines line { stroke: rgba(214,232,220,.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .cross line { stroke: rgba(127,214,154,.5); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.map .cross.on line { opacity: 1; }
.radar { position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(232,197,71,.04) 300deg, rgba(232,197,71,.10) 352deg, rgba(250,225,150,.2) 359deg, transparent 360deg); -webkit-mask-image: radial-gradient(circle, transparent 3%, #000 12%, #000 55%, transparent 70%); mask-image: radial-gradient(circle, transparent 3%, #000 12%, #000 55%, transparent 70%); animation: sweep 9s linear infinite; animation-play-state: paused; mix-blend-mode: screen; opacity: .55; }
.map.running .radar { animation-play-state: running; }
@keyframes sweep { to { transform: rotate(360deg); } }
.dot { cursor: pointer; opacity: 0; transition: opacity .6s; outline: none; }
.map.ready .dot { opacity: 1; transition-delay: calc(var(--i) * var(--step, 70ms) + 700ms); }
/* replay: each dot lands with a small pop in filing order while a readout ticks through the dates */
.map.replaying .dot { transition: opacity .25s; transition-delay: calc(var(--i) * var(--step) + 500ms); }
.map.replaying .dot .core { animation: dotLand .55s var(--ease-out) backwards; animation-delay: calc(var(--i) * var(--step) + 500ms); }
@keyframes dotLand { 0% { transform: scale(0); } 60% { transform: scale(1.7); } 100% { transform: scale(1); } }
.replay { position: absolute; left: 50%; top: 14px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(12,20,16,.82); border: 1px solid rgba(143,211,160,.28); color: var(--on-night); font: 600 11px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -6px); transition: opacity .35s, transform .35s var(--ease-out); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.replay.on { opacity: 1; transform: translate(-50%, 0); }
.replay i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgba(143,211,160,.6); animation: live 1.4s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(143,211,160,0); } 100% { box-shadow: 0 0 0 0 rgba(143,211,160,0); } }
.replay-k { color: var(--muted-night); text-transform: uppercase; }
.replay b { min-width: 4.5em; color: #fff; font-variant-numeric: tabular-nums; }
.replay-n { color: var(--muted-night); }
.replay.done b { color: var(--leaf); min-width: 0; }
.hud-locked { display: grid; gap: 3px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(232,197,71,.45); background: rgba(232,197,71,.07); color: var(--on-night); text-decoration: none; }
.hud-locked b { color: var(--gold); font-size: 14px; }
.hud-locked span { font-size: 12.5px; color: var(--muted-night); }
.hud-locked:hover { border-color: var(--gold); }
.map.ready .dot.dim { opacity: .12; transition-delay: 0ms; }
.dot .core { fill: var(--leaf); stroke: var(--night); stroke-width: 3; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease-out); }
.dot.permit .core { fill: var(--gold); }
.dot.C .core { fill: #6f8577; }
.dot .ring { fill: none; stroke: var(--leaf); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.dot.permit .ring { stroke: var(--gold); }
.dot.A .ring { animation: ping 2.8s var(--ease) infinite; animation-delay: calc(var(--i) * 300ms); }
.dot .hit { fill: transparent; }
.dot.active .core, .dot:hover .core { transform: scale(1.5); }
.dot .label { fill: var(--on-night); font: 600 13px var(--sans); paint-order: stroke; stroke: rgba(12,20,16,.9); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .35s; pointer-events: none; }
.map.zoomed .dot:not(.dim) .label, .dot.active .label { opacity: 1; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
.yard circle.pin { fill: var(--gold); stroke: var(--night); stroke-width: 3; vector-effect: non-scaling-stroke; }
.yard circle.ring5, .yard circle.ring10 { fill: none; stroke: rgba(232,197,71,.55); stroke-width: 1.2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.yard circle.ring10 { stroke: rgba(232,197,71,.3); }
.yard text { fill: var(--gold); font: 600 12px var(--mono); paint-order: stroke; stroke: rgba(12,20,16,.85); stroke-width: 3px; }
.readout { position: absolute; left: 12px; bottom: 10px; right: 12px; font: 10.5px/1.5 var(--mono); color: var(--muted-night); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout b { color: var(--on-night); font-weight: 600; }
.map-hint { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -8px); padding: 8px 12px; border-radius: 999px; background: rgba(12,20,16,.88); border: 1px solid var(--night-line); font: 12px/1 var(--sans); color: var(--on-night); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease-out); white-space: nowrap; }
.map-hint.on { opacity: 1; transform: translate(-50%, 0); }
.tip { position: absolute; z-index: 3; width: max-content; max-width: 250px; pointer-events: none; padding: 10px 12px; border-radius: 12px; background: rgba(245,241,232,.97); color: var(--text); box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); font-size: 14px; line-height: 1.35; opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(.96); transition: opacity .2s, transform .25s var(--ease-out); }
.tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 20px)); }
.tip.below { transform: translate(-50%, 14px) scale(.96); }
.tip.below.on { transform: translate(-50%, 20px); }
.tip b { display: block; font-size: 14.5px; letter-spacing: -.01em; margin-bottom: 2px; }
.tip span { font: 11px/1.5 var(--mono); color: var(--muted); }
.legend { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 2px; }
.lg-btn { display: inline-flex; align-items: center; gap: 7px; font: 11px/1 var(--mono); color: var(--muted-night); background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 9px; cursor: pointer; transition: border-color .2s, opacity .2s; }
.lg-btn:hover { border-color: var(--night-line); }
.lg-btn i { width: 9px; height: 9px; border-radius: 50%; }
.lg-btn[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.lg-approval { background: var(--leaf); } .lg-permit { background: var(--gold); } .lg-low { background: #6f8577; }
.legend .kbd-help { margin-left: auto; font: 10.5px/1 var(--mono); color: #6f8177; align-self: center; }

.ex-list { min-width: 0; }
.plist { list-style: none; margin: 0; padding: 2px 8px 24px 2px; display: grid; gap: 10px; max-height: var(--list-h, 660px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(214,232,220,.2) transparent;
         -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.plist .empty { font: 12.5px/1.6 var(--mono); color: var(--muted-night); padding: 22px; border: 1px dashed var(--night-line); border-radius: 14px; text-align: center; }
.plist .empty button { margin-top: 10px; }
.pcard { position: relative; display: block; width: 100%; text-align: left; color: inherit; cursor: pointer; padding: 15px 16px; border-radius: 15px; background: rgba(255,255,255,.022); border: 1px solid var(--night-line); transition: background .3s, border-color .3s, transform .4s var(--ease-out); }
.pcard:hover, .pcard.focus { background: rgba(127,214,154,.045); border-color: rgba(127,214,154,.3); }
.pcard.active { border-color: rgba(127,214,154,.45); background: rgba(127,214,154,.06); }
.pcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pcard h3 { margin: 0; font-size: 17px; letter-spacing: -.012em; font-weight: 650; }
.pcard mark { background: rgba(232,197,71,.3); color: inherit; border-radius: 3px; }
.pcard .meta { font: 11.5px/1.55 var(--mono); color: var(--muted-night); margin-top: 5px; }
.pcard .dist { color: var(--gold); }
.plist li.open .pcard { border-radius: 15px 15px 0 0; }
.pextra, .pdetail { display: none; margin: -1px 0 0; padding: 14px 16px 16px; border: 1px solid rgba(127,214,154,.45); border-top: 0; border-radius: 0 0 15px 15px; background: rgba(127,214,154,.035); font-size: 14.5px; }
.plist li.open .pextra, .plist li.open .pdetail { display: grid; gap: 12px; animation: drop .45s var(--ease-out); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.pextra > p { margin: 0; color: #c9d6cd; }
.lifecycle { display: grid; gap: 6px; }
.lifecycle .bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.lifecycle .bar i { height: 5px; border-radius: 3px; background: rgba(214,232,220,.12); }
.lifecycle .bar i.done { background: var(--green-2); }
.lifecycle .bar i.now { background: var(--leaf); box-shadow: 0 0 12px rgba(127,214,154,.6); }
.lifecycle .labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font: 10px/1.2 var(--mono); color: #6f8177; }
.lifecycle .labels span.now { color: var(--leaf); }
.facts-row { display: flex; gap: 6px 16px; flex-wrap: wrap; font: 11.5px/1.6 var(--mono); color: var(--muted-night); }
.facts-row em { font-style: normal; color: var(--on-night); }
.unlock { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(127,214,154,.09), rgba(232,197,71,.07)); border: 1px dashed rgba(127,214,154,.35); }
.unlock .masked { display: grid; gap: 2px; font: 12px/1.4 var(--mono); color: var(--muted-night); }
.unlock .masked i { font-style: normal; filter: blur(3.5px); color: var(--on-night); user-select: none; }
.unlock a { flex: none; font: 650 13px/1 var(--sans); color: var(--night); background: var(--leaf); padding: 9px 12px; border-radius: 999px; text-decoration: none; transition: background .2s; }
.unlock a:hover { background: #a3e6b7; }
.pextra .row-actions { display: flex; gap: 8px; }
.linkbtn { font: 600 11.5px/1 var(--mono); color: var(--muted-night); background: none; border: 1px solid var(--night-line); border-radius: 999px; padding: 7px 10px; cursor: pointer; }
.linkbtn:hover { color: var(--on-night); border-color: rgba(214,232,220,.3); }

/* portal detail */
.pdetail h4 { margin: 4px 0 0; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-night); }
.pdetail .k { display: block; font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-night); }
.callfirst { padding: 12px 14px; border-radius: 12px; background: rgba(127,214,154,.09); border-left: 3px solid var(--leaf); }
.callfirst p { margin: 4px 0; color: var(--on-night); }
.callfirst small { color: var(--muted-night); }
.team { display: grid; gap: 8px; }
.member { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--night-line); }
.member b { display: block; font-weight: 620; }
.member span { color: var(--muted-night); font-size: 13.5px; }
.member .reach { display: grid; justify-items: end; gap: 3px; font: 12.5px/1.4 var(--mono); }
.member a { color: var(--leaf); text-decoration: none; }
.member a:hover { text-decoration: underline; }
.pdetail .facts { display: grid; gap: 6px; margin: 0; }
.pdetail .facts div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.pdetail .facts dt { font: 11px/1.6 var(--mono); color: var(--muted-night); }
.pdetail .facts dd { margin: 0; color: #d6e3da; }
.events { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--night-line); display: grid; gap: 6px; }
.events li { position: relative; font-size: 13.5px; color: #d6e3da; }
.events li::before { content: ""; position: absolute; left: -18px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.events li.signal { color: var(--muted-night); }
.events li.signal::before { background: transparent; border: 1px solid var(--muted-night); }
.events time { font: 11.5px/1 var(--mono); color: var(--muted-night); margin-right: 10px; }
.sources summary { cursor: pointer; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-night); }
.sources p { margin: 8px 0 0; font-size: 13px; color: var(--muted-night); }
.sources q { font-style: italic; color: #c9d6cd; }


/* ================================================================ LANDING MAP (one canvas, in-map panel) */
.ex.landing .map-card { padding: 0; border: 0; border-radius: 28px; background: var(--night); box-shadow: 0 70px 110px -70px rgba(24,32,27,.65); }
.ex.landing .ex-map-top { margin: 0; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--night-line); flex-wrap: wrap; gap: 10px 16px; min-height: 64px; }
.ex.landing .filters { flex: 1; justify-content: center; gap: 6px; }
.ex.landing .chip { padding: 8px 12px; font-size: 12.5px; }
.map-canvas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; background-color: #151a12; background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 55px 55px; }
.ex.landing .map { border-radius: 0; padding: 18px; background: radial-gradient(ellipse at 50% 45%, rgba(232,197,71,.06), transparent 65%); }
.ex.landing .readout { left: 22px; bottom: 16px; }
.hud { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 22px; border-left: 1px solid var(--night-line); background: linear-gradient(180deg, rgba(18,21,15,.92), rgba(18,21,15,.82)); color: var(--on-night); min-height: 0; overflow: auto; }
.hud > * { animation: hudIn .5s var(--ease-out) both; }
.hud > *:nth-child(2) { animation-delay: 40ms; } .hud > *:nth-child(3) { animation-delay: 80ms; } .hud > *:nth-child(4) { animation-delay: 120ms; } .hud > *:nth-child(5) { animation-delay: 160ms; } .hud > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes hudIn { from { opacity: 0; transform: translateY(8px); } }
.hud .k { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hud h3 { margin: 0; font-size: 26px; line-height: 1.12; letter-spacing: -.02em; font-weight: 680; }
.hud-lede { margin: 0; color: #cfd3c2; font-size: 14.5px; }
.hud-picks { display: grid; gap: 8px; }
.hud-pick { text-align: left; display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(243,240,230,.03); border: 1px solid var(--night-line); color: var(--on-night); cursor: pointer; transition: border-color .25s, background .25s, transform .3s var(--ease-out); }
.hud-pick b { font-size: 15px; font-weight: 640; }
.hud-pick span { font: 11.5px/1.4 var(--mono); color: var(--muted-night); }
.hud-pick:hover, .hud-pick.focus { border-color: rgba(143,211,160,.45); background: rgba(143,211,160,.06); transform: translateX(3px); }
.hud-tip { display: flex; gap: 8px; align-items: flex-start; margin: auto 0 0; font-size: 12.5px; color: var(--muted-night); }
.hud-tip svg { flex: none; width: 16px; height: 16px; color: var(--gold); margin-top: 1px; }
.hud-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hud-arrows { display: flex; align-items: center; gap: 6px; }
.hud-count { font: 11px/1 var(--mono); color: var(--muted-night); min-width: 3.2em; text-align: center; }
.hud-head { display: grid; gap: 6px; justify-items: start; }
.hud-head .meta { font: 11.5px/1.5 var(--mono); color: var(--muted-night); }
.hud-facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
.hud-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(243,240,230,.03); border: 1px solid var(--night-line); }
.hud-facts div:first-child { grid-column: 1 / -1; }
.hud-facts dt { font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-night); }
.hud-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.hud .unlock { flex-direction: column; align-items: stretch; }
.hud .unlock a { text-align: center; }
.hud .linkbtn { align-self: flex-start; }
.ex.landing .legend { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--night-line); }

/* ================================================================ DAWN (the problem) */
.dawn { position: relative; height: 100vh; min-height: 660px; max-height: 960px; padding: 0; overflow: hidden; isolation: isolate; --rise: 0; --dx: 0;
        background: linear-gradient(180deg, var(--night) 0%, var(--night) 34%, #161b12 62%, #20281a 88%, var(--paper) 88%); background-repeat: no-repeat; }
.dawn .stars { position: absolute; inset: 0 0 25% 0; opacity: calc(1 - var(--rise) * 1.8);
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent), radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 61% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 77% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 38%, #fff, transparent), radial-gradient(1px 1px at 6% 48%, #fff, transparent), radial-gradient(1.3px 1.3px at 36% 26%, #fff, transparent), radial-gradient(1px 1px at 53% 46%, #fff, transparent), radial-gradient(1.2px 1.2px at 94% 8%, #fff, transparent), radial-gradient(1px 1px at 70% 52%, #fff, transparent), radial-gradient(1px 1px at 19% 8%, #fff, transparent);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { to { filter: brightness(.55); } }
.dawn .sky-warm { position: absolute; inset: 0 0 12% 0; background: linear-gradient(180deg, transparent 0%, rgba(90,62,36,.28) 42%, rgba(206,120,52,.42) 78%, rgba(248,196,96,.7) 100%); opacity: clamp(0, calc(var(--rise) * 1.2 - .15), 1); }
.dawn .sky { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 50% 88%, rgba(248,206,102, calc(.05 + var(--rise) * .5)), transparent 70%), radial-gradient(ellipse 140% 45% at 50% 88%, rgba(226,132,58, calc(var(--rise) * .25)), transparent 70%); }
.dawn .rays { position: absolute; left: 50%; top: 88%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%) rotate(calc(var(--rise) * 26deg)); opacity: calc(var(--rise) * .85);
  background: repeating-conic-gradient(from 0deg, rgba(250,214,120,.13) 0deg 2.5deg, transparent 2.5deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 44%); mask-image: radial-gradient(circle, #000 6%, transparent 44%); }
.dawn .sun { position: absolute; left: 50%; top: 88%; width: min(580px, 82vw); aspect-ratio: 1; border-radius: 50%; transform: translate(calc(-50% + var(--dx) * 14px), calc(-50% + (1 - var(--rise)) * 50%)) scale(calc(.85 + var(--rise) * .2));
  background: radial-gradient(circle at 50% 50%, #fffae6 0%, #fde7a6 14%, #f4c450 28%, rgba(240,170,64,.55) 42%, rgba(240,170,64,0) 70%); opacity: calc(.15 + var(--rise) * .85); }
.dawn .halo { position: absolute; left: 50%; top: 88%; width: min(900px, 124vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, calc(-50% + (1 - var(--rise)) * 32%)) scale(calc(.88 + var(--rise) * .12)); border: 1px solid rgba(246,205,110,.3); box-shadow: 0 0 80px rgba(246,205,110, calc(var(--rise) * .15)) inset; opacity: calc(var(--rise) * .95); }
.dawn .ridge { position: absolute; left: -2%; width: 104%; max-width: none; bottom: 12%; pointer-events: none; }
.dawn .ridge path { vector-effect: non-scaling-stroke; }
.dawn .ridge.far { height: 160px; transform: translate(calc(var(--dx) * -8px), calc((1 - var(--rise)) * 18px)); }
.dawn .ridge.far path { fill: #283122; stroke: rgba(250,212,120, calc(var(--rise) * .8)); stroke-width: 1.6px; }
.dawn .ridge.near { height: 116px; transform: translate(calc(var(--dx) * -18px), calc((1 - var(--rise)) * 34px)); }
.dawn .ridge.near path { fill: #0f120c; stroke: rgba(250,212,120, calc(var(--rise) * .35)); stroke-width: 1px; }
.dawn .haze { position: absolute; left: 0; right: 0; bottom: 12%; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(248,214,150, calc(var(--rise) * .16))); }
.dawn .ground { position: absolute; left: 0; right: 0; top: 88%; bottom: -2px; background: var(--paper); z-index: 2; }
.dawn .ground::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,197,71,.85) 25%, #fff7d6 50%, rgba(232,197,71,.85) 75%, transparent); background-size: 200% 100%; box-shadow: 0 0 30px rgba(240,190,80,.9); animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.dawn .ground span { display: none; position: absolute; left: 50%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(47,93,58,.35), transparent); }
.dawn .ground span:nth-child(1) { top: 16px; width: min(640px, 80vw); }
.dawn .ground span:nth-child(2) { top: 30px; width: min(320px, 40vw); opacity: .6; }
.dawn .dawn-copy { position: absolute; left: 0; right: 0; top: 0; bottom: 26%; z-index: 3; display: grid; place-content: center; text-align: center; padding: 0 22px; color: var(--on-night);
  opacity: clamp(0, calc(var(--rise) * 3 - .15), 1); transform: translateY(calc((1 - var(--rise)) * 36px)); }
.dawn .dawn-copy .eyebrow { justify-content: center; color: var(--gold); margin: 0 auto 20px; }
.dawn .dawn-copy #dawn-line { margin: 0 auto; max-width: 19em; font-size: clamp(30px, 4vw, 56px); line-height: 1.08; letter-spacing: -.034em; font-weight: 680; }
.lightup .w { opacity: .18; transition: opacity .6s var(--ease-out), color .6s, text-shadow .6s; }
.lightup .w.lit { opacity: 1; }
.lightup em { font-style: normal; }
.lightup em .w.lit { color: #f6d77e; text-shadow: 0 0 30px rgba(246,205,110,.35); }
.dawn-stake { margin: 28px auto 0; max-width: 36em; font-size: 17.5px; line-height: 1.5; color: #d6d3c2; opacity: clamp(0, calc(var(--rise) * 3 - 1.7), 1); transform: translateY(calc((1 - var(--rise)) * 24px)); }
.dawn-stake b { color: var(--on-night); font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 6px; background: rgba(243,240,230,.08); }
.dawn-stake span { color: #f6d77e; }

/* ================================================================ THE RACE */
.paper.race { height: 215vh; padding: 0; margin-top: -11vh; background: linear-gradient(180deg, transparent 0, var(--paper) 11vh); --p: 0; --px: 0; }
.race-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; padding: 84px 0 22px; }
.race-sticky > .wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.race-head { flex: none; margin-bottom: 16px; }
.race-head h2 { font-size: clamp(26px, 2.7vw, 40px); max-width: none; margin-top: 10px; text-wrap: balance; }
.race-head h2 em { font-style: normal; color: var(--green); }
.stake { flex: none; text-align: right; padding-left: 26px; border-left: 1px solid var(--line); }
.stake .k { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stake b { display: block; font: 700 28px/1.2 var(--mono); color: var(--green); font-variant-numeric: tabular-nums; margin-top: 4px; }
.stake small { display: block; font: 11px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.race-board { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 50px 90px -60px rgba(24,32,27,.5); padding: 10px 12px 14px; }
.race-steps { flex: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 2px 2px 14px; }
.race-steps::before, .race-progress { content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 3px; border-radius: 3px; }
.race-steps::before { background: var(--paper-2); }
.race-progress { background: linear-gradient(90deg, var(--green), var(--leaf), var(--gold)); transform-origin: left; transform: scaleX(var(--p)); }
.race-steps button { text-align: left; background: none; border: 0; padding: 8px 10px 8px; font-size: 13.5px; font-weight: 620; color: var(--muted); cursor: pointer; border-radius: 10px; transition: color .3s, background .3s; }
.race-steps button span { margin-right: 8px; font: 600 10.5px/1.4 var(--mono); color: #b8ad92; letter-spacing: .08em; }
.race-steps button:hover { background: var(--paper); color: var(--text); }
.race-steps button[aria-current="step"] { color: var(--text); }
.race-steps button[aria-current="step"] span { color: var(--green); }
.scene-wrap { position: relative; flex: 1 1 auto; min-height: 190px; height: 380px; max-height: 380px; border-radius: 18px; overflow: hidden; background: #f1e4c6; }
.scene { position: absolute; top: 0; left: 50%; width: auto; height: 100%; min-width: 100%; max-width: none; aspect-ratio: 1200 / 430; transform: translateX(-50%); }
.scene * { transform-box: fill-box; }
.cloud.c1 { animation: drift1 70s linear infinite; }
.cloud.c2 { animation: drift2 95s linear infinite; animation-delay: -40s; }
@keyframes drift1 { from { transform: translate(-900px, 70px); } to { transform: translate(2100px, 70px); } }
@keyframes drift2 { from { transform: translate(-900px, 130px); } to { transform: translate(2100px, 130px); } }
.s-mtn { transform: translateX(calc(var(--px) * -14px)); transition: transform .8s var(--ease-out); }
.s-mtn.far { transform: translateX(calc(var(--px) * -6px)); }
.s-lot { opacity: clamp(0, calc(var(--p) * 14), 1); }
.s-flag { transform-origin: 50% 100%; opacity: clamp(0, calc(min((var(--p) - .01) * 16, (.34 - var(--p)) * 12)), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - .01) * 10), 1)) * -24px)); }
.s-sign { transform-origin: 50% 100%; transform: scale(clamp(0, calc((var(--p) - .02) * 12), 1)); opacity: clamp(0, calc((.5 - var(--p)) * 10), 1); }
.s-plan { transform-origin: 0% 50%; transform: scaleX(clamp(0, calc((var(--p) - .2) * 7), 1)); opacity: clamp(0, calc((.64 - var(--p)) * 10), 1); }
.s-crane { transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--p) - .36) * 10), 1)); opacity: clamp(0, calc((.84 - var(--p)) * 12), 1); }
.s-shadow { opacity: clamp(0, calc((var(--p) - .42) * 5), .45); }
.s-f1 { transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--p) - .42) * 14), 1)); }
.s-f2 { transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--p) - .49) * 14), 1)); }
.s-f3 { transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--p) - .56) * 14), 1)); }
.s-windows { opacity: clamp(0, calc((var(--p) - .62) * 10), 1); }
.s-mail .m { opacity: clamp(0, calc(min((var(--p) - .64) * 14, (.84 - var(--p)) * 14)), 1); }
.s-mail .m1 { transform: translate(calc(620px + (var(--p) - .64) * 2600px), calc(200px - (var(--p) - .64) * 520px)); }
.s-mail .m2 { transform: translate(calc(600px + (var(--p) - .66) * 2300px), calc(240px - (var(--p) - .66) * 300px)); }
.s-mail .m3 { transform: translate(calc(640px + (var(--p) - .68) * 2000px), calc(170px - (var(--p) - .68) * 700px)); }
.s-trees .t { transform-origin: 50% 100%; }
.s-trees .t1 { transform: scale(clamp(0, calc((var(--p) - .82) * 9), 1)); }
.s-trees .t2 { transform: scale(clamp(0, calc((var(--p) - .85) * 9), 1)); }
.s-trees .t3 { transform: scale(clamp(0, calc((var(--p) - .88) * 9), 1)); }
.s-trees .t4 { transform: scale(clamp(0, calc((var(--p) - .9) * 9), 1)); }
.s-trees .t5 { transform: scale(clamp(0, calc((var(--p) - .86) * 8), 1)); }
.scene-clock { position: absolute; right: 14px; top: 14px; display: flex; align-items: baseline; gap: 7px; padding: 8px 12px; border-radius: 12px; background: rgba(23,26,19,.88); color: var(--muted-night); font: 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.scene-clock b { font: 700 22px/1 var(--mono); color: var(--gold); min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.captions { position: absolute; left: 14px; right: 150px; top: 14px; pointer-events: none; }
.cap { position: absolute; left: 0; top: 0; max-width: 360px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,253,248,.94); box-shadow: 0 14px 30px -18px rgba(24,32,27,.45); font-size: 14.5px; color: #2c342f; opacity: 0; transform: translateY(-8px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.cap b { color: var(--green); }
.race[data-stage="1"] .cap[data-s="1"], .race[data-stage="2"] .cap[data-s="2"], .race[data-stage="3"] .cap[data-s="3"], .race[data-stage="4"] .cap[data-s="4"], .race[data-stage="5"] .cap[data-s="5"] { opacity: 1; transform: none; }
.lanes { flex: none; display: grid; gap: 8px; padding: 12px 6px 0; }
.lane { display: grid; grid-template-columns: 270px 1fr 160px; gap: 18px; align-items: center; }
.who { display: flex; gap: 11px; align-items: center; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.lane.you .avatar { background: none; box-shadow: 0 0 0 3px rgba(47,93,58,.15); border-radius: 9px; overflow: hidden; }
.logo-av svg { width: 32px; height: 32px; }
.lane.them .avatar { background: #d6ccb6; }
.who b { display: block; font-size: 15px; font-weight: 640; line-height: 1.2; }
.who small { display: block; font-size: 13px; color: var(--muted); min-height: 1.35em; }
.track { position: relative; height: 8px; border-radius: 5px; background: #ece3cf; }
.track::before { content: ""; position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(90deg, transparent 19.8%, rgba(0,0,0,.14) 19.8% 20.2%, transparent 20.2% 39.8%, rgba(0,0,0,.14) 39.8% 40.2%, transparent 40.2% 61.8%, rgba(0,0,0,.14) 61.8% 62.2%, transparent 62.2% 81.8%, rgba(0,0,0,.14) 81.8% 82.2%, transparent 82.2%); }
.track .fill { position: absolute; inset: 0; border-radius: 5px; transform-origin: left; transform: scaleX(var(--x, 0)); }
.lane.you .fill { background: linear-gradient(90deg, var(--green), var(--leaf)); }
.lane.them .fill { background: #bdb297; }
.runner { position: absolute; top: 50%; left: calc(var(--x, 0) * 100%); width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; box-shadow: 0 6px 14px -4px rgba(24,32,27,.45); }
.lane.you .runner { background: var(--green); }
.lane.them .runner { background: #9c917b; }
.lane.them.idle .runner { animation: doze 1.6s ease-in-out infinite; }
@keyframes doze { 50% { transform: translate(-50%, -80%); } }
.pill { justify-self: end; font-size: 12.5px; font-weight: 620; padding: 7px 11px; border-radius: 999px; white-space: nowrap; transition: background .4s, color .4s; }
.lane.you .pill { background: rgba(47,93,58,.12); color: var(--green); }
.lane.them .pill { background: #efe8d8; color: #857a63; }
.lane.them .pill.alert { background: rgba(232,197,71,.32); color: #6e5405; }
.race-foot { flex: none; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; margin-top: 16px; }
.lead-meter { padding-right: 26px; border-right: 1px solid var(--line); }
.lead-meter > span { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lead-meter b { display: block; white-space: nowrap; font: 700 28px/1.2 var(--mono); color: var(--green); font-variant-numeric: tabular-nums; margin-top: 4px; }
.verdict { margin: 0; font-size: 16.5px; color: #2c342f; max-width: 40em; }

/* ================================================================ CALCULATOR */
.calc { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: 0 50px 90px -60px rgba(24,32,27,.45); }
.calc .inputs { padding: 34px 36px; display: grid; gap: 22px; align-content: start; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preset { text-align: left; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--text); cursor: pointer; transition: border-color .2s, background .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s; }
.preset b { display: block; font-size: 15px; font-weight: 650; }
.preset span { font: 11.5px/1.4 var(--mono); color: var(--muted); }
.preset:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(24,32,27,.5); }
.preset[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.preset[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
.sentence { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: baseline; }
.sentence label, .sentence .label { font-size: 17px; color: #2c342f; }
.sentence .val { font: 700 26px/1 var(--mono); color: var(--green); font-variant-numeric: tabular-nums; }
.sentence input { grid-column: 1 / -1; }
.stepper-row { align-items: center; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); overflow: hidden; }
.stepper button { width: 46px; height: 46px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--green); cursor: pointer; transition: background .2s; }
.stepper button:hover { background: rgba(47,93,58,.1); }
.stepper button:active { transform: scale(.92); }
.stepper output { min-width: 42px; text-align: center; font: 700 22px/1 var(--mono); color: var(--green); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 6px 0 0; cursor: pointer; --fill: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--green) var(--fill), #e3ddd0 var(--fill)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: #e3ddd0; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--green); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--green); margin-top: -10px; box-shadow: 0 4px 12px rgba(0,0,0,.16); transition: transform .2s; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--green); }
.night input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--leaf) var(--fill), rgba(214,232,220,.14) var(--fill)); }
.night input[type=range]::-moz-range-track { background: rgba(214,232,220,.14); }
.night input[type=range]::-moz-range-progress { background: var(--leaf); }
.night input[type=range]::-webkit-slider-thumb { background: var(--night); border-color: var(--leaf); }
.night input[type=range]::-moz-range-thumb { background: var(--night); border-color: var(--leaf); }
.calc-hint { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.calc .result { background: var(--night); color: var(--on-night); padding: 34px 36px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.calc .result::after { content: ""; position: absolute; width: 460px; height: 460px; right: -170px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(232,197,71,.2), transparent 65%); pointer-events: none; }
.calc .result > * { position: relative; z-index: 1; }
.calc .result .k { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-night); }
.calc .big { font-size: clamp(54px, 6.6vw, 86px); font-weight: 720; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.calc .big small { font-size: .26em; letter-spacing: -.01em; font-weight: 600; color: var(--muted-night); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 5px; min-height: 18px; }
.tile { aspect-ratio: 1; border-radius: 4px; background: rgba(214,232,220,.07); transform: scale(.55); transition: transform .5s var(--ease-out), background .4s; transition-delay: calc(var(--i) * 14ms); }
.tile.on { background: linear-gradient(135deg, var(--leaf), #b9d77f); transform: scale(1); }
.tile.part { background: linear-gradient(135deg, rgba(127,214,154,.55), rgba(232,197,71,.4)); transform: scale(.8); }
.tiles-more { font: 11px/1 var(--mono); color: var(--muted-night); align-self: center; grid-column: span 3; white-space: nowrap; }
.calc .result p { margin: 0; color: #c5d3ca; }
.tiles-cap { font: 10.5px/1 var(--mono); color: #6f8177; margin-top: -8px; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font: 11.5px/1.2 var(--mono); color: var(--muted-night); }
.bar-row b { color: var(--on-night); font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-row .track { grid-column: 1 / -1; height: 10px; border-radius: 6px; background: rgba(214,232,220,.07); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 6px; width: 100%; transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform .9s var(--ease-out); }
.bar-row.cost .fill { background: linear-gradient(90deg, var(--green), var(--leaf)); }
.bar-row.gain .fill { background: linear-gradient(90deg, #b8921a, var(--gold), #f6d77e); }
.calc .big.loss { color: #f6d77e; }
.cover { display: flex; gap: 12px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--night-line); }
.cover b { font: 700 40px/1 var(--mono); color: var(--leaf); font-variant-numeric: tabular-nums; }
.cover span { color: #cfd3c2; font-size: 15px; }
.cover span span { color: var(--on-night); font-weight: 600; }
.calc .foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--night-line); }
.calc .disclaim { font: 11.5px/1.5 var(--mono); color: var(--muted-night); max-width: 24em; margin: 0; }
.calc .disclaim b { color: var(--on-night); }

/* ================================================================ WHAT YOU GET */
.get-head { align-items: end; }
.included { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.included li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 24px -20px rgba(24,32,27,.5); }
.included li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: rgba(47,93,58,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5d3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.get { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.get-card { position: relative; border-radius: 26px; background: var(--card); border: 1px solid var(--line); padding: 30px; overflow: hidden; display: flex; flex-direction: column; min-height: 560px; box-shadow: 0 40px 80px -60px rgba(24,32,27,.5); }
.get-card h3 { font-size: 28px; letter-spacing: -.02em; margin: 12px 0 6px; }
.get-card .get-copy p { color: var(--muted); margin: 0; }
.dark-card { background: var(--night); color: var(--on-night); border-color: var(--night); }
.dark-card .eyebrow, .dark-card .get-copy p { color: var(--muted-night); }
.deck { position: relative; flex: 1; min-height: 440px; margin-top: 18px; perspective: 1400px; }
.page.page-img { padding: 0; overflow: hidden; width: min(300px, 76%); height: 360px; margin: 0; border: 1px solid #e7e1d3; }
.page-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.page-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.deck-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.deck-link { font: 600 13px/1 var(--sans); color: var(--green); text-underline-offset: 3px; }
.page { position: absolute; left: 50%; top: 14px; width: min(360px, 88%); height: 290px; translate: -50% 0; background: #fff; border-radius: 12px; padding: 20px 22px; box-shadow: 0 1px 0 var(--line), 0 30px 50px -30px rgba(24,32,27,.45);
        transform-origin: 50% 100%; transition: transform .8s var(--ease-out), opacity .5s, box-shadow .5s; font-size: 13px; overflow: hidden; }
.page[data-pos="0"] { z-index: 3; transform: none; }
.page[data-pos="1"] { z-index: 2; transform: translate(-22px, 14px) rotate(-5deg) scale(.96); }
.page[data-pos="2"] { z-index: 1; transform: translate(24px, 24px) rotate(6deg) scale(.92); }
.deck:hover .page[data-pos="0"] { transform: translateY(-10px); box-shadow: 0 1px 0 var(--line), 0 40px 60px -30px rgba(24,32,27,.55); }
.deck:hover .page[data-pos="1"] { transform: translate(-70px, 18px) rotate(-10deg) scale(.95); }
.deck:hover .page[data-pos="2"] { transform: translate(72px, 28px) rotate(11deg) scale(.91); }
.page.leaving { animation: leave .55s var(--ease) forwards; }
@keyframes leave { to { transform: translate(-10px, -60px) rotateX(55deg) scale(.9); opacity: 0; } }
.deck-btn { position: relative; display: inline-flex; gap: 8px; align-items: center; font: 600 13.5px/1 var(--sans); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; box-shadow: 0 10px 24px -16px rgba(24,32,27,.5); transition: border-color .2s, transform .3s var(--ease-out); }
.deck-btn:hover { border-color: var(--green); transform: translateY(-2px); }
.deck-btn em { font: 11px/1 var(--mono); font-style: normal; color: var(--muted); }
.peek { position: relative; margin-top: 18px; flex: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--night-line); background: #0f1914; display: flex; flex-direction: column; }
.peek-head { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--night-line); font: 10.5px/1 var(--mono); color: var(--muted-night); }
.peek-head i { width: 8px; height: 8px; border-radius: 50%; background: rgba(214,232,220,.18); }
.peek-head span { margin-left: 10px; padding: 5px 10px; border-radius: 6px; background: rgba(214,232,220,.06); }
.peek-body { position: relative; flex: 1; min-height: 300px; overflow: hidden; --lx: 30%; --ly: 40%; }
.pk-shot, .pk-zoom img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; }
/* Blurred at rest so the sharp view is only inside the lens; scaled a touch so blur never shows soft edges. */
.pk-shot { opacity: .7; filter: blur(3.5px) saturate(.8); transform: scale(1.03); }
.pk-zoom { position: absolute; inset: 0; -webkit-clip-path: circle(80px at var(--lx) var(--ly)); clip-path: circle(80px at var(--lx) var(--ly)); }
.pk-zoom img { transform-origin: var(--lx) var(--ly); transform: scale(1.6); }
.lens { position: absolute; left: var(--lx); top: var(--ly); width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(127,214,154,.7);
        box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 50px rgba(127,214,154,.22), inset 0 0 30px rgba(127,214,154,.12); }
.lens::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 30px; height: 6px; border-radius: 3px; background: rgba(127,214,154,.7); transform: rotate(45deg); }
.peek-cta { margin: 0; padding: 14px 16px; border-top: 1px solid var(--night-line); font-size: 14px; color: var(--on-night); }
.peek-cta .hint-fine { color: var(--muted-night); }

/* ================================================================ PRICING */
.pricing { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.steps li::before { counter-increment: st; content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 700 14px/1 var(--mono); color: var(--green); background: rgba(47,93,58,.1); }
.steps b { font-size: 17px; }
.steps span { color: var(--muted); font-size: 15px; }
.price-card { position: relative; border-radius: 28px; padding: 32px 34px 28px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 60px 100px -60px rgba(24,32,27,.55); max-width: 520px; justify-self: end; width: 100%; }
.price-card .ring { position: absolute; inset: -1px; border-radius: 28px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angle, 0deg), var(--green), var(--leaf), var(--gold), transparent 35%, transparent 65%, var(--green));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.plan-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 20px; }
.plan-toggle .thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--green); box-shadow: 0 8px 18px -10px rgba(47,93,58,.9); transition: transform .5s var(--ease-out); }
.plan-toggle[data-plan="yearly"] .thumb { transform: translateX(100%); }
.plan-toggle button { position: relative; z-index: 1; border: 0; background: transparent; padding: 11px 8px; border-radius: 999px; font-weight: 650; font-size: 14.5px; color: var(--muted); cursor: pointer; transition: color .35s; display: inline-flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-toggle button[aria-checked="true"] { color: #fff; }
.plan-toggle em { font: 600 10px/1 var(--mono); font-style: normal; padding: 4px 6px; border-radius: 999px; background: rgba(232,197,71,.35); color: #6e5405; transition: background .35s, color .35s; }
.plan-toggle button[aria-checked="true"] em { background: var(--gold); color: #3a2d00; }
.price { display: flex; align-items: flex-start; gap: 4px; margin: 4px 0 2px; }
.price .cur { font-size: 30px; font-weight: 650; margin-top: 12px; color: var(--muted); }
.price b { font-size: 88px; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { align-self: flex-end; margin: 0 0 14px 6px; color: var(--muted); font-size: 18px; }
.billed { margin: 0; font: 12px/1.5 var(--mono); color: var(--muted); }
.price-note { color: var(--muted); margin: 6px 0 20px; min-height: 1.6em; }
.price-note b { color: var(--text); }
.price-card .features { list-style: none; margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.price-card .features li, .get-card li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; }
.price-card .features li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; background: rgba(47,93,58,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5d3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.price-card .btn { width: 100%; padding: 18px; font-size: 17px; }
.assure { display: flex; justify-content: center; gap: 6px 16px; flex-wrap: wrap; margin: 14px 0 0; padding: 0; list-style: none; font: 11.5px/1.3 var(--mono); color: var(--muted); }
.assure li::before { content: "✓ "; color: var(--green); }
.price-card .fine { text-align: center; font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.copy-btn { font: 12.5px/1 var(--mono); color: var(--green); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }

/* ================================================================ FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-grid .section-head { display: block; margin: 0; position: sticky; top: 110px; }
.faq-grid .section-head p { margin-top: 18px; }
.faq-item { position: relative; border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item::before { content: ""; position: absolute; left: -18px; top: 26px; width: 3px; height: 22px; border-radius: 2px; background: var(--green); transform: scaleY(0); transition: transform .4s var(--ease-out); }
.faq-item.open::before { transform: scaleY(1); }
.faq-item h3 { margin: 0; }
.faq-item h3 button { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 0; background: none; border: 0; text-align: left; font-size: 19px; font-weight: 620; letter-spacing: -.012em; color: var(--text); cursor: pointer; transition: color .25s; }
.faq-item h3 button:hover { color: var(--green); }
.faq-item h3 button::after { content: ""; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 11px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 11px no-repeat, var(--paper-2); transition: transform .5s var(--ease-out), background-color .3s; }
.faq-item.open h3 button::after { transform: rotate(135deg); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.faq-panel > div { overflow: hidden; min-height: 0; }
.faq-panel p { margin: 0 0 24px; color: var(--muted); max-width: 44em; opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .55s var(--ease-out); }
.faq-item.open .faq-panel { grid-template-rows: 1fr; }
.faq-item.open .faq-panel p { opacity: 1; transform: none; transition-delay: .08s; }

/* ================================================================ FIELD PHOTOS */
.photos { padding: 64px 0 56px; overflow: hidden; --sx: 0; }
.photos-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
.photos-head .eyebrow { grid-column: 1 / -1; }
.photos-head h2 { margin: 14px 0 0; font-size: clamp(28px, 3vw, 44px); text-wrap: balance; }
.photos-head p { margin: 0; color: var(--muted); font-size: 17px; max-width: 30em; }
.reel { position: relative; margin-top: 44px; padding: 26px 0 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.reel-move { transform: translateX(calc(var(--sx) * -160px)); will-change: transform; }
.reel-track { display: flex; gap: 34px; width: max-content; margin: 0; padding: 0 17px; list-style: none; animation: reel 80s linear infinite; }
.reel:hover .reel-track, .reel:focus-within .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.shot { flex: none; width: clamp(210px, 19vw, 270px); }
.shot figure { position: relative; margin: 0; padding: 10px 10px 0; background: #fffdf8; border-radius: 4px; box-shadow: 0 1px 0 rgba(24,32,27,.06), 0 26px 44px -26px rgba(24,32,27,.55); transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.shot figure::before { content: ""; position: absolute; left: 50%; top: -11px; width: 74px; height: 22px; transform: translateX(-50%) rotate(var(--tape, -3deg)); background: rgba(232,197,71,.42); box-shadow: 0 1px 2px rgba(24,32,27,.08); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 660; object-fit: cover; border-radius: 2px; filter: saturate(.88) sepia(.08); transition: filter .6s; }
.shot figcaption { display: flex; flex-direction: column; gap: 3px; padding: 11px 4px 14px; font-size: 14px; font-weight: 600; color: #2c342f; }
.shot figcaption span { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.shot:hover figure { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 1px 0 rgba(24,32,27,.06), 0 40px 60px -30px rgba(24,32,27,.6); }
.shot:hover img { filter: none; }
.shot.t1 { --r: -2.4deg; --y: 6px; --tape: -4deg; }
.shot.t2 { --r: 1.8deg; --y: -8px; --tape: 3deg; }
.shot.t3 { --r: -1.2deg; --y: 10px; --tape: -2deg; }
.shot.t4 { --r: 2.6deg; --y: -4px; --tape: 5deg; }
.shot.t5 { --r: -2deg; --y: 4px; --tape: -5deg; }
.shot.t6 { --r: 1.4deg; --y: -10px; --tape: 2deg; }

/* ================================================================ DUSK + FINAL + FOOTER */
.dusk { position: relative; z-index: 1; height: 280px; padding: 0; overflow-x: clip; margin-bottom: -1px; background: linear-gradient(180deg, var(--paper) 0 60%, var(--night) 60%); background-repeat: no-repeat; --set: 0; }
.dusk-sky { position: absolute; left: 0; right: 0; bottom: 40%; height: 520px; overflow: hidden; pointer-events: none; }
.dusk-sky::before { content: ""; position: absolute; left: 50%; bottom: -60px; width: min(1500px, 160vw); height: 300px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(244,180,80,.35), rgba(240,170,80,.13) 55%, transparent); opacity: calc(1 - var(--set) * .5); }
.dusk-sun { position: absolute; left: 50%; bottom: 0; width: min(530px, 84vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, calc(30% + var(--set) * 36%)); background: radial-gradient(circle, #fff6d2 0%, #fde39a 12%, #f6c14a 26%, rgba(242,166,62,.5) 40%, rgba(240,160,70,.2) 54%, transparent 70%); opacity: calc(1 - var(--set) * .35); filter: saturate(1.1); }
.dusk-sun::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; box-shadow: 0 0 80px 24px rgba(253,220,130,.3); }
.dusk .ridge { position: absolute; left: -2%; width: 104%; max-width: none; height: 86px; bottom: calc(40% - 2px); }
.dusk .ridge path { fill: var(--night); }
.dusk-ground { position: absolute; left: 0; right: 0; top: 60%; bottom: -2px; background: var(--night); }
.dusk-ground::before { display: none; content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,197,71,.45) 25%, #fff3c4 50%, rgba(232,197,71,.45) 75%, transparent); box-shadow: 0 0 18px rgba(232,197,71,.5); opacity: calc(1 - var(--set) * .6); }
.final { text-align: center; padding: 30px 0 120px; overflow: hidden; margin-top: -1px; }
.final .mark { width: 72px; height: 72px; margin: 0 auto 26px; filter: drop-shadow(0 18px 40px rgba(232,197,71,.25)); }
.final .eyebrow { justify-content: center; }
.final h2 { max-width: 15em; margin: 16px auto 18px; }
.final p { color: var(--muted-night); max-width: 34em; margin: 0 auto 34px; font-size: 18px; }
.final .cta-row { justify-content: center; }
footer { background: var(--night); color: var(--muted-night); padding: 0 0 40px; font-size: 14px; }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-top: 40px; }
.foot .logo { color: var(--on-night); margin-bottom: 16px; }
.foot h4 { font: 600 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--on-night); margin: 6px 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a, .legal-line a { text-decoration: none; transition: color .2s; }
.foot a:hover, .legal-line a:hover { color: var(--on-night); }
.foot p { margin: 0; }
.legal-line { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--night-line); display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font: 11.5px/1.6 var(--mono); }

.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 0; background: rgba(12,20,16,.85); color: var(--on-night); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .35s, transform .45s var(--ease-out), background .25s; --progress: 0; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green); transform: translateY(-3px); }
.to-top svg { width: 50px; height: 50px; }
.to-top .track { fill: none; stroke: rgba(214,232,220,.16); stroke-width: 2.5; }
.to-top .prog { fill: none; stroke: var(--leaf); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: calc(132 * (1 - var(--progress))); transform: rotate(-90deg); transform-origin: 24px 24px; }

/* ================================================================ LEGAL + 404 */
.legal-hero { position: relative; overflow: hidden; padding: 150px 0 110px; }
.legal-hero .eyebrow { color: var(--gold); }
.legal-hero h1 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -.04em; line-height: 1.02; margin: 16px 0 12px; font-weight: 720; }
.legal-hero .updated { font: 12.5px/1.4 var(--mono); color: var(--muted-night); margin: 0; }
.legal-glow { position: absolute; left: 50%; bottom: -260px; width: 760px; height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(244,196,80,.42), rgba(232,160,70,.14) 40%, transparent 70%); pointer-events: none; }
.legal-ridge { position: absolute; left: -2%; bottom: -1px; width: 104%; max-width: none; height: 90px; }
.legal-ridge path { fill: var(--paper); }
.legal-body { padding: 40px 0 110px; }
.legal-grid { display: grid; grid-template-columns: 230px minmax(0, 700px); gap: 70px; justify-content: center; }
.toc { position: sticky; top: 100px; align-self: start; display: grid; gap: 10px; }
.toc .k { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 2px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.current { color: var(--green); border-left-color: var(--green); font-weight: 600; }
.toc-other { margin-top: 10px; font-size: 13.5px; color: var(--green); font-weight: 600; text-decoration: none; }
.legal article { font-size: 16.5px; line-height: 1.7; }
.legal article h2 { font-size: 23px; letter-spacing: -.015em; margin: 48px 0 12px; scroll-margin-top: 96px; }
.legal article h3 { font-size: 17px; margin: 24px 0 6px; }
.legal article p, .legal article li { color: #3a433d; }
.legal article li { margin: 7px 0; }
.legal article ul { padding-left: 20px; }
.legal article a { color: var(--green); }
.legal .callout { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 20px 58px; margin: 0 0 12px; box-shadow: 0 24px 50px -40px rgba(24,32,27,.5); }
.legal .callout::before { content: ""; position: absolute; left: 20px; top: 22px; width: 24px; height: 24px; border-radius: 7px; background: #16291d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.3 13.6a4.7 4.7 0 0 1 9.4 0z' fill='%23e8c547'/%3E%3Cpath d='M3.8 13.6h16.4M6.4 16.9h11.2' stroke='%23eef4ef' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.legal-footer .legal-line { margin-top: 0; border-top: 0; padding-top: 28px; }
.nf-body { background: var(--night); }
.notfound { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 40px 22px; }
.nf-sun { position: absolute; left: 50%; bottom: 60px; width: min(620px, 90vw); aspect-ratio: 1; transform: translate(-50%, 45%); border-radius: 50%; background: radial-gradient(circle, #fde7a6 0%, #f4c450 22%, rgba(240,170,64,.35) 42%, transparent 70%); }
.nf-ridge { position: absolute; left: -2%; bottom: 0; width: 104%; max-width: none; height: 180px; }
.nf-ridge path { fill: #0d100a; }
.nf-copy { position: relative; z-index: 1; max-width: 560px; margin-bottom: 140px; }
.notfound .eyebrow { justify-content: center; color: var(--gold); }
.notfound h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -.04em; line-height: 1.02; margin: 18px 0 14px; }
.notfound p { color: var(--muted-night); margin: 0 auto 30px; font-size: 18px; }
.notfound .cta-row { justify-content: center; }
@media (max-width: 980px) { .legal-grid { grid-template-columns: 1fr; gap: 20px; } .toc { position: static; } .toc ol { display: none; } }

/* ================================================================ PORTAL PAGES */
.portal-tag { font: 600 10px/1 var(--mono); letter-spacing: .1em; padding: 5px 7px; border-radius: 6px; background: rgba(232,197,71,.16); color: var(--gold); }
.portal-hero { padding: 130px 0 30px; }
.portal-title { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.034em; margin: 16px 0 34px; font-weight: 710; }
.portal #pipeline { padding: 20px 0 100px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); margin-bottom: 28px; }
.stat { padding: 24px 18px 22px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--night-line); }
.stat b { display: block; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.035em; font-weight: 690; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font: 11.5px/1.4 var(--mono); color: var(--muted-night); }
.watch { display: grid; gap: 10px; }
.watch .k { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.watch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.watch li { font-size: 14px; color: #c9d6cd; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--night-line); }
.watch li b { color: var(--on-night); font-weight: 620; }
.calls-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.progress { font: 13px/1 var(--mono); color: var(--muted); }
.progress b { color: var(--text); }
.calls { display: grid; gap: 10px; }
.call-row { display: grid; grid-template-columns: 1fr 230px; gap: 24px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color .3s; }
.call-row.worked { border-color: rgba(47,93,58,.35); }
.call-row.worked .title b { color: var(--muted); }
.call-row .title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.call-row .title b { font-size: 17px; }
.call-row p { margin: 6px 0; color: #3c4540; font-size: 15px; }
.call-row .reach { display: flex; gap: 6px 14px; flex-wrap: wrap; font: 12.5px/1.5 var(--mono); color: var(--muted); }
.call-row .reach a { color: var(--green); text-decoration: none; }
.call-row .status { display: grid; gap: 6px; }
.call-row .k { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.call-row select { font-weight: 600; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--text); cursor: pointer; }
.call-row small { font: 11px/1 var(--mono); color: var(--muted); min-height: 11px; }
.archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.archive a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s, transform .3s var(--ease-out); }
.archive a:hover { border-color: var(--green); transform: translateX(4px); }
.archive span { font: 12px/1 var(--mono); color: var(--muted); }

/* ================================================================ RESPONSIVE */
section.hero-site { padding: 0; }
#pipeline { padding-top: 24px; }
@media (max-width: 1200px) { .survey-label, .survey-dim { display: none; } .hero-media, .hero-overlay { left: 52%; } .hero-copy { max-width: 500px; } .m1 { left: 22%; } }
@media (max-width: 980px) {
  .hero-site { min-height: 0; }
  .hero-site::before { -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
  .hero-inner { align-items: flex-start; padding: 112px 0 360px; }
  .hero-copy { max-width: 640px; }
  .hero-media, .hero-overlay { left: 0; top: auto; bottom: 0; height: 380px; }
  .hero-media { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 78%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero-photo { object-position: 62% 85%; }
  .survey, .survey-label, .m2 { display: none; }
  .m1 { left: auto; right: 6%; top: 36%; }
  .m3 { left: 8%; top: 62%; }
}
@media (max-width: 640px) {
  .hero-site h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero-site .lede { font-size: 17px; }
  .hero-inner { padding-bottom: 320px; }
  .hero-media, .hero-overlay { height: 330px; }
  .m1 { display: none; }
  .m3 { left: 16px; }
  .mark-tag b { font-size: 13px; }
  .hero-site .cta-row .btn { flex: 1 1 auto; }
}
@media (max-width: 1080px) {
  .nav ul { gap: 22px; }
  .ex-tools { grid-template-columns: 1fr 180px; }
  .ex-tools .timing { grid-column: 1 / -1; }
  .lane { grid-template-columns: 220px 1fr; }
}
@media (max-width: 980px) {
  section { padding: 104px 0; }
  .ex-main, .get, .pricing, .calc, .section-head, .faq-grid, .map-canvas { grid-template-columns: 1fr; }
  .hud { border-left: 0; border-top: 1px solid var(--night-line); }
  .paper.race { margin-top: -6vh; }
  .price-card { justify-self: start; }
  .faq-grid { gap: 36px; }
  .faq-grid .section-head { position: static; }
  .funnel, .stats { grid-template-columns: repeat(2, 1fr); }
  .funnel li:nth-child(3) { padding-left: 0; }
  .funnel li:nth-child(3)::before { display: none; }
  .funnel li:nth-child(n+3) { border-top: 1px solid var(--night-line); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--night-line); }
  .plist { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > div:first-child { grid-column: 1 / -1; }
  .nav ul { display: none; }
  .dawn { height: 84vh; min-height: 560px; }
  .race { height: 300vh; }
  .lane { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .lane .track { grid-column: 1 / -1; grid-row: 2; }
  .lane .pill { grid-column: 2; grid-row: 1; }
  .race-foot { grid-template-columns: auto 1fr; }
  .race-foot .stake { grid-column: 1 / -1; text-align: left; border-left: 0; padding-left: 0; display: flex; gap: 10px; align-items: baseline; }
  .race-foot .stake b { font-size: 18px; }
  .legend .kbd-help { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 84px 0; }
  .ex.landing .filters { justify-content: flex-start; order: 3; flex-basis: 100%; }
  .hud-facts { grid-template-columns: 1fr; }
  .lead { transform: none; }
  .proof { border-radius: 16px; }
  .ex-tools { grid-template-columns: 1fr; }
  .ex-map-top { flex-wrap: wrap; gap: 8px; }
  .tools { margin-left: auto; }
  .tip { max-width: 190px; font-size: 13px; }
  .calc .inputs, .calc .result, .price-card, .get-card { padding: 22px; }
  .presets { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .preset { padding: 10px; }
  .preset span { display: none; }
  .price b { font-size: 70px; }
  .foot { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .race-sticky { padding-top: 72px; min-height: 0; }
  .race-head { margin-bottom: 10px; }
  .photos { padding-top: 48px; }
  .photos-head { grid-template-columns: 1fr; row-gap: 12px; }
  .reel { margin-top: 26px; }
  .reel-track { gap: 22px; animation-duration: 60s; }
  .shot { width: 200px; }
  .race-head h2 { font-size: 24px; }
  .race-foot .stake small { display: none; }
  .race-board { padding: 6px 8px 10px; border-radius: 18px; }
  .race-steps button { font-size: 0; padding: 6px 4px; text-align: center; }
  .race-steps button span { font-size: 11px; margin-right: 0; }
  .scene-wrap { min-height: 150px; }
  .scene-wrap { height: 262px; max-height: 262px; min-height: 0; flex: none; }
  .scene { height: calc(100% - 60px); }
  .captions { left: 0; right: 0; top: auto; bottom: 0; height: 60px; background: var(--card); }
  .cap { inset: 0; max-width: none; padding: 9px 4px 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; line-height: 1.4; }
  .scene-clock { top: 10px; right: 10px; padding: 6px 9px; }
  .scene-clock b { font-size: 17px; }
  .who small { font-size: 12px; }
  .race-foot { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .lead-meter { border-right: 0; padding-right: 0; display: flex; gap: 10px; align-items: baseline; }
  .lead-meter b { font-size: 20px; }
  .verdict { font-size: 14.5px; }
  .dawn-stake { font-size: 15.5px; }
  .cover b { font-size: 30px; }
  .call-row { grid-template-columns: 1fr; gap: 12px; }
  .member { grid-template-columns: 1fr; }
  .member .reach { justify-items: start; }
  .pdetail .facts div { grid-template-columns: 1fr; gap: 0; }
  .to-top { right: 14px; bottom: 14px; }
}
@media (max-width: 1400px) and (min-width: 981px) {
  .race-foot { padding-right: 64px; }
}
@media (max-height: 640px) and (min-width: 641px) {
  .race { height: auto; }
  .race-sticky { position: relative; height: auto; min-height: 0; padding: 110px 0 40px; }
  .race-sticky > .wrap { height: auto; }
  .scene-wrap { height: 300px; }
}
@media (hover: none) {
  .spot::before, .reticle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .split .w > span { transform: none; }
  .field dd { opacity: 1; transform: none; filter: none; }
  .dot { opacity: 1; }
  .race { height: auto; }
  .reel { overflow-x: auto; }
  .reel-move { transform: none; }
  .race-sticky { position: relative; height: auto; padding: 100px 0; }
  .race-sticky > .wrap { height: auto; }
}
@media print {
  .nav, .scroll-cue, .dawn, .dusk, .to-top, .race { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* portal sign-in */
.login .nf-sun { bottom: -120px; }
.login-card { position: relative; z-index: 1; width: min(420px, 100%); display: grid; gap: 8px; text-align: left; padding: 32px; border-radius: 24px; background: rgba(18,21,15,.88); border: 1px solid var(--night-line); box-shadow: 0 50px 90px -40px rgba(0,0,0,.8); color: var(--on-night); }
.login-card .eyebrow { justify-content: flex-start; color: var(--gold); }
.login-card h1 { font-size: 30px; letter-spacing: -.02em; margin: 6px 0 0; }
.login-card p { margin: 0 0 10px; color: var(--muted-night); font-size: 15px; }
.login-card label { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-night); margin-top: 8px; }
.login-card input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--night-line); background: rgba(243,240,230,.05); color: var(--on-night); font-size: 16px; }
.login-card input:focus { outline: none; border-color: rgba(143,211,160,.6); box-shadow: 0 0 0 4px rgba(143,211,160,.12); }
.login-card .btn { margin-top: 14px; width: 100%; }
.login-card small { color: var(--muted-night); font-size: 12.5px; text-align: center; margin-top: 6px; }
.login-card small a { color: var(--leaf); }
.login-error { color: #f3c9a6 !important; background: rgba(214,120,60,.14); border: 1px solid rgba(214,120,60,.35); padding: 10px 12px; border-radius: 10px; }