/* hula.mk public pages: download, support, privacy.
   Colour and type come from the app's own tokens (packages/tokens color.ts dark
   theme, Manrope + JetBrains Mono via expo-font) so the site and the product
   read as one thing.

   Two house rules carried over from the app: elevation is a step in background
   colour, never an outline or a shadow; and the accent has two values, a fill
   and a lifted text colour, because the fill does not hold contrast at body
   size. */

:root {
  --canvas: #171514;
  --surface: #221F1E;
  --raised: #2E2A28;
  --sunken: #100E0D;

  --ink: #F7F4F0;
  --ink-2: #AFA8A0;
  --ink-3: #8F8880;

  --flame: #E8502A;
  --flame-text: #F4744F;
  --flame-faint: #281A16;
  --flame-subtle: #341D17;
  --on-flame: #FFFFFF;

  --success: #4FC97E;
  --warn: #E8B36A;

  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --gutter: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The bar's glass is 100vw, which counts the scrollbar and would otherwise
     hand the page a horizontal scroll of about fifteen pixels. `clip`, not
     `hidden`: hidden makes a scroll container and would strand the sticky bar. */
  overflow-x: clip;
}

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

a { color: var(--flame-text); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--flame-text); outline-offset: 3px; border-radius: 5px; }

/* ═══════════ shell ═══════════ */

.shell { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
/* Centres on its own, so it can be a column INSIDE the shell rather than a
   second shell beside it — which is what broke sticky on the support page.

   The gutters come off the width because they used to be inside it: as
   `.shell.narrow` this was a border-box 660 that already contained the shell's
   own padding. Nested, that padding is the shell's, so keeping the bare 660
   would quietly widen the reading measure by 80px. */
.narrow { max-width: calc(660px - 2 * var(--gutter)); margin-inline: auto; }

/* The bar sits ABOVE the menu, not inside it, so the wordmark holds its
   position while the page behind it changes. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ═══════════ the glass ═══════════

   Its own layer rather than a background on the bar, because a background on
   the bar got two things wrong that no amount of tuning the tint would fix.

   It has to reach the WINDOW. `.top` is a child of a 1080px column, so a
   background on it was a floating band: on any wide screen the page scrolled
   past in full clarity either side of the blurred strip, which is what made it
   read as a mistake rather than as a material.

   And it has to STOP being there rather than stop. A translucent rectangle
   still has a hard bottom edge, and a line of text crossing it went from
   blurred to sharp in a single pixel. Masking the layer fades the blur itself
   out, so there is no edge to catch — the app's own EdgeBlur idiom, where a
   boundary dissolves instead of being drawn. Same reason the cards here carry
   neither border nor shadow. */
.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  /* Past the bar, so the fade has somewhere to happen. */
  bottom: -34px;
  /* Full-bleed out of the centred column, without a transform. */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* Tinted with the LIFTED greys, not the canvas.
     Tinting glass with the same colour as the page behind it is the same as
     having no glass: 80% of #171514 laid over #171514 is #171514, and the bar
     only ever showed itself where something coloured happened to pass under.
     A step UP the background ladder is what makes a pane read as a pane here,
     which is the same rule the cards follow. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--raised) var(--glass-tint), transparent) 0%,
    color-mix(in srgb, var(--surface) var(--glass-tint), transparent) 58%,
    transparent 100%
  );
  /* `brightness` is the other half of it: on a dark page frosted glass reads
     as glass because it LIFTS what is behind it, not just softens it. */
  backdrop-filter: blur(20px) saturate(180%) brightness(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.35);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 56%, transparent 100%);
  transition: opacity 260ms ease, background 260ms ease;
}

/* Without backdrop-filter (older Firefox) the tint alone still separates the
   bar from the page, and the mask still keeps it from drawing a line. */

/* At the top of the page there is nothing behind the bar to dissolve, so the
   glass is just a slightly wrong shade of the canvas it is sitting on. It
   fades in on the first few pixels of scroll instead. Gated on `.js` so a page
   with no script keeps the material rather than losing it forever. */
/* The bar is glass at rest too — a page that opens with a plain strip across
   the top is not translucent, it is just a strip. Scrolling deepens it rather
   than switching it on, because that is when there is something behind it
   worth holding back. Only the tint moves; the blur stays put, since animating
   a backdrop blur is where this starts to stutter. */
.top { --glass-tint: 40%; }
html.js body.scrolled .top { --glass-tint: 66%; }

/* Over the open menu there is nothing to dissolve — the overlay IS the canvas,
   and the glass over it read as a lighter band across the top.
   Both selectors, and last, because the scrolled rule above carries a class
   more than the plain one and would otherwise win: opening the menu while
   scrolled is the ordinary case, not the exception. */
body.menu-open .top::before,
html.js body.menu-open .top::before { opacity: 0; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
}
/* The real mark from brand/hula-mark.svg, inheriting the accent. */
.mark svg { width: 21px; height: auto; color: var(--flame); flex: none; }

/* ═══════════ the button that opens the menu ═══════════

   Two rules, not three. Three is the icon everyone draws; two reads as a
   considered mark at this size and crosses into an X with less to animate.
   The lines are the only thing in the bar besides the wordmark, so they carry
   the whole right-hand side and get a 44px target to do it in. */

.burger {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-right: -10px;   /* optical: the lines sit on the gutter, not the box */
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 6px;
  color: var(--ink);
}
/* Without JS it opens nothing, so it does not appear. The footer carries the
   same three destinations as plain links for exactly that case. */
html:not(.js) .burger { display: none; }

.burger .bar {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), width 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* The shorter line grows to meet the longer one, then both rotate: the mark
   resolves into a symmetrical X rather than two lines that happen to cross. */
.burger .bar + .bar { width: 17px; }
.burger[aria-expanded='true'] .bar { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded='true'] .bar + .bar { width: 26px; transform: translateY(-4px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--flame-text); outline-offset: 4px; border-radius: 8px; }

/* ═══════════ the menu ═══════════

   Full screen, and deliberately mostly empty. Three destinations do not need
   furniture: the links are set at display size and left-aligned to the same
   gutter as the wordmark above them, so the column reads as one line of
   thought running down the page.

   The bar stays above this (z-index) rather than being redrawn inside it, so
   the wordmark never moves between states — only what sits behind it changes. */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--canvas);
  /* One flourish: the warmth the flame would throw if it were behind the
     corner. Far too faint to read as a gradient, just enough that the field
     is not flat. */
  background-image: radial-gradient(120% 90% at 0% 0%, #241A17 0%, rgba(36, 26, 23, 0) 58%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: space-between;
}
.menu.open { visibility: visible; opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

.menu-inner {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(96px, 16vh, 168px) var(--gutter) clamp(40px, 8vh, 72px);
  display: grid;
  gap: clamp(48px, 10vh, 96px);
  align-content: space-between;
  min-height: 100dvh;
}

.menu-nav { display: grid; justify-items: start; gap: clamp(2px, 1vh, 10px); }

.menu-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(34px, 7.6vw, 54px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 180ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu-nav a:hover { color: var(--ink); transform: translateX(8px); }
.menu-nav a[aria-current='page'] { color: var(--ink); }
/* The page you are on, marked the way the app marks live state: a small filled
   dot in the accent, never a box or an underline. */
.menu-nav a[aria-current='page']::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--flame);
  align-self: center;
  flex: none;
}

/* Each link arrives a beat after the one above it. Small distance, short
   duration: the stagger should be felt rather than watched. */
@keyframes menu-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.menu.open .menu-nav a { animation: menu-rise 460ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.menu.open .menu-nav a:nth-child(1) { animation-delay: 60ms; }
.menu.open .menu-nav a:nth-child(2) { animation-delay: 120ms; }
.menu.open .menu-nav a:nth-child(3) { animation-delay: 180ms; }
.menu.open .menu-foot { animation: menu-rise 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 240ms backwards; }

.menu-foot { display: grid; justify-items: start; gap: 14px; }
.menu-foot .label { margin: 0; }

/* Language, as two words rather than two controls. The chosen one is simply
   the one that is lit, with the accent underscoring it — the same logic the
   dot uses above, so the menu has one way of saying "this one". */
.langpick { display: flex; align-items: center; gap: 22px; }
.langpick button {
  font: inherit;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 4px 0 8px;
  cursor: pointer;
  position: relative;
  transition: color 180ms ease;
}
.langpick button:hover { color: var(--ink-2); }
.langpick button[aria-pressed='true'] { color: var(--ink); }
.langpick button[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--flame);
}
.langpick button:focus-visible { outline: 2px solid var(--flame-text); outline-offset: 4px; border-radius: 4px; }

.menu-mail {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 180ms ease;
}
.menu-mail:hover { color: var(--flame-text); }

/* Screen-reader-only: gives the button a name in the reader's language,
   because the hidden-language copy is display:none and contributes nothing. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One language at a time. These rules only ever HIDE, never un-hide, so the
   visible block keeps whatever display its own rules gave it (the nav is a
   grid, the sections are blocks). With no JS neither rule matches and both
   languages stay in the document, stacked, which is a readable page rather
   than a broken one. */
html.js[data-lang='mk'] .lang-en { display: none; }
html.js[data-lang='en'] .lang-mk { display: none; }

/* ═══════════ type ═══════════ */

h1 {
  font-size: clamp(38px, 6.4vw, 64px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.standfirst {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 32em;
}

h2 {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}

h3 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame-text);
  margin: 0 0 18px;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
.small { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-3); }

section { padding: clamp(56px, 9vw, 104px) 0 0; }

/* ═══════════ hero ═══════════ */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
  padding-top: clamp(28px, 5vw, 56px);
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Two stores, one pair: same width, same height, same radius. They differ in
   weight, not in shape.

   Stacked rather than side by side, because side by side they do not fit. The
   hero column is 491px and "Download for Android" needs 207px of content, so
   two equal buttons in one row leave 16px of padding each — or, left to
   themselves, wrap the label onto a second line and stand 88px tall next to a
   61px badge. The alternative was shrinking the type to fit the column, which
   is the move this project already decided against. One column, 300px wide,
   holds both labels in both languages with room to spare. */
.get-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 300px;
}

.get {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* the pair is width-matched, so content centres */
  gap: 12px;
  background: var(--flame);
  color: var(--on-flame);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 17px 30px;
  border-radius: 14px;
  transition: transform 120ms ease, background 140ms ease;
}
.get:hover { background: #F05C36; }
.get:active { transform: translateY(1px); }
.get svg { flex: none; }

/* The App Store badge, in Apple's own black.

   This is the one element on the page that does not follow the house rules,
   and deliberately: it is Apple's mark, so it keeps Apple's black ground, its
   two-line lockup and its untranslated wording — the badge is not ours to
   restyle or to render into Macedonian. Sized to the same height as the
   Android button beside it so the pair still reads as a pair.

   No hairline: black on the #171514 canvas is the same kind of edge the app's
   own cards use, a step in ground rather than a drawn line, and the white
   lockup is what gives the shape away. Hover lifts the ground instead. */
.appstore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 61px;                /* .get: 17px type at 1.6, plus 17px either end */
  padding: 0 18px;
  border-radius: 14px;
  background: #000000;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 120ms ease, background 140ms ease;
}
.appstore:hover { background: #121212; }
.appstore:active { transform: translateY(1px); }
.appstore svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.appstore .lockup { display: flex; flex-direction: column; line-height: 1; }
.appstore .lockup small { font-size: 10.5px; letter-spacing: 0.01em; }
.appstore .lockup strong { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-top: 3px; }

.spec {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}

/* ═══════════ the phone ═══════════
   An exact replica rather than an impression of one. The screen is laid out at
   the app's real 390pt width using the app's real token values (Screen's s16
   gutter, QrCodeView's 256 square and 16 quiet zone, text('h1') at 28/34), then
   scaled down as a whole. Nothing inside is re-guessed at web sizes, so the
   proportions are the app's proportions by construction. */

.phone-wrap {
  display: flex;
  justify-content: center;
  /* The one width the whole device is derived from. Capped three ways: a
     natural size, the width of a narrow screen, and the height of a short one
     — a real iPhone is 2.16 times as tall as it is wide, so an unbounded width
     turns into an object too tall to see. */
  --phone-w: min(300px, 82vw, 39vh);
}

/* The device, in iPhone logical points.

   `--u` is one of those points expressed in CSS pixels: the body is 390pt of
   screen plus 14pt of bezel either side, so a point is the rendered width over
   418. Every number below is then the real value — 844 tall, a 47.33pt screen
   radius, a 125x36 island — and the whole thing holds its proportions at any
   size because they are all multiples of the same unit.

   The screen used to be 390x640 scaled by a constant 0.71282. Two things were
   wrong with that: 640 is not the height of any iPhone (390pt wide means
   844pt tall, which is a much taller object than 640 suggests), and a constant
   scale is only correct at the one width it was measured for — below it the
   390pt screen overflowed a narrower viewport and was quietly clipped. */
.phone {
  --u: calc(var(--phone-w) / 418);
  width: var(--phone-w);
  padding: calc(14 * var(--u));
  border-radius: calc(61.33 * var(--u));   /* screen radius + bezel */
  background: var(--raised);
  position: relative;
}

.viewport {
  width: 100%;                 /* = 390 * --u, the bezel having taken its 28 */
  aspect-ratio: 390 / 844;     /* iPhone 14/13/12, the 390pt-wide family */
  border-radius: calc(47.33 * var(--u));   /* the real screen corner */
  overflow: hidden;
  background: var(--canvas);
}

.screen {
  width: 100%;
  height: 100%;
  /* Safe areas, not guesses: 59pt clears the Dynamic Island, 34pt is the home
     indicator, and 16pt either side is Screen's own s16 gutter. */
  padding: calc(59 * var(--u)) calc(16 * var(--u)) calc(34 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));    /* space.s16 */
  font-size: calc(15 * var(--u));   /* text('body') */
}

.notch {
  position: absolute;
  top: calc(26 * var(--u));    /* 14pt of bezel, then 12pt down the screen */
  left: 50%;
  transform: translateX(-50%);
  width: calc(125 * var(--u));
  height: calc(36 * var(--u));
  background: var(--sunken);
  border-radius: 999px;
  z-index: 2;
}

/* The home indicator. Present on every device this shape, and its absence was
   the other thing that stopped the mockup reading as a phone. */
.home-bar {
  position: absolute;
  bottom: calc(22 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(140 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 999px;
  background: rgba(247, 244, 240, 0.3);
  z-index: 2;
}

/* GymContextHeader: the org name, text('bodyMedium'), and nothing else. */
.gymline {
  font-size: calc(15 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 calc(8 * var(--u));
}

/* Takes the space the header leaves and centres in it, which is where the pass
   sits on a real 844pt screen — not stacked against the top of it. */
.pass {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
}

/* PassIdentity: text('h1') 28/34 with mobile's -0.015em, then small tertiary. */
.pass-id { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.pass-name {
  font-size: calc(28 * var(--u));
  line-height: calc(34 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.42 * var(--u));
  color: var(--ink);
  margin: 0;
}
.pass-plan { font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink-3); margin: 0; }

.qr-block { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.qr {
  width: calc(256 * var(--u));
  height: calc(256 * var(--u));
  background: #FFFFFF;
  border-radius: calc(20 * var(--u));
  padding: calc(16 * var(--u));
}
.qr svg { display: block; width: 100%; height: 100%; }

.drain {
  width: calc(256 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: var(--raised);
  overflow: hidden;
}
.drain i {
  display: block; height: 100%; border-radius: 999px; background: var(--flame);
  transform-origin: left center; animation: drain 15s linear infinite;
}
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .drain i { animation: none; transform: scaleX(0.6); } }

/* Pill variant="status" with the success pair from tokens. */
.pill {
  font-size: calc(11 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.9 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: #1F2E23; color: #4FC97E;
}

/* text('caption') 12/16, secondary then tertiary, both centred. */
.cap { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); text-align: center; margin: 0; }
.cap-2 { color: var(--ink-2); }
.cap-3 { color: var(--ink-3); }

/* ═══════════ feature row ═══════════ */

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  border-radius: 22px;
  overflow: hidden;
}
@media (min-width: 720px) { .features { grid-template-columns: repeat(3, 1fr); } }

.feature { background: var(--surface); padding: 26px 24px; }
.feature .n { font-family: var(--mono); font-size: 12px; color: var(--flame-text); margin: 0 0 14px; }
.feature h3 { margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--ink-2); margin: 0; }

/* ═══════════ steps ═══════════ */

ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 2px; border-radius: 22px; overflow: hidden; }

ol.steps li {
  counter-increment: s;
  background: var(--surface);
  padding: 20px 24px 20px 62px;
  position: relative;
  font-size: 15.5px;
  color: var(--ink-2);
}
ol.steps li::before {
  content: counter(s);
  position: absolute;
  left: 24px;
  top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--flame-text);
}

/* ═══════════ panels, lists, disclosure ═══════════ */

.panel { background: var(--surface); border-radius: 22px; padding: clamp(22px, 3vw, 30px); }
.panel + .panel { margin-top: 12px; }

ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
ul.plain li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; }
ul.plain li::before {
  content: '';
  position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--flame-text);
}
ul.plain strong { color: var(--ink); font-weight: 600; }

details.qa { background: var(--surface); }
details.qa + details.qa { margin-top: 2px; }
.qa-group { border-radius: 22px; overflow: hidden; }

details.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 20px clamp(22px, 3vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--flame-text);
  border-bottom: 2px solid var(--flame-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
details.qa[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details.qa .qa-body { padding: 0 clamp(22px, 3vw, 28px) 22px; color: var(--ink-2); font-size: 15px; }

details.fine summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
details.fine summary::-webkit-details-marker { display: none; }
details.fine summary::before { content: '+ '; color: var(--flame-text); }
details.fine[open] summary::before { content: '\2013 '; }
.hash {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--ink-3);
  word-break: break-all;
  margin: 12px 0 0;
}

/* ═══════════ policy layout ═══════════ */

.doc { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 940px) { .doc { grid-template-columns: 200px 1fr; gap: 56px; align-items: start; } }

.toc { display: none; }
@media (min-width: 940px) {
  .toc { display: block; position: sticky; top: 32px; }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: c; }
  .toc a { display: block; font-size: 14px; color: var(--ink-3); text-decoration: none; transition: color 140ms ease; }
  .toc a:hover { color: var(--ink); }
}

.doc-section { padding: 0 0 clamp(36px, 5vw, 52px); scroll-margin-top: 28px; }
.doc-section h2 { font-size: clamp(21px, 2.4vw, 25px); margin-bottom: 14px; }
.doc-section p, .doc-section li { color: var(--ink-2); }

.dateline { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 0 0 24px; }

/* ═══════════ language break ═══════════ */

.language-break { margin-top: clamp(72px, 10vw, 120px); }
.language-break .banner {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame-text);
  margin: 0 0 28px;
}

/* ═══════════ foot ═══════════ */

.foot {
  margin-top: clamp(64px, 9vw, 110px);
  padding: 30px 0 56px;
  color: var(--ink-3);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.foot a { color: var(--ink-3); }
.foot a:hover { color: var(--ink); }

/* The same three destinations as the menu, as plain links. With JS off the
   burger is hidden and this is the only navigation on the page, so it carries
   every page rather than whichever one seemed related. */
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot nav a[aria-current='page'] { color: var(--ink-2); }