/* ════════════════════════════════════════════════════════════════════
   JLR iPhone Repair — Apple-inspired design system (v4)
   Light surface · dark hero · Apple-compatible system typography.

   Built to the Master Prompt spec, with three WCAG corrections applied
   (measured, not guessed):
     • #3B82F6 carries white text at only 3.68:1, so solid buttons and
       body-size links use --primary #2563EB (5.17:1). --accent stays
       for large text, icons and decorative fills.
     • #6B7280 on the dark hero is 3.69:1, so muted text there uses
       --on-dark-muted #94A3B8 (6.96:1).
     • Everything else in the spec passed unchanged.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour (Master Prompt) ── */
  --bg:        #FFFFFF;
  --surface:   #F8FAFC;
  --primary:   #2563EB;
  --primary-h: #1D4ED8;
  --accent:    #3B82F6;
  --text:      #111827;
  --muted:     #6B7280;   /* 4.83:1 on --bg, 4.62:1 on --surface */
  --border:    #E5E7EB;
  --dark:      #0F172A;
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #94A3B8;
  --on-dark-line:   rgba(255,255,255,.12);
  --ok:        #16A34A;

  /* ── Radius (Master Prompt) ── */
  --r-card:  24px;
  --r-btn:   16px;
  --r-input: 16px;
  --r-img:   24px;
  --r-pill:  999px;

  /* ── Spacing (Master Prompt) ── */
  --s-section: 96px;
  --s-card:    32px;
  --s-pad:     24px;

  /* ── Type: native San Francisco on Apple platforms, safe local fallbacks elsewhere ── */
  --font-latin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-arabic: -apple-system, BlinkMacSystemFont, "SF Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-head: var(--font-latin);
  --font-body: var(--font-latin);

  /* ── Depth — layered, never a single flat blur ── */
  --sh-sm:  0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sh-md:  0 1px 2px rgba(16,24,40,.05), 0 8px 20px -8px rgba(16,24,40,.12);
  --sh-lg:  0 2px 4px rgba(16,24,40,.06), 0 16px 32px -12px rgba(16,24,40,.16),
            0 40px 72px -32px rgba(16,24,40,.18);
  --sh-btn: 0 1px 2px rgba(37,99,235,.24), 0 8px 20px -8px rgba(37,99,235,.44);

  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1200px;
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html,
body,
button,
input,
textarea,
select { font-family: var(--font-latin); }
body {
  font-family: var(--font-body); background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select, option { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; overflow-wrap: anywhere; }
p, li, label, button, a, input, textarea, select { overflow-wrap: anywhere; }
code, pre, kbd, samp, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
[lang="ar"] { font-family: var(--font-arabic); }
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] p,
html[lang="ar"] li,
[lang="ar"] p,
[lang="ar"] li { line-height: 1.8; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .h1,
html[lang="ar"] .h2,
html[lang="ar"] .h3,
[lang="ar"] { letter-spacing: normal; }
html[lang="ar"] body * { letter-spacing: normal !important; }
html[lang="ar"] body :not(code):not(pre):not(kbd):not(samp):not(.mono) { font-family: var(--font-arabic); }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { line-height: 1.3; }
html[lang="ar"] code,
html[lang="ar"] pre,
html[lang="ar"] kbd,
html[lang="ar"] samp,
html[lang="ar"] .mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(37,99,235,.18); }

/* Skip link — keyboard users reach content without tabbing the whole nav. */
.skip { position: absolute; inset-inline-start: -9999px; top: 12px; z-index: 200;
  background: var(--primary); color: #fff; padding: 12px 20px; border-radius: var(--r-btn); font-weight: 600; }
.skip:focus { inset-inline-start: 12px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.sec  { padding-block: var(--s-section); }
.hidden { display: none !important; }

/* ── Type scale ───────────────────────────────────────────────────── */
.h1 { font-size: clamp(3rem, 5.6vw, 4rem); letter-spacing: -.035em; line-height: 1.04; }
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.03em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.015em; font-weight: 600; }
.page-head .h1 { font-size: clamp(2.25rem, 4.6vw, 3rem); }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--muted); line-height: 1.65; }
.eyebrow { font-family: var(--font-head); font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 48px; padding: 13px 26px; border-radius: var(--r-btn);
  font-family: var(--font-head); font-weight:600; font-size: .9688rem; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease), color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; stroke-width: 2.2; }
.btn > svg:first-child { margin-inline-end: 1px; }
.btn > svg:last-child { margin-inline-start: 1px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--sh-btn); }
.btn-primary:hover { background: var(--primary-h); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--dark); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-on-dark { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.btn-on-dark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.service-cta-wrap { display: flex; justify-content: center; margin: 38px 0 54px; }
.btn-service-cta {
  min-height: 52px; max-width: 100%; padding: 13px 22px 13px 25px;
  border-color: rgba(15,23,42,.12); border-radius: 15px;
  background: var(--dark); color: #fff;
  box-shadow: 0 14px 28px -20px rgba(15,23,42,.75);
}
.btn-service-cta:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(15,23,42,.85); }
.btn-service-cta svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.btn-service-cta:hover svg { transform: translateX(3px); }
[dir="rtl"] .btn-service-cta svg { transform: scaleX(-1); }
[dir="rtl"] .btn-service-cta:hover svg { transform: scaleX(-1) translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; color: var(--primary);
  font-weight: 600; font-size: .9375rem; transition: gap .2s var(--ease); }
.link-arrow:hover { gap: 11px; }
.link-arrow svg { width: 17px; height: 17px; }

/* ── Header ───────────────────────────────────────────────────────── */
.hdr { position: absolute; inset-inline: 0; top: 0; z-index: 90; }
.hdr-in { max-width: var(--maxw); margin-inline: auto; padding: 22px 24px;
  display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; flex: none;
  background: #fff; display: grid; place-items: center; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.3125rem; letter-spacing: -.02em; color: #fff; line-height: 1.15; }
.brand-name small { display: block; font-family: var(--font-body); font-size: .6875rem;
  font-weight: 400; color: var(--on-dark-muted); letter-spacing: .01em; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a { padding: 9px 15px; border-radius: 10px; font-size: .9375rem; font-weight: 500;
  color: rgba(255,255,255,.82); transition: color .2s, background .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
.hdr-cta { display: flex; align-items: center; gap: 10px; }
/* Visually light but still a 44px target: the border is dropped and the glyph
   shrunk, while padding keeps the hit area at the accessible minimum. */
.burger { display: none; width: 44px; height: 44px; border-radius: 12px;
  border: 0; background: transparent; color: #fff; place-items: center; }
.burger svg { width: 24px; height: 24px; stroke-width: 2; }
.burger:hover { background: rgba(255,255,255,.1); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden;
  padding-block: 176px 104px; }
.hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 78% 18%, rgba(37,99,235,.22), transparent 62%); }
/* The artwork column is given the larger share so the devices can read at
   size; the copy column still holds a comfortable ~34rem measure. */
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.22fr;
  gap: 40px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { color: #CBD5E1; max-width: 30rem; margin-top: 20px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-trust { display: flex; gap: 12px 22px; flex-wrap: wrap; margin-top: 38px; }
.hero-trust li { display: flex; align-items: center; gap: 9px; font-size: .875rem;
  font-weight: 500; color: #CBD5E1; list-style: none; }
.hero-trust svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
/* The cut-out is scaled past its grid column and allowed to bleed toward the
   viewport edge, the way the reference lays it out. overflow stays visible so
   the bleed is not clipped; .hero itself clips at the section edge. */
.hero-art { position: relative; overflow: visible; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -1; inset: 20% 8% 10%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(37,99,235,.3) 0%, rgba(37,99,235,.12) 42%, transparent 72%);
  filter: blur(34px); transform: scale(.94); animation: hero-glow 6.8s ease-in-out infinite; }
.hero-art picture { position: relative; display: block; animation: hero-device-float 7.2s cubic-bezier(.45,.05,.55,.95) infinite; }
.hero-art img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  transform: translateZ(0); transform-origin: 50% 72%; filter: drop-shadow(0 28px 34px rgba(0,0,0,.3));
  transition: filter .45s var(--ease), transform .45s var(--ease); }
.hero-art:hover img { transform: translateZ(0) scale(1.012); filter: drop-shadow(0 34px 40px rgba(0,0,0,.38)); }
@keyframes hero-device-float {
  0%, 100% { transform: translate3d(0,0,0) rotate(.001deg); }
  32% { transform: translate3d(0,-11px,0) rotate(-.22deg); }
  68% { transform: translate3d(4px,-5px,0) rotate(.16deg); }
}
@keyframes hero-glow {
  0%, 100% { opacity: .62; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ── Premium repair photography ─────────────────────────────────── */
.site-photo { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sh-md); }
.site-photo picture, .site-photo img { display: block; width: 100%; }
.site-photo img { height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.trust-stack { display: grid; gap: 18px; min-width: 0; }
.trust-photo img { aspect-ratio: 16 / 9; }
.service-feature { max-width: 900px; margin: 0 auto 52px; }
.service-feature img { aspect-ratio: 16 / 7; object-position: center 60%; }
.process-photo { max-width: 1000px; margin: 40px auto 0; }
.process-photo img { aspect-ratio: 16 / 7; object-position: center 46%; }
.contact-photo { flex: 1 1 auto; min-height: 260px; }
.contact-photo img { min-height: 260px; }
.service-showcase { position: relative; isolation: isolate; overflow: hidden; }
.service-showcase::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 92%, transparent), var(--bg)),
              url("/assets/img/repair/service-workbench-bg-1600.webp") center top / cover no-repeat;
  opacity: .14; pointer-events: none; }

/* ── Cards ────────────────────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-card); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-card); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-card); }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-card); }

.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s-pad); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: transparent; }
.card-ico { display: block; width: 46px; height: 46px; margin-bottom: 18px; color: var(--text); flex: none; }
.card-ico svg { width: 100%; height: 100%; }
.service-icon { display: block; overflow: visible; transform: translateZ(0); }
.card [data-service-icon] { transform-origin: 50% 55%; transition: color .24s var(--ease), transform .28s var(--ease); }
.card:hover [data-service-icon] { color: var(--primary); transform: translateY(-2px) scale(1.025); }
@media (prefers-reduced-motion: reduce) {
  .card [data-service-icon] { transition: color .15s linear; }
  .card:hover [data-service-icon] { transform: none; }
}
.card h3 { margin-bottom: 8px; }
.service-grid .card h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.25; }
.card p { color: var(--muted); font-size: 1rem; line-height: 1.6; }

/* Service card — icon left, text right (matches the reference band) */
.svc { display: flex; gap: 16px; align-items: center; }
.svc .card-ico { width: 40px; height: 40px; margin: 0; flex: none; }

/* ── Process timeline ─────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-card); position: relative; }
.step { position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s-pad); box-shadow: var(--sh-sm); }
.step-n { position: absolute; top: -16px; inset-inline-start: 24px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .875rem;
  box-shadow: var(--sh-btn); }
.step-ico { display: block; width: 34px; height: 34px; color: var(--muted); margin-bottom: 14px; }
.step-ico svg { width: 100%; height: 100%; stroke-width: 2; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .875rem; line-height: 1.6; }

/* Dark timeline variant (Why-choose-us panel) */
.panel-dark { background: var(--dark); color: #fff; border-radius: var(--r-card); padding: 34px; }
.panel-dark h3 { color: #fff; font-size: 1.375rem; margin-bottom: 24px; }
.tl { display: flex; flex-direction: column; gap: 22px; }
.tl-item { display: grid; grid-template-columns: 34px 1fr 40px; gap: 14px; align-items: start; }
.tl-n { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .8125rem; color: #fff; }
.tl-item h4 { font-size: .9688rem; color: #fff; margin-bottom: 3px; }
.tl-item p { font-size: .8438rem; color: var(--on-dark-muted); line-height: 1.55; }
.tl-ico { display: block; width: 30px; height: 30px; color: var(--on-dark-muted); }
.tl-ico svg { width: 100%; height: 100%; stroke-width: 2; }

/* ── Pricing ──────────────────────────────────────────────────────── */
.price { text-align: center; display: flex; flex-direction: column; }
.price-img { width: 100%; aspect-ratio: 4/3; border-radius: var(--r-img); overflow: hidden;
  background: var(--surface); display: grid; place-items: center; margin-bottom: 18px; }
.price-img picture { display: block; width: 100%; height: 100%; }
.price-img img { width: 100%; height: 100%; object-fit: cover; }
.price h3 { font-size: 1rem; margin-bottom: 14px; }
.price .from { font-size: .8125rem; color: var(--muted); }
.price .amt { font-family: var(--font-head); font-size: 2.125rem; font-weight: 700;
  letter-spacing: -.03em; margin: 2px 0 18px; }
.price .amt small { font-size: .9375rem; font-weight: 600; color: var(--muted); margin-inline-start: 3px; }
.price .btn { width: 100%; margin-top: auto; }

/* ── Assurance strip ──────────────────────────────────────────────── */
.assure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 28px var(--s-pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-card); }
.assure-item { display: flex; gap: 14px; align-items: flex-start; }
.assure-ico { display: block; width: 34px; height: 34px; color: var(--muted); flex: none; }
.assure-ico svg { width: 100%; height: 100%; stroke-width: 2; }
.assure h4 { font-size: .9063rem; margin-bottom: 4px; }
.assure p { font-size: .8125rem; color: var(--muted); line-height: 1.55; }

/* ── Marquee band ─────────────────────────────────────────────────── */
.band { background: var(--surface); border-block: 1px solid var(--border); padding-block: 26px; }
.band-in { display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; text-align: center; }
.band-in svg { width: 22px; height: 22px; color: var(--text); flex: none; }

/* ── Track ────────────────────────────────────────────────────────── */
.track-row { display: flex; gap: 12px; flex-wrap: wrap; }
.input { flex: 1; min-width: 0; min-height: 52px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--r-input); background: var(--bg);
  font: inherit; font-size: .9375rem; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--bg);
  box-shadow: var(--sh-sm); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--primary); box-shadow: var(--sh-md); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px;
  font-weight:500; font-size: .9375rem; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 19px; height: 19px; color: var(--muted); flex: none; transition: transform .25s var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); color: var(--primary); }
.faq .ans { padding: 0 20px 18px; color: var(--muted); font-size: .9063rem; line-height: 1.7; }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact-list { display: flex; flex-direction: column; gap: 20px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item svg { width: 20px; height: 20px; color: var(--primary); flex: none; margin-top: 2px; }
.contact-item .v { font-size: .9375rem; line-height: 1.6; }
.contact-item .v b { font-weight: 600; }
.map-card { border-radius: var(--r-img); overflow: hidden; border: 1px solid var(--border);
  background: var(--surface); min-height: 260px; display: grid; place-items: center; padding: 24px; text-align: center; }

/* ── Footer ───────────────────────────────────────────────────────── */
.ft { background: var(--dark); color: #fff; padding-block: 64px 28px; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; gap: var(--s-card); }
.ft h4 { font-size: .875rem; color: #fff; margin-bottom: 16px; letter-spacing: -.01em; }
.ft a, .ft p, .ft li { color: var(--on-dark-muted); font-size: .875rem; line-height: 2; list-style: none; }
.ft a { transition: color .2s; }
.ft a:hover { color: #fff; }
.ft .brand-name { font-size: 1.0625rem; }
.ft-desc { margin-top: 14px; max-width: 17rem; line-height: 1.7; }
.ft-social { display: flex; gap: 10px; margin-top: 18px; }
.ft-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--on-dark-line);
  display: grid; place-items: center; color: var(--on-dark-muted); transition: .2s var(--ease); }
.ft-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.ft-social svg { width: 17px; height: 17px; }
.sub-row { display: flex; gap: 8px; margin-top: 14px; }
.sub-row .input { min-height: 46px; background: rgba(255,255,255,.06); border-color: var(--on-dark-line); color: #fff; font-size: .875rem; }
.sub-row .input::placeholder { color: var(--on-dark-muted); }
.ft-bottom { border-top: 1px solid var(--on-dark-line); margin-top: 44px; padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8125rem; color: var(--on-dark-muted); }
.ft-bottom a { font-size: .8125rem; }

/* ── Floating WhatsApp ────────────────────────────────────────────── */
.wa { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 26px -6px rgba(37,211,102,.6);
  transition: transform .25s var(--ease); }
.wa:hover { transform: scale(1.08) translateY(-2px); }
.wa svg { width: 27px; height: 27px; }

/* Shared language control and scroll-to-home action. */
.lang-control { height: 44px; min-width: 116px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px;
  background: rgba(15,23,42,.38); color: #fff; backdrop-filter: blur(12px); }
.lang-control svg { width: 17px; height: 17px; flex: none; stroke-width: 2.2; }
.lang-control select { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: inherit;
  font:600 .75rem/1 var(--font-body); cursor: pointer; }
.lang-control option { color: #111827; background: #fff; }
.drawer-language { display: grid; gap: 7px; margin: 10px 0 2px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: .75rem; font-weight:600; }
.drawer-language select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; }
.back-home, .back-top { position: fixed; inset-inline-end: 22px; z-index: 79; width: 52px; height: 52px;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 17px;
  background: rgba(15,23,42,.92); color: #fff; box-shadow: var(--sh-lg); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.94);
  transition: opacity .22s, visibility 0s linear .22s, transform .22s var(--ease), background .2s; }
.back-home { bottom: 88px; }
.back-top { bottom: 148px; padding: 0; cursor: pointer; font: inherit; }
.back-home.show, .back-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.back-home:hover, .back-top:hover { background: var(--primary); transform: translateY(-2px); }
.back-home:focus-visible, .back-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.back-home svg, .back-top svg { width: 23px; height: 23px; stroke-width: 2.2; }

/* Discourage casual public-content copying while preserving selection and
   editing inside every form control. This is intentionally public-only: the
   admin console never receives the content-protected class. */
.content-protected main, .content-protected footer, .content-protected header,
.content-protected nav { -webkit-user-select: none; user-select: none; }
.content-protected img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.content-protected input, .content-protected textarea, .content-protected select,
.content-protected [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
[data-business-hours] { white-space: pre-line; }
[dir="rtl"] body { text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }
[dir="rtl"] .ft-bottom, [dir="rtl"] .sec-head { direction: rtl; }

/* Standalone process page. */
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.process-card { position: relative; overflow: hidden; min-height: 250px; }
.process-card h2 { margin-bottom: 10px; font-size: 1.15rem; }
.process-card p { color: var(--muted); }
.process-number { position: absolute; inset-block-start: 14px; inset-inline-end: 18px;
  font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--border); }
.process-detail .panel-dark { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.process-detail .panel-dark .btn { align-self: flex-start; margin-top: 4px; }

/* ── Reveal ───────────────────────────────────────────────────────── */
/* Visible by default; the .js class (set inline in <head>) opts in to the
   animation, so a JS failure can never leave the page blank. */
.js .rv { opacity: 0; transform: translateY(20px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* ── Responsive — redesigned, not scaled ──────────────────────────── */
@media (max-width: 1024px) {
  :root { --s-section: 72px; --s-card: 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps  { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .assure { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-block: 148px 80px; }
  .ft-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: grid; }
  .hdr-cta { margin-inline-start: auto; }
  .hdr-cta .btn, .lang-control { display: none; }
}
@media (max-width: 760px) {
  :root { --s-section: 60px; --s-pad: 20px; }
  .nav { display: none; }
  .burger { display: grid; }
  .grid-4, .grid-3, .grid-2, .steps, .assure { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .steps { row-gap: 34px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Footer on small screens: the brand block spans the full width, then the
     four link groups pair up 2-across. A single stacked column was correct
     but made the footer scroll for four screens. */
  .ft { padding-block: 44px 24px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ft-grid > div:first-child { grid-column: 1 / -1; }
  .ft a, .ft p, .ft li { line-height: 1.75; font-size: .8438rem; }
  .ft h4 { margin-bottom: 10px; }
  .ft-desc { margin-top: 12px; max-width: none; }
  .ft-bottom { flex-direction: column; margin-top: 32px; padding-top: 20px; gap: 8px; }
  .band-in { font-size: .9375rem; }
  .track-row .btn { width: 100%; }

  /* Header: the burger is the only control, pinned to the right corner. The
     icon-only "Réserver" square was competing with it for the same corner and
     is redundant — the drawer carries a full-width Réserver button. */
  .hdr-in { padding: 14px 16px; gap: 12px; }
  .hdr-cta { margin-inline-start: auto; }
  .hdr-cta .btn { display: none; }
  .lang-control { display: none; }
  .brand-mark { width: 46px; height: 46px; border-radius: 13px; }
  .brand-name { font-size: 1.1875rem; }

  /* Hero: tighter so the device image rises into view instead of sitting
     far below the fold. */
  .hero { padding-block: 92px 44px; }
  .hero-grid { gap: 24px; }
  .h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .hero .lead { margin-top: 14px; font-size: 1rem; }
  .hero-cta { margin-top: 22px; gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 0; padding-inline: 16px; font-size: .9063rem; }

  /* Trust row: three compact chips on one or two tidy lines. */
  .hero-trust { margin-top: 22px; gap: 8px; }
  .hero-trust li { font-size: .75rem; gap: 6px; padding: 6px 10px;
    border: 1px solid var(--on-dark-line); border-radius: var(--r-pill);
    background: rgba(255,255,255,.04); }
  .hero-trust svg { width: 14px; height: 14px; }

  .hero-art img { width: 100%; margin: 0; aspect-ratio: 4 / 3; object-position: center; }
  .service-feature, .process-photo { margin-bottom: 34px; }
  .service-feature img, .process-photo img { aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
  /* Keep the 2-up pairing even on the narrowest phones — the labels are
     short enough, and one column doubled the footer height. */
  .ft-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Motion preference ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .hero-art picture, .hero-art::before { animation: none !important; transform: none; }
  .hero-art:hover img { transform: translateZ(0); }
}

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
  .hdr, .wa, .back-home, .hero-art, .ft-social, .sub-row { display: none; }
  .hero { background: #fff; color: #000; padding-block: 24px; }
  .hero h1, .hero .lead { color: #000; }
}

/* ── Booking modal + mobile drawer ─────────────────────────────────
   Markup is injected by assets/js/site/landing.js (shared with the older
   pages). Restyled here so it matches this design system rather than
   duplicating the booking logic. */
.bk-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.bk-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.bk-modal { width: min(680px, 100%); max-height: 88vh; overflow: auto;
  background: var(--bg); border-radius: var(--r-card); box-shadow: var(--sh-lg);
  transform: translateY(14px) scale(.985); transition: transform .3s var(--ease); }
.bk-scrim.open .bk-modal { transform: none; }
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px var(--s-pad); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
.bk-head h3 { font-family: var(--font-head); }
.bk-body { padding: var(--s-pad); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-size: .8125rem; font-weight: 600; color: var(--text); }
.fld input, .fld select, .fld textarea {
  min-height: 48px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--bg); font: inherit; font-size: .9375rem; color: var(--text);
  transition: border-color .2s, box-shadow .2s; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted); transition: .2s; }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn svg { width: 18px; height: 18px; }
.note { padding: 13px 16px; border-radius: var(--r-btn); font-size: .875rem; font-weight: 500; }
.note.ok  { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.note.err { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.btn-lg { min-height: 54px; font-size: 1rem; }

.m-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 160;
  width: min(320px, 86vw); background: var(--bg); box-shadow: var(--sh-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(102%); visibility: hidden; pointer-events: none;
  transition: transform .32s var(--ease), visibility 0s linear .32s; }
[dir="rtl"] .m-drawer { transform: translateX(-102%); }
.m-drawer.open { transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.m-drawer a { padding: 13px 14px; border-radius: 12px; font-weight:500; font-size: .9688rem;
  color: var(--text); transition: background .2s; }
.m-drawer a:hover { background: var(--surface); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Touch targets (WCAG 2.5.8 / priority-2 rule: 44×44 minimum) ────
   Measured on the built page: nav links were 42px, social and icon
   buttons 38-40px, and the section "see all" links only 24px tall.
   Inline links inside running text are exempt and left alone. */
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.ft-social a { width: 44px; height: 44px; }
.icon-btn { width: 44px; height: 44px; }
.link-arrow { min-height: 44px; padding-block: 10px; }
.faq summary { min-height: 56px; }
.contact-item .v a { display: inline-block; padding-block: 6px; }

/* Hero artwork uses an optimized photographic frame; its depth is supplied
   by the container shadow so the rectangular image edge stays intentional. */

/* Apple mark in the assurance band — a black PNG, so it is inverted in
   any dark context and left as-is on the light band. */
.band-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* ── Inner-page furniture ──────────────────────────────────────────
   Sub-pages reuse the same shell as the homepage; these are the few
   extra pieces their content needs. */
.page-head { background: var(--dark); color: #fff; padding-block: 132px 56px; position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 420px at 82% 10%, rgba(37,99,235,.20), transparent 62%); }
.page-head .wrap { position: relative; }
.page-head h1 { color: #fff; }
.page-head .lead { color: #CBD5E1; margin-top: 14px; max-width: 46rem; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: .8125rem;
  color: var(--on-dark-muted); margin-bottom: 16px; flex-wrap: wrap; }
.crumb a { color: var(--on-dark-muted); transition: color .2s; }
.crumb a:hover { color: #fff; }
.crumb [aria-current] { color: #fff; font-weight:500; }

.prose { max-width: 46rem; }
.prose h2 { font-size: 1.375rem; margin: 36px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--muted); font-size: .9688rem; line-height: 1.75; margin-bottom: 12px; }
.prose ul, .prose ol { padding-inline-start: 22px; margin-bottom: 16px; }
.prose a { color: var(--primary); font-weight:500; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--text); font-weight:600; }

.price-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; }
.price-table th, .price-table td { padding: 15px 18px; text-align: start; font-size: .9375rem;
  border-bottom: 1px solid var(--border); }
.price-table th { background: var(--surface); font-family: var(--font-head); font-weight:600; font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; border-radius: var(--r-card); }

@media (max-width: 760px) {
  .page-head { padding-block: 96px 40px; }
}

/* ── Pricing ───────────────────────────────────────────────────────
   Three tier cards over a per-model table. The table becomes a stack
   of cards under 700px — a 4-column price grid cannot be read on a
   phone, and horizontal scroll hides the very columns being compared. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-card); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; text-align: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 32px var(--s-pad); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.tier-feat { border-color: var(--primary); box-shadow: var(--sh-md); }
.tier-badge { position: absolute; top: -13px; inset-inline: 0; margin-inline: auto; width: max-content;
  background: var(--primary); color: #fff; font-family: var(--font-head); font-weight:600;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-btn); }
.tier h2 { font-size: 1.125rem; margin-bottom: 6px; }
.tier .tier-sub { font-size: .8125rem; color: var(--muted); margin-bottom: 18px; }
.tier .amt { font-family: var(--font-head); font-size: 2.375rem; font-weight: 700;
  letter-spacing: -.035em; line-height: 1.05; color: var(--text); }
.tier .amt small { display: block; font-family: var(--font-body); font-size: .75rem;
  font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 2px; }
.tier .amt .cur { font-size: .9375rem; font-weight: 600; color: var(--muted); margin-inline-start: 4px; }
.tier ul { list-style: none; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 10px;
  text-align: start; }
.tier li { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; color: var(--muted); }
.tier li svg { width: 17px; height: 17px; color: var(--ok); flex: none; margin-top: 2px; }
.tier .btn { width: 100%; margin-top: auto; }

.ptable-wrap { max-width: 820px; margin-inline: auto; }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--bg); }
.ptable th, .ptable td { padding: 15px 18px; text-align: center; font-size: .9375rem;
  border-bottom: 1px solid var(--border); }
.ptable th:first-child, .ptable td:first-child { text-align: start; }
.ptable thead th { background: var(--surface); font-family: var(--font-head); font-weight:600;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr:nth-child(even) { background: var(--surface); }
.ptable td { font-variant-numeric: tabular-nums; color: var(--text); }
.ptable td:first-child { font-weight: 600; }
.ptable-note { text-align: center; color: var(--muted); font-size: .8125rem; margin-top: 14px; }

@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
@media (max-width: 700px) {
  /* Table → cards. Each row becomes its own panel and every cell carries its
     column name, so the comparison survives without horizontal scrolling. */
  .ptable-wrap { width: 100%; min-width: 0; overflow: visible; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; min-width: 0; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ptable { border: 0; border-radius: 0; background: none; overflow: visible; }
  .ptable tr { border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden;
    background: var(--bg); box-shadow: var(--sh-sm); margin-bottom: 12px; padding: 6px 0; }
  .ptable tbody tr:nth-child(even) { background: var(--bg); }
  .ptable td { text-align: end; border-bottom: 1px solid var(--border); overflow-wrap: anywhere;
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 16px; }
  .ptable tr td:last-child { border-bottom: 0; }
  .ptable td::before { content: attr(data-label); flex: 1 1 auto; min-width: 0; font-size: .8125rem; font-weight: 600;
    color: var(--muted); text-align: start; white-space: normal; }
  .ptable td:first-child { background: var(--surface); font-family: var(--font-head);
    font-size: 1rem; font-weight: 700; justify-content: flex-start; }
  .ptable td:first-child::before { content: none; }
}

@media (max-width: 420px) {
  .ptable td { gap: 10px; padding: 11px 13px; font-size: .9rem; }
  .ptable td::before { font-size: .78rem; }
  .back-home, .back-top { inset-inline-end: 16px; width: 48px; height: 48px; border-radius: 15px; }
  .back-home { bottom: 82px; }
  .back-top { bottom: 138px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Carried-over class names ──────────────────────────────────────
   The sub-pages were re-shelled from the previous design system and a
   few of its class names survive in the copy. Rather than rewrite that
   markup (and risk the SEO blocks inside it), these map the old names
   onto the new system. Audited by diffing every class used in the HTML
   against every selector defined here. */

/* --faint was a token in the old sheet; alias it so nothing renders
   with an empty colour. Points at --muted, which is AA on both surfaces. */
:root { --faint: var(--muted); }

/* FAQ accordion (faq.html uses details.qa > summary > .chev, and .a) */
.faq details.qa { border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--bg);
  box-shadow: var(--sh-sm); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details.qa[open] { border-color: var(--primary); box-shadow: var(--sh-md); }
.faq .chev { display: grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--muted); }
.faq .chev svg { width: 19px; height: 19px; transition: transform .25s var(--ease); }
.faq details[open] .chev svg { transform: rotate(180deg); color: var(--primary); }
.faq .a { padding: 0 20px 18px; color: var(--muted); font-size: .9063rem; line-height: 1.7; }
.faq-extra { margin-top: 32px; }

/* Generic card icon wrapper used on contact.html */
.card .ic, .ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 13px; background: var(--surface); border: 1px solid var(--border);
  color: var(--primary); margin-bottom: 14px; }
.ic svg { width: 21px; height: 21px; stroke-width: 2.1; }

/* Bare `grid` (contact.html) — behaves like the 2-up card grid. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-card); }
.grid > .card, .grid > .card > div { min-width: 0; }
.grid > .card > div { overflow-wrap: anywhere; }

/* Tracking form (track.html) */
.track-search { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.track-search input { flex: 1; min-width: 0; min-height: 52px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--r-input); background: var(--bg);
  font: inherit; font-size: .9375rem; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.track-search input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12); }

/* Legal pages */
.legal-body { max-width: 46rem; }
.legal-body h2 { font-size: 1.375rem; margin: 34px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--muted); font-size: .9688rem; line-height: 1.75; margin-bottom: 12px; }
.legal-body ul, .legal-body ol { padding-inline-start: 22px; margin-bottom: 16px; }
.legal-body a { color: var(--primary); font-weight:500; }
.legal-note { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--border);
  border-radius: var(--r-btn); background: var(--surface); color: var(--muted);
  font-size: .875rem; line-height: 1.7; }

@media (max-width: 700px) { .track-search .btn { width: 100%; } }

/* A `.grid` nested inside a half-width column must not split again — on the
   contact page it was producing two cramped columns of contact cards inside
   an already-narrow half. */
.grid-2 .grid, .grid-3 .grid { grid-template-columns: 1fr; }

/* ── Centred layout ────────────────────────────────────────────────
   Every block that carries a max-width now also carries an auto inline
   margin. Without it a 46rem prose column sits flush-left inside the
   1200px wrap, leaving ~40% of the page empty on the right — which is
   what made the inner pages look unbalanced. */
.prose,
.legal-body,
.ptable-wrap,
.track-search { margin-inline: auto; }

/* Long-form reading columns get a comfortable measure rather than the
   full 1200px, which would run to ~150 characters per line. */
.faq { max-width: 52rem; margin-inline: auto; }
.legal-body.card { max-width: 52rem; padding: 36px 40px; }

/* Inner-page headers read as a centred title block. The homepage hero
   stays left-aligned — it pairs with the device artwork. */
.page-head .wrap { text-align: center; }
.page-head .crumb { justify-content: center; }
.page-head .lead { margin-inline: auto; }

/* A section heading with nothing beside it centres; one paired with a
   "see all" link keeps the split layout. */
.sec-head:has(> :only-child) { justify-content: center; text-align: center; }
.sec-head:has(> :only-child) > * { margin-inline: auto; }

/* Contact: the two halves are given equal weight so the right column
   no longer looks like leftover space. */
.contact-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

@media (max-width: 760px) {
  .legal-body.card { padding: 24px 20px; }
  .page-head .crumb { justify-content: flex-start; }
  .page-head .wrap { text-align: start; }
}

/* The "last updated" line on the legal pages sits directly above the
   content card and should share its alignment and column. */
.legal-body + .lead,
.lead:has(+ .legal-body),
.lead:has(+ .card.legal-body) { max-width: 52rem; margin-inline: auto;
  text-align: center; font-size: .875rem; margin-bottom: 20px; }