/* FREEDOM Precision — scroll-driven scenes on the app's own palette. */
:root{
  --ground:#0E1113; --panel:#161A1D; --panel2:#1C2125; --line:#2A3136;
  --ink:#F2F5F6; --ink-mid:#A9B4BA; --ink-soft:#717E86;
  --accent:#F26B26; --accent-dim:#8A3D16; --go:#4CAF7D; --stop:#E0523F;
  --display:"Saira Condensed",Impact,"Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent)} em{font-style:normal;color:var(--accent)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:0 0 14px;text-wrap:balance}
h1{font-size:clamp(52px,7.5vw,112px)} h2{font-size:clamp(40px,5.6vw,84px)}

/* header (fixed, over everything) --------------------------------------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;
  background:linear-gradient(180deg,rgba(14,17,19,.92),rgba(14,17,19,0));pointer-events:none}
.top > *{pointer-events:auto}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:22px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.mark b{color:var(--accent);font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:14px;font-family:var(--body);font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:rgba(14,17,19,.6);cursor:pointer;white-space:nowrap;backdrop-filter:blur(8px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-fill{background:var(--accent);border-color:var(--accent);color:#fff}

/* scenes ------------------------------------------------------------------ */
.scene{position:relative;height:calc(var(--len,2.5) * 100vh)}
.scene.alt .stage{background:radial-gradient(ellipse 70% 60% at 70% 50%, rgba(242,107,38,.10), transparent 65%)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;padding:0 6vw}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242,107,38,.12), transparent 60%);pointer-events:none}
@media(max-width:860px){.stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding:84px 6vw 0;gap:12px}}

/* captions: each lives in a window of --p, fading in and out at the edges */
.cap{grid-column:1;grid-row:1;max-width:46ch;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));transition:none;will-change:opacity,transform}
.cap p{color:var(--ink-mid);font-size:clamp(16px,1.6vw,20px);margin:0;max-width:40ch}
.cap.center{grid-column:1 / -1;text-align:center;max-width:none;justify-self:center}
.cap.center p{margin:0 auto}
/* window helper: o = clamp(0,1, min((p-a)*8, (b-p)*8)) */
.cap-a{--a:0.00;--b:0.36}.cap-b{--a:0.40;--b:0.70}.cap-c{--a:0.74;--b:1.10}
/* fades in over the first 2% of its window (visible from the very first paint
   when --a is 0 - at exactly p = a the old form computed 0 and the hero had no
   caption until the first scroll), fades out over the last 12% */
.cap{--o:clamp(0, min((var(--p,0) - var(--a) + 0.025) * 40, (var(--b) - var(--p,0)) * 8), 1)}
/* scenes with only two captions: cap-b owns the rest of the run */
#s-kept .cap-b,#s-improve .cap-b,#s-compete .cap-b,#s-joy .cap-b{--a:0.42;--b:1.10}
#s-joy .cap-a{--a:0;--b:1.10}  /* stays: the headline over the badges for the whole run */
#s-joy .cap-b{grid-row:3}

/* the phone --------------------------------------------------------------- */
.phone{grid-column:2;grid-row:1;justify-self:center;width:min(340px,80vw);aspect-ratio:9/19;border-radius:40px;background:#000;border:1px solid #2a3136;box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 6px #111;padding:14px;position:relative}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:34%;height:22px;background:#000;border-radius:0 0 14px 14px;z-index:2}
.screen{height:100%;border-radius:28px;background:var(--panel);overflow:hidden;padding:44px 16px 16px;display:flex;flex-direction:column;gap:10px;position:relative}
@media(max-width:860px){
  /* the whole screen stays on screen: a shorter phone, nothing pushed off the
     bottom - the total that lands there is the point of the scene */
  .phone{grid-column:1;grid-row:2;align-self:center;width:min(300px,68vw);aspect-ratio:9/15.5;margin:0 0 18px}
  .screen{padding-top:36px}
}
.hud{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-soft)}
.hud i{font-style:normal}.hud .live{color:var(--go)}
.hud .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--go);margin-right:5px}

/* anything with --k lands when --p passes it */
.k{--o:clamp(0, (var(--p,0) - var(--k,0)) * 14, 1);opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 10px))}

/* hero screen */
.big{font-family:var(--display);font-weight:800;font-size:64px;line-height:1;text-align:center;margin:18px 0 6px;color:var(--go);
  --o:clamp(0, min((var(--p,0) - .06) * 14, (0.76 - var(--p,0)) * 14), 1);opacity:var(--o)}
.track{position:relative;height:76px;border-bottom:1px solid var(--line);margin-top:auto}
.track > span{position:absolute;bottom:0;transform:translate(-50%, calc((1 - var(--o)) * 10px));display:flex;flex-direction:column;align-items:center;gap:6px}
.track i{display:block;width:3px;height:36px;background:var(--ink);border-radius:2px}
.track b{font-family:var(--mono);font-size:10px;color:var(--ink-mid);font-weight:600}
.beep i{height:52px;background:var(--accent)} .beep b{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:9px}
.total{display:grid;gap:2px;padding-top:10px}
.total b{font-family:var(--display);font-size:44px;line-height:1;color:var(--accent);font-weight:800}
.total small{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);opacity:calc(1 - var(--p,0) * 6);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}

/* kept screen */
.session{background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.session header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.session header b{font-family:var(--display);font-size:16px;text-transform:uppercase}
.session header span{font-family:var(--mono);font-size:9px;color:var(--ink-soft)}
.mini{position:relative;height:18px;border-bottom:1px solid var(--line);margin-top:3px}
.mini i{position:absolute;bottom:0;width:2px;height:12px;background:var(--ink-mid);border-radius:1px}
.mini i:first-child{background:var(--accent);height:16px}
.mini em{position:absolute;right:0;bottom:2px;font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:600;background:var(--ground);padding-left:5px}
.gear{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;color:var(--ink-mid)}
.gear span{border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.gear .hit{color:var(--go);border-color:var(--go)}
.target{margin-top:auto;display:flex;justify-content:center}
.target svg{width:96px;height:auto}
.target .holes circle{fill:var(--accent);opacity:clamp(0, (var(--p,0) - .74) * 10, 1)}

/* improve screen */
.chart{width:100%;height:auto;display:block;margin-top:6px}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .ylab text{fill:var(--ink-soft);font:9px var(--mono)}
.chart .bandfill{opacity:clamp(0, (var(--p,0) - .40) * 6, 1)}
.chart .goal{stroke:var(--go);stroke-width:1.5;stroke-dasharray:4 5;opacity:clamp(0, (var(--p,0) - .45) * 8, .8)}
.chart .goal-lab{fill:var(--go);font:9px var(--mono);text-anchor:end;opacity:clamp(0, (var(--p,0) - .45) * 8, .9)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:calc(420 * (1 - clamp(0, (var(--p,0) - .08) / .50, 1)))}
.chart .pts circle{fill:var(--ground);stroke:var(--accent);stroke-width:2.5}
.chart .pts circle:nth-child(1){opacity:clamp(0,(var(--p,0) - .10)*20,1)}.chart .pts circle:nth-child(2){opacity:clamp(0,(var(--p,0) - .26)*20,1)}
.chart .pts circle:nth-child(3){opacity:clamp(0,(var(--p,0) - .42)*20,1)}.chart .pts circle:nth-child(4){opacity:clamp(0,(var(--p,0) - .58)*20,1);fill:var(--accent)}
.delta{margin-top:auto;display:grid;gap:2px}
.delta b{font-family:var(--display);font-size:34px;color:var(--go);font-weight:800;line-height:1}
.delta small{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* compete screen */
.board{display:grid}
.row{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.row .rank{font-family:var(--display);font-size:18px;color:var(--ink-soft);font-weight:700}
.row .who{font-weight:600}.row b{font-family:var(--mono);font-weight:600}
.row.you{background:linear-gradient(90deg,rgba(242,107,38,.16),transparent);margin:0 -16px;padding:9px 16px;border-top-color:transparent;border-radius:10px}
.row.you .rank,.row.you b{color:var(--accent)}
.row .clean{font:8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--go);border:1px solid var(--go);border-radius:5px;padding:2px 5px}
.badge{margin-top:auto;background:var(--ground);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.badge span{grid-row:span 2;color:var(--accent);font-size:20px}
.badge b{font-family:var(--display);font-size:16px;text-transform:uppercase;line-height:1}
.badge small{font:9px var(--mono);color:var(--ink-soft);letter-spacing:.08em}

/* train screen */
.stage-row{display:grid;grid-template-columns:20px 44px 1fr;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:11.5px}
.stage-row .n{font-family:var(--display);font-size:18px;color:var(--accent-dim);font-weight:800}
.stage-row .d{font-family:var(--mono);font-weight:600}.stage-row .w{color:var(--ink-mid)}
.spoken{display:flex;gap:8px;align-items:flex-start;padding:10px;background:var(--ground);border-radius:10px;font-size:11px;color:var(--ink-mid);line-height:1.45}
.spoken i{color:var(--accent);font-style:normal}
.pass{margin-top:auto;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink-soft)}
.pass .bar{height:7px;background:var(--panel2);border-radius:4px;overflow:hidden}
.pass .bar i{display:block;height:100%;background:var(--go);width:calc(92% * clamp(0, (var(--p,0) - .72) / .18, 1))}
.pass b{color:var(--ink);font-size:13px}
.pass em{color:var(--go);border:1px solid var(--go);border-radius:5px;padding:2px 6px;opacity:clamp(0,(var(--p,0) - .90)*20,1)}

/* yours screen */
.bays{display:grid;gap:6px}
.bay{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-soft);height:34px}
.bay b{width:64px;color:var(--ink-mid)}
.rings{position:relative;width:34px;height:34px}
.rings i{position:absolute;inset:0;border:2px solid var(--accent);border-radius:50%;animation:ring 2.4s ease-out infinite}
.rings i:nth-child(2){animation-delay:.8s}.rings i:nth-child(3){animation-delay:1.6s}
.rings.faint i{border-color:var(--ink-soft);border-width:1px}
@keyframes ring{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.6)}}
.theirs i{background:var(--ink-soft);opacity:.5}.theirs b{color:var(--ink-soft);text-decoration:line-through}
.theirs em{position:absolute;top:-20px;white-space:nowrap;font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stop);border:1px solid var(--stop);border-radius:5px;padding:1px 4px;transform:none}
.verdict{font-family:var(--mono);font-size:10.5px;color:var(--ink-mid);margin-top:12px}.verdict b{color:var(--ink)}
.witness{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.witness span{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.witness .on{color:var(--accent);border-color:var(--accent)}

/* joy */
.joy-grid{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:900px;justify-self:center;width:100%}
@media(max-width:860px){.joy-grid{grid-template-columns:repeat(2,1fr)}}
#s-joy .stage{grid-template-rows:auto auto auto;align-content:center;gap:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 12px;display:grid;justify-items:center;gap:4px;text-align:center;transform:scale(calc(.8 + .2 * var(--o)))}
.card .ic{font-size:22px;color:var(--accent)}
.card b{font-family:var(--display);font-size:20px;text-transform:uppercase;line-height:1}
.card small{font:10px var(--mono);color:var(--ink-soft)}

/* invite + footer ---------------------------------------------------------- */
.invite{padding:120px 24px 80px;border-top:1px solid var(--line);position:relative;z-index:1;background:var(--ground)}
.invite-inner{max-width:560px;margin:0 auto}
.lede{color:var(--ink-mid);font-size:18px;margin:0}
form{display:grid;gap:14px;margin:26px 0 0}
label{display:grid;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.opt{color:var(--accent-dim)}
input,select{font:16px var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:50px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.note{font-size:13px;color:var(--ink-soft);margin:4px 0 0}
.status{font-family:var(--mono);font-size:13px;min-height:1.4em;margin:0}.status.good{color:var(--go)}.status.bad{color:var(--stop)}
.foot{border-top:1px solid var(--line);padding:36px 24px 60px;color:var(--ink-mid);font-size:14px;background:var(--ground);position:relative;z-index:1}
.foot p{margin:0 0 8px;max-width:1120px;margin-left:auto;margin-right:auto}.foot b{color:var(--ink)}.fine{color:var(--ink-soft);font-size:12px}

/* static fallback: reduced motion, no JS, or ?p= ---------------------------- */
html.static .scene{height:auto}
html.static .stage{position:relative;height:auto;min-height:0;padding-top:96px;padding-bottom:64px;grid-template-rows:auto;align-items:start}
html.static .cap{opacity:1;transform:none;position:static;grid-row:auto;margin-bottom:24px}
html.static .k{opacity:1;transform:none}
html.static .hint{display:none}
html.static .phone{grid-row:1 / span 4}
@media (prefers-reduced-motion: reduce){.rings i,.hint{animation:none}}