/* ==================================================================
   PRISTINE HANDLERS — CAMPAIGN LANDING PAGE COMPONENTS
   ------------------------------------------------------------------
   Loaded only by the four Week 1 campaign pages, after styles.css.
   Every class is prefixed .cp- so it cannot collide with the site.
   Inherits all design tokens from styles.css: no colours, fonts or
   breakpoints are redefined here.
   ================================================================== */

/* ── hero ────────────────────────────────────────────────────────── */
.cp-hero{background:var(--ink);color:#DDE7EC;padding:clamp(32px,5vw,62px) 0 clamp(36px,5.5vw,68px)}
.cp-hero h1{color:#fff;max-width:18ch;font-size:clamp(29px,4.3vw,50px)}
.cp-hero .lede{color:#B9CCD6;margin-top:20px;max-width:58ch}
.cp-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,4vw,58px);align-items:center}
.cp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cp-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.cp-hero .btn-ghost:hover{color:#fff;border-color:#fff}

/* ── proof strip ─────────────────────────────────────────────────── */
.cp-proof{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:26px;
  font-family:var(--data);font-size:11.5px;color:#8FB4C6;letter-spacing:.02em}
.cp-proof span{display:flex;align-items:center;gap:7px}
.cp-proof span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sky);flex:none}

/* ── hero image ──────────────────────────────────────────────────── */
.cp-shot{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);margin:0}
.cp-shot img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.cp-shot figcaption{font-family:var(--data);font-size:11px;color:#8FB4C6;padding:10px 2px 0;line-height:1.5}

/* ── numbered process ────────────────────────────────────────────── */
.cp-steps{display:grid;gap:0;margin-top:6px}
.cp-step{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:19px 0;
  border-bottom:1px solid var(--line-soft)}
.cp-step:last-child{border-bottom:0}
.cp-step .n{font-family:var(--data);font-size:13px;color:var(--brand);font-weight:600;padding-top:2px}
.cp-step h3{font-size:17px;margin-bottom:5px}
.cp-step p{font-size:14.5px;color:var(--mute);margin:0;max-width:72ch}

/* ── illustrative scenario ───────────────────────────────────────── */
.cp-eg{background:var(--surface-2,#F4F7F9);border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:var(--radius);padding:clamp(20px,2.6vw,30px)}
.cp-eg .tag{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:10px}
.cp-eg h3{font-size:19px;margin-bottom:12px}
.cp-eg p{font-size:15px;max-width:74ch}
.cp-eg p:last-child{margin-bottom:0}
.cp-eg .note{font-size:13px;color:var(--mute);margin-top:14px}

/* ── two routes (instruct vs refer) ──────────────────────────────── */
.cp-routes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)}
.cp-route{background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column}
.cp-route h3{font-size:19px;margin-bottom:10px}
.cp-route p{font-size:14.5px;color:var(--mute)}
.cp-route .btn{margin-top:auto;align-self:flex-start}

/* ── mid-page CTA ────────────────────────────────────────────────── */
.cp-mid{text-align:center;padding:clamp(24px,3.2vw,42px) 0}

/* ── form ────────────────────────────────────────────────────────── */
.cp-form{background:var(--ink);color:#DDE7EC;padding:clamp(32px,5vw,62px) 0}
.cp-form h2{color:#fff}
.cp-form .lede{color:#B9CCD6}
.cp-card{background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:clamp(20px,3vw,38px);max-width:840px;margin:clamp(20px,3vw,32px) auto 0}
.cp-legend{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cp-legend:first-of-type{margin-top:0}
.cp-fieldset{border:0;padding:0;margin:0;min-width:0}
.cp-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.cp-check{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 13px;cursor:pointer;font-size:14.5px;background:#fff}
.cp-check:hover{border-color:var(--brand)}
.cp-check input{margin:2px 0 0;accent-color:var(--brand);width:16px;height:16px;flex:none}
.cp-check:has(input:checked){border-color:var(--brand);background:#F2F9FD}
.cp-check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cp-consent{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px}
.cp-consent label{display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin-bottom:12px;color:var(--ink)}
.cp-consent input{margin:2px 0 0;accent-color:var(--brand);width:16px;height:16px;flex:none}
.cp-err{display:none;font-size:13px;color:var(--seal);margin-top:5px}
.cp-bad .cp-err{display:block}
.cp-bad input,.cp-bad select,.cp-bad textarea{border-color:var(--seal);background:#FDF7F7}
.cp-bad .cp-check{border-color:var(--seal)}
.cp-req{color:var(--seal)}
.cp-hint{font-size:12px;color:var(--mute);margin:6px 0 0}
.cp-done{display:none;border:1px solid var(--brand);background:#F2F9FD;border-radius:var(--radius);
  padding:20px 22px;margin-top:20px;font-size:15px;line-height:1.6}
.cp-done.on{display:block}
.cp-done b{display:block;margin-bottom:6px;font-size:16px}
.cp-file{width:100%;padding:11px;border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--surface-2,#F4F7F9);font-size:14px}
.cp-file:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── related links ───────────────────────────────────────────────── */
.cp-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cp-related a{font-size:13.5px;color:var(--brand);text-decoration:none;
  border:1px solid var(--line);border-radius:20px;padding:7px 14px}
.cp-related a:hover{border-color:var(--brand);background:var(--surface-2,#F4F7F9)}

/* ── responsive ──────────────────────────────────────────────────── */
@media(max-width:1000px){
  .cp-hero-grid{grid-template-columns:1fr}
  .cp-routes{grid-template-columns:1fr}
}
@media(max-width:620px){
  .cp-checks{grid-template-columns:1fr}
  .cp-step{grid-template-columns:32px 1fr;gap:12px}
  .cp-hero-cta .btn{width:100%;justify-content:center}
}