/* RecapWP Pro page — "Ledger" design, page sheet.
 *
 * A faithful port of the design handoff's Pro sheet:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/pro-ledger.css
 * Ported VERBATIM so the design is pixel-exact. Any local change belongs 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 must load first —
 * see the enqueue map in functions.php. Everything here is Pro-only: the hero
 * audit-window mock, the tools grid, the five feature-panel mocks (.fadrawer /
 * .rplate / .blpanel / .mpanel) and the Free-vs-Pro comparison table. Shared
 * blocks (pricing, FAQ, closing band, footer) come from ledger.css.
 *
 * Note: it deliberately overrides two shared atoms — `.mast{overflow:hidden}`
 * (the hero mock bleeds) and a `.btn-ic` nudge. Those ship only on this page.
 */
/* RecapWP Pro page — extends site/home-ledger.css */

/* ── Pro hero: stacked copy + agency roster ── */
.mast{overflow:hidden}
.mast .shell{position:relative;z-index:1}
.hero-pro{padding:52px 0 0;display:flex;flex-direction:column}
.hp-copy{max-width:680px}
.hero-pro h1{font:500 clamp(34px,3.6vw,48px)/1.16 var(--serif);letter-spacing:-.01em;color:#F5F1E7;text-wrap:balance;max-width:640px}
.hero-pro h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff);display:block}
.hero-pro .sub{font:400 15px/1.7 var(--sans);color:#9AA5AE;margin-top:16px;max-width:580px}
.hero-pro .sub b{color:#D5DCE1;font-weight:600}
.hero-pro .cta-row{display:flex;gap:12px;margin-top:26px;align-items:center;flex-wrap:wrap}
.hero-pro .fine{font:11px var(--mono);color:#6E7B86;margin-left:6px}

/* copy centered */
.hp-copy{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hp-copy .overline{justify-content:center}
.hp-copy h1{max-width:none;white-space:nowrap}
.hp-copy .sub{max-width:760px}
.btn-ic{margin-left:1px;flex-shrink:0}
.hero-pro .cta-row{justify-content:center;flex-wrap:wrap}
.hp-copy .cta-row .fine{flex-basis:100%;margin-left:0;margin-top:8px;text-align:center}

/* audit window — mirrors the plugin's Audit view */
.auditwin{position:relative;margin:44px auto -1px;overflow:hidden;width:880px;max-width:100%;
  background:transparent;border:1px solid var(--navy-ln);border-top-left-radius:10px;border-top-right-radius:10px;
  box-shadow:0 40px 90px rgba(0,0,0,.42),0 12px 30px rgba(0,0,0,.22)}
.auditwin[data-w="narrow"]{max-width:640px}
.auditwin[data-w="medium"]{max-width:820px}
.auditwin[data-w="wide"]{max-width:880px}
.auditwin::after{content:'';position:absolute;left:0;right:0;bottom:0;height:54px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--card))}
.auditwin::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;z-index:2;pointer-events:none;
  background:color-mix(in oklab,var(--ac) 55%,transparent)}
/* floating variant */
.hero-pro[data-place="float"] .auditwin{margin-bottom:66px;border-radius:12px;
  box-shadow:0 50px 100px rgba(0,0,0,.46),0 14px 34px rgba(0,0,0,.24)}
.hero-pro[data-place="float"] .auditwin::after{display:none}
/* two-column layout variant */
.hero-pro[data-layout="split"]{flex-direction:row;gap:52px;align-items:stretch}
.hero-pro[data-layout="split"] .hp-copy{max-width:none;margin:0;flex:1;align-self:center;text-align:left;align-items:flex-start}
.hero-pro[data-layout="split"] .hp-copy .overline{justify-content:flex-start}
.hero-pro[data-layout="split"] .hp-copy h1{white-space:normal;max-width:460px}
.hero-pro[data-layout="split"] .hp-copy .sub{max-width:480px}
.hero-pro[data-layout="split"] .cta-row{justify-content:flex-start}
.hero-pro[data-layout="split"] .hp-copy .cta-row .fine{text-align:left;margin-left:0}
.hero-pro[data-layout="split"] .auditwin{margin:0;width:auto;max-width:none;flex:0 0 53%;align-self:flex-end}
@media (max-width:900px){
  .hero-pro[data-layout="split"]{flex-direction:column;gap:0}
  .hero-pro[data-layout="split"] .hp-copy{align-self:auto;margin:0 auto;text-align:center;align-items:center}
  .hero-pro[data-layout="split"] .hp-copy .overline{justify-content:center}
  .hero-pro[data-layout="split"] .hp-copy h1{max-width:none}
  .hero-pro[data-layout="split"] .cta-row{justify-content:center}
  .hero-pro[data-layout="split"] .hp-copy .cta-row .fine{text-align:center}
  .hero-pro[data-layout="split"] .auditwin{flex:none;width:880px;max-width:100%;margin:44px auto -1px}
}
.aw-band{position:relative;background:linear-gradient(168deg,var(--navy2),var(--navy))}
.aw-top{display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--navy-ln)}
.aw-crest{width:19px;height:19px;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 10px var(--serif);color:color-mix(in oklab,var(--ac) 85%,#fff);background:rgba(255,255,255,.03)}
.aw-top b{font:600 13px var(--serif);color:#F3EFE5}
.aw-pro{font:600 8px var(--mono);letter-spacing:.16em;color:var(--ac);padding:3px 7px 2px;border:1px solid color-mix(in oklab,var(--ac) 34%,transparent);border-radius:2px}
.aw-nav{display:flex;gap:16px;margin-left:14px}
.aw-nav span{font:500 11px var(--sans);color:#8D97A1}
.aw-nav .on{color:#F3EFE5}
.aw-sp{flex:1}
.aw-site{font:9px var(--mono);letter-spacing:.1em;color:#7FA98F}
.aw-hero{display:grid;grid-template-columns:1fr 150px}
.aw-lead{padding:19px 24px 21px}
.aw-over{font:600 8px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.aw-h{font:500 23px/1.24 var(--serif);color:#F5F1E7;margin-top:9px;max-width:none}
.aw-h em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.tier-col .pop-flag.value{background:linear-gradient(180deg,#D3DEE9,#C5D3E0);color:#2B4155}
.aw-sevbar{display:flex;gap:2px;height:6px;margin-top:15px;max-width:410px}
.aw-sevbar i{height:100%;border-radius:1px}
.aw-sevbar .c{background:var(--crit)}
.aw-sevbar .h{background:#C2694C}
.aw-sevbar .m{background:var(--warn)}
.aw-sevbar .l{background:#5F7E96}
.aw-sevleg{display:flex;gap:18px;margin-top:10px;font:500 10px var(--sans);color:#9AA5AE}
.aw-sevleg b{color:#E9E4D8;font-weight:600}
.aw-btns{display:flex;gap:10px;margin-top:16px}
.aw-scan{font:600 10px var(--sans);color:#14100A;padding:9px 16px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}
.aw-collapse{font:600 10px var(--sans);color:#C9CFD4;padding:9px 16px;border-radius:2px;border:1px solid var(--navy-ln);background:transparent}
.aw-score{border-left:1px solid var(--navy-ln);padding:20px 22px;display:flex;flex-direction:column;justify-content:center}
.aw-score .l{font:600 9px var(--mono);letter-spacing:.16em;color:#7A848F}
.aw-score .n{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.aw-score .n b{font:500 50px/1 var(--serif);color:#F5F1E7;letter-spacing:-.02em}
.aw-score .n span{font:10px var(--mono);color:#7A848F}
.aw-score .g{font:600 10px var(--sans);letter-spacing:.07em;color:#7FA98F;margin-top:13px}
.aw-score .scale{display:flex;gap:3px;margin-top:10px}
.aw-score .scale i{flex:1;height:4px;border-radius:1px;background:rgba(255,255,255,.12)}
.aw-score .scale i.on{background:var(--ac)}
.aw-sec-hd{display:flex;align-items:center;gap:10px;padding:15px 24px 13px;background:var(--card)}
.aw-sec-hd b{font:600 12.5px var(--serif);color:var(--ink)}
.aw-sec-hd>span{font:11px var(--sans);color:var(--mut)}
.aw-badges{margin-left:auto;display:flex;gap:8px}
.aw-badges em{font-style:normal;font:600 8.5px var(--mono);letter-spacing:.1em;padding:4px 8px 3px;border-radius:2px}
.aw-badges .rev{color:var(--crit);border:1px solid color-mix(in oklab,var(--crit) 30%,#fff);background:color-mix(in oklab,var(--crit) 7%,#fff)}
.aw-badges .not{color:var(--hint);border:1px solid var(--card-ln)}
.aw-frow{display:flex;align-items:center;gap:16px;padding:13px 24px;background:var(--card);border-top:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.aw-frow .sv{width:52px;flex-shrink:0;font:600 8.5px var(--sans);letter-spacing:.12em;text-align:center;padding:5px 0 4px;border-radius:2px}
.aw-frow .sv.crit{color:#FDF6F4;background:var(--crit)}
.aw-frow .sv.low{color:var(--mut);border:1px solid var(--card-ln);background:#fff}
.aw-frow .ff{flex:1;min-width:0}
.aw-frow .ff b{display:block;font:600 12.5px var(--sans);color:var(--ink)}
.aw-frow .ff span{display:block;font:11px var(--sans);color:var(--mut);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-frow .act{flex-shrink:0;font:600 10.5px var(--sans);color:var(--ac);padding:8px 14px;border:1px solid var(--card-ln);border-radius:3px;background:#fff}
@media (max-width:860px){
  .aw-hero{grid-template-columns:1fr}
  .aw-score{border-left:0;border-top:1px solid var(--navy-ln)}
  .aw-frow .ff span{white-space:normal}
}


/* ── centered hero ── */
.phero{position:relative;background:var(--paper);overflow:hidden;padding:66px 0 0}
.phero-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.overline.centered{justify-content:center}
.overline.centered::after{display:none}
.phero .overline{color:color-mix(in oklab,var(--ac) 78%,#000);margin-bottom:20px}
.phero-h1{font:500 clamp(38px,5vw,62px)/1.08 var(--serif);letter-spacing:-.015em;color:var(--ink);text-wrap:balance;max-width:14ch}
.phero-h1 em{font-style:normal;color:var(--ac)}
.phero-sub{font:400 15.5px/1.7 var(--sans);color:var(--mut);margin-top:20px;max-width:520px;text-wrap:pretty}
.capture{display:flex;align-items:center;gap:6px;margin-top:30px;background:#fff;border:1px solid var(--card-ln);border-radius:999px;padding:6px 6px 6px 8px;box-shadow:var(--shadow-1)}
.capture input{border:0;outline:0;background:transparent;font:500 14px var(--sans);color:var(--ink);padding:11px 16px;width:230px}
.capture input::placeholder{color:var(--hint)}
.capture .btn.navy{border-radius:999px;padding:12px 22px;white-space:nowrap}
.capture-fine{font:11px var(--mono);color:var(--hint);margin-top:14px;letter-spacing:.04em}

/* big product screenshot */
.shot{position:relative;z-index:2;width:100%;max-width:1000px;margin:52px auto 0;height:430px;overflow:hidden;text-align:left;
  background:var(--card);border:1px solid var(--card-ln);border-top-left-radius:10px;border-top-right-radius:10px;
  box-shadow:0 -1px 0 rgba(255,255,255,.6) inset,0 40px 90px rgba(12,34,51,.22),0 12px 30px rgba(12,34,51,.10)}
.shot-bar{display:flex;align-items:center;gap:10px;padding:13px 22px;border-bottom:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 45%,#fff)}
.shot-crest{width:20px;height:20px;flex-shrink:0;border:1px solid color-mix(in oklab,var(--ac) 60%,#fff);border-radius:3px;display:flex;align-items:center;justify-content:center;font:600 11px var(--serif);color:color-mix(in oklab,var(--ac) 80%,#000);background:color-mix(in oklab,var(--ac) 8%,#fff)}
.shot-wm{font:600 14px var(--serif);color:var(--ink)}
.shot-ver{font:600 8px var(--mono);letter-spacing:.16em;color:var(--ac);padding:3px 7px 2px;border:1px solid color-mix(in oklab,var(--ac) 34%,#fff);border-radius:2px}
.shot-sp{flex:1}
.shot-bell{width:16px;height:16px;border:1.5px solid var(--hint);border-radius:50% 50% 40% 40%;opacity:.7}
.shot-ai{font:600 10px var(--sans);letter-spacing:.02em;color:var(--ac);padding:5px 11px;border:1px solid color-mix(in oklab,var(--ac) 34%,#fff);background:color-mix(in oklab,var(--ac) 7%,#fff);border-radius:999px}
.shot-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,var(--navy2),var(--navy));border:1px solid var(--navy-ln)}
.shot-body{display:grid;grid-template-columns:190px 1fr}
.shot-side{padding:22px 20px;border-right:1px solid var(--card-ln);display:flex;flex-direction:column;gap:14px;background:color-mix(in oklab,var(--paper) 30%,#fff)}
.shot-side .sn{height:9px;border-radius:3px;background:color-mix(in oklab,var(--ink) 10%,#fff);width:100%}
.shot-side .sn.on{background:color-mix(in oklab,var(--ac) 45%,#fff);width:72%}
.shot-side .sn.sh{width:52%;margin-top:6px;background:color-mix(in oklab,var(--ink) 7%,#fff)}
.shot-main{padding:24px 26px}
.shot-h{font:600 15px var(--serif);color:var(--ink);margin-bottom:14px}
.shot-h.mt{margin-top:22px}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.area-card{background:#fff;border:1px solid var(--card-ln);border-radius:6px;padding:14px 15px 15px}
.ac-t{font:600 12.5px var(--sans);color:var(--ink)}
.ac-d{font:400 11px/1.45 var(--sans);color:var(--mut);margin-top:5px;min-height:32px}
.ac-p{font:600 12px var(--mono);color:var(--ink);margin-top:8px}
.ac-tr{height:5px;border-radius:3px;background:color-mix(in oklab,var(--paper) 55%,#fff);margin-top:6px;overflow:hidden}
.ac-tr i{display:block;height:100%;border-radius:3px;background:var(--pass)}

/* decorative shapes — theme palette */
.phero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.phero-shapes .shp{position:absolute}
.phero-shapes .l1{left:-40px;bottom:60px;width:150px;height:230px;border-radius:80px;background:var(--ac);opacity:.9}
.phero-shapes .l2{left:96px;bottom:120px;width:130px;height:130px;border-radius:50%;background:var(--pass);opacity:.85}
.phero-shapes .l3{left:8px;bottom:0;width:190px;height:150px;border-radius:90px 90px 0 0;background:var(--navy)}
.phero-shapes .r1{right:-30px;bottom:70px;width:160px;height:250px;border-radius:80px;background:var(--navy)}
.phero-shapes .r2{right:110px;bottom:150px;width:120px;height:120px;border-radius:50%;background:var(--ac);opacity:.9}
.phero-shapes .r3{right:20px;bottom:0;width:150px;height:120px;border-radius:0 90px 0 0;background:var(--crit);opacity:.85}

@media (max-width:1080px){
  .phero-shapes .l2,.phero-shapes .r2{display:none}
}
@media (max-width:640px){
  .capture{flex-direction:column;border-radius:14px;width:100%;max-width:320px}
  .capture input{width:100%;text-align:center}
  .capture .btn.navy{width:100%;justify-content:center}
  .shot-body{grid-template-columns:1fr}
  .shot-side{display:none}
  .area-grid{grid-template-columns:1fr 1fr}
}

/* ── hero: layered collage ── */
.collage{flex-shrink:0;width:566px;height:512px;position:relative}
.collage .cg-crest{width:16px;height:16px;flex-shrink:0;border:1px solid color-mix(in oklab,var(--ac) 65%,#fff);border-radius:2px;display:flex;align-items:center;justify-content:center;font:600 9px var(--serif);color:color-mix(in oklab,var(--ac) 88%,#fff);background:color-mix(in oklab,var(--navy) 60%,#000)}

/* main window — dark audit dashboard */
.cg-main{position:absolute;top:0;bottom:0;right:0;width:480px;background:linear-gradient(168deg,var(--navy2),var(--navy));border:1px solid var(--navy-ln);border-radius:6px;box-shadow:0 34px 74px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column}
.cg-main::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 55%,transparent);z-index:1}
.cg-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--navy-ln);font:600 11px var(--serif);color:#F3EFE5}
.cg-tab{margin-left:auto;font:600 8px var(--mono);letter-spacing:.16em;color:#8D97A1;padding:3px 9px;border-radius:2px;background:rgba(255,255,255,.06)}
.cg-main-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 18px 15px;border-bottom:1px solid var(--navy-ln)}
.cg-ey{font:600 8.5px var(--mono);letter-spacing:.14em;color:#6E7B86}
.cg-h{font:500 17px var(--serif);color:#F5F1E7;margin-top:6px}
.cg-scan{flex-shrink:0;font:600 10px var(--sans);color:#14100A;padding:7px 13px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}
.cg-areas{padding:15px 16px;border-bottom:1px solid var(--navy-ln);display:flex;flex-direction:column;gap:9px}
.cg-a{display:flex;align-items:center;gap:12px;font:600 8px var(--mono);letter-spacing:.12em;color:#7A848F}
.cg-a span{width:96px;flex-shrink:0}
.cg-a .tr{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.cg-a .tr i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:color-mix(in oklab,var(--ac) 60%,#fff)}
.cg-a .tr i.full{background:var(--ac)}
.cg-list{padding:6px 0 8px;flex:1;display:flex;flex-direction:column;justify-content:center}
.cg-row{display:flex;align-items:center;gap:11px;padding:11px 18px}
.cg-main-ft{display:flex;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--navy-ln);background:rgba(0,0,0,.14);font:600 9px var(--mono);letter-spacing:.14em;color:#6E7B86}
.cg-main-ft .ok{color:#7FA98F}
.cg-sev{width:44px;flex-shrink:0;font:600 8px var(--sans);letter-spacing:.1em;text-align:center;padding:4px 0 3px;border-radius:2px}
.cg-sev.crit{color:#FDF6F4;background:var(--crit)}
.cg-sev.high{color:#E8A99E;border:1px solid rgba(166,61,47,.55);background:rgba(166,61,47,.14)}
.cg-sev.ok{color:#7FA98F;border:1px solid rgba(46,125,91,.5);background:rgba(46,125,91,.13)}
.cg-row .cg-t{font:500 11.5px var(--sans);color:#D5DCE1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* floating: fix callout (top-left) */
.cg-task{position:absolute;top:120px;left:0;width:216px;z-index:3;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:0 20px 44px rgba(0,0,0,.4);padding:14px 15px 13px}
.cg-task-k{font:600 8px var(--mono);letter-spacing:.16em;color:var(--crit)}
.cg-task-t{font:600 13px/1.4 var(--serif);color:var(--ink);margin-top:8px}
.cg-task-btn{display:inline-flex;margin-top:12px;font:600 10px var(--sans);color:#14100A;padding:7px 12px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}

/* floating: site health card (right) */
.cg-site{position:absolute;top:182px;right:-8px;width:226px;z-index:4;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:0 22px 50px rgba(0,0,0,.42);overflow:hidden}
.cg-site-hd{display:flex;align-items:center;gap:9px;padding:12px 14px 10px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.cg-site-hd b{font:600 12.5px var(--serif);color:var(--ink)}
.cg-crest.sm{border-color:color-mix(in oklab,var(--ac) 55%,#fff);color:color-mix(in oklab,var(--ac) 78%,#000);background:color-mix(in oklab,var(--ac) 8%,#fff)}
.cg-site-tabs{display:flex;gap:14px;padding:9px 14px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);font:600 8px var(--mono);letter-spacing:.1em;color:var(--hint)}
.cg-site-tabs .on{color:var(--ac)}
.cg-site-body{display:flex;align-items:center;gap:14px;padding:15px 14px}
.cg-badge{width:52px;height:52px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 22px var(--serif);color:var(--pass);border:2px solid color-mix(in oklab,var(--pass) 45%,#fff);background:color-mix(in oklab,var(--pass) 7%,#fff)}
.cg-metrics{display:flex;flex-direction:column;gap:6px}
.cg-m{display:flex;align-items:center;gap:8px;font:500 10.5px var(--sans);color:var(--mut)}
.cg-m i{width:5px;height:5px;border-radius:50%;background:var(--hint);flex-shrink:0}
.cg-m i.up{background:var(--pass)}
.cg-site-ft{padding:9px 14px;border-top:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);background:color-mix(in oklab,var(--paper) 55%,#fff);font:600 9px var(--mono);letter-spacing:.12em;color:var(--hint)}

/* floating: donut analytics (bottom) */
.cg-donut{position:absolute;bottom:14px;left:10px;width:262px;z-index:3;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:0 24px 52px rgba(0,0,0,.44);padding:15px 16px}
.cg-donut-k{font:600 8px var(--mono);letter-spacing:.14em;color:var(--hint)}
.cg-donut-row{display:flex;align-items:center;gap:18px;margin-top:12px}
.cg-ring{width:70px;height:70px;flex-shrink:0;border-radius:50%;position:relative;background:conic-gradient(var(--crit) 0 51deg,var(--warn) 51deg 154deg,color-mix(in oklab,var(--ac) 60%,#fff) 154deg 360deg)}
.cg-ring::after{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.cg-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 20px var(--serif);color:var(--ink);z-index:1}
.cg-leg{display:flex;flex-direction:column;gap:7px}
.cg-leg .lg{display:flex;align-items:center;gap:9px;font:500 11px var(--sans);color:var(--mut)}
.cg-leg .lg i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.cg-leg .lg i.c{background:var(--crit)}
.cg-leg .lg i.h{background:var(--warn)}
.cg-leg .lg i.m{background:color-mix(in oklab,var(--ac) 60%,#fff)}

/* ── hero mock: background crawl plate ── */
.mock .mock-crawl{padding:18px 24px;border-bottom:1px solid var(--navy-ln)}
.mock-crawl .site{display:flex;align-items:baseline;justify-content:space-between}
.mock-crawl .site b{font:500 17px var(--serif);color:#F5F1E7}
.mock-crawl .site span{font:9.5px var(--mono);letter-spacing:.1em;color:#7FA98F}
.mock-crawl .meter{margin-top:14px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.mock-crawl .meter i{position:absolute;inset:0 auto 0 0;width:72%;border-radius:3px;background:var(--ac)}
.mock-crawl .meta{display:flex;justify-content:space-between;margin-top:9px;font:9.5px var(--mono);letter-spacing:.08em;color:#6E7B86}
.mock-stats{display:flex;border-bottom:1px solid var(--navy-ln)}
.mock-stats .st{flex:1;padding:14px 0 13px 24px}
.mock-stats .st+.st{border-left:1px solid var(--navy-ln)}
.mock-stats .l{font:600 8.5px var(--mono);letter-spacing:.16em;color:#6E7B86}
.mock-stats .v{font:500 24px/1 var(--serif);color:#F5F1E7;margin-top:7px}
.mock-stats .v.bad{color:#E8A99E}
.mock-stats .v.ok{color:#7FA98F}

/* ── split feature sections ── */
.psplit{display:flex;align-items:center;gap:60px}
.psplit.rev{flex-direction:row-reverse}
.psplit.fa-center{justify-content:center;gap:72px}
.psplit.fa-center .lead{flex:0 1 440px}
.psplit.fa-center .fadrawer{position:relative;left:-32px}
@media (max-width:1080px){.psplit.fa-center{gap:0}.psplit.fa-center .lead{flex:1}.psplit.fa-center .fadrawer{left:0}}
.psplit .lead{flex:1;min-width:0}
.psplit .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}
.psplit .kick::after{content:'';height:1px;width:36px;background:color-mix(in oklab,var(--ac) 40%,transparent)}
.psplit h2{font:500 clamp(24px,2.4vw,31px)/1.22 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;max-width:420px}
.psplit h2 em{font-style:normal;color:var(--ac)}
.psplit .sub{font:400 14px/1.75 var(--sans);color:var(--mut);margin-top:16px;max-width:440px;text-wrap:pretty}
.psplit .sub b{font-weight:600;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:440px}
.chips .ch{font:600 10px var(--mono);letter-spacing:.08em;color:var(--mut);padding:7px 12px 6px;border:1px solid var(--card-ln);border-radius:2px;background:var(--card)}
.chips-l{font:600 9px var(--mono);letter-spacing:.18em;color:var(--hint);margin-top:26px}

/* frontend auditor plate */
.plate{flex-shrink:0;width:470px;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:var(--shadow-2);overflow:hidden;position:relative}
.plate::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 55%,transparent);z-index:1}
.plate-hd{display:flex;align-items:center;justify-content:space-between;padding:15px 22px 13px;border-bottom:1px solid var(--card-ln);background:linear-gradient(180deg,var(--navy2),var(--navy))}
.plate-hd .t{font:600 10px var(--mono);letter-spacing:.2em;color:#8D97A1}
.plate-hd .d{font:600 12px var(--serif);color:#F3EFE5}
.fa-sum{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.fa-sum .ring{width:46px;height:46px;flex-shrink:0;border-radius:50%;border:2px solid var(--crit);display:flex;align-items:center;justify-content:center;font:500 17px var(--serif);color:var(--crit)}
.fa-sum .tt{font:600 14.5px var(--serif);color:var(--ink)}
.fa-sum .dd{font:11.5px var(--sans);color:var(--mut);margin-top:3px}
.fa-find{padding:14px 22px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.fa-find:last-child{border-bottom:0}
.fa-find .row{display:flex;align-items:center;gap:10px}
.fa-find .sev{width:44px;flex-shrink:0;font:600 8px var(--sans);letter-spacing:.12em;text-align:center;padding:4px 0 3px;border-radius:2px}
.fa-find .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)}
.fa-find .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)}
.fa-find .tt{font:600 12.5px var(--sans);color:var(--ink);flex:1}
.fa-find .where{font:9.5px var(--mono);color:var(--hint);flex-shrink:0}
.fa-find .dd{font:12px/1.65 var(--sans);color:var(--mut);margin:8px 0 0 54px;text-wrap:pretty}
.fa-find .act{margin:10px 0 0 54px}
.fa-act{display:inline-flex;font:600 10.5px var(--sans);letter-spacing:.03em;color:#14100A;padding:7px 14px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}
.plate-ft{display:flex;justify-content:space-between;padding:11px 22px;border-top:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff);font:600 9px var(--mono);letter-spacing:.12em;color:var(--hint)}

/* redirect plate (navy header, white body) */
.rplate{flex-shrink:0;width:470px;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:var(--shadow-2);overflow:hidden;position:relative}
.rplate::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 60%,transparent);z-index:1}
.rplate-hd{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid var(--navy-ln);background:linear-gradient(168deg,var(--navy2),var(--navy))}
.rplate-hd b{font:600 12px var(--serif);color:#F3EFE5}
.rplate-hd .t{font:600 12px var(--serif);color:#F3EFE5}
.rplate-hd .d{font:600 9px var(--mono);letter-spacing:.16em;color:#7FA98F}
.rplate-hits{display:flex;align-items:baseline;gap:12px;padding:20px 22px 18px;border-bottom:1px solid var(--navy-ln);background:linear-gradient(168deg,var(--navy2),var(--navy))}
.rplate-hits b{font:500 52px/1 var(--serif);letter-spacing:-.02em;color:#F5F1E7}
.rplate-hits .u{font:600 10px var(--mono);letter-spacing:.16em;color:#8D97A1}
.rrow{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);font:600 11px var(--mono)}
.rrow .from{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .arr{color:var(--hint);flex-shrink:0}
.rrow .to{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .ty{margin-left:auto;flex-shrink:0;font:600 8.5px var(--mono);letter-spacing:.1em;padding:4px 8px 3px;border-radius:2px}
.rrow .ty.t301{color:var(--pass);border:1px solid color-mix(in oklab,var(--pass) 30%,#fff);background:color-mix(in oklab,var(--pass) 9%,#fff)}
.rrow .ty.t302{color:var(--warn);border:1px solid color-mix(in oklab,var(--warn) 30%,#fff);background:color-mix(in oklab,var(--warn) 10%,#fff)}
.rrow .ty.t410{color:var(--hint);border:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff)}
.rplate-ft{display:flex;justify-content:space-between;padding:12px 22px;font:600 9px var(--mono);letter-spacing:.14em;color:var(--hint);border-top:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff)}
.rplate-ft .ok{color:var(--pass)}

/* ask plate */
.askplate{flex-shrink:0;width:470px;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:var(--shadow-2);overflow:hidden;position:relative}
.askplate::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 55%,transparent);z-index:1}
.ask-q{padding:18px 22px 16px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.ask-q .who{font:600 9px var(--mono);letter-spacing:.18em;color:var(--hint);margin-bottom:8px}
.ask-q .msg{font:500 13.5px var(--serif);color:var(--ink)}
.ask-a{padding:16px 22px 18px}
.ask-a .who{font:600 9px var(--mono);letter-spacing:.18em;color:var(--ac);margin-bottom:8px}
.ask-a .msg{font:400 13px/1.75 var(--sans);color:var(--mut);text-wrap:pretty}
.ask-a .msg b{font-weight:600;color:var(--ink)}
.ask-ord{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.ask-ord .o{display:flex;align-items:center;gap:10px;font:600 10.5px var(--mono);color:var(--mut);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)}
.ask-ord .o i{font-style:normal;color:var(--ac)}

/* ── pro tool register (5 cards) ── */
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.tool{padding:26px 24px 22px;border-right:1px solid var(--card-ln);display:flex;flex-direction:column}
.tool:last-child{border-right:0}
.tool:hover{background:color-mix(in oklab,var(--card) 60%,#fff)}
.tool .n{font:500 20px var(--serif);color:color-mix(in oklab,var(--ac) 75%,#fff)}
.tool h3{font:600 15px var(--serif);color:var(--ink);margin-top:14px}
.tool p{font:400 12.5px/1.65 var(--sans);color:var(--mut);margin-top:8px;flex:1;text-wrap:pretty}
.tool .ft{font:600 8.5px var(--mono);letter-spacing:.14em;color:var(--hint);margin-top:18px;padding-top:13px;border-top:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}

/* ── free vs pro ledger ── */
.cmp{background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.cmp-hd,.cmp-row{display:grid;grid-template-columns:1fr 130px 130px;align-items:center}
.cmp-hd{padding:14px 30px;background:color-mix(in oklab,var(--paper) 55%,#fff);border-bottom:1px solid var(--card-ln);font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--hint)}
.cmp-hd .c{text-align:center}
.cmp-hd .c.pro{color:var(--ac)}
.cmp-row{padding:15px 30px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.cmp-row:last-child{border-bottom:0}
.cmp-row:hover{background:color-mix(in oklab,var(--card) 60%,#fff)}
.cmp-row .tt{font:600 13.5px var(--sans);color:var(--ink)}
.cmp-row .dd{font:12px/1.55 var(--sans);color:var(--mut);margin-top:3px;text-wrap:pretty}
.cmp-row .c{text-align:center;font:600 10px var(--mono);letter-spacing:.1em}
.cmp-row .c .yes{color:var(--pass)}
.cmp-row .c .lim{color:var(--warn)}
.cmp-row .c .no{color:var(--hint)}
.cmp-row .c .pro-yes{display:inline-block;color:var(--pass);padding:5px 10px 4px;border:1px solid color-mix(in oklab,var(--pass) 32%,#fff);background:color-mix(in oklab,var(--pass) 8%,#fff);border-radius:2px}

/* ── frontend auditor: montage ── */
.fa-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:44px}
.fa-title .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}
.fa-title .kick::after{content:'';height:1px;width:36px;background:color-mix(in oklab,var(--ac) 40%,transparent)}
.fa-title h2{font:500 clamp(26px,2.6vw,34px)/1.18 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;max-width:400px}
.fa-title h2 em{font-style:normal;color:var(--ac)}
.fa-intro{font:400 14.5px/1.75 var(--sans);color:var(--mut);text-wrap:pretty;padding-bottom:4px}
.fa-intro b{font-weight:600;color:var(--ink)}

.fa-montage{position:relative;height:712px;border:1px solid color-mix(in oklab,var(--card-ln) 60%,#fff);border-radius:6px;
  background:
    linear-gradient(color-mix(in oklab,var(--ink) 5%,transparent) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,color-mix(in oklab,var(--ink) 5%,transparent) 1px,transparent 1px) 0 0/40px 40px,
    color-mix(in oklab,var(--paper) 40%,#fff)}
.fa-montage::before{content:'';position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 60px color-mix(in oklab,var(--paper) 60%,#fff);pointer-events:none}

/* desktop browser surface */
.fam-browser{position:absolute;left:118px;top:26px;width:500px;z-index:2;background:#fff;border:1px solid var(--card-ln);border-radius:6px;box-shadow:var(--shadow-2);overflow:hidden}
.fam-bar{display:flex;align-items:center;gap:7px;padding:0 14px;height:36px;background:color-mix(in oklab,var(--paper) 60%,#fff);border-bottom:1px solid var(--card-ln)}
.fam-bar .d{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fam-bar .d.r{background:#E0665A}.fam-bar .d.y{background:#E4B24C}.fam-bar .d.g{background:#5FA97F}
.fam-bar .url{margin-left:8px;flex:1;font:500 10.5px var(--mono);color:var(--mut);background:#fff;border:1px solid var(--card-ln);border-radius:12px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-bar .scan{flex-shrink:0;font:600 8px var(--mono);letter-spacing:.14em;color:var(--ac);padding:4px 9px;border:1px solid color-mix(in oklab,var(--ac) 32%,#fff);background:color-mix(in oklab,var(--ac) 7%,#fff);border-radius:2px}
.fam-page{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px}
.pg-h{height:16px;width:56%;border-radius:3px;background:color-mix(in oklab,var(--ink) 78%,#fff)}
.pg-line{height:8px;border-radius:3px;background:color-mix(in oklab,var(--ink) 12%,#fff)}
.pg-line.w1{width:100%}.pg-line.w2{width:82%}.pg-line.w3{width:68%}
.pg-img{position:relative;height:118px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:600 9px var(--mono);letter-spacing:.14em;color:var(--hint);
  background:repeating-linear-gradient(45deg,color-mix(in oklab,var(--paper) 70%,#fff),color-mix(in oklab,var(--paper) 70%,#fff) 7px,#fff 7px,#fff 14px);border:1px solid var(--card-ln)}
.pg-flag{position:absolute;font:600 8px var(--mono);letter-spacing:.1em;padding:4px 8px 3px;border-radius:2px}
.pg-flag.alt{top:10px;right:10px;color:var(--warn);background:color-mix(in oklab,var(--warn) 12%,#fff);border:1px solid color-mix(in oklab,var(--warn) 34%,#fff)}
.pg-linkline{font:400 12px/1.7 var(--sans);color:var(--mut)}
.pg-broken{position:relative;color:var(--crit);font-weight:600;border-bottom:2px dashed color-mix(in oklab,var(--crit) 55%,#fff);padding-bottom:1px}
.pg-tag{position:absolute;left:0;top:calc(100% + 7px);white-space:nowrap;font:600 8px var(--mono);letter-spacing:.12em;color:#fff;background:var(--crit);padding:4px 8px 3px;border-radius:2px;box-shadow:0 4px 10px rgba(166,61,47,.3)}
.pg-tag::before{content:'';position:absolute;left:12px;top:-4px;width:8px;height:8px;background:var(--crit);transform:rotate(45deg)}
.pg-btn{position:relative;align-self:flex-start;margin-top:8px;font:600 12px var(--sans);color:#C9C4BA;background:#F1EFE9;border:1px solid #E5E1D8;padding:10px 20px;border-radius:3px}
.pg-btn .pg-flag.con{top:-11px;right:-14px;color:var(--crit);background:#fff;border:1px solid color-mix(in oklab,var(--crit) 34%,#fff)}

/* mobile phone surface */
.fam-phone{position:absolute;right:70px;top:22px;width:236px;z-index:3;background:linear-gradient(160deg,var(--navy2),var(--navy));border-radius:30px;padding:10px;box-shadow:0 30px 66px rgba(0,0,0,.4);border:1px solid var(--navy-ln)}
.fam-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:78px;height:20px;background:var(--navy);border-radius:11px;z-index:2}
.fam-status{display:flex;align-items:center;justify-content:space-between;padding:11px 16px 9px;font:600 10px var(--mono);color:#AEB7BE}
.fam-status .rt{font-size:8px;letter-spacing:.16em;color:#7FA98F}
.fam-mpage{background:#fff;border-radius:4px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:9px}
.mp-h{height:12px;width:64%;border-radius:2px;background:color-mix(in oklab,var(--ink) 78%,#fff)}
.mp-line{height:7px;border-radius:2px;background:color-mix(in oklab,var(--ink) 12%,#fff)}
.mp-line.s{width:74%}
.mp-img{height:100px;border-radius:3px;display:flex;align-items:center;justify-content:center;font:600 8px var(--mono);letter-spacing:.16em;color:var(--hint);margin:2px 0;
  background:repeating-linear-gradient(45deg,color-mix(in oklab,var(--paper) 70%,#fff),color-mix(in oklab,var(--paper) 70%,#fff) 6px,#fff 6px,#fff 12px);border:1px solid var(--card-ln)}
.mp-heads{display:flex}
.mp-tag{font:600 8px var(--mono);letter-spacing:.1em;color:var(--warn);background:color-mix(in oklab,var(--warn) 12%,#fff);border:1px solid color-mix(in oklab,var(--warn) 34%,#fff);padding:4px 8px 3px;border-radius:2px}
.fam-mbar{display:flex;align-items:center;gap:8px;padding:11px 4px 6px;font:600 8.5px var(--mono);letter-spacing:.12em;color:#8D97A1}
.fam-mbar .mb-dot{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 6px color-mix(in oklab,var(--ac) 70%,transparent)}

/* findings card — mirrors Frontend Auditor UI */
.fam-card{position:absolute;left:30px;bottom:30px;width:352px;z-index:3;background:var(--card);border:1px solid var(--card-ln);border-radius:6px;box-shadow:var(--shadow-2);overflow:hidden}
.famc-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;font:600 11px var(--serif);color:#F3EFE5;background:linear-gradient(180deg,var(--navy2),var(--navy));border-bottom:1px solid var(--navy-ln)}
.famc-crest{width:15px;height:15px;flex-shrink:0;border:1px solid color-mix(in oklab,var(--ac) 65%,#fff);border-radius:2px;display:flex;align-items:center;justify-content:center;font:600 8px var(--serif);color:color-mix(in oklab,var(--ac) 88%,#fff);background:color-mix(in oklab,var(--navy) 60%,#000)}
.famc-tab{margin-left:auto;font:600 8px var(--mono);letter-spacing:.16em;color:#8D97A1;padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.06)}
.famc-tabs{display:flex;gap:16px;padding:10px 16px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);font:600 8.5px var(--mono);letter-spacing:.12em;color:var(--hint)}
.famc-tabs .on{color:var(--ac)}
.famc-sum{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.famc-sum .ring{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 17px var(--serif);color:var(--crit);border:2px solid color-mix(in oklab,var(--crit) 45%,#fff);background:color-mix(in oklab,var(--crit) 6%,#fff)}
.famc-sum .t{font:600 13.5px var(--serif);color:var(--ink)}
.famc-sum .d{font:11px var(--sans);color:var(--mut);margin-top:3px}
.famc-find{padding:12px 16px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.famc-find:last-child{border-bottom:0}
.famc-find .row{display:flex;align-items:center;gap:9px}
.famc-find .sev{width:42px;flex-shrink:0;font:600 8px var(--sans);letter-spacing:.1em;text-align:center;padding:4px 0 3px;border-radius:2px}
.famc-find .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)}
.famc-find .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)}
.famc-find .tt{font:600 12.5px var(--sans);color:var(--ink);flex:1}
.famc-find .where{font:9px var(--mono);letter-spacing:.06em;color:var(--hint);flex-shrink:0}
.famc-find .dd{font:11.5px/1.6 var(--sans);color:var(--mut);margin:7px 0 0 51px;text-wrap:pretty}
.famc-find .act{display:inline-flex;margin:10px 0 0 51px;font:600 10px var(--sans);letter-spacing:.02em;color:#14100A;padding:6px 12px;border-radius:2px;background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}

/* scattered markers */
.fam-mark{position:absolute;z-index:1;display:flex;align-items:center;gap:10px}
.fam-mark .ic{width:28px;height:28px;flex-shrink:0;border:1px solid color-mix(in oklab,var(--ink) 22%,#fff);border-radius:3px;position:relative;background:color-mix(in oklab,var(--paper) 30%,#fff)}
.fam-mark .ic::after{content:'';position:absolute;inset:8px;border:1px solid color-mix(in oklab,var(--ac) 55%,#fff);border-radius:1px}
.fam-mark .lb{font:600 8.5px/1.25 var(--mono);letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.fam-mark.m-alt{top:392px;left:648px}
.fam-mark.m-page{top:34px;left:26px}
.fam-mark.m-meta{top:30px;left:640px}
.fam-mark.m-head{bottom:40px;left:412px}
.fam-mark.m-con{bottom:124px;right:44px}

@media (max-width:1080px){
  .psplit,.psplit.rev{flex-direction:column;align-items:flex-start}
  .plate,.rplate,.askplate{width:100%}
  .fa-top{grid-template-columns:1fr;gap:16px;align-items:start}
  .fa-montage{position:static;height:auto;padding:24px;display:flex;flex-direction:column;gap:24px;background:transparent;border:0}
  .fam-browser,.fam-phone,.fam-card{position:static;width:100%}
  .fam-phone{max-width:300px;align-self:center}
  .fam-mark{display:none}
  .tools{grid-template-columns:1fr}
  .tool{border-right:0;border-bottom:1px solid var(--card-ln)}
  .tool:last-child{border-bottom:0}
  .cmp-hd,.cmp-row{grid-template-columns:1fr 70px 70px;gap:8px}
}

/* ── Frontend Auditor drawer mock ── */
.fadrawer{width:100%;height:600px;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:var(--shadow-2)}
.fad-hd{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--card-ln)}
.fad-search{width:27px;height:27px;flex-shrink:0;border-radius:50%;border:1px solid var(--card-ln);display:flex;align-items:center;justify-content:center;color:var(--mut);background:color-mix(in oklab,var(--paper) 55%,#fff)}
.fad-title{flex:1;min-width:0}
.fad-title .k{display:block;font:600 8px var(--mono);letter-spacing:.18em;color:var(--ac)}
.fad-title b{font:600 15px var(--serif);color:var(--ink)}
.fad-x{color:var(--hint);font:300 20px/1 var(--sans)}
.fad-sum{display:flex;flex-direction:column;padding:16px 18px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.fad-sum-top{display:flex;align-items:center;gap:14px}
.fad-ring{width:54px;height:54px;flex-shrink:0;border-radius:50%;position:relative;
  background:conic-gradient(var(--crit) 0 46%,color-mix(in oklab,var(--card-ln) 75%,#fff) 46% 100%)}
.fad-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--card)}
.fad-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 19px var(--serif);color:var(--ink);z-index:1}
.fad-sum .t{font:600 14px var(--serif);color:var(--ink)}
.fad-sum .d{font:11.5px var(--sans);color:var(--mut);margin-top:2px}
.fad-pills{display:flex;gap:7px;margin-top:9px}
.fad-pills .pill{display:inline-flex;align-items:center;gap:6px;font:600 9.5px var(--sans);padding:3px 9px 2px;border-radius:999px;background:color-mix(in oklab,var(--paper) 55%,#fff);border:1px solid var(--card-ln);color:var(--mut)}
.fad-pills .pill i{width:6px;height:6px;border-radius:50%}
.fad-pills .high i{background:var(--crit)}
.fad-pills .med i{background:var(--warn)}
.fad-sevbar{display:flex;gap:2px;height:6px;margin-top:14px}
.fad-sevbar i{height:100%;border-radius:1px}
.fad-sevbar .c{background:var(--crit)}
.fad-sevbar .h{background:#C2694C}
.fad-sevbar .m{background:var(--warn)}
.fad-sevbar .l{background:#5F7E96}
.fad-sevleg{display:flex;gap:15px;margin-top:9px;font:500 11px var(--sans);color:var(--mut)}
.fad-sevleg b{color:var(--ink);font-weight:600}
.fad-tabs{display:flex;gap:4px;margin:12px 16px 12px;padding:4px;background:color-mix(in oklab,var(--paper) 55%,#fff);border:1px solid var(--card-ln);border-radius:4px}
.fad-tabs span{flex:1;text-align:center;font:600 9px var(--mono);letter-spacing:.12em;color:var(--hint);padding:7px 0;border-radius:3px}
.fad-tabs .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(12,34,51,.1)}
.fad-scroll{flex:1;overflow:hidden;position:relative}
.fad-scroll::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--card))}
.fad-group{display:flex;align-items:center;gap:12px;padding:14px 18px 4px;font:600 10px var(--sans);letter-spacing:.02em;color:var(--hint)}
.fad-group::after{content:'';flex:1;height:1px;background:color-mix(in oklab,var(--card-ln) 60%,#fff)}
.fad-row{display:flex;gap:12px;padding:12px 18px;border-top:1px solid color-mix(in oklab,var(--card-ln) 50%,#fff)}
.fad-row.active{background:color-mix(in oklab,var(--ac) 5%,#fff);box-shadow:inset 3px 0 0 var(--ac)}
.fad-ic{width:30px;height:30px;flex-shrink:0;border-radius:3px;display:flex;align-items:center;justify-content:center}
.fad-ic.img{background:color-mix(in oklab,var(--warn) 13%,#fff);color:var(--warn)}
.fad-ic.link{background:color-mix(in oklab,var(--crit) 11%,#fff);color:var(--crit)}
.fad-body{flex:1;min-width:0}
.fad-rt{display:flex;align-items:center;gap:8px}
.fad-rt b{font:600 13px var(--sans);color:var(--ink)}
.fad-badge{font:600 8px var(--mono);letter-spacing:.1em;padding:3px 6px 2px;border-radius:3px}
.fad-badge.high{color:var(--crit);background:color-mix(in oklab,var(--crit) 9%,#fff);border:1px solid color-mix(in oklab,var(--crit) 26%,#fff)}
.fad-body p{font:12px/1.55 var(--sans);color:var(--mut);margin-top:5px;text-wrap:pretty}
.fad-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fad-meta span{font:9px var(--mono);color:var(--hint);background:color-mix(in oklab,var(--paper) 55%,#fff);border:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);border-radius:3px;padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.fad-act{margin-top:10px}
.fad-redirect{display:inline-flex;align-items:center;font:600 11px var(--sans);color:#24402E;padding:8px 15px;border-radius:3px;
  background:linear-gradient(180deg,#CFDDCC,#C3D4C0);border:1px solid #AFC6AC;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 1px 3px rgba(46,80,58,.14)}
.fad-ft{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff)}
.fad-rescan{display:inline-flex;align-items:center;gap:7px;font:600 10px var(--sans);color:var(--ink);border:1px solid var(--card-ln);background:#fff;border-radius:3px;padding:7px 12px}
.fad-when{font:10px var(--mono);color:var(--hint)}
.fadrawer-wrap{flex:0 0 374px;max-width:374px;position:relative}
.fad-launch{position:absolute;right:-16px;bottom:-24px;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--card-ln);border-radius:999px;box-shadow:0 16px 36px rgba(12,34,51,.2),0 4px 10px rgba(12,34,51,.1);padding:9px 18px 9px 10px}
.fl-ic{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--ac) 12%,#fff);color:color-mix(in oklab,var(--ac) 80%,#000)}
.fl-txt{display:flex;flex-direction:column;gap:2px}
.fl-txt .k{font:600 8.5px var(--mono);letter-spacing:.16em;color:var(--ac)}
.fl-txt .d{font:600 12px var(--sans);color:var(--ink)}
.fl-txt .d b{color:var(--crit);font-weight:700}
.fl-badge{position:absolute;top:-9px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:flex;align-items:center;justify-content:center;font:700 11px var(--sans);color:#fff;background:var(--crit);border:2px solid #fff;box-shadow:0 2px 6px rgba(166,61,47,.4)}
@media (max-width:1080px){
  .fadrawer-wrap{flex:none;width:100%;max-width:420px}
  .fad-launch{right:8px}
}

/* ── Broken-link crawl panel (navy header, white body) ── */
.blpanel{flex:0 0 470px;max-width:470px;position:relative;overflow:hidden;color:var(--ink);
  background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:var(--shadow-2)}
.blpanel::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 60%,transparent);z-index:1}
.bl-hd{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid var(--navy-ln);background:linear-gradient(168deg,var(--navy2),var(--navy))}
.bl-crest{width:17px;height:17px;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)}
.bl-hd b{font:600 12px var(--serif);color:#F3EFE5}
.bl-tab{margin-left:auto;font:600 8px var(--mono);letter-spacing:.16em;color:#7FA98F;padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.06)}
.bl-stat{display:flex;border-bottom:1px solid var(--navy-ln);background:linear-gradient(168deg,var(--navy2),var(--navy))}
.bl-stat>div{flex:1;padding:14px 20px;border-right:1px solid var(--navy-ln)}
.bl-stat>div:last-child{border-right:0}
.bl-stat b{display:block;font:500 24px/1 var(--serif);color:#F5F1E7}
.bl-stat b.bad{color:#E8A99E}
.bl-stat span{display:block;font:600 8px var(--mono);letter-spacing:.14em;color:#6E7B86;margin-top:6px}
.bl-row{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.bl-sev{width:40px;flex-shrink:0;font:600 8px var(--mono);letter-spacing:.04em;text-align:center;padding:4px 0 3px;border-radius:2px}
.bl-sev.c4{color:var(--crit);border:1px solid color-mix(in oklab,var(--crit) 28%,#fff);background:color-mix(in oklab,var(--crit) 9%,#fff)}
.bl-sev.ext{color:var(--warn);border:1px solid color-mix(in oklab,var(--warn) 30%,#fff);background:color-mix(in oklab,var(--warn) 10%,#fff)}
.bl-sev.orph{color:var(--hint);border:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff)}
.bl-url{font:600 12px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.bl-meta{font:9.5px var(--mono);color:var(--hint);flex-shrink:0}
.bl-act{flex-shrink:0;font:600 10px var(--sans);color:var(--ink);padding:6px 12px;border:1px solid var(--card-ln);border-radius:2px}
.bl-ft{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff);font:600 9px var(--mono);letter-spacing:.12em;color:var(--hint)}
.bl-ft .ok{color:var(--pass)}
@media (max-width:1080px){.blpanel{flex:none;width:100%;max-width:470px}}

/* ── shared feature panel (login guard, WooCommerce) ── */
.mpanel{flex-shrink:0;width:470px;position:relative;overflow:hidden;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;box-shadow:var(--shadow-2)}
.mpanel::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:color-mix(in oklab,var(--ac) 60%,transparent);z-index:1}
.mp-hd{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid var(--navy-ln);background:linear-gradient(168deg,var(--navy2),var(--navy))}
.mp-crest{width:17px;height:17px;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)}
.mp-hd b{font:600 12px var(--serif);color:#F3EFE5}
.mp-tab{margin-left:auto;font:600 8px var(--mono);letter-spacing:.16em;color:#7FA98F;padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.06)}
.mp-stat{display:flex;border-bottom:1px solid var(--navy-ln);background:linear-gradient(168deg,var(--navy2),var(--navy))}
.mp-stat>div{flex:1;padding:14px 20px;border-right:1px solid var(--navy-ln)}
.mp-stat>div:last-child{border-right:0}
.mp-stat b{display:block;font:500 24px/1 var(--serif);color:#F5F1E7}
.mp-stat b.bad{color:#E8A99E}
.mp-stat span{display:block;font:600 8px var(--mono);letter-spacing:.14em;color:#6E7B86;margin-top:6px}
.mp-ft{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff);font:600 9px var(--mono);letter-spacing:.12em;color:var(--hint)}
.mp-ft .ok{color:var(--pass)}
.lg-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.lg-ip{font:600 12px var(--mono);color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-meta{font:9.5px var(--mono);color:var(--hint);flex-shrink:0}
.lg-pill{flex-shrink:0;font:600 8px var(--sans);letter-spacing:.08em;padding:4px 9px 3px;border-radius:2px;color:var(--crit);background:color-mix(in oklab,var(--crit) 9%,#fff);border:1px solid color-mix(in oklab,var(--crit) 26%,#fff)}
.lg-pill.warn{color:var(--warn);background:color-mix(in oklab,var(--warn) 10%,#fff);border-color:color-mix(in oklab,var(--warn) 28%,#fff)}
.wc-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.wc-thumb{width:30px;height:30px;flex-shrink:0;border-radius:4px;border:1px solid var(--card-ln);background:repeating-linear-gradient(45deg,color-mix(in oklab,var(--paper) 70%,#fff),color-mix(in oklab,var(--paper) 70%,#fff) 5px,#fff 5px,#fff 10px)}
.wc-body{flex:1;min-width:0}
.wc-body b{display:block;font:600 12.5px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-body span{display:block;font:11px var(--sans);color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-flag{flex-shrink:0;font:600 8px var(--mono);letter-spacing:.08em;padding:4px 9px 3px;border-radius:2px}
.wc-flag.warn{color:var(--warn);background:color-mix(in oklab,var(--warn) 10%,#fff);border:1px solid color-mix(in oklab,var(--warn) 28%,#fff)}
.wc-flag.crit{color:var(--crit);background:color-mix(in oklab,var(--crit) 9%,#fff);border:1px solid color-mix(in oklab,var(--crit) 26%,#fff)}
@media (max-width:1080px){.mpanel{flex:none;width:100%;max-width:470px}}