/* RecapWP Free page — "Ledger" design, page sheet.
 *
 * A faithful port of the design handoff's Free-specific sheet:
 *   docs/design_handoff_free_page/site/free-ledger.css
 * Ported VERBATIM below so the design is pixel-exact; local additions live in the
 * marked "THEME ADDITIONS" block at the foot. Keep the ported rules untouched so
 * the next design drop can be diffed against this file.
 *
 * Layers ON TOP of ledger.css (the shared Ledger base), which carries the
 * masthead, hero-marks, buttons, .sect / .sect-hd / .kick, .steps / .step,
 * .tiers / .tier-col, .faq, .close-band and .footer this page reuses. Only the
 * Free-specific pieces (.free-hero, .fh-h1, the .dlcard download card + its
 * run/done states, .qs-ic step icons, .tiers.two, .plan-note) are new and live
 * here. See the enqueue map in functions.php.
 *
 * The prototype also ships .ui-dlbody / .ui-upbody / .ui-drop fragment styles
 * (its home page's step "screens"); they are ported verbatim for parity but the
 * Free page's quick-start uses the .qs-ic icon panels, so those fragments are
 * inert here. Left in place rather than pruned so this file stays a clean diff
 * against the design's free-ledger.css.
 */
/* RecapWP Free page — extends site/home-ledger.css */

/* ── hero: copy + download card ── */
.free-hero{display:flex;gap:56px;align-items:center;padding:56px 0 72px}
.fh-copy{flex:1;min-width:0}
.fh-copy .overline{color:color-mix(in oklab,var(--ac) 85%,#fff)}
.fh-h1{font:500 clamp(34px,3.6vw,50px)/1.14 var(--serif);letter-spacing:-.015em;color:#F5F1E7;max-width:560px;text-wrap:balance}
.fh-h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.fh-copy .sub{font:400 15.5px/1.7 var(--sans);color:#9AA5AE;margin-top:18px;max-width:500px}
.fh-copy .sub b{color:#D5DCE1;font-weight:600}
.fh-copy .cta-row{display:flex;gap:12px;margin-top:30px;align-items:center;flex-wrap:wrap}
.fh-copy .fine{font:11px var(--mono);color:#6E7B86}

/* download card */
.dlcard{flex:0 0 396px;background:linear-gradient(160deg,var(--navy2),var(--navy));border:1px solid var(--navy-ln);border-radius:6px;box-shadow:0 34px 78px rgba(0,0,0,.46);overflow:hidden;position:relative}
.dlcard::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:color-mix(in oklab,var(--ac) 55%,transparent);z-index:1}
.dl-hd{display:flex;align-items:center;gap:13px;padding:20px 24px;border-bottom:1px solid var(--navy-ln)}
.dl-crest{width:34px;height:34px;flex-shrink:0;border:1px solid color-mix(in oklab,var(--ac) 65%,transparent);border-radius:3px;display:flex;align-items:center;justify-content:center;font:600 16px var(--serif);color:color-mix(in oklab,var(--ac) 85%,#fff);background:rgba(255,255,255,.03)}
.dl-hd b{font:600 16px var(--serif);color:#F3EFE5}
.dl-hd .ver{display:block;font:600 9px var(--mono);letter-spacing:.12em;color:#7A848F;margin-top:2px}
.dl-hd .free{margin-left:auto;font:600 9px var(--mono);letter-spacing:.2em;padding:5px 11px 4px;border:1px solid color-mix(in oklab,var(--ac) 40%,transparent);border-radius:2px;color:color-mix(in oklab,var(--ac) 88%,#fff)}
.dl-file{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--navy-ln)}
.dl-file .fic{width:30px;height:30px;flex-shrink:0;border-radius:4px;border:1px solid var(--navy-ln);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:#8D97A1}
.dl-file .fn{font:600 12.5px var(--mono);color:#D5DCE1}
.dl-file .fs{margin-left:auto;font:11px var(--mono);letter-spacing:.06em;color:#7A848F}
.dl-btns{display:flex;flex-direction:column;gap:10px;padding:18px 24px}
.dl-btns .btn{justify-content:center;width:100%}
.dl-req{display:flex;gap:0;padding:0;border-bottom:1px solid var(--navy-ln)}
.dl-req span{flex:1;text-align:center;padding:13px 0;font:600 9.5px var(--mono);letter-spacing:.12em;color:#7A848F;border-right:1px solid var(--navy-ln)}
.dl-req span:last-child{border-right:0}
.dl-inside{padding:18px 24px 20px}
.dl-inside .l{font:600 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#6E7B86;margin-bottom:14px}
.dl-inside .li{display:flex;align-items:flex-start;gap:11px;padding:7px 0;font:500 13px var(--sans);color:#C7CDD3}
.dl-inside .li .ck{width:18px;height:18px;flex-shrink:0;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 10px var(--sans);color:var(--pass);background:color-mix(in oklab,var(--pass) 18%,var(--navy));border:1px solid color-mix(in oklab,var(--pass) 40%,var(--navy))}

/* ── plans: two-up ── */
.tiers.two{grid-template-columns:repeat(2,1fr)}
.tier-col .pop-flag.up{background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff));color:#14100A}
.plan-note{text-align:center;margin-top:28px;font:12.5px var(--sans);color:var(--mut)}
.plan-note a{font-weight:600}

/* ── download states ── */
.dl-when-run,.dl-when-done{display:none}
.dlcard[data-state="run"] .dl-when-idle{display:none}
.dlcard[data-state="run"] .dl-when-run{display:block}
.dlcard[data-state="done"] .dl-when-idle{display:none}
.dlcard[data-state="done"] .dl-when-done{display:block}
.dl-progress{padding:18px 24px 20px;border-bottom:1px solid var(--navy-ln)}
.dl-prog-file{display:flex;align-items:center;gap:12px}
.dl-prog-file .fic{width:30px;height:30px;flex-shrink:0;border-radius:4px;border:1px solid var(--navy-ln);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:#8D97A1}
.dl-prog-file .fn{font:600 12.5px var(--mono);color:#D5DCE1}
.dl-prog-file .pct{margin-left:auto;font:600 12px var(--mono);color:color-mix(in oklab,var(--ac) 88%,#fff)}
.dl-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:14px}
.dl-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--ac)}
.dl-prog-note{font:11px var(--mono);letter-spacing:.06em;color:#7A848F;margin-top:12px}
.dl-done{padding:20px 24px;border-bottom:1px solid var(--navy-ln)}
.dl-done-top{display:flex;align-items:center;gap:13px}
.dl-seal{width:40px;height:40px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font:700 18px var(--sans);color:var(--pass);background:color-mix(in oklab,var(--pass) 16%,var(--navy));border:1px solid color-mix(in oklab,var(--pass) 40%,var(--navy))}
.dl-done-top .t{font:600 15px var(--serif);color:#F3EFE5}
.dl-done-top .d{font:10.5px var(--mono);letter-spacing:.04em;color:#7A848F;margin-top:3px}
.dl-next{margin-top:16px}
.dl-next .ns{display:flex;align-items:center;gap:11px;padding:9px 0;font:500 12.5px var(--sans);color:#C7CDD3;border-top:1px solid rgba(255,255,255,.06)}
.dl-next .ns .n{width:20px;height:20px;flex-shrink:0;border-radius:5px;display:flex;align-items:center;justify-content:center;font:600 10px var(--mono);color:color-mix(in oklab,var(--ac) 85%,#fff);background:rgba(255,255,255,.05);border:1px solid var(--navy-ln)}
.dl-again{margin-top:16px;display:flex;gap:16px;align-items:center}
.dl-again a{font:600 12px var(--sans)}
.dl-again .dl-again-btn{color:color-mix(in oklab,var(--ac) 85%,#fff)}
.dl-again .plain{color:#8D97A1}

/* ── quick-start step icons ── */
.qs-ic{height:132px;margin-bottom:20px;border:1px solid var(--card-ln);border-radius:4px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 1px 1px,rgba(12,34,51,.05) 1px,transparent 0) 0 0/16px 16px,color-mix(in oklab,var(--paper) 40%,#fff)}
.qs-ic .badge{width:66px;height:66px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--ac) 9%,#fff);border:1px solid color-mix(in oklab,var(--ac) 30%,#fff);color:color-mix(in oklab,var(--ac) 78%,#000);box-shadow:var(--shadow-1)}
.qs-ic .badge svg{width:30px;height:30px}

/* ── quick-start step fragments ── */
.ui-dlbody{flex:1;padding:16px 14px;background:linear-gradient(180deg,var(--navy2),var(--navy));display:flex;flex-direction:column;justify-content:center;gap:13px}
.ui-dlfile{display:flex;align-items:center;gap:10px}
.ui-dlfile .dlic{width:24px;height:24px;flex-shrink:0;border-radius:5px;border:1px solid var(--navy-ln);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#8D97A1}
.ui-dlfile .nm{font:600 11px var(--mono);color:#D5DCE1}
.ui-dlfile .sz{margin-left:auto;font:9px var(--mono);letter-spacing:.08em;color:#7A848F}
.ui-dlbar{height:5px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.ui-dlbar i{display:block;height:100%;width:100%;border-radius:2px;background:var(--ac)}
.ui-dlbtn{align-self:flex-start;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))}
.ui-upbody{flex:1;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:10px}
.ui-crumb{font:600 8.5px var(--mono);letter-spacing:.12em;color:var(--hint)}
.ui-drop{flex:1;border:1.5px dashed color-mix(in oklab,var(--card-ln) 75%,var(--hint));border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:color-mix(in oklab,var(--paper) 40%,#fff)}
.ui-drop .dz-ic{width:28px;height:28px;border-radius:6px;background:color-mix(in oklab,var(--ac) 10%,#fff);border:1px solid color-mix(in oklab,var(--ac) 32%,#fff);display:flex;align-items:center;justify-content:center;color:color-mix(in oklab,var(--ac) 80%,#000)}
.ui-drop .dz-file{font:600 10.5px var(--mono);color:var(--mut)}
.ui-upbtn{align-self:center;font:600 10.5px var(--sans);color:#14100A;padding:7px 16px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}

@media (max-width:960px){
  .free-hero{flex-direction:column;align-items:stretch;gap:36px}
  .dlcard{flex:none;width:100%;max-width:440px}
  .tiers.two{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — not in the design's free-ledger.css. Everything above this
   line is the verbatim port; everything below is ours, and is what the next
   design drop must be diffed AROUND.
   ══════════════════════════════════════════════════════════════════════════ */

/* .btn.disabled — the "You're on this plan" current-plan button on the Free
   tier. The design's README specifies it ("`.btn.disabled` (paper, muted)") and
   its markup uses `<span class="btn disabled">`, but the prototype ships NO rule
   for it, so in the prototype that button renders as a bare .btn. This is the
   intended treatment, added here: a flat paper chip, muted text, no shadow, not
   interactive. Scoped to .btn.disabled so it can't affect the live gold/ghost
   buttons. */
.btn.disabled{background:var(--card);border:1px solid var(--card-ln);color:var(--hint);
  box-shadow:none;cursor:default;pointer-events:none}