/* Lowball site pages: the "Deal Terminal" tokens (LOWBALL_UI_BUILD_SPEC.md Part 1
   §2-§3) for every page under app/ that is not the app shell (about, the two
   guides, the three policies, the founder interstitial, 404). index.html carries
   its own copy of the same tokens inline because the shell must paint from the
   precache without a second request; the values here are the same nine hexes and
   the same names, and test_site_theme.py pins them against index.html.

   Rules this file lives by: exact hexes only, rgba() only of those hexes; no
   gradient; two faces (fonts/fonts.css) and nothing else; type on the 10/12/14/
   18/22 scale; radii 8/12/16/24/pill; every length on the 4pt grid; amber on at
   most one element per page (the primary CTA); lime for figures and the active
   state; Signal Red for destructive only (nothing here is destructive, so it is
   declared and unused). */
:root{
  --charcoal:#101418; --charcoal-deep:#0B0E13; --lime:#A3E635; --money:#22C55E;
  --offwhite:#F5F5F5; --slate:#9AA3AF; --amber:#FFB020; --deep-green:#15803D; --signal:#FF6B6B;
  --bg:var(--charcoal); --bg-deep:var(--charcoal-deep);
  --bg2:rgba(245,245,245,.04); --bg3:rgba(245,245,245,.07); --line:rgba(245,245,245,.10);
  --ink:var(--offwhite); --ink2:var(--slate); --ink3:rgba(154,163,175,.72);
  --acc:var(--lime); --acc-dim:rgba(163,230,53,.45); --acc-tint:rgba(163,230,53,.12);
  --cta:var(--amber); --cta-ink:var(--charcoal);
  --up:var(--money); --danger:var(--signal);
  --sans:'Bricolage Grotesque',sans-serif; --mono:'IBM Plex Mono',monospace;
  --fs-micro:10px; --fs-sub:12px; --fs-body:14px; --fs-title:18px; --fs-hero:22px;
  --lh-display:1.2; --lh-body:1.5;
  --track-kicker:2px; --track-stamp:1px;
  --dur-fast:.1s; --dur-base:.2s; --ease:cubic-bezier(.22,.61,.36,1);
  --s1:4px; --s3:8px; --s5:12px; --s7:16px; --s9:20px; --s10:24px; --s11:32px; --s12:40px; --s13:56px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --tap:48px}

*{box-sizing:border-box;margin:0;padding:0}
/* font-synthesis:none: neither face ships an italic or a bold beyond 700, so the
   browser must never fake one (spec §2.3: no faux-bold, no faux-italic). */
html{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;font-synthesis:none;-webkit-text-size-adjust:100%;
  scrollbar-width:thin;scrollbar-color:rgba(154,163,175,.35) transparent}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;font-size:var(--fs-body);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(154,163,175,.35);border-radius:var(--r-pill)}
::-webkit-scrollbar-track{background:transparent}
::selection{background:rgba(163,230,53,.35);color:var(--offwhite)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Page frame: header (nav) / main / footer, each holding one .wrap. */
.wrap{max-width:720px;margin:0 auto;padding-left:var(--s7);padding-right:var(--s7)}
header.site{padding-top:var(--s7)}
header.site nav{display:flex;flex-wrap:wrap;gap:var(--s3)}
header.site nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s7);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg2);color:var(--ink2);
  font-weight:500;font-size:var(--fs-body);text-decoration:none;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
header.site nav a:hover{color:var(--ink);border-color:var(--acc-dim)}
header.site nav a.on{color:var(--acc);background:var(--acc-tint);border-color:var(--acc-dim)}
main{padding:var(--s11) 0 var(--s13)}
footer{border-top:1px solid var(--line);padding:var(--s10) 0 var(--s12);font-size:var(--fs-sub);color:var(--ink3);line-height:var(--lh-body)}
footer a{color:var(--ink2);text-decoration:none;margin-right:var(--s7)}
footer a:hover{color:var(--acc)}
footer strong{color:var(--ink2)}
footer .links{margin-top:var(--s3)}
footer .fine,footer .disclaim{margin-top:var(--s7);color:var(--ink3)}

/* Type: words in Bricolage Grotesque, figures in IBM Plex Mono tabular (spec §2.2). */
h1{font-weight:700;font-size:var(--fs-hero);line-height:var(--lh-display);color:var(--ink);margin:0 0 var(--s5)}
h1.tight{margin-bottom:var(--s1)}
h2{font-weight:700;font-size:var(--fs-title);line-height:var(--lh-display);color:var(--ink);margin:var(--s12) 0 var(--s5)}
h3{font-weight:700;font-size:var(--fs-body);line-height:var(--lh-display);color:var(--ink);margin:var(--s10) 0 var(--s3)}
p,ul,ol{margin:0 0 var(--s5);color:var(--ink2)}
ul,ol{padding-left:var(--s9)}
li{margin-bottom:var(--s3)}
strong,b{color:var(--ink);font-weight:700}
/* Emphasis is a colour step, not an oblique: there is no italic face to use. */
em{color:var(--ink2);font-style:normal}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink3);text-underline-offset:2px;
  transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--acc);text-decoration-color:var(--acc)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s11) 0}
code{font-family:var(--mono);font-weight:500;font-size:var(--fs-sub);background:var(--bg3);padding:0 var(--s1);border-radius:var(--r-sm);color:var(--ink2)}
blockquote{border-left:2px solid var(--acc-dim);background:var(--bg2);padding:var(--s5) var(--s7);margin:var(--s7) 0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink2)}
/* Kickers are words in the UI face (spec §2.2 puts section kickers under Bricolage
   and says never to set labels in mono); mono at 10px is for stamps and meta. */
.kicker{font-family:var(--sans);font-weight:500;font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:var(--track-kicker);color:var(--ink3);margin-bottom:var(--s3)}
.lede{font-size:var(--fs-title);line-height:var(--lh-body);color:var(--ink2);margin-bottom:var(--s3)}
.meta{font-family:var(--mono);font-weight:500;font-size:var(--fs-sub);color:var(--ink3);margin-bottom:var(--s11)}
.last{margin-bottom:0}
.hide{display:none}

/* Figures: Plex Mono, tabular, right-aligned in an all-figure column (spec §2.2, §9). */
.fig{font-family:var(--mono);font-weight:500;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;white-space:nowrap}
.figcol{text-align:right}
/* A table scrolls inside its own box when its tracked heads cannot fit the column; the page never overflows. */
.tablewrap{overflow-x:auto;margin:var(--s7) 0}
table{width:100%;border-collapse:collapse;margin:0;font-size:var(--fs-body)}
th,td{text-align:left;padding:var(--s3) var(--s5) var(--s3) 0;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
/* Four figure columns do not fit 358px at the body step; the sub step is on the scale and keeps figures unwrapped. */
@media (max-width:600px){table{font-size:var(--fs-sub)}}
th{font-family:var(--sans);font-weight:500;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--track-kicker);color:var(--ink3);white-space:nowrap}
td strong{color:var(--ink)}
.neg,.paused{color:var(--ink3)}
.pos{color:var(--up)}

/* Surfaces and the one CTA. */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s7);margin:var(--s10) 0}
.card .kicker{margin-bottom:var(--s3)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:var(--s5) var(--s10);
  background:var(--cta);color:var(--cta-ink);font-family:var(--sans);font-weight:700;font-size:var(--fs-body);
  text-decoration:none;border-radius:var(--r-md);transition:transform var(--dur-fast) var(--ease)}
.cta:hover{color:var(--cta-ink)}
.cta:active{transform:scale(.97)}

/* The mark (lowball-mark-slim.svg geometry, inline so it takes the page's tokens).
   Illustration use only: the app icon is the rasterised PNG set. */
.mark{display:block;width:64px;height:auto}
.mark .mk-tag{fill:var(--acc);stroke:var(--acc);stroke-width:14;stroke-linejoin:round}
.mark .mk-hole{fill:var(--bg)}
.mark .mk-cut{fill:var(--bg);stroke:var(--bg);stroke-width:10;stroke-linejoin:round}

/* Hero (about) and the centred single-card pages (404, founder). */
.hero{text-align:center;margin-bottom:var(--s12)}
.hero .mark{margin:0 auto var(--s7)}
.hero .lede{max-width:560px;margin:0 auto}
.hero .cta{margin-top:var(--s10)}
body.centred{display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s10)}
body.centred main{padding:0;width:100%;max-width:420px}
body.centred .mark{margin:0 auto var(--s7)}