/* ==========================================================================
   OFFICIAL BRAND — single source of truth.
   Change a value here and it propagates everywhere. Nothing below hard-codes
   a brand colour; components reference these variables only.
   ========================================================================== */

:root {
  /* --- Official brand palette --- */
  --brand-navy:       #001F44;  /* Primary */
  --brand-grey:       #585855;  /* Secondary */
  --brand-grey-light: #B9BBBB;  /* Light grey — NEVER body text (fails contrast) */
  --white:            #FFFFFF;
  --black:            #000000;

  /* --- Derived surfaces & text (accessibility-checked) --- */
  --surface:      #FFFFFF;  /* page / card background */
  --surface-alt:  #E7E7E6;  /* section backgrounds, separators (lighter tint) */
  --border:       #D8D8D7;  /* hairlines */
  --text:         #1A1A1A;  /* body — near-black on white ≈ 17:1 contrast */
  --text-muted:   #585855;  /* secondary text — brand grey, ≈ 7:1 on white (AA/AAA) */
  --text-on-navy: #FFFFFF;  /* text over the navy header */

  /* --- Semantic status — INDEPENDENT of branding, carry meaning, match staff view --- */
  --status-success: #16A34A;
  --status-warning: #D97706;
  --status-error:   #DC2626;
  --status-info:    #2563EB;
  --status-neutral: #9CA3AF;

  /* Journey stepper aliases (kept for continuity with the staff side) */
  --status-done:      var(--status-success);
  --status-current:   var(--status-warning);
  --status-returned:  var(--status-warning);
  --status-rejected:  var(--status-error);
  --status-submitted: var(--status-info);
  --status-pending:   var(--status-neutral);

  /* --- Typography --- */
  /* English: Sora. Arabic: GE SS Two (scaffolded, not yet active). */
  --font-en: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ar: 'GE SS Two', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-sans: var(--font-en);   /* switched to --font-ar when locale is Arabic */

  --weight-heading: 700;  /* Bold */
  --weight-body:    500;  /* Medium */
  --weight-note:    300;  /* Light */

  /* --- Structure --- */
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 31, 68, .08);
  --wrap: 640px;

  /* Logo clear-space — Brand Guideline p.05: 4 "Z" units on all sides.
     The Z glyph ≈ 0.093 × logo height, so 4Z ≈ 0.37 × logo height. */
  --logo-height: 52px;
  --logo-clearspace: calc(var(--logo-height) * 0.37);
}

/* When the document is Arabic, switch the font stack in one place. */
[lang="ar"], [dir="rtl"] { --font-sans: var(--font-ar); }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-body);      /* body = Medium */
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-alt);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  color: var(--brand-navy);
  font-weight: var(--weight-heading);   /* headings = Bold */
  margin: 0 0 .5rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

/* Notes / secondary text = Light */
.hint, .site-footer, .request__meta, .steps, small { font-weight: var(--weight-note); }

a { color: var(--brand-navy); }

/* ---------- Header with logo slot ---------- */

.site-header {
  background: var(--brand-navy);
  color: var(--text-on-navy);
  padding-block: var(--logo-clearspace);
  padding-inline: 1.25rem;
}
.site-header__inner {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-on-navy);
  text-decoration: none;
  font-weight: var(--weight-heading);
  font-size: 1.05rem;
}
/* Logo image respects the guideline clear-space via the header padding above. */
.site-header__logo {
  block-size: var(--logo-height);
  inline-size: auto;
  display: block;
}
.site-header a { color: var(--text-on-navy); }
.site-header a.headerlink { text-decoration: none; font-size: .9rem; font-weight: var(--weight-body); opacity: .85; }
.site-header a.headerlink:hover { opacity: 1; }

.wrap {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-block: 1.5rem 3rem;
  padding-inline: 1.25rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-block-end: 1rem;
}

.site-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: .8rem;
  padding-block: 1.5rem;
}

/* ---------- Forms ---------- */

.field { margin-block-end: 1rem; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: var(--weight-heading);
  color: var(--brand-navy);
  margin-block-end: .35rem;
}
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: .7rem .8rem;
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand-navy);
  outline-offset: 1px;
  border-color: var(--brand-navy);
}
.field .hint { font-size: .8rem; color: var(--text-muted); margin-block-start: .3rem; }
.field .error { font-size: .8rem; color: var(--status-error); font-weight: var(--weight-body); margin-block-start: .3rem; }

/* ---------- Read-only derived values ----------
   A value the customer cannot change because it follows from their account,
   not because the form is broken. Deliberately NOT styled as a disabled
   input: full-contrast text on a tinted surface, with the source of the
   value stated beneath it. */
.field .readonly-value {
  padding: var(--space-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.field .readonly-value__text {
  display: block;
  font-size: 1rem;
  font-weight: var(--weight-heading);
  color: var(--brand-navy);
}
.field .readonly-value__source {
  display: block;
  font-size: .8rem;
  font-weight: var(--weight-note);
  color: var(--text-muted);
  margin-block-start: var(--space-1);
}

/* ---------- Radio groups ----------
   The generic .field input rule stretches inputs to 100% and .field label
   renders as a block heading, which detaches a radio from its own label.
   These rules are deliberately more specific so each option reads as one
   clickable row. Nationality is immutable once the draft is created, so an
   ambiguous control here writes permanently wrong classification. */
.field .radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field .radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1rem;
  font-weight: var(--weight-body);
  color: var(--text);
  cursor: pointer;
}
.field .radio-option:hover { border-color: var(--brand-navy); }
.field .radio-option:focus-within {
  outline: 2px solid var(--brand-navy);
  outline-offset: 1px;
  border-color: var(--brand-navy);
}
.field .radio-option input[type="radio"] {
  inline-size: auto;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: var(--brand-navy);
}
/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.15rem;
  font-family: var(--font-sans);
  font-weight: var(--weight-heading);
  font-size: .95rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  min-block-size: 44px;
}
.btn--primary { background: var(--brand-navy); color: var(--white); }
.btn--primary:hover { background: #00152F; }
.btn--secondary { background: var(--brand-grey); color: var(--white); }
.btn--secondary:hover { background: #47474A; }
.btn--quiet { background: transparent; color: var(--brand-navy); border-color: var(--border); }
.btn--block { inline-size: 100%; }

/* ---------- Status pills (semantic, independent of brand) ---------- */

.pill {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: var(--weight-body);
  color: var(--white);
  white-space: nowrap;
}
.pill--done      { background: var(--status-done); }
.pill--current   { background: var(--status-current); }
.pill--returned  { background: var(--status-returned); }
.pill--rejected  { background: var(--status-rejected); }
.pill--submitted { background: var(--status-submitted); }
.pill--pending   { background: var(--status-pending); }

/* ---------- Notices ---------- */

.notice {
  border-inline-start: 3px solid var(--brand-navy);
  background: var(--surface-alt);
  padding: .8rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-block-end: 1rem;
  font-size: .9rem;
}
.notice--warning { border-inline-start-color: var(--status-warning); }
.notice--error   { border-inline-start-color: var(--status-error); }
.notice--success { border-inline-start-color: var(--status-success); }

/* ---------- Request list ---------- */

.request {
  display: block;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  margin-block-end: .75rem;
}
.request:hover { border-color: var(--brand-navy); }
.request__ref { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.request__title { font-weight: var(--weight-heading); color: var(--brand-navy); margin-block: .15rem .35rem; }
.request__meta { font-size: .85rem; color: var(--text-muted); }

.empty { text-align: center; color: var(--text-muted); padding-block: 2.5rem; }

/* ---------- Wizard steps ---------- */

.steps {
  display: flex; gap: .25rem; list-style: none;
  margin: 0 0 1.25rem; padding: 0; font-size: .75rem;
}
.steps__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: .3rem; color: var(--text-muted); text-align: center;
}
.steps__dot {
  inline-size: 26px; block-size: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  font-weight: var(--weight-heading);
}
.steps__item.is-done    .steps__dot { background: var(--status-done); border-color: var(--status-done); color: var(--white); }
.steps__item.is-current .steps__dot { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--white); }
.steps__item.is-current .steps__label { color: var(--brand-navy); font-weight: var(--weight-heading); }

/* ---------- Documents & summary ---------- */

.doc__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.doc__label { font-weight: var(--weight-heading); color: var(--brand-navy); font-size: .95rem; }
.doc__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding-block: .5rem;
  border-block-end: 1px solid var(--border); font-size: .9rem;
}
.doc__row:last-of-type { border-block-end: none; }

.summary { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .9rem; }
.summary dt { color: var(--text-muted); font-weight: var(--weight-note); }
.summary dd { margin: 0; font-weight: var(--weight-body); }

@media (min-width: 700px) {
  h1 { font-size: 1.75rem; }
  .card { padding: 1.75rem; }
}

/* ---------- Account navigation ---------- */
.account-nav {
  display: flex;
  gap: .25rem;
  margin-block-end: 1.5rem;
  border-block-end: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.account-nav a {
  padding: .6rem .9rem;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: var(--weight-body);
  font-size: .9rem;
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}
.account-nav a:hover { color: var(--brand-navy); }
.account-nav a.is-active {
  color: var(--brand-navy);
  border-block-end-color: var(--brand-navy);
  font-weight: var(--weight-heading);
}

/* ---------- Vehicles ---------- */
.vehicle { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vehicle__name { font-weight: var(--weight-heading); color: var(--brand-navy); font-size: 1.05rem; }
.vehicle__year {
  font-weight: var(--weight-body); color: var(--text-muted);
  font-size: .85rem; margin-inline-start: .4rem;
}
.vehicle__meta { font-size: .85rem; color: var(--text-muted); margin-block-start: .3rem; }
.vehicle__meta strong { color: var(--text); font-weight: var(--weight-body); }

/* VH-06: the requests made against one vehicle.

   A RULE ABOVE THE LIST, not a second card. The history belongs TO the vehicle
   it sits under, and boxing it separately would read as another vehicle. */
.vehicle__history {
  margin-block-start: 1rem;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--line, #e3e3e1);
}
.vehicle__history-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 0 0 .5rem; font-weight: var(--weight-body);
}
.history { list-style: none; margin: 0; padding: 0; }

/* GRID, NOT FLEX, so the reference, date and status line up DOWN the column
   across every row. With flex each row sizes itself and the statuses stagger,
   which is the difference between a list you can scan and one you must read. */
.history__row {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(5.5rem, auto) 1fr;
  gap: .25rem .9rem;
  align-items: baseline;
  padding-block: .4rem;
  font-size: .88rem;
}
.history__row + .history__row { border-block-start: 1px dashed var(--line, #e3e3e1); }
.history__ref a { font-weight: var(--weight-heading); }
.history__date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history__status { color: var(--text); }

/* ON A PHONE THE THREE COLUMNS STACK rather than squeezing a status into two
   characters of width. The date and status share a line because they are both
   short and both secondary to the reference. */
@media (max-width: 30rem) {
  .history__row { grid-template-columns: 1fr auto; }
  .history__status { grid-column: 1 / -1; color: var(--text-muted); }
}

/* VH-07: the saved-vehicle picker at the top of step 2. */
.picker { list-style: none; margin: .75rem 0 0; padding: 0; }
.picker__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem; border: 1px solid var(--line, #e3e3e1); border-radius: 8px;
}
.picker__item + .picker__item { margin-block-start: .5rem; }

/* The chosen one is marked by a BORDER and a label, never by colour alone -
   the page is read on phones in daylight and colour is the first thing to go. */
.picker__item--chosen { border-color: var(--brand-navy, #001F44); border-width: 2px; }
.picker__name { font-weight: var(--weight-heading); color: var(--brand-navy); }
.picker__meta { font-size: .85rem; color: var(--text-muted); margin-block-start: .2rem; }
.picker__meta strong { color: var(--text); font-weight: var(--weight-body); }
.picker__chosen { font-size: .85rem; font-weight: var(--weight-heading); color: var(--brand-navy); }

@media (max-width: 30rem) {
  .picker__item { flex-direction: column; align-items: stretch; }
}

/* CP-31: the roll-up above the sections, and the two new item states. */
.doc-progress {
  margin: 0 0 1rem; padding: .6rem .85rem; border-radius: 8px;
  background: #f4f4f3; color: var(--text-muted);
  font-size: .9rem; font-weight: var(--weight-heading);
}
.doc-progress.is-complete { background: #e8f5e9; color: #1B7F4B; }

/* NOT COLOUR ALONE: the word "Optional" carries the meaning, the pill only
   makes it findable. A customer with any colour-vision difference reads the
   same sentence. */
.doc__optional {
  display: inline-block; margin-inline-start: .5rem;
  padding: .1rem .45rem; border: 1px solid #B9B9B7; border-radius: 999px;
  font-size: .72rem; font-weight: var(--weight-body); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}

.doc-accepted { margin-block-start: .5rem; }
.doc-accepted > summary {
  cursor: pointer; padding: .5rem 0; font-size: .9rem; color: var(--text-muted);
}
.doc__locked { margin: .5rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* ---------- Certificates ---------- */
.cert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cert__title { font-weight: var(--weight-heading); color: var(--brand-navy); margin-block: .15rem .35rem; }

/* ---------- Empty states ---------- */
.empty__icon { font-size: 2.5rem; margin-block-end: .5rem; opacity: .7; }
.empty p { margin-block: .25rem; }

@media (max-width: 480px) {
  .cert { flex-direction: column; align-items: stretch; }
  .cert .btn { inline-size: 100%; }
}

/* ==========================================================================
   DROP 1 — spacing scale, gutters, max-width, alignment, true-navy button.
   Presentation only. Tokens first, then apply them consistently.
   ========================================================================== */

:root {
  /* Spacing scale — 4 / 8 / 16 / 24 / 32 / 48 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Page gutters + content width */
  --gutter: var(--space-4);
  --content-max: 640px;
  --content-max-wide: 760px;
}

/* ---- Consistent page gutters + vertical rhythm ---- */
.wrap {
  max-inline-size: var(--content-max);
  padding-inline: var(--gutter);
  padding-block: var(--space-4) var(--space-6);
}

/* ---- Consistent card padding + rhythm between cards ---- */
.card {
  padding: var(--space-4);
  margin-block-end: var(--space-3);
}

/* ---- Vertical rhythm: headings and intros ---- */
h1 { margin-block-end: var(--space-2); }
h2 { margin-block-end: var(--space-2); }
.wrap > h1 + p { margin-block-end: var(--space-4); }     /* intro line under page title */

/* ---- Fields on a consistent scale ---- */
.field { margin-block-end: var(--space-3); }
.field label { margin-block-end: var(--space-1); }
.field .hint, .field .error { margin-block-start: var(--space-1); }

/* ---- Buttons: consistent sizing + TRUE NAVY ---- */
.btn { padding: var(--space-2) var(--space-3); gap: var(--space-1); }
.btn--primary { background: #001F44; }          /* true brand navy, not a derived shade */
.btn--primary:hover { background: #00152F; }
.btn--secondary { background: var(--brand-grey); }

/* Button group spacing */
.card form .btn + .btn,
.btn-row .btn + .btn { margin-inline-start: var(--space-2); }

/* ---- Notices + steps rhythm ---- */
.notice { margin-block-end: var(--space-3); padding: var(--space-2) var(--space-3); }
.steps { margin-block-end: var(--space-4); }

/* ---- Account nav rhythm ---- */
.account-nav { margin-block-end: var(--space-4); gap: var(--space-1); }
.account-nav a { padding: var(--space-2) var(--space-3); }

/* ---- Request / document / vehicle rows: consistent inner spacing ---- */
.request { padding: var(--space-3); margin-block-end: var(--space-2); }
.doc__row { padding-block: var(--space-2); }
.summary { gap: var(--space-1) var(--space-3); }

/* ---- Wider comfortable measure on large screens (forms don't stretch) ---- */
@media (min-width: 800px) {
  .wrap { max-inline-size: var(--content-max-wide); }
}

/* ---- Alignment: labels/inputs/buttons share the box model ---- */
.field input, .field select, .field textarea { padding: var(--space-2) var(--space-3); }

/* === landing page (start) === */
.lp-hero { text-align: center; padding: 2.5rem 0 2rem; }
.lp-eyebrow { margin: 0 0 .75rem; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey, #585855); }
.lp-title { margin: 0 0 .75rem; font-size: 1.9rem; line-height: 1.25; color: var(--brand-navy, #001F44); }
.lp-lede { margin: 0 auto 1.75rem; max-width: 34rem; color: var(--brand-grey, #585855); }
.lp-actions { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.lp-secondary { margin: 1rem 0 0; font-size: .9rem; }
.lp-note { margin: 1.1rem 0 0; font-size: .82rem; color: var(--brand-grey, #585855); text-align: center; }
.lp-note--left { text-align: start; }
.lp-block { margin: 1.5rem 0; padding: 1.75rem 1.25rem; background: var(--surface-alt, #F7F8FA); border: 1px solid var(--border, #E3E7EC); border-radius: var(--radius, 8px); }
.lp-section { margin: 2.25rem 0; }
.lp-h2 { margin: 0 0 .3rem; font-size: 1.25rem; color: var(--brand-navy, #001F44); }
.lp-sub { margin: 0 0 1.5rem; font-size: .9rem; color: var(--brand-grey, #585855); }
.lp-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.lp-steps::before { content: ''; position: absolute; inset-inline-start: 23px; top: 24px; bottom: 24px; inline-size: 1px; background: var(--border, #E3E7EC); }
.lp-step { position: relative; display: flex; align-items: center; gap: 1rem; }
.lp-step__icon { position: relative; z-index: 1; flex: 0 0 48px; inline-size: 48px; block-size: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--border, #E3E7EC); display: flex; align-items: center; justify-content: center; color: var(--brand-navy, #001F44); }
.lp-step__icon svg { inline-size: 21px; block-size: 21px; }
.lp-step__num { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .1em; color: var(--brand-grey, #585855); }
.lp-step__label { font-size: .9rem; font-weight: 500; line-height: 1.35; }
.lp-cards { display: grid; gap: .9rem; }
.lp-card__icon { display: block; color: var(--brand-navy, #001F44); margin-bottom: .7rem; }
.lp-card__icon svg { inline-size: 24px; block-size: 24px; }
.lp-card__title { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--brand-navy, #001F44); }
.lp-card__body { margin: 0; font-size: .92rem; color: var(--brand-grey, #585855); }
.lp-card__req { margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--border, #E3E7EC); font-size: .82rem; color: var(--brand-grey, #585855); }
.lp-card--empty { display: flex; align-items: center; justify-content: center; text-align: center; min-block-size: 8rem; background: transparent; border-style: dashed; }
.lp-card--empty p { margin: 0; font-size: .85rem; color: var(--brand-grey, #585855); }
.lp-divisions { margin: 1.25rem 0 0; padding: .8rem 1rem; background: var(--surface-alt, #F7F8FA); border-radius: var(--radius, 8px); text-align: center; font-size: .85rem; color: var(--brand-grey, #585855); }
@media (min-width: 640px) {
  .lp-hero { padding: 4rem 0 3.25rem; }
  .lp-title { font-size: 2.4rem; }
  .lp-actions { flex-direction: row; justify-content: center; }
  .lp-block { padding: 2.25rem 2rem; }
  .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
}
@media (min-width: 860px) {
  .lp-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; text-align: center; }
  .lp-steps::before { display: none; }
  .lp-steps::after { content: ''; position: absolute; top: 24px; inset-inline-start: 8.33%; inset-inline-end: 8.33%; block-size: 1px; background: var(--border, #E3E7EC); }
  .lp-step { flex-direction: column; gap: .7rem; }
  .lp-step__label { font-size: .85rem; }
}
/* === landing page (end) === */

/* ---------- Branded footer (partials/_brand.blade.php) ---------- */
.site-footer__inner {
  max-inline-size: var(--content-max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-4);
  text-align: start;
}
.site-footer__logo { block-size: 28px; inline-size: auto; display: block; margin-block-end: var(--space-2); }
.site-footer__unit { margin: 0 0 var(--space-1); font-weight: var(--weight-heading); color: var(--brand-navy); font-size: .9rem; }
.site-footer__head { margin: 0 0 var(--space-1); font-weight: var(--weight-heading); color: var(--brand-navy); font-size: .85rem; }
.site-footer__meta { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--text-muted); }
.site-footer__meta a { color: var(--text-muted); }
.site-footer__meta a:hover { color: var(--brand-navy); }
.site-footer__legal {
  max-inline-size: var(--content-max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--border);
}
.site-footer__legal p { margin: 0; font-size: .8rem; color: var(--text-muted); }
@media (min-width: 640px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-5); }
}

/* ---------- Branded footer (partials/_brand.blade.php) ---------- */
.site-footer__inner {
  max-inline-size: var(--content-max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-4);
  text-align: start;
}
.site-footer__logo { block-size: 28px; inline-size: auto; display: block; margin-block-end: var(--space-2); }
.site-footer__unit { margin: 0 0 var(--space-1); font-weight: var(--weight-heading); color: var(--brand-navy); font-size: .9rem; }
.site-footer__head { margin: 0 0 var(--space-1); font-weight: var(--weight-heading); color: var(--brand-navy); font-size: .85rem; }
.site-footer__meta { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--text-muted); }
.site-footer__meta a { color: var(--text-muted); }
.site-footer__meta a:hover { color: var(--brand-navy); }
.site-footer__legal {
  max-inline-size: var(--content-max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--border);
}
.site-footer__legal p { margin: 0; font-size: .8rem; color: var(--text-muted); }
@media (min-width: 640px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-5); }
}
/* ==========================================================================
   BEGIN — My requests v1.1  (approved handover 2026-09-16)
   Append-only. Nothing above this line is modified.
   To revert: delete everything between BEGIN and END.
   All custom properties are prefixed --mr- so they cannot collide with the
   existing --status-* set, which the staff view depends on.
   ========================================================================== */

:root {
  --mr-navy:        #001F44;
  --mr-navy-hover:  #0A2E5C;
  --mr-canvas:      #F0F1F3;
  --mr-surface:     #FFFFFF;
  --mr-line:        #DFE1E5;
  --mr-line-inner:  #ECEDEF;
  --mr-thead-bg:    #F7F8FA;
  --mr-text-body:   #3D4450;
  --mr-text-muted:  #5E6068;
  --mr-text-thead:  #6B6E75;
  --mr-filter-track:#E4E6EA;
  --mr-badge-bg:    #C69A3E;
  --mr-badge-fg:    #001F44;
  --mr-btn-border:  #CFD2D7;

  --mr-act-fg:  #6E4A0C;  --mr-act-bg:  #F6EFE1;  --mr-act-edge:  #B98A2E;
  --mr-wait-fg: #001F44;  --mr-wait-bg: #E7EBF2;  --mr-wait-edge: #001F44;
  --mr-done-fg: #275B44;  --mr-done-bg: #E8F0EC;  --mr-done-edge: #275B44;
  --mr-stop-fg: #8C2A22;  --mr-stop-bg: #F8EAE8;  --mr-stop-edge: #8C2A22;

  --mr-alert-bg:     #FBF4E6;
  --mr-alert-border: #EAD7AE;
  --mr-alert-tile:   #F2E2BF;
}

/* Page canvas. The portal body is --surface-alt (#E7E7E6); the approved
   canvas is #F0F1F3. Scoped to pages carrying .mr-page so no other screen
   changes colour until its own redesign lands. */
body:has(.mr-page) { background: var(--mr-canvas); }

/* Wide container, scoped. --content-max stays 640px so the submission forms
   keep their measure; only this screen opts in. Double class beats the
   .wrap rule inside the min-width:800px media query. */
.wrap.wrap--wide {
  max-inline-size: 1180px;
  padding-inline: 28px;
  padding-block: 36px 64px;
}

.mr-page > * + * { margin-block-start: 20px; }

:is(.p-header, .mr-page) :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Shared shell: header ---------- */

.p-header { background: var(--mr-navy); color: #fff; }

.p-header__top {
  max-inline-size: 1180px;
  margin-inline: auto;
  padding-inline: 28px;
  min-block-size: 70px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.p-header__brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.p-header__logo  { block-size: 34px; inline-size: auto; display: block; }

.p-header__divider {
  inline-size: 1px;
  block-size: 24px;
  background: rgba(255, 255, 255, .2);
}

.p-header__name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.p-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

.p-btn-new,
.p-btn-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  block-size: 40px;
  padding-inline: 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.p-btn-new      { background: #fff; color: var(--mr-navy); border: 0; }
.p-btn-new:hover{ background: #EDEFF2; }
.p-btn-signout  { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.26); }
.p-btn-signout:hover { border-color: rgba(255,255,255,.5); }

/* ---------- Shared shell: tab row ---------- */

.p-tabs { border-block-start: 1px solid rgba(255, 255, 255, .1); }

.p-tabs__inner {
  max-inline-size: 1180px;
  margin-inline: auto;
  padding-inline: 28px;
  padding-block: 8px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.p-tabs__inner::-webkit-scrollbar { display: none; }

.p-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 38px;
  padding-inline: 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  white-space: nowrap;
}
.p-tab:hover { color: #fff; }
.p-tab.is-active {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-weight: 600;
}

.p-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--mr-badge-bg);
  color: var(--mr-badge-fg);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Title row and filters ---------- */

.mr-titlerow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.mr-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--mr-navy);
}

.mr-filters {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--mr-filter-track);
}

.mr-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  block-size: 36px;
  padding-inline: 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mr-text-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mr-filter__count {
  font-weight: 500;
  color: var(--mr-filter-count, #5E6068);   /* AA-corrected; #8A8D94 must not be used */
  font-variant-numeric: tabular-nums;
}
.mr-filter[aria-selected="true"] {
  background: #fff;
  color: var(--mr-navy);
  box-shadow: 0 1px 2px rgba(0, 31, 68, .10);
}
.mr-filter[aria-selected="true"] .mr-filter__count { color: var(--mr-navy); }

/* ---------- Alert ---------- */

.mr-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--mr-alert-border);
  border-radius: 16px;
  background: var(--mr-alert-bg);
}
.mr-alert__tile {
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  background: var(--mr-alert-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mr-act-fg);
}
.mr-alert__body { flex: 1 1 auto; min-inline-size: 0; }
.mr-alert__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mr-act-fg);
}
.mr-alert__text { margin: 0; font-size: 13.5px; font-weight: 400; color: var(--mr-act-fg); }
.mr-alert__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 42px;
  padding-inline: 18px;
  border: 0;
  border-radius: 10px;
  background: var(--mr-act-fg);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mr-alert__cta:hover { background: #57390A; }

/* ---------- Table ---------- */

.mr-table {
  background: var(--mr-surface);
  border: 1px solid var(--mr-line);
  border-radius: 18px;
  overflow: hidden;
}

.mr-thead,
.mr-row__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 150px minmax(0, 1.25fr) 170px 90px;
  gap: 16px;
  align-items: center;
  padding-inline: 24px;
}

.mr-thead {
  block-size: 44px;
  background: var(--mr-thead-bg);
  border-block-end: 1px solid var(--mr-line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mr-text-thead);
}
.mr-thead__updated { text-align: end; }

.mr-row {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-block-start: 1px solid var(--mr-line-inner);
}
.mr-row:first-of-type { border-block-start: 0; }
.mr-row:hover { background: #FAFBFC; }

/* Left edge — 3px, inset 16px top and bottom, rounded right corners */
.mr-row::before {
  content: "";
  position: absolute;
  inset-block: 16px;
  inset-inline-start: 0;
  inline-size: 3px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: transparent;
}
.mr-row--act::before  { background: var(--mr-act-edge); }
.mr-row--wait::before { background: var(--mr-wait-edge); }
.mr-row--done::before { background: var(--mr-done-edge); }
.mr-row--stop::before { background: var(--mr-stop-edge); }

.mr-row__grid { min-block-size: 76px; padding-block: 14px; }

.mr-row__title {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--mr-navy);
  text-decoration: none;
}
/* ONE link covering the row, so a customer can tap anywhere — but the row
   button stays a separate control above it, per the handover's accessibility
   note. Nesting a button inside a link would be invalid and unreachable by
   keyboard. */
.mr-row__title::after { content: ""; position: absolute; inset: 0; }
.mr-row__title:hover { text-decoration: underline; }
.mr-row__action { position: relative; z-index: 1; }
.mr-row__ref {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--mr-text-muted);
  font-variant-numeric: tabular-nums;
}
.mr-row__division { font-size: 13.5px; font-weight: 400; color: var(--mr-text-body); }
.mr-row__action   { justify-self: end; position: relative; z-index: 1; }
.mr-row__main     { min-inline-size: 0; }
.mr-row__updated--mobile,
.mr-row__division--mobile { display: none; }
.mr-row__updated  {
  text-align: end;
  font-size: 12.5px;
  color: var(--mr-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Status tag — never truncated */
.mr-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  block-size: 28px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: normal;
}
.mr-tag::before {
  content: "";
  flex: 0 0 6px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mr-tag--act  { background: var(--mr-act-bg);  color: var(--mr-act-fg); }
.mr-tag--wait { background: var(--mr-wait-bg); color: var(--mr-wait-fg); }
.mr-tag--done { background: var(--mr-done-bg); color: var(--mr-done-fg); }
.mr-tag--stop { background: var(--mr-stop-bg); color: var(--mr-stop-fg); }
/* PROVISIONAL — CANCELLED has no approved tone. Built from the portal's own
   existing neutrals rather than a new value, and carries no row edge. */
.mr-tag--neutral { background: var(--surface-alt, #E7E7E6); color: var(--text-muted, #585855); }

/* Row button — a separate control, not part of the row link */
.mr-rowbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 38px;
  padding-inline: 14px;
  border: 1px solid var(--mr-btn-border);
  border-radius: 10px;
  background: #fff;
  color: var(--mr-navy);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mr-rowbtn:hover { border-color: var(--mr-navy); }

/* Table footer */
.mr-tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-block-start: 1px solid var(--mr-line);
  font-size: 12.5px;
  color: var(--mr-text-muted);
}
.mr-tfoot__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 38px;
  padding-inline: 16px;
  border: 1px solid var(--mr-btn-border);
  border-radius: 10px;
  background: #fff;
  color: var(--mr-navy);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.mr-tfoot__more:hover { border-color: var(--mr-navy); }

/* ---------- Empty states ---------- */

.mr-empty { padding: 56px 24px; text-align: center; }
.mr-empty__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mr-navy);
}
.mr-empty__body {
  margin: 0 auto;
  max-inline-size: 42ch;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mr-text-muted);
}
.mr-empty__cta { margin-block-start: 18px; }

/* ---------- Footer ---------- */

.p-footer__logo { block-size: 54px; inline-size: auto; display: block; }

/* ==========================================================================
   Breakpoints
   >= 960px  five-column table, full header
   641-959   full header, stacked rows
   <= 640    compact header, portal name hidden, stacked rows, scrolling tabs
   ========================================================================== */

@media (max-width: 959px) {
  .mr-thead { display: none; }

  .mr-row__grid {
    display: block;
    padding-inline: 20px;
    padding-block: 16px;
  }
  .mr-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .mr-row__updated--desktop { display: none; }
  .mr-row__updated--mobile,
  .mr-row__division--mobile { display: inline; }
  .mr-row__division:not(.mr-row__division--mobile) { display: none; }
  .mr-row__ref { margin-block-start: 3px; }

  .mr-row__statusline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 12px;
  }
  .mr-row__action { justify-self: stretch; margin-block-start: 14px; }
  .mr-rowbtn { inline-size: 100%; block-size: 44px; }
}

@media (max-width: 640px) {
  .wrap.wrap--wide { padding-inline: 16px; padding-block: 22px 36px; }
  .mr-page > * + * { margin-block-start: 16px; }

  .p-header__top   { min-block-size: 60px; padding-inline: 16px; gap: 12px; }
  .p-header__logo  { block-size: 24px; }
  .p-header__divider,
  .p-header__name  { display: none; }
  .p-btn-new,
  .p-btn-signout   { block-size: 36px; padding-inline: 12px; }

  .p-tabs__inner   { padding-inline: 16px; }
  .p-tab           { block-size: 36px; font-size: 13px; }

  .mr-titlerow     { display: block; }
  .mr-title        { font-size: 28px; }

  /* Filters scroll sideways with a right-edge fade */
  .mr-filterscroll {
    position: relative;
    margin-block-start: 14px;
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mr-filterscroll::-webkit-scrollbar { display: none; }
  .mr-filters      { min-inline-size: max-content; }
  .mr-filter       { block-size: 34px; }

  .mr-alert        { flex-wrap: wrap; }
  .mr-alert__cta   { inline-size: 100%; block-size: 46px; }

  .mr-row__division{ font-size: 13px; }
  .mr-tfoot        { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .mr-tfoot__more  { block-size: 44px; }
  .mr-empty        { padding: 40px 20px; }
}

/* The fade must not hide a focused item, so it sits behind content and is
   removed while anything inside is focused. */
.mr-filterscroll::after,
.p-tabs__inner::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 28px;
  pointer-events: none;
}
.mr-filterscroll::after { background: linear-gradient(to right, rgba(240,241,243,0), var(--mr-canvas)); }
.mr-filterscroll:focus-within::after { display: none; }

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

/* ==========================================================================
   END — My requests v1.1
   ========================================================================== */

/* =========================================================
   CLEAN CORPORATE FOOTER — 16 Sep 2026
   ========================================================= */

.site-footer--clean {
    margin-top: 64px;
    padding: 0 24px 28px;
    background: transparent;
    color: #344054;
}

.site-footer--clean .site-footer__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 0 26px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    border-top: 1px solid #d6dbe2;
}

.site-footer--clean .site-footer__identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.site-footer--clean .site-footer__brand {
    margin: 0;
    color: #001f44;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.site-footer--clean .site-footer__location,
.site-footer--clean .site-footer__companies {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #667085;
}

.site-footer--clean .site-footer__companies span {
    margin: 0 5px;
    color: #98a2b3;
}

.site-footer--clean .site-footer__links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding-top: 2px;
    white-space: nowrap;
}

.site-footer--clean .site-footer__links a,
.site-footer--clean .site-footer__links span {
    color: #475467;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.site-footer--clean .site-footer__links a:hover {
    color: #001f44;
}

.site-footer--clean .site-footer__legal {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 0 0;
    border-top: 1px solid #e2e6eb;
    text-align: left;
}

.site-footer--clean .site-footer__legal p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .site-footer--clean {
        margin-top: 40px;
        padding: 0 20px 24px;
    }

    .site-footer--clean .site-footer__inner {
        padding: 24px 0 20px;
        flex-direction: column;
        gap: 22px;
    }

    .site-footer--clean .site-footer__links {
        width: 100%;
        gap: 18px;
        flex-wrap: wrap;
    }

    .site-footer--clean .site-footer__companies span {
        margin: 0 3px;
    }
}


/* Compact footer spacing */
.site-footer--clean {
    margin-top: 28px !important;
    padding-bottom: 18px !important;
}

.site-footer--clean .site-footer__inner {
    padding: 20px 0 16px !important;
}

.site-footer--clean .site-footer__legal {
    padding-top: 14px !important;
}

body:has(.mr-page) main {
    padding-bottom: 0 !important;
}


/* =========================================================
   PORTAL PAGE HEIGHT + FOOTER POSITION FIX
   ========================================================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

body > .site-footer {
    flex-shrink: 0;
}

/* Keep account pages visually consistent */
body > main.wrap {
    width: 100%;
}

/* Remove the old My Requests-only footer behaviour */
body:has(.mr-page) main {
    padding-bottom: inherit !important;
}


/* Terms & Conditions modal */
.terms-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: #001f44;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.terms-link:hover {
    text-decoration-thickness: 2px;
}

.terms-modal {
    width: min(620px, calc(100% - 32px));
    max-height: 85vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: #001f44;
    box-shadow: 0 24px 70px rgba(0, 31, 68, .22);
}

.terms-modal::backdrop {
    background: rgba(0, 20, 45, .62);
    backdrop-filter: blur(3px);
}

.terms-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px 20px;
    border-bottom: 1px solid #e6e8eb;
}

.terms-modal__eyebrow {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #68727d;
}

.terms-modal__header h2 {
    margin: 0;
    font-size: 24px;
}

.terms-modal__x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f2f4f6;
    color: #001f44;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.terms-modal__body {
    padding: 26px 30px;
    overflow-y: auto;
}

.terms-modal__body h3 {
    margin: 0 0 18px;
    font-size: 17px;
}

.terms-modal__body ul {
    margin: 0;
    padding-left: 20px;
}

.terms-modal__body li {
    margin-bottom: 14px;
    color: #404a55;
    line-height: 1.6;
}

.terms-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: 18px 30px 24px;
    border-top: 1px solid #e6e8eb;
}

@media (max-width: 600px) {
    .terms-modal {
        width: calc(100% - 24px);
        max-height: 88vh;
        border-radius: 14px;
    }

    .terms-modal__header,
    .terms-modal__body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .terms-modal__footer {
        padding: 16px 20px 20px;
    }
}

/* CP-35 — the Credit Control address and extension, under the locked mobile.

   BLOCK LINKS ON THEIR OWN LINES rather than inline in the sentence: on a
   phone the two run together into one tappable smudge otherwise, and the
   number is the one somebody is most likely to tap by mistake. */
.contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-block-start: .35rem;
}

.contact-line a {
  /* --brand-navy, NOT --navy. This stylesheet declares --brand-navy; a
     var(--navy, ...) would have fallen through to the literal and rendered
     correctly while referencing a token that does not exist - which is the
     shape of the --cf-border defect this project has already had once. */
  color: var(--brand-navy, #001F44);
  font-weight: 600;
  text-decoration: none;

  /* >>> 20px TALL UNTIL THE SCREENSHOT PASS MEASURED THEM. <<< Text links
     inherit the line box and nothing else, so both of these were a 20px
     target - under the 24px minimum, on a phone, one of them a telephone
     number somebody taps while holding car keys. inline-flex with a
     min-height grows the TARGET without growing the text. */
  align-items: center;
  display: inline-flex;
  min-height: 24px;
}

.contact-line a:hover,
.contact-line a:focus-visible {
  text-decoration: underline;
}