/* ============================================================
   AlphaBack — site shell
   ------------------------------------------------------------
   The chrome every page shares: background system, nav, footer,
   section rhythm, glass surfaces, cards, typography.

   Load order on every page:
       tokens.css  →  shell.css  →  <page>.css
   Page CSS may override; it may never redeclare a token.

   Responsive @media blocks live at the END of this file. Earlier
   placement gets beaten by later base rules — a lesson this repo
   has already learned the hard way.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. BASE
   ════════════════════════════════════════════════════════════ */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-6));
}
:root[data-motion="off"] html { scroll-behavior: auto; }

body {
  margin: 0;
  /* Transparent so the fixed z-index:-2 background layers, which paint
     above the html background but below body content, are visible. */
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(var(--accent-rgb), 0.26); color: #fff; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* Thin, unobtrusive scrollbar. Firefox first, then WebKit. */
* { scrollbar-width: thin; scrollbar-color: var(--bdr2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bdr); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bdr2); background-clip: content-box; }

.skip-link {
  position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: #fff; color: #0a0a0a;
  font-size: var(--fs-2); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   2. BACKGROUND SYSTEM

   Three fixed layers, all behind content, none interactive:

     -2  #bg3d       the WebGL price surface (bg3d.js)
     -1  #bg-veil    vignette + grain, guarantees text contrast
      0  page content

   #bg3d is empty until bg3d.js decides the device deserves it.
   The veil renders regardless, so a page with no WebGL still has
   a deliberate background rather than a flat void.
   ════════════════════════════════════════════════════════════ */

#bg3d {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  /* The still that stands in for the live scene on lite / mobile /
     reduced-motion / no-WebGL. bg3d.js swaps in a canvas above it. */
  background: radial-gradient(120% 80% at 50% -10%, #0d1018 0%, #000 62%);
}
#bg3d canvas { width: 100%; height: 100%; display: block; }

#bg-veil {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
}
/* Vignette. Deliberately light: it exists to hold the nav and the top of
   the hero above the field, not to hide the field. Weighted to the top
   third, because that is where text density is highest and where the
   scene's horizon is brightest. */
#bg-veil::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(130% 92% at 50% 6%, transparent 46%, rgba(0,0,0,0.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.12) 16%, transparent 34%);
}
/* Grain — kills the banding that any large dark gradient produces on
   8-bit displays, and gives the black some tooth. */
#bg-veil::after {
  content: ''; position: absolute; inset: 0;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
html.lite #bg-veil::after { display: none; }
:root[data-theme="light"] #bg3d { background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #eef0f4 62%); }
:root[data-theme="light"] #bg-veil::before {
  background: radial-gradient(140% 100% at 50% 0%, transparent 40%, rgba(10,12,16,0.06) 100%);
}
:root[data-theme="light"] #bg-veil::after { display: none; }

/* ════════════════════════════════════════════════════════════
   3. GLASS

   .glass is a surface, not a look-at-me effect. The tell that
   separates real glass from the sticker version is the EDGE: a
   1px ring lit from the top-left that dies to nothing at the
   bottom-right, as though a light source sits above and behind
   the viewer. A uniform `border: 1px solid` never reads as glass.
   ════════════════════════════════════════════════════════════ */

.glass {
  position: relative;
  background: rgba(255,255,255,0.045);
  -webkit-backdrop-filter: var(--glass-2);
  backdrop-filter: var(--glass-2);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.75);
}
.glass::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.glass-1 { -webkit-backdrop-filter: var(--glass-1); backdrop-filter: var(--glass-1); }
.glass-3 { -webkit-backdrop-filter: var(--glass-3); backdrop-filter: var(--glass-3); }

/* With blur disabled the panel would read as a flat grey rectangle,
   so lean harder on fill and ring to keep the elevation legible. */
html.lite .glass { background: rgba(255,255,255,0.07); }

:root[data-theme="light"] .glass {
  background: rgba(255,255,255,0.68);
  box-shadow: 0 24px 48px -22px rgba(10,12,16,0.20);
}

/* ════════════════════════════════════════════════════════════
   4. LAYOUT
   ════════════════════════════════════════════════════════════ */

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

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: calc(var(--section-y) * 0.55); }

/* Hairline that fades out at both ends — a flat 1px rule across a
   1180px column always looks like a mistake at this scale. */
.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--bdr) 18%, var(--bdr) 82%, transparent);
}

.section-head { max-width: 760px; margin-bottom: var(--sp-8); }
.section-head.is-center { margin-inline: auto; text-align: center; }

/* Eyebrow: mono, uppercase, with a short leading rule. Reads as a
   spec label rather than decoration. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--fs-1); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px;
  background: var(--accent-line);
}
.is-center .eyebrow { justify-content: center; }
.is-center .eyebrow::after {
  content: ''; width: 26px; height: 1px; background: var(--accent-line);
}

/* ════════════════════════════════════════════════════════════
   5. TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */

.h1, .h2, .h3, .h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-hero); }
.h2 { font-size: clamp(30px, 4vw, var(--fs-7)); line-height: 1.1; }
.h3 { font-size: var(--fs-5); line-height: 1.2; letter-spacing: -0.028em; }
.h4 { font-size: var(--fs-4); line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; }

/* Headline emphasis stays monochrome — a vertical fade to translucent
   white. Colour in a headline is the fastest way to look like a
   template; a luminance shift does the same job with more restraint. */
.h1 em, .h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #fff 8%, rgba(255,255,255,0.48) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-theme="light"] .h1 em,
:root[data-theme="light"] .h2 em {
  background: linear-gradient(180deg, #0d0f13 10%, rgba(13,15,19,0.55) 100%);
  -webkit-background-clip: text; background-clip: text;
}

.lead {
  font-size: var(--fs-4); line-height: 1.62;
  color: var(--t2); margin: var(--sp-5) 0 0;
  max-width: 62ch; text-wrap: pretty;
}
.sub {
  font-size: var(--fs-3); line-height: 1.68;
  color: var(--t2); margin: var(--sp-4) 0 0;
  max-width: 64ch; text-wrap: pretty;
}
.is-center .lead, .is-center .sub { margin-inline: auto; }

.mono {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Inline link — underline sits below the baseline and thickens on
   hover, rather than a colour change. */
.link {
  color: var(--text); text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px; background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size var(--dur) var(--ease-out), color var(--dur) ease;
}
.link:hover { background-size: 100% 2px; color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   6. NAV — floating glass bar

   Detached from the viewport edge on purpose: the moving field
   shows above AND below it, which is the whole argument for the
   blur. A nav flush to the top has nothing behind it to refract.
   ════════════════════════════════════════════════════════════ */

.nav {
  position: fixed; z-index: 100;
  top: var(--sp-3); left: 50%; transform: translateX(-50%);
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--maxw);
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-5);
  padding-inline: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--glass-1);
  backdrop-filter: var(--glass-1);
  transition: box-shadow var(--dur) ease, background var(--dur) ease;
}
.nav::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.nav.is-stuck { box-shadow: 0 18px 40px -22px rgba(0,0,0,0.9); }

/* Page content clears the floating bar. */
.page-top { padding-top: calc(var(--nav-h) + var(--sp-6)); }

/* gap:0 is deliberate — the wordmark is a bare text node plus <em>, and any
   flex gap would open a space inside "AlphaBack". The mark spaces itself. */
.brand {
  display: inline-flex; align-items: center; gap: 0;
  padding: var(--sp-2) var(--sp-3);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.04em;
  color: var(--text); text-decoration: none;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.brand em { font-style: normal; color: var(--t3); transition: color var(--dur) ease; }
.brand:hover em { color: var(--accent); }
.brand-mark { width: 20px; height: 20px; flex-shrink: 0; margin-right: var(--sp-2); }

.nav-links {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-inline: auto;
}
.nav-link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-2); font-weight: 500;
  color: var(--t2); text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) ease, background var(--dur) ease;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-link.is-active { color: var(--text); }
/* Active marker is a 3px underline in the accent, not a filled pill —
   it survives on top of a moving background without adding weight. */
.nav-link.is-active::after {
  content: ''; position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 2px; height: 2px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.nav-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.nav-signin {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-2); font-weight: 500;
  color: var(--t2); text-decoration: none;
  transition: color var(--dur) ease;
}
.nav-signin:hover { color: var(--text); }

.nav-burger {
  display: none;
  width: var(--h-sm); height: var(--h-sm);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-burger span {
  display: block; width: 17px; height: 1.5px;
  background: var(--text); border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) ease;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile drawer — hangs off the floating bar, same glass, same ring. */
.nav-drawer {
  position: absolute; top: calc(100% + var(--sp-2)); left: 0; right: 0;
  display: none; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), rgba(6,6,8,0.86);
  -webkit-backdrop-filter: var(--glass-1);
  backdrop-filter: var(--glass-1);
  box-shadow: 0 28px 60px -24px rgba(0,0,0,0.92);
}
.nav-drawer.is-open { display: flex; animation: shellDrop var(--dur) var(--ease-out) both; }
.nav-drawer::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.nav-drawer a {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-3); font-weight: 500;
  color: var(--t2); text-decoration: none;
}
.nav-drawer a:hover, .nav-drawer a.is-active { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-drawer-actions {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-2); padding-top: var(--sp-3);
  border-top: 1px solid var(--bdr);
}
.nav-drawer-actions .btn { width: 100%; }

@keyframes shellDrop {
  from { opacity: 0; transform: translateY(-8px); }
  /* No transform in the final frame: a pinned transform with
     fill-mode:both permanently overrides the tilt engine. */
  to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   7. CARDS
   ════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: var(--glass-2);
  backdrop-filter: var(--glass-2);
  box-shadow: 0 20px 44px -24px rgba(0,0,0,0.8);
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) ease,
              box-shadow var(--dur) ease;
}
.card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  transition: opacity var(--dur) ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.065);
  box-shadow: 0 30px 56px -26px rgba(0,0,0,0.9);
}
html.lite .card { background: rgba(255,255,255,0.065); }
:root[data-theme="light"] .card { background: rgba(255,255,255,0.72); box-shadow: 0 20px 44px -26px rgba(10,12,16,0.18); }

.card-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.card-icon svg { width: 18px; height: 18px; }

.card-title { font-family: 'Manrope', sans-serif; font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--sp-3); }
.card-body  { font-size: var(--fs-2); line-height: 1.68; color: var(--t2); margin: 0; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ════════════════════════════════════════════════════════════
   8. SMALL COMPONENTS
   ════════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--h-sm); padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--bdr);
  font-size: var(--fs-1); font-weight: 500; color: var(--t2);
  white-space: nowrap;
}
.pill-accent { color: var(--accent); background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-line); }

.tag {
  display: inline-block;
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-0); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t3); background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--bdr);
}

.stat-num {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-6); font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-lbl {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t3); margin-top: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════
   8b. CONTENT — long-form blocks shared by about / docs / legal
   ════════════════════════════════════════════════════════════ */

/* Heading left, argument right. The heading sticks while the copy
   scrolls, so the reader never loses what the paragraph belongs to. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-8) var(--sp-9);
  align-items: start;
}
.split > :first-child { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); }
.split .h2 { max-width: 15ch; }

.prose { font-size: var(--fs-3); line-height: 1.78; color: var(--t2); }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { margin: 0; text-wrap: pretty; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.prose a:hover { text-decoration-color: var(--accent); }

/* Inline emphasis that is a surface, not a colour — the phrase sits in
   its own faint pane so it reads as lifted rather than shouted. */
.mark {
  color: var(--text);
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

.quote { margin: 0; padding: var(--sp-7) 0; text-align: center; }
.quote blockquote {
  margin: 0 auto; max-width: 22ch;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.035em;
  color: var(--text); text-wrap: balance;
}
.quote figcaption { margin-top: var(--sp-5); font-size: var(--fs-2); color: var(--t3); }

/* Checklist without the checkmarks: a short accent rule per item. */
.nolist { list-style: none; margin: 0; padding: 0; }
.nolist li {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-6);
  font-size: var(--fs-3); line-height: 1.72; color: var(--t2);
}
.nolist li + li { padding-top: var(--sp-5); border-top: 1px solid var(--t4); }
.nolist li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 14px; height: 1px; background: var(--accent);
}
.nolist li + li::before { top: calc(var(--sp-5) + 0.72em); }
.nolist strong { color: var(--text); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   9. FOOTER + CLOSING CTA
   ════════════════════════════════════════════════════════════ */

.foot-cta { padding-block: var(--section-y); text-align: center; }
.foot-cta .h2 { max-width: 18ch; margin-inline: auto; }
.foot-cta .sub { margin-inline: auto; }
.foot-cta-actions {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-3); margin-top: var(--sp-7);
}

.foot { padding-block: var(--sp-9) var(--sp-6); position: relative; }
.foot::before {
  content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bdr) 18%, var(--bdr) 82%, transparent);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0,1fr));
  gap: var(--sp-8) var(--sp-6);
}
.foot-tagline { font-size: var(--fs-2); line-height: 1.7; color: var(--t3); margin: var(--sp-4) 0 0; max-width: 30ch; }
.foot-col-head {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t3); margin-bottom: var(--sp-4);
}
.foot-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.foot-links a {
  font-size: var(--fs-2); color: var(--t2); text-decoration: none;
  width: fit-content;
  transition: color var(--dur) ease;
}
.foot-links a:hover { color: var(--text); }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--t4);
}
.foot-copy { font-size: var(--fs-2); color: var(--t3); }
.foot-socials { display: flex; gap: var(--sp-2); }
.foot-social {
  width: var(--h-sm); height: var(--h-sm);
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--t3);
  box-shadow: inset 0 0 0 1px var(--bdr);
  transition: color var(--dur) ease, background var(--dur) ease;
}
.foot-social:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Risk disclosure. Backtests are not predictions and the footer of a
   trading product is where that has to be said plainly. */
.foot-disclaimer {
  margin-top: var(--sp-5);
  font-size: var(--fs-1); line-height: 1.65; color: var(--t3);
  max-width: 92ch;
}

/* ════════════════════════════════════════════════════════════
   10. SCROLL REVEAL
   Opacity + transform only. Driven by IntersectionObserver in
   shell.js, which adds .is-in. No JS → .reveal never hides.
   ════════════════════════════════════════════════════════════ */

html.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
html.has-js .reveal.is-in { opacity: 1; transform: none; }
html.lite .reveal, :root[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }

/* ════════════════════════════════════════════════════════════
   11. UTILITIES
   ════════════════════════════════════════════════════════════ */

.center     { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ════════════════════════════════════════════════════════════
   12. RESPONSIVE — must stay last
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .nav-signin { display: none; }
  .nav-burger { display: flex; }
  .nav { gap: var(--sp-3); }
  .nav-links + .nav-actions { margin-left: auto; }
  .nav-actions { margin-left: auto; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); }
  .split > :first-child { position: static; }
  .split .h2 { max-width: 20ch; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-5); }
  .card { padding: var(--sp-5); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .nav { top: var(--sp-2); width: calc(100% - var(--sp-4) * 2); }
  .foot-cta-actions .btn { width: 100%; }
}