/* Collaborate with AI · Cozy
   Deep blues and greens carry the page; mist and mint are the light reading sections; deep cherry is the
   one warm color and it's only for the decision (the buttons). With WebGL, one fixed canvas paints the
   field, melting into the next as you scroll, with a slow soft light drifting across it. Every color on
   the page follows the live field (html carries --bg/--fg/--ac). Without motion, each section carries a
   baked still of its field (or a CSS gradient without JS). */

@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2-variations"); font-weight: 200 800; font-stretch: 100% 100%; font-display: swap; }
@font-face { font-family: "Hanken"; src: url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-latin-full-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-latin-full-italic.woff2) format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------- Field palettes: bg, deep, glow, text, accent ---------- */
:root {
  color-scheme: light;
  --display: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --text: "Hanken", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --soft: "SOFT" 100, "WONK" 1;
  --soft-calm: "SOFT" 100, "WONK" 0;
  --gutter: 20px;
  --max: 1360px;
  --ink: #0F1D33; --white: #F5F8F7; --sky: #93C8EA; --seafoam: #8FD5B5;
  --cherry: #A11D35; --cherry-hi: #B8263F;
  --shadow: 0 30px 60px -30px rgba(8, 20, 40, .55), 0 10px 22px -14px rgba(8, 20, 40, .35);

  --midnight: #13284A; --midnight-2: #0B1A33; --midnight-3: #2A4C7E; --midnight-fg: #F5F8F7; --midnight-ac: #93C8EA;
  --ocean: #1C4670; --ocean-2: #12304F; --ocean-3: #2F6196; --ocean-fg: #F5F8F7; --ocean-ac: #93C8EA;
  --slate: #3E6E96; --slate-2: #2F5A80; --slate-3: #5A88AE; --slate-fg: #F5F8F7; --slate-ac: #D3EAF8;
  --skymist: #BFD6E6; --skymist-2: #A9C6DA; --skymist-3: #D6E6F1; --skymist-fg: #0F1D33; --skymist-ac: #1C4670;
  --mist: #E3EDF5; --mist-2: #CEDDEA; --mist-3: #F6FAFD; --mist-fg: #0F1D33; --mist-ac: #1C4670;
  --mint: #E1F0E7; --mint-2: #CAE3D4; --mint-3: #F4FAF6; --mint-fg: #0F1D33; --mint-ac: #146B4E;
  --sage: #A9CDB8; --sage-2: #93BEA5; --sage-3: #C2DECD; --sage-fg: #0F1D33; --sage-ac: #145C43;
  --seagreen: #3F8468; --seagreen-2: #2F6C53; --seagreen-3: #5A9E81; --seagreen-fg: #F5F8F7; --seagreen-ac: #D2F0E2;
  --emerald: #146B4E; --emerald-2: #0C4A35; --emerald-3: #23896A; --emerald-fg: #F5F8F7; --emerald-ac: #8FD5B5;
  --teal: #0E5260; --teal-2: #083843; --teal-3: #1C7384; --teal-fg: #F5F8F7; --teal-ac: #8FD5B5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(147, 200, 234, .06);
    --midnight: #0B1830; --midnight-2: #060F20; --midnight-3: #183461; --midnight-fg: #F5F8F7; --midnight-ac: #93C8EA;
    --ocean: #0F2340; --ocean-2: #08162B; --ocean-3: #1A3A64; --ocean-fg: #F5F8F7; --ocean-ac: #93C8EA;
    --slate: #132C4E; --slate-2: #0B1C35; --slate-3: #1F4270; --slate-fg: #F5F8F7; --slate-ac: #93C8EA;
    --skymist: #17345A; --skymist-2: #0E2240; --skymist-3: #244B7C; --skymist-fg: #F5F8F7; --skymist-ac: #93C8EA;
    --mist: #183A5C; --mist-2: #0F2640; --mist-3: #25527C; --mist-fg: #F5F8F7; --mist-ac: #93C8EA;
    --mint: #173D4A; --mint-2: #0E2831; --mint-3: #22576A; --mint-fg: #F5F8F7; --mint-ac: #8FD5B5;
    --sage: #143B33; --sage-2: #0B2620; --sage-3: #1F5548; --sage-fg: #F5F8F7; --sage-ac: #8FD5B5;
    --seagreen: #11352B; --seagreen-2: #09221B; --seagreen-3: #1B4C3E; --seagreen-fg: #F5F8F7; --seagreen-ac: #8FD5B5;
    --emerald: #0C4231; --emerald-2: #062A1F; --emerald-3: #17634B; --emerald-fg: #F5F8F7; --emerald-ac: #8FD5B5;
    --teal: #0A3238; --teal-2: #041F25; --teal-3: #11505D; --teal-fg: #F5F8F7; --teal-ac: #8FD5B5;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(147, 200, 234, .06);
  --midnight: #0B1830; --midnight-2: #060F20; --midnight-3: #183461; --midnight-fg: #F5F8F7; --midnight-ac: #93C8EA;
  --ocean: #0F2340; --ocean-2: #08162B; --ocean-3: #1A3A64; --ocean-fg: #F5F8F7; --ocean-ac: #93C8EA;
  --slate: #132C4E; --slate-2: #0B1C35; --slate-3: #1F4270; --slate-fg: #F5F8F7; --slate-ac: #93C8EA;
  --skymist: #17345A; --skymist-2: #0E2240; --skymist-3: #244B7C; --skymist-fg: #F5F8F7; --skymist-ac: #93C8EA;
  --mist: #183A5C; --mist-2: #0F2640; --mist-3: #25527C; --mist-fg: #F5F8F7; --mist-ac: #93C8EA;
  --mint: #173D4A; --mint-2: #0E2831; --mint-3: #22576A; --mint-fg: #F5F8F7; --mint-ac: #8FD5B5;
  --sage: #143B33; --sage-2: #0B2620; --sage-3: #1F5548; --sage-fg: #F5F8F7; --sage-ac: #8FD5B5;
  --seagreen: #11352B; --seagreen-2: #09221B; --seagreen-3: #1B4C3E; --seagreen-fg: #F5F8F7; --seagreen-ac: #8FD5B5;
  --emerald: #0C4231; --emerald-2: #062A1F; --emerald-3: #17634B; --emerald-fg: #F5F8F7; --emerald-ac: #8FD5B5;
  --teal: #0A3238; --teal-2: #041F25; --teal-3: #11505D; --teal-fg: #F5F8F7; --teal-ac: #8FD5B5;
}

[data-field="midnight"] { --f-bg: var(--midnight); --f-bg2: var(--midnight-2); --f-bg3: var(--midnight-3); --f-fg: var(--midnight-fg); --f-ac: var(--midnight-ac); }
[data-field="ocean"] { --f-bg: var(--ocean); --f-bg2: var(--ocean-2); --f-bg3: var(--ocean-3); --f-fg: var(--ocean-fg); --f-ac: var(--ocean-ac); }
[data-field="slate"] { --f-bg: var(--slate); --f-bg2: var(--slate-2); --f-bg3: var(--slate-3); --f-fg: var(--slate-fg); --f-ac: var(--slate-ac); }
[data-field="skymist"] { --f-bg: var(--skymist); --f-bg2: var(--skymist-2); --f-bg3: var(--skymist-3); --f-fg: var(--skymist-fg); --f-ac: var(--skymist-ac); }
[data-field="mist"] { --f-bg: var(--mist); --f-bg2: var(--mist-2); --f-bg3: var(--mist-3); --f-fg: var(--mist-fg); --f-ac: var(--mist-ac); }
[data-field="mint"] { --f-bg: var(--mint); --f-bg2: var(--mint-2); --f-bg3: var(--mint-3); --f-fg: var(--mint-fg); --f-ac: var(--mint-ac); }
[data-field="sage"] { --f-bg: var(--sage); --f-bg2: var(--sage-2); --f-bg3: var(--sage-3); --f-fg: var(--sage-fg); --f-ac: var(--sage-ac); }
[data-field="seagreen"] { --f-bg: var(--seagreen); --f-bg2: var(--seagreen-2); --f-bg3: var(--seagreen-3); --f-fg: var(--seagreen-fg); --f-ac: var(--seagreen-ac); }
[data-field="emerald"] { --f-bg: var(--emerald); --f-bg2: var(--emerald-2); --f-bg3: var(--emerald-3); --f-fg: var(--emerald-fg); --f-ac: var(--emerald-ac); }
[data-field="teal"] { --f-bg: var(--teal); --f-bg2: var(--teal-2); --f-bg3: var(--teal-3); --f-fg: var(--teal-fg); --f-ac: var(--teal-ac); }

/* Live colors: html carries them when the canvas runs; otherwise each field carries its own. */
:root { --bg: var(--midnight); --fg: var(--midnight-fg); --ac: var(--midnight-ac); }
html:not(.gl) .field, html:not(.gl) .dock {
  --bg: var(--f-bg); --fg: var(--f-fg); --ac: var(--f-ac);
}
html:not(.gl) .field {
  color: var(--fg);
  background-color: var(--f-bg);
  background-image:
    radial-gradient(120% 70% at 12% 8%, color-mix(in oklab, var(--f-bg3) 70%, transparent), transparent 62%),
    radial-gradient(110% 80% at 92% 100%, color-mix(in oklab, var(--f-bg2) 85%, transparent), transparent 64%);
  background-size: 100% 100%;
}
html:not(.gl) .field.baked { background-image: var(--baked); }
html:not(.gl) .dock { --f-bg: var(--midnight); --f-fg: var(--midnight-fg); --f-ac: var(--midnight-ac); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 18px/1.55 var(--text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.gl body { background: transparent; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, blockquote, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
mark { background: none; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }

#field { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -2; display: block; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
html.gl #field { opacity: 1; }
html.still #field { display: none; }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .2; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' 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.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grain { opacity: .13; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { opacity: .13; } }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
/* every section clears the decision bar: the bottom bar on phones, the top bar on wide screens */
:root { --bar-clear: calc(120px + env(safe-area-inset-bottom)); }
.field { position: relative; padding-block: 104px max(104px, var(--bar-clear)); overflow-x: clip; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 420; font-stretch: 100%; letter-spacing: -.015em; font-variation-settings: var(--soft); }

/* ---------- Type ---------- */
.mega, .h2, .poster, .close-line, .frustrations, .rj-name, .amount, .title-1 {
  font-family: var(--display); font-weight: 760; font-stretch: 100%; letter-spacing: -.03em; line-height: .96;
  text-wrap: balance;
}
.h2 { font-size: clamp(2.05rem, 8.6vw, 5.6rem); margin-bottom: 52px; max-width: 16ch; }
.mega { font-size: clamp(2.6rem, 12.4vw, 9rem); line-height: .94; margin-bottom: 60px; }
.mega .line { display: block; }
.lead { font-size: clamp(1.3rem, 5.6vw, 2.15rem); line-height: 1.28; font-weight: 500; letter-spacing: -.012em; max-width: 30ch; text-wrap: pretty; }
.poster { font-size: clamp(1.85rem, 7.8vw, 5rem); line-height: 1; max-width: 19ch; text-wrap: balance; }
.poster .serif { line-height: .8; }

blockquote p { text-wrap: pretty; }
.pull { margin-top: 72px; max-width: 30ch; font-family: var(--serif); font-style: italic; font-weight: 380; font-variation-settings: var(--soft), "opsz" 60; font-size: clamp(1.6rem, 7vw, 3rem); line-height: 1.14; letter-spacing: -.012em; position: relative; }
.pull::before { content: "“"; position: absolute; left: -.04em; top: -.36em; font-size: 2.4em; line-height: 1; color: var(--ac); font-style: normal; font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; }
.pull p { position: relative; padding-top: .55em; }
.pull--right { margin-left: auto; }
mark[data-mark] {
  background-image: linear-gradient(var(--ac), var(--ac)); background-repeat: no-repeat;
  background-size: var(--mark, 100%) 100%; background-position: 0 50%;
  padding: 0 .12em; margin: 0 -.06em; color: var(--bg); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: .08em;
}
html.motion mark[data-mark] { --mark: 0%; color: inherit; transition: color .2s; }
html.motion mark[data-mark].is-on { color: var(--bg); }

/* ---------- Hero ---------- */
/* The hero is as tall as its content: the frustrations box is exactly the tallest of the five lines at this width
   (they share one grid cell), and the title sits a normal step beneath it. */
.hero { padding-top: 84px; padding-bottom: 48px; overflow: hidden; }
.frustrations { font-size: clamp(2.2rem, 11vw, 7.4rem); line-height: .98; letter-spacing: -.035em; display: grid; }
.frustrations li { grid-area: 1 / 1; max-width: 100%; text-wrap: balance; }
.frustrations .hot { color: var(--ac); }
html.motion .frustrations li:not(:first-child) { visibility: hidden; }
/* The still: all five stacked, set like a poster */
html.still .frustrations { display: block; font-size: clamp(1.6rem, 6.8vw, 4.4rem); }
html.still .frustrations li { max-width: 20ch; padding-block: .14em .1em; border-top: 2px solid color-mix(in oklab, var(--fg) 30%, transparent); }
html.still .frustrations li:first-child { font-size: 1.32em; border-top: 0; padding-top: 0; }
html.still .frustrations li:nth-child(even) { text-align: right; margin-left: auto; }
html.still .frustrations li:nth-child(n+2) { opacity: .92; }

.frustrations .w { display: inline-block; will-change: transform, opacity; transform-origin: 50% 70%; }

.hero-foot { margin-top: 28px; display: grid; gap: 28px; }
.title { margin: 0; font-weight: 400; }
.title-1 { display: block; font-size: clamp(1.9rem, 8.6vw, 4.6rem); line-height: .98; font-stretch: 100%; letter-spacing: -.03em; }
.title-2 { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: var(--soft), "opsz" 96; font-size: clamp(2.1rem, 9.6vw, 5rem); line-height: 1.02; letter-spacing: -.02em; margin-top: .06em; color: var(--ac); }
.hero-sub { font-size: 1.1rem; line-height: 1.5; max-width: 36ch; font-weight: 450; }
.facts { margin-top: 18px; font-size: .95rem; font-weight: 650; display: flex; flex-wrap: wrap; gap: 4px 10px; letter-spacing: .005em; }
.facts i { font-style: normal; opacity: .55; }
.hero .cta { margin-top: 26px; }

/* ---------- Buttons ---------- */
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.btn {
  -webkit-appearance: none; appearance: none; border: 0; margin: 0; cursor: pointer; font: inherit; text-decoration: none;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px;
  border-radius: 999px; padding: 12px 22px; min-height: 52px; line-height: 1.1;
  font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: 1.12rem; letter-spacing: -.005em;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s, color .2s, opacity .2s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn--solid { background: var(--cherry); color: #fff; box-shadow: 0 0 0 0 var(--ac), 0 10px 24px -12px rgba(161, 29, 53, .6); align-items: center; }
.btn--line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.btn--big { min-height: 64px; padding: 14px 28px; font-size: 1.28rem; }
.btn-pre { font-family: var(--text); font-weight: 600; font-stretch: 100%; font-size: .72em; opacity: .78; letter-spacing: 0; }
.btn:hover { transform: translateY(-2px); }
.btn--solid:hover { background: var(--cherry-hi); box-shadow: 0 0 0 5px color-mix(in oklab, var(--ac) 55%, transparent); }
.btn--line:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--ac); outline-offset: 3px; }
.btn.is-busy, .btn.is-done, .btn[aria-disabled="true"] { pointer-events: none; cursor: default; }
.btn.is-busy { opacity: .55; filter: saturate(.3); transform: none; }
.btn.is-done { background: var(--cherry); color: #fff; box-shadow: 0 0 0 4px var(--ac); }
.btn.is-done .btn-label::before { content: "✓ "; }
.btn--signin.is-pressed { opacity: .55; }
/* Signed-in members see one Register button in place of Join and Sign in (set from the status call) */
.btn--register { display: none; }
[data-member] .btn[data-join], [data-member] .btn--signin { display: none; }
[data-member] .btn--register { display: inline-flex; }
.cta-note { flex-basis: 100%; font-weight: 600; font-size: 1.02rem; padding-left: 4px; }
.cta-note:empty { display: none; }
.cta-note.is-error { padding: 10px 14px; border-radius: 14px; background: color-mix(in oklab, var(--fg) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fg) 35%, transparent); max-width: 40ch; }
/* In the compact bar only a problem is worth saying, in a small bubble beside it */
.dock .cta-note { display: none; }
.dock .cta-note.is-error:not(:empty) { display: block; position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); margin: 0; font-size: .92rem;
  background: var(--bg); color: var(--fg); box-shadow: 0 10px 30px -12px rgba(0,0,0,.4), inset 0 0 0 1.5px color-mix(in oklab, var(--fg) 30%, transparent); max-width: none; }

/* ---------- Dock (glance-away decision) ---------- */
.dock {
  position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 40px -12px rgba(0,0,0,.35), inset 0 0 0 1px color-mix(in oklab, var(--fg) 18%, transparent);
  transform: translateY(140%); opacity: 0; visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .35s, visibility 0s .5s;
}
.dock.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .35s, visibility 0s; }
.dock-title { display: none; }
.cta--dock { flex: 1; flex-wrap: nowrap; gap: 6px; }
.cta--dock .btn { min-height: 48px; padding: 6px 14px; font-size: 1rem; flex: 1 1 auto; }
.cta--dock .btn[data-join] { flex: 0 0 auto; }
.cta--dock .btn--signin { align-items: center; text-align: center; }
.cta--dock .btn-pre { font-size: .7em; }
.cta--dock .btn--register { flex: 1; }

/* ---------- Video ---------- */
.video { padding-top: 24px; }
.screen { margin: 0; }
.screen-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  border-radius: 22px; overflow: hidden; color: var(--fg);
  background:
    radial-gradient(90% 130% at 88% 115%, rgba(143, 213, 181, .38), transparent 62%),
    radial-gradient(70% 110% at 0% 100%, rgba(28, 70, 112, .9), transparent 60%),
    radial-gradient(70% 90% at 10% 0%, rgba(147, 200, 234, .3), transparent 62%),
    #0C1B33;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(147, 200, 234, .2), inset 0 1px 0 rgba(245, 248, 247, .2);
  transform-origin: 50% 0;
}
.screen-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #0C1B33; }
.screen figcaption { margin-top: 20px; font-family: var(--serif); font-style: italic; font-weight: 380; font-variation-settings: var(--soft), "opsz" 48; font-size: clamp(1.35rem, 5.4vw, 2.1rem); line-height: 1.15; }

/* ---------- Why ---------- */
.why { padding-top: 140px; }

/* ---------- Shift ---------- */
.ladder { display: grid; gap: 0; margin-bottom: 96px; }
.rung { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start; padding-block: 26px; border-top: 2px solid var(--fg); }
.rung-n { font-family: var(--display); font-weight: 800; font-stretch: 100%; line-height: .78; letter-spacing: -.04em; }
.rung h3 { font-family: var(--display); font-weight: 800; font-stretch: 100%; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.rung h3 strong { font-weight: 800; display: block; }
.rung-name { display: inline-block; margin-top: .35em; font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; font-variation-settings: var(--soft); }
.rung p { margin-top: 10px; font-weight: 500; text-wrap: pretty; }
.rung--1 .rung-n { font-size: 3.4rem; }
.rung--1 h3 { font-size: 1.5rem; }
.rung--1 p { font-size: 1.02rem; max-width: 34ch; }
.rung--2 .rung-n { font-size: 4.6rem; }
.rung--2 h3 { font-size: 2rem; }
.rung--2 p { font-size: 1.12rem; max-width: 34ch; }
.rung--3 { background: var(--fg); color: var(--bg); border: 0; border-radius: 30px; box-shadow: var(--shadow); padding: 28px 22px 32px; margin-top: 10px; margin-inline: -8px; }
.rung--3 .rung-n { font-size: 7rem; }
.rung--3 h3 { font-size: clamp(1.85rem, 7.8vw, 3.8rem); line-height: .98; }
.rung--3 .rung-name { opacity: .85; }
.rung--3 p { font-size: clamp(1.3rem, 5.4vw, 2rem); line-height: 1.2; font-weight: 650; }
.shift .poster .serif { color: var(--ac); }
.shift-pair { display: grid; gap: 40px; margin-top: 64px; }
.body-quote { font-size: 1.2rem; line-height: 1.5; font-weight: 500; max-width: 40ch; padding-left: 18px; border-left: 3px solid var(--fg); }
.relief { font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: var(--soft), "opsz" 72; font-size: clamp(1.6rem, 6.6vw, 2.7rem); line-height: 1.12; letter-spacing: -.012em; max-width: 22ch; }

.shift .thesis { margin-top: 8px; }
.shift .relief { margin-top: 36px; }
.why .lead { max-width: 32ch; }

/* ---------- Attention ---------- */
.attention .poster--calm { margin-top: 64px; }
.attention .lead--after { margin-top: 56px; }
.story { font-family: var(--serif); font-weight: 360; font-variation-settings: var(--soft-calm), "opsz" 48; font-size: clamp(1.5rem, 6.4vw, 2.8rem); line-height: 1.2; letter-spacing: -.01em; max-width: 30ch; }
.story mark { font-style: italic; font-variation-settings: var(--soft); }
.bam { font-family: var(--display); font-weight: 800; font-stretch: 100%; color: var(--ac); display: inline-block; font-size: 1.24em; line-height: .9; letter-spacing: -.02em; }
.slop { margin-top: 72px; margin-left: auto; max-width: 40ch; font-size: 1.2rem; line-height: 1.5; font-weight: 500; }
.slop strong { display: block; margin-top: 14px; font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: clamp(1.6rem, 6.6vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--ac); }
.poster--calm { margin-top: 110px; }
.poster--calm .serif { color: var(--ac); }

/* ---------- Weeks ---------- */
.lead--ink { max-width: 34ch; font-size: clamp(1.2rem, 5vw, 1.8rem); }
.sessions { margin-top: 72px; display: grid; }
.session { display: grid; grid-template-columns: 74px 1fr; gap: 6px 14px; padding-block: 26px 30px; border-top: 2px solid var(--fg); align-items: start; }
.session-n { grid-row: span 2; font-family: var(--display); font-weight: 700; font-stretch: 100%; font-size: 4.4rem; line-height: .74; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--fg); }
.session h3 { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: clamp(1.4rem, 5.9vw, 2.4rem); line-height: 1.02; letter-spacing: -.02em; }
.session p { font-size: 1.05rem; line-height: 1.5; max-width: 46ch; }
.session:hover .session-n { color: var(--ac); -webkit-text-stroke-color: var(--ac); }
.showcase { margin-top: 40px; padding: 28px 26px; border-radius: 28px; background: var(--fg); color: var(--bg); box-shadow: var(--shadow); font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: var(--soft), "opsz" 60; font-size: clamp(1.45rem, 6.2vw, 2.5rem); line-height: 1.14; letter-spacing: -.01em; }

/* ---------- By the end ---------- */
.outcomes { display: grid; gap: 0; }
.outcomes li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding-block: 22px; border-top: 2px solid var(--fg); font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: clamp(1.45rem, 6.2vw, 3.3rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.outcomes li:last-child { border-bottom: 2px solid var(--fg); }
.tick { width: 48px; height: 48px; margin-top: -.02em; overflow: visible; }
.tick path { fill: none; stroke: var(--ac); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
html.motion .tick path { stroke-dashoffset: 60; }

/* ---------- Dates ---------- */
.calendar { display: grid; border-top: 2px solid var(--fg); }
.calendar li { display: grid; grid-template-columns: 7.2em 1fr; gap: 12px; align-items: baseline; padding: 15px 0 14px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 35%, transparent); }
.calendar i { display: none; }
.calendar .d { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 1.32rem; letter-spacing: -.01em; white-space: nowrap; }
.calendar .s { font-size: 1.12rem; }
.calendar .teach .s { font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: 1.32rem; letter-spacing: -.01em; }
.calendar .open { opacity: .74; }
.calendar .open .d { font-weight: 600; }
.calendar .show { border-bottom: 0; background: var(--fg); color: var(--bg); box-shadow: var(--shadow); border-radius: 22px; padding-inline: 16px; margin: 10px -8px 0; padding-block: 18px; }
.calendar .show .s { font-family: var(--serif); font-style: italic; font-weight: 420; font-stretch: 100%; font-variation-settings: var(--soft); font-size: 2rem; line-height: 1; }
.note { margin-top: 36px; font-size: 1.2rem; line-height: 1.45; font-weight: 600; max-width: 34ch; }

/* ---------- R.J. ---------- */
.rj-grid { display: grid; gap: 40px; }
.rj-name { font-size: clamp(3rem, 19vw, 11rem); line-height: .9; letter-spacing: -.04em; }
.portrait { position: relative; width: min(100%, 520px); aspect-ratio: 1; border-radius: 36px; overflow: hidden; background: #F5F8F7; box-shadow: var(--shadow); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.08); mix-blend-mode: multiply; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, color-mix(in oklab, var(--bg) 55%, transparent)); }
.rj-text { display: grid; gap: 36px; }
.rj-quote { font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: var(--soft), "opsz" 96; font-size: clamp(1.9rem, 8.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.015em; color: var(--ac); max-width: 18ch; }
.cohort { font-size: 1.15rem; line-height: 1.5; font-weight: 600; padding: 24px 24px; border-radius: 26px; background: color-mix(in oklab, var(--fg) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fg) 30%, transparent); max-width: 44ch; }

/* ---------- Voices ---------- */
.voice-grid { display: grid; gap: 22px; }
/* Each card owns its colors, so the section's blend behind it never reaches its text. */
:root { --v1-bg: #13284A; --v1-fg: #F5F8F7; --v2-bg: #F5F8F7; --v2-fg: #0F1D33; --v3-bg: #E3EDF5; --v3-fg: #0F1D33; --v4-bg: #1C4670; --v4-fg: #F5F8F7; }
:root[data-theme="dark"] { --v1-bg: #183563; --v2-bg: #DCE7EF; --v3-bg: #CFE2D8; --v4-bg: #1F4A70; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v1-bg: #183563; --v2-bg: #DCE7EF; --v3-bg: #CFE2D8; --v4-bg: #1F4A70; } }
.voice { margin: 0; padding: 30px 26px 28px; border-radius: 30px; background: var(--v1-bg); color: var(--v1-fg); box-shadow: var(--shadow); }
.voice:nth-child(2) { background: var(--v2-bg); color: var(--v2-fg); }
.voice:nth-child(3) { background: var(--v3-bg); color: var(--v3-fg); }
.voice:nth-child(4) { background: var(--v4-bg); color: var(--v4-fg); }
.voice blockquote { font-family: var(--serif); font-weight: 380; font-variation-settings: var(--soft-calm), "opsz" 40; font-size: clamp(1.35rem, 5.7vw, 2.05rem); line-height: 1.2; letter-spacing: -.01em; }
.voice--big blockquote { font-size: clamp(1.65rem, 7vw, 3.1rem); }
.voice figcaption { margin-top: 20px; font-size: .98rem; line-height: 1.35; }
.voice figcaption strong { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 1.18rem; letter-spacing: -.005em; }

/* ---------- Price ---------- */
.price { padding-block: 120px 120px; }
.price-grid { display: grid; gap: 22px; }
.amount { font-size: clamp(7rem, 44vw, 24rem); line-height: .78; letter-spacing: -.015em; color: var(--fg); margin-left: -.04em; display: flex; align-items: flex-start; }
.amount .cur { font-size: .42em; line-height: 1; margin-top: .12em; margin-right: .02em; color: var(--ac); letter-spacing: 0; }
.price-text { display: grid; gap: 30px; max-width: 560px; }
.terms { font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: clamp(1.5rem, 6.4vw, 2.6rem); line-height: 1.02; letter-spacing: -.02em; }
.why-price { font-family: var(--serif); font-style: italic; font-weight: 380; font-variation-settings: var(--soft), "opsz" 36; font-size: clamp(1.35rem, 5.6vw, 1.95rem); line-height: 1.22; letter-spacing: -.01em; }
.price-facts { display: grid; gap: 0; }
.price-facts li { padding-block: 14px; border-top: 1px solid color-mix(in oklab, var(--fg) 30%, transparent); font-size: 1.04rem; line-height: 1.5; }
.price-facts li:first-child { font-weight: 700; }
.price .cta { margin-top: 4px; }

/* ---------- Questions ---------- */
.faq { padding-block: 96px max(104px, var(--bar-clear)); }
.qs { border-top: 2px solid var(--fg); }
.q { border-bottom: 2px solid var(--fg); }
.q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: clamp(1.2rem, 5.1vw, 2.2rem); line-height: 1.08; letter-spacing: -.015em; }
.q summary::-webkit-details-marker { display: none; }
.q summary b { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); position: relative; transition: transform .35s cubic-bezier(.2,.9,.2,1), background-color .2s; }
.q summary b::before, .q summary b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; background: var(--bg); translate: -50% -50%; border-radius: 2px; }
.q summary b::after { rotate: 90deg; transition: rotate .35s; }
.q[open] summary b { background: var(--ac); }
.q[open] summary b::after { rotate: 0deg; }
.q summary:focus-visible { outline: 3px solid var(--ac); outline-offset: 4px; }
.q p { padding: 0 48px 26px 0; font-size: 1.15rem; line-height: 1.5; max-width: 52ch; }

/* ---------- Close ---------- */
.close .btn--solid, .dock .btn--solid { box-shadow: inset 0 0 0 1.5px rgba(245, 248, 247, .35), 0 10px 24px -12px rgba(0, 0, 0, .5); }
.close { padding-block: 120px 160px; }
.close-line { font-size: clamp(1.85rem, 7.6vw, 5.2rem); line-height: 1; max-width: 22ch; margin-bottom: 56px; }
.close-line .serif { color: var(--ac); }

/* ---------- Motion helpers ---------- */
.split .l { display: block; }
/* The line masks clip at the line box; give descenders (the y in "you") room without moving the layout. */
.split > * { padding-bottom: .18em; margin-bottom: -.18em; }
html.motion .reveal { opacity: 0; transform: translateY(40px); }
html.motion.is-at .reveal { opacity: 1; transform: none; }

/* ---------- Wider screens ---------- */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  body { font-size: 19px; }
  .field { padding-block: 150px; }
  .hero-sub { font-size: 1.2rem; }
  .rung { grid-template-columns: 140px 1fr; gap: 0 28px; }
  .rung--1 .rung-n { font-size: 5rem; } .rung--1 h3 { font-size: 2.1rem; }
  .rung--2 .rung-n { font-size: 7rem; } .rung--2 h3 { font-size: 3rem; }
  .rung--3 { padding: 40px 36px 44px; grid-template-columns: 172px 1fr; }
  .rung--3 .rung-n { font-size: 11rem; }
  .shift-pair { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 64px; }
  .session { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 36px; align-items: baseline; padding-block: 34px; }
  .session-n { grid-row: auto; font-size: 8rem; }
  .session p { font-size: 1.1rem; }
  .outcomes li { grid-template-columns: 76px 1fr; gap: 24px; padding-block: 28px; }
  .tick { width: 66px; height: 66px; }
  .calendar { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .calendar li { grid-template-columns: 8.4em 1fr; border-top: 2px solid var(--fg); border-bottom: 0; padding-block: 18px; }
  .calendar .show { grid-column: 1 / -1; margin: 18px 0 0; padding: 26px 28px; }
  .calendar .show .s { font-size: 3rem; }
  .voice-grid { grid-template-columns: repeat(6, 1fr); gap: 26px; }
  .voice--big { grid-column: 1 / -1; padding: 48px 48px 40px; }
  .voice:nth-child(2) { grid-column: span 3; }
  .voice:nth-child(3) { grid-column: span 3; }
  .voice:nth-child(4) { grid-column: 2 / span 4; }
  .voice { padding: 36px 34px 30px; }
}

@media (min-width: 1000px) {
  :root { --gutter: 56px; }
  .hero { padding-top: 96px; padding-bottom: 56px; }
  .frustrations { font-size: clamp(4rem, 7.4vw, 8.4rem); }
  .frustrations li { max-width: 15em; }
  html.still .frustrations { font-size: 3.4vw; }
  html.still .frustrations li { max-width: 26ch; }
  .hero-foot { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; margin-top: 44px; }
  .title-1 { font-size: clamp(2.6rem, 4vw, 4.6rem); }
  .title-2 { font-size: clamp(3rem, 4.8vw, 5.5rem); }
  .hero-sub { font-size: 1.22rem; }
  .video { padding-top: 120px; }
  .faq { padding-block: 150px; }
  .screen { max-width: 1180px; margin-inline: auto; }
  .screen-frame { border-radius: 34px; }
  .h2 { font-size: clamp(3.2rem, 5.4vw, 6.2rem); margin-bottom: 72px; }
  .mega { font-size: clamp(4.6rem, 8.8vw, 10rem); }
  .pull { margin-top: 96px; }
  .pull--right { margin-right: 4%; }
  .poster { font-size: clamp(3rem, 4.8vw, 5.8rem); }
  .story { font-size: 3.2rem; }
  .rj-grid { grid-template-columns: 1fr 1.05fr; column-gap: 72px; row-gap: 56px; align-items: start; }
  .rj-name { grid-column: 1 / -1; font-size: 15vw; }
  .portrait { width: 100%; max-width: none; position: sticky; top: 110px; }
  .price-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
  .amount { font-size: 26vw; position: sticky; top: 130px; }
  .price-text { padding-top: 36px; }
  .close-line { font-size: clamp(3rem, 4.8vw, 5.8rem); }

  .dock { left: 50%; right: auto; top: 16px; bottom: auto; translate: -50% 0; width: min(calc(100% - 48px), 980px); padding: 8px 8px 8px 26px; transform: translateY(-160%); }
  .dock.is-on { transform: none; }
  .dock-title { display: block; font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 1.3rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
  .cta--dock { flex: 0 0 auto; }
  .cta--dock .btn { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; padding-inline: 20px; }
  .cta--dock .btn-pre { font-size: .82em; }
  .dock .cta-note.is-error:not(:empty) { bottom: auto; top: calc(100% + 8px); left: auto; right: 8px; max-width: 46ch; }
}

/* Wide screens: "Every conversation starts from scratch" runs full width over a reading column;
   the three ways sit side by side as cards, with access as the strong one, and the thesis runs full width beneath. */
@media (min-width: 1000px) {
  .why .mega { max-width: none; margin-bottom: 48px; }
  .why .lead { max-width: 60ch; font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.42; }
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-bottom: 104px; }
  .rung, .rung--3 { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 34px 32px 38px; border: 0; border-radius: 30px; }
  .rung { background: color-mix(in oklab, var(--fg) 9%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fg) 26%, transparent); }
  .rung--3 { background: var(--fg); color: var(--bg); box-shadow: var(--shadow); }
  .rung--1 .rung-n, .rung--2 .rung-n, .rung--3 .rung-n { font-size: 5.6rem; }
  .rung--1 h3, .rung--2 h3, .rung--3 h3 { font-size: clamp(1.6rem, 2.1vw, 2.2rem); line-height: 1.04; }
  .rung--1 p, .rung--2 p, .rung--3 p { font-size: 1.12rem; line-height: 1.45; font-weight: 500; max-width: none; margin-top: 14px; }
  .rung--3 p { font-weight: 650; }
  .shift .thesis { max-width: 28ch; font-size: clamp(3.2rem, 5.6vw, 6.6rem); margin-top: 0; }
  .shift .relief { margin-top: 44px; font-size: clamp(1.8rem, 2.4vw, 2.6rem); max-width: 34ch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}