/*
  THE PUBLIC WEBSITE'S ONLY STYLESHEET (WP-WEB1) — self-contained on purpose.

  WHY NOT `packages/design/tokens.css`: that file belongs to the APP, is served by the app's own process, and
  would make the website depend on the thing it is advertising. A marketing site that goes blank because the app
  is mid-deploy is a worse failure than a site with its own copy of six hex values. The same rule the previous
  landing page recorded, kept: no build step, no package.json, no request the app has to answer.

  THE PALETTE IS THE BRAND'S, COPIED DELIBERATELY, AND ONLY THE VALUES THIS SITE USES:

    volt        #ddff40  the brand accent. It is the PWA manifest's own `background_color` and the app's
                         `--ev-volt-bright`, so this is the ONE accent and not a second opinion about it.
    volt-deep   #5f7000  the app's `--ev-volt-deep`. Volt on an OFF-WHITE page is ~1.3:1 — unreadable as ink —
                         so accent TEXT uses this instead, and volt itself is only ever a FILL with near-black
                         ink on top of it (near-black on volt is ~15:1, measured in `tokens.css`).
    ink         #0b0c0b  near-black, the app's `--ev-void` — crisp type and every border.
    muted       #4b5046  secondary text, 7.7:1 on the page. Small text never uses anything lighter.
    page        #f6f7f2  off-white with the olive cast the brand's control-room palette already sits on.
    surface     #ffffff  a card.

  THE TYPE STACK IS THE SYSTEM ONE, for the same reason: no font files, no @font-face, no webfont request on a
  page whose whole job is to load instantly for a stranger (and for a payment reviewer).
*/

/* ---------------------------------------------------------------------------- tokens -- */

:root {
  --volt: #ddff40;
  --volt-deep: #5f7000;
  --volt-wash: #f4ffc2;

  --ink: #0b0c0b;
  --muted: #4b5046;

  --page: #f6f7f2;
  --surface: #ffffff;
  --surface-2: #eef0e8;

  --line: rgb(11 12 11 / 14%);

  /* MEDIUM RADIUS (the frozen direction), and one scale for it — never a per-section number. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* SHORT, CONTROLLED SHADOWS. `--sh-hard` is the neo-brutal offset, and it is used on the hero's product frame
     and the primary button only — the moment it is on every card it stops being a statement. */
  --sh-1: 0 1px 2px rgb(11 12 11 / 6%), 0 1px 1px rgb(11 12 11 / 4%);
  --sh-2: 0 8px 24px -12px rgb(11 12 11 / 18%), 0 1px 2px rgb(11 12 11 / 5%);
  --sh-hard: 5px 5px 0 var(--ink);

  --wrap: 1140px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ONE SECTION RHYTHM. Every band on every page uses these two numbers, which is what makes the site read as
     one design rather than eight pages that happen to share a stylesheet. */
  --band-y: clamp(3.5rem, 8vw, 6.5rem);
  --stack-y: 1rem;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

body {
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--volt-deep); }

/* ONE FOCUS RING FOR THE WHOLE SITE, and it is never removed. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--surface);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------------ typography -- */

h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -0.02em; font-weight: 800; }

h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.075rem, 1.9vw, 1.3rem); }

p { margin: 0 0 var(--stack-y); }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, 1.55vw, 1.25rem); color: var(--muted); max-width: 40rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.8125rem; }

.eyebrow {
  display: inline-block;
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--volt-deep);
}

.code { font-family: var(--font-mono); font-size: 0.9em; }

/* ---------------------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--surface { background: var(--surface); border-block: 1px solid var(--line); }
.band--wash { background: var(--volt-wash); border-block: 2px solid var(--ink); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { margin-top: 0.85rem; font-size: 1.0625rem; color: var(--muted); }

.stack > * + * { margin-top: var(--stack-y); }

/* ONE GRID PRIMITIVE, with a floor so a column can never be squeezed to nothing. */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ---------------------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--page);
  border-bottom: 2px solid var(--ink);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.brand img { width: 28px; height: 28px; object-fit: contain; display: block; }

.site-nav { margin-inline-start: clamp(0.5rem, 3vw, 2.5rem); }
.site-nav ul { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }

.site-nav a {
  display: inline-block;
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--volt); }

.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.6rem; }

/* THE LANGUAGE SWITCHER (WP-WEB1-L10N). Two segments, one of them active, in the same visual language as the rest of
   the header: a hairline pill, the active segment filled with the brand volt.
 *
 * `aria-current="true"` IS THE STATE, not a class name — a screen reader announces it, and it is what the public-site
 * suite reads to decide which language a page is actually in. Both segments are REAL LINKS to the equivalent page in
 * the other language, written into each static page by hand: with no script running, switching still works, and that is
 * the same reason the phone menu is a `<button>` rather than a div.
 *
 * IT LIVES INSIDE `.header-actions` ON PURPOSE. That row is `display: none` on a phone until the disclosure opens, so
 * the control rides inside the mobile menu WITHOUT a second copy existing anywhere — two copies of a language control
 * are two things that can disagree about which language you are reading. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
  flex: 0 0 auto;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--muted);
}
.lang-switch a + a { border-inline-start: 2px solid var(--ink); }
.lang-switch a:hover { background: var(--surface-2); color: var(--ink); }
.lang-switch a[aria-current="true"] { background: var(--volt); color: var(--ink); cursor: default; }

/* The disclosure button exists at every width (a phone needs it) and is hidden from a mouse user's way only
   when the row actually fits. It is `display: none` from 900px up, where the list is always visible. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--volt); }

/* --------------------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { color: var(--ink); background: var(--volt-wash); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--volt); box-shadow: var(--sh-hard); }
.btn--primary:hover { background: var(--volt); transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--ink); }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.btn--quiet { border-color: transparent; background: transparent; text-decoration: underline; }
.btn--quiet:hover { background: var(--surface-2); }

.btn--sm { min-height: 40px; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.link-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; font-size: 0.9375rem; }

/* ----------------------------------------------------------------------------- cards -- */

.card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: var(--sh-1);
}
.card--flat { border-color: var(--line); border-width: 1px; border-radius: var(--r-md); box-shadow: none; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 0; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--volt);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

/* A NUMBERED STEP: the number is the accent, the rule is the height, and the band never re-measures itself. */
.step { position: relative; padding-top: 0.25rem; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.85rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--volt);
  font-weight: 800;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--muted); font-size: 0.9375rem; margin: 0; }

.pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface);
}
.pill--volt { background: var(--volt); }

ul.ticks { list-style: none; margin: 0; padding: 0; }
ul.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: var(--muted); font-size: 0.9375rem; }
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--volt);
  border: 1.5px solid var(--ink);
}
ul.ticks li:last-child { margin-bottom: 0; }
ul.ticks strong { color: var(--ink); }

/* AN EXPLICIT OWNER-INPUT MARKER, and it is impossible to mistake for content: dashed, amber, and it says the
   words. WP-WEB1 §32 sanctions exactly this — a page architecture may ship with an internal placeholder as long
   as nothing is deployed with it, and `cloud:public-site` enumerates every one of them by key and page. */
.owner-todo {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1.5px dashed #8a5b00;
  border-radius: var(--r-sm);
  background: #fff5e0;
  color: #6b4600;
  font-size: 0.875rem;
  font-weight: 700;
}
.owner-todo::before { content: "\26A0  "; }

/* --------------------------------------------------------------- the hero and its shot -- */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem); }

.hero__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { max-width: 34rem; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }

/*
  THE HERO'S PRODUCT COMPOSITION.

  IT IS NOT A SCREENSHOT, AND IT DOES NOT PRETEND TO BE ONE. There is no screenshot in this repository, and a
  fabricated one would be a picture of a feature nobody can check. What is drawn instead is the app's OWN
  vocabulary — an alert, a sound-alert row, a Comment TTS line and a Top Gifter widget — in the brand's palette,
  which is a truthful picture of what the product shows on a streamer's screen. Every string in it names a real
  capability (see the feature list on the home page and docs/PUBLIC-WEBSITE-V2.md §verified facts).
*/
.shot {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-hard);
  overflow: hidden;
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid var(--ink);
  background: var(--volt-wash);
  font-size: 0.8125rem;
  font-weight: 700;
}
.shot__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
  padding: 0.1rem 0.5rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--volt);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shot__body { padding: 1rem; display: grid; gap: 0.75rem; }

.shot-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--page);
  font-size: 0.875rem;
}
.shot-row__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--volt);
  font-size: 0.75rem;
  font-weight: 800;
}
.shot-row__label { font-weight: 700; }
.shot-row__note { margin-inline-start: auto; color: var(--muted); font-size: 0.8125rem; text-align: right; }

.shot-grid { display: grid; gap: 0.75rem; }
@media (min-width: 480px) { .shot-grid { grid-template-columns: 1fr 1fr; } }

.shot-tile {
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.shot-tile__title { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shot-tile__value { font-size: 1.1rem; font-weight: 800; }
.shot-tile ol { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.8125rem; color: var(--muted); }

.shot__caption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }

/* --------------------------------------------------------------------------- pricing -- */

.pricing-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  box-shadow: var(--sh-1);
}
.plan__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.plan__name { font-size: 1.35rem; font-weight: 800; }
.plan__price { margin: 0.9rem 0 0.15rem; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; }
.plan__period { font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
.plan__coins { font-size: 0.875rem; color: var(--muted); }
.plan__desc { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--muted); }
.plan__list { margin: 1rem 0 0; padding: 0; list-style: none; }
.plan__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.plan__list li span:last-child { font-weight: 700; text-align: right; }
.plan__cta { margin-top: auto; padding-top: 1.25rem; }
.plan__cta .btn { width: 100%; }

.pricing-notes { margin-top: 1.5rem; display: grid; gap: 0.65rem; max-width: 56rem; }
.pricing-note { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.pricing-note[data-pricing-note="checkout"] { padding: 0.85rem 1rem; border: 1.5px solid var(--ink); border-radius: var(--r-md); background: var(--volt-wash); color: var(--ink); }

/* ------------------------------------------------------------------------ long-form -- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 0.85rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.prose h3 { margin-top: 1.75rem; margin-bottom: 0.6rem; font-size: 1.075rem; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }

details.faq { border: 2px solid var(--ink); border-radius: var(--r-md); background: var(--surface); padding: 0.15rem 1rem; }
details.faq + details.faq { margin-top: 0.75rem; }
details.faq summary { cursor: pointer; padding: 0.85rem 0; font-weight: 700; font-size: 1.0125rem; }
details.faq summary::marker { color: var(--volt-deep); }
details.faq p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9375rem; }

/* -------------------------------------------------------------------- callouts, misc -- */

.callout {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--volt-wash);
}
.callout h2, .callout h3 { margin-bottom: 0.6rem; }
.callout p { color: var(--ink); }

.note-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--muted);
}

.contact-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.contact-card { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-lg); padding: clamp(1.1rem, 2vw, 1.5rem); }
.contact-card dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-card dd { margin: 0.35rem 0 1rem; font-size: 1.0625rem; font-weight: 600; word-break: break-word; }
.contact-card dd:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------- footer -- */

.site-footer { margin-top: auto; border-top: 2px solid var(--ink); background: var(--surface); }
.site-footer__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
}
.site-footer h2 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.85rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { font-size: 0.9375rem; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer__base .brand { font-size: 0.9375rem; }

/* ---------------------------------------------------------------------------- motion -- */

/*
  RESTRAINED, AND OFF BY DEFAULT FOR ANYONE WHO ASKED. The reveal is the only scroll motion on the site and it is a few
  lines of IntersectionObserver in `site.js`; there is no animation library and no scroll listener.

  `.reveal--armed` IS ADDED BY THE SCRIPT, NEVER WRITTEN INTO THE MARKUP — so a browser with no JavaScript (or one whose
  script was blocked) shows the whole page rather than a column of invisible bands. The markup only carries `.reveal`.
*/
.reveal--armed { opacity: 0; transform: translateY(10px); transition: opacity 420ms ease, transform 420ms ease; }
.reveal--armed.reveal--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal--armed { opacity: 1; transform: none; }
  .btn--primary { box-shadow: var(--sh-hard); }
  .btn--primary:hover { transform: none; box-shadow: var(--sh-hard); }
}

/* ------------------------------------------------------------------------ responsive -- */

/*
  BELOW 900px THE ROW BECOMES A DISCLOSURE, AND THE ACTIONS MOVE INTO IT — THEY ARE NEVER COPIED. Duplicating a
  "Log in" label inside a panel is how one of two copies goes stale, so the SAME elements are re-ordered instead:
  row one is the brand and the button, and the panel that opens holds the navigation list and then the actions.
  The `order` values are what put them there; the DOM order (`brand, nav, actions, toggle`) is what a keyboard
  walks, and a closed panel's links are `display: none`, i.e. not focusable.
*/
@media (max-width: 899px) {
  .site-header__bar { flex-wrap: wrap; padding-block: 0.6rem; }
  .brand { order: 0; }
  .nav-toggle { order: 1; display: inline-flex; }
  .site-nav { order: 2; display: none; margin: 0; flex-basis: 100%; }
  .header-actions { order: 3; display: none; margin-inline-start: 0; flex-basis: 100%; padding-bottom: 0.9rem; }

  .site-header--open .site-nav { display: block; }
  .site-header--open .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: 0.4rem 0.2rem; }
  .site-header--open .site-nav a { padding: 0.85rem 0.5rem; font-size: 1rem; }
  .site-header--open .header-actions { display: flex; }
  /* The language control opens the panel with the two account buttons: first in the row, on its own line. */
  .site-header--open .lang-switch { align-self: flex-start; margin-bottom: 0.65rem; }
}

@media (max-width: 430px) {
  .header-actions { flex-direction: column; align-items: stretch; }
  .header-actions .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  /* ...but the switcher is NOT a submit button: it keeps its own width and its own left edge. */
  .lang-switch { align-self: flex-start; }
}