/* ============================================================================
   Public quotation + payment pages (pq-*)

   The client's quotation (/p/:agency_slug/quotations/:token), the staff preview
   of it, and the payment page reached from it. One visual grammar for all three:
   a stack of white sheets on a quiet ground, one hairline, one radius, one
   barely-there lift — a quotation should look printed, not decorated — read down
   a single column capped at a comfortable measure. From 1180px up a narrow
   sticky column opens beside the quotation for a précis of the price; the
   payment page keeps the one column, because a person paying has one job.

   Mobile is the primary layout, not a shrunken desktop: this page is most often
   opened on the phone the quotation email arrived on.

   The tokens below are the page's own and are deliberately not aliases onto the
   Kernol design system: this page is the agency's, and it keeps the brand tokens
   (--navy, --coral, --ink, --muted…) and the `cq-` rules of the quotation page it
   was modelled on, renamed to `pq-`. Scoped to body.pq-page
   (layouts/public_quotation); namespaced --pq-* / .pq-*.
   ============================================================================ */

:root {
  /* Brand tokens. */
  --navy: #1a3363;
  --navy-dark: #12244a;
  --coral: #e0553f;
  --coral-dark: #d94836;
  --ink: #24303f;
  --muted: #5c6a7a;
  --line: #dfe5ec;
  --bg-soft: #f4f7fb;
  --ok: #05ba00;

  /* Tints: a tinted header row or panel, a stripe, a rule between rows. */
  --pq-head: #eff6ff;
  --pq-stripe: #f9fafb;
  --pq-rule: #e5e7eb;

  /* The page is a stack of white sheets on a quiet ground. One border colour,
     one radius and one shadow across every box. */
  --pq-ground: #f4f6f9;
  --pq-edge: #e4e8ee;
  --pq-lift: 0 1px 2px rgb(16 24 40 / 5%);
  --pq-round: 16px;

  /* One spacing scale, used for every gap on the page. The section padding and
     the gap between sections are deliberately the same figure so the rhythm
     down the page does not change when a section is empty and drops out. */
  --pq-pad: 18px;
  --pq-gap: 14px;
  --pq-step: 16px;

  /* ─── Aliases the payment page and the Stripe Payment Element read ──────────
     (stripe_payment_controller.js dresses the card form in --pq-primary*). All
     of them resolve onto the brand tokens above so the two pages cannot drift. */
  --pq-page-bg:     var(--pq-ground);
  --pq-card:        #fff;
  --pq-border:      var(--pq-edge);
  --pq-head-line:   #dbe6f7;
  --pq-rule-strong: var(--line);

  --pq-navy:     var(--navy);
  --pq-ink:      var(--ink);
  --pq-ink-soft: var(--ink);
  --pq-muted:    var(--muted);
  --pq-faint:    var(--muted);

  --pq-cta:         var(--coral);
  --pq-cta-hover:   var(--coral-dark);
  --pq-cta-ink:     #fff;
  --pq-accent:      var(--navy);
  --pq-accent-ink:  var(--navy);
  --pq-accent-soft: var(--pq-head);
  --pq-accent-line: #dbe6f7;
  --pq-warm:        var(--coral);

  --pq-primary:     var(--pq-accent);
  --pq-primary-700: var(--pq-accent-ink);
  --pq-primary-50:  var(--pq-accent-soft);

  --pq-ok:        var(--ok);
  --pq-ok-ink:    #14532d;
  --pq-ok-soft:   #f2fbf3;
  --pq-ok-line:   #bfe6c2;
  --pq-warn:      #9a3412;
  --pq-warn-ink:  #7c2d12;
  --pq-warn-soft: #fff7ed;
  --pq-warn-line: #fdba74;
  --pq-neg:       #8a1c12;
  --pq-neg-ink:   #8a1c12;
  --pq-neg-soft:  #fdeceb;
  --pq-neg-line:  #f3c2bd;

  --pq-r-sm:   12px;
  --pq-r-xs:   10px;
  --pq-r-full: 999px;
  --pq-header-h: 60px;
}

/* ─── Page frame ─────────────────────────────────────────────────────────── */
body.pq-page {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--pq-ground);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Element resets, at zero specificity. Wrapped in :where() so that a reset on a bare
   element — `dl`, `dd`, `p`, `fieldset` — can never outrank a single-class rule
   further down (.pq-lines, .pq-bank, .pq-note …): a component's own margin always
   wins over the page's default, which is the only sensible order for a stylesheet
   that sets the margin on both. */
.pq-page * { box-sizing: border-box; }
:where(.pq-page h1, .pq-page h2, .pq-page h3, .pq-page p, .pq-page ul, .pq-page ol) {
  margin: 0;
  margin-top: 6px;
}
:where(.pq-page dl, .pq-page dd, .pq-page figure, .pq-page fieldset) { margin: 0; }
:where(.pq-page ul, .pq-page ol) { padding: 0; list-style: none; }
:where(.pq-page fieldset) { padding: 0; border: 0; min-width: 0; }
:where(.pq-page a) { color: var(--navy); }
:where(.pq-page img) { max-width: 100%; display: block; }
.pq-page :focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 6px; }
:where(.pq-page button[disabled]) { cursor: not-allowed; opacity: .55; }

/* Nothing on this page needs to move to be understood. */
@media (prefers-reduced-motion: reduce) {
  .pq-page *, .pq-page *::before, .pq-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Screen readers only. Carries the words a visual cue leaves unsaid: what a
   struck-through figure was, and what the × on the bottom bar closes. */
.pq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Header ───────────────────────────────────────────────────────────────

   The agency's mark and name, and how to reach a person. "Questions?" is there
   from the first pixel of the page; the payment button is not — it appears only
   once the reader has passed the summary card (sticky_cta_controller.js), and
   only between 900 and 1179px, where there is room beside the brand but not yet
   for the margin column. */
.pq-headerbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.pq-headerbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 20px;
  max-width: 1440px; margin: 0 auto;
}
.pq-brand { display: flex; align-items: center; text-decoration: none; flex: 1; min-width: 0; }
.pq-brand__logo { margin-right: 0.625rem; height: 44px; width: auto; flex: 0 0 auto; }
.pq-brand__mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; margin-right: 0.625rem;
  border-radius: 10px; background: var(--navy); color: #fff;
  font-size: 1.14rem; font-weight: 800;
}
.pq-brand__text { display: flex; flex-direction: column; min-width: 0; }
.pq-brand__name { font-weight: 800; color: var(--navy); font-size: 1.14rem; letter-spacing: .2px; line-height: 1.2; }
.pq-brand__tagline {
  font-size: .78rem; font-weight: 400; color: var(--muted);
  letter-spacing: .02em; line-height: 1.35; word-break: keep-all;
}

.pq-headerbar__actions { display: flex; gap: 14px; align-items: center; flex: 0 0 auto; }

.pq-page .pq-headerbar__ask {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pq-page .pq-headerbar__ask:hover { color: var(--coral-dark); }

/* The site's own primary button, at header size. */
.pq-page .pq-headerbar__cta {
  display: none;
  border: 0; cursor: pointer; text-decoration: none;
  font-weight: 700; border-radius: 999px; transition: background .15s ease, transform .15s ease;
  text-align: center; font-family: inherit;
  background: var(--coral); color: #fff;
  padding: 10px 20px; font-size: .9rem;
  box-shadow: 0 6px 18px rgba(224, 85, 63, .35);
}
.pq-page .pq-headerbar__cta:hover { background: var(--coral-dark); transform: translateY(-1px); text-decoration: none; }
@media (min-width: 900px) and (max-width: 1179px) {
  .pq-page .pq-headerbar__cta.is-visible { display: inline-block; }
}

@media (max-width: 560px) {
  .pq-headerbar__inner { padding: 8px 10px; gap: 8px; }
  .pq-brand__tagline { display: none; }
  .pq-brand__logo, .pq-brand__mark { height: 40px; }
  .pq-brand__mark { width: 40px; }
  .pq-headerbar__actions { gap: 8px; }
  .pq-page .pq-headerbar__ask { font-size: .85rem; }
}

/* ─── Layout ───────────────────────────────────────────────────────────────

   One reading column, capped at a comfortable measure rather than the width
   of the screen. From 1180px up a second column opens beside it for the
   sticky summary; below that the shell is the column. */
.pq-main { padding: 0 0 48px; background: var(--pq-ground); }

.pq-shell {
  display: flex;
  flex-direction: column;
  max-width: 880px;
  padding: var(--pq-gap) 12px 0;
  margin: 0 auto;
}

.pq-col {
  display: flex;
  flex-direction: column;
  gap: var(--pq-gap);
  min-width: 0;
}

/* ─── Type ─────────────────────────────────────────────────────────────────── */
.pq-h1 { font-size: 1.55rem; font-weight: 800; line-height: 1.22; color: var(--navy); letter-spacing: -.015em; }
.pq-h2 { font-size: 1.14rem; font-weight: 800; line-height: 1.3; color: var(--navy); letter-spacing: -.01em; }
.pq-h3 { margin-top: var(--pq-step); font-size: .98rem; font-weight: 700; color: var(--navy); }

.pq-eyebrow {
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pq-lede { margin-top: 8px; color: var(--muted); font-size: 0.75rem; }
.pq-lede--sm { font-size: .93rem; margin-bottom: 4px; }
.pq-note { margin-top: 12px; font-size: .86rem; color: var(--muted); }
.pq-note--ok { color: var(--ok); font-weight: 600; }
.pq-note--tight { margin-top: 6px; }
.pq-note a { color: var(--navy); }

.pq-sm { font-size: .9rem; color: var(--ink); }
.pq-xs { font-size: .82rem; color: var(--muted); }
.pq-num { font-variant-numeric: tabular-nums; }
.pq-strong { font-weight: 700; color: var(--navy); }
.pq-ref { font-weight: inherit; }

/* The quiet second action. A link and not a button on purpose: asking a
   question must be easy to find and must not look like it competes with the one
   thing the section exists for. */
.pq-page .pq-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pq-page .pq-link:hover { color: var(--coral-dark); }
.pq-page .pq-link-sm { font-size: .86rem; font-weight: 700; color: var(--navy); }
.pq-linkbtn {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--navy); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ─── Icons (payment page only) ─────────────────────────────────────────── */
.pq-ic { display: inline-block; vertical-align: -.15em; flex: none; }
.pq-ic-sm { width: 15px; height: 15px; }
.pq-ic-md { width: 18px; height: 18px; }
.pq-ic-lg { width: 22px; height: 22px; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */

/* Every section is a sheet: white, one hairline, one radius, one barely-there
   lift. Nothing is tinted, gradiented or shadowed harder than that — the boxes
   are here to hold text apart on a phone, not to compete with the price. */
.pq-card,
.pq-sheet,
.pq-hero {
  padding: var(--pq-pad);
  background: #fff;
  border: 1px solid var(--pq-edge);
  border-radius: var(--pq-round);
  box-shadow: var(--pq-lift);
}

/* Direct children of a section are spaced by one rule rather than each carrying
   its own margin, so a section reads the same whether or not its optional parts
   rendered. The first child never adds space; every later one adds one step. */
.pq-hero > * + * { margin-top: var(--pq-step); }
.pq-card > * + *, .pq-sheet > * + * { margin-top: 6px; }

/* A heading owns the gap under it, so a heading followed by its lede stays
   tighter than two unrelated blocks. */
.pq-card > .pq-h2 + .pq-lede, .pq-sheet > .pq-h2 + .pq-lede,
.pq-hero > .pq-h1 + .pq-lede { margin-top: 6px; }

/* The itinerary is a block with its own shape, not a lede clinging to the
   title, so it keeps a little more air than a sentence would. */
.pq-hero > .pq-h1 + .pq-trip { margin-top: 12px; }

.pq-card--muted, .pq-sheet--muted { background: var(--pq-stripe); }
.pq-card--center, .pq-sheet--center { text-align: center; }

/* Only genuine state gets a marker: green when the relocation is running, navy
   on the block the client is meant to act in. An inset rule rather than a
   border-left so the sheet keeps its radius on all four corners. */
.pq-card--ok, .pq-sheet--ok { box-shadow: var(--pq-lift), inset 3px 0 0 var(--ok); }
.pq-card--action, .pq-sheet--action { box-shadow: var(--pq-lift), inset 3px 0 0 var(--navy); scroll-margin-top: 84px; }

.pq-alert { padding: 14px 16px; font-size: .93rem; border-radius: 12px; }
.pq-alert--error { color: #8a1c12; background: #fdeceb; border: 1px solid #f3c2bd; }
.pq-alert--ok { color: #14532d; background: #f2fbf3; border: 1px solid #bfe6c2; }
.pq-alert h3 { margin-bottom: 6px; }
.pq-alert > p + p { margin-top: 8px; }

.pq-errors {
  padding: 12px 14px; font-size: .93rem; border-radius: 12px;
  color: #8a1c12; background: #fdeceb; border: 1px solid #f3c2bd;
}
.pq-errors li + li { margin-top: 3px; }
.pq-errors[hidden] { display: none; }

/* The payment page's state banners. */
.pq-banner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; font-size: .93rem; border-radius: 12px;
  border: 1px solid var(--pq-edge); background: #fff; color: var(--ink);
}
.pq-banner .pq-ic { margin-top: 4px; }
.pq-banner__title { font-weight: 700; }
.pq-banner p { margin-top: 2px; }
.pq-banner--pos     { background: #f2fbf3; border-color: #bfe6c2; color: #14532d; }
.pq-banner--warn    { background: #fff7ed; border-color: #fdba74; color: #7c2d12; }
.pq-banner--neg     { background: #fdeceb; border-color: #f3c2bd; color: #8a1c12; }
.pq-banner--neutral { color: var(--ink); }

/* ─── Hero + price card ────────────────────────────────────────────────── */

.pq-hero > .pq-eyebrow + .pq-h1 { margin-top: 4px; }
.pq-hero__intro { white-space: pre-line; }

/* The route as an itinerary: two stops on a dotted rail, taking off at the top
   and landing at the bottom. Stacked rather than side by side at every width:
   country names run long, and a trip reading top to bottom never has to be
   squeezed. */
.pq-trip { position: relative; display: flex; flex-direction: column; gap: 20px; }

/* The rail runs between the two markers, not through them. */
.pq-trip::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 38px;
  left: 16px;
  border-left: 2px dotted rgb(16 24 40 / 22%);
}

.pq-trip__stop { display: flex; gap: 12px; align-items: flex-start; }

.pq-trip__marker {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--navy);
  background: var(--pq-head);
  border-radius: 50%;
}
.pq-trip__marker svg { width: 19px; height: 19px; }

.pq-trip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }

.pq-trip__label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.pq-trip__place { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; }

.pq-trip__country {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -.01em;
}

/* The airport, as the tag a boarding pass would print it on. */
.pq-trip__code {
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .76rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
  background: var(--pq-head);
  border-radius: 999px;
}

.pq-flag {
  flex: none;
  width: 26px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(16 24 40 / 12%);
}
.pq-flag--sm { width: 20px; height: 15px; display: inline-block; vertical-align: -2px; }

/* Trip facts as a quiet strip rather than three floating pairs — on a phone
   they stack, from tablet up they sit in columns. */
.pq-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: var(--pq-step) 0 0;
  margin-top: 10px !important;
  border-top: 1px solid var(--pq-edge);
}
.pq-facts dt { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pq-facts dd { margin-top: 2px; font-size: .98rem; font-weight: 600; color: var(--ink); }
.pq-facts__hint { font-weight: 400; color: var(--muted); }

/* ─── The commercial summary ─────────────────────────────────────────────

   The one card the page turns on, and the only place above the fold where money
   is mentioned. Its job is four figures in a fixed order of importance: the
   agreed fee dominates, the derivation under it is secondary, what is due today
   is called out, and the balance after that is a footnote to it. */
.pq-summary {
  padding: var(--pq-pad);
  background: #fff;
  border: 1px solid var(--pq-edge);
  border-radius: var(--pq-round);
  box-shadow: var(--pq-lift);
  scroll-margin-top: 84px;
}
.pq-summary > * + * { margin-top: var(--pq-step); }

.pq-summary__label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* The figure the client is agreeing to. Nothing else on the page is this size. */
.pq-summary__amount {
  margin-top: 2px;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--navy);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* The saving. One line, not a table: the struck-through standard fee and what
   comes off it read as a sentence, and both are deliberately smaller than the
   price they produce. */
.pq-summary__savings {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  margin-top: 8px;
  font-size: .95rem;
}
.pq-was { color: var(--muted); font-variant-numeric: tabular-nums; }
.pq-save { font-weight: 700; color: var(--ok); }

/* What actually leaves the account today. Its own panel, because it answers a
   different question from the fee above it. */
.pq-summary__due, .pq-due {
  padding: 14px 16px;
  background: var(--pq-head);
  border-radius: 12px;
}
.pq-summary__due-line, .pq-due__line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  justify-content: space-between;
}
.pq-summary__due-line span, .pq-due__label { font-size: 1rem; font-weight: 800; color: var(--navy); }
.pq-summary__due-line strong, .pq-due__amount {
  margin-left: auto;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pq-summary__due-note, .pq-due__note { margin-top: 6px; font-size: .86rem; color: var(--muted); }
.pq-summary__due-rest, .pq-due__after {
  padding-top: 10px;
  margin-top: 10px;
  font-size: .88rem;
  color: var(--muted);
  border-top: 1px solid #dbe6f7;
}
.pq-summary__due-rest strong, .pq-due__after strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pq-due--paid { background: #f2fbf3; }
.pq-due--paid .pq-due__label, .pq-due--paid .pq-due__amount { color: #14532d; }
.pq-due--paid .pq-due__after { border-top-color: #bfe6c2; }

/* The quotation's own expiry. The quietest thing in the card on purpose. */
.pq-summary__validity {
  font-size: .82rem;
  color: var(--muted);
}
.pq-summary__validity strong { font-weight: 700; color: var(--ink); }

.pq-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pq-summary__actions .pq-btn { width: 100%; }

.pq-summary__status {
  width: 100%;
  padding: 12px 14px;
  font-size: .93rem;
  font-weight: 700;
  color: #14532d;
  text-align: center;
  background: #f2fbf3;
  border: 1px solid #bfe6c2;
  border-radius: 12px;
}

/* The deadline the client can still act on. A date and a count of days, on a
   quiet sheet — no clock, no tint that reads as an alarm, nothing that moves.
   Three states, and none of them is red. */
.pq-deadline {
  padding: 11px 14px;
  font-size: .88rem;
  color: var(--ink);
  background: var(--pq-stripe);
  border: 1px solid var(--pq-edge);
  border-radius: 12px;
}
.pq-deadline strong { color: var(--navy); }
.pq-deadline span { display: block; font-size: .84rem; color: var(--muted); }

.pq-deadline.is-urgent {
  color: #7c2d12;
  background: #fff7ed;
  border-color: #fdba74;
}
.pq-deadline.is-urgent strong { color: #7c2d12; }
.pq-deadline.is-urgent span { font-weight: 700; color: #9a3412; }

.pq-deadline.is-lapsed { color: var(--muted); background: var(--pq-stripe); }
.pq-deadline.is-lapsed strong { color: var(--ink); }

/* Line-by-line arithmetic, folded. One white slab: a tinted header per group,
   plain rows under it, closing on the fee it explains. */
.pq-breakdown {
  overflow: hidden;
  background: #fff;
}

.pq-breakdown__h {
  padding: 9px 14px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--pq-head);
}
.pq-breakdown__h + .pq-breakdown__rows li:last-child { border-bottom: 0; }

.pq-breakdown__rows { padding: 0; margin: 0; list-style: none; }
.pq-breakdown__rows li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--pq-rule);
}
.pq-breakdown__rows li:last-child { border-bottom: 0; }
.pq-breakdown__rows span { font-size: .92rem; color: var(--ink); }

.pq-breakdown__rows strong {
  margin-left: auto;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pq-breakdown__rows li.is-credit strong { color: var(--ok); }

.pq-breakdown__rows--total { border-top: 1px solid var(--pq-rule); }
.pq-breakdown__rows--total span { font-weight: 700; }

.pq-breakdown__rows--total li.is-final {
  padding: 14px;
  background: var(--pq-head);
}
.pq-breakdown__rows--total li.is-final span { font-size: .95rem; font-weight: 800; color: var(--navy); }
.pq-breakdown__rows--total li.is-final strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}

.pq-breakdown__note {
  padding: 10px 14px;
  font-size: .82rem;
  color: var(--muted);
  background: var(--pq-stripe);
  border-top: 1px solid var(--pq-rule);
}

/* ─── Coverage legend ──────────────────────────────────────────────────────

   Said once, beside the section heading, instead of re-explained on every row
   that carries the same chip. The dot repeats the chip colour and the word
   repeats the chip text, so nothing here is carried by colour alone. */
.pq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 14px;
  font-size: .82rem;
  color: var(--muted);
  background: var(--pq-stripe);
  border: 1px solid var(--pq-edge);
  border-radius: 12px;
}
ul.pq-legend { padding-left: 7px; padding-right: 7px; }
.pq-legend__item { display: flex; gap: 7px; align-items: center; }
.pq-legend__item::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--ok);
  border-radius: 50%;
}
.pq-legend__item--included-with-cap::before { background: #0e7490; }
.pq-legend__item--pass-through::before,
.pq-legend__item--client-paid-direct::before { background: var(--coral); }
.pq-legend__item--client-paid-direct::before { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--coral); }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */

/* Actions are centred everywhere, not just in the sections that asked for it. */
.pq-cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pq-cta-row .pq-btn { flex: 1 1 240px; }

.pq-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  font: inherit;
  font-size: .97rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pq-btn:hover { text-decoration: none; }
.pq-page .pq-btn--primary { color: #fff; background: var(--coral); box-shadow: var(--pq-lift); }
.pq-page .pq-btn--primary:hover { color: #fff; background: var(--coral-dark); }
.pq-page .pq-btn--outline { color: var(--navy); border-color: var(--navy); }
.pq-page .pq-btn--outline:hover { color: #fff; background: var(--navy); }
.pq-page .pq-btn--ghost { color: var(--muted); border-color: var(--pq-edge); }
.pq-page .pq-btn--ghost:hover { color: var(--navy); border-color: var(--navy); }

/* The one action a section exists for: full width on a phone, centred and
   capped from tablet up so it never stretches to the width of the sheet. */
.pq-btn--lg {
  display: flex;
  width: 100%;
  min-height: 54px;
  margin: var(--pq-step) auto 0;
  font-size: 1.02rem;
}
.pq-btn--sm { min-height: 44px; padding: 10px 16px; font-size: .9rem; }
.pq-btn--block { display: flex; width: 100%; }
.pq-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Loading state for every server-side transition (payment page). */
@keyframes pq-spin { to { transform: rotate(360deg); } }
.pq-spinner {
  display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  opacity: .8; animation: pq-spin .8s linear infinite;
}
form[aria-busy="true"] .pq-btn[type="submit"], .pq-btn[aria-busy="true"] { opacity: .85; cursor: progress; }
form[aria-busy="true"] .pq-btn[type="submit"]::before, .pq-btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pq-spin .8s linear infinite;
}

/* ─── Steps ─────────────────────────────────────────────────────────────── */

.pq-steps { display: flex; flex-direction: column; gap: var(--pq-gap); }
.pq-steps li { display: flex; gap: 12px; align-items: flex-start; }
.pq-steps h3 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--navy); }
.pq-steps p { font-size: .9rem; color: var(--muted); }

.pq-steps__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  background: var(--navy);
  border-radius: 50%;
}

.pq-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
}
.pq-chip--ok { color: #14532d; background: #dcf5e0; }
.pq-chip--muted { color: var(--muted); background: var(--bg-soft); }
.pq-chip--now { color: #0e5a6e; background: #e4f5f9; }

/* ─── Disclosures + item lists ───────────────────────────────────────────── */

/* A disclosure is a table in a box: its summary is the header row, its list is
   the body. Stacked disclosures sit closer together than unrelated blocks do. */
.pq-disclosure {
  overflow: hidden;
  border: 1px solid var(--pq-edge);
  border-radius: 12px;
}
.pq-card > .pq-disclosure + .pq-disclosure,
.pq-sheet > .pq-disclosure + .pq-disclosure { margin-top: 8px; }

.pq-disclosure > summary {
  min-height: 48px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  background: var(--pq-head);
  border-bottom: 1px solid var(--pq-rule);
}
.pq-disclosure > summary::-webkit-details-marker { display: none; }
.pq-disclosure > summary::after {
  content: "+";
  flex: none;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--muted);
}
.pq-disclosure[open] > summary::after { content: "−"; }

.pq-disclosure__n {
  margin-left: auto;
  margin-right: 4px;
  padding: 2px 8px;
  font-size: .76rem;
  color: var(--muted);
  background: #fff;
  border-radius: 999px;
}
.pq-disclosure__body { padding: 14px; }
.pq-disclosure__body > * + * { margin-top: 10px; }

.pq-disclosure--terms { margin: var(--pq-step) 0; }
.pq-terms {
  max-height: 320px;
  padding: 14px;
  overflow-y: auto;
  font-size: .86rem;
  white-space: pre-wrap;
  color: var(--muted);
}

/* An inline "show me the rest" rather than a section of its own: no box, no
   tint. */
.pq-disclosure--plain { border: 0; border-radius: 0; overflow: visible; }
.pq-disclosure--plain > summary { padding-left: 0; font-size: .88rem; background: none; border-bottom: 0; }
.pq-disclosure--plain > .pq-disclosure__body { padding: 4px 0 0; }

/* Inside a card the summary is a link, not a header row. */
.pq-disclosure--inline > summary {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-start;
  min-height: 44px;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pq-disclosure--inline > summary::after { font-size: 1rem; }

.pq-itemlist, .pq-items { padding: 0; }
.pq-itembox { overflow: hidden; border: 1px solid var(--pq-edge); border-radius: 12px; }

/* Table rows: striped, ruled, and reaching the full width of the section. */
.pq-item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pq-rule);
}
.pq-item:nth-child(even) { background: var(--pq-stripe); }
.pq-item:last-child { border-bottom: 0; }

.pq-item__mark {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  background: var(--ok);
  border-radius: 50%;
}
.pq-item--pass-through .pq-item__mark,
.pq-item--client-paid-direct .pq-item__mark { background: var(--coral); }
.pq-item--included-with-cap .pq-item__mark { background: #0e7490; }
.pq-item--guidance-only .pq-item__mark { background: var(--muted); }

.pq-item__body { flex: 1 1 240px; min-width: 0; }
.pq-item__title { display: block; font-size: .95rem; font-weight: 600; }
.pq-item__desc { display: block; font-size: .85rem; color: var(--muted); white-space: pre-line; }

.pq-item__tag {
  flex: none;
  padding: 3px 9px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  background: var(--bg-soft);
  border-radius: 999px;
}
.pq-item--included .pq-item__tag { color: #14532d; background: #dcf5e0; }
.pq-item--included-with-cap .pq-item__tag { color: #0e5a6e; background: #e4f5f9; }
.pq-item--pass-through .pq-item__tag,
.pq-item--client-paid-direct .pq-item__tag { color: #8a3a12; background: #fdefe9; }

/* ─── Schedule ───────────────────────────────────────────────────────────── */

.pq-schedule {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pq-edge);
  border-radius: 12px;
}

.pq-schedule__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--pq-rule);
}
.pq-schedule__row:nth-child(odd) { background: var(--pq-stripe); }
.pq-schedule__row:last-child { border-bottom: 0; }
.pq-schedule__row strong { display: block; font-size: .97rem; }
.pq-schedule__row span { font-size: .85rem; color: var(--muted); }
.pq-schedule__row.is-paid { opacity: .68; }
.pq-schedule__amount {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pq-schedule__total {
  padding: 12px 14px;
  font-size: .9rem;
  color: var(--muted);
  background: var(--pq-stripe);
  border: 1px solid var(--pq-edge);
  border-radius: 12px;
}
.pq-schedule__total strong { color: var(--navy); font-size: 1rem; }

.pq-schedule__what { flex: 1 1 240px; min-width: 0; }
.pq-schedule__desc { display: block; margin-top: 2px; }
.pq-schedule__due { display: block; margin-top: 4px; font-weight: 600; color: var(--ink) !important; }
.pq-schedule__doc { display: block; margin-top: 4px; }

.pq-chip--due { color: #8a3a12; background: #fdefe9; }
.pq-chip--warn { color: #fff; background: var(--coral); }

/* ─── Reasons ─────────────────────────────────────────────────────────────── */

.pq-reasons { display: flex; flex-direction: column; gap: var(--pq-gap); }
.pq-reasons li { padding-left: 14px; font-size: .93rem; color: var(--muted); border-left: 3px solid var(--coral); }
.pq-reasons strong { display: block; color: var(--ink); }

/* ─── Acceptance form ───────────────────────────────────────────────────── */

.pq-payline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--pq-head);
  border-radius: 12px;
}
.pq-payline span { font-weight: 700; color: var(--navy); }
.pq-payline strong { font-size: 1.4rem; font-weight: 800; color: var(--coral); font-variant-numeric: tabular-nums; }

.pq-form__row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pq-form > * + * { margin-top: var(--pq-step); }

.pq-field { display: flex; flex-direction: column; gap: 5px; }
.pq-field > span, .pq-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.pq-field > span em { font-style: normal; font-weight: 400; }
.pq-field input, .pq-input, .pq-select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pq-field input:focus, .pq-input:focus, .pq-select:focus { border-color: var(--navy); outline: none; }
.pq-field--error .pq-input, .pq-field--error .pq-select { border-color: #8a1c12; }
.pq-field--error .pq-label { color: #8a1c12; }
.pq-field__error { font-size: .82rem; font-weight: 600; color: #8a1c12; }
.pq-fieldrow { display: grid; gap: 12px; }
@media (min-width: 560px) {
  .pq-fieldrow { grid-template-columns: 1fr 1fr; }
  .pq-fieldrow--postal { grid-template-columns: 160px minmax(0, 1fr); }
}

.pq-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; font-size: .9rem; color: var(--muted); }
.pq-check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--coral); }
.pq-check--error { color: #8a1c12; }
.pq-check__error { display: block; margin-top: 4px; font-size: .84rem; font-weight: 600; color: #8a1c12; }

.pq-form__actions { display: grid; gap: 10px; }
@media (min-width: 560px) {
  .pq-form__actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pq-form__actions .pq-btn--block { width: auto; justify-self: start; }
  .pq-form__actions > p { grid-column: 1 / -1; }
}

.pq-decline { margin-top: var(--pq-step); }
.pq-decline .pq-form__row { margin-top: 10px; align-items: end; }
@media (min-width: 700px) { .pq-decline .pq-form__row { grid-template-columns: minmax(0, 1fr) auto; } }

/* ─── Sticky actions ────────────────────────────────────────────────────────

   Exactly one of these is reachable at any width, and none of them is on screen
   when the page loads:

     below 900px   the bottom bar
     900–1179px    the header button
     1180px and up the sidebar summary */

/* The phone's bottom bar. */
.pq-stickybar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 96%);
  border-top: 1px solid var(--pq-edge);
  box-shadow: 0 -2px 12px rgb(16 24 40 / 8%);
  backdrop-filter: blur(6px);
}
@media (max-width: 899px) {
  .pq-stickybar.is-visible { display: block; }
}

.pq-stickybar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}
.pq-stickybar__top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.pq-stickybar__figure { min-width: 0; }
.pq-stickybar__figure strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pq-stickybar__figure span {
  margin-left: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pq-stickybar__close {
  flex: none;
  width: 44px;
  height: 44px;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
}
.pq-stickybar__close:hover { color: var(--navy); }

/* The wide-screen sidebar. `display: none` until 1180px. */
.pq-aside { display: none; }

.pq-aside__inner {
  position: sticky;
  top: 88px;
  padding: var(--pq-pad);
  background: #fff;
  border: 1px solid var(--pq-edge);
  border-radius: var(--pq-round);
  box-shadow: var(--pq-lift);
}
.pq-aside__inner > * + * { margin-top: 12px; }

.pq-aside__h {
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.pq-aside__total {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.pq-aside__total span {
  margin-left: 4px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
}

.pq-aside__savings {
  margin-top: 2px !important;
  font-size: .86rem;
}
.pq-aside__savings .pq-save { margin-left: 6px; }

.pq-aside__due {
  padding: 10px 12px;
  background: var(--pq-head);
  border-radius: 12px;
}
.pq-aside__due-line { margin-top: 0 !important; font-size: .84rem; color: var(--muted); }
.pq-aside__due-line strong {
  margin-right: 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pq-aside__note { margin-top: 4px !important; font-size: .8rem; color: var(--muted); }
.pq-aside__note strong { color: var(--ink); }

.pq-aside__deadline { font-size: .82rem; color: var(--muted); }
.pq-aside__deadline strong { color: var(--ink); }
.pq-aside__deadline span { display: block; }
.pq-aside__deadline.is-urgent { font-weight: 600; color: #9a3412; }
.pq-aside__deadline.is-urgent strong { color: #7c2d12; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.pq-footer { background: #0d1b38; color: #8fa0bf; padding: 32px 0 24px; font-size: .88rem; }
.pq-footer a { color: #c9d4e8; text-decoration: none; }
.pq-footer a:hover { text-decoration: underline; }
.pq-footer__inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.pq-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; margin-bottom: 24px; }
.pq-footer__brand { font-weight: 800; color: #fff; font-size: 1.05rem; letter-spacing: .2px; line-height: 1.2; }
.pq-footer__note { margin: 10px 0 14px; line-height: 1.6; max-width: 30em; white-space: pre-line; }
.pq-footer__col h4 {
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; margin: 0 0 12px;
}
.pq-footer__col a { display: block; margin-bottom: 9px; font-size: .87rem; }
.pq-footer__base {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
}
@media (max-width: 560px) {
  .pq-footer__inner { padding: 0 16px; }
  .pq-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .pq-footer__base { flex-direction: column; text-align: center; }
}

/* ============================================================================
   The payment page (pq-step, pq-methods, pq-bank, pq-card-pay, pq-outcome …)

   Same grammar as the quotation — sheets down one column — read top to bottom
   in the order a person pays: what is due, what arrived, who is invoiced, how
   to pay.
   ============================================================================ */

.pq-due__amount { font-size: 2rem; line-height: 1.05; margin-left: 0; }
.pq-due__label { display: inline-flex; align-items: center; gap: 6px; }
.pq-due__label .pq-ic { margin-top: -2px; }
.pq-pay-hero__context { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .93rem; color: var(--muted); }
.pq-pay-hero__context strong { color: var(--navy); }
.pq-pay-hero__route { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Every figure the page prints for a choice the client has not made yet exists once per
   choice; payment_mode_controller.js shows the chosen one. `hidden` has to win over
   whatever display the element otherwise has. */
[data-payment-mode-for][hidden] { display: none !important; }

.pq-lines { overflow: hidden; border: 1px solid var(--pq-edge); border-radius: 12px; }
/* The currency picker's list drops below its row, so while it is open the box must not
   clip; the rows carry the corner radii themselves so nothing spills past the corners. */
.pq-lines:has(.pq-ccy__select[aria-expanded="true"]) { overflow: visible; }
.pq-lines > .pq-lines__row:first-child { border-radius: 11px 11px 0 0; }
.pq-lines > .pq-lines__row:last-child { border-radius: 0 0 11px 11px; }
.pq-lines__row {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: .92rem; border-bottom: 1px solid var(--pq-rule);
}
.pq-lines__row:last-child { border-bottom: 0; }
.pq-lines__row dt { min-width: 0; color: var(--ink); }
.pq-lines__sub { display: block; font-size: .8rem; color: var(--muted); }
.pq-lines__row dd { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pq-lines__row--credit dd { color: var(--ok); }
.pq-lines__row--fee dd { color: var(--ink); }
.pq-lines__row--total { padding: 12px 14px; background: var(--pq-head); }
.pq-lines__row--total dt { font-weight: 800; color: var(--navy); }
.pq-lines__row--total dd { font-size: 1.08rem; font-weight: 800; }
.pq-lines__row--due dt { font-weight: 800; color: var(--navy); }
.pq-lines__row--due dd { font-size: 1rem; font-weight: 800; }

/* The payment-currency row, squeezed between "Total" and "Total in …": a compact pill
   holding a flag and a native select, dressed as one control. The select keeps its own
   keyboard and screen-reader behaviour; the pill only draws the frame and the caret. */
.pq-lines__row--currency { padding-top: 8px; padding-bottom: 8px; background: #fff; }
.pq-lines__row--currency dt { font-weight: 700; color: var(--navy); }
.pq-lines__row--currency dt .pq-lines__sub { font-weight: 400; }
.pq-lines__row--currency dd { font-weight: 700; }
.pq-ccy-form { display: inline-flex; align-items: center; gap: 8px; }
.pq-ccy {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 10px 0 10px;
  border: 1px solid var(--pq-edge); border-radius: 999px; background: var(--pq-head);
  color: var(--navy); font-weight: 700; font-size: .92rem; cursor: pointer;
}
.pq-ccy:hover { border-color: var(--navy); }
.pq-ccy--fixed { cursor: default; background: #fff; }
.pq-ccy__flag { flex: none; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.pq-ccy__select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; padding: 0 22px 0 0; margin: 0;
  font: inherit; font-weight: 700; color: inherit; cursor: pointer; min-width: 0;
  width: 11.5em; text-overflow: ellipsis;
}
.pq-ccy__select:focus { outline: none; }
.pq-ccy:has(.pq-ccy__select:focus-visible) { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26, 51, 99, .15); }
.pq-ccy--picker:has(.pq-ccy__select[aria-expanded="true"]) { border-color: var(--navy); z-index: 30; }
.pq-ccy__caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); display: inline-flex; }
/* The list, drawn like the enquiry form's pickers: a white panel under the pill, one
   row per currency with its converted total as the sub-line, the current one marked. */
.pq-ccy__list {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 40; min-width: 15.5rem;
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 20, 38, .12); max-height: 260px; overflow-y: auto;
}
.pq-ccy__list li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 9px 10px; border-radius: 8px;
  font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.pq-ccy__list li:hover, .pq-ccy__list li.is-active { background: var(--pq-head); color: var(--navy); }
.pq-ccy__list li[aria-selected="true"] { color: var(--navy); }
.pq-ccy__list li[aria-selected="true"]::after { content: "✓"; grid-column: 2; font-weight: 800; }
.pq-ccy__error { flex-basis: 100%; margin: 0; }

.pq-step__head { display: flex; align-items: flex-start; gap: 12px; }
.pq-step__head > div { flex: 1; min-width: 0; }
.pq-step__n {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 1px;
  border-radius: 50%; font-size: .85rem; font-weight: 800; color: #fff; background: var(--navy);
}
.pq-step__n--done { background: var(--ok); }
.pq-step--locked { background: var(--pq-stripe); }
.pq-step--locked .pq-step__n { background: var(--muted); }
.pq-step--locked .pq-h2 { color: var(--muted); }
.pq-step--done { background: var(--pq-stripe); }
.pq-step__lines { margin-top: 4px; font-style: normal; font-size: .93rem; line-height: 1.5; color: var(--ink); }
.pq-step__lines span { display: block; }
.pq-step__lines span:first-child { font-weight: 700; color: var(--navy); }
.pq-step__edit { flex: none; margin: -4px -6px 0 0; }
.pq-step .pq-form { margin-top: var(--pq-step); }
.pq-step > .pq-step__head + .pq-methods,
.pq-step > .pq-step__head + .pq-panel { margin-top: var(--pq-step); }

/* How much: the installment due or the whole balance. Two cards of equal weight —
   the same grammar as the method chooser below them, with a native radio doing the
   selecting so the keyboard and a page without JavaScript both still work. */
.pq-paymodes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pq-paymode {
  position: relative; display: block; width: 100%; padding: 14px 16px;
  font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 2px solid var(--pq-edge); border-radius: 12px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pq-paymode:hover { border-color: var(--navy); }
.pq-paymode:has(input:checked) { background: var(--pq-head); border-color: var(--navy); box-shadow: var(--pq-lift); }
.pq-paymode input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pq-paymode:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: 2px; }
.pq-paymode__body { display: block; }
.pq-paymode__head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.pq-paymode__name { font-size: 1.02rem; font-weight: 800; color: var(--navy); }
.pq-paymode__mark { flex: none; width: 20px; height: 20px; background: #fff; border: 2px solid var(--pq-edge); border-radius: 50%; }
.pq-paymode:has(input:checked) .pq-paymode__mark { border-color: var(--navy); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 20px var(--navy); }
.pq-paymode__amount { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: 1.3rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.pq-paymode__amount em { font-size: .8rem; font-style: normal; font-weight: 600; color: var(--muted); }
.pq-paymode__hint { display: block; margin-top: 6px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.pq-paymodes__more { margin-top: 10px; }
.pq-paymodes__terms { font-size: .86rem; line-height: 1.6; color: var(--muted); }
.pq-paymodes__terms > * + * { margin-top: 8px; }
.pq-paymodes__terms ul { padding-left: 18px; list-style: disc; }
.pq-paymodes__scope { padding-top: 8px; border-top: 1px solid var(--pq-edge); }

/* A disclosure that is a line of text rather than a boxed row. */
.pq-disclosure--plain { border: 0; border-radius: 0; overflow: visible; }
.pq-disclosure--plain > summary { padding-left: 0; font-size: .88rem; background: none; border-bottom: 0; }
.pq-disclosure--inline > summary {
  display: inline-flex; gap: 6px; justify-content: flex-start;
  min-height: 44px; padding-right: 0; text-decoration: underline; text-underline-offset: 3px;
}
.pq-disclosure--inline > summary::after { font-size: 1rem; }

/* The chooser. Whole card is the hit area. */
.pq-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pq-method {
  display: block; width: 100%; padding: 14px 16px; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 2px solid var(--pq-edge); border-radius: 12px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pq-method:hover { border-color: var(--navy); }
.pq-method[aria-pressed="true"] { background: var(--pq-head); border-color: var(--navy); box-shadow: var(--pq-lift); }
.pq-method__head { display: flex; gap: 10px; align-items: center; }
.pq-method__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--pq-head); color: var(--navy); }
.pq-method[aria-pressed="true"] .pq-method__icon { background: #fff; }
.pq-method__title { flex: 1; min-width: 0; font-size: 1.02rem; font-weight: 800; color: var(--navy); }
.pq-method__mark { flex: none; width: 20px; height: 20px; background: #fff; border: 2px solid var(--pq-edge); border-radius: 50%; }
.pq-method[aria-pressed="true"] .pq-method__mark { border-color: var(--navy); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 20px var(--navy); }
.pq-method__sub { display: block; margin-top: 6px; font-size: .86rem; color: var(--muted); }

.pq-panel { margin-top: 18px; }
.pq-panel[hidden] { display: none; }
.pq-panel > * + * { margin-top: 12px; }
.pq-panel > .pq-h3 + .pq-note { margin-top: 6px; }

/* The wire details. */
.pq-bank__match {
  gap: 10px;
  padding: 12px 14px;
  font-size: .95rem;
  font-weight: 600;
  color: #8a1c12;
  background: #fdeceb;
  border: 1px solid #f3c2bd;
  border-radius: 12px;
}
.pq-bank__match span { color: #7f1d1d; font-weight: 800; }

.pq-bank { border: 1px solid var(--pq-edge); border-radius: 12px; overflow: hidden; }
.pq-bank__row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--pq-rule); }
.pq-bank__row:last-child { border-bottom: 0; }
.pq-bank__row:nth-child(odd) { background: var(--pq-stripe); }
.pq-bank__row.is-key { background: var(--pq-head); }
.pq-bank dt {
  flex: 1 1 100%;
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pq-bank dd { display: flex; flex: 1 1 100%; gap: 10px; align-items: center; justify-content: space-between; min-width: 0; }
.pq-bank__value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92rem;
  word-break: break-word;
  color: var(--ink);
  user-select: all;
}
.pq-bank__row.is-key .pq-bank__value { font-weight: 700; }
.pq-copy {
  flex: none;
  min-height: 36px;
  padding: 7px 12px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 8px;
}
.pq-copy:hover { color: #fff; background: var(--navy); }
/* The press is seen: the button sinks for the duration of the click, then goes green
   with "Copied" for a moment — so a tap on a phone is confirmed twice, once under the
   finger and once in the label. */
.pq-copy { transition: background .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease; }
.pq-copy:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 4px rgb(16 24 40 / 20%); }
.pq-copy.is-copied { color: #fff; background: var(--ok); border-color: var(--ok); animation: pq-copied .9s ease; }
@keyframes pq-copied {
  0%   { box-shadow: 0 0 0 0 rgb(22 163 74 / 45%); }
  100% { box-shadow: 0 0 0 8px rgb(22 163 74 / 0%); }
}
.pq-bank__instructions { white-space: pre-line; }

.pq-inline-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 11px 13px; font-size: .86rem; color: var(--muted);
  background: var(--pq-stripe); border: 1px solid var(--pq-edge); border-radius: 12px;
}
.pq-inline-note > .pq-spinner { margin-top: 4px; }
.pq-inline-note--warn { color: #7c2d12; background: #fff7ed; border-color: #fdba74; }
.pq-inline-note--pos  { color: #14532d; background: #f2fbf3; border-color: #bfe6c2; }

/* Pay by card: one section, six states (see stripe_payment_controller.js). */
.pq-card-pay > * + * { margin-top: 12px; }
.pq-card-pay__states > [data-state-when] { display: none; }
.pq-card-pay[data-state="preparing"]  .pq-card-pay__states > [data-state-when="preparing"],
.pq-card-pay[data-state="submitting"] .pq-card-pay__states > [data-state-when="submitting"],
.pq-card-pay[data-state="processing"] .pq-card-pay__states > [data-state-when="processing"],
.pq-card-pay[data-state="succeeded"]  .pq-card-pay__states > [data-state-when="succeeded"] { display: flex; }
.pq-card-pay__states:empty { display: none; }
.pq-card-pay__form { display: none; }
.pq-card-pay[data-state="ready"] .pq-card-pay__form,
.pq-card-pay[data-state="submitting"] .pq-card-pay__form { display: block; }
.pq-card-pay [data-stripe-payment-target="start"] { display: none; }
.pq-card-pay[data-state="idle"]   [data-stripe-payment-target="start"],
.pq-card-pay[data-state="failed"] [data-stripe-payment-target="start"] { display: flex; }
.pq-card-pay__element { margin: var(--pq-gap) 0; }
.pq-card-pay__trust { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--muted); }
.pq-card-pay__trust .pq-ic { margin-top: 3px; }

.pq-outcome__head { display: flex; align-items: flex-start; gap: 12px; }
.pq-outcome__mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--ok); }
.pq-invoice { display: grid; gap: 8px; padding: 12px 14px; background: var(--pq-stripe); border: 1px solid var(--pq-edge); border-radius: 12px; }
.pq-invoice__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pq-invoice__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--ok); }
.pq-invoice__earlier { display: grid; gap: 6px; }
.pq-invoice__earlier li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: .9rem; }

.pq-pay__back { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 0 4px; }

/* ─── Narrow phones ──────────────────────────────────────────────────────── */
@media (max-width: 379px) {
  :root { --pq-pad: 14px; --pq-round: 14px; }

  .pq-shell { padding-left: 8px; padding-right: 8px; }
  .pq-h1 { font-size: 1.4rem; }
  .pq-summary__amount { font-size: 2rem; }
  .pq-summary__due-line strong, .pq-due__amount { font-size: 1.3rem; }
  .pq-summary__savings { font-size: .88rem; }
  .pq-breakdown__rows li, .pq-lines__row { padding-left: 12px; padding-right: 12px; }
}

/* Room for the bottom bar, so it never covers the last section of the page. */
@media (max-width: 899px) {
  .pq-main--bar { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
}

/* ─── From tablet up ─────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --pq-gap: 18px; --pq-step: 20px; }

  .pq-shell { padding: 26px 20px 0; }
  .pq-h1 { font-size: 2rem; }
  .pq-h2 { font-size: 1.28rem; }
  .pq-facts { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pq-form__row { grid-template-columns: 1fr 1fr; }
  .pq-summary__amount { font-size: 2.9rem; }
  .pq-due__amount { font-size: 2.4rem; }

  /* Actions on one row, the primary first and the question link beside it. */
  .pq-summary__actions { flex-direction: row; justify-content: flex-start; }
  .pq-summary__actions .pq-btn { width: auto; min-width: 260px; }

  /* Centred and capped rather than stretched across the sheet. */
  .pq-btn--lg { width: auto; min-width: 320px; max-width: 420px; }
  .pq-cta-row .pq-btn { flex: 0 1 auto; min-width: 200px; }

  .pq-methods, .pq-paymodes { flex-direction: row; align-items: stretch; }
  .pq-method, .pq-paymode { flex: 1; }

  .pq-bank dt { flex: 0 0 220px; padding-top: 6px; }
  .pq-bank dd { flex: 1; }
}

@media (min-width: 900px) {
  .pq-facts { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Wide screens ───────────────────────────────────────────────────────── */
@media (min-width: 1180px) {
  .pq-shell--aside {
    display: grid;
    grid-template-columns: minmax(0, 720px) 300px;
    gap: 28px;
    justify-content: center;
    max-width: 1120px;
  }
  .pq-shell--aside .pq-aside { display: block; }
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
  body.pq-page { background: #fff; font-size: 12px; }
  .pq-headerbar, .pq-stickybar, .pq-summary__actions, .pq-card--action, .pq-sheet--action, .pq-aside, .pq-btn,
  .pq-support { display: none !important; }
  .pq-shell { display: block; width: 100%; max-width: none; padding: 0; }
  .pq-hero, .pq-card, .pq-sheet, .pq-summary, .pq-schedule__row { box-shadow: none; break-inside: avoid; }
  .pq-col > * + * { margin-top: var(--pq-gap); }
  .pq-disclosure > summary::after { display: none; }
  .pq-disclosure:not([open]) > *:not(summary) { display: revert !important; }
}