/* Whysaid — the Proof Engine for AI.
   Visual system: a dark instrument panel lit by one spectral gradient. Depth comes
   from layered surfaces and glow, never from drop shadows on flat cards.
   Accessibility is structural: real contrast, visible focus, reduced-motion honoured,
   and status never carried by colour alone. */
:root{
  --bg:#0A0A0F; --bg2:#0E0E15;
  --surface:#15151C; --surface2:#1C1C25; --line:#2E2E3A; --line2:#3A3A48;
  --ink:#FFFFFF; --dim:#D6D5CC; --faint:#A3A29A;
  --accent:#8FD3FF; --accent-ink:#0A0A0F;
  --good:#4ADE80; --warn:#FBBF24; --bad:#F87171;
  --c1:#38F0FF; --c2:#5694FF; --c3:#A855F7; --c4:#FF4D9D;
  --grad:linear-gradient(100deg,var(--c1),var(--c2),var(--c3),var(--c4));
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font:17px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Ambient light behind everything — the page sits inside the instrument, not on it. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60rem 40rem at 78% -10%, rgba(168,85,247,.14), transparent 60%),
    radial-gradient(50rem 34rem at 10% 4%, rgba(56,240,255,.10), transparent 60%),
    radial-gradient(44rem 30rem at 50% 108%, rgba(255,77,157,.09), transparent 62%);
}
.wrap{max-width:900px;margin:0 auto;padding:0 20px;position:relative;z-index:1;
  width:100%;overflow-wrap:break-word}
img,svg{max-width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:100}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
a{color:var(--accent)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:rgba(10,10,15,.82);backdrop-filter:blur(14px) saturate(1.2)}
nav{display:flex;align-items:center;gap:22px;padding:13px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:750;color:var(--ink);
  text-decoration:none;font-size:17px;letter-spacing:-.01em}
.logo svg{width:28px;height:28px;flex:none}
nav .links{margin-left:auto;display:flex;gap:20px;font-size:15px;flex-wrap:wrap}
nav .links a{color:var(--dim);text-decoration:none}
nav .links a:hover,nav .links a:focus-visible{color:var(--ink)}
nav .links a.cta-link{color:var(--accent-ink);background:var(--accent);
  padding:7px 14px;border-radius:8px;font-weight:700}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center;
  padding:70px 0 46px}
@media (max-width:760px){.hero{grid-template-columns:1fr;gap:24px;padding:44px 0 32px}
  .hero-art{order:-1;max-width:230px;margin:0 auto}}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
h1{font-size:clamp(29px,5.2vw,52px);line-height:1.08;letter-spacing:-.028em;margin:14px 0 16px;
  overflow-wrap:break-word;hyphens:auto}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:19px;color:var(--dim);max-width:56ch}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 34px rgba(86,148,255,.42))}
@media (prefers-reduced-motion:no-preference){
  .spin{transform-origin:50% 50%;animation:spin 26s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
}

/* ---------- type ---------- */
h2{font-size:clamp(24px,3.2vw,32px);letter-spacing:-.018em;margin:64px 0 12px;line-height:1.2}
h2::after{content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--grad);margin-top:12px}
h3{font-size:18px;margin:26px 0 8px;letter-spacing:-.01em}
p{color:var(--dim);max-width:64ch}
.lede,strong{color:var(--ink)}
p strong,li strong{color:var(--ink)}
ul,ol{color:var(--dim);padding-left:22px;max-width:64ch}
li{margin:8px 0}
.note{font-size:14px;color:var(--faint)}

/* ---------- buttons ---------- */
.cta{display:flex;gap:12px;margin:26px 0 8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:14px 24px;border-radius:11px;font-weight:700;font-size:16px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn.primary{background:var(--grad);color:#08080D;
  box-shadow:0 8px 26px -10px rgba(86,148,255,.85)}
.btn.ghost{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.02)}

/* ---------- surfaces ---------- */
.card{background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;margin:26px 0}
.grid .card h3{margin:0 0 6px;font-size:17px}
.grid .card p{margin:0;font-size:15px}
.step{font-size:13px;font-weight:800;letter-spacing:.1em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- the report visual ---------- */
.report{background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:26px 0}
.report h3{margin:0 0 4px}
.engines{display:flex;gap:26px;flex-wrap:wrap;margin:18px 0 24px}
.dial{display:flex;align-items:center;gap:12px}
.dial svg{width:74px;height:74px;flex:none}
.dial .val{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.dial .lbl{font-size:13px;color:var(--faint);margin-top:3px}
.rows{display:flex;flex-direction:column;gap:10px}
/* min-width:0 is load-bearing: grid children default to min-width:auto, so a
   nowrap pill refuses to shrink and widens the whole page on a phone. */
.row{display:grid;grid-template-columns:1fr auto auto;gap:10px 12px;align-items:center;
  padding:12px 14px;border-radius:11px;background:rgba(255,255,255,.028);
  border:1px solid var(--line)}
.row > *{min-width:0}
.row .q{font-size:15px;color:var(--ink)}
.row .who{font-size:13px;color:var(--faint);grid-column:1/-1;margin-top:-2px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  letter-spacing:.04em;padding:5px 10px;border-radius:999px;white-space:nowrap}
.pill.in{color:var(--good);background:rgba(74,222,128,.13);border:1px solid rgba(74,222,128,.34)}
.pill.out{color:var(--bad);background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.32)}

/* ---------- pricing ---------- */
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0}
.tier{background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.tier.featured{border-color:transparent;background:
  linear-gradient(var(--surface2),var(--surface)) padding-box,var(--grad) border-box;
  border:1px solid transparent}
.tier .tag{position:absolute;top:-11px;left:24px;font-size:11px;font-weight:800;
  letter-spacing:.1em;padding:4px 10px;border-radius:999px;background:var(--grad);color:#08080D}
.tier .amt{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tier .per{font-size:15px;color:var(--faint);font-weight:500}
.tier ul{padding-left:18px;font-size:15px;margin:14px 0 0}

/* ---------- form ---------- */
form.signup{background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:24px 0;
  max-width:540px}
form.signup label{display:block;font-size:14px;font-weight:650;color:var(--ink);margin:14px 0 6px}
form.signup input{width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--line2);
  background:rgba(0,0,0,.35);color:var(--ink);font-size:16px}
form.signup input::placeholder{color:#6E6D79}
form.signup .btn{margin-top:20px;width:100%;text-align:center}
#result{margin-top:14px;font-size:15px;min-height:1.4em}

footer{border-top:1px solid var(--line);margin-top:76px;padding:34px 0 64px;
  color:var(--faint);font-size:15px;position:relative;z-index:1}
footer a{color:var(--dim)}


/* ---------- phones ---------- */
@media (max-width:640px){
  body{font-size:16px}
  /* Stack the report rows; three columns of nowrap content never fit a phone. */
  .row{grid-template-columns:1fr;gap:8px}
  .row .who{margin-top:0}
  .engines{gap:18px}
  .dial svg{width:62px;height:62px}
  h2{margin:44px 0 10px}
  .btn{width:100%;text-align:center}
  .cta{gap:10px}
  nav{gap:14px;row-gap:10px}
  nav .links{gap:14px;font-size:14px;margin-left:0;width:100%}
  .tier .amt{font-size:32px}
}

.switch{display:inline-flex;gap:10px;align-items:center;font-size:14px;padding:7px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.03);margin:0 0 18px}
.switch strong{color:var(--ink)}
.switch a{color:var(--faint)}
.tier .btn{margin-top:14px;width:100%;text-align:center}

.pill.warn{color:var(--warn,#FAB219);background:rgba(250,178,25,.12);border:1px solid rgba(250,178,25,.32)}

/* ---------- always fit the device ----------
   Long URLs in verification receipts are the worst offender: an unbroken 90
   character link forces a minimum width no phone has, and the whole page then
   scrolls sideways. Break anywhere rather than let one token set the layout. */
img,svg,video,canvas{max-width:100%;height:auto}
.rows li,.row .q,.row .who,.note,.lede,p,li{overflow-wrap:anywhere;word-break:break-word}
.rows li a{overflow-wrap:anywhere}
.switch{flex-wrap:wrap;max-width:100%}
main,.wrap,.card,.tier,.row{min-width:0}
table{display:block;overflow-x:auto;max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}

@media (max-width:640px){
  .rows li{padding-left:0}
  .switch{font-size:13px;padding:6px 12px}
  .amt{font-size:34px}
  h1{font-size:30px;line-height:1.15}
}

/* ================= GLASS =================
   Depth done with layers, not decoration: a saturated blur behind translucent
   surfaces, a specular highlight on the top edge where light would actually
   catch, and a soft shadow beneath. Contrast is preserved -- every surface keeps
   an opaque colour underneath the translucency so text never sits on whatever
   happens to be behind it, and the whole thing degrades to flat panels where
   backdrop-filter is unsupported. */
:root{
  --glass: rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.075);
  --edge: rgba(255,255,255,.14);
  --spec: rgba(255,255,255,.55);
  --glow-a:#38F0FF; --glow-b:#A855F7; --glow-c:#FF4D9D;
}

.card,.tier,.row,.switch,.rows li,header{
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.10),      /* specular top edge */
    0 1px 2px rgba(0,0,0,.35),
    0 12px 34px -14px rgba(0,0,0,.75);
}
header{border-width:0 0 1px 0;position:sticky;top:0;z-index:20}

.tier{position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
.tier:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.14),0 20px 48px -18px rgba(0,0,0,.85)}
.tier.featured::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--glow-a),var(--glow-b),var(--glow-c));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* Buttons get a glass body and a light sweep on hover. */
.btn{position:relative;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -10px rgba(0,0,0,.8)}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn:hover::after{transform:translateX(120%);transition:transform .7s ease}
.btn.ghost{background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

.pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.amt{text-shadow:0 0 34px rgba(56,240,255,.22)}
h1{letter-spacing:-.022em}

/* Motion and translucency are both preferences, not decisions we make for people. */
@media (prefers-reduced-motion:reduce){
  .tier,.tier:hover,.btn::after,.btn:hover::after{transition:none;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .card,.tier,.row,.switch,.rows li,header,.btn.ghost{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface,#17171C)}
  body::before,body::after{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.tier,.row,.switch,.rows li,header{background:var(--surface,#17171C)}
}

/* ================= EDITORIAL =================
   Long-form answer pages carry the keyword work, so they get real typographic
   care: a measure that does not exceed ~68 characters, headings that separate
   sections without shouting, and a lead answer block that an assistant can lift
   verbatim. */
.answer{
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--glow-a),var(--glow-b)) 1;
  padding:2px 0 2px 18px;margin:26px 0 30px}
.answer .q{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.answer p{font-size:19px;line-height:1.55;color:var(--ink);max-width:34em}
main p,main li{max-width:38em}
main h2{position:relative;padding-top:6px}
main h2::before{content:"";position:absolute;top:-14px;left:0;width:44px;height:2px;
  background:linear-gradient(90deg,var(--glow-a),var(--glow-b));border-radius:2px}
main ol{counter-reset:s;list-style:none;padding-left:0}
main ol li{counter-increment:s;position:relative;padding-left:34px;margin:12px 0}
main ol li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:7px;font-size:12px;font-weight:800;
  display:grid;place-items:center;color:#08080D;
  background:linear-gradient(135deg,var(--glow-a),var(--glow-b))}
.row .q{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* charts and data tables */
.chart{margin:22px 0 30px;max-width:100%}
.chart figcaption{font-size:14px;color:var(--ink);margin-bottom:12px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
table{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0;
  display:block;overflow-x:auto}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* ================= INSTRUMENT =================
   Craig, 2026-08-21: "not so 'AI GENERATED' it looks like every website now."

   He is right, and the tell was specific: a four-stop cyan -> blue -> purple ->
   pink gradient on every heading, eyebrow, button and border, three radial glow
   blobs behind the page, and backdrop-filter blur on every surface. That exact
   combination ships on roughly every AI product site built since 2024, which
   makes it read as generated rather than designed -- a bad look for a company
   whose entire pitch is telling real work from plausible-looking output.

   What replaces it is drawn from what the product actually is: an instrument.
   Test equipment, a scope trace, a control panel. The rules that follow:

     - ONE accent, and it is signal amber. Not cyan, not violet, not a gradient.
       Amber reads as measurement and is the one hue the generated look never uses.
     - Depth comes from HAIRLINES and flat planes, never blur and never glow.
       A 1px rule at the right value is more convincing than 18px of blur.
     - The background is a blueprint grid, not an aurora. Structure, not weather.
     - Numbers are monospace and tabular. Data is the ornament; there is no other.
     - Corners are 3px. Bubbly radii read consumer; this is an instrument.
     - Colour carries meaning or it does not appear. good/warn/bad stay reserved.

   Contrast, focus rings, reduced-motion and reduced-transparency handling from
   the layers above are preserved -- this changes how it looks, not who can use it. */
:root{
  /* Neutral graphite. The old #0A0A0F had a violet cast that the blobs amplified. */
  --bg:#0B0C0D; --bg2:#0E0F11;
  --surface:#121416; --surface2:#161A1D;
  --line:#22262A; --line2:#2E343A;
  --ink:#F2F4F5; --dim:#B9C0C4; --faint:#7C868C;

  --signal:#FFB020;            /* the one accent: amber */
  --signal-dim:#B87A12;
  --steel:#7FB2CC;             /* links and secondary marks */
  --accent:var(--steel); --accent-ink:#0B0C0D;

  --good:#5BC98B; --warn:#E0A32E; --bad:#E5716B;

  /* Kept as a variable because 16 pages reference it. It is no longer a rainbow. */
  --grad:linear-gradient(90deg,var(--signal),var(--signal-dim));
  --c1:var(--signal); --c2:var(--signal); --c3:var(--steel); --c4:var(--steel);
  --glow-a:var(--signal); --glow-b:var(--signal-dim); --glow-c:var(--steel);
  --glass:transparent; --glass-2:transparent; --edge:var(--line);

  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --radius:3px;
}

/* Blueprint grid. Fixed, so the page reads as content laid ON an instrument
   rather than a texture that scrolls with it. Faded out toward the bottom so it
   never competes with body copy. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 88%);
  filter:none;height:auto;
}
/* A single horizon rule under the header band — the instrument's datum line. */
body::after{
  content:"";position:fixed;top:0;left:0;right:0;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--signal-dim) 18%,var(--signal-dim) 82%,transparent);
  opacity:.5;background-image:none;mask-image:none;-webkit-mask-image:none;
}

/* ---- surfaces: flat planes, hairline rules, no blur, no inner glow ---- */
.card,.tier,.row,.switch,.rows li,header,form.signup,.report{
  background:var(--surface);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}
header{background:rgba(11,12,13,.94);border-width:0 0 1px 0}
.tier:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.tier.featured{border:1px solid var(--signal-dim);background:var(--surface2)}
.tier.featured::before{display:none}
.tier .tag{background:var(--signal);color:#0B0C0D;border-radius:2px;letter-spacing:.14em}

/* Viewfinder brackets. Two corner marks per panel, the way a scope or a camera
   frames a measurement. Cheap, structural, and nothing generated looks like it. */
.card,.tier{position:relative}
.card::after,.tier::after{
  content:"";position:absolute;top:-1px;right:-1px;width:10px;height:10px;
  border-top:1px solid var(--signal);border-right:1px solid var(--signal);
  opacity:.55;pointer-events:none}
.card::before,.tier::before{
  content:"";position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;
  border-bottom:1px solid var(--signal);border-left:1px solid var(--signal);
  opacity:.55;pointer-events:none}

/* ---- type: the gradient text goes away; amber does the emphasis ---- */
.eyebrow{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--signal);font-family:var(--mono);letter-spacing:.22em;font-weight:600;
  font-size:11px}
.eyebrow::before{content:"// "}
h1 .grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--signal)}
h2::after{background:var(--signal);width:28px;height:2px;border-radius:0}
main h2::before{background:var(--signal);border-radius:0;width:28px}
.step{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--signal);font-family:var(--mono);letter-spacing:.14em}

/* ---- numbers are monospace and tabular. Data is the ornament. ---- */
.amt,.dial .val,.pill,.tier .amt,.row .q,code,pre,th,td,.mono{
  font-family:var(--mono);font-variant-numeric:tabular-nums;text-shadow:none}
.tier .amt{letter-spacing:-.02em;font-weight:600}
.pill{border-radius:2px;letter-spacing:.06em;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- buttons: no light sweep, no glow, no lift ---- */
.btn{border-radius:2px;box-shadow:none;transition:none;font-size:15px;
  letter-spacing:.01em}
.btn:hover{transform:none}
.btn::after{display:none}
.btn.primary{background:var(--signal);color:#0B0C0D;border:1px solid var(--signal)}
.btn.primary:hover{background:#FFC24D;border-color:#FFC24D}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal)}

/* ---- inputs read as fields on a panel ---- */
form.signup input{border-radius:2px;background:#0B0C0D;border:1px solid var(--line2);
  font-family:var(--mono);font-size:15px}
form.signup input:focus{border-color:var(--signal)}
.switch{border-radius:2px}

/* ---- hero art: a diagram, not a glowing object ---- */
.hero-art svg{filter:none}
.spin{animation:none!important}

/* ---- editorial accents follow the same rule ---- */
.answer{border-left:2px solid var(--signal);border-image:none;
  background:linear-gradient(90deg,rgba(255,176,32,.045),transparent 60%);
  padding:12px 0 12px 16px}
.answer .q{color:var(--signal);font-family:var(--mono)}
main ol li::before{background:transparent;border:1px solid var(--signal);
  color:var(--signal);border-radius:2px;font-family:var(--mono)}
thead th{font-family:var(--mono);letter-spacing:.1em;color:var(--faint)}
tbody tr:hover{background:rgba(255,176,32,.05)}
a{color:var(--steel);text-underline-offset:3px}
nav .links a.cta-link{background:var(--signal);color:#0B0C0D;border-radius:2px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em}

/* ---- a telemetry strip: real measured numbers, used as the graphic ---- */
.telemetry{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  border:1px solid var(--line);border-top:2px solid var(--signal-dim);
  margin:26px 0;background:var(--surface)}
.telemetry div{padding:14px 16px;border-right:1px solid var(--line);min-width:0}
.telemetry div:last-child{border-right:0}
.telemetry .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.telemetry .v{font-family:var(--mono);font-size:23px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);margin-top:5px;line-height:1}
.telemetry .v.sig{color:var(--signal)}
.telemetry .n{font-size:12px;color:var(--faint);margin-top:4px}

@media (prefers-reduced-transparency:reduce){
  .card,.tier,.row,.switch,.rows li,header,.btn.ghost{background:var(--surface)}
  body::before{display:block}
}
@media (max-width:640px){
  .telemetry div{border-right:0;border-bottom:1px solid var(--line)}
  .telemetry div:last-child{border-bottom:0}
}

/* The trace is a diagram with labels, not an ornament: at .65fr the type inside it
   rendered too small to read, which is a layout bug rather than a taste call. */
.hero{grid-template-columns:1.05fr .95fr;gap:30px;align-items:start;padding:64px 0 40px}
.hero-art{margin-top:6px}
@media (max-width:900px){.hero{grid-template-columns:1fr}
  .hero-art{order:2;max-width:420px;margin:8px 0 0}}
/* one amber tick per heading, not two */
main h2::before{display:none}

/* Specificity, not cascade order: base `.btn.primary` (0,2,0) carries a blue glow
   that `.btn{box-shadow:none}` (0,1,0) cannot reach, so the halo survived the
   re-skin and was visible under the hero button. Matched at the same weight. */
.btn.primary,.btn.ghost,.btn:hover,.btn.primary:hover{box-shadow:none;text-shadow:none}
.btn{padding:13px 20px}
.cta{gap:10px;flex-wrap:wrap}

/* Tables: nowrap + right-align is correct for a column of numbers and wrong for a
   column of sentences. The five-kinds table on /for-agents rendered as prose
   running off the right edge into a scroll nobody would find. Prose wraps and
   left-aligns; numeric columns keep their alignment via .numlast. */
td{white-space:normal}
table.prose th,table.prose td{text-align:left;vertical-align:top}
table.prose.numlast th:last-child,
table.prose.numlast td:last-child{text-align:right;white-space:nowrap}
th{white-space:nowrap}
table{border:1px solid var(--line);border-collapse:collapse}
thead th{border-bottom:1px solid var(--line2);background:var(--surface)}

/* ================= BUREAU =================
   Craig: "It still looks computer generated. Make this fancy."

   He was right again, and the second attempt failed for a subtler reason than the
   first. Flat dark + monospace + one accent is not the AI-slop template, but it IS
   the developer-tool template -- equally generated, just from a different mould.
   Neither reads as designed, because neither has any MATERIAL.

   So the genre changes rather than the palette. Whysaid issues receipts, stamps
   verdicts and holds evidence: it is an audit house. The visual language of audit
   houses is engraving -- warm ink-black rather than cold graphite, gold foil rather
   than signal amber, a high-contrast editorial serif for the voice, monospace kept
   strictly for evidence, double rules, small caps, section numerals, a seal. It is
   centuries old, it is unmistakably deliberate, and no generated landing page
   looks like it.

   Rules:
     - SERIF for what we say. MONO for what we measured. Never the reverse: the
       distinction between assertion and evidence is the whole product.
     - Gold is FOIL -- a highlight, a body and a shadow -- not a flat swatch.
       Used on seals, rules and numerals. Never on body text.
     - Every surface carries grain. Flat #hex is what makes CSS look like CSS.
     - Rules are engraved: a hairline, a gap, a second heavier line.
   Contrast, focus, reduced-motion and reduced-transparency handling all survive. */
:root{
  --bg:#0C0B09; --bg2:#100E0B;
  --surface:#141210; --surface2:#191612;
  --line:#2A2620; --line2:#3A342A;
  --ink:#F4F1EA; --dim:#C3BCAE; --faint:#8A8172;

  --gold:#D9B45B; --gold-hi:#F4E3B0; --gold-lo:#8C6F2A;
  --foil:linear-gradient(160deg,var(--gold-hi) 0%,var(--gold) 38%,var(--gold-lo) 72%,var(--gold) 100%);

  --signal:var(--gold); --signal-dim:var(--gold-lo);
  --steel:#9FB8C4; --accent:var(--gold); --accent-ink:#0C0B09;
  --good:#7FBF8E; --warn:#D9B45B; --bad:#C97A6D;
  --grad:var(--foil);

  --display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,
            "Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --body:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:2px;
}
body{background:var(--bg);font-family:var(--body)}

/* Grain. A single tiny turbulence tile over the whole page, at an opacity you
   should never consciously see -- it exists so the black reads as a printed
   surface instead of a hex value. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"),
    linear-gradient(to right, rgba(217,180,91,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217,180,91,.045) 1px, transparent 1px);
  background-size:160px 160px, 96px 96px, 96px 96px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 92%);
}
body::after{
  content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:0;
  background:var(--foil);opacity:.85}

/* ---- voice: serif display, generous scale contrast ---- */
h1,h2,h3,.tier .per,.answer p,.lede{font-family:var(--display)}
h1{font-weight:600;letter-spacing:-.012em;line-height:1.02;
  font-size:clamp(34px,6vw,64px)}
h1 .grad{background:var(--foil);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-style:italic}
h2{font-weight:600;letter-spacing:-.006em;font-size:clamp(26px,3.6vw,38px)}
h3{font-weight:600;font-size:20px;letter-spacing:0}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--dim)}
p,li{font-family:var(--body)}

/* Engraved rule under section heads: hairline, gap, foil. */
h2::after{content:"";display:block;width:100%;max-width:180px;height:3px;
  background:linear-gradient(var(--gold-lo) 0 1px,transparent 1px 2px,var(--gold) 2px 3px);
  margin-top:14px;border-radius:0;opacity:.9}

/* Small-caps bureau label */
.eyebrow{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);background:none;
  -webkit-background-clip:border-box;background-clip:border-box}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:12px}
.step{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.26em;
  color:var(--gold);background:none;-webkit-background-clip:border-box;background-clip:border-box}

/* ---- surfaces: grained panels with a foil top edge ---- */
.card,.tier,.report,form.signup,.telemetry{
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 40%),
    var(--surface);
  border:1px solid var(--line);border-top:1px solid var(--gold-lo);
  border-radius:var(--radius);box-shadow:none;position:relative}
.card::after,.tier::after,.card::before,.tier::before{display:none}
.tier.featured{border:1px solid var(--gold-lo);border-top:2px solid var(--gold);
  background:linear-gradient(180deg,rgba(217,180,91,.055),transparent 46%),var(--surface2)}
.tier .tag{background:var(--foil);color:#0C0B09;font-family:var(--body);
  font-weight:800;letter-spacing:.16em}
header{background:rgba(12,11,9,.95);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:0}

/* ---- evidence stays monospace ---- */
.amt,.tier .amt,.dial .val,.pill,.row .q,code,pre,th,td,.mono,
.telemetry .k,.telemetry .v,.telemetry .n{font-family:var(--mono)}
.tier .amt{font-weight:500;font-size:36px;color:var(--ink)}

/* ---- buttons: foil primary, engraved ghost ---- */
.btn{font-family:var(--body);font-weight:700;letter-spacing:.02em;border-radius:2px}
.btn.primary{background:var(--foil);color:#0C0B09;border:1px solid var(--gold-lo)}
.btn.primary:hover{background:linear-gradient(160deg,#FBEFC8,#E6C572 40%,#A5842F 76%,#E6C572)}
.btn.ghost{border:1px solid var(--line2);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
nav .links a.cta-link{background:var(--foil);color:#0C0B09;font-family:var(--body);
  font-weight:700;letter-spacing:.08em;font-size:12px;text-transform:uppercase}
a{color:var(--gold)}
a:hover{color:var(--gold-hi)}

/* ---- drop cap on the lead answer: editorial, and cheap ---- */
.answer{border-left:0;border-image:none;background:none;padding:0;margin:30px 0 34px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0 24px}
.answer .q{font-family:var(--body);font-size:11px;letter-spacing:.28em;color:var(--gold)}
.answer p{font-family:var(--display);font-size:clamp(19px,2.1vw,23px);line-height:1.5;
  color:var(--ink)}
.answer p::first-letter{font-size:3.1em;line-height:.84;float:left;
  padding:6px 12px 0 0;color:var(--gold);font-weight:600}

/* ---- numerals on ordered lists, engraved not filled ---- */
main ol li::before{background:transparent;border:0;color:var(--gold);
  font-family:var(--display);font-size:16px;font-style:italic;font-weight:600}

/* ---- tables read as a ledger ---- */
table{border:1px solid var(--line)}
thead th{background:linear-gradient(180deg,rgba(217,180,91,.10),transparent);
  color:var(--gold);border-bottom:1px solid var(--gold-lo);
  font-family:var(--body);font-size:11px;letter-spacing:.18em}
tbody tr:hover{background:rgba(217,180,91,.045)}
.telemetry{border-top:2px solid var(--gold)}
.telemetry .k{color:var(--faint)}
.telemetry .v.sig{color:var(--gold)}
.pill.in{color:var(--good);background:rgba(127,191,142,.10);border-color:rgba(127,191,142,.3)}
.pill.out{color:var(--bad);background:rgba(201,122,109,.10);border-color:rgba(201,122,109,.3)}

.eyebrow{letter-spacing:.2em;font-size:10.5px;line-height:1.9}
/* Section numerals set in the display face, sitting on their own engraved rule. */
.grid .card .step{display:block;padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px solid var(--line)}
.grid .card h3{font-size:19px;line-height:1.25;margin:0 0 9px}
.grid{gap:18px}

.grid.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid .card .step{letter-spacing:.16em;font-size:10px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.grid.two{grid-template-columns:1fr}}

/* ================= BUREAU, ON PAPER =================
   Craig: "Lighter background?"

   The engraved genre is native to paper — stock certificates, bank notes, legal
   opinions, audit letters. Rendering it on black was fighting the reference. It
   also matters commercially: AI product sites are overwhelmingly dark, so a warm
   light page is the single cheapest way to not look like the rest of the category.

   Gold has to change value to survive the flip. On black, #D9B45B carries; on
   parchment it is a 3.6:1 smear. The foil keeps its highlight for rules and marks,
   and TEXT gold drops to --gold-lo, which clears 6:1 on this background. Inline
   SVG now reads these variables, so the marks flipped with the palette rather than
   needing seventeen files edited by hand. */
:root{
  --bg:#F4F0E6; --bg2:#EDE7DA;
  --surface:#FBF8F1; --surface2:#FFFDF7;
  --line:#DCD3C1; --line2:#C6BBA4;
  --ink:#191510; --dim:#4A4438; --faint:#786F5F;

  --gold:#A8842B; --gold-hi:#D9B45B; --gold-lo:#6B5215;
  --foil:linear-gradient(160deg,#E8CE86 0%,#C9A343 34%,#8A6C22 70%,#D2B057 100%);

  --signal:var(--gold); --signal-dim:var(--gold-lo);
  --steel:#3F6274; --accent:var(--gold-lo); --accent-ink:#191510;
  --good:#2E6642; --warn:#8A6C22; --bad:#94382C;
  --grad:var(--foil);
}
body{background:var(--bg);color:var(--ink)}

/* Laid-paper grain: fibre, not noise. Lighter hand than the dark version needed. */
body::before{
  opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(to right, rgba(107,82,21,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(107,82,21,.055) 1px, transparent 1px);
  background-size:180px 180px, 104px 104px, 104px 104px;
  mix-blend-mode:multiply;
}
header{background:rgba(244,240,230,.94);border-bottom:1px solid var(--line2)}
nav .links a{color:var(--dim)}
nav .links a:hover{color:var(--ink)}
.logo{color:var(--ink)}

/* Panels are lighter than the sheet — cards lifted off the page, not cut into it. */
.card,.tier,.report,form.signup,.telemetry,.row,.rows li,.switch{
  background:linear-gradient(180deg,#FFFEFA,var(--surface));
  border:1px solid var(--line);border-top:1px solid var(--gold-lo);
  box-shadow:0 1px 0 rgba(25,21,16,.04)}
.tier.featured{background:linear-gradient(180deg,rgba(201,163,67,.10),var(--surface2));
  border-top:2px solid var(--gold)}

h1,h2,h3{color:var(--ink)}
h1 .grad{background:var(--foil);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.lede,p,li{color:var(--dim)}
.note{color:var(--faint)}
.eyebrow,.step{color:var(--gold-lo)}
.eyebrow::before{background:var(--gold-lo)}
a{color:var(--gold-lo);text-decoration-color:var(--line2)}
a:hover{color:var(--ink)}

.btn.primary{background:var(--foil);color:#1A1408;border:1px solid var(--gold-lo);
  text-shadow:0 1px 0 rgba(255,255,255,.28)}
.btn.ghost{border:1px solid var(--line2);color:var(--ink);background:#FFFDF7}
.btn.ghost:hover{border-color:var(--gold-lo);color:var(--gold-lo)}
nav .links a.cta-link{color:#1A1408}
form.signup input{background:#FFFDF7;border:1px solid var(--line2);color:var(--ink)}
form.signup input::placeholder{color:#9A9080}

.answer{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.answer p{color:var(--ink)}
.answer p::first-letter{color:var(--gold-lo)}
.answer .q{color:var(--gold-lo)}
thead th{color:var(--gold-lo);background:linear-gradient(180deg,rgba(201,163,67,.14),transparent);
  border-bottom:1px solid var(--gold-lo)}
tbody tr:hover{background:rgba(201,163,67,.07)}
th,td{border-bottom:1px solid var(--line)}
main ol li::before{color:var(--gold-lo)}
.telemetry{border-top:2px solid var(--gold-lo)}
.telemetry div{border-right:1px solid var(--line)}
.telemetry .v{color:var(--ink)}
.telemetry .v.sig{color:var(--gold-lo)}
.pill.in{color:var(--good);background:rgba(46,102,66,.10);border:1px solid rgba(46,102,66,.30)}
.pill.out{color:var(--bad);background:rgba(148,56,44,.09);border:1px solid rgba(148,56,44,.28)}
.pill.warn{color:var(--warn);background:rgba(138,108,34,.10);border:1px solid rgba(138,108,34,.30)}
footer{border-top:1px solid var(--line2);color:var(--faint)}
footer a{color:var(--dim)}
.skip{background:var(--gold-lo);color:#FFFDF7}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold-lo)}

/* The tagline sits under the wordmark as a bureau lockup — set in small caps at a
   size that reads as an imprint rather than a second headline. Hidden on phones,
   where it would push the nav to a third row for no gain. */
.logo span{display:flex;flex-direction:column;line-height:1.05}
.logo-tag{font-family:var(--body);font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:3px}
@media (max-width:820px){.logo-tag{display:none}}

/* The wordmark lockup pushed the nav onto a second row: .wrap is 900px and
   logo + tagline + five links do not fit inside it. The header gets its own
   wider measure (it is chrome, not text, so the reading measure does not apply)
   and the imprint only appears where there is genuinely room for it. */
header .wrap{max-width:1120px}
nav{flex-wrap:nowrap}
.logo-tag{font-size:8.5px;letter-spacing:.1em}
@media (max-width:1040px){.logo-tag{display:none}}
@media (max-width:760px){nav{flex-wrap:wrap}}

/* One line for the hero imprint, and a lighter hand on the ruling — at 5.5%
   on paper the grid read as graph paper rather than a watermark. */
.eyebrow{letter-spacing:.14em;font-size:10px}
body::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E"),
    linear-gradient(to right, rgba(107,82,21,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(107,82,21,.028) 1px, transparent 1px);
  background-size:180px 180px, 112px 112px, 112px 112px;
}

/* The imprint was breaking with "AI" alone on the second line. Tighter tracking
   fits it on one; prose stays capped at its own measure so widening the page
   frame gives the hero and the tables room without loosening the reading line. */
.eyebrow{letter-spacing:.08em}
.wrap{max-width:1040px}
main p,main li,.lede{max-width:38em}