/* ============================================================================
   wordfence-vs-malcare.css — page-specific layout for /wordfence-vs-malcare.
   Shared components (tokens, chrome, kickers, ledger, gauges, faq, cta-final,
   reveal) come from malcare.css. Never redefine tokens.
   ============================================================================ */

/* --------------------------------------------------------------- hero ----- */
.hero{padding:120px 0 96px;border-bottom:1px solid var(--ink-08)}
.hero h1{font-size:clamp(36px,4.2vw,58px);margin-bottom:24px;max-width:22ch}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{font-size:17px;margin-bottom:20px;max-width:58ch}
.hero .lede em{color:var(--hi);font-style:normal;font-weight:500}
.hero .stamp{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:36px}
.hero .stamp a{color:var(--cy)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:52px}
.hero-facts{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.hero-facts span{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:18px 28px 18px 0;margin-right:28px;border-right:1px solid var(--ink-08)}
.hero-facts span:last-child{border-right:0;margin-right:0}
.hero-facts b{color:var(--hi);font-weight:500}

/* ----------------------------------------------------- source markers ----- */
.src{font-family:var(--fm);font-size:9px;color:var(--cy-dim);vertical-align:super;margin-left:2px;letter-spacing:.04em;white-space:nowrap}
a.src:hover{color:var(--cy)}

/* --------------------------------------------------- comparison table ----- */
.cmp-head{display:grid;grid-template-columns:190px 1fr 1fr;gap:28px;padding:0 2px 12px;font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--ink-14)}
.cmp-row{display:grid;grid-template-columns:190px 1fr 1fr;gap:28px;padding:18px 2px;border-bottom:1px solid var(--ink-08)}
.cmp-row .cl{font-family:var(--fd);font-size:14px;font-weight:600;color:var(--hi);line-height:1.4}
.cmp-row .wf,.cmp-row .mc{font-size:13.5px;line-height:1.65;color:var(--body)}
.cmp-row .mc b{color:var(--hi);font-weight:500}
.cmp-row .m-lab{display:none;font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.cmp-group{font-family:var(--fm);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);padding:34px 2px 12px;border-bottom:1px solid var(--ink-14)}
.cmp-stamp{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}

/* ------------------------------------------------------------- reasons ---- */
.reasons{border-top:1px solid var(--ink-08)}
.rrow{display:grid;grid-template-columns:56px 1fr 230px;gap:28px;align-items:start;padding:36px 2px;border-bottom:1px solid var(--ink-08)}
.rrow .ix{font-family:var(--fm);font-size:11px;color:var(--acc);padding-top:8px}
.rrow h3{font-size:21px;letter-spacing:-.01em;margin-bottom:10px;max-width:30ch}
.rrow p{font-size:15px;color:var(--body);max-width:60ch}
.rrow p b{color:var(--hi);font-weight:500}
.rrow p a{color:var(--cy)}
.rrow .stat{text-align:right}
.rrow .stat .n{font-family:var(--fd);font-size:30px;font-weight:600;color:var(--hi);display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rrow .stat .l{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-top:8px;display:block;line-height:1.9}
@media(max-width:760px){
  .rrow{grid-template-columns:40px 1fr;gap:10px 18px}
  .rrow .stat{grid-column:2;text-align:left;margin-top:12px}
}

/* ---------------------------------------------------------- concession ---- */
.credit{padding:26px 30px;border-left:1px solid var(--cy-dim);background:var(--cy-08);margin-top:56px;max-width:78ch}
.credit .c-cap{font-family:var(--fm);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);margin-bottom:14px}
.credit p{font-size:15px;line-height:1.75;color:var(--body)}
.credit p b{color:var(--hi);font-weight:500}

/* --------------------------------------------------------- FIG helpers ---- */
.fig-m{display:none}
@media(max-width:760px){.fig-d{display:none}.fig-m{display:block}}
.fig-m .lrow{grid-template-columns:40px 1fr!important;gap:8px 18px}
.fig-m .lrow p{grid-column:2}

/* --------------------------------------------------------- db listing ----- */
.dbfig{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start}
.dbcol{background:var(--panel);border:1px solid var(--ink-08);border-radius:3px;overflow:hidden}
.dbcol .fname{padding:10px 16px;color:var(--mut);font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink-08)}
.dbcol .tbls{padding:16px;font-family:var(--fm);font-size:11px;line-height:2;column-count:2;column-gap:24px;color:rgba(255,92,56,.65)}
.dbcol .tbls.ours{column-count:1;color:rgba(76,217,233,.75)}
.dbcol .tbls .n{color:var(--mut)}

/* ---------------------------------------------------------- specimens ----- */
.spec-head,.spec-row{display:grid;grid-template-columns:1fr 170px 170px;gap:18px;align-items:baseline;padding:12px 18px}
.spec-head{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--ink-08)}
.spec-row{border-bottom:1px solid var(--ink-04);font-family:var(--fm);font-size:11.5px}
.spec-row:last-child{border-bottom:0}
.spec-row .sp{color:var(--body)}
.spec-row .sp i{display:block;font-style:normal;font-size:10px;color:var(--mut);margin-top:2px}

/* ------------------------------------------------------ false positive ---- */
.fpband{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08);padding:36px 0;margin-top:64px}
.fpband .n{font-family:var(--fd);font-size:clamp(56px,7vw,96px);font-weight:600;color:var(--hi);letter-spacing:-.02em;line-height:1}
.fpband .n small{font-size:.4em;color:var(--mut);font-weight:500}
.fpband p{font-size:15px;color:var(--body);max-width:56ch}
.fpband p b{color:var(--hi);font-weight:500}

/* ------------------------------------------------------------ cleanup ----- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.duo .d-col .d-cap{font-family:var(--fm);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;display:block;padding-bottom:14px;border-bottom:1px solid var(--ink-08);margin-bottom:18px;color:var(--mut)}
.duo .d-col p{font-size:15px;color:var(--body);max-width:48ch;margin-bottom:14px}
.duo .d-col p b{color:var(--hi);font-weight:500}
.proofrow{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08);margin-top:56px}
.proofrow span{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:16px 24px 16px 0;margin-right:24px;border-right:1px solid var(--ink-08)}
.proofrow span:last-child{border-right:0;margin-right:0}
.proofrow b{color:var(--hi);font-weight:500}

/* ------------------------------------------------------------ receipts ---- */
.receipts{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.receipt{background:var(--panel);border:1px solid var(--ink-08);border-radius:3px;font-family:var(--fm);font-size:12px}
.receipt .r-cap{padding:12px 18px;border-bottom:1px solid var(--ink-08);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-size:10.5px}
.receipt .r-row{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--ink-04);color:var(--body)}
.receipt .r-row .amt{white-space:nowrap}
.receipt .r-row.total{border-top:1px solid var(--ink-14);border-bottom:0;color:var(--hi);font-weight:600}
.receipt .neg{color:var(--acc)}
.receipt .pos{color:var(--cy)}
.receipt-note{font-family:var(--fm);font-size:10px;letter-spacing:.08em;line-height:2;color:var(--mut);margin-top:22px}

/* ------------------------------------------------------------- switch ----- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.step{padding:30px 30px 30px 0;margin-right:30px;border-right:1px solid var(--ink-08)}
.step:last-child{border-right:0;margin-right:0;padding-right:0}
.step .sn{font-family:var(--fm);font-size:11px;color:var(--cy);letter-spacing:.1em;display:block;margin-bottom:12px}
.step h3{font-size:16.5px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--mut);max-width:40ch}
.step p a{color:var(--cy)}
.switch-proof{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:72px;align-items:center}
.sq{padding-left:26px;border-left:1px solid var(--ink-14)}
.sq p{font-size:16.5px;line-height:1.75;color:var(--body);margin-bottom:18px}
.sq p b{color:var(--hi);font-weight:500}
.sq .who{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sq .who b{color:var(--hi);font-weight:500;letter-spacing:.08em}

/* ------------------------------------------------- video card + modal ----- */
.vcard{position:relative;display:block;border:1px solid var(--ink-14);border-radius:3px;overflow:hidden;cursor:pointer;text-decoration:none}
.vcard img{display:block;width:100%;filter:saturate(.55) brightness(.65);transition:filter .25s}
.vcard:hover img,.vcard:focus-visible img{filter:saturate(.8) brightness(.8)}
.vcard:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:64px;height:64px}
.vplay svg{width:100%;height:100%}
.vcap{position:absolute;left:0;right:0;bottom:0;background:rgba(6,10,19,.85);border-top:1px solid var(--ink-08);font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;color:var(--cy);padding:10px 14px;text-transform:uppercase}
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(6,10,19,.94);display:flex;align-items:center;justify-content:center;padding:5vmin}
.vmodal[hidden]{display:none}
.vm-frame{position:relative;width:min(1100px,100%)}
.vm-holder{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--ink-14)}
.vm-holder iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vm-close{position:absolute;top:-44px;right:0;background:none;border:1px solid var(--ink-14);border-radius:3px;color:var(--body);font-size:18px;line-height:1;padding:8px 12px;cursor:pointer;font-family:var(--fm)}
.vm-close:hover{border-color:var(--cy);color:var(--cy)}

/* -------------------------------------------------- fig-6 wide values ----- */
.fig .bar-row{grid-template-columns:170px 1fr 230px}
.fig .bar-row .val{text-align:left}
@media(max-width:760px){
  .fig .bar-row{grid-template-columns:110px 1fr;gap:8px 16px}
  .fig .bar-row .val{grid-column:2}
}

/* ------------------------------------------------------------- sources ---- */
.sources{margin-top:64px}
.sources details{border-top:1px solid var(--ink-08)}
.sources ol{padding:4px 2px 20px}
.sources ol{list-style:none;counter-reset:src}
.sources li{counter-increment:src;font-family:var(--fm);font-size:11px;line-height:1.9;color:var(--mut);padding:7px 2px;border-bottom:1px solid var(--ink-04);display:flex;gap:14px}
.sources li::before{content:"[" counter(src) "]";color:var(--cy-dim);flex-shrink:0}
.sources li a{color:var(--body);word-break:break-all}
.sources li a:hover{color:var(--cy)}
.sources .s-note{font-family:var(--fm);font-size:10px;letter-spacing:.06em;line-height:2;color:var(--mut);margin-top:18px;max-width:88ch}

/* ---------------------------------------------------------- responsive ---- */
@media(max-width:1060px){
  .dbfig,.duo,.receipts,.switch-proof{grid-template-columns:1fr}
  .fpband{grid-template-columns:1fr;gap:20px}
}
@media(max-width:760px){
  .hero{padding:96px 0 72px}
  .hero-facts{flex-direction:column}
  .hero-facts span{border-right:0;margin-right:0;padding:13px 0;border-bottom:1px solid var(--ink-08)}
  .hero-facts span:last-child{border-bottom:0}
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;gap:8px;padding:22px 2px}
  .cmp-row .m-lab{display:block;margin-top:6px}
  .dbcol .tbls{column-count:1}
  .spec-head,.spec-row{grid-template-columns:1fr 90px 90px;gap:10px;padding:12px 12px}
  .steps3{grid-template-columns:1fr}
  .step{border-right:0;margin-right:0;padding:22px 0;border-bottom:1px solid var(--ink-08)}
  .step:last-child{border-bottom:0}
  .proofrow{flex-direction:column}
  .proofrow span{border-right:0;margin-right:0;padding:12px 0;border-bottom:1px solid var(--ink-08)}
  .proofrow span:last-child{border-bottom:0}
}