/*
  Wu Ji Bi Fan 物極必反: the public site.

  The look is the app's training hall (App/Sources/DesignSystem/DojoTheme.swift):
  障子 paper walls between vermilion lacquer pillars, cards of pale planed wood,
  a gold 回紋 fret under the roof beam, and a dark wood floor for the footer.
  Everything is drawn in CSS, so there are no image files to load.

  Colours come from Palette.swift. Every text colour below was checked against
  the surface it sits on and holds at least 4.5:1.

  Spacing is one scale of 4 and 8 px steps (--s1 ... --s9). A value off the
  scale is a bug, as it is in the app.
*/

:root {
  /* Ink */
  --ink: #2A1F26;
  --ink-2: #5F4F57;

  /* Vermilion lacquer and rouge */
  --lacquer-light: #B8402F;
  --lacquer: #9A2E22;
  --lacquer-deep: #741F17;
  --rouge: #B5384B;
  --rouge-light: #C24358;
  --rouge-deep: #A83043;

  /* Gold */
  --gold: #F6CC6E;
  --gold-deep: #D3A24B;
  --gold-ink: #8A6A14;

  /* Wood */
  --board-light: #F7EAD2;
  --board: #EDD9B6;
  --board-edge: rgba(201, 167, 122, 0.55);
  --inset: #FCF6EC;
  --inset-edge: rgba(217, 195, 160, 0.7);
  --wood: #4B3228;
  --wood-mid: #4A3023;
  --wood-deep: #3C2820;
  --wood-darkest: #33201A;

  /* Shoji paper */
  --shoji-top: #FAF5EC;
  --shoji-bottom: #F3EADB;
  --paper: #FBF1E6;

  /* Tile tints (background / foreground) */
  --rouge-bg: #F9DFE3;  --rouge-fg: #A83B4E;
  --jade-bg: #DDEDE2;   --jade-fg: #3C7256;
  --sky-bg: #DCE8F6;    --sky-fg: #2F5F98;
  --plum-bg: #E9DFF2;   --plum-fg: #6A4B9A;
  --gold-bg: #FBEFCF;   --gold-fg: #6B5410;

  /* Type */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-han: "Noto Serif TC", "PingFang TC", "Songti TC", "Noto Serif CJK TC", serif;

  /* Spacing: 4 / 8 px steps */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* Radii, from Palette.swift */
  --r-pill: 999px;
  --r-hero: 24px;
  --r-card: 18px;
  --r-tile: 16px;
  --r-row: 14px;
  --r-chip: 12px;
  --r-small: 8px;

  --measure: 68ch;
  --page: 1120px;
  --gutter: var(--s4);

  --shadow-board: 0 4px 12px rgba(51, 32, 26, 0.16);

  /* Wood grain: faint wavy-looking lines along the board, made from three
     repeating gradients at slightly different angles so they cross and
     drift instead of reading as stripes. */
  --grain:
    repeating-linear-gradient(178.6deg, transparent 0 5px, rgba(74, 48, 35, 0.055) 5px 6px, transparent 6px 11px),
    repeating-linear-gradient(181.2deg, transparent 0 13px, rgba(74, 48, 35, 0.05) 13px 14px, transparent 14px 23px),
    repeating-linear-gradient(179.4deg, transparent 0 31px, rgba(74, 48, 35, 0.075) 31px 32px, transparent 32px 47px);

  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s4);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-x: hidden;
  /* The 障子 wall: paper, with the thin muntins of a sliding screen. */
  background-color: var(--shoji-top);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(74, 48, 35, 0.07) calc(25% - 1px) 25%),
    repeating-linear-gradient(180deg, transparent 0 94px, rgba(74, 48, 35, 0.07) 94px 96px),
    linear-gradient(180deg, var(--shoji-top), var(--shoji-bottom));
}

/* Two lacquered pillars, one at each edge, with a gold band near the head. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--s2);
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    linear-gradient(180deg, transparent 0 140px, var(--gold-deep) 140px 143px, transparent 143px),
    linear-gradient(90deg, var(--lacquer-light), var(--lacquer), var(--lacquer-deep));
}
body::before { left: 0; }
body::after { right: 0; }

main { flex: 1; position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 var(--s3);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 7vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
h3 { font-size: 1.125rem; }

p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
li + li { margin-top: var(--s1); }

a { color: var(--lacquer); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--lacquer);
  outline-offset: 3px;
  border-radius: 4px;
}

strong { font-weight: 700; }

/* Chinese text: set in the serif, and never mis-sized by the UI font. */
.han, [lang^="zh"] { font-family: var(--font-han); font-weight: 700; }
/* Keep a short Chinese phrase on one line instead of breaking between characters. */
[lang^="zh"] { word-break: keep-all; }
.han-light { font-family: var(--font-han); font-weight: 600; }

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

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 100;
  padding: var(--s2) var(--s4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-small);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--s2); }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  /* The gutter, plus room for the pillar at each edge. */
  padding: 0 calc(var(--gutter) + var(--s2));
}

.prose { max-width: var(--measure); }

/* ---------- The roof beam (header) ---------- */

.eave {
  /* Sticky from tablet width up; on a phone the beam scrolls away with the page. */
  position: relative;
  z-index: 10;
  background-image: var(--grain), linear-gradient(180deg, var(--board-light), var(--board));
  box-shadow: 0 3px 8px rgba(51, 32, 26, 0.18);
}

/* The gold 回紋 key-fret under the beam. */
.fret {
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold-ink) 0 1px, transparent 1px 12px, var(--gold-ink) 12px 13px, transparent 13px 16px),
    linear-gradient(180deg, transparent 0 3px, var(--gold-ink) 3px 4px, transparent 4px),
    var(--gold-deep);
  border-bottom: 1px solid rgba(60, 40, 32, 0.55);
}

.eave-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-small);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-han { font-family: var(--font-han); font-weight: 900; font-size: 1.25rem; letter-spacing: 0.04em; }
.brand-en { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

/* The red seal 印 */
.seal {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-small);
  background: linear-gradient(135deg, var(--rouge-light), var(--rouge-deep));
  color: #fff;
  font-family: var(--font-han);
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 4px rgba(51, 32, 26, 0.2);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li + li { margin-top: 0; }
.site-nav a {
  display: inline-block;
  padding: var(--s2);
  min-height: 44px;
  line-height: 28px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:hover { background: rgba(154, 46, 34, 0.08); color: var(--lacquer); }
.site-nav a[aria-current="page"] { background: var(--lacquer); color: #fff; }

/* ---------- Surfaces ---------- */

/* A planed board of pale wood: the surface every card sits on. */
.board {
  position: relative;
  background-color: var(--board);
  background-image: var(--grain), linear-gradient(135deg, var(--board-light), var(--board));
  border: 1px solid var(--board-edge);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-board);
  padding: var(--board-pad, var(--s5));
}

.inset {
  background: var(--inset);
  border: 1px solid var(--inset-edge);
  border-radius: var(--r-row);
  padding: var(--s4);
}

/* ---------- Sections ---------- */

.section { padding: var(--s8) 0; }
.section + .section { padding-top: 0; }

.section-head { margin-bottom: var(--s6); max-width: var(--measure); }
.section-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.section-head h2 .han { color: var(--lacquer); font-weight: 900; }
.section-head p { color: var(--ink-2); font-size: 1.0625rem; margin: 0; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lacquer);
}

.grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* ---------- Hero ---------- */

.hero { padding: var(--s7) 0 var(--s8); }
.hero-grid {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s4); }
.hero h1 .han {
  display: block;
  font-size: 1.35em;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--lacquer);
  margin-bottom: var(--s2);
}
.hero h1 .en { display: block; }
.hero .lede { font-size: 1.125rem; color: var(--ink-2); max-width: 36rem; }
.hero .meaning { margin-top: var(--s4); font-size: 0.9375rem; color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s5); }
.chips li + li { margin-top: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  background: var(--inset);
  border: 1px solid var(--inset-edge);
  font-size: 0.875rem;
  font-weight: 700;
}
.chip .han { color: var(--lacquer); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

/* The stage the 師父 stands on: a gold disc on a rouge field, as on the splash. */
.stage {
  position: relative;
  border-radius: var(--r-hero);
  padding: var(--s6) var(--s5) var(--s5);
  background: linear-gradient(160deg, var(--rouge-light), var(--rouge-deep));
  color: #fff;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--shadow-board);
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--s5);
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 204, 110, 0.95) 0 45%, rgba(246, 204, 110, 0.35) 62%, transparent 72%);
}
.stage .fret { position: absolute; left: 0; right: 0; bottom: 0; }
.stage-caption { position: relative; margin: var(--s2) 0 var(--s4); font-size: 0.9375rem; }
.stage-caption .han { display: block; font-size: 1.5rem; letter-spacing: 0.1em; }

/* ---------- The mascot ---------- */

.mascot-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.mascot-btn:focus-visible { outline-color: #fff; }
.mascot { width: 200px; height: 200px; }
.mascot .pose { transform-origin: 60px 60px; animation: float 2.1s ease-in-out infinite alternate; }
.mascot .leg-kick { opacity: 0; }
.mascot-btn:active .leg-idle,
.mascot-btn.kicking .leg-idle { opacity: 0; }
.mascot-btn:active .leg-kick,
.mascot-btn.kicking .leg-kick { opacity: 1; }

@keyframes float {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-5px) rotate(2deg); }
}

.mascot-small { width: 96px; height: 96px; }

/* ---------- Buttons and the store badge ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--lacquer-light), var(--lacquer));
  color: #fff;
  box-shadow: 0 4px 10px rgba(116, 31, 23, 0.3);
}
.btn-primary:hover { background: var(--lacquer); color: #fff; }
.btn-ghost {
  background: var(--inset);
  color: var(--lacquer);
  border: 1px solid var(--inset-edge);
}

/* Placeholder for Apple's official "Download on the App Store" badge. Replace
   the whole <a> with Apple's badge artwork at launch (see README). */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding: var(--s2) var(--s5) var(--s2) var(--s4);
  border-radius: var(--r-chip);
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid #A6A6A6;
  line-height: 1.1;
}
.store-badge:hover { background: #1a1a1a; }
.store-badge svg { width: 24px; height: 24px; flex: none; }
.store-badge small { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; }
.store-badge strong { display: block; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }

.note { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- Built for Taiwan: four pillars ---------- */

.pillar-card { display: flex; flex-direction: column; gap: var(--s2); }
.pillar-card h3 { margin: 0; }
.pillar-card p { margin: 0; color: var(--ink-2); }

.tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-row);
  font-family: var(--font-han);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
}
.tile-rouge { background: var(--rouge-bg); color: var(--rouge-fg); }
.tile-jade  { background: var(--jade-bg);  color: var(--jade-fg); }
.tile-sky   { background: var(--sky-bg);   color: var(--sky-fg); }
.tile-plum  { background: var(--plum-bg);  color: var(--plum-fg); }
.tile-gold  { background: var(--gold-bg);  color: var(--gold-fg); }

/* ---------- Belts ---------- */

.belts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s5);
}
.belts li + li { margin-top: 0; }
.belt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
}
.belt-swatch {
  position: relative;
  flex: none;
  margin-top: var(--s2);
  width: 44px;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(42, 31, 38, 0.35);
}
/* The knot */
.belt-swatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 12px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: inherit;
  box-shadow: inherit;
}
.belt-white  { background: #FFFDF8; }
.belt-yellow { background: var(--gold); }
.belt-green  { background: #3C7256; }
.belt-red    { background: var(--rouge); }
.belt-black  { background: var(--ink); }
.belt-name { display: flex; flex-direction: column; line-height: 1.25; }
.belt-name .han { font-size: 1.125rem; }
.belt-name small { color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; }
.belt-tag {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.tag-free { background: var(--jade-bg); color: var(--jade-fg); }
.tag-pro  { background: var(--gold-bg); color: var(--gold-fg); }

/* ---------- The Dojo: fourteen disciplines ---------- */

.discipline-group h3 { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s4); }
.discipline-group h3 .han { color: var(--lacquer); }
.discipline-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.discipline-list li + li { margin-top: 0; }
.discipline {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
}
.discipline .tile { width: 40px; height: 40px; font-size: 1.25rem; border-radius: var(--r-chip); }
.discipline strong { display: block; line-height: 1.3; }
.discipline span.desc { display: block; font-size: 0.875rem; color: var(--ink-2); line-height: 1.45; }

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

.feature { display: flex; flex-direction: column; gap: var(--s3); }
.feature-head { display: flex; align-items: center; gap: var(--s3); }
.feature-head h3 { margin: 0; }
.feature p { margin: 0; color: var(--ink-2); }
.feature ul { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.feature-wide { grid-column: 1 / -1; }

/* A pitch-contour card, after Tone Sparring's chart. */
.contour { width: 100%; height: auto; max-width: 360px; }
.contour-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 0.8125rem; color: var(--ink-2); margin: var(--s2) 0 0; }
.contour-legend span { white-space: nowrap; }
.contour-legend .contour-note { flex-basis: 100%; white-space: normal; }
figure { margin: 0; }

.tones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tones li + li { margin-top: 0; }
.tones li { display: flex; align-items: center; gap: var(--s2); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); padding: var(--s2); white-space: nowrap; }
.tones svg + span { white-space: normal; }
.tones svg { width: 40px; height: 20px; flex: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats li + li { margin-top: 0; }
.stat { text-align: center; padding: var(--s4) var(--s3); }
.stat b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--lacquer); font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.875rem; color: var(--ink-2); font-weight: 600; }

/* ---------- Dark wood band (privacy promise, footer) ---------- */

.dojo-floor {
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(20, 12, 9, 0.35) 25px 26px),
    var(--grain),
    linear-gradient(180deg, #5A3D30, var(--wood) 40%, var(--wood-deep));
  color: var(--paper);
}
.dojo-floor a { color: var(--gold); }
.dojo-floor :focus-visible { outline-color: var(--gold); }

.promise { border-radius: var(--r-hero); padding: var(--s6) var(--s5); box-shadow: var(--shadow-board); }
.promise h2 { color: var(--paper); }
.promise h2 .han { color: var(--gold); }
.promise .section-head p { color: #E8D3B0; }
.promise-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.promise-list li + li { margin-top: 0; }
.promise-list strong { display: block; color: var(--gold); margin-bottom: var(--s1); }
.promise-list span { color: #E8D3B0; font-size: 0.9375rem; }

/* ---------- Pricing ---------- */

.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--s4); }
.plan-head { display: flex; align-items: center; gap: var(--s3); }
.plan-head h3 { margin: 0; font-size: 1.375rem; }
.price { margin: 0; line-height: 1.2; }
.price b { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
.price span { color: var(--ink-2); font-weight: 600; }
.price-alt { margin: 0; color: var(--ink-2); font-weight: 600; }
.save {
  display: inline-block;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--jade-bg);
  color: var(--jade-fg);
  font-size: 0.8125rem;
  font-weight: 800;
}
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.checks li + li { margin-top: 0; }
.checks li { position: relative; padding-left: var(--s6); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat, var(--jade-fg);
}
.plan-pro { border: 2px solid var(--lacquer); }
.plan-pro .checks li::before { background-color: var(--lacquer); }
.plan-ribbon {
  position: absolute;
  top: calc(var(--s3) * -1);
  right: var(--s5);
  padding: 2px var(--s3);
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(51, 32, 26, 0.2);
}
.fine-print { margin-top: var(--s5); font-size: 0.875rem; color: var(--ink-2); max-width: var(--measure); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: var(--s3); max-width: 52rem; }
.faq details { padding: 0; }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 48px;
  padding: var(--s4) var(--s5);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  border-radius: var(--r-card);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lacquer);
  border-bottom: 2px solid var(--lacquer);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer { padding: 0 var(--s5) var(--s5); color: var(--ink-2); }
.faq .answer p:last-child, .faq .answer ul:last-child { margin-bottom: 0; }

/* ---------- Download band ---------- */

.download { text-align: center; }
.download .board { padding: var(--s7) var(--s5); display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.download h2 .han { display: block; color: var(--lacquer); font-weight: 900; letter-spacing: 0.1em; }
.download p { max-width: 36rem; margin: 0 auto; color: var(--ink-2); }

/* ---------- Document pages (privacy, support, terms) ---------- */

.doc { padding: var(--s7) 0 var(--s8); }
.doc-head { margin-bottom: var(--s6); }
.doc-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.doc-head h1 .han { color: var(--lacquer); font-weight: 900; }
.doc-head p { color: var(--ink-2); margin: 0; }
.doc-body { max-width: 48rem; }
.doc-body section { padding: var(--s5); margin-bottom: var(--s4); }
.doc-body h2 { font-size: 1.375rem; }
.doc-body h3 { margin-top: var(--s5); }
.doc-body section > :last-child { margin-bottom: 0; }
.doc-body ol li, .doc-body ul li { color: var(--ink); }

.toc { padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.toc h2 { font-size: 1rem; margin-bottom: var(--s2); }
.toc ol { margin: 0; columns: 2 14rem; column-gap: var(--s6); }
.toc li { break-inside: avoid; }

.summary-box { border-left: 4px solid var(--lacquer); }

.kbd-path {
  font-weight: 700;
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--inset-edge);
  border-radius: 6px;
  padding: 0 var(--s1);
  white-space: normal;
}

.not-found { text-align: center; padding: var(--s8) 0; }
.not-found .board { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s4); max-width: 36rem; padding: var(--s7) var(--s5); }
.not-found h1 .han { display: block; color: var(--lacquer); font-weight: 900; font-size: 1.4em; letter-spacing: 0.1em; }

/* ---------- Footer ---------- */

.site-footer { position: relative; z-index: 1; margin-top: var(--s8); padding: var(--s6) 0 var(--s7); }
.site-footer .fret { position: absolute; top: 0; left: 0; right: 0; }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); justify-content: space-between; padding-top: var(--s4); }
.footer-brand { display: flex; gap: var(--s3); align-items: center; }
.footer-brand p { margin: 0; color: #E8D3B0; font-size: 0.875rem; }
.footer-brand .han { color: var(--paper); font-size: 1.125rem; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.footer-nav li + li { margin-top: 0; }
.footer-nav a { display: inline-block; padding: var(--s2) 0; min-height: 44px; line-height: 28px; font-weight: 700; }
.footer-legal { margin-top: var(--s5); font-size: 0.8125rem; color: #E8D3B0; max-width: var(--measure); }
.footer-legal p { margin: 0 0 var(--s2); }

/* ---------- Wider screens ---------- */

@media (min-width: 720px) {
  html { scroll-padding-top: var(--s9); }
  :root { --gutter: var(--s6); --board-pad: var(--s6); }
  .eave { position: sticky; top: 0; }
  .site-nav a { padding: var(--s2) var(--s3); }
  .hero { padding: var(--s8) 0 var(--s9); }
  .hero-grid { grid-template-columns: 1.3fr 1fr; gap: var(--s7); }
  .promise { padding: var(--s7) var(--s6); }
  .section { padding: var(--s9) 0; }
  .doc-body section { padding: var(--s6); }
}

@media (min-width: 1024px) {
  .mascot { width: 240px; height: 240px; }
  .stage::before { width: 240px; height: 240px; }
}

/* ---------- Motion and print ---------- */

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

@media print {
  body::before, body::after, .eave, .site-footer .fret, .skip-link, .store-badge { display: none; }
  body { background: #fff; }
  .board, .dojo-floor { background: #fff; color: #000; box-shadow: none; border: 1px solid #ccc; }
}