/* ============================================================
   LOOK / CARE / WATCH - Magnetic content operating system

   Design system is lifted directly from ~/magnetic-v3/site/styles.css:
   same ground (#08090C), same panel ladder, same Inter 500/600/700, same
   -0.042em display tracking, same glass pill nav, same .rv reveal.

   The LCW triad is coded inside that palette rather than beside it. No new
   hues: the three beats are one white and two steps of the Magnetic blue,
   escalating as the loop deepens.

     --look   white       first contact, the brightest thing on screen
     --care   #6FA6FF     the stake
     --watch  #2F6BFF     the brand blue, where the loop lands

   That is the whole colour system. Two neutrals and one accent, same as the
   site. Nothing on this page is green, orange, or a second accent.
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/inter-700.woff2') format('woff2'); }

:root {
  --tint: 255, 255, 255;
  --bg: #08090C;
  --bg-raise: #0C0D11;
  --panel: #101116;
  --panel-2: #15161C;
  --line: rgba(var(--tint),.07);
  --line-strong: rgba(var(--tint),.12);
  --ink: #FFFFFF;
  --ink-soft: #D3D7DE;
  --dim: #A5A8B0;
  --faint: #868B96;
  --accent: #2F6BFF;
  --accent-lite: #6FA6FF;

  --look-rgb: 255, 255, 255;
  --care-rgb: 111, 166, 255;
  --watch-rgb: 47, 107, 255;
  --look: #FFFFFF;
  --look-dim: rgba(var(--look-rgb),.10);
  --care: #6FA6FF;
  --care-dim: rgba(var(--care-rgb),.14);
  --watch: #2F6BFF;
  --watch-dim: rgba(var(--watch-rgb),.16);

  --accent-deep: #1E52DB;
  --ink-2: #B9BDC6;
  --edge: rgba(var(--tint),.09);
  --glow-blue: 0 0 60px rgba(47,107,255,.45);
  --r-xl: 34px;
  --muted: #62656D;
  --well: #0A0B0F;
  --on-accent: #FFFFFF;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
::selection { background: rgba(var(--look-rgb),.28); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* the page grain - one layer, very low, keeps flat black from reading as dead */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.7) .5px, transparent .6px);
  background-size: 3px 3px;
}

/* ---------- type ---------- */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.042em; line-height: 1.04; }
h2 { font-size: clamp(27px, 3.5vw, 47px); line-height: 1.05; }
h3 { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.16; letter-spacing: -0.035em; }
h4 { font-size: 18px; letter-spacing: -0.03em; line-height: 1.25; }

/* the oversized words. -0.055em is tighter than the site h1 on purpose: at
   150px+ Inter's default sidebearing opens up and the word stops reading as
   one object. */
.mega {
  font-weight: 700;
  /* vh term keeps three stacked lines plus the footer inside one screen on
     a laptop viewport - 13.5vw alone overflows at 800px tall */
  font-size: clamp(54px, min(9.2vw, 15vh), 130px);
  line-height: .88;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.big {
  font-weight: 700;
  font-size: clamp(32px, 4.9vw, 70px);
  line-height: .98;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.lede { font-size: clamp(15px, 1.15vw, 17px); color: var(--dim); line-height: 1.55; letter-spacing: -0.014em; }

/* Andrew writes in stacked lines, not paragraphs: one idea per line, hard return,
   pivot words alone on their own line. Prose flow-setting destroys that rhythm,
   so .stack gives every child its own line box with tight leading. */
.stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.32; }
.stack > i { font-style: normal; display: block; }
.stack > i.hard { color: var(--ink); font-weight: 700; letter-spacing: -0.022em; }
.stack > i.turn {
  color: var(--faint); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  margin: 14px 0 6px;
}
.pull.stack { gap: 0; line-height: 1.16; }
.eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--faint);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12px; letter-spacing: .04em;
}
.ink-look { color: var(--look); }
.ink-care { color: var(--care); }
.ink-watch { color: var(--watch); }

/* ---------- chrome: progress + header + rail ---------- */
.prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-lite));
  z-index: 120; transition: width .1s linear;
  box-shadow: 0 0 12px rgba(47,107,255,.7);
}
.top { position: fixed; top: 18px; left: 0; right: 0; z-index: 110; padding: 0 24px; }
.top-bar {
  max-width: var(--maxw); margin: 0 auto; height: 58px;
  display: flex; align-items: center; gap: 14px; padding: 0 10px 0 12px;
  background: linear-gradient(180deg, rgba(30,31,37,.82) 0%, rgba(14,15,19,.82) 100%);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(var(--tint),.06);
}
@media (prefers-reduced-transparency: reduce) { .top-bar { background: #14151A; backdrop-filter: none; } }
.mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #7FB2FF 0%, #2F6BFF 55%, #143A9E 100%);
  box-shadow: 0 4px 14px rgba(47,107,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px;
}
.mark svg { width: 16px; height: 16px; }
.top-name { font-size: 15px; font-weight: 700; letter-spacing: -0.03em; }
.top-doc {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); padding-left: 14px; margin-left: 2px;
  border-left: 1px solid var(--line-strong);
}

/* the live beat readout - the deck telling you which move it is making */
.beat { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.beat-b {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  color: rgba(var(--tint),.30);
  border: 1px solid transparent;
  transition: color .35s ease, background .35s ease, border-color .35s ease;
}
.beat-b.on[data-b="look"]  { color: var(--look);  background: var(--look-dim);  border-color: rgba(var(--look-rgb),.3); }
.beat-b.on[data-b="care"]  { color: var(--care);  background: var(--care-dim);  border-color: rgba(var(--care-rgb),.32); }
.beat-b.on[data-b="watch"] { color: var(--watch); background: var(--watch-dim); border-color: rgba(var(--watch-rgb),.4); }
.top-ct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums;
  padding: 0 16px 0 14px; border-left: 1px solid var(--line-strong); margin-left: 4px;
}

/* section rail */
.rail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 105; display: grid; gap: 9px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 12px; }
.rail i {
  width: 20px; height: 2px; background: rgba(var(--tint),.18); border-radius: 2px;
  transition: width .3s ease, background .3s ease;
}
.rail a:hover i { background: rgba(var(--tint),.5); width: 28px; }
.rail a.on i { width: 34px; background: var(--accent-lite); box-shadow: 0 0 10px rgba(47,107,255,.8); }
.rail b {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); opacity: 0; transform: translateX(6px);
  transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
.rail a:hover b, .rail a.on b { opacity: 1; transform: none; }
@media (max-width: 1180px) { .rail { display: none; } }

/* ---------- section shell ---------- */
.s { position: relative; padding: 106px 0; }
.s-head { margin-bottom: 34px; }
.s-rule { display: none; }

.rv { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .08s; }
.rv[data-d="2"] { transition-delay: .16s; }
.rv[data-d="3"] { transition-delay: .24s; }
.rv[data-d="4"] { transition-delay: .32s; }
.rv[data-d="5"] { transition-delay: .40s; }

/* ---------- 01 cover ---------- */
.cover { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 118px 0 96px; position: relative; overflow: hidden; }
.cover-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cover-glow span { position: absolute; border-radius: 50%; filter: blur(120px); }
.cover-glow span:nth-child(1) { width: 620px; height: 620px; left: -180px; bottom: -220px; background: rgba(var(--watch-rgb),.13); }
.cover-glow span:nth-child(2) { width: 560px; height: 560px; right: -160px; top: -140px; background: rgba(var(--care-rgb),.07); }
.cover-glow span:nth-child(3) { width: 700px; height: 400px; left: 42%; top: 30%; background: rgba(var(--tint),.03); }
.cover .wrap { position: relative; z-index: 1; }
.cover-words { margin: 0 0 38px; }
.cover-words div { display: block; }
.cover-sub { max-width: 480px; font-size: clamp(15px, 1.25vw, 17px); color: var(--dim); letter-spacing: -0.016em; }
.cover-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.tagpill {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--dim); background: rgba(var(--tint),.03);
}
.cover-foot {
  position: absolute; left: 0; right: 0; bottom: 34px; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
}
.ticks { flex: 1; display: flex; gap: 4px; align-items: flex-end; height: 14px; }
.ticks i { flex: 1; height: 5px; background: rgba(var(--tint),.14); border-radius: 1px; }
.ticks i:first-child { height: 14px; background: var(--accent-lite); }
.scrollcue { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.scrollcue svg { width: 13px; height: 13px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- flow chain (02, 17) ---------- */
.chain { display: grid; gap: 0; }
.chain-n {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 20px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--line);
}
.chain-n .k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--faint); flex: 0 0 24px;
}
.chain-n .t { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; }
.chain-n .n { margin-left: auto; font-size: 13px; color: var(--faint); text-align: right; }
.chain-n.ask { background: transparent; border-style: dashed; border-color: rgba(var(--tint),.14); }
.chain-n.ask .t { color: var(--dim); font-weight: 600; letter-spacing: -0.01em; text-transform: none; font-size: 14.5px; }
.chain-n.is-look  { border-color: rgba(var(--look-rgb),.32); background: linear-gradient(180deg, rgba(var(--look-rgb),.07), transparent); }
.chain-n.is-look .t { color: var(--look); }
.chain-n.is-care  { border-color: rgba(var(--care-rgb),.32); background: linear-gradient(180deg, rgba(var(--care-rgb),.07), transparent); }
.chain-n.is-care .t { color: var(--care); }
.chain-n.is-watch { border-color: rgba(var(--watch-rgb),.4); background: linear-gradient(180deg, rgba(var(--watch-rgb),.10), transparent); }
.chain-n.is-watch .t { color: var(--accent-lite); }
.chain-n.is-end { border-color: rgba(47,107,255,.35); background: linear-gradient(180deg, rgba(47,107,255,.09), transparent); }
.chain-n.is-end .t { color: var(--accent-lite); }
.chain-link { height: 26px; display: flex; align-items: center; padding-left: 39px; }
.chain-link i { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(var(--tint),.05), rgba(var(--tint),.28), rgba(var(--tint),.05)); display: block; }
.chain-link svg { width: 11px; height: 11px; color: rgba(var(--tint),.3); margin-left: -6px; }

/* the triad node inside a chain */
.chain-triad { display: flex; gap: 8px; padding: 15px 20px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--panel-2); }
.chain-triad span {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.chain-triad span:nth-child(1) { color: var(--look);  background: var(--look-dim); }
.chain-triad span:nth-child(2) { color: var(--care);  background: var(--care-dim); }
.chain-triad span:nth-child(3) { color: var(--accent-lite); background: var(--watch-dim); }

/* ---------- 02 split ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: start; }
.figure { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); position: relative; background: var(--panel); }
.figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(6,7,9,.92));
  font-size: 13px; color: rgba(255,255,255,.82); letter-spacing: -0.01em;
}
.figure figcaption b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--look); margin-bottom: 5px; }

.pull {
  margin-top: 64px; padding: 34px 38px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--panel);
  font-size: clamp(18px, 1.9vw, 24px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.22;
}
.pull em { font-style: normal; color: var(--faint); }

/* ---------- 03 problem ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.vs-card { padding: 34px; border-radius: var(--r-md); position: relative; }
.vs-card.dead { border: 1px dashed rgba(var(--tint),.18); background: rgba(var(--tint),.025); }
.vs-card.live { border: 1px solid rgba(var(--look-rgb),.34); background: linear-gradient(180deg, rgba(var(--look-rgb),.06), transparent); box-shadow: 0 0 60px rgba(var(--look-rgb),.07); }
.vs-lab { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; }
.vs-card.dead .vs-lab { color: var(--faint); }
.vs-card.live .vs-lab { color: var(--look); }
.vs-q { font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; }
.vs-card.dead .vs-q { color: var(--muted); }
.vs-card.live .vs-q { color: var(--ink); }
.vs-note { margin-top: 20px; font-size: 13px; color: var(--faint); }
.wave { margin-top: 28px; height: 44px; width: 100%; display: block; }

/* ---------- 04 hero diagram ---------- */
.system { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; }
.sys-col {
  padding: 54px 34px 44px; border-radius: var(--r-md);
  min-height: 336px; display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--panel);
  position: relative; overflow: hidden;
  transition: border-color .5s ease, background .5s ease, transform .5s ease;
}
.sys-col::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: currentColor; opacity: .0; transition: opacity .5s ease;
}
.sys-col.on::before { opacity: 1; }
.sys-col[data-c="look"]  { color: var(--look); }
.sys-col[data-c="care"]  { color: var(--care); }
.sys-col[data-c="watch"] { color: var(--watch); }
.sys-col.on { transform: translateY(-6px); }
.sys-col.on[data-c="look"]  { border-color: rgba(var(--look-rgb),.36);  background: linear-gradient(180deg, rgba(var(--look-rgb),.08), var(--panel)); }
.sys-col.on[data-c="care"]  { border-color: rgba(var(--care-rgb),.36);  background: linear-gradient(180deg, rgba(var(--care-rgb),.08), var(--panel)); }
.sys-col.on[data-c="watch"] { border-color: rgba(var(--watch-rgb),.42); background: linear-gradient(180deg, rgba(var(--watch-rgb),.12), var(--panel)); }
.sys-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--faint); }
.sys-w {
  font-size: clamp(32px, 3.9vw, 56px); font-weight: 700; line-height: .93;
  letter-spacing: -0.055em; text-transform: uppercase; margin: 26px 0 26px;
  color: rgba(var(--tint),.34); transition: color .5s ease;
}
.sys-col.on .sys-w { color: currentColor; }
.sys-col[data-c="watch"].on .sys-w { color: var(--accent-lite); }
.sys-q { font-size: clamp(15px, 1.35vw, 18px); color: var(--ink-soft); letter-spacing: -0.025em; line-height: 1.3; }
.sys-does { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.sys-arr { display: flex; align-items: center; justify-content: center; padding: 0 11px; }
.sys-arr svg { width: 26px; height: 26px; color: rgba(var(--tint),.22); }
.sys-foot { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.sys-foot .bar { flex: 1; height: 1px; background: var(--line); }
.sys-foot span { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

/* ---------- 05/06/07 word sections ---------- */
.word-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 60px; align-items: end; margin-bottom: 56px; }
.word-def { font-size: clamp(17px, 1.75vw, 22px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.22; }
.word-def span { color: var(--faint); display: block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }

.grid-m { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mech {
  padding: 26px 18px 22px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  display: flex; flex-direction: column; gap: 14px; min-height: 116px;
}
.mech:hover { transform: translateY(-4px); }
.mech i {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal; font-size: 10.5px; color: var(--faint);
}
.mech b { font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; margin-top: auto; }
.grid-m.look .mech:hover { border-color: rgba(var(--look-rgb),.36); background: linear-gradient(180deg, rgba(var(--look-rgb),.07), var(--panel)); }
.grid-m.look .mech:hover b { color: var(--look); }
.grid-m.care .mech:hover { border-color: rgba(var(--care-rgb),.36); background: linear-gradient(180deg, rgba(var(--care-rgb),.07), var(--panel)); }
.grid-m.care .mech:hover b { color: var(--care); }
.grid-m.watch .mech:hover { border-color: rgba(var(--watch-rgb),.42); background: linear-gradient(180deg, rgba(var(--watch-rgb),.10), var(--panel)); }
.grid-m.watch .mech:hover b { color: var(--accent-lite); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; }
.chip {
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); background: rgba(var(--tint),.03);
  transition: border-color .2s ease, color .2s ease;
}
.chip:hover { border-color: rgba(var(--tint),.28); color: var(--ink); }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 12px; margin-top: 40px; }
.quote {
  padding: 22px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: 15px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.3;
}
.quote span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--care); margin-bottom: 12px; }

.rule-bar {
  margin-top: 52px; padding: 30px 34px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--panel);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px;
}
.rule-bar div b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.rule-bar div p { font-size: 14.5px; color: var(--ink-soft); letter-spacing: -0.015em; line-height: 1.4; }

.strike {
  margin-top: 44px; padding: 34px 38px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(var(--tint),.05), transparent);
}
.strike .no { font-size: clamp(19px, 2vw, 26px); font-weight: 700; letter-spacing: -0.04em; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.strike .yes { margin-top: 16px; font-size: clamp(17px, 1.8vw, 23px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; }

/* ---------- 08 the loop ---------- */
.descend { position: relative; margin-top: 20px; }
.descend::before {
  content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(var(--look-rgb),.45), rgba(var(--care-rgb),.5), rgba(var(--watch-rgb),.5), rgba(var(--tint),.05));
}
.step { position: relative; padding: 0 0 14px 66px; }
.step .dot {
  position: absolute; left: 15px; top: 20px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid rgba(var(--tint),.3);
}
.step[data-b="look"]  .dot { border-color: var(--look);  box-shadow: 0 0 14px rgba(var(--look-rgb),.5); }
.step[data-b="care"]  .dot { border-color: var(--care);  box-shadow: 0 0 14px rgba(var(--care-rgb),.5); }
.step[data-b="watch"] .dot { border-color: var(--watch); box-shadow: 0 0 14px rgba(var(--watch-rgb),.6); }
.step[data-b="new"]   .dot { border-color: var(--accent-lite); box-shadow: 0 0 14px rgba(47,107,255,.6); }
.step-in {
  padding: 20px 26px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel);
  display: flex; align-items: center; gap: 20px;
}
.step-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; flex: 0 0 74px; }
.step[data-b="look"]  .step-lab { color: var(--look); }
.step[data-b="care"]  .step-lab { color: var(--care); }
.step[data-b="watch"] .step-lab { color: var(--accent-lite); }
.step[data-b="new"]   .step-lab { color: var(--accent-lite); }
.step-q { font-size: clamp(14px, 1.4vw, 17px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.25; }
.step[data-b="new"] .step-in { border-style: dashed; background: transparent; }
.step[data-b="new"] .step-q { color: var(--dim); font-weight: 600; }
/* each cycle steps further in - the story literally descends */
.step[data-depth="1"] { margin-left: 34px; }
.step[data-depth="2"] { margin-left: 68px; }

/* ---------- 09/10/11 examples ---------- */
.ex-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.ex-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; background: rgba(var(--tint),.06); color: var(--dim);
  border: 1px solid var(--line-strong);
}
.loopcard { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); margin-bottom: 14px; }
.loopcard-top {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid var(--line); background: rgba(var(--tint),.025);
}
.loopcard-top b { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.loopcard-top .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--faint); margin-left: auto; }
.lcw { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.lcw-cell { padding: 28px 26px 30px; border-right: 1px solid var(--line); position: relative; }
.lcw-cell:last-child { border-right: 0; }
.lcw-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.lcw-cell[data-b="look"]::before  { background: var(--look); }
.lcw-cell[data-b="care"]::before  { background: var(--care); }
.lcw-cell[data-b="watch"]::before { background: var(--watch); }
.lcw-cell:first-child::before { left: 0; }
.lcw-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; }
.lcw-cell[data-b="look"]  .lcw-lab { color: var(--look); }
.lcw-cell[data-b="care"]  .lcw-lab { color: var(--care); }
.lcw-cell[data-b="watch"] .lcw-lab { color: var(--accent-lite); }
.lcw-q { font-size: clamp(14px, 1.35vw, 16.5px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.28; }
.payoff {
  display: flex; align-items: center; gap: 18px; padding: 22px 26px;
  border-radius: var(--r-sm); border: 1px solid rgba(47,107,255,.3);
  background: linear-gradient(90deg, rgba(47,107,255,.10), transparent);
  margin-top: 6px;
}
.payoff b { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-lite); flex: 0 0 auto; }
.payoff p { font-size: clamp(14px, 1.35vw, 17px); font-weight: 700; letter-spacing: -0.03em; }

.beats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 24px; }
.beat-c {
  padding: 22px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel-2); text-align: center;
}
.beat-c i { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; font-size: 10.5px; color: var(--faint); margin-bottom: 12px; }
.beat-c b { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- 13 raw delivery ---------- */
.ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctrl-col { padding: 32px 30px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); }
.ctrl-col.yes { border-color: rgba(var(--look-rgb),.28); }
.ctrl-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 24px; }
.ctrl-col.yes h4 { color: var(--look); }
.ctrl-col.no h4 { color: var(--faint); }
.ctrl-col li { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.02em; }
.ctrl-col li:last-child { border-bottom: 0; }
.ctrl-col svg { width: 15px; height: 15px; flex: 0 0 15px; }
.ctrl-col.yes svg { color: var(--look); }
.ctrl-col.no svg { color: var(--muted); }
.ctrl-col.no li { color: var(--muted); }

.say { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; align-items: center; margin-top: 46px; }
.say-bad { padding: 26px; border-radius: var(--r-sm); border: 1px dashed rgba(var(--tint),.13); }
.say-bad b, .say-good b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.say-bad b { color: var(--faint); }
.say-bad p { font-size: 15px; color: var(--muted); letter-spacing: -0.015em; line-height: 1.35; }
.say-good { padding: 34px 34px 36px; border-radius: var(--r-md); border: 1px solid rgba(var(--look-rgb),.3); background: linear-gradient(150deg, rgba(var(--look-rgb),.08), transparent 60%); }
.say-good b { color: var(--look); }
.say-good p { font-size: clamp(19px, 2.2vw, 29px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; }

/* ---------- 14 the prompt ---------- */
.ask3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ask-c { padding: 38px 32px 32px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.ask-c .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--faint); margin-bottom: 26px; }
.ask-c .q { font-size: clamp(19px, 2vw, 26px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; text-transform: uppercase; margin-bottom: 30px; }
.ask-c:nth-child(1) .q { color: var(--look); }
.ask-c:nth-child(2) .q { color: var(--care); }
.ask-c:nth-child(3) .q { color: var(--watch); }
.field {
  margin-top: auto; padding: 18px 18px; border-radius: 10px;
  background: var(--well); border: 1px solid var(--line-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
}
.field span { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.resolve {
  margin-top: 14px; padding: 24px 30px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.resolve .lab { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.resolve .out { display: flex; align-items: center; gap: 14px; font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; letter-spacing: -0.035em; text-transform: uppercase; }
.resolve svg { width: 16px; height: 16px; color: rgba(var(--tint),.3); }

/* ---------- 15 lenses ---------- */
.lenses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.lens {
  padding: 24px 16px 20px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.lens:hover { transform: translateY(-4px); border-color: rgba(var(--look-rgb),.34); background: linear-gradient(180deg, rgba(var(--look-rgb),.06), var(--panel)); }
.lens i { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; font-size: 10px; color: var(--faint); margin-bottom: 16px; }
.lens b { font-size: 12.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; display: block; }
.lens:hover b { color: var(--look); }

/* ---------- 16 hook bank ---------- */
.bank { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.bank-bar { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(var(--tint),.025); }
.bank-bar svg { width: 15px; height: 15px; color: var(--faint); flex: 0 0 15px; }
.bank-bar input {
  flex: 1; background: none; border: 0; outline: none; color: var(--ink);
  font: inherit; font-size: 14.5px; letter-spacing: -0.015em;
}
.bank-bar input::placeholder { color: var(--faint); }
.bank-count { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bank-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.bank-col { border-right: 1px solid var(--line); padding-bottom: 8px; }
.bank-col:last-child { border-right: 0; }
.bank-h { padding: 20px 22px 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bank-col[data-b="look"]  .bank-h { color: var(--look); }
.bank-col[data-b="care"]  .bank-h { color: var(--care); }
.bank-col[data-b="watch"] .bank-h { color: var(--accent-lite); }
.line {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 20px; font-size: 13.5px; letter-spacing: -0.018em; color: var(--ink-soft);
  border-top: 1px solid var(--line);
  transition: background .18s ease, color .18s ease;
}
.line:hover { background: rgba(var(--tint),.04); color: var(--ink); }
.line .cp { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity .18s ease; }
.line:hover .cp { opacity: 1; }
.line.copied .cp { opacity: 1; color: var(--look); }
.bank-empty { padding: 30px 22px; font-size: 14px; color: var(--faint); }

/* ---------- 18 golden rule ---------- */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 66px; }
.dd { padding: 34px 32px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); }
.dd h4 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; }
.dd.no h4 { color: var(--faint); }
.dd.do h4 { color: var(--look); }
.dd li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.45vw, 18px); font-weight: 700; letter-spacing: -0.03em; }
.dd li:last-child { border-bottom: 0; }
.dd.no li { color: var(--muted); }

/* ---------- 19 checklist ---------- */
.qa { max-width: 880px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.qa-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(var(--tint),.03); }
.qa-bar .dots { display: flex; gap: 6px; }
.qa-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--tint),.16); }
.qa-bar .name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--faint); margin-left: 6px; }
.qa-bar .cnt { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.qa-row {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 19px 24px; border-bottom: 1px solid var(--line);
  font-size: clamp(14px, 1.3vw, 16px); letter-spacing: -0.02em; color: var(--ink-soft);
  transition: background .18s ease;
}
.qa-row:hover { background: rgba(var(--tint),.03); }
.qa-box {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 20px;
  border: 1.5px solid rgba(var(--tint),.24);
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.qa-box svg { width: 12px; height: 12px; color: var(--on-accent); opacity: 0; transition: opacity .2s ease; }
.qa-row.done .qa-box { background: var(--accent); border-color: var(--accent); }
.qa-row.done .qa-box svg { opacity: 1; }
.qa-row.done { color: var(--faint); }
.qa-row.done .qa-t { text-decoration: line-through; text-decoration-color: rgba(var(--tint),.25); }
.qa-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--faint); flex: 0 0 22px; }
.qa-foot { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.qa-state {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
  color: var(--faint); background: rgba(var(--tint),.05); border: 1px solid var(--line-strong);
  transition: all .3s ease;
}
.qa-foot.ready .qa-state { color: #0A0B0E; background: var(--look); border-color: var(--look); box-shadow: 0 0 34px rgba(var(--look-rgb),.4); }
.qa-hint { font-size: 13px; color: var(--faint); }

/* ---------- 20 final ---------- */
.final { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.final-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; max-width: 900px; }
.final-qs p { font-size: 14px; color: var(--dim); letter-spacing: -0.018em; line-height: 1.4; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.final-that { margin-top: 66px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.foot { padding: 40px 0 46px; border-top: 1px solid var(--line); }
.foot-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-in span { font-size: 12px; color: var(--faint); }
.foot-in .sp { margin-left: auto; }

/* ---------- motion guards ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .scrollcue svg { animation: none; }
  .sys-col, .mech, .lens { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .s { padding: 104px 0; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .system { grid-template-columns: 1fr; gap: 12px; }
  .sys-arr { padding: 4px 0; transform: rotate(90deg); }
  /* the 404px floor exists to square up three side-by-side columns; stacked,
     it just leaves a dead half-screen under every question */
  .sys-col { min-height: 0; padding: 34px 28px 30px; }
  .grid-m { grid-template-columns: repeat(3, 1fr); }
  .lenses { grid-template-columns: repeat(4, 1fr); }
  .word-head { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .ask3 { grid-template-columns: 1fr; }
  .beats { grid-template-columns: repeat(2, 1fr); }
  .say { grid-template-columns: 1fr; }
  .bank-cols { grid-template-columns: 1fr; }
  .bank-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .final-qs { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .s { padding: 84px 0; }
  .top-doc, .top-name { display: none; }
  .top-ct { padding-left: 12px; }
  .beat-b { padding: 6px 8px; font-size: 9px; letter-spacing: .1em; }
  .vs { grid-template-columns: 1fr; }
  .lcw { grid-template-columns: 1fr; }
  .lcw-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .lcw-cell:last-child { border-bottom: 0; }
  .grid-m { grid-template-columns: repeat(2, 1fr); }
  .lenses { grid-template-columns: repeat(2, 1fr); }
  .beats { grid-template-columns: 1fr; }
  .ctrl { grid-template-columns: 1fr; }
  .dodont { grid-template-columns: 1fr; }
  .step { padding-left: 52px; }
  .step[data-depth="1"] { margin-left: 12px; }
  .step[data-depth="2"] { margin-left: 24px; }
  .step-in { flex-direction: column; align-items: flex-start; gap: 10px; }
  .step-lab { flex: none; }
  .payoff { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cover-foot { padding: 0 20px; }
  .ticks { display: none; }
}

/* ============================================================
   Patterns carried over from magnetic-5lp.
   ============================================================ */

/* centred section head, the reference's default */
.head-c { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.head-c .lede { margin: 18px auto 0; max-width: 540px; }
.head-c .stack { align-items: center; }

/* word-by-word headline reveal: leading words land first, the tail catches up.
   The reference animates this on scroll; same effect, driven by .in. */
.wr > span { display: inline-block; opacity: .12; transition: opacity .5s ease, transform .5s ease; transform: translateY(.12em); }
.wr.in > span { opacity: 1; transform: none; }
.wr.in > span:nth-child(1) { transition-delay: .00s }
.wr.in > span:nth-child(2) { transition-delay: .06s }
.wr.in > span:nth-child(3) { transition-delay: .12s }
.wr.in > span:nth-child(4) { transition-delay: .18s }
.wr.in > span:nth-child(5) { transition-delay: .24s }
.wr.in > span:nth-child(6) { transition-delay: .30s }
.wr.in > span:nth-child(7) { transition-delay: .36s }
.wr.in > span:nth-child(8) { transition-delay: .42s }
.wr.in > span:nth-child(n+9) { transition-delay: .48s }
@media (prefers-reduced-motion: reduce) { .wr > span { opacity: 1; transform: none; transition: none; } }

/* the stat row: label + note on the left, the number oversized on the right */
.stats { border-top: 1px solid var(--line-strong); }
.statrow {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px;
  padding: 26px 4px; border-bottom: 1px solid var(--line-strong);
}
.statrow b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 5px; }
.statrow p { font-size: 14px; color: var(--dim); max-width: 400px; line-height: 1.4; }
.statrow .n {
  font-size: clamp(38px, 4.6vw, 66px); font-weight: 700;
  letter-spacing: -0.05em; line-height: 1; white-space: nowrap;
}
.statrow .n em { font-style: normal; color: var(--accent); }

/* comparison pair: the losing card is flat, the winning card is blue-bordered */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-card { padding: 30px 28px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); }
.cmp-card.win { border: 2px solid var(--accent); box-shadow: 0 0 0 5px rgba(47,107,255,.09); }
.cmp-card h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -0.03em; margin-bottom: 20px; }
.cmp-card.win h4 .mark { width: 26px; height: 26px; flex: 0 0 26px; }
.cmp-card.win h4 .mark svg { width: 13px; height: 13px; }
.cmp-card li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 15px; letter-spacing: -0.018em; }
.cmp-card svg.i { width: 17px; height: 17px; flex: 0 0 17px; }
.cmp-card.lose li { color: var(--dim); }
.cmp-card.lose svg.i { color: var(--muted); }
.cmp-card.win svg.i { color: var(--accent); }

/* the numbered badge on the reference's process cards */
.badge {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(47,107,255,.4);
}

/* rail dashes need to darken over light too */

@media (max-width: 1080px) {
  .cmp { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; gap: 12px; }
  .statrow .n { text-align: left; }
}


/* ============================================================
   magnetic-v2 language.

   v2 is not a light page and it is not a flat one either. It stays on #08090C
   the whole way down and gets its variation from two things: soft blue ambient
   orbs bleeding in at the section edges, and a raised ground on alternate
   sections. Values below are read off the live build, not guessed.
   ============================================================ */

/* the dashed eyebrow that sits above every v2 headline */
.eyebrow-2 {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-lite);
}
.eyebrow-2::before, .eyebrow-2::after {
  content: ''; width: 18px; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow-2 b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500; font-size: 11px; letter-spacing: .1em;
  color: var(--faint); margin-right: -4px;
}
.head-c { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.head-c .lede { margin: 18px auto 0; max-width: 560px; }

/* the metallic sheen v2 puts on the leading half of a headline */
.metal {
  background: linear-gradient(96deg, #8A8B8F 0%, #D6D7DA 16%, #FFFFFF 40%, #F2F3F5 58%, #BFC0C4 80%, #8C8D91 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* raised ground on alternate sections: the only surface move v2 makes */
.s--raise { background: var(--bg-raise); }
.s--raise::before, .s--raise::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line); pointer-events: none;
}
.s--raise::before { top: 0; } .s--raise::after { bottom: 0; }

/* ambient orbs. .ao-a is the wide blue wash, .ao-b the hot core,
   .ao-s the horizontal light streak that rides a section edge. */
.aos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ao { position: absolute; border-radius: 50%; }
.ao-a { width: 937px; height: 514px; filter: blur(72px);
  background: radial-gradient(50% 50%, rgba(47,107,255,.30) 0%, rgba(47,107,255,0) 72%); }
.ao-b { width: 575px; height: 333px; filter: blur(54px);
  background: radial-gradient(50% 50%, rgba(150,200,255,.22) 0%, rgba(47,107,255,0) 70%); }
.ao-s { width: 2268px; height: 190px; border-radius: 0; filter: blur(54px); opacity: .22;
  background: linear-gradient(90deg, rgba(47,107,255,0) 0%, rgba(90,160,255,.72) 20%, rgb(215,235,255) 50%, rgba(90,160,255,.72) 80%, rgba(47,107,255,0) 100%); }
.ao-l { left: -420px; top: 50%; transform: translateY(-50%); }
.ao-r { right: -420px; top: 50%; transform: translateY(-50%); }
.ao-t { left: 50%; transform: translateX(-50%); top: -95px; }
.s > .wrap { position: relative; z-index: 1; }

/* v2's zero-stat row: oversized numeral, label, sub-label, hairline dividers,
   the one that matters in blue */
.zstats { display: grid; grid-template-columns: repeat(4, 1fr); }
.zstat { padding: 6px 26px; border-left: 1px solid var(--line); }
.zstat:first-child { border-left: 0; padding-left: 0; }
.zstat .n {
  display: block; font-size: clamp(46px, 5.4vw, 76px); font-weight: 700;
  letter-spacing: -0.055em; line-height: 1; margin-bottom: 16px;
}
.zstat.hot .n { color: var(--accent); }
.zstat b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 5px; }
.zstat p { font-size: 12.5px; color: var(--faint); line-height: 1.35; }
.zfoot { margin-top: 22px; font-size: 12px; color: var(--faint); max-width: 560px; line-height: 1.45; }

/* the ghost outlined numeral v2 sets beside each item in a numbered argument */
.argrow { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--line); }
.argrow:last-child { border-bottom: 0; }
.argrow .gn {
  font-size: clamp(38px, 4vw, 54px); font-weight: 700; letter-spacing: -0.05em; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.4px rgba(47,107,255,.55);
}
.argrow h4 { font-size: clamp(18px, 1.9vw, 23px); letter-spacing: -0.035em; line-height: 1.2; margin-bottom: 12px; }
.argrow p { font-size: 15px; color: var(--dim); line-height: 1.5; max-width: 620px; }
/* the bolded inset line v2 drops under an argument */
.inset {
  margin-top: 16px; padding: 12px 0 12px 18px;
  border-left: 2px solid var(--accent);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}

/* v2's two-way choice: flat card versus glow card */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.way { position: relative; overflow: hidden; padding: 30px 30px 32px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel); min-height: 260px;
  display: flex; flex-direction: column; }
.way .tagpill { align-self: flex-start; margin-bottom: auto; }
.way h4 { font-size: clamp(19px, 2.1vw, 26px); letter-spacing: -0.04em; margin: 34px 0 12px; }
.way p { font-size: 14.5px; color: var(--dim); line-height: 1.5; }
.way.hot { border-color: rgba(47,107,255,.42);
  background: linear-gradient(158deg, rgba(47,107,255,.20) 0%, rgba(47,107,255,.05) 46%, var(--panel) 100%);
  box-shadow: var(--glow-blue); }
.way.hot h4 { color: #fff; }
.way.hot .tagpill { border-color: rgba(47,107,255,.5); color: var(--accent-lite); background: rgba(47,107,255,.14); }

@media (max-width: 1080px) {
  .zstats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .zstat:nth-child(3) { border-left: 0; padding-left: 0; }
  .ways { grid-template-columns: 1fr; }
  .argrow { grid-template-columns: 1fr; gap: 12px; }
  .ao-l { left: -560px; } .ao-r { right: -560px; }
}