/* mirror-pages.css — the shared chrome for the five tab pages (How it works, Refusals, Verify, Compare,
 * Pricing). ASSAY: limestone and ink, Prussian blue for structure, antique brass for the one precious
 * thing on each page. One nav, one footer, one type scale - so moving between the tabs feels like turning
 * pages in one document rather than visiting five sites. Generated pages link this file; nothing here
 * fetches anything (the site's CSP forbids it). Everything rests visible: motion only ever adds.
 */
:root{
  --ground:#FCFCFA; --band:#F3F3F0; --limestone:#F6F1E7; --panel:#FFFFFF;
  --ink:#111619; --ink2:#59636A; --mut:#626B71;
  --line:#E9E9E4; --line2:#DCDCD6; --edge:#C3C4BE; --hair:rgba(17,22,25,.08);
  --gold:#9C7A42; --gold-hi:#C7A868; --gold-ink:#7A5E31; --gold-pale:#EDE3CF; --gold-dim:rgba(156,122,66,.34);
  --blue:#163A5F; --blue2:#2F6B9C; --blue-pale:#DDE4EA;
  --coral:#B4472C; --coral-pale:#F6E4DD;
  --slate:#0E1317; --slate2:#131A1F; --slate-line:rgba(237,232,214,.09); --slate-ink:#D2D8D3; --slate-mut:#8A928F;
  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --page:1240px; --gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.2,.85,.25,1);
  --shadow:0 1px 2px rgba(17,22,25,.04),0 10px 34px -12px rgba(17,22,25,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue);text-decoration:none} a:hover{color:var(--blue2)}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:2px}
code,kbd,.mono{font-family:var(--mono)}
.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── buttons (the header and footer themselves live in mirror-shell.css) ───────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:14px;font-weight:600;padding:9px 18px;border-radius:2px;
  border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn-s{background:var(--ink);color:#FCFCFA;border-color:var(--ink)}
.btn-s:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-l{padding:14px 28px;font-size:15.5px}

/* ── type ────────────────────────────────────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink);margin:0}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(34px,5.2vw,66px);line-height:1.04;letter-spacing:-.04em}
h2{font-weight:800;font-size:clamp(26px,3.3vw,40px);line-height:1.1;letter-spacing:-.03em}
h3{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em}
p{margin:0}
.dek{font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;color:var(--ink2);max-width:62ch}
.hl{position:relative;white-space:nowrap;color:var(--ink);isolation:isolate}
.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.16em;background:var(--gold);opacity:.55;z-index:-1;
  transform-origin:left;animation:hl-sweep 1.1s .25s var(--ease) both}
.hl-c::after{background:var(--coral);opacity:.45}
@keyframes hl-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── page hero ───────────────────────────────────────────────────────────────────────────────────── */
.phero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.phero::before{content:"";position:absolute;inset:-20% -10% auto;height:620px;pointer-events:none;z-index:-1;
  background:radial-gradient(420px 280px at 18% 30%,rgba(199,168,104,.16),transparent 70%),radial-gradient(520px 320px at 82% 18%,rgba(47,107,156,.10),transparent 70%)}
.phero .wrap{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.phero .copy{display:grid;gap:22px;min-width:0}   /* a grid item never widens past its track - a long unbreakable highlight wraps rather than sliding under the side panel */
.phero .facts{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink2)}
.phero .facts b{color:var(--ink);font-weight:500}
.phero .facts span{display:inline-flex;align-items:center;gap:8px}
.phero .facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
@media (max-width:900px){ .phero .wrap{grid-template-columns:1fr} }

/* ── sections ───────────────────────────────────────────────────────────────────────────────────── */
.sect{padding-block:clamp(56px,7vw,96px)}
.sect.band{background:var(--band);border-block:1px solid var(--line)}
.sect.warm{background:var(--limestone);border-block:1px solid var(--line)}
.sect.dark{background:var(--slate);color:var(--slate-ink)}
.sect.dark h2,.sect.dark h3{color:#F3F1EA}
.sect.dark .eyebrow{color:var(--gold-hi)}
.sect.dark .dek{color:#A7B0AE}
.shead{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.shead.mid{margin-inline:auto;text-align:center;justify-items:center}
.lead-link{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--blue2)}
.lead-link::after{content:"\2192";transition:transform .2s var(--ease)}
.lead-link:hover::after{transform:translateX(3px)}

/* ── chips, cards, code ─────────────────────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:3px;padding:3px 8px;color:var(--ink2);background:var(--panel);white-space:nowrap}
.chip.gold{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-pale)}
.chip.blue{border-color:var(--blue2);color:var(--blue);background:var(--blue-pale)}
.chip.coral{border-color:var(--coral);color:var(--coral);background:var(--coral-pale)}
.chip.ink{border-color:var(--ink);color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
pre.code{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.75;background:var(--slate);color:var(--slate-ink);
  border-radius:9px;padding:18px 20px;overflow-x:auto;border:1px solid var(--slate-line)}
pre.code .c{color:#7F8A87} pre.code .k{color:var(--gold-hi)} pre.code .s{color:#9FC3DE}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fbtn{font-family:var(--display);font-size:13px;font-weight:600;border:1px solid var(--line2);background:var(--panel);color:var(--ink);
  border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.fbtn:hover{border-color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FCFCFA}
.fsep{width:1px;height:22px;background:var(--line2);margin-inline:4px}

/* ── the replayed audit log (shared with the home page) ──────────────────────────────────────────── */
.term{margin:0;border:1px solid var(--slate-line);border-radius:9px;overflow:hidden;background:var(--slate);box-shadow:0 34px 66px -42px rgba(0,0,0,.66)}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--slate2);border-bottom:1px solid rgba(237,232,214,.07)}
.term-dot{width:9px;height:9px;border-radius:50%;background:#39434A;flex:none}
.term-title{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--slate-mut);margin-left:9px}
.term-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--gold-hi);border:1px solid rgba(199,168,104,.38);border-radius:3px;padding:2px 8px}
.term-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-hi)}
.term-body{padding:20px 22px 22px;min-height:266px;font-family:var(--mono);font-size:13px;line-height:1.95}
.term-line{display:flex;gap:13px}
.term-line .tag{flex:none;width:58px;font-size:11px;letter-spacing:.1em;padding-top:2px}
.term-line .msg{flex:1;min-width:0;word-break:break-word}
.term-line.req .tag{color:var(--gold-hi)} .term-line.req .msg{color:var(--slate-ink)}
.term-line.rej .tag{color:#E0674A} .term-line.rej .msg{color:#95A0A4}
.term-line .cite{color:#8A9491}
.caret{display:inline-block;width:7.5px;height:15px;background:var(--gold-hi);vertical-align:-2px;margin-left:1px;animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{ .grain{display:none} .phero::before{display:none} }