/* myICOR landing v2 · "the film"
   INKLINE tokens, with the promo films' licence (PROMO.md §5, DESIGN §23 "films may glow"): ink grounds with the marker's
   warm haze, interfaces leaning back in 3D (top edge away), one piece lifting off with a real shadow and its slot left
   empty, glow only on things that emit light, type on its own space, the marker on one thing per view, film grain,
   paper interludes with the marker's soft light, the end on the wordmark. */

:root {
  --ink: #090A0C; --ink-1: #121212; --ink-2: #1B1B1B; --ink-3: #232323; --rule: #272727;
  --paper: #F6F3EC; --paper-1: #FBF9F4; --paper-2: #EFEBE1; --paper-rule: #DDD8CB;
  --dim: #C9C4B8; --faint: #8E897D; --t2: #A9A497; --t3: #6E6A60; --t2p: #625E54;
  --marker: #FF5A2D; --marker-deep: #B8380F; --marker-text: #C4360F;
  --pkm: #7FA0BD; --bkm: #86A97A; --ppm: #EDB742; --bpm: #D9826B;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --gut: clamp(16px, 4vw, 48px);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --soft: cubic-bezier(.2, .7, .1, 1);
  --float: 0 1px 2px rgb(0 0 0 / .3), 0 8px 16px -4px rgb(0 0 0 / .32), 0 30px 50px -12px rgb(0 0 0 / .45), 0 70px 110px -24px rgb(0 0 0 / .55);
  --float-p: 0 1px 2px rgb(40 30 20 / .12), 0 8px 16px -4px rgb(40 30 20 / .14), 0 30px 50px -12px rgb(40 30 20 / .2), 0 70px 110px -24px rgb(40 30 20 / .26);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; flex: none; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 800; }
blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 16px; top: 16px; transform: translateY(-200%); opacity: 0; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { transform: none; opacity: 1; }

/* ── grain: one fixed, moving film grain over everything ─────────────────── */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -3%) } 60% { transform: translate(-2%, -1%) } 80% { transform: translate(3%, 3%) } 100% { transform: translate(0, 0) } }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--wide { max-width: 1440px; }
.sec { position: relative; padding: clamp(96px, 13vw, 180px) 0; isolation: isolate; }
.ink { background: var(--ink); color: var(--paper); }
.paper { background: var(--paper); color: var(--ink); color-scheme: light; }
.sec__head { display: grid; gap: 22px; max-width: 980px; margin-bottom: clamp(48px, 6vw, 88px); }
.sec__head--split { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 5vw, 80px); }
.sec__head--split > div { display: grid; gap: 20px; }
.sec__head--c { margin-inline: auto; text-align: center; justify-items: center; }

/* ── type ─────────────────────────────────────────────────────────────── */
.eyebrow { font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.paper .eyebrow { color: var(--t2p); }
.eyebrow--ink { color: rgb(9 10 12 / .72) !important; }
.lyric { font: 800 clamp(52px, 9.4vw, 152px)/.88 var(--display); letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.lyric--xl { font-size: clamp(50px, 8.6vw, 138px); }
.lyric--paper { color: var(--ink); }
.lyric--ink { color: var(--ink); }
.lyric--c { text-align: center; }
.h2 { font: 800 clamp(34px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.h3 { font: 800 clamp(26px, 2.8vw, 38px)/1.05 var(--display); letter-spacing: -.028em; text-wrap: balance; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--t2); max-width: 60ch; text-wrap: pretty; }
.lede--paper, .paper .lede { color: var(--t2p); }
.fine { margin-top: 28px; font-size: 13px; color: var(--t3); }
.paper .fine { color: var(--t2p); }
.fine--c { text-align: center; }
em { font-style: normal; }

/* the words of a lyric arrive one by one with a blur-in (film §4) */
.w { display: inline-block; white-space: pre; }
.js .w { opacity: 0; filter: blur(14px); transform: translateY(.18em); transition: opacity .9s var(--expo), filter .9s var(--expo), transform 1.1s var(--expo); transition-delay: calc(var(--wi) * 70ms); }
.js .in .w, .js [data-words].in .w { opacity: 1; filter: none; transform: none; }

/* reveals */
.js [data-r] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--soft), transform 1.1s var(--expo), filter 1s var(--soft); transition-delay: var(--d, 0s); }
.js [data-r].in { opacity: 1; transform: none; filter: none; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 14px; font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .32s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background .2s; }
.btn:active { transform: translateY(3px); }
.btn--sm { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--solid { background: var(--paper); color: var(--ink); }
.btn--solid:hover { background: #fffdf8; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .28); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgb(246 243 236 / .6); }
.btn--marker { background: var(--marker); color: var(--ink); box-shadow: 0 4px 0 var(--marker-deep); }
.btn--marker:active { box-shadow: 0 1px 0 var(--marker-deep); }
.btn--marker.btn--sm { box-shadow: 0 3px 0 var(--marker-deep); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--paper); }
.link-arrow svg { transition: transform .3s var(--expo); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ── nav: a floating pill that turns paper over paper sections ───────── */
.nav { position: fixed; z-index: 80; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; width: min(1100px, calc(100% - 32px)); padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgb(18 18 18 / .62); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .12), 0 10px 30px -10px rgb(0 0 0 / .5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); transition: background .4s, box-shadow .4s, color .4s; }
.nav__brand { display: flex; margin-right: auto; padding: 6px 0; }
.nav__logo { height: 18px; width: auto; }
.nav__logo--dark { display: none; }
.nav__links { display: flex; gap: 2px; }
.nav__links a, .nav__login { padding: 10px 14px; border-radius: 999px; font: 500 14px/1 var(--body); text-decoration: none; color: var(--dim); transition: color .2s, background .2s; }
.nav__links a:hover, .nav__login:hover { color: var(--paper); background: rgb(246 243 236 / .08); }
.nav.on-paper { background: rgb(246 243 236 / .7); box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1), 0 10px 30px -12px rgb(40 30 20 / .25); color: var(--ink); }
.nav.on-paper .nav__logo--light { display: none; }
.nav.on-paper .nav__logo--dark { display: block; }
.nav.on-paper .nav__links a, .nav.on-paper .nav__login { color: var(--t2p); }
.nav.on-paper .nav__links a:hover, .nav.on-paper .nav__login:hover { color: var(--ink); background: rgb(9 10 12 / .06); }
.nav.on-paper .btn--solid { background: var(--ink); color: var(--paper); }

/* ── dock: the sticky call to action ─────────────────────────────────── */
.dock { position: fixed; z-index: 79; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-radius: 18px; background: rgb(18 18 18 / .78); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .12), 0 20px 40px -12px rgb(0 0 0 / .6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .6s var(--expo), opacity .4s; }
.dock.is-on { transform: translate(-50%, 0); opacity: 1; }
.dock__txt { margin-right: 8px; font-size: 14px; color: var(--t2); white-space: nowrap; }
.dock__txt b { color: var(--paper); font-weight: 600; }

/* ── light: hazes (the marker as light) ──────────────────────────────── */
.haze { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.haze::before { content: ""; position: absolute; inset: -10%; animation: breathe 14s ease-in-out infinite alternate; }
.haze--hero::before { background: radial-gradient(48% 42% at 72% 58%, rgb(255 90 45 / .30), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgb(184 56 15 / .26), transparent 70%), radial-gradient(70% 40% at 50% 0%, rgb(255 90 45 / .07), transparent 70%); }
.haze--left::before { background: radial-gradient(45% 55% at 10% 40%, rgb(255 90 45 / .2), transparent 70%), radial-gradient(40% 40% at 90% 90%, rgb(184 56 15 / .14), transparent 70%); }
.haze--right::before { background: radial-gradient(45% 55% at 85% 50%, rgb(255 90 45 / .22), transparent 70%); }
.haze--center::before { background: radial-gradient(55% 45% at 50% 55%, rgb(255 90 45 / .18), transparent 70%); }
.haze--ember::before { background: radial-gradient(70% 35% at 50% 0%, rgb(255 90 45 / .32), transparent 70%), radial-gradient(40% 40% at 0% 70%, rgb(184 56 15 / .18), transparent 70%); }
@keyframes breathe { from { transform: scale(1) translate(0, 0); opacity: .85 } to { transform: scale(1.08) translate(-1.5%, 1%); opacity: 1 } }
.light { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.light::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 46% at 50% 62%, rgb(255 90 45 / .2), rgb(255 150 110 / .1) 45%, transparent 72%); animation: breathe 16s ease-in-out infinite alternate; }
.light--right::before { background: radial-gradient(40% 50% at 82% 55%, rgb(255 90 45 / .16), rgb(255 150 110 / .08) 45%, transparent 72%); }
.light--left::before { background: radial-gradient(40% 50% at 12% 30%, rgb(255 90 45 / .14), rgb(255 150 110 / .07) 45%, transparent 72%); }
.light--end::before { background: radial-gradient(38% 46% at 50% 58%, rgb(255 90 45 / .34), rgb(255 150 110 / .14) 50%, transparent 74%); }

/* ── 3D stages: interfaces lean back (rotateX > 0: the top edge away) ── */
.stage { position: relative; perspective: 2000px; perspective-origin: 50% 20%; }
.tilt { position: relative; transform-style: preserve-3d; transform-origin: 50% 70%; transition: transform 1.6s var(--expo), opacity 1.2s var(--soft); }
.js .tilt { opacity: 0; transform: rotateX(42deg) rotateY(var(--ry, 0deg)) translate3d(0, 120px, -360px); }
.js .tilt.in { opacity: 1; transform: rotateX(calc(var(--rx) + var(--p, .5) * -6deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); }
.tilt--hero { --rx: 22deg; --ry: -18deg; --rz: 4deg; }
.tilt--soft { --rx: 16deg; --ry: 10deg; --rz: -2deg; }
.tilt--path { --rx: 26deg; --rz: 0deg; }
.tilt--lesson { --rx: 18deg; --ry: -8deg; --rz: 1.5deg; }
.tilt--rec { --rx: 18deg; --ry: 8deg; --rz: -1.5deg; }
.tilt--comm { --rx: 18deg; --ry: -7deg; --rz: 1.2deg; }
.fit { position: relative; transform-style: preserve-3d; }
.fit > .screen { width: calc(var(--w, 1200) * 1px); transform-origin: 0 0; transform: scale(var(--k, 1)); }
.no-js .fit { overflow: hidden; }

/* the empty slot a lifted piece leaves behind */
.slot { position: relative; border-radius: 16px; background: transparent !important; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .14) !important; }
.slot::after { content: ""; position: absolute; inset: 10px; border-radius: 10px; background: repeating-linear-gradient(135deg, rgb(246 243 236 / .025) 0 10px, transparent 10px 20px); }
.app--paper .slot, .fw .slot { box-shadow: inset 0 0 0 1px rgb(9 10 12 / .12) !important; }
.app--paper .slot::after, .fw .slot::after { background: repeating-linear-gradient(135deg, rgb(9 10 12 / .03) 0 10px, transparent 10px 20px); }
/* the piece itself: placed over its slot by landing.js, then it rises toward you */
.lift { position: absolute; z-index: 5; border-radius: 16px; transform: translate3d(0, 0, 0); transition: transform 1.4s var(--expo), box-shadow 1.4s var(--expo); transition-delay: .9s; will-change: transform; }
.in .lift, .static .lift { transform: translate3d(var(--lx, 0px), var(--ly, -22px), var(--lz, 90px)) rotateX(var(--lr, -6deg)) scale(var(--ls, 1.04)); box-shadow: var(--float); }
.app--paper .lift, .fw .lift { --float: var(--float-p); }
.lift--marker { box-shadow: 0 0 0 1px var(--marker); }
.in .lift--marker, .static .lift--marker { box-shadow: 0 0 0 1.5px var(--marker), var(--float); }

/* ══ the app (mock interfaces in myICOR's look) ═════════════════════════ */
.screen { position: relative; transform-style: preserve-3d; font-family: var(--body); }
.app { display: flex; border-radius: 22px; text-align: left; }
.app--ink { background: #0E0E0F; color: var(--paper); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1), 0 0 0 1px rgb(0 0 0 / .5), 0 60px 120px -30px rgb(0 0 0 / .8), 0 0 140px -20px rgb(255 90 45 / .18); }
.app--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1), 0 60px 120px -30px rgb(40 30 20 / .35); }
.card { padding: 20px 22px; border-radius: 16px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .08); }
.card__label { display: flex; align-items: center; gap: 8px; font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }
.app--paper .card__label, .fw .card__label { color: var(--t2p); }
.card__label svg { font-size: 15px; }
.card__h { margin-top: 10px; font: 700 20px/1.2 var(--display); letter-spacing: -.02em; }
.card__h--lg { font-size: 25px; }
.card__meta { margin-top: 6px; font-size: 14px; color: var(--t2); }
.card__q { margin-top: 10px; font: 600 18px/1.35 var(--display); color: var(--dim); }
.bar { height: 4px; margin-top: 16px; border-radius: 4px; background: rgb(246 243 236 / .1); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--paper); }
.lift--marker .bar i { background: var(--marker); }
.bar--done i { background: var(--dim); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-3); color: var(--paper); font: 700 14px/1 var(--display); letter-spacing: -.01em; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .14); }
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.avatar--ring { box-shadow: 0 0 0 2px #0E0E0F, 0 0 0 4px var(--dim); }
.avatar--more { background: transparent; color: var(--t2); font: 600 12px var(--body); }
.app--paper .avatar, .paper .avatar { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); }
.mini-faces { display: flex; margin-top: 14px; }
.mini-faces .avatar { width: 32px; height: 32px; font-size: 11px; margin-right: -8px; box-shadow: 0 0 0 2px var(--ink-1); }
.app--paper .mini-faces .avatar { box-shadow: 0 0 0 2px var(--paper-1); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 0 rgb(246 243 236 / .5); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(246 243 236 / .45) } 100% { box-shadow: 0 0 0 10px rgb(246 243 236 / 0) } }
.kind { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .2); color: var(--dim); }
.app--paper .kind { box-shadow: inset 0 0 0 1px rgb(9 10 12 / .16); color: var(--t2p); }
.kind--marker { box-shadow: inset 0 0 0 1px var(--marker) !important; color: var(--marker-text) !important; }
.post__head { display: flex; align-items: center; gap: 12px; }
.post__head > div { display: grid; line-height: 1.25; }
.post__head b { font-weight: 600; font-size: 15px; }
.post__head span:not(.avatar):not(.kind) { font-size: 13px; color: var(--t2); }
.app--paper .post__head span:not(.avatar):not(.kind) { color: var(--t2p); }
.post__body { margin-top: 14px; font-size: 16px; line-height: 1.5; }
.post__acts { display: flex; gap: 22px; margin-top: 14px; font-size: 13px; color: var(--t2); }
.app--paper .post__acts { color: var(--t2p); }
.post__acts span { display: inline-flex; align-items: center; gap: 6px; }
.post__acts svg { font-size: 18px; }

/* hero app */
.app__rail { display: flex; flex-direction: column; gap: 2px; width: 232px; padding: 26px 14px; border-right: 1px solid var(--rule); }
.app__logo { height: 16px; width: auto; margin: 0 10px 22px; }
.app__nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--t2); }
.app__nav svg { font-size: 19px; }
.app__nav.is-on { background: rgb(246 243 236 / .08); color: var(--paper); }
.app__main { flex: 1; padding: 30px 32px 34px; }
.app__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.app__kicker { font-size: 13px; color: var(--t2); }
.app__title { margin-top: 4px; font: 800 34px/1 var(--display); letter-spacing: -.03em; }
.app__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.app__col { display: grid; gap: 18px; align-content: start; }
.card--next { height: 180px; }
.lift[data-lift="hero"] { padding: 22px 24px; background: var(--ink-2); --lz: 70px; --ly: -14px; --lx: 0px; }
.next__row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.next__play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 14px; box-shadow: 0 0 22px rgb(246 243 236 / .35); }
.next__row .card__meta { margin: 0; }
.rings { display: flex; align-items: center; gap: 22px; margin-top: 14px; }
.rings__svg { width: 120px; height: 120px; }
.rings__list { display: grid; gap: 8px; font-size: 14px; color: var(--t2); }
.rings__list li { display: flex; align-items: center; gap: 8px; }
.rings__list svg { font-size: 16px; color: var(--dim); }
.rings__list b { margin-left: 6px; color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.card--quiet { background: transparent; }

/* ══ 01 hero ═════════════════════════════════════════════════════════ */
.hero { min-height: 100vh; min-height: 100svh; padding: clamp(120px, 15vh, 170px) 0 clamp(60px, 8vw, 110px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1440px; }
.hero__text { display: grid; gap: 26px; align-content: center; position: relative; z-index: 3; }
.hero__h1 { font-size: clamp(56px, 8.4vw, 136px); }
.hero__lede { max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hero__fine { font-size: 14px; color: var(--t3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(246 243 236 / .06); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .12); font-size: 14px; font-weight: 500; color: var(--dim); }
.chip svg { font-size: 16px; }
.watch[hidden] { display: none; }
.watch { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
.watch__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(246 243 236 / .1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .25); font-size: 13px; }
.hero__stage { margin-right: calc(-1 * var(--gut) - 11vw); margin-left: -1vw; }
.floor-glow { position: absolute; left: 6%; right: 0; bottom: -12%; height: 36%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgb(255 90 45 / .32), transparent 70%); filter: blur(10px); }

/* ══ 02 proof ════════════════════════════════════════════════════════ */
.proof { padding: 40px 0 clamp(70px, 9vw, 120px); }
.proof__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.proof__row li { display: grid; gap: 8px; padding: 30px 20px; border-left: 1px solid var(--rule); }
.proof__row li:first-child { border-left: 0; padding-left: 0; }
.proof__row b { font: 800 clamp(34px, 4vw, 56px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.proof__row span { font-size: 14px; color: var(--t2); }
.proof__who { margin-top: 24px; font-size: 15px; color: var(--t2); }

/* ══ 03 before ═══════════════════════════════════════════════════════ */
.before__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.before__text { display: grid; gap: 26px; }
.before__turn { font: 700 clamp(22px, 2.2vw, 30px)/1.25 var(--display); letter-spacing: -.02em; color: var(--dim); }
.before__turn em { color: var(--paper); }
.tiles { position: relative; aspect-ratio: 1 / .9; perspective: 1400px; transform-style: preserve-3d; }
.tiles img { position: absolute; left: var(--x); top: var(--y); width: clamp(52px, 7vw, 92px); height: auto; border-radius: 22%; box-shadow: 0 14px 30px -8px rgb(0 0 0 / .7), 0 2px 4px rgb(0 0 0 / .4);
  transform: translateZ(var(--z)) rotateX(14deg) rotateY(calc(var(--p, .5) * 30deg - 15deg)); animation: sway var(--t) ease-in-out infinite alternate; }
@keyframes sway { from { translate: 0 -6px; } to { translate: 0 8px; } }
.pains { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(60px, 8vw, 110px); }
.pain { display: grid; align-content: start; gap: 14px; padding: 22px; border-radius: 20px; background: rgb(246 243 236 / .035); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .08); }
.pain:nth-child(even) { transform: translateY(28px); }
.js .pain:nth-child(even)[data-r] { transform: translateY(54px); }
.js .pain:nth-child(even)[data-r].in { transform: translateY(28px); }
.pain__k { font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }
.pain blockquote { font: 600 17px/1.4 var(--display); letter-spacing: -.01em; color: var(--paper); }
.who { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 13px; color: var(--t2); }
.paper .who { color: var(--t2p); }

/* ══ 04 interlude ════════════════════════════════════════════════════ */
.interlude { padding: clamp(130px, 18vw, 240px) 0; text-align: center; }
.interlude__in { display: grid; justify-items: center; gap: 26px; }
.interlude .lyric { font-size: clamp(46px, 7.6vw, 124px); max-width: 12ch; }
.interlude__big { font: 800 clamp(34px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.035em; color: var(--marker-text); }
.interlude .lede { max-width: 48ch; margin-top: 10px; }

/* ══ 05 methodology ══════════════════════════════════════════════════ */
.method__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.method__text { display: grid; gap: 30px; }
.stages { display: grid; gap: 4px; border-top: 1px solid var(--rule); }
.stages li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 17px; color: var(--t2); }
.stages svg { font-size: 26px; margin-top: 2px; color: var(--paper); }
.stages b { color: var(--paper); font-weight: 600; }
.method__ssot { font-size: 16px; color: var(--t2); max-width: 48ch; }
.method__ssot b { color: var(--paper); font-weight: 600; }
.planes { height: clamp(420px, 46vw, 620px); perspective: 1600px; perspective-origin: 50% 0%; }
.planes__stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(16%) rotateX(58deg) rotateZ(-38deg); }
.plane { position: absolute; left: 14%; top: 22%; width: 68%; height: 50%; display: grid; grid-template-columns: auto 1fr; align-content: end; column-gap: 14px; padding: 26px 28px; border-radius: 22px;
  background: linear-gradient(160deg, rgb(34 34 34 / .78), rgb(14 14 15 / .86)); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .14), 0 40px 60px -20px rgb(0 0 0 / .7);
  transform: translateZ(calc(var(--i) * 26px)); transition: transform 1.6s var(--expo), box-shadow 1s; transition-delay: calc(var(--i) * 90ms); }
.in .plane, .static .plane { transform: translateZ(calc(var(--i) * (110px + var(--p, .5) * 60px))); }
.plane svg { grid-row: 1 / span 2; font-size: 40px; color: var(--paper); align-self: center; }
.plane b { font: 800 34px/1 var(--display); letter-spacing: -.03em; }
.plane__l { font-size: 14px; color: var(--t2); }
.plane__n { position: absolute; top: 22px; left: 28px; font: 600 12px var(--body); letter-spacing: .12em; color: var(--t3); }
.plane--on { box-shadow: inset 0 0 0 1.5px var(--marker), 0 60px 80px -20px rgb(0 0 0 / .8), 0 0 80px -10px rgb(255 90 45 / .35); }
.in .plane--on, .static .plane--on { transform: translateZ(calc(var(--i) * (110px + var(--p, .5) * 60px) + 40px)) translate(-30px, 20px); }

/* ══ 06 framework ════════════════════════════════════════════════════ */
.framework__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.framework__text { display: grid; gap: 26px; }
.kinds { display: grid; gap: 10px; font-size: 16px; color: var(--t2p); }
.kinds b { color: var(--ink); font-weight: 600; }
.fw { display: grid; grid-template-columns: 30px 1fr 1fr; grid-template-rows: 30px 1fr 1fr auto; gap: 12px; padding: 24px; border-radius: 24px; background: var(--paper-1); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1), 0 50px 100px -30px rgb(40 30 20 / .35); }
.fw__axis { display: flex; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--t2p); }
.fw__axis--top { grid-column: 2 / 4; grid-row: 1; }
.fw__axis--top span { flex: 1; text-align: center; align-self: center; }
.fw__axis--side { grid-column: 1; grid-row: 2 / 4; flex-direction: column; }
.fw__axis--side span { flex: 1; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.fw__box { min-height: 190px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--c) 9%, var(--paper-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.fw__box--pkm { grid-column: 2; grid-row: 2; } .fw__box--bkm { grid-column: 3; grid-row: 2; }
.fw__box--ppm { grid-column: 2; grid-row: 3; } .fw__box--bpm { grid-column: 3; grid-row: 3; }
.fw__name { font: 800 22px/1 var(--display); letter-spacing: -.02em; margin-bottom: 14px; }
.fw__name i { display: block; margin-top: 4px; font: 500 12px var(--body); color: var(--t2p); letter-spacing: 0; font-style: normal; }
.fw__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 6px; border-radius: 12px; background: #fff9; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tool img { width: 30px; height: 30px; border-radius: 8px; }
.tool em { font-size: 11px; font-weight: 500; color: var(--t2p); }
.tool--core { box-shadow: inset 0 0 0 1.5px rgb(9 10 12 / .5); }
.slot--tool { width: 132px; }
.fw__util { grid-column: 2 / 4; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .12); }
.fw__util .fw__name { margin: 0 10px 0 0; font-size: 16px; }
.lift--tool { --lz: 110px; --ly: -34px; --lx: -46px; --lr: -8deg; --ls: 1.12; border-radius: 12px; }
.in .lift--tool, .static .lift--tool { box-shadow: 0 0 0 1.5px var(--marker), var(--float); }
.lift--tool .tool { background: var(--paper-1); width: 100%; }

/* ══ 07 journey path ═════════════════════════════════════════════════ */
.path-stage { margin-top: -10px; }
.path { position: relative; height: 640px; padding: 40px 20px; border-radius: 28px; background: radial-gradient(80% 70% at 50% 40%, #141414, #0B0B0C); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .08), 0 80px 140px -40px rgb(0 0 0 / .9); }
.path__line { position: absolute; left: 0; top: 90px; width: 100%; height: 520px; overflow: visible; }
.path__line path { fill: none; stroke-linecap: round; }
.path__ghost { stroke: rgb(246 243 236 / .14); stroke-width: 2; stroke-dasharray: 2 10; }
.path__trace { stroke: var(--marker); stroke-width: 3.5; stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); transition: stroke-dashoffset 2.6s cubic-bezier(.3, .7, .2, 1) .6s; filter: drop-shadow(0 0 6px rgb(255 90 45 / .6)); }
.in .path__trace, .static .path__trace { stroke-dashoffset: 0; }
.course { position: absolute; left: calc(var(--x) + 20px); top: calc(var(--y) + 40px); width: 220px; border-radius: 18px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1), 0 30px 50px -20px rgb(0 0 0 / .8); overflow: hidden; }
.course img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--rule); }
.course__b { padding: 14px 16px 16px; }
.course__k { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }
.course__k svg { font-size: 14px; color: var(--paper); }
.course__n { margin-top: 8px; font: 700 18px/1.15 var(--display); letter-spacing: -.02em; }
.course__m { margin-top: 6px; font-size: 13px; color: var(--t2); line-height: 1.4; }
.course .bar { margin-top: 12px; }
.course--here { overflow: visible; box-shadow: inset 0 0 0 1.5px rgb(246 243 236 / .5), 0 30px 50px -20px rgb(0 0 0 / .8); transition: transform 1.4s var(--expo) 1.6s, box-shadow 1.4s; }
.course--here img { border-radius: 18px 18px 0 0; }
.in .course--here, .static .course--here { transform: translateY(-18px) translateZ(60px); box-shadow: inset 0 0 0 1.5px rgb(246 243 236 / .6), var(--float); }
.here { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--marker); font: 600 12px var(--body); white-space: nowrap; }
.here i { width: 10px; height: 10px; border-radius: 50%; background: var(--marker); box-shadow: 0 0 0 4px rgb(255 90 45 / .25), 0 0 18px 4px rgb(255 90 45 / .7); animation: glowdot 2.4s ease-in-out infinite; }
@keyframes glowdot { 50% { box-shadow: 0 0 0 7px rgb(255 90 45 / .12), 0 0 26px 8px rgb(255 90 45 / .55); } }
.path__teams { position: absolute; right: 30px; bottom: 30px; display: flex; align-items: center; gap: 16px; width: 470px; padding: 14px; border-radius: 18px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1); }
.path__teams img { width: 128px; border-radius: 10px; }
.path__tag { position: absolute; top: -12px; left: 16px; padding: 4px 10px; border-radius: 999px; background: var(--ink); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .2); font: 600 10px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.path__life { position: absolute; left: 34px; bottom: 44px; display: grid; gap: 10px; max-width: 330px; padding-top: 22px; font-size: 14px; color: var(--t2); }
.path__life .path__tag { top: 0; left: 0; }
.pull { display: grid; gap: 18px; max-width: 880px; margin: clamp(60px, 8vw, 110px) auto 0; text-align: center; justify-items: center; }
.pull blockquote { font: 700 clamp(26px, 3.2vw, 44px)/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.pull--sm blockquote { font-size: clamp(22px, 2.4vw, 32px); }
.pull figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--t2); }

/* ══ 08 lesson ═══════════════════════════════════════════════════════ */
.kinds3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-self: end; border-top: 1px solid var(--paper-rule); }
.kinds3 li { display: grid; gap: 4px; padding: 16px 14px 0 0; position: relative; }
.kinds3 li + li::before { content: "→"; position: absolute; left: -18px; top: 15px; color: var(--t2p); }
.kinds3 li + li { padding-left: 4px; }
.kinds3 b { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.kinds3 span { font-size: 14px; color: var(--t2p); }
.lessonv { display: block; padding: 30px 32px 34px; }
.crumbs { font-size: 13px; color: var(--t2p); }
.crumbs b { color: var(--ink); font-weight: 600; }
.lessonv__title { margin-top: 10px; font: 800 38px/1.02 var(--display); letter-spacing: -.035em; }
.lessonv__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lessonv__meta span { padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .14); font-size: 13px; color: var(--t2p); }
.lessonv__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; margin-top: 24px; }
.lessonv__main, .lessonv__side { display: grid; gap: 18px; align-content: start; }
.player { position: relative; aspect-ratio: 16 / 8.2; border-radius: 18px; background: #0E0E0F; color: var(--paper); overflow: hidden; box-shadow: 0 0 60px -10px rgb(255 140 100 / .35); }
.player__line { position: absolute; inset: 10% 6% 30%; width: 88%; height: 60%; }
.player__cap { position: absolute; left: 0; right: 0; bottom: 62px; text-align: center; font: 600 22px var(--body); color: var(--paper); }
.player__bar { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.player__btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 12px; }
.player__track { flex: 1; height: 3px; border-radius: 3px; background: rgb(246 243 236 / .2); }
.player__track b { display: block; height: 100%; border-radius: 3px; background: var(--paper); }
.ga { height: 300px; }
.lift--ga { padding: 22px 24px; background: var(--paper-1); color: var(--ink); --lz: 130px; --ly: -34px; --lx: 26px; --lr: -7deg; --ls: 1.03; }
.ga__head { display: flex; align-items: center; justify-content: space-between; }
.score { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; }
.score b { font: 800 17px var(--display); }
.ga__q { margin-top: 12px; font: 700 21px/1.2 var(--display); letter-spacing: -.02em; }
.ga__opts { display: grid; gap: 7px; margin-top: 14px; }
.ga__opts li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .12); font-size: 14.5px; }
.ga__opts li em { margin-left: auto; font-size: 12px; color: var(--t2p); white-space: nowrap; }
.ga__opts li.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.ga__opts li.is-on em { color: var(--ink); font-weight: 600; }
.ga__opts svg { font-size: 18px; }
.ga__note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); font-size: 14.5px; }
.ga__note span { display: block; margin-bottom: 3px; font-size: 12px; color: var(--t2p); }
.irl { padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); }
.segs { display: inline-flex; gap: 2px; margin-top: 12px; padding: 3px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .14); }
.segs span { padding: 7px 12px; border-radius: 9px; font-size: 13px; color: var(--t2p); }
.segs .is-on { background: var(--ink); color: var(--paper); }
.irl__t { margin-top: 12px; font-size: 14.5px; }
.magic { padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); }
.magic__slide { aspect-ratio: 16 / 9; display: grid; align-content: center; justify-items: center; gap: 8px; margin-bottom: 12px; border-radius: 10px; background: var(--ink); color: var(--paper); text-align: center; }
.magic__slide p { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
.magic__slide span { font-size: 12px; color: var(--t2); }
.chapters { padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); }
.chapters ol { display: grid; gap: 2px; margin-top: 10px; counter-reset: ch; }
.chapters li { counter-increment: ch; display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14.5px; color: var(--t2p); }
.chapters li::before { content: counter(ch); width: 14px; color: var(--t3); font-variant-numeric: tabular-nums; }
.chapters li.is-on { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.talk { padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); }
.talk .mini-faces { margin-top: 10px; }
.talk__t { margin-top: 10px; font-size: 14px; color: var(--t2p); }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(60px, 7vw, 100px); }
.steps3 li { font-size: 16px; color: var(--t2p); line-height: 1.55; }
.steps3 b { display: block; margin: 14px 0 6px; font: 800 22px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .25); font: 700 14px var(--display); color: var(--ink); }

/* ══ 09 coaching ═════════════════════════════════════════════════════ */
.rec { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; padding: 22px; }
.rec__main { display: grid; gap: 18px; align-content: start; }
.rec__video { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgb(246 243 236 / .12), 0 0 90px -10px rgb(255 120 80 / .35); }
.rec__video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rec__play { position: absolute; left: 63%; top: 47%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 26px; box-shadow: 0 0 0 10px rgb(246 243 236 / .12), 0 0 50px 8px rgb(246 243 236 / .35); }
.player__bar--on { left: 18px; right: 18px; bottom: 14px; }
.player__bar--on .player__track b { background: var(--marker); }
.rec__sum { padding: 4px 4px 0; }
.rec__sum p:not(.card__label) { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--dim); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags span { padding: 5px 10px; border-radius: 8px; background: rgb(246 243 236 / .06); font-size: 12.5px; color: var(--t2); }
.rec__side { display: grid; gap: 16px; align-content: start; }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .12); }
.tabs span { flex: 1; padding: 9px 10px; border-radius: 9px; text-align: center; font-size: 13px; color: var(--t2); white-space: nowrap; }
.tabs .is-on { background: var(--paper); color: var(--ink); font-weight: 600; }
.rec__ch { display: grid; gap: 2px; }
.rec__ch li { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: var(--t2); }
.rec__ch span { color: var(--t3); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.rec__ch .is-on { background: rgb(246 243 236 / .07); color: var(--paper); font-weight: 600; box-shadow: inset 2px 0 0 var(--paper); }
.tx { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.tx__l { padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.tx__l b { margin-right: 8px; font-weight: 600; color: var(--paper); }
.tx__l span { margin-right: 8px; font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.tx__l.slot { height: 98px; }
.tx__l--dim { opacity: .55; }
.lift--tx { background: var(--ink-2); --lz: 140px; --ly: -24px; --lx: -40px; --lr: -6deg; --ls: 1.08; }
.lift--tx .tx__l { color: var(--paper); font-size: 15px; }
.in .lift--tx, .static .lift--tx { box-shadow: 0 0 0 1.5px var(--marker), var(--float); }
.lib { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(80px, 10vw, 140px); }
.lib__text { display: grid; gap: 20px; }
.lib__text > p { color: var(--t2); }
.searchbar { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border-radius: 14px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .14); color: var(--t2); font-size: 15px; }
.searchbar svg { font-size: 20px; color: var(--paper); }
.lib__stage { height: clamp(320px, 34vw, 460px); perspective: 1600px; }
.covers { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: center; transform-style: preserve-3d; transform: rotateX(24deg) rotateY(-18deg) rotateZ(3deg) translateY(calc(var(--p, .5) * -40px + 20px)); }
.covers img { width: 100%; border-radius: 10px; box-shadow: 0 0 0 1px rgb(246 243 236 / .12), 0 20px 30px -10px rgb(0 0 0 / .7); transition: transform 1.2s var(--expo); }
.covers img:nth-child(6) { transform: translateZ(70px) translateY(-14px); box-shadow: 0 0 0 1.5px var(--marker), var(--float); }

/* ══ 10 community ════════════════════════════════════════════════════ */
.comm { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; padding: 26px; background: var(--paper-1); }
.comm__feed, .comm__rail { display: grid; gap: 14px; align-content: start; }
.comm__feed { position: relative; }
.chips--app { display: flex; gap: 6px; }
.chips--app span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .14); font-size: 13px; color: var(--t2p); }
.chips--app svg { font-size: 15px; }
.chips--app .is-on { background: var(--ink); color: var(--paper); box-shadow: none; }
.composer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .14); font-size: 15px; color: var(--t2p); }
.pcard { padding: 20px 22px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px rgb(9 10 12 / .1); }
.pcard.slot { height: 172px; }
.lift--win { padding: 20px 22px; background: var(--paper); color: var(--ink); --lz: 110px; --ly: -6px; --lx: -26px; --lr: -6deg; --ls: 1.05; }
.lift--win .avatar--ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.newpill { justify-self: center; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; }
.poll__q { margin-top: 10px; font: 700 19px/1.2 var(--display); letter-spacing: -.02em; }
.poll ul { display: grid; gap: 7px; margin-top: 12px; }
.poll li { padding: 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(9 10 12 / .14); font-size: 14px; }
.poll__by { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--t2p); }
.holo-dot { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.holo-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; }
.dir__bars { display: grid; gap: 9px; margin-top: 14px; }
.dir__bars li { display: grid; grid-template-columns: 140px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; color: var(--t2p); }
.dir__bars i { height: 8px; border-radius: 4px; background: var(--ink); width: calc(var(--v) / 242 * 100%); transform-origin: left; transition: transform 1.4s var(--expo) .6s; }
.js .dir__bars i { transform: scaleX(0); }
.in .dir__bars i, .static .dir__bars i { transform: none; }
.dir__bars b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.dir__f { margin-top: 14px; font-size: 12.5px; color: var(--t2p); }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--paper-rule); margin-top: clamp(60px, 7vw, 100px); }
.facts3 li { display: grid; gap: 6px; padding: 26px 22px 0 0; }
.facts3 b { font: 800 clamp(30px, 3.4vw, 46px)/1 var(--display); letter-spacing: -.035em; }
.facts3 span { font-size: 14px; color: var(--t2p); }

/* ══ 11 holista ══════════════════════════════════════════════════════ */
.holista__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.holista__grid > div:first-child { display: grid; gap: 24px; }
.holo-line svg { width: min(100%, 520px); height: auto; }
.holo-line__p { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 3s cubic-bezier(.3, .7, .2, 1) .3s; }
.in .holo-line__p, .static .holo-line__p, .holo-line.in .holo-line__p { stroke-dashoffset: 0; }
.chat { display: grid; gap: 14px; padding: 26px; border-radius: 26px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1), 0 60px 120px -30px rgb(0 0 0 / .8); transform: perspective(1600px) rotateX(10deg) rotateY(-8deg); }
.bubble { max-width: 88%; padding: 14px 18px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; }
.bubble--me { justify-self: end; background: var(--paper); color: var(--ink); border-bottom-right-radius: 6px; }
.bubble--ai { justify-self: start; display: grid; gap: 10px; max-width: 100%; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1); border-bottom-left-radius: 6px; }
.bubble__who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--dim); }
.ai { padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .3); font-size: 10px; letter-spacing: .1em; }
.hplan { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.hplan li { display: grid; grid-template-columns: 22px auto 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--dim); }
.hplan svg { font-size: 20px; color: var(--paper); }
.hplan b { color: var(--paper); font-weight: 600; white-space: nowrap; }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.srcs span { padding: 5px 10px; border-radius: 8px; background: rgb(246 243 236 / .06); font-size: 12px; color: var(--t2); }

/* ══ 12 implementation ═══════════════════════════════════════════════ */
.ember { background: radial-gradient(60% 90% at 28% 30%, #F0582B, rgb(240 88 43 / .0) 70%), radial-gradient(60% 80% at 80% 80%, #E9A48A, transparent 70%), linear-gradient(120deg, #E9673F, #EAB9A5); color: var(--ink); padding: clamp(110px, 16vw, 220px) 0; overflow: clip; }
.ember::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 50% at 30% 40%, rgb(255 210 190 / .0), rgb(9 10 12 / .0)); }
.impl-intro .wrap { display: grid; gap: 22px; }
.impl-intro .lyric { font-size: clamp(48px, 8.6vw, 140px); max-width: 11ch; }
.impl-intro__sub { font: 800 clamp(28px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.035em; color: rgb(9 10 12 / .78); }
.impl { padding-top: clamp(80px, 9vw, 130px); }
.impl__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.badge-coming { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .3); font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.badge-coming::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); animation: pulse 2.4s ease-out infinite; }
.film { margin-top: clamp(48px, 6vw, 80px); perspective: 2200px; }
.film__frame { position: relative; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(246 243 236 / .14), 0 0 120px -10px rgb(255 90 45 / .45), 0 80px 140px -40px rgb(0 0 0 / .9); transform: rotateX(8deg); transform-origin: 50% 100%; transition: transform 1.6s var(--expo); }
.film.in .film__frame, .static .film__frame { transform: rotateX(4deg); }
.film__v { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film__sound { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: rgb(9 10 12 / .66); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .3); color: var(--paper); font-size: 14px; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.film__sound svg { font-size: 20px; }
.film__full { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 999px; background: rgb(9 10 12 / .66); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .3); color: var(--paper); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.film__full svg { width: 20px; height: 20px; }
.film__full:hover { background: rgb(9 10 12 / .82); }
.film__full + .film__sound { right: 74px; }
.film__sound[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.film figcaption { margin-top: 16px; text-align: center; font-size: 13px; color: var(--t3); }
.impl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(60px, 7vw, 100px); }
.cc { position: relative; min-height: 190px; padding: 22px 24px 70px; border-radius: 20px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1), 0 40px 80px -30px rgb(0 0 0 / .8); transform: perspective(1400px) rotateX(10deg); }
.cc__k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--t2); }
.cc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t2); }
.cc__p { margin-top: 16px; font-size: 19px; line-height: 1.45; color: var(--paper); }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--paper); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cc__send { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 18px; }
.commits { padding: 22px 24px; border-radius: 20px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1); transform: perspective(1400px) rotateX(10deg); }
.commits__line { position: relative; display: flex; justify-content: space-between; margin: 34px 4px 0; }
.commits__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgb(246 243 236 / .14); }
.commits__line::after { content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 48%; background: var(--dim); transform-origin: left; transform: scaleX(0); transition: transform 2.2s var(--expo) .4s; }
.commits.in .commits__line::after, .static .commits__line::after, .in .commits__line::after { transform: none; }
.c { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-1); box-shadow: inset 0 0 0 1.5px rgb(246 243 236 / .4); }
.c:nth-child(-n+10) { background: var(--dim); box-shadow: none; }
.c--on { width: 18px; height: 18px; margin-top: -3px; background: var(--paper); box-shadow: 0 0 0 5px rgb(246 243 236 / .14), 0 0 24px 4px rgb(246 243 236 / .4); }
.c--on::after { content: "Commit 11"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--paper); white-space: nowrap; }
.commits__t { margin-top: 26px; font-size: 15px; color: var(--t2); }
.buildcourses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.buildcourses li { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 18px; background: rgb(246 243 236 / .035); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .09); font-size: 13px; color: var(--t2); }
.buildcourses b { font: 700 17px/1.15 var(--display); letter-spacing: -.015em; color: var(--paper); }
.bc__k { display: flex; align-items: center; gap: 6px; font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.bc__k svg { font-size: 14px; color: var(--paper); }
.modules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: clamp(60px, 7vw, 100px); }
.modules > div { display: grid; gap: 14px; }
.modules p { color: var(--t2); }
.toggles { display: grid; padding: 8px 22px; border-radius: 20px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1), 0 40px 80px -30px rgb(0 0 0 / .8); }
.toggles li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--t2); }
.toggles li:last-child { border: 0; }
.toggles b { display: block; font-size: 16px; font-weight: 600; color: var(--paper); }
.sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgb(246 243 236 / .14); }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--dim); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.sw--on { background: var(--paper); }
.sw--on::after { background: var(--ink); transform: translateX(18px); }

/* ══ 13 life ═════════════════════════════════════════════════════════ */
.life .wrap:first-child { display: grid; gap: 24px; }
.life .lyric { max-width: 14ch; }
.life__sub { font: 700 clamp(24px, 2.8vw, 38px)/1.2 var(--display); letter-spacing: -.025em; color: var(--dim); max-width: 26ch; }
.mosaic { display: grid; grid-template-columns: 1fr .78fr 1fr; grid-template-rows: auto auto; gap: clamp(12px, 1.6vw, 22px); max-width: 1440px; margin: clamp(56px, 7vw, 100px) auto 0; padding: 0 var(--gut); perspective: 2200px; }
.ph { grid-column: var(--c); grid-row: var(--r); position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9); transform: translateY(calc((var(--p, .5) - .5) * var(--z, 0px) * -1.4)); }
.ph--tall { grid-row: 1 / span 2; }
.ph img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transform: scale(1.08); transition: transform 2.4s var(--expo); }
.ph--tall img { aspect-ratio: auto; }
.mosaic.in .ph img, .static .ph img { transform: scale(1.01); }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgb(9 10 12 / .72)); font: 600 15px var(--body); color: var(--paper); }

/* ══ 14 promise ══════════════════════════════════════════════════════ */
.promise__in { display: grid; justify-items: center; gap: 30px; text-align: center; }
.promise .lyric { font-size: clamp(46px, 7.6vw, 124px); }
.promises { display: grid; gap: 0; width: min(100%, 680px); margin-top: 10px; border-top: 1px solid var(--paper-rule); text-align: left; }
.promises li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--paper-rule); font-size: 18px; color: var(--t2p); }
.promises b { font: 800 clamp(22px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -.025em; color: var(--ink); }
.promises b.m { color: var(--marker-text); }
.promise__sign { font: 600 34px/1 var(--hand); color: var(--ink); transform: rotate(-2deg); }

/* ══ 15 voices ═══════════════════════════════════════════════════════ */
.voices .wrap { display: grid; gap: 26px; }
.feature { display: grid; gap: 26px; max-width: 1080px; margin: clamp(30px, 4vw, 60px) 0 clamp(30px, 4vw, 60px); }
.feature blockquote { font: 700 clamp(28px, 3.8vw, 54px)/1.1 var(--display); letter-spacing: -.03em; text-wrap: pretty; }
.feature blockquote em { color: var(--marker); }
.feature figcaption, .q figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--t2); }
.feature figcaption b, .q figcaption b { display: block; color: var(--paper); font-weight: 600; }
.wall { columns: 3 320px; column-gap: 16px; }
.q { break-inside: avoid; display: grid; gap: 18px; margin-bottom: 16px; padding: 24px; border-radius: 20px; background: rgb(246 243 236 / .035); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .09); transition: transform .5s var(--expo), box-shadow .5s, background .5s; }
.q:hover { transform: translateY(-4px); background: rgb(246 243 236 / .06); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .18), var(--float); }
.q blockquote { font: 600 18px/1.45 var(--display); letter-spacing: -.01em; color: var(--paper); }

/* ══ 16 pricing ══════════════════════════════════════════════════════ */
.pricing { overflow: clip; }
.horizon { position: absolute; left: 50%; top: 31%; width: 180vw; max-width: 2600px; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, #0B0B0C 96%, transparent 100%); box-shadow: 0 -2px 0 rgb(255 140 100 / .6), 0 -30px 80px rgb(255 90 45 / .45), 0 -120px 200px rgb(255 90 45 / .22); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 10px; }
.plan { position: relative; display: grid; gap: 14px; padding: 30px 28px 32px; border-radius: 24px; background: rgb(18 18 18 / .8); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.plan__n { font: 600 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.plan__p { display: flex; align-items: baseline; gap: 10px; }
.plan__p b { font: 800 clamp(48px, 5vw, 64px)/1 var(--display); letter-spacing: -.045em; }
.plan__p span { font-size: 15px; color: var(--t2); }
.plan__w { font-size: 16px; color: var(--dim); min-height: 2.9em; }
.plan__l { display: grid; gap: 11px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--dim); }
.plan__l li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; line-height: 1.4; }
.plan__l svg { font-size: 18px; margin-top: 1px; color: var(--paper); }
.plan__l .off { color: var(--t3); }
.plan__l .off svg { color: var(--t3); }
.plan__l b { color: var(--paper); font-weight: 600; }
.plan--ic { background: linear-gradient(180deg, #1D1D1D, #141414); box-shadow: inset 0 0 0 1.5px rgb(246 243 236 / .3), 0 50px 90px -30px rgb(0 0 0 / .9), 0 0 100px -30px rgb(255 90 45 / .35); }
@media (min-width: 900px) { .plan--ic, .js .plan--ic[data-r].in { transform: translateY(-18px); } }
.plan__best { position: absolute; top: -13px; left: 28px; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.math { margin-top: clamp(80px, 9vw, 130px); }
.math__head { display: grid; gap: 16px; max-width: 900px; margin-bottom: 36px; }
.math__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.calc { display: grid; gap: 16px; align-content: start; padding: 26px; border-radius: 22px; background: var(--ink-1); box-shadow: inset 0 0 0 1px rgb(246 243 236 / .09); }
.calc__lbl { font: 700 19px/1.25 var(--display); letter-spacing: -.015em; color: var(--paper); }
.calc__lbl output { font-variant-numeric: tabular-nums; }
.calc input[type=range] { width: 100%; accent-color: var(--paper); height: 28px; }
.calc__bars { display: grid; gap: 12px; }
.calc__row { display: grid; grid-template-columns: 92px 1fr 70px; align-items: center; gap: 10px; font-size: 14px; color: var(--t2); }
.calc__row i { height: 10px; border-radius: 5px; background: rgb(246 243 236 / .08); overflow: hidden; }
.calc__row b { display: block; height: 100%; border-radius: 5px; background: var(--t2); transition: width .5s var(--expo); }
.calc__row--ic b { background: var(--paper); }
.calc__row strong { text-align: right; color: var(--paper); font-variant-numeric: tabular-nums; }
.calc__out { font-size: 15px; color: var(--dim); }
.calc__f { font-size: 13px; color: var(--t3); line-height: 1.5; }
.calc__in { display: grid; gap: 10px; }
.calc__in label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--dim); }
.num { display: inline-flex; align-items: center; gap: 2px; padding: 0 12px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(246 243 236 / .2); font-weight: 600; color: var(--paper); }
.num input { width: 64px; border: 0; background: none; color: inherit; font: 600 16px var(--body); text-align: right; outline: none; -moz-appearance: textfield; }
.num:focus-within { box-shadow: inset 0 0 0 1.5px var(--paper); }
.num input::-webkit-inner-spin-button { opacity: .4; }
.calc__big { font: 800 clamp(36px, 3.6vw, 48px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calc--quote blockquote { font: 600 18px/1.45 var(--display); color: var(--paper); }

/* ══ 17 faq ══════════════════════════════════════════════════════════ */
.faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); }
.faq__grid > div:first-child { display: grid; gap: 18px; align-content: start; position: sticky; top: 120px; height: max-content; }
.faq__list { border-top: 1px solid var(--paper-rule); }
.faq details { border-bottom: 1px solid var(--paper-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--display); letter-spacing: -.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor 0 0) center / 14px 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 14px no-repeat; transition: transform .4s var(--expo); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 26px 0; font-size: 17px; color: var(--t2p); max-width: 62ch; }

/* ══ 18 close + footer ═══════════════════════════════════════════════ */
.close { padding: clamp(140px, 18vw, 240px) 0 clamp(120px, 14vw, 200px); text-align: center; }
.close__in { display: grid; justify-items: center; gap: 36px; }
.close__logo { width: clamp(240px, 32vw, 430px); height: auto; }
.close .lyric { font-size: clamp(42px, 6.4vw, 104px); }
.close__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.close__sign { font-size: 16px; color: var(--t2p); }
.close__sign span { display: block; margin-top: 6px; font: 600 32px/1 var(--hand); color: var(--ink); transform: rotate(-2deg); }
.foot { background: var(--paper); color: var(--ink); padding: 0 0 56px; }
.foot__in { display: grid; gap: 22px; padding-top: 34px; border-top: 1px solid var(--paper-rule); }
.foot__in img { height: 18px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot nav a { font-size: 14px; color: var(--t2p); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot p { font-size: 13px; color: var(--t2p); }

/* the film viewer */
.viewer { width: min(1200px, 94vw); padding: 0; border: 0; border-radius: 18px; background: #000; overflow: hidden; }
.viewer::backdrop { background: rgb(9 10 12 / .86); }
.viewer video { width: 100%; aspect-ratio: 16 / 9; }
.viewer__x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(9 10 12 / .7); color: var(--paper); font-size: 24px; cursor: pointer; }

/* ══ static (?static) and reduced motion: everything in its final state ═ */
.static .w, .static [data-r] { opacity: 1 !important; filter: none !important; transition: none !important; }
.static [data-r]:not(.pain):not(.plan--ic) { transform: none !important; }
.static .tilt { opacity: 1; transform: rotateX(calc(var(--rx) - 3deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) !important; transition: none; }
.static .lift, .static .plane, .static .path__trace, .static .dir__bars i, .static .course--here { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .grain, .haze::before, .light::before, .tiles img, .live-dot, .here i, .badge-coming::before, .caret { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ══ responsive ══════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .nav__links a:nth-child(2) { display: none; }
  .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buildcourses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero__grid, .before__grid, .method__grid, .framework__grid, .holista__grid, .lib, .modules, .faq__grid, .sec__head--split { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { margin-right: calc(-1 * var(--gut) - 30vw); margin-top: 10px; }
  .hero { min-height: 0; }
  .tiles { max-width: 560px; width: 100%; justify-self: center; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .plan--ic { order: -1; }
  .math__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__grid > div:first-child { position: static; }
  .proof__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof__row li:nth-child(4) { border-left: 0; padding-left: 0; }
  .proof__row li:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .impl__grid { grid-template-columns: minmax(0, 1fr); }
  .nav__links { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .sec { padding: 88px 0; }
  .nav { padding-left: 16px; }
  .nav__login { display: none; }
  .dock { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); justify-content: flex-end; padding-left: 8px; }
  .dock.is-on { transform: none; }
  .dock__txt { display: none; }
  .dock .btn { flex: 1; }
  .hero { padding-top: 110px; }
  .hero__stage { margin-right: calc(-1 * var(--gut) - 40vw); }
  .pains { grid-template-columns: minmax(0, 1fr); }
  .pain:nth-child(even), .js .pain:nth-child(even)[data-r].in { transform: none; }
  .js .pain:nth-child(even)[data-r] { transform: translateY(26px); }
  .proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__row li { padding: 22px 14px; }
  .proof__row li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .proof__row li:nth-child(4) { border-left: 1px solid var(--rule); padding-left: 14px; }
  .proof__row li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .steps3, .facts3, .kinds3 { grid-template-columns: minmax(0, 1fr); }
  .kinds3 li + li::before { display: none; }
  .kinds3 li + li { padding-left: 0; }
  .buildcourses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .ph { grid-column: auto !important; grid-row: auto !important; }
  .ph--tall { grid-column: 1 / -1 !important; }
  .ph--tall img { aspect-ratio: 16 / 11; }
  .ph figcaption { font-size: 13px; padding: 30px 12px 10px; }
  .planes { height: 360px; }
  .plane b { font-size: 26px; }
  .plane { padding: 18px 20px; }
  .wall { columns: 1; }
  .chat { transform: none; padding: 18px; }
  .cc, .commits { transform: none; }
  .commits__line { margin-inline: 0; }
  .c { width: 9px; height: 9px; }
  .c--on { width: 14px; height: 14px; margin-top: -2.5px; }
  .faq details p { padding-right: 0; }
  .calc__row { grid-template-columns: 84px 1fr 62px; }
  .lib__stage { height: 260px; }
}
@media (max-width: 420px) {
  .hero__cta .link-arrow { width: 100%; }
  .buildcourses { grid-template-columns: minmax(0, 1fr); }
}

/* ── myicor.com: the legal links, Privacy Settings (reopens the consent banner) and the fine print ── */
.foot__legal, .foot__more { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.foot__legal a, .foot__more a { font-size: 13px; color: var(--t2p); text-decoration: none; }
.foot__legal a:hover, .foot__more a:hover, .cookie-settings-btn:hover { color: var(--ink); }
.cookie-settings-btn { font: inherit; font-size: 13px; color: var(--t2p); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.cookie-settings-btn:focus-visible, .foot__legal a:focus-visible, .foot__more a:focus-visible { outline: 2px solid var(--marker, #FF5A2D); outline-offset: 3px; border-radius: 2px; }
.foot .foot__fine { font-size: 12px; color: var(--t2p); opacity: .8; }