:root {
  --color-canvas: #04060C;
  --color-bg-start: #040507;
  --color-bg-end: #090B10;
  --color-surface: #0B0E15;
  --color-surface-2: #070A12;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-cyan: #00F3FF;
  --color-green: #00FF88;
  --color-magenta: #FF0055;
  --color-purple: #A855F7;
  --color-amber: #FFB700;
  --color-text: #F1F5F9;
  --color-text-dim: #94A3B8;
  --color-text-mute: #64748B;
  --color-bar: #263449;
  --color-glow: rgba(0, 243, 255, 0.25);
  --color-btn-ink: #04060C;

  --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', monospace;

  --radius-btn: 8px;
  --radius-card: 12px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 96px;
  --card-pad: 24px;
  --content-max: 1200px;
  --header-h: 72px;

  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-enter: cubic-bezier(0, 0, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  --reveal-dur: var(--motion-base);
  --reveal-ease: var(--ease-enter);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0, 243, 255, 0.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(255, 0, 85, 0.05), transparent 40%),
    linear-gradient(to bottom, var(--color-bg-start), var(--color-bg-end));
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h1 {
  font-weight: 800;
}

p {
  margin: 0;
}

a {
  color: var(--color-cyan);
  text-decoration: none;
}

a:hover {
  color: var(--color-cyan);
}

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

::selection {
  background: var(--color-glow);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* R24 — skip-link injected by site-kit document() is unstyled by default and
   renders as a visible "Skip to main content" text layer. Style it off-canvas
   (transform, so it stays focusable + in the a11y tree) and slide it in as a
   cyan pill on :focus-visible — keyboard users get a real skip control, mouse
   users never see it. z-index sits above the sticky header (50). */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  padding: 8px 16px;
  border: 1px solid var(--color-cyan);
  border-radius: 8px;
  background: var(--color-canvas);
  color: var(--color-cyan);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: translateY(-150%);
  transition: transform var(--motion-fast) var(--ease-enter);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section {
  padding-block: 64px;
}

section[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.anchor {
  display: block;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.section-eyebrow {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.section-lead {
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-dim);
  max-width: 720px;
  margin-bottom: var(--space-4);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand-logo {
  display: block;
  width: 160px;
  height: auto;
  transition: filter var(--motion-fast) var(--ease-standard);
}

/* Amendment SPEC-02 R7.3 — wave: staggered scaleY oscillation around each
   bar's base height (0.72↔1.0, R14.3), ~1.6s cycle, transform-only, GPU-safe.
   The svg box stays fixed size so there is zero layout shift. */
.brand-logo .logo-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: logo-wave 1.6s ease-in-out infinite;
}

.brand-logo .logo-bar:nth-child(2) {
  animation-delay: 0.16s;
}

.brand-logo .logo-bar:nth-child(3) {
  animation-delay: 0.32s;
}

.brand-logo .logo-bar:nth-child(4) {
  animation-delay: 0.48s;
}

.brand-logo .logo-bar:nth-child(5) {
  animation-delay: 0.64s;
}

@keyframes logo-wave {
  0%,
  100% {
    transform: scaleY(0.72);
  }

  50% {
    transform: scaleY(1);
  }
}

.brand:hover .brand-logo {
  filter: drop-shadow(0 0 12px var(--color-glow));
}

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline: auto;
}

.nav-links a {
  /* R32 — reach >=44px hit height: the 14px link line box (~22px) + 11px
     padding-block on each side lands just over 44px without growing text. */
  padding-block: 11px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color var(--motion-fast) var(--ease-standard);
}

.nav-links a:hover {
  color: var(--color-cyan);
}

/* R38.2 (SPEC-12) — the header's right control cluster (Request-invite CTA +
   EN|IT toggle + burger). One flex group so that at <=720px it stays together
   and right-aligned (margin-left:auto) instead of splitting across wrapped
   rows; the internal gap mirrors .nav-wrap so desktop spacing is unchanged. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

/* R38 (SPEC-12) — mobile burger menu. The toggle is hidden on desktop and
   appears only at <=720px (44x44, transparent, cyan lines). The panel lives
   inside the sticky header and drops full-width right under it (top:100% =
   the header's own height), carrying the duplicated nav links + both CTAs;
   it is kept out of the page via [hidden] (explicit display:none so the
   flex layout below cannot leak over the UA rule). body.nav-open locks page
   scroll while the panel is open. */
.nav-toggle {
  display: none;
  flex: none;
}

.mobile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-canvas);
}

.mobile-panel[hidden] {
  display: none;
}

body.nav-open {
  overflow: hidden;
}

.mobile-links {
  display: flex;
  flex-direction: column;
}

.mobile-links a {
  /* R32 — >=44px hit height on the panel links via transparent padding. */
  padding-block: 12px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color var(--motion-fast) var(--ease-standard);
}

.mobile-links a:hover {
  color: var(--color-cyan);
}

/* Panel CTAs are full-width with left-aligned text (R38). */
.mobile-cta {
  width: 100%;
  justify-content: flex-start;
}

/* R38 — the panel drops in with a short fade+slide, gated on the same
   decorative-motion rules as every other brand animation (static under
   reduced motion without the footer toggle opt-in). */
.js.motion-decorative .mobile-panel:not([hidden]) {
  animation: panel-in var(--motion-base) var(--ease-enter);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.btn-primary {
  background: var(--color-cyan);
  color: var(--color-btn-ink);
}

.btn-primary:hover {
  box-shadow: 0 0 24px var(--color-glow);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-secondary:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 12px;
  /* R32 — header buttons (Request invite, desktop Try free) reach >=44px hit
     height. The <=1023px/<=720px blocks reduce padding, but min-height holds
     the 44px target so the touch area never shrinks. */
  min-height: 44px;
}

.hero {
  padding-block: var(--space-6) calc(var(--space-6) * 1.5);
}

.hero-inner {
  max-width: 840px;
}

.hero-meter {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 48px;
  margin-bottom: var(--space-4);
}

.peak-bar {
  width: 6px;
  height: 100%;
  border-radius: 3px;
  transform-origin: 50% 100%;
}

/* R9.2 — hero meter recolored to the exact inline-logo palette in the logo's
   bar order: green, magenta, cyan (tallest/peak), purple, amber. Each bar's
   base height is proportional to the logo bar heights (16/26/34/22/12 of the
   34-unit peak). The JS gain loop (R4.2) animates transform: scaleY() on top
   of these base heights; reduced motion keeps the static scaleY(0.5) below. */
.peak-bar.peak-green {
  background: var(--color-green);
}

.peak-bar.peak-magenta {
  background: var(--color-magenta);
}

.peak-bar.peak-cyan {
  background: var(--color-cyan);
}

.peak-bar.peak-purple {
  background: var(--color-purple);
}

.peak-bar.peak-amber {
  background: var(--color-amber);
}

.hero-meter .peak-bar:nth-of-type(1) {
  height: 47%;
}

.hero-meter .peak-bar:nth-of-type(2) {
  height: 76%;
}

.hero-meter .peak-bar:nth-of-type(3) {
  height: 100%;
}

.hero-meter .peak-bar:nth-of-type(4) {
  height: 65%;
}

.hero-meter .peak-bar:nth-of-type(5) {
  height: 35%;
}

.hero-title {
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.05em;
}

/* R20 (Amendment SPEC-06) — hero H1 entrance: the logo wave, not the generic
   reveal. motion.js wraps each letter in a span and triggers `.is-enter`;
   letters rise translateY(0.6em)->0 + opacity 0->1 on --ease-enter. Letters
   are inline-blocks animating transform/opacity ONLY, so the H1 keeps its
   final box from first paint (zero layout shift). The wrapper is
   display:contents so it adds no extra box. */
.js .hero-title-letters {
  display: inline;
}

.js .hero-title .hl {
  display: inline-block;
  transform: translateY(0.6em);
  opacity: 0;
}

.js .hero-title.is-enter .hl {
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--motion-base) var(--ease-enter),
    opacity var(--motion-base) var(--ease-enter);
}

/* R21 (Amendment SPEC-07) — after the one-shot rise-in completes, letters
   continue into a continuous gentle wave loop matching the header logo bars
   (R7.3): translateY 0 <-> -0.045em, ~1.6s cycle, ease-in-out infinite,
   per-letter phase offset via the inline animation-delay motion.js sets
   (index * ~0.12s, the header's stagger rhythm). Keyframes start AND end at
   translateY(0) so the entrance -> loop handoff is seamless; transform-only,
   zero layout shift. Gated on the same decorative class (motion-decorative)
   that gates the entrance itself, so under reduced-motion without the opt-in
   the letters never wrap and this loop never runs. */
.js.motion-decorative .hero-title.is-wave .hl {
  animation: h1-wave 1.6s ease-in-out infinite;
}

@keyframes h1-wave {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.045em);
  }
}

/* Pre-paint hide: only when JS is on AND decorative motion will run (class
   set in the head inline script) is the H1 hidden until motion.js wraps and
   triggers the entrance — no flash of the plain phrase, no layout shift
   (visibility keeps the box). Without JS or without decorative motion the
   H1 renders as plain, fully-visible text. */
.js.motion-decorative .hero-title {
  visibility: hidden;
}

.js.motion-decorative .hero-title.is-enter {
  visibility: visible;
}

.hero-sub {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-dim);
  max-width: 640px;
  margin: var(--space-3) 0 var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.proof {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.proof-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  color: var(--color-green);
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
  animation: live-pulse var(--motion-slow) var(--ease-standard) infinite;
}

@keyframes live-pulse {
  50% {
    opacity: 0.35;
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.platform-copy p {
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-dim);
  max-width: 520px;
}

.demo-card {
  font-family: var(--font-mono);
  font-size: 14px;
}

.demo-input {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  word-break: break-word;
}

.demo-input:not(.is-typed)::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 3px;
  background: var(--color-cyan);
  vertical-align: -0.15em;
  animation: caret-blink var(--motion-slow) steps(1) infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.demo-packets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.demo-packet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 2px solid transparent;
  border-radius: var(--radius-btn);
}

.js .demo-packet {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--motion-base) var(--ease-enter),
    transform var(--motion-base) var(--ease-enter);
}

.js .demo-packet.is-shown {
  opacity: 1;
  transform: none;
  animation: packet-flash var(--motion-slow) var(--ease-standard);
}

@keyframes packet-flash {
  0% {
    border-left-color: var(--color-cyan);
    box-shadow: 0 0 0 1px var(--color-glow);
  }
  100% {
    border-left-color: transparent;
    box-shadow: none;
  }
}

.pk-label {
  color: var(--color-text-dim);
  letter-spacing: 0.06em;
}

.pk-arrow {
  color: var(--color-text-mute);
}

.pk-val {
  margin-left: auto;
  color: var(--color-cyan);
  letter-spacing: 0.06em;
}

.pk-num {
  display: inline-block;
  min-width: 6ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pk-unit {
  color: var(--color-text-dim);
}

.preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-dim);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  /* R32 — chips reach >=40px hit height (12px mono line + 10px padding). */
  min-height: 40px;
  padding: 10px 14px;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.chip:hover {
  color: var(--color-cyan);
  border-color: rgba(0, 243, 255, 0.4);
}

.chip.is-active {
  color: var(--color-cyan);
  border-color: rgba(0, 243, 255, 0.6);
  background: rgba(0, 243, 255, 0.08);
}

/* R15 — "Hear it" engine demo (Amendment SPEC-04): reuses the .card/.btn
   patterns, cyan accent for interaction, mono readouts. The JS hides the
   controls and shows the [data-engine-fallback] message when Web Audio is
   unavailable, so those hidden states must win over display rules here. */
.engine-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
}

.engine-note {
  font-size: 16px;
  color: var(--color-text-dim);
  max-width: 560px;
}

.engine-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

.engine-controls[hidden],
.engine-start[hidden],
.engine-canvas[hidden] {
  display: none;
}

.engine-start {
  flex: none;
}

.engine-slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  flex: 1 1 220px;
  min-width: 200px;
}

.engine-slider label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* R32 — engine sliders get a >=24px thumb and a taller hit area: the input
   box is 20px tall (the tap target) while the painted track stays a thin 4px
   bar centered inside it (runnable-track for webkit, range-track for moz).
   Webkit thumbs are offset by -10px so the 24px thumb centers on the 4px
   track; Firefox centers its thumb on the track natively. */
.engine-slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  outline-offset: 4px;
}

.engine-slider input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--color-bar);
  border-radius: 2px;
}

.engine-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--color-cyan);
  border: 2px solid var(--color-canvas);
  cursor: pointer;
}

.engine-slider input[type='range']::-moz-range-track {
  height: 4px;
  background: var(--color-bar);
  border-radius: 2px;
}

.engine-slider input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-cyan);
  border: 2px solid var(--color-canvas);
  cursor: pointer;
}

.engine-readout {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-cyan);
  min-width: 3ch;
}

.engine-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 48;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
}

.engine-fallback {
  font-size: 15px;
  color: var(--color-text-dim);
  border-left: 3px solid var(--color-amber);
  padding-left: var(--space-2);
}


.shobi-bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}

/* R8.1: the only purple signal on the Meet Shobi section — a thin left border
   on the card. Labels/bars carry the neutral + mixed semantic colors below. */
#shobi .shobi-bars {
  border-left: 3px solid var(--color-purple);
}

.shobi-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 56px;
  align-items: center;
  gap: var(--space-2);
}

.shobi-bar-label {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.shobi-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.shobi-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  transition: width var(--motion-slow) var(--ease-enter);
}

.js .shobi-bars[data-ready] .shobi-bar {
  width: 0 !important;
}

/* R8.2 — mixed semantic fills matching the app: darkness dim-lit on a #263449
   track, hypnotic cyan, groove green, sub-rumble purple. */
.shobi-bar-row.tone-dark .shobi-bar-track {
  background: var(--color-bar);
}

.shobi-bar-row.tone-dark .shobi-bar {
  background: #64748B;
}

.shobi-bar-row.tone-hypnotic .shobi-bar {
  background: var(--color-cyan);
}

.shobi-bar-row.tone-groove .shobi-bar {
  background: var(--color-green);
}

.shobi-bar-row.tone-sub .shobi-bar {
  background: var(--color-purple);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}

.shobi-bar-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text-dim);
}

.shobi-bar-num {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
}

.battles-lead {
  max-width: 640px;
}

/* R31.2 — IT home CTA: .battles-actions becomes flex so the long Italian
   label ("Scopri come funzionano le battaglie") can never exceed the viewport
   (audit H3). The <=768px R28 rule already centers it via justify-content,
   which needs display:flex to have any effect; flex-wrap + the <=542px
   white-space rule below let the button text wrap when even wrapping fails. */
.battles-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.pricing-tile {
  display: block;
  color: var(--color-text);
  transition: border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.pricing-tile:hover {
  border-color: rgba(0, 243, 255, 0.4);
}

.pricing-name {
  font-size: 16px;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  color: var(--color-cyan);
}

.pricing-tile p {
  color: var(--color-text-dim);
  font-size: 16px;
}

.site-footer {
  margin-top: var(--space-6);
  padding-block: var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.footer-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.footer-mark {
  display: block;
  height: 22px;
  width: auto;
}

.footer-word {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-inline: auto;
}

.footer-links a {
  /* R32 — >=44px hit height via transparent padding-block (visual unchanged). */
  padding-block: 11px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color var(--motion-fast) var(--ease-standard);
}

.footer-links a:hover {
  color: var(--color-cyan);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  font-size: 14px;
  color: var(--color-text-dim);
  flex: none;
  /* R30.1 — push the social+motion+builtOn+email cluster bottom-RIGHT on
     desktop (audit H1): when it wraps onto its own row (820–1440px) the auto
     left margin flushes it to the far right. At <=768px the width:100% rule
     below removes free space, so this has no effect there. */
  margin-left: auto;
}

/* R26 — the right footer cluster: social icons + motion toggle + "Built on
   the WrldAI framework" + contact email in one clean, wrap-friendly row.
   Icons are 20px currentColor glyphs; hover tints cyan like every interactive
   accent. R37 (SPEC-12) — social icons were 8px apart border-to-border; the
   gap grows to 20px so each 44px hit area reads as its own control. */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* R32 — 44x44 hit area (icons stay 20px; the extra space is transparent
     hit-area padding, so the visual proportion is unchanged). */
  width: 44px;
  height: 44px;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.footer-social-link:hover {
  color: var(--color-cyan);
  border-color: var(--color-border-strong);
}

.footer-social-link svg {
  display: block;
}

.footer-email {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
  transition: color var(--motion-fast) var(--ease-standard);
}

.footer-email:hover {
  color: var(--color-cyan);
}

/* R14 — footer Motion toggle: small icon-button with aria-pressed, labelled
   from localized content. While html.motion-on the icon bars wave (decorative
   only, so it is gated on the same preference). */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* R32 — 44x44 hit area (icon stays 14px; transparent padding grows the
     tap target without changing the look). */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-text-dim);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.motion-toggle:hover {
  color: var(--color-cyan);
  border-color: var(--color-border-strong);
}

.motion-toggle svg {
  display: block;
}

.motion-toggle .bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

html.motion-on .motion-toggle {
  color: var(--color-cyan);
  border-color: rgba(0, 243, 255, 0.4);
}

html.motion-on .motion-toggle .bar {
  animation: motion-icon 1.6s ease-in-out infinite;
}

html.motion-on .motion-toggle .bar:nth-child(2) {
  animation-delay: 0.16s;
}

html.motion-on .motion-toggle .bar:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes motion-icon {
  0%,
  100% {
    transform: scaleY(0.72);
  }

  50% {
    transform: scaleY(1);
  }
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.lang-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.lang-toggle-item svg {
  display: block;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.lang-toggle-current {
  color: var(--color-text);
  cursor: default;
}

.lang-toggle-link:hover,
.lang-toggle-link:focus-visible {
  color: var(--color-cyan);
  border-color: var(--color-border-strong);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-links {
  margin-left: auto;
    display: none;
  }

  .shobi-bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .shobi-bar-val {
    text-align: left;
  }

  .footer-links {
    margin-inline: 0;
  }

  .footer-meta {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* R14 — while the visitor follows the system (no `.motion-on` opt-in),
     every animation/transition is killed and decorative JS-driven states
     settle instantly (SPEC R4.3). The footer Motion toggle adds
     `html.motion-on`, which restores the decorative brand animations even
     under an OS-level reduce preference (R14.2) — so the kill rules are
     scoped to `html:not(.motion-on)` only. */
  html:not(.motion-on) *,
  html:not(.motion-on) *::before,
  html:not(.motion-on) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html:not(.motion-on) .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  html:not(.motion-on) .peak-bar {
    transform: scaleY(0.5);
  }

  /* R7.4: the inline logo wave is fully static under reduced motion — the
     colored bars render at their base height, animation none. */
  html:not(.motion-on) .brand-logo .logo-bar {
    animation: none;
  }
}

/* ---- inner pages: battles / shobi / pricing / invite ---- */

/* R3 — battles page accent is magenta; shobi page is cyan-led with purple
   demoted to small signals only (Amendment SPEC-02 R8.3). Cyan stays the only
   interactive accent; the chromatic roles are non-interactive semantic
   signals. */

.page-battles .section-eyebrow {
  color: var(--color-magenta);
}

.page-battles .step-index {
  color: var(--color-magenta);
}

#shobi .section-eyebrow,
.page-shobi .section-eyebrow {
  color: var(--color-cyan);
}

/* R8.3: one small purple signal on the shobi page — a thin left border on the
   voice-sample chat column (chat-role markers stay cyan so instances stay ≤2). */
.page-shobi .chat {
  border-left: 3px solid var(--color-purple);
  padding-left: var(--space-3);
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.step-item {
  display: grid;
  grid-template-columns: 56px 200px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.step-index {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
}

.step-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.step-copy {
  font-size: 17px;
  color: var(--color-text-dim);
}

.rule-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.rule-item {
  display: flex;
  gap: 12px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-size: 17px;
  color: var(--color-text-dim);
}

.rule-item::before {
  content: '//';
  font-family: var(--font-mono);
  color: var(--color-cyan);
  flex: none;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}

.event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
}

.event-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.event-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 6px 12px;
  white-space: nowrap;
}

.event-note {
  max-width: 720px;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 15px;
  color: var(--color-text-mute);
}

.event-item-detailed {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.event-detail {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-mute);
}

.footnote {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-mute);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.cap-card .cap-title {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
  margin-bottom: var(--space-2);
}

.cap-card p {
  color: var(--color-text-dim);
  font-size: 16px;
}

.honesty {
  border-left: 3px solid var(--color-magenta);
  max-width: 720px;
}

.honesty-title {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-magenta);
  margin-bottom: var(--space-2);
}

.honesty-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.honesty-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: 16px;
  color: var(--color-text-dim);
}

.honesty-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-magenta);
}

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 720px;
}

.chat-bubble {
  max-width: 640px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  border-top-left-radius: 4px;
  font-size: 16px;
  color: var(--color-text);
}

.chat-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: var(--space-1);
}

.pricing-tile {
  position: relative;
}

/* R11 — plan picker. The selected card is the one whose radio is checked:
   cyan border + SELECTED chip; keyboard focus is visible on the card while
   the (visually hidden) native radio inside has focus. */
.plan-card {
  cursor: pointer;
}

.plan-card.is-selected {
  border-color: var(--color-cyan);
  box-shadow: 0 0 32px rgba(0, 243, 255, 0.12);
}

.plan-card:focus-within {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

.plan-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.plan-selected-tag {
  position: absolute;
  top: -11px;
  left: var(--card-pad);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-btn-ink);
  background: var(--color-cyan);
  border-radius: var(--radius-btn);
  padding: 4px 10px;
  display: none;
}

.plan-card.is-selected .plan-selected-tag {
  display: inline-block;
}

.plan-summary {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.pricing-tag {
  position: absolute;
  top: -11px;
  right: var(--card-pad);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-btn-ink);
  background: var(--color-cyan);
  border-radius: var(--radius-btn);
  padding: 4px 10px;
}

.pricing-timer {
  position: absolute;
  top: -11px;
  left: var(--card-pad);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-btn-ink);
  background: var(--color-amber);
  border-radius: var(--radius-btn);
  padding: 4px 10px;
}

.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: 15px;
  color: var(--color-text-dim);
}

.plan-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--color-cyan);
}

.price-line {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-top: var(--space-3);
}

.price-line .unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-dim);
}

.price-note {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-mute);
}

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.strip-title {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.strip-copy {
  font-size: 16px;
  color: var(--color-text-dim);
  max-width: 760px;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 820px;
  margin-top: var(--space-4);
}

.faq-item {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.faq-q {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-cyan);
  margin-bottom: var(--space-1);
}

.faq-a {
  font-size: 16px;
  color: var(--color-text-dim);
}

.invite-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 560px;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-cyan);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-dim);
}

.invite-plan-chip[hidden] {
  display: none;
}

.invite-plan-chip-text strong {
  color: var(--color-cyan);
  font-weight: 600;
}

.invite-plan-dismiss {
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  line-height: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-text-dim);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.invite-plan-dismiss:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

.invite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 560px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

/* R33 — the old `.field ...:focus { outline: none }` suppressed the global
   :focus-visible ring on form fields (audit M3), leaving keyboard users with
   only a subtle border-color change. Replaced with the standard cyan outline
   on :focus-visible (2px, offset 2px, matching the global rule) while keeping
   the border-color change for the focused state. Text-entry controls match
   :focus-visible on any focus method, so the border feedback still applies on
   mouse clicks too. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
  border-color: var(--color-cyan);
}

.form-note {
  font-size: 14px;
  color: var(--color-text-dim);
}

.form-status {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}

.form-status.is-error {
  color: var(--color-magenta);
  border-color: rgba(255, 0, 85, 0.4);
}

.form-status.is-success {
  color: var(--color-green);
  border-color: rgba(0, 255, 136, 0.4);
}

.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--color-magenta);
}

@media (max-width: 900px) {
  .cap-grid {
    grid-template-columns: 1fr;
  }

  .rule-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .step-item {
    grid-template-columns: 44px 1fr;
  }

  .step-item .step-label,
  .step-item .step-copy {
    grid-column: 2;
  }

  .event-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* R31.1 — availability page overflow at <=~542px (audit H2, worst case IT):
   .event-status is white-space:nowrap and its IT strings are longest; letting
   the pill text wrap (plus the .event-meta flex-wrap above) keeps EN + IT at
   360px inside the viewport. The IT battles CTA gets the same wrap so the
   long label never overflows either. */
@media (max-width: 542px) {
  .event-status {
    white-space: normal;
  }

  .battles-actions .btn {
    white-space: normal;
  }
}

/* R10 — mobile header overflow guard: tighten the nav gap, hide the flag
   codes (flags alone stay), and shrink the inline logo so the lang toggle +
   Try free + Request-invite cluster never overflows. R12.3 — the wider right
   cluster (Try free button added) is allowed to wrap into two rows so nothing
   clips. The guard must span the whole range where .nav-links is hidden
   (≤720px): below 560px the wider cluster wraps and fits, but between 561px
   and 720px the four-element cluster (brand + Try free + Request-invite +
   lang-toggle) overflows the viewport by up to ~120px, so the compact wrap
   rules apply across the full 720px breakpoint. */
/* R29 (Amendment SPEC-11) — kill the 721–996px dead band (audit C1): at
   <=1053px the header compacts instead of overflowing — tighter nav-wrap gap
   (12px), lang-toggle shows flags only (codes hidden), the header Try-free
   button (`.nav-wrap .btn-secondary`, links brand.platformUrl per R12.2) is
   hidden (it stays in the hero + pricing), and .btn-sm padding is reduced one
   step. The band runs to 1053px because IT strings are longer: the full
   cluster (Try free + codes + Request-invite) measures 1054px in Italian
   (audit H3), so extending the compact band to <=1053px keeps every width
   up to there single-row and overflow-free; >=1054px shows the full cluster.
   (Breakpoint was bumped from the 1023px draft after the probe found IT home
   still overflowed +30px at 1024.) */
@media (max-width: 1053px) {
  .nav-wrap {
    gap: 12px;
  }

  .nav-actions {
    gap: 12px;
  }

  .lang-toggle .lang-code {
    display: none;
  }

  .nav-wrap .btn-secondary {
    display: none;
  }

  .btn-sm {
    padding: 8px 16px;
  }
}

@media (max-width: 720px) {
  .nav-wrap {
    gap: 10px;
    flex-wrap: wrap;
    height: auto;
    padding-block: 10px;
    /* R29.2 — the wrapped guard rows stay LEFT-aligned at every width: the
       header buttons never center (audit M2), any wrap is a tidy left stack.
       R28's centering block does NOT touch header descendants (verified: its
       selectors are all `.hero-inner`/`.section ...` content-only), so header
       centering can only come from here — hence the explicit flex-start. */
    justify-content: flex-start;
    text-align: left;
  }

  .lang-toggle .lang-code {
    display: none;
  }

  .brand-logo {
    width: 110px;
  }

  .btn-sm {
    padding: 8px 14px;
    font-size: 11px;
  }

  /* R38 (SPEC-12) — the burger toggle appears at <=720px: 44x44 transparent
     hit area, cyan lines (currentColor on the inline svg). */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-cyan);
    cursor: pointer;
  }

  .nav-toggle svg {
    display: block;
  }

  /* R38.2 — the visible row is logo LEFT + a right-aligned control group
     (Request-invite btn-sm + lang toggle + burger). margin-left:auto on the
     group pushes it right; the group wraps internally (flex-wrap +
     justify-content flex-end) so the buttons stay on the RIGHT at every
     width — never left, never centered. Try free stays in the panel only
     (the <=1053px rule already hides the header one). */
  .nav-actions {
    gap: 10px;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* R38 — the panel is absolutely positioned directly under the sticky
     header (top:100% = the header's own height), full-width, canvas surface
     with a hairline bottom border. */
  .mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* R23 - hero meter hands off to the SAME CSS wave as the header mark
   (logo-wave, 1.6s ease-in-out infinite, header stagger rhythm). Applied
   via .is-live after the JS boot entrance; gated by the decorative
   reduce/motion-on rules exactly like the header. */
.hero-meter.is-live .peak-bar {
  animation: logo-wave 1.6s ease-in-out infinite;
}

.hero-meter.is-live .peak-bar:nth-of-type(2) {
  animation-delay: 0.16s;
}

.hero-meter.is-live .peak-bar:nth-of-type(3) {
  animation-delay: 0.32s;
}

.hero-meter.is-live .peak-bar:nth-of-type(4) {
  animation-delay: 0.48s;
}

.hero-meter.is-live .peak-bar:nth-of-type(5) {
  animation-delay: 0.64s;
}

/* R25 + R28 — Amendment SPEC-10. R25: section rhythm tightens to the 8pt grid
   (64px desktop, 48px ≤768px; section[id] scroll-margin above is untouched).
   R28: on tablet/mobile the hero and section content center-align — text-align
   center on the hero inner + every direct container child, margin-inline auto
   on lead/copy blocks, centered flex action rows, centered card text in the
   card grids (pricing tiles, memory bars, capability cards, rule cards). The
   header is NOT touched (R12 guard: logo left, wrapped right cluster). Desktop
   ≥769px is unchanged. */
@media (max-width: 768px) {
  .section {
    padding-block: 48px;
  }

  .hero-inner,
  .section .container > * {
    text-align: center;
  }

  .section-lead,
  .platform-copy {
    margin-inline: auto;
  }

  .hero-actions,
  .battles-actions {
    justify-content: center;
  }

  /* R26 — the right footer cluster must wrap on mobile: without a width
     constraint .footer-meta (flex: none) keeps its max-content width and
     overflows the viewport instead of wrapping its items. */
  /* R30.2 — <=768px the cluster wraps full-width and stays LEFT-aligned in
     tidy rows (justify-content overrides the desktop flex-end + the
     margin-left:auto has no free space to absorb at width:100%). */
  .footer-meta {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .pricing-grid .pricing-tile,
  .shobi-bars .shobi-bar-row,
  .cap-grid .cap-card,
  .rule-list .rule-item {
    text-align: center;
  }
}

/* SPEC-11 verifier follow-up: footer email + builtOn link reach 44px targets */
.footer-email,
.footer-meta span a {
  display: inline-flex;
  align-items: center;
  padding-block: 11px;
}