/* ============================================================
   PALOMA — BASE
   Reset, layout container, section rhythm, and the shared
   structural primitives (keyline, buttons, card, badge, stat, quote).
   All values reference tokens.css — nothing hardcoded.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);
  color:var(--color-ink-75);
  font-family:var(--font-family-body);
  font-size:var(--font-size-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--color-blue);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- Focus (keyboard-only) ----
   :focus-visible skips the ring on a mouse/touch click and shows it for
   keyboard nav, so tabbing through the site always has a visible target
   without adding a ring around every click. ---- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px;border-radius:2px}

/* ---- Skip link ----
   Visually hidden until keyboard-focused, then drops into view above
   everything else. Lets keyboard users jump past the utility bar + nav
   (5+ tab stops) straight to each page's main content. Target is
   #main, the <main> element that wraps every page's content. ---- */
.skip-link{position:absolute;left:var(--space-4);top:-80px;z-index:100;background:var(--color-blue);color:#fff;padding:12px 20px;border-radius:var(--radius-button);font-family:var(--font-family-mono);font-size:var(--font-size-meta);letter-spacing:var(--track-label);text-transform:uppercase;transition:top .2s ease}
.skip-link:focus{top:var(--space-3)}

/* ---- Container: content maxes at 1440, fluid gutter ---- */
.container{max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---- Section rhythm ---- */
.section{padding-block:clamp(64px,9vw,var(--space-9))}   /* 120px top/bottom, fluid down */

/* ---- Buttons (44px tall — was 48px, dialed down in the 22 Sep size
   pass; 44px also happens to be the standard iOS/Android minimum
   touch-target size, so this wasn't purely a cosmetic call. 4px radius.) ---- */
.btn{display:inline-flex;align-items:center;gap:var(--space-1);height:44px;padding:10px var(--space-4);
  border-radius:var(--radius-button);border:1px solid transparent;cursor:pointer;
  font-family:var(--font-family-mono);text-transform:uppercase;letter-spacing:var(--track-button);
  font-size:var(--font-size-button-l);transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn--m{font-size:var(--font-size-button-m)}
.btn--ghost{color:var(--color-blue);border-color:var(--color-blue)}
.btn--ghost:hover{background:var(--color-blue);color:#fff}
.btn--amber{background:var(--color-amber);color:var(--color-ink);border-color:var(--color-blue)}
.btn--blue{background:var(--color-blue);color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ---- Card ---- */
.card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-5)}

/* ---- Badge (24px — was 26px, dialed down in the 22 Sep size pass;
   font-size now references --font-size-meta instead of its own
   magic number, since 13px was already effectively the same idea) ---- */
.badge{width:24px;height:24px;border-radius:var(--radius-badge);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-family-mono);font-size:var(--font-size-meta);color:#fff;background:var(--color-blue)}

/* ---- Keyline · A. Floating card (16px inset, rounded, blue border) ---- */
.keyline{background:var(--color-paper);padding:var(--space-3);border:1px solid var(--color-blue);border-radius:40px}
.keyline>*{border-radius:var(--radius-card)}

/* ---- Keyline · B. Keyline box (imagery): 8px inset, SQUARE stroke, AMBER corner crosshairs ---- */
.keyline-box{position:relative;border:1px solid var(--color-blue);border-radius:0;padding:var(--space-1)}
.keyline-box>.img{border-radius:var(--radius-tile);overflow:hidden}
.keyline-box .mk{position:absolute;width:64px;height:64px;pointer-events:none;z-index:2}
.keyline-box .mk::before,.keyline-box .mk::after{content:"";position:absolute;background:var(--color-amber)}
.keyline-box .mk::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.keyline-box .mk::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.keyline-box .mk.tl{top:-1px;left:-1px;transform:translate(-50%,-50%)}
.keyline-box .mk.tr{top:-1px;right:-1px;transform:translate(50%,-50%)}
.keyline-box .mk.bl{bottom:-1px;left:-1px;transform:translate(-50%,50%)}
.keyline-box .mk.br{bottom:-1px;right:-1px;transform:translate(50%,50%)}
/* Mobile: the crosshair marks are centered ON the box corners, so each one
   pokes half its size past the box edge. With the gutter pinned to 24px
   (tokens.css), the default 64px mark (32px out) overshoots the viewport
   edge by 8px and causes horizontal scroll — 40px marks (20px out) keep
   4px of clearance and still read as register marks. */
@media(max-width:640px){
  .keyline-box .mk{width:40px;height:40px}
}

/* ---- Stat block (coral) & testimonial (white) ---- */
.stat-block{background:var(--color-coral);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.stat-block .stat{color:#fff}
.stat-block .stat-label{font-family:var(--font-family-body);font-size:var(--font-size-lead);color:rgba(255,255,255,.5)}
.testimonial{background:var(--color-card);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;justify-content:space-between;min-height:400px}

/* ---- Tick divider (register-mark rule): two blue hairlines flanking a
   small rotated amber-stroked square. Recurs between sections (04, 06). ---- */
.tick-divider{display:flex;align-items:center;gap:var(--space-3);width:100%;max-width:760px;margin-inline:auto}
.tick-divider__line{flex:1;height:1px;background:var(--color-blue)}
.tick-divider__mark{width:7px;height:7px;border:1px solid var(--color-amber);transform:rotate(45deg);flex-shrink:0}

/* ---- Scroll reveal ----
   Shared across every page: apply `.reveal` to a section's main content
   wrapper (never to the section/background itself, so textures and
   full-bleed strips don't get clipped mid-transition by the pre-reveal
   transform). Pair with scripts/reveal.js, included once near the end of
   <body> — it adds `.is-visible` via IntersectionObserver the first time
   each `.reveal` element scrolls into view, then stops observing it (a
   one-time reveal, not a re-trigger on every scroll pass).
   `.reveal-stagger` is the same idea for a repeating row/grid (card grids,
   the team strip): the group itself fades up as one element, and its
   direct children then step in a few ms apart via nth-child delays.
   Deliberately more than a subtle fade: a slow lift + a touch of scale,
   drawn out long enough to actually watch happen rather than resolving
   before you notice it. Still calm/editorial, not bouncy — one direction,
   one easing, no overshoot. (No blur — plain fade + lift reads clean at
   this duration without the extra focus-pull.) */
.reveal{opacity:0;transform:translateY(56px) scale(.97);
  transition:opacity 1.8s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
.reveal-stagger{opacity:0;transform:translateY(56px) scale(.97);
  transition:opacity 1.8s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
.reveal-stagger.is-visible{opacity:1;transform:translateY(0) scale(1)}
.reveal-stagger>*{opacity:0;transform:translateY(34px) scale(.97);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
.reveal-stagger.is-visible>*{opacity:1;transform:translateY(0) scale(1)}
.reveal-stagger.is-visible>*:nth-child(1){transition-delay:0ms}
.reveal-stagger.is-visible>*:nth-child(2){transition-delay:150ms}
.reveal-stagger.is-visible>*:nth-child(3){transition-delay:300ms}
.reveal-stagger.is-visible>*:nth-child(4){transition-delay:450ms}
.reveal-stagger.is-visible>*:nth-child(5){transition-delay:600ms}
.reveal-stagger.is-visible>*:nth-child(n+6){transition-delay:750ms}

/* No drop shadows anywhere — depth comes from the keyline. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .reveal,.reveal-stagger,.reveal-stagger>*{opacity:1;transform:none;transition:none}
  .nav-mobile{transition:none}
}

/* ==========================================================================
   Shared chrome: nav + utility bar + footer
   Used on every page (moved out of index.html's page-level <style> once a
   second page — how-it-works.html — needed the exact same nav/footer without
   re-declaring the rules there and risking the two drifting apart).
   ========================================================================== */
.nav{position:sticky;top:0;z-index:40;background:rgba(248,245,240,.85);backdrop-filter:blur(10px);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-2)}
.nav__brand{display:flex;align-items:center}
.nav__brand img{display:block;width:150px;height:48px}
.nav__links{display:flex;align-items:center;gap:var(--space-4)}
.nav__link{font-family:var(--font-family-mono);font-size:14px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink-75)} /* sized up from the shared --font-size-meta (12px) on request — nav links only, other mono-meta text untouched */
.nav__link.is-active{color:var(--color-ink)} /* current-page link, per Figma: full ink instead of the default 75% */
.nav__link:hover{color:var(--color-blue)} /* declared after .is-active so hover still wins on specificity ties */
@media(max-width:860px){.nav__links .nav__link:not(:last-child){display:none}}

/* ---- Mobile nav: burger + dropdown ----
   Figma 5438:106698 (collapsed), 5439:111325 (scroll-revealed compact CTA,
   only when scrolled), 5441:126093 (open). Below 860px the two text links
   and the full-size .btn CTA (hidden below) give way to a bare burger
   icon; scripts/nav.js toggles .is-scrolled/.is-menu-open on .nav itself.
   .nav__burger and .nav-mobile are declared once, outside the media query,
   so JS can rely on their base (closed/hidden) state existing at any width;
   the media query only controls whether the mobile chrome is reachable. */
.nav__burger{display:none;width:44px;height:44px;margin-inline:-12px;padding:0;border:0;background:none;color:var(--color-ink-75);cursor:pointer}
.nav__cta{display:none} /* base hidden state — only the ≤860px block below ever reveals it */
.nav__burger-icon{display:block;width:20px;height:20px}
/* 44x44 tap target (icon stays 20px); the -12px side margins keep the icon on the same visual edge and gap as before */
.nav__burger-icon--close{display:none}
.nav.is-menu-open .nav__burger-icon--open{display:none}
.nav.is-menu-open .nav__burger-icon--close{display:block}
@media(max-width:860px){
  .nav__links>.btn{display:none}
  .nav__links{gap:var(--space-3)} /* 16px cluster gap once only the CTA + burger remain (Figma) vs 24px for the desktop link row */
  .nav__burger{display:inline-flex;align-items:center;justify-content:center}
  .nav__cta{display:none;font-family:var(--font-family-mono);font-size:13px;letter-spacing:.02em;
    text-transform:uppercase;color:#fff;background:var(--color-blue);padding:8px 12px;
    border-radius:var(--radius-button);text-decoration:none;white-space:nowrap}
  .nav.is-scrolled .nav__cta{display:inline-flex}
  /* Figma's open-menu top bar (5441:127076) drops back to just logo + close
     icon — no CTA pill — regardless of scroll position. Declared after the
     is-scrolled rule above so it wins the tie on specificity. */
  .nav.is-menu-open .nav__cta{display:none}
}
/* Same flat-blue logo/burger recolor trick as .footer__logo (see below):
   the whole bar flips to solid blue while the dropdown is open, so the
   ink-colored burger icon has to go white and the blue logo asset has to
   invert, exactly like it does on the blue footer. */
.nav.is-menu-open{background:var(--color-blue)}
.nav.is-menu-open .nav__burger{color:#fff}
.nav.is-menu-open .nav__brand img{filter:brightness(0) invert(1)}

/* position:absolute (anchored to .nav, which is position:sticky and so is
   itself a positioning context) rather than a normal-flow block: keeps
   .nav-mobile out of .nav's own box entirely, so .nav.is-menu-open's blue
   background only ever paints the ~64px bar, not the area behind this
   panel's rounded bottom corners — nested inside the bar's own flow, that
   background bled straight through the "cut" corners since parent and
   child were the same solid blue, which is why the radius wasn't visibly
   showing. Overlaying the page also means opening the menu no longer
   shoves hero content downward.
   Shown/hidden with opacity+transform+visibility (not display) so it can
   transition smoothly; visibility is delayed on the way out so the panel
   stays interactive/visible through its own closing animation, then
   actually leaves the tab order once it's done. */
.nav-mobile{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:center;gap:var(--space-3);
  background:var(--color-blue);padding:var(--space-6) var(--space-4) var(--space-3);
  border-radius:0 0 var(--radius-card) var(--radius-card);
  display:flex;opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.nav-mobile__link{font-family:var(--font-family-mono);font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
/* Figma's open-menu state doesn't distinguish the current page (both links
   render identical white) the way the desktop .nav__link.is-active does —
   left as a plain marker (no visual difference) rather than inventing a
   color Figma never specified. */
.nav-mobile__divider{width:100%;height:1px;background:rgba(255,255,255,.1)}
.nav-mobile .nav-mobile__cta{width:100%;justify-content:center}
.nav.is-menu-open .nav-mobile{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .22s ease,transform .22s ease}

/* ---- Footer ----
   Two parts now, per user request: the dove watermark sits on the page's
   own paper background, directly above the <footer> element rather than
   inside it — the dove frames bake in their own solid blue background, so
   on paper it reads as a floating blue panel with the bird on it, and the
   blue field below is reserved for the real footer content only.
   .footer itself is just that blue band: paper scalloped top transition,
   then the footer content (brand, link columns, bottom bar). */
.footer{background:var(--color-blue);position:relative;overflow:hidden}

/* ---- Pixel-art (Minecraft-style) transition — the footer's (and speedrun
   section's) paper-to-color edge, built to
   match a reference screenshot of a chunky, jagged pixel-terrain edge.
   A single 90x30-cell (360x120px) tile is a WHITE-on-transparent alpha
   mask — pure white shapes so it reads correctly whether a browser masks
   by alpha or by luminance — carrying the jagged boundary plus scattered
   speckle above it, generated procedurally (seamless sine-based
   undulation for the coastline curve, per-column integer jitter for the
   chunky pixel roughness, and a decaying-probability speckle field above
   the boundary). Inlined as a base64 data: URI (source PNG kept at
   assets/pixel-edge-tile.png for reference/regeneration) rather than
   referenced by url(../assets/...) — mask-image treats an external file
   as a cross-origin fetch, which Chrome/Safari block under a file://
   origin (opening the page directly instead of through a local server),
   throwing a CORS error and losing the mask entirely; a data: URI has no
   origin to block.
   The element itself paints var(--color-paper) as its base (covering the
   footer/section's own solid color for the band's height); a ::after
   layer then paints --dot-color (defaulting to the footer's blue) through
   the tile as a mask, so only the jagged/speckled shape is visible —
   --dot-color / --flip convention: one
   tile recolors for the speedrun section's coral and mirrors with
   scaleY(-1) for its bottom edge. image-rendering:pixelated stops the
   browser from smoothing the tile when it's scaled (e.g. retina),
   keeping every square edge crisp instead of blurred. */
.footer__pixel{position:relative;height:120px;background:var(--color-paper);overflow:hidden}
.footer__pixel::after{content:"";position:absolute;inset:0;background-color:var(--dot-color,var(--color-blue));
  -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAB4CAYAAADfRGj6AAADRElEQVR4nO3cUW7TQBRA0Rh1d7BcWF/4LaZgjTwTX7fn/EVqE9dxr0bPk2wPhjyfz5/vH2/b9uOqY7mD5/P5fP9427btTr//2Tgf9/Lt6gMA4GMCDRAl0ABRw/On1TOs0ef/ajO12t9bOx44Y/b1fPaelRU0QJRAA0QJNEDU8nnhfgbzeDy+/3EAk/e1monOdTRDq5/vu18vs/9/Xq32uYFXv99nX88KGiBKoAGiBBogaps9I7p6pnf3mePdfLbr56wF+2iXXs93m8l+tc9JWEEDRAk0QJRAA0Rtr57p1PdF7i2Y+c3eF546n6uNvl+rXT0TvXrG+sH78Wv3+L/X99XHv5p90ACflEADRAk0QNTL5z2rZ3CP3Qzs6Lsj9mozwdn7Rvdmz0zvNlMcvSdwdD5HXX3P4avdwzgye9/52e+ysYIGiBJogCiBBoi6fAZ9ZHTmefT7s2fQZ/+e2vGcfb7H4D7Yo9d79b7Z1dfT2Zn+kav3QV/9+ntX3wM5e31YQQNECTRAlEADRE3/Lo6jfaXDB7h4H2r99fcWzIynqn2/7+yZ8qjZM+ujn3+1q+8pnfXqz0WMsoIGiBJogCiBBoh6m71Pszaz/Wzq53P2d3/Mfr39z9fP55HZ/3+jPRh9P0ef7+j4r+7V6nscVtAAUQINECXQAFF/7YOGK7mHMWb1vvjV+4Bnv9/15xtlBQ0QJdAAUQINEGUGDfzTq2ewq/dx340VNECUQANECTRA1NvVBwB03W2Ge7fjPWIFDRAl0ABRAg0QZR80QJQVNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QNRvGmwX1GyGVnIAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAB4CAYAAADfRGj6AAADRElEQVR4nO3cUW7TQBRA0Rh1d7BcWF/4LaZgjTwTX7fn/EVqE9dxr0bPk2wPhjyfz5/vH2/b9uOqY7mD5/P5fP9427btTr//2Tgf9/Lt6gMA4GMCDRAl0ABRw/On1TOs0ef/ajO12t9bOx44Y/b1fPaelRU0QJRAA0QJNEDU8nnhfgbzeDy+/3EAk/e1monOdTRDq5/vu18vs/9/Xq32uYFXv99nX88KGiBKoAGiBBogaps9I7p6pnf3mePdfLbr56wF+2iXXs93m8l+tc9JWEEDRAk0QJRAA0Rtr57p1PdF7i2Y+c3eF546n6uNvl+rXT0TvXrG+sH78Wv3+L/X99XHv5p90ACflEADRAk0QNTL5z2rZ3CP3Qzs6Lsj9mozwdn7Rvdmz0zvNlMcvSdwdD5HXX3P4avdwzgye9/52e+ysYIGiBJogCiBBoi6fAZ9ZHTmefT7s2fQZ/+e2vGcfb7H4D7Yo9d79b7Z1dfT2Zn+kav3QV/9+ntX3wM5e31YQQNECTRAlEADRE3/Lo6jfaXDB7h4H2r99fcWzIynqn2/7+yZ8qjZM+ujn3+1q+8pnfXqz0WMsoIGiBJogCiBBoh6m71Pszaz/Wzq53P2d3/Mfr39z9fP55HZ/3+jPRh9P0ef7+j4r+7V6nscVtAAUQINECXQAFF/7YOGK7mHMWb1vvjV+4Bnv9/15xtlBQ0QJdAAUQINEGUGDfzTq2ewq/dx340VNECUQANECTRA1NvVBwB03W2Ge7fjPWIFDRAl0ABRAg0QZR80QJQVNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QJRAA0QJNECUQANECTRAlEADRAk0QNRvGmwX1GyGVnIAAAAASUVORK5CYII=);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:360px 120px;mask-size:360px 120px;
  -webkit-mask-position:bottom left;mask-position:bottom left;
  image-rendering:pixelated}
.footer__pixel--coral{--dot-color:#C34F35}
.footer__pixel--flip{transform:scaleY(-1)}

/* Frame-sequence dove: fixed 16:9 stage (matches the source frames'
   native aspect) so every frame from folded wings to full span sits at
   the same scale, anchored to the bottom like a bird landing just above
   the footer's scalloped edge below it. scripts/dove.js swaps the img's
   src between the preloaded frames as the section scrolls into/out of
   view. Margin, not padding, for breathing room — box-sizing is
   border-box site-wide, so padding here would eat into the aspect-ratio
   box instead of adding space around it. */
.footer__dove-wrap{position:relative;width:min(860px,72%);margin:var(--space-6) auto var(--space-8);
  aspect-ratio:16/9;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.footer__dove-wrap img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center}
.footer__content{padding-block:var(--space-9) var(--space-6);position:relative}
.footer__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.footer__brand{display:flex;flex-direction:column;gap:28px;max-width:440px}
.footer__logo{display:flex;align-items:center}
/* Same flat-blue logo asset as the nav, recolored to white for the blue
   footer bg: brightness(0) turns any opaque pixel black, invert(1) flips
   it to white, and the PNG's transparency is untouched either way. */
.footer__logo img{display:block;width:150px;height:48px;filter:brightness(0) invert(1)}
.footer__tagline{color:var(--color-card)}
.footer__links{display:flex;gap:var(--space-7);flex-wrap:wrap}
.footer__col{display:flex;flex-direction:column;gap:20px;width:200px}
.footer__col-title{color:var(--color-card)}
.footer__col-links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__col-links a{color:rgba(255,255,255,.75)}
.footer__col-links a:hover{color:var(--color-card)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);
  color:rgba(255,255,255,.75);font-family:var(--font-family-mono);font-size:var(--font-size-meta);letter-spacing:var(--track-label);text-transform:uppercase;flex-wrap:wrap}
.footer__utility{display:flex;gap:var(--space-4);align-items:center}
.footer__utility a{color:rgba(255,255,255,.75)}
.footer__utility a:hover{color:var(--color-card)}
@media(max-width:700px){.footer__row{flex-direction:column;align-items:flex-start}.footer__dove-wrap{width:92%}}

/* ==========================================================================
   FAQ list — collapse/expand (Round 90)
   Used identically on index.html and how-it-works.html. Was an always-open
   2x2 read ("no accordion JS ... four items don't need it"); now a single
   column of native <details>/<summary> rows — no JS, keyboard + screen-reader
   behaviour for free. `name="faq"` makes it exclusive where supported
   (opening one closes the other; older browsers just allow several open).
   The first item ships open so the pattern is obvious. The plus icon is two
   1px blue bars; the vertical one scales away when open. Height animates via
   ::details-content where supported (Chrome/Edge 131+); elsewhere it snaps.
   ========================================================================== */
.faq__inner{display:flex;flex-direction:column;gap:var(--space-8)}
.faq__head{display:flex;flex-direction:column;gap:var(--space-4);max-width:720px}
.faq__list{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border)}
.faq__item{border-top:1px solid var(--color-border)}
.faq__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-5);cursor:pointer;list-style:none}
.faq__summary::-webkit-details-marker{display:none}
.faq__summary:focus-visible{outline:2px solid var(--color-blue);outline-offset:4px;border-radius:4px}
.faq__q{transition:color .2s ease}
.faq__summary:hover .faq__q,.faq__item[open] .faq__q{color:var(--color-blue)}
.faq__icon{position:relative;flex-shrink:0;width:24px;height:24px;border:1px solid var(--color-blue);border-radius:var(--radius-badge);transition:background .2s ease}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--color-blue);transform:translate(-50%,-50%);transition:transform .25s ease,background .2s ease}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__icon{background:var(--color-blue)}
.faq__item[open] .faq__icon::before{background:#fff}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg);background:#fff}
.faq__a-wrap{padding-bottom:var(--space-5)}
.faq__a{max-width:760px}
@supports(selector(::details-content)){
  .faq__item{interpolate-size:allow-keywords}
  .faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s ease allow-discrete}
  .faq__item[open]::details-content{block-size:auto}
}
@media(prefers-reduced-motion:reduce){
  .faq__item::details-content,.faq__icon,.faq__icon::before,.faq__icon::after,.faq__q{transition:none !important}
}
}

/* ==========================================================================
   Legal document page (terms.html, privacy.html)
   A single readable column, numbered sections in the same "numbered
   document" spirit as the rest of the site, just prose-first since these
   are legal documents rather than a marketing argument. Shared here since
   both pages use the exact same layout.
   ========================================================================== */
.legal-hero{display:flex;flex-direction:column;gap:var(--space-3);max-width:800px}
.legal-hero__intro{margin-top:var(--space-3);max-width:760px}
.legal{max-width:800px;display:flex;flex-direction:column;margin-top:var(--space-8)}
.legal__item{padding-block:var(--space-6);border-top:1px solid var(--color-border)}
.legal__item:first-child{padding-top:0;border-top:none}
.legal__item-head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3)}
.legal__num{flex-shrink:0}
.legal__body p+p{margin-top:var(--space-3)}
.legal__body ul{list-style:disc;padding-left:var(--space-4);margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}
.legal__body p+ul,.legal__body ul+p{margin-top:var(--space-2)}
.legal__body ul+p{margin-top:var(--space-3)}
.legal__body li::marker{color:var(--color-blue)}
.legal__body a{color:var(--color-blue);text-decoration:underline}

/* ============================================================
   Mobile pass (≤640px) — added Round 89
   Shared across every page: tighter keyline frames, buttons that wrap
   instead of overflowing, a calmer footer tagline, and the dot
   indicators for scripts/carousel.js (hidden above 640px, where the
   carousels are plain grids/strips again).
   ============================================================ */
.carousel-dots{display:none}
@media(max-width:640px){
  /* Floating-card keyline: 16px inset -> 8px (the inset ate ~32px of an
     already 342px column). Outer radius stays = inner 24 + inset 8. */
  .keyline{padding:var(--space-1);border-radius:32px}

  /* .btn is a fixed 44px tall for single-line labels; on a phone the longer
     CTAs ("Learn more about the Speedrun →") wrap to two lines and spill out
     of that box. Let height grow (44px stays the floor/touch target), center
     the wrapped text, and step the large size down a notch. */
  .btn{height:auto;min-height:44px;max-width:100%;text-align:center;justify-content:center;line-height:1.25;padding-block:10px}
  .btn--l{font-size:16px}

  /* "stat"-size tagline (28px) was heavy against the 24px gutters */
  .footer__tagline{font-size:20px;line-height:1.3}

  .carousel-dots{display:flex;justify-content:center;align-items:center;gap:0;padding-top:var(--space-2)}
  .carousel-dots button{appearance:none;background:none;border:0;padding:0;width:20px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .carousel-dots button::before{content:"";width:8px;height:8px;border-radius:4px;border:1px solid var(--color-blue);background:transparent;transition:width .25s ease,background .25s ease,border-color .25s ease}
  .carousel-dots button[aria-current="true"]::before{width:20px;background:var(--color-blue)}
  .carousel-dots button:focus-visible{outline:2px solid var(--color-blue);outline-offset:-2px;border-radius:4px}
}
@media(prefers-reduced-motion:reduce){.carousel-dots button::before{transition:none}}