/* ═══════════════════════════════════════════════════════════════════════════════
   trilocore.com — site.css   ·   ONE stylesheet for all 16 pages.
   Replaces 14 copy-pasted inline <style> blocks (~230 KB of duplicated CSS) plus
   assets/css/styles.css and assets/css/research.css.

   Phase 4a of .claude/squad-runs/20260815-1600-site-anthropic-ui — a PROVEN
   behaviour-preserving extraction, not a rewrite. Each page family is re-serialised in
   its ORIGINAL SOURCE ORDER inside a :where(body[data-page=…]) scope. :where() adds ZERO
   specificity, so every selector keeps exactly the specificity and cascade position it
   had inline. Only the box reset and <html> rules are global — they are the only ones
   whose subject can be <html>/<body> itself. Each family's :root is emitted ON its body
   scope, because custom properties inherit downward and the families genuinely disagree
   (the legal body is 15px/1.6/#0f172a; the doc body is 16px/1.65/#111827).

   Three silent breakages were caught here by tools/snapshot.py, none of them by eye:
     1. plain attribute scoping raised specificity and inverted .btn / .btn-sm on the
        three post pages (nav CTA 113x41 -> 131x49);
     2. one shared :root/body taken from the doc family re-typed both legal pages;
     3. scoping the universal reset stopped it matching <body>, so every page regained
        the UA's 8px body margin.
   Verified after all three: 1859 elements x 47 computed properties, at 1280px and 390px
   -> IDENTICAL.

   The Phase-4b design change lands ON TOP of this file; the duplication between family
   blocks collapses as the families converge on one vocabulary.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── global: the box reset and <html> — the only subjects outside a page body ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html{scroll-padding-top:72px}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══ page family: doc ══ */
:where(body[data-page="doc"]){--orange:#E85D04; --orange-dark:#C24E03; --orange-tint:#FDF1E7; --white:#FFFFFF; --gray-50:#F8F9FB; --gray-100:#F1F3F6; --ink:#111827; --ink-70:#3F4756; --ink-50:#6B7280; --ink-30:#9CA3AF; --line:#E5E7EB; --line-soft:#EEF0F3; --navy:#0F172A; --green:#047857; --red:#B91C1C; --red-tint:#FEF2F2; --amber:#B45309; --amber-tint:#FFFBEB; --sans:'Inter',-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --max:1120px; --d-bg:#0B1220; --d-panel:#101A2C; --d-line:#1E293B; --d-txt:#C9D4E5; --d-dim:#7C8BA1; --d-green:#34D399; --d-red:#F87171; --d-amber:#FBBF24; --d-blue:#7DD3FC; --d-purple:#C4B5FD;}
:where(body[data-page="doc"]){font-family:var(--sans);background:var(--white);color:var(--ink);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(body[data-page="doc"]) a{color:inherit;text-decoration:none}
:where(body[data-page="doc"]) img{display:block;max-width:100%}
:where(body[data-page="doc"]) .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:where(body[data-page="doc"]) :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
:where(body[data-page="doc"]) .eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
:where(body[data-page="doc"]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;padding:11px 22px;border-radius:8px;transition:background .15s,border-color .15s,color .15s;border:1px solid transparent;cursor:pointer}
:where(body[data-page="doc"]) .btn-primary{background:var(--orange);color:#fff}
:where(body[data-page="doc"]) .btn-primary:hover{background:var(--orange-dark)}
:where(body[data-page="doc"]) .btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
:where(body[data-page="doc"]) .btn-secondary:hover{border-color:var(--ink-30);background:var(--gray-50)}
:where(body[data-page="doc"]) .btn-sm{padding:8px 16px;font-size:14px}
:where(body[data-page="doc"]) .icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
:where(body[data-page="doc"]) nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
:where(body[data-page="doc"]) .nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
:where(body[data-page="doc"]) .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em}
:where(body[data-page="doc"]) .logo img{width:26px;height:26px}
:where(body[data-page="doc"]) .nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-70)}
:where(body[data-page="doc"]) .nav-links a:hover{color:var(--ink)}
@media(max-width:900px){
:where(body[data-page="doc"]) .nav-links{display:none}
}
:where(body[data-page="doc"]) .hero{padding:76px 0 68px;border-bottom:1px solid var(--line)}
:where(body[data-page="doc"]) .hero-in{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
:where(body[data-page="doc"]) .hero h1{font-weight:700;font-size:clamp(30px,3.6vw,42px);line-height:1.15;letter-spacing:-.025em;margin:18px 0 20px}
:where(body[data-page="doc"]) .hero .lede{font-size:17px;color:var(--ink-50);margin-bottom:30px;max-width:480px}
:where(body[data-page="doc"]) .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
:where(body[data-page="doc"]) .hero-points{display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--ink-70)}
:where(body[data-page="doc"]) .hero-points span{display:flex;align-items:center;gap:9px}
:where(body[data-page="doc"]) .hero-points svg{width:17px;height:17px;stroke:var(--green);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(max-width:960px){
:where(body[data-page="doc"]) .hero-in{grid-template-columns:1fr}
}
:where(body[data-page="doc"]) .dframe{background:var(--d-bg);border:1px solid var(--d-line);border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:12.5px;color:var(--d-txt);box-shadow:0 1px 3px rgba(17,24,39,.1),0 16px 40px rgba(17,24,39,.14)}
:where(body[data-page="doc"]) .dframe .bar{display:flex;align-items:center;gap:10px;background:var(--d-panel);border-bottom:1px solid var(--d-line);padding:10px 16px;color:var(--d-dim)}
:where(body[data-page="doc"]) .dframe .bar .dots{display:flex;gap:6px}
:where(body[data-page="doc"]) .dframe .bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--d-line);display:block}
:where(body[data-page="doc"]) .ftabs{display:flex;gap:2px;background:var(--d-panel);border-bottom:1px solid var(--d-line);padding:0 10px;overflow-x:auto;scrollbar-width:none}
:where(body[data-page="doc"]) .ftabs::-webkit-scrollbar{display:none}
:where(body[data-page="doc"]) .ftabs span{padding:8px 11px;font-size:11.5px;color:var(--d-dim);white-space:nowrap;border-bottom:2px solid transparent}
:where(body[data-page="doc"]) .ftabs .on{color:var(--d-txt);border-bottom-color:var(--orange)}
:where(body[data-page="doc"]) .fstatus{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--d-line);color:var(--d-dim);font-size:11.5px;flex-wrap:wrap}
:where(body[data-page="doc"]) .fstatus .ok{color:var(--d-green)}
:where(body[data-page="doc"]) .dbody{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
:where(body[data-page="doc"]) .drow{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--d-panel);border:1px solid var(--d-line);border-radius:7px}
:where(body[data-page="doc"]) .drow .t{color:var(--d-txt);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(body[data-page="doc"]) .dpill{font-weight:600;font-size:10px;letter-spacing:.05em;padding:2px 7px;border-radius:4px;flex:none}
:where(body[data-page="doc"]) .dp-crit{background:rgba(248,113,113,.12);color:var(--d-red);border:1px solid rgba(248,113,113,.3)}
:where(body[data-page="doc"]) .dp-high{background:rgba(251,191,36,.1);color:var(--d-amber);border:1px solid rgba(251,191,36,.3)}
:where(body[data-page="doc"]) .dp-med{background:rgba(125,211,252,.1);color:var(--d-blue);border:1px solid rgba(125,211,252,.3)}
:where(body[data-page="doc"]) .dp-ok{background:rgba(52,211,153,.1);color:var(--d-green);border:1px solid rgba(52,211,153,.3);margin-left:auto}
:where(body[data-page="doc"]) .dp-wait{background:transparent;color:var(--d-dim);border:1px solid var(--d-line);margin-left:auto}
:where(body[data-page="doc"]) .dfoot{padding:10px 16px;border-top:1px solid var(--d-line);color:var(--d-dim);font-size:11.5px}
:where(body[data-page="doc"]) .dfoot b{color:var(--d-txt);font-weight:500}
:where(body[data-page="doc"]) .dcode{padding:14px 16px;line-height:1.85;font-size:12px;color:var(--d-txt);border-bottom:1px solid var(--d-line)}
:where(body[data-page="doc"]) .dcode .kw{color:var(--d-purple)}
:where(body[data-page="doc"]) .dcode .fn{color:var(--d-amber)}
:where(body[data-page="doc"]) .dcode .ty{color:var(--d-blue)}
:where(body[data-page="doc"]) .dcode .cm{color:var(--d-dim)}
:where(body[data-page="doc"]) .dcode .ok{color:var(--d-green)}
:where(body[data-page="doc"]) .stats{border-bottom:1px solid var(--line);background:var(--white)}
:where(body[data-page="doc"]) .stats-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}
:where(body[data-page="doc"]) .stat{padding:26px 24px;border-left:1px solid var(--line)}
:where(body[data-page="doc"]) .stat:first-child{border-left:none;padding-left:0}
:where(body[data-page="doc"]) .stat .num{font-weight:700;font-size:22px;letter-spacing:-.02em}
:where(body[data-page="doc"]) .stat .lbl{font-size:13.5px;color:var(--ink-50);margin-top:2px}
@media(max-width:820px){
:where(body[data-page="doc"]) .stats-in{grid-template-columns:1fr 1fr}
:where(body[data-page="doc"]) .stat{border-left:none;padding-left:0;border-top:1px solid var(--line-soft)}
}
:where(body[data-page="doc"]) .builtfor{background:var(--gray-50);border-bottom:1px solid var(--line);padding:18px 0}
:where(body[data-page="doc"]) .builtfor .wrap{display:flex;align-items:center;gap:12px 36px;flex-wrap:wrap}
:where(body[data-page="doc"]) .builtfor .bf-l{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-30);text-transform:uppercase}
:where(body[data-page="doc"]) .builtfor span{font-size:14px;color:var(--ink-50)}
:where(body[data-page="doc"]) .builtfor b{color:var(--ink);font-weight:600}
:where(body[data-page="doc"]) section{padding:88px 0}
:where(body[data-page="doc"]) .sec-head{max-width:680px;margin-bottom:48px}
:where(body[data-page="doc"]) .sec-head h2{font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.022em;line-height:1.2;margin:14px 0 14px}
:where(body[data-page="doc"]) .sec-head p{color:var(--ink-50);font-size:16.5px}
:where(body[data-page="doc"]) .tour-sec{background:var(--gray-50);border-bottom:1px solid var(--line)}
:where(body[data-page="doc"]) .tour{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
:where(body[data-page="doc"]) .tp{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 22px 20px;transition:border-color .15s}
:where(body[data-page="doc"]) .tp:hover{border-color:var(--ink-30)}
:where(body[data-page="doc"]) .tp .chip{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;background:var(--orange-tint);border:1px solid #F6D9BE;border-radius:5px;padding:3px 9px;margin-bottom:12px}
:where(body[data-page="doc"]) .tp p{font-size:14px;color:var(--ink-50)}
:where(body[data-page="doc"]) .tp b{color:var(--ink);font-weight:600}
:where(body[data-page="doc"]) .tp-wide{grid-column:1/-1;display:flex;align-items:baseline;gap:18px}
:where(body[data-page="doc"]) .tp-wide .chip{margin-bottom:0;flex:none}
@media(max-width:600px){
:where(body[data-page="doc"]) .tp-wide{flex-direction:column;gap:10px}
}
@media(max-width:920px){
:where(body[data-page="doc"]) .tour{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
:where(body[data-page="doc"]) .tour{grid-template-columns:1fr}
}
:where(body[data-page="doc"]) .split{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
:where(body[data-page="doc"]) .split.rev{grid-template-columns:1.05fr 1fr}
:where(body[data-page="doc"]) .split h2{font-weight:700;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;line-height:1.22;margin:14px 0 14px}
:where(body[data-page="doc"]) .split>div>p{color:var(--ink-50);font-size:15.5px;margin-bottom:20px}
:where(body[data-page="doc"]) .feat-list{list-style:none;border-top:1px solid var(--line)}
:where(body[data-page="doc"]) .feat-list li{padding:11px 0 11px 28px;position:relative;font-size:14.5px;color:var(--ink-70);border-bottom:1px solid var(--line-soft)}
:where(body[data-page="doc"]) .feat-list li b{color:var(--ink);font-weight:600}
:where(body[data-page="doc"]) .feat-list svg{position:absolute;left:0;top:15px;width:16px;height:16px;stroke:var(--green);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:where(body[data-page="doc"]) .split .more{font-size:14px;font-weight:600;margin-top:18px;display:inline-block}
:where(body[data-page="doc"]) .split .more:hover{text-decoration:underline}
@media(max-width:940px){
:where(body[data-page="doc"]) .split,:where(body[data-page="doc"]) .split.rev{grid-template-columns:1fr}
}
:where(body[data-page="doc"]) .chat .msg{padding:11px 14px;border-radius:9px;font-size:12.5px;line-height:1.7;font-family:var(--mono)}
:where(body[data-page="doc"]) .chat .you{background:var(--d-panel);border:1px solid var(--d-line);color:var(--d-txt);align-self:flex-end;max-width:88%}
:where(body[data-page="doc"]) .chat .bot{background:transparent;border:1px solid var(--d-line);color:var(--d-txt);max-width:100%}
:where(body[data-page="doc"]) .chat .bot .lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:6px}
:where(body[data-page="doc"]) .chat .bot ol{margin:8px 0 8px 18px;color:var(--d-txt)}
:where(body[data-page="doc"]) .chat .tools{color:var(--d-dim);font-size:11px}
:where(body[data-page="doc"]) .chat .tools b{color:var(--d-blue);font-weight:500}
:where(body[data-page="doc"]) .who-sec{background:var(--gray-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:where(body[data-page="doc"]) .who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
:where(body[data-page="doc"]) .who{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 24px}
:where(body[data-page="doc"]) .who .ic{width:38px;height:38px;border-radius:8px;background:var(--gray-100);color:var(--ink-70);display:grid;place-items:center;margin-bottom:16px}
:where(body[data-page="doc"]) .who h3{font-weight:700;font-size:16px;margin-bottom:7px}
:where(body[data-page="doc"]) .who p{font-size:13.5px;color:var(--ink-50)}
@media(max-width:960px){
:where(body[data-page="doc"]) .who-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
:where(body[data-page="doc"]) .who-grid{grid-template-columns:1fr}
}
:where(body[data-page="doc"]) .bridge-sec{border-bottom:1px solid var(--line)}
:where(body[data-page="doc"]) .hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
:where(body[data-page="doc"]) .hw{padding:24px 22px;border-left:1px solid var(--line);background:#fff}
:where(body[data-page="doc"]) .hw:first-child{border-left:none}
:where(body[data-page="doc"]) .hw .n{font-family:var(--mono);font-size:12.5px;display:block;margin-bottom:8px}
:where(body[data-page="doc"]) .hw h4{font-weight:600;font-size:15px;margin-bottom:6px}
:where(body[data-page="doc"]) .hw p{font-size:13.5px;color:var(--ink-50)}
@media(max-width:880px){
:where(body[data-page="doc"]) .hw-grid{grid-template-columns:1fr 1fr}
:where(body[data-page="doc"]) .hw:nth-child(3){border-left:none}
:where(body[data-page="doc"]) .hw:nth-child(n+3){border-top:1px solid var(--line)}
}
:where(body[data-page="doc"]) .mis-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px}
:where(body[data-page="doc"]) .mis{border:1px solid var(--line);border-radius:10px;padding:30px 28px;background:#fff}
:where(body[data-page="doc"]) .mis h3{font-weight:700;font-size:17px;margin-bottom:9px}
:where(body[data-page="doc"]) .mis p{font-size:14.5px;color:var(--ink-50);margin-bottom:22px}
@media(max-width:760px){
:where(body[data-page="doc"]) .mis-cards{grid-template-columns:1fr}
}
:where(body[data-page="doc"]) .faq-sec{background:var(--gray-50);border-top:1px solid var(--line)}
:where(body[data-page="doc"]) .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
:where(body[data-page="doc"]) .faq{border-bottom:1px solid var(--line);padding:20px 0}
:where(body[data-page="doc"]) .faq h4{font-weight:600;font-size:15.5px;margin-bottom:7px}
:where(body[data-page="doc"]) .faq p{font-size:14px;color:var(--ink-50)}
:where(body[data-page="doc"]) .faq a{font-weight:500}
:where(body[data-page="doc"]) .faq a:hover{text-decoration:underline}
@media(max-width:760px){
:where(body[data-page="doc"]) .faq-grid{grid-template-columns:1fr}
}
:where(body[data-page="doc"]) .cta{background:var(--navy);color:#fff}
:where(body[data-page="doc"]) .cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
:where(body[data-page="doc"]) .cta h2{font-weight:700;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-bottom:8px}
:where(body[data-page="doc"]) .cta p{color:rgba(255,255,255,.65);font-size:15.5px;max-width:460px}
:where(body[data-page="doc"]) .cta-btns{display:flex;gap:12px;flex-wrap:wrap}
:where(body[data-page="doc"]) .cta .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
:where(body[data-page="doc"]) .cta .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06)}
:where(body[data-page="doc"]) .cta .direct{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.55)}
:where(body[data-page="doc"]) .cta .direct a{color:rgba(255,255,255,.85);text-decoration:underline}
:where(body[data-page="doc"]) footer{padding:56px 0 36px;font-size:14px;color:var(--ink-50);background:#fff;border-top:1px solid var(--line)}
:where(body[data-page="doc"]) .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px}
:where(body[data-page="doc"]) .foot-grid h4{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-30);margin-bottom:14px}
:where(body[data-page="doc"]) .foot-grid a{display:block;padding:4px 0}
:where(body[data-page="doc"]) .foot-grid a:hover{color:var(--ink)}
:where(body[data-page="doc"]) .foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--ink-30);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
:where(body[data-page="doc"]) .foot-bottom a:hover{color:var(--ink)}
@media(max-width:860px){
:where(body[data-page="doc"]) .foot-grid{grid-template-columns:1fr 1fr}
}
:where(body[data-page="doc"]) .foot-grid{grid-template-columns:1.6fr repeat(5,1fr);gap:24px}
@media(max-width:1000px){
:where(body[data-page="doc"]) .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:860px){
:where(body[data-page="doc"]) .foot-grid{grid-template-columns:1fr 1fr}
}
:where(body[data-page="doc"]) .page-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
:where(body[data-page="doc"]) .page-hero .eyebrow{margin-bottom:14px}
:where(body[data-page="doc"]) .page-hero h1{font-size:44px;line-height:1.12;letter-spacing:-.8px;max-width:16ch}
:where(body[data-page="doc"]) .page-hero p{margin-top:18px;font-size:17.5px;line-height:1.55;color:var(--ink-70);max-width:62ch}
@media(max-width:720px){
:where(body[data-page="doc"]) .page-hero h1{font-size:34px}
}
:where(body[data-page="doc"]) .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
:where(body[data-page="doc"]) .diff{padding:26px 24px;border-left:1px solid var(--line)}
:where(body[data-page="doc"]) .diff:first-child{border-left:none}
:where(body[data-page="doc"]) .diff h3{font-size:16px;margin-bottom:8px}
:where(body[data-page="doc"]) .diff p{font-size:14.5px;line-height:1.6;color:var(--ink-70)}
@media(max-width:880px){
:where(body[data-page="doc"]) .diff-grid{grid-template-columns:1fr}
:where(body[data-page="doc"]) .diff{border-left:none;border-top:1px solid var(--line)}
:where(body[data-page="doc"]) .diff:first-child{border-top:none}
}
:where(body[data-page="doc"]){--orange-text:#B34700;}
:where(body[data-page="doc"]) .eyebrow{color:inherit}
:where(body[data-page="doc"]) .tp .chip{color:inherit}
:where(body[data-page="doc"]) .hw span.n{color:inherit}
:where(body[data-page="doc"]) .btn-primary{background:var(--orange-text)}
:where(body[data-page="doc"]) .btn-primary:hover{background:#963A00}
:where(body[data-page="doc"]) .sidebar-item.active,:where(body[data-page="doc"]) .chip,:where(body[data-page="doc"]) .tag-chip{color:inherit}
:where(body[data-page="doc"]) .foot-grid h4,:where(body[data-page="doc"]) .foot-bottom,:where(body[data-page="doc"]) .sidebar-header{color:var(--ink-50)}
:where(body[data-page="doc"]) .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white); color:var(--ink);padding:12px 18px;border:2px solid var(--orange-text);border-radius:0 0 8px 0; font-weight:600;font-size:15px}
:where(body[data-page="doc"]) .skip-link:focus{left:0}
:where(body[data-page="doc"]) .nav-links a{padding:4px 0}
:where(body[data-page="doc"]) .prose pre{overflow-x:auto;max-width:100%}

/* ══ page family: home ══ */
:where(body[data-page="home"]){--orange:#E85D04; --orange-dark:#C24E03; --orange-tint:#FDF1E7; --white:#FFFFFF; --gray-50:#F8F9FB; --gray-100:#F1F3F6; --ink:#111827; --ink-70:#3F4756; --ink-50:#6B7280; --ink-30:#9CA3AF; --line:#E5E7EB; --line-soft:#EEF0F3; --navy:#0F172A; --green:#047857; --red:#B91C1C; --red-tint:#FEF2F2; --amber:#B45309; --amber-tint:#FFFBEB; --sans:'Inter',-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --max:1120px; --d-bg:#0B1220; --d-panel:#101A2C; --d-line:#1E293B; --d-txt:#C9D4E5; --d-dim:#7C8BA1; --d-green:#34D399; --d-red:#F87171; --d-amber:#FBBF24; --d-blue:#7DD3FC; --d-purple:#C4B5FD;}
:where(body[data-page="home"]){font-family:var(--sans);background:var(--white);color:var(--ink);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(body[data-page="home"]) a{color:inherit;text-decoration:none}
:where(body[data-page="home"]) img{display:block;max-width:100%}
:where(body[data-page="home"]) .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:where(body[data-page="home"]) :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
:where(body[data-page="home"]) .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase}
:where(body[data-page="home"]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;padding:11px 22px;border-radius:8px;transition:background .15s,border-color .15s,color .15s;border:1px solid transparent;cursor:pointer}
:where(body[data-page="home"]) .btn-primary{background:var(--orange);color:#fff}
:where(body[data-page="home"]) .btn-primary:hover{background:var(--orange-dark)}
:where(body[data-page="home"]) .btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
:where(body[data-page="home"]) .btn-secondary:hover{border-color:var(--ink-30);background:var(--gray-50)}
:where(body[data-page="home"]) .btn-sm{padding:8px 16px;font-size:14px}
:where(body[data-page="home"]) .icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
:where(body[data-page="home"]) nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
:where(body[data-page="home"]) .nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
:where(body[data-page="home"]) .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em}
:where(body[data-page="home"]) .logo img{width:26px;height:26px}
:where(body[data-page="home"]) .nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-70)}
:where(body[data-page="home"]) .nav-links a:hover{color:var(--ink)}
@media(max-width:900px){
:where(body[data-page="home"]) .nav-links{display:none}
}
:where(body[data-page="home"]) .hero{padding:clamp(60px,7vw,92px) 0 clamp(56px,6.5vw,84px);border-bottom:1px solid var(--line-soft)}
:where(body[data-page="home"]) .hero-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
:where(body[data-page="home"]) .hero h1{font-weight:700;font-size:clamp(30px,3.4vw,41px);line-height:1.14;letter-spacing:-.025em;margin:16px 0 22px}
@media(max-width:620px){
:where(body[data-page="home"]) .h1br{display:none}
}
:where(body[data-page="home"]) .hero .lede{font-size:17px;color:var(--ink-50);margin-bottom:32px;max-width:480px}
:where(body[data-page="home"]) .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
:where(body[data-page="home"]) .hero-points{display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--ink-70)}
:where(body[data-page="home"]) .hero-points span{display:flex;align-items:center;gap:9px}
:where(body[data-page="home"]) .hero-points svg{width:17px;height:17px;stroke:var(--green);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(max-width:960px){
:where(body[data-page="home"]) .hero-in{grid-template-columns:1fr}
}
:where(body[data-page="home"]) .dframe{background:var(--d-bg);border:1px solid var(--d-line);border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:12.5px;color:var(--d-txt);box-shadow:0 1px 3px rgba(17,24,39,.1),0 16px 40px rgba(17,24,39,.14)}
:where(body[data-page="home"]) .dframe .bar{display:flex;align-items:center;gap:10px;background:var(--d-panel);border-bottom:1px solid var(--d-line);padding:10px 16px;color:var(--d-dim)}
:where(body[data-page="home"]) .dframe .bar .dots{display:flex;gap:6px}
:where(body[data-page="home"]) .dframe .bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--d-line);display:block}
:where(body[data-page="home"]) .ftabs{display:flex;flex-wrap:wrap;gap:2px;background:var(--d-panel);border-bottom:1px solid var(--d-line);padding:0 10px}
:where(body[data-page="home"]) .ftabs span{padding:8px 11px;font-size:11.5px;color:var(--d-dim);white-space:nowrap;border-bottom:2px solid transparent}
:where(body[data-page="home"]) .ftabs .on{color:var(--d-txt);border-bottom-color:var(--orange)}
:where(body[data-page="home"]) .fstatus{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--d-line);color:var(--d-dim);font-size:11px;flex-wrap:wrap}
:where(body[data-page="home"]) .fstatus .ok{color:var(--d-green)}
:where(body[data-page="home"]) .dbody{padding:16px;display:flex;flex-direction:column;gap:9px}
:where(body[data-page="home"]) .drow{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--d-panel);border:1px solid var(--d-line);border-radius:7px}
:where(body[data-page="home"]) .drow .t{color:var(--d-txt);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
:where(body[data-page="home"]) .drow{flex-wrap:wrap;row-gap:7px}
:where(body[data-page="home"]) .drow .t{flex:1 0 100%;order:2;white-space:normal;overflow:visible}
:where(body[data-page="home"]) .drow .dp-ok,:where(body[data-page="home"]) .drow .dp-wait{order:1}
}
:where(body[data-page="home"]) .dpill{font-weight:600;font-size:10px;letter-spacing:.05em;padding:2px 7px;border-radius:4px;flex:none}
:where(body[data-page="home"]) .dp-crit{background:rgba(248,113,113,.12);color:var(--d-red);border:1px solid rgba(248,113,113,.3)}
:where(body[data-page="home"]) .dp-high{background:rgba(251,191,36,.1);color:var(--d-amber);border:1px solid rgba(251,191,36,.3)}
:where(body[data-page="home"]) .dp-ok{background:rgba(52,211,153,.1);color:var(--d-green);border:1px solid rgba(52,211,153,.3);margin-left:auto}
:where(body[data-page="home"]) .dp-wait{background:transparent;color:var(--d-dim);border:1px solid var(--d-line);margin-left:auto}
:where(body[data-page="home"]) .dfoot{padding:10px 16px;border-top:1px solid var(--d-line);color:var(--d-dim);font-size:11.5px}
:where(body[data-page="home"]) .dfoot b{color:var(--d-txt);font-weight:500}
:where(body[data-page="home"]) .dcode{padding:14px 16px;line-height:1.85;font-size:12px;color:var(--d-txt);border-bottom:1px solid var(--d-line)}
:where(body[data-page="home"]) .dcode .kw{color:var(--d-purple)}
:where(body[data-page="home"]) .dcode .fn{color:var(--d-amber)}
:where(body[data-page="home"]) .dcode .ty{color:var(--d-blue)}
:where(body[data-page="home"]) .dcode .cm{color:var(--d-dim)}
:where(body[data-page="home"]) .dcode .ok{color:var(--d-green)}
:where(body[data-page="home"]) .stats{border-bottom:1px solid var(--line-soft);background:var(--white)}
:where(body[data-page="home"]) .stats-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}
:where(body[data-page="home"]) .stat{padding:30px 26px;border-left:1px solid var(--line-soft)}
:where(body[data-page="home"]) .stat:first-child{border-left:none;padding-left:0}
:where(body[data-page="home"]) .stat .num{font-weight:600;font-size:17px;letter-spacing:-.01em}
:where(body[data-page="home"]) .stat .lbl{font-size:13.5px;color:var(--ink-50);margin-top:5px;max-width:30ch}
@media(max-width:820px){
:where(body[data-page="home"]) .stats-in{grid-template-columns:1fr 1fr}
:where(body[data-page="home"]) .stat{border-left:none;padding-left:0;border-top:1px solid var(--line-soft)}
}
:where(body[data-page="home"]) .builtfor{background:var(--gray-50);border-bottom:1px solid var(--line);padding:18px 0}
:where(body[data-page="home"]) .builtfor .wrap{display:flex;align-items:center;gap:12px 36px;flex-wrap:wrap}
:where(body[data-page="home"]) .builtfor .bf-l{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-30);text-transform:uppercase}
:where(body[data-page="home"]) .builtfor span{font-size:14px;color:var(--ink-50)}
:where(body[data-page="home"]) .builtfor b{color:var(--ink);font-weight:600}
:where(body[data-page="home"]) section{padding:clamp(72px,8.5vw,112px) 0}
:where(body[data-page="home"]) .sec-head{max-width:680px;margin-bottom:56px}
:where(body[data-page="home"]) .sec-head h2{font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.022em;line-height:1.2;margin:16px 0 20px}
:where(body[data-page="home"]) .sec-head p{color:var(--ink-50);font-size:16.5px}
:where(body[data-page="home"]) .tour-sec{background:var(--gray-50);border-bottom:1px solid var(--line-soft)}
:where(body[data-page="home"]) .tour{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
:where(body[data-page="home"]) .tp{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 22px 20px;transition:border-color .15s}
:where(body[data-page="home"]) .tp:hover{border-color:var(--ink-30)}
:where(body[data-page="home"]) .tp .chip{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;background:var(--orange-tint);border:1px solid #F6D9BE;border-radius:5px;padding:3px 9px;margin-bottom:12px}
:where(body[data-page="home"]) .tp p{font-size:14px;color:var(--ink-50)}
:where(body[data-page="home"]) .tp b{color:var(--ink);font-weight:600}
:where(body[data-page="home"]) .tp-wide{grid-column:1/-1;display:flex;align-items:baseline;gap:18px}
:where(body[data-page="home"]) .tp-wide .chip{margin-bottom:0;flex:none}
@media(max-width:600px){
:where(body[data-page="home"]) .tp-wide{flex-direction:column;gap:10px}
}
@media(max-width:920px){
:where(body[data-page="home"]) .tour{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
:where(body[data-page="home"]) .tour{grid-template-columns:1fr}
}
:where(body[data-page="home"]) .split{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
:where(body[data-page="home"]) .split.rev{grid-template-columns:1.05fr 1fr}
:where(body[data-page="home"]) .split h2{font-weight:700;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;line-height:1.22;margin:14px 0 14px}
:where(body[data-page="home"]) .split>div>p{color:var(--ink-50);font-size:15.5px;margin-bottom:20px}
:where(body[data-page="home"]) .feat-list{list-style:none;border-top:1px solid var(--line)}
:where(body[data-page="home"]) .feat-list li{padding:11px 0 11px 28px;position:relative;font-size:14.5px;color:var(--ink-70);border-bottom:1px solid var(--line-soft)}
:where(body[data-page="home"]) .feat-list li b{color:var(--ink);font-weight:600}
:where(body[data-page="home"]) .feat-list svg{position:absolute;left:0;top:15px;width:16px;height:16px;stroke:var(--green);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:where(body[data-page="home"]) .more{font-size:14px;font-weight:600;margin-top:18px;display:inline-block}
:where(body[data-page="home"]) .more:hover{text-decoration:underline}
@media(max-width:940px){
:where(body[data-page="home"]) .split,:where(body[data-page="home"]) .split.rev{grid-template-columns:1fr}
}
:where(body[data-page="home"]) .chat .msg{padding:11px 14px;border-radius:9px;font-size:12.5px;line-height:1.7;font-family:var(--mono)}
:where(body[data-page="home"]) .chat .you{background:var(--d-panel);border:1px solid var(--d-line);color:var(--d-txt);align-self:flex-end;max-width:88%}
:where(body[data-page="home"]) .chat .bot{background:transparent;border:1px solid var(--d-line);color:var(--d-txt);max-width:100%}
:where(body[data-page="home"]) .chat .bot .lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:6px}
:where(body[data-page="home"]) .chat .bot ol{margin:8px 0 8px 18px;color:var(--d-txt)}
:where(body[data-page="home"]) .chat .tools{color:var(--d-dim);font-size:11px}
:where(body[data-page="home"]) .chat .tools b{color:var(--d-blue);font-weight:500}
:where(body[data-page="home"]) .who-sec{background:var(--gray-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:where(body[data-page="home"]) .who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 34px}
:where(body[data-page="home"]) .who{border-top:1px solid var(--line-soft);padding:20px 0 0}
:where(body[data-page="home"]) .who .n{display:block;font-family:var(--mono);font-size:12px;font-weight:500;margin-bottom:12px}
:where(body[data-page="home"]) .who h3{font-weight:600;font-size:16px;margin-bottom:8px}
:where(body[data-page="home"]) .who p{font-size:14px;color:var(--ink-50)}
:where(body[data-page="home"]) .trust-foot{margin-top:40px;text-align:right}
@media(max-width:960px){
:where(body[data-page="home"]) .who-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
:where(body[data-page="home"]) .who-grid{grid-template-columns:1fr}
}
:where(body[data-page="home"]) .bridge-sec{border-bottom:1px solid var(--line)}
:where(body[data-page="home"]) .hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
:where(body[data-page="home"]) .hw{padding:24px 22px;border-left:1px solid var(--line);background:#fff}
:where(body[data-page="home"]) .hw:first-child{border-left:none}
:where(body[data-page="home"]) .hw .n{font-family:var(--mono);font-size:12.5px;display:block;margin-bottom:8px}
:where(body[data-page="home"]) .hw h4{font-weight:600;font-size:15px;margin-bottom:6px}
:where(body[data-page="home"]) .hw p{font-size:13.5px;color:var(--ink-50)}
@media(max-width:880px){
:where(body[data-page="home"]) .hw-grid{grid-template-columns:1fr 1fr}
:where(body[data-page="home"]) .hw:nth-child(3){border-left:none}
:where(body[data-page="home"]) .hw:nth-child(n+3){border-top:1px solid var(--line)}
}
:where(body[data-page="home"]) .mis-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px}
:where(body[data-page="home"]) .mis{border:1px solid var(--line);border-radius:10px;padding:30px 28px;background:#fff}
:where(body[data-page="home"]) .mis h3{font-weight:700;font-size:17px;margin-bottom:9px}
:where(body[data-page="home"]) .mis p{font-size:14.5px;color:var(--ink-50);margin-bottom:22px}
@media(max-width:760px){
:where(body[data-page="home"]) .mis-cards{grid-template-columns:1fr}
}
:where(body[data-page="home"]) .faq-sec{background:var(--gray-50);border-top:1px solid var(--line)}
:where(body[data-page="home"]) .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
:where(body[data-page="home"]) .faq{border-bottom:1px solid var(--line);padding:20px 0}
:where(body[data-page="home"]) .faq h4{font-weight:600;font-size:15.5px;margin-bottom:7px}
:where(body[data-page="home"]) .faq p{font-size:14px;color:var(--ink-50)}
:where(body[data-page="home"]) .faq a{font-weight:500}
:where(body[data-page="home"]) .faq a:hover{text-decoration:underline}
@media(max-width:760px){
:where(body[data-page="home"]) .faq-grid{grid-template-columns:1fr}
}
:where(body[data-page="home"]) .cta{background:var(--navy);color:#fff}
:where(body[data-page="home"]) .cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
:where(body[data-page="home"]) .cta h2{font-weight:700;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-bottom:10px}
:where(body[data-page="home"]) .cta p{color:rgba(255,255,255,.65);font-size:15.5px;max-width:460px}
:where(body[data-page="home"]) .cta-btns{display:flex;gap:12px;flex-wrap:wrap}
:where(body[data-page="home"]) .cta .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
:where(body[data-page="home"]) .cta .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06)}
:where(body[data-page="home"]) footer{padding:56px 0 36px;font-size:14px;color:var(--ink-50);background:#fff;border-top:1px solid var(--line)}
:where(body[data-page="home"]) .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px}
:where(body[data-page="home"]) .foot-grid h4{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-30);margin-bottom:14px}
:where(body[data-page="home"]) .foot-grid a{display:block;padding:4px 0}
:where(body[data-page="home"]) .foot-grid a:hover{color:var(--ink)}
:where(body[data-page="home"]) .foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--ink-30);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
:where(body[data-page="home"]) .foot-bottom a:hover{color:var(--ink)}
@media(max-width:860px){
:where(body[data-page="home"]) .foot-grid{grid-template-columns:1fr 1fr}
}
:where(body[data-page="home"]) .foot-grid{grid-template-columns:1.6fr repeat(5,1fr);gap:24px}
@media(max-width:1000px){
:where(body[data-page="home"]) .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:860px){
:where(body[data-page="home"]) .foot-grid{grid-template-columns:1fr 1fr}
}
:where(body[data-page="home"]) .page-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
:where(body[data-page="home"]) .page-hero .eyebrow{margin-bottom:14px}
:where(body[data-page="home"]) .page-hero h1{font-size:44px;line-height:1.12;letter-spacing:-.8px;max-width:16ch}
:where(body[data-page="home"]) .page-hero p{margin-top:18px;font-size:17.5px;line-height:1.55;color:var(--ink-70);max-width:62ch}
@media(max-width:720px){
:where(body[data-page="home"]) .page-hero h1{font-size:34px}
}
:where(body[data-page="home"]) .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
:where(body[data-page="home"]) .diff{padding:26px 24px;border-left:1px solid var(--line)}
:where(body[data-page="home"]) .diff:first-child{border-left:none}
:where(body[data-page="home"]) .diff h3{font-size:16px;margin-bottom:8px}
:where(body[data-page="home"]) .diff p{font-size:14.5px;line-height:1.6;color:var(--ink-70)}
@media(max-width:880px){
:where(body[data-page="home"]) .diff-grid{grid-template-columns:1fr}
:where(body[data-page="home"]) .diff{border-left:none;border-top:1px solid var(--line)}
:where(body[data-page="home"]) .diff:first-child{border-top:none}
}
:where(body[data-page="home"]){--orange-text:#B34700;}
:where(body[data-page="home"]) .eyebrow{color:inherit}
:where(body[data-page="home"]) .tp .chip{color:inherit}
:where(body[data-page="home"]) .hw span.n{color:inherit}
:where(body[data-page="home"]) .btn-primary{background:var(--orange-text)}
:where(body[data-page="home"]) .btn-primary:hover{background:#963A00}
:where(body[data-page="home"]) .sidebar-item.active,:where(body[data-page="home"]) .chip,:where(body[data-page="home"]) .tag-chip{color:inherit}
:where(body[data-page="home"]) .foot-grid h4,:where(body[data-page="home"]) .foot-bottom,:where(body[data-page="home"]) .sidebar-header{color:var(--ink-50)}
:where(body[data-page="home"]) .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white); color:var(--ink);padding:12px 18px;border:2px solid var(--orange-text);border-radius:0 0 8px 0; font-weight:600;font-size:15px}
:where(body[data-page="home"]) .skip-link:focus{left:0}
:where(body[data-page="home"]) .nav-links a{padding:4px 0}
:where(body[data-page="home"]) .prose pre{overflow-x:auto;max-width:100%}

/* ══ page family: edit ══ */
:where(body[data-page="edit"]){--orange:#E85D04;--orange-dark:#C24E03;--orange-tint:#FDF1E7; --white:#FFFFFF;--gray-50:#F8F9FB;--gray-100:#F1F3F6; --ink:#111827;--ink-70:#3F4756;--ink-50:#6B7280;--ink-30:#9CA3AF; --line:#E5E7EB;--line-soft:#EEF0F3;--navy:#0F172A; --sans:'Inter',-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace; --max:1120px;}
:where(body[data-page="edit"]){font-family:var(--sans);background:var(--white);color:var(--ink);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(body[data-page="edit"]) a{color:inherit;text-decoration:none}
:where(body[data-page="edit"]) img{display:block;max-width:100%}
:where(body[data-page="edit"]) .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:where(body[data-page="edit"]) :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
:where(body[data-page="edit"]) .eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
:where(body[data-page="edit"]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;padding:11px 22px;border-radius:8px;transition:background .15s,border-color .15s,color .15s;border:1px solid transparent}
:where(body[data-page="edit"]) .btn-primary{background:var(--orange);color:#fff}
:where(body[data-page="edit"]) .btn-primary:hover{background:var(--orange-dark)}
:where(body[data-page="edit"]) .btn-sm{padding:8px 16px;font-size:14px}
:where(body[data-page="edit"]) nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
:where(body[data-page="edit"]) .nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
:where(body[data-page="edit"]) .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em}
:where(body[data-page="edit"]) .logo img{width:26px;height:26px}
:where(body[data-page="edit"]) .nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-70)}
:where(body[data-page="edit"]) .nav-links a:hover{color:var(--ink)}
@media(max-width:900px){
:where(body[data-page="edit"]) .nav-links{display:none}
}
:where(body[data-page="edit"]) .page-hero{padding:76px 0 40px;border-bottom:1px solid var(--line)}
:where(body[data-page="edit"]) .page-hero h1{font-weight:700;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.025em;line-height:1.15;margin-top:14px}
:where(body[data-page="edit"]) .page-hero p{color:var(--ink-50);font-size:17px;margin-top:16px;max-width:560px}
:where(body[data-page="edit"]) .blog-wrap{padding:56px 0 96px}
:where(body[data-page="edit"]) .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
:where(body[data-page="edit"]) .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
:where(body[data-page="edit"]) .card:hover{border-color:var(--ink-30);box-shadow:0 1px 3px rgba(17,24,39,.06),0 12px 32px rgba(17,24,39,.07)}
:where(body[data-page="edit"]) .card-img{width:100%;height:184px;object-fit:cover;border-bottom:1px solid var(--line);background:var(--gray-100)}
:where(body[data-page="edit"]) .card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
:where(body[data-page="edit"]) .card-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-50);font-weight:500;margin-bottom:12px}
:where(body[data-page="edit"]) .card-meta img{width:18px;height:18px}
:where(body[data-page="edit"]) .card-title{font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.01em;margin-bottom:18px;color:var(--ink)}
:where(body[data-page="edit"]) .card-link{margin-top:auto;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap .15s}
:where(body[data-page="edit"]) .card:hover .card-link{gap:10px}
@media(max-width:900px){
:where(body[data-page="edit"]) .blog-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
:where(body[data-page="edit"]) .blog-grid{grid-template-columns:1fr}
}
:where(body[data-page="edit"]) footer{padding:56px 0 36px;font-size:14px;color:var(--ink-50);background:#fff;border-top:1px solid var(--line)}
:where(body[data-page="edit"]) .foot-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:24px;margin-bottom:44px}
:where(body[data-page="edit"]) .foot-grid h4{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-30);margin-bottom:14px}
:where(body[data-page="edit"]) .foot-grid a{display:block;padding:4px 0}
:where(body[data-page="edit"]) .foot-grid a:hover{color:var(--ink)}
:where(body[data-page="edit"]) .foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--ink-30);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
:where(body[data-page="edit"]) .foot-bottom a:hover{color:var(--ink)}
@media(max-width:1000px){
:where(body[data-page="edit"]) .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:860px){
:where(body[data-page="edit"]) .foot-grid{grid-template-columns:1fr 1fr}
}
:where(body[data-page="edit"]){--orange-text:#B34700;}
:where(body[data-page="edit"]) .eyebrow{color:inherit}
:where(body[data-page="edit"]) .hw span.n{color:inherit}
:where(body[data-page="edit"]) .btn-primary{background:var(--orange-text)}
:where(body[data-page="edit"]) .btn-primary:hover{background:#963A00}
:where(body[data-page="edit"]) .sidebar-item.active,:where(body[data-page="edit"]) .chip,:where(body[data-page="edit"]) .tag-chip{color:inherit}
:where(body[data-page="edit"]) .foot-grid h4,:where(body[data-page="edit"]) .foot-bottom,:where(body[data-page="edit"]) .sidebar-header{color:var(--ink-50)}
:where(body[data-page="edit"]) .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white); color:var(--ink);padding:12px 18px;border:2px solid var(--orange-text);border-radius:0 0 8px 0; font-weight:600;font-size:15px}
:where(body[data-page="edit"]) .skip-link:focus{left:0}
:where(body[data-page="edit"]) .nav-links a{padding:4px 0}
:where(body[data-page="edit"]) .prose pre{overflow-x:auto;max-width:100%}

/* ══ page family: art ══ */
:where(body[data-page="art"]){--orange:#E85D04;--orange-dark:#C24E03;--orange-tint:#FDF1E7; --white:#FFFFFF;--gray-50:#F8F9FB;--gray-100:#F1F3F6; --ink:#111827;--ink-70:#3F4756;--ink-50:#6B7280;--ink-30:#9CA3AF; --line:#E5E7EB;--line-soft:#EEF0F3;--navy:#0F172A; --sans:'Inter',-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace; --max:1120px;}
:where(body[data-page="art"]){font-family:var(--sans);background:var(--white);color:var(--ink);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(body[data-page="art"]) a{color:inherit;text-decoration:none}
:where(body[data-page="art"]) img{display:block;max-width:100%}
:where(body[data-page="art"]) .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:where(body[data-page="art"]) :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
:where(body[data-page="art"]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;padding:11px 22px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:background .15s,border-color .15s,color .15s}
:where(body[data-page="art"]) .btn:hover{border-color:var(--ink-30);background:var(--gray-50)}
:where(body[data-page="art"]) .btn-primary,:where(body[data-page="art"]) .btn.primary{background:var(--orange);color:#fff;border-color:transparent}
:where(body[data-page="art"]) .btn-primary:hover,:where(body[data-page="art"]) .btn.primary:hover{background:var(--orange-dark)}
:where(body[data-page="art"]) .btn-sm{padding:8px 16px;font-size:14px}
:where(body[data-page="art"]) nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
:where(body[data-page="art"]) .nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
:where(body[data-page="art"]) .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em}
:where(body[data-page="art"]) .logo img{width:26px;height:26px}
:where(body[data-page="art"]) .nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-70)}
:where(body[data-page="art"]) .nav-links a:hover{color:var(--ink)}
@media(max-width:900px){
:where(body[data-page="art"]) .nav-links{display:none}
}
:where(body[data-page="art"]) .article{padding:56px 0 88px}
:where(body[data-page="art"]) .article .wrap{max-width:760px}
:where(body[data-page="art"]) .post-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-50);margin-bottom:20px;flex-wrap:wrap}
:where(body[data-page="art"]) .tag-chip{font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 10px;border-radius:20px;background:var(--orange-tint);text-transform:uppercase}
:where(body[data-page="art"]) .article h1{font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em;line-height:1.18;margin-bottom:20px}
:where(body[data-page="art"]) .lead{font-size:19px;color:var(--ink-70);line-height:1.6;margin-bottom:8px}
:where(body[data-page="art"]) .prose{margin-top:8px}
:where(body[data-page="art"]) .prose h2{font-weight:700;font-size:23px;letter-spacing:-.02em;margin:40px 0 14px}
:where(body[data-page="art"]) .prose h3{font-weight:600;font-size:18px;margin:28px 0 8px}
:where(body[data-page="art"]) .prose p{color:var(--ink-70);margin-bottom:16px;font-size:var(--t-body,16.5px)}
:where(body[data-page="art"]) .prose ul,:where(body[data-page="art"]) .prose ol{margin:0 0 18px 22px;color:var(--ink-70)}
:where(body[data-page="art"]) .prose li{margin-bottom:8px}
:where(body[data-page="art"]) .prose a{font-weight:500}
:where(body[data-page="art"]) .prose a:hover{text-decoration:underline}
:where(body[data-page="art"]) .prose strong{color:var(--ink);font-weight:600}
:where(body[data-page="art"]) .prose em{color:var(--ink-70)}
:where(body[data-page="art"]) .prose code{font-family:var(--mono);font-size:13.5px;background:var(--gray-100);padding:2px 6px;border-radius:4px;color:var(--ink)}
:where(body[data-page="art"]) .prose blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--orange);background:var(--gray-50);border-radius:0 8px 8px 0;color:var(--ink-70);font-size:16.5px}
:where(body[data-page="art"]) .prose blockquote strong{color:var(--ink)}
:where(body[data-page="art"]) .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 6px}
:where(body[data-page="art"]) .disclaimer{font-size:13px;color:var(--ink-50);margin-top:26px;line-height:1.6}  /* --ink-30 measured 3.42:1 on white — fails WCAG 1.4.3 (4.5 for 13px). --ink-50 is 6.32:1.
     Same defect and same fix as .ext in the nav; the token is the trap, not the rule. */
:where(body[data-page="art"]) .back{display:inline-block;margin-top:38px;font-size:14.5px;font-weight:600}
:where(body[data-page="art"]) .back:hover{text-decoration:underline}
:where(body[data-page="art"]) footer{padding:56px 0 36px;font-size:14px;color:var(--ink-50);background:#fff;border-top:1px solid var(--line)}
:where(body[data-page="art"]) .foot-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:24px;margin-bottom:44px}
:where(body[data-page="art"]) .foot-grid h4{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-30);margin-bottom:14px}
:where(body[data-page="art"]) .foot-grid a{display:block;padding:4px 0}
:where(body[data-page="art"]) .foot-grid a:hover{color:var(--ink)}
:where(body[data-page="art"]) .foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--ink-30);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
:where(body[data-page="art"]) .foot-bottom a:hover{color:var(--ink)}
@media(max-width:1000px){
:where(body[data-page="art"]) .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:860px){
:where(body[data-page="art"]) .foot-grid{grid-template-columns:1fr 1fr}
}
:where(body[data-page="art"]){--orange-text:#B34700;}
:where(body[data-page="art"]) .eyebrow{color:inherit}
:where(body[data-page="art"]) .hw span.n{color:inherit}
:where(body[data-page="art"]) .btn-primary{background:var(--orange-text)}
:where(body[data-page="art"]) .btn-primary:hover{background:#963A00}
:where(body[data-page="art"]) .sidebar-item.active,:where(body[data-page="art"]) .chip,:where(body[data-page="art"]) .tag-chip{color:inherit}
:where(body[data-page="art"]) .foot-grid h4,:where(body[data-page="art"]) .foot-bottom,:where(body[data-page="art"]) .sidebar-header{color:var(--ink-50)}
:where(body[data-page="art"]) .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white); color:var(--ink);padding:12px 18px;border:2px solid var(--orange-text);border-radius:0 0 8px 0; font-weight:600;font-size:15px}
:where(body[data-page="art"]) .skip-link:focus{left:0}
:where(body[data-page="art"]) .nav-links a{padding:4px 0}
:where(body[data-page="art"]) .prose pre{overflow-x:auto;max-width:100%}

/* ══ page family: legal ══ */
:where(body[data-page="legal"]){--bg: #f0f4f8; --surface: #f8fafc; --elevated: #ffffff; --overlay: #ffffff; --border: #e2e8f0; --border-hi: #cbd5e1; --accent: #ea580c; --accent-hi: #c2410c; --accent-dim: rgba(234,88,12,.12); --text: #0f172a; --muted: #475569; --faint: #94a3b8; --green: #16a34a; --red: #dc2626; --orange: #ea580c; --yellow: #ca8a04; --radius: 8px; --radius-lg: 12px; --maxw: 1120px;}
:where(body[data-page="legal"]){font-family: "Inter", ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;}
:where(body[data-page="legal"]) ::selection{background: rgba(234,88,12,.22);}
:where(body[data-page="legal"]) a{color: var(--accent-hi); text-decoration: none;}
:where(body[data-page="legal"]) a:hover{color: var(--text);}
:where(body[data-page="legal"]) img{max-width: 100%; display: block;}
:where(body[data-page="legal"]) h1,:where(body[data-page="legal"]) h2,:where(body[data-page="legal"]) h3{letter-spacing: -.02em;}
:where(body[data-page="legal"]) code,:where(body[data-page="legal"]) .mono{font-family: "JetBrains Mono", ui-monospace, monospace;}
:where(body[data-page="legal"]) code{font-size: .85em; background: var(--accent-dim); color: var(--accent-hi); padding: 2px 6px; border-radius: 4px;}
:where(body[data-page="legal"]) .container{max-width: var(--maxw); margin: 0 auto; padding: 0 24px;}
:where(body[data-page="legal"]) .section{padding: 96px 0;}
:where(body[data-page="legal"]) .section-sm{padding: 56px 0;}
:where(body[data-page="legal"]) .center{text-align: center;}
:where(body[data-page="legal"]) .muted{color: var(--muted);}
:where(body[data-page="legal"]) .eyebrow{font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 14px;}
:where(body[data-page="legal"]) .section-title{font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.15; margin-bottom: 16px;}
:where(body[data-page="legal"]) .section-body{font-size: 16px; color: var(--muted); max-width: 620px; line-height: 1.7;}
:where(body[data-page="legal"]) .section-head{max-width: 720px; margin-bottom: 56px;}
:where(body[data-page="legal"]) .section-head.center{margin-left: auto; margin-right: auto;}
:where(body[data-page="legal"]) .section-head.center .section-body{margin-left: auto; margin-right: auto;}
:where(body[data-page="legal"]) nav{position: sticky; top: 0; z-index: 100; height: 60px; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);}
:where(body[data-page="legal"]) .nav-inner{display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;}
:where(body[data-page="legal"]) .nav-logo{display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--text);}
:where(body[data-page="legal"]) .nav-links{display: flex; align-items: center; gap: 28px; list-style: none;}
:where(body[data-page="legal"]) .nav-links a{color: var(--muted); font-size: 14px; font-weight: 500; transition: color 120ms;}
:where(body[data-page="legal"]) .nav-links a:hover{color: var(--text);}
:where(body[data-page="legal"]) .nav-cta{background: var(--accent); color: #ffffff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius); transition: background 140ms;}
:where(body[data-page="legal"]) .nav-cta:hover{background: var(--accent-hi); color: #ffffff;}
:where(body[data-page="legal"]) .btn{display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background 140ms, border-color 140ms, color 140ms;}
:where(body[data-page="legal"]) .btn-primary{background: var(--accent); color: #ffffff;}
:where(body[data-page="legal"]) .btn-primary:hover{background: var(--accent-hi); color: #ffffff;}
:where(body[data-page="legal"]) .btn-secondary{background: transparent; color: var(--text); border-color: var(--border-hi);}
:where(body[data-page="legal"]) .btn-secondary:hover{border-color: var(--accent); color: var(--text);}
:where(body[data-page="legal"]) .btn-ghost{background: transparent; color: var(--muted);}
:where(body[data-page="legal"]) .btn-ghost:hover{color: var(--text);}
:where(body[data-page="legal"]) .hero{position: relative; overflow: hidden; padding: 84px 0 72px; border-bottom: 1px solid var(--border);}
:where(body[data-page="legal"]) .hero::before{content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%); pointer-events: none;}
:where(body[data-page="legal"]) .hero-inner{position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center;}
:where(body[data-page="legal"]) .hero-badge{display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dim); border: 1px solid var(--border-hi); border-radius: 100px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--accent-hi); letter-spacing: .04em; margin-bottom: 24px;}
:where(body[data-page="legal"]) .hero-badge .dot{width: 6px; height: 6px; background: var(--green); border-radius: 50%;}
:where(body[data-page="legal"]) .hero h1{font-size: clamp(34px, 4.6vw, 52px); font-weight: 700; line-height: 1.08; margin-bottom: 22px;}
:where(body[data-page="legal"]) .hero h1 .hl{color: var(--accent-hi);}
:where(body[data-page="legal"]) .hero-sub{font-size: clamp(16px, 2vw, 18px); color: var(--muted); max-width: 560px; line-height: 1.65; margin-bottom: 30px;}
:where(body[data-page="legal"]) .hero-actions{display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px;}
:where(body[data-page="legal"]) .hero-meta{display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--muted);}
:where(body[data-page="legal"]) .hero-meta span{display: inline-flex; align-items: center; gap: 7px;}
:where(body[data-page="legal"]) .hero-meta .ok{color: var(--green);}
:where(body[data-page="legal"]) .preview{border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--elevated); box-shadow: 0 18px 50px rgba(0,0,0,.08);}
:where(body[data-page="legal"]) .preview-chrome{display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--surface); border-bottom: 1px solid var(--border);}
:where(body[data-page="legal"]) .preview-chrome .dot{width: 10px; height: 10px; border-radius: 50%;}
:where(body[data-page="legal"]) .preview-chrome .r{background: #c96a6a;}
:where(body[data-page="legal"]) .preview-chrome .y{background: #c0a85e;}
:where(body[data-page="legal"]) .preview-chrome .g{background: #57a773;}
:where(body[data-page="legal"]) .preview-url{margin-left: 10px; flex: 1; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted);}
:where(body[data-page="legal"]) .preview-body{padding: 18px;}
:where(body[data-page="legal"]) .preview-row{display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 14px; font-family: "JetBrains Mono", monospace;}
:where(body[data-page="legal"]) .preview-row b{color: var(--text); font-weight: 600;}
:where(body[data-page="legal"]) .finding{display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; background: var(--elevated);}
:where(body[data-page="legal"]) .finding:last-child{margin-bottom: 0;}
:where(body[data-page="legal"]) .sev{flex-shrink: 0; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; margin-top: 1px;}
:where(body[data-page="legal"]) .sev-crit{background: rgba(201,106,106,.16); color: var(--red);}
:where(body[data-page="legal"]) .sev-high{background: rgba(192,138,85,.16); color: var(--orange);}
:where(body[data-page="legal"]) .sev-pass{background: rgba(87,167,115,.16); color: var(--green);}
:where(body[data-page="legal"]) .finding-t{font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px;}
:where(body[data-page="legal"]) .finding-d{font-size: 12px; color: var(--muted); line-height: 1.5;}
:where(body[data-page="legal"]) .preview-foot{margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--green);}
:where(body[data-page="legal"]) .preview-anim-wrapper{position: relative; height: 254px; padding: 0;}
:where(body[data-page="legal"]) .anim-view{position: absolute; inset: 0; padding: 18px; opacity: 0; animation: cycleView 12s infinite;}
:where(body[data-page="legal"]) .view-dev{animation-delay: 0s;}
:where(body[data-page="legal"]) .view-audit{animation-delay: 4s;}
:where(body[data-page="legal"]) .view-share{animation-delay: 8s;}
@keyframes cycleView{
:where(body[data-page="legal"]) 0%,:where(body[data-page="legal"]) 25%{opacity: 1; visibility: visible;}
:where(body[data-page="legal"]) 33%,:where(body[data-page="legal"]) 92%{opacity: 0; visibility: hidden;}
:where(body[data-page="legal"]) 100%{opacity: 1; visibility: visible;}
}
:where(body[data-page="legal"]) .code-snippet{background: var(--surface); padding: 12px; border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text); border: 1px solid var(--border); margin: 0 0 10px 0; line-height: 1.5; overflow-x: auto;}
:where(body[data-page="legal"]) .code-snippet code{background: transparent; padding: 0; color: inherit; font-size: inherit;}
:where(body[data-page="legal"]) .share-card{align-items: center;}
:where(body[data-page="legal"]) .ico-wrapper{width: 36px; height: 36px; border-radius: 8px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
:where(body[data-page="legal"]) .share-link-box{background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--accent);}
:where(body[data-page="legal"]) .strip{background: var(--surface); border-bottom: 1px solid var(--border);}
:where(body[data-page="legal"]) .strip-inner{display: grid; grid-template-columns: .6fr repeat(4, 1fr); align-items: center; gap: 0; padding: 22px 24px;}
:where(body[data-page="legal"]) .strip-lead{font-size: 12px; color: var(--faint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;}
:where(body[data-page="legal"]) .strip-item{display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 28px; padding: 0 18px; font-size: 14px; color: var(--muted); text-align: center; border-left: 1px solid var(--border);}
:where(body[data-page="legal"]) .strip-item b{color: var(--text); font-weight: 600;}
:where(body[data-page="legal"]) .strip-item svg{flex-shrink: 0;}
:where(body[data-page="legal"]) .grid-2{display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
:where(body[data-page="legal"]) .grid-3{display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
:where(body[data-page="legal"]) .card{background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; transition: border-color 180ms;}
:where(body[data-page="legal"]) .card:hover{border-color: var(--border-hi);}
:where(body[data-page="legal"]) .card-title{font-size: 16px; font-weight: 700; margin-bottom: 8px;}
:where(body[data-page="legal"]) .card-body{font-size: 13.5px; color: var(--muted); line-height: 1.6;}
:where(body[data-page="legal"]) .problem-grid{display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start;}
:where(body[data-page="legal"]) .stat-card{border-left: 2px solid var(--border-hi); padding: 4px 0 4px 18px; margin-bottom: 22px;}
:where(body[data-page="legal"]) .stat-card:last-child{margin-bottom: 0;}
:where(body[data-page="legal"]) .stat-card .big{font-size: 34px; font-weight: 800; line-height: 1; margin-bottom: 6px; letter-spacing: -.03em;}
:where(body[data-page="legal"]) .stat-card .big.red{color: var(--red);}
:where(body[data-page="legal"]) .stat-card .big.orange{color: var(--orange);}
:where(body[data-page="legal"]) .stat-card .big.yellow{color: var(--yellow);}
:where(body[data-page="legal"]) .stat-card .desc{font-size: 13px; color: var(--muted); line-height: 1.55;}
:where(body[data-page="legal"]) .gap-list{list-style: none;}
:where(body[data-page="legal"]) .gap-list li{display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px;}
:where(body[data-page="legal"]) .gap-list li:last-child{border-bottom: none;}
:where(body[data-page="legal"]) .gap-list strong{color: var(--text);}
:where(body[data-page="legal"]) .tag{flex-shrink: 0; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; margin-top: 1px;}
:where(body[data-page="legal"]) .tag-p0{background: rgba(201,106,106,.15); color: var(--red);}
:where(body[data-page="legal"]) .tag-p1{background: rgba(192,138,85,.15); color: var(--orange);}
:where(body[data-page="legal"]) .tag-p2{background: rgba(192,168,94,.15); color: var(--yellow);}
:where(body[data-page="legal"]) .products{background: var(--surface);}
:where(body[data-page="legal"]) .product-icon{width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--accent-dim);}
:where(body[data-page="legal"]) .product-name{font-size: 20px; font-weight: 700; margin-bottom: 4px;}
:where(body[data-page="legal"]) .product-url{font-family: "JetBrains Mono", monospace; font-size: 12px; margin-bottom: 16px;}
:where(body[data-page="legal"]) .product-desc{color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 22px;}
:where(body[data-page="legal"]) .feature-list{list-style: none; display: flex; flex-direction: column; gap: 9px;}
:where(body[data-page="legal"]) .feature-list li{display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted);}
:where(body[data-page="legal"]) .feature-list li::before{content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--accent);}
:where(body[data-page="legal"]) .audience{background: var(--surface);}
:where(body[data-page="legal"]) .aud-card .ico{width: 40px; height: 40px; border-radius: 9px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; margin-bottom: 16px;}
:where(body[data-page="legal"]) .mission{background: var(--bg); border-bottom: 1px solid var(--border);}
:where(body[data-page="legal"]) .faq{background: var(--bg);}
:where(body[data-page="legal"]) .faq-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px;}
:where(body[data-page="legal"]) .faq-item{border-bottom: 1px solid var(--border); padding-bottom: 18px;}
:where(body[data-page="legal"]) .faq-q{font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px;}
:where(body[data-page="legal"]) .faq-a{font-size: 13.5px; color: var(--muted); line-height: 1.65;}
:where(body[data-page="legal"]) .contact{background: var(--surface); border-top: 1px solid var(--border);}
:where(body[data-page="legal"]) .contact-inner{max-width: 720px; margin: 0 auto; text-align: center;}
:where(body[data-page="legal"]) .cta-row{display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px;}
:where(body[data-page="legal"]) .contact-alt{margin-top: 26px; font-size: 13px; color: var(--muted); display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;}
:where(body[data-page="legal"]) footer{border-top: 1px solid var(--border); background: var(--bg); padding: 52px 0 32px;}
:where(body[data-page="legal"]) .footer-grid{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px;}
:where(body[data-page="legal"]) .footer-brand{font-weight: 700; font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;}
:where(body[data-page="legal"]) .footer-tagline{font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 260px;}
:where(body[data-page="legal"]) .footer-col-title{font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 14px;}
:where(body[data-page="legal"]) .footer-links{list-style: none; display: flex; flex-direction: column; gap: 9px;}
:where(body[data-page="legal"]) .footer-links a{font-size: 13px; color: var(--muted); transition: color 120ms;}
:where(body[data-page="legal"]) .footer-links a:hover{color: var(--text);}
:where(body[data-page="legal"]) .footer-bottom{display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint);}
:where(body[data-page="legal"]) .legal{max-width: 760px; margin: 0 auto; padding: 72px 24px;}
:where(body[data-page="legal"]) .legal h1{font-size: 32px; margin-bottom: 8px;}
:where(body[data-page="legal"]) .legal .updated{font-size: 13px; color: var(--muted); margin-bottom: 36px;}
:where(body[data-page="legal"]) .legal h2{font-size: 19px; margin: 32px 0 12px;}
:where(body[data-page="legal"]) .legal p,:where(body[data-page="legal"]) .legal li{font-size: 15px; color: var(--muted); line-height: 1.7;}
:where(body[data-page="legal"]) .legal ul{margin: 12px 0 12px 22px;}
:where(body[data-page="legal"]) .legal a{color: var(--accent-hi);}
:where(body[data-page="legal"]) .back-link{display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 28px;}
:where(body[data-page="legal"]) .reveal{opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease;}
:where(body[data-page="legal"]) .reveal.visible{opacity: 1; transform: translateY(0);}
:where(body[data-page="legal"]) .reveal-d1{transition-delay: 70ms;}
:where(body[data-page="legal"]) .reveal-d2{transition-delay: 140ms;}
@media (max-width: 960px){
:where(body[data-page="legal"]) .hero-inner{grid-template-columns: 1fr; gap: 40px;}
:where(body[data-page="legal"]) .grid-2,:where(body[data-page="legal"]) .grid-3,:where(body[data-page="legal"]) .problem-grid,:where(body[data-page="legal"]) .faq-grid{grid-template-columns: 1fr;}
:where(body[data-page="legal"]) .footer-grid{grid-template-columns: 1fr 1fr;}
:where(body[data-page="legal"]) .nav-links{display: none;}
:where(body[data-page="legal"]) .strip-inner{grid-template-columns: 1fr 1fr; gap: 0;}
:where(body[data-page="legal"]) .strip-lead{grid-column: 1 / -1; text-align: center; margin-bottom: 10px;}
:where(body[data-page="legal"]) .strip-item{justify-content: center; border-left: none; border-top: 1px solid var(--border); padding: 12px 10px;}
}
@media (max-width: 600px){
:where(body[data-page="legal"]) .section{padding: 64px 0;}
:where(body[data-page="legal"]) .footer-grid{grid-template-columns: 1fr 1fr;}
:where(body[data-page="legal"]) .strip-inner{grid-template-columns: 1fr;}
}
@media (prefers-reduced-motion: reduce){
:where(body[data-page="legal"]) .reveal{opacity: 1; transform: none;}
}
:where(body[data-page="legal"]) .sidebar-header{font-size: 15px; font-weight: 700; color: #111; margin-bottom: 30px; letter-spacing: -0.01em;}
:where(body[data-page="legal"]) .sidebar-group{margin-bottom: 12px;}
:where(body[data-page="legal"]) .sidebar-title{font-size: 13px; font-weight: 500; color: #777; margin-bottom: 12px;}
:where(body[data-page="legal"]) .sidebar-item{display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin-left: -12px; font-size: 14px; color: #444; font-weight: 500; text-decoration: none; border-radius: 6px;}
:where(body[data-page="legal"]) .sidebar-item:hover{background: #f0f0f0; color: #111;}
:where(body[data-page="legal"]) .sidebar-item.has-children svg{opacity: 0.5; width: 14px; height: 14px;}
:where(body[data-page="legal"]) .sidebar-sub{display: flex; flex-direction: column; margin-left: 4px; padding-left: 12px; border-left: 1px solid #eaeaea; margin-top: 4px; margin-bottom: 8px;}
:where(body[data-page="legal"]) .sidebar-sub-item{padding: 8px 12px; font-size: 13px; color: #666; text-decoration: none; font-weight: 500;}
:where(body[data-page="legal"]) .sidebar-sub-item:hover{color: #111;}
:where(body[data-page="legal"]) .sidebar-sub-item.active{color: #111; font-weight: 600; position: relative;}
:where(body[data-page="legal"]) .sidebar-sub-item.active::before{content: ""; position: absolute; left: -13px; top: 0; bottom: 0; width: 2px; background: #111;}
:where(body[data-page="legal"]) .copy-btn{background: transparent; border: 1px solid #444; color: #888; border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
:where(body[data-page="legal"]) .copy-btn:hover{background: #222; color: #fff; border-color: #666;}
:where(body[data-page="legal"]) .blog-hero{padding: 80px 0; text-align: center;}
:where(body[data-page="legal"]) .blog-hero h1{font-size: 52px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px;}
:where(body[data-page="legal"]) .blog-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-bottom: 100px;}
:where(body[data-page="legal"]) .blog-card{display: flex; flex-direction: column; text-decoration: none; color: inherit;}
:where(body[data-page="legal"]) .blog-card-img{width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; margin-bottom: 20px; border: 1px solid var(--border);}
:where(body[data-page="legal"]) .blog-meta{display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; margin-bottom: 12px;}
:where(body[data-page="legal"]) .blog-meta-logo{display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; color: var(--text);}
:where(body[data-page="legal"]) .blog-meta-logo svg{width: 16px; height: 16px;}
:where(body[data-page="legal"]) .blog-meta-tag{font-size: 12px; font-weight: 600; color: #111; display: flex; flex-direction: column; line-height: 1.3;}
:where(body[data-page="legal"]) .blog-card-title{font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: #111;}
:where(body[data-page="legal"]) .blog-card-link{color: #58a6ff; font-size: 14px; font-weight: 500; text-decoration: none; margin-top: auto;}
:where(body[data-page="legal"]) .blog-card:hover .blog-card-link{text-decoration: underline;}
@media (max-width: 900px){
:where(body[data-page="legal"]) .blog-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 600px){
:where(body[data-page="legal"]) .blog-grid{grid-template-columns: 1fr;}
}
:where(body[data-page="legal"]) .legal h3{font-size:17px;font-weight:600;margin:26px 0 8px;color:var(--text)}
:where(body[data-page="legal"]) .legal table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.5px}
:where(body[data-page="legal"]) .legal th,:where(body[data-page="legal"]) .legal td{text-align:left;padding:9px 12px;border:1px solid var(--border);vertical-align:top}
:where(body[data-page="legal"]) .legal th{background:var(--surface);font-weight:600}
:where(body[data-page="legal"]) .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--text); padding:12px 18px;border:2px solid var(--accent-hi);border-radius:0 0 8px 0;font-weight:600}
:where(body[data-page="legal"]) .skip-link:focus{left:0}

/* ══ research register + article system (was assets/css/research.css) ══ */
:root{--d-bg:#0d1117; --d-line:#1f2733; --d-txt:#d7dde5; --d-dim:#8b949e; --hair:#e6e4dd; --reg-idle:#6b7280;}
/* defect-1 (recon-uneven #1): 1120px here vs --max:1180px on nav/footer/.wrap put every
   /research/ content band 30px right of the page's own chrome at >=1204px. On the token now. */
.rs-wrap{max-width:var(--max,1120px);margin:0 auto;padding:0 24px}
.rs-rule{border:0;border-top:1px solid var(--hair);margin:0}
/* defect-2 (recon-uneven #2): these three bands were FIXED 56/72/40px at every width while the
   rest of the site breathes on --band (102.4@1280, 112@1440) — the measured "half rhythm".
   .rs-sec/.rs-feat join --band; .rs-hero adopts .page-hero's exact pair (site.css §2) so
   /research/ starts at the same depth as its sister pages (defect-3). */
.rs-sec{padding:var(--band,56px) 0}
.rs-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:clamp(72px,9vw,120px) 0 clamp(40px,5vw,64px)}
.rs-hero h1{font-size:52px;line-height:1.05;letter-spacing:-.02em;margin:0;font-weight:600}
.rs-hero p{font-size:19px;line-height:1.6;color:var(--ink-50,#4b5563);margin:0;max-width:52ch}
@media(max-width:820px){
.rs-hero{grid-template-columns:1fr;gap:20px;padding:clamp(72px,9vw,120px) 0 clamp(40px,5vw,64px)}
.rs-hero h1{font-size:36px}
}
.rs-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start;padding:var(--band,40px) 0}
.rs-feat .meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--reg-idle);margin:0 0 12px}
.rs-feat h2{font-size:32px;line-height:1.2;letter-spacing:-.015em;margin:0 0 14px;font-weight:600}
.rs-feat h2 a{color:inherit;text-decoration:none}
.rs-feat h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.rs-feat p{font-size:17px;line-height:1.65;color:var(--ink-50,#4b5563);margin:0;max-width:56ch}
.rs-feat img{width:100%;height:auto;border:1px solid var(--hair);border-radius:6px;display:block}
@media(max-width:820px){
.rs-feat{grid-template-columns:1fr;gap:20px}
.rs-feat h2{font-size:26px}
}
.rs-reg{margin:0;border-top:1px solid var(--hair)}
.rs-reg-head,.reg-row{display:grid;grid-template-columns:2fr 2fr 5fr;gap:24px;align-items:baseline}
.rs-reg-head{padding:14px 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--reg-idle);border-bottom:1px solid var(--hair)}
.reg-row{padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--reg-idle)}
.reg-row:hover{color:var(--ink,#111827)}
.reg-row:hover .reg-title{text-decoration:underline;text-underline-offset:3px}
.reg-date,.reg-cat{font-size:14px;white-space:nowrap}
.reg-title{font-size:17px;line-height:1.45;color:var(--ink,#111827)}
.reg-row:focus-visible{outline:2px solid var(--orange-text,#B34700);outline-offset:3px}
/* The register's footnote. It does NOT reuse .disclaimer: that class is declared only inside the
   `art` family (posts), and /research/ is `edit` — so a .disclaimer here would have rendered
   completely unstyled while looking correct in the markup. --ink-50 at 13.5px is the same
   AA-passing pair the post disclaimers use. */
.reg-note{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-50,#6B7280)}
.reg-note a{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:720px){
.rs-reg-head{display:none}
.reg-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
/* `display:inline` was dead — a grid item is blockified — so date and category never shared
   a line and the "· " separator was orphaned at the start of the category row (@390). With
   no run-in there is nothing to separate: the category becomes a label instead. */
.reg-date{font-size:13px}
.reg-cat{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
}
.rs-art{max-width:720px;margin:0 auto;padding:0 24px}
/* defect-3 (recon-uneven #6): page-start depth varied 86px by family under the same 64px nav
   (H1 top y @1440: doc 212, posts 165, /research/ 136). All three heads now share .page-hero's
   top pad clamp(72px,9vw,120px) — doc is the 8-page majority and its depth was the measured
   constant, so posts + /research/ move to it rather than inventing a fourth value. */
.rs-art-head{padding:clamp(72px,9vw,120px) 0 8px;text-align:center}
.rs-art-head .cat{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--reg-idle);margin:0 0 16px}
/* defect-4 (recon-uneven #8): 44px was the last off-scale h1 (scale h1 = --t-h2, 45.6@1440);
   26px prose h2 vs --t-h3 24; the art family's 16.5px body vs --t-body 17. All on tokens now. */
.rs-art-head h1{font-size:var(--t-h2,44px);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;font-weight:600}
.rs-art-head .date{font-size:15px;color:var(--reg-idle);margin:0}
.rs-art .lead{font-size:20px;line-height:1.6;color:var(--ink-50,#4b5563);margin:32px 0 0}
@media(max-width:720px){
.rs-art-head{padding:clamp(72px,9vw,120px) 0 4px}
.rs-art-head h1{font-size:var(--t-h2,30px)}
}
.rs-art .prose{font-size:17px;line-height:1.75;max-width:66ch;margin:0 auto}
.rs-art .prose h2{font-size:var(--t-h3,26px);line-height:1.25;letter-spacing:-.01em;margin:44px 0 14px;font-weight:600}
.rs-art .prose h3{font-size:20px;margin:32px 0 10px;font-weight:600}
.rs-art .prose p{margin:0 0 18px}
.rs-art .prose ul,.rs-art .prose ol{margin:0 0 18px;padding-left:22px}
.rs-art .prose li{margin:0 0 8px}
.rs-art .prose a{color:var(--ink,#111827);text-decoration:underline;text-underline-offset:3px}
.rs-art .prose a:hover{color:var(--ink);text-decoration-thickness:2px}
.rs-art .prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--hair); background:#fafaf8;color:var(--ink-50,#4b5563)}
.rs-art .prose blockquote p:last-child{margin:0}
.rs-art .prose hr{border:0;border-top:1px solid var(--hair);margin:36px 0}
.rs-art .prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.rs-art .prose th,.rs-art .prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.rs-art .prose th{font-weight:600;color:var(--ink,#111827)}
.rs-art .prose img{max-width:100%;height:auto}
.rs-art .prose pre{background:var(--d-bg);border:1px solid var(--d-line);border-radius:10px; padding:16px 18px;overflow-x:auto;max-width:100%;margin:0 0 22px; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.65; box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06)}
.rs-art .prose pre code{background:none;color:var(--d-txt);padding:0;font-size:inherit}
.rs-art .prose code{background:#f3f4f6;border-radius:4px;padding:.12em .38em;font-size:.92em; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.rs-art .prose pre .c{color:var(--d-dim)}
.rs-art .prose pre .k{color:#79c0ff}
.rs-art .prose pre .g{color:#7ee787}
.rs-art .prose pre .hi{color:#e3b341}
.rs-art .prose pre .crit{color:#ff7b72}
@media(prefers-reduced-motion:reduce){
.reg-row,.rs-feat h2 a{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   PHASE 4b — THE DESIGN LAYER
   Adopted from www.anthropic.com (the Webflow homepage system), rendered in Trilocore
   white + orange. Sources, both read from raw HTML + downloaded CSS, not from screenshots:
     .claude/squad-runs/research/anthropic-homepage-design.md   (primary — the mainsite)
     .claude/squad-runs/research/anthropic-research-page-design.md (the /research property)

   What is adopted is structure and restraint, never their skin: three painted tones and no
   fourth; whitespace and fill between bands instead of rules; ONE accent-filled element per
   page; sans headings against serif body copy; a fluid clamp() scale with fixed small text;
   hairlines only INSIDE components; zero <img> in chrome. What is not adopted: their ivory
   #f0eee6 / clay #d97757 palette, their licensed faces (Anthropic Sans/Serif), and every
   effect that needs GSAP — this site ships no JavaScript, so each component's resting state
   IS its finished state. Deliberately absent: any `opacity:0` reveal guard. The research
   flags copying one without its animator as the trap that hides copy permanently.

   This layer is UNSCOPED and comes last, so it overrides all five :where()-scoped page
   families at once — retuning the tokens retunes every component the families already
   define, instead of forking a second vocabulary.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────────────────
   Set on `body`, not `:root`: each page family declares its tokens on its own body scope,
   and a custom property resolves from the NEAREST ancestor that sets it, so :root would
   lose. One rule here retunes all five families. */
body{
  /* Three painted tones, and no fourth. */
  --white:#FFFFFF;              /* page base — the founder's white */
  --gray-50:#F7F5F0;            /* the "oat" equivalent: a WARM neutral. Cold #F8F9FB fought
                                   the orange; this is the one recognisably-Anthropic value
                                   in the palette. #FAFAF8 is the barely-warm alternative. */
  --gray-100:#EFEDE7;
  --navy:#141317;               /* the full stop: manifesto panel + closing CTA + footer */

  /* Ink + hairline, warmed to sit with the neutrals. All AA-verified on white and on tint. */
  --ink:#16161A;                /* 18.04:1 on white, 16.56:1 on tint */
  --ink-70:#3C3C44;             /* 10.93 / 10.03 */
  --ink-50:#6B6B76;             /*  5.26 /  4.83 */
  --ink-30:#A5A29B;             /* non-text only — borders, disabled marks */
  --line:#E4E1DA;
  --line-soft:#EFEDE7;

  /* Orange, RATIONED. The measured rule from the homepage research is: exactly ONE
     accent-filled element per page, and it is the header CTA. Everything that used to be
     orange here — eyebrows, "more" links, section numerals, chips — becomes ink or muted.
       --orange-text #B34700 : 5.50 on white, 5.05 on tint, 5.50 for white text ON it.
       --orange      #E85D04 : 3.50 on white -> NON-TEXT ONLY (mark, selection, 2px rule).
       ⚠ #B34700 on --navy is 3.36 and FAILS: on a dark surface, orange may only ever be
         #E85D04 (5.28) — or, as here, nothing at all. */
  --orange:#E85D04;
  --orange-text:#B34700;
  --orange-dark:#963A00;
  --orange-tint:#FBF0E7;

  /* Type. The serif is a SYSTEM stack: it delivers the sans/serif inversion the research
     calls the strongest "journal, not landing page" signal at ZERO added requests, on a
     site whose stated value is that it loads instantly. Source Serif 4 is picked up free
     where installed; adding the webfont later is a one-line change. */
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --serif:Georgia,'Iowan Old Style','Source Serif 4','Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Fluid scale: ONE rule, no per-element media queries. Everything >=30px interpolates
     over a single 375->1600px band; everything below is FIXED at every width, so body
     copy, labels and nav never shrink. Coefficients are the research's measured ones —
     a hand-derived set was 20% out at 375px and would have shipped frozen. */
  --t-display:clamp(2.5rem,2.0408rem + 1.9592vw,4rem);      /* 40 -> 64 */
  --t-h2:clamp(1.875rem,1.5306rem + 1.4694vw,3rem);         /* 30 -> 48 */
  --t-h3:clamp(1.375rem,1.2599rem + 0.4898vw,1.5rem);       /* 22 -> 24 */
  --t-lede:20px; --t-body:17px; --t-detail:15px; --t-label:13px;

  --max:1180px;
  --band:clamp(56px,5.5vw,88px);
  --r:8px; --r-lg:16px; --r-panel:24px;
}

/* L1 patch request: the research's 12-col 7/5 hero (homepage §2). Anthropic bottom-aligns
   (align-items:end) because their right column is a single serif paragraph; ours carries the
   lede AND the dark console, so `end` would sink the h1 to the foot of a ~400px block.
   `start` (shipped first) measured 200px of dead white UNDER the h1 instead — left column
   246px vs right 446px at 1440 (recon-uneven #9, the founder's screenshot region). `center`
   splits that white evenly around the text block without touching the column widths, so the
   headline's wrap CANNOT change — re-measured anyway: 3 rendered lines (Range/getClientRects,
   deduped by line top) at 1280/1366/1440/1536/1920 after the switch. */
/* align-items was `center`: the left column is much shorter than the console, so it was
   centred against it and its h1 started 230px below the console's top at 1280-1680 —
   the highest-value pixels on the page were empty and the eye met the lede first. */
.hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;
  gap:clamp(32px,5vw,56px)}
/* This design layer is UNSCOPED and last, so it ties with the :where()-scoped family rules at
   (0,1,0) and wins on source order — including, unintentionally, the family's mobile stack at
   @media(max-width:960px). That killed the stack and overflowed / by 81px at 390. The same
   zero-specificity property that made the 4a extraction provable is what makes an override
   here silently outrank a media query. Restated in the design layer so it wins:  */
@media(max-width:960px){.hero-in{grid-template-columns:minmax(0,1fr)}}
/* minmax(0,…) because a plain `fr` track floors at min-content, and the console's nowrap mono
   content can otherwise push the grid wider than its container at intermediate widths too. */
/* 7/5 is L1's measured patch, not a preference: at 1fr 1fr the 538px column breaks the
   headline into 5 lines with two orphans ("A Contract IDE / to build. / An Auditing IDE to /
   break. / One fork to prove it."); at 683px it holds the intended three clauses, one per
   line. The headline's whole device is that rhythm. Cost: the console sits in a 5/12 column
   and its finding rows ellipsed, so they wrap here instead of truncating — a truncated
   finding is worse than a two-line one. */
.hero .drow{flex-wrap:wrap;row-gap:6px}
.hero .drow .t{white-space:normal;overflow:visible;text-overflow:clip}
.hero-in .lede{margin-bottom:28px}

/* ── 2. BAND RHYTHM — whitespace and fill do the structuring ────────────────────────────
   The homepage carries not one horizontal rule between sections (grepped: 0 hits for
   divider/hairline/u-border). Hairlines survive only INSIDE components. */
section,.hero,.page-hero,.stats,.builtfor,.tour-sec,.who-sec,.bridge-sec,.faq-sec,
.mission,.contact,.blog-wrap,.rs-sec{border-top:0;border-bottom:0}
section{padding:var(--band) 0}
.hero{padding:clamp(72px,9vw,132px) 0 var(--band)}
.page-hero{padding:clamp(72px,9vw,120px) 0 clamp(40px,5vw,64px)}
.tour-sec,.who-sec,.faq-sec,.products,.audience{background:var(--gray-50)}
.stats{background:var(--white)}
.builtfor{background:var(--gray-50)}

/* ── 3. TYPE ────────────────────────────────────────────────────────────────────────────
   Sans headings, serif body. That inversion is the whole voice. */
body{font-family:var(--sans);font-size:var(--t-body);line-height:1.65;color:var(--ink);
  background:var(--white)}
h1,h2,h3,h4{letter-spacing:-.022em;text-wrap:balance}
p{text-wrap:pretty}
.hero h1,.article h1{font-size:clamp(2.25rem,1.8571rem + 1.6771vw,3.25rem);
  line-height:1.08;font-weight:700;letter-spacing:-.03em;max-width:none}
  /* 36 -> 56, not the full 40 -> 64: measured at 1280 the headline broke mid-product-name
     ("A Contract / IDE to build."). Capped at 52, NOT 56: the container caps at 1180px so the
     hero column is FIXED at 627.66px from 1180px up, while the clamp kept growing — at 56px
     clause 2 needs 640px and wrapped, orphaning "break." on its own line at 1366/1440/1536/
     1920. Measuring only 1280 and 390 straddled the threshold and missed it. */
.page-hero h1,.rs-hero h1{font-size:var(--t-h2);line-height:1.1;font-weight:700;
  letter-spacing:-.028em;max-width:18ch}
.sec-head h2,.cta h2,.split h2,.rs-feat h2{font-size:var(--t-h2);line-height:1.14;
  font-weight:700;letter-spacing:-.028em;max-width:20ch;margin:0 0 18px}
.who h3,.diff h3,.hw h4,.mis h3,.faq h4,.card-title{font-family:var(--sans);font-size:var(--t-h3);
  line-height:1.3;font-weight:600;letter-spacing:-.015em}
/* `.tp b` was in that list and is NOT a title: measured in Chrome on
   /platform/auditing-ide.html it made mid-sentence <b> emphasis render 24px inside a
   14px serif paragraph, on all 10 panel cards. It is inline emphasis everywhere in
   the tree, so it inherits its paragraph's size. */
/* the serif layer — ledes, blurbs, summaries, prose. A quieter, bookish voice under
   quiet sans headings; this is what stops white+orange reading as generic SaaS. */
.hero .lede,.page-hero p,.sec-head p,.split>div>p,.tp p,.who p,.diff p,.hw p,.mis p,
.faq p,.stat .lbl,.card-body>p,.cta p,.lead,.prose p,.prose li,.rs-hero p,.rs-feat p,
.legal p,.legal li{font-family:var(--serif)}
.hero .lede,.page-hero p{font-size:var(--t-lede);line-height:1.5;color:var(--ink-70);
  max-width:40ch}
.sec-head p{font-size:var(--t-lede);line-height:1.5;color:var(--ink-70);max-width:52ch}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-50)}   /* was orange on 10 pages */

/* ── 4. LINKS — underlined ink, never accent ────────────────────────────────────────── */
.more,.card-link{font-family:var(--sans);font-size:var(--t-detail)}
.more,.faq a,.legal a,.back-link,.back,.card-link,.trust-foot a,
.tc-disclose a,.tc-card a:not(.tc-btn):not(.tc-click){color:var(--ink);
  text-decoration:underline;text-underline-offset:.22em;
  text-decoration-color:var(--ink-30);font-weight:500}
.more:hover,.faq a:hover,.legal a:hover,.back-link:hover,.back:hover,.card-link:hover,
.trust-foot a:hover,.tc-disclose a:hover{text-decoration-color:currentColor}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
.prose a:hover{color:var(--ink);text-decoration-thickness:2px}
h1 a,h2 a{color:inherit;text-decoration:underline;text-underline-offset:.08em;
  text-decoration-thickness:.06em}          /* the link-in-the-headline hero pattern */
h1 a:hover,h2 a:hover{text-decoration-color:var(--orange)}
.n,.who .n,.hw .n{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-50);
  letter-spacing:.06em}   /* every numbered-rule label; these were orange on 3 pages */
.tp .chip,.tag-chip{font-family:var(--mono);font-size:12px;color:var(--ink-70);
  background:var(--gray-100);border:1px solid var(--line);border-radius:4px;
  padding:3px 9px;text-transform:none;letter-spacing:0}

/* ── 5. BUTTONS — one geometry, three token skins, auto-flipping on dark ─────────────── */
.btn,.tc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:9px 18px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--sans);font-size:var(--t-detail);font-weight:600;line-height:1.2;
  letter-spacing:-.005em;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
.btn-primary,.btn.primary,.tc-btn.is-primary{background:var(--ink);color:var(--white);
  border-color:var(--ink)}
.btn-primary:hover,.btn.primary:hover,.tc-btn.is-primary:hover{background:var(--ink-70);
  border-color:var(--ink-70);color:var(--white)}
.btn-secondary,.tc-btn.is-secondary{background:transparent;color:var(--ink);
  border-color:var(--ink)}
.btn-secondary:hover,.tc-btn.is-secondary:hover{background:var(--ink);color:var(--white)}
.tc-btn.is-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.tc-btn.is-ghost:hover{border-color:var(--ink)}
/* THE one accent-filled element on the page: the header CTA. Nothing else may be filled. */
nav .btn-primary,nav .tc-btn.is-primary{background:var(--orange-text);
  border-color:var(--orange-text);color:var(--white)}
nav .btn-primary:hover,nav .tc-btn.is-primary:hover{background:var(--orange-dark);
  border-color:var(--orange-dark)}

/* ── 6. NAV — sticky, opaque, no border, no shadow, no scroll change ─────────────────── */
nav{background:var(--white);backdrop-filter:none;border-bottom:0}
.nav-links a{color:var(--ink-70);font-size:var(--t-detail);font-weight:400;
  text-decoration:none}
.nav-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}

/* ── 7. THE DARK THEME BLOCK — one class flips surface, text, hairline AND every button ─
   Used by .tc-panel, .cta and the footer, so a dark band never needs bespoke rules. */
.on-dark,.cta{background:var(--navy);color:#F7F5F0}
.on-dark h1,.on-dark h2,.on-dark h3,.cta h2{color:#F7F5F0}
.on-dark p,.cta p{color:#A5A29B}
.on-dark a,.cta a{color:#F7F5F0}
.on-dark .btn-primary,.cta .btn-primary,.on-dark .tc-btn.is-primary{background:#F7F5F0;
  color:var(--navy);border-color:#F7F5F0}
.on-dark .btn-primary:hover,.cta .btn-primary:hover{background:#FFFFFF;color:var(--navy)}
.on-dark .btn-secondary,.cta .btn-secondary{background:transparent;color:#F7F5F0;
  border-color:#FFFFFF52}
.on-dark .btn-secondary:hover,.cta .btn-secondary:hover{background:#FFFFFF14;
  border-color:#F7F5F0;color:#F7F5F0}
.on-dark .eyebrow,.cta .eyebrow{color:#A5A29B}

/* ── 8. NEW COMPONENTS — the vocabulary the page lanes build from ────────────────────── */

/* 8a. .tc-card — the tinted spec card. The research calls the mono-labelled spec table
       "the single most stealable device for a technical product": it makes a marketing
       card read as a datasheet. justify-content:space-between bottom-aligns every card's
       table regardless of copy length, so a row of them lines up without hand-tuning. */
.tc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tc-card{display:flex;flex-direction:column;justify-content:space-between;
  background:var(--gray-50);border-radius:var(--r-lg);padding:32px 28px;position:relative;
  overflow:hidden}
.tc-card>*{position:relative;z-index:2}
.tc-card h3{font-size:var(--t-h3);line-height:1.3;font-weight:600;letter-spacing:-.015em;
  max-width:24ch;margin:0 0 12px}
.tc-card p{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink-70);
  margin:0 0 20px;max-width:34ch}
.tc-card-foot{margin-top:auto;padding-top:32px}
/* 8b. .tc-spec — mono uppercase key, value right, hairlines only inside the component */
.tc-spec{list-style:none;margin:0 0 20px;padding:0;border-bottom:1px solid var(--line)}
.tc-spec li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-top:1px solid var(--line);font-size:var(--t-detail)}
.tc-spec .k{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-50);white-space:nowrap}
.tc-spec .v{color:var(--ink);text-align:right}
@media(max-width:991px){.tc-cards{grid-template-columns:1fr}}
/* 8b'. .tc-cards-2 — the upgrade platform/index.html's CEILING comment names (recon-uneven #7):
   five cards in a 3-track grid measured rows [472,472,472]+[472,472] with row two's third track
   empty. Markup splits into a 3-up strip + a 2-up strip carrying this modifier; the margin rule
   keeps the seam equal to the grid's own 24px gap. The <=991px stack is RESTATED because this
   rule sits AFTER the .tc-cards media rule at the same (0,1,0) — the source-order trap (b). */
.tc-cards.tc-cards-2{grid-template-columns:repeat(2,1fr)}
.tc-cards+.tc-cards-2{margin-top:24px}
@media(max-width:991px){.tc-cards.tc-cards-2{grid-template-columns:1fr}}

/* 8c. .tc-panel — the dark rounded manifesto band. The voice flip is the point: the hero
       h1 is sans bold; this h2 is SERIF REGULAR and larger, which is what makes the band
       read as a statement rather than a second hero. Anthropic scroll-scrubs it to
       full-bleed; with no JS the rounded inset IS the resting state, and it looks finished. */
.tc-panel{position:relative;max-width:var(--max);margin:var(--band) auto;
  border-radius:var(--r-panel);padding:clamp(56px,8vw,104px) clamp(28px,5vw,72px);
  text-align:center}
.tc-panel h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.12;
  letter-spacing:-.02em;max-width:14ch;margin:0 auto 20px}
.tc-panel p{font-family:var(--serif);font-size:var(--t-lede);line-height:1.5;
  max-width:52ch;margin:0 auto 28px}
@media(max-width:1228px){.tc-panel{margin-left:24px;margin-right:24px}}

/* 8d. .tc-click — whole block is one link, pure CSS, no JS. Keeps the text selectable and
       the semantics correct; the <a> must carry .tc-sr text so it is never an empty link. */
.tc-clickable{position:relative}
.tc-click{position:absolute;inset:0;z-index:3;border-radius:inherit;display:block}
.tc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 8e. .tc-statement — mission sentence left, quiet register right (col-4 / col-8) */
.tc-statement{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,64px);
  align-items:start}
.tc-statement h2{font-size:var(--t-h3);line-height:1.35;font-weight:600;max-width:20ch;
  margin:0}
@media(max-width:860px){.tc-statement{grid-template-columns:1fr}}

/* 8f. .tc-disclose — the 0fr->1fr grid disclosure, on <details>. Animated, keyboard
       accessible and screen-reader correct for ~10 lines and zero JS. */
.tc-disclose{border-bottom:1px solid var(--line)}
.tc-disclose>summary{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:20px 0;cursor:pointer;list-style:none;font-size:var(--t-h3);font-weight:600;
  letter-spacing:-.015em}
.tc-disclose>summary::-webkit-details-marker{display:none}
/* A heading inside the summary must take the SUMMARY's size, not the UA's em multiple of it.
   Without this the heading LEVEL silently becomes a typographic decision: `summary` sets 24px,
   then the UA's `h2{1.5em}` renders 36px and `h3{1.17em}` renders 28.08px — neither is on the
   scale, and at 390px the h2 form measured 33.1px against a page h1 of 30.2px, i.e. a disclosure
   title LOUDER than the page title. security.html carried six of those. The fix is not to hunt
   for the one level that happens to render right (h4, 1em) — it is to decouple the two, so the
   level can be chosen for the document OUTLINE and the size stays 24px whatever it is. */
.tc-disclose>summary>:is(h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit;
  line-height:inherit;margin:0;letter-spacing:inherit}
.tc-disclose>summary::after{content:"";flex:none;width:11px;height:11px;
  border-right:1.5px solid var(--ink-50);border-bottom:1.5px solid var(--ink-50);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.tc-disclose[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.tc-disclose>.tc-disclose-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .25s ease}
.tc-disclose[open]>.tc-disclose-body{grid-template-rows:1fr}
.tc-disclose>.tc-disclose-body>div{overflow:hidden}
.tc-disclose p{font-family:var(--serif);color:var(--ink-70);margin:0 0 20px;max-width:64ch}

/* ── 9. EXISTING COMPONENTS, retuned to the new language ─────────────────────────────── */
/* cards lose their boxes; hairlines and whitespace carry the structure instead */
.tp,.mis,.who{background:transparent;border:0;border-radius:0;padding:0;
  border-top:1px solid var(--line);padding-top:20px}
.tp:hover{border-color:var(--line)}  /* was transparent, which blinked out the top
   hairline — the only visible edge these cards have now — under the cursor */
.diff-grid,.hw-grid{border:0;border-radius:0;gap:clamp(28px,4vw,48px)}
.diff,.hw{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;background:none}
.stat{border-left:0;border-top:1px solid var(--line);padding:20px 26px 20px 0}
.stat .num{font-size:var(--t-detail);font-weight:600;font-family:var(--mono);
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink-50)}
.stat .lbl{font-size:var(--t-body);color:var(--ink);margin-top:8px;max-width:34ch}
.feat-list{border-top:1px solid var(--line)}
.feat-list li{border-bottom:1px solid var(--line-soft);color:var(--ink-70)}
.feat-list svg{stroke:var(--ink-30)}
.hero-points svg{stroke:var(--ink-30)}
.faq{border-bottom:1px solid var(--line)}
/* the register: ONE component, ONE hover polarity (muted -> ink) sitewide. The homepage
   uses the opposite direction; the research is explicit that mixing the two across one
   brand is the mistake, so /research's existing polarity wins everywhere. */
.reg-row{color:var(--ink-50)}
.reg-row:hover{color:var(--ink)}
.reg-title{color:var(--ink)}
.rs-reg,.rs-reg-head,.reg-row{border-color:var(--line)}
/* blog cards: no border, no shadow — image, then quiet meta, then title */
.card{background:transparent;border:0;border-radius:0;padding:0}
.card:hover{box-shadow:none;transform:none}   /* the family's 32px shadow was still
   painting around a transparent, borderless, square box */
.card-img{border-radius:var(--r);border:1px solid var(--line)}
.card-meta{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-50)}
/* the console keeps its own dark surface but converges on the one dark tone */
.dframe{border-radius:var(--r-lg);box-shadow:none;border:1px solid #26262C}
.dframe,.chat .you,.chat .bot,.rs-art .prose pre{--d-bg:#141317;--d-panel:#1C1B21;--d-line:#2B2A31;
  --d-txt:#E4E1DA;--d-dim:#A5A29B}
.ftabs .on{border-bottom-color:var(--orange)}   /* non-text accent, 5.28:1 on the surface */
/* legal pages join the system */
.legal{max-width:720px;padding:clamp(56px,7vw,96px) 24px}
.legal h1{font-size:var(--t-h2);letter-spacing:-.028em}
.legal h2{font-size:var(--t-h3);margin:40px 0 12px}
.legal p,.legal li{font-size:var(--t-body);color:var(--ink-70);line-height:1.7}
.legal th{background:var(--gray-50)}
.legal table,.legal th,.legal td{border-color:var(--line)}
/* footer: the second dark surface, matching the panel */
footer{background:var(--navy);color:#A5A29B;border-top:0;padding:64px 0 40px}
.foot-grid h4{color:#A5A29B;font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.foot-grid a,.foot-bottom,.foot-bottom a{color:#A5A29B}
.foot-grid a:hover,.foot-bottom a:hover{color:#F7F5F0;text-decoration:underline;
  text-underline-offset:.25em}
.foot-bottom{border-top:1px solid #FFFFFF1F;color:#A5A29B}
footer .logo{color:#F7F5F0}
footer p{color:#A5A29B}

/* ── 10. ACCESSIBILITY ──────────────────────────────────────────────────────────────────
   The focus ring is token-driven off currentColor, so it inverts automatically on any
   .on-dark block instead of hard-coding an orange that measures 3.36:1 there. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
/* NOT currentColor. On a filled button currentColor is the LABEL colour, which contrasts with the
   button's own fill — never with the surface the ring is drawn on, 3px outside it. Measured 1.00:1
   on nav .btn-primary (white ring on the white nav) and 1.00:1 on .cta .btn-primary (near-black on
   near-black): the one accent-filled control on all 16 pages had no focus indicator at all.
   WCAG 2.4.11. The ring is now keyed to the SURFACE behind it. */
.on-dark :focus-visible,.cta :focus-visible,.dframe :focus-visible{outline-color:#F7F5F0}
footer :focus-visible{outline-color:#F7F5F0}
.reg-row:focus-visible,.tc-click:focus-visible{outline:2px solid currentColor;
  outline-offset:3px}
::selection{background:#E85D0433}
.skip-link{background:var(--white);color:var(--ink);border:1px solid var(--ink);
  border-radius:0 0 var(--r) 0}
/* Was right:0 — clipped at the viewport edge and overlapping the nav CTA (measured
   x=1145-1280 @1280). Only one skip link is ever focused, so both use the same corner. */
.skip-link+.skip-link:focus{left:0;right:auto}
/* privacy.html and terms.html carry no <footer> element at all, so they keep the single
   #main skip link. Deliberate, not an omission. */
.tc-mark{color:var(--orange)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* A10, completed: the article code blocks are the third dark surface. They became reachable
   only when L3 adopted the research article template (.rs-art), so this could not be seen
   before the markup landed — the spans were defined but no page used .rs-art. */
.rs-art .prose pre{background:#141317;border-color:#2B2A31;box-shadow:none}
.rs-art .prose pre code{color:#E4E1DA}
.rs-art .prose pre .c{color:#A5A29B}

/* Pre-existing (reproduced on origin/main): the privacy sub-processor table min-content-widths
   past .legal's content box and overflowed the document by 24px at 320. measure.py at 1280/390
   never saw it; 320 is a live iPhone SE viewport. */
.legal table{display:block;overflow-x:auto;max-width:100%}

/* /research featured item. The design layer's .rs-feat h2 rule inherits --t-h2 (up to 48px),
   which is hero scale — too loud for an index entry sitting under a page h1. And .is-text drops
   the second grid column now the cover art is gone: the three existing covers are AI-generated
   neon stock, which the enterprise-minimal directive rules out and which read as a different
   company next to the rest of the site. Text-only until there is on-brand artwork. */
.rs-feat h2{font-size:var(--t-h3);line-height:1.25;max-width:26ch}
@media(max-width:820px){.rs-feat h2{font-size:22px}}
/* restated inside the media query on purpose: the unscoped rule above ties with the
   family's :where()-scoped @media rule at (0,1,1) and wins on source order, which
   would leave that rule dead. Same trap CLAUDE.md documents. */
.rs-feat.is-text{grid-template-columns:1fr;max-width:64ch}

/* ══ 9. NAV SYSTEM — dropdowns + split CTA + mobile sheet. ZERO JavaScript. ═══════════════
   Mechanism: native popover. Research: .claude/squad-runs/research/zero-js-nav-dropdown-2026.md
   Markup: tools/nav.html (frozen, applied by tools/apply-chrome.py, MD5-pinned by gate §2).

   🚨 THREE THINGS IN HERE ARE LOAD-BEARING AND LOOK OPTIONAL:

   (a) `aria-expanded` IS NOT A CONTENT ATTRIBUTE. The browser sets it in the ACCESSIBILITY
       TREE only; `getAttribute('aria-expanded')` is null even while the panel is open
       (measured, Chrome 151). So `[aria-expanded="true"]` — which is what anthropic.com uses,
       because THEIR toggle is JavaScript — is dead CSS here. Every open-state style keys off
       `:has(+ .nav-menu:popover-open)` instead, which is why tools/nav.html requires each panel
       to be the IMMEDIATE NEXT SIBLING of its button. Do not insert anything between them.

   (b) THIS BLOCK IS UNSCOPED AND LAST, so each rule TIES with the :where()-scoped family rule
       at the same specificity and wins on source order — INCLUDING over a family's @media
       rule, because media queries add no specificity. `.nav-links` is declared `display:none`
       at <=900px in FOUR family blocks (site.css:58-60, 274-276, 492-494, 558-560) and at
       <=960px in legal (site.css:764). The moment this block styles `.nav-links` at all, all
       five of those hides die and the desktop links render on top of the burger at 390px.
       => the breakpoint is RESTATED at the end of this block. Do not delete it.

   (c) ONE ELEMENT CARRIES ORANGE. `measure.py`'s census records one entry per ELEMENT per
       painted channel (text / fill / border), so "visually welded" counts as two elements and
       would take every page from orange=2 to orange=4. The fill+border live on `.nav-combo`
       (the wrapper); its children are transparent. Do not move the fill onto the <a>. */

/* 9a. The nav vocabulary, now owned UNSCOPED so it works on every family — including `legal`,
   which had NO nav markup at all and whose own rules use a different class (`.nav-inner`,
   site.css:631) and a different height (60px, site.css:630). Without these five rules a nav
   dropped onto privacy/terms would get no flex, no max-width, no height and no logo layout —
   and gate §15 would still pass, because it only asks whether a selector exists somewhere. */
nav{position:sticky;top:0;z-index:100;height:auto;background:var(--white);
  backdrop-filter:none;border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.logo img{width:26px;height:26px}
.btn-sm{padding:8px 16px;font-size:14px}
/* RIGHT-ALIGNED, next to the CTA — founder's call, 2026-08-15, and it overrides the measurement.
   I had moved the links left because the bar measured 50.5% empty at 1440 with one 540px gap
   after the logo, and anthropic.com sits its links by the wordmark. But "empty" was my reading of
   a number, not a defect: a wide bar with the wordmark alone on the left is a deliberate look, and
   the founder owns that call. `margin-left:auto` pushes the group to the CTA; the gap after the
   logo is intentional whitespace, not a bug to close. Do not "fix" it back on the strength of the
   emptiness figure — the figure is real and the conclusion I drew from it was not. */
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:0;
  font-size:var(--t-detail);font-weight:400;color:var(--ink-70)}
.nav-item{display:inline-flex;align-items:center;gap:4px;position:relative}

/* 9b. The chevron. Shared by nav items, the combo toggle and the burger. */
.nav-chev,.nav-combo-toggle,.nav-burger{display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:0;cursor:pointer;padding:0;
  color:inherit;font:inherit;anchor-name:none}
.nav-chev{width:18px;height:18px;border-radius:4px;color:var(--ink-50)}
.nav-chev::after,.nav-combo-toggle::after{content:"";width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform 160ms}
.nav-chev:hover{color:var(--ink)}
/* (a) above: the ONLY selector that can see the open state from CSS. */
.nav-chev:has(+ .nav-menu:popover-open)::after,
.nav-combo-toggle:has(+ .nav-menu:popover-open)::after{
  transform:rotate(-135deg) translate(-2px,-2px)}

/* 9c. The panel. Group label + link list, mono/ink — never orange (accent ration). */
/* 🚨 NO `display` ON THE BASE RULE. An author `display` beats the UA's
   `[popover]:not(:popover-open){display:none}` — author normal outranks UA normal whatever the
   UA selector's specificity — so a base `display:flex` leaves every panel PERMANENTLY LAID OUT
   and merely transparent. Shipped that way for one commit: all four panels covered the whole
   header as an invisible hit surface, so a real mouse click on a chevron landed on a closed
   panel and the dropdown "did not work"; empty-looking hero space navigated to /security.html;
   and 17 invisible links joined the tab order on every page.
   It survived my own probe because `btn.click()` dispatches straight to the element and
   BYPASSES hit-testing — it reported the menus opening while the header was dead to the mouse.
   Set display on the OPEN state only, and hit-test with elementFromPoint, never with .click(). */
.nav-menu{margin:0;inset:auto;border:1px solid var(--line);background:var(--white);
  border-radius:var(--r-lg);padding:20px 24px;box-shadow:0 1px 2px #1613170f,0 12px 32px #16131714;
  gap:40px;width:max-content;max-width:min(92vw,760px)}
.nav-menu:popover-open{display:flex}
.nav-menu-group{min-width:0}
.nav-menu-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-50);margin:0 0 12px}
.nav-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-menu-list a{display:block;padding:5px 0;color:var(--ink);font-size:var(--t-detail);
  text-decoration:none;white-space:nowrap}
.nav-menu-list a:hover{text-decoration:underline;text-underline-offset:.25em}
/* --ink-30 (#A5A29B) at 12px measured 2.55:1 on white — it fails AA, and it failed on 48
   page/width combinations against a baseline of ZERO. aria-hidden does not exempt it: the
   glyph is still visible text. --ink-50 keeps the arrow subordinate to its label and passes. */
.ext{color:var(--ink-50);font-size:12px}
/* ...but --ink-50 is tuned for the WHITE menu surface it was born on. The same token inside the
   dark .cta band is mid-grey on near-black and fails AA there, and `aria-hidden` does not exempt
   it (see the note above — the glyph is still visible text). On dark the arrow rides its own
   button's colour instead of a fixed ink token. */
.cta .ext{color:inherit}

/* 9d. The split CTA. Wrapper paints (see (c)); children are transparent. */
.nav-combo{display:inline-flex;align-items:stretch;margin-left:0;
  background:var(--orange-text);border:1px solid var(--orange-text);
  border-radius:var(--r);overflow:hidden}
.nav-combo:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.nav-combo-go{display:inline-flex;align-items:center;padding:8px 16px;font-size:14px;
  font-weight:600;color:var(--white);text-decoration:none;background:transparent}
.nav-combo-toggle{width:32px;color:var(--white);
  border-left:1px solid #FFFFFF47}          /* divider: white-alpha, NOT a third orange paint */

/* 9e. Mobile. The site had NO mobile navigation at all — `.nav-links` was simply hidden at
   <=900px and no page's markup contained any menu affordance (measured). */
.nav-burger{width:40px;height:40px;margin-left:auto;border-radius:var(--r);color:var(--ink)}
.nav-burger>span,.nav-burger>span::before,.nav-burger>span::after{display:block;width:18px;
  height:1.5px;background:currentColor;content:"";position:relative}
.nav-burger>span::before{top:-6px}
.nav-burger>span::after{top:4.5px}
/* same rule as .nav-menu above: display goes on the OPEN state, never on the base */
.nav-mobile{margin:0;inset:auto;border:0;border-top:1px solid var(--line);background:var(--white);
  padding:24px;flex-direction:column;gap:28px;
/* was max-height: the sheet measured 677px in a 900px viewport, so the dark scanner mock
   below it stayed on screen and the panel read as a floating card rather than a sheet.
   The 64px nav stays visible above it, so the burger remains the close affordance. */
  width:100vw;height:calc(100dvh - 64px);overflow-y:auto}
.nav-mobile:popover-open{display:flex}
.nav-mobile .nav-menu-list a{white-space:normal;padding:7px 0}
/* zero-JS scroll lock while the sheet is open */
body:has(.nav-mobile:popover-open){overflow:hidden}

/* 9f. TIER 1 — anchored under the trigger. */
@supports (anchor-name:--a){
  #m-platform{position-anchor:--a-platform} .nav-item:has(>#m-platform)>.nav-chev{anchor-name:--a-platform}
  /* Every panel needs its OWN pair here — this list is hand-maintained, and a panel missing
     from it still gets .nav-menu's `position-area` with NO anchor to resolve it against, so it
     lays out from the containing block instead of under its chevron. That is a silent visual
     break in exactly the browsers where the nav is supposed to work BEST (tier 1), which is why
     §18 of the gate now asserts one pair per popover id rather than trusting this comment. */
  #m-docs{position-anchor:--a-docs}         .nav-item:has(>#m-docs)>.nav-chev{anchor-name:--a-docs}
  #m-security{position-anchor:--a-security} .nav-item:has(>#m-security)>.nav-chev{anchor-name:--a-security}
  #m-launch{position-anchor:--a-launch}     .nav-combo-toggle{anchor-name:--a-launch}
  #m-mobile{position-anchor:--a-burger}     .nav-burger{anchor-name:--a-burger}
  .nav-menu{position-area:block-end span-inline-end;margin-block-start:10px;
    position-try-fallbacks:flip-inline,flip-block}
  .nav-menu-end{position-area:block-end span-inline-start}
  .nav-mobile{position-area:block-end span-inline-start;margin-block-start:0}
}
/* 9g. TIER 2 — popover works, placement does not (Firefox ESR 140, Safari/iOS 17-18).
   Without this the UA default (position:fixed;inset:0;margin:auto) centres the panel in the
   viewport like a stray modal. That is a SILENT failure, which is why this branch is not
   optional. Verified by rendering in the real Firefox 140.13esr on this box. */
@supports not (anchor-name:--a){
  .nav-menu,.nav-mobile{position:fixed;top:64px;left:0;right:0;width:auto;max-width:none;
    border-radius:0;border-left:0;border-right:0;justify-content:center}
}
/* 9h. TIER 3 — no popover at all: the UA cannot hide [popover], so every panel renders inline.
   Un-styled, they become flex children of a 64px bar and the layout is destroyed rather than
   degraded. Give them a real stacked layout and hide the now-useless toggles. */
@supports not selector([popover]:popover-open){
  .nav-chev,.nav-combo-toggle,.nav-burger{display:none}
  .nav-in{height:auto;flex-wrap:wrap;padding-block:12px}
  .nav-links{flex-wrap:wrap}
  .nav-item{display:block}
  .nav-menu{position:static;display:block;width:100%;max-width:none;border:0;
    box-shadow:none;padding:8px 0}
  .nav-combo{display:block}
  .nav-mobile{display:none}   /* its links are already inline above; do not print them twice */
  /* 9j below re-shows the burger at <=900px and hides .nav-links — and 9j WINS over a bare
     restatement here: @supports adds no specificity, so a (0,1,0) rule in this block loses to
     9j's later (0,1,0) on source order. Measured with the wrapper stripped (L1 2026-08-15):
     the "restate the hide" line this block first shipped left burger=display:flex and
     menu_links_visible=0 at 390px — a dead burger and NO navigation. In a tier-3 browser the
     inline links ARE the navigation, so both rules out-SPECIFY 9j at (0,1,1) instead: the one
     place §9 uses specificity over source order, because there is no "after 9j" inside 9h. */
  @media(max-width:900px){
    nav .nav-burger{display:none}
    nav .nav-links{display:flex}
  }
}
/* 9i. Entry animation — progressive enhancement. `overlay` is Chrome-only, so exit animation
   is deliberately not attempted (it would clip in Firefox/Safari). */
/* 🚨 NO base `opacity:0` either — CLAUDE.md forbids an opacity reveal guard on this site and the
   reason generalises past "there is no JS to reveal it": the guard lived inside
   `prefers-reduced-motion:no-preference`, so a visitor with Reduce Motion ON matched NOTHING that
   hid the panels and got all four rendered permanently over the page — nav obliterated, hero
   half-covered. Two ways to be invisible is one too many. `display` (above) is now the ONLY thing
   that hides a closed panel; the pre-open frame comes from @starting-style, which is exactly what
   it is for. Under Reduce Motion there is simply no animation, which is the correct behaviour. */
@media(prefers-reduced-motion:no-preference){
  .nav-menu,.nav-mobile{transition:opacity 140ms,translate 140ms,display 140ms allow-discrete}
  @starting-style{.nav-menu:popover-open,.nav-mobile:popover-open{opacity:0;translate:0 -4px}}
}

/* 9j. 🚨 RESTATED BREAKPOINT — see (b). This block's `.nav-links` rule ties with and beats the
   five family rules that hide the links on small screens, INCLUDING their @media versions.
   Deleting this line makes the desktop links and the burger render together at 390px and
   reintroduces horizontal overflow, which is currently zero at every measured width.
   Legal's breakpoint was 960px; unified to 900px on purpose — that difference was an
   inconsistency, not a feature. */
.nav-burger{display:none}
@media(max-width:900px){
  .nav-links{display:none}
  /* The combo STAYS — only its chevron goes. anthropic.com hides its whole combo below 56em,
     but it still ships an accent-filled CTA on mobile; copying only the hiding half measured
     orange=0 at 390px, i.e. the brand accent AND the launch action both vanish on phones.
     The toggle's links are all duplicated in the mobile sheet, so nothing is lost with it. */
  .nav-combo-toggle{display:none}
  .nav-combo{margin-left:auto}
  .nav-in{gap:12px;padding:0 16px}  /* 32px gaps overflowed a 390px bar once the CTA stayed */
  .nav-burger{display:inline-flex;margin-left:0}
}
