/* Tajr marketing site (tajr.ae). One stylesheet for every page.

   RULES THIS FILE KEEPS (checked by the greps listed in landing/README.md):
   - Every colour is a token in the :root block directly below. No hex value
     appears anywhere else in this file, in the HTML, or in the JS.
   - Logical properties only: margin-inline / padding-inline / inset-inline /
     text-align: start|end. The same rules serve the Arabic (rtl) and the
     English (ltr) pages; a directional icon carries `.flip`.
   - Cards are flat: a 1px border and no shadow. --shadow-float is only for
     things that float (the storefront mock's order card, the open phone menu).
   - Font weights are 400 / 500 / 600. Nothing is heavier. */

:root {
  /* Brand */
  --band: #2E3192;            /* hero and closing band: the logo's navy */
  --primary: #5765F9;         /* filled primary button */
  --primary-hover: #4450E6;
  --link: #4450E6;            /* links and indigo text ("ink") */
  --primary-soft: #EEF0FE;    /* icon chips, badges, notes */
  --primary-deep: #3740C4;    /* text on --primary-soft */
  --primary-line: #C4CAFC;    /* hover borders, the steps rail */
  --store-accent: #FFAA58;    /* brand orange: only the storefront mock's announcement strip */

  /* Neutrals */
  --text: #1C2140;
  --muted: #565E78;
  --canvas: #F5F6FB;
  --sunk: #ECEEF5;
  --card: #FFFFFF;
  --border: #DDE0EB;          /* dividers and cards (decorative) */
  --input: #858CA3;           /* control borders: 3:1 or better */

  /* Status: green means "paid" and nothing else */
  --success: #15803D;
  --success-bg: #EAF6EE;

  /* On the band */
  --on-band: #FFFFFF;
  --on-band-muted: #C4CAFC;
  --on-band-fill: rgb(255 255 255 / .12);
  --on-band-line: rgb(255 255 255 / .6);

  /* Shape */
  --radius-sm: 10px;          /* buttons, chips, small boxes */
  --radius-md: 14px;          /* cards */
  --radius-lg: 16px;          /* panels and bands */
  --shadow-float: 0 2px 6px rgb(28 33 64 / .08), 0 24px 48px -24px rgb(28 33 64 / .45);

  /* Type */
  --font: Inter, "IBM Plex Sans Arabic", system-ui, sans-serif;
  --measure: 1180px;
}

/* ---------- fonts: self-hosted, SIL OFL 1.1 (fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexSansArabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/IBMPlexSansArabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/IBMPlexSansArabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--font); font-size: 1rem; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: inherit; font-weight: 600; margin: 0; text-wrap: balance; color: var(--text); }
b, strong, th { font-weight: 600; }   /* the browser default is 700 */
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Line height per language: Arabic needs more air than Latin. */
:lang(ar) { line-height: 1.7; }
:lang(ar) :is(h1, h2, h3) { line-height: 1.4; }
:lang(en) { line-height: 1.6; }
:lang(en) :is(h1, h2, h3) { line-height: 1.18; }

/* Digits, emails and shop addresses are LTR in both languages. */
.ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.i { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor;
     stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 24px; }
.flush { padding-inline: 0; }
@media (max-width: 1228px) { .flush { padding-inline: 24px; } }
@media (max-width: 520px) { .wrap, .flush { padding-inline: 16px; } }
section { padding-block: clamp(40px, 5vw, 64px); }

.eyebrow { font-size: .875rem; font-weight: 600; color: var(--link); margin-block-end: 8px; }
:lang(en) .eyebrow { letter-spacing: .04em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); }
.sec-lede { margin-block-start: 12px; color: var(--muted); max-width: 62ch; font-size: 1.0625rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.4;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.btn-primary { background: var(--primary); color: var(--on-band); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--input); }
.btn-ghost:hover { border-color: var(--link); color: var(--link); }
.btn-full { width: 100%; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary-deep);
  font-size: .8125rem; font-weight: 500;
}
.badge img { width: 18px; height: 18px; display: block; flex: none; }

.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
  inset-inline-start: 16px; top: 12px; z-index: 50;
  background: var(--primary); color: var(--on-band); padding: 10px 18px; border-radius: var(--radius-sm);
}

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: var(--card); border-block-end: 1px solid var(--border);
}
.bar { display: flex; align-items: center; gap: 20px; height: 68px; position: relative; }
.bar > .btn, .bar #lang, .bar .wordmark { white-space: nowrap; flex: none; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
/* Each page ships its own language's lockup only (build-en.py swaps the
   files): `.lg` for a light ground, `.lg-w` (white) while the header sits
   on the navy band. */
.wordmark img { height: 40px; width: auto; display: block; }
.wordmark .lg-w { display: none; }
footer .wordmark img { height: 34px; }
@media (max-width: 520px) { .wordmark img { height: 30px; } }

nav { display: flex; gap: 24px; margin-inline-start: 12px; }
nav a { font-size: .9375rem; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
nav a:hover, nav a[aria-current="page"] { color: var(--link); }

#lang {
  margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--input); background: var(--card); color: var(--text);
  font-size: .875rem; font-weight: 500; text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-sm);
}
#lang:hover { border-color: var(--link); color: var(--link); }

#menu { display: none; }
#menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
@media (max-width: 1240px) {
  nav { display: none; }
  #login { display: none; }
  #menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 1px solid var(--input); background: var(--card); color: var(--text);
    border-radius: var(--radius-sm); cursor: pointer;
  }
  #menu:hover { border-color: var(--link); color: var(--link); }
  nav[data-open] {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; inset-inline: 0; top: 100%; margin: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 4px 20px 8px; box-shadow: var(--shadow-float);
  }
  nav[data-open] a { padding-block: 14px; font-size: 1rem; color: var(--text); border-block-start: 1px solid var(--border); }
  nav[data-open] a:first-child { border-block-start: 0; }
}
@media (max-width: 620px) {
  .bar { gap: 10px; }
  #lang { padding-inline: 10px; }
  .bar .btn-sm { padding-inline: 12px; font-size: .875rem; }
}
@media (max-width: 400px) {
  .bar { gap: 8px; }
  #lang { padding-inline: 8px; }
  .bar .btn-sm { padding-inline: 10px; }
}

/* The header over the navy band. header-band.js keeps `over-band` while the
   band is behind the header and removes it once the band has scrolled away. */
.on-slab.over-band { background: var(--band); border-block-end-color: transparent; color: var(--on-band); }
.on-slab.over-band nav a { color: var(--on-band-muted); }
.on-slab.over-band nav a:hover, .on-slab.over-band nav a[aria-current="page"] { color: var(--on-band); }
.on-slab.over-band #lang,
.on-slab.over-band #menu,
.on-slab.over-band .btn-ghost { background: transparent; color: var(--on-band); border-color: var(--on-band-line); }
.on-slab.over-band #lang:hover,
.on-slab.over-band #menu:hover,
.on-slab.over-band .btn-ghost:hover { background: var(--on-band-fill); border-color: var(--on-band); color: var(--on-band); }
.on-slab.over-band .btn-primary { background: var(--card); color: var(--link); }
.on-slab.over-band .btn-primary:hover { background: var(--primary-soft); }
.on-slab.over-band :focus-visible { outline-color: var(--on-band); }
.on-slab.over-band nav[data-open] { background: var(--band); border-color: var(--on-band-fill); }
.on-slab.over-band nav[data-open] a { color: var(--on-band); border-block-start-color: var(--on-band-fill); }
.on-slab.over-band .wordmark .lg { display: none; }
.on-slab.over-band .wordmark .lg-w { display: block; }

/* ---------- the navy band (heroes and closing cards) ---------- */
.hero-slab, .sol-slab, .close-slab { background: var(--band); color: var(--on-band); }
:is(.hero-slab, .sol-slab, .close-slab) :is(h1, h2) { color: var(--on-band); }
:is(.hero-slab, .sol-slab, .close-slab) .lede,
:is(.hero-slab, .sol-slab, .close-slab) p { color: var(--on-band-muted); }
:is(.hero-slab, .sol-slab, .close-slab) .eyebrow { color: var(--on-band-muted); }
:is(.hero-slab, .sol-slab, .close-slab) .badge { background: var(--on-band-fill); color: var(--on-band); }
/* On the band the primary button inverts: indigo on navy is too weak as a shape. */
:is(.hero-slab, .sol-slab, .close-slab) .btn-primary { background: var(--card); color: var(--link); }
:is(.hero-slab, .sol-slab, .close-slab) .btn-primary:hover { background: var(--primary-soft); }
:is(.hero-slab, .sol-slab, .close-slab) .btn-ghost { background: transparent; color: var(--on-band); border-color: var(--on-band-line); }
:is(.hero-slab, .sol-slab, .close-slab) .btn-ghost:hover { background: var(--on-band-fill); border-color: var(--on-band); }
:is(.hero-slab, .sol-slab, .close-slab) :focus-visible { outline-color: var(--on-band); }
/* Panels drawn on the band are light surfaces again. */
:is(.hero-slab, .sol-slab) :is(.frame, .sc) p { color: var(--muted); }

/* ---------- home hero ---------- */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
.hero-slab { padding-block: clamp(36px, 5vw, 60px) clamp(56px, 7vw, 92px); }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.hero-slab h1 { max-width: 16ch; margin-block-start: 18px; }
.hero-slab .lede { margin-block-start: 16px; max-width: 46ch; font-size: clamp(1.0625rem, 2vw, 1.1875rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.hero-note { margin-block-start: 12px; font-size: .875rem; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: center; }
  .hero-slab h1, .hero-slab .lede { margin-inline: auto; }
  .hero-cta { justify-content: center; }
}

/* The storefront mock: a miniature of the classic storefront template
   (apps/storefront classic-header, product-card and the homepage blocks),
   drawn in markup and aria-hidden. Half the hero on a desktop, full width
   under the copy on a phone. */
.shopmock { position: relative; width: 100%; margin-block-end: 30px; }  /* room for the hanging order card */
@media (max-width: 900px) { .shopmock { max-width: 620px; margin-inline: auto; } }
.frame { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); color: var(--text); text-align: start; }
.frame-bar {
  padding: 10px 14px; border-block-end: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; background: var(--sunk);
  border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; background: var(--input); }
.frame-url { margin-inline-start: auto; font-size: .75rem; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1px 10px; }
.sf { background: var(--card); overflow: hidden; line-height: 1.5; border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.hero-slab .sf .sf-announce { margin: 0; padding: 5px 12px; background: var(--store-accent); color: var(--text); font-size: .6875rem; font-weight: 500; text-align: center; }
.sf-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-block-end: 1px solid var(--border); }
.sf-start { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sf-logo { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sf-logo b { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.sf-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--band); color: var(--on-band); display: grid; place-items: center; }
.sf-mark svg { width: 14px; height: 14px; fill: currentColor; }
.sf-nav { display: flex; gap: 12px; font-size: .75rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.sf-nav .on { color: var(--link); font-weight: 600; }
.sf-icons { display: flex; gap: 5px; flex: none; }
.sf-tile { position: relative; width: 28px; height: 28px; border-radius: 8px; background: var(--sunk); color: var(--muted); display: grid; place-items: center; flex: none; }
.sf-tile svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-menu { display: none; }
.sf-cart i { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--primary); color: var(--on-band); font-size: .5625rem; font-weight: 600; font-style: normal; display: grid; place-items: center; line-height: 1; }
.sf-body { padding: 12px 14px 34px; }  /* the bottom margin is where the order card hangs */
.sf-banner {
  position: relative; aspect-ratio: 3 / 1; border-radius: 10px; border: 1px solid var(--border); overflow: hidden;
  background: var(--band); color: var(--on-band);
  display: flex; align-items: center; justify-content: space-between; padding-inline: 20px 8px;
}
.sf-banner-copy b { display: block; font-size: 1rem; font-weight: 600; }
.sf-banner-copy span { display: block; font-size: .6875rem; color: var(--on-band-muted); }
.sf-banner-art { height: 92%; width: auto; flex: none; }
.f-soft-a { fill: var(--on-band-fill); }
.sf-dots { position: absolute; bottom: 7px; inset-inline: 0; display: flex; justify-content: center; gap: 4px; }
.sf-dots i { width: 4px; height: 4px; border-radius: 2px; background: var(--on-band-line); }
.sf-dots i.on { width: 12px; background: var(--on-band); }
.hero-slab .sf .sf-h { margin-block: 14px 8px; font-size: .8125rem; font-weight: 600; color: var(--text); }
.sf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sf-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.sf-img { aspect-ratio: 1; background: var(--sunk); border-block-end: 1px solid var(--border); display: grid; place-items: center; }
.sf-img svg { width: 62%; height: 62%; }
.sf-cbody { display: flex; flex-direction: column; gap: 7px; padding: 7px; flex: 1; }
.sf-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.sf-row b { font-size: .625rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sf-price { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: .625rem; font-weight: 600; color: var(--link); }
.sf-add { margin-block-start: auto; border-radius: 7px; background: var(--primary); color: var(--on-band); text-align: center; font-size: .5625rem; font-weight: 500; padding-block: 5px; }
.f-band { fill: var(--band); }
.f-primary { fill: var(--primary); }
.f-soft { fill: var(--primary-soft); }
.f-line { fill: var(--primary-line); }
.s-muted { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
/* The paid-order card hangs off the frame's bottom edge, over the empty
   bottom margin of .sf-body, so it never covers the storefront itself. */
.paycard {
  position: absolute; top: calc(100% - 22px); inset-inline-end: 18px; max-width: calc(100% - 36px);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float); color: var(--text); font-size: .8125rem; line-height: 1.4;
}
.pc-ok { width: 24px; height: 24px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: grid; place-items: center; flex: none; }
.pc-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-what b { font-weight: 600; }
.pc-no { color: var(--muted); }
.pc-amt { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pc-paid { background: var(--success-bg); color: var(--success); font-weight: 600; font-size: .75rem; border-radius: 6px; padding: 1px 8px; }
/* Below 560px the storefront itself switches to its phone layout: the nav
   becomes the menu tile and the grid drops to two columns. */
@media (max-width: 560px) {
  .sf-nav { display: none; }
  .sf-menu { display: grid; }
  .sf-start { gap: 8px; }
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-card:nth-child(n+3) { display: none; }
  .sf-row b, .sf-price { font-size: .6875rem; }
  .sf-add { font-size: .625rem; }
}
@media (max-width: 400px) { .pc-no { display: none; } }
.aed {
  display: inline-block; width: calc(.7em * (1000 / 870)); height: .7em;
  background: currentColor;
  -webkit-mask: url("brand/aed.svg") no-repeat center / contain;
  mask: url("brand/aed.svg") no-repeat center / contain;
}

/* ---------- value strip, lifted over the band's edge ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip > li { padding: 22px 18px; display: flex; gap: 14px; align-items: flex-start; }
.strip .ico { height: 28px; display: flex; align-items: center; flex: none; color: var(--link); }
.strip .ico img, .strip .ico svg { display: block; width: 24px; height: 24px; }
.strip b { display: block; font-size: .9375rem; font-weight: 600; margin-block-end: 2px; }
.strip .sub { display: block; font-size: .875rem; color: var(--muted); line-height: 1.6; }
.strip-lift {
  margin-block-start: clamp(-58px, -5vw, -34px); position: relative; z-index: 2;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 8px 12px;
}
@media (max-width: 900px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip-lift { margin-block-start: -28px; } }

/* ---------- partner marks ---------- */
.partners { margin-block-start: 44px; display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; justify-content: center; }
.partners p { font-size: .875rem; font-weight: 500; color: var(--muted); }
.partners ul { display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap; justify-content: center; }
.partners img { height: 22px; width: auto; display: block; }
.partners img.wide { height: 20px; }
.partners img.sq { height: 34px; border-radius: 8px; }

/* ---------- sections, cards and lists ---------- */
.band { background: var(--card); }
.panel.band { background: transparent; }
.panel > .wrap {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
@media (max-width: 760px) { .panel > .wrap { width: auto; margin-inline: 16px; padding: 28px 16px; } }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block-start: 36px; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .fgrid { grid-template-columns: 1fr; } }
.fcard { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 22px; transition: border-color .15s ease-out; }
.fcard:hover { border-color: var(--primary-line); }
.fcard .ico, .way .ico {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-deep); margin-block-end: 14px;
}
.fcard .ico svg, .way .ico svg { width: 22px; height: 22px; }
.fcard h3 { font-size: 1.125rem; margin-block-end: 12px; }

.flist { display: flex; flex-direction: column; gap: 10px; }
.flist li { display: flex; gap: 10px; font-size: .9375rem; color: var(--muted); }
.flist svg {
  display: block; width: 17px; height: 17px; flex: none; margin-block-start: 5px;
  fill: none; stroke: var(--link); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.more-link { margin-block-start: 24px; text-align: center; }
.more-link a, .how-note a, .note a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.more-link a { display: inline-flex; align-items: center; gap: 6px; }
.more-link svg { width: 18px; height: 18px; }

.note {
  margin-block-start: 16px; max-width: 70ch; font-size: .9375rem;
  color: var(--text); background: var(--primary-soft);
  border: 1px solid var(--primary-line); border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-md); padding: 12px 16px;
}

/* ---------- home: payments and shipping, side by side ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); }
.split h2 { font-size: 1.5rem; }
.split p { margin-block-start: 12px; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; }
.pills li {
  display: flex; align-items: center; gap: 9px; min-height: 40px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--canvas); font-size: .9375rem; font-weight: 500;
}
.pills img { height: 17px; width: auto; display: block; }
.pills img.brands { height: 21px; }
.pills svg { display: block; width: 19px; height: 19px; color: var(--link); }
.how-note { margin-block-start: 14px; font-size: .9375rem; color: var(--muted); }

/* ---------- steps ---------- */
.rail { margin-block-start: 40px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { counter-increment: step; position: relative; padding-block-start: 54px; text-align: center; }
.step::before {
  content: ""; position: absolute; top: 17px; inset-inline-start: 50%;
  width: calc(100% + 22px); height: 2px; background: var(--primary-line);
}
.step:last-child::before { display: none; }
.node {
  position: absolute; top: 0; inset-inline-start: calc(50% - 18px);
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--card); border: 2px solid var(--primary); color: var(--primary-deep);
  font-weight: 600; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.node::before { content: counter(step); }
.step h3 { font-size: 1.0625rem; margin-block-end: 6px; }
.step p { font-size: .9375rem; color: var(--muted); }
@media (max-width: 940px) { .step::before { display: none; } .steps { grid-template-columns: repeat(2, 1fr); } }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 44px; align-items: start; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; background: var(--card); position: relative; }
.plan.is-featured { border: 2px solid var(--primary); }
.plan .tag { position: absolute; top: -14px; inset-inline: 0; margin-inline: auto; width: max-content; }
.plan h3 { font-size: 1.25rem; margin-block-end: 4px; }
.plan .cost { font-size: 1.25rem; font-weight: 600; margin-block-end: 20px; }
.plan .cost small { font-size: .9375rem; font-weight: 500; color: var(--muted); }
.plan ul { display: flex; flex-direction: column; gap: 10px; margin-block-end: 24px; }
.plan li { display: flex; gap: 10px; font-size: .9375rem; }
.plan li::before { content: "\2713"; color: var(--link); font-weight: 600; flex: none; }

/* ---------- questions ---------- */
details { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 20px; margin-block-start: 12px; }
details summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem;
  display: flex; align-items: center; gap: 12px; min-height: 32px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; margin-inline-start: auto; color: var(--link); font-weight: 500; font-size: 1.375rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { margin-block-start: 6px; padding-block-end: 6px; color: var(--muted); font-size: .9375rem; }
.panel details { background: var(--canvas); }

.faq { columns: 2; column-gap: 16px; }
.faq .eyebrow, .faq h2 { column-span: all; }
.faq h2 { margin-block-end: 22px; }
.faq details, .qa details, .faq-page details { margin-block: 0 14px; break-inside: avoid; }
.qa { columns: 2; column-gap: 16px; }
.qa-head { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; column-span: all; }
.qa-head svg { display: block; width: 26px; height: 26px; color: var(--link); flex: none; }
.faq-page { columns: 2; column-gap: 26px; }
.faq-group { break-inside: avoid; margin-block-end: 26px; }
.faq-group h2 { font-size: 1.125rem; margin-block-end: 12px; padding-block-end: 10px; border-block-end: 1px solid var(--border); }
@media (max-width: 760px) { .faq, .qa, .faq-page { columns: 1; } }

/* ---------- closing card ---------- */
.close-card {
  text-align: center; border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
.close-card h2 { margin-block: 16px 8px; }
.close-card p { margin-block-end: 24px; }

/* ---------- solution pages ---------- */
.sol-slab { padding-block: clamp(46px, 6vw, 84px) clamp(40px, 5vw, 64px); }
.sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .sol-grid { grid-template-columns: 1fr; } }
.sol-hero h1 { font-size: clamp(1.875rem, 4.4vw, 2.75rem); max-width: 18ch; }
.sol-hero .lede { margin-block-start: 16px; max-width: 46ch; font-size: clamp(1.0625rem, 2vw, 1.1875rem); }
.hero-solo .sol-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero-solo h1, .hero-solo .lede { margin-inline: auto; }
.hero-solo .hero-cta { justify-content: center; }

.hero-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hero-card { background: var(--on-band-fill); border: 1px solid var(--on-band-fill); border-radius: var(--radius-md); padding: 20px 18px; }
.hero-card .ico { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--on-band-fill); color: var(--on-band); display: grid; place-items: center; margin-block-end: 14px; }
.hero-card .ico svg { width: 20px; height: 20px; }
.hero-card b { display: block; font-size: 1rem; font-weight: 600; color: var(--on-band); margin-block-end: 6px; }
.hero-card p { font-size: .875rem; }

.feat {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 38px);
}
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } }
.feat h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.feat > div > p { margin-block-start: 14px; color: var(--muted); max-width: 46ch; }
.ticks { display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 12px; }
.ticks svg { display: block; width: 20px; height: 20px; flex: none; color: var(--link); margin-block-start: 3px; stroke-width: 2.4; }
.ticks b { display: block; font-size: .9375rem; font-weight: 600; margin-block-end: 3px; }
.ticks p { font-size: .875rem; color: var(--muted); }
.proof { margin-block-start: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.proof li {
  display: inline-flex; align-items: center; gap: 9px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 15px;
  font-size: .875rem; font-weight: 500;
}
.proof img { display: block; width: auto; height: 20px; }
.proof img.sq { height: 22px; width: 22px; object-fit: contain; border-radius: 6px; }
.proof svg { display: block; width: 19px; height: 19px; color: var(--link); }

/* Pickers drawn in markup (checkout, courier choice), aria-hidden. */
.sc { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sc-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--sunk); border-block-end: 1px solid var(--border); }
.sc-bar svg { display: block; width: 19px; height: 19px; color: var(--link); }
.sc-bar b { font-size: .875rem; font-weight: 600; }
.sc-body { padding: 22px 18px 24px; }
.sc .mini-label { font-size: .75rem; font-weight: 600; margin-block-end: 10px; }
.mini { display: flex; flex-direction: column; gap: 8px; }
.mini li {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: .875rem; font-weight: 500; color: var(--muted); background: var(--card);
}
.mini li.on { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.mini .name { flex: 1; }
.mini img.brands { display: block; height: 17px; width: auto; }
.mini img.logo { display: block; height: 15px; width: auto; }
.mini .ico { display: block; width: 17px; height: 17px; flex: none; }
.mini .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--input); flex: none; }
.mini li.on .dot { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--card); background: var(--primary); }
.mini .av {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
}
.mini .av img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.mini .av svg { display: block; width: 15px; height: 15px; }

/* The two card options on the payments page */
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-block-start: 32px; }
@media (max-width: 760px) { .opts { grid-template-columns: 1fr; } }
.opt { position: relative; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 24px; }
.opt.is-rec { border: 2px solid var(--primary); background: var(--card); }
.opt .badge { margin-block-end: 10px; }
.opt h3 { font-size: 1.25rem; }
.opt-sub { color: var(--muted); font-size: .9375rem; margin-block: 2px 14px; }
.opt-logo { height: 26px; width: auto; display: block; margin-block-end: 12px; }

/* The plan comparison table */
.table-scroll { position: relative; overflow-x: auto; margin-block-start: 28px; }  /* relative: the .vh caption must not escape the scroller */
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; text-align: start; }
.cmp th, .cmp td { padding: 14px 16px; border-block-start: 1px solid var(--border); font-size: .9375rem; }
.cmp thead th { border-block-start: 0; vertical-align: bottom; text-align: center; }
.cmp thead td { border-block-start: 0; }
.cmp thead span { display: block; font-weight: 600; font-size: 1.0625rem; }
.cmp thead small { display: block; margin-block-start: 2px; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.cmp thead .is-featured span { color: var(--link); }
.cmp thead .badge { margin-block-end: 6px; }
.cmp tbody th { font-weight: 500; text-align: start; }
.cmp tbody td { text-align: center; color: var(--muted); }
.cmp tbody tr:hover { background: var(--canvas); }
.cmp .yes { display: inline-block; width: 18px; height: 18px; fill: none;
  stroke: var(--link); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cmp .no { color: var(--muted); font-size: 1.125rem; }
.cmp-cta { margin-block-start: 26px; text-align: center; }

/* Contact */
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }
.way {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 24px;
  transition: border-color .15s ease-out;
}
a.way:hover { border-color: var(--primary); }
.way b { display: block; font-size: 1.0625rem; font-weight: 600; margin-block-end: 4px; }
.way-val { display: block; font-size: 1rem; font-weight: 600; color: var(--link); word-break: break-word; }
.way-sub { display: block; margin-block-start: 10px; font-size: .875rem; color: var(--muted); }
.way-go { display: inline-block; margin-block-start: 14px; font-size: .875rem; font-weight: 500; color: var(--link); }
a.way:hover .way-go { text-decoration: underline; }
.ways .way.is-company { grid-column: 1 / -1; }

/* Policy pages */
.legal { max-width: 760px; margin-inline: auto; padding-block: 40px 72px; }
.legal h1 { font-size: clamp(1.75rem, 4vw, 2.375rem); }
.legal .meta { color: var(--muted); font-size: .875rem; margin-block-start: 6px; }
.legal h2 { font-size: 1.25rem; margin-block-start: 30px; }
.legal p, .legal li { margin-block-start: 10px; }
.legal ul:not(.legal-nav) { list-style: disc; padding-inline-start: 22px; }
.legal a { color: var(--link); }
.legal .company { margin-block-start: 36px; padding-block-start: 16px; border-block-start: 1px solid var(--border); color: var(--muted); font-size: .875rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 28px; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
  color: var(--muted); font-size: .875rem; font-weight: 500; text-decoration: none;
}
.legal-nav a:hover { border-color: var(--link); color: var(--link); }
.legal-nav a[aria-current="page"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); }

/* ---------- footer ---------- */
footer { background: var(--card); border-block-start: 1px solid var(--border); padding-block: 48px 24px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding-block-end: 28px; border-block-end: 1px solid var(--border); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } .foot-grid > div:first-child { grid-column: 1 / -1; } }
.foot-grid p { font-size: .875rem; color: var(--muted); max-width: 36ch; margin-block-start: 8px; }
.foot-co a { color: var(--link); text-decoration: none; }
.foot-co a:hover { text-decoration: underline; }
.foot-col b { display: block; font-size: .875rem; font-weight: 600; margin-block-end: 12px; }
.foot-col a { display: block; font-size: .9375rem; color: var(--muted); text-decoration: none; margin-block-end: 9px; }
.foot-col a:hover { color: var(--link); }
.foot-rights { padding-block-start: 18px; font-size: .8125rem; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* The plan table on a phone: each row becomes the feature name on its own
   line with the three plans side by side under it, so all three columns stay
   on screen. The table carries explicit ARIA roles, so it is still a table to
   a screen reader after the display change. */
@media (max-width: 560px) {
  .cmp, .cmp thead, .cmp tbody { display: block; min-width: 0; }
  .cmp tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .cmp thead td { display: none; }
  .cmp th, .cmp td { padding-inline: 6px; }
  .cmp tbody th { grid-column: 1 / -1; padding-block-end: 2px; }
  .cmp tbody td { border-block-start: 0; padding-block-start: 2px; }
  .cmp tbody tr:hover { background: transparent; }
}

/* ==========================================================================
   Phones (640px and below). One block, so the phone layout is read in one
   place: full-bleed sections instead of cards inside cards, a tighter spacing
   scale, compact grids instead of tall stacks, and body content aligned to
   the start. Only the heroes and the closing band stay centred.
   ========================================================================== */

/* The phone menu carries what the bar has no room for. Desktop never shows
   these two: the bar has its own login button and language link. */
nav .nav-login, nav .nav-lang { display: none; }
@media (max-width: 1240px) { nav[data-open] .nav-login { display: block; } }

@media (max-width: 640px) {
  /* Header: logo, the primary CTA and the menu. The language link moves into
     the menu (nav-lang), so it stays one tap away. */
  #lang { display: none; }
  nav[data-open] .nav-lang { display: block; }
  .bar { height: 60px; }
  .bar .btn-primary { margin-inline-start: auto; }
  .bar .btn-sm { min-height: 44px; }
  .wordmark { min-height: 44px; }
  nav[data-open] { inset-inline: 0; border-radius: 0; border-inline: 0; padding-inline: 16px; }

  /* Spacing scale */
  section { padding-block: 28px; }
  h2 { font-size: 1.375rem; }
  .eyebrow { margin-block-end: 4px; }
  .sec-lede { margin-block-start: 8px; font-size: .9375rem; }
  .note { margin-block-start: 12px; padding: 10px 12px; font-size: .875rem; }
  .sol-slab { padding-block: 32px; }
  .sol-hero .lede, .hero-slab .lede { font-size: 1rem; }
  .hero-cta { margin-block-start: 20px; }

  /* Full-bleed sections: the outer card goes, the inner cards keep theirs. */
  .panel > .wrap,
  .split > div,
  .feat {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    margin-inline: 0; width: 100%; padding: 0;
  }
  .panel > .wrap { padding-inline: 16px; }
  .split { gap: 28px; }
  .feat { gap: 18px; }
  .fcard, .panel details, .pills li, .proof li { background: var(--card); }

  /* Value strip: a compact 2x2 grid */
  .strip-lift { margin-block-start: 24px; padding: 0; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > li { flex-direction: column; gap: 6px; padding: 14px 12px; border-block-start: 0; }
  .strip > li:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .strip > li:nth-child(n+3) { border-block-start: 1px solid var(--border); }
  .strip .ico { height: 24px; }
  .strip b { font-size: .875rem; }
  .strip .sub { font-size: .8125rem; }

  /* Partner marks: one uniform grid, every mark in a same-sized tile */
  .partners { margin-block-start: 24px; flex-direction: column; align-items: stretch; gap: 10px; }
  .partners ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .partners li { display: grid; place-items: center; height: 48px; padding-inline: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .partners li:has(.wide) { grid-column: span 2; }
  .partners img, .partners img.wide, .partners img.sq { width: auto; height: auto; max-width: 100%; max-height: 22px; border-radius: 4px; }
  .partners img.sq { max-height: 28px; }

  /* Feature cards: icon beside the title, tighter, and one swipeable row
     with the next card peeking, instead of a tall stack */
  .fgrid {
    display: flex; gap: 10px; margin-block-start: 18px; margin-inline: -16px;
    padding: 0 16px 8px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin;
  }
  .fgrid > * { flex: 0 0 82%; scroll-snap-align: start; }
  .fcard { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 14px; }
  .fcard .ico { width: 36px; height: 36px; margin: 0; }
  .fcard .ico svg { width: 19px; height: 19px; }
  .fcard h3 { margin: 0; font-size: 1rem; }
  .fcard .flist { grid-column: 1 / -1; margin-block-start: 10px; gap: 6px; }
  .flist li { font-size: .875rem; }
  .flist svg { margin-block-start: 4px; }

  /* Pills and proof marks: a two-column grid of equal tiles */
  .pills, .proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-block-start: 16px; }
  .pills li, .proof li { justify-content: center; min-height: 44px; padding: 8px 10px; font-size: .875rem; }
  .pills li:has(img.brands), .proof li:has(img[src*="payment-brands"]) { grid-column: span 2; }
  .pills:not(:has(img.brands)) li:last-child:nth-child(odd),
  .proof:not(:has(img[src*="payment-brands"])) li:last-child:nth-child(odd) { grid-column: span 2; }
  .how-note { font-size: .875rem; }

  /* Steps: a start-aligned vertical timeline */
  .rail { margin-block-start: 18px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { text-align: start; padding-block: 2px 18px; padding-inline-start: 52px; min-height: 54px; }
  .step::before { display: block; top: 40px; bottom: 4px; inset-inline-start: 17px; width: 2px; height: auto; }
  .step:last-child::before { display: none; }
  .node { inset-inline-start: 0; }
  .step h3 { font-size: 1rem; margin-block-end: 2px; }
  .step p { font-size: .875rem; }

  /* Plans */
  .plans { margin-block-start: 20px; gap: 18px; }
  .plan { padding: 22px 18px 18px; }
  .plan ul { gap: 8px; margin-block-end: 18px; }

  /* Questions */
  .faq h2 { margin-block-end: 14px; }
  .qa-head { margin-block-end: 12px; }
  .qa-head svg { width: 22px; height: 22px; }
  details { padding: 10px 14px; }
  details summary { font-size: 1rem; min-height: 44px; }
  .faq details, .qa details, .faq-page details { margin-block-end: 8px; }
  .faq-group { margin-block-end: 20px; }

  /* Solution pages */
  .hero-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-card { padding: 14px 12px; }
  .hero-card .ico { width: 34px; height: 34px; margin-block-end: 10px; }
  .hero-card b { font-size: .9375rem; }
  .hero-card p { font-size: .8125rem; }
  .ticks { gap: 12px; }
  .opts { margin-block-start: 20px; gap: 12px; }
  .opt { padding: 18px 16px; }
  .ways { gap: 10px; }
  .way { padding: 18px 16px; }
  .table-scroll { margin-block-start: 16px; }

  /* Closing band */
  .close-card { padding: 28px 18px; }
  .close-card p { margin-block-end: 18px; }

  /* Alignment: start-aligned body, not centred lines */
  .more-link, .cmp-cta { text-align: start; }
  .more-link a { padding-block: 10px; }

  /* Policy pages: the six-policy row scrolls sideways instead of wrapping */
  .legal { padding-block: 20px 40px; }
  .legal h2 { margin-block-start: 24px; }
  .legal-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; margin-block-end: 20px; }
  .legal-nav::-webkit-scrollbar { display: none; }
  .legal-nav li { flex: none; }
  .legal-nav a { min-height: 44px; white-space: nowrap; }

  /* Footer: company block on top, link groups two by two, 44px tap targets */
  footer { padding-block: 28px 18px; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; padding-block-end: 18px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-col b { margin-block-end: 2px; }
  .foot-col a { margin: 0; padding-block: 10px; }
  .foot-rights { text-align: start; }
}