/* ==========================================================================
   COASTWORKS AI, shared site stylesheet.

   Generated by _build/extract_css.py. Every rule below was lifted verbatim out
   of the inline <style> blocks of the main pages, where it was duplicated on
   14 or more of the 25 pages. Nothing here was rewritten by hand at extraction
   time; the reskin that follows edits this file and this file only.

   Each page still carries its page-specific rules inline, AFTER the link to
   this sheet, so a page-level rule always wins a same-specificity tie.
   ========================================================================== */
@font-face{font-family:'Figtree';font-weight:700;font-display:swap;src:url('/assets/fonts/Figtree-700.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:800;font-display:swap;src:url('/assets/fonts/Figtree-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('/assets/fonts/Inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('/assets/fonts/Inter-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2')}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
a{color:inherit}
.micro{font-size:.9rem;color:var(--muted)}
.btn-ghost{background:transparent;border:2px solid var(--cream);color:var(--cream);border-radius:var(--r-ctl);padding:15px 26px;display:inline-block;text-decoration:none;font-weight:600}
.btn-ghost:hover{background:var(--cream);color:var(--navy)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* brand tile: EXACT live construction */
.cai{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#16232E;color:#FAF7F2;border-radius:8px;flex-shrink:0}
.cai .csym{display:inline-flex;align-items:baseline;font-family:'Figtree',sans-serif;font-weight:800;line-height:1;letter-spacing:-.045em}
.cai-header{width:46px;height:46px}
.cai-header .csym{font-size:1.45rem}
/* article head band */
.arthead{background:var(--navy);color:var(--cream);padding:64px 0}
.arthead .tiles{display:flex;gap:8px;margin-bottom:18px}
.arthead .kicker{color:var(--orange-onnavy);margin-bottom:12px}
.arthead h1{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:14px;max-width:22ch}
.artmeta{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-onnavy)}
.backlab{display:inline-block;margin-bottom:22px;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-onnavy);text-decoration:none}
.backlab:hover{text-decoration:underline}
.minitile em{font-style:normal;color:var(--orange)}
/* article body */
.artcol{max-width:860px}
article ul,article ol{margin:0 0 18px 24px;color:var(--body)}
article li{margin-bottom:8px}
article a{color:var(--orange-deep);font-weight:600}
.figwrap{margin:32px 0;background:#FFFDF8;border:1px solid var(--line);border-top:5px solid var(--orange);border-radius:var(--r-card);padding:24px}
.figwrap .figtitle{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:16px}
.figcap{margin-top:14px;font-size:.85rem;color:var(--muted);line-height:1.55}
.order{list-style:none;margin:0;padding:0;counter-reset:step}
.order li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;padding:0}
.order li::before{content:counter(step);flex-shrink:0;width:34px;height:34px;border-radius:8px;background:var(--navy);color:var(--cream);font-family:'Figtree',sans-serif;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
.order b{font-family:'Figtree',sans-serif;font-weight:800}
.morelab{margin:52px 0 0;border-top:1px solid var(--line);padding-top:34px}
.morelab .mono{display:block;margin-bottom:14px}
.moregrid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.moregrid{grid-template-columns:1fr}}
.morecard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px;text-decoration:none;color:var(--ink)}
.morecard .mkick{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.morecard b{font-family:'Figtree',sans-serif;font-weight:800;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
@media (prefers-reduced-motion: no-preference){
  .morecard{transition:transform .2s ease,box-shadow .2s ease}
  .morecard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(16,26,34,.12)}
}
/* closing band */
.final .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.final .side{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.final .micro{color:var(--muted-onnavy);text-align:center}
.final .micro a{color:var(--muted-onnavy)}
@media (max-width:820px){.final .wrap{grid-template-columns:1fr}}
/* services menu (site-wide, 2026-09-04) */
.navsvcbtn:hover{text-decoration:underline}

/* ==== HUD CHROME, appended by _build/reskin.py. DO NOT EDIT HERE: edit _build/hud.css ==== */
/* ==========================================================================
   COASTWORKS AI, HUD CHROME on a light reading body.

   The founder's call, 4 Sep 2026: the Lab, the Lab index, the four service
   pages, consult, terms, privacy and 404 keep a LIGHT reading body. The header
   and the footer become the homepage mockup's DARK HUD chrome. So the page
   opens on the instrument panel, reads on cream, and closes on the panel.

   Everything in here is appended to /assets/site.css by _build/reskin.py, which
   also strips the rules it supersedes from the page's own inline block. It is
   the ONLY place the chrome is defined, so a change lands on all 26 pages at
   once.

   Tokens are prefixed --hud- and set on .site-chrome, never on :root. The pages
   already own a :root palette (--navy, --cream, --ink, --body ...) that the
   light body depends on, and this must not reach into it.
   ========================================================================== */

/* ------------------------------------------------------------ chrome tokens
   Lifted from the mockup's css_base.css, unchanged. --hud-orange-lit #E08A54
   is the one that matters: the brand #C05621 is 3.8:1 on this ground and
   #E08A54 is 6.6:1, so small orange text uses the lit value and the brand
   value stays for the tile glyph and the top rule, which are not text. */
header.site-chrome,
footer.site-chrome{
  --hud-g0:#0B131B;
  --hud-g1:#16232E;
  --hud-cream:#FAF7F2;
  --hud-soft:#C9D3DB;
  --hud-muted:#A6B3BE;
  --hud-orange:#C05621;
  --hud-orange-lit:#E08A54;
  --hud-hair:rgba(255,255,255,.15);
  --hud-hair-soft:rgba(255,255,255,.085);
  --hud-glass:rgba(13,24,33,.94);
  color:var(--hud-cream);
  background-color:var(--hud-g1);
}

/* A ground with depth rather than a flat rectangle, the way the mockup's sky
   works: an ambient rise, not a gradient bar. It has to LAND on #16232E at the
   bottom edge, because on 25 of the 26 pages the band directly under the header
   is that exact navy (.pagehero, .arthead, .labhero, .legalhero, .hero). Any
   other end colour draws a seam straight across the top of the page. */
header.site-chrome{
  background-image:linear-gradient(180deg,
    #21374A 0%,#1B2C3B 52%,var(--hud-g1) 100%);
}

/* -------------------------------------------------------------- the header
   No bar, no rule, no cream. Every page except 404 opens on a navy hero band
   directly under the header, so the two read as one field; a hairline there
   would draw a seam through the middle of it. */
header.site-chrome{border-bottom:0}
/* The chrome carries its OWN measure. consult.html sets .wrap to 680px for its
   form column, which pulled the header and footer into a narrow strip and
   wrapped the strapline onto three lines. Shared chrome that changes width per
   page is not shared chrome, so the 1240px measure is stated here and the
   header and footer now sit identically on all 26 pages. */
header.site-chrome>.wrap,
footer.site-chrome>.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:768px){
  header.site-chrome>.wrap,
  footer.site-chrome>.wrap{padding:0 20px}
}
header.site-chrome .wrap{display:flex;align-items:center;
  justify-content:space-between;height:74px;gap:20px}

/* the lockup. On dark the tile inverts to a cream face with navy letters,
   which is the mockup's construction and already what the live footer does. */
header.site-chrome .wordmark,
footer.site-chrome .wordmark{display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;font-family:'Figtree',system-ui,sans-serif;
  font-weight:800;font-size:1.35rem;letter-spacing:-.02em;
  color:var(--hud-cream)}
header.site-chrome .cai,
footer.site-chrome .cai{display:flex;flex-direction:column;
  justify-content:center;align-items:center;background:var(--hud-cream);
  color:var(--hud-g1);border-radius:8px;flex-shrink:0;width:46px;height:46px}
header.site-chrome .cai .csym,
footer.site-chrome .cai .csym{display:inline-flex;align-items:baseline;
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;line-height:1;
  letter-spacing:-.045em;font-size:1.45rem}
header.site-chrome .cai .csym .cai-ai,
footer.site-chrome .cai .csym .cai-ai{font-size:.44em;
  color:var(--hud-orange);margin-left:.09em}
header.site-chrome .wordmark .dot,
footer.site-chrome .wordmark .dot{color:var(--hud-orange-lit);font-weight:800}
header.site-chrome .wordmark .brandname,
footer.site-chrome .wordmark .brandname{
  font-family:'Figtree',system-ui,sans-serif;font-weight:800}
header.site-chrome .wordmark small,
footer.site-chrome .wordmark small{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hud-muted);margin-left:4px}
/* the header's strapline sits on one line or not at all; the footer's may wrap,
   because at 320 a nowrap strapline is wider than the column it stands in */
header.site-chrome .wordmark small{white-space:nowrap}

/* the nav line */
header.site-chrome .navright{display:flex;align-items:center;gap:24px}
header.site-chrome .navlab{font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--hud-orange-lit);text-decoration:none;white-space:nowrap}
header.site-chrome .navlab:hover{text-decoration:underline}
header.site-chrome .navright .mono,
header.site-chrome .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hud-muted);white-space:nowrap}

/* the Services menu, exactly the links and order it carries today, on the
   HUD's own plate instead of the cream card */
header.site-chrome .navsvc{position:relative}
header.site-chrome .navsvcbtn{background:none;border:0;padding:0;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:.95rem;font-weight:600;
  color:var(--hud-orange-lit)}
header.site-chrome .navsvcbtn::after{content:" \25BE";font-size:.75em}
header.site-chrome .navmenu{display:none;position:absolute;right:0;
  top:calc(100% + 10px);background:var(--hud-glass);
  border:1px solid var(--hud-hair);border-radius:10px;padding:8px 0;
  min-width:230px;box-shadow:0 26px 60px -22px rgba(4,10,16,.9);z-index:50}
header.site-chrome .navsvc:hover .navmenu,
header.site-chrome .navsvc:focus-within .navmenu,
header.site-chrome .navsvc.open .navmenu{display:block}
header.site-chrome .navmenu a{display:block;padding:9px 16px;
  font-family:'Inter',system-ui,sans-serif;font-size:.92rem;font-weight:600;
  color:var(--hud-orange-lit);text-decoration:none;white-space:nowrap}
header.site-chrome .navmenu a:hover{background:rgba(250,247,242,.09);
  color:var(--hud-cream)}
header.site-chrome a:focus-visible,
header.site-chrome button:focus-visible,
footer.site-chrome a:focus-visible{outline:3px solid var(--hud-orange-lit);
  outline-offset:3px;border-radius:4px}
@media (max-width:1040px){header.site-chrome .mono{display:none}}
@media (max-width:640px){
  header.site-chrome .navright{gap:14px}
  header.site-chrome .navlab,
  header.site-chrome .navsvcbtn{font-size:.88rem}
  header.site-chrome .navright>a.navlab[href="/"]{display:none}
  header.site-chrome .navmenu{right:-8px}
}
@media (max-width:520px){
  header.site-chrome .wordmark,
  footer.site-chrome .wordmark{font-size:1.15rem;gap:9px}
  header.site-chrome .wordmark small{display:none}
  header.site-chrome .cai{width:40px;height:40px}
  header.site-chrome .cai .csym{font-size:1.25rem}
  header.site-chrome .wrap{height:66px}
}
/* 320 is a real width (an iPhone SE 1st gen, and any phone at 200% text zoom),
   and the live header overflowed it too. The lockup and the nav step down once
   more so the row fits with the Services menu and The Lab both on it. */
@media (max-width:400px){
  header.site-chrome .wordmark{font-size:1.02rem;gap:7px}
  header.site-chrome .cai{width:36px;height:36px}
  header.site-chrome .cai .csym{font-size:1.12rem}
  header.site-chrome .navright{gap:11px}
  header.site-chrome .navlab,
  header.site-chrome .navsvcbtn{font-size:.82rem}
}

/* -------------------------------------------------------------- the footer
   Same ground, one step deeper, and the three columns exactly as they are
   today: What we do, From The Lab, and the brand block. */
footer.site-chrome{border-top:1px solid var(--hud-hair-soft);
  padding:64px 0 40px;font-size:.9rem;
  background-image:radial-gradient(120% 200% at 50% 0%,
    #1B2C3A 0%,#131F29 48%,#0B131B 100%)}
footer.site-chrome .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;align-items:start}
footer.site-chrome .fcol h4{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hud-muted);font-weight:500;margin:0 0 14px}
footer.site-chrome .fcol ul{list-style:none;margin:0;padding:0}
footer.site-chrome .fcol li{margin:0 0 10px}
footer.site-chrome .fcol a{color:var(--hud-cream);text-decoration:none;
  font-size:.95rem}
footer.site-chrome .fcol a:hover{color:var(--hud-orange-lit);
  text-decoration:underline}
footer.site-chrome p{max-width:none;color:var(--hud-soft)}
footer.site-chrome .fbrand p{margin:12px 0 0}
footer.site-chrome .fbrand .mono{text-transform:none;letter-spacing:.05em;
  line-height:1.8;font-size:.78rem;color:var(--hud-muted)}
footer.site-chrome .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hud-muted)}
footer.site-chrome .fbar{border-top:1px solid var(--hud-hair-soft);
  margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;align-items:center}
footer.site-chrome .fbar a{color:var(--hud-muted);text-decoration:none}
footer.site-chrome .fbar a:hover{color:var(--hud-cream)}
footer.site-chrome .social a,
footer.site-chrome .fbar .social a{display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;
  border:1.5px solid var(--hud-muted);border-radius:50%;margin-right:8px;
  color:var(--hud-muted);text-decoration:none}
footer.site-chrome .social a:hover,
footer.site-chrome .fbar .social a:hover{color:var(--hud-cream);
  border-color:var(--hud-cream)}
@media (max-width:760px){
  footer.site-chrome .fgrid{grid-template-columns:1fr;gap:30px}
  footer.site-chrome .fbar{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------------------- the pinned bar, homepage only
   The homepage's own inline style makes .topbar rgba(9,16,23,.86) over a
   backdrop blur, and its home.css sets header.site-chrome transparent on top of
   that. Measured at 390 in both Chromium and WebKit the bar is effectively flat
   (channel spread 1 to 2), so the blur is carrying it. Where backdrop-filter is
   unavailable or switched off, that same 86% ground DOES let scrolled text
   through, so the fallback is stated here rather than left to chance. This
   sheet loads after that inline style, so it wins at equal specificity. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .topbar{background:var(--hud-g1,#16232E)}
}

/* --------------------------------------------------------- the reading measure
   The light pages set an 860px measure but leave it hard against the left edge
   of the 1240px wrap, so at 1440 the column ends at x992 with ~350px of dead
   cream to its right and the page reads lopsided. Centring the measure keeps
   its width, which is the thing that was tuned for reading. */
article .reading,
article .artcol,
main .reading{margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------- typography
   Aligned to the mockup: Figtree 800 display, Inter body, IBM Plex Mono
   labels, all self-hosted (the @font-face block is in the extracted core of
   this sheet; no page makes a Google Fonts request).

   The DISPLAY settings come across from the mockup: the tighter -.028em track
   and text-wrap:balance on headings, and the mono label at .18em. The reading
   body's own size and leading are deliberately NOT touched. Section 7 of the
   cutover evaluation keeps the Lab light precisely because 1,500 to 1,900 word
   articles are read on a phone outdoors, and 1.0625rem/1.7 is the measure that
   was set for that. Changing the type scale under running body copy is a
   founder call, not a chrome alignment. */
h1,h2,h3{letter-spacing:-.028em;text-wrap:balance}
.kicker{letter-spacing:.18em}

/* ==========================================================================
   HUD TABLE, spec v1 (scratchpad cutover/tables/hud-table.css, 4 Sep 2026).

   Applied to the 19 data tables by _build/reskin.py, which class-swaps
   .figwrap/.vtable to .hudfig/.hudtable, fills the data-label attributes from
   each table's own header row, and adds .stack to any table of 3 or more
   columns. The six figures that hold something other than a table keep the
   old .figwrap look, which is why those rules stay on their pages.
   ========================================================================== */
.hudfig{
  --hf-ground:#FFFDF8; --hf-plate:rgba(22,35,46,.032);
  --hf-plate-alt:rgba(22,35,46,.055);
  --hf-hair:rgba(22,35,46,.12); --hf-ink:#16232E; --hf-body:#39454F;
  /* the spec's #6B7780 is 4.51 on the figure ground but only 4.06 on the
     alternating row plate, where the .note under a value sits. #5F6A73 is
     4.90 on the worst of the two. */
  --hf-muted:#5F6A73;
  /* The spec's #2F7D53 tick and #9A6B14 dot measure 4.45 and 4.14 against the
     alternating row plate, both under the 4.5 floor for text this size. These
     are the same hues one step down in lightness: 5.15 and 4.99. */
  --hf-orange:#C05621; --hf-tick:#2B7249; --hf-warn:#8A5F10;
  --hf-best:rgba(192,86,33,.13);
  margin:32px 0; background:var(--hf-ground); border:1px solid var(--hf-hair);
  border-top:5px solid var(--hf-orange); border-radius:14px; padding:24px;
  color:var(--hf-body);
}
.hudfig.is-dark{
  --hf-ground:rgba(13,24,33,.74); --hf-plate:rgba(255,255,255,.035);
  --hf-plate-alt:rgba(255,255,255,.06);
  --hf-hair:rgba(255,255,255,.15); --hf-ink:#FAF7F2; --hf-body:#C9D3DB;
  --hf-muted:#A6B3BE;
  --hf-orange:#E08A54; --hf-tick:#7FBF98; --hf-warn:#D9A441;
  --hf-best:rgba(224,138,84,.20);
  border-color:rgba(255,255,255,.15); border-top-color:var(--hf-orange);
  box-shadow:0 30px 70px -28px rgba(4,10,16,.9);
}
.hudfig .figtitle{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hf-muted);display:block;margin-bottom:16px}
.hudtable{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.hudtable th{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hf-muted);font-weight:500;text-align:left;padding:10px 14px;
  border-bottom:1px solid var(--hf-hair);vertical-align:bottom}
.hudtable td{padding:13px 14px;text-align:left;vertical-align:top;
  color:var(--hf-body);border-bottom:1px solid var(--hf-hair);
  background:var(--hf-plate)}
.hudtable tbody tr:nth-child(even) td{background:var(--hf-plate-alt)}
.hudtable tbody tr:last-child td{border-bottom:none}
.hudtable tbody tr td:first-child{border-radius:8px 0 0 8px;
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;
  color:var(--hf-ink);white-space:normal}
.hudtable tbody tr td:last-child{border-radius:0 8px 8px 0}
.hudtable td.num,.hudtable th.num{text-align:right;
  font-variant-numeric:tabular-nums}
.hudtable .mark{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.78rem;margin-right:7px;font-weight:500}
.hudtable .mark-tick{color:var(--hf-tick)}
.hudtable .mark-warn{color:var(--hf-warn)}
/* The winning cell. An inset orange underline was tried first and read as a
   hyperlink, in a table that carries real links; the tint plate and the heavier
   weight say "this one" without borrowing link affordance. */
.hudtable td.is-best{color:var(--hf-ink)}
.hudtable td.is-best .val{font-weight:700;background:var(--hf-best);
  border-radius:5px;padding:1px 6px;margin:0 -2px}
/* one wrapper per cell, so a stacked card is always exactly two flex items:
   the label from ::before, and the value with its mark */
.hudtable td>.v{display:inline}
.hudtable .note{display:block;font-size:.82rem;color:var(--hf-muted);
  margin-top:3px}
.hudtable a{color:#A94A1B;font-weight:600}
.hudfig .figfoot,.hudfig .figcap{font-size:.82rem;color:var(--hf-muted);
  margin:14px 0 0;line-height:1.55}
/* MOBILE: stacked label/value cards, 3-plus column tables only. A horizontal
   scroller hides half a price comparison behind a gesture the reader has to
   discover, and it degrades what an answer engine and a copy-paste pull out.
   All 9 two-column tables already fit, so they keep the normal table. */

@media (max-width:560px){
  .hudfig{padding:18px}
  .hudtable.stack:not(.stack2),.hudtable.stack:not(.stack2) tbody,.hudtable.stack:not(.stack2) tr,
  .hudtable.stack:not(.stack2) td{display:block;width:100%;box-sizing:border-box}
  .hudtable.stack:not(.stack2) thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .hudtable.stack:not(.stack2) tbody tr{background:var(--hf-plate);
    border:1px solid var(--hf-hair);border-radius:12px;padding:4px 0;
    margin-bottom:14px}
  .hudtable.stack:not(.stack2) tbody tr:last-child{margin-bottom:0}
  .hudtable.stack:not(.stack2) tbody tr:nth-child(even) td{background:transparent}
  .hudtable.stack:not(.stack2) td{background:transparent;
    border-bottom:1px solid var(--hf-hair);border-radius:0;display:flex;
    justify-content:space-between;gap:14px;align-items:baseline;
    text-align:right;padding:11px 16px;flex-wrap:wrap}
  .hudtable.stack:not(.stack2) td:last-child{border-bottom:none}
  .hudtable.stack:not(.stack2) td::before{content:attr(data-label);
    font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.68rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--hf-muted);
    text-align:left;flex:0 1 auto;max-width:46%}
  .hudtable.stack:not(.stack2) tbody tr td:first-child{border-radius:0;display:block;
    text-align:left;font-size:1.05rem;padding:13px 16px 11px}
  .hudtable.stack:not(.stack2) tbody tr td:first-child::before{content:attr(data-label);
    display:block;margin-bottom:3px}
  /* flex-basis 0, not auto: with an auto basis a long value ("$409, before
     the custom quote") measures wider than the space left by the label and
     the whole wrapper drops to its own line, stranding the dot. */
  .hudtable.stack:not(.stack2) td>.v{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:0 7px;justify-content:flex-end;text-align:right;min-width:0;
    flex:1 1 0}
  .hudtable.stack:not(.stack2) td>.v>.val{min-width:0}
  .hudtable.stack:not(.stack2) tbody tr td:first-child>.v{display:block;text-align:left}
  .hudtable.stack:not(.stack2) td.is-best .val{font-weight:700;background:var(--hf-best)}
  .hudtable.stack:not(.stack2) .v>.note{flex:1 0 100%;text-align:right;margin-top:4px}
  .hudtable.stack:not(.stack2) td>.val,.hudtable.stack:not(.stack2) td{min-width:0}
}

/* the same block for the two-column tables, at 480 */

@media (max-width:480px){
  .hudfig{padding:18px}
  .hudtable.stack2,.hudtable.stack2 tbody,.hudtable.stack2 tr,
  .hudtable.stack2 td{display:block;width:100%;box-sizing:border-box}
  .hudtable.stack2 thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .hudtable.stack2 tbody tr{background:var(--hf-plate);
    border:1px solid var(--hf-hair);border-radius:12px;padding:4px 0;
    margin-bottom:14px}
  .hudtable.stack2 tbody tr:last-child{margin-bottom:0}
  .hudtable.stack2 tbody tr:nth-child(even) td{background:transparent}
  .hudtable.stack2 td{background:transparent;
    border-bottom:1px solid var(--hf-hair);border-radius:0;display:flex;
    justify-content:space-between;gap:14px;align-items:baseline;
    text-align:right;padding:11px 16px;flex-wrap:wrap}
  .hudtable.stack2 td:last-child{border-bottom:none}
  .hudtable.stack2 td::before{content:attr(data-label);
    font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.68rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--hf-muted);
    text-align:left;flex:0 1 auto;max-width:46%}
  .hudtable.stack2 tbody tr td:first-child{border-radius:0;display:block;
    text-align:left;font-size:1.05rem;padding:13px 16px 11px}
  .hudtable.stack2 tbody tr td:first-child::before{content:attr(data-label);
    display:block;margin-bottom:3px}
  /* flex-basis 0, not auto: with an auto basis a long value ("$409, before
     the custom quote") measures wider than the space left by the label and
     the whole wrapper drops to its own line, stranding the dot. */
  .hudtable.stack2 td>.v{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:0 7px;justify-content:flex-end;text-align:right;min-width:0;
    flex:1 1 0}
  .hudtable.stack2 td>.v>.val{min-width:0}
  .hudtable.stack2 tbody tr td:first-child>.v{display:block;text-align:left}
  .hudtable.stack2 td.is-best .val{font-weight:700;background:var(--hf-best)}
  .hudtable.stack2 .v>.note{flex:1 0 100%;text-align:right;margin-top:4px}
  .hudtable.stack2 td>.val,.hudtable.stack2 td{min-width:0}
}


/* The two-column tables hold PROSE, not figures. The generated .stack2 block
   inherits the money-table treatment, which right-aligns the value against its
   label; a five-line sentence set ragged-left is much harder to read than the
   same sentence set normally. So in the two-column case the label sits ABOVE
   its value, the way the row header already does, and the text runs full width
   from the left. The 3-plus column tables keep the right-aligned pairs, which
   is what lets a reader compare figures down a column. */
@media (max-width:480px){
  .hudtable.stack2 tbody tr td{display:block;text-align:left;padding:11px 16px}
  .hudtable.stack2 tbody tr td::before{display:block;margin-bottom:4px;
    max-width:none;flex:none}
  .hudtable.stack2 tbody tr td>.v{display:block;text-align:left}
}
/* ==== end HUD CHROME ==== */