/* ============================================================================
   Quickest Coverage — shared design system.

   Navy and signal blue, geometric sans, flat utilitarian cards. Quickest
   Coverage is its own consumer brand with its own visual identity, and
   shares no assets, palette, or typography with any other property.
   ========================================================================= */

:root {
  /* Core hexes sampled from the proven sibling funnel palette so the two
     properties read as one brand family. White + blue deliberately: every
     converting reference we have is cool-toned, blue is the trust default in
     financial services, and red at scale reads as alarm against a
     "no obligation" message. */
  --ink:        #0A1628;
  --ink-deep:   #060F1C;
  --brand:      #2563EB;
  --brand-deep: #1D4ED8;
  --brand-soft: #E8F0FC;
  --brand-mid:  #6BA3E8;
  --mint:       #00B583;
  --warn:       #E8A33D;   /* ineligibility notice only, never a rating */
  --line:       #E3E8EF;
  --line-soft:  #EDF1F6;
  --bg:         #FFFFFF;
  --bg-soft:    #F5F8FD;
  --text-2:     #56657A;
  --text-3:     #8695AB;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
a { color: var(--brand); }
img { max-width: 100%; }

/* ===== Progress bar ===== */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 5px;
  background: var(--line-soft); z-index: 100; overflow: hidden;
}
.progress-fill {
  position: relative; height: 100%; width: 11.1%;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
  transition: width 0.55s var(--ease);
  overflow: hidden;
}
.progress-fill::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(300%); } }

/* ===== Header ===== */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 40px; max-width: 1180px; margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 26px; height: 26px; color: var(--brand); flex: 0 0 auto; }
.brand .mark svg { width: 100%; height: 100%; display: block; }
.brand .word {
  font-size: 18px; font-weight: 800; letter-spacing: -0.035em; white-space: nowrap;
}
.brand .word em { font-style: normal; color: var(--brand); }
.nav .trust { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.nav .trust .label { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.nav .trust .sublabel { font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: 0.01em; }

/* ===== Quiz canvas ===== */
.quiz { max-width: 1060px; margin: 0 auto; padding: 18px 24px 110px; }
.quiz-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; }

/* ===== Step action row =====
   Back and Continue sit together at the foot of the step, in reading order and
   within thumb reach, instead of Back floating alone at the top of the page.
   The engine builds this row for every step, so no funnel markup declares it. */
.actions { display: flex; align-items: stretch; gap: 12px; margin-top: 18px; }
.actions .continue { margin-top: 0; flex: 1 1 auto; }
.actions-center { justify-content: center; }
.actions-center .continue { flex: 0 1 400px; }
.btn-back {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 22px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; font-size: 15px; font-weight: 700; color: var(--text-2);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.btn-back:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--text-3); }
/* Auto-advance steps have no Continue, so Back is alone and shouldn't stretch. */
.actions:not(:has(.continue)) { justify-content: flex-start; }
@media (max-width: 768px) {
  .actions .continue { width: auto; }
  .btn-back { padding: 17px 18px; }
}

.steps { position: relative; }
.step { display: none; }
.step[data-active] { display: block; animation: stepIn 0.36s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }

/* ===== Hero (step 1 only) ===== */
.hero { margin-bottom: 34px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 16px;
}
.hero-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 3px rgba(0,181,131,0.20);
}
.hero h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 800;
  letter-spacing: -0.038em; line-height: 1.07; margin-bottom: 16px; max-width: 640px;
}
.hero h1 .accent { color: var(--brand); }
.hero .hero-sub {
  font-size: 17px; line-height: 1.55; color: var(--text-2);
  max-width: 560px; margin-bottom: 20px;
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; }
.pills li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink);
}
.pills li::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ===== Question chrome ===== */
.question {
  font-size: clamp(27px, 3.4vw, 38px); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.034em; margin-bottom: 12px; max-width: 640px;
}
.sub { font-size: 16.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 32px; max-width: 540px; }

/* ===== Option cards ===== */
.option-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.card {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 17px 20px; font-size: 16px; font-weight: 600; color: var(--ink);
  text-align: left; width: 100%; transition: all 0.22s var(--ease);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.card:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.card[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.card::after { content: '→'; color: var(--text-3); font-weight: 400; transition: all 0.22s var(--ease); }
.card:hover::after { color: var(--brand); transform: translateX(3px); }
.card[aria-pressed="true"]::after { content: '✓'; color: var(--brand); font-weight: 800; }

.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card-lg {
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 26px 22px; text-align: left; transition: all 0.22s var(--ease);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 168px;
}
.card-lg:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10,22,40,0.08); }
.card-lg[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.card-lg .icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--ink);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: all 0.22s var(--ease);
}
.card-lg .icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.card-lg[aria-pressed="true"] .icon { background: var(--brand); }
.card-lg .title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.card-lg .desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.option-grid.three { grid-template-columns: repeat(3, 1fr); }
.option-grid.three .card-lg { min-height: 150px; padding: 22px 18px; }
.option-grid.three .card-lg .title { font-size: 17px; }

/* ===== Multi-select ===== */
/* A checkbox affordance, present before any tap, is what tells someone they
   may pick more than one. Without it people choose once and hunt for
   auto-advance that never comes. */
[data-choice-multi] .card-lg { position: relative; padding-right: 52px; }
[data-choice-multi] .card-lg::after {
  content: ''; position: absolute; top: 20px; right: 20px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--line); background: #fff;
  transition: all 0.18s var(--ease);
}
[data-choice-multi] .card-lg[aria-pressed="true"]::after {
  background: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}
.pick-hint {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border-radius: 999px; padding: 5px 12px; margin-bottom: 18px;
}

/* ===== Sliders ===== */
.slider-block { padding-top: 18px; }
.slider-value {
  font-size: clamp(38px, 6vw, 64px); font-weight: 800;
  letter-spacing: -0.045em; margin-bottom: 28px;
  font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease);
}
.slider-value.ineligible { color: var(--text-3); }
.slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; outline: none; margin-bottom: 14px;
  background: linear-gradient(to right, var(--brand) 0%, var(--brand) var(--fill, 50%), var(--line) var(--fill, 50%), var(--line) 100%);
}
.slider.locked { opacity: 0.55; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; }
.slider::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(10,22,40,0.26);
  cursor: grab; margin-top: -11px; transition: transform 0.15s var(--ease);
}
.slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brand-soft), 0 4px 12px rgba(10,22,40,0.26); }
.slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink);
  border: 3px solid #fff; box-shadow: 0 4px 12px rgba(10,22,40,0.26); cursor: grab;
}
.slider-marks {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--text-3); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 28px;
}
.notice {
  background: #FFF6E6; border-left: 3px solid var(--warn); border-radius: 8px;
  padding: 13px 16px; font-size: 14px; line-height: 1.55; color: var(--ink);
  margin: 14px 0; opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.notice.show { opacity: 1; transform: none; }
.notice strong { font-weight: 700; }

/* ===== Inputs ===== */
.input-row { display: flex; gap: 14px; margin-bottom: 18px; }
.input-row > .input-field { flex: 1; margin-bottom: 0; }
.input-field { margin-bottom: 18px; }
.input-field label {
  display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-2); margin-bottom: 8px;
}
.input-field input {
  width: 100%; padding: 16px 18px; font-size: 17px; font-weight: 500;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  color: var(--ink); transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease); outline: none;
}
.input-field input::placeholder { color: var(--text-3); font-weight: 400; }
.input-field input:hover { border-color: var(--text-3); }
.input-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.input-field.error input { border-color: #D64545; }
.input-field.error input:focus { box-shadow: 0 0 0 4px rgba(214,69,69,0.14); }
.input-field .help { font-size: 13px; color: var(--text-2); margin-top: 7px; min-height: 18px; }
.input-field.error .help { color: #B62B2B; }

/* ===== Continue ===== */
.continue {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 36px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 700; transition: all 0.3s var(--ease); margin-top: 12px;
}
.continue:hover:not(:disabled) { background: var(--ink-deep); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,22,40,0.26); animation: none; }
.continue:disabled { opacity: 0.34; cursor: not-allowed; animation: none; }
.continue:not(:disabled) { animation: cta-glow 3.2s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  50%      { box-shadow: 0 0 0 7px rgba(37,99,235,0.22); }
}
.continue .arrow { display: inline-block; transition: transform 0.22s var(--ease); }
.continue:hover:not(:disabled) .arrow { transform: translateX(4px); }

/* ===== Trust rows ===== */
.trust-block { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.trust-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.trust-row svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trust-row strong { color: var(--ink); font-weight: 700; }

/* ===== OTP ===== */
.otp-step { text-align: center; }
.otp-step .question, .otp-step .sub { margin-left: auto; margin-right: auto; }
.otp-sent { font-size: 15px; color: var(--text-2); margin-bottom: 24px; }
.otp-sent strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.otp-step .input-field { max-width: 400px; margin: 0 auto 6px; }
.otp-input {
  font-size: 26px; letter-spacing: 0.45em; text-indent: 0.45em; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.otp-input::placeholder { letter-spacing: 0.45em; font-size: 20px; }
.otp-resend { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.otp-change { margin-bottom: 24px; }
.link-btn {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--brand); font-weight: 700; text-decoration: underline;
}
.link-btn:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.otp-verify { width: 100%; max-width: 400px; }
.otp-trust { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-top: 16px; }
.otp-trust svg { width: 15px; height: 15px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.consent { font-size: 11.5px; color: var(--text-3); max-width: 500px; margin: 14px auto 0; line-height: 1.6; }
.consent a { color: var(--text-2); text-decoration: underline; }

/* ===== Below-fold sections (step 1 only) ===== */
.how, .why, .faq, .photo-band { padding: 52px 0; border-top: 1px solid var(--line); display: none; }
body[data-step="1"] .how, body[data-step="1"] .why,
body[data-step="1"] .faq, body[data-step="1"] .photo-band {
  display: block; animation: fadeUp 0.4s var(--ease);
}

/* ===== Photo band ===== */
.photo-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 18px; padding-bottom: 28px;
}
.photo-row figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--bg-soft); }
.photo-row img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 28%;
}
.photo-row figure:nth-child(even) { transform: translateY(24px); }
/* A lone photo reads as a feature, not an orphaned portrait. */
.photo-row figure:only-child { transform: none; }
.photo-row figure:only-child img { aspect-ratio: 16 / 9; object-position: 50% 34%; }

/* Brand mark is composited here in CSS, never baked into the photograph:
   the image stays reusable and the wordmark stays crisp at any size. */
.photo-row figure:first-child::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,22,40,0.88) 0%, rgba(10,22,40,0.28) 38%, rgba(10,22,40,0) 68%);
}
.ph-brand {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 8px; color: #fff; pointer-events: none;
}
.ph-brand .mark { width: 19px; height: 19px; flex: 0 0 auto; }
.ph-brand .mark svg { width: 100%; height: 100%; display: block; }
.ph-brand .word { font-size: 14px; font-weight: 800; letter-spacing: -0.035em; }
.ph-brand .word em { font-style: normal; color: #8FBEFF; }

@media (max-width: 768px) {
  .photo-row { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 18px; }
  .photo-row figure { border-radius: 12px; }
  .photo-row figure:nth-child(even) { transform: translateY(14px); }
  .photo-row figure:only-child { grid-column: 1 / -1; }
  /* A third photo would otherwise sit alone in a half-width column. */
  .photo-row figure:nth-child(3):last-child { grid-column: 1 / -1; transform: none; }
  .photo-row figure:nth-child(3):last-child img { aspect-ratio: 16 / 9; object-position: 50% 34%; }
}

/* Home path-card thumbnails */
.path .thumb { display: block; border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.path .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.how { margin-top: 56px; }
.sec-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 14px;
}
.sec-h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.034em; line-height: 1.1; margin-bottom: 36px; max-width: 620px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.how-step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft);
  color: var(--brand); font-weight: 800; font-size: 17px; margin-bottom: 16px;
}
.how-step h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 7px; }
.how-step p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 44px; }
.why-card .icon { width: 30px; height: 30px; color: var(--brand); margin-bottom: 13px; }
.why-card .icon svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.why-card p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ===== FAQ / disclosure accordions ===== */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 19px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 23px; font-weight: 400; color: var(--text-3); transition: transform 0.28s var(--ease); line-height: 1; }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--brand); }
.faq-answer { padding: 0 0 21px; font-size: 15px; line-height: 1.65; color: var(--text-2); }

.step-help { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); overflow: hidden; }
.step-help summary {
  list-style: none; cursor: pointer; padding: 13px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.step-help summary::-webkit-details-marker { display: none; }
.step-help summary .label-l { display: inline-flex; align-items: center; gap: 10px; }
.step-help summary .icon-i {
  width: 21px; height: 21px; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}
.step-help summary::after { content: '+'; font-size: 19px; color: var(--text-3); transition: transform 0.28s var(--ease); line-height: 1; }
.step-help[open] summary::after { transform: rotate(45deg); color: var(--brand); }
.step-help-body { padding: 0 16px 16px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.step-help-body p { margin: 0 0 8px; }
.step-help-body p:last-child { margin: 0; }
.bullets { list-style: none; margin: 12px 0; display: flex; flex-direction: column; gap: 9px; }
.bullets li { padding-left: 16px; position: relative; font-size: 14px; line-height: 1.55; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.bullets li strong { color: var(--ink); font-weight: 700; }

/* ===== Thank you ===== */
.ty { text-align: center; padding: 64px 0 0; }
.ty-check {
  width: 74px; height: 74px; border-radius: 50%; background: var(--mint);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 28px;
  color: #fff; font-size: 36px; font-weight: 800; animation: pop 0.55s var(--ease);
}
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
.ty h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.036em; line-height: 1.08; margin-bottom: 14px; }
.ty-body { font-size: 17.5px; color: var(--text-2); line-height: 1.6; max-width: 480px; margin: 0 auto 8px; }
.ty-body strong { color: var(--ink); font-weight: 700; }
.ty-section { text-align: left; max-width: 600px; margin: 48px auto 0; }
.ty-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.ty-steps { display: flex; flex-direction: column; gap: 11px; }
.ty-step { display: flex; align-items: flex-start; gap: 15px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 13px; padding: 17px 18px; }
.ty-step .num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin-top: 1px;
}
.ty-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ty-step p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.ty-tips { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ty-tips li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ty-tips li::before {
  content: '✓'; flex: 0 0 21px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 3px;
}
.ty-tips li strong { color: var(--ink); font-weight: 700; }
.ty-faq { display: flex; flex-direction: column; gap: 9px; }
.ty-faq .step-help { margin: 0; }
.ty-foot { font-size: 12.5px; color: var(--text-3); margin: 44px 0 0; }

/* ===== Footer ===== */
.foot { border-top: 1px solid var(--line); background: var(--bg-soft); }
.foot-inner { max-width: 1060px; margin: 0 auto; padding: 34px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 600; }
.foot-links a { color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: var(--brand); text-decoration: underline; }
.foot-legal { font-size: 12px; line-height: 1.65; color: var(--text-3); max-width: 760px; }
.foot-legal strong { color: var(--text-2); font-weight: 700; }

/* ===== Content pages (privacy / terms) ===== */
.page { max-width: 760px; margin: 0 auto; padding: 44px 24px 80px; }
.page h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 10px; }
.page .updated { font-size: 13.5px; color: var(--text-3); margin-bottom: 34px; }
.page h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin: 34px 0 10px; }
.page p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 13px; }
.page ul { margin: 0 0 13px 20px; }
.page li { font-size: 15.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 7px; }
.page strong { color: var(--ink); font-weight: 700; }

/* ===== Legal "short version" summary ===== */
.legal-summary {
  background: var(--brand-soft); border: 1px solid #CFE0FA; border-radius: 16px;
  padding: 22px 24px; margin: 0 0 34px;
}
.legal-summary .ls-h {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 12px;
}
.legal-summary ul { margin: 0; padding-left: 18px; }
.legal-summary li { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin-bottom: 8px; }
.legal-summary li:last-child { margin-bottom: 0; }
.legal-summary strong { font-weight: 700; }
.page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .nav { padding: 16px 20px; }
  .nav .trust { display: none; }
  .quiz { padding: 12px 20px 90px; }
  .how-grid { grid-template-columns: 1fr; gap: 22px; }
  .why-grid { grid-template-columns: 1fr; gap: 22px; }
  .option-grid { grid-template-columns: 1fr; }
  .option-grid.three { grid-template-columns: 1fr; }
  .option-grid.three .card-lg { min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
  .option-grid.three .card-lg .icon { flex: 0 0 42px; }
  .card-lg { min-height: 0; padding: 20px 18px; }
  .input-row { flex-direction: column; gap: 0; }
  .continue { width: 100%; }
  .ty { padding-top: 44px; }
  .ty-section { margin-top: 36px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  .hero .hero-sub { font-size: 15.5px; }
  .pills li { font-size: 12px; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}