/* UnivMenu — brand homepage
 * Design system: warm-editorial (terracotta on warm cream, serif-led, editorial restraint).
 * One accent per screen. No gradients. No pure black/white. Whitespace does the work.
 */

/* ---------- tokens ---------- */
:root {
  --bg: #faf7f2;            /* warm off-white paper */
  --surface: #ffffff;       /* elevated cards only */
  --surface-warm: #f2e9db;  /* warm panels */
  --fg: #1c1a17;            /* near-black, warm */
  --fg-2: #4c4037;
  --muted: #8a817a;
  --accent: #c0512f;        /* terracotta — links, primary CTA, 1 hero element */
  --accent-ink: #a5401f;    /* readable terracotta for text on cream */
  --forest: #2f5b4f;        /* secondary — tags, dividers */
  --border: rgba(47,91,79,.16);
  --border-soft: rgba(28,26,23,.08);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;

  --t-xs: 13px; --t-sm: 15px; --t-base: 17px; --t-lg: 21px;
  --t-xl: 28px; --t-2xl: 40px; --t-3xl: 56px; --t-4xl: 80px;
  --lh-body: 1.62; --lh-tight: 1.08;

  --max: 1160px; --gutter: 32px;
  --sect-y: 104px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --elev: 0 2px 16px rgba(28,26,23,.06);
  --elev-raised: 0 16px 44px rgba(28,26,23,.12);
  --focus: 0 0 0 4px rgba(192,81,47,.22);
  --ease: cubic-bezier(.2,0,0,1);

  /* SITE-10K-1 Phase 0 — named tokens for every literal color that was hardcoded
     outside :root (finding 9), plus the homepage's private --sn-* tokens promoted
     here without the prefix (their rules stay inline in build_homepage.py). */
  --on-accent: #fff8f2;      /* text/icons on --accent, --forest or --deep fills */
  --fg-inverse: #f4ece0;     /* text on a --fg fill (.reward, footer .flags .on) */
  --fg-inverse-2: #d9a88c;   /* muted accent text on a --fg fill (.reward .eyebrow) */
  --fg-inverse-3: #c7bcae;   /* muted body text on a dark panel (.reward .fine, .flow .node p) */
  --accent-deep: #8a3417;    /* .reward-line — deep terracotta on cream */
  --accent-deep-2: #6f2f16;  /* .price-line .amt — deepest terracotta */
  --surface-mint: #eef5f1;   /* text on a --forest fill (.market.live) */
  --deep: #3a1d12;           /* full-bleed chocolate surface (was homepage --sn-deep) */
  --deep-fg: var(--on-accent);       /* was homepage --sn-deep-fg (identical value) */
  --deep-2: #e8a37f;         /* accent text on a dark panel (was --sn-deep-2, also .flow .node .s) */
  --bubble: var(--forest);   /* was homepage --sn-bubble (identical value, #2f5b4f) */
  --bubble-fg: #f7fbf9;      /* was homepage --sn-bubble-fg */
  --warm: var(--surface-warm);  /* alias — tools/geo_resolver.py's shared .geo-bar CSS reads --warm */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
}

/* ---------- self-hosted type (SITE-10K-1 Phase 0) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/css/fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/css/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/css/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap from system font to Inter does not shift
   layout — size-adjust computed from the real font metrics (Inter's OS/2 typo
   ascender vs Liberation Sans, the metric-compatible Arial substitute measured on
   this box: 0.96875 / 0.72803 = 133.07%). No calibrated Georgia fallback: this box
   has no real Georgia or a verified metric-compatible substitute to measure against,
   and a guessed size-adjust would be worse than none — --font-display keeps its
   plain Georgia/Times New Roman fallback chain uncalibrated. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 133.07%;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--forest);
}
.lede { font-size: var(--t-lg); color: var(--fg-2); max-width: 44ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600;
  padding: 15px 26px; border-radius: 12px; border: 1px solid transparent;
  transition: transform var(--ease) 150ms, background 150ms, box-shadow 150ms; text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); border-color: rgba(28,26,23,.28); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-lg { padding: 17px 30px; font-size: var(--t-base); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(250,247,242,.82);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border-soft);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
a.brand { text-decoration: none; color: inherit; }
a.brand:hover .mark { color: var(--accent-ink); }
.brand .brandmark { align-self: center; flex: none; }
.brand .mark { font-family: var(--font-display); font-size: 23px; color: var(--fg); letter-spacing: -.01em; }
.brand .mark b { color: var(--accent-ink); font-weight: 400; }
.brand .tag { font-size: var(--t-xs); color: var(--muted); letter-spacing: .02em; }
/* NAV-1 (2026-08-08). The bar used to be defended by a rule in a test — "no more than
   six links" — which is a proxy for a width constraint that CSS should own, and which
   says nothing about the width of the six. `Câu chuyện của chúng tôi` (24 characters)
   passed that count and still ate the bar. These three lines are the constraint itself:
   the SPACING gives way first (28px down to 8px), the label never wraps and never gets
   narrower than its own text, so a long translation costs air, not a broken word. */
.nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); }
/* 3-line menu (owner-asked 2026-07-27). Below 680px the nav hides every content link —
   LOGIN-1 fixed a real 390px overflow by removing them, which left a phone with no way
   to reach How it works / Pricing / Blog at all. The burger is that way back; above
   680px the links are visible on their own and it stays hidden. */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 42px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--fg);
}
.nav-burger:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.nav-burger .bars, .nav-burger .bars::before, .nav-burger .bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-burger .bars { position: relative; }
.nav-burger .bars::before, .nav-burger .bars::after { content: ""; position: absolute; left: 0; }
.nav-burger .bars::before { top: -6px; }
.nav-burger .bars::after { top: 6px; }
.navlinks { display: contents; }

.nav a.link {
  font-size: var(--t-sm); color: var(--fg-2); font-weight: 500;
  white-space: nowrap;        /* a wrapped label makes the whole bar taller */
  flex-basis: max-content;    /* the width follows the translated string */
  flex-shrink: 0;             /* ...and nothing may squeeze it back below that */
}
.nav a.link:hover { color: var(--fg); }
/* The way back in for an owner who already has an account. Reads as a pill, not
   as another content link, and it is the one nav item that stays on a phone. */
.nav a.login {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); font-weight: 600; color: var(--fg); white-space: nowrap;
}
.nav a.login:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* language / country pill */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  font: 600 var(--t-xs)/1 var(--font-body); color: var(--fg);
}
.lang-btn:hover { border-color: var(--forest); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--elev-raised); display: none;
}
.lang.open .lang-menu { display: block; }
.lang-menu a { display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--fg); font-size: var(--t-sm); }
.lang-menu a:hover { background: var(--surface-warm); }
.lang-menu a .native { color: var(--muted); margin-left: auto; }
.lang-menu .sep { height: 1px; background: var(--border-soft); margin: 7px 6px; }
.lang-menu .soon { display: flex; gap: 10px; padding: 8px 12px; font-size: var(--t-sm); color: var(--muted); }
.lang-menu .soon .native { margin-left: auto; font-size: var(--t-xs); color: var(--muted); opacity: .8; }
.lang-menu a .live { margin-left: auto; font-size: var(--t-xs); font-weight: 700; color: var(--forest); }
/* NAV-EXPLORE-1: the market the reader resolved to, marked in the country box on EVERY
   page. Set by nav_copy.COUNTRY_BOX_JS from the cookie or the timezone, and re-set
   through the same function by the geo resolver's ladder on the three page families
   that run it. Nothing marks when neither rung answers — an unmarked box is honest. */
.lang-menu a.geo-here { font-weight: 700; }
.lang-menu a.geo-here::after { content: "✓"; margin-left: 6px; color: var(--forest); font-weight: 700; }


/* ---------- hero ---------- */
.hero { padding: 76px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: var(--t-4xl); letter-spacing: -.02em; margin: 20px 0 22px; max-width: 16ch; }
/* two-sentence headlines (VN owner line) need a smaller size or they eat the fold */
.hero h1.h1-long { font-size: var(--t-3xl); max-width: 20ch; }
.hero h1 em { font-style: italic; color: var(--accent-ink); }
.hero .lede { font-size: var(--t-lg); }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: var(--t-sm); color: var(--muted); }

/* hero visual — a stylized phone showing a multilingual menu (self-contained, no photo dependency) */
.phone {
  justify-self: center; width: 300px; background: var(--surface); border-radius: 34px;
  border: 1px solid var(--border); box-shadow: var(--elev-raised); padding: 14px; transform: rotate(1.2deg);
}
.phone .screen { background: var(--bg); border-radius: 24px; overflow: hidden; }
.phone .ph-top { padding: 16px 16px 10px; }
.phone .ph-rest { font-family: var(--font-display); font-size: 19px; }
.phone .ph-pills { display: flex; gap: 6px; margin-top: 10px; }
.pill { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface-warm); color: var(--fg-2); }
.pill.on { background: var(--accent); color: var(--on-accent); }
.phone .ph-item { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.phone .ph-item .nm { font-weight: 600; font-size: 14px; }
.phone .ph-item .tr { font-size: 12px; color: var(--muted); }
.phone .ph-item .pr { font-family: var(--font-display); color: var(--accent-ink); font-size: 14px; white-space: nowrap; }
.phone .ph-order { margin: 10px; padding: 12px; text-align: center; background: var(--accent); color: var(--on-accent); border-radius: 14px; font-weight: 600; font-size: 13px; }

/* intro strip */
.intro { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--surface-warm); }
.intro .wrap { padding: 30px var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.intro b { font-family: var(--font-display); font-weight: 400; }
.intro p { color: var(--fg-2); max-width: none; font-size: var(--t-lg); }
.intro-accent { color: var(--accent); font-family: var(--font-display); font-style: italic; font-size: var(--t-xl); }

/* ---------- sections ---------- */
section.band { padding: var(--sect-y) 0; }
.sect-head { max-width: none; margin-bottom: 44px; }
.sect-head h2 br { display: block; }
.sect-head h2 { font-size: var(--t-3xl); letter-spacing: -.02em; margin: 14px 0 16px; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
/* steps stretch to the tallest card so the closing rules line up across all three */
.step { display: flex; flex-direction: column; height: 100%; }
.step .num { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--accent-ink); }
.step h3 { font-size: var(--t-lg); margin: 10px 0 8px; }
.step p { color: var(--fg-2); font-size: var(--t-sm); margin-bottom: 20px; }
.step .rule { height: 1px; background: var(--border); margin-top: auto; }

/* two-audience cards */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 40px; transition: box-shadow var(--ease) 200ms, transform var(--ease) 200ms;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--elev-raised); transform: translateY(-2px); }
.card .kicker { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.card h3 { font-size: var(--t-2xl); letter-spacing: -.01em; margin: 12px 0 18px; }
.feat { list-style: none; margin: 0; padding: 0; }
/* side-by-side cards: reserve two heading lines and equalise row heights so both
   lists start level and every bullet lines up with its neighbour */
@media (min-width: 681px) {
  .card h3 { min-height: 2.16em; }
  .feat { display: grid; grid-auto-rows: 1fr; }
}
.feat li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-soft); color: var(--fg-2); font-size: var(--t-sm); }
.feat li:first-child { border-top: 0; }
.feat .ic { color: var(--accent-ink); flex: none; margin-top: 2px; }
.price-line { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border); }
.price-line .amt { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--fg); }
.price-line .amt small { font-size: var(--t-sm); color: var(--muted); font-family: var(--font-body); }
.price-line .fine { font-size: var(--t-xs); color: var(--muted); margin-top: 6px; }
.reward-line { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border); font-family: var(--font-display); font-style: italic; font-size: var(--t-2xl); line-height: 1.15; color: var(--accent-deep); }
.price-line .amt { color: var(--accent-deep-2); }

/* rewards */
.reward { background: var(--fg); color: var(--fg-inverse); border-radius: var(--r-lg); padding: 56px; }
.reward .eyebrow { color: var(--fg-inverse-2); }
.reward h2 { font-family: var(--font-display); color: var(--on-accent); font-size: var(--t-3xl); letter-spacing: -.02em; margin: 14px 0 30px; max-width: 20ch; }
.flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.flow .node { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 22px; }
.flow .node .s { font-family: var(--font-display); color: var(--deep-2); font-size: var(--t-lg); }
.flow .node h4 { margin: 8px 0 6px; font-size: var(--t-sm); color: var(--on-accent); }
.flow .node p { font-size: var(--t-xs); color: var(--fg-inverse-3); }
.reward .fine { margin-top: 26px; font-size: var(--t-sm); color: var(--fg-inverse-3); }

/* map / markets */
.markets { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.market { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid var(--border); font-weight: 600; font-size: var(--t-sm); color: var(--fg-2); }
.market.live { background: var(--forest); color: var(--surface-mint); border-color: transparent; }
.market .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.market.live .dot { opacity: 1; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--border-soft); padding: 56px 0 40px; background: var(--surface-warm); }
footer.site .grid { display: flex; justify-content: space-between; gap: 40px 56px; flex-wrap: wrap; }
footer.site .links { flex: 1 1 auto; justify-content: flex-end; }
footer.site .mark { font-family: var(--font-display); font-size: 21px; }
footer.site .mark b { color: var(--accent-ink); font-weight: 400; }
footer.site .flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
footer.site .flags a { font-size: var(--t-xs); font-weight: 600; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--fg-2); }
footer.site .flags a.on { background: var(--fg); color: var(--fg-inverse); border-color: transparent; }
footer.site .links { display: flex; gap: 22px; flex-wrap: wrap; font-size: var(--t-sm); }
footer.site .links a { color: var(--fg-2); }
/* §7: three labelled groups, not one column of thirteen equal links. Each group is a
   column of its own, so `.links` stops being a wrapping row and starts being a stack. */
footer.site .links { flex: 0 1 auto; display: block; }
footer.site .fgroup { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
footer.site .fcol { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 720px) {
  footer.site .grid { gap: 30px 34px; }
  footer.site .links { flex: 1 1 44%; }
}
footer.site .fine { margin-top: 28px; font-size: var(--t-xs); color: var(--muted); max-width: none; }

/* ---------- responsive ---------- */
/* The 3-line menu (owner-asked 2026-07-27), and NAV-1's answer to "how wide does the
   full bar actually need to be?".
   MEASURED 2026-08-08 with tools/measure_nav.py, four languages, real layout engine:
   the whole set — six links, two pills, the log-in pill — first fits inside the content
   box at **1060px** (Vietnamese is the widest; German needs more than 1000). Below that
   it did not gracefully degrade, it made the PAGE scroll sideways: 274px of horizontal
   overflow at 681px in English, on the live site, before this session touched anything.
   The old 680px breakpoint was never measured against the bar it was defending.
   So the links collapse into the burger panel up to 1080px — 1060 plus a little room
   for the next translation — and the bar above it is a bar that fits.

   RE-MEASURED 2026-08-21 (SITE-10K-1 Phase 0). `tools/measure_nav.py`/`measure_overflow.py`
   test over `file://`, which cannot resolve a self-hosted font's absolute `/css/fonts/`
   reference — Fraunces/Inter 404 silently and the nav renders in the `*-Fallback` faces
   instead (Arial/Georgia substitutes with a deliberate size-adjust scale-up), which is
   WIDER than real Inter, not narrower. That made this bar look far more broken under
   those tools than it is: re-measured instead with Playwright over a real local HTTP
   root (real Fraunces/Inter genuinely loaded, confirmed via document.fonts status), the
   true minimum content box is 1140px for Vietnamese (928px nav + 148px brand, the widest
   of the four) — up from the 1060px on record, for two separate reasons: the brand mark
   (SITE-10K-1's snap-frame + U SVG) adds 38px to every language, and Vietnamese alone
   already needed 1102px before the mark, which the 2026-08-08 measurement did not catch
   (font-loading reality had already drifted from what was measured, pre-dating this
   session — not investigated further, flagged in NEXT-SESSION.md). 1160 is 1140 plus the
   same ~20px margin the original number used, so this needs no different a rule below —
   it fits every language with room for the next translation like before.
   `tools/measure_nav.py` and `tools/measure_overflow.py` will keep reporting the
   file://-inflated numbers until they serve pages over a local HTTP root instead; that
   is a tooling gap, not a false green here — see NEXT-SESSION.md. */
@media (max-width: 1160px) {
  .nav .link:not(.login) { display: none; }   /* login stays: phones are where owners are */
  .nav-burger { display: inline-flex; }
  .navlinks { display: none; }
  /* HOME-OVER-1: a wrapping ROW, not a column — the links each take a full-width line
     and the two pickers pair up on the last one. Measured 2026-08-01: five controls in
     the bar wanted 383px (en) / 413px (vn) of a 305px content box at 360, so the
     pickers moved in here and the bar keeps the wordmark, Log in and the burger (245 /
     279). Above the breakpoint `.navlinks` is display:contents, so the desktop bar is
     unchanged. */
  .topbar.nav-open .navlinks {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border-soft);
    padding: 6px var(--gutter) 14px; box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .topbar.nav-open .navlinks .link:not(.login) {
    display: block; flex: 0 0 100%; font-size: var(--t-md); padding: 15px 2px;
    min-height: 52px; border-bottom: 1px solid var(--border-soft);
  }
  /* the last LINK keeps its border: it is the separator above the picker row */
  .topbar.nav-open .navlinks > *:last-child { border-bottom: 0; }
  .topbar.nav-open .navlinks .lang { margin: 14px 10px 0 0; }
  /* room for the word and a real touch target — neither fits in the bar, both fit here */
  .topbar.nav-open .navlinks .lang-btn {
    min-height: 44px; padding: 10px 14px; gap: 7px; font-size: var(--t-sm);
  }
  .topbar.nav-open .navlinks .lang-menu { z-index: 2; }
}
@media (max-width: 1000px) {
  :root { --sect-y: 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* stacked layout: the phone follows the copy (owner call) — desktop order is unchanged */
  .phone { transform: none; }
  .hero h1 { font-size: var(--t-3xl); }
  .flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; --sect-y: 56px; --t-4xl: 48px; --t-3xl: 38px; --t-2xl: 30px; }
  /* The nav collapse and its panel moved up to the 1160px block above (NAV-1, widened
     SITE-10K-1 Phase 0): they were written here when 680px was assumed to be where the
     bar stopped fitting, and the measurement now says it stops fitting at 1140. What
     stays here is what is about a PHONE rather than about the bar's width. */

  /* The header already overflowed a 390px phone before the login pill existed
     (483px of header in a 350px box), which
     pushed whatever sits last off the right edge. Tighten it so all three fit. */
  .brand .tag { display: none; }
  .nav { gap: 10px; }
  .nav .lang-btn { padding: 7px 10px; gap: 5px; }
  .nav a.login { padding: 7px 12px; }
  .steps, .cols, .flow { grid-template-columns: 1fr; }
  .hero h1.h1-long { font-size: var(--t-2xl); }   /* five lines pushed the CTA off a small phone */
  .reward, .card { padding: 30px; }
  .hero { padding: 40px 0 20px; }
}

/* SITE-10K-1 Phase 0 — one switch that turns off every transition, animation and
   smooth-scroll this sheet defines, for anyone who has asked their OS to reduce
   motion. Later phases add real motion (typewriter, count-up, ping); this block is
   the guarantee that none of it can ship without an off switch, because it already
   covers "everything", not "everything as of today". */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}