/* ==========================================================================
   DeedStake — shared design system
   One file, loaded by every page. Tokens live here and nowhere else, so the
   nav, footer, trust rail, paper surfaces and evidence tables cannot drift
   between the flagship and the metro/legal pages.

   Ground rules baked into this sheet:
     · Dark is the page. "Paper" is reserved for evidence — sample rows,
       printed queries, the Stake Ledger, the founder letter. Nothing else.
     · If it is a fact, it is monospace. Counters, as-of stamps, dataset IDs,
       filters, ZIPs, prices, lien totals. Prose is serif or sans.
     · Motion is opt-in. .rv elements are visible by default; only a page that
       successfully loads GSAP hides them (html.has-gsap) before revealing.
   ========================================================================== */

:root{
  /* ground */
  --bg-0:#070b0a;
  --bg-1:#0c1512;
  --bg-card:#111d19;
  --bg-card-hi:#16261f;
  --line:#1e332c;
  --line-bright:#2c4a3f;

  /* paper — evidence surfaces only */
  --paper:#f7faf8;
  --paper-line:#dce8e2;
  --paper-ink:#0a1512;
  --paper-muted:#536b63;

  /* type on dark */
  --ink-0:#f2f7f4;
  --ink-1:#b6c8c0;
  --ink-2:#7d938b;

  /* accents, each with its matched glow */
  --signal:#10b981;      --signal-glow:rgba(16,185,129,.15);
  --signal-hi:#34d399;
  --verify:#38bdf8;      --verify-glow:rgba(56,189,248,.14);
  --lock:#fbbf24;        --lock-glow:rgba(251,191,36,.14);
  --stale:#f87171;       --stale-glow:rgba(248,113,113,.13);

  /* type stacks — system only. No webfont request, no external host,
     no FOUT. The register (serif display + mono data) is what matters. */
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 18px 46px rgba(0,0,0,.42);
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg-0);
  color:var(--ink-1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16.5px;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink-0);line-height:1.06;letter-spacing:-.02em;font-weight:700}
b,strong{color:var(--ink-0);font-weight:700}

/* ---- the mono rule: every checkable fact ---- */
.mono,code,pre,.stamp,.num,.src,td.d,th{font-family:var(--mono);font-variant-numeric:tabular-nums}

::selection{background:var(--signal-glow);color:var(--ink-0)}
:focus-visible{outline:2.5px solid var(--signal-hi);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 22px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;background:var(--signal);color:#06231a;
  font-family:var(--sans);font-weight:800;font-size:15.5px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:10px;border:none;cursor:pointer;
  box-shadow:0 10px 26px var(--signal-glow);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--signal-hi);box-shadow:0 16px 34px var(--signal-glow)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--ink-0);border:1.5px solid var(--line-bright);box-shadow:none}
.btn.ghost:hover{background:var(--bg-card-hi);border-color:var(--signal);transform:translateY(-2px)}
.btn.sm{padding:10px 17px;font-size:14px}

.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-hi);
  background:var(--signal-glow);border:1px solid rgba(16,185,129,.22);
  padding:6px 13px;border-radius:50px;margin-bottom:18px;
}

/* --------------------------------------------------------------- nav rail */
header.nav{position:sticky;top:0;z-index:60;background:rgba(7,11,10,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;transition:height .18s ease}
header.nav.shrunk .wrap{height:52px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:20.5px;color:var(--ink-0);letter-spacing:-.02em}
.logo .lm{flex:0 0 auto;width:19px;height:24px;display:block}
.logo .tm{font-family:var(--sans);font-size:9.5px;font-weight:700;vertical-align:super;color:var(--signal);letter-spacing:0}
.logo em{font-style:normal;color:var(--signal)}
.nav nav{display:flex;align-items:center}
.nav a.navlink{color:var(--ink-2);font-size:14px;font-weight:600;margin-left:24px;transition:color .14s}
.nav a.navlink:hover{color:var(--ink-0)}
.nav .btn{margin-left:22px}
@media(max-width:900px){.nav a.navlink{display:none}}

/* trust rail — Terms + Privacy above the fold on every page */
.trustrail{background:var(--bg-1);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.trustrail .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;min-height:34px;padding-top:8px;padding-bottom:8px;text-align:center}
.trustrail .sep{color:var(--line-bright)}
.trustrail a{color:var(--ink-1);text-decoration:underline;text-underline-offset:2px}
.trustrail a:hover{color:var(--signal-hi)}
.trustrail b{color:var(--signal-hi);font-weight:400}

/* ------------------------------------------------------------- structures */
section.band{padding:88px 0}
section.band.tight{padding:62px 0}
.band-1{background:var(--bg-1)}
.h2{font-size:clamp(28px,3.9vw,44px);max-width:19ch;line-height:1.04}
.center .h2{margin-left:auto;margin-right:auto}
.h2 .alt{color:var(--signal-hi);display:block}
.lead{color:var(--ink-1);font-size:17.5px;max-width:66ch;margin-top:18px}
.center .lead{margin-left:auto;margin-right:auto}
.seclabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}

.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.card:hover{transform:translateY(-3px);border-color:var(--line-bright);background:var(--bg-card-hi)}
.card h3{font-size:20px;margin-bottom:9px}
.card p{color:var(--ink-1);font-size:15.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}

/* -------------------------------------------------------- paper surfaces */
.paper{background:var(--paper);color:var(--paper-ink);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.paper h2,.paper h3,.paper h4{color:var(--paper-ink)}
/* The global b/strong rule paints for the dark ground. On paper it would be
   white-on-white — invisible. Every emphasis inside an evidence surface has to
   flip back to paper ink. */
.paper b,.paper strong{color:var(--paper-ink)}
.paper .muted{color:var(--paper-muted)}
.paper a{color:#0a6b4d;text-decoration:underline}
.filebar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:#eef4f1;border-bottom:1px solid var(--paper-line);font-family:var(--mono);font-size:12px;color:var(--paper-muted)}
.filebar .dot{width:9px;height:9px;border-radius:50%;background:var(--paper-line);flex:0 0 auto}
.filebar .fname{color:var(--paper-ink)}
.filebar .rowcount{margin-left:auto}

/* evidence table (paper) */
.evt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.evt th{text-align:left;padding:10px 14px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-muted);border-bottom:1px solid var(--paper-line);font-weight:600;white-space:nowrap}
.evt td{padding:11px 14px;border-bottom:1px solid var(--paper-line);color:var(--paper-ink);white-space:nowrap;vertical-align:middle}
.evt tr:last-child td{border-bottom:none}
.evt .tag{display:inline-block;background:rgba(16,185,129,.16);color:#0a6b4d;padding:2px 9px;border-radius:50px;font-size:10.5px;font-weight:700;letter-spacing:.04em}
.evt .redact{display:inline-block;background:#dfe8e4;color:#8a9d96;border-radius:3px;padding:1px 6px;letter-spacing:.06em}
.evt .na{color:#93a8a1;font-style:italic}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}

/* --------------------------------------------------------------------------
   Horizontal-overflow guard. Grid and flex children default to min-width:auto,
   which means one wide thing — a CSV table, a pre-formatted query, the ledger —
   stretches its whole track and pushes the entire PAGE into a horizontal
   scroll on a phone. Opting every layout container's children out of that
   confines the scrolling to the .scrollx / <pre> that actually needs it, which
   is the behaviour we want: the page body never scrolls sideways, the wide
   table does. Verified at 390px: document width == viewport width.
   -------------------------------------------------------------------------- */
.herogrid>*,.qgrid>*,.ledgerwrap>*,.buyergrid>*,.grid2>*,.grid3>*,
.counters>*,.mcounts>*,.plans>*,.oneoffs>*,.stack>*,.qstrip>*,
.facts>*,.cols>*,.offerstrip .grid>*,.reassure .grid>*{min-width:0}

/* The filename bar is a flex row; on a phone the long CSV name has to be
   allowed to wrap and break rather than set the card's minimum width. */
.filebar{flex-wrap:wrap}
.filebar .fname{overflow-wrap:anywhere;min-width:0}

/* Very narrow phones (≤400px, e.g. an SE): a handful of unbreakable tokens —
   "$1,200–$1,800/mo", "deals@wesaveutech.com", a three-column Terms table —
   are individually a few px wider than the viewport. `anywhere` (not
   `break-word`) is required, because only `anywhere` reduces the element's
   min-content contribution, which is what a table cell is sized from. Scoped
   to the breakpoint so nothing breaks mid-word on a real screen. */
@media(max-width:400px){
  .doc table td,.doc table th,.plan .pricealt,.setupline,
  .reassure p,.offerstrip p,footer.site a{overflow-wrap:anywhere}
}
.srcline{padding:14px 16px;background:#eef4f1;border-top:1px solid var(--paper-line);font-size:12.5px;line-height:1.65;color:var(--paper-muted)}
.srcline b{color:var(--paper-ink)}
.srcline code{background:#e2ece7;border-radius:4px;padding:1px 5px;font-size:11.5px;color:var(--paper-ink)}
.srcline a{color:#0a6b4d}

/* ---------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink-1);background:var(--bg-card);border:1px solid var(--line);border-radius:50px;padding:7px 14px}
.chip svg{flex:0 0 auto;color:var(--signal)}

/* honest-constraint callout — every metro gets one */
.constraint{border-left:3px solid var(--stale);background:var(--stale-glow);border-radius:0 10px 10px 0;padding:14px 18px;font-size:14.5px;color:var(--ink-1)}
.constraint b{color:#fecaca}
.note{border-left:3px solid var(--line-bright);background:var(--bg-card);border-radius:0 10px 10px 0;padding:14px 18px;font-size:14.5px;color:var(--ink-1)}

/* -------------------------------------------------------------- doc pages */
.pagehead{padding:52px 0 44px;border-bottom:1px solid var(--line);background:radial-gradient(1100px 420px at 82% -30%,var(--bg-card-hi),var(--bg-0) 62%)}
.pagehead h1{font-size:clamp(30px,4.6vw,44px);max-width:22ch}
.pagehead .sub{color:var(--ink-1);font-size:18px;max-width:64ch;margin-top:16px}
.pagehead .stamp{margin-top:18px;font-size:12.5px;color:var(--ink-2)}
.pagehead .stamp b{color:var(--signal-hi);font-weight:400}
.crumb{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-bottom:16px}
.crumb a{color:var(--ink-1);text-decoration:underline;text-underline-offset:2px}

.doc{padding:40px 0 18px}
.doc>.wrap-narrow>section,.doc>.wrap>section{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-bottom:20px}
.doc h2{font-size:23px;margin-bottom:4px}
.doc h2 .n{color:var(--signal);font-family:var(--mono);font-size:17px;margin-right:9px}
.doc h3{font-size:17.5px;margin:22px 0 4px}
.doc p{color:var(--ink-1);font-size:16px;margin-top:11px}
.doc p.intro{margin-top:6px}
.doc ul,.doc ol{margin:12px 0 0 22px;color:var(--ink-1);font-size:16px}
.doc li{margin:8px 0}
.doc a{color:var(--signal-hi);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.doc code{background:var(--bg-0);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:13px;color:var(--ink-0);word-break:break-word}
.doc blockquote{border-left:3px solid var(--signal);background:var(--bg-0);border-radius:0 10px 10px 0;padding:14px 18px;margin-top:10px;color:var(--ink-1);font-size:15.5px}
.doc table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.doc table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-bright);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.doc table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-1)}
.doc .callout{background:var(--bg-0);border:1px dashed var(--line-bright);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:15px;color:var(--ink-1)}
/* flow-down licence clauses (terms.html §2) — each is a quoted contract clause */
.doc .clause{margin-top:22px}
.doc .clause:first-of-type{margin-top:12px}
.doc .clause h3{margin:0 0 4px;font-size:16.5px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:700px){.facts{grid-template-columns:1fr}}
.fact{background:var(--bg-0);border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.fact .n{font-family:var(--mono);font-size:25px;font-weight:600;line-height:1.15;color:var(--signal-hi);font-variant-numeric:tabular-nums}
.fact .l{font-size:13px;color:var(--ink-2);margin-top:5px;line-height:1.5}

.ctaband{background:linear-gradient(160deg,var(--bg-card-hi),var(--bg-card));border:1px solid var(--line-bright);border-radius:var(--radius);padding:34px 30px;margin:10px 0 34px;text-align:center}
.ctaband h2{font-size:27px}
.ctaband p{color:var(--ink-1);font-size:16px;margin:12px auto 20px;max-width:58ch}
.ctaband .btn{margin:5px}
.ctaband .fine{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-top:16px}
.metrolinks{font-size:14px;color:var(--ink-2);text-align:center;margin-bottom:34px}
.metrolinks a{color:var(--signal-hi);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--bg-1);border-top:1px solid var(--line);padding:48px 0 34px;font-size:14px;color:var(--ink-2)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:400;margin-bottom:12px}
footer.site ul{list-style:none}
footer.site li{margin:7px 0}
footer.site a{color:var(--ink-1)}
footer.site a:hover{color:var(--signal-hi);text-decoration:underline}
footer.site .blurb{color:var(--ink-2);font-size:14px;margin-top:12px;max-width:34ch}
footer.site .base{border-top:1px solid var(--line);margin-top:34px;padding-top:22px;font-size:12.5px;line-height:1.7}
footer.site .base .asof{font-family:var(--mono);color:var(--ink-2)}
footer.site .disambig{margin-top:10px;color:#5f7269;max-width:88ch}

/* --------------------------------------------------------------- motion */
/* Reveal elements are VISIBLE by default. Only once GSAP has actually loaded
   does the page take responsibility for showing them. JS off, CDN blocked,
   script error — the page still reads and still converts. */
html.has-gsap .rv{opacity:0}

/* The hero is deliberately NOT a .rv element. Above-the-fold copy is the LCP
   and must never wait on a script: it animates with a declarative CSS keyframe
   (fill mode `both`, so the end state holds) staggered by an inline --d. No JS,
   no CDN, no rAF ticker anywhere in that path. */
@keyframes heroin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hin{animation:heroin .62s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.has-gsap .rv{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}