/* ============================================================
   MINDATU v3 — OBSIDIAN DESK design system
   Source of truth: docs/bureau/SITE_V3_DESIGN_BRIEF.md §2 + design/Main.dc.html
   One family (Geist) + one mono (Geist Mono). One accent (amber) — only
   where a human acts. Hairlines, not shadows. Near-black, never pure black.
   ============================================================ */

/* ---------- fonts (self-hosted, swap) ---------- */
@font-face {
  font-family: 'Geist';
  src: url('fonts/GeistVF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMonoVF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens (§2.1 / §2.3) ---------- */
:root {
  color-scheme: dark;

  --canvas:      #0B0C0E;
  --surface-1:   #121316;
  --surface-2:   #17181C;
  --surface-3:   #1E2025;
  --paper:       #F4F2EC;
  --paper-ink:   #141413;
  --paper-muted: #6B6A66;

  --ink:         #F2F2F0;
  --ink-2:       #C9CBD1;
  --muted:       #8A8F98;
  --muted-2:     #5C6068;

  --hairline:    rgba(255,255,255,0.08);
  --hairline-2:  rgba(255,255,255,0.12);
  --hairline-paper: rgba(0,0,0,0.08);

  --accent:      #FFB020;
  --accent-hover:#FFC24D;
  --accent-ink:  #1A1300;
  --accent-soft: rgba(255,176,32,0.12);

  --gold:        #FFB020;
  --silver:      #B8BEC7;
  --flag:        #FF5A5F;
  --ok:          #3DD68C;

  --poly-1: rgba(244,114,182,0.32);
  --poly-2: rgba(79,209,197,0.32);
  --poly-3: rgba(163,230,53,0.30);
  --poly-4: rgba(96,165,250,0.32);
  --poly-5: rgba(251,191,36,0.30);
  --poly-stroke: rgba(255,255,255,0.85);
  --measure-line: #4FD1C5;
  --plan-ink: rgba(255,255,255,0.28);
  --plan-ink-2: rgba(255,255,255,0.18);

  --sans: 'Geist', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', 'IBM Plex Mono', Consolas, 'SF Mono', monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --container: 1200px; --container-wide: 1440px; --measure: 62ch;
  --gutter: 24px;

  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 9999px;

  --elev-0: none;
  --elev-1: inset 0 1px 0 rgba(255,255,255,0.04);
  --elev-2: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 48px -24px rgba(0,0,0,0.65);
  --elev-paper: 0 1px 0 rgba(0,0,0,0.06), 0 16px 40px -20px rgba(0,0,0,0.7);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 64px;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 17px; } }
img, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: #FFFFFF; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-1); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- type ---------- */
.display { font-size: clamp(44px, 7vw, 96px); font-weight: 450; letter-spacing: -0.035em; line-height: 1.02; text-wrap: pretty; }
.h2 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 450; letter-spacing: -0.03em; line-height: 1.05; text-wrap: pretty; }
.h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.h4 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
@media (min-width: 900px) { .lead { font-size: 18px; } }
.body-sm { font-size: 15px; line-height: 1.5; }
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--muted); }
.data { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.measure { max-width: var(--measure); }
.accent { color: var(--accent); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-wide { max-width: var(--container-wide); }
.section { padding: var(--s-9) 0; }
@media (min-width: 900px) { .section { padding: var(--s-10) 0; } }
.section-tight { padding: var(--s-7) 0; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: var(--s-6); }
.section-head .lead { max-width: 60ch; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,12,14,0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); max-width: var(--container-wide); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.brand svg { flex: none; }
.nav-links { display: none; gap: 28px; font-size: 15px; color: var(--ink-2); }
.nav-links a { color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s ease-out, border-color .15s ease-out; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hairline-2); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-tel { display: none; font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-tel:hover { color: var(--ink); }
.nav .btn { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
/* mobile menu — a <details>, no JS dependency */
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: 9px 12px; border: 1px solid var(--hairline-2); border-radius: var(--r-2); }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { color: var(--ink); border-color: var(--ink-2); }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: var(--r-3); box-shadow: var(--elev-2); padding: 8px; display: flex; flex-direction: column; }
.nav-menu-panel a { padding: 11px 12px; border-radius: var(--r-1); font-size: 15px; color: var(--ink-2); }
.nav-menu-panel a:hover { background: var(--surface-3); color: var(--ink); }
.nav-menu-panel a[aria-current="page"] { color: var(--ink); }
.nav-menu-panel .nav-menu-tel { font-family: var(--mono); font-size: 13px; color: var(--muted); border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 12px; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-tel { display: inline; }
  .nav-menu { display: none; }
  .nav .btn { padding: 11px 16px; font-size: 15px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1;
  padding: 13px 18px; border-radius: var(--r-2); border: 1px solid transparent;
  white-space: nowrap; cursor: pointer; text-align: center;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.28); color: #FFFFFF; }
.btn-lg { font-size: 16px; padding: 15px 22px; }
.btn-block { width: 100%; }
.cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cta-note { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.cta-human { font-size: 14px; color: var(--muted); }
.cta-human a { color: var(--ink-2); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.cta-human a:hover { color: var(--ink); }
.link { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); transition: text-underline-offset .15s ease-out, color .15s ease-out; }
.link:hover { color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--ink-2); }
.link-accent { color: var(--accent); text-decoration-color: rgba(255,176,32,0.4); }
.link-accent:hover { color: var(--accent-hover); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--hairline-2); border-radius: var(--r-pill);
  padding: 6px 11px; color: var(--ink-2); white-space: nowrap; line-height: 1.2;
  transition: border-color .15s ease-out, color .15s ease-out;
}
.chip:hover { border-color: rgba(255,255,255,0.28); color: var(--ink); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-static:hover { border-color: var(--hairline-2); color: var(--ink-2); }

/* grade chips — mono 11px, pill, hairline, status token at 12% */
.grade { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 8px; border: 1px solid; line-height: 1.3; white-space: nowrap; }
.g-gold   { color: var(--gold);   border-color: rgba(255,176,32,0.35);  background: rgba(255,176,32,0.12); }
.g-silver { color: var(--silver); border-color: rgba(184,190,199,0.35); background: rgba(184,190,199,0.12); }
.g-flag   { color: var(--flag);   border-color: rgba(255,90,95,0.35);   background: rgba(255,90,95,0.12); }
.g-ok     { color: var(--ok);     border-color: rgba(61,214,140,0.35);  background: rgba(61,214,140,0.12); }

/* desk code box — mono glyph in a 28px hairline box (no icons) */
.code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; width: 28px; height: 28px; flex: none; border: 1px solid var(--hairline-2); border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }

/* ---------- cards / plates / paper ---------- */
.card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-4); box-shadow: var(--elev-1); transition: border-color .15s ease-out; }
.card:hover { border-color: var(--hairline-2); }

.plate { position: relative; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-4); box-shadow: var(--elev-2); overflow: hidden; }
.hero-plate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 100%); pointer-events: none; z-index: 1; }
.gridbg { position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.fade-bottom { position: relative; }
.fade-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(11,12,14,0) 0%, var(--canvas) 100%); pointer-events: none; }

.paper { background: var(--paper); color: var(--paper-ink); border-radius: var(--r-3); padding: 14px 16px; box-shadow: var(--elev-paper); }
.paper .paper-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-muted); }
.paper .paper-body { font-size: 13px; margin-top: 6px; line-height: 1.45; }
.paper .paper-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; padding: 5px 0; border-top: 1px solid var(--hairline-paper); }
.paper .paper-row:first-of-type { border-top: 0; }
.paper .paper-total { font-weight: 500; }
.paper-stack { position: relative; }
.paper-stack .paper + .paper { margin-top: -6px; margin-left: 14px; }

/* ---------- desk (bento) cards ---------- */
.desk { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-4); padding: 24px; box-shadow: var(--elev-1); display: flex; flex-direction: column; gap: 12px; transition: border-color .15s ease-out; min-width: 0; }
.desk:hover { border-color: var(--hairline-2); }
.desk-head { display: flex; align-items: center; gap: 12px; }
.desk-name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.desk p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.desk-metric { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .bento .span-6 { grid-column: span 2; } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .bento .span-2 { grid-column: span 2; }
  .bento .span-3 { grid-column: span 3; }
  .bento .span-4 { grid-column: span 4; }
  .bento .span-6 { grid-column: span 6; }
  .desk-row { flex-direction: row; align-items: center; gap: 24px; }
  .desk-row .desk-head { flex: none; }
  .desk-row .desk-metric { flex: none; }
}

/* ---------- agent feed ---------- */
.feed { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-3); padding: 4px 18px 6px; box-shadow: var(--elev-1); }
.feed-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); padding: 10px 0 6px; }
.feedline { display: flex; gap: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--hairline); font-variant-numeric: tabular-nums; line-height: 1.45; }
.feedline > span:first-child { color: var(--muted-2); width: 72px; flex: none; letter-spacing: 0.06em; }
.feedline .signed { color: var(--accent); }
.feedline .flag { color: var(--flag); }
.feed-head + .feedline { border-top: 1px solid var(--hairline); }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; display: flex; flex-direction: column; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.ticker-track { display: flex; gap: 10px; width: max-content; animation: ticker 48s linear infinite; will-change: transform; }
.ticker-track.reverse { animation-direction: reverse; }
.ticker:hover .ticker-track, .ticker.is-paused .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker .chip { cursor: default; }
.ticker .chip[data-line] { cursor: help; border-style: dashed; }
/* chips that open a trade page: solid hairline, arrow affordance, amber only on hover (a human is about to act) */
.ticker a.chip-link { cursor: pointer; text-decoration: none; border-style: solid; color: var(--ink); }
.ticker a.chip-link::after { content: "→"; margin-left: 6px; color: var(--muted); }
.ticker a.chip-link:hover, .ticker a.chip-link:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.ticker a.chip-link:hover::after, .ticker a.chip-link:focus-visible::after { color: var(--accent); }
.ticker-line { font-family: var(--mono); font-size: 12.5px; color: var(--muted); min-height: 1.6em; line-height: 1.6; font-variant-numeric: tabular-nums; }
.ticker-line b { color: var(--ink-2); font-weight: 500; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- counters / proof strip ---------- */
.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 900px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counter { border-top: 1px solid var(--hairline-2); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.counter .val { font-family: var(--mono); font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.01em; }
.counter .lbl { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.45; }
.counter .asof { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- stage strip ---------- */
.stages { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.stages .stage { border: 1px solid var(--hairline-2); border-radius: var(--r-1); padding: 7px 10px; background: var(--surface-1); }
.stages .arrow { color: var(--muted-2); padding: 0 2px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.step { display: flex; flex-direction: column; gap: 10px; padding: 22px 0 0; border-top: 1px solid var(--hairline-2); }
.step .n { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted); }
.step h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.step p { font-size: 15px; color: var(--ink-2); }

/* ---------- guarantee list ---------- */
.law-list { display: flex; flex-direction: column; }
.law { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hairline); }
.law:last-child { border-bottom: 1px solid var(--hairline); }
.law .n { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.06em; padding-top: 3px; flex: none; width: 28px; }
.law p { font-size: 17px; line-height: 1.45; letter-spacing: -0.005em; }
.law p small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* estimator card */
.estimator { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.estimator-photo { width: 96px; height: 96px; border: 1px dashed var(--hairline-2); border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); line-height: 1.4; padding: 8px; background: var(--surface-2); flex: none; }
.estimator .name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.estimator .role { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.estimator .lines { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.estimator .lines a { color: var(--ink-2); } .estimator .lines a:hover { color: var(--ink); }
@media (min-width: 560px) { .estimator-top { display: flex; gap: 18px; align-items: flex-start; } }

/* ---------- job record ---------- */
.record { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-4); padding: 24px; box-shadow: var(--elev-1); display: flex; flex-direction: column; gap: 12px; }
.record .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.record p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.record .amt { font-family: var(--mono); font-size: 28px; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.record .asof { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ---------- pricing ladder ---------- */
.ladder { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.price { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-4); padding: 22px 20px; box-shadow: var(--elev-1); display: flex; flex-direction: column; gap: 10px; min-height: 180px; transition: border-color .15s ease-out; }
.price:hover { border-color: var(--hairline-2); }
.price .step-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.price .tier { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
.price .amt { font-family: var(--mono); font-size: 28px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.price .amt small { font-size: 13px; color: var(--muted); letter-spacing: 0; }
.price .what { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: auto; }
.price-dept { border-color: rgba(255,176,32,0.55); }
.price-dept:hover { border-color: var(--accent); }
.price-dept .amt { color: var(--accent); }
.ladder-line { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.7; }

/* ---------- FAQ (details accordion) ---------- */
.faq { border-top: 1px solid var(--hairline-2); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 16px; color: var(--muted); flex: none; width: 24px; text-align: center; transition: transform .2s var(--ease); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: #FFFFFF; }
.faq .a { padding: 0 0 20px; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.faq .a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }

/* ---------- final CTA band ---------- */
.cta-band { border-top: 1px solid var(--hairline); text-align: center; }
.cta-band .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta-band .cta-row { justify-content: center; }
.cta-band .lead { text-align: center; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: var(--s-8) 0 var(--s-7); }
.footer .wrap { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
.footer .fine { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 48ch; margin-top: 12px; }
.footer h5 { margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.footer .col { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer .col a { color: var(--ink-2); } .footer .col a:hover { color: var(--ink); }
.footer .col .mono { font-size: 13.5px; }
.footer .boundary { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); border-top: 1px solid var(--hairline); padding-top: 18px; margin-top: 8px; line-height: 1.6; }
.footer .addr { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--muted); line-height: 1.7; font-variant-numeric: tabular-nums; }
.footer-bottom { grid-column: 1 / -1; }

/* ---------- mobile sticky bar (≤640px, after first scroll) ---------- */
.sticky { display: none; }
@media (max-width: 640px) {
  .sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11,12,14,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--hairline-2);
    transform: translateY(110%); transition: transform .35s var(--ease); }
  .sticky.is-on { transform: translateY(0); }
  .sticky .btn { flex: 1; }
  .sticky-tel { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--hairline-2); border-radius: var(--r-2); color: var(--ink); background: var(--surface-2); }
  .sticky-tel svg { width: 20px; height: 20px; }
  body.has-sticky .footer { padding-bottom: 104px; }
}

/* ---------- HERO (S1) ---------- */
.hero { padding: var(--s-7) 0 var(--s-8); position: relative; }
@media (min-width: 1000px) { .hero { padding: 88px 0 64px; } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; } }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-copy .display { max-width: 12ch; }
.hero-visual { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-feed { display: none; }
@media (min-width: 1000px) { .hero-feed { display: block; } }

.plate-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .plate-grid { grid-template-columns: 1fr 240px; } }
.plate-sheet { padding: 16px 16px 8px; min-width: 0; }
@media (min-width: 720px) { .plate-sheet { padding: 20px; } }
.plate-meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; }
.plate-meta span:last-child { text-align: right; }
.plate-svg { width: 100%; height: auto; aspect-ratio: 640 / 440; margin-top: 8px; display: block; }
.rail { border-top: 1px solid var(--hairline); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; background: rgba(0,0,0,0.18); }
@media (min-width: 720px) { .rail { border-top: 0; border-left: 1px solid var(--hairline); padding: 20px 18px; } }
.rail-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted-2); text-transform: uppercase; }
.rail-rows { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rail-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rail-row > span:last-child { display: flex; gap: 8px; align-items: center; }
.rail-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.rail-tally { font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.04em; }
.stamp { display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--r-1); padding: 8px 12px; transform: rotate(-3deg); }

/* --- hero animation: every element carries --d (delay, s). Runs only while .plate.run --- */
.poly { stroke: var(--poly-stroke); stroke-width: 1.5; fill: none; stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.poly-fill { opacity: 0; }
.mline { stroke: var(--measure-line); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; }
.lbl { font-family: var(--mono); font-size: 11px; fill: var(--ink); opacity: 0; }
.lbl.flagged { fill: var(--flag); }
.poly-flag { opacity: 0; }
.rail-row.anim, .rail-note.anim, .rail-tally.anim { opacity: 0; }
.stamp.anim { opacity: 0; }

.run .poly        { animation: draw 0.9s var(--ease) calc(var(--d, 0) * 1s) forwards; }
.run .poly-fill   { animation: fillin 0.4s ease-out calc(var(--d, 0) * 1s) forwards; }
.run .mline       { animation: settle 0.6s ease-out calc(var(--d, 0) * 1s) forwards; }
.run .lbl         { animation: fillin 0.3s ease-out calc(var(--d, 0) * 1s) forwards; }
.run .poly-flag   { animation: fillin 0.4s ease-out calc(var(--d, 0) * 1s) forwards; }
.run .rail-row.anim, .run .rail-note.anim, .run .rail-tally.anim { animation: rise 0.4s var(--ease) calc(var(--d, 0) * 1s) forwards; }
.run .stamp.anim  { animation: stampin 0.35s var(--ease) calc(var(--d, 0) * 1s) forwards; }
.plate.is-paused * { animation-play-state: paused !important; }

@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes fillin  { to { opacity: 1; } }
@keyframes settle  { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; stroke-dasharray: 1 0; } }
@keyframes rise    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stampin { from { opacity: 0; transform: rotate(-3deg) scale(1.12); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }

/* final-frame state: reduced motion, or the browser cannot animate */
.plate.final .poly { stroke-dashoffset: 0; animation: none; }
.plate.final .poly-fill, .plate.final .lbl, .plate.final .poly-flag, .plate.final .rail-row.anim, .plate.final .rail-note.anim, .plate.final .rail-tally.anim, .plate.final .stamp.anim { opacity: 1; animation: none; transform: none; }
.plate.final .stamp.anim { transform: rotate(-3deg); }
.plate.final .mline { opacity: 1; stroke-dasharray: 1 0; animation: none; }

/* ---------- reveal utilities ---------- */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; width: auto; flex-wrap: wrap; }
  .ticker-track .dup { display: none; }
  .sticky { transition: none; }
  .plate .poly { stroke-dashoffset: 0; animation: none; }
  .plate .poly-fill, .plate .lbl, .plate .poly-flag, .plate .rail-row.anim, .plate .rail-note.anim, .plate .rail-tally.anim, .plate .stamp.anim { opacity: 1; animation: none; }
  .plate .mline { opacity: 1; stroke-dasharray: 1 0; animation: none; }
}

/* ---------- nav fit on narrow phones ----------
   Measured 2026-09-01 at 375px: brand + nav CTA + Menu need ~380px inside a 327px content box, so the
   Menu button clipped and documentElement.scrollWidth hit 401 on every page. The primary CTA sits in the
   hero's first screen and on the sticky bar, so below 480px the nav button yields. */
@media (max-width: 480px) {
  .nav .btn { display: none; }
}

/* ---------- 375px fit for mono figures ----------
   Lane 7 QA 2026-09-01: at 375px the two-up .counters column is ~151px; a 28px mono value such as
   "27 · 3 · 7" (10 ch ≈ 168px) broke mid-value, and .record .amt ("196 chases measured") did the same
   inside a 24px-padded card. 24px keeps every published figure on one line; nothing else changes. */
@media (max-width: 640px) {
  .counter .val { font-size: 24px; }
  .record .amt { font-size: 24px; }
  .ladder-line { overflow-wrap: anywhere; }
}

/* ---------- utilities ---------- */
.stack-2 { display: flex; flex-direction: column; gap: 8px; }
.stack-3 { display: flex; flex-direction: column; gap: 12px; }
.stack-4 { display: flex; flex-direction: column; gap: 16px; }
.stack-5 { display: flex; flex-direction: column; gap: 24px; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; } .mt-7 { margin-top: 48px; }
.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; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } }

/* ============================================================
   SAMPLE PAGES (sample-takeoff.html, sample.html)
   Measured-line table with mono numbers + grade chips; gap list;
   provenance block; worked-example card. 375px-first: rows
   restack as a grid under 640px, wide 6-column tables under 720px.
   ============================================================ */
/* ---------- line table ---------- */
.lines { width: 100%; border-collapse: collapse; }
.lines th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); padding: 0 12px 10px 0; border-bottom: 1px solid var(--hairline-2); white-space: nowrap; }
.lines th.r { text-align: right; }
.lines th:last-child, .lines td:last-child { padding-right: 0; }
.lines td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; font-size: 15px; line-height: 1.45; color: var(--ink); }
.lines td.n { font-family: var(--mono); font-size: 12px; color: var(--muted-2); width: 36px; padding-top: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.lines .basis { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; max-width: 72ch; }
.lines td.v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; text-align: right; }
.lines td.v.open { color: var(--muted); }
.lines td.m { font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.5; }
.lines td.g { text-align: right; width: 1%; }
.lines tr.tot td { border-bottom: 0; border-top: 1px solid var(--hairline-2); font-weight: 500; }
.lines tr.tot td.v { color: var(--ink); }
@media (max-width: 640px) {
  .lines-3, .lines-3 tbody { display: block; }
  .lines-3 thead { display: none; }
  .lines-3 tr { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "n q q" "n v g"; column-gap: 10px; row-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
  .lines-3 td { display: block; padding: 0; border: 0; }
  .lines-3 td.n { grid-area: n; width: auto; padding-top: 3px; }
  .lines-3 td.q { grid-area: q; }
  .lines-3 td.v { grid-area: v; text-align: left; white-space: normal; align-self: center; }
  .lines-3 td.g { grid-area: g; width: auto; align-self: center; }
}
@media (max-width: 720px) {
  .lines-wide, .lines-wide tbody { display: block; }
  .lines-wide thead { display: none; }
  .lines-wide tr { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .lines-wide tr.tot { border-top: 1px solid var(--hairline-2); border-bottom: 0; }
  .lines-wide td { display: block; padding: 0; border: 0; }
  .lines-wide td.full { grid-column: 1 / -1; }
  .lines-wide td[data-l]::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
  .lines-wide td.v { text-align: left; white-space: normal; }
  .lines-wide td.g { text-align: left; width: auto; }
  .lines-wide td:empty { display: none; }
}

/* ---------- secondary-page display + tally row ---------- */
.display-2 { font-size: clamp(40px, 5.2vw, 72px); font-weight: 450; letter-spacing: -0.03em; line-height: 1.05; text-wrap: pretty; max-width: 16ch; }
.tally { align-items: center; }
.tally .grade { padding: 6px 11px; font-size: 11px; }

/* ---------- trade block ---------- */
.trade { padding: var(--s-7) 0 0; border-top: 1px solid var(--hairline); margin-top: var(--s-7); }
.trade:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.trade-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.trade-head .desc { font-size: 15px; color: var(--muted); line-height: 1.5; max-width: 72ch; }
.trade-head .chip-row { margin-top: 2px; }

/* ---------- tier key ---------- */
.tier-key { display: flex; flex-direction: column; }
.tier-key .row { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hairline); align-items: flex-start; }
.tier-key .row:last-child { border-bottom: 1px solid var(--hairline); }
.tier-key .row > .grade { flex: none; margin-top: 3px; min-width: 76px; justify-content: center; }
.tier-key .row p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.tier-key .row p b { color: var(--ink); font-weight: 500; }

/* ---------- worked example card ---------- */
.example { padding: 24px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .example { padding: 32px; grid-template-columns: 1fr 260px; gap: 32px; align-items: start; } }
.example p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.example .feed { padding: 2px 14px 4px; }

/* ---------- gap list ---------- */
.gaps { list-style: none; margin: 0; padding: 0; counter-reset: gap; }
.gaps li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.gaps li:last-child { border-bottom: 1px solid var(--hairline); }
.gaps li::before { counter-increment: gap; content: counter(gap, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em; padding-top: 3px; flex: none; width: 28px; }

/* ---------- provenance ---------- */
.prov { display: grid; grid-template-columns: 1fr; gap: 10px 24px; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .prov { grid-template-columns: 120px 1fr; gap: 14px 24px; } }
.prov dt { color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; padding-top: 3px; }
.prov dd { margin: 0; }
.prov dd + dt { border-top: 1px solid var(--hairline); padding-top: 14px; }
@media (min-width: 640px) { .prov dd + dt { border-top: 0; padding-top: 3px; } }

/* ---------- key/value strip (doc coverage, wage basis, signed) ---------- */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 800px) { .kv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kv > div { border-top: 1px solid var(--hairline-2); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kv .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.kv .v { font-family: var(--mono); font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.4; }

/* ---------- next-step card ---------- */
.next { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 800px) { .next { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; } }
.next p { font-size: 15px; color: var(--ink-2); max-width: 60ch; }