/* propdesk landing: the journey page. Tokens mirror ui/src/index.css (Carbon & Giallo, decision 0014):
   carbon ground, one metal, hairlines not boxes, chamfered plates. Type follows 0036: Inter to read
   (tabular figures for numbers), Archivo for headings and the wordmark. */

@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
/* the app's family names, for the embedded Plans page (same files) */
@font-face { font-family: "Inter Variable"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo Variable"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono Variable"; src: url("fonts/mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --ground: #060607; --plate: #0e0e11; --raised: #1b1b20;
  --bone: #e8e3d8; --muted: #aaa498; --label: #8b867c; --dim: #5d5952;
  --gold: #e7b84a; --gold-hi: #ffdf8a; --gold-lo: #8c6418;
  --hair: rgb(255 255 255 / 0.08); --hair-hi: rgb(255 255 255 / 0.14);
  --sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Inter", "Helvetica Neue", system-ui, sans-serif;   /* numbers: Inter, tabular (0036) */
  --brand: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the app's metals (ui/src/index.css) */
  --metal: linear-gradient(176deg, #fff0bf 0%, #f2c75a 34%, #d19a2a 62%, #7d5613 100%);
  --metal-flat: linear-gradient(90deg, #8c6418, #e7b84a 40%, #ffdf8a 55%, #e7b84a 70%, #8c6418);
  --gutter: clamp(16px, 5vw, 80px);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); scroll-behavior: smooth; }
body { background: var(--ground); color: var(--bone); font-family: var(--sans); font-size: 17px; line-height: 1.55;
  font-optical-sizing: auto; font-feature-settings: "cv11", "ss03"; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--gold); color: var(--ground); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* chamfer: the brand's cut corner, not a rounded one */
.chamfer { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ---- header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); background: linear-gradient(rgb(6 6 7 / .75), transparent); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.wordmark { display: flex; flex-direction: column; font-family: var(--brand); font-stretch: 125%; font-weight: 700; font-size: 18px; letter-spacing: .02em; line-height: 1; color: var(--bone); }
.wordmark i { display: block; height: 1px; margin-top: 8px; background: var(--metal-flat); transform-origin: left; animation: rule 1.1s var(--ease) .55s both; }
@keyframes rule { from { transform: scaleX(0); } }
.top nav { display: flex; gap: 26px; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.top nav a { text-decoration: none; color: var(--bone); }
.top nav a.quiet { color: var(--muted); }
.top nav a:hover { color: var(--gold-hi); }
/* The product demo tab: gold letters with a slow beam of light panning across them, like a lighthouse, then dark again.
   The letters and the blurred glow behind them share one beam, so the glow travels with it. */
.top nav a.beacon { position: relative; isolation: isolate; white-space: nowrap; color: transparent;
  background: linear-gradient(100deg, var(--gold) 38%, #fff8e0 50%, var(--gold) 62%) 100% 0 / 320% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; animation: beam 8s ease-in-out infinite; }
.top nav a.beacon::after { content: attr(data-label); position: absolute; inset: 0; z-index: -1; pointer-events: none; color: transparent;
  background: linear-gradient(100deg, rgb(231 184 74 / .28) 34%, #ffdf8a 50%, rgb(231 184 74 / .28) 66%) 100% 0 / 320% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; filter: blur(7px); animation: beam 8s ease-in-out infinite; }
.top nav a.beacon:hover { color: var(--gold-hi); animation: none; background: none; }
.top nav a.beacon:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
@keyframes beam { 0% { background-position: 100% 0; } 62%, 100% { background-position: 0% 0; } }

/* ---- the journey: one screen, one film */
.journey { position: relative; height: 100vh; height: 100svh; }
.stage { position: relative; height: 100%; overflow: hidden; background: var(--ground); }
.stage .poster, .stage .film, .stage .endloop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.stage .film { opacity: 0; transition: opacity .9s var(--ease); transform-origin: 62% 55%; will-change: transform; }
.stage.ready .film { opacity: 1; }
.stage .endloop { opacity: 0; transition: opacity 1.4s var(--ease); }
.stage.ended .endloop { opacity: 1; }
/* the shade keeps the copy side legible without dimming the art */
.shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(6 6 7 / .82) 0%, rgb(6 6 7 / .45) 34%, transparent 58%),
              linear-gradient(0deg, rgb(6 6 7 / .6) 0%, transparent 22%); }

/* the visitor stays in charge: pause, progress, skip */
.controls { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 16px; z-index: 5; }
.pp { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: rgb(14 14 17 / .55); border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair-hi); backdrop-filter: blur(8px); color: var(--bone); transition: background .3s; }
.pp:hover { background: rgb(231 184 74 / .18); }
.pp .i-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pp .i-play { display: none; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.stage.paused .pp .i-pause, .stage.ended .pp .i-pause, .stage.blocked .pp .i-pause { display: none; }
.stage.paused .pp .i-play, .stage.ended .pp .i-play, .stage.blocked .pp .i-play { display: block; }
.bar { flex: 1; height: 1px; background: rgb(255 255 255 / .12); overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); transform: scaleX(0); transform-origin: left; }
.skip-link { font-size: 14px; letter-spacing: .04em; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .3s; }
.skip-link:hover { color: var(--gold-hi); }
.stage.ended .controls .bar, .stage.ended .skip-link { opacity: 0; pointer-events: none; transition: opacity .6s; }

.chapters { position: absolute; inset: 0; }
/* a chapter never fades as a whole: in Chrome a parent below full opacity switches the glass (backdrop-filter) off
   on every card inside it, so the cards came in clear and the frost snapped on at the end, and off again as they left.
   Each child fades itself (below); the chapter only hides once they have gone. */
.ch { position: absolute; left: var(--gutter); top: 47%; width: min(540px, 42vw); transform: translateY(-50%);
  visibility: hidden; transition: visibility 0s linear 1s; }
.ch.on { visibility: visible; transition: visibility 0s; }
.ch > * { transform: translateY(14px); opacity: 0; filter: blur(8px);
  transition: transform 1s var(--ease), opacity 1s var(--ease), filter 1s var(--ease); }
.ch.on > * { transform: none; opacity: 1; filter: none; }
.ch.on > :nth-child(2) { transition-delay: 0.08s; } .ch.on > :nth-child(3) { transition-delay: 0.18s; }
.ch.on > :nth-child(4) { transition-delay: 0.33s; } .ch.on > :nth-child(5) { transition-delay: 0.40s; }

.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #c9c3b8;
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.eyebrow .num { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 14px; letter-spacing: .06em; color: var(--gold); }
.eyebrow .num::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold-lo); margin-left: 12px; vertical-align: middle; }
/* the heading type Coleman approved (2026-09-24): Archivo 800 at 112% width, tight leading */
h1, h2 { font-family: var(--brand); font-weight: 800; font-stretch: 112%; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.6vw, 72px); }
h2 { font-size: clamp(32px, 3.6vw, 56px); }
h2.peak { font-size: clamp(36px, 4.4vw, 68px); }
.lede { margin-top: 22px; font-size: clamp(19px, 1.6vw, 24px); color: var(--gold-hi); }
.lede em { font-style: normal; }
.body { margin-top: 22px; color: #bdb7ac; max-width: 44ch; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; }

@keyframes cue { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

.btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 16px 26px; background: var(--metal); color: #140f03;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .2s, transform .2s var(--ease); }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--hair-hi); }
.btn.ghost:hover { color: var(--ground); background: var(--gold-hi); }

/* ---- the live layers: small instruments that land softly as each chapter arrives.
   Readable sizes (15px and up), the brand sans for anything read as words, mono only for numerals. */
.live { margin-top: 26px; }
.soft { opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease), color .6s, background .6s, box-shadow .6s; }
.ch.on .soft { opacity: 1; transform: none; filter: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chips li { font-size: 15px; letter-spacing: .01em; padding: 9px 15px 9px 13px; color: #e2ddd3; display: flex; align-items: center; gap: 10px;
  background: rgb(255 255 255 / .035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); backdrop-filter: blur(10px); }
.chips li::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); opacity: .8; flex: none; }
.chips li { opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.ch.on .chips li { opacity: 1; transform: none; filter: none; }
.chips li:nth-child(1) { transition-delay: 0.45s } .chips li:nth-child(2) { transition-delay: 0.55s } .chips li:nth-child(3) { transition-delay: 0.65s }
.chips li:nth-child(4) { transition-delay: 0.75s } .chips li:nth-child(5) { transition-delay: 0.85s } .chips li:nth-child(6) { transition-delay: 0.94s }

.path { display: flex; align-items: center; font-size: 15px; letter-spacing: .02em; }
.path .node { padding: 9px 15px; background: rgb(255 255 255 / .035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); color: var(--label);
  transition: color .8s var(--ease), background .8s var(--ease), box-shadow .8s var(--ease); }
.path .wire { flex: 1; min-width: 26px; height: 1px; background: rgb(255 255 255 / .1); position: relative; overflow: hidden; }
.path .wire::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); transform: scaleX(0);
  transform-origin: left; transition: transform 1.1s var(--ease); }
.ch.on .path .wire:nth-of-type(2)::after { transform: scaleX(1); transition-delay: 0.65s; }
.ch.on .path .wire:nth-of-type(4)::after { transform: scaleX(1); transition-delay: 1.30s; }
.ch.on .path .node:nth-of-type(1) { color: #e2ddd3; transition-delay: 0.45s; }
.ch.on .path .node:nth-of-type(3) { color: #e2ddd3; transition-delay: 1.17s; }
.ch.on .path .node.gold { color: var(--ground); background: var(--gold); box-shadow: none; transition-delay: 1.82s; }

.ladder { position: relative; height: 170px; max-width: 400px; }
.ladder .lvl { position: absolute; left: 0; right: 0; top: var(--y); display: flex; align-items: center; gap: 14px; }
.ladder .lvl i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), rgb(231 184 74 / .35)); transform: scaleX(0);
  transform-origin: left; transition: transform 1.3s var(--ease); }
.ladder .lvl span { font-size: 15px; color: #c9c3b8; opacity: 0; filter: blur(5px); transition: opacity 1s var(--ease), filter 1s var(--ease);
  min-width: 128px; }
.ladder .band { height: var(--h); align-items: flex-start; background: linear-gradient(90deg, rgb(231 184 74 / .08), transparent); }
.ladder .band span { margin-top: -10px; }
.ladder .band i { opacity: .35; }
.ch.on .ladder .lvl i { transform: scaleX(1); } .ch.on .ladder .lvl span { opacity: 1; filter: none; }
.ch.on .ladder .lvl:nth-child(1) i, .ch.on .ladder .lvl:nth-child(1) span { transition-delay: 0.45s; }
.ch.on .ladder .lvl:nth-child(2) i, .ch.on .ladder .lvl:nth-child(2) span { transition-delay: 0.62s; }
.ch.on .ladder .lvl:nth-child(3) i, .ch.on .ladder .lvl:nth-child(3) span { transition-delay: 0.78s; }
.ch.on .ladder .lvl:nth-child(4) i, .ch.on .ladder .lvl:nth-child(4) span { transition-delay: 0.94s; }

.check p { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgb(255 255 255 / .06); color: #e2ddd3; font-size: 16px;
  opacity: 0; transform: translateY(8px); filter: blur(5px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.check p:last-child { border-bottom: 1px solid rgb(255 255 255 / .06); }
.check i { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px rgb(231 184 74 / .7); position: relative; flex: none; }
.check i::after { content: ""; position: absolute; inset: 3px; background: var(--gold); transform: scale(0); transition: transform .7s var(--ease); }
.ch.on .check p { opacity: 1; transform: none; filter: none; }
.ch.on .check p:nth-child(1) { transition-delay: 0.45s } .ch.on .check p:nth-child(2) { transition-delay: 0.62s } .ch.on .check p:nth-child(3) { transition-delay: 0.78s }
.ch.on .check p:nth-child(1) i::after { transform: scale(1); transition-delay: 0.91s } .ch.on .check p:nth-child(2) i::after { transform: scale(1); transition-delay: 1.07s }
.ch.on .check p:nth-child(3) i::after { transform: scale(1); transition-delay: 1.23s }

.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; list-style: none; counter-reset: s; max-width: 460px; }
.stages li { counter-increment: s; font-size: 15px; color: var(--label); padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .1);
  opacity: 0; filter: blur(5px); transition: color 1s var(--ease), border-color 1s var(--ease), opacity 1s var(--ease), filter 1s var(--ease); }
.stages li::before { content: counter(s, upper-roman); display: block; font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; color: var(--gold-lo); font-size: 13px; margin-bottom: 4px;
  transition: color 1s var(--ease); }
.ch.on .stages li { color: #e2ddd3; border-color: rgb(231 184 74 / .6); opacity: 1; filter: none; }
.ch.on .stages li::before { color: var(--gold); }
.ch.on .stages li:nth-child(1) { transition-delay: 0.45s } .ch.on .stages li:nth-child(2) { transition-delay: 0.59s } .ch.on .stages li:nth-child(3) { transition-delay: 0.72s }
.ch.on .stages li:nth-child(4) { transition-delay: 0.85s } .ch.on .stages li:nth-child(5) { transition-delay: 0.98s } .ch.on .stages li:nth-child(6) { transition-delay: 1.10s }

/* ---- instruments as lit objects: the same world as the film.
   A plate is smoked glass over carbon: a gold rim light on its top edge, an inner edge highlight,
   a deep shadow under it and an ambient gold bloom around it. It swings in from depth, settles,
   takes a light sweep as it lands, and tilts a few degrees with the pointer. */
.chapters { perspective: 1400px; }
.live.plate { transform-style: preserve-3d; }
.plate { position: relative; max-width: 520px; padding: 14px 16px 8px; isolation: isolate;
  background: linear-gradient(165deg, rgb(34 30 22 / .72) 0%, rgb(14 14 17 / .78) 38%, rgb(8 8 10 / .86) 100%);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgb(255 223 138 / .28), inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 -30px 60px -40px rgb(231 184 74 / .12),
    0 40px 70px -30px rgb(0 0 0 / .9), 0 0 90px -30px rgb(231 184 74 / .28);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transform: rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg)));
  transition: transform .9s var(--ease); }
/* the rim: a thin gold light on the top edge, brightest where the key light would hit */
.plate::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 4%, rgb(255 223 138 / .9) 38%, rgb(231 184 74 / .5) 70%, transparent 96%); }
/* the sweep: one band of light crosses the glass as it lands, like the light in the film */
.plate::after { content: ""; position: absolute; inset: -20% -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgb(255 236 190 / .10) 48%, rgb(255 236 190 / .22) 50%, rgb(255 236 190 / .10) 52%, transparent 58%);
  transform: translateX(-60%); opacity: 0; }
.ch.on .plate::after { animation: sweep 1.8s var(--ease) .5s both; }
@keyframes sweep { 0% { transform: translateX(-60%); opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
/* the entrance: from depth, turned and soft, to settled and sharp. It rides on translate and rotate, and the
   pointer tilt on transform, so the two never share a transition: a moving mouse used to restart the entrance's
   delay on every move and hold the card back in depth for as long as the mouse moved. Leaving is quick, no delay. */
.ch > .live.plate { translate: 40px 30px -160px; rotate: y -17deg; opacity: 0; filter: blur(10px);
  transform: rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg)));
  transition: translate .9s var(--ease), rotate .9s var(--ease), opacity .6s var(--ease), filter .6s var(--ease), transform .9s var(--ease); }
.ch.on > .live.plate { translate: 0px 0px 0px; rotate: y 0deg; opacity: 1; filter: none;
  transform: rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg)));
  transition: translate 1.4s var(--ease) .3s, rotate 1.4s var(--ease) .3s, opacity 1.1s var(--ease) .3s, filter 1.1s var(--ease) .3s, transform .9s var(--ease); }

.p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.p-head > span { font-family: var(--brand); font-size: 15px; font-weight: 700; font-stretch: 112%; color: var(--bone); display: flex; flex-direction: column; gap: 3px; }
.p-head small { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--label); letter-spacing: .04em; }
.p-head em { font-style: normal; font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 14px; color: var(--gold-hi); display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums; }
.p-head em i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }

/* ---- charts: platform-plain, crisp, no glow on the bars */
.cchart { display: block; width: 100%; height: auto; overflow: visible; }
.c-grid line { stroke: rgb(255 255 255 / .05); stroke-width: 1; }
.c-scale { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 10.5px; fill: #6f6b63; font-variant-numeric: tabular-nums; }
.c-axis, .c-sep { stroke: rgb(255 255 255 / .1); stroke-width: 1; }
.c-reveal { transform: scaleX(0); transform-origin: 0 0; transition: transform 2s cubic-bezier(.35, .1, .25, 1) .45s; }
.ch.on .c-reveal { transform: none; }
.cd .wick { stroke-width: 1; }
.cd.up .wick { stroke: #19d97c; } .cd.up .body { fill: #19d97c; }
.cd.dn .wick { stroke: #f2455b; } .cd.dn .body { fill: #0b0b0d; stroke: #f2455b; stroke-width: 1; }
.vol { opacity: .32; } .vol.up { fill: #19d97c; } .vol.dn { fill: #f2455b; }
.c-line { fill: none; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) var(--d, .3s); }
.ch.on .c-line { stroke-dashoffset: 0; }
.c-line.gold { stroke: #e7b84a; stroke-width: 1.4; }
.c-line.trail { stroke: #ffdf8a; stroke-opacity: .8; stroke-width: 1.2; }
.c-line.dash { stroke-dasharray: 3 3; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s var(--ease) var(--d, .3s); }
.ch.on .c-line.dash { opacity: 1; }
.c-line.limit { stroke: rgb(255 255 255 / .45); }
.c-line.flip { stroke: rgb(231 184 74 / .75); }
.c-band { fill: rgb(231 184 74 / .05); stroke: rgb(231 184 74 / .14); stroke-width: 1; opacity: 0; transition: opacity 1s var(--ease) .3s; }
.ch.on .c-band { opacity: 1; }
.c-tag { opacity: 0; transition: opacity .7s var(--ease) var(--d); }
.ch.on .c-tag { opacity: 1; }
.c-tag .tag-bg { fill: #1d1b18; stroke: rgb(255 255 255 / .14); stroke-width: 1; }
.c-tag.gold .tag-bg { fill: #e7b84a; stroke: none; }
.c-tag.trail .tag-bg { fill: #2a2416; stroke: rgb(255 223 138 / .5); }
.c-tag.band .tag-bg { fill: #221d12; stroke: rgb(231 184 74 / .35); }
.c-tag.now.up .tag-bg { fill: #19d97c; stroke: none; } .c-tag.now.dn .tag-bg { fill: #f2455b; stroke: none; }
.c-tag .tag-v { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 11.5px; font-weight: 600; fill: var(--bone); font-variant-numeric: tabular-nums; }
.c-tag.gold .tag-v, .c-tag.now.up .tag-v { fill: #0a0a0b; } .c-tag.now.dn .tag-v { fill: #fff; }
.c-tag .tag-n { font-family: var(--sans); font-size: 12px; fill: #b3ada2; }
.c-tag.gold .tag-n { fill: var(--gold-hi); }
.c-tag .tag-lead { stroke: rgb(255 255 255 / .25); stroke-width: 1; fill: none; }
.c-last .lp-line { stroke-width: 1; stroke-dasharray: 1 2; opacity: 0; transition: opacity .6s var(--ease) 2.3s; }
.ch.on .c-last .lp-line { opacity: 1; }
.c-last.up .lp-line { stroke: #19d97c; } .c-last.dn .lp-line { stroke: #f2455b; }
.c-time { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 11px; fill: #7d786f; }
.c-split { stroke: rgb(255 223 138 / .35); stroke-width: 1; stroke-dasharray: 3 4; }
.c-flag { opacity: 0; transition: opacity .6s var(--ease) var(--d, 2s); }
.ch.on .c-flag { opacity: 1; }
.c-flag circle { fill: #ffdf8a; stroke: #0b0b0d; stroke-width: 1.5; }
.c-flag .c-note { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--bone); paint-order: stroke; stroke: #0b0b0d; stroke-width: 3px; }

.chart.plate { display: flex; flex-direction: column; }
.chart.plate .p-head { order: -1; }
.log, .named, .week { padding-bottom: 12px; }

/* ---- 01-03 are the pawn's: muted words, no gold in the card headers. Gold arrives with 04, the turn. */
.lede.pain { color: #d6d0c5; }
.ch[data-ch="1"] .p-head em, .ch[data-ch="2"] .p-head em { color: #d8d2c7; }
.ch[data-ch="1"] .p-head em i { background: #b3ada2; box-shadow: 0 0 8px rgb(179 173 162 / .6); }
.ch[data-ch="2"] .p-head em i { background: #f2455b; box-shadow: 0 0 10px #f2455b; }

/* 02: the same morning, four videos, four calls. Each number lands on its bar as the replay reaches it */
.c-call { opacity: 0; transition: opacity .5s var(--ease) var(--d, 1s); }
.ch.on .c-call { opacity: 1; }
.c-call circle { fill: #0b0b0d; stroke-width: 1.4; }
.c-call text { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 10.5px; font-weight: 700; }
.c-call .lead { stroke-width: 1; stroke-dasharray: 2 2; }
.c-call.dn circle, .c-call.dn .lead { stroke: #f2455b; } .c-call.dn text { fill: #ff8b99; }
.c-call.up circle, .c-call.up .lead { stroke: #19d97c; } .c-call.up text { fill: #5ff0a8; }
.c-call.flat circle, .c-call.flat .lead { stroke: #b3ada2; } .c-call.flat text { fill: var(--bone); }
.c-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 4px; font-size: 13px; color: #d8d2c7; }
.c-key span { display: inline-flex; align-items: center; gap: 7px; opacity: 0; transition: opacity .5s var(--ease) var(--d, .9s); }
.ch.on .c-key span { opacity: 1; }
[data-chart="advice"] .c-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
[data-chart="advice"] .c-key span { padding: 6px 9px; background: rgb(255 255 255 / .035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.c-key b { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 10.5px; font-weight: 700; width: 17px; height: 17px; flex: none;
  display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.4px currentColor; }
.c-key .dn b { color: #ff8b99; } .c-key .up b { color: #5ff0a8; } .c-key .flat b { color: var(--bone); }
/* each call is a video: a small dark frame with a play mark */
.c-key .play { width: 22px; height: 15px; flex: none; position: relative; background: linear-gradient(160deg, #2b2720, #121214); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.c-key .play::after { content: ""; position: absolute; left: 8.5px; top: 4px; border-left: 6px solid var(--bone); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }

/* 03: the trade log. Four losses in six minutes, each one bigger, and nothing in the Why column */
.log .row { display: grid; grid-template-columns: 50px 52px 40px 1fr 54px; align-items: center; gap: 8px; padding: 9px 4px;
  border-top: 1px solid rgb(255 255 255 / .06); font-size: 14.5px; color: #d8d2c7;
  opacity: 0; translate: -14px 0; transition: opacity .5s var(--ease), translate .6s var(--ease); }
.ch.on .log .row { opacity: 1; translate: 0 0; transition-delay: var(--d, .45s); }
.log .row.hd { border-top: 0; padding-top: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.log time, .log .n { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-variant-numeric: tabular-nums; }
.log time { color: var(--label); }
.log .n { color: var(--bone); }
.log .row.last .n { color: #ff8b99; font-weight: 700; }
.log .res { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.log .res b { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ff8b99; padding: 3px 7px;
  background: rgb(242 69 91 / .1); box-shadow: inset 0 0 0 1px rgb(242 69 91 / .35); }
.log .res em { font-style: normal; font-size: 12.5px; color: #c9a3a8; }
.log .why { font-family: var(--mono); color: var(--dim); }
.log .caret { display: inline-block; width: 1.5px; height: 15px; background: var(--bone); vertical-align: middle; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* 04: twenty replays of one setup, each marked plan followed or broken; steadier as the reps go on */
.reps .rep { opacity: 0; transform: translateY(6px) scale(.97); transform-box: fill-box; transform-origin: 50% 50%;
  transition: opacity .45s var(--ease), transform .6s var(--ease); }
.ch.on .reps .rep { opacity: 1; transform: none; transition-delay: var(--d); }
.reps .frame { fill: rgb(255 255 255 / .025); stroke: rgb(255 255 255 / .08); stroke-width: 1; }
.reps .rep.ok .frame { stroke: rgb(231 184 74 / .22); }
.reps .num { font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 9.5px; fill: #6f6b63; }
.reps .mark { opacity: 0; transition: opacity .35s var(--ease); }
.ch.on .reps .mark { opacity: 1; transition-delay: calc(var(--d) + .3s); }
.reps .mark rect { stroke-width: 1.2; } .reps .mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reps .rep.ok .mark rect { fill: #e7b84a; stroke: #e7b84a; } .reps .rep.ok .mark path { stroke: #0a0a0b; stroke-width: 1.6; }
.reps .rep.no .mark rect { fill: none; stroke: #f2455b; } .reps .rep.no .mark path { stroke: #f2455b; stroke-width: 1.4; }
[data-chart="reps"] .c-key { margin-top: 10px; font-size: 12.5px; color: var(--label); }
[data-chart="reps"] .c-key i { width: 9px; height: 9px; flex: none; }
[data-chart="reps"] .c-key .ok i { background: var(--gold); }
[data-chart="reps"] .c-key .no i { box-shadow: inset 0 0 0 1.2px #f2455b; }
[data-chart="reps"] .c-key em { margin-left: auto; font-style: normal; color: var(--gold-hi); opacity: 0; transition: opacity .6s var(--ease) 2.2s; }
.ch.on [data-chart="reps"] .c-key em { opacity: 1; }

/* 05: two ideas over the same past sessions, drawn left to right; one kept, one dropped */
.tested .zero { stroke: rgb(255 255 255 / .22); stroke-width: 1; stroke-dasharray: 3 4; }
.tested .curve { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.35, .1, .25, 1) .5s; }
.ch.on .tested .curve { stroke-dashoffset: 0; }
.tested .curve.keep { stroke: #e7b84a; filter: drop-shadow(0 0 6px rgb(231 184 74 / .45)); }
.tested .curve.drop { stroke: #8b867c; }
.tested .area { opacity: 0; transition: opacity 1s var(--ease) 1.2s; }
.ch.on .tested .area { opacity: 1; }
.c-end { opacity: 0; transition: opacity .6s var(--ease) var(--d, 2.1s); }
.ch.on .c-end { opacity: 1; }
.c-end circle { stroke: #0b0b0d; stroke-width: 1.5; }
.c-end.keep circle { fill: #ffdf8a; } .c-end.drop circle { fill: #8b867c; }
.c-end.keep .tag-bg { fill: #e7b84a; } .c-end.drop .tag-bg { fill: #1d1b18; stroke: rgb(242 69 91 / .45); stroke-width: 1; }
.c-end .tag-v { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.c-end.keep .tag-v { fill: #0a0a0b; } .c-end.drop .tag-v { fill: #ff8b99; }
.c-end .tag-n { font-family: var(--sans); font-size: 12px; }
.c-end.keep .tag-n { fill: var(--gold-hi); } .c-end.drop .tag-n { fill: #b3ada2; }

/* 06: mistakes by name, counted per week from the journal. They fall, with setbacks on the way */
.named .mk { display: grid; grid-template-columns: 1fr 168px 50px; align-items: end; gap: 14px; padding: 9px 2px; border-top: 1px solid rgb(255 255 255 / .06); }
.named .mk.hd { border-top: 0; padding: 0 2px 4px; align-items: center; }
.named .nm { align-self: center; font-size: 14.5px; color: #e2ddd3; opacity: 0; transition: opacity .6s var(--ease); }
.ch.on .named .nm { opacity: 1; transition-delay: calc(.45s + var(--r) * .08s); }
.named .wk { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; align-items: end; height: 30px; }
.named .mk.hd .wk { height: auto; }
.named .mk.hd .wk i { font-style: normal; font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 10.5px; color: var(--label); text-align: center; }
.named .mk.hd .wk i:last-child { color: var(--gold); }
.named .mk:not(.hd) .wk i { display: block; height: max(2px, calc(var(--v) * 4px)); background: #4b4740; transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .7s var(--ease); }
.named .mk:not(.hd) .wk i:last-child { background: var(--gold); box-shadow: 0 0 12px -2px rgb(231 184 74 / .6); }
.named .wk i:nth-child(1) { --w: 0; } .named .wk i:nth-child(2) { --w: 1; } .named .wk i:nth-child(3) { --w: 2; }
.named .wk i:nth-child(4) { --w: 3; } .named .wk i:nth-child(5) { --w: 4; } .named .wk i:nth-child(6) { --w: 5; }
.ch.on .named .mk:not(.hd) .wk i { transform: none; transition-delay: calc(.5s + var(--w) * .12s + var(--r) * .05s); }
.named .ct { align-self: center; text-align: right; font-family: var(--mono); font-feature-settings: "tnum", "cv11", "ss03"; font-size: 14px; color: var(--gold-hi);
  opacity: 0; transition: opacity .6s var(--ease); }
.named .ct::first-letter { color: var(--label); }
.named .ct small { font-size: 11px; color: var(--dim); margin: 0 3px; }
.ch.on .named .ct { opacity: 1; transition-delay: calc(1.5s + var(--r) * .1s); }

/* 07: sessions. Last week mostly red, plan, trade and review done every day anyway; Monday, the same again */
.week .wkrow { display: grid; grid-template-columns: 72px repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.week .lb { align-self: center; font-size: 11.5px; line-height: 1.25; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--label); }
.week .day { display: grid; align-content: start; gap: 4px; padding: 8px 8px 9px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
  opacity: 0; translate: 0 8px; transition: opacity .5s var(--ease), translate .6s var(--ease), box-shadow .8s var(--ease), background .8s var(--ease); }
.ch.on .week .day { opacity: 1; translate: 0 0; transition-delay: calc(.45s + var(--i, 6) * .1s); }
.week .day b { font-size: 12.5px; font-weight: 600; color: var(--bone); }
.week .day .r { font-size: 12px; font-weight: 600; }
.week .day.dn .r { color: #f2455b; } .week .day.up .r { color: #19d97c; } .week .day.now .r { color: var(--gold-hi); }
.week .ck { display: flex; gap: 4px; margin-top: 2px; }
.week .ck i { position: relative; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px rgb(231 184 74 / .55); }
.week .ck i::after { content: ""; position: absolute; inset: 2px; background: var(--gold); transform: scale(0); transition: transform .4s var(--ease); }
.week .ck i:nth-child(1) { --k: 0; } .week .ck i:nth-child(2) { --k: 1; } .week .ck i:nth-child(3) { --k: 2; }
.ch.on .week .ck i::after { transform: none; transition-delay: calc(.75s + var(--i) * .17s + var(--k) * .06s); }
.ch.on .week .day.now { background: rgb(231 184 74 / .1); box-shadow: inset 0 0 0 1px rgb(231 184 74 / .65), 0 0 26px -8px rgb(231 184 74 / .65);
  transition-delay: .95s, .95s, 1.9s, 1.9s; }
.week .day.todo { background: none; box-shadow: none; outline: 1px dashed rgb(255 255 255 / .12); outline-offset: -1px; }
.week .day.todo b { color: var(--dim); }
.ch.on .week .day.todo { opacity: .7; }
.week .key { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--label); }
.week .key i { width: 9px; height: 9px; flex: none; box-shadow: inset 0 0 0 1px rgb(231 184 74 / .55);
  background: linear-gradient(var(--gold), var(--gold)) center / 5px 5px no-repeat; }
.week .key i:not(:first-child) { margin-left: 10px; }

.end-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.end-actions .btn { margin-top: 30px; }
.end-actions .or { margin-top: 30px; font-size: 15px; color: #bdb7ac; display: inline-flex; align-items: center; gap: 12px; }
.cue-line { width: 48px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: left; }

/* ---- the chapter rail */
.rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); list-style: none; display: grid; gap: 14px; }
.rail { z-index: 5; gap: 6px; }
.rail button { width: 22px; height: 22px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.rail button::before { content: ""; width: 6px; height: 6px; background: var(--dim); transform: rotate(45deg); transition: background .6s, transform .6s var(--ease); }
.rail button:hover::before { background: var(--gold-hi); }
.rail li.on button::before { background: var(--gold); transform: rotate(45deg) scale(1.5); }
.rail li.done button::before { background: var(--gold-lo); }
.rail-fill { display: none; }

/* ---- the gate */
.gate { position: relative; padding: 40px 0 40px; overflow: hidden; isolation: isolate; }
/* the doors keep breathing behind the top of the plans, then give way to the page */
.gate-bg { position: absolute; inset: 0 0 auto 0; width: 100%; height: 110vh; object-fit: cover; z-index: -2; opacity: .32; filter: blur(3px); }
.gate::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110vh; z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, rgb(6 6 7 / .3), rgb(6 6 7 / .9) 70%), linear-gradient(transparent 55%, var(--ground)); }
#plans-root { min-height: 100vh; }
/* desktop: the film stops short of the fold so the edge where it ends, the PLANS eyebrow and the heading peek
   under it (the cue that there is more below); phones keep the full screen */
@media (min-width: 900px) {
  .journey { height: max(640px, calc(100svh - 140px)); }
  .gate { padding-top: 0; }
  #plans-root { margin-top: -110px; }   /* the Plans page's own top air, so its heading peeks */
  .ch { zoom: .8; }                      /* the tallest chapters still clear the header and the controls */
}

.foot { padding: 40px var(--gutter) 56px; border-top: 1px solid var(--hair); display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; }
.foot .legal { font-size: 13.5px; line-height: 1.65; color: #8f8a81; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14.5px; }
.foot nav a { color: var(--muted); }
.foot .small { font-size: 13px; color: var(--label); }

/* ---- phone: the art takes the top, the copy sits on a dark floor below it */
@media (max-width: 899px) {
  .shade { background: linear-gradient(0deg, rgb(6 6 7 / .97) 0%, rgb(6 6 7 / .93) 48%, rgb(6 6 7 / .6) 64%, rgb(6 6 7 / .15) 78%, transparent 88%); }
  .ch { left: 16px; right: 16px; width: auto; top: auto; bottom: 92px; transform: none; }
  .controls { left: 16px; right: 16px; bottom: 22px; }
  .skip-link { font-size: 13.5px; }
  .eyebrow { margin-bottom: 14px; }
  h1 { font-size: 34px; } h2, h2.peak { font-size: 29px; }
  .wordmark { font-size: 16px; }
  .top nav { gap: 16px; font-size: 12px; letter-spacing: .07em; }
  .body { font-size: 15.5px; margin-top: 12px; }
  .lede { margin-top: 12px; font-size: 18px; }
  .live { margin-top: 18px; }
  .plate { max-width: none; }
  .ch > .live.plate, .ch.on > .live.plate { transform: rotateY(-3deg) rotateX(2deg); }
  .c-key { font-size: 12px; gap: 5px 12px; }
  [data-chart="advice"] .c-key span { padding: 5px 7px; gap: 6px; }
  .log .row { grid-template-columns: 38px 42px 28px 1fr 34px; gap: 6px; padding: 8px 2px; font-size: 13px; }
  .log .row.hd { font-size: 10px; letter-spacing: .05em; }
  .log .res b { font-size: 10.5px; padding: 2px 5px; } .log .res em { font-size: 11.5px; }
  .named .mk { grid-template-columns: 1fr 112px 40px; gap: 10px; }
  .named .nm { font-size: 13px; line-height: 1.25; }
  .named .wk { gap: 3px; }
  .named .ct { font-size: 13px; }
  .week .wkrow { grid-template-columns: 52px repeat(5, 1fr); gap: 4px; }
  .week .lb { font-size: 10px; letter-spacing: .04em; }
  .week .day { padding: 6px 5px 7px; gap: 3px; }
  .week .day b { font-size: 11.5px; } .week .day .r { font-size: 11px; }
  .week .ck { gap: 3px; } .week .ck i { width: 8px; height: 8px; }
  .ladder { height: 120px; }
  .stages { gap: 12px 10px; }
  .stages li { font-size: 13.5px; }
  .chips li { font-size: 14px; padding: 8px 12px 8px 11px; }
  .path { font-size: 14px; }
  .path .node { padding: 8px 11px; }
  .rail { right: 10px; top: 96px; transform: none; gap: 10px; }

  .gate { padding-top: 96px; }
  .tiers { grid-template-columns: 1fr; }
  .terms { flex-wrap: wrap; justify-content: center; }
}

/* ---- reduced motion: no scrubbing; each chapter is a still with its words beside it */
.reduced .journey { height: auto; }
.reduced .stage { height: auto; }
.reduced .stage { position: relative; height: auto; overflow: visible; }
.reduced .stage .film, .reduced .stage .endloop, .reduced .stage > .poster, .reduced .shade, .reduced .rail, .reduced .controls { display: none; }
.reduced .chapters { position: relative; }
.reduced .ch { position: relative; inset: auto; width: auto; transform: none; opacity: 1; visibility: visible; min-height: 80vh;
  display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter) 60px; background-size: cover;
  background-position: var(--focus, 60%) 50%; isolation: isolate; }
.reduced .ch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 6 7 / .9), rgb(6 6 7 / .4) 60%, transparent); }
.reduced .ch > *, .reduced .ch * { transform: none !important; translate: none !important; rotate: none !important; opacity: 1 !important; transition: none !important; }
.reduced .ch > * { max-width: 560px; }
@media (prefers-reduced-motion: reduce) { .cue-line { animation: none; } html { scroll-behavior: auto; }
  .top nav a.beacon, .top nav a.beacon::after { animation: none; background-position: 50% 0; } }