/* ==========================================================================
   Quote pages
   --------------------------------------------------------------------------
   Extends the site stylesheet rather than replacing it: colours, type, buttons
   and containers all come from styles.css. Everything here is specific to the
   quoting flow — the step rail, the traveller fieldsets, the deductible
   slider and the result rows.

   Class names are prefixed q- so they cannot collide with the existing sheet.
   ========================================================================== */

.q-wrap { max-width: 62rem; margin-inline: auto; }

/* ---------- product toggle ---------- */

.q-switch {
  display: inline-flex;
  border: 1px solid var(--line, #d9dde3);
  border-radius: 999px;
  padding: 3px;
  background: #fff;
  margin-bottom: 1.75rem;
}
.q-switch a {
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5b6572;
  white-space: nowrap;
}
.q-switch a[aria-current="page"] {
  background: var(--maroon, #73020c);
  color: #fff;
}

/* ---------- step rail ---------- */

.q-rail {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: #6b7480;
  flex-wrap: wrap;
}
.q-rail li { display: flex; align-items: center; gap: 0.4rem; }
.q-rail li + li::before { content: ""; width: 1.25rem; height: 1px; background: #cdd3da; }
.q-rail b {
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid #cdd3da; font-size: 0.75rem; font-weight: 600;
}
.q-rail [data-state="on"] b { background: var(--maroon, #73020c); border-color: var(--maroon, #73020c); color: #fff; }
.q-rail [data-state="on"] { color: #1f2933; font-weight: 600; }
.q-rail [data-state="done"] b { background: #1f6f4a; border-color: #1f6f4a; color: #fff; }

/* ---------- panels ---------- */

.q-panel {
  background: #fff;
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 12px;
  padding: clamp(1.15rem, 3vw, 1.9rem);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.q-panel + .q-panel { margin-top: 1.25rem; }
.q-panel > h2 { margin: 0 0 0.35rem; font-size: 1.2rem; }
.q-panel > .q-sub { color: #5b6572; margin: 0 0 1.25rem; font-size: 0.95rem; }

.q-traveller {
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 10px;
  padding: 1rem 1.1rem 0.35rem;
  margin-bottom: 0.9rem;
}
.q-traveller legend {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.4rem;
}

.q-inline { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.q-radio { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; cursor: pointer; }
.q-radio input { width: auto; margin: 0; }

.q-locked {
  background: #f5f6f8;
  color: #5b6572;
  cursor: not-allowed;
}
.q-note {
  font-size: 0.85rem;
  color: #6b7480;
  margin: 0.3rem 0 0;
}

/* ---------- messages ---------- */

.q-msg {
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.q-msg[data-tone="error"] { background: #fdf1f0; border-color: #e7bdb9; color: #8c211b; }
.q-msg[data-tone="info"]  { background: #f3f6fa; border-color: #cfdae7; color: #35424f; }

/* ---------- deductible slider ---------- */

.q-ded {
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 12px;
  background: #fff;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.q-ded-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.65rem;
}
.q-ded-head strong { font-size: 1.05rem; }
.q-ded input[type="range"] { width: 100%; accent-color: var(--maroon, #73020c); }
.q-ded-scale {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: #6b7480; margin-top: 0.2rem;
}

/* ---------- results ---------- */

.q-summary {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: 0.9rem; color: #5b6572; margin-bottom: 1rem;
}
.q-summary b { color: #1f2933; font-weight: 600; }

.q-results { display: grid; gap: 0.75rem; }

.q-result {
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 12px;
  background: #fff;
  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem 1.5rem;
  align-items: center;
}
.q-result[data-best="true"] { border-color: var(--maroon, #73020c); border-width: 1.5px; }

.q-result-name { font-weight: 600; font-size: 1.02rem; margin: 0; }
.q-result-meta { font-size: 0.85rem; color: #6b7480; margin: 0.2rem 0 0; }
.q-flag {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  padding: 0.05rem 0.45rem; border-radius: 999px;
  background: #f3ece0; color: #6b4c14; margin-left: 0.4rem;
}
.q-price { text-align: right; font-variant-numeric: tabular-nums; }
.q-price .amt { font-size: 1.35rem; font-weight: 700; display: block; line-height: 1.15; }
.q-price .per { font-size: 0.8rem; color: #6b7480; }
.q-price .mo { font-size: 0.85rem; color: #35424f; margin-top: 0.25rem; }

.q-empty {
  border: 1px dashed #cdd3da;
  border-radius: 12px;
  padding: 2rem 1.25rem;
  text-align: center;
  color: #5b6572;
}

.q-disclaimer {
  font-size: 0.85rem;
  color: #6b7480;
  border-top: 1px solid var(--line, #e2e6eb);
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.q-busy { opacity: 0.55; pointer-events: none; }

@media (max-width: 34rem) {
  .q-result { grid-template-columns: 1fr; }
  .q-price { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- plan details ---------- */

.q-result { grid-template-areas: "info price" "detail detail"; }
.q-result > .q-result-main { grid-area: info; }
.q-result > .q-price { grid-area: price; }
.q-result > .q-detail { grid-area: detail; }

.q-toggle {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--maroon, #73020c); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; margin-top: 0.4rem;
}

.q-detail { border-top: 1px solid var(--line, #e2e6eb); margin-top: 0.85rem; padding-top: 0.85rem; }
.q-detail h4 {
  margin: 0.9rem 0 0.35rem; font-size: 0.82rem; font-weight: 700;
  color: #5b6572;
}
.q-detail h4:first-child { margin-top: 0; }
.q-feat { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.q-feat th {
  text-align: left; font-weight: 500; color: #5b6572;
  padding: 0.3rem 0.5rem 0.3rem 0; width: 55%;
}
.q-feat td { padding: 0.3rem 0; text-align: right; }
.q-feat tr + tr th, .q-feat tr + tr td { border-top: 1px solid #f0f2f5; }
.q-feat .yes { color: #1f6f4a; font-weight: 600; }
.q-feat .no  { color: #98413c; }

.q-docs { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.q-docs a { font-size: 0.88rem; }

/* ---------- buy dialog ---------- */

.q-dialog {
  border: 0; border-radius: 14px; padding: 0;
  width: min(34rem, calc(100vw - 2rem));
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
}
.q-dialog::backdrop { background: rgba(16, 24, 40, 0.5); }
.q-dialog-inner { padding: clamp(1.2rem, 4vw, 1.9rem); }
.q-dialog h2 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.q-chosen {
  background: #f7f8fa; border: 1px solid var(--line, #e2e6eb);
  border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0.9rem 0 1.1rem;
  font-size: 0.92rem;
}
.q-chosen strong { display: block; font-size: 1.05rem; }
.q-consent { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.88rem; margin: 0.9rem 0; }
.q-consent input { width: auto; margin-top: 0.2rem; flex: none; }
.q-done { text-align: center; padding: 1rem 0.5rem; }
.q-done h2 { margin-bottom: 0.5rem; }

/* ==========================================================================
   Revision: compact entry form, richer results
   --------------------------------------------------------------------------
   The form is the point of these pages, so the intro above it is deliberately
   short and each traveller occupies a single line. Results carry enough at a
   glance — insurer, plan, ages, days, deductible, price, and how the medical
   answer is treated — that a visitor rarely needs to expand anything.
   ========================================================================== */

.q-head { margin-bottom: 1.25rem; }
.q-head h1 { margin-bottom: .35rem; }
.q-head .lead { margin: 0; max-width: 62ch; font-size: 1rem; }

/* ---------- segmented control ---------- */

.q-seg {
  display: inline-flex;
  background: #f1f3f6;
  border: 1px solid var(--line, #dfe3e8);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.q-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-seg label {
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: #5b6572;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.q-seg input:checked + label {
  background: var(--maroon, #73020c);
  color: #fff;
}
.q-seg input:focus-visible + label {
  outline: 2px solid var(--maroon, #73020c);
  outline-offset: 2px;
}
.q-seg--sm label { padding: .3rem .7rem; font-size: .82rem; }
.q-seg--party { margin-bottom: 1.1rem; }

/* ---------- traveller row: one line each ---------- */

.q-trav {
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 0 0 .7rem;
}
.q-trav legend {
  font-weight: 700;
  font-size: .8rem;
  color: #5b6572;
  padding: 0 .4rem;
  letter-spacing: .01em;
}
.q-trav-row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.q-trav-field { display: flex; flex-direction: column; gap: .2rem; }
.q-trav-field input { min-width: 8.5rem; }
.q-trav-pec { margin-left: auto; }
.q-mini {
  font-size: .72rem;
  font-weight: 600;
  color: #6b7480;
}
.q-age-chip {
  align-self: center;
  background: #eef5f1;
  border: 1px solid #bcdccb;
  color: #1f6f4a;
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- field grids ---------- */

.q-grid { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .9rem; }
.q-field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 12rem; }
.q-field > label { font-size: .82rem; font-weight: 600; color: #4a535e; }
.q-grid--dates .q-field { flex: 1 1 10rem; }

/* ---------- results toolbar ---------- */

.q-resbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.q-resbar h2 { margin: 0; font-size: 1.15rem; }
.q-resbar p { margin: .15rem 0 0; font-size: .88rem; color: #6b7480; }
.q-resbar-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.q-check {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 600; color: #35424f;
  border: 1px solid var(--line, #dfe3e8); border-radius: 999px;
  padding: .35rem .85rem; cursor: pointer; background: #fff;
}
.q-check input { width: auto; margin: 0; accent-color: var(--maroon, #73020c); }
.q-check:has(input:checked) { border-color: var(--maroon, #73020c); background: #fdf6f6; }
.q-monthly-note {
  background: #f3f6fa; border: 1px solid #d3dfeb; border-radius: 8px;
  padding: .5rem .8rem; font-size: .85rem; color: #35424f; margin: 0 0 1rem;
}

/* ---------- deductible scale ---------- */

.q-ded-scale { gap: .25rem; }
.q-ded-scale span { flex: 1 1 0; text-align: center; }
.q-ded-scale span:first-child { text-align: left; }
.q-ded-scale span:last-child { text-align: right; }
.q-ded-head #q-ded-value { color: var(--maroon, #73020c); }

/* ---------- result card ---------- */

/* The original card layout lived here. It has been replaced by .q-card-grid
   further down; the grid-area assignments are deleted rather than overridden
   because they still bound inside the new grid and displaced the price
   column. */
.q-card {
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 12px;
  background: #fff;
}
.q-card[data-best="true"] {
  border-color: var(--maroon, #73020c);
  box-shadow: 0 0 0 1px var(--maroon, #73020c) inset;
}

.q-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.q-mark {
  width: 2.1rem; height: 2.1rem; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #f6efef; color: var(--maroon, #73020c);
  border: 1px solid #e6d3d3;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.q-brand b { font-size: 1.02rem; }

.q-specs { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0 0 .5rem; }
.q-specs div { display: flex; flex-direction: column; }
.q-specs dt { font-size: .68rem; font-weight: 700; color: #8b9199; letter-spacing: .02em; }
.q-specs dd { margin: 0; font-size: .92rem; font-weight: 600; color: #1f2933; }

.q-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.q-chip {
  font-size: .72rem; font-weight: 700; border-radius: 999px;
  padding: .12rem .55rem; background: #f1f3f6; color: #5b6572;
  border: 1px solid #e2e6eb;
}
.q-chip--pec  { background: #eef5f1; color: #1f6f4a; border-color: #bcdccb; }
.q-chip--flag { background: #fbf4e6; color: #8a5a00; border-color: #e6d3a8; }
.q-chip--save { background: #eef5f1; color: #1f6f4a; border-color: #bcdccb; }
.q-chip--best { background: var(--maroon, #73020c); color: #fff; border-color: var(--maroon, #73020c); }

.q-money .q-lbl { display: block; font-size: .68rem; font-weight: 700; color: #8b9199; letter-spacing: .02em; }
.q-money .amt { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: #1f6f4a; }
.q-money .amt small { font-size: .62rem; font-weight: 600; color: #6b7480; }
.q-money .sub { display: block; font-size: .82rem; color: #35424f; margin-top: .15rem; }
.q-money .foot { display: block; font-size: .75rem; color: #8b9199; margin-top: .1rem; }
.q-money .q-muted { color: #9aa1a9; }
.q-money .btn { margin-top: .6rem; }

.q-feat { list-style: none; margin: 0 0 .4rem; padding: 0; }
.q-feat li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .3rem 0; border-bottom: 1px solid #f0f2f5; font-size: .88rem;
}
.q-feat li:last-child { border-bottom: 0; }
.q-feat span { color: #5b6572; }
.q-feat b { font-weight: 600; text-align: right; }
.q-feat b.yes { color: #1f6f4a; }
.q-feat b.no { color: #98413c; }

@media (max-width: 46rem) {
  .q-trav-pec { margin-left: 0; width: 100%; }
  .q-resbar-right { width: 100%; justify-content: space-between; }
}

/* Carrier logo on a result card. Sized to match the monogram badge exactly so
   a mix of insurers with and without logos still lines up. */
.q-logo {
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e6eb);
  background: #fff;
  object-fit: contain;
}

/* ==========================================================================
   Revision 2 — the form belongs to the page, not to a card
   --------------------------------------------------------------------------
   The panel treatment made the quote steps read as a widget dropped onto the
   page. Removing it, tightening the heading and letting the site's own type
   and rhythm carry the form makes it feel native. Nothing here introduces a
   new colour or typeface: it all comes from styles.css.
   ========================================================================== */

/* Heading: smaller, and much less air above it. */
.section:has(.q-wrap) { padding-top: 1.5rem; }
.q-head { margin-bottom: 1.1rem; }
.q-head .eyebrow { margin-bottom: .2rem; }
.q-head h1 {
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
  line-height: 1.2;
  margin: 0;
}

/* Steps sit directly on the page. */
.q-step { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.q-step + .q-step { margin-top: 0; }
.q-step > h2 {
  font-size: 1.05rem;
  margin: 0 0 .2rem;
}
.q-step > .q-sub {
  color: #6b7480;
  font-size: .92rem;
  margin: 0 0 1.1rem;
}

/* The line that used to sit above the form. */
.q-lede {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #e8ebef);
  color: #6b7480;
  font-size: .92rem;
  max-width: 62ch;
}

/* Traveller rows: no box, one line, aligned to a shared baseline. */
.q-trav--plain {
  border: 0;
  padding: 0;
  margin: 0 0 .85rem;
}
.q-trav--plain legend {
  float: left;
  width: 6.5rem;
  padding: 0;
  line-height: 2.6rem;
  font-size: .9rem;
  font-weight: 700;
  color: #35424f;
}
.q-trav--plain .q-trav-row {
  margin-left: 6.5rem;
  align-items: center;
  gap: .6rem .9rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line, #eef0f3);
}
.q-trav--plain:last-of-type .q-trav-row { border-bottom: 0; }
.q-trav-field { gap: .15rem; }
.q-trav-field input { min-width: 7.5rem; }
.q-trav-field .q-mini { display: none; }   /* the segmented control already says which */
.q-trav-pec { flex-direction: row; align-items: center; gap: .5rem; margin-left: auto; }
.q-trav-pec .q-mini {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #5b6572;
  white-space: nowrap;
}

/* Inputs inherit the site's form styling; just even out the heights so a
   segmented pill, a text input and a chip sit on one line without jitter. */
.q-trav-row input[type="number"],
.q-trav-row input[type="date"] { height: 2.5rem; }
.q-seg--sm label { line-height: 1.5; }

.q-grid { margin-top: 1.1rem; gap: .9rem; }
.q-field > label { font-size: .82rem; }

@media (max-width: 40rem) {
  .q-trav--plain legend { float: none; width: auto; line-height: 1.6; margin-bottom: .35rem; }
  .q-trav--plain .q-trav-row { margin-left: 0; }
  .q-trav-pec { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Revision 3
   ========================================================================== */

/* The one-traveller / couple choice is the same kind of decision as the
   product switch above it, so it gets the same control rather than a
   smaller variant of it. */
.q-seg--party {
  background: #fff;
  border: 1px solid var(--line, #d9dde3);
  margin: 0 0 1.4rem;
}
.q-seg--party label {
  padding: .45rem 1.15rem;
  font-size: .95rem;
}

/* Step 1 opens straight into the form now that the heading is gone. */
#q-step-1 > .q-msg:first-child { margin-top: 0; }

/* ==========================================================================
   Revision 4 — hidden really means hidden, and fields stop stretching
   ========================================================================== */

/* Any element given display: flex or grid ignores the hidden attribute, which
   is why both the Age and Date of birth inputs were showing at once. Restore
   the attribute's meaning across the whole quote flow rather than patching
   each rule that happens to set display. */
.q-wrap [hidden] { display: none !important; }

/* Fields were flex: 1 1 12rem inside a flex row, so a lone coverage select
   stretched the full width of the page. Give each field its natural size and
   a sensible ceiling instead. */
.q-grid { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; margin-top: 1.25rem; }
.q-grid .q-field { flex: 0 1 auto; width: 15rem; max-width: 100%; }
.q-grid--dates { margin-top: .9rem; }
.q-grid--dates .q-field { width: 15rem; }
.q-field > label {
  font-size: .78rem;
  font-weight: 700;
  color: #6b7480;
  letter-spacing: .01em;
}

/* Traveller row: tighter, evenly aligned, with the mode toggle and its input
   reading as one control rather than two loose boxes. */
.q-trav--plain { margin: 0 0 .6rem; }
.q-trav--plain legend { width: 7rem; line-height: 2.4rem; font-size: .92rem; }
.q-trav--plain .q-trav-row {
  margin-left: 7rem;
  gap: .5rem .7rem;
  padding-bottom: .6rem;
}
.q-trav-row input[type="number"],
.q-trav-row input[type="date"] { height: 2.4rem; }
.q-trav-field input { min-width: 0; width: 9rem; }
.q-trav-field input[type="date"] { width: 10.5rem; }

/* The medical answer is a question, so the label reads as one. */
.q-trav-pec { gap: .6rem; }
.q-trav-pec .q-mini { font-size: .85rem; color: #35424f; font-weight: 600; }

/* Continue sits closer to the fields it completes. */
#q-form > .btn { margin-top: 1.3rem; }

@media (max-width: 52rem) {
  .q-trav-pec { margin-left: 0; }
}
@media (max-width: 40rem) {
  .q-grid .q-field, .q-grid--dates .q-field { width: 100%; }
}

/* ==========================================================================
   Revision 5 — inherit the site's field styling; tighten the controls
   --------------------------------------------------------------------------
   The inputs looked unstyled because styles.css only dresses inputs inside
   .field, and these wrappers were .q-field / .q-trav-field. They now carry
   .field as well, so borders, radius, focus ring and type all come from the
   site sheet and will follow it if it ever changes. Everything below only
   adjusts layout on top of that.
   ========================================================================== */

/* .field brings a bottom margin meant for stacked forms; our rows space
   themselves, so take it back. */
.q-field, .q-trav-field { margin-bottom: 0; }
.q-trav-field label { margin-bottom: 0; }

/* Divider between the product switch and the form. */
.q-rule {
  border: 0;
  border-top: 1px solid var(--line-2, #e2e6eb);
  margin: 0 0 1.4rem;
}
.q-switch { margin-bottom: 1.4rem; }

/* Controls were too tall for their content. */
.q-seg { padding: 2px; }
.q-seg--party label { padding: .32rem 1.05rem; font-size: .92rem; }
.q-seg--sm label { padding: .3rem .8rem; font-size: .85rem; }
.q-seg--party { margin: 0 0 1.2rem; }

.q-trav-row input[type="number"],
.q-trav-row input[type="date"],
.q-trav-row select { padding: .42em .7em; }
.q-trav--plain legend { line-height: 2.2rem; }
.q-trav--plain .q-trav-row { padding-bottom: .55rem; gap: .5rem .75rem; }

/* The medical answer sat pushed to the far edge by margin-left: auto, which
   left it floating away from the field it qualifies. It now follows the
   input at a normal reading distance. */
.q-trav-pec { margin-left: 1.5rem; }
.q-trav-pec .q-mini { font-size: .84rem; }

/* Fixed widths so traveller 1 and traveller 2 line up with each other
   whichever entry mode each is using. */
.q-trav-field { width: 10.5rem; }
.q-trav-field input { width: 100%; }
.q-seg--sm { flex: none; }

@media (max-width: 52rem) {
  .q-trav-pec { margin-left: 0; }
}

/* ==========================================================================
   Revision 6 — per-traveller breakdown on couple results
   --------------------------------------------------------------------------
   A couple can be on two different plans, at two ages, for two different
   amounts. Showing one merged line hid exactly what was being compared, so
   each traveller now gets their own row and the total shows its arithmetic.
   ========================================================================== */

.q-legs { display: grid; gap: .3rem; margin: 0 0 .55rem; }
.q-leg {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  padding: .3rem .5rem;
  border-radius: 8px;
  background: #f8f9fb;
}
.q-leg-tag {
  flex: none;
  width: 1.6rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 5px;
  background: #2f3a46; color: #fff;
  font-size: .68rem; font-weight: 700;
}
.q-leg-plan { font-weight: 600; color: #1f2933; min-width: 6.5rem; }
.q-leg-age  { color: #5b6572; min-width: 4rem; }
.q-leg-days { color: #5b6572; min-width: 3rem; }
.q-leg-amt {
  margin-left: auto;
  font-weight: 600;
  color: #1f6f4a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The arithmetic behind the total, so a couple's figure is checkable. */
.q-sum {
  display: block;
  font-size: .75rem;
  color: #8b9199;
  font-variant-numeric: tabular-nums;
  margin-top: .1rem;
}

/* Sorting is fixed to cheapest-first, so the toolbar only carries the
   monthly switch now. */
.q-resbar-right { justify-content: flex-end; }

@media (max-width: 46rem) {
  .q-leg { flex-wrap: wrap; gap: .35rem .5rem; }
  .q-leg-plan, .q-leg-age, .q-leg-days { min-width: 0; }
  .q-leg-amt { margin-left: auto; }
}

/* ==========================================================================
   Revision 7 — one-line heading, trust panel, calmer form
   ========================================================================== */

.q-head { margin-bottom: 1.2rem; }
.q-head h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); margin: 0; line-height: 1.25; }

/* ---- every control on a row shares one height, so nothing sits proud ---- */

.q-wrap { --q-control: 2.6rem; }
.q-trav-row input[type="number"],
.q-trav-row input[type="date"],
.q-grid input[type="date"],
.q-grid select,
.q-seg--sm {
  height: var(--q-control);
  box-sizing: border-box;
}
.q-grid input, .q-grid select { padding: 0 .75rem; }
.q-seg--sm { display: inline-flex; align-items: center; padding: 3px; }
.q-seg--sm label { display: flex; align-items: center; height: 100%; }

/* ---- field labels read as labels, not fine print ---- */

.q-field > label,
.q-trav-pec .q-mini {
  font-size: .9rem;
  font-weight: 600;
  color: #35424f;
  letter-spacing: 0;
}
.q-field { gap: .35rem; }
.q-grid { gap: 1rem 1.15rem; margin-top: 1.35rem; }
.q-grid .q-field { width: 16rem; }
.q-trav--plain legend { font-size: .95rem; color: #1f2933; }
.q-trav--plain .q-trav-row { padding-bottom: .8rem; gap: .55rem .8rem; }
.q-trav--plain { margin-bottom: .8rem; }

/* ---- trust panel: the reassurance a visitor wants next to the button ---- */

.q-trust {
  margin-top: 1.6rem;
  padding: 1.1rem 1.25rem;
  background: #faf7f3;
  border: 1px solid #ecdfd2;
  border-radius: 12px;
}
.q-trust ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.q-trust li { display: flex; flex-direction: column; gap: .15rem; }
.q-trust strong {
  font-size: .92rem;
  color: #1f2933;
  padding-left: 1.4rem;
  position: relative;
}
.q-trust strong::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: .85rem; height: .45rem;
  border-left: 2px solid var(--maroon, #73020c);
  border-bottom: 2px solid var(--maroon, #73020c);
  transform: rotate(-45deg);
}
.q-trust span { font-size: .86rem; color: #5b6572; padding-left: 1.4rem; }

/* ---- deductible: a strip, not a panel ---- */

.q-ded { padding: .75rem 1rem; }
.q-ded-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}
.q-ded-head strong { font-size: .92rem; }
.q-ded-head #q-ded-value { font-size: 1.05rem; font-weight: 700; color: var(--maroon, #73020c); }
.q-ded input[type="range"] { margin: .2rem 0 .1rem; }
.q-ded-scale { font-size: .7rem; margin-top: .1rem; }

/* ---- results bar now carries only the monthly switch ---- */

.q-resbar { align-items: center; margin-bottom: .75rem; }
.q-resbar-left p { font-size: .92rem; color: #35424f; margin: 0; font-weight: 600; }

/* ---- three ways to reach Priya, equally weighted ---- */

.q-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, #e8ebef);
}
.q-contact .btn { flex: 0 1 auto; }
.btn--quiet {
  background: none;
  border: 1px solid var(--line-2, #d9dde3);
  color: #5b6572;
}
.btn--quiet:hover { border-color: #b9c0c9; color: #35424f; }

@media (max-width: 40rem) {
  .q-contact .btn { flex: 1 1 100%; text-align: center; }
}

/* ==========================================================================
   Revision 8 — plan comparison
   ========================================================================== */

.q-pick { display: inline-flex; align-items: center; margin-right: .1rem; }
.q-pick input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--maroon, #73020c); cursor: pointer; }
.q-card.q-picked { border-color: var(--maroon, #73020c); background: #fffdfd; }

/* Selection bar sits above the list and follows the reader down it. */
.q-cmpbar {
  position: sticky;
  top: .5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--maroon, #73020c);
  color: #fff;
  border-radius: 10px;
  padding: .6rem .9rem;
  margin-bottom: .9rem;
  box-shadow: 0 6px 18px rgba(115, 2, 12, .18);
}
.q-cmpbar span { font-size: .9rem; font-weight: 600; }
.q-cmpbar-actions { display: flex; gap: .5rem; }
.q-cmpbar .btn--quiet { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.q-cmpbar .btn--quiet:hover { background: rgba(255,255,255,.2); color: #fff; }
.q-cmpbar .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Comparison dialog */
.q-dialog--wide {
  width: min(72rem, calc(100vw - 2rem));
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
}
.q-cmp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line, #e8ebef);
}
.q-cmp-head h2 { margin: 0; font-size: 1.05rem; }
.q-cmp-x {
  border: 0; background: none; font-size: 1.5rem; line-height: 1;
  color: #6b7480; cursor: pointer; padding: 0 .25rem;
}
.q-cmp-body { padding: 0; overflow: auto; max-height: calc(90vh - 4rem); }
.q-cmp-scroll { overflow-x: auto; }

.q-cmp-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.q-cmp-table th, .q-cmp-table td {
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f0f2f5;
}
/* The benefit name stays visible while the plans scroll sideways. */
.q-cmp-table tbody th, .q-cmp-corner {
  position: sticky; left: 0;
  background: #fff;
  font-weight: 600;
  color: #5b6572;
  min-width: 11rem;
  border-right: 1px solid #f0f2f5;
}
.q-cmp-table thead th {
  position: sticky; top: 0;
  background: #faf7f3;
  z-index: 2;
  border-bottom: 1px solid #ecdfd2;
  min-width: 12rem;
}
.q-cmp-corner { z-index: 3; background: #faf7f3; }
.q-cmp-carrier { display: block; font-weight: 700; color: #1f2933; }
.q-cmp-plan { display: block; font-size: .78rem; color: #6b7480; }
.q-cmp-price { display: block; font-weight: 700; color: #1f6f4a; margin-top: .15rem; }

.q-cmp-cat th {
  background: #f6f7f9;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7480;
  position: static;
}
.q-cmp-table td.yes { color: #1f2933; }
.q-cmp-table td.no { color: #98413c; }
.q-cmp-none { color: #9aa1a9; font-style: italic; }

@media (max-width: 40rem) {
  .q-cmpbar { flex-direction: column; align-items: stretch; }
  .q-cmpbar-actions .btn { flex: 1; }
}

/* Column header on a couple: which traveller this plan covers. */
.q-cmp-who {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--maroon, #73020c);
  margin-top: .1rem;
}
.q-cmp-note {
  margin: 0;
  padding: .6rem 1.25rem;
  font-size: .82rem;
  color: #5b6572;
  background: #f8f9fb;
  border-bottom: 1px solid #f0f2f5;
}

/* ---- phone verification (optional, hidden unless configured) ---- */
.q-otp { margin-top: .45rem; }
.q-otp-enter { margin-top: .5rem; }
.q-otp-row { display: flex; gap: .5rem; margin-top: .25rem; }
.q-otp-row input { width: 8rem; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.btn--sm { padding: .35rem .8rem; font-size: .85rem; }
.q-linkbtn {
  background: none; border: 0; padding: .35rem 0 0;
  font-size: .8rem; color: var(--maroon, #73020c);
  text-decoration: underline; cursor: pointer;
}
.q-otp-done {
  margin: .4rem 0 0;
  font-size: .85rem; font-weight: 600; color: #1f6f4a;
  display: flex; align-items: center; gap: .35rem;
}
.q-otp-done::before {
  content: ""; width: .8rem; height: .42rem;
  border-left: 2px solid #1f6f4a; border-bottom: 2px solid #1f6f4a;
  transform: rotate(-45deg); display: inline-block; margin-bottom: .18rem;
}

/* ==========================================================================
   Revision 9 — result cards in the comparison-table shape
   --------------------------------------------------------------------------
   Four columns: select, insurer, what each traveller gets, what it costs.
   The per-traveller row is the unit people actually check, so it carries the
   plan, age, days billed, medical answer and that person's premium on one
   line.
   ========================================================================== */

.q-card { display: block; padding: 0; overflow: hidden; }
.q-card-grid {
  display: grid;
  grid-template-columns: 2.5rem 8.5rem 1fr 12.5rem;
  align-items: center;
  gap: 0 .5rem;
  padding: .9rem 1rem;
}
.q-card-grid > .q-pick { justify-self: center; }

/* Insurer: mark above name, as on a policy document. */
.q-card-grid > .q-brand {
  flex-direction: column;
  gap: .3rem;
  text-align: center;
  padding-right: .75rem;
  border-right: 1px solid var(--line, #eef0f3);
  align-self: stretch;
  justify-content: center;
}
.q-card-grid > .q-brand .q-logo,
.q-card-grid > .q-brand .q-mark { width: 2.5rem; height: 2.5rem; }
.q-card-grid > .q-brand b { font-size: .82rem; font-weight: 600; color: #35424f; line-height: 1.2; }

/* Traveller rows */
.q-legs { display: grid; gap: .25rem; margin: 0; padding: 0 .75rem; }
.q-leg {
  display: grid;
  grid-template-columns: auto minmax(6.5rem, 9rem) minmax(5.5rem, 8rem) 3.5rem auto 1fr;
  align-items: center;
  gap: .6rem;
  background: none;
  padding: .2rem 0;
  font-size: .875rem;
}
.q-leg-tag {
  width: 1.5rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: 4px;
  background: #eef0f3; color: #46525f;
  font-size: .68rem; font-weight: 700;
}
.q-leg-plan { font-weight: 600; color: #1f2933; }
.q-leg-age  { color: #46525f; display: flex; flex-direction: column; line-height: 1.25; }
.q-leg-days { color: #6b7480; font-variant-numeric: tabular-nums; }
.q-leg-amt  { text-align: right; font-weight: 600; color: #1f6f4a; font-variant-numeric: tabular-nums; }

/* Someone at the top of an age band pays more the moment they cross it, and a
   Super Visa policy runs a full year — worth saying before they buy. */
.q-bandwarn { font-size: .7rem; color: #8a5a00; white-space: nowrap; }

.q-chip--nopec { background: #fdf0ef; color: #98413c; border-color: #f3d6d3; }
.q-legs .q-chips { margin-top: .35rem; }

/* Price column */
.q-card-grid > .q-money {
  text-align: right;
  padding-left: .75rem;
  border-left: 1px solid var(--line, #eef0f3);
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
.q-money .q-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; }
.q-money .amt { font-size: 1.3rem; }
.q-money .amt small { margin-left: .2rem; }
.q-money .btn { margin-top: .5rem; align-self: flex-end; }

/* Features strip along the bottom */
.q-card > .q-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: .45rem 1rem;
  background: #f8f9fb;
  border: 0;
  border-top: 1px solid var(--line, #eef0f3);
  font-size: .82rem;
  color: #46525f;
  cursor: pointer;
}
.q-card > .q-toggle:hover { background: #f2f4f7; color: var(--maroon, #73020c); }
.q-card > .q-detail { padding: .75rem 1rem 1rem; border-top: 1px solid var(--line, #eef0f3); }

@media (max-width: 62rem) {
  .q-card-grid { grid-template-columns: 2rem 1fr; gap: .5rem; }
  .q-card-grid > .q-brand {
    flex-direction: row; text-align: left; border-right: 0; padding-right: 0; justify-content: flex-start;
  }
  .q-legs { grid-column: 1 / -1; padding: 0; }
  .q-card-grid > .q-money {
    grid-column: 1 / -1; text-align: left; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line, #eef0f3); padding-top: .6rem; margin-top: .4rem;
  }
  .q-money .btn { align-self: flex-start; }
  .q-leg { grid-template-columns: auto 1fr auto; gap: .4rem; }
  .q-leg-days { display: none; }
}

/* Used by the comparison checkbox label. The site stylesheet has no
   equivalent, so the text was rendering on the card. */
.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;
}


/* ==========================================================================
   Revision 10 — stop the price column being pushed off the card
   --------------------------------------------------------------------------
   Grid items default to min-width: auto, so they refuse to shrink below their
   content. The traveller row has several fixed-ish columns, so it forced the
   whole card wider than its container and the price column was clipped by the
   card's own overflow. Every grid child that must be allowed to shrink now
   says so explicitly.
   ========================================================================== */

.q-card { overflow: visible; }

.q-card-grid {
  grid-template-columns: 2.25rem 7.5rem minmax(0, 1fr) 11.5rem;
}
.q-card-grid > * { min-width: 0; }

.q-legs { min-width: 0; }
.q-leg {
  grid-template-columns:
    auto                       /* T1 / T2 badge   */
    minmax(0, 8rem)            /* plan            */
    minmax(0, 7.5rem)          /* age + warning   */
    minmax(0, 3.5rem)          /* days            */
    auto                       /* medical answer  */
    minmax(0, 1fr);            /* premium         */
  gap: .5rem;
}
.q-leg > * { min-width: 0; }
.q-leg-plan, .q-leg-days { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The chip was wrapping "No PEC" onto two lines in a narrow column. */
.q-chip { white-space: nowrap; }
.q-leg .q-chip { padding: .1rem .5rem; }

/* Keep the age and its warning together and readable. */
.q-leg-age { white-space: nowrap; }
.q-bandwarn { font-size: .68rem; }

.q-money .amt { font-size: 1.2rem; white-space: nowrap; }
.q-money .sub, .q-money .foot { white-space: nowrap; }
.q-card-grid > .q-money .btn { width: 100%; text-align: center; }

@media (max-width: 74rem) {
  /* Below this the four columns cannot all hold their width, so the days
     column goes first: it is the least load-bearing thing on the row. */
  .q-leg-days { display: none; }
  .q-leg { grid-template-columns: auto minmax(0, 8rem) minmax(0, 7.5rem) auto minmax(0, 1fr); }
}

/* The card no longer clips its contents, so the bottom strip has to round its
   own corners. Deliberate: overflow: hidden would tidy this up, but it also
   hides a layout fault instead of showing it — which is exactly how the price
   column disappeared without any visible error. */
.q-card > .q-toggle {
  border-radius: 0 0 11px 11px;
}
.q-card > .q-detail:not([hidden]) ~ .q-toggle,
.q-card > .q-toggle[aria-expanded="true"] {
  border-radius: 0;
}
.q-card > .q-detail { border-radius: 0 0 11px 11px; }

/* ==========================================================================
   Revision 11 — traveller row spacing
   --------------------------------------------------------------------------
   The age-band warning is a sentence, not a value, and it was sharing a cell
   with the age. It overflowed its track and ran under the days column. It now
   sits on its own line beneath the row, which is also where a reader expects
   a footnote.
   ========================================================================== */

.q-leg {
  grid-template-columns:
    auto                    /* T1 / T2 badge  */
    minmax(0, 9rem)         /* plan           */
    minmax(0, 5rem)         /* age            */
    minmax(0, 4rem)         /* days           */
    auto                    /* medical answer */
    minmax(0, 1fr);         /* premium        */
  gap: .35rem .9rem;
  padding: .3rem 0;
  align-items: baseline;
}
.q-leg-age { white-space: nowrap; display: block; }

/* Own line, aligned under the plan rather than hard against the card edge. */
.q-bandwarn {
  grid-column: 2 / -1;
  display: block;
  font-size: .72rem;
  color: #8a5a00;
  line-height: 1.3;
  margin-top: -.15rem;
  white-space: normal;
}

/* Separate travellers on a couple, now that a row can be two lines tall. */
.q-legs > .q-leg + .q-leg {
  border-top: 1px solid var(--line, #f0f2f5);
  padding-top: .5rem;
  margin-top: .2rem;
}

@media (max-width: 74rem) {
  .q-leg { grid-template-columns: auto minmax(0, 9rem) minmax(0, 5rem) auto minmax(0, 1fr); }
  .q-bandwarn { grid-column: 2 / -1; }
}

/* ==========================================================================
   Revision 12 — traveller amounts overflowing into the price column
   --------------------------------------------------------------------------
   The premium was the flexible track (minmax(0, 1fr)), so it got whatever
   the fixed tracks left over. In a ~650px quote column that was close to
   nothing, and an amount that cannot wrap ran 24-42px past the divider into
   the price column. The flexible track is now the plan name, which trims
   with an ellipsis; everything else has a fixed width so T1 and T2 line up
   column for column regardless of chip or amount length.

   The phone layout also re-asserts the stacked card. The 62rem block above
   was being silently overridden by the later desktop grid, so on a phone the
   card never actually stacked.
   ========================================================================== */

.q-leg {
  grid-template-columns:
    auto                /* T1 / T2 badge       */
    minmax(0, 1fr)      /* plan: flexes, trims */
    3.75rem             /* age                 */
    2.5rem              /* days                */
    4.25rem             /* medical answer      */
    5.5rem;             /* premium: never cut  */
  gap: .35rem .6rem;
}
.q-leg-plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-leg-amt  { white-space: nowrap; text-align: right; }
.q-leg .q-chip { justify-self: start; }
.q-bandwarn { grid-column: 2 / -1; }

@media (max-width: 74rem) {
  .q-leg { grid-template-columns: auto minmax(0, 1fr) 3.75rem 4.25rem 5.5rem; }
}

@media (max-width: 62rem) {
  .q-card-grid { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
}

/* Phones: two lines per traveller. Plan and amount on top, age and medical
   answer beneath, band warning under both. Five columns do not fit here. */
@media (max-width: 40rem) {
  .q-leg { grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .6rem; }
  .q-leg-tag  { grid-row: 1; }
  .q-leg-plan { grid-column: 2; grid-row: 1; }
  .q-leg-amt  { grid-column: 3; grid-row: 1; }
  .q-leg-age  { grid-column: 2; grid-row: 2; }
  .q-leg .q-chip { grid-column: 3; grid-row: 2; justify-self: end; }
  .q-leg-days { display: none; }
  .q-bandwarn { grid-column: 2 / -1; grid-row: 3; }
}
.q-disclaimer p { margin: 0 0 .6rem; }