/* ============================================================
   Benefits Made Simple — funnel styles (LIGHT)
   Matches the landing page: #f5f8ff ground, #0b1633 text, #1f5fe0 blue.
   The landing hero stays dark (it has its own styles); these
   shared styles drive the quiz, booking, and disqualified pages.
   Colors are RGB channels so Tailwind <alpha-value> + rgb()/a work.
   ============================================================ */

:root {
  color-scheme: light;
  --ink-rgb: 11 22 51;             /* #0b1633 — landing headline ink */
  --accent-rgb: 31 95 224;         /* #1f5fe0 — landing blue */
  --accent-deep-rgb: 22 71 178;    /* #1647b2 */
  --accent-bright-rgb: 91 139 240; /* #5b8bf0 */
  --hl-rgb: 31 95 224;             /* #1f5fe0 */
  --hl-deep-rgb: 22 71 178;        /* #1647b2 */
  --bg-1: #ffffff;
  --bg-2: #f5f8ff;
  --bg-3: #e9f0ff;
  --field-bg: #ffffff;
}

html, body { height: 100%; }
body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--bg-2);
  color: rgb(var(--ink-rgb));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Solid background — no gradient or grid. */
.bg-mesh {
  background: #f5f8ff;
}

/* (grain texture removed — solid background) */

.display-tight { letter-spacing: -0.02em; line-height: 1.02; }

/* Headings — bold sans, matched to the landing hero */
.qhead { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; color: rgb(var(--ink-rgb)); }

/* No panel — content sits directly on the bright background */
.card { background: transparent; border: 0; box-shadow: none; }

/* Form fields */
.field {
  background: var(--field-bg);
  border: 1px solid rgb(var(--ink-rgb) / 0.16);
  color: rgb(var(--ink-rgb));
  min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field::placeholder { color: rgb(var(--ink-rgb) / 0.42); }
.field:hover { border-color: rgb(var(--accent-rgb) / 0.5); }
.field:focus-visible,
.field:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb));
  background: #ffffff;
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.16);
}

/* Primary button — same blue */
.cta {
  background: rgb(var(--accent-rgb));
  box-shadow: 0 16px 30px -14px rgba(31,95,224,0.65);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, filter .16s ease;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 24px 42px -14px rgba(31,95,224,0.75); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid rgb(var(--accent-rgb) / 0.5); outline-offset: 3px; }

/* Secondary / ghost button */
.ghost {
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  color: rgb(var(--ink-rgb) / 0.78);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ghost:hover { background: rgb(var(--ink-rgb) / 0.04); border-color: rgb(var(--accent-rgb) / 0.5); }
.ghost:active { transform: translateY(1px); }
.ghost:focus-visible { outline: 3px solid rgb(var(--accent-rgb) / 0.4); outline-offset: 3px; }

.tick { color: rgb(var(--hl-rgb)); }

/* Slowly flashing status dot */
@keyframes dotflash {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31,95,224,0.5); }
  50% { opacity: .3; box-shadow: 0 0 0 5px rgba(31,95,224,0); }
}
.dot-flash { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--accent-rgb)); animation: dotflash 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dot-flash { animation: none; } }

/* Feature / trust cards (icon badge + label) */
.featcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 13px 6px; border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  box-shadow: 0 10px 26px -16px rgba(15,32,58,0.28);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.featcard:hover { border-color: rgb(var(--accent-rgb) / 0.4); box-shadow: 0 14px 30px -16px rgba(15,32,58,0.34); }
.ficon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--bg-3);
  color: rgb(var(--accent-rgb));
}
.ficon svg { width: 18px; height: 18px; }
.flabel { font-weight: 700; font-size: clamp(11px, 2.4vw, 13.5px); line-height: 1.15; letter-spacing: -0.01em; color: rgb(var(--ink-rgb)); }

/* Quiz progress bar — the fill scales on the GPU (transform, not width). */
.prog { height: 7px; border-radius: 99px; background: rgb(var(--ink-rgb) / 0.1); overflow: hidden; }
.prog > i { display: block; height: 100%; width: 100%; border-radius: 99px; transform-origin: left center;
  background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-bright-rgb)));
  transform: scaleX(0.1); transition: transform .4s cubic-bezier(.22,1,.36,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .prog > i { transition: none; } }

/* Quiz option buttons — white, dark text, blue selection */
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #ffffff;
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  border-radius: 14px; padding: 14px 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  font: inherit; color: rgb(var(--ink-rgb));
  box-shadow: 0 6px 16px -14px rgba(15,32,58,0.3);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.opt:hover { border-color: rgb(var(--accent-rgb) / 0.55); background: #f7faff; transform: translateY(-1px); }
.opt:hover .o-icon { background: rgb(var(--hl-rgb) / 0.18); }
.opt:active { transform: scale(0.985); transition-duration: .06s; }
.opt:focus-visible { outline: 3px solid rgb(var(--accent-rgb) / 0.4); outline-offset: 2px; }
.opt .o-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgb(var(--hl-rgb) / 0.1); color: rgb(var(--hl-rgb));
  transition: background .15s ease;
}
.opt .o-icon svg { width: 20px; height: 20px; }
.opt.selected .o-icon { background: rgb(var(--hl-rgb) / 0.16); }
.opt .bullet,
.pill .bullet {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgb(var(--ink-rgb) / 0.24); display: grid; place-items: center;
  transition: border-color .15s ease, background .15s ease;
}
.opt .bullet svg,
.pill .bullet svg { opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; color: #fff; }
/* Multi-select questions use square checkboxes (vs. round radios). */
.opt-multi .bullet { border-radius: 6px; }
.opt.selected { border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / 0.07); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14); }
.opt.selected .bullet,
.pill.selected .bullet { border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb)); }
.opt.selected .bullet svg,
.pill.selected .bullet svg { opacity: 1; transform: scale(1); }
.opt .label { flex: 1 1 auto; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* Compact two-column options — for long pick-one lists (e.g. plan carriers)
   where ten stacked rows would set the step stage height for every question. */
.opt-compact { justify-content: center; text-align: center; padding: 10px 8px; min-height: 50px; }
.opt-compact .bullet { display: none; }
.opt-compact .label { flex: 0 1 auto; font-size: 13.5px; line-height: 1.22; }

/* Brand-coloured options. The carrier buttons sit plain until one is picked
   — thirteen tinted cards at once is noise, and colour means more when it is
   the answer to "which did I choose". On selection the button takes the
   carrier's colour: a wash, a border and the label. These are approximations
   of the carriers' palettes, not their logos — an insurer's mark on a lead
   form implies an affiliation that does not exist — and each is dark enough
   to hold contrast against its own wash. */
.opt-brand.selected {
  border-color: rgb(var(--brand));
  background: rgb(var(--brand) / .12);
  box-shadow: 0 0 0 3px rgb(var(--brand) / .18);
}
.opt-brand.selected .label { color: rgb(var(--brand)); font-weight: 700; }
.opt-brand:focus-visible { outline-color: rgb(var(--brand) / .45); }

/* Privacy line — pinned to the viewport so it stays above the fold on every
   step, including the tall six-option question on small phones. */
#privacyFooter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  margin: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgb(245 248 255 / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Short viewports: shave the option rows and the step stage so six options
   plus the nav still fit without scrolling. */
@media (max-height: 700px) {
  .field { padding-top: 9px !important; padding-bottom: 9px !important; }
  .card { padding: 13px !important; }
}

@media (max-height: 760px) {
  .card { padding: 16px !important; }
  .prog { margin-bottom: 16px !important; }
  .opt { padding: 10px 14px; border-radius: 12px; }
  .opt .label { font-size: 14.5px; }
  .opt .o-icon { width: 32px; height: 32px; }
  .opt-compact { padding: 8px 6px; min-height: 44px; }
  .opt-compact .label { font-size: 13px; }
  .field { padding-top: 10px; padding-bottom: 10px; }
  .pill { padding: 11px 14px; }
  .qhead { font-size: 1.3rem; }
}

/* Entrance animation */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; }

/* Pre-rendered question slides share one fixed-height stage, so navigation
   animates only transform + opacity on the GPU — never layout. The JS sets
   each slide's transform/opacity/visibility and the transition timing. */
#stepHost {
  position: relative;
  /* Sized to the active step, not the tallest one, so short questions render
     short and nothing is ever pushed off screen. Animated so the card settles
     rather than jumping between steps. */
  transition: height .3s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { #stepHost { transition: none; } }
.slide {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; } }

/* ---- Brand lockup ---------------------------------------------------------
   Horizontal version of the circular logo, shared by the quiz and the booking
   page. The mark keeps the logo's own colours so it reads as the brand; the
   wordmark uses .qhead's type so it sits in the same voice as the headings.
   .brandbar-rule adds the hairline the quiz card needs under it. */
.brandbar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.brandbar-rule {
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .09);
}
.brandmark { width: 36px; height: 39px; flex: none; }
.brandword {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800; line-height: 1.06;
  letter-spacing: -0.025em; white-space: nowrap;
  /* Full size on a normal card; on a narrow phone it steps down only as far
     as it must, because the wordmark has to stay on one line. */
  font-size: clamp(22px, 6.6vw, 33px);
}
.brandword .b1 { color: #0B4A9B; }
.brandword .b2 { color: #41A24A; }

/* Narrow phones: give the wordmark back the room the mark was taking. */
@media (max-width: 400px) {
  .brandmark { width: 28px; height: 30px; }
  .brandbar { gap: 9px; }
}

/* Short screens: the lockup shrinks first, so answers keep their size. */
@media (max-height: 760px) {
  .brandbar-rule { padding-bottom: 10px; margin-bottom: 12px; }
  .brandbar { gap: 9px; }
  .brandmark { width: 28px; height: 30px; }
  .brandword { font-size: clamp(20px, 5.8vw, 26px); }
}