/* AirportTransfers.ai — base layer
   Import after tokens.css. Shared primitives every preview and page uses. */


* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-mid);
  font-family: var(--font-ui);
  font-size: var(--body);
  line-height: var(--body-lh);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Type primitives ---------- */

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--eyebrow);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 var(--sp-4);
}
/* Operational eyebrow: the mono variant every page uses above its headings. */
.eyebrow--op { font-family: var(--font-op); letter-spacing: .2em; color: var(--champagne-500); margin: 0; }

.display-xl, .display-l, .display-m, .title {
  font-family: var(--font-display);
  color: var(--text-hi);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: var(--display-xl); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); }
.display-l  { font-size: var(--display-l);  line-height: var(--display-l-lh);  letter-spacing: var(--display-l-ls); }
.display-m  { font-size: var(--display-m);  line-height: var(--display-m-lh);  letter-spacing: var(--display-m-ls); }
.title      { font-size: var(--title);      line-height: var(--title-lh);      letter-spacing: var(--title-ls); font-weight: 500; }

.lead    { font-size: var(--body-l); line-height: var(--body-l-lh); color: var(--text-mid); margin: 0; }
.caption { font-size: var(--caption); line-height: var(--caption-lh); color: var(--text-low); margin: 0; }

/* Facts. Never a sentence. */
.data-l, .data, .data-s {
  font-family: var(--font-op);
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
  margin: 0;
}
.data-l { font-size: var(--data-l); line-height: var(--data-l-lh); letter-spacing: var(--data-l-ls); font-weight: 500; }
.data   { font-size: var(--data);   line-height: var(--data-lh); }
.data-s { font-size: var(--data-s); line-height: var(--data-s-lh); letter-spacing: var(--data-s-ls); color: var(--text-low); text-transform: uppercase; }

/* ---------- Layout primitives ---------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-rhythm); background: var(--section); }
.section--page { background: var(--page); }

/* The fare. DESIGN.md: "the fare is the largest element in any commercial
   block after the headline." Fleet and fare cards use this, not .data —
   .data at 15px put the price beneath a 22px class name and inverted the
   hierarchy the whole page is built to deliver. */
.price {
  font-family: var(--font-op);
  font-variant-numeric: tabular-nums;
  font-size: var(--data-l);
  line-height: var(--data-l-lh);
  letter-spacing: var(--data-l-ls);
  font-weight: 500;
  color: var(--text-hi);
  margin: 0;
}
.price__from {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-low);
}
/* No published fare yet — never render an empty cell or a bare currency code. */
.price--unset { color: var(--text-low); font-size: var(--data); letter-spacing: 0; }

/* Uneven split — 45/55, never 50/50. Copy left, object right. */
.split {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- Surfaces ---------- */

.card {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--sp-5);
}
/* The featured state. A hairline and nothing else — no glow, no scale, no badge. */
.card--featured { border-color: var(--line-accent); }

.hairline { border: 0; border-top: var(--border) solid var(--line); margin: 0; }

/* ---------- Controls ---------- */

/* Buttons. One recipe each, no per-page overrides: markup carries only layout (flex, width, order, margin).
     .btn                  56px everywhere (form submits and the checkout pay bar too), 16px type, 24px sides
     .btn.hv-cta           gold CTA, 600, 18px label, 32px sides, 8px label-to-arrow, 18px icons
     .btn.btn--ghost       quilted secondary, 500, 22px sides, 9px gap, 16px icons; 18px on the icon side when an
                           icon leads (the <svg> is the first element, before the label)
     .btn.btn--wa          WhatsApp green quilt, same spacing as ghost: the floating button only. Every other
                           WhatsApp button is ghost (owner, 2026-09-30); checkout confirmation stays gold
     .btn--s               44px header chrome: 16px sides, 8px gap, 13px type (WhatsApp label 16px)
     .btn--icon            square icon-only (width = height), with .btn--s in header chrome
     .btn--float           the fixed WhatsApp/Call pair, 44px, 18px sides, 15px type
     .icon-btn             round photo/lightbox control, one size (40px)
   Sizes swap tokens on the element (see tokens.css), so they win whatever order the sheets load in. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  font-family: var(--font-ui);
  font-size: var(--btn-fs, var(--body));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  min-height: var(--btn-h);
  box-sizing: border-box;
  padding: 0 var(--btn-px) 0 var(--btn-px-lead, var(--btn-px));
  border-radius: var(--radius-s);
  border: var(--border) solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none;
}
/* Variant spacing (sizes below outrank these with a second class) */
.hv-cta { --btn-px: var(--btn-px-cta); --btn-gap: var(--btn-gap-cta); --btn-fs: var(--btn-fs-cta); }
.btn--ghost, .btn--wa { --btn-px: var(--btn-px-ghost); --btn-gap: var(--btn-gap-ghost); }
/* Icon-led: the icon side runs tighter than the label side. */
.btn--ghost:has(> svg:first-child), .btn--wa:has(> svg:first-child) { --btn-px-lead: var(--btn-px-icon); }
/* Compact header chrome: even sides, icon or not (--btn-px-icon follows the size's own --btn-px). */
.btn.btn--s { --btn-h: var(--btn-h-s); --btn-px: var(--btn-px-s); --btn-px-icon: var(--btn-px); --btn-gap: var(--btn-gap-s); --btn-fs: var(--caption); }
/* Header WhatsApp: 16px label (D5). */
.btn.btn--s[href*="wa.me/"] { --btn-fs: var(--body); }
.btn.btn--icon { width: var(--btn-h); padding: 0; }
/* Primary is always a champagne fill. Never an outline. */
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover, .btn--primary[data-mid] { background: var(--accent-hi); }
.btn--primary:active { background: var(--accent-lo); }

/* Secondary: 4f diamond quilt + piped gold edge. The one definition; site.css adds only the glint (::after). */
.btn--ghost { color: var(--text-hi); border: var(--border) solid transparent; text-decoration: none; white-space: nowrap;
  background: url(../textures/quilt-black-site.webp) 0 0 / 64px 48px repeat padding-box,
    radial-gradient(90% 140% at 28% -30%, rgba(245,241,234,.08), rgba(245,241,234,0) 65%) padding-box,
    linear-gradient(var(--ink-900), var(--ink-900)) padding-box,
    radial-gradient(70% 90% at 50% 100%, rgba(248,230,166,.95) 0%, rgba(231,198,92,.55) 38%, rgba(231,198,92,0) 78%) border-box,
    linear-gradient(180deg, rgba(200,160,50,.42) 0%, rgba(200,160,50,.16) 50%, rgba(200,160,50,.08) 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.9), inset 0 0 0 2.5px rgba(232,210,166,.2), inset 0 0 0 3.5px rgba(0,0,0,.8);
  transition: color var(--dur) var(--ease); }
/* Secondary hover: fill to the next ink surface, border gradients untouched, no outer glow. */
.btn--ghost:hover, .btn--ghost[data-mid] { color: var(--gold-300); border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.9), inset 0 0 0 2.5px rgba(232,210,166,.26), inset 0 0 0 3.5px rgba(0,0,0,.8);
  background: url(../textures/quilt-black-site.webp) 0 0 / 64px 48px repeat padding-box,
    radial-gradient(90% 140% at 28% -30%, rgba(245,241,234,.1), rgba(245,241,234,0) 65%) padding-box,
    linear-gradient(#241E11, #241E11) padding-box,
    radial-gradient(70% 90% at 50% 100%, rgba(248,230,166,.95) 0%, rgba(231,198,92,.55) 38%, rgba(231,198,92,0) 78%) border-box,
    linear-gradient(180deg, rgba(200,160,50,.42) 0%, rgba(200,160,50,.16) 50%, rgba(200,160,50,.08) 100%) border-box; }
/* WhatsApp: the green quilt with a mint piped edge. Stands alone on .btn (no .btn--ghost needed); white label, no hover recolour. */
.btn--wa { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.28); border: var(--border) solid transparent; text-decoration: none;
  background: url(../textures/quilt-black-site.webp) 0 0 / 64px 48px repeat padding-box,
    radial-gradient(90% 140% at 28% -30%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%) padding-box,
    linear-gradient(180deg, #189A4C, #12803E) padding-box,
    radial-gradient(70% 90% at 50% 100%, rgba(196,255,214,.95) 0%, rgba(96,220,140,.55) 38%, rgba(96,220,140,0) 78%) border-box,
    linear-gradient(180deg, rgba(60,190,110,.55) 0%, rgba(40,150,85,.3) 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 2.5px rgba(210,255,225,.28), inset 0 0 0 3.5px rgba(0,0,0,.25); }
.btn.btn--wa:hover, .btn.btn--wa[data-mid] { color: #fff; }
/* Secondary glint (ghost and WhatsApp): a short gold hairline that slides along the top edge on hover. */
.btn--ghost, .btn--wa { position: relative; overflow: hidden; }
.btn--ghost::after, .btn--wa::after { content: ''; position: absolute; top: 0; --gw: min(60px, 45%); left: calc((100% - var(--gw)) * .1); width: var(--gw); height: 5px; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,246,214,.95), rgba(248,230,166,0)) 50% 0 / 30% 5px no-repeat,
    linear-gradient(90deg, rgba(248,230,166,0), rgba(255,246,214,1), rgba(248,230,166,0)) 0 0 / 100% 1px no-repeat;
  transition: left var(--fluid-in) var(--ease-fluid); }
.btn--ghost:hover::after, .btn--ghost[data-mid]::after, .btn--wa:hover::after, .btn--wa[data-mid]::after { left: calc((100% - var(--gw)) * .62); }
@media (prefers-reduced-motion: reduce) { .btn--ghost::after, .btn--wa::after { transition: none; } }

/* Primary CTA: struck gold. 4f quilt, piped edge, sliding glint, one specular sweep on hover.
   !important beats any inline literal (and the all:unset hero CTA in Landing CTA.dc.html). */
@keyframes hv-cta-sweep { 0% { transform: translateX(-140%) skewX(-16deg); } 42% { transform: translateX(330%) skewX(-16deg); } 100% { transform: translateX(330%) skewX(-16deg); } }
.hv-cta { position: relative !important; overflow: hidden !important; isolation: isolate; text-decoration: none;
  border: var(--border) solid #7A5C14 !important; color: var(--ink-900) !important; font-weight: 600;
  background: radial-gradient(closest-side, rgba(255,253,244,.95), rgba(255,253,244,0)) 12% 0 / 14px 5px no-repeat,
    linear-gradient(90deg, rgba(255,251,236,0), rgba(255,251,236,1), rgba(255,251,236,0)) 10% 0 / 60px 1px no-repeat, url(../textures/quilt-gold-site.webp) 0 0 / 64px 48px repeat, var(--gold-grad) !important;
  box-shadow: inset 0 0 0 1px rgba(96,68,12,.55), inset 0 0 0 2.5px rgba(255,245,205,.6), inset 0 0 0 3.5px rgba(96,68,12,.4), 0 10px 22px rgba(0,0,0,.36) !important;
  transition: box-shadow var(--glide) var(--ease-glide), transform var(--spring-snappy-dur) var(--spring-snappy), background-position var(--fluid-in) var(--ease-fluid) !important; }
/* The owner's benchmark: the gold CTA keeps the curves it was approved with. */
.hv-cta { --ease-glide: var(--ease-pinned-out); --spring-snappy: var(--ease-pinned-out); --ease-fluid: var(--ease-pinned-in); --glide: 800ms; }
.hv-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32; mix-blend-mode: screen;
  background: radial-gradient(120% 150% at 50% 132%, rgba(255,253,240,.9) 0%, rgba(255,246,214,.34) 30%, rgba(255,246,214,0) 64%);
  transition: opacity var(--glide) var(--ease-glide); }
.hv-cta::after { content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 34%; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.58) 50%, rgba(255,255,255,0) 100%);
  filter: blur(2px); transform: translateX(-140%) skewX(-16deg); }
.hv-cta:hover, .hv-cta[data-mid] { transform: translateY(-1px); color: var(--ink-900) !important; background-position: 64% 0, 62% 0, 0 0, 0 0 !important;
  box-shadow: inset 0 0 0 1px rgba(96,68,12,.55), inset 0 0 0 2.5px rgba(255,245,205,.6), inset 0 0 0 3.5px rgba(96,68,12,.4), inset 0 0 18px rgba(255,238,190,.45), 0 14px 30px rgba(0,0,0,.44) !important; }
.hv-cta:hover::before, .hv-cta[data-mid]::before { opacity: .7; }
.hv-cta:hover::after, .hv-cta[data-mid]::after { animation: hv-cta-sweep var(--sweep) var(--ease-sweep) 1 both; }
.hv-cta:active { transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(96,68,12,.55), inset 0 0 0 2.5px rgba(255,245,205,.6), inset 0 0 0 3.5px rgba(96,68,12,.4), inset 0 2px 7px rgba(86,60,10,.5), 0 6px 14px rgba(0,0,0,.4) !important; }
.hv-cta:focus-visible { outline: 2px solid var(--champagne-400); outline-offset: 3px; }
.hv-cta > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hv-cta::after { animation: none !important; } }

/* Floating pair (fixed bottom-right): green WhatsApp + ghost Call, 44px; Call drops the piping. No drop shadow: on the
   dark page it only darkened a box of the page behind them. */
.btn.btn--float { --btn-h: var(--btn-h-s); --btn-px: var(--btn-px-float); --btn-px-icon: var(--btn-px-float); --btn-gap: var(--btn-gap-s); --btn-fs: var(--data); }
.btn.btn--float, .btn.btn--float:hover, .btn.btn--float[data-mid] { box-shadow: none; }
.btn.btn--float.btn--wa, .btn.btn--float.btn--wa:hover, .btn.btn--float.btn--wa[data-mid] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 2.5px rgba(210,255,225,.28), inset 0 0 0 3.5px rgba(0,0,0,.25); }

/* Call menu (at-ds/call-menu.js): the three offices rise above the floating Call, which turns into Close. In on
   --ease-fluid with a 40ms stagger, out on --ease-glide; the menu stays in the page and hides once the exit is done. */
.call-menu { position: fixed; z-index: 71; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
  visibility: hidden; pointer-events: none; transition: visibility; transition-delay: var(--fluid-out); }
.call-menu[data-open] { visibility: visible; pointer-events: auto; transition: visibility; }
.call-menu > .btn { opacity: 0; translate: 0 10px; scale: .97; transform-origin: 100% 50%;
  transition: opacity var(--fluid-out) var(--ease-exit), translate var(--fluid-out) var(--ease-exit), scale var(--fluid-out) var(--ease-exit),
    color var(--dur) var(--ease); }
.call-menu[data-open] > .btn { opacity: 1; translate: 0 0; scale: 1;
  transition: opacity var(--fluid-in) var(--ease-fluid) calc(var(--i) * var(--stagger)), translate var(--fluid-in) var(--ease-fluid) calc(var(--i) * var(--stagger)),
    scale var(--fluid-in) var(--ease-fluid) calc(var(--i) * var(--stagger)), color var(--dur) var(--ease); }
.call-menu > .call-menu__close { translate: none; scale: none; }
.btn.call-menu__pill { gap: 12px; text-decoration: none; }
.call-menu__place { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-op); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mid); }
.call-menu__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.call-menu__pill > svg { color: var(--champagne-500); }
/* Singapore, the main line: a gold edge, gold number and a Main tag. */
.btn.call-menu__pill--main, .btn.call-menu__pill--main:hover { border-color: var(--champagne-500); }
.call-menu__pill--main .call-menu__num { color: var(--champagne-400); }
.call-menu__tag { padding: 3px 6px; border-radius: var(--radius-full); background: rgba(217,190,138,.16); color: var(--champagne-500); letter-spacing: .1em; }
/* While the menu is up, the Call underneath fades out behind Close. */
[data-float-cta] a.btn--ghost[href^="tel:"] { transition: opacity var(--fluid-in) var(--ease-fluid), color var(--dur) var(--ease); }
[data-float-cta][data-call-open] a.btn--ghost[href^="tel:"] { opacity: 0; transition: opacity var(--fluid-out) var(--ease-exit), color var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) { .call-menu, .call-menu > .btn, [data-float-cta] a[href^="tel:"] { transition: none !important; } }

/* Round icon button: photo arrows, expand, lightbox close. One size. Dark glass disc, gold on hover. */
.icon-btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center;
  width: var(--icon-btn); height: var(--icon-btn); border-radius: var(--radius-full);
  background: rgba(11,10,9,.72); border: var(--border) solid rgba(245,241,234,.24); color: var(--text-hi); }
/* Outline only, for a control that sits on the page rather than on a photo */
.icon-btn--line { background: none; border-color: var(--line-strong); }
.icon-btn:hover { border-color: var(--gold-400); color: var(--gold-400); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-btn svg { display: block; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[data-pending] { opacity: .7; cursor: progress; pointer-events: none; }

/* One focus ring for every interactive element in the system. */
.btn:focus-visible,
.chip-input:focus-visible + .chip,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field > label {
  font-size: var(--caption);
  color: var(--text-low);
}
.field > input,
.field > select {
  font-family: var(--font-ui);
  font-size: var(--body);
  color: var(--text-hi);
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
  /* The input itself carries no ring — .field:focus-within draws it on the
     whole slot, which is the visible box. Never re-add `outline: none`
     without a replacement: this is the primary conversion control. */
  outline-offset: 2px;
}
.field > input::placeholder { color: var(--text-low); }

/* Focus lands on the slot, not the bare text cursor. */
.field:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
}

/* Error + disabled — the form will hit both. */
.field[data-invalid] { border-color: var(--alert-500); }
.field__msg {
  font-size: var(--caption);
  color: var(--alert-500);
  margin: 0;
}
.field[data-invalid] > label { color: var(--alert-500); }

/* Touch target floor: 44px. Applies to every hit area in the system. */
.field { min-height: 44px; justify-content: center; }

/* Chips — the only place radius-full is allowed.
   Markup is a real radio + label, NOT a <button>. A button cannot change
   its own state without JavaScript, and the system forbids JS for content.
   The radio also submits the chosen class with the form, which a button
   never did. Pattern:
     <input class="chip-input" type="radio" name="class" id="c-mpv" value="mpv" checked>
     <label class="chip" for="c-mpv">Luxury MPV</label>  */
.chip-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* touch target floor — was 39px */
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  color: var(--text-mid);
  background: transparent;
  border: var(--border) solid var(--line-strong);  /* was --line at 1.26:1 */
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--champagne-700); color: var(--text-hi); }
.chip-input:checked + .chip {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Chip rows scroll rather than wrap on narrow screens. */
.chiprow {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}
@media (max-width: 640px) {
  .chiprow { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-2); }
}

/* ---------- Semantic marks ---------- */

/* Jade dot. Guarantees only — never a checkmark icon. */
.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--jade-500);
  flex: none;
}
/* NOTE: there is deliberately no `.is-against` / red competitor styling.
   Colouring a competitor's cell red turns a neutral service-model fact into
   disparagement, and the claims in that table are not substantiated. Facts
   only; the champagne hairline on our own column does the persuading. */

/* ---------- Photography ---------- */

.photo {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ink-600);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
}
.photo--bleed { border-radius: 0; }

/* Placeholder used until real fleet photography lands in brand/fleet/.
   Deliberately obvious — this must never ship. */
.photo-placeholder {
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  text-align: center;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg,
      var(--ink-600) 0 12px,
      var(--ink-700) 12px 24px);
  border: var(--border) dashed var(--champagne-700);
  border-radius: var(--radius-l);
  color: var(--text-low);
  font-family: var(--font-op);
  font-size: var(--data-s);
  letter-spacing: var(--data-s-ls);
  text-transform: uppercase;
  padding: var(--sp-5);
}

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-op);
  font-size: var(--data);
  font-variant-numeric: tabular-nums;
}
table.data-table th {
  text-align: left;
  font-weight: 500;
  font-size: var(--data-s);
  letter-spacing: var(--data-s-ls);
  text-transform: uppercase;
  color: var(--text-low);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border) solid var(--line);
  white-space: nowrap;
}
table.data-table td {
  padding: var(--sp-4);
  border-bottom: var(--border) solid var(--line);
  color: var(--text-hi);
  vertical-align: top;
}
table.data-table .num { text-align: right; white-space: nowrap; }

/* ---------- Preview chrome (design-system previews only, not the site) ---------- */

.ds-preview { padding: var(--sp-7) var(--sp-5); background: var(--page); }
.ds-preview__label {
  font-family: var(--font-op);
  font-size: var(--data-s);
  letter-spacing: var(--data-s-ls);
  text-transform: uppercase;
  color: var(--text-low);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border) solid var(--line);
}
.ds-variant + .ds-variant { margin-top: var(--sp-7); }
.ds-variant__name {
  font-family: var(--font-op);
  font-size: var(--data-s);
  letter-spacing: var(--data-s-ls);
  text-transform: uppercase;
  color: var(--champagne-700);
  margin: 0 0 var(--sp-3);
}
.ds-note {
  font-size: var(--caption);
  color: var(--text-low);
  border-left: var(--border) solid var(--champagne-700);
  padding-left: var(--sp-3);
  margin-top: var(--sp-4);
}