/* ============================================================
   Rivett · Audit memo stylesheet · v0.2 tokens-aligned
   - One accent in two values (matches src/styles/tokens.css)
   - No --bad / --good / --warn semantic ramps
   - No question marks in heads, no em-dash sentence breaks
   - Square corners, hairline rules, lowercase wordmark
   ============================================================ */

:root{
  /* Memo paper overrides (warm cardboard aesthetic) */
  --paper:#F6F2EA;
  --paper-2:#EDE6D6;
  --paper-3:#E0D6BF;
  --ink:#1A1814;
  --ink-dim:#4A453B;
  --ink-faint:#7A7367;
  --line:rgba(26,24,20,0.16);
  --line-strong:rgba(26,24,20,0.34);
  /* v0.2 canonical accent (matches rivett-ds/tokens.css and src/styles/tokens.css) */
  --accent:#8FBF3F;
  --accent-deep:#4A6E18;
  /* Type */
  --grotesk:'Inter Tight',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--grotesk);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}

.page{max-width:1180px;margin:0 auto;padding:0 56px}
@media (max-width:780px){.page{padding:0 24px}}

/* mast */
nav.top{display:flex;align-items:center;justify-content:space-between;padding:28px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint)}
nav.top .l{display:flex;align-items:center;gap:14px}
nav.top .r{display:flex;gap:32px}
nav.top b{color:var(--ink);font-weight:500}
.wordmark{display:inline-flex;align-items:center;gap:0.12em;font-family:var(--grotesk);font-weight:700;font-size:28px;letter-spacing:-0.05em;line-height:1;color:var(--ink);text-transform:none}
.wordmark .dot-mark{display:inline-block;width:0.32em;height:0.32em;border-radius:999px;background:var(--accent);transform:translateY(0.04em)}
@media (max-width:780px){.wordmark{font-size:24px}}

.crumb{margin-top:48px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.crumb .sep{opacity:0.4}
.crumb a:hover{color:var(--accent-deep)}

/* cover */
.cover{padding:48px 0 56px;border-bottom:1px solid var(--line-strong)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent-deep);display:inline-flex;align-items:center;gap:12px;margin-bottom:36px}
.kicker::before{content:'';width:8px;height:8px;background:var(--accent);border-radius:50%}
h1.cv{font-family:var(--grotesk);font-weight:800;font-size:clamp(48px,7.4vw,108px);line-height:0.92;letter-spacing:-0.05em;margin:0;text-wrap:balance;max-width:1080px}
/* T7 · Hero dek is ROMAN (Inter Tight). The italic clause lives inside h1.cv now.
   Two italic surfaces stacked would violate § 10 (never a whole sentence in italic). */
.cv-dek{font-family:var(--grotesk);font-weight:500;font-size:clamp(20px,2.6vw,28px);line-height:1.32;letter-spacing:-0.015em;color:var(--ink-dim);margin:24px 0 0;max-width:880px;text-wrap:pretty}
h1.cv .ital{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.02em;color:var(--ink-dim)}
.cv-sub{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;margin-top:48px;align-items:end}
@media (max-width:880px){.cv-sub{grid-template-columns:1fr;gap:32px}}
.lede{font-family:var(--grotesk);font-size:21px;line-height:1.5;color:var(--ink-dim);max-width:680px;margin:0;text-wrap:pretty}
.lede em{font-family:var(--serif);font-style:italic;color:var(--ink);font-weight:400}
.cv-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cv-meta b{display:block;color:var(--ink);font-family:var(--grotesk);font-weight:600;font-size:14px;letter-spacing:-0.01em;text-transform:none;margin-top:4px}

/* tldr */
.tldr{margin:48px 0 0;background:var(--paper-2);border:1px solid var(--ink);padding:36px 40px;display:grid;grid-template-columns:120px 1fr;gap:32px}
@media (max-width:780px){.tldr{grid-template-columns:1fr;padding:28px;gap:18px}}
.tldr .lab{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:10px;padding-top:6px}
.tldr .lab::before{content:'';width:8px;height:8px;background:var(--accent);border-radius:50%;flex-shrink:0}
.tldr .body{display:flex;flex-direction:column;gap:14px}
.tldr p{margin:0;font-size:18px;line-height:1.55;color:var(--ink);font-weight:500;text-wrap:pretty;max-width:780px}
.tldr p strong{font-weight:700}
.tldr p em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-dim)}

/* verdict grid — 3×2 on desktop (6 cells typical), expandable cells via native <details>.
   Borders use border-top + border-right so row counts of 3-8 cells all separate cleanly. */
.verdict{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);background:var(--paper)}
.verdict .v{padding:0;border-right:1px solid var(--ink);border-top:1px solid var(--ink)}
.verdict .v:nth-child(3n){border-right:0}
.verdict .v:nth-child(-n+3){border-top:0}
@media (max-width:980px){
  .verdict{grid-template-columns:repeat(2,1fr)}
  .verdict .v{border-right:1px solid var(--ink);border-top:1px solid var(--ink)}
  .verdict .v:nth-child(3n){border-right:1px solid var(--ink)}
  .verdict .v:nth-child(2n){border-right:0}
  .verdict .v:nth-child(-n+3){border-top:1px solid var(--ink)}
  .verdict .v:nth-child(-n+2){border-top:0}
}
@media (max-width:520px){
  .verdict{grid-template-columns:1fr}
  .verdict .v{border-right:0;border-top:1px solid var(--ink)}
  .verdict .v:first-child{border-top:0}
}
.verdict details.v{cursor:pointer}
.verdict details.v summary{list-style:none;padding:24px 24px 22px;display:block;outline:none;transition:background 120ms}
.verdict details.v summary::-webkit-details-marker{display:none}
.verdict details.v summary::marker{display:none}
.verdict details.v summary:hover{background:var(--paper-2)}
.verdict details.v[open] summary{background:var(--paper-2);border-bottom:1px dashed var(--line)}
.verdict .k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;display:flex;align-items:center;gap:10px;text-wrap:pretty}
.verdict .k .ic{width:14px;height:14px;flex-shrink:0;color:var(--accent-deep)}
.verdict .g{font-family:var(--grotesk);font-weight:800;font-size:52px;line-height:1;letter-spacing:-0.04em;color:var(--ink);white-space:nowrap}
@media (max-width:980px){.verdict .g{font-size:44px}}
@media (max-width:780px){.verdict .g{font-size:40px}}
.verdict .n{font-family:var(--grotesk);font-size:13.5px;letter-spacing:0;color:var(--ink-dim);margin-top:12px;line-height:1.45;text-transform:none;max-width:300px;text-wrap:pretty}
.verdict .bench{font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.verdict .bench b{color:var(--ink);font-family:var(--grotesk);font-weight:600;font-size:14px;letter-spacing:-0.01em;text-transform:none;margin-left:6px}
.verdict .expand{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;justify-content:space-between;gap:8px}
.verdict .expand .chev{display:inline-block;transition:transform 160ms;color:var(--ink-faint)}
.verdict details.v[open] .expand .chev{transform:rotate(180deg);color:var(--accent-deep)}
.verdict details.v[open] .expand .label::before{content:'− '}
.verdict details.v:not([open]) .expand .label::before{content:''}
.verdict .checks{padding:18px 24px 22px;background:var(--paper)}
.verdict .checks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.verdict .checks li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-family:var(--grotesk);font-size:13.5px;line-height:1.45;color:var(--ink-dim);align-items:start;text-wrap:pretty}
.verdict .checks li .ic{width:14px;height:14px;margin-top:3px}
.verdict .checks li .ic.ok{color:var(--accent-deep)}
.verdict .checks li .ic.no{color:var(--ink)}
.verdict .checks li span.ok{color:var(--ink)}
.verdict .checks li span.no{color:var(--ink-dim)}
.verdict .checks li span.no::after{content:''}
.verdict .checks li code{font-family:var(--mono);font-size:12px;background:var(--paper-2);padding:0 4px;color:var(--ink)}

/* section frame */
section.sec{border-top:1px solid var(--line-strong);padding:96px 0}
@media (max-width:780px){section.sec{padding:64px 0}}
.sec-head{display:grid;grid-template-columns:140px 1fr;gap:48px;align-items:start;margin-bottom:40px}
@media (max-width:780px){.sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:28px}}
.sec-head .num{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent-deep);padding-top:14px}
.sec-head .num::before{content:'';display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:10px;transform:translateY(-1px)}
.sec-head h2{font-family:var(--grotesk);font-weight:700;font-size:clamp(32px,4.4vw,52px);line-height:1.02;letter-spacing:-0.04em;margin:0;color:var(--ink);text-wrap:balance;max-width:900px}
.sec-head h2 .ital{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.02em;color:var(--ink-dim)}
.sec-head .dek{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--ink-dim);margin:18px 0 0;max-width:720px;text-wrap:pretty}

p.body{font-family:var(--grotesk);font-size:17px;line-height:1.65;color:var(--ink);font-weight:400;margin:0;max-width:720px;text-wrap:pretty}
p.body + p.body{margin-top:18px}
p.body strong{font-weight:600}
p.body em{font-family:var(--serif);font-style:italic;font-size:1.02em;color:var(--ink-dim)}
p.body code{font-family:var(--mono);font-size:14.5px;background:var(--paper-2);padding:1px 5px;color:var(--ink)}

/* code block / quote */
.snippet{margin:18px 0 0;padding:14px 18px;background:var(--paper-2);border-left:3px solid var(--ink-faint);font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);max-width:720px;white-space:pre-wrap}
.snippet b{color:var(--accent-deep);font-weight:500}

/* mirror block (00 · The mirror) */
.mirror{margin-top:48px;padding:56px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line-strong)}
@media (max-width:780px){.mirror{padding:40px 0}}
.mirror .sec-head{margin-bottom:36px}
.mirror .row{display:grid;grid-template-columns:160px 1fr;gap:48px;margin-bottom:28px;align-items:start}
.mirror .row:last-child{margin-bottom:0}
.mirror .row .lab{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;padding-top:4px;display:flex;align-items:center;gap:10px}
.mirror .row .lab::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mirror .row.ai .lab{color:var(--accent-deep)}
.mirror .row.ai .lab::before{background:var(--accent)}
/* T8 · YOU CLAIM and THE GAP render as neutral stamps — no dot, ink-faint or ink */
.mirror .row.claim .lab{color:var(--ink-faint)}
.mirror .row.claim .lab::before{display:none}
.mirror .row.gap{margin-top:16px;padding:28px 0 0;border-top:1px dashed var(--line-strong)}
.mirror .row.gap .lab{color:var(--ink);font-weight:500}
.mirror .row.gap .lab::before{display:none}
.mirror .row p{margin:0;font-family:var(--grotesk);font-size:17px;line-height:1.65;color:var(--ink-dim);max-width:720px;text-wrap:pretty}
.mirror .row.gap p{color:var(--ink);font-weight:500;font-size:18px}
.mirror .row p em{font-family:var(--serif);font-style:italic;color:var(--ink)}
@media (max-width:780px){.mirror .row{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.mirror .row.gap{padding-top:22px}}

/* before / after */
.ba{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink)}
@media (max-width:780px){.ba{grid-template-columns:1fr}}
.ba .b,.ba .a{padding:28px 30px;display:flex;flex-direction:column;gap:14px}
.ba .b{background:var(--paper);border-right:1px solid var(--ink)}
.ba .a{background:var(--paper-2)}
@media (max-width:780px){.ba .b{border-right:0;border-bottom:1px solid var(--ink)}}
.ba .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.ba .b .lab{color:var(--ink-faint)} /* neutral, no dot */
.ba .a .lab{color:var(--accent-deep)}
.ba .a .lab::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ba .h{font-family:var(--grotesk);font-weight:700;font-size:23px;line-height:1.2;letter-spacing:-0.025em;color:var(--ink);text-wrap:pretty;margin:0}
.ba .h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-dim)}
.ba .h code{font-family:var(--mono);font-size:0.78em;background:var(--paper-3);padding:1px 5px}
.ba .note{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--ink-dim);margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);letter-spacing:0.03em}

/* context panel — "Why this matters" */
.context{margin-top:48px;background:var(--paper-2);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:36px 40px;display:grid;grid-template-columns:160px 1fr;gap:48px;align-items:start}
@media (max-width:780px){.context{grid-template-columns:1fr;padding:28px;gap:18px}}
.context .lab{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:10px;padding-top:4px}
.context .lab::before{content:'';width:8px;height:8px;background:var(--accent);border-radius:50%;flex-shrink:0}
.context p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink);margin:0;max-width:780px;text-wrap:pretty}
.context p + p{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.context p b{font-family:var(--grotesk);font-style:normal;font-weight:700;color:var(--ink)}

/* fix-kit email gate */
.fixkit{margin-top:64px;background:var(--paper-2);border:1px solid var(--ink);padding:36px 40px}
@media (max-width:780px){.fixkit{padding:28px}}
.fixkit .lab{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.fixkit .lab::before{content:'';width:8px;height:8px;background:var(--accent);border-radius:50%;flex-shrink:0}
.fixkit h3{font-family:var(--grotesk);font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-0.03em;margin:0 0 10px;text-wrap:balance}
.fixkit h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-dim)}
.fixkit p{font-family:var(--grotesk);font-size:15.5px;line-height:1.55;color:var(--ink-dim);margin:0 0 22px;max-width:620px;text-wrap:pretty}
.fixkit form{display:grid;grid-template-columns:1fr auto;gap:0;max-width:620px;border:1px solid var(--ink);background:var(--paper)}
@media (max-width:540px){.fixkit form{grid-template-columns:1fr}}
.fixkit input{padding:16px 20px;border:0;background:transparent;font-family:var(--mono);font-size:13px;letter-spacing:0.02em;color:var(--ink);outline:none;width:100%}
.fixkit input::placeholder{color:var(--ink-faint)}
.fixkit input:focus{background:var(--paper-2)}
.fixkit button{padding:16px 24px;border:0;border-left:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;cursor:pointer;transition:background 120ms,color 120ms}
@media (max-width:540px){.fixkit button{border-left:0;border-top:1px solid var(--ink);width:100%}}
.fixkit button:hover{background:var(--accent-deep)}

/* share button */
.share-btn{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);background:none;border:0;cursor:pointer;padding:0;transition:color 120ms;font-weight:400}
.share-btn:hover{color:var(--accent-deep)}
.share-btn b{color:var(--ink);font-weight:500}

/* finding row */
.findings{border-top:2px solid var(--ink);margin-top:32px}
.find{display:grid;grid-template-columns:64px 130px 1fr 100px;gap:28px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
@media (max-width:880px){.find{grid-template-columns:64px 1fr;gap:14px 16px}.find .sev{grid-column:1 / span 2}.find .pri{grid-column:1 / span 2;text-align:left;padding-top:0}}
.find .idx{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--ink-faint);padding-top:4px}
.find .sev{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px;padding-top:4px;color:var(--accent-deep)}
.find .sev::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--accent)}
/* T8 · FIX stamp is neutral — no dot, ink-faint. Only KEEP carries the accent. */
.find .sev.sev--neutral{color:var(--ink-faint)}
.find .sev.sev--neutral::before{display:none}
.find .b h4{font-family:var(--grotesk);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-0.025em;margin:0 0 12px;text-wrap:pretty;color:var(--ink)}
.find .b h4 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-dim)}
.find .b p{margin:0;font-family:var(--grotesk);font-size:15.5px;line-height:1.6;color:var(--ink-dim);font-weight:400;max-width:640px;text-wrap:pretty}
.find .b p + p{margin-top:10px}
.find .b p strong{color:var(--ink);font-weight:600}
.find .b p em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.find .b p code{font-family:var(--mono);font-size:13.5px;background:var(--paper-2);padding:1px 5px;color:var(--ink)}
.find .pri{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);text-align:right;padding-top:6px}
.find .pri b{display:block;color:var(--ink);font-family:var(--grotesk);font-weight:700;font-size:15px;letter-spacing:-0.01em;text-transform:none;margin-top:6px}

/* recs table */
.recs{margin-top:24px;border-top:2px solid var(--ink)}
.recs .row{display:grid;grid-template-columns:40px 1fr 110px 120px;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
@media (max-width:780px){.recs .row{grid-template-columns:40px 1fr;gap:8px 14px}.recs .row .effort, .recs .row .impact{grid-column:2;font-size:10.5px}}
.recs .rank{font-family:var(--mono);font-size:13px;color:var(--accent-deep);font-weight:500}
.recs .what{font-family:var(--grotesk);font-weight:600;font-size:17px;letter-spacing:-0.015em;color:var(--ink);line-height:1.35;text-wrap:pretty}
.recs .what em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-dim)}
.recs .what code{font-family:var(--mono);font-size:14px;background:var(--paper-2);padding:1px 5px}
.recs .effort, .recs .impact{font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint)}
/* T4 · Effort and Impact values render in --ink only. No semantic colour. */
.recs .effort b, .recs .impact b{display:block;color:var(--ink);font-family:var(--grotesk);font-weight:600;letter-spacing:-0.01em;text-transform:none;font-size:14px;margin-top:4px}
/* v3 Top 3 Fixes — extends .recs with a why paragraph under the what headline */
.recs .row{align-items:start}
.recs .row .what .what-h{font-family:var(--grotesk);font-weight:700;font-size:19px;letter-spacing:-0.02em;color:var(--ink);line-height:1.25;text-wrap:pretty}
.recs .row .what .what-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-dim)}
.recs .row .what .what-h code{font-family:var(--mono);font-size:0.86em;background:var(--paper-2);padding:1px 5px;color:var(--ink)}
.recs .row .what .why{margin:8px 0 0;font-family:var(--grotesk);font-weight:400;font-size:14.5px;line-height:1.55;color:var(--ink-dim);max-width:640px;text-wrap:pretty}
.recs .row .what .why strong{color:var(--ink);font-weight:600}
.recs .row .what .why em{font-family:var(--serif);font-style:italic;color:var(--ink)}

/* CTA row */
.cta-row{margin-top:48px;display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center}
@media (max-width:780px){.cta-row{grid-template-columns:1fr;gap:12px}}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;padding:18px 28px;border:1px solid var(--ink);display:inline-flex;align-items:center;gap:14px;transition:background 120ms,color 120ms}
.btn--p{background:var(--ink);color:var(--paper)}
.btn--p:hover{background:var(--accent-deep)}
.btn--g{background:transparent;color:var(--ink)}
.btn--g:hover{background:var(--paper-2)}
.cta-row .url{font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;color:var(--ink-faint);justify-self:end;text-transform:none}
.cta-row .url b{color:var(--ink);font-weight:500}

/* end-CTA (dark closing memo) */
.memo{margin-top:96px;background:var(--ink);color:var(--paper);padding:80px 56px;display:grid;grid-template-columns:160px 1fr;gap:48px}
@media (max-width:780px){.memo{grid-template-columns:1fr;padding:48px 28px;gap:24px}}
.memo .lab{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,242,234,0.55)}
.memo .lab::before{content:'';display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:10px;transform:translateY(-1px)}
.memo h2{font-family:var(--grotesk);font-weight:700;font-size:clamp(32px,3.8vw,48px);line-height:1.05;letter-spacing:-0.04em;margin:0 0 24px;text-wrap:balance}
.memo h2 .ital{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(246,242,234,0.62)}
.memo p{font-size:17px;line-height:1.6;color:rgba(246,242,234,0.82);margin:0;max-width:700px}
.memo p + p{margin-top:14px}
.memo p em{font-family:var(--serif);font-style:italic;color:rgba(246,242,234,0.62)}
.memo p strong{color:var(--paper);font-weight:600}
.memo .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.memo .actions .btn{border-color:rgba(246,242,234,0.4);color:var(--paper)}
.memo .actions .btn--inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.memo .actions .btn--inv:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.memo .sig{margin-top:32px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,242,234,0.55)}
.memo .sig b{color:var(--paper);font-family:var(--grotesk);font-weight:600;font-size:14px;letter-spacing:-0.01em;text-transform:none;display:block;margin-bottom:4px}

footer.foot{padding:48px 0 64px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer.foot a:hover{color:var(--accent-deep)}

/* ============================================================
   v3 Mode 2 additions — Hook, Benchmark, Screenshot frame
   ============================================================ */
.benchmark-line{margin-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:20px 28px;align-items:baseline}
.benchmark-line b{color:var(--ink);font-family:var(--grotesk);font-weight:700;font-size:18px;letter-spacing:-0.01em;text-transform:none;margin-left:8px}
.benchmark-line .delta{font-family:var(--grotesk);font-size:13px;letter-spacing:-0.005em;text-transform:none;color:var(--ink-dim);margin-left:6px}
.score-big{display:inline-flex;align-items:baseline;gap:4px;margin-right:8px}
.score-big .n{font-family:var(--grotesk);font-weight:800;font-size:64px;line-height:1;letter-spacing:-0.04em;color:var(--ink)}
.score-big .of{font-family:var(--mono);font-size:12px;letter-spacing:0.18em;color:var(--ink-faint);text-transform:uppercase}
@media (max-width:780px){.score-big .n{font-size:52px}}
.benchmark-oneliner{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink);max-width:720px;text-wrap:pretty}
.screenshot-frame{margin:48px 0 0;border:1px solid var(--line-strong);background:var(--paper-2);padding:0;overflow:hidden;display:grid;gap:0}
.screenshot-frame img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.screenshot-frame .meta{padding:14px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.screenshot-frame .meta b{color:var(--ink);font-weight:500}

/* section tight modifier — used by Verdict Grid which provides its own breathing room */
section.sec.sec--tight{padding:48px 0 16px}
@media (max-width:780px){section.sec.sec--tight{padding:40px 0 12px}}

/* body--obs · personal observation has a slightly larger, more serif-leaning body */
.body.body--obs{font-family:var(--grotesk);font-size:18px;line-height:1.6;color:var(--ink);max-width:780px;text-wrap:pretty}
.body.body--obs strong{font-weight:700}
.body.body--obs em{font-family:var(--serif);font-style:italic;color:var(--ink-dim)}