/* ============================================================================
   home.css — page-specific styles for the MalCare homepage.
   Loaded AFTER malcare.css; depends on its tokens and shared components.
   ============================================================================ */

/* ---------- hero + path selector ---------- */
.hero{padding:100px 0 80px;border-bottom:1px solid var(--ink-08)}
.hero-inner{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:start}
.hero h1{font-size:clamp(36px,4.2vw,54px);margin-bottom:22px;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{font-size:16.5px;margin-bottom:28px;max-width:52ch}
.hero .lede em{color:var(--hi);font-style:normal;font-weight:500}
.hero-micro{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:16px}
.pswitch{display:inline-block;margin-top:22px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;color:var(--acc);
  border-bottom:1px solid var(--acc-dim);transition:color .2s,border-color .2s}
.pswitch:hover{color:#FF7152;border-color:#FF7152}
.pswitch:focus-visible{outline:1px solid var(--cy);outline-offset:3px}
.pswitch.back{margin-top:18px;color:var(--mut);border-bottom-color:var(--ink-14)}
.pswitch.back:hover{color:var(--body);border-bottom-color:var(--ink-28)}
.hackstrip{display:none;border:1px solid rgba(255,92,56,.4);border-left:3px solid var(--acc);border-radius:3px;padding:18px 22px;margin-bottom:26px;font-size:14px;color:var(--body)}
.hackstrip b{color:var(--hi)}
.hackstrip .hs-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
body[data-path="hacked"] .hackstrip{display:block}
body[data-path="hacked"] .protect-ctas{display:none}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.trust-strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink-08);padding-top:22px;font-family:var(--fm)}
.trust-strip .t{padding-right:24px;margin-right:24px;border-right:1px solid var(--ink-08)}
.trust-strip .t:last-child{border:0;margin:0;padding:0}
.trust-strip b{display:block;font-size:18px;color:var(--hi);font-weight:500;letter-spacing:-.01em}
.trust-strip span{font-size:10px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase}
.hero-side{display:flex;flex-direction:column;gap:18px}
.hero-side .hero-log{font-family:var(--fm);font-size:10.5px}
.hero-log .rows{padding:8px 14px 10px;display:flex;flex-direction:column;gap:4px}
.hero-log .r{display:flex;justify-content:space-between;gap:12px;color:var(--mut);animation:rowIn .4s ease}
.hero-log .r b{font-weight:400;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag.keep{color:var(--body)}
@media(max-width:1060px){.hero-inner{grid-template-columns:1fr}}

/* ---------- 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)}

/* ---------- the stakes (section 01) ---------- */
.harms{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.harm{padding:28px 24px 28px 0;margin-right:24px;border-right:1px solid var(--ink-08)}
.harm:last-child{border-right:0;margin-right:0;padding-right:0}
.harm svg{width:100%;max-width:120px;margin-bottom:14px}
.harm h3{font-size:15px;margin-bottom:6px}
.harm p{font-size:12.5px;color:var(--mut)}
@media(max-width:1060px){
  .harms{grid-template-columns:1fr 1fr}
  .harm{border-bottom:1px solid var(--ink-08)}
  .harm:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
  .harm:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:600px){
  .harms{grid-template-columns:1fr}
  .harm{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--ink-08)}
  .harm:last-child{border-bottom:0}
}

/* ---------- figure helpers ---------- */
.fig-m{display:none}
@media(max-width:760px){.fig-d{display:none}.fig-m{display:block}}

/* ---------- the roster (section 02) ---------- */
.layers{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.layer{padding:26px 26px 26px 0;margin-right:26px;border-right:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.layer:nth-child(3n){border-right:0;margin-right:0;padding-right:0}
.layer:nth-last-child(-n+3){border-bottom:0}
.layer svg{width:100%;max-width:130px;margin-bottom:12px}
.layer .ln{font-family:var(--fm);font-size:9.5px;letter-spacing:.22em;color:var(--cy);display:block;margin-bottom:8px}
.layer h3{font-size:15.5px;margin-bottom:5px}
.layer p{font-size:12.5px;color:var(--mut)}
.layer a{color:var(--cy);text-decoration:none}
@media(max-width:1060px){
  .layers{grid-template-columns:1fr 1fr}
  .layer:nth-child(3n){border-right:1px solid var(--ink-08);margin-right:26px;padding-right:26px}
  .layer:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
  .layer:nth-last-child(-n+3){border-bottom:1px solid var(--ink-08)}
  .layer:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:600px){
  .layers{grid-template-columns:1fr}
  .layer,.layer:nth-child(3n){border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--ink-08)}
  .layer:last-child{border-bottom:0}
}

/* ---------- cleanup steps (section 05) ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.step3{padding:30px 26px 30px 0;margin-right:26px;border-right:1px solid var(--ink-08)}
.step3:last-child{border-right:0;margin-right:0;padding-right:0}
.step3 svg{width:100%;max-width:240px;border:1px solid var(--ink-08);border-radius:3px;background:var(--panel);margin-bottom:16px}
.step3 .sn{font-family:var(--fm);font-size:10px;letter-spacing:.22em;color:var(--cy);display:block;margin-bottom:10px}
.step3 h3{font-size:16px;margin-bottom:6px}
.step3 p{font-size:13px;color:var(--mut)}
@media(max-width:1060px){
  .steps3{grid-template-columns:1fr}
  .step3{border-right:0;margin-right:0;padding:26px 0;border-bottom:1px solid var(--ink-08)}
  .step3:last-child{border-bottom:0}
}
.cleanup-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
body[data-path="hacked"] #cleanup .steps3{border-color:rgba(76,217,233,.35)}

/* ---------- case study (section 06) ---------- */
.case2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.case2 .quote-lg p{font-size:17px;color:var(--body);line-height:1.65;margin-bottom:18px}
.case2 .quote-lg p b{color:var(--hi)}
.case2 .q-a{display:flex;align-items:center;gap:14px}
@media(max-width:1060px){.case2{grid-template-columns:1fr}}