/* =====================================================================
   Quantum Loop Learning — Standards v3 "The Library"
   One family (Archivo) at three widths. White pages, black type,
   four wayfinding zones. Every rule below is reused on inner pages.
   ===================================================================== */

:root {
  /* Base */
  --white: #FFFFFF;
  --stone: #F0F0EE;       /* secondary ground */
  --stone-2: #E4E4E1;
  --line: #CFCFCB;
  --black: #000000;
  --graphite: #3A3A38;
  --quiet: #6B6B67;

  /* Wayfinding zones (signage colors) */
  --garage: #FF5A1F;  --garage-ink: #000;
  --donor: #00894D;   --donor-ink: #fff;
  --manor: #2D5BFF;   --manor-ink: #fff;
  --media: #D4006F;   --media-ink: #fff;
  --spark: #F2B705;   --spark-ink: #000;
  --qll: #000;        --qll-ink: #fff;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --max: 1280px;
  --gutter: clamp(16px, 3.6vw, 48px);
  --sec: clamp(76px, 10vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: var(--font); font-size: 18px; line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: #000; color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Type: three widths of one family ---------- */
.wide, h1, h2 { font-stretch: 125%; font-variation-settings: "wdth" 125; }
.cond { font-stretch: 75%; font-variation-settings: "wdth" 75; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
h1 { font-size: clamp(40px, 5.6vw, 82px); letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.2vw, 60px); letter-spacing: -0.03em; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
p { margin: 0; }
.standfirst { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--graphite); max-width: 34ch; margin-top: 20px; }
.standfirst.long { max-width: 52ch; }
.note { font-size: 15px; color: var(--quiet); }
.qhead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.qhead .standfirst { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border: 2px solid var(--black);
  font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  background: var(--black); color: var(--white); border-radius: 0;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--white); color: var(--black); }
.btn.ghost { background: transparent; color: var(--black); }
.btn.ghost:hover { background: var(--black); color: var(--white); }
.btn.zone { background: var(--z); border-color: var(--z); color: var(--zi); }
.btn.zone:hover { background: var(--white); color: var(--black); border-color: var(--black); }
.btn .tri { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Wayfinding pictogram (CERN-style signage) ---------- */
.sign { display: inline-grid; place-items: center; width: var(--s, 40px); height: var(--s, 40px); background: var(--z); color: var(--zi); flex: none; }
.sign svg { width: 62%; height: 62%; }
.z-garage { --z: var(--garage); --zi: var(--garage-ink); }
.z-donor  { --z: var(--donor);  --zi: var(--donor-ink); }
.z-manor  { --z: var(--manor);  --zi: var(--manor-ink); }
.z-media  { --z: var(--media);  --zi: var(--media-ink); }
.z-spark  { --z: var(--spark);  --zi: var(--spark-ink); }
.z-qll    { --z: var(--qll);    --zi: var(--qll-ink); }

/* ---------- Utility bar + header ---------- */
/* Header: fixed, hides on scroll down, returns on scroll up (Quanta Magazine pattern) */
:root { --head-h: 60px; --head-ease: cubic-bezier(0.09, 0.47, 0.18, 0.99); }
@media (min-width: 34em) { :root { --head-h: 80px; } }
body { padding-top: var(--head-h); }
body.has-immersive { padding-top: 0; }
@media (max-width: 33.99em) { body.has-immersive { padding-top: var(--head-h); } }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--head-h); background: var(--white); color: var(--black); box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition-property: transform, background-color, box-shadow, color; transition-duration: .5s; transition-timing-function: var(--head-ease); }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header .bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--head-h); }
.nav-gradient { display: none; position: absolute; top: 0; left: 0; right: 0; height: 110px; pointer-events: none; background: linear-gradient(#1a1a1a, rgba(26,26,26,.05) 90%, rgba(26,26,26,0)); transition: transform .5s ease-in-out; }
.nav-gradient.is-hidden { transform: translateY(-100%); }
@media (min-width: 34em) {
  .nav-gradient { display: block; height: 160px; }
  .site-header.is-immersive:not(.is-solid) { background-color: transparent; box-shadow: none; color: var(--white); }
  .site-header.is-immersive:not(.is-solid) .nav a { color: var(--white); }
  .site-header.is-immersive:not(.is-solid) .nav a:hover, .site-header.is-immersive:not(.is-solid) .nav a[aria-current="page"] { background: rgba(255,255,255,.14); }
  .site-header.is-immersive:not(.is-solid) .brand .mark { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
  .site-header.is-immersive:not(.is-solid) .head-cta .btn { background: #fff; color: #000; border-color: #fff; }
  .site-header.is-immersive:not(.is-solid) .head-cta .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
  .site-header.is-immersive:not(.is-solid) .head-cta .btn:hover { background: transparent; color: #fff; border-color: #fff; }
  .site-header.is-immersive:not(.is-solid) .head-cta .btn.ghost:hover { background: #fff; color: #000; }
  .site-header.is-immersive:not(.is-solid) .menu-btn { background: transparent; border-color: #fff; }
  .site-header.is-immersive:not(.is-solid) .menu-btn span { background: #fff; }
}
.site-header .brand .mark svg { color: #fff; }

/* Lead film: full-bleed 12:5 frame, video covers it (Quanta Magazine homepage lede spec) */
.lede { padding: 0; }
.lede-frame { position: relative; padding-top: 41.6667%; overflow: hidden; background: #111; }
.lede-frame video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: 36px; height: 36px; background: #000; display: grid; place-items: center; }
.brand .mark svg { width: 24px; height: 24px; }
.brand .name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.nav { display: flex; gap: 2px; }
.nav a { text-decoration: none; font-weight: 650; font-size: 16px; padding: 8px 10px; white-space: nowrap; font-stretch: 88%; font-variation-settings: "wdth" 88; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--stone); }
.head-cta { display: flex; gap: 10px; align-items: center; }
.head-cta .btn { min-height: 44px; padding: 0 18px; font-size: 15.5px; white-space: nowrap; }
.menu-btn { display: none; width: 46px; height: 46px; border: 2px solid #000; background: #fff; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 2px; background: #000; margin: 4px auto; }
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: #fff; padding: 84px var(--gutter) 40px; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; transition: .2s; }
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu .big { font-weight: 800; font-size: 30px; letter-spacing: -0.02em; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); font-stretch: 112%; font-variation-settings: "wdth" 112; }
.mobile-menu .apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mobile-menu .apps a { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 700; font-size: 15px; padding: 10px; border: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 20px; }
.mobile-close { position: absolute; top: 12px; right: var(--gutter); display: block !important; font-size: 26px; line-height: 1; }

/* ---------- Masthead (Monocle) ---------- */
.masthead { padding: clamp(28px, 4vw, 52px) 0 0; }
.masthead .title { font-weight: 900; font-size: clamp(34px, 8.6vw, 132px); letter-spacing: -0.045em; line-height: .86; font-stretch: 125%; font-variation-settings: "wdth" 125; white-space: nowrap; }
.masthead .rule { display: flex; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; border-top: 2px solid #000; border-bottom: 1px solid #000; margin-top: clamp(14px, 2vw, 24px); padding: 10px 0; font-size: 15px; font-weight: 600; }
.contents { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 0 0; font-size: 15px; }
.contents span { color: var(--quiet); font-weight: 600; }
.contents a { text-decoration: none; font-weight: 600; }
.contents a:hover { text-decoration: underline; }

/* ---------- Hero: question + shelf ---------- */
.hero { padding: clamp(44px, 6vw, 84px) 0 var(--sec); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero h1 { max-width: 14ch; font-size: clamp(38px, 3.9vw, 60px); }
.hero .standfirst { max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Shelf of living covers (Stripe Press) */
.shelf { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.3vw, 18px); padding-bottom: 26px; perspective: 1400px; }
.shelf::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: 0; height: 14px; background: var(--stone-2); border-top: 2px solid #000; }
.vol { position: relative; display: block; text-decoration: none; transform-origin: 50% 100%; transform: rotateY(-14deg); transition: transform .5s var(--ease); z-index: 1; }
.vol:hover, .vol:focus-visible { transform: rotateY(0) translateY(-14px); z-index: 2; }
.vol .cover { position: relative; aspect-ratio: 3 / 4.4; background: var(--z); color: var(--zi); overflow: hidden; box-shadow: 8px 10px 0 rgba(0,0,0,.12); }
.vol .cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: linear-gradient(to bottom, transparent, var(--z) 38%); z-index: 2; }
.vol .cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: rgba(0,0,0,.14); z-index: 2; }
.vol .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.vol .meta { position: absolute; left: 13%; right: 9%; top: 7%; bottom: 6%; display: flex; flex-direction: column; justify-content: space-between; z-index: 3; }
.vol .num { font-size: clamp(11px, .95vw, 14px); font-weight: 700; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.vol .t { font-weight: 900; font-size: clamp(18px, 2.1vw, 32px); line-height: .95; letter-spacing: -0.02em; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.vol .t small { display: block; font-size: .5em; font-weight: 700; letter-spacing: 0; margin-top: 6px; }
.vol .status { position: absolute; left: 0; right: 0; top: calc(100% + 34px); font-size: 13.5px; font-weight: 700; text-align: center; opacity: 0; transition: opacity .3s; }
.vol:hover .status, .vol:focus-visible .status { opacity: 1; }
.vol.forthcoming .cover { filter: saturate(.6); }

/* Living-cover motion (slow; stops with reduced motion) */
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes beat { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes glow { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.spin { transform-box: fill-box; transform-origin: center; animation: turn 40s linear infinite; }
.spin.rev { animation-direction: reverse; animation-duration: 60s; }
.float { animation: rise 7s ease-in-out infinite; }
.bar-a { transform-box: fill-box; transform-origin: 50% 100%; animation: beat 2.4s ease-in-out infinite; }
.blink { animation: glow 4s ease-in-out infinite; }

/* ---------- The mess (Cosmos) ---------- */
.mess-sec { background: var(--stone); }
.wall { columns: 4 220px; column-gap: 14px; }
.frag { break-inside: avoid; margin: 0 0 14px; background: #fff; padding: 18px; font-size: 16px; line-height: 1.4; }
.frag.sticky { background: #FFE97A; font-size: 18px; font-weight: 600; transform: rotate(-1.2deg); }
.frag.text { background: #fff; }
.frag.text .bubble { background: #E9E9E6; padding: 10px 14px; border-radius: 16px 16px 16px 4px; display: inline-block; }
.frag.text .bubble.me { background: #000; color: #fff; border-radius: 16px 16px 4px 16px; margin-top: 8px; float: right; clear: both; }
.frag.text::after { content: ""; display: block; clear: both; }
.frag.sheet { font-size: 13.5px; padding: 0; overflow: hidden; }
.frag.sheet table { width: 100%; border-collapse: collapse; }
.frag.sheet td, .frag.sheet th { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.frag.sheet th { background: var(--stone); font-weight: 600; }
.frag.sheet .red { color: #C0262D; font-weight: 700; }
.frag.receipt { font-size: 14.5px; font-stretch: 75%; font-variation-settings: "wdth" 75; border-top: 6px dotted var(--stone); }
.frag.receipt .row { display: flex; justify-content: space-between; }
.frag.board { background: #fff; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 10px solid #D9D9D5; padding: 10px; }
.frag.board svg { width: 100%; height: 100%; }
.frag.voice { display: flex; gap: 12px; align-items: center; }
.frag.voice .play { width: 38px; height: 38px; border-radius: 50%; background: #000; display: grid; place-items: center; flex: none; }
.frag.voice .play i { border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.frag.voice .wave { display: flex; gap: 2px; align-items: center; height: 26px; flex: 1; }
.frag.voice .wave b { width: 3px; background: #000; display: block; }
.frag.head { font-size: 22px; font-weight: 800; line-height: 1.15; font-stretch: 112%; font-variation-settings: "wdth" 112; background: transparent; padding: 18px 4px; }
.frag.head span { display: block; font-size: 15px; font-weight: 600; color: var(--quiet); margin-top: 8px; font-stretch: 100%; font-variation-settings: "wdth" 100; }

/* ---------- Cost essay (The Pudding) ---------- */
.essay-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.controls { display: grid; gap: 30px; margin-top: 34px; }
.ctl label { display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.ctl output { font-weight: 900; font-size: 22px; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: #000; outline-offset: 8px; }
.ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #fff; border: 4px solid #000; border-radius: 50%; cursor: pointer; }
.ctl input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 4px solid #000; border-radius: 50%; cursor: pointer; }
.tally { position: sticky; top: calc(var(--head-h) + 24px); }
.tally .big { font-weight: 900; font-size: clamp(60px, 9vw, 132px); line-height: .9; letter-spacing: -0.05em; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.tally .unit { font-size: 20px; font-weight: 700; margin-top: 10px; }
.tally .said { font-size: clamp(19px, 1.6vw, 22px); color: var(--graphite); margin-top: 14px; max-width: 40ch; }
.tally .said b { color: #000; background: #FFE97A; padding: 0 3px; }
.dots { display: grid; grid-template-columns: repeat(40, 1fr); gap: 3px; margin-top: 28px; }
.dots i:not(.on) { display: none; }
.dots i { aspect-ratio: 1; background: #000; border-radius: 50%; transform: scale(0); transition: transform .35s var(--ease); }
.dots i.on { transform: scale(1); }
.dots-key { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 14.5px; color: var(--quiet); }
.dots-key .k { display: inline-flex; align-items: center; gap: 8px; }
.dots-key .k i { width: 10px; height: 10px; background: #000; border-radius: 50%; }

/* ---------- Film ---------- */
.film-sec { background: var(--stone); padding: var(--sec) 0; }
.film { position: relative; display: block; width: 100%; aspect-ratio: 16 / 8; background: #1A1A19; border: 0; padding: 0; cursor: pointer; overflow: hidden; color: #fff; text-align: left; }
.film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .3s, transform .8s var(--ease); }
.film:hover img { opacity: 1; transform: scale(1.02); }
.film .play { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); display: flex; align-items: center; gap: 16px; background: #fff; color: #000; padding: 12px 22px 12px 12px; font-weight: 700; font-size: 18px; z-index: 1; }
.film .play i { width: 48px; height: 48px; background: #000; display: grid; place-items: center; }
.film .play i::before { content: ""; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.film-cap { display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-top: 18px; }
.film-cap p { max-width: 60ch; color: var(--graphite); }

/* ---------- The library: catalog entries (Stripe Press + Standards Manual) ---------- */
.entry { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); padding: clamp(36px, 5vw, 64px) 0; border-top: 2px solid #000; align-items: start; }
.entry:last-child { border-bottom: 2px solid #000; }
.entry .vol { transform: none; max-width: 300px; }
.entry .vol:hover { transform: translateY(-8px); }
.entry .status-line { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.entry .status-line .dot { width: 10px; height: 10px; border-radius: 50%; background: #00A35C; }
.entry .status-line.later .dot { background: transparent; border: 2px solid #000; }
.entry h3 { font-size: clamp(30px, 3.4vw, 46px); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; letter-spacing: -0.03em; }
.entry .credit { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--graphite); }
.entry .desc { margin-top: 18px; font-size: 18px; color: var(--graphite); max-width: 44ch; }
.entry .actions { margin-top: 26px; }
.spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec caption { text-align: left; font-weight: 700; font-size: 15px; padding-bottom: 10px; caption-side: top; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 11px 0; border-top: 1px solid var(--line); }
.spec th { width: 38%; font-weight: 600; color: var(--quiet); padding-right: 14px; }
.spec td { font-weight: 600; }

/* ---------- Brain Center (Are.na + Linear) ---------- */
.bc-sec { background: var(--stone); }
.bc { background: #fff; border: 2px solid #000; }
.bc-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 2px solid #000; }
.bc-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.bc-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 2px solid transparent; background: none; padding: 6px 12px 6px 6px; font-weight: 700; font-size: 15px; cursor: pointer; }
.bc-tabs button .sign { --s: 24px; }
.bc-tabs button[aria-selected="true"] { border-color: #000; }
.bc-count { font-size: 14.5px; color: var(--quiet); font-weight: 600; }
.bc-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.channels { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-right: 2px solid #000; }
.channel h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.channel h4 span { color: var(--quiet); font-weight: 600; }
.blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.block { aspect-ratio: 1; border: 1px solid var(--line); background: #fff; padding: 6px; font-size: 11.5px; line-height: 1.2; overflow: hidden; color: var(--graphite); transition: background .25s, border-color .25s, opacity .25s, color .25s; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.block.img { background: repeating-linear-gradient(45deg, #ECECE9 0 6px, #F6F6F4 6px 12px); }
.block.file::before { content: "PDF"; display: block; font-weight: 800; color: #000; margin-bottom: 3px; }
.bc.asking .block { opacity: .35; }
.bc.asking .block.hit { opacity: 1; background: var(--z); border-color: var(--z); color: var(--zi); }
.bc.asking .block.hit.img { background: var(--z); }
.ask { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ask .prompt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid #000; padding: 12px 14px; font-weight: 600; min-height: 52px; }
.ask .prompt kbd { font-family: var(--font); font-size: 13px; border: 1px solid var(--line); padding: 1px 7px; color: var(--quiet); }
.ask .suggest { display: grid; gap: 6px; }
.ask .suggest button { text-align: left; background: var(--stone); border: 0; padding: 10px 12px; font-weight: 600; font-size: 15px; cursor: pointer; }
.ask .suggest button:hover, .ask .suggest button[aria-pressed="true"] { background: #000; color: #fff; }
.answer { font-size: 17px; line-height: 1.5; min-height: 120px; }
.answer .cited { margin-top: 10px; font-size: 14px; color: var(--quiet); font-weight: 600; }

/* ---------- Route (CERN wayfinding) ---------- */
.route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 10px; }
.stop:not(:last-child)::after { content: ""; position: absolute; left: 60px; right: -28px; top: 29px; height: 6px; background: #000; }
.stop { position: relative; }
.stop .station { width: 64px; height: 64px; border: 6px solid #000; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 900; font-size: 22px; position: relative; z-index: 1; }
.stop:last-child .station { background: #000; color: #fff; }
.stop h3 { margin-top: 22px; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.stop p { margin-top: 10px; color: var(--graphite); font-size: 17px; max-width: 30ch; }
.stop .time { margin-top: 14px; font-size: 14.5px; font-weight: 700; display: inline-block; border: 2px solid #000; padding: 2px 8px; }

/* ---------- Interviews (The Creative Independent) ---------- */
.ix-list { border-top: 2px solid #000; }
.ix { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 30px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ix .h { font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.ix .h em { font-style: normal; color: var(--quiet); font-weight: 600; }
.ix .when { font-size: 15px; font-weight: 600; color: var(--quiet); white-space: nowrap; }
a.ix:hover .h { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ix.pending .h { color: var(--quiet); }
.qa { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); margin-top: clamp(40px, 6vw, 80px); }
.qa .portrait { aspect-ratio: 4 / 5; background: #fff; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--quiet); font-size: 15px; text-align: center; padding: 20px; position: relative; overflow: hidden; }
.qa .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qa .who { margin-top: 12px; font-size: 15px; color: var(--quiet); font-weight: 600; }
.qa dl { margin: 0; }
.qa dt { font-weight: 800; font-size: 20px; line-height: 1.3; margin-top: 30px; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 10px 0 0; font-size: 19px; line-height: 1.6; color: var(--graphite); max-width: 60ch; }

/* ---------- Ways to work ---------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #000; }
.way { padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.way + .way { border-left: 2px solid #000; }
.way.lead-way { background: #000; color: #fff; }
.way .k { font-weight: 700; font-size: 15px; }
.way h3 { font-size: clamp(26px, 2.4vw, 34px); font-stretch: 112%; font-variation-settings: "wdth" 112; }
.way .spec { margin: 6px 0 14px; }
.way.lead-way .spec th { color: #B9B9B4; }
.way.lead-way .spec th, .way.lead-way .spec td { border-color: #444; }
.way .btn { margin-top: auto; }
.way.lead-way .btn { background: #fff; color: #000; border-color: #fff; }
.way.lead-way .btn:hover { background: #000; color: #fff; }

/* ---------- FAQ (Quanta Q&A) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 30px; line-height: .8; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: -4px 0 22px; color: var(--graphite); max-width: 62ch; }

/* ---------- Closing ---------- */
.closing { border-top: 2px solid #000; padding: var(--sec) 0; }
.closing .title { font-weight: 900; font-size: clamp(44px, 9vw, 140px); letter-spacing: -0.045em; line-height: .9; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.closing-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 60px; flex-wrap: wrap; margin-top: 32px; }
.closing-row p { font-size: 21px; max-width: 34ch; color: var(--graphite); }

/* ---------- Footer + colophon (Standards Manual) ---------- */
.site-footer { background: var(--stone); padding: 60px 0 30px; font-size: 16px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; }
.site-footer h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--quiet); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul a { display: inline-flex; gap: 8px; align-items: center; }
.site-footer ul .sign { --s: 18px; }
.colophon { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; font-size: 14px; color: var(--quiet); }
.colophon a { font-weight: 500; }

/* ---------- Video modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.86); display: grid; place-items: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: .2s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-inner { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; }
.modal-inner iframe { width: 100%; height: 100%; border: 0; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; background: #fff; color: #000; font-size: 26px; cursor: pointer; }

section.pad { padding: var(--sec) 0; }

/* ---------- Inner page: volume (app) page ---------- */
.vol-hero { padding: clamp(40px, 6vw, 80px) 0 var(--sec); border-bottom: 2px solid #000; }
.crumbs { font-size: 15px; font-weight: 600; color: var(--quiet); margin-bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--black); }
.vol-hero-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.vol-hero .vol { transform: none; max-width: 360px; }
.vol-hero h1 { font-size: clamp(44px, 6.4vw, 96px); }
.zone-band { height: 14px; background: var(--z); }
.findlist { counter-reset: f; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; border-top: 2px solid #000; }
.findlist li { list-style: none; padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr; gap: 18px; }
.findlist li::before { content: ""; width: 22px; height: 22px; background: var(--z); margin-top: 4px; }
.findlist strong { display: block; font-size: 19px; }
.findlist span { color: var(--graphite); font-size: 17px; }
.sample { border: 2px solid #000; background: #fff; }
.sample .row { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.sample .row:last-child { border-bottom: 0; }
.sample .row .n { font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 20px; color: var(--quiet); }
.sample .row .q { font-weight: 700; }
.sample .row .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sample .row .opts span { font-size: 14px; border: 1px solid var(--line); padding: 4px 10px; color: var(--graphite); }
.sample-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 18px; background: var(--z); color: var(--zi); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1660px) {
  .head-cta .btn.ghost { display: none; }
}
@media (max-width: 1180px) {
  .nav, .head-cta .btn.ghost { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 980px) {
  .hero-grid, .qhead, .essay-grid, .faq, .qa, .vol-hero-grid { grid-template-columns: 1fr; }
  .entry { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .entry .spec-col { grid-column: 1 / -1; }
  .bc-body { grid-template-columns: 1fr; }
  .channels { border-right: 0; border-bottom: 2px solid #000; }
  .ways { grid-template-columns: 1fr; }
  .way + .way { border-left: 0; border-top: 2px solid #000; }
  .route { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .stop:not(:last-child)::after { display: none; }
  .tally { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .qa .portrait { max-width: 360px; }
  .findlist { grid-template-columns: 1fr; }
  }
@media (max-width: 640px) {
  body { font-size: 17px; }
  .head-cta .btn { display: none; }
  .shelf { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 4px 30px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); perspective: none; }
  .shelf::after { display: none; }
  .vol { transform: none; scroll-snap-align: start; }
  .vol .status { display: none; }
  .vol .t { font-size: 30px; }
  .vol .num { font-size: 14px; }
  .entry { grid-template-columns: 1fr; }
  .entry .vol { max-width: 220px; }
  .channels { grid-template-columns: 1fr; }
  .route { grid-template-columns: 1fr; }
  .dots { grid-template-columns: repeat(25, 1fr); }
  .actions .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .ix { grid-template-columns: 1fr; gap: 6px; }
  .masthead .rule { font-size: 14px; }
  .contents { gap: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.more-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); gap: 28px; }
.more-shelf .vol { transform: none; }
.more-shelf .vol .status { opacity: 1; position: static; margin-top: 12px; text-align: left; }
@media (max-width: 640px) { .more-shelf { grid-template-columns: repeat(4, 70%); overflow-x: auto; scroll-snap-type: x mandatory; } }

/* ---------- How it works (inner page) ---------- */
.prose p { font-size: 19px; line-height: 1.65; color: var(--graphite); max-width: 62ch; }
.prose p + p { margin-top: 18px; }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.funnel { width: 100%; height: auto; background: #fff; padding: 18px; border: 2px solid #000; }
.funnel .fn { fill: var(--stone); stroke: #000; stroke-width: 2; }
.funnel .dots circle { fill: var(--quiet); }
.funnel .front circle { fill: #000; }
.funnel text { font-family: var(--font); font-size: 15px; font-weight: 700; fill: #000; }
.pull { margin: clamp(40px, 6vw, 72px) 0 0; padding: 30px 0 0; border-top: 2px solid #000; max-width: 900px; }
.pull blockquote { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.pull figcaption { margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--quiet); }
.route.four-up .stop p { max-width: 34ch; }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid #000; background: #fff; }
.tool { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.tool + .tool { border-left: 2px solid #000; }
.tool .tn { font-weight: 900; font-size: 34px; line-height: 1; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.tool h3 { font-size: 22px; }
.tool p { color: var(--graphite); font-size: 16.5px; }
.tool .free { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 14px; border: 2px solid #000; padding: 2px 10px; }
.tool.sim { background: #000; color: #fff; }
.tool.sim p { color: #CFCFCB; }
.tool.sim .free { border-color: #fff; }
.seminar { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.seminar-copy { font-size: 19px; line-height: 1.65; color: var(--graphite); max-width: 58ch; }
/* "Every day after" link on the route map */
a.time { text-decoration: none; color: inherit; transition: background .15s, color .15s; }
a.time:hover, a.time:focus-visible { background: #000; color: #fff; }
@media (max-width: 980px) { .why-grid, .seminar { grid-template-columns: 1fr; } .tools { grid-template-columns: 1fr 1fr; } .tool:nth-child(3) { border-left: 0; } .tool:nth-child(n+3) { border-top: 2px solid #000; } }
@media (max-width: 640px) { .tools { grid-template-columns: 1fr; } .tool + .tool { border-left: 0; border-top: 2px solid #000; } }

/* ---------- Hall of Fame ---------- */
.kicker { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); margin: 0 0 14px; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid #000; border-left: 2px solid #000; }
.logo-slot { aspect-ratio: 1 / 1; border-right: 2px solid #000; border-bottom: 2px solid #000; display: grid; place-items: center; background: #fff; padding: 14px; }
.logo-slot span { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); text-align: center; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.logo-slot:not(.has-logo) { background: repeating-linear-gradient(135deg, #fff 0 14px, var(--stone) 14px 15px); }
.logo-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.roster-note { margin: 28px 0 0; font-size: 19px; max-width: 62ch; color: var(--graphite); }
.roster-note strong { color: #000; }
.slide-ctrl { display: flex; align-items: center; gap: 14px; justify-self: end; }
.slide-btn { width: 52px; height: 52px; border: 2px solid #000; background: #fff; font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; }
.slide-btn:hover { background: #000; color: #fff; }
.slide-btn:disabled { opacity: .3; cursor: default; background: #fff; color: #000; }
.slide-count { font-weight: 700; font-size: 16px; min-width: 3.5em; text-align: center; }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.member { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; background: #fff; border: 2px solid #000; padding: clamp(20px, 3vw, 40px); }
.member-photo { margin: 0; }
.member-photo img { width: 100%; height: auto; display: block; border: 2px solid #000; }
.member-photo figcaption { font-size: 15px; font-weight: 600; color: var(--quiet); margin-top: 10px; }
.member-photo.empty { aspect-ratio: 2 / 3; border: 2px dashed var(--line); display: grid; place-items: center; background: var(--stone); }
.member-photo.empty span { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); font-stretch: 75%; font-variation-settings: "wdth" 75; }
.member blockquote { margin: 0; font-weight: 600; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.3; letter-spacing: -0.01em; }
.member .who { margin: 28px 0 0; padding-top: 18px; border-top: 2px solid #000; display: flex; flex-direction: column; gap: 4px; font-size: 17px; }
.member .who strong { font-size: 20px; }
.member .who span { color: var(--graphite); }
.embed { position: relative; padding-top: 56.25%; background: #000; border: 2px solid #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cta-band { border-top: 2px solid #000; }
.cta-band .actions { align-self: center; }
.merch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.merch img { width: 100%; height: auto; display: block; background: #fff; border: 2px solid #000; }
.merch h2 { margin: 0 0 16px; }
@media (max-width: 900px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member, .merch { grid-template-columns: 1fr; }
  .member { align-items: start; align-content: start; gap: 24px; }
  .member-photo { max-width: 420px; }
  .slide-ctrl { justify-self: start; }
}

/* ---------- Shop ---------- */
.shop-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.shop-pair figure { margin: 0; }
.shop-pair img { width: 100%; height: auto; display: block; border: 2px solid #000; background: #fff; }
.shop-pair figcaption { font-size: 15px; font-weight: 600; color: var(--quiet); margin-top: 10px; }
.shop-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 64px; align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.shop-copy h2 { margin: 0 0 18px; }
.shop-copy .prose p { font-size: 19px; color: var(--graphite); margin: 0 0 16px; }
.shop-copy .prose em { font-style: normal; font-weight: 700; color: #000; }
.soon-badge { display: inline-block; background: #000; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; margin-bottom: 22px; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.notify-note { border: 2px solid #000; background: #fff; padding: 22px 24px; font-size: 18px; }
.notify-note strong { display: block; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; font-stretch: 75%; font-variation-settings: "wdth" 75; }
@media (max-width: 900px) { .shop-copy { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .shop-pair { grid-template-columns: 1fr; } }

/* ---------- Request a briefing ---------- */
.brief-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.form-intro h2 { margin: 0 0 18px; }
.call-box { margin: 32px 0; background: #000; color: #fff; padding: 24px 26px; }
.call-box p { margin: 0 0 6px; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.call-box a { display: block; color: #fff; text-decoration: none; font-weight: 900; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.02em; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.call-box a:hover { text-decoration: underline; }
.call-box span { display: block; margin-top: 6px; font-size: 15px; opacity: .8; }
.promise-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #000; }
.promise-list li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line); font-size: 18px; position: relative; }
.promise-list li::before { content: "\2726"; position: absolute; left: 2px; top: 14px; }
.form-card { background: #fff; border: 2px solid #000; padding: clamp(22px, 3.5vw, 44px); }
.form-card h3 { margin: 0 0 8px; font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.form-subtitle { margin: 0 0 26px; color: var(--graphite); font-size: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.form-group input, .form-group textarea { width: 100%; font: inherit; font-size: 17px; padding: 13px 14px; border: 2px solid #000; border-radius: 0; background: #fff; color: #000; }
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus { outline: 3px solid var(--z-manor, #2D5BFF); outline-offset: 1px; }
.required { color: #000; }
.optional { font-weight: 500; color: var(--quiet); }
.submit-btn { width: 100%; min-height: 56px; font-size: 17px; cursor: pointer; }
.submit-btn:disabled { opacity: .5; cursor: wait; }
.form-note { margin: 14px 0 0; font-size: 14px; color: var(--quiet); }
.form-error { margin: 14px 0 0; padding: 12px 14px; border: 2px solid #D4006F; color: #000; font-size: 15px; }
.success-msg { text-align: center; padding: 40px 10px; }
.success-msg .checkmark { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.success-msg h4 { margin: 0 0 10px; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.success-msg p { margin: 0 auto; max-width: 42ch; font-size: 18px; color: var(--graphite); }
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-cards .way { padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px); }
.price { margin: 4px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; padding: 16px 0; }
.price .amt { font-weight: 900; font-size: clamp(52px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.04em; font-stretch: 112%; font-variation-settings: "wdth" 112; }
.price .per, .price .from { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-stretch: 75%; font-variation-settings: "wdth" 75; }
.price .from { flex-basis: 100%; }
.price-desc { margin: 0; font-size: 17px; line-height: 1.5; color: var(--graphite); }
.lead-way .price-desc { color: #D8D8D4; }

/* ---------- Policies ---------- */
.policy-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.policy-toc a { border: 2px solid #000; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.policy-toc a:hover { background: #000; color: #fff; }
.policy { scroll-margin-top: 90px; }
.policy-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.policy-head { position: sticky; top: 100px; }
.policy-head h2 { margin: 0; }
.policy-body { max-width: 72ch; }
.policy-body h3 { font-weight: 800; font-size: 21px; letter-spacing: -0.01em; margin: 34px 0 10px; padding-top: 18px; border-top: 2px solid #000; }
.policy-body h3:first-child { margin-top: 0; }
.policy-body p, .policy-body li { font-size: 17.5px; line-height: 1.65; color: var(--graphite); }
.policy-body p { margin: 0 0 12px; }
.policy-body ul { margin: 0 0 12px; padding-left: 22px; }
.policy-body li { margin-bottom: 8px; }
.policy-body strong { color: #000; }
.policy-contact { border-top: 2px solid #000; }
.policy-contact h2 { margin: 0 0 12px; }
.billing-note { margin-top: 22px; border: 2px solid #000; padding: 20px 24px; display: grid; gap: 10px; background: var(--stone); }
.billing-note p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--graphite); }
.billing-note strong { color: #000; }
@media (max-width: 900px) { .policy-grid { grid-template-columns: 1fr; } .policy-head { position: static; } }

.price-opts { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.price-opts li { padding: 9px 0 9px 24px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15.5px; position: relative; }
.lead-way .price-opts li { border-color: #444; }
.price-opts li::before { content: "\2726"; position: absolute; left: 2px; }
.price-desc.small { font-size: 15px; }
.price-desc a { color: inherit; font-weight: 700; }

.pay-stack { margin-top: auto; display: grid; gap: 10px; }
.pay-stack .btn { margin-top: 0; }
.pay-stack .text-link { font-weight: 700; font-size: 15px; text-align: center; color: inherit; }
.pay-stack .secure { font-size: 13px; color: var(--quiet); text-align: center; }

.qa .portrait.has-photo { border: 2px solid #000; padding: 0; background: #000; }
.member .who a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.member .who a:hover { background: #000; color: #fff; text-decoration: none; }