/* RecapWP — "Ledger" design base.
 *
 * A faithful port of the design handoff's shared foundation:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/home-ledger.css
 * Ported VERBATIM so the desktop design is pixel-exact. The only deltas are the
 * clearly-marked "THEME ADDITIONS" block at the foot of this file — do not
 * scatter local changes through the ported rules, or the next design drop can no
 * longer be diffed against this file.
 *
 * Scope: tokens, reset, buttons, masthead, hero, sections, pricing, FAQ, closing
 * band and footer — i.e. the chrome + shared blocks every Ledger page needs, plus
 * the homepage's own blocks (hero mock, trio, steps, register), exactly as the
 * handoff shipped them in one file.
 *
 * Loaded by: front-page.php (via header-ledger.php). As Pro / Docs / About / etc.
 * migrate to Ledger, they load this file as their base + their own page sheet —
 * so treat every rule here as SHARED. Page-specific rules belong in a
 * page-<slug> sheet, not here.
 *
 * Deliberately does NOT load alongside foundation.css / fonts.css: the legacy
 * "Mission Control" sheets define competing :root tokens and would fight this
 * file. See the enqueue map in functions.php.
 *
 * Type comes from fonts-ledger.css (self-hosted Lora / Public Sans / IBM Plex Mono).
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ac:#A8853B;
  --navy:#0C2233; --navy2:#0E2A40; --navy-ln:rgba(255,255,255,.10);
  --paper:#F2F0EA; --card:#FBFAF7; --card-ln:#DEDAD0;
  --ink:#15202B; --mut:#5B6673; --hint:#8B94A0;
  --pass:#2E7D5B; --warn:#B07B2E; --crit:#A63D2F;
  --serif:'Lora',serif; --sans:'Public Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  --shadow-1:0 1px 2px rgba(12,34,51,.06),0 4px 14px rgba(12,34,51,.06);
  --shadow-2:0 2px 4px rgba(12,34,51,.08),0 14px 34px rgba(12,34,51,.10);
}
html{scroll-behavior:smooth}
body{background:var(--paper);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.shell{max-width:1160px;margin:0 auto;padding:0 44px;width:100%}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 13px var(--sans);letter-spacing:.02em;padding:13px 24px;border-radius:3px;border:1px solid transparent;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-ic{flex-shrink:0}
.btn.gold{background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 86%,#fff));color:#000;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px rgba(0,0,0,.35)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.ghost{border-color:var(--navy-ln);color:#C9CFD4;background:transparent}
.btn.ghost:hover{border-color:#5A6a78;color:#F3EFE5}
.btn.paper{background:#fff;border-color:var(--card-ln);color:var(--ink);box-shadow:0 1px 2px rgba(12,34,51,.06)}
.btn.paper:hover{border-color:var(--ac);color:var(--ac)}
.btn.navy{background:linear-gradient(180deg,var(--navy2),var(--navy));color:#EDE6D6;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 12px rgba(12,34,51,.22)}
.btn.navy:hover{filter:brightness(1.12)}
.btn.sage{background:linear-gradient(180deg,#CFDDCC,#C3D4C0);color:#24402E;border:1px solid #AFC6AC;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 1px 3px rgba(46,80,58,.14)}
.btn.sage:hover{background:#B7CCB4;border-color:#A3BCA0}
.btn.mist{background:linear-gradient(180deg,#D3DEE9,#C5D3E0);color:#2B4155;border:1px solid #ABBED0;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 1px 3px rgba(43,65,85,.14)}
.btn.mist:hover{background:#B7C8D8;border-color:#9AB0C4}

/* ── masthead / nav ── */
.mast{background:linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);color:#E9E4D8;position:relative;overflow-x:clip}
.mast::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ac) 80%,#fff) 30%,color-mix(in oklab,var(--ac) 80%,#fff) 70%,transparent)}
.mast-row{position:relative;display:flex;align-items:center;gap:16px;padding:20px 0}
.mast-row::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100vw;height:1px;background:var(--navy-ln)}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark:hover{text-decoration:none}
.crest{width:34px;height:34px;border:1px solid color-mix(in oklab,var(--ac) 70%,transparent);border-radius:2px;position:relative;background:rgba(255,255,255,.03);flex-shrink:0}
.crest::before{content:'R';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 17px var(--serif);color:color-mix(in oklab,var(--ac) 85%,#fff)}
.wordmark b{font:600 17px var(--serif);letter-spacing:.01em;color:#F3EFE5}
.ver{font:600 9.5px var(--mono);letter-spacing:.14em;padding:5px 9px 4px;border:1px solid var(--navy-ln);color:var(--hint);border-radius:2px}
.mast-row .sp{flex:1}
.mast-nav{display:flex;gap:4px}
.mast-nav a{font:500 13px var(--sans);color:#AEB7BE;padding:9px 14px;border-radius:3px;letter-spacing:.01em}
.mast-nav a:hover{color:#F3EFE5;text-decoration:none;background:rgba(255,255,255,.05)}
.mast-util{display:flex;gap:14px;margin-left:10px;padding-left:20px;border-left:1px solid var(--navy-ln);align-items:center}
.mast-util a:not(.btn){font:500 12px var(--sans);color:#8D97A1}
.mast-util a:not(.btn):hover{color:#E9E4D8;text-decoration:none}
.btn.sm{padding:9px 16px;font-size:12px}

/* ── hero ── */
.hero{display:flex;align-items:center;gap:64px;padding:72px 0 76px}
.hero .lead{flex:1;min-width:0}
.overline{font:600 10.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in oklab,var(--ac) 85%,#fff);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.overline::after{content:'';height:1px;width:44px;background:color-mix(in oklab,var(--ac) 50%,transparent)}
.hero h1{font:500 clamp(34px,3.6vw,48px)/1.16 var(--serif);letter-spacing:-.01em;color:#F5F1E7;max-width:560px;text-wrap:balance}
.hero h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.hero .sub{font:400 15px/1.7 var(--sans);color:#9AA5AE;margin-top:18px;max-width:480px}
.hero .sub b{color:#D5DCE1;font-weight:600}
.hero .cta-row{display:flex;gap:12px;margin-top:30px;align-items:center;flex-wrap:wrap}
.hero .fine{font:11px var(--mono);color:#6E7B86}
.hero-marks{display:flex;gap:0;margin-top:44px;border-top:1px solid var(--navy-ln);max-width:520px}
.hero-marks .m{flex:1;padding:16px 18px 0 0}
.hero-marks .m+.m{padding-left:22px;border-left:1px solid var(--navy-ln)}
.hero-marks .l{font:600 9px var(--mono);letter-spacing:.18em;color:#6E7B86}
.hero-marks .v{font:500 15px var(--serif);color:#E9E4D8;margin-top:6px}

/* hero mock — standing report plate */
.mock{flex-shrink:0;width:430px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--navy-ln);border-radius:5px;box-shadow:0 30px 70px rgba(0,0,0,.45);position:relative;overflow:hidden}
.mock::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:color-mix(in oklab,var(--ac) 55%,transparent);z-index:1}
.mock-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 16px;border-bottom:1px solid var(--navy-ln)}
.mock-hd .t{font:600 10px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#8D97A1}
.mock-hd .d{font:10px var(--mono);color:#6E7B86}
.mock-score{display:flex;align-items:center;gap:22px;padding:22px 24px;border-bottom:1px solid var(--navy-ln)}
.mock-score b{font:500 62px/1 var(--serif);letter-spacing:-.02em;color:#F5F1E7}
.mock-score .col{flex:1}
.mock-score .g{font:600 12px var(--sans);letter-spacing:.08em;color:#E9E4D8}
.mock-score .d{font:11px var(--mono);color:#7FA98F;margin-top:5px}
.mock-score .scale{display:flex;gap:3px;margin-top:12px}
.mock-score .scale i{flex:1;height:4px;border-radius:1px;background:rgba(255,255,255,.12)}
.mock-score .scale i.on{background:var(--ac)}
.mock-rows{padding:6px 0}
.mrow{display:flex;align-items:center;gap:14px;padding:11px 24px}
.mrow+.mrow{border-top:1px solid rgba(255,255,255,.05)}
.mrow .sev{width:52px;flex-shrink:0;font:600 8.5px var(--sans);letter-spacing:.14em;text-align:center;padding:4px 0 3px;border-radius:2px}
.mrow .sev.crit{color:#FDF6F4;background:var(--crit)}
.mrow .sev.high{color:#E8A99E;border:1px solid rgba(166,61,47,.55);background:rgba(166,61,47,.14)}
.mrow .sev.med{color:#D9A94E;border:1px solid rgba(176,123,46,.5);background:rgba(176,123,46,.13)}
.mrow .sev.ok{color:#7FA98F;border:1px solid rgba(46,125,91,.5);background:rgba(46,125,91,.13)}
.mrow .tt{font:500 12.5px var(--sans);color:#D5DCE1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .fix{margin-left:auto;flex-shrink:0;font:600 10.5px var(--sans);letter-spacing:.03em;padding:6px 13px;border-radius:2px;border:1px solid var(--navy-ln);color:#C9CFD4;background:transparent}
.mrow .fix.done{border-color:rgba(46,125,91,.5);color:#7FA98F}
.mock-ft{display:flex;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--navy-ln);font:600 9px var(--mono);letter-spacing:.14em;color:#6E7B86}
.mock-ft .ok{color:#7FA98F}

/* ── body sections ── */
.sect{padding:76px 0}
.sect.tint{background:color-mix(in oklab,var(--paper) 72%,#fff)}
.sect-hd{max-width:640px;margin:0 auto 48px;text-align:center}
.sect-hd .kick{font:600 10px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--ac);display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.sect-hd .kick::before,.sect-hd .kick::after{content:'';height:1px;width:36px;background:color-mix(in oklab,var(--ac) 40%,transparent)}
.sect-hd h2{font:500 clamp(26px,2.6vw,34px)/1.22 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.sect-hd h2 em{font-style:normal;color:var(--ac)}
.sect-hd.wide{max-width:820px}
@media (min-width:820px){.sect-hd h2.nowrap{white-space:nowrap}}
.sect-hd .sub{font:400 14.5px/1.7 var(--sans);color:var(--mut);margin-top:14px;text-wrap:pretty}
.sect-cta{display:flex;justify-content:center;margin-top:40px}

/* ledger trio panels */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.trio .col{padding:30px 30px 28px;border-right:1px solid var(--card-ln);display:flex;flex-direction:column}
.trio .col:last-child{border-right:0}
.trio .idx{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--hint);display:flex;justify-content:space-between;margin-bottom:20px}
.trio .idx .st{color:var(--pass)}
.trio h3{font:600 17px var(--serif);color:var(--ink)}
.trio p{font:400 13px/1.7 var(--sans);color:var(--mut);margin-top:9px}
.trio p b{font-weight:600;color:var(--ink)}
.trio .ill{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;justify-content:flex-end}
/* small illustrative marks */
.bars{display:flex;flex-direction:column;gap:8px}
.bars .b{display:flex;align-items:center;gap:12px;font:600 9px var(--mono);letter-spacing:.12em;color:var(--hint)}
.bars .b span{width:92px;flex-shrink:0}
.bars .b .tr{flex:1;height:5px;border-radius:3px;background:color-mix(in oklab,var(--paper) 55%,#fff);position:relative;overflow:hidden}
.bars .b .tr i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:color-mix(in oklab,var(--ac) 55%,#fff)}
.bars .b .tr i.full{background:var(--ac)}
.stamps{display:flex;flex-direction:column;gap:8px}
.stamp{display:flex;align-items:center;gap:10px;font:600 10px var(--mono);letter-spacing:.1em;padding:8px 12px;border-radius:2px}
.stamp.was{color:var(--warn);background:color-mix(in oklab,var(--warn) 9%,#fff);border:1px solid color-mix(in oklab,var(--warn) 26%,#fff)}
.stamp.now{color:var(--pass);background:color-mix(in oklab,var(--pass) 8%,#fff);border:1px solid color-mix(in oklab,var(--pass) 24%,#fff)}
.stamp .arw{margin-left:auto;letter-spacing:0}
.linkrows{display:flex;flex-direction:column;gap:7px;font:600 10px var(--mono);letter-spacing:.04em}
.linkrows .lr{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:2px;background:color-mix(in oklab,var(--paper) 55%,#fff);border:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);color:var(--mut)}
.linkrows .lr .c4{color:var(--crit)}
.linkrows .lr .c3{color:var(--pass)}

/* how it runs — clean numbered cards on a rail */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps::before{content:'';position:absolute;top:31px;left:44px;right:44px;height:1px;background:var(--card-ln);z-index:0}
.step{position:relative;z-index:1;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;
  box-shadow:var(--shadow-1);padding:24px 26px 22px;display:flex;flex-direction:column}
.step-hd{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.step-no{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:500 15px var(--serif);color:var(--ac);background:var(--card);border:1px solid color-mix(in oklab,var(--ac) 45%,#fff)}
.step-k{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--hint)}
/* real-UI mini fragment */
.ui{border:1px solid var(--card-ln);border-radius:3px;overflow:hidden;margin-bottom:18px;background:#fff;display:flex;flex-direction:column;height:156px}
.ui-review,.ui-fix{justify-content:stretch}
.ui-scanbody{flex:1}
.ui-bar{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;font:600 11px var(--serif);letter-spacing:.01em;color:#F3EFE5;
  background:linear-gradient(180deg,var(--navy2),var(--navy))}
.ui-bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ac) 80%,#fff) 30%,color-mix(in oklab,var(--ac) 80%,#fff) 70%,transparent)}
.ui-crest{width:16px;height:16px;flex-shrink:0;border:1px solid color-mix(in oklab,var(--ac) 65%,transparent);border-radius:2px;
  display:flex;align-items:center;justify-content:center;font:600 9px var(--serif);color:color-mix(in oklab,var(--ac) 85%,#fff);background:rgba(255,255,255,.03)}
.ui-tab{margin-left:auto;font:600 8px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8D97A1;
  padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.06)}
/* scan fragment */
.ui-scanbody{padding:14px 14px 15px;background:linear-gradient(180deg,var(--navy2),var(--navy))}
.ui-score{display:flex;align-items:baseline;gap:9px}
.ui-score b{font:500 30px/1 var(--serif);color:#F5F1E7}
.ui-score span{font:8.5px var(--mono);letter-spacing:.08em;color:#7FA98F}
.ui-scanbar{margin-top:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.ui-scanbar i{display:block;height:100%;width:64%;border-radius:2px;background:var(--ac)}
.ui-areas{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.ui-areas>span:first-child{font:600 10.5px var(--sans);color:#AEB7BE;padding:7px 12px;border:1px solid var(--navy-ln);border-radius:2px}
.ui-scanbtn{font:600 10.5px var(--sans);color:#14100A;padding:7px 15px;border-radius:2px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}
/* review fragment */
.ui-frow{display:flex;align-items:center;gap:10px;flex:1;padding:9px 12px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.ui-frow:last-child{border-bottom:0}
.ui-sev{width:42px;flex-shrink:0;font:600 8px var(--sans);letter-spacing:.1em;text-align:center;padding:4px 0 3px;border-radius:2px}
.ui-sev.crit{color:#FDF6F4;background:var(--crit)}
.ui-sev.high{color:var(--crit);background:color-mix(in oklab,var(--crit) 9%,#fff);border:1px solid color-mix(in oklab,var(--crit) 26%,#fff)}
.ui-sev.med{color:var(--warn);background:color-mix(in oklab,var(--warn) 10%,#fff);border:1px solid color-mix(in oklab,var(--warn) 28%,#fff)}
.ui-ft{font:500 11.5px var(--sans);color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* fix fragment */
.ui-xrow{display:flex;align-items:center;gap:10px;flex:1;padding:9px 12px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.ui-xrow:last-child{border-bottom:0}
.ui-chk{width:16px;height:16px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--pass) 10%,#fff);border:1px solid color-mix(in oklab,var(--pass) 30%,#fff);color:var(--pass);font:700 9px var(--sans)}
.ui-off{font:600 9px var(--sans);color:var(--hint);padding:5px 9px;border:1px solid var(--card-ln);border-radius:2px;flex-shrink:0}
.ui-tgl{position:relative;width:26px;height:15px;border-radius:8px;flex-shrink:0;background:var(--card-ln);transition:background .15s}
.ui-tgl::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(12,34,51,.25);transition:left .15s}
.ui-tgl.on{background:var(--pass)}
.ui-tgl.on::after{left:13px}
.step h3{font:600 18px var(--serif);color:var(--ink)}
.step p{font:400 13px/1.7 var(--sans);color:var(--mut);margin-top:9px;text-wrap:pretty;flex:1}
.step-ft{display:flex;align-items:baseline;gap:10px;margin-top:20px;padding-top:15px;border-top:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.step-ft .l{font:600 9px var(--mono);letter-spacing:.16em;color:var(--hint)}
.step-ft .v{font:600 12.5px var(--serif);color:var(--ink)}

/* feature register */
.register{background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.freg{display:grid;grid-template-columns:64px 300px 1fr 130px;align-items:center;gap:22px;padding:23px 30px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.freg:last-of-type{border-bottom:0}
.freg:hover{background:color-mix(in oklab,var(--card) 60%,#fff)}
.freg .n{font:500 22px var(--serif);color:color-mix(in oklab,var(--ac) 75%,#fff)}
.freg h3{font:600 15.5px var(--serif);color:var(--ink)}
.freg .who{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--hint);margin-top:5px}
.freg p{font:400 13px/1.65 var(--sans);color:var(--mut);text-wrap:pretty}
.freg .st{font:600 9.5px var(--sans);letter-spacing:.14em;text-align:center;padding:6px 0 5px;border-radius:2px;color:var(--pass);background:color-mix(in oklab,var(--pass) 8%,#fff);border:1px solid color-mix(in oklab,var(--pass) 24%,#fff)}
.freg .st.ai{color:var(--ac);background:color-mix(in oklab,var(--ac) 7%,#fff);border-color:color-mix(in oklab,var(--ac) 30%,#fff)}
.register-ft{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:color-mix(in oklab,var(--paper) 55%,#fff);border-top:1px solid var(--card-ln);font:12px var(--sans);color:var(--mut)}
.register-ft a{font-weight:600}

/* ── pricing ── */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:visible}
.tier-col{padding:32px 28px 28px;border-right:1px solid var(--card-ln);display:flex;flex-direction:column;position:relative}
.tier-col:last-child{border-right:0}
.tier-col.pop{background:linear-gradient(180deg,var(--navy2),var(--navy));color:#E9E4D8;margin:-14px -1px;border:1px solid var(--navy);border-radius:4px;box-shadow:var(--shadow-2);padding-top:46px;padding-bottom:42px;z-index:1}
.tier-col.pop::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 60%,transparent)}
.tier-col .plabel{font:600 9.5px var(--mono);letter-spacing:.22em;color:var(--hint)}
.tier-col.pop .plabel{color:color-mix(in oklab,var(--ac) 85%,#fff)}
.tier-col .pop-flag{position:absolute;top:18px;right:22px;font:600 8.5px var(--mono);letter-spacing:.18em;color:#14100A;padding:5px 9px 4px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}
.tier-col .pop-flag.value{background:linear-gradient(180deg,#D3DEE9,#C5D3E0);color:#2B4155}
.tier-col h3{font:600 19px var(--serif);margin-top:12px;color:var(--ink)}
.tier-col.pop h3{color:#F5F1E7}
.tier-col .price{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.tier-col .price b{font:500 44px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.tier-col.pop .price b{color:#F5F1E7}
.tier-col .price span{font:11px var(--mono);color:var(--hint);white-space:nowrap}
.tier-col .pdesc{font:400 12.5px/1.6 var(--sans);color:var(--mut);margin-top:12px;padding-bottom:18px;border-bottom:1px solid var(--card-ln)}
.tier-col.pop .pdesc{color:#9AA5AE;border-bottom-color:var(--navy-ln)}
.tier-col ul{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.tier-col li{position:relative;padding-left:18px;font:400 12.5px/1.5 var(--sans);color:var(--mut)}
.tier-col.pop li{color:#AEB7BE}
.tier-col li::before{content:'—';position:absolute;left:0;top:0;color:var(--ac);font-weight:600}
.tier-col li b{display:block;font-weight:600;color:var(--ink)}
.tier-col li .d{display:block;color:var(--mut);margin-top:2px}
.tier-col.pop li .d{color:#9AA5AE}
.tier-col.pop li b{color:#E9E4D8}
.tier-col .btn{justify-content:center}
.pricing-fine{text-align:center;margin-top:34px;font:12.5px var(--sans);color:var(--mut)}
.pricing-fine a{font-weight:600}

/* ── FAQ ── */
.faq-wrap{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:start}
.faq-lead .kick{font:600 10px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--ac);display:flex;align-items:center;gap:14px;margin-bottom:16px}
.faq-lead .kick::after{content:'';height:1px;width:36px;background:color-mix(in oklab,var(--ac) 40%,transparent)}
.faq-lead h2{font:500 30px/1.22 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.faq-lead h2 em{font-style:normal;color:var(--ac)}
.faq-lead .sub{font:400 14px/1.7 var(--sans);color:var(--mut);margin-top:14px}
.faq-lead .ask{margin-top:28px;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);padding:24px 26px}
.faq-lead .ask .tt{font:600 15px var(--serif);color:var(--ink)}
.faq-lead .ask .dd{font:12.5px/1.65 var(--sans);color:var(--mut);margin-top:7px}
.faq-lead .ask .row{display:flex;gap:12px;align-items:center;margin-top:18px}
.faq-lead .ask .row a.plain{font:600 12.5px var(--sans);color:var(--mut)}
.faq-lead .ask .row a.plain:hover{color:var(--ink)}
.faq{background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.faq details{border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:flex;align-items:baseline;gap:16px;padding:19px 26px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:color-mix(in oklab,var(--card) 60%,#fff)}
.faq .cat{font:600 9px var(--mono);letter-spacing:.18em;color:var(--hint);width:86px;flex-shrink:0}
.faq .q{font:600 14px var(--sans);color:var(--ink);flex:1}
.faq .tog{font:400 16px var(--serif);color:var(--hint);flex-shrink:0;transition:transform .15s}
.faq details[open] .tog{transform:rotate(45deg);color:var(--ac)}
.faq .a{padding:0 26px 22px 128px;font:400 13px/1.75 var(--sans);color:var(--mut);text-wrap:pretty}
.faq .a b{font-weight:600;color:var(--ink)}

/* ── closing band + footer ── */
.close-band{background:linear-gradient(180deg,var(--navy2),var(--navy));color:#E9E4D8;position:relative}
.close-band::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ac) 80%,#fff) 30%,color-mix(in oklab,var(--ac) 80%,#fff) 70%,transparent)}
.close-inner{display:flex;align-items:center;gap:40px;padding:56px 0}
.close-inner h2{font:500 28px/1.25 var(--serif);color:#F5F1E7;max-width:480px;text-wrap:balance}
.close-inner p{font:13.5px/1.7 var(--sans);color:#9AA5AE;margin-top:10px;max-width:440px}
.close-inner .act{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.close-inner .fine{font:11px var(--mono);color:#6E7B86}
.footer{background:var(--navy);color:#8D97A1;border-top:1px solid var(--navy-ln)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:52px 0 44px}
.foot-brand p{font:12.5px/1.7 var(--sans);color:#8D97A1;margin-top:14px;max-width:260px}
.foot-brand .btn{margin-top:18px}
.foot-col .l{font:600 9.5px var(--mono);letter-spacing:.2em;color:#5C6a76;margin-bottom:16px}
.foot-col a{display:block;font:500 12.5px var(--sans);color:#AEB7BE;padding:5px 0}
.foot-col a:hover{color:#F3EFE5;text-decoration:none}
.colophon{display:flex;justify-content:space-between;align-items:center;padding:18px 0 26px;border-top:1px solid var(--navy-ln);font:10px var(--mono);letter-spacing:.08em;color:#5C6a76}
.colophon .status{display:flex;align-items:center;gap:8px}
.colophon .status i{width:6px;height:6px;border-radius:50%;background:var(--pass);box-shadow:0 0 6px rgba(46,125,91,.8)}
.colophon .reqs{display:flex;gap:14px}

@media (max-width:1080px){
  .hero{flex-direction:column;align-items:flex-start}
  .mock{width:100%}
  .trio,.steps,.tiers{grid-template-columns:1fr}
  .steps::before{display:none}
  .trio .col{border-right:0;border-bottom:1px solid var(--card-ln)}
  .tier-col{border-right:0;border-bottom:1px solid var(--card-ln)}
  .tier-col.pop{margin:0}
  .freg{grid-template-columns:48px 1fr;grid-auto-rows:auto}
  .freg p{grid-column:2}
  .freg .st{grid-column:2;justify-self:start;padding:6px 14px 5px}
  .faq-wrap{grid-template-columns:1fr}
  .faq .a{padding-left:26px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .close-inner{flex-direction:column;align-items:flex-start}
  .close-inner .act{margin-left:0;align-items:flex-start}
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — everything above this line is the verbatim design port.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── mobile masthead ──────────────────────────────────────────────────────
 * The handoff's masthead has no mobile treatment: .mast-row is a nowrap flex
 * row that needs ~879px, and .mast{overflow-x:clip} silently CLIPS it rather
 * than reflowing. Measured on the prototype, the util cluster's right edge sits
 * at 923px regardless of viewport, so at ≤960px the nav, the utility links AND
 * the primary gold "Get RecapWP Pro" CTA are all invisible and unreachable —
 * the document reports no overflow only because clip hides the evidence.
 *
 * So we collapse the nav into a disclosure panel. The breakpoint is the design's
 * own primary 1080px (where the hero stacks and the grids go 1-up), which is
 * safely above the ~960px clip threshold and keeps one coherent breakpoint
 * rather than inventing a second. Above 1080px the design's masthead is
 * untouched. Built in the Ledger idiom: navy plate, gold hairline, mono
 * letterspaced labels, 2-3px radii.
 */
/* ── current-page utility link ────────────────────────────────────────────
 * The handoff: "The current page's util link is lightened (e.g. Docs on the docs
 * page)." Its prototypes hard-code style="color:#F3EFE5" on the one link; this is
 * the declarative equivalent, set from the current template in header-ledger.php.
 * #F3EFE5 is the design's own value, matching .mast-util a:hover.
 */
.mast-util a:not(.btn).on{color:#F3EFE5}
.mast-menu .util a.on{color:#F3EFE5}

.mast-burger{display:none;flex-shrink:0;width:38px;height:38px;padding:0;border:1px solid var(--navy-ln);border-radius:3px;
  background:rgba(255,255,255,.03);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mast-burger:hover{border-color:color-mix(in oklab,var(--ac) 55%,transparent);background:rgba(255,255,255,.06)}
.mast-burger span{display:block;width:15px;height:1.5px;border-radius:1px;background:#C9CFD4;transition:transform .16s,opacity .16s}
.mast-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.mast-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mast-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mast-menu{display:none}

@media (max-width:1080px){
  /* The row keeps the wordmark left, burger right; everything else moves into
     the panel so nothing is ever clipped out of reach. */
  .mast-nav,.mast-util{display:none}
  .mast-burger{display:flex}
  .mast-row{gap:12px}

  .mast-menu{display:block;overflow:hidden;max-height:0;transition:max-height .2s ease}
  .mast-menu.open{max-height:640px}
  .mast-menu-in{padding:18px 0 24px;border-top:1px solid var(--navy-ln)}
  .mast-menu a{display:block;font:500 15px var(--sans);color:#AEB7BE;padding:12px 2px;border-radius:3px}
  .mast-menu a:hover{color:#F3EFE5;text-decoration:none}
  /* Utility links read as the secondary tier, matching .mast-util on desktop. */
  .mast-menu .util{margin-top:10px;padding-top:14px;border-top:1px solid var(--navy-ln)}
  .mast-menu .util a{font-size:13px;color:#8D97A1;padding:10px 2px}
  /* The primary CTA the prototype dropped on mobile — restored, full width. */
  .mast-menu .btn{display:flex;justify-content:center;width:100%;margin-top:18px}
}

/* The version chip is the first thing to go when space runs out: it is chrome,
   not navigation, and the hero states the product anyway. */
@media (max-width:420px){
  .ver{display:none}
}

/* ── inherited overflow fixes ─────────────────────────────────────────────
 * Two horizontal-overflow bugs measured in the DESIGN PROTOTYPE itself (not
 * introduced by this port — the prototype reproduces both to the pixel). Fixed
 * here rather than carried over: a horizontal scrollbar on a marketing page is
 * a defect, and the fix is confined to the band where it actually occurs so the
 * design's layout is untouched everywhere it already fits.
 */

/* 1. The 4-up pricing grid needs ~1160px: each .tier-col's min-content is
 *    ~268px, so 4×268 + the shell's 88px of padding = 1160. But .tiers only
 *    collapses at ≤1080, and .tiers{overflow:visible} (needed for the raised
 *    .pop card) can't clip the excess — so 1081–1159px overflows the document
 *    by up to 41px. Going 2-up across that 79px band keeps all four tiers
 *    legible and comparable, and preserves the design's 4-up desktop layout at
 *    every width where it genuinely fits. Mirrors the design's own ≤1080 rules
 *    for the collapsed grid (flat .pop, row dividers).
 */
@media (min-width:1081px) and (max-width:1159px){
  .tiers{grid-template-columns:repeat(2,1fr)}
  .tier-col{border-bottom:1px solid var(--card-ln)}
  .tier-col:nth-child(2n){border-right:0}
  .tier-col:nth-last-child(-n+2){border-bottom:0}
  .tier-col.pop{margin:0}
}

/* 2. .shell keeps its 44px side padding at every width, leaving only 232px of
 *    content at 320px — narrower than the min-content of .step / .tier-col, so
 *    the document overflows by 7px. The handoff's README does specify "side
 *    padding 44px (→ 16px on mobile)"; the prototype's CSS just never
 *    implements it. Applying it only below 371px — the width at which 44px
 *    padding actually starts overflowing — so the render stays pixel-identical
 *    to the prototype across the design team's stated test range (~380px up).
 *    If they want the README's mobile padding applied more broadly, widen this.
 */
@media (max-width:370px){
  .shell{padding:0 16px}
}

/* ── WP admin bar ─────────────────────────────────────────────────────────
 * Nothing in the Ledger design's SHARED chrome is position:sticky, so no top
 * offsets are owed here — the admin bar simply pushes the static masthead down.
 *
 * Page sheets are a different story: any sticky element they add needs its own
 * admin-bar offset or it tucks under the fixed bar for logged-in users (see
 * `.sup-aside` in ledger-support.css for the worked example, and foundation.css
 * for the 32px desktop / 46px ≤782px pattern). Scope such a rule as a compound
 * selector on the single <body> — `body.admin-bar .thing` / `body.admin-bar.<page-class>`,
 * never `.admin-bar body.<page-class>` (descendant combinator, matches nothing).
 */

/* ── reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mast-menu,.mast-burger span,.ui-tgl,.ui-tgl::after,.faq .tog{transition:none}
}