/* Plan Your Set — shared site styles.
 * Linked by index.html and onboarding.html so the two pages cannot drift.
 * Page-specific rules stay in a small inline <style> on the page that needs them.
 */
:root{
  --ink:#080b10;
  --ink-2:#0c1117;
  --ink-3:#121922;
  --cream:#edf1f7;
  --cream-dim:#a7b2c2;
  --cream-faint:#73808f;
  --signal:#2e7cff;
  --signal-soft:#5b97ff;
  --green:#5dd97c;
  --line:rgba(237,241,247,.12);
  --line-strong:rgba(237,241,247,.22);
  --nav-bg:rgba(8,11,16,.72);
  --ghost-hover:rgba(237,241,247,.06);
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-serif:"Instrument Serif",serif;
  --font-mono:"IBM Plex Mono",monospace;
}
[data-theme="light"]{
  --ink:#f3f5f9;
  --ink-2:#ffffff;
  --ink-3:#e9edf4;
  --cream:#0d1218;
  --cream-dim:#46556a;
  --cream-faint:#6e7d92;
  --signal:#1f6bff;
  --signal-soft:#3d7dff;
  --green:#2f7a45;
  --line:rgba(8,18,32,.1);
  --line-strong:rgba(8,18,32,.22);
  --nav-bg:rgba(8,11,16,.8);
  --ghost-hover:rgba(8,18,32,.05);
}
[data-theme="light"] ::selection{color:#fff}
.theme-toggle{
  width:58px;height:30px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line-strong);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:space-between;position:relative;flex:none;
  color:var(--cream);-webkit-tap-highlight-color:transparent;padding:0 9px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.theme-toggle::before{content:"";position:absolute;top:50%;left:25%;width:26px;height:26px;border-radius:50%;background:var(--cream);box-shadow:0 4px 14px rgba(0,0,0,.22);transform:translate(-50%,-50%);transition:left .28s cubic-bezier(.25,.8,.25,1),transform .28s cubic-bezier(.25,.8,.25,1),background-color .25s ease,box-shadow .25s ease}
.theme-toggle:active::before{transform:translate(-50%,-50%) scale(.94)}
.theme-toggle svg{position:absolute;top:50%;z-index:2;width:13px;height:13px;transform:translate(-50%,-50%);transition:opacity .2s ease,color .2s ease;pointer-events:none}
.theme-toggle .tt-sun{left:25%;color:#fff;opacity:1}
.theme-toggle .tt-moon{left:75%;color:var(--cream-faint);opacity:.58}
[data-theme="dark"] .theme-toggle{background:rgba(46,124,255,.16);border-color:rgba(46,124,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(46,124,255,.04)}
[data-theme="dark"] .theme-toggle::before{left:75%;background:var(--signal);box-shadow:0 6px 18px rgba(46,124,255,.34)}
[data-theme="dark"] .theme-toggle .tt-sun{color:var(--cream-faint);opacity:.5}
[data-theme="dark"] .theme-toggle .tt-moon{color:#fff;opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .35s ease,color .25s ease,border-color .35s ease,fill .25s ease,stroke .25s ease,box-shadow .35s ease !important;
}
html.theme-fade .logo,html.theme-fade .logo *,html.theme-fade .logo-pic{transition:none !important}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--cream);font-family:var(--font-display);
  font-weight:380;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--signal);color:var(--ink)}
img{max-width:100%}

/* ---- grain ---- */
body::after{
  content:"";position:fixed;inset:-50%;z-index:999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(3%,2%)}
  30%{transform:translate(-1%,3%)}40%{transform:translate(2%,-2%)}50%{transform:translate(-3%,1%)}
  60%{transform:translate(3%,3%)}70%{transform:translate(-2%,2%)}80%{transform:translate(1%,-3%)}90%{transform:translate(-3%,-2%)}
}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
em.flair{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--signal-soft);letter-spacing:.01em}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--signal);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--signal)}

/* ---- nav ---- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--nav-bg);border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{text-decoration:none;display:inline-flex;align-items:center}
.logo-pic{height:26px;width:auto;display:block;content:url(/assets/plan-your-set-logo-white.png)}
[data-theme="light"] .logo-pic{content:url(/assets/plan-your-set-logo-black.png)}
nav .theme-toggle{color:#fff}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:#fff;text-decoration:none;font-size:14px;font-weight:450;transition:color .2s}
.nav-links a:hover{color:var(--signal-soft)}
.btn{
  display:inline-block;background:var(--signal);color:#fff;text-decoration:none;
  font-weight:650;font-size:15px;padding:13px 26px;border-radius:100px;
  transition:transform .25s cubic-bezier(.2,1.4,.4,1),background .2s,box-shadow .25s;letter-spacing:.01em;
}
.btn:hover{transform:translateY(-2px) scale(1.02);background:var(--signal-soft);box-shadow:0 10px 36px rgba(46,124,255,.35)}
.btn-nav{padding:10px 22px;font-size:14px}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--ghost-hover);box-shadow:none}
.nav-links .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.nav-links .btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-lg{padding:17px 36px;font-size:16px}
.nav-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}

/* ---- hero ---- */
header{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding-top:120px;overflow:hidden;
}
header::before{
  content:"";position:absolute;top:-30%;right:-15%;width:70vw;height:70vw;border-radius:50%;
  background:radial-gradient(circle,rgba(46,124,255,.13) 0%,transparent 62%);pointer-events:none;
}
.spots-chip{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);
  border-radius:100px;padding:8px 18px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.06em;color:var(--cream-dim);margin-bottom:34px;
}
.spots-chip .dot{width:8px;height:8px;border-radius:50%;background:#5dd97c;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(93,217,124,.5)}50%{box-shadow:0 0 0 7px rgba(93,217,124,0)}}
h1{
  font-size:clamp(46px,8vw,102px);line-height:.99;font-weight:560;
  letter-spacing:-.03em;font-variation-settings:"opsz" 96;max-width:15ch;
}
h1 em.flair{font-size:1.02em}
.hero-sub{margin-top:32px;font-size:clamp(17px,1.7vw,21px);color:var(--cream-dim);max-width:56ch;font-weight:380;line-height:1.65}
.hero-sub strong{color:var(--cream);font-weight:560}
.hero-ctas{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--font-mono);font-size:12px;color:var(--cream-faint);letter-spacing:.05em;margin-top:18px}
.wave{display:flex;align-items:flex-end;gap:5px;height:120px;margin-top:auto;padding:64px 0 0;opacity:.9}
.wave i{
  flex:1;background:linear-gradient(to top,rgba(46,124,255,.85),rgba(46,124,255,.18));
  border-radius:3px 3px 0 0;min-height:6px;animation:bounce 1.4s ease-in-out infinite alternate;transform-origin:bottom;
}
@keyframes bounce{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* ---- ticker ---- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0;background:var(--ink-2)}
.ticker-track{display:flex;gap:0;width:max-content;animation:scroll 36s linear infinite}
.ticker-track span{
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-dim);white-space:nowrap;padding:0 14px;
}
.ticker-track b{color:var(--signal);font-weight:400;padding:0 6px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- sections ---- */
section{padding:130px 0;position:relative}
.sec-head{margin-bottom:70px;max-width:760px}
h2{font-size:clamp(32px,4.4vw,56px);line-height:1.05;font-weight:540;letter-spacing:-.025em;margin-top:22px;font-variation-settings:"opsz" 60}
.sec-head p{margin-top:22px;color:var(--cream-dim);font-size:18px;max-width:56ch}
h3{font-size:21px;font-weight:560;letter-spacing:-.01em}

/* problem */
.problem{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement{text-align:center;max-width:880px;margin:0 auto}
.statement .eyebrow{justify-content:center}
.statement .eyebrow::after{content:"";width:24px;height:1px;background:var(--signal)}
.statement h2{margin-top:26px}
.statement p{margin:28px auto 0;color:var(--cream-dim);font-size:19px;max-width:52ch}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.step{background:var(--ink);padding:38px 30px 42px}
.step-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--signal)}
.step h3{margin-top:20px}
.step p{margin-top:12px;color:var(--cream-dim);font-size:15.5px;line-height:1.62}

/* features */
.features{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat{border:1px solid var(--line);border-radius:16px;padding:32px 28px;background:var(--ink-2);transition:border-color .25s,transform .25s}
.feat:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.feat .ic{width:38px;height:38px;border-radius:10px;background:rgba(46,124,255,.14);display:flex;align-items:center;justify-content:center;color:var(--signal)}
.feat .ic svg{width:19px;height:19px}
.feat h3{margin-top:22px;font-size:19px}
.feat p{margin-top:11px;color:var(--cream-dim);font-size:15.5px;line-height:1.62}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:880px;margin:0 auto;align-items:start}
.price-card{border:1px solid var(--line);border-radius:20px;padding:38px 34px 42px;background:var(--ink-2);position:relative}
.price-card.featured{border-color:rgba(46,124,255,.45);box-shadow:0 24px 70px rgba(46,124,255,.13)}
.price-card .badge{
  position:absolute;top:-13px;left:34px;background:var(--signal);color:#fff;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;
}
.price-card .tier{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-faint)}
.price-card .amount{font-size:54px;font-weight:560;letter-spacing:-.03em;margin-top:16px;line-height:1}
.price-card .amount small{font-size:17px;font-weight:400;color:var(--cream-faint);letter-spacing:0}
/* The yearly price, under the monthly headline rather than beside it: the monthly figure
   is the one people carry around from every other tool they pay for, so it stays the
   number the eye lands on, and the year reads as the saving it is. */
.price-card .amount-alt{margin-top:9px;font-size:14.5px;color:var(--cream-faint);letter-spacing:0}
.price-card .amount-alt b{font-weight:600;color:var(--cream-dim)}
.price-card .amount-alt span{color:var(--green)}
.price-card .tagline{margin-top:14px;color:var(--cream-dim);font-size:16px;min-height:3em}
.price-card ul{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:13px}
.price-card li{position:relative;padding-left:28px;color:var(--cream-dim);font-size:15.5px;line-height:1.55}
.price-card li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:8px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.price-card li b{color:var(--cream);font-weight:600}
.price-card .btn{width:100%;text-align:center}
.price-foot{
  margin-top:40px;text-align:center;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.14em;color:var(--cream-faint);text-transform:uppercase;line-height:1.9;
}

/* faq */
.faq-list{max-width:820px;display:flex;flex-direction:column;gap:2px;background:var(--line)}
details{background:var(--ink);padding:0}
summary{
  cursor:pointer;list-style:none;padding:26px 4px;font-size:18px;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
summary::-webkit-details-marker{display:none}
summary .plus{color:var(--signal);font-size:24px;font-weight:300;transition:transform .25s;flex:none}
details[open] summary .plus{transform:rotate(45deg)}
.ans{padding:0 4px 28px;color:var(--cream-dim);font-size:16.5px;max-width:62ch;line-height:1.7}
.ans b{color:var(--cream);font-weight:560}

/* final */
.final{text-align:center;background:var(--ink-2);border-top:1px solid var(--line)}
.final h2{max-width:22ch;margin:26px auto 0}
.final p{margin:26px auto 0;color:var(--cream-dim);font-size:18px;max-width:48ch}
.final .hero-ctas{justify-content:center}
.final .eyebrow{justify-content:center}
.final .eyebrow::after{content:"";width:24px;height:1px;background:var(--signal)}

/* footer */
footer{padding:44px 0;border-top:1px solid var(--line);background:var(--ink)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-inner p{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;color:var(--cream-faint)}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--cream-dim);text-decoration:none;font-size:14px}
.foot-links a:hover{color:var(--signal-soft)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .wave i,body::after,.ticker-track{animation:none}
}

@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .wrap{padding:0 22px}
  .nav-inner{padding:0 22px}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink);border-bottom:1px solid var(--line);padding:10px 22px 22px;
  }
  .nav-links.open a{padding:14px 0;color:var(--cream)}
  .nav-links.open .btn{text-align:center;margin-top:10px;color:#fff}
  .nav-toggle{display:block}
  section{padding:88px 0}
  .sec-head{margin-bottom:48px}
  .steps,.feat-grid,.price-grid{grid-template-columns:1fr}
  .price-card .tagline{min-height:0}
}

/* ================= additions ================= */

/* ---- proof / experience band ---- */
.proof-stats{display:flex;gap:52px;justify-content:center;flex-wrap:wrap;margin-top:46px}
.proof-stats>div{text-align:center}
.proof-stats .n{font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1;color:var(--cream)}
.proof-stats .n em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--signal-soft)}
.proof-stats .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);margin-top:9px}

/* ---- how-it-works progression rail ---- */
.flow-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:2px}
.flow-rail i{display:block;height:3px;border-radius:2px;background:var(--signal);opacity:.26}
.flow-rail i:nth-child(2){opacity:.48}
.flow-rail i:nth-child(3){opacity:.72}
.flow-rail i:nth-child(4){opacity:1}
.flow-ends{display:flex;justify-content:space-between;margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.flow-ends b{color:var(--signal);font-weight:400}

/* ---- live demo ---- */
.demo{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.demo-stage{display:grid;grid-template-columns:minmax(0,.92fr) 58px minmax(0,1.3fr);align-items:start}
.demo-panel{border:1px solid var(--line);border-radius:16px;background:var(--ink);min-width:0;position:relative;overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(46,124,255,.04)}
.demo-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;box-shadow:0 0 0 3px rgba(46,124,255,.16)}
.demo-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-tag{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;border:1px solid var(--line-strong);color:var(--cream-faint);
  white-space:nowrap;flex:none;transition:color .3s,border-color .3s,background-color .3s;
}
.demo-tag.warn{color:#f0b429;border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.11)}
.demo-tag.ok{color:#5dd97c;border-color:rgba(93,217,124,.5);background:rgba(93,217,124,.11)}

/* plan side */
.demo-list{position:relative;height:280px;padding:14px}
.srow{
  position:absolute;left:14px;right:14px;top:14px;height:44px;display:flex;align-items:center;gap:11px;
  padding:0 13px;border:1px solid var(--line);border-radius:10px;background:var(--ink-2);
  transition:transform .6s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s;
}
.srow.lift{border-color:rgba(46,124,255,.55);box-shadow:0 12px 30px rgba(46,124,255,.22);z-index:3}
.srow .grip{
  flex:none;width:8px;height:14px;opacity:.5;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:4px 4px;color:var(--cream-faint);
}
.srow .sn{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srow .chip{
  flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--cream-faint);transition:color .3s,border-color .3s,background-color .3s;
}
.srow .chip.arr{margin-left:auto}
.srow .chip.key{color:var(--signal-soft);border-color:rgba(46,124,255,.3);background:rgba(46,124,255,.08);min-width:34px;text-align:center}
.srow .chip.hit{color:#fff;background:var(--signal);border-color:var(--signal)}
.demo-btn{
  display:block;width:calc(100% - 28px);margin:0 14px 16px;padding:13px 18px;border:0;border-radius:100px;
  background:var(--signal);color:#fff;font-family:var(--font-display);font-weight:650;font-size:14.5px;
  cursor:default;transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .25s;
}
.demo-btn.press{transform:scale(.96);box-shadow:0 0 0 8px rgba(46,124,255,.16)}
.demo-cursor{
  position:absolute;left:0;top:0;width:19px;height:19px;z-index:8;opacity:0;pointer-events:none;
  color:var(--cream);filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));transition:transform .75s cubic-bezier(.3,0,.2,1),opacity .3s;
}
[data-theme="light"] .demo-cursor{color:#0d1218;filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}

/* arrow between the two panels */
.demo-arrow{align-self:center;display:flex;align-items:center;justify-content:center;color:var(--cream-faint);transition:color .4s,transform .4s}
.demo-arrow svg{width:24px;height:24px}
.demo-arrow.go{color:var(--signal);transform:scale(1.22)}

/* ableton side */
.demo-body{display:flex;gap:11px;padding:15px 16px 20px;min-width:0}
.demo-lanes{flex:none;width:50px;padding-top:26px;display:flex;flex-direction:column;gap:5px}
.demo-lanes span{height:16px;display:flex;align-items:center;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;color:var(--cream-faint)}
.demo-tracks{position:relative;flex:1;min-width:0;height:147px}
.demo-ruler{position:absolute;inset:0 0 auto 0;height:147px;display:flex;pointer-events:none}
.demo-ruler i{flex:1;border-left:1px solid var(--line);opacity:.55}
.song-col{position:absolute;top:0;bottom:0;padding-right:4px;transition:left .75s cubic-bezier(.4,0,.2,1),width .75s cubic-bezier(.4,0,.2,1)}
.col-head{
  height:21px;display:flex;align-items:center;gap:6px;padding:0 7px;margin-bottom:5px;border-radius:5px;
  background:rgba(46,124,255,.16);border:1px solid rgba(46,124,255,.34);overflow:hidden;
}
.col-head .cn{font-size:10px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
.col-head .ck{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:9px;color:var(--signal-soft);transition:color .3s}
.clip{height:16px;margin-bottom:5px;border-radius:3px;background:rgba(46,124,255,.3);border:1px solid rgba(46,124,255,.46)}
.clip.k0{background:rgba(237,241,247,.14);border-color:rgba(237,241,247,.26)}
/* The click lane is the one neutral clip, so it needs the opposite ink in light mode. */
[data-theme="light"] .clip.k0{background:rgba(8,18,32,.11);border-color:rgba(8,18,32,.2)}
.clip.k1{background:rgba(93,217,124,.2);border-color:rgba(93,217,124,.4)}
.clip.k5{background:rgba(150,120,255,.22);border-color:rgba(150,120,255,.42)}
.clip.none{background:transparent;border:1px dashed var(--line);opacity:.55}
.sweep{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(46,124,255,.32) 50%,transparent 58%)}
.sweep.go{animation:sweep 1.1s ease-out}
@keyframes sweep{0%{opacity:1;transform:translateX(-102%)}100%{opacity:0;transform:translateX(102%)}}
.demo-cap{
  margin:30px auto 0;text-align:center;max-width:60ch;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.08em;color:var(--cream-dim);min-height:3em;transition:opacity .3s;
}
.demo-cap.fade{opacity:0}

/* ---- feature grid: 8 items read best as 4 x 2 ---- */
.feat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.feat{padding:28px 24px 30px}
.feat h3{margin-top:20px;font-size:17.5px;line-height:1.3}
.feat p{font-size:14.5px;line-height:1.6}

/* ---- who it's for ---- */
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:960px;margin:0 auto;align-items:stretch}
.path-card{
  border:1px solid var(--line);border-radius:20px;padding:40px 34px 38px;background:var(--ink-2);
  position:relative;display:flex;flex-direction:column;
}
/* Neither path outranks the other: same card, same button, one badge. */
.path-card:hover{border-color:var(--line-strong)}
.path-card .badge{
  position:absolute;top:-13px;left:34px;background:var(--signal);color:#fff;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;
}
.path-card h3{font-size:26px;font-weight:560;letter-spacing:-.02em}
.path-card p{margin-top:16px;color:var(--cream-dim);font-size:16.5px;line-height:1.68}
.path-foot{margin-top:auto;padding-top:30px}
.path-foot .btn{width:100%;text-align:center}
.path-note{margin-top:16px;font-size:14px;color:var(--cream-faint);line-height:1.55}
.path-note a{color:var(--signal-soft);text-decoration:none}
.path-note a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .srow,.song-col,.demo-cursor,.demo-arrow,.demo-tag{transition:none}
  .sweep.go{animation:none}
}
@media (max-width:1100px){
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-stage{grid-template-columns:1fr;gap:0}
  .demo-arrow{transform:rotate(90deg);padding:22px 0}
  .demo-arrow.go{transform:rotate(90deg) scale(1.22)}
}
@media (max-width:760px){
  .feat-grid,.path-grid{grid-template-columns:1fr}
  .flow-rail{grid-template-columns:repeat(4,1fr)}
  .flow-ends{font-size:10px;letter-spacing:.1em}
  .proof-stats{gap:32px}
  .demo-lanes{width:42px}
  .demo-body{overflow-x:auto}
  .demo-tracks{min-width:330px}
  .path-card{padding:36px 26px 32px}
}

/* ================= /onboarding ================= */
.ob-hero{padding:160px 0 90px;position:relative;overflow:hidden}
.ob-hero::before{
  content:"";position:absolute;top:-40%;right:-10%;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,rgba(46,124,255,.14) 0%,transparent 62%);pointer-events:none;
}
.ob-hero h1{font-size:clamp(40px,6.4vw,76px);max-width:16ch}
.ob-hero .lede{margin-top:28px;font-size:clamp(17px,1.7vw,21px);color:var(--cream-dim);max-width:54ch;line-height:1.65}
.ob-meta{
  margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-faint);
}
.ob-meta span{border:1px solid var(--line);border-radius:100px;padding:7px 15px}
.ob-meta span b{color:var(--cream);font-weight:500}

/* what we'll cover */
.ob-covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 30px;margin-top:8px}
.ob-covers li{list-style:none;position:relative;padding-left:32px;color:var(--cream-dim);font-size:16.5px;line-height:1.6}
.ob-covers li::before{
  content:"";position:absolute;left:0;top:7px;width:15px;height:8px;
  border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg);
}
.ob-covers li b{color:var(--cream);font-weight:560}

/* the offer card */
.ob-offer{
  max-width:600px;margin:0 auto;border:1px solid rgba(46,124,255,.45);border-radius:20px;
  padding:44px 38px;background:var(--ink-2);text-align:center;box-shadow:0 24px 70px rgba(46,124,255,.13);
}
.ob-offer .tier{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-faint)}
.ob-offer .amount{font-size:56px;font-weight:560;letter-spacing:-.03em;margin-top:14px;line-height:1}
.ob-offer .amount small{font-size:17px;font-weight:400;color:var(--cream-faint);letter-spacing:0}
.ob-offer .tagline{margin-top:16px;color:var(--cream-dim);font-size:16.5px}
.ob-offer .btn{margin-top:30px;width:100%;text-align:center}
.ob-offer .fine{margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint)}

/* questionnaire */
.ob-form{max-width:760px;margin:0 auto}
.ob-form[hidden]{display:none}
.ob-steps{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-faint);text-align:center;margin-bottom:14px;
}
.q{border:1px solid var(--line);border-radius:16px;padding:30px 30px 32px;background:var(--ink-2);margin-bottom:18px}
.q > legend{padding:0;font-size:19px;font-weight:560;letter-spacing:-.01em;color:var(--cream)}
.q .hint{margin-top:12px;color:var(--cream-dim);font-size:15px;line-height:1.66}
.q .opts{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border:1px solid var(--line);
  border-radius:11px;cursor:pointer;background:var(--ink);font-size:15.5px;color:var(--cream-dim);
  transition:border-color .2s,background-color .2s,color .2s;
}
.opt:hover{border-color:var(--line-strong);color:var(--cream)}
.opt input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;width:19px;height:19px;margin-top:1px;
  border:1.5px solid var(--line-strong);background:transparent;cursor:pointer;transition:border-color .2s,background-color .2s;
}
.opt input[type=radio]{border-radius:50%}
.opt input[type=checkbox]{border-radius:5px}
.opt input:checked{border-color:var(--signal);background:var(--signal)}
.opt input[type=radio]:checked{box-shadow:inset 0 0 0 3.5px var(--ink)}
.opt input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.opt:has(input:checked){border-color:rgba(46,124,255,.5);background:rgba(46,124,255,.08);color:var(--cream)}
.opt input:focus-visible{outline:2px solid var(--signal-soft);outline-offset:2px}
.q .other{
  margin-top:10px;width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:11px;
  background:var(--ink);color:var(--cream);font-family:var(--font-display);font-size:15.5px;
}
.q .other::placeholder{color:var(--cream-faint)}
.q .other:focus{outline:none;border-color:rgba(46,124,255,.5)}
.q .other[hidden]{display:none}
.q .err{margin-top:14px;font-size:14px;color:#f0b429}
.q .err[hidden]{display:none}
.ob-submit{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px}
.ob-submit .btn{min-width:300px;text-align:center;border:0;cursor:pointer;font-family:var(--font-display)}
.ob-submit .note{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint);text-align:center}
.ob-pending{
  max-width:760px;margin:26px auto 0;border:1px dashed rgba(240,180,41,.5);border-radius:14px;
  padding:22px 26px;background:rgba(240,180,41,.07);color:var(--cream-dim);font-size:15.5px;line-height:1.65;
}
.ob-pending[hidden]{display:none}
.ob-pending b{color:#f0b429;font-weight:560;display:block;margin-bottom:6px}

@media (max-width:760px){
  .ob-hero{padding:120px 0 70px}
  .ob-covers{grid-template-columns:1fr}
  .ob-offer{padding:36px 26px}
  .q{padding:26px 22px 28px}
  .ob-submit .btn{min-width:0;width:100%}
}