/* fitxai.app. Dark and high-contrast, from the app's own palette: near-black, cool white, graphite, the app's effort
   ramp (RPE 7 teal, 8 amber, 9 orange, 10 red, deload blue) as the signature, and one signal colour for emphasis.
   Archivo (variable width) for display and text, IBM Plex Mono for labels and data. Self-hosted; nothing third-party.
   Every effect has a static state: without JavaScript, and with reduced motion, all content is visible and still. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg: #0a0b0d;
  --bg-2: #0f1114;
  --bg-3: #15181c;
  --surface: #1a1d22;
  --ink: #f4f5f7;
  --ink-2: #bcc1c9;
  --ink-3: #8f96a1;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.17);
  --signal: #ff5a26;
  --signal-soft: rgba(255, 90, 38, 0.16);
  /* the app's effort ramp (shared/design/tokens.js, dark theme) */
  --r7: #159a82;
  --r8: #c98a12;
  --r9: #d8611f;
  --r10: #e5434d;
  --rd: #5f7fa8;
  --paper: #efede8;
  --paper-2: #f8f7f4;
  --paper-ink: #0c0c0d;
  --paper-ink-2: #3a3936;
  --paper-line: rgba(12, 12, 13, 0.14);

  --pad: clamp(16px, 5vw, 72px);
  --max: 1320px;
  --sec: clamp(80px, 10vw, 150px);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
/* Smooth only for links followed on the page (brand.js adds .smooth after load), so an address with a #section jumps there. */
html.smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.smooth { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--display); font-size: 17px; line-height: 1.55; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--signal); color: #000; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 14px; font-weight: 600; text-decoration: none; border-radius: 8px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type ---------- */
.mono { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.label b { color: var(--ink); font-weight: 500; margin-right: 0.6em; }
.display { font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.045em; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.08; }
.dim { color: var(--ink-3); }
.signal { color: var(--signal); }
.accent { color: var(--signal); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent { background: linear-gradient(90deg, #ff9a3c 0%, var(--signal) 45%, var(--r10) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (forced-colors: active) { .accent { background: none; color: CanvasText; } }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.body { color: var(--ink-2); max-width: 38em; }
.small { font-size: 14px; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- sections ---------- */
.sec { position: relative; padding: var(--sec) 0; }
.sec > .wrap > .label, .feat-copy > .label, .sci-head .label { display: block; margin-bottom: 20px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px;
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0; text-decoration: none; border-radius: 14px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-science:hover svg { transform: translateY(3px); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #fff; }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--ink-2); background: rgba(255, 255, 255, 0.06); }
.btn-dark { background: var(--paper-ink); color: var(--paper); }
.btn-dark:hover { background: #2a2a2c; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; }
.round { all: unset; box-sizing: border-box; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.round:hover { border-color: var(--ink-2); background: rgba(255, 255, 255, 0.05); }
.round:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.round svg { width: 16px; height: 16px; }
.round[data-gallery="-1"] svg { transform: rotate(180deg); }
.round:disabled { opacity: 0.35; cursor: default; }

/* ---------- store buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: clamp(28px, 3vw, 40px); }
.stores { display: contents; }
.store { margin: 0; }
.store-live { display: inline-flex; align-items: center; border-radius: 12px; }
.store-live img { height: 56px; width: auto; }
.store-soon { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px 0 14px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--ink-2); background: rgba(255, 255, 255, 0.015); }
.store-soon svg { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.store-soon > span { display: grid; line-height: 1.2; }
.store-soon b { font-weight: 650; font-size: 16px; color: var(--ink); }
.store-soon > span > span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.actions .btn { min-height: 56px; }
.hero-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); }
.hero-note a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(10, 11, 13, 0.84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.wordmark .ring { width: 28px; height: 28px; }
.nav-links { display: flex; gap: clamp(18px, 2.2vw, 32px); }
.nav-links a { font-size: 15px; text-decoration: none; color: var(--ink-2); padding: 8px 0; transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-signin { font-size: 14.5px; text-decoration: none; color: var(--ink-3); }
.nav-signin:hover { color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: none; cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); content: ""; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.menu-btn span { top: 18px; }
.menu-btn span::before { left: 0; right: 0; top: 7px; }
.menu-btn[aria-expanded="true"] span { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(-90deg); }
.menu { position: fixed; inset: 68px 0 0 0; z-index: 49; background: var(--bg); padding: 20px var(--pad) 40px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu a:not(.btn) { font-family: var(--display); font-weight: 650; letter-spacing: -0.02em; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: 24px; align-self: flex-start; }
@media (max-width: 1060px) { .nav-signin { display: none; } }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 380px) { .nav-cta .btn { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(104px, 12vw, 150px) 0 clamp(36px, 5vw, 64px); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 8%; width: min(900px, 90vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 90, 38, 0.13), rgba(229, 67, 77, 0.05) 55%, transparent 72%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 2.4vw, 28px); color: var(--ink-2); }
.ramp { display: inline-flex; width: 44px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--r7) 0 20%, var(--r8) 20% 40%, var(--r9) 40% 60%, var(--r10) 60% 80%, var(--rd) 80%); }
.hero .lede { margin-top: clamp(20px, 2.4vw, 28px); }
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: clamp(440px, 50vw, 660px); }
.hero-visual .phone { position: relative; }
.hero-visual .center { width: clamp(220px, 21vw, 290px); z-index: 2; }
.hero-visual .side { width: clamp(180px, 17vw, 240px); z-index: 1; opacity: 0.92; }
.hero-visual .left { margin-right: -12%; transform: translateY(6%); }
.hero-visual .right { margin-left: -12%; transform: translateY(6%); }
.hero-visual .left .phone-frame { transform: rotate(-5deg); }
.hero-visual .right .phone-frame { transform: rotate(5deg); }
.shot-note { margin-top: 18px; }
.hero .shot-note { text-align: right; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { min-height: 0; margin-top: 8px; }
  .hero-visual .center { width: min(56vw, 270px); }
  .hero-visual .side { width: min(44vw, 210px); }
  .hero-visual .left { margin-right: -18%; }
  .hero-visual .right { margin-left: -18%; }
  .hero .shot-note { text-align: center; }
  .hero-visual .side figcaption { visibility: hidden; }
}

/* ---------- phones: a real screen in a plain frame ---------- */
.phone-frame { position: relative; padding: 7px; border-radius: 40px; background: linear-gradient(160deg, #2a2e35, #15171b 40%, #1d2026); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 70px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.phone-frame img { width: 100%; height: auto; aspect-ratio: 600 / 1298; border-radius: 33px; background: var(--bg); }
.phone figcaption { margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 520px) { .phone-frame { padding: 5px; border-radius: 30px; } .phone-frame img { border-radius: 25px; } }

/* ---------- pillars ---------- */
.pillars { padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.pillars .h3 { max-width: 22em; }
.pillar-list { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pillar-list li { padding: 26px 24px 24px; border-radius: 22px; background: var(--bg-3); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.pillar-list li:nth-child(1) .mono { color: var(--r7); }
.pillar-list li:nth-child(2) .mono { color: #e0a33a; }
.pillar-list li:nth-child(3) .mono { color: #ff7a4d; }
.pillar-list p { color: var(--ink-2); flex: 1; }
.pillar-list a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; font-size: 15px; }
.pillar-list a svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.pillar-list a:hover svg { transform: translateX(3px); }
@media (max-width: 700px) { .pillar-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- feature sections ---------- */
.feat { border-top: 1px solid var(--line); }
.feat:nth-of-type(even) { background: var(--bg-2); }
.feat-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.feat.reverse .feat-copy { order: 2; }
.feat-copy .lede { margin-top: 22px; }
.points { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.points li { border-top: 1px solid var(--line-2); padding-top: 16px; }
.points h3 { font-weight: 650; font-size: 17.5px; letter-spacing: -0.01em; line-height: 1.3; }
.points p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.note { margin-top: 30px; padding-left: 14px; border-left: 2px solid var(--line-2); color: var(--ink-3); font-size: 14.5px; max-width: 46em; }
.feat-visual { display: flex; justify-content: center; align-items: flex-start; }
.feat-visual .phone { width: clamp(200px, 19vw, 270px); }
.phones-2 .phone + .phone { margin-left: -9%; margin-top: 14%; }
.phones-1 .phone { width: clamp(220px, 22vw, 300px); }
@media (max-width: 1000px) {
  /* one column: the intro, then the screens, then the details */
  .feat-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .feat-copy { display: contents; }
  .feat-copy > * { order: 0; }
  .feat-visual { order: 1; margin-top: 36px; }
  .feat-copy > .points, .feat-copy > .note, .feat-copy > .block { order: 2; }
  .feat-visual .phone { width: min(42vw, 240px); }
  .phones-1 .phone { width: min(58vw, 270px); }
  .phones-2 .phone + .phone { margin-top: 10%; }
}
@media (max-width: 640px) { .points { grid-template-columns: minmax(0, 1fr); } }

/* one training block */
.block { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.block li { display: grid; grid-template-rows: 120px auto auto 1fr; row-gap: 4px; align-content: start; }
.block .bar { align-self: end; height: calc(var(--h) * 110px); border-radius: 8px 8px 3px 3px; background: var(--c); margin-bottom: 6px; transform-origin: bottom; }
.block b { font-weight: 650; font-size: 15px; }
.block .rpe { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); filter: brightness(1.25); }
.block .txt { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.js .block .bar { transform: scaleY(0.15); transition: transform 0.9s var(--ease); }
.js .block li:nth-child(2) .bar { transition-delay: 0.08s; } .js .block li:nth-child(3) .bar { transition-delay: 0.16s; }
.js .block li:nth-child(4) .bar { transition-delay: 0.24s; } .js .block li:nth-child(5) .bar { transition-delay: 0.32s; }
.js .block.is-in .bar { transform: none; }
@media (max-width: 640px) {
  .block { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .block li { grid-template-columns: 64px 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .block .bar { grid-column: 1 / -1; height: 8px; width: calc(var(--h) * 100%); border-radius: 4px; margin: 0 0 6px; transform-origin: left; }
  .js .block .bar { transform: scaleX(0.1); }
}

/* ---------- science: on paper ---------- */
.paper { background: var(--paper); color: var(--paper-ink); }
.paper .label { color: #55534e; }
.paper .label b { color: var(--paper-ink); }
.paper .lede, .paper .body { color: var(--paper-ink-2); }
.paper .dim { color: #6b6964; }
.paper .small { color: #55534e; }
.paper ::selection { background: var(--paper-ink); color: var(--paper); }
.paper :focus-visible { outline-color: var(--paper-ink); }
.sci-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.sci-head .lede { margin-top: 22px; }
.sci-count { display: flex; gap: clamp(24px, 4vw, 56px); }
.sci-count div { border-top: 1px solid var(--paper-ink); padding-top: 12px; flex: 1; }
.sci-count b { display: block; font-weight: 300; font-stretch: 110%; font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.95; letter-spacing: -0.04em; }
.sci-count .label { display: block; margin-top: 10px; }
.sci-grid { margin-top: clamp(44px, 6vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.sci { position: relative; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: 22px; padding: clamp(22px, 2.6vw, 34px); }
.anchor { display: block; position: absolute; top: 0; }
.sci-n { color: #6b6964; }
.sci h3 { margin-top: 10px; font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; }
.sci-sum { margin-top: 8px; color: var(--paper-ink-2); font-size: 16.5px; }
.sci dl { margin-top: 22px; display: grid; gap: 16px; }
.sci dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sci dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sci .known dt { color: #0d6b5a; }
.sci .unsure dt { color: #8a5300; }
.sci .fitx dt { color: var(--paper-ink); }
.sci dd { margin-top: 6px; color: var(--paper-ink-2); font-size: 15.5px; line-height: 1.55; }
.sci h4 { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--paper-line); }
.refs { margin-top: 10px; display: grid; gap: 8px; }
.refs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; }
.refs a { color: var(--paper-ink); text-decoration: underline; text-decoration-color: rgba(12, 12, 13, 0.3); text-underline-offset: 3px; font-weight: 600; }
.refs a:hover { text-decoration-color: currentColor; }
.refs .ref-type { color: #55534e; font-size: 13.5px; }
.refs .ref-src { font-weight: 500; font-size: 13.5px; color: var(--paper-ink-2); }
.sci-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.sci-foot .small { max-width: 52em; }
@media (max-width: 960px) {
  .sci-head { grid-template-columns: minmax(0, 1fr); }
  .sci-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- how it works ---------- */
.how .steps { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: step; }
.steps li { padding: 28px 26px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg-3); }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); font-weight: 700; font-size: 18px; }
.steps li:nth-child(1) .step-n { border-color: var(--r7); color: #3ac2a8; }
.steps li:nth-child(2) .step-n { border-color: var(--r8); color: #e0a33a; }
.steps li:nth-child(3) .step-n { border-color: var(--r10); color: #ff7a7f; }
.steps h3 { margin-top: 22px; font-weight: 650; font-size: 20px; letter-spacing: -0.015em; }
.steps p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 860px) { .how .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- gallery ---------- */
.gallery-sec { border-top: 1px solid var(--line); background: var(--bg-2); }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.gallery-btns { display: flex; gap: 10px; }
.gallery-btns[hidden] { display: none; }
.gallery { margin-top: clamp(36px, 4vw, 56px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain;
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); scroll-padding-inline: var(--edge); }
.gallery:focus-visible { outline-offset: -2px; }
.gallery ul { display: flex; gap: clamp(16px, 2vw, 28px); padding: 4px var(--edge) 24px; width: max-content; }
.gallery li { flex: 0 0 auto; width: clamp(200px, 20vw, 250px); scroll-snap-align: start; }
@media (max-width: 1000px) { .gallery-btns { display: none; } }

/* ---------- download ---------- */
.final { position: relative; padding: var(--sec) 0; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; text-align: center; }
.final::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1000px, 120vw); aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 90, 38, 0.12), transparent 70%); }
.final-in { display: flex; flex-direction: column; align-items: center; }
.final .ring { width: 72px; height: 72px; margin-bottom: 28px; }
.final .lede { margin-top: 18px; }
.final .actions { justify-content: center; }

/* ---------- reveals ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 40px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.foot h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; font-weight: 500; }
.foot ul { display: grid; gap: 4px; }
.foot li a { display: inline-block; padding: 5px 0; }
.foot a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot-tag { margin-top: 14px; color: var(--ink-3); max-width: 26em; font-size: 15px; }
.foot-base { margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-size: 13.5px; color: var(--ink-3); }
.foot-base p:first-child { max-width: 60em; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- research archive (home of /research/) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); margin-top: clamp(48px, 6vw, 80px); }
.stat { padding: 20px 20px 24px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line); }
.stat b { display: block; font-weight: 300; font-stretch: 112%; font-size: clamp(2.6rem, 5.4vw, 5rem); letter-spacing: -0.045em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.stat .label { display: block; margin-top: 12px; }
@media (max-width: 760px) {
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
.arch-tools { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { all: unset; box-sizing: border-box; cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); transition: all 0.2s; }
.chip:hover { color: var(--ink); border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.search { position: relative; flex: 1 1 260px; max-width: 360px; }
.search input { width: 100%; min-height: 46px; padding: 0 16px 0 42px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--ink); }
.search svg { position: absolute; left: 15px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); stroke: var(--ink-3); fill: none; }
.archive { margin-top: 26px; border-top: 1px solid var(--line-2); }
.entry { border-bottom: 1px solid var(--line); }
.entry[hidden] { display: none; }
.entry summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 4.2em 11em minmax(0, 1fr) 12em 24px; gap: 18px; align-items: baseline; padding: 20px 0; }
.entry summary::-webkit-details-marker { display: none; }
.entry summary:hover .e-title { color: var(--ink); }
.e-year { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.e-type { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.e-title { color: var(--ink-2); font-size: 16.5px; line-height: 1.4; transition: color 0.2s; }
.e-ref { font-size: 14px; color: var(--ink-3); text-align: right; }
.e-plus { width: 14px; height: 14px; position: relative; justify-self: end; }
.e-plus::before, .e-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1px; background: var(--ink-2); transition: transform 0.3s var(--ease); }
.e-plus::after { transform: rotate(90deg); }
.entry[open] .e-plus::after { transform: rotate(0); }
.entry[open] .e-title { color: var(--ink); }
.e-body { display: grid; grid-template-columns: 4.2em 11em minmax(0, 1fr) 12em 24px; gap: 18px; padding: 0 0 30px; }
.e-body > div { grid-column: 3 / 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.e-body h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; font-weight: 500; }
.e-body p { font-size: 15px; color: var(--ink-2); }
.e-meta { grid-column: 3 / 5; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 14px; color: var(--ink-3); }
.e-meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.e-meta a:hover { border-bottom-color: var(--ink); }
.arch-empty { padding: 40px 0; color: var(--ink-2); }
.arch-more { margin-top: 24px; }
.arch-more[hidden] { display: none; }
.standard { margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.standard > div { border-top: 1px solid var(--line-2); padding-top: 18px; }
.standard h3 { font-weight: 650; font-size: 1.3rem; margin: 10px 0; letter-spacing: -0.01em; }
.standard p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 960px) {
  .entry summary { grid-template-columns: 3.6em minmax(0, 1fr) 20px; gap: 6px 14px; }
  .e-type { grid-column: 2; grid-row: 2; }
  .e-title { grid-column: 2; grid-row: 1; }
  .e-ref { grid-column: 2; grid-row: 3; text-align: left; }
  .e-plus { grid-column: 3; grid-row: 1; }
  .e-body { grid-template-columns: 3.6em minmax(0, 1fr); gap: 14px; }
  .e-body > div, .e-meta { grid-column: 2; }
  .e-body > div { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .standard { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- research pages ---------- */
.page-head { padding: clamp(120px, 14vw, 190px) 0 clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.page-head .display { font-size: clamp(2.3rem, 5.6vw, 5rem); max-width: 14em; }
.page-head .lede { margin-top: 24px; }
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.paper-page .pp-title { font-weight: 650; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 22em; }
.pp-meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--ink-2); font-size: 15px; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); padding-top: clamp(48px, 6vw, 88px); padding-bottom: var(--sec); }
.pp-body section + section { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.pp-body h2 { font-weight: 650; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin-bottom: 14px; }
.pp-body p { color: var(--ink-2); font-size: 17.5px; max-width: 40em; }
.pp-body .fitx p { color: var(--ink); }
.pp-side { position: sticky; top: 100px; display: grid; gap: 26px; align-content: start; }
.pp-side > div { border-top: 1px solid var(--line-2); padding-top: 16px; }
.pp-side p, .pp-side li { font-size: 14.5px; color: var(--ink-2); }
.pp-side ul { display: grid; gap: 8px; }
.pp-side a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.pp-side a:hover { border-bottom-color: var(--ink); }
.pp-cite { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); word-break: break-word; }
.pp-next { border-top: 1px solid var(--line); padding-top: 40px; padding-bottom: 70px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pp-next a { text-decoration: none; max-width: 30em; }
.pp-next a span { display: block; margin-bottom: 8px; }
.pp-next a b { font-weight: 560; font-size: 17px; color: var(--ink-2); }
.pp-next a:hover b { color: var(--ink); }
@media (max-width: 960px) { .pp-grid { grid-template-columns: minmax(0, 1fr); } .pp-side { position: static; } }
.lost { min-height: 100svh; display: flex; align-items: center; }

/* research: evidence by feature, review status, product choices (tools/site/research.js) */
.fe-sec { padding-top: clamp(48px, 6vw, 96px); }
.fe-sec .lede { margin-top: 22px; }
.fe-group { margin-top: clamp(32px, 4vw, 56px); }
.fe-area { font-weight: 650; font-size: 1.3rem; margin: 0 0 14px; }
.fe { border-top: 1px solid var(--line-2); padding: 20px 0; display: grid; gap: 8px; max-width: 78ch; }
.fe h4 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.fe p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.55; }
.fe .fe-text { color: var(--ink-2); }
.fe-decision b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.fe-decision b[data-decision="insufficient"] { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.fe-papers a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fe-note b { color: var(--ink-2); font-weight: 600; }
.heur { border-left: 2px solid var(--line-2); padding-left: 16px; }
.pp-status { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }
.pp-status li::before { content: "– "; opacity: .6; }

/* ---------- reduced motion, print, small phones ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .block .bar { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn svg, .pillar-list a svg { transition: none; }
}
@media print { .nav, .menu, .gallery-btns, .hero::before, .final::before { display: none !important; } body { background: #fff; color: #000; } }
@media (max-width: 420px) {
  .h1 { font-size: clamp(2.2rem, 10.6vw, 2.7rem); }
  .h2 { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
  .actions .stores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
  .store-soon { padding: 0 12px; }
  .store-soon svg { display: none; }
  .store-soon .plat { display: none; }
  .actions .btn { width: 100%; }
}