/**
 * Quote tool — the 3-step membership explorer, restyled 2026-08 to the approved
 * join/quote design (Claude Design project "Join Quote Tool Final").
 *
 * Ported from ymcacva.org. Two things are deliberately different from the source:
 *
 * 1. No form-id selectors. CVA hardcodes its form id 2 (#field_2_26,
 *    #gform_submit_button_2, …); this site's form id is different, so everything
 *    here is scoped to #quote-tool with attribute selectors.
 * 2. No Bootstrap. functions/dequeue.php deregisters it, so .d-none does not
 *    resolve — .quote-tool__hidden replaces it.
 *
 * Tokens are declared here rather than in assets/css/general/defaults.css, which
 * is generated by build-notes/header-footer/extract_css.py and overwritten on
 * every run. Values come verbatim from the extracted ymcachicago.org design
 * system (design-system/foundations/tokens.css).
 *
 * Layout notes:
 * - Pages are identified by ROLE via :has() — never by GF's numbered ids. The
 *   intro page is the one holding .qt-copy-intro, the finder page holds
 *   .quote-tool-map-field. The intro page can be switched off entirely.
 * - The rates step sits on the band's gradient: JS stamps .quote-tool--on-last
 *   on the module (keyed off data-total-steps, never "page 3") and this sheet
 *   paints the container, makes the band transparent, and floats a white sheet
 *   under the cards with negative-margin bleeds.
 */

:root {
  --qt-navy: #00345f;
  --qt-blue: #0060af;
  --qt-blue-light: #0460ad;
  --qt-purple: #862889;
  /* Step state — the filled progress segments and numbered tokens. */
  --qt-step-fill: var(--qt-purple);
  --qt-magenta: #c91f88;
  --qt-cyan-hover: #25afd2;
  --qt-ink: #2a2a2a;
  --qt-gray: #666;
  --qt-rule: #d0d0d1;
  --qt-hairline: #dcdcdc;
  --qt-input-border: #cacaca;
  --qt-surface-gray: #f5f5f5;
  --qt-white: #fff;
  --qt-gradient: linear-gradient(90deg, #00345f 0, #0460ad 100%);
  /* Pill hover. The navy→blue gradient slides to purple — the design system's
     hover accent — instead of growing a shadow (client note 2026-09-02: the
     glow was too easy to miss). Three equal thirds on an image 300% the pill's
     width: at rest the first third shows (identical to --qt-gradient), on hover
     the last, and background-position is what animates between them —
     gradients themselves can't interpolate, so a straight swap would snap.
     Pills set `background-size: 300% 100%` and move only the position. */
  --qt-gradient-pill: linear-gradient(90deg, #00345f 0, #0460ad 33.333%, #5b2e91 66.667%, #931f8d 100%);
  --qt-gradient-banner: linear-gradient(72deg, #045da8 66%, #c91f88 100%);
  --qt-gradient-panel-purple: linear-gradient(156.86deg, #931f8d 0, #5b2e91 52%);
  /* Blue -> purple, for the distance badge on a location card. */
  --qt-gradient-badge: linear-gradient(135deg, #0460ad 0, #862889 100%);
  --qt-surface-grad: linear-gradient(146.98deg, #f1f1f1 0, #ffffff 100%);
  --qt-radius-card: 20px;
  --qt-radius-input: 25px;
  --qt-radius-pill: 29px;
  --qt-radius-photo: 30px;
  --qt-radius-hero: 100px 0 0 100px;
  --qt-glow: 0 0 16px 1px rgba(0, 0, 0, 0.31);
  --qt-font-heading: Cachet, Geneva, sans-serif;
  --qt-font-body: Lato, sans-serif;
}

.quote-tool__hidden {
  display: none !important;
}

/* Module shell ----------------------------------------------------------- */

#quote-tool {
  --qt-pad-x: 40px;
  position: relative;
  margin: 2rem auto 3rem;
  border-radius: var(--qt-radius-photo);
  overflow: hidden;
  background: var(--qt-white);
  /* Deliberate departure from the design system's "no resting shadows" —
     requested 2026-08 to lift the module off the page. Navy-tinted and
     diffuse so it reads as ambient light, not a card border. */
  box-shadow: 0 10px 40px rgba(0, 52, 95, 0.18);
  font-family: var(--qt-font-body);
  color: var(--qt-ink);
}

#quote-tool .quote-tool-notice,
.quote-tool-notice {
  color: var(--qt-gray);
}

#quote-tool .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Icons (get_icon() output) inherit currentColor and size in em. */
#quote-tool .icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

#quote-tool .icon svg {
  width: 100%;
  height: 100%;
}

/* Gradient band ------------------------------------------------------------
   The step header every page shares: eyebrow, heading, segmented progress,
   step labels. Headings/segments/labels are all server-rendered per step;
   quoteToolUpdateBanner() toggles which is visible. */

#quote-tool .quote-tool__band {
  padding: 34px var(--qt-pad-x);
  background: var(--qt-gradient-banner);
  color: var(--qt-white);
  transition: background 0.18s ease-in-out;
}

#quote-tool .quote-tool__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

#quote-tool .quote-tool__heading {
  margin: 10px 0 0;
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -2px;
  color: var(--qt-white);
}

#quote-tool .quote-tool__progress {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* Track first, then the filled states. Purple-on-blue is the whole point of the
   2026-08-24 change: the previous bars separated done / current / pending by
   white opacity and a travelling glow alone, which did not read as progress. */
#quote-tool .quote-tool__progress span {
  flex: 1;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
}

#quote-tool .quote-tool__progress span.is-done {
  background: var(--qt-step-fill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* The current segment keeps a white ring so "where I am" still separates from
   "where I have been": the band's gradient reaches magenta under the last
   segment, and purple-on-magenta on its own is too close to call. */
#quote-tool .quote-tool__progress span.is-current {
  background: var(--qt-step-fill);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 12px 2px rgba(134, 40, 137, 0.5);
}

#quote-tool .quote-tool__steplabels {
  display: flex;
  gap: 10px;
  margin-top: 13px;
}

/* [data-step] scopes these to the outer label — the numbered token inside is a
   span too. */
#quote-tool .quote-tool__steplabels span[data-step] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

#quote-tool .quote-tool__steplabels span[data-step].is-current {
  font-weight: 700;
  color: var(--qt-white);
}

/* The numbered token. Pending is a hollow outline; reaching a step fills it
   purple and it stays filled once passed, so the row answers "how far in am I"
   at a glance instead of only "which label is bold". */
#quote-tool .quote-tool__stepnum {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  font-family: var(--qt-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--qt-white);
  transition:
    background 0.18s ease-in-out,
    border-color 0.18s ease-in-out,
    box-shadow 0.18s ease-in-out;
}

#quote-tool .quote-tool__steplabels span[data-step].is-done .quote-tool__stepnum,
#quote-tool .quote-tool__steplabels span[data-step].is-current .quote-tool__stepnum {
  background: var(--qt-step-fill);
  border-color: var(--qt-white);
}

#quote-tool .quote-tool__steplabels span[data-step].is-current .quote-tool__stepnum {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}

/* The strip that closes the module: the band's gradient again, thin, so the
   white form reads as sandwiched between two ends of one ribbon. It replaces
   the hairline rule that used to sit above the footer buttons. Markup, not a
   pseudo-element, because the two states below switch it off independently of
   the container it would otherwise be painted on. */
#quote-tool .quote-tool__foot {
  height: 14px;
  background: var(--qt-gradient-banner);
}

/* On the rates step the whole container already wears the gradient; a strip
   with its own 72deg axis over 14px would seam against it. */
#quote-tool.quote-tool--on-last .quote-tool__foot {
  background: transparent;
}

/* Body --------------------------------------------------------------------- */

#quote-tool .quote-tool__body {
  padding: 30px var(--qt-pad-x);
  box-sizing: border-box;
}

#quote-tool .gform_wrapper {
  width: 100%;
}

/* Injected step copy (fields 990–992). */

#quote-tool .qt-copy__title {
  margin: 0;
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -2px;
  color: #000;
}

#quote-tool .qt-copy__text {
  margin: 12px 0 0;
  max-width: 660px;
  font-size: 18px;
  font-weight: 300;
  line-height: 25.2px;
  text-wrap: pretty;
}

/* Gravity Forms chrome ------------------------------------------------------ */

/* Gravity Forms paints a resting shadow (--gf-ctrl-shadow) on every control;
   the design system is flat at rest — glows are hover-only, and those rules
   out-rank this one. */
#quote-tool input,
#quote-tool select,
#quote-tool textarea,
#quote-tool button {
  box-shadow: none;
}

/* Everything clickable shows the hand. The stay-connected checkbox's label
   measured cursor:auto on the live page (2026-09-02); the rest is here so no
   control — GF's or ours — ships without it. */
#quote-tool button:not(:disabled),
#quote-tool input[type="button"],
#quote-tool input[type="submit"],
#quote-tool a[href],
#quote-tool .gchoice label,
#quote-tool .gfield--type-checkbox label {
  cursor: pointer;
}

#quote-tool .gform_required_legend,
#quote-tool [id^="gf_progressbar_wrapper_"] {
  display: none;
}

#quote-tool [id^="gform_confirmation_wrapper_"] {
  width: 100%;
}

/* No divider rule: the module now closes on a gradient strip (.quote-tool__foot),
   so the buttons belong INSIDE the white middle rather than under a line that
   competed with that edge. The margin is the only separation they get. */
#quote-tool .gform_page_footer.top_label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

/* AJAX spinner. Gravity Forms stopped rendering this as a sibling image and now
   appends <span id="gform_ajax_spinner_N" class="gform-loader"> INSIDE whichever
   button submitted, stamping that button .gform-has-spinner. Its own framework
   rule centres it with `inset:0; margin:auto`, so it lands squarely on the
   button's label.

   The old override here tried to push it clear with `right:-20px; top:50%;
   transform:translateY(-50%)` and could not work, for two reasons measured on
   the live page 2026-08-31: it never reset GF's `left:0` or `margin:auto`, so
   the box stayed over-constrained and margin:auto re-centred it horizontally
   regardless; and the loader's spin keyframes animate `transform`, which beats
   any declaration, so the vertical centring was discarded too.

   Moving it out of the button is not the fix either — the loader is a 2px
   circle drawn in white (--gf-local-color), sized for the dark gradient pill.
   On the white footer it is invisible. So GF's centring is left alone and the
   LABEL steps aside instead: the button keeps its size, and the spinner sits
   where the text was. */

/* Gravity Forms already declares `color:transparent` for .gform-has-spinner. It
   loses because this sheet's own button colours are id-scoped and outrank it —
   and the :hover variants below are (1,3,0), which ties the obvious form of this
   rule and wins on source order. A click always carries hover, so the label
   would survive every real press while looking fixed to a scripted one. Hence
   the explicit hover/focus arms: each is a class heavier than the rule it has to
   beat, so this holds wherever it sits in the file. */
#quote-tool .gform_page_footer .gform_next_button.gform-has-spinner,
#quote-tool .gform_page_footer .gform_next_button.gform-has-spinner:hover,
#quote-tool .gform_page_footer .gform_next_button.gform-has-spinner:focus,
#quote-tool .gform_page_footer .gform_previous_button.gform-has-spinner,
#quote-tool .gform_page_footer .gform_previous_button.gform-has-spinner:hover,
#quote-tool.quote-tool--on-last .gform_page_footer .gform_previous_button.gform-has-spinner,
#quote-tool.quote-tool--on-last .gform_page_footer .gform_previous_button.gform-has-spinner:hover {
  color: transparent;
}

/* Previous is a plain text link, so its arc has to match whatever the footer is
   sitting on — white on the early steps, the band's gradient on the rates step.
   Written onto the loader's own borders rather than through GF's
   --gf-local-color hook: that variable is declared on the BUTTON, and setting it
   there did not reach the arc (measured 2026-08-31 — the arc stayed GF's
   #204ce5, invisible against the gradient). The two dim sides are the track the
   arc travels round. */
#quote-tool .gform_page_footer .gform_previous_button .gform-loader {
  border-color: rgba(0, 96, 175, 0.2);
  border-bottom-color: var(--qt-blue);
  border-left-color: var(--qt-blue);
}

#quote-tool.quote-tool--on-last .gform_page_footer .gform_previous_button .gform-loader {
  border-color: rgba(255, 255, 255, 0.25);
  border-bottom-color: var(--qt-white);
  border-left-color: var(--qt-white);
}

/* The prospect submits by clicking a rate card's Traction Rec link;
   quoteTool.js forwards that click to this button, so it must stay in the
   layout (visibility, never display). */
#quote-tool [id^="gform_submit_button_"] {
  visibility: hidden;
}

#quote-tool .gform-theme--framework .gform-field-label--type-inline {
  margin: 0;
}

/* Footer buttons: Next/submit are the DS gradient pill (hover slides the
   gradient to purple — see --qt-gradient-pill); Previous is a plain text link. */

#quote-tool .gform_page_footer .gform_next_button,
#quote-tool .gform_page_footer [id^="gform_submit_button_"] {
  padding: 18px 35px;
  background: var(--qt-gradient-pill);
  background-size: 300% 100%;
  background-position: 0 0;
  color: var(--qt-white);
  font-family: var(--qt-font-heading);
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--qt-radius-pill);
  cursor: pointer;
  transition: all 0.18s ease-in-out;
  box-shadow: none;
}

/* Only the position moves: a `background:` shorthand here would reset the
   size and snap the pill back to a single-width gradient. :focus-visible, not
   :focus, so a tap on a phone doesn't leave the pill stuck purple. */
#quote-tool .gform_page_footer .gform_next_button:hover,
#quote-tool .gform_page_footer .gform_next_button:focus-visible {
  background-position: 100% 0;
  color: var(--qt-white);
  box-shadow: none;
}

#quote-tool .gform_page_footer .gform_previous_button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--qt-blue);
  font-family: var(--qt-font-body);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.18s ease-in-out;
}

#quote-tool .gform_page_footer .gform_previous_button:hover {
  color: var(--qt-purple);
  background: none;
}

/* A footer with no Previous (step 1) keeps its pill on the right. */
#quote-tool .gform_page_footer .gform_next_button:only-child,
#quote-tool .gform_page_footer .gform_next_button:first-child:not(:only-child) {
  margin-left: auto;
}

/* Inputs: roomy white pills. Hover signals via border color; focus keeps the
   browser's default ring (the source system never suppresses outlines). */

#quote-tool .gform_wrapper .gfield input[type="text"],
#quote-tool .gform_wrapper .gfield input[type="email"],
#quote-tool .gform_wrapper .gfield input[type="tel"],
#quote-tool .gform_wrapper .gfield select {
  width: 100%;
  box-sizing: border-box;
  height: 58px;
  padding: 0 22px;
  font-family: var(--qt-font-body);
  font-size: 17px;
  color: var(--qt-ink);
  background: var(--qt-white);
  border: 1px solid var(--qt-input-border);
  border-radius: var(--qt-radius-input);
  transition: all 0.18s ease-in-out;
}

#quote-tool .gform_wrapper .gfield input[type="text"]:hover,
#quote-tool .gform_wrapper .gfield input[type="email"]:hover,
#quote-tool .gform_wrapper .gfield input[type="tel"]:hover,
#quote-tool .gform_wrapper .gfield select:hover {
  border-color: var(--qt-cyan-hover);
}

#quote-tool .gform_wrapper .gfield_label {
  font-family: var(--qt-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--qt-ink);
}

/* GF renders "(Required)" text (the form-level indicator setting is read from
   stored meta, so a render filter can't switch it) — collapse the text and draw
   the design's magenta asterisk instead. */
#quote-tool .gform_wrapper .gfield_required {
  color: var(--qt-magenta);
}

#quote-tool .gform_wrapper .gfield_required_text {
  font-size: 0;
}

#quote-tool .gform_wrapper .gfield_required_text::before {
  content: "*";
  font-size: 16px;
}

/* The stay-connected checkbox row (scoped by field type so the location and
   rate radios stay untouched). Full-row: its old grid partner, the referral
   select, is removed at render. */

#quote-tool .gfield--type-checkbox {
  grid-column: 1 / -1;
}

#quote-tool .gfield--type-checkbox .gchoice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Gravity Forms' Orbital theme already draws this box itself (appearance:
   none, its own SVG tick) — in GF's #204ce5, not a site colour. Repainted:
   white box, theme-blue border and tick when checked, cyan border on hover to
   match the text inputs. Every background longhand is restated on :checked
   because GF sets them one by one. */
#quote-tool .gfield--type-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  border: 2px solid var(--qt-input-border);
  border-radius: 4px;
  background: var(--qt-white);
  accent-color: var(--qt-blue);
  cursor: pointer;
  transition: border-color 0.18s ease-in-out;
}

#quote-tool .gfield--type-checkbox input[type="checkbox"]:hover {
  border-color: var(--qt-cyan-hover);
}

#quote-tool .gfield--type-checkbox input[type="checkbox"]:checked {
  border-color: var(--qt-blue);
  background-color: var(--qt-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230060af' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* GF's tick is a ::before pseudo-element painted over the box, so on its own
   the background above just sat underneath GF's #204ce5 tick (measured
   2026-09-02 — two ticks, GF's on top). */
#quote-tool .gfield--type-checkbox input[type="checkbox"]::before,
#quote-tool .gfield--type-checkbox input[type="checkbox"]::after {
  content: none;
  display: none;
}

#quote-tool .gfield--type-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--qt-purple);
  outline-offset: 2px;
}

#quote-tool .gfield--type-checkbox .gform-field-label {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  text-wrap: pretty;
}

/* Step 1 — photo beside the field grid (only while the intro step exists). --- */

#quote-tool .gform_page:has(.qt-copy-intro) .gform_page_fields {
  display: grid;
  grid-template-columns: minmax(240px, 33%) 1fr;
  gap: 45px;
}

#quote-tool .gform_page:has(.qt-copy-intro) .gform_page_fields::before {
  content: "";
  /* The photo, not the field column, used to set this row's height — 440px
     against ~380px of fields. Now it stretches to the fields and the floor
     only guards a very short column. */
  min-height: 360px;
  border-radius: var(--qt-radius-photo);
  background-image: url(../../../images/quote-tool/outdoor-stretch.jpg);
  background-size: cover;
  background-position: center;
}

/* The required-fields note sits left of the Next pill on the intro footer. */
#quote-tool .gform_page:has(.qt-copy-intro) .gform_page_footer::before {
  content: '"*" indicates required fields';
  font-size: 14px;
  color: var(--qt-gray);
}

/* Step 2 — the finder page becomes a grid: copy and search span both columns,
   then the map sits beside the card rail. display:contents promotes the
   finder's inner wrappers to grid items without moving any DOM (the finder JS
   queries structure, not layout). */

#quote-tool .gform_page:has(.quote-tool-map-field) .gform_fields {
  display: grid;
  grid-template-columns: minmax(320px, 470px) 1fr;
  gap: 25px;
  align-items: start;
}

#quote-tool .gform_page:has(.quote-tool-map-field) .gform_fields > .gfield.quote-tool-step-copy,
#quote-tool .gform_page:has(.quote-tool-map-field) .loc-finder__searchbar,
#quote-tool .gform_page:has(.quote-tool-map-field) .loc-finder__msg {
  grid-column: 1 / -1;
}

#quote-tool .gfield.quote-tool-map-field,
#quote-tool .quote-tool-map-field .loc-finder,
#quote-tool .quote-tool-map-field .loc-finder__layout,
#quote-tool .quote-tool-map-field .loc-finder__map {
  display: contents;
}

#quote-tool .quote-tool-map-field .shortcode-map {
  grid-column: 1;
  width: 100%;
  height: 540px;
  margin: 0;
  border: 0;
  border-radius: var(--qt-radius-photo);
}

#quote-tool .gform_page:has(.quote-tool-map-field) .gfield.location-cards {
  grid-column: 2;
  align-self: stretch;
}

/* quoteToolRail.js moves Step 2's native Next control into the selected hub's
   detail panel and relabels it "Select This Hub". Hide it while it is parked in
   the footer so there is never a second, competing forward action. */
#quote-tool .gform_page:has(.quote-tool-map-field) .gform_page_footer .gform_next_button {
  display: none;
}

#quote-tool .shortcode-map .marker {
  display: none;
}

/* Rates step — the whole module wears the band gradient; the discounts panel
   sits ON it beside the cards (2026-08-14 redesign), and only the footer
   closes in white. ---------------------------------------------------------- */

#quote-tool.quote-tool--on-last .quote-tool-container {
  background: var(--qt-gradient-banner);
}

#quote-tool.quote-tool--on-last .quote-tool__band {
  background: transparent;
}

/* Copy spans the full row, then panel | cards — the same :has() promotion AND
   the same column rhythm as the finder page (panel column == map column, so
   the rate cards match the location cards' size). Rows are pinned explicitly:
   the fields' DOM order is cards-before-panel (better reading order for a
   form), and sparse grid auto-placement would otherwise push the column-1
   panel below the cards. */
#quote-tool .gform_page:has(.gfield.quote-tool-radio) .gform_fields {
  display: grid;
  grid-template-columns: minmax(320px, 470px) 1fr;
  gap: 25px;
  align-items: start;
}

#quote-tool .gform_page:has(.gfield.quote-tool-radio) .gfield.quote-tool-step-copy {
  grid-column: 1 / -1;
  grid-row: 1;
}

#quote-tool .gform_page:has(.gfield.quote-tool-radio) .gfield.quote-tool-sheet {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
}

#quote-tool .gform_page:has(.gfield.quote-tool-radio) .gfield.quote-tool-radio {
  grid-column: 2;
  grid-row: 2;
}

/* The footer stays on the gradient — the band runs to the module's bottom
   corners, so Previous reads white. */
#quote-tool.quote-tool--on-last .gform_page_footer.top_label {
  margin-top: 24px;
  background: transparent;
}

#quote-tool.quote-tool--on-last .gform_page_footer .gform_previous_button {
  color: var(--qt-white);
}

#quote-tool.quote-tool--on-last .gform_page_footer .gform_previous_button:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Rate cards ---------------------------------------------------------------- */

/* The location and rate legends stay for screen readers only, and the location
   field's editor-facing description ("Populated at render time…") never shows. */
#quote-tool .quote-tool-radio legend,
#quote-tool .location-cards legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#quote-tool .location-cards .gfield_description,
#quote-tool .quote-tool-radio .gfield_description {
  display: none;
}

#quote-tool .quote-tool-radio {
  margin-top: 0;
}

/* The list scrolls beside the discounts panel; the mask fades its last rows
   as a "more below" hint (an overlay can't match the 2-stop gradient behind
   it — masking the content itself is background-agnostic). quoteTool.js drops
   the fade via the at-end class once the list is scrolled out or fits. */
#quote-tool .quote-tool-radio .gfield_radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: start;
  /* Tall enough that the next row of cards visibly peeks above the fade — with
     the peek gone, nothing says "more plans below".

     Held at 540px through the 2026-08-25 card redesign ON PURPOSE. Moving the
     meta onto the title row and dropping the Select pill took roughly 80px off
     every card, so the same box that fitted two rows plus a peek now fits about
     three — more plans above the fold without the step itself growing taller,
     which was the point. The figure is derived from the CSS, not measured: if
     the rows land wrong on the live page, adjust here rather than in the card.

     The panel stretches to the row, so the two columns keep a shared bottom
     edge at any height. The fade is short on purpose: it should read as "cut
     off, scroll" on the peeking row, never ghost a whole row's prices. */
  max-height: 540px;
  overflow-y: auto;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}

#quote-tool .quote-tool-radio--at-end .gfield_radio {
  mask-image: none;
  -webkit-mask-image: none;
}

/* Equal-height cards per row: the gchoice→label→.quote-item chain is all flex
   columns so the price + Select cluster pins to each card's bottom. */
#quote-tool .quote-tool-radio .gchoice {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--qt-radius-photo);
  color: var(--qt-white);
  transition: all 0.18s ease-in-out;
}

/* Hover inverts the card off the gradient: white sheet, navy characters. Every
   colour below is restated because .gchoice's white is set on descendants
   directly (see the note above the label rule) — inheritance alone would leave
   white text on a white card. */
#quote-tool .quote-tool-radio .gchoice:hover {
  background: var(--qt-white);
  border-color: var(--qt-white);
}

#quote-tool .quote-tool-radio .gchoice:hover label,
#quote-tool .quote-tool-radio .gchoice:hover .quote-item,
#quote-tool .quote-tool-radio .gchoice:hover .quote-item__title {
  color: var(--qt-navy);
}

#quote-tool .quote-tool-radio .gchoice:hover .quote-item__meta,
#quote-tool .quote-tool-radio .gchoice:hover .quote-item__desc {
  color: rgba(0, 52, 95, 0.78);
}

/* Gravity Forms colors the choice <label> directly, which severs the card's
   white inheritance from .gchoice — on the gradient, the meta line and the
   price then render GF's dark control color. Everything inside opts back in. */
#quote-tool .quote-tool-radio .gchoice label,
#quote-tool .quote-tool-radio .quote-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--qt-white);
}

#quote-tool .quote-tool-radio input[type="radio"] {
  display: none;
}

/* Title left, meta right, one row. min-width:0 lets a long plan name wrap
   instead of shoving the meta out of the card; the meta itself never shrinks,
   because "Ages 27+ · Monthly" broken across two lines costs back the vertical
   space this row exists to save. */
#quote-tool .quote-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#quote-tool .quote-item__title {
  min-width: 0;
  margin: 0;
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -2px;
  color: var(--qt-white);
}

#quote-tool .quote-item__meta {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
}

/* Composition line on group plans ("Up to 2 adults … and 4 children …") —
   supporting copy, so it steps back half a tone from the meta line. */
#quote-tool .quote-item__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

/* Price + Select are the card's bottom cluster: the auto margin takes the
   row's slack (rows stretch to their tallest card), so prices and pills stay
   aligned across a row however long each card's copy runs. The padding is the
   floor — the gap never closes past it on the row's tallest card. */
#quote-tool .quote-item__price {
  margin: auto 0 0;
  padding: 10px 0 0;
}

#quote-tool .quote-item__amount {
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -2px;
}

#quote-tool .quote-item__amount--verbatim {
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -1px;
}

#quote-tool .quote-item__term {
  font-family: var(--qt-font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
}

/* Was the white Select pill; since 2026-08-25 it is the card's hit area,
   stretched edge to edge over .gchoice (which is position:relative for exactly
   this). Invisible, but still a real anchor: it carries the Traction Rec deep
   link, and being the only focusable thing in the card — the rate radios are
   display:none — it is also how the keyboard reaches a plan. */
#quote-tool .quote-item__select {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--qt-radius-photo);
  text-decoration: none;
}

/* Its label is for screen readers; the card's own text is what sighted users
   read underneath. */
#quote-tool .quote-item__select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The anchor covers the card, so its focus ring IS the card's focus ring. */
#quote-tool .quote-item__select:focus-visible {
  outline: 3px solid var(--qt-white);
  outline-offset: 3px;
}

#quote-tool .quote-tool-radio .gchoice:hover .quote-item__select:focus-visible {
  outline-color: var(--qt-navy);
}

/* Shown by quoteTool.js if a branch somehow renders with no plans at all (a
   catalog fetch degrading, not a normal state). Created in JS, so it has no
   markup counterpart. Sits on the gradient. */
#quote-tool .quote-tool-empty {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
  padding: 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  border-radius: var(--qt-radius-card);
  text-align: center;
  color: var(--qt-white);
  font-size: 18px;
}

/* The Discounts & Add-Ons panel — a white card on the gradient, beside the
   rate cards. The Y for All note leads it; the add-ons follow. ------------- */

#quote-tool .gfield.quote-tool-sheet {
  box-sizing: border-box;
  padding: 20px;
  background: var(--qt-white);
  border-radius: var(--qt-radius-card);
}

/* Fills the stretched field, so a short panel still reaches the band's bottom. */
#quote-tool .qt-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#quote-tool .qt-sheet__change-hub {
  /* GF themes bare buttons inline-flex and top-aligned, which drops this one
     below the sentence it sits in. */
  display: inline-block;
  vertical-align: baseline;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  /* GF's Orbital theme gives every <button> its control height (min-height
     38px). Inline in a 25px line, that made whichever line it landed on ~13px
     taller — invisible on desktop, where it ends the paragraph, obvious on
     phones, where the wrap puts it mid-paragraph (measured 2026-09-02: one
     38px line box among 22px ones). */
  min-height: 0;
  height: auto;
  color: var(--qt-blue);
  cursor: pointer;
  transition: all 0.18s ease-in-out;
}

#quote-tool .qt-sheet__change-hub:hover {
  color: var(--qt-purple);
}

/* In the on-gradient intro sentence the link reads white and underlined. */
#quote-tool .qt-rates-intro .qt-sheet__change-hub {
  color: var(--qt-white);
  text-decoration: underline;
}

#quote-tool .qt-rates-intro .qt-sheet__change-hub:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* One step under the card's headline (.qt-sheet__assist-title, 30px). Both
   were 30px for a day (2026-09-17) and the card read as two unrelated panels
   glued together — type scale is what carries hierarchy in this design system,
   so the section that heads four 15px list rows takes the 24px item-title size
   the rate cards use, tracked -1px like the hub panel's subheads (on white,
   -2px at this size gets crunchy). */
#quote-tool .qt-sheet__discounts-title {
  margin: 0;
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -1px;
  color: #000;
  text-wrap: balance;
}

/* Intro line under the panel title (client copy, 2026-09-10). It carries the
   list's top margin so .qt-sheet__list keeps its own spacing rhythm. */
#quote-tool .qt-sheet__discounts-intro {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--qt-gray);
  text-wrap: pretty;
}

#quote-tool .qt-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 16px 0 0;
}

#quote-tool .qt-sheet__discount-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

#quote-tool .qt-sheet__discount-detail {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--qt-gray);
  text-wrap: pretty;
}

/* Leads the panel as of 2026-09-17 — the client wanted Y for All read first and
   the add-ons demoted below it, so the hairline that used to sit above this note
   now closes it off from the Discounts section that follows.

   A single stack — icon, title, copy, link — on the card's left edge. It was an
   icon column beside a body column, which was fine for a two-line footnote but
   put a 30px headline 38px further right than the Discounts heading under it,
   and left a dead gutter beside the copy. The link's own 10px bottom padding is
   part of the 20px visual gap above the rule, hence the 10px padding here. */
#quote-tool .qt-sheet__assist {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--qt-hairline);
  font-size: 14px;
  line-height: 22px;
  text-wrap: pretty;
}

/* The card's one visual anchor, above the headline. Stroked, blue, a touch
   larger than the set-solid 30px title so the pair reads as one unit. */
#quote-tool .qt-sheet__assist .icon {
  display: flex;
  width: 32px;
  height: 32px;
  margin: 0 0 14px;
  color: var(--qt-blue);
}

/* Matches .qt-sheet__discounts-title exactly: the panel now reads as two peer
   sections, Y for All first. It was a 15px <p> sized like a discount row while
   the note was a footnote pinned under the list. */
#quote-tool .qt-sheet__assist-title {
  margin: 0;
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -2px;
  color: #000;
  text-wrap: balance;
}

#quote-tool .qt-sheet__assist-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--qt-gray);
}

/* The three application steps (client copy, 2026-09-18). Numbered, unlike the
   four discount rows below: these are actions in sequence and the order IS the
   instruction. Markers hang in a 22px gutter rather than using list-style, so a
   wrapped step keeps one straight left edge with the paragraphs around it —
   list-style-position: inside would re-indent the wrap under the number, and
   Gravity Forms' theme reset strips list markers inside the form anyway. */
#quote-tool .qt-sheet__assist-steps {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: qt-assist-step;
}

#quote-tool .qt-sheet__assist-steps li {
  position: relative;
  counter-increment: qt-assist-step;
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 21px;
  color: var(--qt-gray);
  text-wrap: pretty;
}

#quote-tool .qt-sheet__assist-steps li::before {
  content: counter(qt-assist-step) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  color: var(--qt-blue);
}

/* FAYMCA is the one string a member has to reproduce exactly, so it reads at
   full ink weight and never breaks across a line. Matches the <strong> the
   sign-up guide wraps the same code in (quoteToolAssistance.js). */
#quote-tool .qt-sheet__assist-steps strong {
  color: var(--qt-ink);
  white-space: nowrap;
}

/* Step 1 says "to the right", which is only true in the desktop grid (panel in
   column 1, rate cards in column 2). Under 60em the panel drops below the cards
   — see the stacked step-3 rules in the max-width: 60em block — so the other
   span takes over and the sentence says "above". Exactly one is ever shown. */
#quote-tool .qt-assist-dir--above {
  display: none;
}

#quote-tool .qt-sheet__assist a {
  color: var(--qt-blue);
  /* A phone number never breaks across lines. */
  white-space: nowrap;
}

/* Y for All sign-up guide. Native dialog escapes the tool's clipped shell. */
#quote-tool .qt-assist-trigger {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  height: auto;
  margin: 8px 0 0;
  padding: 10px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--qt-blue);
  font: 700 15px/24px var(--qt-font-body);
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

/* A stroked icon in the label's own blue, not the gradient badge this used to
   be: the badge was the heaviest mark in the panel, so a secondary link out-
   shouted the Y for All note it sits under and clashed with the stroked
   heart-handshake heading that icon set. Sized to the label, not to a chip. */
#quote-tool .qt-assist-trigger__icon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  /* Optically centers on the first 24px text line, including when it wraps. */
  margin-top: 3px;
  border-radius: 50%;
  color: var(--qt-blue);
}

/* Beats the 20px .qt-sheet__assist .icon rule above (same specificity, later in
   the file is too fragile to rely on) — the icon has to fill the 18px box the
   pulse ring is measured against. */
#quote-tool .qt-sheet__assist .qt-assist-trigger__icon .icon {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  color: inherit;
}

#quote-tool .qt-assist-trigger__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--qt-purple);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

#quote-tool.quote-tool--on-last .qt-assist-trigger:not([data-seen]) .qt-assist-trigger__icon::after {
  animation: qt-assist-pulse 1.6s ease-out 3;
}

@keyframes qt-assist-pulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.65); opacity: 0; }
}

#quote-tool .qt-assist-trigger:hover .qt-assist-trigger__icon {
  color: var(--qt-purple);
}

#quote-tool .qt-assist-trigger:hover .qt-assist-trigger__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.qt-assist-open { overflow: hidden; }

.qt-assist-guide {
  box-sizing: border-box;
  position: fixed;
  inset: auto;
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--qt-hairline);
  border-radius: var(--qt-radius-card);
  background: var(--qt-white);
  box-shadow: 0 16px 54px rgba(0, 52, 95, .24);
  color: var(--qt-ink);
  font-family: var(--qt-font-body);
  text-align: left;
}

.qt-assist-guide:not([open]), .qt-assist-guide [hidden] { display: none !important; }
.qt-assist-guide::backdrop { background: rgba(0, 32, 59, .2); }

.qt-assist-guide__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 24px;
  background: var(--qt-gradient);
  color: var(--qt-white);
}

.qt-assist-guide__eyebrow {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .04em;
}
.qt-assist-guide__eyebrow span { margin: 0 5px; opacity: .6; }

.qt-assist-guide__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--qt-white);
  font: 300 30px/1 var(--qt-font-body);
  cursor: pointer;
}
.qt-assist-guide__close:hover { background: rgba(255, 255, 255, .16); }
.qt-assist-guide__copy { padding: 20px 24px 16px; }
.qt-assist-guide__title {
  margin: 0 0 8px;
  color: var(--qt-navy);
  font: 700 30px/1 var(--qt-font-heading);
  letter-spacing: -1px;
}
.qt-assist-guide__description {
  min-height: 44px;
  margin: 0;
  color: var(--qt-gray);
  font-size: 15px;
  line-height: 22px;
}
.qt-assist-guide__step { padding: 0 16px; }
.qt-assist-guide__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 48dvh;
  border: 1px solid var(--qt-hairline);
  border-radius: 10px;
  background: #f4f7fa;
  object-fit: contain;
}
.qt-assist-guide__error { margin: 8px 0; font-size: 13px; line-height: 1.5; }
.qt-assist-guide__error a { color: var(--qt-blue); text-decoration: underline; }
.qt-assist-guide__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 20px;
  background: var(--qt-white);
}
.qt-assist-guide__progress { display: flex; gap: 6px; margin-right: auto; }
.qt-assist-guide__progress span { width: 8px; height: 8px; border-radius: 50%; background: var(--qt-rule); }
.qt-assist-guide__progress .is-current { background: var(--qt-purple); }
.qt-assist-guide__next, .qt-assist-guide__back {
  min-height: 44px;
  margin: 0;
  border: 0;
  cursor: pointer;
  font: 700 17px/1 var(--qt-font-heading);
}
.qt-assist-guide__next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: var(--qt-radius-pill);
  background: var(--qt-gradient-pill);
  background-size: 300% 100%;
  color: var(--qt-white);
  transition: background-position .18s ease-in-out;
}
.qt-assist-guide__next:hover { background-position: 100% 0; }
.qt-assist-guide__back { padding: 0; background: none; color: var(--qt-blue); }
.qt-assist-guide__back:hover { color: var(--qt-purple); }
#quote-tool .qt-assist-trigger:focus-visible, .qt-assist-guide button:focus-visible,
.qt-assist-guide video:focus-visible, .qt-assist-guide a:focus-visible {
  outline: 3px solid var(--qt-purple);
  outline-offset: 3px;
}
.qt-assist-guide__close:focus-visible { outline-color: var(--qt-white) !important; }

@media (max-width: 767px) {
  .qt-assist-guide__header { padding-left: 20px; }
  .qt-assist-guide__copy { padding: 16px 20px; }
  .qt-assist-guide__footer { padding: 12px 20px 16px; }
  .qt-assist-guide__step { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #quote-tool.quote-tool--on-last .qt-assist-trigger .qt-assist-trigger__icon::after { animation: none; }
  .qt-assist-guide__next { transition: none; }
}

@media (max-height: 500px) and (min-width: 568px) {
  .qt-assist-guide__header { padding-top: 2px; padding-bottom: 2px; }
  .qt-assist-guide__copy { padding: 10px 20px; }
  .qt-assist-guide__title { margin-bottom: 6px; font-size: 26px; }
  .qt-assist-guide__description { min-height: 0; }
  .qt-assist-guide__video { max-height: max(90px, calc(100dvh - 246px)); }
  .qt-assist-guide__footer { padding: 8px 20px; }
}

/* Step-3 body copy sits on the gradient — same anatomy as the other steps'
   qt-copy, opted to white. */
#quote-tool .qt-copy-rates .qt-copy__title {
  color: var(--qt-white);
}

#quote-tool .qt-copy-rates .qt-copy__text {
  color: var(--qt-white);
}

/* Confirmation ----------------------------------------------------------------
   The purple thank-you panel (gform_confirmation filter). .submitted is added
   by quoteTool.js at click time and re-asserted by gform_confirmation_loaded. */

#quote-tool.submitted .quote-tool__band {
  display: none;
}

/* Belt and braces: gform_confirmation_loaded does not fire for a custom
   confirmation string, so the on-last gradient could linger behind the panel. */
#quote-tool.submitted .quote-tool-container {
  background: none;
}

#quote-tool.submitted .quote-tool__body {
  padding: 0;
}

/* The purple thank-you panel closes the module itself. */
#quote-tool.submitted .quote-tool__foot {
  display: none;
}

#quote-tool .qt-confirm {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  background: var(--qt-gradient-panel-purple);
  font-family: var(--qt-font-body);
}

#quote-tool .qt-confirm__media {
  flex: 0 0 40%;
  background-image:
    linear-gradient(156.86deg, rgba(147, 31, 141, 0.62) 0, rgba(91, 46, 145, 0.62) 52%),
    url(../../../images/quote-tool/gym-celebration.jpg);
  background-size: cover, cover;
  background-position: center, center;
  border-radius: var(--qt-radius-hero);
}

#quote-tool .qt-confirm__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 45px 40px;
  color: var(--qt-white);
}

#quote-tool .qt-confirm__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

#quote-tool .qt-confirm__title {
  margin: 12px 0 0;
  font-family: var(--qt-font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -2px;
  color: var(--qt-white);
}

#quote-tool .qt-confirm__body {
  margin: 20px 0 0;
  max-width: 440px;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  text-wrap: pretty;
}

#quote-tool .qt-confirm__summary {
  max-width: 440px;
  margin-top: 0;
}

#quote-tool .qt-confirm__summary-title {
  max-width: 440px;
  margin: 28px 0 0;
  padding: 18px 0 6px;
  font-family: var(--qt-font-heading);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.3px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

#quote-tool .qt-confirm__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#quote-tool .qt-confirm__row:last-child {
  border-bottom: 0;
}

#quote-tool .qt-confirm__row dt {
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

#quote-tool .qt-confirm__row dd {
  margin: 0;
  font-size: 17px;
  text-align: right;
}

#quote-tool .qt-confirm__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 720px;
  margin-top: 32px;
}

#quote-tool .qt-confirm__path {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

#quote-tool .qt-confirm__path-title {
  margin: 0;
  font-family: var(--qt-font-heading);
  font-size: 19px;
  line-height: 22px;
}

#quote-tool .qt-confirm__path-copy {
  margin: 8px 0 18px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
}

/* DS ButtonWhite on the purple panel. */
#quote-tool .qt-confirm__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  margin-top: auto;
  padding: 16px 18px;
  background: var(--qt-white);
  color: #000;
  font-family: var(--qt-font-heading);
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--qt-white);
  border-radius: var(--qt-radius-photo);
  transition: all 0.18s ease-in-out;
}

#quote-tool .qt-confirm__cta:hover {
  background: transparent;
  color: var(--qt-white);
}

#quote-tool .qt-confirm__cta--secondary {
  background: transparent;
  color: var(--qt-white);
}

#quote-tool .qt-confirm__cta--secondary:hover {
  background: var(--qt-white);
  color: #000;
}

#quote-tool .qt-confirm__restart {
  align-self: flex-start;
  margin-top: 18px;
  color: var(--qt-white);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

#quote-tool .qt-confirm__restart:hover {
  text-decoration-color: currentColor;
}

#quote-tool .qt-confirm__note {
  margin: 28px 0 0;
  max-width: 440px;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.9);
}

#quote-tool .qt-confirm__note a {
  color: var(--qt-white);
  text-decoration: underline;
}

/* Responsive ------------------------------------------------------------------
   Desktop-first; the DS ladder's 60em breakpoint does the heavy lifting. */

@media (max-width: 60em) {
  #quote-tool {
    --qt-pad-x: 24px;
  }

  #quote-tool .quote-tool__band {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  #quote-tool .quote-tool__foot {
    height: 10px;
  }

  #quote-tool .quote-tool__heading {
    font-size: 32px;
    line-height: 32px;
  }

  /* Three labels plus their tokens will not sit side by side at this width, so
     the token stacks over its label and the column centres instead. */
  #quote-tool .quote-tool__progress span {
    height: 6px;
  }

  #quote-tool .quote-tool__steplabels span[data-step] {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.3px;
  }

  #quote-tool .quote-tool__stepnum {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  #quote-tool .qt-copy__title {
    font-size: 28px;
    line-height: 28px;
  }

  /* Step 1: photo strip above a single column. */
  #quote-tool .gform_page:has(.qt-copy-intro) .gform_page_fields {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  #quote-tool .gform_page:has(.qt-copy-intro) .gform_page_fields::before {
    min-height: 180px;
  }

  /* Step 2: single column, map first (DOM order: copy, search, map, cards). */
  #quote-tool .gform_page:has(.quote-tool-map-field) .gform_fields {
    grid-template-columns: 1fr;
  }

  #quote-tool .gform_page:has(.quote-tool-map-field) .gform_fields > .gfield.quote-tool-step-copy,
  #quote-tool .gform_page:has(.quote-tool-map-field) .loc-finder__searchbar,
  #quote-tool .gform_page:has(.quote-tool-map-field) .loc-finder__msg,
  #quote-tool .quote-tool-map-field .shortcode-map,
  #quote-tool .gform_page:has(.quote-tool-map-field) .gfield.location-cards {
    grid-column: 1;
  }

  #quote-tool .quote-tool-map-field .shortcode-map {
    height: 320px;
  }

  /* Step 3: single column — the plans first, the Discounts & Add-Ons panel
     after them (DOM order). The panel used to lead, on the theory that
     discounts belong above the fold; on a phone it runs a full screen tall and
     pushed every plan below the fold instead (client note 2026-09-02). The
     list flows in full instead of scrolling. */
  #quote-tool .gform_page:has(.gfield.quote-tool-radio) .gform_fields {
    grid-template-columns: 1fr;
  }

  #quote-tool .gform_page:has(.gfield.quote-tool-radio) .gfield.quote-tool-sheet {
    grid-column: 1;
    grid-row: 3;
    align-self: auto;
  }

  #quote-tool .gform_page:has(.gfield.quote-tool-radio) .gfield.quote-tool-radio {
    grid-column: 1;
    grid-row: 2;
  }

  /* Cards above, panel below (the rows just set) — so step 1 of the Y for All
     copy has to point up, not right. */
  #quote-tool .qt-assist-dir--beside {
    display: none;
  }

  #quote-tool .qt-assist-dir--above {
    display: inline;
  }

  /* minmax(0, 1fr), not 1fr: a bare 1fr track can't go below its content's
     min-content width, so one unbreakable title word plus the nowrap meta
     could push the cards past the column edge (see the ≤375px block below). */
  #quote-tool .quote-tool-radio .gfield_radio {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Confirmation stacks, photo on top. */
  #quote-tool .qt-confirm {
    flex-direction: column;
  }

  #quote-tool .qt-confirm__media {
    flex: none;
    min-height: 200px;
    border-radius: 0;
  }

  #quote-tool .qt-confirm__content {
    padding: 30px 24px;
  }

  #quote-tool .qt-confirm__title {
    font-size: 32px;
    line-height: 32px;
  }
}

/* Small phones (≤375px): the rate card's title/meta row can't hold both. The
   longest title word plus the nowrap meta is wider than the card — measured
   2026-09-02 at 320px: 116px "Membership" + 12px gap + 125px "Ages 11–18 ·
   Monthly" + 36px padding = a 291px card in a 242px column (still 9px over at
   360px), and the list's overflow-y:auto turned that into a horizontal scroll.
   The meta drops under the title here and wraps if it must. */
@media (max-width: 23.4375em) {
  #quote-tool .quote-item__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #quote-tool .quote-item__meta {
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 48em) {
  #quote-tool .gform_page_footer.top_label {
    flex-direction: column-reverse;
    gap: 15px;
    align-items: stretch;
  }

  #quote-tool .gform_page_footer .gform_next_button,
  #quote-tool .gform_page_footer .gform_next_button:only-child {
    width: 100%;
    margin-left: 0;
  }

  #quote-tool .gform_page:has(.qt-copy-intro) .gform_page_footer::before {
    order: 1;
    text-align: center;
  }

  #quote-tool .qt-confirm__actions {
    grid-template-columns: 1fr;
  }
}