@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --black: #050505;
  --white: #fff;
  --ink-muted: rgba(5, 5, 5, .62);
  --line-light: rgba(5, 5, 5, .14);
  --line-dark: rgba(255, 255, 255, .22);
  --page-max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --font-display: 'Space Grotesk', 'Arial Black', Arial, sans-serif;
  --font-body: 'Space Grotesk', Arial, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --radius-card: 1.25rem;
  --radius-control: .7rem;
  --shadow-card: 0 18px 55px rgba(5, 5, 5, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--black); background: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
::selection { color: var(--white); background: var(--black); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
button, a[href] { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; }
.section-dark button:focus-visible, .section-dark a:focus-visible, .section-dark input:focus-visible { outline-color: var(--white); }
img, svg { display: block; max-width: 100%; }

.section-light { background: var(--white); color: var(--black); }
.section-dark { background: var(--black); color: var(--white); }
.container { width: min(var(--page-max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .75rem; left: 1rem; z-index: 100; transform: translateY(-200%); background: var(--black); color: var(--white); padding: .75rem 1rem; border-radius: .4rem; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line-light); backdrop-filter: blur(16px); }
.header-inner { height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-width: max-content; }
.brand-mark { width: 1.8rem; height: 1.8rem; display: grid; grid-template-columns: repeat(2, .58rem); grid-template-rows: repeat(2, .58rem); gap: .2rem; transform: rotate(-12deg); }
.brand-mark span { display: block; background: currentColor; border-radius: .16rem; }
.brand-mark span:nth-child(2) { transform: translateY(.18rem); }
.brand-mark span:nth-child(3) { transform: translateX(.14rem); }
.brand-mark span:nth-child(4) { transform: translate(.18rem, -.08rem); }
.brand-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -.07em; }
.brand-name em { font-style: normal; font-weight: 400; }
.brand-logo { width: 1.9rem; height: 1.9rem; object-fit: contain; filter: invert(1); }.section-dark .brand-logo { filter: none; }
.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); font-size: .9rem; font-weight: 600; }
.primary-nav a:not(.button) { position: relative; padding-block: .45rem; }
.primary-nav a:not(.button):after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ''; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.primary-nav a:not(.button):hover:after { transform: scaleX(1); }
.nav-login { display: inline-flex; gap: .35rem; align-items: center; }
.menu-toggle { display: none; background: transparent; padding: .6rem; }
.menu-line { display: block; width: 1.5rem; height: 2px; background: var(--black); transition: transform .25s ease; }
.menu-line + .menu-line { margin-top: .4rem; }

.button { min-height: 3.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .85rem; padding: .8rem 1.2rem; border: 1px solid var(--black); border-radius: var(--radius-control); font-weight: 700; font-size: .9rem; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(0); }
.button-dark { color: var(--white); background: var(--black); }
.button-dark:hover { color: var(--black); background: var(--white); }
.button-light { color: var(--black); background: var(--white); border-color: var(--white); }
.button-light:hover { color: var(--white); background: var(--black); }
.button-small { min-height: 2.65rem; padding: .55rem .95rem; font-size: .8rem; }

.hero { position: relative; overflow: hidden; padding-top: clamp(4rem, 9vw, 8rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(27rem, .98fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; min-height: 38rem; padding-bottom: clamp(5rem, 8vw, 8rem); }
.eyebrow, .mono-label { font-family: var(--font-mono); font-size: .68rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.45rem; font-weight: 500; }
.eyebrow-dot { width: .55rem; height: .55rem; flex: none; display: inline-block; background: currentColor; border-radius: 50%; }
.eyebrow-inverse { color: var(--white); }
.hero h1, .tracks h2, .rhythm h2, .final-cta h2, .voices h2, .method h2 { margin: 0; font-family: var(--font-display); letter-spacing: -.075em; font-weight: 600; }
.hero h1 { max-width: 44rem; font-size: clamp(3.4rem, 6vw, 6.8rem); line-height: .96; }
.hero h1 span { display: inline-block; position: relative; }
.hero h1 span:after { position: absolute; right: 0; bottom: -.5rem; left: 0; height: .5rem; content: ''; background: var(--black); clip-path: polygon(0 45%, 100% 0, 99% 55%, 0 100%); }
.hero-description { max-width: 32rem; margin: 2.15rem 0 1.8rem; font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.5; color: var(--ink-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; }
.text-link, .card-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 700; }
.text-link:hover, .card-link:hover { text-decoration: underline; text-underline-offset: .25rem; }
.hero-note { display: flex; align-items: center; gap: .8rem; margin-top: 4rem; color: var(--ink-muted); font-size: .78rem; }
.note-rule { width: 2rem; height: 1px; background: var(--black); }

.hero-visual { min-height: 34rem; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-visual:before { position: absolute; top: 10%; right: 4%; width: 78%; height: 70%; content: ''; background: var(--black); border-radius: 50%; opacity: .04; filter: blur(1px); }
.visual-topline { position: absolute; top: 0; right: 0; left: 1rem; display: flex; justify-content: space-between; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--line-light); }
.status-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; }
.status-chip span { width: .5rem; height: .5rem; display: inline-block; background: var(--black); border-radius: 50%; }
.study-panel { position: relative; z-index: 1; width: min(100%, 32rem); padding: 1.55rem; color: var(--white); background: var(--black); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transform: rotate(2deg); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-dark); }
.panel-heading .mono-label { color: rgba(255,255,255,.62); }
.panel-heading h2 { margin: .5rem 0 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: -.05em; }
.panel-heading h2 span { color: rgba(255,255,255,.55); font-size: .9rem; font-weight: 400; letter-spacing: -.02em; }
.day-progress { padding-top: .25rem; font-family: var(--font-mono); font-size: .73rem; color: rgba(255,255,255,.64); }
.progress-track { height: .45rem; margin: 1.2rem 0 1.25rem; background: rgba(255,255,255,.18); border-radius: 20rem; overflow: hidden; }
.progress-track span { display: block; width: 62%; height: 100%; background: var(--white); border-radius: inherit; }
.lesson-list { display: grid; gap: .52rem; }
.lesson { min-height: 4.05rem; display: grid; grid-template-columns: 1.8rem 1fr 1.5rem; align-items: center; gap: .7rem; padding: .75rem .8rem; border: 1px solid transparent; border-radius: .75rem; }
.lesson-index { align-self: start; padding-top: .14rem; font-family: var(--font-mono); font-size: .68rem; color: rgba(255,255,255,.45); }
.lesson strong, .lesson span:not(.lesson-index):not(.lesson-state):not(.lesson-arrow):not(.lesson-lock) { display: block; }
.lesson strong { font-size: .87rem; }
.lesson div span { margin-top: .18rem; font-size: .7rem; color: rgba(255,255,255,.56); }
.lesson-state, .lesson-arrow, .lesson-lock { justify-self: end; font-size: 1rem; }
.lesson-state { color: var(--white); }
.lesson-current { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.11); }
.lesson-current .lesson-index, .lesson-current .lesson-arrow { color: var(--white); }
.lesson-upcoming { opacity: .5; }
.panel-button { width: 100%; display: flex; justify-content: space-between; margin-top: 1.15rem; padding: .9rem 0 .1rem; color: var(--white); background: transparent; border-top: 1px solid var(--line-dark); font-size: .75rem; font-weight: 700; text-align: left; }
.panel-button:hover { text-decoration: underline; text-underline-offset: .25rem; }
.floating-card { position: absolute; z-index: 2; display: flex; background: var(--white); border: 1px solid var(--black); box-shadow: 8px 8px 0 var(--black); }
.floating-card-score { top: 15%; right: -1rem; width: 8.7rem; flex-direction: column; padding: 1rem; transform: rotate(-7deg); }
.floating-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; }
.floating-card-score strong { margin-top: .3rem; font-family: var(--font-display); font-size: 3rem; line-height: .9; letter-spacing: -.08em; }
.floating-card-score strong small { font-size: 1.2rem; letter-spacing: 0; }
.floating-trend { margin-top: .45rem; font-size: .61rem; }
.floating-card-streak { right: -2rem; bottom: 8%; align-items: center; gap: .7rem; padding: .75rem 1rem .75rem .75rem; transform: rotate(5deg); }
.streak-mark { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; color: var(--white); background: var(--black); border-radius: 50%; font-family: var(--font-display); font-weight: 600; }
.floating-card-streak strong, .floating-card-streak span:not(.streak-mark) { display: block; }
.floating-card-streak strong { font-size: .75rem; }
.floating-card-streak span:not(.streak-mark) { margin-top: .15rem; font-family: var(--font-mono); font-size: .55rem; }
.hero-ticker { display: flex; width: 100%; overflow: hidden; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.ticker-track { display: flex; flex: none; align-items: center; gap: 1.5rem; padding: .9rem 0; animation: ticker 32s linear infinite; white-space: nowrap; }
.ticker-track span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; }
.ticker-track i { font-style: normal; font-size: .75rem; }

.product-previews { padding: clamp(5rem, 10vw, 9rem) 0; background: #fafafa; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.product-previews-intro { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.product-preview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.product-shot { min-width: 0; margin: 0; padding: .7rem; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-card); box-shadow: 10px 10px 0 rgba(5, 5, 5, .08); }
.product-shot-filters { margin-top: 4.5rem; }
.shot-browserbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem .55rem .7rem; color: rgba(5,5,5,.48); border-bottom: 1px solid var(--line-light); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .08em; }
.shot-question-shell { padding: .7rem; background: #f8f8f8; border-radius: .65rem; }
.shot-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .28rem; margin-bottom: .65rem; font-family: var(--font-mono); font-size: .43rem; letter-spacing: .07em; text-transform: uppercase; }
.shot-meta > span:not(.shot-meta-id) { padding: .25rem .38rem; background: var(--white); border: 1px solid rgba(5,5,5,.18); border-radius: .2rem; }
.shot-meta-id { margin-left: auto; color: rgba(5,5,5,.48); }
.shot-question-card { padding: 1.1rem 1rem 1.15rem; background: var(--white); border: 1px solid rgba(5,5,5,.14); border-left: 4px solid var(--black); border-radius: .55rem; font-family: Georgia, 'Times New Roman', serif; }
.shot-question-card .shot-label, .shot-filter-shell .shot-label { margin: 0 0 .75rem; color: rgba(5,5,5,.56); font-family: var(--font-mono); font-size: .45rem; letter-spacing: .11em; }
.shot-question-card .shot-label:after { display: inline-block; width: 1.2rem; height: 1px; margin-left: .55rem; vertical-align: middle; content: ''; background: rgba(5,5,5,.42); }
.shot-question-card h3 { margin: 0 0 .75rem; font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 400; line-height: 1.45; }
.shot-question-card p { margin: .8rem 0 0; font-size: clamp(.9rem, 1.55vw, 1.12rem); line-height: 1.45; }
.shot-question-card ul { display: grid; gap: .2rem; margin: .75rem 0; padding: 0; list-style: none; font-size: clamp(.88rem, 1.45vw, 1.06rem); line-height: 1.45; }
.shot-options { display: grid; gap: .38rem; margin-top: .7rem; }
.shot-options > div { display: grid; grid-template-columns: 1.35rem 1fr; align-items: center; gap: .45rem; min-height: 2.1rem; padding: .45rem .55rem; background: var(--white); border: 1px solid rgba(5,5,5,.14); border-radius: .35rem; color: rgba(5,5,5,.74); font-family: var(--font-mono); font-size: .48rem; }
.shot-options b { width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border: 1px solid rgba(5,5,5,.26); border-radius: 50%; font-size: .45rem; font-weight: 400; }
.shot-submit, .shot-filter-cta { display: flex; justify-content: space-between; align-items: center; width: max-content; min-width: 7.2rem; margin-top: .7rem; padding: .65rem .75rem; color: var(--white); background: #777; border-radius: .3rem; font-family: var(--font-body); font-size: .55rem; font-weight: 700; }
.shot-caption { display: flex; align-items: flex-start; gap: .7rem; padding: .95rem .35rem .2rem; }
.shot-index { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; flex: none; color: var(--white); background: var(--black); border-radius: 50%; font-family: var(--font-mono); font-size: .55rem; }
.shot-caption strong, .shot-caption small { display: block; }
.shot-caption strong { font-size: .8rem; }
.shot-caption small { margin-top: .2rem; color: var(--ink-muted); font-size: .72rem; }
.shot-filter-shell { min-height: 28rem; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.6rem) 1.2rem; background: var(--white); }
.shot-filter-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.shot-filter-heading .shot-label { margin-bottom: .65rem; }
.shot-filter-heading h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.06em; }
.shot-filter-heading > span { color: rgba(5,5,5,.62); font-size: .62rem; text-decoration: underline; text-underline-offset: .2rem; }
.shot-filter-fields { display: grid; gap: .85rem; margin-top: 1.8rem; }
.shot-filter-fields label { display: grid; gap: .35rem; }
.shot-filter-fields label > span { color: rgba(5,5,5,.62); font-family: var(--font-mono); font-size: .43rem; letter-spacing: .1em; }
.shot-filter-fields label > div { display: flex; justify-content: space-between; align-items: center; min-height: 2.35rem; padding: .55rem .7rem; border: 1px solid rgba(5,5,5,.17); border-radius: .38rem; font-size: .63rem; }
.shot-filter-fields i { color: var(--black); font-size: .9rem; font-style: normal; line-height: .6; }
.shot-filter-hint { display: flex; gap: .55rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-light); color: var(--ink-muted); font-size: .58rem; line-height: 1.4; }
.shot-filter-hint b { width: 1.1rem; height: 1.1rem; display: grid; place-items: center; flex: none; color: var(--white); background: var(--black); border-radius: 50%; font-size: .55rem; }
.shot-filter-cta { width: 100%; margin-top: 1.2rem; padding-block: .85rem; background: var(--black); }

.method { padding: clamp(6rem, 11vw, 10rem) 0; }
.section-intro { display: grid; grid-template-columns: 1fr minmax(18rem, 1fr); align-items: end; column-gap: 4rem; margin-bottom: 3.5rem; }
.section-intro .eyebrow { grid-column: 1 / -1; }
.section-intro h2 { max-width: 40rem; font-size: clamp(2.5rem, 4vw, 4.8rem); line-height: .98; }
.section-intro > p:last-child { max-width: 23rem; margin: 0; color: var(--ink-muted); font-size: 1.03rem; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.method-card { min-height: 24rem; display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.method-card-inverse { color: var(--white); background: var(--black); }
.method-number { font-family: var(--font-mono); font-size: .7rem; }
.method-icon { width: 3.5rem; height: 3.5rem; position: relative; display: grid; place-items: center; margin: 2.5rem 0 2rem; border: 1px solid currentColor; border-radius: 50%; }
.method-icon:before, .method-icon:after { position: absolute; content: ''; border: 1px solid currentColor; border-radius: 50%; }
.method-icon:before { inset: .5rem; }
.method-icon:after { inset: 1.05rem; }
.method-icon span { width: .25rem; height: .25rem; position: absolute; background: currentColor; border-radius: 50%; }
.icon-route span:nth-child(1) { top: .45rem; right: .5rem; }.icon-route span:nth-child(2) { bottom: .5rem; left: .45rem; }.icon-route span:nth-child(3) { top: 1.45rem; left: 1.55rem; }
.icon-focus:before { border-radius: .1rem; transform: rotate(45deg); }.icon-focus:after { border-radius: .1rem; transform: rotate(45deg) scale(.55); }.icon-focus span { width: .45rem; height: 1px; }.icon-focus span:nth-child(1) { top: .72rem; }.icon-focus span:nth-child(2) { right: .72rem; transform: rotate(90deg); }.icon-focus span:nth-child(3) { bottom: .72rem; }.icon-focus span:nth-child(4) { left: .72rem; transform: rotate(90deg); }
.icon-calendar { border-radius: .5rem; }.icon-calendar:before, .icon-calendar:after { border-radius: 0; }.icon-calendar span { position: relative; width: .3rem; height: .3rem; }.icon-calendar span:nth-child(1) { transform: translate(-.45rem, -.45rem); }.icon-calendar span:nth-child(2) { transform: translate(.45rem, -.45rem); }.icon-calendar span:nth-child(3) { transform: translate(-.45rem, .45rem); }.icon-calendar span:nth-child(4) { transform: translate(.45rem, .45rem); }
.method-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.05em; }
.method-card p { max-width: 18rem; margin: .75rem 0 1.3rem; color: var(--ink-muted); font-size: .93rem; }
.method-card-inverse p { color: rgba(255,255,255,.6); }
.card-link { margin-top: auto; font-size: .77rem; }

.tracks { padding: clamp(5rem, 10vw, 8rem) 0; }
.tracks-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(28rem, 1.15fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.tracks h2 { max-width: 34rem; font-size: clamp(3rem, 5vw, 5.8rem); line-height: .93; }
.tracks h2 em { font-style: normal; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.tracks-copy > p:not(.eyebrow) { max-width: 24rem; margin: 1.75rem 0 2.8rem; color: rgba(255,255,255,.6); font-size: 1rem; }
.track-insight { max-width: 23rem; padding: 1.2rem 0 0; border-top: 1px solid var(--line-dark); }
.insight-label { display: block; margin-bottom: .45rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: rgba(255,255,255,.52); }
.track-insight strong { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.05em; }
.track-insight span:last-child { display: block; margin-top: .3rem; color: rgba(255,255,255,.58); font-size: .8rem; }
.track-selector { display: grid; gap: .7rem; }
.track-option { min-height: 4.65rem; display: grid; grid-template-columns: 3rem 1fr 1.5rem; align-items: center; gap: 1rem; padding: .7rem 1rem; color: var(--white); background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius-control); text-align: left; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.track-option:hover, .track-option.is-selected { color: var(--black); background: var(--white); transform: translateX(-.4rem); }
.track-symbol { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-mono); font-size: .95rem; }
.track-option strong, .track-option small { display: block; }.track-option strong { font-size: .98rem; }.track-option small { margin-top: .2rem; color: rgba(255,255,255,.54); font-family: var(--font-mono); font-size: .61rem; text-transform: uppercase; letter-spacing: .06em; }.track-option:hover small, .track-option.is-selected small { color: var(--ink-muted); }.option-arrow { justify-self: end; font-size: 1.15rem; }

.rhythm { padding: clamp(6rem, 11vw, 10rem) 0; }
.rhythm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); gap: clamp(4rem, 10vw, 10rem); align-items: center; }
.rhythm-visual { padding: 1.5rem; border: 1px solid var(--black); border-radius: var(--radius-card); }
.chart-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line-light); }.chart-header strong { font-family: var(--font-mono); font-size: .72rem; }.chart-area { position: relative; height: 18rem; margin-top: 1.5rem; padding-left: 2.4rem; }.chart-y { position: absolute; top: -.3rem; bottom: 1.7rem; left: 0; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: .55rem; color: var(--ink-muted); }.chart-lines { position: absolute; top: 0; right: 0; bottom: 1.7rem; left: 2.4rem; display: flex; flex-direction: column; justify-content: space-between; }.chart-lines span { height: 1px; background: var(--line-light); }.chart-svg { position: absolute; right: 0; bottom: 1.7rem; left: 2.4rem; width: calc(100% - 2.4rem); height: calc(100% - 1.7rem); color: var(--black); overflow: visible; }.chart-x { position: absolute; right: 0; bottom: 0; left: 2.4rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .55rem; color: var(--ink-muted); }.chart-caption { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line-light); font-size: .78rem; }.chart-dot { width: .55rem; height: .55rem; background: var(--black); border-radius: 50%; }
.rhythm-copy h2 { max-width: 35rem; font-size: clamp(2.6rem, 4vw, 4.4rem); line-height: .96; }.rhythm-copy > p:not(.eyebrow) { max-width: 26rem; margin: 1.8rem 0 2.4rem; color: var(--ink-muted); }.rhythm-list { border-top: 1px solid var(--line-light); }.rhythm-list > div { display: grid; grid-template-columns: 2rem 1fr; column-gap: .75rem; padding: .95rem 0; border-bottom: 1px solid var(--line-light); }.rhythm-list span { grid-row: span 2; font-family: var(--font-mono); font-size: .65rem; }.rhythm-list strong { font-size: .88rem; }.rhythm-list p { margin: .1rem 0 0; color: var(--ink-muted); font-size: .78rem; }

.voices { padding: 0 0 clamp(6rem, 11vw, 10rem); }.voices-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: 2.3rem; }.voices-head .eyebrow { margin-bottom: 0; }.voices h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); }.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }.quote-card { min-height: 19rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border: 1px solid var(--line-light); border-radius: var(--radius-card); }.quote-card-dark { color: var(--white); background: var(--black); }.quote-card blockquote { max-width: 19rem; margin: 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.08; letter-spacing: -.05em; }.quote-card blockquote em { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }.quote-card figcaption { display: flex; align-items: center; gap: .75rem; }.quote-avatar { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--white); background: var(--black); border-radius: 50%; font-family: var(--font-mono); font-size: .62rem; }.avatar-outline { color: var(--black); background: var(--white); border: 1px solid var(--black); }.quote-card-dark .avatar-outline { color: var(--white); background: var(--black); border-color: var(--white); }.quote-card figcaption strong, .quote-card figcaption small { display: block; }.quote-card figcaption strong { font-size: .76rem; }.quote-card figcaption small { margin-top: .15rem; color: var(--ink-muted); font-family: var(--font-mono); font-size: .56rem; }.quote-card-dark figcaption small { color: rgba(255,255,255,.54); }

.final-cta { padding: clamp(5rem, 10vw, 8rem) 0; }.final-cta-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(20rem, .75fr); align-items: end; gap: clamp(3rem, 10vw, 10rem); }.final-cta h2 { max-width: 44rem; font-size: clamp(3rem, 5.2vw, 6.2rem); line-height: .92; }.final-cta-copy > p:last-child { max-width: 24rem; margin: 1.8rem 0 0; color: rgba(255,255,255,.6); }.signup-box { padding: 1.35rem; border: 1px solid var(--line-dark); border-radius: var(--radius-card); }.signup-box label { display: block; margin-bottom: .65rem; color: rgba(255,255,255,.64); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }.signup-field { display: flex; gap: .6rem; }.signup-field input { width: 100%; min-width: 0; min-height: 3.4rem; padding: .8rem .95rem; color: var(--white); background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius-control); }.signup-field input::placeholder { color: rgba(255,255,255,.42); }.signup-field input:focus-visible { outline-color: var(--white); }.signup-field input.is-invalid { border-color: var(--white); box-shadow: inset 0 -3px 0 var(--white); }.signup-field .button { flex: none; }.form-message { min-height: 1.25rem; margin: .7rem 0 0; color: var(--white); font-size: .78rem; }.privacy-note { margin: 1.25rem 0 0; color: rgba(255,255,255,.42); font-family: var(--font-mono); font-size: .6rem; }

.site-footer { padding: 2.2rem 0 1.2rem; border-top: 1px solid var(--line-dark); }.footer-main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; padding-bottom: 4.5rem; }.brand-footer { color: var(--white); }.footer-main > p { margin: .15rem 0 0; color: rgba(255,255,255,.55); font-size: .83rem; }.footer-links { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.2rem; max-width: 22rem; font-size: .78rem; }.footer-links a { color: rgba(255,255,255,.7); }.footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: .25rem; }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.15rem; border-top: 1px solid var(--line-dark); color: rgba(255,255,255,.42); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .02em; }

.reveal { opacity: 1; transform: none; }.reveal.is-visible { opacity: 1; transform: none; }.reveal-delay-short, .reveal-delay { transition-delay: 0s; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.ticker-track { animation: none; }.reveal { opacity: 1; transform: none; transition: none; }.button, .track-option { transition: none; } }

@media (max-width: 980px) {
  .hero-grid, .tracks-grid, .rhythm-grid, .final-cta-grid { gap: 3rem; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 45rem; }.hero-visual { min-height: 32rem; width: min(100%, 35rem); margin-inline: auto; }.hero-ticker { margin-top: 0; }.tracks-grid, .rhythm-grid, .final-cta-grid { grid-template-columns: 1fr; }.tracks-copy { max-width: 40rem; }.track-selector { max-width: 38rem; }.rhythm-copy { max-width: 38rem; }.final-cta-copy { max-width: 44rem; }.signup-box { max-width: 38rem; }
  .product-preview-grid { grid-template-columns: 1fr; max-width: 46rem; }
  .product-shot-filters { width: min(100%, 31rem); margin-top: 0; justify-self: end; }
}
@media (max-width: 760px) {
  :root { --gutter: 1.25rem; }.header-inner { height: 4.7rem; }.menu-toggle { display: block; }.primary-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; gap: 0; padding: .75rem var(--gutter) 1.2rem; background: var(--white); border-bottom: 1px solid var(--line-light); box-shadow: 0 18px 35px rgba(5,5,5,.1); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity .2s ease, transform .2s ease; }.primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.primary-nav a:not(.button) { padding: .9rem 0; border-bottom: 1px solid var(--line-light); }.primary-nav .nav-login { border-bottom: 0; }.primary-nav .button { margin-top: .7rem; }.menu-toggle[aria-expanded="true"] .menu-line:first-of-type { transform: translateY(.3rem) rotate(45deg); }.menu-toggle[aria-expanded="true"] .menu-line:last-of-type { transform: translateY(-.3rem) rotate(-45deg); }.hero { padding-top: 3.2rem; }.hero-grid { min-height: auto; padding-bottom: 4.5rem; }.hero h1 { font-size: clamp(3.1rem, 14vw, 5rem); }.hero h1 br { display: none; }.hero-description { margin-top: 1.7rem; }.hero-note { margin-top: 2.5rem; }.hero-visual { min-height: 30rem; width: 100%; }.study-panel { width: calc(100% - 1rem); padding: 1rem; }.visual-topline { left: 0; }.floating-card-score { top: 14%; right: -.5rem; transform: scale(.85) rotate(-7deg); transform-origin: right top; }.floating-card-streak { right: -.5rem; bottom: 7%; transform: scale(.85) rotate(5deg); transform-origin: right bottom; }.method { padding: 5rem 0; }.section-intro { display: block; margin-bottom: 2.2rem; }.section-intro h2 { font-size: clamp(2.8rem, 12vw, 4rem); }.section-intro > p:last-child { margin-top: 1.5rem; }.method-grid, .voices-grid { grid-template-columns: 1fr; }.method-card { min-height: 20rem; }.tracks h2 { font-size: clamp(3.1rem, 13vw, 5rem); }.rhythm { padding: 5rem 0; }.rhythm-visual { padding: 1rem; }.chart-area { height: 15rem; }.rhythm-copy h2 { font-size: clamp(2.8rem, 12vw, 4.5rem); }.voices { padding-bottom: 5rem; }.voices-head { display: block; }.voices-head h2 { margin-top: 1.5rem; }.quote-card { min-height: 16rem; }.final-cta { padding: 5rem 0; }.final-cta h2 { font-size: clamp(3rem, 13vw, 5rem); }.signup-field { display: grid; }.signup-field .button { width: 100%; }.footer-main { grid-template-columns: 1fr 1fr; padding-bottom: 3rem; }.footer-main > p { grid-column: 1 / -1; grid-row: 2; }.footer-links { grid-column: 1 / -1; grid-row: 3; justify-self: start; justify-content: flex-start; }.footer-bottom { flex-direction: column; gap: .5rem; }
  .product-previews { padding: 5rem 0; }
  .product-shot { padding: .5rem; }
  .product-shot-filters { width: 100%; }
  .shot-question-card h3 { font-size: 1rem; }
  .shot-question-card p, .shot-question-card ul { font-size: .88rem; }
}
@media (max-width: 420px) { .hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button, .hero-actions .text-link { width: 100%; }.lesson { grid-template-columns: 1.35rem 1fr 1rem; gap: .5rem; }.lesson div span { max-width: 12rem; }.track-option { grid-template-columns: 2.65rem 1fr 1rem; gap: .7rem; }.track-symbol { width: 2.4rem; height: 2.4rem; }.floating-card-score { right: -.2rem; }.floating-card-streak { right: -.2rem; }.chart-header { align-items: flex-start; gap: 1rem; }.chart-header .mono-label { max-width: 12rem; }.footer-main { grid-template-columns: 1fr; }.footer-main > p, .footer-links { grid-column: auto; }.footer-links { flex-direction: column; gap: .7rem; } }