/* Inflect Edge — site foundation (Phase 1, hand-authored, zero-build).
 * Design system: docs/design-tokens.css + HANDOFF §4. Two fonts, hard ceiling.
 * Restraint IS the look: accent reserved for the ONE key element per view. */

/* ---------- tokens ---------- */
:root {
  --primary:#101820; --accent:#d97706; --text:#1f2937; --muted:#6b7280;
  --paper:#ffffff; --wash:#f7f5f0; --rule:#e2ddd3; --grey:#9ca3af;
  --sand-1:#e9e5dc; --sand-2:#cfc9bd; --sand-3:#c9c3b6; --ink-1:#16181d; --ink-2:#3a3d45;
  --ok:#15803d; --err:#b91c1c;
  /* AA-contrast accent for text/fills on light bg (#d97706 is 3.19:1 — fails AA) */
  --accent-deep:#b45309; --accent-deep-hover:#92400e;
  --font-display:Georgia,"Times New Roman",serif;
  --font-body:"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:1080px; --gutter:24px;
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  font-family:var(--font-body); font-size:16px; line-height:1.5; color:var(--text);
  background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg { max-width:100%; display:block; }
a { color:inherit; }
button,input,select { font:inherit; color:inherit; }

/* ---------- typography ---------- */
h1,h2,h3,.display { font-family:var(--font-display); font-weight:400; }
h1,.display { line-height:1.12; letter-spacing:-.01em; }
h1 { font-size:clamp(2rem,5vw,3rem); }
h2 { font-size:clamp(1.6rem,3.4vw,2.1rem); line-height:1.15; letter-spacing:-.01em; }
h3 { font-size:1.15rem; line-height:1.2; }
p { line-height:1.55; }
.lede { color:var(--muted); font-size:1.075rem; }
.kicker {
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:600;
}
.mono {
  font-family:var(--font-body); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------- layout ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.section { padding:72px 0; }
.section--tight { padding:52px 0; }
.center { text-align:center; }
.center .lede { max-width:44ch; margin-left:auto; margin-right:auto; }
.hairline { border-top:1px solid var(--rule); }
.stack > * + * { margin-top:16px; }
.wash { background:var(--wash); }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--rule);
}
.site-header .bar { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand .mark { width:20px; height:20px; color:var(--primary); }
.brand .word { font-size:.85rem; font-weight:700; letter-spacing:.28em; color:var(--primary); }
.nav { display:flex; align-items:center; gap:26px; }
.nav a { text-decoration:none; font-size:.9rem; color:var(--text); }
.nav a:hover { color:var(--accent-deep); }
.nav-toggle { display:none; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.95rem; line-height:1; border-radius:6px;
  padding:13px 22px; cursor:pointer; border:1.5px solid transparent; text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.btn--primary { background:var(--primary); color:#fff; }
.btn--primary:hover { background:var(--ink-1); }
.btn--accent { background:var(--accent-deep); color:#fff; }
.btn--accent:hover { background:var(--accent-deep-hover); }
.btn--outline { border-color:var(--sand-2); color:var(--text); background:var(--paper); }
.btn--outline:hover { border-color:var(--muted); }
.btn--block { width:100%; }
.btn--sm { padding:9px 16px; font-size:.85rem; }

/* ---------- pill chips ---------- */
.badge {
  display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  padding:3px 10px; border-radius:99px; text-transform:uppercase;
}
.badge--accent { background:var(--accent-deep); color:#fff; }
.badge--outline { border:1.5px solid var(--rule); color:var(--muted); }

/* ---------- dark band ---------- */
.band-dark { background:var(--primary); color:#fff; }
.band-dark h2 { color:#fff; }
.band-dark .lede { color:rgba(255,255,255,.62); }
.band-dark .kicker { color:var(--accent); }

/* ---------- stat band ---------- */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.stat .num { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.2rem); line-height:1; color:var(--primary); }
.stat .lbl { margin-top:12px; font-size:.82rem; color:var(--muted); line-height:1.45; }
.band-dark .stat .num { color:#fff; }
.band-dark .stat .lbl { color:rgba(255,255,255,.6); }

/* ---------- rungs (3-step) ---------- */
.cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.rung .step { font-size:.72rem; letter-spacing:.14em; color:var(--muted); }
.rung .rung-num { font-family:var(--font-display); font-size:1.6rem; color:var(--primary); }
.rung h3 { margin:10px 0 8px; }
.rung p { font-size:.92rem; color:var(--muted); }
.rung .tag {
  display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:600; margin-bottom:6px;
}

/* ---------- comparison table ---------- */
.compare { width:100%; border-collapse:collapse; margin-top:32px; font-size:.9rem; }
.compare th,.compare td { text-align:left; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.12); }
.compare thead th { font-weight:600; color:rgba(255,255,255,.72); font-size:.8rem; }
.compare tbody th { font-weight:400; color:rgba(255,255,255,.6); }
.compare td { color:rgba(255,255,255,.85); }
.compare .col-us { background:rgba(217,119,6,.14); color:#fff; font-weight:600; }
.compare thead .col-us { color:var(--accent); }
.compare-wrap { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compare { min-width:520px; }

/* ---------- evidence (browser frame) ---------- */
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:start; }
.browser-frame { border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:#fff; }
.browser-bar { height:34px; background:var(--sand-1); display:flex; align-items:center; gap:6px; padding:0 12px; }
.browser-bar span { width:9px; height:9px; border-radius:50%; background:var(--sand-3); flex:none; }
.browser-bar .url { flex:1; min-width:0; background:var(--wash); border-radius:5px; font-size:.78rem; color:var(--muted); padding:3px 10px; margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.finding { padding:22px; }
.finding .fn-head { display:flex; gap:10px; align-items:baseline; }
.finding .fn-num { font-family:var(--font-display); color:var(--accent-deep); }
.finding .fn-title { font-family:var(--font-display); font-size:1.15rem; }
.finding .quote { border-left:2px solid var(--rule); padding:6px 0 6px 14px; margin:16px 0; color:var(--text); font-size:.95rem; }
.finding .fn-copy { font-size:.9rem; color:var(--muted); }
.finding .fn-tail { margin-top:16px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- pricing ---------- */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.plan { border:1px solid var(--rule); border-radius:10px; padding:26px 22px; background:var(--paper); }
.plan--feature { background:var(--primary); border-color:var(--primary); color:#fff; position:relative; }
.plan .plan-name { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.plan--feature .plan-name { color:rgba(255,255,255,.6); }
.plan .price { font-family:var(--font-display); font-size:2rem; margin:8px 0 2px; }
.plan .price small { font-size:.9rem; color:var(--muted); font-family:var(--font-body); }
.plan--feature .price small { color:rgba(255,255,255,.6); }
.plan .per { font-size:.82rem; color:var(--muted); }
.plan--feature .per { color:rgba(255,255,255,.6); }
.plan ul { list-style:none; padding:0; margin:18px 0; }
.plan li { font-size:.88rem; padding:6px 0; border-bottom:1px solid var(--rule); }
.plan--feature li { border-color:rgba(255,255,255,.12); }
.plan .rec {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--accent-deep); color:#fff; font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 12px; border-radius:99px;
}
.plan .fineprint { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:12px; text-align:center; }
.plan--feature .fineprint { color:rgba(255,255,255,.55); }
.single-audit { border:1px solid var(--rule); border-radius:10px; padding:24px; max-width:460px; margin:28px auto 0; text-align:center; }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--rule); padding:34px 0; }
.site-footer .row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-footer .word { font-size:.75rem; font-weight:700; letter-spacing:.28em; color:var(--primary); }
.site-footer .tag { font-size:.82rem; color:var(--muted); text-align:center; flex:1; min-width:220px; }
.site-footer .links { display:flex; gap:18px; }
.site-footer .links a { font-size:.85rem; color:var(--muted); text-decoration:none; }
.site-footer .links a:hover { color:var(--accent-deep); }

/* ---------- utility CTA rule row ---------- */
.cta-rule { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.cta-rule .note { font-size:.85rem; color:var(--muted); }

.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; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .cols-3,.price-grid,.stats { grid-template-columns:1fr; gap:28px; }
  .split { grid-template-columns:1fr; gap:32px; }
  .nav { gap:16px; }
  .section { padding:52px 0; }
}
@media (max-width:560px){
  .nav { gap:12px; }
  .nav .nav-hide { display:none; }
  .brand .word { letter-spacing:.18em; font-size:.78rem; }
  .site-footer .row { flex-direction:column; text-align:center; }
  .cta-rule { flex-direction:column; align-items:stretch; gap:12px; }
}