/* drop.html: one free drop in full. Every class here is drp-*. Colors come ONLY from hub.css tokens (--bg, --surface, --surface-2,
   --line, --line-2, --text, --mute, --ember, --ember-ink, --ice); tints are color-mix() of those, so a theme swap in hub.css
   re-skins this page with no edits here. Reused from hub.css as is: wrap, slate, btn, chip, textlink, frame, course-by, drop cards,
   band, price-meta, footer, stickybar. */

.drp-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drp-note{font-size:13.5px;color:var(--mute);flex-basis:100%}

/* ---------- hero ---------- */
.drp-hero{position:relative;isolation:isolate;padding-block:clamp(40px,6vw,84px) clamp(32px,4vw,52px)}
.drp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 80% at 85% 10%,color-mix(in srgb,var(--ember) 12%,transparent),transparent 65%)}
.drp-hero-in{display:grid;gap:18px}
.drp-hero h1{font-size:clamp(44px,7vw,98px);line-height:.95;max-width:15ch}
.drp-hero-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px 56px;align-items:end;margin-top:10px}
.drp-hero-copy{display:grid;gap:18px;min-width:0}
.drp-dek{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:color-mix(in srgb,var(--text) 88%,var(--bg));max-width:54ch}
.drp-dek-quote{margin:0;padding-left:18px;border-left:2px solid var(--ember)}
.drp-dek-quote p{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--text)}
.drp-dek-quote footer{margin-top:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.drp-dek-quote footer::before{content:"- "}
.drp-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.drp-hero-ctas{display:flex;flex-wrap:wrap;gap:10px;align-content:end}
.drp-hero-ctas .btn{flex:1 1 auto}

/* ---------- reader: sticky film on the left, the drop on the right ---------- */
.drp-reader{border-top:1px solid var(--line);padding-block:clamp(28px,4vw,64px) clamp(56px,7vw,96px)}
.drp-reader-in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.drp-aside{min-width:0}
.drp-aside-in{--drp-reserve:130px;position:sticky;top:84px;display:grid;gap:16px;width:min(100%,calc((100svh - var(--drp-reserve)) * .5625))}
.drp-reader-beats .drp-aside-in{--drp-reserve:300px}
.drp-reader-score .drp-aside-in{--drp-reserve:330px}
.drp-aside .frame{width:100%}
.drp-frame-still .frame-pic img{width:100%;height:100%;object-fit:cover}
.drp-body{min-width:0;display:grid;gap:clamp(64px,8vw,104px)}

.drp-block{scroll-margin-top:84px;min-width:0}
.drp-block-head{display:grid;gap:12px;max-width:640px;margin-bottom:28px}
.drp-block-head h2{font-size:clamp(34px,4.4vw,54px);line-height:1}
.drp-block-intro{color:var(--mute);font-size:16.5px}

/* checklist bullets (theme-agnostic: drawn with borders, no glyph fonts) */
.drp-checks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.drp-checks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.45}
.drp-checks li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--ember) 60%,transparent);background:color-mix(in srgb,var(--ember) 12%,transparent)}
.drp-checks li::after{content:"";position:absolute;left:6px;top:calc(.2em + 3px);width:4px;height:8px;border-right:1.6px solid var(--ember);border-bottom:1.6px solid var(--ember);transform:rotate(45deg)}
.drp-checks-lg li{font-size:16.5px;padding-block:4px}

/* ---------- the lesson: ten tells ---------- */
.drp-fakes-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.drp-fake{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:8px 20px;align-items:start;padding:22px 0;
  border-bottom:1px solid var(--line);scroll-margin-top:90px;transition:background .2s,box-shadow .2s}
.drp-fake-n{font-family:var(--display);font-size:46px;line-height:.85;color:var(--mute);transition:color .2s}
.drp-fake-txt h3{font-size:clamp(25px,2.4vw,31px);line-height:1.05;margin-bottom:8px}
.drp-fake-txt p{font-size:16px;color:color-mix(in srgb,var(--text) 86%,var(--bg))}
.drp-fake-lab{display:inline-block;margin-right:10px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);vertical-align:2px}
.drp-fake.is-fixed .drp-fake-n{color:var(--ember)}
.drp-fake:target{--drp-hi:color-mix(in srgb,var(--ember) 8%,transparent);background:var(--drp-hi);box-shadow:-12px 0 0 var(--drp-hi),12px 0 0 var(--drp-hi)}
.drp-tick{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid var(--line-2);
  background:transparent;color:var(--mute);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.drp-tick:hover{border-color:var(--mute);color:var(--text)}
.drp-tick-box{position:relative;width:16px;height:16px;border-radius:5px;border:1.5px solid currentColor;flex:none}
.drp-tick[aria-pressed=true]{border-color:var(--ember);color:var(--ember);background:color-mix(in srgb,var(--ember) 10%,transparent)}
.drp-tick[aria-pressed=true] .drp-tick-box{background:var(--ember);border-color:var(--ember)}
.drp-tick[aria-pressed=true] .drp-tick-box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border-right:2px solid var(--ember-ink);border-bottom:2px solid var(--ember-ink);transform:rotate(45deg)}

.drp-score{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.drp-score-end{margin-top:28px;max-width:520px}
.drp-score-num{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:46px;line-height:1}
.drp-score-num b{font-weight:400;color:var(--ember)}
.drp-score-num span{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.drp-score-bar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.drp-score-bar i{height:8px;border-radius:3px;background:var(--line-2);transition:background .2s}
.drp-score-bar i.on{background:var(--ember)}
.drp-score-msg{font-size:14.5px}
.drp-score.is-done{border-color:color-mix(in srgb,var(--ember) 60%,transparent)}
.drp-score-reset{justify-self:start;padding:0;border:0;background:none;color:var(--mute);font:13px var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.drp-score-reset:hover{color:var(--text)}

/* ---------- the beat sheet: a timeline under the clip, synced to it ---------- */
.drp-track{display:grid;gap:8px}
.drp-track-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.drp-track-now{font:500 11px/1.2 var(--mono);letter-spacing:.06em;color:var(--text);text-align:right}
.drp-track-now b{font-weight:500;color:var(--ember);margin-right:4px}
.drp-track-bar{position:relative;display:flex;gap:3px;height:36px}
.drp-seg{flex-basis:0;min-width:0;padding:0;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--mute);
  font:500 10px/1 var(--mono);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.drp-seg:hover{border-color:var(--mute)}
.drp-seg.past{background:color-mix(in srgb,var(--ember) 14%,var(--surface))}
.drp-seg.on{background:color-mix(in srgb,var(--ember) 30%,var(--surface));border-color:var(--ember);color:var(--text)}
.drp-playhead{position:absolute;inset:-5px 0;pointer-events:none;will-change:transform}
.drp-playhead::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--ember)}
.drp-playhead::after{content:"";position:absolute;left:-5px;top:-3px;width:10px;height:6px;border-radius:2px;background:var(--ember)}
.drp-track-ruler{position:relative;height:14px;font:500 9.5px/1 var(--mono);color:var(--mute)}
.drp-track-ruler span{position:absolute;top:0;transform:translateX(-50%)}
.drp-track-ruler span:first-child{transform:none}
.drp-track-ruler span:last-child{transform:translateX(-100%)}
.drp-track-note{font-size:12.5px;line-height:1.45;color:var(--mute)}

.drp-beats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.drp-beat{width:100%;display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 16px;padding:14px 16px;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.drp-beat:hover{border-color:var(--line-2)}
.drp-beat-tc{grid-row:span 2;padding-top:7px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--mute)}
.drp-beat-name{font-family:var(--display);font-size:25px;line-height:1.05}
.drp-beat-what{font-size:15px;color:var(--mute)}
.drp-beat.on{border-color:var(--ember);background:color-mix(in srgb,var(--ember) 8%,var(--surface))}
.drp-beat.on .drp-beat-tc{color:var(--ember)}
.drp-beats-note{margin-top:12px;font-size:13px;color:var(--mute)}

/* ---------- the pattern: eight parts ---------- */
.drp-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.drp-part{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.drp-part-n{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid color-mix(in srgb,var(--ember) 50%,transparent);font:500 12px var(--mono);color:var(--ember)}
.drp-part-txt h3{font-size:25px;line-height:1.05;margin-bottom:6px}
.drp-part-txt p{font-size:15px;color:var(--mute)}
.drp-part-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ice);text-decoration:none}
.drp-part-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- the unlock: a script page whose wording stays on the creator's page ---------- */
.drp-unlock{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,44px);align-items:center;
  padding:clamp(18px,3vw,32px);border:1px solid var(--line-2);border-radius:18px;background:var(--surface)}
.drp-unlock-txt{display:grid;gap:14px;min-width:0}
.drp-unlock-txt h2{font-size:clamp(32px,3.8vw,46px);line-height:1}
.drp-gate{margin-top:6px;min-width:0}
.drp-unlock-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px}
.drp-script{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-family:var(--mono)}
.drp-script-top{display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px dashed var(--line-2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.drp-script-line{display:grid;grid-template-columns:20px minmax(0,1fr);gap:5px 10px;align-items:center}
.drp-script-n{font-size:10.5px;color:var(--ember)}
.drp-script-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.drp-script-bar{grid-column:2;height:6px;width:var(--w,70%);border-radius:3px;background:var(--line-2)}
.drp-script-bar-2{opacity:.55}
.drp-script-lock{padding-top:10px;border-top:1px dashed var(--line-2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}

/* ---------- what it makes: two terminals ---------- */
.drp-makes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.drp-make{display:grid;gap:14px;align-content:start;min-width:0}
.drp-make-label{font-size:32px;line-height:1;margin-top:6px}
.drp-term{overflow:hidden;border:1px solid var(--line-2);border-radius:14px;background:var(--bg);font-family:var(--mono)}
.drp-term-top{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.drp-term-top i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.drp-term-top span{margin-left:6px}
.drp-term-cmd{padding:16px 14px 8px;font-size:13px;line-height:1.45;color:var(--text)}
.drp-term-cmd b{font-weight:500;color:var(--ember);margin-right:4px}
.drp-term-cmd::after{content:"";display:inline-block;width:7px;height:14px;margin-left:4px;vertical-align:-2px;background:var(--ember);animation:drp-caret 1.1s steps(1) infinite}
@keyframes drp-caret{50%{opacity:0}}
.drp-term-steps{list-style:none;margin:0;padding:6px 14px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.drp-term-steps b{font-weight:500;color:var(--ice);margin-right:9px}

/* ---------- the folder ---------- */
.drp-tree{padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);margin-bottom:14px}
.drp-tree-root{font:500 13px var(--mono);color:var(--ember);margin-bottom:6px}
.drp-tree ul{list-style:none;margin:0;padding:0}
.drp-tree-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.drp-tree-row:first-child{border-top:0}
.drp-tree-name{font:500 13px/1.5 var(--mono);color:var(--text);white-space:nowrap}
.drp-tree-name span{color:var(--mute)}
.drp-tree-note{font-size:15px;color:var(--mute)}

/* ---------- steps ---------- */
.drp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.drp-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:15.5px;overflow-wrap:anywhere}
.drp-steps-n{font-family:var(--display);font-size:36px;line-height:.9;color:var(--ember)}

/* ---------- credits ---------- */
.drp-credits{display:grid;gap:18px;padding-top:28px;border-top:1px solid var(--line)}
.drp-credits-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 28px;margin:0}
.drp-credits-list dt{font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.drp-credits-list dd{margin:6px 0 0;font-family:var(--display);font-size:22px;line-height:1.15;overflow-wrap:anywhere}
.drp-credits-list dd a{text-decoration:none}
.drp-credits-list dd a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ember)}
.drp-credits-line{font-size:14.5px;color:var(--mute);max-width:60ch}
.drp-credits-who{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.drp-credits-facts{display:flex;flex-wrap:wrap;gap:6px}
.drp-credits-links{display:flex;flex-wrap:wrap;gap:10px 20px}

/* ---------- related course plug ---------- */
.drp-plug-band{padding-block:clamp(48px,6vw,92px);border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,var(--bg))}
.drp-plug{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,72px);align-items:center}
.drp-plug-pic{display:block;width:100%;max-width:420px;aspect-ratio:4/5;overflow:hidden;border-radius:16px;border:1px solid var(--line-2);background:var(--surface)}
.drp-plug-pic-wide{aspect-ratio:16/10;max-width:none}
.drp-plug-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.drp-plug-body{display:grid;gap:14px;min-width:0;align-content:start}
.drp-plug-body h2{font-size:clamp(32px,4.4vw,54px);line-height:1}
.drp-plug-course{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.drp-plug-course h3{font-family:var(--body);font-weight:700;font-size:18px;letter-spacing:0}
.drp-plug-outcome{font-size:17px;color:color-mix(in srgb,var(--text) 88%,var(--bg));max-width:46ch}
.drp-plug-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}

/* the email capture mounts here; the section takes no room until it does */
.drp-capture #ss-capture-slot:not(:empty){margin-block:clamp(40px,6vw,72px)}

/* ---------- phones and tablets ---------- */
@media (max-width:980px){
  .drp-hero-row{grid-template-columns:1fr;align-items:start}
  .drp-hero-ctas{max-width:560px}
}
@media (max-width:900px){
  .drp-reader-in{grid-template-columns:1fr;gap:36px}
  .drp-aside-in{position:static;width:min(260px,72vw);margin-inline:auto}
  .drp-score-side{display:none}
  .drp-reader-score .drp-aside{order:2}
  .drp-reader-beats .drp-aside-in{width:min(300px,100%)}
  .drp-reader-beats .drp-aside .frame{width:min(240px,72vw);justify-self:center}
  .drp-unlock,.drp-plug{grid-template-columns:1fr}
  .drp-plug-pic{max-width:none;aspect-ratio:16/9}
}
@media (max-width:700px){
  .drp-hero h1{font-size:clamp(40px,11.5vw,62px)}
  .drp-hero-ctas .btn{flex:1 1 100%}
  .drp-fake{grid-template-columns:40px minmax(0,1fr);gap:10px 14px;padding-block:20px}
  .drp-fake-n{font-size:34px}
  .drp-tick{grid-column:2;justify-self:start}
  .drp-parts,.drp-makes,.drp-steps{grid-template-columns:1fr}
  .drp-beat{grid-template-columns:1fr;gap:4px}
  .drp-beat-tc{grid-row:auto;padding-top:0}
  .drp-tree-row{grid-template-columns:1fr;gap:4px}
  .drp-plug-buy .btn,.drp-unlock-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .drp-term-cmd::after{animation:none}
  .drp-fake,.drp-fake-n,.drp-tick,.drp-seg,.drp-beat,.drp-score-bar i{transition:none}
}

/* ---------- mobile pass 10/13: first screen = title, one line, the primary button; long blocks fold ---------- */
.drp-hero{padding-block:clamp(20px,5vw,72px) clamp(20px,3vw,40px)}
.drp-hero-in{gap:14px}
.drp-hero .drp-dek{font-size:clamp(17px,1.6vw,20px);max-width:44ch}
.drp-hero-ctas{max-width:420px}
.drp-note,.drp-track-note,.drp-beats-note,.drp-score-msg,.drp-beat-what,.drp-part-txt p,.drp-tree-note,.drp-steps li,.drp-checks li,.drp-part-link{font-size:16px}
.drp-part-link{display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
.drp-tick{min-height:44px}
.drp-track-bar{height:44px}
.drp-score-reset{min-height:44px}
.drp-fold{border:1.5px solid var(--line-2);border-radius:var(--sk-rough,14px);background:var(--surface)}
.drp-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 16px;
  font-weight:600;font-size:16px;color:var(--ember)}
.drp-fold>summary::-webkit-details-marker{display:none}
.drp-fold-tog{display:inline-block;transition:transform .15s;font-size:14px}
.drp-fold[open]>summary .drp-fold-tog{transform:rotate(90deg)}
.drp-fold-in{padding:4px 16px 18px;display:grid;gap:16px}
.drp-block-head{margin-bottom:16px}
.drp-body{gap:clamp(40px,6vw,88px)}
.drp-plug{grid-template-columns:minmax(0,720px)}
.drp-plug-body{gap:12px}
.drp-plug-body h2{font-size:clamp(30px,4vw,48px)}
.drp-plug-fine{font-size:16px;color:var(--mute)}
.drp-sticky{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 8px 8px 14px;border:1.5px solid var(--line-2);border-radius:16px;background:var(--surface)}
.drp-sticky-meta{display:grid;min-width:0}
.drp-sticky-meta b{font-weight:600;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drp-sticky-meta small{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.stickybar .drp-sticky .btn{min-height:46px;padding:10px 14px;gap:10px;font-size:14.5px}
@media (max-width:900px){
  .drp-reader{padding-block:20px 48px}
  .drp-reader-in{gap:28px}
  .drp-unlock .drp-script{display:none}
}
@media (max-width:370px){.drp-sticky{grid-template-columns:1fr}.drp-sticky-meta{display:none}}
.drp-term-cmd{font-size:16px}
@media (max-width:900px){.drp-aside .frame-cap{display:none}}