/* ==========================================================================
   QT QUANTAMENTAL
   --------------------------------------------------------------------------
   Light technical system: plain white ground, blue signal colour, blue
   micro-labels with a rule, corner ticks on cards, and deep-navy pills.
   The hero keeps the dark video and hands off to white.
   Sections: tokens · reset · layout · header · hero · blocks · footer ·
             responsive · motion
   ========================================================================== */

/* ─────────────────────────── 1. Design tokens ─────────────────────────── */
:root {
  --bg:         #FFFFFF;
  --bg-2:       #F5F8FD;
  --surface:    #FFFFFF;
  --surface-2:  #F7FAFF;

  --line:       #E4EBF6;
  --line-2:     #CBDAEF;
  --line-soft:  rgba(26, 109, 255, .07);

  --text:       #0B1220;
  --text-2:     #5A6A82;
  --text-3:     #8FA0B8;

  --accent:     #1A6DFF;
  --accent-2:   #0B57D0;
  --accent-dim: rgba(26, 109, 255, .38);
  --accent-bg:  #EEF4FF;

  --navy:       #0F1E36;   /* solid pill */
  --shadow:     0 2px 10px rgba(15, 30, 54, .04), 0 12px 32px rgba(15, 30, 54, .06);
  --shadow-lg:  0 4px 14px rgba(15, 30, 54, .05), 0 22px 60px rgba(15, 30, 54, .10);
  --glow:       0 0 0 1px rgba(26, 109, 255, .18), 0 10px 30px rgba(26, 109, 255, .12);
  --ease:       cubic-bezier(.22, 1, .36, 1);

  --shell:      1240px;
  --gutter:     clamp(20px, 5vw, 60px);
  --r-card:     12px;
  --r-md:       9px;
  --r-sm:       6px;
  --pill:       999px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

html[lang^="zh"] { --font: var(--font-zh); }

/* ────────────────────────────── 2. Reset ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* key term picked out of a heading, as in "什么是 QT Quantamental?" */
.hl { color: var(--accent); }

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 300;
  padding: 10px 18px; border-radius: var(--pill);
  background: var(--accent); color: #fff; font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ────────────────────────────── 3. Layout ────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.band { position: relative; overflow: clip; }
/* Band ground — plain white. The hairline between sections is what separates
   them now, so it carries the whole job. */
.band-light { background-color: var(--bg); }

.section { padding-block: clamp(76px, 9vw, 140px); scroll-margin-top: 76px; }

.section + .section::before,
.partners-band::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--shell));
  /* a dimension line: hairline with a tick dropped at each end */
  height: 7px;
  background:
    linear-gradient(90deg, transparent, var(--line-2) 24%, var(--accent-dim) 50%, var(--line-2) 76%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--accent-dim) 0 0) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--accent-dim) 0 0) 100% 0 / 1px 7px no-repeat;
  z-index: 2;
}

.section-title {
  font-size: clamp(1.8rem, 4.1vw, 3rem);
  font-weight: 800; line-height: 1.18; letter-spacing: -.03em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.stack-title { display: flex; flex-direction: column; }
.muted-line { color: var(--text-3); }

.section-intro {
  max-width: 58ch;
  text-wrap: pretty;
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  color: var(--text-2);
  margin-bottom: 44px;
}
.section-intro.center { margin-inline: auto; }

.section-body { max-width: 72ch; color: var(--text-2); margin-bottom: 18px; }
.section-body.center { margin-inline: auto; text-align: center; }

.head-center { text-align: center; }
.head-center .section-intro { margin-inline: auto; }

/* blue micro-label followed by a rule — the signature label of this system */
.block-label {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin: 48px 0 22px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}
.block-label:not(.center) { padding-left: 14px; }
.block-label:not(.center)::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  background: var(--accent);
}
.block-label::after {
  content: "";
  flex: 0 0 46px; height: 1px;
  background: var(--accent-dim);
}
.block-label.center { justify-content: center; }
.block-label.center::before {
  content: "";
  flex: 0 0 46px; height: 1px;
  background: var(--accent-dim);
}

.statement {
  position: relative;
  max-width: 56ch;
  margin: 60px auto 0;
  padding-top: 36px;
  text-align: center;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  font-weight: 700; line-height: 1.45; letter-spacing: -.02em;
}
.statement::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ─────────────────────────────── 4. Pills ─────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border-radius: var(--pill);
  font-size: .875rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.pill-arrow { font-size: .95em; transition: transform .25s var(--ease); }
.pill:hover .pill-arrow { transform: translateX(3px); }

/* on the dark hero */
.pill-solid { background: #fff; color: var(--navy); }
.pill-solid:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.pill-outline-dark { border: 1px solid rgba(255, 255, 255, .34); color: #fff; }
.pill-outline-dark:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }

/* on the light body — deep navy plate, as in the reference shot */
.pill-solid-dark { background: var(--navy); color: #fff; }
.pill-solid-dark:hover { background: #17304f; transform: translateY(-1px); box-shadow: var(--shadow); }

.pill-outline { border: 1px solid var(--line-2); color: var(--text); background: #fff; }
.pill-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--glow); }
.pill-center { display: flex; width: max-content; margin: 40px auto 0; }

/* ─────────────────────────────── 5. Header ─────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  color: #fff;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* scroll position, drawn as a hairline across the bottom of the header.
   main.js only writes the --scroll-p fraction; the scale happens on the GPU. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #6BA4FF);
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* over the hero video it is light-on-dark; once scrolled it flips to the light sheet */
.site-header.scrolled {
  /* opaque instead of a translucent backdrop blur: while the header crosses the
     hero the video behind it changes 25 times a second, and a backdrop-filter
     re-blurs that strip every frame. Any translucency without the blur lets the
     white headline ghost through, so it is simply solid. */
  background: var(--bg);
  border-bottom-color: var(--line);
  color: var(--text);
}

.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 70px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--chip-bg);
  color: var(--chip-ink);
}
.brand-mark svg { width: 18px; height: 18px; }
.site-header .brand-mark { --chip-bg: #fff; --chip-ink: var(--navy); }
.site-header.scrolled .brand-mark,
.site-footer .brand-mark { --chip-bg: var(--navy); --chip-ink: #fff; }

.brand-text { font-size: .9rem; font-weight: 800; letter-spacing: -.01em; }

.site-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: clamp(14px, 1.9vw, 30px);
}
.nav-link {
  position: relative;
  padding-block: 6px;
  font-size: .87rem; font-weight: 500;
  color: rgba(255, 255, 255, .72);
}
.site-header.scrolled .nav-link { color: var(--text-2); }
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-link.is-current { color: #fff; }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.is-current { color: var(--accent); }
.nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, .28);
}
.site-header.scrolled .lang-switch { border-color: var(--line-2); }
.lang-switch button {
  padding: 6px 14px; border-radius: var(--pill);
  font-size: .78rem; font-weight: 600;
  color: rgba(255, 255, 255, .62);
  transition: color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.site-header.scrolled .lang-switch button { color: var(--text-3); }
.lang-switch button.is-active { background: var(--navy); color: #fff; }
.site-header:not(.scrolled) .lang-switch button.is-active { background: #fff; color: var(--navy); }

.header-cta { padding: 10px 20px; font-size: .82rem; }
.site-header:not(.scrolled) .header-cta { background: #fff; color: var(--navy); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-sm);
}
.site-header.scrolled .nav-toggle { border-color: var(--line-2); }
.nav-toggle span {
  display: block; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ──────────────────────────────── 6. Hero ──────────────────────────────── */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh;
  padding-block: clamp(130px, 20vh, 220px) clamp(90px, 14vh, 150px);
  background: #04050a;
  color: #fff;
  overflow: hidden;
}
.hero-visual {
  position: absolute; inset: 0;
  pointer-events: none;
  background: #04050a url(../video/hero-poster.jpg?v=63706862) center/cover no-repeat;
}
.hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.hero-video.is-ready { opacity: 1; }
/* protect the copy, then hand off to the white page below */
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 5, 10, .88) 0%, rgba(4, 5, 10, .42) 26%, rgba(4, 5, 10, .30) 70%, var(--bg) 100%),
    linear-gradient(90deg, rgba(4, 5, 10, .86) 0%, rgba(4, 5, 10, .62) 28%, rgba(4, 5, 10, .24) 50%, transparent 78%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-title {
  display: flex; flex-direction: column;
  font-size: clamp(1.75rem, 4.2vw, 3.1rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.035em;
  max-width: min(100%, 800px);
}
.hero-sub { margin-top: 22px; max-width: 44ch; font-size: clamp(.95rem, 1.5vw, 1.08rem); color: rgba(255, 255, 255, .72); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* ─────────────── 7. Cards — shared light-tech treatment ─────────────── */
.tile, .scard, .rcard, .tcard, .domain, .note, .leader, .equation, .person-photo, .partner {
  background: var(--surface);
  border: 1px solid var(--line);
}
.tile, .scard, .rcard, .tcard, .domain {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover, .scard:hover, .rcard:hover, .tcard:hover, .domain:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), inset 0 2px 0 0 var(--accent);
}

/* ─────────────────── 8. Two-up compare tiles ─────────────────── */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.tile {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  background: linear-gradient(135deg, var(--surface) 55%, var(--accent-bg) 100%);
}
/* faint mesh in the far corner, echoing the hero */
/* each compare tile carries its own illustration, bled off the right edge
   (the card clips it) — chart for the quantitative side, globe for the
   fundamental one. The copy is held clear of it by .tile-title/.tile-body. */
.tile::after {
  content: "";
  /* the box stays inside the card; the artwork is scaled up and pushed past the
     right edge so it crops there, giving the bleed without any real overflow */
  position: absolute; right: 0; bottom: 4%;
  width: 46%; height: 74%;
  background-repeat: no-repeat;
  background-position: right -7% bottom 0;
  background-size: auto 100%;
  opacity: .92;
  pointer-events: none;
}
.duo > .tile:nth-child(1)::after { background-image: url(../img/ill-chart.svg?v=d3c8fdfe); }
.duo > .tile:nth-child(2)::after { background-image: url(../img/ill-globe.svg?v=fc0359ba); }
.tile > .tile-title, .tile > .tile-body { max-width: 66%; }
.tile > * { position: relative; z-index: 1; }
.tile-tag {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent);
}
.tile-tag::after { content: ""; flex: 0 0 46px; height: 1px; background: var(--accent-dim); }
.tile-title { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.tile-body { color: var(--text-2); font-size: .95rem; max-width: 40ch; }
.tile-body + .tile-body { margin-top: 14px; }
.tile-pill { align-self: flex-start; margin-top: 26px; }

/* ───────────────────────────── 9. Equation ───────────────────────────── */
.equation {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(12px, 2.2vw, 26px);
  margin: 48px 0;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  border-radius: var(--r-card);
  background: var(--surface-2);
  text-align: center;
}
.equation-term { font-size: clamp(.95rem, 1.9vw, 1.25rem); font-weight: 500; color: var(--text-2); }
/* the operators carry the expression, so they get the mono treatment */
.equation-op {
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  font-weight: 400; color: var(--accent);
  opacity: .75;
}
.equation-result { font-size: clamp(1.25rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; color: var(--accent); }

/* ──────────────────────── 10. Core-process flow ──────────────────────── */
.flow { margin-top: 52px; }
.flow-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.flow-node {
  position: relative;
  padding: 18px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.flow-node:hover { border-color: var(--accent-dim); box-shadow: var(--shadow); }
.flow-node:not(:last-child)::after {
  content: "\203A";                       /* › — the step points at the next one */
  position: absolute; top: 50%; right: -9px;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: .85rem; line-height: 1;
  color: var(--accent-dim);
}
.flow-index { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: .62rem; color: var(--accent); }
.flow-text { display: block; font-size: .8rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.flow-node.is-final { background: var(--navy); border-color: var(--navy); }
.flow-node.is-final .flow-text { color: #fff; }
.flow-node.is-final .flow-index { color: #7FB0FF; }

/* ───────────── 11. Sticky aside + process card stack ───────────── */
.stack-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.stack-aside { position: sticky; top: 112px; }
.stack-aside .section-intro { margin-bottom: 30px; }
.stack { display: grid; gap: clamp(16px, 2vw, 24px); }

.scard { padding: clamp(26px, 3vw, 38px); }
/* alternating emphasis, by tint rather than by inversion */
.scard-dark { background: linear-gradient(140deg, var(--surface-2), var(--accent-bg)); border-color: var(--line-2); }
.scard-title {
  display: flex; align-items: baseline; gap: 14px;
  margin: 18px 0 12px;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.25;
}
.scard-num { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--accent); }
.scard-body { font-size: .95rem; color: var(--text-2); }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px clamp(16px, 3vw, 40px);
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.fact dt { font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--text-3); }
.fact dd { margin-top: 6px; font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }

/* ─────────────────────────────── 12. Chips ─────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-wrap { margin-top: 20px; }
/* square tags rather than pills — they read as data labels, and the leading
   hairline marks each one like a field in a readout */
.chip {
  position: relative;
  padding: 5px 12px 5px 16px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: #fff;
  font-size: .76rem; font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.chip::before {
  content: "";
  position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 3px;
  background: var(--accent-dim);
  transition: background .25s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.chip:hover::before { background: var(--accent); }

/* ──────────────────────── 13. Core-logic card rail ──────────────────────── */
.formula {
  margin: 10px 0 24px;
  font-size: clamp(1.3rem, 3.8vw, 2.6rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.22;
  color: var(--accent);
}
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px; margin-top: 10px;
}
.rcard { padding: clamp(26px, 3vw, 34px); }
.rcard-dark { background: linear-gradient(150deg, var(--surface-2), var(--accent-bg)); border-color: var(--line-2); }
.rcard-num { font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--accent); }
.rcard-title { margin: 16px 0 10px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
.rcard-body { font-size: .92rem; color: var(--text-2); }

/* ─────────────────────────────── 14. Note ─────────────────────────────── */
.note {
  position: relative;
  margin-top: 44px;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) clamp(28px, 3.4vw, 38px);
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.note::before {
  content: "";
  position: absolute; left: 0; top: 16%; bottom: 16%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
}
.note-label { margin-bottom: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--accent); }
.note-body { font-size: .9rem; color: var(--text-2); }

/* ──────────── 15. Three staggered cards + dashed connectors ──────────── */
.tri {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  align-items: start; margin-bottom: 52px;
}
.tcard { padding: clamp(24px, 2.6vw, 32px); overflow: visible; }
.tcard-mid { margin-top: clamp(28px, 5vw, 64px); }
.tcard:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: calc(-1 * clamp(16px, 3vw, 40px));
  width: clamp(16px, 3vw, 40px);
  border-top: 1px dashed var(--line-2);
}
.tcard-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--accent-bg);
  color: var(--accent);
}
.tcard-icon svg { width: 22px; height: 22px; }
.tcard-num {
  position: absolute; top: clamp(24px, 2.6vw, 32px); right: clamp(24px, 2.6vw, 32px);
  font-family: var(--mono); font-size: .72rem; color: var(--text-3);
}
.tcard-title { margin: 20px 0 10px; font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.tcard-body { font-size: .92rem; color: var(--text-2); }

/* ───────────────────────── 16. R&D list rows ───────────────────────── */
.rd-copy { max-width: 74ch; margin: 0 auto 48px; text-align: center; }
.rd-copy .section-body { margin-inline: auto; }
.rows { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), padding-inline .25s var(--ease);
}
.row:hover { background: var(--accent-bg); padding-inline: 18px 8px; }
.row .chip { flex-shrink: 0; }
.row-text { flex: 1; font-size: .98rem; font-weight: 500; letter-spacing: -.01em; }
.row-arrow { flex-shrink: 0; color: var(--text-3); transition: transform .25s var(--ease), color .25s var(--ease); }
.row:hover .row-arrow { transform: translate(2px, -2px); color: var(--accent); }

/* ─────────────────────────── 17. Leadership ─────────────────────────── */
.leader-block { scroll-margin-top: 96px; margin-bottom: clamp(44px, 5vw, 68px); }
.lead-heading {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
.leader {
  display: grid; grid-template-columns: 200px 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--surface) 60%, var(--accent-bg) 100%);
}
.leader-aside { text-align: center; }
.leader-avatar {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; max-width: 200px; aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--navy);
  font-size: 3rem; font-weight: 800; letter-spacing: -.03em;
}
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-initials { line-height: 1; }
.leader-org { margin-top: 16px; font-size: .78rem; color: var(--text-3); }
.leader-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 800; line-height: 1.25; letter-spacing: -.03em;
}
.leader-name-alt { font-size: .6em; font-weight: 500; color: var(--text-3); }
.leader-role { margin: 10px 0 22px; font-size: .92rem; font-weight: 700; color: var(--accent); }
.leader .block-label { margin-top: 30px; }

/* ──────────────────────── 18. Team + research domains ──────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-bottom: clamp(30px, 4vw, 46px);
}
.person-photo {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 5;
  margin-bottom: 16px;
  border-radius: var(--r-card);
  background: var(--surface-2); color: var(--navy);
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
}
.person .avatar-img { transition: transform .5s var(--ease); }
.person:hover .avatar-img { transform: scale(1.03); }
.person-name { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.person-role { margin-top: 4px; font-size: .84rem; color: var(--text-2); }

.domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  gap: 16px;
}
.domain { display: flex; flex-direction: column; padding: 28px 28px 30px; text-align: left; }
.domain-num {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
}
.domain-title { margin: 18px 0 10px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.domain-body { font-size: .88rem; line-height: 1.7; color: var(--text-2); }

/* the eighth cell: the seven disciplines resolving into one chain */
.domain-chain { justify-content: center; background: var(--navy); border-color: var(--navy); }
.domain-chain:hover { border-color: var(--navy); }
.chain-label { margin-bottom: 18px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: #7FB0FF; }
.chain-track { display: flex; flex-direction: column; gap: 13px; }
.chain-track li {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  font-size: .92rem; font-weight: 700; letter-spacing: -.01em;
  color: #fff;
}
.chain-track li::before {
  content: "";
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 50%; background: #7FB0FF;
}
.chain-track li:not(:last-child)::after {
  content: "";
  position: absolute; left: 2.5px; top: 100%;
  width: 1px; height: 13px;
  background: rgba(127, 176, 255, .45);
}

/* ─────────────────────── 19. Partner brand tiles ─────────────────────── */
.partners-band { padding-block: clamp(60px, 7vw, 100px); }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.partner {
  flex: 0 1 calc(16.666% - 14px);
  min-width: 158px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 92px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.partner:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.partner-logo { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.partner-logo[src$=".png"] { border-radius: 50%; }
.partner-mark { font-size: clamp(.95rem, 1.5vw, 1.05rem); font-weight: 700; letter-spacing: -.02em; text-align: center; }

/* ──────────────────── 20. Closing — inset navy card ──────────────────── */
.closing-band { padding-block: clamp(44px, 6vw, 92px); }
.cta-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(60px, 9vw, 130px) clamp(24px, 5vw, 60px);
  border-radius: clamp(20px, 3vw, 30px);
  background: var(--navy);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;          /* contain the photo's blend to this card */
}
/* the photograph, rendered as a blue duotone by taking its hue from the navy */
.cta-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url(../img/cta-team.jpg?v=34110ef0) center 40% / cover no-repeat;
  opacity: .62;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

/* scrim + blueprint lattice over the photo — the scrim is what keeps the
   headline legible, so it is heaviest right where the type sits */
.cta-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(ellipse 88% 70% at 50% 44%,
      rgba(15, 30, 54, .93) 10%, rgba(15, 30, 54, .72) 46%, rgba(15, 30, 54, .3) 100%),
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
  pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-title {
  display: flex; flex-direction: column;
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  font-weight: 800; line-height: 1.16; letter-spacing: -.035em;
}
.cta-sub { margin-top: 22px; max-width: 46ch; font-size: clamp(.95rem, 1.5vw, 1.05rem); color: rgba(255, 255, 255, .72); }
.cta-card .pill { margin-top: 36px; }

/* ───────────────────────────── 21. Footer ───────────────────────────── */
.site-footer {
  position: relative;
  padding-top: clamp(60px, 7vw, 88px);
  padding-bottom: calc(clamp(32px, 4vw, 52px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.footer-tagline { margin-top: 16px; max-width: 32ch; font-size: .86rem; color: var(--text-2); }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col-title { margin-bottom: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--accent); }
.footer-col a { font-size: .88rem; color: var(--text-2); }
.footer-col a:hover { color: var(--accent); }
/* the reference links and the contact block share one grid cell */
.footer-col-group { display: flex; flex-direction: column; gap: 30px; }
.footer-contact {
  display: flex; flex-direction: column; gap: 12px;
  font-style: normal;            /* <address> is italic by default */
}
.footer-contact-row {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .88rem; line-height: 1.6;
  color: var(--text-2);
}
.footer-contact-k { font-size: .72rem; color: var(--text-3); }
.footer-contact a { color: var(--text-2); font-variant-numeric: tabular-nums; }
.footer-contact a:hover { color: var(--accent); }

.disclosure {
  margin-top: 40px;
  padding: clamp(22px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.disclosure-title { margin-bottom: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--text-3); }
.disclosure-body { font-size: .82rem; line-height: 1.85; color: var(--text-3); }
.footer-copy { margin-top: 32px; font-size: .8rem; color: var(--text-3); text-align: center; }

/* ──────────────────────── 22. Reveal animation ──────────────────────── */
/* Content is visible by default: if JS never boots, the page still reads. */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
:root.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
:root.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ───────────────────────────── 23. Responsive ───────────────────────────── */
@media (max-width: 1180px) {
  .site-nav { gap: 14px; }
  .header-cta { display: none; }
}

@media (max-width: 1100px) {
  .flow-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-node:nth-child(4)::after { content: none; }
  .stack-layout { grid-template-columns: 1fr; }
  .stack-aside { position: static; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; left: 0;
    inset: calc(70px + env(safe-area-inset-top, 0px)) 0 auto 0;
    transform: translateY(-12px);
    flex-direction: column; gap: 0;
    padding: 6px var(--gutter) 22px;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .site-nav .nav-link { padding: 15px 0; font-size: .97rem; color: var(--text-2); border-bottom: 1px solid var(--line); }
  .site-nav .nav-link::after { content: none; }

  .tri { grid-template-columns: 1fr; }
  .tcard-mid { margin-top: 0; }
  .tcard:not(:last-child)::after {
    top: auto; right: auto;
    left: 50%; bottom: calc(-1 * clamp(16px, 3vw, 40px));
    width: 0; height: clamp(16px, 3vw, 40px);
    border-top: 0; border-left: 1px dashed var(--line-2);
  }

  .leader { grid-template-columns: 1fr; }
  .leader-aside { text-align: left; }
  .leader-avatar { margin-inline: 0; max-width: 132px; font-size: 2.1rem; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .hero-visual::after {
    background:
      linear-gradient(180deg, rgba(4, 5, 10, .90) 0%, rgba(4, 5, 10, .70) 34%, rgba(4, 5, 10, .38) 66%, var(--bg) 100%);
  }
  .tile::after { width: 42%; height: 62%; opacity: .85; background-position: right -10% bottom 0; }
  .tile > .tile-title, .tile > .tile-body { max-width: 72%; }
}

@media (max-width: 680px) {
  .flow-track { grid-template-columns: 1fr; gap: 8px; }
  .flow-node { display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 18px; }
  .flow-index { margin-bottom: 0; }
  .flow-node:not(:last-child)::after {
    content: "\2304";                     /* ⌄ — stacked, so it points down */
    top: auto; right: auto; left: 24px; bottom: -9px;
    transform: none;
    width: 0; height: 8px; border-top: 0; border-left: 1px dashed var(--line-2);
  }
  .flow-node:nth-child(4)::after { content: ""; }

  .equation { flex-direction: column; gap: 14px; }
  .facts { gap: 16px 18px; }
  .footer-top { grid-template-columns: 1fr; }
  .scard-title { flex-direction: column; gap: 6px; }
}

@media (max-width: 420px) {
  .brand-text { display: none; }
  .pill { width: 100%; justify-content: center; }
  .pill-center { width: max-content; }
  .lang-switch button { padding: 6px 11px; }
  .chip { white-space: normal; }
}


/* ══════════ 22. Technical layer — grid ground, index marks, corner ticks ══════════
   The signature of this system: a faint blueprint lattice under every light
   band, a mono section index, an L-bracket tick on each card, and mono IDs on
   anything countable. ═══════════════════════════════════════════════════════ */

/* ── four-corner bracket ──────────────────────────────────────────────────
   One inset box with a full border, masked down to just its four corners. The
   mask layers union, so a single pseudo-element draws all four crop marks. */
.tile::before, .fx::before, .pr::before, .domain::before,
.scard::before, .rcard::before, .tcard::before, .equation::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  opacity: .75;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 12px 12px no-repeat,
    linear-gradient(#000 0 0) 100% 0 / 12px 12px no-repeat,
    linear-gradient(#000 0 0) 0 100% / 12px 12px no-repeat,
    linear-gradient(#000 0 0) 100% 100% / 12px 12px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / 12px 12px no-repeat,
    linear-gradient(#000 0 0) 100% 0 / 12px 12px no-repeat,
    linear-gradient(#000 0 0) 0 100% / 12px 12px no-repeat,
    linear-gradient(#000 0 0) 100% 100% / 12px 12px no-repeat;
}
.tile:hover::before, .fx:hover::before, .pr:hover::before, .domain:hover::before,
.scard:hover::before, .rcard:hover::before, .tcard:hover::before {
  opacity: 1; border-color: var(--accent);
}

/* ── mono, tabular numerals wherever something is counted ────────────────── */
.scard-num, .rcard-num, .domain-num, .equation-op {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════ 23. Factor dimensions ══════════════════════ */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(26px, 3vw, 38px);
}
.fx {
  position: relative;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fx:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), var(--glow), inset 0 2px 0 0 var(--accent);
}
.fx-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.fx-id {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fx-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.fx-dl { margin: 0; }
.fx-dl dt {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.fx-dl dt:first-of-type { margin-top: 0; }
.fx-dl dd {
  margin: 4px 0 0;
  font-size: .9rem; line-height: 1.65;
  color: var(--text-2);
}


.note-tight { padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px); }

/* ══════════════════════ 24. Signal dimensions (in the logic note) ══════════════════════ */
.sig-label {
  margin: 22px 0 12px;
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.sig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sig {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .85rem; line-height: 1.4;
  color: var(--text-2);
}
.sig-n {
  font-family: var(--mono);
  font-size: .64rem; font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════ 25. Principles ══════════════════════ */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.pr {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pr:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), var(--glow), inset 0 2px 0 0 var(--accent);
}
.pr-id {
  display: block; margin-bottom: 18px;
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pr-t { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.pr-b { font-size: .9rem; line-height: 1.7; color: var(--text-2); }

/* ══════════════════════ 26. FAQ ══════════════════════ */
.faq-list {
  display: grid; gap: 12px;
  max-width: 920px; margin-inline: auto;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.faq-q {
  display: flex; align-items: flex-start; gap: 14px;
  padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 24px);
  cursor: pointer;
  font-size: .98rem; font-weight: 700; letter-spacing: -.01em;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-n {
  flex: 0 0 auto; padding-top: .18em;
  font-family: var(--mono);
  font-size: .7rem; font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.faq-qt { flex: 1; }

/* pure-CSS plus that becomes a minus when the answer is open */
.faq-mark { position: relative; flex: 0 0 13px; height: 13px; margin-top: .34em; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-mark::before { left: 0; top: 6px; width: 13px; height: 1.5px; }
.faq-mark::after { left: 5.75px; top: 0; width: 1.5px; height: 13px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }

.faq-a {
  margin: 0;
  padding: 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(44px, 4vw, 56px);
  font-size: .92rem; line-height: 1.75;
  color: var(--text-2);
}

/* ══════════════════════ 27. Responsive for the new blocks ══════════════════════ */
@media (max-width: 1100px) {
  .fx-grid, .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fx-grid, .pr-grid, .sig-grid { grid-template-columns: 1fr; }
}

/* ══════════ 28. Four sections, four shapes ══════════════════════════════
   These four blocks all used to be "bordered cards in a grid", which made the
   page read as one repeated component. Each now takes the form its content
   actually wants:

     core logic   →  large numbered editorial rows, no boxes
     factors      →  a spec table: one row per dimension, three columns of fields
     principles   →  a bento of mixed-width tiles, led by one dark feature tile
     domains      →  a two-column index list, closing on a full-width stepper

   All four are CSS-only; the markup is unchanged. ═════════════════════════ */

/* ── 28a. Core logic: numbered editorial rows ──────────────────────────── */
.rail {
  display: block;
  margin-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.rail > .rcard {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 132px) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(14px, 3vw, 44px);
  align-items: start;
  padding: clamp(24px, 3vw, 38px) clamp(10px, 1.4vw, 18px);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.rail > .rcard:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  border-bottom-color: var(--line-2);
  background: linear-gradient(90deg, var(--accent-bg), transparent 72%);
}
.rail > .rcard.rcard-dark { background: none; border-color: transparent; border-bottom-color: var(--line); }
.rail > .rcard.rcard-dark:hover { background: linear-gradient(90deg, var(--accent-bg), transparent 72%); }
.rail > .rcard::before { content: none; }        /* no crop marks on a row */

.rail .rcard-num {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 700; line-height: .9;
  color: var(--line-2);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease);
}
.rail > .rcard:hover .rcard-num { color: var(--accent); }
.rail .rcard-title {
  margin: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.32rem);
  line-height: 1.35;
}
.rail .rcard-body { font-size: .94rem; line-height: 1.75; }

/* ── 28b. Factors: a spec table ────────────────────────────────────────── */
.fx-grid {
  display: block;
  margin-bottom: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line-2);
}
.fx-grid > .fx {
  display: grid;
  grid-template-columns: clamp(140px, 15vw, 224px) minmax(0, 1fr);
  gap: clamp(12px, 2.2vw, 38px);
  align-items: start;
  padding: clamp(18px, 2vw, 26px) clamp(8px, 1.2vw, 16px);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transform: none;
}
.fx-grid > .fx:hover {
  transform: none;
  box-shadow: none;
  background: linear-gradient(90deg, var(--accent-bg), transparent 82%);
  border-bottom-color: var(--line-2);
}
.fx-grid > .fx::before { content: none; }

.fx-grid .fx-head {
  display: block;
  padding: 0; margin: 0;
  border: 0;
}
.fx-grid .fx-id { display: block; margin-bottom: 7px; }
.fx-grid .fx-name { font-size: 1rem; line-height: 1.4; }

/* three fields across, labels on the first row and values on the second */
.fx-grid .fx-dl {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(14px, 2.4vw, 38px);
}
.fx-grid .fx-dl dt { margin-top: 0; }
.fx-grid .fx-dl dd { font-size: .88rem; line-height: 1.7; }

/* ── 28c. Principles: a bento of mixed widths ──────────────────────────── */
/* spans run 2·1 / 1·2 / 2·1 so each row fills exactly three columns */
.pr-grid > .pr:nth-child(1),
.pr-grid > .pr:nth-child(4),
.pr-grid > .pr:nth-child(5) { grid-column: span 2; }

/* the first tile carries the section, so it goes dark */
.pr-grid > .pr:nth-child(1) {
  background: var(--navy);
  border-color: var(--navy);
  display: flex; flex-direction: column; justify-content: center;
}
.pr-grid > .pr:nth-child(1)::before { border-color: rgba(127, 176, 255, .5); }
.pr-grid > .pr:nth-child(1):hover { border-color: var(--navy); box-shadow: var(--shadow-lg); }
.pr-grid > .pr:nth-child(1) .pr-id { color: #7FB0FF; }
.pr-grid > .pr:nth-child(1) .pr-t { color: #fff; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.pr-grid > .pr:nth-child(1) .pr-b { color: rgba(255, 255, 255, .74); font-size: .95rem; max-width: 46ch; }

/* ── 28d. Domains: a two-column index, closing on a stepper ────────────── */
.domains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(26px, 5vw, 70px);
  gap: 0;
  border-top: 1px solid var(--line);
}
.domains > .domain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(12px, 1.6vw, 20px);
  align-content: start;
  padding: clamp(18px, 2vw, 24px) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: left;
}
.domains > .domain:hover { transform: none; box-shadow: none; border-bottom-color: var(--accent-dim); }
.domains > .domain::before { content: none; }
/* the seventh discipline runs the full width, so the list never ends ragged */
.domains > .domain:nth-child(7) { grid-column: 1 / -1; }

.domains .domain-num {
  grid-row: span 2;
  width: 28px; height: 28px;
  border-radius: 3px;
  font-size: .6rem;
}
.domains .domain-title { margin: 0 0 6px; font-size: .99rem; }
.domains .domain-body { grid-column: 2; font-size: .87rem; }

/* the chain becomes a horizontal stepper under the list */
.domains > .domain-chain {
  grid-column: 1 / -1;
  display: block;
  margin-top: clamp(30px, 4vw, 48px);
  padding: clamp(22px, 2.8vw, 34px) clamp(20px, 3vw, 40px);
  border: 1px solid var(--navy);
  border-radius: var(--r-card);
  background: var(--navy);
}
.domains > .domain-chain:hover { border-color: var(--navy); }
.domains > .domain-chain .chain-label { margin-bottom: 20px; }
/* equal columns, so a connector drawn from one centre to the next always
   lands on the following dot regardless of how long each label is */
.domains > .domain-chain .chain-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.domains > .domain-chain .chain-track li {
  flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.domains > .domain-chain .chain-track li:not(:last-child)::after { content: none; }
/* one line drawn across the track instead of five pseudo-elements reaching
   into the next column — same picture, but no element overhangs its own box */
.domains > .domain-chain .chain-track { position: relative; }
.domains > .domain-chain .chain-track::before {
  content: "";
  position: absolute; top: 3px; left: 10%; right: 10%;
  height: 1px;
  background: rgba(127, 176, 255, .45);
}
.domains > .domain-chain .chain-track li { position: relative; }

/* ── 28e. Narrow screens: every one of them collapses to a stack ───────── */
@media (max-width: 1100px) {
  .pr-grid > .pr:nth-child(1),
  .pr-grid > .pr:nth-child(4),
  .pr-grid > .pr:nth-child(5) { grid-column: auto; }
  .pr-grid > .pr:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 900px) {
  .rail > .rcard { grid-template-columns: clamp(52px, 8vw, 76px) minmax(0, 1fr); }
  .rail .rcard-body { grid-column: 2; margin-top: 8px; }
  .fx-grid > .fx { grid-template-columns: 1fr; }
  .fx-grid .fx-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .domains { grid-template-columns: 1fr; }
  .domains > .domain:nth-child(7) { grid-column: auto; }
}
@media (max-width: 760px) {
  .pr-grid > .pr:nth-child(1) { grid-column: auto; }
  .fx-grid .fx-dl {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
  }
  .fx-grid .fx-dl dt { margin-top: 14px; }
  .fx-grid .fx-dl dt:first-of-type { margin-top: 0; }
  /* stacked: one column, and the connector goes back to being vertical */
  .domains > .domain-chain .chain-track { grid-template-columns: 1fr; gap: 13px; }
  .domains > .domain-chain .chain-track::before { content: none; }
  .domains > .domain-chain .chain-track li { flex-direction: row; align-items: center; text-align: left; }
  .domains > .domain-chain .chain-track li:not(:last-child)::after {
    content: "";
    left: 2.5px; top: 100%; right: auto;
    width: 1px; height: 13px;
  }
}


/* ══════════ 29. Weight and rhythm ═══════════════════════════════════════
   The page ground is plain white by request, which left almost nothing
   carrying visual weight: across ~20,000px of phone scroll there were only
   four dark elements, all of them in the last third. Two content moments that
   deserve emphasis now carry it, and the densest list stops being a wall of
   identical text blocks on a phone. ══════════════════════════════════════ */

/* ── 29a. The equation is the thesis of the page, so it gets the weight ── */
.equation {
  background: var(--navy);
  border-color: var(--navy);
}
.equation::before { border-color: rgba(127, 176, 255, .45); }
.equation-term { color: rgba(255, 255, 255, .7); }
.equation-op { color: #7FB0FF; opacity: .9; }
.equation-result { color: #7FB0FF; }

/* ── 29b. The closing statement of a section, as a solid band ── */
.statement {
  max-width: 64ch;
  margin: clamp(46px, 6vw, 72px) auto 0;
  padding: clamp(30px, 4vw, 46px) clamp(22px, 4vw, 44px);
  border-radius: var(--r-card);
  background: var(--navy);
  color: #fff;
}
.statement::before {
  top: clamp(18px, 2.4vw, 26px);
  width: 56px; height: 2px;
  background: linear-gradient(90deg, transparent, #7FB0FF, transparent);
}

/* ── 29c. Phone: the factor table becomes a swipeable rail ──────────────
   Seven stacked label/value blocks is the most monotonous shape this content
   can take. As a snapping rail the cards get their frame back, the section
   loses ~1,400px of scroll, and the partly visible next card advertises that
   there is more. */
@media (max-width: 760px) {
  .fx-grid {
    display: grid;
    /* clear the stacked-column track set further up, or the first card lands
       in it and only the rest pick up the rail width */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 12px;
    border-top: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* bleed to the screen edges so the rail reads as scrollable */
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 16px;
  }
  .fx-grid::-webkit-scrollbar { display: none; }

  .fx-grid > .fx {
    display: block;
    scroll-snap-align: start;
    padding: clamp(20px, 5vw, 26px);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .fx-grid > .fx::before { content: ""; }        /* crop marks come back */
  .fx-grid > .fx:hover { background: var(--surface); box-shadow: var(--shadow); }

  .fx-grid .fx-head {
    padding-bottom: 13px; margin-bottom: 15px;
    border-bottom: 1px solid var(--line);
  }
  .fx-grid .fx-name { font-size: 1.06rem; }
}

/* ── 29c2. Phone: principles as a two-up grid under the lead tile ─────── */
@media (max-width: 760px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pr-grid > .pr:nth-child(1) { grid-column: 1 / -1; }
  .pr-grid > .pr:not(:nth-child(1)) { padding: 18px 16px 20px; }
  .pr-grid > .pr:not(:nth-child(1)) .pr-id { margin-bottom: 10px; }
  .pr-grid > .pr:not(:nth-child(1)) .pr-t { font-size: .96rem; margin-bottom: 6px; }
  .pr-grid > .pr:not(:nth-child(1)) .pr-b { font-size: .8rem; line-height: 1.6; }
}
@media (max-width: 340px) {
  .pr-grid { grid-template-columns: 1fr; }
  /* at the narrowest phones a half-width fact column cannot hold one English term */
  .facts { grid-template-columns: 1fr; }
}

/* ── 29e. Stacked steps read as a sequence ─────────────────────────────
   Once the sticky two-column layout collapses, the five step cards are just a
   pile. A rail down the left with a node per card makes the order visible.
   Nodes sit in the stack's own left padding; they overhang their card to
   the left, which never adds scrollable width. */
@media (max-width: 1100px) {
  .stack {
    position: relative;
    padding-left: clamp(26px, 5vw, 38px);
  }
  .stack::before {
    content: "";
    position: absolute; top: 30px; bottom: 30px;
    left: clamp(7px, 1.4vw, 11px);
    width: 1px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 55%, var(--line-2) 100%);
  }
  .stack > .scard { overflow: visible; }
  .stack > .scard::after {
    content: "";
    position: absolute; top: clamp(26px, 3vw, 38px);
    left: calc(-1 * clamp(26px, 5vw, 38px) + clamp(7px, 1.4vw, 11px) - 4px);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent-dim);
  }
}

/* ── 29d. Phone: tighten the vertical rhythm ────────────────────────────
   Every block used the same gap, so the page read as one long column at one
   pace. Headings get more room above than below, which groups each section
   with its own content instead of floating between two. */
@media (max-width: 760px) {
  .section-title { font-size: clamp(1.95rem, 7.4vw, 2.4rem); }
  .section-intro { font-size: .96rem; margin-bottom: 34px; }
  .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .domains > .domain { padding: 16px 0; }
  .domains > .domain:nth-child(7) { grid-column: 1 / -1; }
  .domains .domain-body { font-size: .82rem; }
}
@media (max-width: 480px) {
  .domains { grid-template-columns: 1fr; }
  .domains > .domain:nth-child(7) { grid-column: auto; }
  .domains .domain-body { font-size: .86rem; }
}


/* ══════════ 30. Factors as a switcher ═══════════════════════════════════
   The spec table repeated its three column labels on every one of seven rows
   and ran ~860px tall. From tablet width up it becomes a list + detail panel:
   all seven names stay visible on the left, one dimension is read at a time
   on the right, and the block sits at roughly the height of the list.

   It is an enhancement: main.js adds .is-switcher only once it has wired the
   controls, so without JS the table layout above still shows every field.
   Each <li> becomes display:contents, so its head joins the left column and
   its <dl> joins the right, all seven panels sharing one grid cell. Inactive
   panels fade out but stay in the document, so assistive tech still reads
   every dimension in order. On phones the swipe rail (29c) is untouched. */
@media (min-width: 761px) {
  .fx-grid.is-switcher {
    display: grid;
    grid-template-columns: minmax(210px, 290px) minmax(0, 1fr);
    grid-template-rows: repeat(7, auto);
    /* the older card grid set a row gap; the list rail must run unbroken */
    row-gap: 0;
    column-gap: clamp(22px, 3vw, 44px);
    border-top: 0;
    counter-reset: fx;
  }
  .fx-grid.is-switcher > .fx { display: contents; }
  .fx-grid.is-switcher > .fx::before,
  .fx-grid.is-switcher > .fx::after { content: none; }

  /* ── the list ── */
  .fx-grid.is-switcher .fx-head {
    grid-column: 1;
    display: flex; align-items: center; gap: 14px;
    margin: 0;
    padding: 13px 18px;
    border: 0;
    border-left: 2px solid var(--line);
    cursor: pointer;
    counter-increment: fx;
    transition: background .25s var(--ease), border-color .25s var(--ease);
  }
  .fx-grid.is-switcher .fx-head:hover { background: var(--surface-2); }
  .fx-grid.is-switcher .fx-head:focus-visible { outline-offset: -2px; border-radius: 0; }
  .fx-grid.is-switcher .fx-id { margin: 0; flex: 0 0 auto; }
  .fx-grid.is-switcher .fx-name {
    font-size: .98rem; line-height: 1.35;
    transition: color .25s var(--ease);
  }
  .fx-grid.is-switcher > .fx.is-active .fx-head {
    border-left-color: var(--accent);
    background: var(--accent-bg);
  }
  .fx-grid.is-switcher > .fx.is-active .fx-name { color: var(--accent-2); }

  /* ── the panel: every <dl> in the same full-height cell ── */
  .fx-grid.is-switcher .fx-dl {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    grid-auto-flow: row;
    column-gap: clamp(20px, 3vw, 40px);
    align-content: start;
    margin: 0;
    padding: clamp(28px, 3.2vw, 42px) clamp(26px, 3.2vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .fx-grid.is-switcher > .fx.is-active .fx-dl {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* ghost index for the dimension in view */
  .fx-grid.is-switcher .fx-dl::before {
    content: "F" counter(fx, decimal-leading-zero);
    position: absolute;
    top: clamp(18px, 2.2vw, 28px); right: clamp(22px, 2.8vw, 36px);
    font-family: var(--mono);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700; line-height: 1;
    color: var(--accent-bg);
    pointer-events: none;
  }

  /* the question leads; the two supporting fields sit side by side below it */
  .fx-grid.is-switcher .fx-dl dt,
  .fx-grid.is-switcher .fx-dl dd { position: relative; margin: 0; }
  .fx-grid.is-switcher .fx-dl dt:nth-of-type(1) { grid-column: 1 / -1; grid-row: 1; }
  .fx-grid.is-switcher .fx-dl dd:nth-of-type(1) {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: 10px;
    padding-bottom: clamp(20px, 2.4vw, 28px);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    border-bottom: 1px solid var(--line);
    max-width: 30ch;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800; line-height: 1.4; letter-spacing: -.02em;
    color: var(--text);
  }
  .fx-grid.is-switcher .fx-dl dt:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  .fx-grid.is-switcher .fx-dl dd:nth-of-type(2) { grid-column: 1; grid-row: 4; margin-top: 8px; }
  .fx-grid.is-switcher .fx-dl dt:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  .fx-grid.is-switcher .fx-dl dd:nth-of-type(3) { grid-column: 2; grid-row: 4; margin-top: 8px; }
  .fx-grid.is-switcher .fx-dl dd:nth-of-type(2),
  .fx-grid.is-switcher .fx-dl dd:nth-of-type(3) { font-size: .93rem; line-height: 1.75; }
}

/* ────────────────────────── 24. Reduced motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, :root.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ───────────────────────────── 25. Print ───────────────────────────── */
@media print {
  .site-header, .hero-visual, .tile::after, .cta-card::after { display: none !important; }
  body, .hero, .cta-card { background: #fff !important; color: #000 !important; }
  .reveal, :root.js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}