/* Home page and features page. Everything that moves uses transform and opacity. */
:root{--board-h:clamp(260px,37svh,420px);--open:56px;--paper:#EDEAE2;--paper-ink:#141414}
.text-link{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
section{padding:56px 0}

/* paper bands: a light band with angled top and bottom edges */
.paper{--cut:clamp(18px,4vw,56px);background:var(--paper);color:var(--paper-ink);margin:calc(var(--cut) * -1) 0;padding:calc(var(--cut) + 52px) 0;position:relative;clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%)}
.paper a{color:var(--paper-ink);text-decoration-color:#6b6a72}
.paper .mute,.paper .fine,.paper figcaption,.paper details p{color:#4a4a52}
.paper details,.paper details:last-child{border-color:#c9c5ba}
.paper summary::after{color:var(--paper-ink)}
.paper :focus-visible{outline-color:#141414}

/* ---------- hero ---------- */
.hero{padding:10px 0 0;text-align:center;overflow:hidden;overflow:clip}
.hero h1{font:900 clamp(1.8rem,9.4vw,4.6rem)/1.08 var(--display);letter-spacing:-.025em;text-wrap:balance;max-width:16em;margin:0 auto 14px}
.hero h1 .y{color:var(--accent)}
.hero .lede{margin:0 auto 20px;max-width:30rem;font-size:1.1rem}
.hero-cta{display:flex;gap:4px 22px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0}
.fan{position:relative;display:flex;justify-content:center;align-items:flex-start;height:clamp(250px,68vw,440px);margin:22px auto 0;overflow:hidden;padding-top:22px}
.fan img,.fan .pending{width:100%;height:auto;border-radius:18px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.fan .pending{aspect-ratio:560/1218;display:grid;place-items:center;font:400 .7rem var(--mono);color:var(--mute);padding:6px}
.fan>*{flex:none;width:clamp(86px,22vw,170px);margin:0 clamp(-22px,-4vw,-34px);transform-origin:50% 100%}
.fan>:nth-child(1){transform:rotate(-8deg) translateY(30px);z-index:1}
.fan>:nth-child(2){width:clamp(94px,25vw,196px);transform:rotate(-4deg) translateY(10px);z-index:2}
.fan>:nth-child(3){width:clamp(104px,29vw,226px);transform:translateY(-12px);z-index:3}
.fan>:nth-child(4){width:clamp(94px,25vw,196px);transform:rotate(4deg) translateY(10px);z-index:2}
.fan>:nth-child(5){transform:rotate(8deg) translateY(30px);z-index:1}

/* ---------- the numbers (true facts, where other sites put reviews) ---------- */
.facts{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:1;background:var(--bg)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.facts li{display:flex;flex-direction:column}
.facts b{font:600 clamp(1.5rem,6vw,2.2rem)/1.1 var(--body);letter-spacing:-.02em}
.facts span{color:var(--mute);font-size:.95rem}

/* ---------- hear it ---------- */
.hear{padding:56px 0 64px}
.hear-grid{display:grid;gap:26px;align-items:center}
.hear h2{margin-bottom:12px}
.hear p{max-width:30rem}
.instrument{width:100%;max-width:440px;margin:0 auto}

.board{position:relative;height:var(--bh);background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.nut{position:absolute;left:0;right:0;top:var(--open);height:4px;background:#C8C8CC}
.fret{position:absolute;left:0;right:0;top:calc(var(--open) + (var(--bh) - var(--open)) * var(--f));height:1px;background:var(--line)}
.strings{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.string{position:relative;height:100%;border-radius:10px}
.string:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}
.nm{position:absolute;top:10px;left:0;right:0;text-align:center;font:700 .85rem var(--mono);color:var(--mute);transition:color .12s}
.string.on .nm{color:var(--ink)}
.slack,.vib,.taut{position:absolute;top:34px;bottom:0}
.slack,.vib{left:0;width:100%;height:calc(100% - 34px);stroke-width:var(--w);overflow:visible}
.slack{color:var(--mute);transition:opacity .35s}
.vib{color:var(--accent);opacity:0;pointer-events:none}
.taut{left:50%;width:var(--w);margin-left:calc(var(--w) / -2);background:var(--ink);border-radius:2px;opacity:0;transition:opacity .35s}
.taut::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:0;transition:opacity .6s}
.string.hit .taut::after{opacity:1;transition:none}
.board.is-taut .slack{opacity:0}
.board.is-taut .taut{opacity:1}
.dot{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .5s;pointer-events:none}
.dot.on{opacity:.55;transition:none}
@media(prefers-reduced-motion:no-preference){
  .board:not(.is-taut) .slack{animation:sway 3.4s ease-in-out infinite alternate}
  .string:nth-child(2) .slack{animation-delay:-.6s!important}
  .string:nth-child(3) .slack{animation-delay:-1.3s!important}
  .string:nth-child(4) .slack{animation-delay:-1.9s!important}
  .string:nth-child(5) .slack{animation-delay:-2.4s!important}
  .string:nth-child(6) .slack{animation-delay:-2.9s!important}
}
@keyframes sway{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@media(hover:hover) and (pointer:fine){.board{cursor:url(/img/pick-cursor.svg) 6 4,pointer}}

.readout{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;min-height:44px;align-items:center}
.note{font:600 1.7rem/1 var(--body);min-width:3ch}
.note:empty{display:none}
.meta{color:var(--mute);font-size:.95rem;line-height:1.3}
.deck{margin-top:12px;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.ctrls{display:flex;gap:8px}
.btn.small{min-height:44px;padding:0 18px;font-size:.95rem}
#mute b{font:700 .8rem var(--mono);text-transform:uppercase;margin-left:6px;color:var(--ink)}
#mute[aria-pressed="false"] b{color:var(--mute)}
.fine{font-size:.88rem;color:var(--mute);margin:0}


/* ---------- how it works (on a paper band) ---------- */
.how h2{margin-bottom:26px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.steps li{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:18px;align-items:center;counter-increment:s}
.steps img,.steps .pending{width:100%;height:auto;border-radius:20px;box-shadow:0 0 0 1px rgba(20,20,20,.28);background:#1a1a1e}
.steps .pending{aspect-ratio:560/1218;display:grid;place-items:center;font:400 .7rem var(--mono);color:#9B9AA2;padding:8px;text-align:center}
.steps h3::before{content:counter(s) ". ";font-family:var(--mono);font-size:.85em;font-weight:400}
.steps p{margin:6px 0 0;color:#3a3a42}

/* ---------- why Noodle ---------- */
.why{padding:80px 0 56px}
.why-grid{display:grid;gap:30px}
.why-shot{max-width:250px;margin:0 auto}
.why-shot img,.why-shot .pending{width:100%;height:auto;border-radius:22px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.why-shot .pending{aspect-ratio:560/1218;display:grid;place-items:center;font:400 .75rem var(--mono);color:var(--mute)}
.why h2{margin-bottom:14px}
.reasons{list-style:none;margin:0;padding:0;counter-reset:r;border-top:1px solid var(--line)}
.reasons li{counter-increment:r;padding:14px 0 14px 2.4rem;border-bottom:1px solid var(--line);position:relative;max-width:36rem}
.reasons li::before{content:counter(r);position:absolute;left:0;top:14px;font:700 .95rem var(--mono);color:var(--mute)}
.reasons b{font-weight:600}
.more{margin:18px 0 0}

/* ---------- the plan calendar ---------- */
@property --n{syntax:"<integer>";inherits:true;initial-value:18}
.story{padding:36px 0 20px}
.story-pin .wrap{display:grid;gap:14px}
.story h2{margin:0}
.story p{margin:0;max-width:34rem}
.count{display:flex;align-items:baseline;gap:12px;margin:2px 0 2px}
.num{font:900 clamp(2.6rem,13vw,4.6rem)/1 var(--display);font-variant-numeric:tabular-nums}
.count .lbl{color:var(--mute)}
.cal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.8rem repeat(5,1fr);gap:5px;max-width:30rem}
.wk{display:flex;align-items:center;font:400 .72rem var(--mono);color:var(--mute)}
.d{position:relative;aspect-ratio:1/.72;border-radius:6px;background:var(--surface);display:grid;place-items:center;font:700 .8rem var(--mono);color:var(--mute)}
.d::after{content:attr(data-n);content:attr(data-n) / "";position:relative;z-index:0}
.d::before,.exam::before{content:attr(data-n);content:attr(data-n) / "";position:absolute;inset:0;border-radius:inherit;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;z-index:1}
.d.cp{box-shadow:inset 0 0 0 1px var(--mute)}
.d.free{background:transparent;border:1px dashed var(--line)}
.d.free::before,.d.free::after{content:none}
.exam{position:relative;grid-column:2/-1;min-height:40px;border-radius:6px;background:var(--surface);display:grid;place-items:center;font:700 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.exam::before{content:"Exam";content:"Exam" / "";font:700 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.exam span{position:relative}
.story .fine{max-width:30rem}

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .story{padding:0;height:300svh;view-timeline:--story block}
    .story-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:16px 0}
    .d::before,.exam::before{opacity:0;transform:scale(.7);animation:lit linear both;animation-timeline:--story;animation-range:cover calc(26% + var(--i) * 2.2%) cover calc(30% + var(--i) * 2.2%)}
    .num{animation:count linear both;animation-timeline:--story;animation-range:cover 28% cover 70%}
    .n-static{display:none}
    .num::after{counter-reset:n var(--n);content:counter(n);content:counter(n) / ""}
  }
}
@keyframes lit{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes count{from{--n:0}to{--n:18}}
.story.fb{padding:0;height:300svh}
.story.fb .story-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:16px 0}
.story.fb .d::before,.story.fb .exam::before{opacity:0;transform:scale(.7);transition:opacity .18s,transform .18s}
.story.fb .on::before{opacity:1;transform:none}

/* ---------- session length ---------- */
.session{padding:52px 0 24px}
.session-grid{display:grid;gap:20px;max-width:44rem}
.session h2{margin:0}
.picker{border:0;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;position:relative}
.picker legend{padding:0;margin:0 0 10px;float:left;width:100%;color:var(--mute);font-size:.95rem}
.picker input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.picker label{min-height:48px;min-width:84px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--line);font-weight:600;cursor:pointer;transition:background-color .12s}
.picker label b{font:600 1.35rem var(--body)}
.picker input:checked+label{background:var(--ink);color:var(--bg);box-shadow:none}
.picker input:focus-visible+label{outline:3px solid var(--accent);outline-offset:3px}
.split{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.split li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.split b{font-weight:600}
.split i{font-style:normal;font-family:var(--mono);font-size:.85rem;color:var(--mute)}
.split span{grid-column:1/-1;height:6px;border-radius:3px;background:var(--ink);width:var(--w);opacity:.85}
.len-10,.len-15{display:none}
:is(.session,.feat):has(#len10:checked) .len-5,:is(.session,.feat):has(#len15:checked) .len-5{display:none}
:is(.session,.feat):has(#len10:checked) .len-10{display:grid}
:is(.session,.feat):has(#len15:checked) .len-15{display:grid}
.session .after{margin:0;color:var(--mute);max-width:32rem}

/* ---------- sticky thumb CTA (only when there is a real link) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:10px max(16px,var(--sr)) calc(10px + var(--sb)) max(16px,var(--sl));background:var(--bg);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease-out}
.dock.on{transform:none}
.dock .btn{width:100%;max-width:420px}


/* ---------- features page ---------- */
.feat-head{padding:36px 0 16px}
.feat-head h1{margin-bottom:10px}
.feat{padding:60px 0}
.feat-grid{display:grid;gap:26px;align-items:center}
.feat h2{margin-bottom:12px}
.feat p{max-width:33rem}
.feat-shot{max-width:260px;margin:0 auto}
.feat-shot img,.feat-shot .pending{width:100%;height:auto;border-radius:22px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.paper .feat-shot img,.paper .feat-shot .pending{box-shadow:0 0 0 1px rgba(20,20,20,.28)}
.feat-shot .pending{aspect-ratio:560/1218;display:grid;place-items:center;font:400 .75rem var(--mono);color:var(--mute)}
.feat .picker legend{color:inherit;opacity:.8}
.paper .picker label{box-shadow:inset 0 0 0 2px #bdb9ad}
.paper .picker input:checked+label{background:#141414;color:var(--paper)}
.paper .split span{background:#141414}
.paper .split i{color:#4a4a52}
.feat .picker{margin:16px 0 14px}
.feat-left{padding:56px 0 20px}
.feat-left h2{margin-bottom:10px}
.plain{margin:0;padding-left:1.2rem;max-width:36rem}
.plain li{margin-bottom:.5em}

/* ---------- end ---------- */
.get{padding:56px 0 24px}
.get-grid{display:grid;gap:18px}
.get h2{margin-bottom:10px}
.get p{margin:0;max-width:30rem}
.qr-box{display:none}
.maker{padding:12px 0 8px}
.maker p{margin:0;color:var(--mute);max-width:34rem}
.faq-sec{padding-bottom:calc(var(--cut) + 56px)}
.faq-sec h2{margin-bottom:16px}
.faq{max-width:44rem}

/* ---------- reveal on scroll (native only; content is visible without it) ---------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .reasons li,.steps li,.feat-text{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- wide ---------- */
@media(min-width:900px){
  :root{--board-h:clamp(340px,56svh,540px)}
  .hero{padding-top:28px}
  .hero h1{font-size:clamp(2.6rem,4.6vw,4rem)}
  .hero .lede{font-size:1.18rem}
  .fan{margin-top:34px}
  .facts{padding:26px 0}
  .facts ul{grid-template-columns:repeat(4,auto);justify-content:space-between}
  .hear{padding:80px 0 88px}
  .hear-grid{grid-template-columns:1fr 1fr;gap:72px}
  .instrument{margin:0;justify-self:end}
  .steps{grid-template-columns:repeat(3,1fr);gap:36px}
  .steps li{grid-template-columns:1fr;gap:16px;align-items:start}
  .steps img,.steps .pending{max-width:260px}
  .why{padding:104px 0 72px}
  .why-grid{grid-template-columns:auto 1fr;gap:72px;align-items:center}
  .why-shot{margin:0;width:280px}
  .story-pin .wrap{grid-template-columns:1fr 1fr;column-gap:72px;align-items:center}
  .story-pin .wrap>*{grid-column:1}
  .story-pin .wrap>.cal-wrap{grid-column:2;grid-row:1/7}
  .feat{padding:84px 0}
  .feat-grid{grid-template-columns:1fr 280px;gap:80px}
  .feat:nth-of-type(even) .feat-grid{grid-template-columns:280px 1fr}
  .feat:nth-of-type(even) .feat-shot{order:-1}
  .feat-shot{margin:0;width:280px}
  .get{padding:80px 0 32px}
  .get-grid{grid-template-columns:1fr auto;column-gap:80px;align-items:center}
  .qr-box{display:block;text-align:center;max-width:180px}
  .qr-box svg{width:160px;height:160px;border-radius:8px;margin:0 auto 8px}
  .dock{display:none}
}