/* ==========================================================================
   CROWN RIDES — INNER PAGE COMPONENTS
   Shared by service detail, vehicle detail, and the remaining templates.
   Home-page-only styles stay in home.css.
   ========================================================================== */

/* ==========================================================================
   1. PAGE HERO — shorter, denser sibling of the home hero.
   ========================================================================== */

.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 22rem + 22vw, 42rem);
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-8);
  overflow: hidden;
  background: var(--c-black);

  /* Dark ground — full-strength gold is safe here (9.99:1). */
  --text-accent: var(--c-gold);
}

.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  animation: phero-drift 16s var(--e-inout) forwards;
}
@keyframes phero-drift { to { transform: scale(1); } }

.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.88) 100%),
    linear-gradient(96deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.06) 100%);
}

.phero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  width: 100%;
  min-width: 0;
}

.phero__title { color: var(--c-white); max-width: 22ch; }

.phero__lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.74);
  max-width: 56ch;
}

.phero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.phero__actions .btn--secondary:hover { background: var(--c-white); color: var(--c-black); }

/* ==========================================================================
   2. BREADCRUMB
   ========================================================================== */

.crumbs {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.crumbs__item { display: flex; align-items: center; gap: var(--s-3); }
.crumbs__item + .crumbs__item::before {
  content: "";
  width: 12px; height: 1px;
  background: var(--border-strong);
  flex: none;
}
.crumbs__item a { transition: color var(--d-fast) var(--e-ui); }
.crumbs__item a:hover { color: var(--text-accent); }
.crumbs__item [aria-current="page"] { color: var(--text); }

/* ==========================================================================
   3. SPLIT — asymmetric media + copy, alternating by page
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}

.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-width: 0;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

/* ==========================================================================
   4. VEHICLE SHOWCASE — the car sits on a soft champagne stage
   ========================================================================== */

.vshow {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 88%, var(--c-gold-champagne) 0%, var(--c-n-050) 55%, var(--c-white) 100%);
}
.vshow__img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--s-6);
  transition: transform var(--d-slow) var(--e-out);
}
.vshow:hover .vshow__img { transform: scale(1.04); }

.vshow__tag {
  position: absolute;
  top: var(--s-5); left: var(--s-5);
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-black);
  color: var(--c-gold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.vshow__sub {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  margin-top: var(--s-2);
}

/* ==========================================================================
   5. SPECS
   ========================================================================== */

.specs {
  display: grid;
  /* auto-fit, not a fixed count: passenger and luggage figures are absent
     from the live site, so this renders 2 cells today and 4 once the client
     supplies capacity — without ever leaving empty bordered cells. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.spec {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5);
  background: var(--bg);
}
.spec__icon { color: var(--text-accent); margin-bottom: var(--s-2); }
.spec__icon svg { width: 20px; height: 20px; }
.spec__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.spec__value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

/* ==========================================================================
   6. AMENITIES — boxed variant for inner pages
   ========================================================================== */

.amenities--boxed {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ==========================================================================
   7. HOW IT WORKS — the live 5-step booking sequence
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  counter-reset: step;
}
.step {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--bg);
  transition: background-color var(--d-base) var(--e-ui);
}
.step:hover { background: var(--bg-subtle); }
.step__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-light);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-gold);
  flex: none;
}
.step__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.steps__note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.steps__note svg { width: 17px; height: 17px; color: var(--text-accent); flex: none; }

/* ==========================================================================
   8. SERVICE CARDS
   ========================================================================== */

.scards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

.scard { min-width: 0; }
.scard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    transform var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-ui),
    box-shadow var(--d-base) var(--e-out);
}
.scard__link:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: var(--sh-md);
}

.scard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-n-100); }
.on-dark .scard__media { background: var(--c-n-900); }
.scard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.scard__link:hover .scard__media img { transform: scale(1.05); }

.scard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}
.scard__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 1.15;
}
.scard__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.scard__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.scard__more svg { width: 14px; height: 14px; transition: transform var(--d-base) var(--e-out); }
.scard__link:hover .scard__more svg { transform: translateX(4px); }

/* ==========================================================================
   9. 404
   ========================================================================== */

.nf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
}
.nf__links { margin-top: var(--s-8); width: 100%; }
.nf__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
}
.nf__list a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--d-fast) var(--e-ui);
}
.nf__list a:hover { color: var(--text-accent); }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .split--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

@media (min-width: 1024px) {
  .scards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .step { flex-direction: column; align-items: flex-start; gap: var(--s-5); padding: var(--s-6) var(--s-5); }
}

@media (min-width: 1200px) {
  .scards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   11. ACCORDION — legal pages and FAQs
   Native <details>/<summary>: keyboard accessible and fully functional
   with JavaScript disabled. JS only adds the smooth open/close.
   ========================================================================== */

.acc { border-top: 1px solid var(--border); }

.acc__item {
  border-bottom: 1px solid var(--border);
}

.acc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  transition: color var(--d-fast) var(--e-ui);
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:hover { color: var(--text-accent); }

.acc__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
}

/* Plus → minus */
.acc__sign {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  margin-top: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background-color var(--d-fast) var(--e-ui),
              border-color var(--d-fast) var(--e-ui);
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) var(--e-ui);
}
.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc__head:hover .acc__sign { border-color: var(--c-gold); }
.acc__item[open] .acc__sign {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}
.acc__item[open] .acc__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.acc__body {
  padding-bottom: var(--s-6);
  padding-right: clamp(0px, 6vw, var(--s-9));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.acc__body p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: var(--measure);
}
.acc__body p strong { color: var(--text); font-weight: var(--fw-medium); }

/* Grouped lines inside one paragraph block render as a definition-ish list. */
.acc__lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-left: var(--s-5);
  border-left: 1px solid var(--rule-gold);
}
.acc__lines p { margin: 0; }

.js .acc__item[open] .acc__body { animation: acc-in var(--d-base) var(--e-out); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } }

/* The body already faded in, but the <details> element itself snapped from
   zero to full height, so every answer opening threw the rest of the page
   down the screen in one frame. On the FAQ page — five stacked items — that
   is the jerkiest thing on the site.

   `interpolate-size` lets height animate to and from `auto`, which CSS could
   not do until recently; `::details-content` is the box the browser creates
   for everything after <summary>. `allow-discrete` is what carries
   content-visibility across the transition instead of cutting it.

   Deliberately a progressive enhancement: a browser without support keeps
   exactly today's behaviour, so there is nothing to fall back to and nothing
   to break. Durations come from the tokens, which already collapse to 1ms
   under prefers-reduced-motion.

   FAIL-SAFE BY CONSTRUCTION. The obvious way to write this is
   `::details-content { block-size: 0 }` with `[open]` overriding it to auto —
   and that is exactly the wrong way round here. If anything about the open
   state does not apply, the answer stays collapsed and unreadable. These
   accordions carry the FAQ **and the legal pages**, so a failure mode that
   hides text is a compliance problem, not a cosmetic one.

   So only the CLOSED state declares a size. Open declares nothing, inherits
   `auto`, and is therefore visible no matter what the browser makes of the
   rest of this block. Gated on @supports as well, so browsers without the
   feature keep today's behaviour untouched. */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
  :root { interpolate-size: allow-keywords; }

  .acc__item::details-content {
    overflow: hidden;
    transition:
      block-size var(--d-base) var(--e-out),
      content-visibility var(--d-base) var(--e-out);
    transition-behavior: allow-discrete;
  }
  /* Closed only — see above. */
  .acc__item:not([open])::details-content { block-size: 0; }
}

/* ==========================================================================
   12. LONG-FORM / LEGAL PAGE
   ========================================================================== */

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.legal__meta strong { color: var(--text); font-weight: var(--fw-medium); }

.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  align-self: start;
  display: none;
}
.legal__toc-title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--s-4);
}
.legal__toc-list { display: flex; flex-direction: column; gap: var(--s-3); }
.legal__toc-list a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
  transition: color var(--d-fast) var(--e-ui);
}
.legal__toc-list a:hover { color: var(--text-accent); }

.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}

@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-9); }
  .legal__toc { display: block; }
}

/* ==========================================================================
   13. COMPACT PAGE HERO — legal, booking, tracking (no background image)
   ========================================================================== */

.lhero {
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-8);
  background: var(--c-ink);
  color: var(--c-white);
  --text-accent: var(--c-gold);
}
.lhero .t-d1 { color: var(--c-white); max-width: 24ch; }
.lhero .t-eyebrow { margin-bottom: var(--s-5); }
.lhero .t-lead { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   14. SERVICES PAGE — alternating rows
   ========================================================================== */

@media (min-width: 900px) {
  .split--rev .split__media { order: 2; }
  .split--rev .split__copy  { order: 1; }
}

/* Fleet grid on /fleets — cars sit on a champagne stage, not a photo crop */
.scard__media--vehicle {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 50% 88%, var(--c-gold-champagne) 0%, var(--c-n-050) 55%, var(--c-white) 100%);
}
.scard__media--vehicle img { object-fit: contain; padding: var(--s-5); }

/* ==========================================================================
   15. CONTACT
   ========================================================================== */

.cform { display: flex; flex-direction: column; gap: var(--s-5); }
.cform__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
}
.field__control--area {
  height: auto;
  padding-block: var(--s-4);
  resize: vertical;
  line-height: var(--lh-normal);
}

.cinfo {
  align-self: start;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-ink);
  color: var(--c-white);
  --text-accent: var(--c-gold);
}
.cinfo__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: var(--fw-regular);
  margin-bottom: var(--s-6);
}
.cinfo__list { display: flex; flex-direction: column; gap: var(--s-5); }
.cinfo__item { display: flex; gap: var(--s-4); align-items: flex-start; }
.cinfo__item svg { width: 18px; height: 18px; color: var(--c-gold); flex: none; margin-top: 4px; }
.cinfo__label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-n-400);
  margin-bottom: 3px;
}
.cinfo__value { font-size: var(--fs-md); color: var(--c-white); }
a.cinfo__value:hover { color: var(--c-gold); }
.cinfo__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.cinfo__actions .btn--secondary { color: var(--c-white); }
.cinfo__actions .btn--secondary:hover { background: var(--c-white); color: var(--c-black); }

/* ==========================================================================
   16. BOOKING — step indicator, panel, summary rail
   ========================================================================== */

.wizard {
  display: grid;
  /* Five steps never divide evenly into 2 or 3 columns, and the leftover
     cell shows the 1px-gap background as an empty grey box. Stack on small
     screens, go to a single row of 5 only when they all fit. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-bottom: var(--s-7);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wizard__step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.wizard__num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: var(--fs-xs);
}
.wizard__step.is-current { color: var(--text); }
.wizard__step.is-current .wizard__num {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}
.wizard__label { line-height: 1.25; }

.bwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.bpanel {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--sh-sm);
  min-width: 0;
}
.bpanel__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-regular);
  margin-bottom: var(--s-5);
}
.bpanel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-5);
  margin-block: var(--s-5);
}
.bpanel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.bsum {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-ink);
  color: var(--c-white);
  min-width: 0;
  --text-accent: var(--c-gold);
}
.bsum__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  margin-bottom: var(--s-5);
}
.bsum__map {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--c-n-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bsum__map-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-n-500);
}
.bsum__map-note svg { width: 16px; height: 16px; color: var(--c-gold); }

.bsum__list { display: flex; flex-direction: column; gap: var(--s-3); }
.bsum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bsum__row dt { font-size: var(--fs-sm); color: var(--c-n-400); }
.bsum__row dd {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--c-white);
}
.bsum__help { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.bsum__help .btn--secondary { color: var(--c-white); }
.bsum__help .btn--secondary:hover { background: var(--c-white); color: var(--c-black); }

/* ==========================================================================
   17. TRACK INVOICE
   ========================================================================== */

.track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  width: 100%;
  max-width: 34rem;
  margin-top: var(--s-5);
}
.track .field__control { flex: 1 1 15rem; border-radius: var(--r-pill); text-align: center; }
.track .formnote { flex: 1 0 100%; margin-top: 0; text-align: center; }

/* The reference is echoed back the way the confirmation screen presents it —
   a stub you read down a phone line — so the customer recognises it as the
   same object rather than a new form. */
.track__result {
  width: 100%;
  max-width: 34rem;
  margin-top: var(--s-6);
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  text-align: center;
}
.track__ref {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--s-4);
}
.track__ref span {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.track__ref strong {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  word-break: break-all;
}
.track__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-5);
}

/* ==========================================================================
   18. FAQ / LEGAL FOOTERS
   ========================================================================== */

.faq__foot,
.legal__other {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}

@media (min-width: 960px) {
  .wizard { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .bwrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: var(--s-7); }
  .bpanel { padding: var(--s-7); }
}

/* Shown on non-English legal pages: the body copy is still the English
   original because certified legal translation is the client's to commission. */
.notice--lang {
  margin-top: 0;
  margin-bottom: var(--s-6);
  border-left-color: var(--c-gold);
}