/* CBC Individual & Family quote funnel — remake (T2 exemplar).
   Reuses the BLESSED T1 small-group design SYSTEM (card + stepper + select styling + reveal + review +
   in-page gates + WCAG defaults), RE-SKINNED to the CBC own brand: CBC Red #D32E2F accent, black/light-gray,
   self-hosted Futura PT (Jost fallback), real CBC white logo on a dark photographic hero.
   Brand: programs/cbc-site-remake/guides/CBC-BRAND-GUIDE.md (red is the star, one red CTA per view; color
   otherwise enters via real photos). Mobile-first, WCAG 2.2 AA. No third-party, no pixels. */

/* ===== Self-hosted Futura PT (woff2, font-display:swap). Jost fallback per the brand book. ===== */
@font-face{font-family:"Futura PT";src:url("assets/FuturaPT-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/FuturaPT-Book.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/FuturaPT-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/FuturaPT-Demi.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/FuturaPT-Heavy.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --red:#D32E2F; --red-dark:#b02525;          /* CBC Red — THE accent, one red CTA per view */
  --black:#000; --ink:#16181c;
  --body:#4a4f57; --muted:#6c727b;            /* greyscale body (measured contrast, no red text on light) */
  --line:#d7dade; --soft:#f4f5f7; --lightgray:#E7E7E7; --bg:#fff;
  --font:"Futura PT","Jost",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --maxw:680px; --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soft);color:var(--body);font-family:var(--font);font-size:16px;line-height:1.5}

.shell{max-width:var(--maxw);margin:0 auto;background:var(--bg);min-height:100vh;
  box-shadow:0 6px 34px rgba(15,18,24,.10)}

/* ============ DARK PHOTOGRAPHIC HERO (photo + black/red scrim, white logo + white headline) ============ */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;background:#101216;min-height:340px}
/* dark base so the white hero copy keeps a high-contrast backdrop even if the photo is slow/fails;
   min-height gives object-fit:cover a defined band to crop INTO (prevents the wide/short squish the
   vision gate caught — the photo is cropped, never horizontally compressed) */
.hero__inner{background:transparent}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:-2}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.12) 100%),
             linear-gradient(0deg, rgba(211,46,47,.22), rgba(211,46,47,.06))}
.hero__inner{position:relative;padding:30px 28px 38px}
.hero__logo{height:64px;width:auto;display:block;margin-bottom:22px}
.hero__h1{font-weight:800;letter-spacing:-.01em;font-size:clamp(1.65rem,6.2vw,2.5rem);line-height:1.06;margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.45);max-width:18ch}
.hero__h1b{display:block;font-weight:300;color:#fff;margin-top:.18em}
.hero__lede{margin:.95rem 0 0;font-size:clamp(1rem,2.6vw,1.12rem);font-weight:400;line-height:1.45;
  max-width:40ch;color:#f1f1f1;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero__rule{height:6px;background:var(--red)}                 /* the CBC red band under the hero */
@media(min-width:680px){ .hero__inner{padding:38px 40px 46px} .hero__logo{height:116px} }
@media(max-width:420px){ .hero__inner{padding:26px 20px 32px} .hero__bg{object-position:center 30%} }

/* ============ CARD ============ */
.card{background:var(--bg)}
.card__pad{padding:30px 28px}
@media(max-width:480px){ .card__pad{padding:24px 18px} }
.card__head{display:flex;justify-content:flex-end;margin-bottom:6px}
/* the "Step N of 3" PILL only — scope to the span so .step on the <fieldset> does not inherit nowrap
   (the fieldset .step previously forced white-space:nowrap onto the whole step, blowing out the consent label). */
span.step{font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap}

.card__title{font-weight:800;color:var(--ink);font-size:clamp(1.25rem,3.6vw,1.55rem);line-height:1.14;margin:.1em 0 .6em}

/* progress — filled segments use CBC red */
.prog{display:flex;gap:8px;margin:0 0 22px}
.prog span{flex:1;height:6px;border-radius:999px;background:var(--lightgray)}
.prog span.on{background:var(--red)}

fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-weight:600;color:var(--ink);font-size:1.08rem;margin-bottom:.85rem}
.lede-sm{color:var(--body);font-size:.92rem;line-height:1.5;margin:2px 0 14px;
  background:var(--soft);border-left:4px solid var(--red);border-radius:8px;padding:11px 14px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px}
.full{grid-column:1/-1}
@media(max-width:560px){ .grid{grid-template-columns:1fr} }

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-weight:500;color:var(--ink);font-size:.92rem}
.req{color:var(--red);font-weight:700}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;width:100%;min-height:50px;
  transition:border-color .12s,box-shadow .12s}
.field input::placeholder{color:#9aa0a8}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(211,46,47,.16)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--red);background:#fff7f7}

/* <select> — match the input look + native caret, 16px (no iOS zoom), >=50px target */
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c727b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.field select:invalid{color:#9aa0a8}              /* placeholder option dims like ::placeholder */

/* inline-width field (subsidy household/income) */
.field--inline{display:inline-flex;width:auto;min-width:0}
.field--inline select,.field--inline input{min-width:84px;width:auto}
.field--inline input{min-width:120px}

/* step-1 summary shown on step 2 */
.who{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--soft);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:18px;font-size:.9rem}
.who b{color:var(--ink)} .who a{color:var(--red);font-weight:600;text-decoration:none}
.who a:hover{text-decoration:underline}

/* error summary */
.errs{display:none;border:1px solid var(--red);background:#fff5f5;border-radius:10px;padding:13px 15px;margin-bottom:18px}
.errs.show{display:block} .errs h3{margin:0 0 6px;font-size:.95rem;color:var(--red-dark)}
.errs ul{margin:0;padding-left:18px} .errs a{color:var(--red-dark)}

/* conditional reveal (QLE / window-shop / subsidy detail) */
.reveal{margin-top:4px}
.reveal[hidden]{display:none}

/* subsidy inline rows */
.subsidy{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.subsidy__row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--ink);font-size:.95rem;font-weight:500}

/* per-page note */
.note{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:8px;
  padding:11px 14px;color:var(--body);font-size:.82rem;line-height:1.5;margin:12px 0 0}
.note b{color:var(--ink)}
.flag-needs-human{display:none}        /* dev-only flag; carried in markup + MAP.md, not shown to users */

.actions{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.btn{font-family:inherit;font-weight:700;font-size:1.02rem;border:0;border-radius:11px;padding:15px 24px;
  cursor:pointer;min-height:52px;display:inline-flex;align-items:center;gap:9px;justify-content:center;
  text-decoration:none;transition:background .12s,transform .04s}
.btn:active{transform:translateY(1px)}
/* ONE red CTA per view (the primary advance / submit) */
.btn--primary{background:var(--red);color:#fff} .btn--primary:hover{background:var(--red-dark)}
.btn--send{background:var(--red);color:#fff} .btn--send:hover{background:var(--red-dark)}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.btn--back{background:none;color:var(--muted);font-weight:600;padding:15px 6px;min-height:52px}
.btn--back:hover{color:var(--ink)}
@media(max-width:480px){ .actions{flex-direction:column-reverse;align-items:stretch} .btn{width:100%} }

.step[hidden]{display:none}

/* ===== Review / check-answers (Step 3) ===== */
.review{margin:0 0 8px}
.review__grp{border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:14px}
.review__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.review__head h3{font-size:1rem;color:var(--ink);font-weight:600;margin:0}
.review__head a{color:var(--red);font-weight:600;text-decoration:none;font-size:.9rem}
.review__head a:hover{text-decoration:underline}
.review dl{display:grid;grid-template-columns:minmax(42%,auto) 1fr;gap:7px 14px;margin:0}
.review dt{color:var(--muted);font-size:.88rem}
.review dd{color:var(--ink);font-size:.92rem;margin:0;word-break:break-word}
@media(max-width:480px){ .review dl{grid-template-columns:1fr} .review dt{margin-top:4px} }

/* ===== Regulated dialog as an accessible in-page notice ===== */
.gate{display:none;border-radius:12px;padding:18px 18px 20px;margin:18px 0 0;border:1px solid var(--line);
  background:#fff;box-shadow:0 4px 18px rgba(15,18,24,.10)}
.gate.show{display:block}
.gate--warn{border-color:var(--red);background:#fff5f5}
.gate h3{margin:0 0 8px;font-size:1.1rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.gate--warn h3{color:var(--red-dark)}
.gate__warnicon{font-size:1.15rem}
.gate p{margin:0 0 14px;font-size:.95rem}
.gate__actions{display:flex;gap:10px;flex-wrap:wrap}
.gate .btn--ghost{background:#fff;color:var(--red);border:1px solid var(--red)}
.gate .btn--ghost:hover{background:var(--soft)}
@media(max-width:480px){ .gate__actions{flex-direction:column} .gate .btn{width:100%} }

/* consent checkbox (TCPA) — large target, label clickable */
.consent{display:flex;gap:11px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);
  border-radius:11px;padding:13px 14px;margin-top:16px}
.consent input[type="checkbox"]{width:24px;height:24px;min-width:24px;margin-top:1px;accent-color:var(--red);cursor:pointer}
.consent label{flex:1;min-width:0;font-weight:400;color:var(--body);font-size:.82rem;line-height:1.5;cursor:pointer}
/* phone: WCAG 2.5.8 target size — keep the consent checkbox >=44px */
@media(max-width:480px){ .consent input[type="checkbox"]{width:44px;height:44px;min-width:44px} }

/* thank-you */
.done{text-align:center;padding:22px 4px 8px}
.done__mark{width:66px;height:66px;border-radius:50%;background:rgba(211,46,47,.10);color:var(--red);
  display:grid;place-items:center;margin:0 auto 16px;font-size:32px;font-weight:800}
.done h2{margin:0 0 .4em;color:var(--ink);font-weight:800;font-size:1.6rem}
.done p{font-size:1.05rem;max-width:46ch;margin:0 auto;line-height:1.55}

/* footer — legal/trust text raised to the body legibility floor (contrast + size).
   #3f444c on #f4f5f7 ~= 8:1 (well over WCAG AA 4.5:1); .875rem = 14px body, .8125rem = 13px copyright. */
.foot{padding:20px 28px 30px;border-top:1px solid var(--line);background:var(--soft);
  color:#3f444c;font-size:.875rem;line-height:1.55;text-align:center}
.foot p{margin:0 0 4px}
.foot__cr{font-size:.8125rem}

/* a11y helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}