/* ============================================================
   Annuity Harbor — funnel styles (LIGHT)
   Bright white pages, dark-navy text for readability, blue accents.
   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: 15 32 58;             /* #0f203a deep navy text — high contrast */
  --accent-rgb: 45 95 168;         /* #2d5fa8 blue */
  --accent-deep-rgb: 32 72 135;    /* #204887 */
  --accent-bright-rgb: 74 116 188; /* #4a74bc */
  --hl-rgb: 47 95 168;             /* #2f5fa8 blue highlight (readable on light) */
  --hl-deep-rgb: 36 76 138;        /* #244c8a deeper for eyebrows */
  --bg-1: #ffffff;
  --bg-2: #f5f8fc;
  --bg-3: #e8f0f9;
  --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: #eef3fb;
}

/* (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: linear-gradient(180deg, #5a82c4 0%, #3f68ad 55%, #2f5390 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 12px 26px -10px rgba(47,90,160,0.55);
  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 1px 0 rgba(255,255,255,0.28) inset, 0 18px 36px -10px rgba(47,90,160,0.62); }
.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(47,95,168,0.5); }
  50% { opacity: .3; box-shadow: 0 0 0 5px rgba(47,95,168,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: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, #5a82c4, #3a62a8);
  box-shadow: 0 6px 14px -6px rgba(47,90,160,0.7), 0 1px 0 rgba(255,255,255,0.3) inset;
  color: #fff;
}
.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 {
  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 { 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 { border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb)); }
.opt.selected .bullet svg { opacity: 1; transform: scale(1); }
.opt .label { flex: 1 1 auto; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* 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; min-height: 320px; }
.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; } }