/* ==========================================================================
   Brightrate — components
   --------------------------------------------------------------------------
   Reusable UI pieces. Each block is self-contained and named after the
   component (BEM-ish: .component, .component__part, .component--variant).

   Contents
     1. Site header
     2. Buttons
     3. Hero
     4. Quiz (lead form)
     5. Steps ("How it works")
     6. Info cards
     7. FAQ
     8. CTA band
     9. Site footer
    10. Simple page (privacy, terms)
    11. Thank-you page
   ========================================================================== */


/* 1. Site header ---------------------------------------------------------- */
/* Sticky bar with in-page links. Links collapse on phones; the CTA stays. */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  padding-block: var(--space-3);
  background: rgba(246, 248, 247, .7);    /* --paper at 70%: sections tint through */
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--spruce); }
.brand__mark { width: 36px; height: 36px; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }

/* Navigation links + mobile menu: see site.css section 2. */

/* Offset in-page jumps so the sticky header doesn't cover section titles. */
html { scroll-behavior: smooth; }
section[id], [id="quiz"] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* 2. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--sun); color: var(--on-sun); }
.btn--primary:hover { background: #F5A70F; }
.btn--secondary { background: var(--spruce); color: var(--on-spruce); }
.btn--ghost { background: transparent; color: var(--ink-muted); padding-inline: var(--space-2); min-height: 44px; font-weight: 600; }
.btn--ghost:hover { color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-label); }
.btn[disabled] { opacity: .6; cursor: progress; }


/* 3. Hero ----------------------------------------------------------------- */
/* Phones: intro → quiz → points (DOM order), so the first question is on the
   first screen. Desktop: intro and points on the left, quiz on the right. */
.hero { padding-block: var(--space-6) var(--space-12); }
.hero__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-areas: "intro" "quiz" "points";
  align-items: start;
}
.hero__intro { grid-area: intro; min-width: 0; }
.hero__intro > * + * { margin-top: var(--space-4); }
.hero__grid > .quiz { grid-area: quiz; }
.hero__points { grid-area: points; display: grid; gap: var(--space-2); }
.hero__points li { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; }
.hero__points svg { flex: none; width: 20px; height: 20px; color: var(--spruce); }

@media (min-width: 960px) {
  .hero { padding-block: var(--space-12) var(--space-20); }
  .hero__grid {
    grid-template-columns: 1fr 560px;
    grid-template-areas: "intro quiz" "points quiz";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-12);
    row-gap: var(--space-8);
  }
  .hero__intro { padding-top: var(--space-12); }
}


/* 4. Quiz (lead form) ----------------------------------------------------- */
.quiz {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(15, 39, 37, .25);
}
@media (min-width: 720px) { .quiz { padding: var(--space-8); } }

.quiz__progress { height: 8px; background: var(--spruce-soft); border-radius: var(--radius-pill); overflow: hidden; }
.quiz__progress-bar { height: 100%; width: 0; background: var(--spruce); border-radius: inherit; transition: width .3s ease; }
.quiz__meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); min-height: 44px; }
.quiz__meta .btn--ghost { min-height: 44px; padding-block: 0; } /* same height as the row, so it never jumps */
.quiz__count { font-size: var(--text-label); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.quiz__step > * + * { margin-top: var(--space-4); }
.quiz__question { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.2; margin-top: var(--space-2); }
@media (min-width: 720px) { .quiz__question { font-size: 1.75rem; } }
.quiz__help { color: var(--ink-muted); font-size: var(--text-label); }

/* Choice tiles (single-select, auto-advance) */
.quiz__options { display: grid; gap: var(--space-3); }
.quiz__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%;
  min-height: 64px;                       /* well above the 1cm NN/g minimum */
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  background: var(--surface-raised);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.quiz__option:hover { border-color: var(--spruce); }
.quiz__option-text { display: grid; gap: 2px; min-width: 0; }
.quiz__option-hint { font-size: var(--text-label); font-weight: 400; color: var(--ink-muted); line-height: 1.4; }
.quiz__option[aria-pressed="true"] { border-color: var(--spruce); background: var(--spruce-soft); }
.quiz__option::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface-raised);
}
.quiz__option[aria-pressed="true"]::after { border: 6px solid var(--spruce); }

/* Contact form */
.quiz__form { display: grid; gap: var(--space-4); }

/* Form fields */
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--text-label); font-weight: 600; }
.field__hint { font-size: var(--text-fine); color: var(--ink-muted); }
.field__input {
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1.0625rem;                   /* 16px+ stops iPhones zooming in on focus */
}
.field__input:focus { outline: none; border-color: var(--spruce); box-shadow: 0 0 0 3px var(--spruce-soft); }
.field__input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: var(--text-label); color: var(--danger); min-height: 0; }
.field-row { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 520px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--spruce); }

.quiz__error-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: #FDECEA;
  color: var(--danger);
  font-size: var(--text-label);
}
.quiz__trust { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin-top: var(--space-4); }
.quiz__trust svg { width: 16px; height: 16px; color: var(--spruce); }


/* 5. Steps ("How it works") ----------------------------------------------- */
.steps { display: grid; gap: var(--space-6); margin-top: var(--space-8); counter-reset: step; }
@media (min-width: 840px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps__item { counter-increment: step; }
.steps__item::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--sun);
  color: var(--on-sun);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.steps__item h3 { font-size: 1.1875rem; }
.steps__item p { margin-top: var(--space-2); color: var(--ink-muted); }


/* 6. Info cards ----------------------------------------------------------- */
.band--tint { background: var(--spruce-soft); }
.cards { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 840px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-6); min-width: 0; }
.card h3 { font-size: 1.1875rem; }
.card p { margin-top: var(--space-2); color: var(--ink-muted); }


/* 7. FAQ ------------------------------------------------------------------ */
.section--center-head > .container > .eyebrow,
.section--center-head > .container > h2 { text-align: center; }
.faq { max-width: 760px; margin: var(--space-8) auto 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-block: var(--space-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--spruce); }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding-bottom: var(--space-4); color: var(--ink-muted); max-width: var(--measure); }


/* 8. CTA band ------------------------------------------------------------- */
.cta-band { background: var(--spruce); color: var(--on-spruce); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; }
.cta-band h2 { color: var(--on-spruce); }
.cta-band p { margin: var(--space-3) auto var(--space-6); max-width: 46ch; opacity: .9; }


/* 9. Site footer ---------------------------------------------------------- */
/* Dark band (ink) so the page clearly ends. Four columns on desktop
   (about, contact, links, resources), stacked on phones. */
.site-footer {
  --footer-text: rgba(255, 255, 255, .72);
  --footer-line: rgba(255, 255, 255, .14);
  padding-block: var(--space-12) var(--space-8);
  background: var(--ink);
  color: var(--on-spruce);
}
.site-footer .brand { color: var(--on-spruce); }
.site-footer .fine { color: var(--footer-text); }
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer__about { min-width: 0; }
.site-footer__about p { margin-top: var(--space-3); color: var(--footer-text); max-width: 36ch; }
.site-footer__heading { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sun); }
.site-footer__col ul { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.site-footer__col a { color: var(--footer-text); text-decoration: none; }
.site-footer__col a:hover { color: var(--on-spruce); text-decoration: underline; }
.site-footer__bottom { display: grid; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--footer-line); }
.site-footer :focus-visible { outline-color: var(--sun); }


/* 10. Simple page (privacy, terms, thank-you) ------------------------------------ */
.page { max-width: 760px; padding-block: var(--space-12); }
.page h1 { font-size: var(--text-h1); }
.page h2 { font-size: var(--text-h2); margin-top: var(--space-8); }
.page p, .page li { color: var(--ink-muted); max-width: var(--measure); }
.page p + p, .page ul { margin-top: var(--space-3); }
.page--center { text-align: center; margin-inline: auto; }
.page--center p { margin-inline: auto; }
.success-badge {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--spruce);
}


/* 11. Thank-you page ------------------------------------------------------- */
.thanks { padding-block: var(--space-12) var(--space-20); }

.thanks__hero { max-width: 640px; margin-inline: auto; text-align: center; }
.thanks__hero > * + * { margin-top: var(--space-3); }
.thanks__hero .lead { margin-inline: auto; }
.thanks__badge {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: var(--spruce);
  color: var(--sun);
  box-shadow: 0 0 0 10px var(--spruce-soft);
}
.thanks__badge svg { width: 34px; height: 34px; }

.thanks__grid { display: grid; gap: var(--space-6); margin-top: var(--space-12); align-items: start; }
@media (min-width: 880px) { .thanks__grid { grid-template-columns: 1.15fr 1fr; } }

.thanks__card {
  min-width: 0;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (min-width: 720px) { .thanks__card { padding: var(--space-8); } }
.thanks__card h2 { font-size: var(--text-h2); }
.thanks__card--sun { background: var(--sun-soft); border-color: transparent; }
.thanks__card-intro { margin-top: var(--space-2); color: var(--ink-muted); }

/* Vertical timeline: numbered dots joined by a line */
.timeline { list-style: none; padding: 0; margin-top: var(--space-6); counter-reset: tl; }
.timeline__item { position: relative; padding-left: 52px; padding-bottom: var(--space-6); counter-increment: tl; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: counter(tl);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--spruce);
  color: var(--spruce);
  font-weight: 700; font-size: var(--text-label);
}
.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute; left: 16px; top: 38px; bottom: 4px;
  width: 2px; background: var(--line);
}
.timeline__item--done::before { content: "✓"; background: var(--spruce); color: var(--on-spruce); }
.timeline__item h3 { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 700; line-height: 34px; }
.timeline__item p { color: var(--ink-muted); }

/* Checklist with check icons */
.checklist { list-style: none; padding: 0; margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; }
.checklist svg {
  flex: none; width: 24px; height: 24px; padding: 4px; margin-top: 1px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--on-sun);
}

.thanks__note {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--spruce-soft);
}
.thanks__note p { min-width: 0; flex: 1 1 320px; }