@charset "utf-8";
/* =========================================================================
   SGintakeFunnel.css   (renamed from styles.css)
   Scoped component stylesheet for the 3-step Small Group intake funnel that
   floats inside the SmallGroups.html hero banner.

   Integration notes (Joseph 2026-06-23):
   - EVERY rule is scoped under .sgFunnel so nothing leaks into theme.css's
     page layout (and theme.css's generic .btn / .step / element rules cannot
     bleed into the form). The standalone page-chrome from the prototype
     (body gradient, .intro / .footband / .glass / .rise / .topbar / .brand
     / .skiplink) is intentionally DROPPED - the funnel lives inside the
     existing hero now, so it only needs the solid .card panel + the steps.
   - Font references repointed assets/  ->  fonts/  (the woff2 files live in
     styles/fonts/ ; this sheet lives in styles/ so the url() is relative).
   - Loaded at ALL widths AFTER theme.css; the hero-height bump lives here so
     it applies on desktop too. Phone adaptations are in mobile.css Section 16.
   - WCAG 2.2 AA preserved: >=44px controls, visible focus, labelled fields,
     dark ink on the solid white card.
   ========================================================================= */

@font-face{font-family:"Costco Sans Micro";src:url("fonts/CostcoSansMicro-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Costco Sans Micro";src:url("fonts/CostcoSansMicro-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Costco Sans Micro";src:url("fonts/CostcoSansMicro-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Costco Sans Micro";src:url("fonts/CostcoSansMicro-Black.woff2") format("woff2");font-weight:800;font-display:swap}

/* ---- design tokens, scoped to the funnel container ---- */
.sgFunnel{
  --blue:#005DAB; --blue-dark:#004a8a;
  --red:#E31936; --red-dark:#c2142e;
  --focus:#DE2127;
  --ink:#1f2733; --body:#444; --muted:#6a717b;
  --line:#d9dee4; --soft:#f4f7fa; --bg:#fff;
  --font:"Costco Sans Micro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:48em; --radius:14px;
  --btn-radius:10px;
  --shadow:0 6px 28px rgba(15,30,50,.50),0 1px 2px rgba(15,30,50,.06);
}

/* =========================================================================
   FLOATING PANEL POSITION (desktop / >=800px) + hero height bump.
   Overrides theme.css .SmallGroupsHomeContentWrapper (loaded earlier).
   Phone behaviour (static, full width) is in mobile.css Section 16.
   ========================================================================= */
.SmallGroupsHomeContentWrapper{ height:690px; min-height:690px; }

.sgFunnel{
  position:absolute; top:1em; right:0;;
  width:92%; max-width:var(--maxw);
  margin-right:5%; z-index:50;
  font-family:var(--font); color:var(--body); font-size:16px; line-height:1.5;
  text-align:left;
}
.sgFunnel *{ box-sizing:border-box; }
.sgFunnel img{ max-width:100%; height:auto; display:block; }
.sgFunnel .wrap{ width:100%; }

/* ---- solid card panel (the "floating form") ---- */
.sgFunnel .card{
  width:100%;
  background:var(--bg); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.sgFunnel .card__bar{ height:5px; background:var(--red); }
.sgFunnel .card__pad{ padding:28px; }

/* step status (replaces the prototype's .brand__step; also the JS target #stepLabel) */
.sgFunnel .stepIndicator{
  margin:0 0 4px; font-size:.82rem; font-weight:600; color:var(--muted);
}

.sgFunnel h1,.sgFunnel .done__h{
  font-weight:800; color:var(--ink); font-size:clamp(1.5rem,5vw,2rem);
  line-height:1.12; margin:.1em 0 .35em;
}
.sgFunnel .lede{ color:var(--body); font-size:1rem; margin:0 0 1.25rem; }

/* progress bar */
.sgFunnel .prog{ display:flex; gap:8px; margin:0 0 20px; }
.sgFunnel .prog span{ flex:1; height:6px; border-radius:999px; background:#e6ebf1; }
.sgFunnel .prog span.on{ background:var(--blue); }

/* ---- neutralise theme.css generic .step / .btn so they cannot bleed in ---- */
.sgFunnel .step{ position:static; text-align:left; top:auto; padding-top:0; color:inherit; }

.sgFunnel fieldset{ border:0; margin:0; padding:0; min-width:0; }
.sgFunnel legend{ padding:0; font-weight:600; color:var(--ink); font-size:1.05rem; margin-bottom:.75rem; }
.sgFunnel legend:focus{ outline:none; }

.sgFunnel .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.sgFunnel .full{ grid-column:1/-1; }

.sgFunnel .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.sgFunnel .field label{ font-weight:500; color:var(--ink); font-size:.92rem; }
.sgFunnel .req{ color:var(--red); font-weight:700; }
.sgFunnel .field input,.sgFunnel .field textarea{
  font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--btn-radius);
  padding:12px 13px; width:100%; min-height:48px;
  transition:border-color .12s,box-shadow .12s;
}
.sgFunnel .field textarea{ min-height:130px; resize:vertical; }
.sgFunnel .field input::placeholder,.sgFunnel .field textarea::placeholder{ color:#9aa3ad; }
.sgFunnel .field input:focus,.sgFunnel .field textarea:focus{
  outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(222,33,39,.18);
}
.sgFunnel .field input[aria-invalid="true"],.sgFunnel .field textarea[aria-invalid="true"]{
  border-color:var(--red); background:#fff7f8;
}

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

/* error summary */
.sgFunnel .errs{
  display:none; border:1px solid var(--red); background:#fff5f6;
  border-radius:var(--btn-radius); padding:12px 14px; margin-bottom:18px;
}
.sgFunnel .errs.show{ display:block; }
.sgFunnel .errs:focus{ outline:none; }
.sgFunnel .errs h2{ margin:0 0 6px; color:var(--red-dark); }
.sgFunnel .errs ul{ margin:0; padding-left:18px; }
.sgFunnel .errs a{ color:var(--red-dark); }

/* action rows + buttons */
.sgFunnel .actions{ display:flex; gap:12px; align-items:center; margin-top:24px; flex-wrap:wrap; }
.sgFunnel .btn{
  font-family:inherit; font-weight:700; font-size:1.02rem; border:0;
  border-radius:var(--btn-radius); padding:14px 22px; cursor:pointer;
  min-height:50px; display:inline-flex; align-items:center; gap:9px; justify-content:center;
  white-space:normal; margin:0; vertical-align:middle; box-shadow:none; text-decoration:none;
  line-height:1.2;
}
.sgFunnel .btn:hover,.sgFunnel .btn:focus{ transform:none; opacity:1; }
.sgFunnel .btn--primary{ background:var(--blue); color:#fff; }
.sgFunnel .btn--primary:hover,.sgFunnel .btn--primary:focus{ background:var(--blue-dark); color:#fff; }
.sgFunnel .btn--send{ background:var(--red); color:#fff; }
.sgFunnel .btn--send:hover,.sgFunnel .btn--send:focus{ background:var(--red-dark); color:#fff; }
.sgFunnel .btn--back{ background:none; color:var(--muted); font-weight:600; padding:14px 6px; min-height:50px; }
.sgFunnel .btn--back:hover,.sgFunnel .btn--back:focus{ color:var(--ink); background:none; }
.sgFunnel .btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

.sgFunnel .step[hidden]{ display:none; }

/* ---- <select> matched to the inputs + native caret ---- */
.sgFunnel .field select{
  font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--btn-radius);
  padding:12px 38px 12px 13px; width:100%; min-height:48px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
  transition:border-color .12s,box-shadow .12s;
  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='%236a717b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.sgFunnel .field select:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(222,33,39,.18); }
.sgFunnel .field select[aria-invalid="true"]{ border-color:var(--red); background-color:#fff7f8; }
.sgFunnel .field select:invalid{ color:#9aa3ad; }
.sgFunnel .field .hint{ color:var(--muted); font-size:.82rem; margin:0; }

/* conditional reveal (B1 Website URL) */
.sgFunnel .reveal{ overflow:hidden; }
.sgFunnel .reveal[hidden]{ display:none; }

/* in-flow regulated note */
.sgFunnel .note{
  background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--btn-radius); padding:10px 13px; color:var(--body); font-size:.82rem; margin:4px 0 0;
}
.sgFunnel .note b{ color:var(--ink); }

/* review / check-answers (step 3) */
.sgFunnel .review{ margin:0 0 8px; }
.sgFunnel .review__grp{ border:1px solid var(--line); border-radius:var(--btn-radius); padding:14px 16px; margin-bottom:14px; }
.sgFunnel .review__head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.sgFunnel .review__head h2{ color:var(--ink); margin:0; }
.sgFunnel .review__head a{ color:var(--blue); font-weight:600; text-decoration:none; font-size:.9rem; }
.sgFunnel .review__head a:hover{ text-decoration:underline; }
.sgFunnel .review dl{ display:grid; grid-template-columns:minmax(40%,auto) 1fr; gap:6px 14px; margin:0; }
.sgFunnel .review dt{ color:var(--muted); font-size:.88rem; }
.sgFunnel .review dd{ color:var(--ink); font-size:.92rem; margin:0; word-break:break-word; }

/* regulated dialogs rendered as accessible in-page notices */
.sgFunnel .gate{
  display:none; border-radius:var(--radius); padding:18px 18px 20px; margin:18px 0 0;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow);
}
.sgFunnel .gate.show{ display:block; }
.sgFunnel .gate:focus{ outline:none; }
.sgFunnel .gate--warn{ border-color:var(--red); background:#fff5f6; }
.sgFunnel .gate h2{ margin:0 0 8px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.sgFunnel .gate--warn h2{ color:var(--red-dark); }
.sgFunnel .gate .gate__warnicon{ font-size:1.15rem; }
.sgFunnel .gate p{ margin:0 0 10px; font-size:1rem; }
.sgFunnel .gate p:last-of-type{ margin-bottom:14px; }
.sgFunnel .gate .gate__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.sgFunnel .gate .btn--ghost{ background:#fff; color:var(--blue); border:1px solid var(--blue); }
.sgFunnel .gate .btn--ghost:hover,.sgFunnel .gate .btn--ghost:focus{ background:var(--soft); color:var(--blue); }

/* one H2 type scale across the funnel */
.sgFunnel .errs h2,.sgFunnel .review__head h2,.sgFunnel .gate h2{ font-size:1.05rem; font-weight:700; line-height:1.2; }

/* TCPA consent row - large target, clickable label */
.sgFunnel .consent{
  display:flex; gap:10px; align-items:flex-start; background:var(--soft);
  border:1px solid var(--line); border-radius:var(--btn-radius); padding:12px 13px; margin-top:6px;
}
.sgFunnel .consent input[type="checkbox"]{ width:24px; height:24px; min-width:24px; margin-top:0; accent-color:var(--blue); cursor:pointer; }
.sgFunnel .consent label{ font-weight:400; color:var(--body); font-size:.82rem; line-height:1.45; cursor:pointer; }

/* thank-you view (kept for safety though the live flow redirects to the EE Census) */
.sgFunnel .done{ text-align:center; padding:18px 4px; }
.sgFunnel .done__mark{
  width:64px; height:64px; border-radius:50%; background:rgba(0,93,171,.10); color:var(--blue);
  display:grid; place-items:center; margin:0 auto 16px; font-size:30px; font-weight:800;
}
.sgFunnel .done__h{ margin-bottom:.4em; }
.sgFunnel .done p{ font-size:1rem; max-width:42ch; margin:0 auto; }