/*
 * sattle.me, round 2: the shared system of the three variants (Lumière, Encre, Commerces).
 * Calm, precise, app-first. One accent (orange) for the primary action, green only for « Encaissé ».
 * Light by default; `.theme-ink` turns a page or a band to the brand's ink.
 */

:root,
.theme-light {
  --bg: #ffffff;
  --surface: #f5f6f8;
  --surface-2: #eceef2;
  --line: #e3e6eb;
  --line-strong: #cfd4dc;
  --text: #0b1a33;
  --text-2: #46526a;
  --text-3: #5f6880;
  --accent: #f7931a;
  --accent-press: #e08414;
  --on-accent: #0b1a33;
  --paid: #2e9c64;
  --paid-bg: #dcede2;
  --paid-fg: #1f6b45;
  --chip: #ffffff;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 18px 40px -18px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.06);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wrap: 1200px;
  --gutter: 80px;
  color-scheme: light;
}

.theme-ink {
  --bg: #0b1a33;
  --surface: #11223f;
  --surface-2: #172a4b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f5f7fb;
  --text-2: #bdc9de;
  --text-3: #9dadc8;
  --chip: #11223f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 24px 48px -24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}
/* A band in the other theme paints its own ground. */
.theme-ink, .theme-light { background: var(--bg); color: var(--text); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.display {
  font-weight: 800;
  font-size: clamp(54px, 5.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.h2 {
  font-weight: 800;
  font-size: clamp(36px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.h3 { font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; }
.lead { font-size: 20px; line-height: 1.6; color: var(--text-2); max-width: 34em; }
.body-2 { font-size: 16px; line-height: 1.6; color: var(--text-2); }
/* Plus Jakarta Sans 800 sets its period far from the letter: pull it back in headings. */
.pt { margin-left: -0.07em; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-ligatures: none; }

/* ---------- Announcement bar and navigation ---------- */
.announce { padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.announce .wrap { min-height: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); }
.announce a { color: var(--text); font-weight: 700; text-decoration: none; }
.announce a:hover { text-decoration: underline; }
.announce b { color: var(--text); font-weight: 700; }

.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms linear; }
.nav.is-stuck { border-bottom-color: var(--line); }
.nav .wrap { height: 72px; display: flex; align-items: center; gap: 40px; }
.nav__logo img { height: 25px; width: auto; }
.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links a { color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 600; transition: color 140ms linear; }
.nav__links a:hover { color: var(--text); }

/* ---------- Actions ----------
   The orange button is the app's own (owner, 05.11.2026: « texte en blanc »; new-app
   src/theme/tokens.ts colors.button.primary): white label over an umber 1 px text shadow, a thin
   umber ring with a light inner highlight, darker orange on hover and press. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(143, 83, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(143, 83, 0, 0.55);
  font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms linear, transform 140ms var(--ease-out);
}
.btn:hover, .btn:active { background: var(--accent-press); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; font-size: 16px; text-decoration: none; }
.link-arrow svg { width: 16px; height: 16px; transition: transform 160ms var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store { display: block; border-radius: 10px; transition: transform 160ms var(--ease-out), box-shadow 160ms linear; }
.store img { height: 50px; width: auto; }
.store:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.theme-ink .store { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); border-radius: 10px; }

.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--text-2); font-weight: 600; }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts svg { width: 18px; height: 18px; color: var(--paid); flex: none; }

/* ---------- The phone on its stage, and the notification it raises ---------- */
.stage { position: relative; display: grid; place-items: center; }
.notif {
  position: absolute;
  z-index: 3;
  width: 320px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: var(--shadow-2);
  color: #0b1a33;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out);
}
.notif.is-in { opacity: 1; transform: none; }
.notif img { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; }
.notif b { font-weight: 700; }
.notif time { font-size: 12.5px; color: #5f6880; align-self: start; }
.notif p { grid-column: 2 / 4; color: #2f3a50; }

/* ---------- Proof strip ---------- */
.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 34px; }
.press a { display: block; background: var(--text-3); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color 140ms linear; }
.press a:hover { background: var(--text); }

/* ---------- Tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; vertical-align: middle; white-space: nowrap; }
.tag--new { background: color-mix(in srgb, var(--accent) 18%, var(--bg)); color: color-mix(in srgb, #8f5300 80%, var(--text)); }
.theme-ink .tag--new { background: rgba(247, 147, 26, 0.16); color: #ffc27a; }
.tag--soon { background: var(--surface-2); color: var(--text-2); }
.tag--ok { background: var(--paid-bg); color: var(--paid-fg); }

/* ---------- App screens drawn small (the app's own palette) ---------- */
.ui {
  --ui-bg: #faf6ee;
  --ui-card: #ffffff;
  --ui-ink: #0b1a33;
  --ui-stone: #6e675e;
  --ui-sand: #f2ece0;
  --ui-orange: #f7931a;
  --ui-umber: #8f5300;
  position: relative;
  border-radius: 22px;
  background: var(--ui-bg);
  color: var(--ui-ink);
  box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.08), var(--shadow-1);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
}
.ui__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; font-weight: 700; font-size: 14px; }
.ui__bar small { font-weight: 600; font-size: 12.5px; color: var(--ui-stone); }
.ui__list { display: grid; gap: 6px; padding: 0 12px 14px; }
.ui__row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--ui-card); box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.05); }
.ui__row b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui__row small { display: block; color: var(--ui-stone); font-size: 12px; }
.ui__av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; }
.ui__pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: #dcede2; color: #1f6b45; font-size: 11.5px; font-weight: 700; }
.ui__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2e9c64; }
.ui__pill--open { background: #fcebd5; color: #8f5300; }
.ui__pill--open::before { background: #f7931a; }
.ui__btn { display: grid; place-items: center; height: 40px; margin: 0 12px 14px; border-radius: 999px; background: var(--ui-orange); color: var(--ui-ink); font-weight: 700; font-size: 13.5px; }
.ui__btn--ghost { background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.14); }
.ui__sats { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--ui-stone); }
.ui__sats b { color: var(--ui-ink); font-weight: 700; }
.ui-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px 12px; }
.ui-tiles span { display: grid; align-content: end; gap: 2px; height: 74px; padding: 9px; border-radius: 12px; background: var(--ui-card); box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.05); font-size: 12.5px; font-weight: 700; }
/* An article without a photo, as the app draws it: its initials on sand. */
.ui-tiles i { display: grid; place-items: center; height: 32px; margin-bottom: auto; border-radius: 8px; background: var(--ui-sand); color: var(--ui-stone); font-style: normal; font-weight: 700; font-size: 13px; }
.ui-tiles small { font-weight: 600; color: var(--ui-stone); font-variant-numeric: tabular-nums; }
.ui-tiles .is-on { box-shadow: 0 0 0 2px var(--ui-orange); }

/* The same sale on three screens: phone, tablet, browser. */
/* Three devices drawn at a reference width of 668px (font 11.5px) and scaled as one: every size
   inside is in em, the em follows the row's width (cqi), so the contents never outgrow a frame. */
.sync { container-type: inline-size; display: grid; grid-template-columns: 132fr 226fr 270fr; align-items: end; gap: 3%; width: 100%; max-width: 668px; }
.sync figure { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; font-size: min(11.5px, 1.7216cqi); }
.sync figcaption { font-size: max(11px, 1.13em); font-weight: 600; color: var(--text-2); text-align: center; white-space: nowrap; }
.sync__dev { position: relative; width: 100%; border-radius: 1.565em; background: #1b1d22; padding: 0.609em; box-shadow: var(--shadow-2); }
.sync__dev--phone { aspect-ratio: 132 / 236; border-radius: 2.087em; }
.sync__dev--tablet { aspect-ratio: 226 / 176; }
.sync__dev--web { aspect-ratio: 270 / 196; padding: 0; background: #fff; border-radius: 1.043em; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.12), var(--shadow-2); overflow: hidden; }
.sync__bar { display: flex; align-items: center; gap: 0.435em; height: 2.087em; padding: 0 0.87em; background: #eceef2; }
.sync__bar i { width: 0.609em; height: 0.609em; border-radius: 50%; background: #cfd4dc; }
.sync__screen { height: 100%; border-radius: 1.565em; background: #faf6ee; color: #0b1a33; padding: 1.043em 0.783em; display: grid; align-content: start; gap: 0.522em; overflow: hidden; }
.sync__dev--phone .sync__screen { border-radius: 1.565em; padding-top: 1.565em; }
.sync__dev--tablet .sync__screen { border-radius: 1.043em; }
.sync__dev--web .sync__screen { height: calc(100% - 2.087em); border-radius: 0; }
.sync__screen p { font-weight: 800; font-size: 1.043em; margin-bottom: 0.174em; }
.sync__row { display: flex; align-items: center; justify-content: space-between; gap: 0.522em; padding: 0.609em 0.696em; border-radius: 0.783em; background: #fff; font-weight: 600; white-space: nowrap; }
.sync__row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.sync__row--new { background: #dcede2; color: #1f6b45; }
.sync__row span { overflow: hidden; text-overflow: ellipsis; }

/* A BoltCard and its contactless mark. */
.card-nfc { position: relative; width: 236px; aspect-ratio: 85.6 / 54; border-radius: 16px; padding: 18px 20px; background: #0b1a33; color: #fff; box-shadow: 0 24px 40px -20px rgba(11, 26, 51, 0.7); display: flex; flex-direction: column; justify-content: space-between; }
.card-nfc img { height: 22px; width: auto; align-self: flex-start; }
.card-nfc svg { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; color: rgba(255, 255, 255, 0.8); }
.card-nfc span { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.04em; }
.theme-ink .card-nfc { background: #f5f7fb; color: #0b1a33; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7); }
.theme-ink .card-nfc svg { color: #46526a; }
.theme-ink .card-nfc span { color: #46526a; }

/* A checkout box of an e-shop. */
.checkout { border-radius: 18px; background: #fff; color: #0b1a33; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.08), var(--shadow-1); padding: 16px; font-size: 13.5px; }
.checkout__line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; color: #46526a; }
.checkout__line b { color: #0b1a33; }
.checkout__total { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; margin-top: 6px; border-top: 1px solid #e3e6eb; font-weight: 800; }
.checkout__pay { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin-top: 12px; border-radius: 10px; background: #0b1a33; color: #fff; font-weight: 700; }
.checkout__pay svg { width: 16px; height: 16px; }

/* ---------- Feature tiles ---------- */
.tile { position: relative; display: flex; flex-direction: column; gap: 24px; }
.tile__text { display: grid; gap: 10px; max-width: 32em; padding-inline: 4px; }
.tile__text p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.tile__visual { order: -1; flex: 1; display: grid; align-content: center; justify-items: center; min-height: 320px; }
.tile__visual > .ui { width: min(100%, 480px); }
.tile__visual > .devices { width: min(100%, 480px); }

/* ---------- Bitcoiners' specs ---------- */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.specs div { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.specs dt { font: 600 13px/1.6 "JetBrains Mono", ui-monospace, monospace; color: var(--text); }
.specs dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.specs dd b { color: var(--text); font-weight: 700; }

/* ---------- Download QR ---------- */
.qr-box { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.qr-box svg { width: 96px; height: 96px; border-radius: 8px; }
.qr-box p { font-size: 14px; line-height: 1.5; color: var(--text-2); max-width: 15em; }
.qr-box b { display: block; color: var(--text); font-size: 15px; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px 0 48px; font-size: 14.5px; color: var(--text-2); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.foot img { height: 23px; width: auto; }
.foot p { margin-top: 14px; max-width: 26em; line-height: 1.6; }
/* The former name on its own line, with Swiss Bitcoin Pay's original logo (owner, 03.11.2026). */
.foot .foot__former { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; line-height: 1; color: var(--text-3); }
.foot .foot__former img { height: 11px; }
.foot h3 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.foot ul { display: grid; gap: 9px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot__base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; font-size: 13.5px; }
.foot__langs { display: flex; gap: 14px; }
.foot__langs [aria-current] { color: var(--text); font-weight: 700; }

/* ---------- The turning word (site.js) ----------
   « dans votre café. » turns without end through other kinds of business (owner, 04.11.2026: never
   stops, whatever the visitor does). Four ways to turn, side by side on mot-tournant.html (owner,
   05.11.2026: « propose autre chose »); a page picks one with data-rotate-style. The words, each with
   its period, share one grid cell: the line keeps the widest word's width (the word ends its line, so
   nothing around it moves). Without script the first word simply stands; with reduced motion every
   way becomes the fade. */
.rot { display: inline-grid; vertical-align: top; }
.rot__w { grid-area: 1 / 1; justify-self: start; white-space: nowrap; opacity: 0; }
.rot__w.is-on { opacity: 1; }

/* A · Fondu: the word fades out where it stands, then the next fades in. */
.rot--fade .rot__w { transition: opacity 340ms cubic-bezier(0.4, 0, 0.2, 1); }
.rot--fade .rot__w.is-on { transition-duration: 560ms; transition-delay: 220ms; }

/* B · Défilement: the line is a window with a soft lower edge; the word slides up and fades as it
   goes (so it never shows under the line above), while the next slides up into place from behind
   the line, whole. Room is kept for accents and descenders. */
.rot--slide { overflow: hidden; padding: 0.14em 0.1em 0.24em; margin: -0.14em -0.1em -0.24em; -webkit-mask-image: linear-gradient(to top, transparent, #000 0.16em); mask-image: linear-gradient(to top, transparent, #000 0.16em); }
.rot--slide .rot__w { opacity: 1; transform: translateY(115%); }
.rot--slide .rot__w.is-on { transform: none; transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 200ms; }
.rot--slide .rot__w.is-out { opacity: 0; transform: translateY(-80%); transition: transform 520ms cubic-bezier(0.55, 0, 0.75, 0.2), opacity 260ms linear; }
.rot--slide .rot__w.is-reset { transition: none; }

/* C · Machine à écrire: the word is erased from its end, then the next is typed, behind an orange
   caret that fades once the word stands. */
.rot--type .rot__k.is-gone { display: none; }
.rot__caret { display: inline-block; width: 0.07em; height: 0.74em; margin-left: 0.05em; border-radius: 0.02em; background: var(--accent); vertical-align: -0.04em; transition: opacity 400ms linear; }
.rot__caret.is-idle { opacity: 0; }

/* D · Surligneur: an orange bar as long as the longer of the two words sweeps over from the left, the
   word changes under it, the bar takes the new word's width and leaves to the right. */
.rot--mark { position: relative; }
.rot__bar { position: absolute; z-index: 1; left: -0.05em; top: -0.02em; bottom: -0.2em; width: calc(var(--bar-w, 3em) + 0.1em); border-radius: 0.06em; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1), width 280ms cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; }
.rot--mark.is-covered .rot__bar { transform: scaleX(1); }
.rot--mark.is-leaving .rot__bar { transform-origin: right; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .notif { transition: opacity 200ms linear; transform: none; }
}

/* ---------- Narrower screens ----------
   The pages are drawn for 1280 px and wider, which the rules below never change. Narrower, the same
   page reflows: a smaller gutter (1279 px and less), the navigation in a menu (1023 px and less),
   then one column and a phone's type sizes (767 px and less). */
.nav__toggle { display: none; }

@media (max-width: 1279px) {
  :root { --gutter: 48px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; }
  .nav .wrap { gap: 12px; }
  .nav .btn { margin-left: auto; }
  /* The menu: a link to the footer's plan without script; with it (site.js), a button that opens the
     same links under the bar. */
  .nav__toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; border-radius: 12px; color: var(--text); -webkit-tap-highlight-color: transparent; transition: background-color 140ms linear; }
  .nav__toggle:active { background: var(--surface-2); }
  .nav__toggle svg { width: 24px; height: 24px; }
  .nav__toggle path { transform-origin: 12px 12px; transition: transform 220ms var(--ease-out); }
  .nav.is-open .nav__toggle path:first-child { transform: rotate(45deg) translateY(3.5px); }
  .nav.is-open .nav__toggle path:last-child { transform: rotate(-45deg) translateY(-3.5px); }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 4px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 28px 32px -28px rgba(16, 24, 40, 0.3); }
  .nav.is-open { border-bottom-color: var(--line); background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { display: flex; align-items: center; min-height: 54px; font-size: 18px; color: var(--text); -webkit-tap-highlight-color: transparent; }
  .nav__links a:active { color: var(--text-2); }
  .nav__links a + a { border-top: 1px solid var(--line); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .foot__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .nav .wrap { height: 64px; gap: 10px; }
  .nav__logo img { height: 22px; }
  .nav .btn { height: 40px; padding: 0 16px; font-size: 14px; }
  .display { font-size: clamp(34px, 10vw, 54px); }
  .h2 { font-size: clamp(28px, 7.6vw, 40px); }
  .h3 { font-size: 20px; }
  .lead { font-size: 18px; }
  .stores { gap: 10px; }
  .store img { height: 44px; }
  /* A link stands as tall as a finger needs. */
  .link-arrow { min-height: 44px; }
  .facts { gap: 8px 18px; font-size: 14.5px; }
  .qr-box { padding: 12px 14px 12px 12px; }
  .specs div { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .specs dd { font-size: 15px; }
  .foot { padding: 48px 0 36px; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .foot ul { gap: 2px; }
  .foot li { min-height: 36px; display: flex; align-items: center; }
  .foot__base { flex-direction: column; gap: 8px; margin-top: 36px; }
}

/* Small phones: the bar's logo and button shrink; under 360 px the button leaves the bar (the menu
   stays, and the store badges open the page just below). */
@media (max-width: 374px) {
  .nav__logo img { height: 20px; }
  .nav .btn { padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 359px) {
  .nav .btn { display: none; }
  .nav__toggle { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle path { transition: none; }
}