/* =========================================================================
   TEGO design system · v5 "Brick" — official brand palette
   Light, type-led insurtech. Navy-purple ink on white/lavender-white surfaces,
   vivid purple for actions and headings, periwinkle for rules/borders/bullets,
   lilac for sub-labels, brick yellow reserved for "best price". Bricolage
   Grotesque for display, Geist for body and data. Mobile-first, no build.
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink: #1a1440;
  --ink-2: #241a5c;
  --ink-3: #33268a;
  --brand: #7b39ec;
  --brand-hover: #6528cc;
  --brand-soft: #ede9ff;
  --brand-tint: #f5f3ff;
  --periwinkle: #938eff; /* brand accent: rule lines, borders, bullets, markers */
  --lilac: #c084fc; /* secondary accent: sub-labels and tertiary callouts */
  --lime: #ffd83d; /* highlight: brick yellow, reserved for "best price" */
  --lime-ink: #2b1d00;
  --bg: #faf9ff;
  --surface: #ffffff;
  --mist: #f0edfb;
  --muted: #635a8a;
  --muted-2: #9d8ec4;
  --border: #e6e1f7;
  --border-strong: #cdc4ee;
  --ok: #0e7a50;
  --error: #c2372b;
  --error-bg: #fbeeec;
  --warn-bg: #fff6e0;
  --warn-border: #f0d48a;

  --shadow-sm: 0 1px 2px rgba(26, 20, 64, 0.06), 0 1px 1px rgba(26, 20, 64, 0.03);
  --shadow-md: 0 2px 6px rgba(26, 20, 64, 0.05), 0 14px 36px rgba(26, 20, 64, 0.09);
  --shadow-lg: 0 6px 12px rgba(26, 20, 64, 0.06), 0 32px 80px rgba(26, 20, 64, 0.16);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --accent: var(--brand);
  --accent-ink: #fff;
}

/* ---- Reset --------------------------------------------------------------*/
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}

::selection { background: var(--lime); color: var(--lime-ink); }

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.45em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variation-settings: "opsz" 48;
}

p { margin: 0 0 1em; }
a { color: inherit; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: none; border-top: 1px solid var(--periwinkle); margin: 2rem 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.tnum { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Layout -------------------------------------------------------------*/
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

section { padding-block: clamp(3rem, 8vw, 6.5rem); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.muted { color: var(--muted); }
.text-ok { color: var(--ok); }
.text-lilac { color: var(--lilac); }
.text-periwinkle { color: var(--periwinkle); }
.center { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--periwinkle);
  transform: rotate(45deg);
}

.section-lede {
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 40px;
  font-size: 1.08rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* section headers: title left, lede right on desktop */
.section-head {
  display: grid;
  gap: 12px 48px;
  align-items: end;
  margin-bottom: clamp(28px, 5vw, 52px);
}

@media (min-width: 860px) {
  .section-head { grid-template-columns: 1.1fr 0.9fr; }
  .section-head .section-lede { margin-bottom: 0.4em; }
}

.section-head h2 { margin-bottom: 0; }

/* ---- Watermark (persistent "not a real quote" bar) -----------------------*/
.watermark {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  text-transform: uppercase;
}

/* ---- Site nav -------------------------------------------------------------*/
/* The injected header lives inside #nav; the wrapper is what sticks, since a
   sticky element can only stick within its parent's box. */
#nav { position: sticky; top: 0; z-index: 40; }
.watermark + #nav { top: 26px; }

.site-nav {
  background: rgba(250, 249, 255, 0.84);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(26, 20, 64, 0.07);
}

.site-nav .nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--nav-h);
  padding-block: 10px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-variation-settings: "opsz" 96;
}

.wordmark .mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.wordmark img.logo {
  height: 34px;
  width: auto;
  display: block;
}

.site-footer .wordmark img.logo { height: 40px; }

.site-nav .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 4px;
  margin-inline-start: auto;
}

.site-nav .nav-links a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.site-nav .nav-links a:hover { color: var(--ink); background: rgba(26, 20, 64, 0.05); }

.site-nav .nav-links a.active { color: var(--ink); background: rgba(26, 20, 64, 0.07); }

.site-nav .nav-links .soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-2);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 7px 12px;
  cursor: default;
  pointer-events: none;
}

.site-nav .nav-links .soon .pill {
  background: rgba(26, 20, 64, 0.06);
  color: var(--muted-2);
  padding: 2px 7px;
  font-size: 0.62rem;
}

.site-nav .nav-cta { margin-inline-start: 12px; }

@media (max-width: 639px) {
  .site-nav .nav-cta { margin-inline-start: auto; order: 2; }
  .site-nav .nav-cta .btn { padding: 9px 16px; font-size: 0.88rem; }
  .site-nav .nav-links {
    order: 3;
    margin-inline-start: -10px;
    width: calc(100% + 10px);
    justify-content: flex-start;
    gap: 2px;
  }
  .site-nav .nav-links .soon { display: none; }
}

/* ---- Footer ---------------------------------------------------------------*/
.site-footer {
  margin-top: clamp(40px, 8vw, 96px);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding-block: clamp(40px, 6vw, 64px) 32px;
}

.site-footer .footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .site-footer .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

.site-footer .wordmark { color: #fff; }

.site-footer .footer-tag {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.site-footer .footer-links a,
.site-footer .footer-links span {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 0;
}

.site-footer .footer-links a:hover { color: #fff; }
.site-footer .footer-links span { color: rgba(255, 255, 255, 0.38); }

.site-footer .footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.site-footer .disclaimer { margin: 0; max-width: 70ch; }
.site-footer .copyright { margin: 0; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.14s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.btn:active { transform: translateY(1px) scale(0.99); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 20, 64, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-primary:hover {
  background: var(--brand-hover);
  box-shadow: 0 8px 22px rgba(123, 57, 236, 0.3);
  transform: translateY(-1px);
}

.btn .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -8px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-spring);
}

.btn:hover .btn-arrow { transform: translateX(3px); }

.btn .btn-arrow svg { width: 12px; height: 12px; stroke: var(--lime-ink); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn-secondary:hover { border-color: var(--ink); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--muted); padding-inline: 10px; }
.btn-ghost:hover { color: var(--ink); background: rgba(26, 20, 64, 0.05); }

.btn-lg { padding: 15px 26px; font-size: 1.02rem; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); transform: translateY(-1px); }

/* ---- Pills / badges ------------------------------------------------------*/
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(26, 20, 64, 0.06);
  color: var(--muted);
  white-space: nowrap;
}

.pill-ok { background: rgba(14, 122, 80, 0.12); color: var(--ok); }
.pill-accent { background: var(--brand-soft); color: var(--brand); }
.pill-lime { background: var(--lime); color: var(--lime-ink); }

.badge-best {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--lime);
  color: var(--lime-ink);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Cards --------------------------------------------------------------*/
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.card-tight { padding: 16px 18px; }

.card-hover {
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}

.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* ---- Forms ---------------------------------------------------------------*/
.field { display: block; margin-bottom: 20px; }

.field label,
label.field-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.field .hint { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 6px; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--muted-2); }

input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23635a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-position: calc(100% - 14px) center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
}

textarea { resize: vertical; min-height: 96px; }

input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(123, 57, 236, 0.12);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error); background: var(--error-bg); }

.field-error { display: block; font-size: 0.82rem; color: var(--error); margin-top: 6px; }
.field-error:empty { display: none; }

/* input with a unit prefix, e.g. "Rs" */
.input-affix { position: relative; }
.input-affix .affix {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  pointer-events: none;
}
.input-affix input { padding-left: 44px; }
.input-affix .affix-end { left: auto; right: 15px; }
.input-affix.affix-right input { padding-left: 15px; padding-right: 52px; }

.checkbox-row { display: flex; align-items: flex-start; gap: 12px; }

.checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--brand);
  border-radius: 6px;
}

.checkbox-row label { font-size: 0.9rem; color: var(--ink); font-weight: 400; margin: 0; }

/* ---- Choice cards (radio-style selections) --------------------------------*/
.choice-group { display: grid; gap: 10px; }

@media (min-width: 640px) {
  .choice-group { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.choice {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  padding-right: 50px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
    transform 0.15s var(--ease), background-color 0.15s var(--ease);
}

.choice:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.choice input[type="radio"],
.choice input[type="checkbox"] {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 16px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
  pointer-events: none;
}

.choice::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.2s var(--ease-spring);
  pointer-events: none;
}

.choice:has(input:checked)::before { border-color: var(--brand); background: var(--brand); }
.choice:has(input:checked)::after { transform: scale(1); }
.choice:has(input:focus-visible)::before { box-shadow: 0 0 0 4px rgba(123, 57, 236, 0.18); }

.choice .choice-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 3px;
  display: block;
  letter-spacing: -0.01em;
}

.choice .choice-desc { font-size: 0.86rem; color: var(--muted); margin: 0; line-height: 1.45; }

.choice.selected,
.choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 3px rgba(123, 57, 236, 0.1);
}

/* ---- Segmented control (compact radios: Private/Commercial, Yes/No) ------*/
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
  background: var(--mist);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.segmented label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.segmented label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(26, 20, 64, 0.12);
}

.segmented label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(123, 57, 236, 0.2); }

/* ---- Progress bar (funnel step indicator) ---------------------------------*/
.progress {
  width: 100%;
  height: 4px;
  background: rgba(26, 20, 64, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 8px;
}

.progress-steps .done { color: var(--ink); font-weight: 600; }

/* ---- Tick / cross benefit markers -----------------------------------------*/
.tick, .cross {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}

.tick::before, .cross::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.tick::before {
  background-color: var(--brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237b39ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4'/%3E%3C/svg%3E");
}

.cross::before {
  background-color: rgba(99, 90, 138, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239d8ec4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}

.cross { color: var(--muted-2); }

/* ---- Offer row (results + saved quote) ------------------------------------
   A ranked "leaderboard" row. On wide screens it is a single horizontal line:
   rank · insurer · benefits · price · action. On phones it stacks. */
.offer {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}

.offer:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.offer.is-best {
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-tint), var(--surface) 60%);
  box-shadow: 0 0 0 4px rgba(123, 57, 236, 0.08);
}

@media (min-width: 900px) {
  .offer {
    grid-template-columns: 40px minmax(130px, 1fr) minmax(170px, 1.2fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
  }
}

.offer > * { min-width: 0; }

.offer-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--muted-2);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mist);
}

.offer.is-best .offer-rank { background: var(--brand); color: #fff; }

.offer-header { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.offer-insurer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "opsz" 48;
}

.offer-meta { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.offer-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .offer-price { flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
}

.offer-price .amount {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.offer-price .period { font-size: 0.82rem; color: var(--muted); }

.offer-savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
}

@media (min-width: 900px) { .offer-price .offer-savings { align-self: flex-end; } }

.offer-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin: 0;
}

.offer-details dt { color: var(--muted); }
.offer-details dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.offer-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
@media (min-width: 900px) { .offer-actions { align-items: center; min-width: 110px; } .offer-actions .btn { padding-inline: 20px; } }

/* ---- Skeleton loaders ------------------------------------------------------*/
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(26, 20, 64, 0.07);
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: tego-shimmer 1.4s infinite;
}

@keyframes tego-shimmer { to { transform: translateX(100%); } }

/* ---- Notices ---------------------------------------------------------------*/
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.86rem;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.5;
}

.notice::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: #e3a92b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 4.5v4M8 11.5v.1'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---- Page header (funnel / results / checkout) ----------------------------*/
.page-head { margin-bottom: clamp(22px, 4vw, 36px); }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 0.3em; }
.page-head p { color: var(--muted); margin: 0; font-size: 1.02rem; }

/* ---- Reveal on scroll (progressive; works without JS) --------------------*/
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- Utilities ------------------------------------------------------------*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   UI/UX polish pass — new components.
   Same tokens, same brand. Everything here is hierarchy and flow.
   ========================================================================= */

/* ---- Live estimate band (funnel) -----------------------------------------
   The funnel used to ask five screens of questions and show nothing until
   the end. This band gives a real range from step 2, computed by the actual
   rating engine over the answers so far, and narrows it as answers land. */
.estimate-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 4vw, 36px);
  background: var(--mist);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.4s var(--ease);
}

.estimate-band.is-live {
  background: linear-gradient(90deg, var(--brand-tint), var(--surface));
}

.estimate-band .eb-main { display: flex; align-items: center; gap: 14px; min-width: 0; }

.estimate-band .eb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted-2);
  transition: background-color 0.3s var(--ease);
}

.estimate-band.is-live .eb-dot { background: var(--ok); }

.estimate-band .eb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.estimate-band .eb-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.estimate-band .eb-value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}

.estimate-band.is-live .eb-value { color: var(--ink); }

.estimate-band .eb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.estimate-band .eb-note { font-size: 0.78rem; color: var(--muted); text-align: right; }
.estimate-band .eb-dots { display: flex; gap: 4px; }

.estimate-band .eb-dots span {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.3s var(--ease);
}

.estimate-band .eb-dots span.on { background: var(--brand); }

@media (max-width: 639px) {
  .estimate-band { padding: 11px 18px; gap: 11px; }
  .estimate-band .eb-note { display: none; }
  .estimate-band .eb-dots span { width: 14px; }
}

/* ---- Sum-insured value chips ---------------------------------------------
   A six-digit number is the slowest field to type on a phone. */
.value-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.value-chips button {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 13px;
  min-height: 34px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.value-chips button:hover { border-color: var(--ink); color: var(--ink); }

.value-chips button.is-active {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
}

@media (max-width: 639px) {
  .value-chips button { min-height: 44px; padding: 10px 15px; font-size: 0.84rem; }
}

/* ---- Discount callout (no-claim years) -----------------------------------
   The largest single lever in the form, shown in rupees rather than
   explained in a hint. */
.discount-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 13px;
  background: rgba(14, 122, 80, 0.09);
  border-radius: var(--radius);
  font-size: 0.86rem;
  color: var(--ok);
  font-weight: 600;
  line-height: 1.4;
}

.discount-note svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; }
.discount-note[hidden] { display: none; }

/* ---- Rail stepper (funnel sidebar) ---------------------------------------
   Was decorative. Completed steps now show the answer given and jump back
   when clicked, so a typo does not mean restarting. */
.rail-steps { display: flex; flex-direction: column; gap: 2px; margin: 0 0 24px; }

.rail-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  cursor: default;
  transition: background-color 0.18s var(--ease);
}

.rail-step .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--mist);
  color: var(--muted-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.rail-step .dot svg { width: 12px; height: 12px; stroke: currentColor; }

.rail-step .rail-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.rail-step .rail-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}

.rail-step .rail-answer {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-step .rail-answer:empty { display: none; }

.rail-step .rail-edit {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.rail-step.is-active { background: var(--brand-tint); }
.rail-step.is-active .dot { background: var(--brand); color: #fff; }
.rail-step.is-active .rail-title { color: var(--ink); font-weight: 600; }

.rail-step.is-done { cursor: pointer; }
.rail-step.is-done .dot { background: var(--brand); color: #fff; }
.rail-step.is-done .rail-title { color: var(--ink); }
.rail-step.is-done:hover { background: rgba(26, 20, 64, 0.04); }
.rail-step.is-done:hover .rail-edit,
.rail-step.is-done:focus-visible .rail-edit { opacity: 1; }

/* ---- Savings banner (results) --------------------------------------------
   Was 0.78rem of green text inside each row. It is the reason the product
   exists, so it leads the page, in the one colour reserved for best price. */
.savings-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--lime);
  border-radius: var(--radius-lg);
  padding: 18px clamp(18px, 3vw, 26px);
  margin-bottom: 22px;
}

.savings-banner[hidden] { display: none; }

.savings-banner .sb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(43, 29, 0, 0.14);
  flex-shrink: 0;
}

.savings-banner .sb-icon svg { width: 20px; height: 20px; stroke: var(--lime-ink); }

.savings-banner .sb-body { flex: 1; min-width: 0; }

.savings-banner .sb-head {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--lime-ink);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.savings-banner .sb-sub { margin: 2px 0 0; font-size: 0.9rem; color: rgba(43, 29, 0, 0.72); }

.savings-banner .sb-aside {
  font-size: 0.82rem;
  color: rgba(43, 29, 0, 0.62);
  text-align: right;
  max-width: 22ch;
  flex-shrink: 0;
}

@media (max-width: 859px) {
  .savings-banner { gap: 13px; padding: 14px 16px; }
  .savings-banner .sb-icon { width: 34px; height: 34px; border-radius: 10px; }
  .savings-banner .sb-icon svg { width: 18px; height: 18px; }
  .savings-banner .sb-aside { display: none; }
}

/* ---- Results toolbar (cover + sort) --------------------------------------
   The cover switch used to live in the sidebar, which stacks below all five
   offers on a phone, invisible without scrolling past what it controls. */
.results-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 14px;
}

/* Cover, Sort and View come to ~990px of controls, more than the offers
   column has beside the sticky sidebar. Rather than let a divider orphan
   itself at the end of a row, the groups wrap on purpose and the uppercase
   labels carry the separation the dividers used to. */
.results-toolbar .tb-scroll {
  display: flex;
  align-items: center;
  column-gap: 22px;
  row-gap: 11px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

@media (min-width: 860px) {
  .results-toolbar .tb-divider { display: none; }
}

.results-toolbar .tb-set { display: flex; align-items: center; gap: 10px; }

.results-toolbar .tb-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  flex-shrink: 0;
}

.results-toolbar .tb-divider { width: 1px; height: 24px; background: var(--border); }

/* The View switch keeps a fixed slot at the right rather than joining the
   scrolling strip, so it is on screen at every width. Its buttons carry an
   icon and a word; the word drops out on a phone, where the pair reads as
   the familiar list/grid switcher. */
.results-toolbar .tb-view {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.tb-group button .tb-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

#view-group button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#view-group button.is-active .tb-icon { fill: var(--brand); }

.results-toolbar .tb-count {
  margin-inline-start: auto;
  font-size: 0.84rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tb-group {
  display: inline-flex;
  background: var(--mist);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.tb-group button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.tb-group button:hover { color: var(--ink); }

.tb-group button.is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(26, 20, 64, 0.12);
}

/* Between the sidebar appearing at 980px and about 1180px the offers column
   is only ~566px, and a labelled View switch pushes the toolbar to a third
   row. Icons alone read fine as a list/grid switcher. */
@media (max-width: 1179px) {
  .results-toolbar .tb-view .tb-label,
  #view-group .tb-btn-text { display: none; }
  #view-group button { padding-inline: 11px; }
  .tb-group button .tb-icon { width: 16px; height: 16px; }
}

@media (max-width: 859px) {
  .results-toolbar {
    position: sticky;
    top: calc(var(--nav-h) + 26px);
    z-index: 30;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--radius);
  }

  .results-toolbar .tb-divider,
  .results-toolbar .tb-count { display: none; }

  .results-toolbar .tb-view { gap: 0; margin-inline-start: 0; }

  /* Only where a scrolling strip actually sits to its left: the rule marks
     where that strip ends, and the mask fades the pill it cuts through so
     the clipping reads as "there is more to the right", not broken text.
     The saved-quote toolbar has no strip, and would get a leading rule with
     nothing before it. */
  .results-toolbar .tb-scroll + .tb-view {
    padding-inline-start: 9px;
    border-inline-start: 1px solid var(--border);
  }

  .results-toolbar .tb-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }

  .results-toolbar .tb-scroll {
    gap: 7px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .results-toolbar .tb-set { gap: 7px; flex-shrink: 0; }

  .results-toolbar .tb-scroll::-webkit-scrollbar { display: none; }

  .tb-group { background: transparent; padding: 0; gap: 7px; }

  .tb-group button {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    min-height: 40px;
    flex-shrink: 0;
  }

  .tb-group button.is-active {
    border-color: var(--brand);
    background: var(--brand-tint);
    color: var(--brand);
    box-shadow: none;
  }
}

/* ---- Offer perk chips ----------------------------------------------------
   Four ticks and crosses per row across five rows is twenty icons competing
   with five prices. Each row now lists only what that insurer includes. */
.offer-perks { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }

.offer-perks .perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--mist);
  border-radius: 999px;
  padding: 4px 10px;
}

.offer-perks .perk svg { width: 11px; height: 11px; flex-shrink: 0; stroke: var(--brand); }

.offer-perks .perk-missing {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted-2);
  padding: 4px 2px;
}

/* ---- Columns view (insurer per column) -----------------------------------
   The list ranks; this compares. A real table so the row/column relationship
   survives a screen reader, wrapped in a horizontal scroller so five
   insurers still work at 375px with the label column pinned to the left. */
.cmp { position: relative; margin-bottom: 14px; }
.cmp[hidden] { display: none; }

.cmp-scroll {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  /* A snapped column would otherwise land underneath the pinned labels. */
  scroll-padding-left: 96px;
  scroll-snap-type: x proximity;
  /* A pointer user gets a real scrollbar; the default grey slab sat badly
     inside the rounded card, so it is slimmed to a pill on a clear track. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.cmp-scroll::-webkit-scrollbar { height: 10px; }
.cmp-scroll::-webkit-scrollbar-track { background: transparent; }

.cmp-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid var(--surface);
}

.cmp-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

.cmp-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  /* 108px labels + 128px per insurer. Set in JS, which knows the count. */
}

.cmp-table th,
.cmp-table td {
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Pinned label column. Opaque so scrolled figures pass behind it. */
.cmp-table .cmp-corner,
.cmp-table .cmp-rowhead {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 96px;
  text-align: left;
  background: var(--surface);
  color: var(--muted);
  font-weight: 400;
  font-size: 0.84rem;
  padding-left: 14px;
}

/* Only once there is something hidden behind it, so the divider does not
   sit there implying a scroll that cannot happen. */
.cmp-scroll.is-scrolled .cmp-corner,
.cmp-scroll.is-scrolled .cmp-rowhead {
  box-shadow: 10px 0 10px -10px rgba(26, 20, 64, 0.28);
}

/* ---- header row ----
   A fixed box, so the rank sits at the same height whether the insurer name
   runs to one line or two, and every name clears the same badge row. */
.cmp-table thead th {
  scroll-snap-align: start;
  vertical-align: top;
  height: 132px;
  padding-top: 18px;
  padding-bottom: 14px;
}

.cmp-head-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
}

.cmp-name-wrap { flex: 1; display: flex; align-items: center; }

/* Holds the row open in the four columns that are not the best price. */
.cmp-badge-ghost { visibility: hidden; }

.cmp-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--mist);
  color: var(--muted-2);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
}

.cmp-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.cmp-table .is-best .cmp-rank { background: var(--brand); color: #fff; }

/* ---- body cells ---- */
.cmp-table tbody th,
.cmp-table tbody td { border-top: 1px solid var(--border); }

/* Money and cover are different kinds of fact; the rule says so. */
.cmp-table tbody tr.cmp-sep th,
.cmp-table tbody tr.cmp-sep td { border-top: 1.5px solid var(--border-strong); }

/* Scoped under .cmp-table on purpose: the blanket cell rule above sets
   font-size and font-weight, and at equal specificity it wins. Without this
   the premium renders at body size and weight, which is the one number on
   the page that must not. No nowrap either: a six-figure premium wraps
   inside its cell rather than spilling out of a fixed-layout column. */
.cmp-table .cmp-figure {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.15;
}

.cmp-figure small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted-2);
  margin-top: 3px;
}

.cmp-win { color: var(--brand); }
.cmp-table .cmp-save { color: var(--ok); font-weight: 600; }
.cmp-none { color: var(--muted-2); }

.cmp-mark { display: inline-flex; }
.cmp-mark svg { width: 17px; height: 17px; }
.cmp-yes svg { stroke: var(--brand); stroke-width: 2.6; fill: none; }
.cmp-no svg { stroke: var(--muted-2); stroke-width: 2.2; fill: none; }

/* ---- best column ---- */
.cmp-table .is-best { background: var(--brand-tint); }
.cmp-table thead th.is-best { border-radius: var(--radius) var(--radius) 0 0; }
.cmp-table tfoot td.is-best { border-radius: 0 0 var(--radius) var(--radius); }

/* ---- actions row ---- */
.cmp-table tfoot td { border-top: 1px solid var(--border); padding-top: 16px; padding-bottom: 20px; }
.cmp-table tfoot .btn { width: 100%; padding-inline: 12px; }

/* Right-edge fade: the only cue that columns four and five exist. Removed
   by JS at the end of the scroll and never drawn when nothing overflows. */
.cmp-fade {
  position: absolute;
  top: 1.5px;
  right: 1.5px;
  bottom: 1.5px;
  width: 44px;
  pointer-events: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface));
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.cmp-scroll.can-scroll-right + .cmp-fade { opacity: 1; }

.cmp-hint {
  display: none;
  margin: 9px 2px 0;
  font-size: 0.8rem;
  color: var(--muted-2);
}

.cmp-scroll.can-scroll-right ~ .cmp-hint { display: block; }

.cmp-skeleton { display: grid; gap: 12px; padding: 22px; }

@media (max-width: 639px) {
  .cmp-table th,
  .cmp-table td { padding: 10px 8px; font-size: 0.86rem; }
  .cmp-table .cmp-corner,
  .cmp-table .cmp-rowhead { padding-left: 12px; font-size: 0.8rem; }
  .cmp-table .cmp-figure { font-size: 0.96rem; }
  .cmp-table thead th { height: 118px; padding-top: 14px; padding-bottom: 12px; }
  .cmp-name { font-size: 0.92rem; }
}


/* ---- Journey rail (one progress model across all three stages) -----------
   The funnel had a progress bar, results had nothing, checkout an eyebrow. */
.flow-rail { display: flex; align-items: center; gap: 10px; }

.flow-rail .fr-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
}

.flow-rail .fr-step.is-current { font-weight: 600; color: var(--ink); }

.flow-rail .fr-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--mist);
  color: var(--muted-2);
}

.flow-rail .fr-dot svg { width: 9px; height: 9px; stroke: #fff; }
.flow-rail .fr-step.is-done .fr-dot { background: var(--brand); color: #fff; }
.flow-rail .fr-step.is-current .fr-dot { background: var(--ink); color: #fff; }
.flow-rail .fr-line { width: 28px; height: 1.5px; background: var(--border-strong); flex-shrink: 0; }
.flow-rail .fr-line.is-done { background: var(--brand); }

.site-nav .flow-rail { margin-inline: auto; }

@media (max-width: 979px) { .flow-rail { display: none; } }

/* ---- Confirmation status cards -------------------------------------------
   The confirmation used to end with one button and no sense of what is
   still outstanding. */
.status-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }

@media (min-width: 760px) {
  .status-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.status-cards .sc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.status-cards .sc-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--muted-2);
}

.status-cards .sc-state svg { width: 12px; height: 12px; stroke: currentColor; }
.status-cards .sc-state .sc-bullet { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-cards .sc-state.is-done { color: var(--ok); }
.status-cards .sc-state.is-active { color: var(--brand); }

.status-cards .sc b { display: block; font-size: 0.98rem; letter-spacing: -0.015em; margin-bottom: 3px; }
.status-cards .sc .sc-note { font-size: 0.86rem; color: var(--muted); }

/* ---- Hero proof row (landing) --------------------------------------------
   Three generic checkmarks became three facts, one of them a real price
   floor computed from the insurer rate tables. */
.hero-proof {
  display: flex;
  align-items: stretch;
  margin-top: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 560px;
}

.hero-proof .hp-item { flex: 1; padding: 14px 18px; min-width: 0; }
.hero-proof .hp-divider { width: 1px; background: var(--border); flex-shrink: 0; }

.hero-proof .hp-figure {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hero-proof .hp-label { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.hero-footnote { font-size: 0.74rem; color: var(--muted-2); margin: 8px 0 0; }

@media (max-width: 639px) {
  .hero-proof { flex-direction: column; }
  .hero-proof .hp-divider { width: auto; height: 1px; }
  .hero-proof .hp-item { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; }
  .hero-proof .hp-label { margin-top: 0; }
}

/* ---- Static insurer row --------------------------------------------------
   A scrolling strip of insurer names reads as decoration rather than proof,
   and cannot be scanned. */
.insurer-row { border-block: 1px solid var(--border); background: var(--surface); }

.insurer-row .ir-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 20px;
}

.insurer-row .ir-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

.insurer-row .ir-names { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }

.insurer-row .ir-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.insurer-row .ir-more { font-size: 0.84rem; color: var(--muted-2); padding-left: 6px; }

@media (max-width: 859px) {
  .insurer-row .ir-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .insurer-row .ir-name { font-size: 0.95rem; padding: 6px 13px; }
}

/* ---- Demo mode: the empty seat -------------------------------------------
   Shown only when an insurer has been held out on /demo. It has to read as
   one of the five and obviously not be one of them at the same time: same
   card, same column width, dashed edge, no price, nothing to click. */

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  background: var(--warn-bg);
  color: #8a5a00;
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.offer-teaser {
  border-style: dashed;
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--mist), var(--surface) 70%);
}

.offer-teaser:hover { transform: none; box-shadow: none; }
.offer-teaser .offer-insurer { color: var(--muted); }
.offer-teaser .offer-meta { color: var(--muted-2); }

.offer-rank-none {
  color: var(--muted-2);
  opacity: 0.55;
}

.offer-price .amount-none {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: -0.02em;
}

/* Columns view */
.cmp-table .cmp-teaser {
  background: var(--mist);
  color: var(--muted-2);
  border-left: 1px dashed var(--border-strong);
}

.cmp-table th.cmp-teaser .cmp-name { color: var(--muted); }

.cmp-rank-none {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--muted-2);
}

.cmp-soon {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: #8a5a00;
  letter-spacing: 0;
}