/* ============================================================================
   Band 7 Lab — storefront (home.css)
   London-Studio minimalism on the locked exam tokens (chrome.css --cd-*):
   navy #003057, vast negative space, crisp typography, hairline rules.
   Loads alongside chrome.css (header / .btn / footer). No gradients, no clutter.
   ========================================================================== */
body{background:var(--cd-panel);color:var(--cd-text);font-family:var(--cd-sans);
  margin:0;-webkit-font-smoothing:antialiased;line-height:1.6}

/* high-contrast navy primary button (the commanding action) */
.btn-navy{background:var(--cd-blue);color:#fff;border:1px solid var(--cd-blue)}
.btn-navy:hover{background:var(--cd-blue-2);text-decoration:none}

/* ---- hero: centred, generous breathing room --------------------------- */
.hero{max-width:780px;margin:0 auto;padding:120px 24px 96px;text-align:center}
.hero h1{font-size:clamp(36px,6vw,60px);line-height:1.05;letter-spacing:-.025em;
  font-weight:800;color:var(--cd-blue);margin:0 0 24px}
.hero-sub{font-size:clamp(16px,2.1vw,19px);line-height:1.6;color:var(--cd-muted);
  max-width:56ch;margin:0 auto 40px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-note{margin:26px 0 0;font-size:13px;color:var(--cd-faint);letter-spacing:.01em}

/* ---- how-it-works trust strip ----------------------------------------- */
.how{border-top:1px solid var(--cd-line)}
.how-in{max-width:1000px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.how-step{display:flex;align-items:flex-start;gap:14px}
.how-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cd-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.how-step p{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--cd-muted)}
.how-step b{color:var(--cd-text)}
@media(max-width:760px){.how-in{grid-template-columns:1fr;gap:18px;padding:32px 24px}}

/* ---- trust / features banner ------------------------------------------ */
.features{border-top:1px solid var(--cd-line);background:var(--cd-bg)}
.features-in{max-width:1040px;margin:0 auto;padding:72px 24px 88px}
.features-k{text-align:center;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cd-faint);margin:0 0 44px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.feature .fn{font-size:13px;font-weight:800;color:var(--cd-accent-ink);letter-spacing:.04em;margin-bottom:12px}
.feature h3{font-size:19px;font-weight:800;color:var(--cd-blue);margin:0 0 10px;letter-spacing:-.01em}
.feature p{font-size:15px;line-height:1.6;color:var(--cd-muted);margin:0}
@media(max-width:760px){
  .hero{padding:80px 22px 64px}
  .feature-grid{grid-template-columns:1fr;gap:36px}
  .features-in{padding:56px 24px 64px}
}

/* ---- sample-correction modal ------------------------------------------ */
.smodal-scrim{position:fixed;inset:0;z-index:60;background:rgba(0,20,40,.45);
  display:flex;align-items:center;justify-content:center;padding:22px;animation:sfade .2s ease}
.smodal-scrim[hidden]{display:none}
@keyframes sfade{from{opacity:0}to{opacity:1}}
.smodal{background:#fff;border-radius:14px;max-width:520px;width:100%;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,20,40,.4);animation:spop .22s ease}
@keyframes spop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.smodal-head{display:flex;align-items:center;background:var(--cd-blue);color:#fff;padding:14px 20px}
.smodal-head h3{margin:0;font-size:16px;font-weight:700}
.smodal-x{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.smodal-body{padding:22px 22px 24px}
.sc-eg{font-family:var(--cd-serif);font-size:16px;line-height:1.6;border-left:3px solid var(--cd-line-strong);
  padding:10px 14px;margin:0 0 12px;color:var(--cd-text)}
.sc-eg.bad{border-left-color:var(--cd-danger)}
.sc-eg.good{border-left-color:var(--cd-good)}
.sc-eg .tag{display:block;font-family:var(--cd-sans);font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:5px;color:var(--cd-faint)}
.sc-strike{color:var(--cd-danger);text-decoration:line-through}
.sc-fixed{color:var(--cd-good);font-weight:700}
.sc-why{font-size:13.5px;color:var(--cd-muted);line-height:1.55;margin:14px 0 18px}
.smodal-body .btn{width:100%}