/* SWRainAlert - marketing site
   Palette: storm navy ground, radar cyan + warning amber accents.
   Single stylesheet, no framework, no build step. */

:root {
  --ink-900:#050a14;
  --ink-800:#0a1220;
  --ink-700:#101b2d;
  --ink-600:#16243a;
  --line:#1f3149;
  --line-soft:#182740;
  --text:#e8eef7;
  --text-dim:#9fb0c7;
  --text-faint:#6c7f99;
  --cyan:#38d9e6;
  --cyan-deep:#0f8fa3;
  --amber:#ffb020;
  --red:#ff5c5c;
  --green:#3ddc97;
  --radius:14px;
  --radius-lg:22px;
  --maxw:1160px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.8);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--ink-900);color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:650}
h1{font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--text-dim);max-width:62ch}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
section{position:relative;padding:clamp(64px,9vw,128px) 0}
.eyebrow{
  font:600 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan);opacity:.6}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#04121a;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
  background:rgba(5,10,20,.72);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.site-header.scrolled{border-bottom-color:var(--line-soft);background:rgba(5,10,20,.94)}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--text)}
.brand:hover{text-decoration:none}
.brand img,.brand svg{width:28px;height:28px;flex:none}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{color:var(--text-dim);font-size:.93rem;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text);text-decoration:none}
.nav-links .btn-primary{color:#02131a}
.nav-toggle{display:none;background:none;border:0;color:var(--text);padding:8px;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:100px;
  font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));color:#02131a;box-shadow:0 8px 30px -8px rgba(56,217,230,.55)}
.btn-primary:hover{box-shadow:0 14px 40px -10px rgba(56,217,230,.7)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(56,217,230,.07)}
.btn-lg{padding:16px 32px;font-size:1.02rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(56px,7vw,96px);overflow:hidden}
#rain-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  pointer-events:none;opacity:.9;
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--cyan),#8be9f5 55%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-note{font-size:.86rem;color:var(--text-faint);margin-top:22px}
.hero-note strong{color:var(--text-dim);font-weight:600}

/* ---------- alert card (hero visual) ---------- */
.alert-card{
  background:linear-gradient(165deg,var(--ink-700),var(--ink-800));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.alert-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.pill{
  font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;border:1px solid;white-space:nowrap;
}
.pill-breached{color:var(--red);border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.1)}
.pill-breached::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:7px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,92,92,.6)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(255,92,92,0)}}
.site-name{font-weight:650;font-size:1.05rem}
.site-meta{font:.78rem/1.4 var(--mono);color:var(--text-faint)}
.readings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.reading{background:rgba(255,255,255,.028);border:1px solid var(--line-soft);border-radius:12px;padding:14px}
.reading .src{font:600 .68rem/1 var(--mono);letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase}
.reading .val{font-size:1.85rem;font-weight:680;letter-spacing:-.03em;margin-top:7px;font-variant-numeric:tabular-nums}
.reading .val.hi{color:var(--cyan)}
.reading .unit{font-size:.9rem;color:var(--text-faint);font-weight:500}
.divergence{
  display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--amber);
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.22);
  border-radius:10px;padding:11px 13px;line-height:1.5;
}
.divergence svg{width:15px;height:15px;flex:none;margin-top:2px}
.deadline{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
}
.deadline .lbl{font-size:.82rem;color:var(--text-faint)}
.deadline .clock{font:700 1.35rem/1 var(--mono);color:var(--amber);font-variant-numeric:tabular-nums}

/* ---------- trust strip ---------- */
.strip{border-block:1px solid var(--line-soft);background:var(--ink-800);padding:26px 0}
.strip-inner{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;
  font:.78rem/1 var(--mono);letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase}
.strip-inner span{display:flex;align-items:center;gap:9px}
.strip-inner svg{width:15px;height:15px;color:var(--cyan);flex:none}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px;
  transition:border-color .25s,transform .25s;
}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card h3{margin-bottom:.45em}
.card p{color:var(--text-dim);font-size:.95rem;margin:0}
.icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(56,217,230,.1);border:1px solid rgba(56,217,230,.22);color:var(--cyan);
}
.icon svg{width:21px;height:21px}
.card.warn .icon{background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.24);color:var(--amber)}

/* ---------- section header ---------- */
.sec-head{max-width:730px;margin-bottom:52px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}

/* ---------- explainers ---------- */
.explainer{
  background:var(--ink-800);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:28px;position:relative;overflow:hidden;
}
.explainer figcaption{font-size:.86rem;color:var(--text-faint);margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.dash{stroke-dasharray:5 5}
.sm-node rect{transition:fill .45s,stroke .45s}
.sm-node text{transition:fill .45s}
.sm-node.on rect{fill:rgba(56,217,230,.18);stroke:var(--cyan)}
.sm-node.on text{fill:#e8eef7}
.sm-node.breach.on rect{fill:rgba(255,92,92,.2);stroke:var(--red)}
.step-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.step-btn{
  font:600 .78rem/1 var(--font);padding:9px 14px;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-soft);color:var(--text-dim);transition:.2s;
}
.step-btn:hover{border-color:var(--cyan);color:var(--text)}
.step-btn[aria-pressed=true]{background:rgba(56,217,230,.14);border-color:var(--cyan);color:var(--text)}

/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split + .split{margin-top:clamp(56px,8vw,104px)}
.split.rev .split-media{order:-1}
.checklist{list-style:none;padding:0;margin:24px 0 0}
.checklist li{position:relative;padding-left:30px;margin-bottom:13px;color:var(--text-dim);font-size:.97rem}
.checklist li::before{
  content:"";position:absolute;left:0;top:.4em;width:16px;height:16px;border-radius:50%;
  background:rgba(61,220,151,.14);border:1px solid rgba(61,220,151,.4);
}
.checklist li::after{
  content:"";position:absolute;left:5.4px;top:.68em;width:4px;height:8px;
  border:solid var(--green);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}
.checklist li strong{color:var(--text);font-weight:600}

/* ---------- pricing ---------- */
/* Four tiers since the repricing (Alerts, Complete, Builder, Firm). Fixed
   at 3 columns this left one tile stranded alone on a second row. */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.tier{
  background:linear-gradient(175deg,var(--ink-700),var(--ink-800));border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:28px 22px;display:flex;flex-direction:column;position:relative;
}
.tier.featured{border-color:rgba(56,217,230,.45);box-shadow:0 24px 70px -30px rgba(56,217,230,.5)}
.tier-badge{
  position:absolute;top:-11px;left:28px;background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));
  color:#02131a;font:700 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px;
}
.tier h3{font-size:1.05rem;color:var(--text-dim);font-weight:600;letter-spacing:0}
.price{font-size:3rem;font-weight:700;letter-spacing:-.04em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.price span{font-size:1rem;color:var(--text-faint);font-weight:500;letter-spacing:0}
.tier .blurb{font-size:.92rem;color:var(--text-dim);min-height:3.4em}
.tier ul{list-style:none;padding:0;margin:22px 0 28px;flex:1}
.tier li{font-size:.92rem;color:var(--text-dim);padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--line-soft)}
.tier li:first-child{border-top:0}
.tier li::before{content:"\2713";position:absolute;left:0;color:var(--cyan);font-weight:700}
.tier li.muted{color:var(--text-faint)}
.tier li.muted::before{content:"\2013";color:var(--text-faint)}
.tier .btn{width:100%;justify-content:center}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800)}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.93rem}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font:600 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);background:rgba(255,255,255,.02)}
tbody tr:last-child td{border-bottom:0}
td{color:var(--text-dim)}
td strong{color:var(--text)}
.tag{display:inline-block;font:600 .68rem/1.4 var(--mono);padding:4px 9px;border-radius:100px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag-ok{color:var(--green);background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.3)}
.tag-part{color:var(--amber);background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.28)}
.tag-no{color:var(--text-faint);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.yes{color:var(--green);font-weight:700}
.no{color:var(--text-faint)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;padding:22px 40px 22px 0;font-weight:600;font-size:1.03rem;
  list-style:none;position:relative;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border:solid var(--text-faint);border-width:0 1.8px 1.8px 0;
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--text-dim);padding:0 20px 22px 0;margin:0;max-width:80ch}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,rgba(56,217,230,.1),rgba(15,143,163,.04));
  border-block:1px solid var(--line-soft);text-align:center;
}
.cta-band .lead{margin-inline:auto}
.cta-band .btn-row{justify-content:center}

/* ---------- honesty note ---------- */
.honesty{
  border-left:2px solid var(--amber);background:rgba(255,176,32,.05);
  padding:18px 22px;border-radius:0 12px 12px 0;font-size:.92rem;color:var(--text-dim);
}
.honesty strong{color:var(--amber)}
.honesty p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-800);border-top:1px solid var(--line-soft);padding:64px 0 32px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:44px}
.foot-grid h4{font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:10px}
.foot-grid a{color:var(--text-dim)}
.foot-grid a:hover{color:var(--cyan);text-decoration:none}
.foot-blurb{color:var(--text-faint);max-width:34ch;font-size:.88rem}
.foot-bottom{border-top:1px solid var(--line-soft);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--text-faint);font-size:.84rem}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr;gap:40px}
  .split.rev .split-media{order:0}
  .g4{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .tiers{grid-template-columns:1fr;max-width:460px}
  .nav-links{
    position:fixed;inset:68px 0 auto;background:var(--ink-800);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 22px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .nav-links .btn{margin-top:14px;justify-content:center;border-bottom:0}
  .nav-toggle{display:block;margin-left:auto}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .readings{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- app screenshots ----------
   Real Flutter goldens from the Android client, cropped only. The app's own
   accent is lime; that is deliberate here - these read as product, not as more
   marketing art. */
.phones{display:flex;gap:34px;align-items:flex-start;justify-content:center}
.phone{
  flex:1 1 0;max-width:310px;background:#05080f;border:1px solid var(--line);
  border-radius:26px;padding:9px;box-shadow:var(--shadow);position:relative;
}
.phone::before{
  content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:52px;height:5px;border-radius:3px;background:#1f3149;z-index:2;
}
.phone img{width:100%;border-radius:18px;display:block}
.phone figcaption{
  font-size:.78rem;color:var(--text-faint);text-align:center;
  padding:12px 4px 2px;line-height:1.45;
}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.shot{
  background:var(--ink-800);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;margin:0;
}
.shot img{width:100%;height:300px;object-fit:cover;object-position:top center;border-bottom:1px solid var(--line-soft)}
.shot figcaption{padding:18px 20px;font-size:.9rem;color:var(--text-dim)}
.shot figcaption strong{display:block;color:var(--text);font-weight:600;margin-bottom:5px}
@media (max-width:860px){
  .shot-grid{grid-template-columns:1fr}
  .shot img{height:auto}
}
@media (max-width:520px){
  .phones{flex-direction:column;align-items:center}
  .phone{max-width:260px;width:100%}
}

/* ---------- legal pages ---------- */
.legal{max-width:760px}
.legal h2{font-size:1.4rem;margin-top:2.2em;padding-top:1.2em;border-top:1px solid var(--line-soft)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4em}
.legal h3{font-size:1.03rem;margin-top:1.8em;color:var(--text)}
.legal p,.legal li{color:var(--text-dim)}
.legal ul{padding-left:20px}
.legal li{margin-bottom:9px}
.legal .updated{font:600 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.legal table{min-width:0}

/* ---------- hero demo card ---------- */
.pill-dry{color:var(--text-faint);border-color:var(--line);background:rgba(255,255,255,.03)}
.pill-raining{color:var(--cyan);border-color:rgba(56,217,230,.4);background:rgba(56,217,230,.1)}
.pill-approaching{color:var(--amber);border-color:rgba(255,176,32,.42);background:rgba(255,176,32,.11)}
.pill-dry::before,.pill-raining::before,.pill-approaching::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:middle;
}
.alert-card .spark{width:100%;height:78px;display:block;margin-top:2px}
.spark-cap{
  display:flex;justify-content:space-between;gap:12px;margin:6px 0 16px;
  font:.7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);
}
.whyit{
  margin:12px 0 0;padding:12px 14px;border-radius:10px;font-size:.84rem;line-height:1.5;
  color:var(--text-dim);background:rgba(255,255,255,.03);border:1px solid var(--line-soft);
  border-left:2px solid var(--cyan);
}
.alert-card [hidden]{display:none!important}
.reading .val{transition:color .4s}

/* ---------- inset radar panel (hero card) ---------- */
.radar-panel{
  margin:0 0 18px;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);background:#050a14;
}
.radar-panel canvas{display:block;width:100%;height:132px}
.radar-panel figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:8px 12px;font:.68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);background:linear-gradient(transparent,rgba(5,10,20,.85));
}
.radar-panel .live{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 0 rgba(56,217,230,.7);animation:livepulse 2.2s infinite;
}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(56,217,230,.55)}
  70%{box-shadow:0 0 0 7px rgba(56,217,230,0)}
  100%{box-shadow:0 0 0 0 rgba(56,217,230,0)}
}

/* ======================================================================
   Motion layer
   Everything below is progressive: markup reads complete without it, and
   prefers-reduced-motion collapses it to static (see the block at the end).
   Scroll position reaches CSS as --sy (px) on <html>, set once per frame.
   ====================================================================== */

/* alternate sections share one class now, and carry a faint radar-grid
   texture that drifts against the scroll so the page has depth without
   another canvas */
.sec-alt{background:var(--ink-800);border-block:1px solid var(--line-soft);overflow:hidden}
.sec-alt::before{
  content:"";position:absolute;inset:-120px 0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(56,217,230,.16) 1px,transparent 1.6px);
  background-size:34px 34px;opacity:.22;
  transform:translate3d(0,calc(var(--sy,0) * -0.06px),0);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%);
}
.sec-alt > .wrap{position:relative;z-index:1}

/* scroll progress, injected by site.js */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--amber));
  transform-origin:0 50%;transform:scaleX(var(--progress,0));
}

/* reveal variants: direction is a data attribute, delay comes from .stagger */
.reveal[data-reveal=left]{transform:translateX(-32px)}
.reveal[data-reveal=right]{transform:translateX(32px)}
.reveal[data-reveal=scale]{transform:scale(.94)}
.reveal[data-reveal=blur]{filter:blur(8px);transform:translateY(12px);
  transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.3,1),filter .8s}
.reveal.in[data-reveal]{transform:none;filter:none}

/* headings draw a rule under themselves as they arrive */
.sec-head{position:relative}
.sec-head::after{
  content:"";display:block;width:64px;height:2px;margin-top:22px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.3,1) .35s;
}
.sec-head.center::after{margin-inline:auto;transform-origin:50% 50%;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.sec-head.in::after{transform:scaleX(1)}

/* pointer tilt: JS writes --rx/--ry, the element just follows */
.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(var(--ty,0));
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .25s,box-shadow .25s;will-change:transform}
.tilt.tilting{transition:transform .08s linear,border-color .25s,box-shadow .25s}
.tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(56,217,230,.10),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.tilt.tilting::after{opacity:1}
.card,.tier,.shot,.stat{position:relative}

/* hero parallax targets */
.hero .split-media{will-change:transform}

/* stats counters */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 52px}
.stat{
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px 22px;
  background:linear-gradient(160deg,rgba(255,255,255,.03),transparent);
}
.stat .num{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.04em;
  color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1}
.stat .num small{font-size:.5em;font-weight:600;color:var(--text-dim);margin-left:4px;letter-spacing:0}
.stat .lbl{font-size:.86rem;color:var(--text-dim);margin-top:10px;line-height:1.4}
.stat.warn .num{color:var(--amber);font-size:clamp(1.55rem,2.5vw,2.05rem)}
.stat .num{white-space:nowrap}

/* hero scrubber: drag the storm */
.scrub{margin-top:14px;display:flex;align-items:center;gap:14px;font:.76rem/1.3 var(--mono);color:var(--text-faint)}
.scrub label{white-space:nowrap}
.scrub input[type=range]{
  flex:1;appearance:none;-webkit-appearance:none;height:26px;background:transparent;cursor:grab;margin:0;
}
.scrub input[type=range]:active{cursor:grabbing}
.scrub input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan) 0,var(--cyan) var(--fill,0%),var(--line) var(--fill,0%))}
.scrub input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.scrub input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--cyan)}
.scrub input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7px;
  background:var(--ink-900);border:2px solid var(--cyan);box-shadow:0 0 0 4px rgba(56,217,230,.18);
}
.scrub input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--ink-900);border:2px solid var(--cyan);box-shadow:0 0 0 4px rgba(56,217,230,.18)}
.scrub .hint{color:var(--cyan);opacity:.85;transition:opacity .3s}
.scrub.manual .hint{opacity:0}

/* threshold checker (coverage section) */
.checker{
  margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,var(--ink-700),var(--ink-800));padding:18px 20px;
}
.checker-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.checker label{font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.checker select{
  flex:1;min-width:180px;appearance:none;-webkit-appearance:none;background:var(--ink-900);color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:11px 40px 11px 14px;font:inherit;font-size:.95rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;
}
.checker select:focus{border-color:var(--cyan)}
.checker-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.checker-out > div{background:rgba(255,255,255,.028);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;min-width:0}
.checker-out .k{font:600 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.checker-out .v{font-size:1.35rem;font-weight:680;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--cyan)}
.checker-out .v.sm{font-size:.98rem;letter-spacing:0;color:var(--text)}
.checker-note{font-size:.84rem;color:var(--text-dim);margin:14px 0 0;line-height:1.5;min-height:2.6em}
.checker-note .tag{margin-right:6px;vertical-align:middle}
.checker-out.changed > div{animation:checker-pop .45s cubic-bezier(.2,.8,.3,1)}
@keyframes checker-pop{0%{transform:translateY(6px);opacity:.3}100%{transform:none;opacity:1}}
.checker .fine{font-size:.76rem;color:var(--text-faint);margin:12px 0 0}

/* accumulation chart crosshair */
[data-animate-path]{cursor:crosshair}
.xhair{pointer-events:none;opacity:0;transition:opacity .2s}
[data-animate-path].hovering .xhair{opacity:1}

/* FAQ height animation */
.faq details p{overflow:hidden}
.faq details.opening p{animation:faq-in .35s cubic-bezier(.2,.8,.3,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* trust strip items arrive one by one */
.strip-inner span{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.3,1)}
.strip-inner.in span{opacity:1;transform:none}
.strip-inner.in span:nth-child(2){transition-delay:.1s}
.strip-inner.in span:nth-child(3){transition-delay:.2s}
.strip-inner.in span:nth-child(4){transition-delay:.3s}

/* hero entrance, once, on load */
.hero .eyebrow,.hero h1,.hero .lead,.hero .btn-row,.hero .hero-note{
  animation:hero-in .9s cubic-bezier(.2,.8,.3,1) both}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.18s}
.hero .btn-row{animation-delay:.28s}.hero .hero-note{animation-delay:.36s}
.hero .split-media{animation:hero-card .9s cubic-bezier(.2,.8,.3,1) .25s both}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-card{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}

@media (max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .checker-out{grid-template-columns:1fr 1fr}
  .checker-out > div:last-child{grid-column:1 / -1}
  .sec-alt::before{transform:none}
}
/* The directional reveal variants translate on X. While un-revealed that
   overhangs a narrow viewport and scrolls the page sideways, so below the
   split breakpoint they fall back to the vertical entrance. */
@media (max-width:960px){
  .reveal[data-reveal=left],.reveal[data-reveal=right]{transform:translateY(22px)}
}
@media (max-width:520px){
  .stats{gap:12px}
  .stat{padding:16px}
  .scrub label{display:none}
}
@media (hover:none),(pointer:coarse){
  .tilt,.tilt.tilting{transform:none;transition:border-color .25s,box-shadow .25s}
  .tilt::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sec-alt::before{transform:none}
  .sec-head::after{transform:none}
  .strip-inner span{opacity:1;transform:none}
  .reveal[data-reveal]{transform:none;filter:none}
  .tilt{transform:none}
  .hero .eyebrow,.hero h1,.hero .lead,.hero .btn-row,.hero .hero-note,.hero .split-media{animation:none}
}

/* ---------- app screen tour ----------
   Default (no JS): every screen in a plain responsive grid, each captioned -
   fully readable on its own. `site.js` enhances this into a self-playing,
   story-style tour; it never replaces the underlying figures, so a crawler
   or a no-JS visitor sees the same eight real screens, just all at once. */
.tour{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px;margin-top:8px;
}
.tour-fig{
  margin:0;background:#05080f;border:1px solid var(--line);border-radius:20px;
  padding:9px;box-shadow:var(--shadow);
}
.tour-fig img{width:100%;border-radius:14px;display:block}
.tour-fig figcaption{font-size:.82rem;color:var(--text-dim);padding:13px 6px 4px;line-height:1.5}
.tour-fig figcaption strong{display:block;color:var(--text);font-weight:600;margin-bottom:4px}

.tour.tour-enhanced{display:block}
.tour-stage{max-width:300px;margin:0 auto;position:relative}
.tour-progress{display:flex;gap:6px;margin-bottom:16px}
.tour-progress .seg{
  flex:1;height:3px;border-radius:2px;background:var(--line-soft);overflow:hidden;position:relative;
}
.tour-progress .seg::after{
  content:"";position:absolute;inset:0;width:0;background:var(--cyan);transform-origin:0 50%;
}
.tour-progress .seg.done::after{width:100%}
@keyframes tour-fill{from{width:0}to{width:100%}}

.tour-enhanced .tour-fig{display:none}
.tour-enhanced .tour-fig.is-active{display:block;animation:tour-fade .45s cubic-bezier(.2,.8,.3,1)}
@keyframes tour-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.tour-steps{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px auto 0;max-width:680px;
}
.tour-step{
  font:600 .76rem/1 var(--mono);letter-spacing:.01em;padding:9px 15px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text-dim);
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.tour-step:hover{border-color:var(--cyan);color:var(--text)}
.tour-step[aria-selected="true"]{
  border-color:var(--cyan);color:var(--text);background:rgba(56,217,230,.14);
}

@media (max-width:520px){
  .tour-step{padding:8px 12px;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  .tour-progress .seg::after{transition:none}
  .tour-enhanced .tour-fig.is-active{animation:none}
}

/* ---------- blog ----------
   Article pages are a reading column with a sticky contents rail. The rail
   collapses above the body on narrow screens rather than being hidden, so a
   long post is still navigable on a phone. */
.crumbs{padding:26px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  font:.78rem/1 var(--mono);color:var(--text-faint)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{color:var(--text-faint)}
.crumbs a:hover{color:var(--cyan);text-decoration:none}

.post{padding-bottom:clamp(56px,7vw,88px)}
.post-head{max-width:760px;padding:clamp(26px,3.5vw,40px) 0 0}
.post-head h1{font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:.4em}
.post-head .lead{margin-bottom:22px}
.post-meta{font:.82rem/1 var(--mono);color:var(--text-faint);display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;margin:0}

.post-hero{margin:clamp(28px,4vw,44px) 0 0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--ink-800)}
.post-hero img{width:100%;height:auto;display:block}

.post-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;
  align-items:start;margin-top:clamp(36px,5vw,56px)}
.post-body{min-width:0}
.post-toc{position:sticky;top:96px}
.post-toc .label{font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 14px}
.post-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.post-toc li{counter-increment:toc;margin-bottom:10px;font-size:.88rem;line-height:1.4}
.post-toc a{color:var(--text-dim);display:block;padding-left:22px;position:relative}
.post-toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;
  font:600 .7rem/1.6 var(--mono);color:var(--line)}
.post-toc a:hover{color:var(--cyan);text-decoration:none}

.post-body{max-width:72ch;font-size:1.03rem}
.post-body h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-top:1.9em;margin-bottom:.55em;
  scroll-margin-top:96px}
.post-body h2:first-child{margin-top:0}
.post-body h3{font-size:1.1rem;margin-top:1.7em;margin-bottom:.5em;color:var(--text)}
.post-body p,.post-body li{color:var(--text-dim)}
.post-body ul,.post-body ol{padding-left:22px;margin-bottom:1.3em}
.post-body li{margin-bottom:11px}
.post-body li strong,.post-body p strong{color:var(--text);font-weight:600}
.post-body code{font:.9em/1 var(--mono);background:rgba(56,217,230,.08);color:var(--cyan);
  padding:2px 6px;border-radius:4px}
.post-body .honesty{margin:1.8em 0}
.post-body .table-scroll{margin:1.6em 0 .6em}
.post-body .fig-cap{font-size:.86rem;color:var(--text-faint);margin-bottom:2em}
.article-fig{margin:2em 0 1.4em;padding:22px}
.article-fig svg{width:100%;height:auto;display:block}

.key-points{
  border:1px solid rgba(56,217,230,.28);background:rgba(56,217,230,.05);
  border-radius:var(--radius);padding:24px 26px;margin:0 0 2.2em;
}
.key-points h2{font-size:.72rem!important;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--mono);color:var(--cyan);margin:0 0 14px!important}
.key-points ul{list-style:none;padding:0;margin:0}
.key-points li{position:relative;padding-left:24px;margin-bottom:10px;font-size:.96rem}
.key-points li:last-child{margin-bottom:0}
.key-points li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:2px;background:var(--cyan)}

.inline-cta{
  border-left:3px solid var(--cyan);background:linear-gradient(90deg,rgba(56,217,230,.09),transparent);
  padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:2em 0;
}
.inline-cta p{margin:0;color:var(--text)}

.post-cards .card{display:block;text-decoration:none}
.post-cards .card:hover{text-decoration:none}
.post-cards .card h3{font-size:1.06rem;line-height:1.3;margin-bottom:.5em;color:var(--text)}
/* The card leads with the title-free banner, not the social card: the card
   already renders the title as text, and the 1200x630 version has the title
   burned into the image, which would say it twice. Negative margins pull the
   figure out to the card edge through the card padding. */
.post-cards .card{padding:0}
.post-cards .card > :not(.card-figure){margin-left:26px;margin-right:26px}
.post-cards .card > .card-meta{margin-bottom:26px}
.card-figure{
  margin:0 0 20px;border-bottom:1px solid var(--line-soft);overflow:hidden;
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card-figure img{width:100%;height:auto;display:block;aspect-ratio:1200/420;object-fit:cover}
.card-topic{font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 12px}
.card-meta{font:.76rem/1.5 var(--mono);color:var(--text-faint);margin:14px 0 0}

.lead-post{
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(165deg,var(--ink-700),var(--ink-800));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;
  text-decoration:none;transition:border-color .25s,transform .25s;
}
.lead-post:hover{border-color:rgba(56,217,230,.45);text-decoration:none;transform:translateY(-3px)}
.lead-post figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft)}
.lead-post img{width:100%;height:auto;display:block}
.lead-post h2{font-size:clamp(1.3rem,2.3vw,1.75rem);margin-bottom:.45em}
.lead-post p{color:var(--text-dim)}

@media (max-width:900px){
  .post-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .post-toc{position:static;border:1px solid var(--line-soft);border-radius:var(--radius);
    padding:20px 22px;background:var(--ink-800)}
  .lead-post{grid-template-columns:1fr;gap:24px}
}