/* Nameer v3: the stage, the count, the floor, with a Stripe-style polish pass. Palette chosen by Nameer. */
@property --spot { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root{
  /* Nameer's palette */
  --plum:#2A1B3D; --night:#120E18; --ink:#1A1420; --cream:#FBF7F0; --mist:#F8F6FC;
  --lilac-50:#ECE6FA; --lilac-100:#D9CCF5; --violet:#8B68EE; --violet-deep:#5B3FC4;
  --muted:#4A4252; --line:#E1D9F1;
  /* tints derived from it */
  --plum-2:#352449; --plum-dim:#1E1430;
  --on-dark:#FBF7F0; --on-dark-2:#CFC4E8; --on-dark-3:#A99BC9; --line-dark:rgba(217,204,245,.18);

  --display:'Fraunces', Georgia, serif;
  --text:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale, ratio ~1.333 */
  --t-sm:.875rem; --t-base:1rem; --t-lg:1.1875rem; --t-xl:1.5rem; --t-2xl:2rem;
  --t-3xl:clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
  --t-statement:clamp(1.6rem, 1.05rem + 2.2vw, 2.75rem);

  --gutter:clamp(1rem, .5rem + 2.6vw, 3rem);
  --max:82.5rem;
  --space-section:clamp(4.5rem, 2.5rem + 6vw, 8.5rem);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  /* one beat at 128 bpm, the site's tempo */
  --beat:469ms; --half:234ms;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;font-size:clamp(100%, .46875rem + .625vw, 137.5%)}
body{margin:0;background:var(--mist);color:var(--ink);font:400 var(--t-base)/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,figure,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--violet);color:var(--cream)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
html{scrollbar-color:var(--violet) var(--lilac-50)}
input,textarea{caret-color:var(--violet)}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--cream);color:var(--plum);padding:.75rem 1rem;border-radius:999px;font-weight:600;transition:top .2s}
.skip:focus{top:1rem}
.ico{width:1.15em;height:1.15em;flex:none}

/* ---------- Type roles ---------- */
.h-xl{font:300 var(--t-3xl)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.statement{font:300 var(--t-statement)/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance;color:var(--plum)}
p{text-wrap:pretty}
/* two voices in one heading: the claim, then the quieter detail */
.two-tone{color:var(--plum)}
.two-tone span{color:#74688A}
[data-tone="dark"] .two-tone{color:var(--cream)}
[data-tone="dark"] .two-tone span{color:var(--on-dark-3)}

/* ---------- Buttons ---------- */
.btn{--h:3rem;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:var(--h);padding:0 1.5rem;border-radius:999px;border:0;font:600 var(--t-base)/1 var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s, color .2s, box-shadow .2s, transform .15s var(--ease-out)}
.btn:active{transform:scale(.97)}
/* hover arrow: the chevron steps forward and grows a stem */
.arr{width:.62em;height:.62em;flex:none;margin:0 -.2em 0 -.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.arr-line{opacity:0;transition:opacity .2s var(--ease-out)}
.arr-tip{transition:transform .2s var(--ease-out)}
.btn:hover .arr-line,.btn:focus-visible .arr-line{opacity:1}
.btn:hover .arr-tip,.btn:focus-visible .arr-tip{transform:translateX(3px)}
.btn-sm{--h:2.5rem;padding:0 1.15rem;font-size:var(--t-sm)}
.btn-lg{--h:3.5rem;padding:0 1.75rem}
.btn-block{width:100%}
.btn-solid{background:var(--violet-deep);color:var(--cream)}
.btn-solid:hover{background:#4D34AC}
.btn-light{background:var(--cream);color:var(--plum)}
.btn-light:hover{background:var(--lilac-100)}
.btn-ghost-light{background:rgba(18,14,24,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(251,247,240,.32)}
.btn-ghost-light:hover{box-shadow:inset 0 0 0 1px rgba(251,247,240,.7);background:rgba(42,27,61,.7)}
.round{width:2.75rem;height:2.75rem;border-radius:50%;border:0;display:inline-grid;place-items:center;cursor:pointer;background:rgba(251,247,240,.1);color:var(--cream);transition:background-color .2s, transform .15s var(--ease-out)}
.round:hover{background:rgba(251,247,240,.2)}
.round:active{transform:scale(.94)}
.text-link{font-weight:600;color:var(--violet-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-underline-offset .2s, color .2s}
.text-link:hover{text-underline-offset:.45em;color:var(--plum)}

/* ---------- Wordmark ---------- */
.wordmark{display:inline-flex;align-items:baseline;gap:.06em;font:500 1.5rem/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.beat-dot{width:.22em;height:.22em;border-radius:50%;background:var(--violet);transform-origin:50% 50%}
.is-playing-beat .beat-dot{animation:beatDot var(--beat) var(--ease-out) infinite}
@keyframes beatDot{0%{transform:scale(1.9)}35%{transform:scale(1)}}

/* ---------- Header ---------- */
/* One look everywhere: no colour or position changes while scrolling */
.bar{position:fixed;inset:0 0 auto;z-index:50;color:var(--cream);background:rgba(18,14,24,.62);-webkit-backdrop-filter:saturate(1.7) blur(22px);backdrop-filter:saturate(1.7) blur(22px);box-shadow:0 1px 0 rgba(251,247,240,.08)}
.bar-inner{max-width:var(--max);margin:0 auto;height:4.25rem;padding:0 var(--gutter);display:flex;align-items:center;gap:1.5rem}
.bar .wordmark{margin-right:auto}
.bar-nav{display:none;gap:.25rem}
.bar-nav a{position:relative;padding:.5rem .8rem;border-radius:999px;font-weight:500;font-size:var(--t-sm);text-decoration:none;opacity:.92;transition:opacity .2s, background-color .2s}
.bar-nav a:hover,.bar-nav a.is-active{opacity:1}
.bar-nav a:hover{background:rgba(251,247,240,.08)}
.bar-nav a::after{content:"";position:absolute;left:50%;bottom:.15rem;width:.3rem;height:.3rem;margin-left:-.15rem;border-radius:50%;background:var(--violet);transform:scale(0);transition:transform .3s var(--ease-out)}
.bar-nav a.is-active::after{transform:scale(1)}
.bar .btn-sm{display:none}
.menu-toggle{width:2.75rem;height:2.75rem;margin-right:-.5rem;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.menu-lines{display:grid;gap:6px;width:22px}
.menu-lines i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease-out)}
.menu-toggle[aria-expanded="true"] .menu-lines i:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu{position:absolute;left:.75rem;right:.75rem;top:calc(100% + .25rem);padding:.75rem;border-radius:1.25rem;background:var(--cream);color:var(--plum);box-shadow:0 24px 48px -20px rgba(18,14,24,.55);transform-origin:top right;animation:menuIn .4s var(--ease-out)}
.menu nav{display:grid;margin-bottom:.75rem}
.menu nav a{padding:.8rem .75rem;font:400 1.5rem/1.1 var(--display);text-decoration:none;border-bottom:1px solid var(--line)}
.menu nav a:last-child{border-bottom:0}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}

@media (min-width:640px){ .bar .btn-sm{display:inline-flex} }
@media (min-width:960px){
  .bar-nav{display:flex}
  .menu-toggle,.menu{display:none!important}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:50svh var(--gutter) 2.5rem;color:var(--on-dark);background:linear-gradient(100deg,var(--plum) 0%,#21162F 48%,var(--night) 100%);overflow:hidden}
/* a silk ribbon of colour drifting behind the stage (drawn in main.js) */
.hero-ribbon{position:absolute;z-index:-2;inset:0;width:100%;height:100%;opacity:0;transition:opacity 2.4s var(--ease-out)}
.hero-ribbon.is-on{opacity:1}
/* phones: the ribbon sweeps up from behind the buttons and behind the photo, with a gap where the tagline sits */
@media (max-width:959px){ .hero-ribbon{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.35) 57%,rgba(0,0,0,.35) 67%,transparent 70.5%,transparent 76.5%,#000 80%);mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.35) 57%,rgba(0,0,0,.35) 67%,transparent 70.5%,transparent 76.5%,#000 80%)} }
.hero-photo{position:absolute;z-index:-1;inset:0 0 auto 0;height:68svh}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 38%);mask-image:linear-gradient(to top,transparent 0,#000 38%)}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 52% 26%,transparent var(--spot),var(--plum-dim) calc(var(--spot) + 30%));--spot:140%}
.js .hero-photo::after{--spot:0%}
.js .hero-photo.is-ready::after{animation:lightsUp 2.2s var(--ease-out) both}
.static .hero-photo::after{--spot:140%}
@keyframes lightsUp{from{--spot:0%}to{--spot:140%}}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(28rem circle at var(--mx,50%) var(--my,30%),rgba(217,204,245,.16),transparent 70%);mix-blend-mode:soft-light;transition:opacity .6s}
.hero-photo.is-lit::before{opacity:1}

.hero-name{order:1;position:relative;margin:0 0 1.25rem -.04em;font:300 clamp(4.5rem, 2rem + 17vw, 18rem)/.85 var(--display);letter-spacing:-.03em;color:var(--cream);white-space:nowrap}
.name-word{display:inline-flex;align-items:baseline}
.name-dot{display:inline-block;width:.11em;height:.11em;margin-left:.05em;border-radius:50%;background:var(--violet)}
.ch{display:inline-block}
.js .ch{animation:stepIn .62s var(--ease-out) both;animation-delay:calc(.55s + var(--i) * var(--half))}
.js .name-dot{animation:dotLand .7s var(--ease-out) both;animation-delay:calc(.55s + 7 * var(--half))}
@keyframes stepIn{from{opacity:0;transform:translate3d(-.08em,.06em,0);filter:blur(.04em)}}
@keyframes dotLand{0%{opacity:0;transform:translateY(-.9em) scale(.6)}55%{opacity:1;transform:translateY(0) scale(1.35)}100%{transform:none}}

.hero-copy{order:2;position:relative;max-width:34rem}
.hero-role{font:400 clamp(1.15rem, .9rem + 1.2vw, 1.5rem)/1.2 var(--display);color:var(--cream)}
.hero-lead{margin-top:.75rem;font-size:var(--t-lg);line-height:1.55;color:var(--on-dark-2);max-width:36ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.js [data-hero-in]{animation:fadeIn .9s var(--ease-out) both;animation-delay:calc(1.9s + var(--n,0) * 90ms)}
@keyframes fadeIn{from{opacity:0;transform:translateY(.5rem)}}

.next-up{display:inline-flex;align-items:center;gap:.9rem;margin-top:2rem;padding:.6rem 1.1rem .6rem .6rem;border-radius:999px;background:rgba(251,247,240,.08);box-shadow:inset 0 0 0 1px var(--line-dark);text-decoration:none;transition:background-color .2s}
.next-up:hover{background:rgba(251,247,240,.14)}
.next-date{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--violet);color:var(--cream);line-height:1}
.next-date b{font:600 1.1rem/1 var(--display)}
.next-date span{font-size:.6875rem;font-weight:600;margin-top:-.4rem}
.next-text{display:grid;font-weight:600;font-size:var(--t-sm);line-height:1.35}
.next-text small{font-weight:400;color:var(--on-dark-2);font-size:var(--t-sm)}

@media (min-width:720px){
  .hero{padding-top:54svh}
  .hero-photo{height:80svh}
}
@media (min-width:960px){
  .hero{--frame:max(var(--gutter), calc((100vw - 100rem) / 2 + var(--gutter)));min-height:max(100svh, 40rem);padding:clamp(6.5rem, 20vh, 12rem) var(--frame) 0;justify-content:space-between}
  .hero-photo{inset:0 0 0 auto;width:56%;height:auto}
  .hero-photo img{object-position:50% 12%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to top,transparent 0,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to top,transparent 0,#000 30%);mask-composite:intersect}
  .hero-copy{order:0;width:min(34rem, 40vw);max-width:none;margin:0}
  .hero-name{order:2;margin:0;padding-bottom:.06em;font-size:clamp(7rem, .5rem + 13vw, 20rem)}
}

/* the stage recedes as you scroll away from it */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero-photo{animation:stageAway linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .hero-name{animation:nameAway linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes stageAway{to{transform:translateY(12%) scale(1.04);opacity:.35}}
@keyframes nameAway{to{transform:translateY(-18%);letter-spacing:.02em}}

/* ---------- Section rhythm ---------- */
.about,.watch,.lessons,.styles-sec,.workshops,.faq,.book{padding:var(--space-section) var(--gutter)}
.about-grid,.lesson-card,.styles-head,.style-panels,.workshops-head,.ws-list,.faq-grid,.book,.foot{max-width:var(--max);margin-left:auto;margin-right:auto}

/* sideways step entrance, used on headings and media only */
.js [data-step]{opacity:0;transform:translate3d(-.9rem,0,0)}
.js [data-step].is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out) var(--d,0ms), transform .9s var(--ease-out) var(--d,0ms)}

/* ---------- About ---------- */
.about{background:var(--mist)}
.about-grid{display:grid;gap:2.5rem}
.statement{max-width:24ch}
.about-media{width:min(100%, 24rem);justify-self:center}
.clip-cap-light{color:var(--ink)}
.clip-cap-light b{color:var(--violet-deep)}
.about-text{display:grid;gap:1.25rem;font-size:var(--t-lg);color:var(--muted);max-width:38rem}
.both{display:flex;gap:1rem;align-items:center;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink)}
.both-mark{flex:none;width:3.5rem;height:auto;fill:none;stroke-width:2;stroke-linecap:round}
.both-mark path:first-child{stroke:var(--violet)}
.both-mark path:last-child{stroke:var(--lilac-100)}
.facts{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:1.25rem 1.5rem;margin-top:.5rem;font-size:var(--t-base)}
.facts div{display:grid;align-content:start;gap:.25rem}
.facts dt{font-size:var(--t-sm);color:var(--muted)}
.facts dd{font:500 1.25rem/1.25 var(--display);color:var(--plum)}
@media (min-width:960px){
  .about-grid{grid-template-columns:7fr 5fr;grid-template-areas:"st tx";column-gap:clamp(3rem, 7vw, 8rem);align-items:end}
  .statement{grid-area:st;max-width:20ch;align-self:start}
  .about-media{grid-area:ph;align-self:start;justify-self:start;width:min(100%, 26rem)}
  .about-text{grid-area:tx;align-self:end}
}

/* ---------- My approach (value + small demo) ---------- */
.music{background:var(--lilac-50);color:var(--plum)}
.music-grid{display:grid;gap:clamp(2.5rem, 5vw, 4rem);align-items:start}
.music-copy{display:grid;gap:1.5rem;align-content:start}
.music-intro{font-size:var(--t-lg);color:var(--muted);max-width:40ch}
.values{display:grid;gap:1.5rem;margin-top:.5rem}
.values li{display:grid;grid-template-columns:3.25rem 1fr;gap:1rem;align-items:start;padding-top:1.5rem;border-top:1px solid var(--line)}
.values h3{font:400 1.375rem/1.2 var(--display);color:var(--plum)}
.values p{margin-top:.35rem;color:var(--muted);max-width:40ch}
.value-mark{width:3.25rem;height:2.25rem;fill:none;stroke:var(--violet-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.values li:last-child .value-mark path:last-child{stroke:var(--violet)}
@media (min-width:960px){
  .music-grid{grid-template-columns:5fr 7fr;column-gap:clamp(3rem, 6vw, 6rem)}
  .music .h-xl{font-size:clamp(3rem, 1rem + 3.6vw, 5.25rem)}
}

.machine{position:relative;padding:clamp(1.25rem, 3vw, 2.5rem);border-radius:1.75rem;background:var(--plum);color:var(--on-dark);box-shadow:0 40px 80px -40px rgba(42,27,61,.6), 0 18px 30px -20px rgba(42,27,61,.35)}
.machine-title{font:400 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.25 var(--display);color:var(--cream);margin-bottom:1.25rem}
.machine-top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-bottom:1.25rem}
.play{display:inline-flex;align-items:center;gap:.7rem;height:3.25rem;padding:0 1.5rem 0 1.2rem;border:0;border-radius:999px;background:var(--cream);color:var(--plum);font-weight:600;cursor:pointer;transition:background-color .2s, transform .15s var(--ease-out)}
.play:hover{background:var(--lilac-100)}
.play:active{transform:scale(.97)}
.play .ico{width:1.3rem;height:1.3rem}
.play .ico-pause,.play[aria-pressed="true"] .ico-play{display:none}
.play[aria-pressed="true"] .ico-pause{display:block}
.tempo{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--on-dark-3)}

.inst-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.35rem;padding:.35rem;border-radius:1.4rem;background:rgba(18,14,24,.4);width:100%;max-width:32rem}
.inst-tabs button{position:relative;display:grid;justify-items:center;align-content:center;gap:.3rem;height:4.75rem;padding:0 .4rem;border:0;border-radius:1.1rem;background:transparent;color:var(--on-dark-2);font-weight:600;font-size:var(--t-sm);cursor:pointer;white-space:nowrap;transition:color .25s}
.inst-tabs button:hover{color:var(--cream)}
.inst-tabs button[aria-selected="true"]{color:var(--plum)}
.inst-tabs .tab-pill{position:absolute;z-index:0;top:.35rem;bottom:.35rem;left:0;border-radius:1.1rem;background:var(--lilac-100);transition:transform .45s var(--ease-out), width .45s var(--ease-out)}
.inst-tabs button > *{position:relative;z-index:1}
.inst-ico{width:2rem;height:2rem;transition:transform .35s var(--ease-out)}
.inst-tabs button:hover .inst-ico{transform:translateY(-2px) rotate(-6deg)}
.inst-tabs button[aria-selected="true"] .inst-ico{transform:scale(1.08)}

/* one row of steps over one row of counts */
.score{--cols:16;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin:1.5rem 0 1.25rem;padding:.4rem 0;border-radius:1rem;background:rgba(18,14,24,.3);user-select:none}
.score-row{display:contents}
.cell{position:relative;display:grid;place-items:center}
.cell.bar-start::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(217,204,245,.2)}
.cell.bar-start:first-child::before{display:none}
.steps-row .cell{height:4.25rem}
.count-row .cell{height:2.75rem}
.step{width:15px;height:15px;border-radius:50%;background:var(--cream);transition:width .45s var(--ease-out), height .45s var(--ease-out), background-color .3s, box-shadow .3s, transform .45s var(--ease-out), opacity .3s}
.step.half{width:9px;height:9px;background:var(--lilac-100)}
.step.tap{background:transparent;box-shadow:inset 0 0 0 2px var(--cream)}
.step.accent{width:22px;height:22px;background:var(--violet);box-shadow:0 0 0 6px rgba(139,104,238,.22)}
.step.weight{width:24px;height:24px;box-shadow:0 7px 0 -3px var(--violet)}
.step.travel{width:20px;height:20px}
.step.off{opacity:0;transform:scale(.3)}
.wave{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-out)}
.wave.is-on{stroke-dashoffset:0}
.count{font:300 1.25rem/1 var(--display);color:var(--on-dark-2);transition:color .2s, font-weight .35s var(--ease-out), transform .35s var(--ease-out)}
.count.small{font-size:.8rem;color:var(--on-dark-3)}
.count.tapword{font-size:.85rem;color:#AE94F4}
.count.is-now{color:var(--cream);font-weight:650;transform:scale(1.18)}
.count.tapword.is-now{color:var(--cream)}
.count.amp{opacity:0;transition:opacity .3s}
.count.amp.show{opacity:1}
.playhead{position:absolute;top:.4rem;bottom:.4rem;left:0;width:0;border-radius:.6rem;background:rgba(139,104,238,.18);opacity:0;transition:opacity .3s;pointer-events:none}
.score.is-running .playhead{opacity:1}
.inst-panels{min-height:3.4em}
.inst-panel{font-size:var(--t-lg);color:var(--on-dark-2);max-width:44ch}
.inst-panel b{color:var(--cream);font-weight:600}
.inst-panel:not([hidden]){animation:panelIn .5s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateX(-.6rem)}}
.music-note{margin-top:1rem;font-size:var(--t-sm);color:var(--muted)}
@media (min-width:960px){
  .machine{padding:2.5rem 2.75rem}
  .count{font-size:1.5rem}
  .count.tapword{font-size:.95rem}
  .step{width:18px;height:18px}
  .step.half{width:11px;height:11px}
  .step.accent{width:26px;height:26px}
  .step.weight{width:28px;height:28px}
  .step.travel{width:23px;height:23px}
}
@media (max-width:539px){
  .step{width:11px;height:11px}
  .step.half{width:7px;height:7px}
  .step.accent{width:16px;height:16px;box-shadow:0 0 0 4px rgba(139,104,238,.22)}
  .step.weight{width:17px;height:17px}
  .step.travel{width:15px;height:15px}
  .count{font-size:1rem}
  .count.tapword,.count.small{font-size:.625rem}
}

/* ---------- Watch ---------- */
.watch{background:var(--night);color:var(--on-dark);padding-left:0;padding-right:0}
/* the featured video: a banner card with a phone-sized clip */
.feature{--fpad:clamp(1.75rem, 5vw, 4rem);position:relative;isolation:isolate;overflow:hidden;display:grid;gap:2.5rem;margin:0 var(--gutter) clamp(2.5rem, 5vw, 4rem);padding:var(--fpad) var(--fpad) 0;border-radius:2rem;background:var(--plum);box-shadow:inset 0 0 0 1px rgba(251,247,240,.06)}
.feature-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.feature-glow i{position:absolute;border-radius:50%;animation:drift 16s ease-in-out infinite alternate paused}
.feature-glow i:nth-child(1){width:80%;aspect-ratio:1;left:-25%;top:20%;background:radial-gradient(closest-side,rgba(91,63,196,.9),transparent)}
.feature-glow i:nth-child(2){width:60%;aspect-ratio:1;right:-10%;top:-30%;background:radial-gradient(closest-side,rgba(139,104,238,.55),transparent);animation-duration:21s;animation-direction:alternate-reverse}
.feature-glow i:nth-child(3){width:45%;aspect-ratio:1;left:35%;bottom:-35%;background:radial-gradient(closest-side,rgba(217,204,245,.22),transparent);animation-duration:12s}
.is-live .feature-glow i{animation-play-state:running}
@keyframes drift{to{transform:translate(12%, -8%) scale(1.15)}}
.feature-copy{display:grid;gap:1.75rem;justify-items:start;align-content:center}
.feature-title{font:300 clamp(2rem, 1.3rem + 2.6vw, 3.5rem)/1.08 var(--display);letter-spacing:-.02em;max-width:20ch}
.feature-phone{justify-self:center;width:min(62vw, 17rem);margin-bottom:-5rem;transform:rotate(-3deg);transition:transform .8s var(--ease-out)}
.feature-phone .clip{border-radius:1.6rem;box-shadow:0 0 0 6px rgba(18,14,24,.55), 0 40px 80px -30px rgba(0,0,0,.7)}
.feature:hover .feature-phone{transform:rotate(-1deg) translateY(-6px)}

.strip{display:flex;gap:clamp(.75rem, 1.5vw, 1.25rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 1rem;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.strip li{flex:none;width:min(68vw, 21rem);scroll-snap-align:start}
.clip,.still{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:1.1rem;overflow:hidden;background:var(--plum);cursor:pointer}
.still{cursor:default}
.clip video,.still img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out), filter .4s}
.clip:hover video{transform:scale(1.03)}
.clip::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,24,.55),transparent 40%);pointer-events:none}
.clip-play{position:absolute;z-index:1;right:.9rem;bottom:.9rem;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:rgba(251,247,240,.9);color:var(--plum);transition:transform .3s var(--ease-out), background-color .2s}
.clip-play .ico{width:1.1rem;height:1.1rem;margin-left:2px}
.clip:hover .clip-play{transform:scale(1.08);background:var(--cream)}
.clip-cap{display:grid;gap:.15rem;margin-top:.85rem;font-size:var(--t-base);color:var(--cream)}
.clip-cap b{font-size:var(--t-sm);font-weight:600;color:var(--violet)}
.ig-link{display:inline-flex;align-items:center;gap:.6rem;margin:2rem var(--gutter) 0;font-weight:600;color:var(--cream);text-decoration:underline;text-decoration-color:rgba(251,247,240,.35);text-underline-offset:.3em;transition:text-decoration-color .2s}
.ig-link:hover{text-decoration-color:var(--cream)}

/* ---------- Ways to learn: the bento ---------- */
.learn{background:var(--mist);color:var(--plum);padding:var(--space-section) var(--gutter)}
.bento-head{grid-column:1/-1;margin-bottom:clamp(1rem, 3vw, 2.5rem)}
.bento-head.is-ws{margin-top:clamp(2.5rem, 6vw, 5rem)}
.bento-head .two-tone{font:300 var(--t-statement)/1.12 var(--display);letter-spacing:-.01em;max-width:30ch}
.bento{--pad:clamp(1.5rem, 3vw, 2.25rem);max-width:var(--max);margin:0 auto;display:grid;gap:clamp(.75rem, 1.4vw, 1.25rem);grid-template-columns:minmax(0,1fr);align-items:start}
.tile{position:relative;isolation:isolate;overflow:hidden;border-radius:1.5rem;background:#fff;color:var(--plum);box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(42,27,61,.04);transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)}
.tile-dark{background:var(--plum);color:var(--on-dark);box-shadow:0 30px 60px -40px rgba(42,27,61,.6)}
.tile-salsa{background:var(--violet-deep)}
/* the light catches the card under the pointer */
.tile::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(24rem circle at var(--mx,50%) var(--my,0%),rgba(139,104,238,.09),transparent 65%);transition:opacity .4s}
.tile-dark::after{background:radial-gradient(24rem circle at var(--mx,50%) var(--my,0%),rgba(251,247,240,.1),transparent 65%)}
.tile.is-lit::after{opacity:1}
@media (hover:hover){
  .tile:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--lilac-100), 0 34px 60px -32px rgba(42,27,61,.38)}
  .tile-dark:hover{box-shadow:0 40px 70px -36px rgba(42,27,61,.75)}
  .tile[open]:hover{transform:none}
}
.tile-copy{display:grid;gap:.6rem;align-content:start;padding:var(--pad)}
.tile-title{font:300 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--display);letter-spacing:-.02em}
.tile-title-xl{font-size:clamp(3rem, 1.8rem + 4vw, 5.5rem);line-height:.95;letter-spacing:-.03em;color:var(--cream)}
.tile-line{display:block;font:400 var(--t-lg)/1.3 var(--display);color:var(--on-dark-2)}
.tile-salsa .tile-line{color:#E6DEFB}
.tile-lead{font-size:clamp(1.125rem, 1rem + .4vw, 1.3rem);line-height:1.5;color:var(--on-dark-2);max-width:38ch}

/* private lessons: the big tile */
.tile-private{display:grid}
.tile-private .tile-copy{gap:1.4rem;justify-items:start;align-content:center;padding:clamp(1.75rem, 4.5vw, 4rem)}
.tile-private .btn{margin-top:.5rem}
.tile-photo{order:-1;position:relative;height:clamp(18rem, 70vw, 26rem)}
.tile-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 40%);mask-image:linear-gradient(to top,transparent 0,#000 40%)}
.good-for{display:grid;gap:.8rem}
.good-for li{position:relative;padding-left:2.1rem;color:var(--cream);font-weight:500;max-width:40ch}
.good-for li::before{content:"";position:absolute;left:0;top:.1rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--violet)}
.good-for li::after{content:"";position:absolute;left:.47rem;top:.38rem;width:.38rem;height:.66rem;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* bachata & salsa: each with its own little dance */
.tile-bachata,.tile-salsa{display:grid;grid-template-rows:auto 1fr auto}
.motif{width:100%;height:auto;max-height:11rem;padding:0 var(--pad);align-self:center;overflow:visible}
.motif text{font:400 22px/1 var(--display);fill:var(--cream);text-anchor:middle;dominant-baseline:middle}
.motif-track{fill:none;stroke:rgba(251,247,240,.16);stroke-width:1.5}
.motif-dots circle{fill:rgba(251,247,240,.35)}
.motif-dots .is-tap{fill:none;stroke:rgba(251,247,240,.6);stroke-width:1.5}
.motif-rider circle,.motif g circle{fill:var(--lilac-100)}
.motif .halo{fill:var(--violet);opacity:.4}
.tile-salsa .motif .halo{fill:var(--lilac-100);opacity:.22}
.motif .is-soft{fill:var(--cream);opacity:.7}
.motif-trail{fill:none;stroke:var(--lilac-100);stroke-width:3;stroke-linecap:round;opacity:.45}
.style-tags{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem var(--pad) var(--pad)}
.style-tags li{display:inline-flex;align-items:center;height:2.4rem;padding:0 1.1rem;border-radius:999px;background:rgba(251,247,240,.12);box-shadow:inset 0 0 0 1px rgba(251,247,240,.18);font:400 1.05rem/1 var(--display);color:var(--cream)}

/* workshops: cards that open in place */
.tile-face{display:grid;gap:.6rem;align-content:start;padding:var(--pad);padding-right:calc(var(--pad) + 3rem);cursor:pointer;list-style:none}
.tile-face::-webkit-details-marker{display:none}
.tile-ws{align-self:stretch}
.tile-ws .tile-title{color:var(--plum);transition:color .2s}
.tile-ws .tile-line{color:var(--violet-deep)}
.tile-face:hover .tile-title{color:var(--violet-deep)}
.tile-plus{position:absolute;top:calc(var(--pad) - .35rem);right:calc(var(--pad) - .35rem);width:2.5rem;height:2.5rem;border-radius:.75rem;background:var(--lilac-50);transition:background-color .25s, transform .45s var(--ease-out)}
.tile-plus::before,.tile-plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;border-radius:2px;background:var(--plum)}
.tile-plus::after{transform:rotate(90deg)}
.tile-face:hover .tile-plus{background:var(--lilac-100)}
.tile-ws[open] .tile-plus{transform:rotate(135deg);background:var(--lilac-100)}
.tile-ws .ws-body{padding:0 var(--pad) var(--pad)}
.tile-ws .ws-inner{padding:0}
.tile-ws .clip-cap{color:var(--ink)}
.tile-ws[open] .eq{max-width:30rem}
.eq{display:flex;align-items:flex-end;gap:.4rem;height:5.5rem;margin-top:1.25rem}
.eq i{flex:1;height:calc(var(--h) * 100%);border-radius:.4rem;background:var(--lilac-100);transform-origin:50% 100%;animation:eqPulse calc(var(--beat) * 8) var(--ease-out) infinite paused;animation-delay:calc(var(--k) * var(--beat))}
.eq i:nth-child(4n){background:var(--violet)}
@keyframes eqPulse{0%{transform:none;opacity:1}20%,100%{transform:scaleY(.62);opacity:.55}}
.tile-shot{display:block;margin:1rem calc(var(--pad) * -1 - 3rem) calc(var(--pad) * -1) calc(var(--pad) * -1);aspect-ratio:16/9;overflow:hidden;background:var(--plum)}
.tile-shot img{width:100%;height:100%;object-fit:cover;object-position:45% 40%;animation:slowZoom 18s ease-in-out infinite alternate paused}
@keyframes slowZoom{to{transform:scale(1.08) translate(-1%, -1%)}}
/* the lady styling photo is portrait: frame her face and arms */
.tile-lady .tile-shot img{object-position:50% 16%}
.tile-lady .ws-body{padding-top:var(--pad)}
.is-live .eq i,.is-live .tile-shot img{animation-play-state:running}

@media (min-width:720px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-private,.tile-ws[open]{grid-column:1/-1}
  .tile-private{grid-template-columns:7fr 5fr}
  .tile-photo{order:0;height:auto;min-height:30rem}
  .tile-photo img{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 35%);mask-image:linear-gradient(to right,transparent 0,#000 35%)}
  .tile-bachata,.tile-salsa{align-self:stretch}
}
@media (min-width:1024px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile-private{grid-column:span 4;grid-row:span 2;align-self:stretch}
  .tile-bachata,.tile-salsa{grid-column:span 2}
  .tile-ws{grid-column:span 3}
  .tile-ws[open]{grid-column:1/-1}
}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:var(--ease-out)}

.ws-body{overflow:hidden}
.ws-inner{display:grid;gap:clamp(1.5rem, 3vw, 2.5rem);align-items:start;padding-bottom:clamp(2rem, 4vw, 3rem)}
.workshop-copy{display:grid;gap:1.25rem;justify-items:start;align-content:start}
.workshop-copy > p:not(.workshop-tag){color:var(--muted);font-size:var(--t-lg);max-width:36ch}
.workshop-copy .btn{margin-top:.5rem}
.workshop-media{display:grid;gap:1.25rem;align-items:start}
.workshop-video{width:min(100%, 15rem)}
@media (min-width:720px){
  .workshop-media{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
  .workshop-video{width:100%}
}
@media (min-width:960px){
  .ws-inner{grid-template-columns:4fr 8fr;column-gap:clamp(2.5rem, 5vw, 5rem)}
  .ws-inner.is-lady{grid-template-columns:5fr 7fr}
}

/* the beat demo, compact */
.machine.is-compact{padding:clamp(1rem, 2.5vw, 1.5rem);border-radius:1.4rem;align-self:center}
.machine.is-compact .machine-title{font-size:1.05rem;margin-bottom:.9rem}
.machine.is-compact .machine-top{margin-bottom:.9rem}
.machine.is-compact .play{height:2.75rem;padding:0 1.2rem 0 1rem;font-size:var(--t-sm)}
.machine.is-compact .inst-tabs button{height:3.9rem;font-size:.8125rem}
.machine.is-compact .inst-ico{width:1.6rem;height:1.6rem}
.machine.is-compact .score{margin:1rem 0 .9rem}
.machine.is-compact .steps-row .cell{height:3.25rem}
.machine.is-compact .count-row .cell{height:2.25rem}
.machine.is-compact .step{width:12px;height:12px}
.machine.is-compact .step.half{width:7px;height:7px}
.machine.is-compact .step.accent{width:18px;height:18px;box-shadow:0 0 0 4px rgba(139,104,238,.22)}
.machine.is-compact .step.weight{width:19px;height:19px;box-shadow:0 5px 0 -2px var(--violet)}
.machine.is-compact .step.travel{width:16px;height:16px}
.machine.is-compact .count{font-size:1.05rem}
.machine.is-compact .count.tapword,.machine.is-compact .count.small{font-size:.6875rem}
.machine.is-compact .inst-panels{min-height:2.8em}
.machine.is-compact .inst-panel{font-size:var(--t-base)}

/* ---------- FAQ ---------- */
.faq{background:var(--lilac-50);color:var(--plum)}
.faq-grid{display:grid;gap:2.5rem}
.faq-head{display:grid;gap:1rem;align-content:start}
.faq-head p{color:var(--muted);font-size:var(--t-lg)}
.faq-head a{color:var(--violet-deep);text-underline-offset:.25em}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.4rem 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font:400 1.3rem/1.25 var(--display);transition:color .2s}
.qa summary:hover h3{color:var(--violet-deep)}
.qa-mark{position:relative;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--lilac-50);transition:background-color .3s, transform .45s var(--ease-out)}
.qa-mark::before,.qa-mark::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--plum);border-radius:2px;transition:transform .45s var(--ease-out)}
.qa-mark::after{transform:rotate(90deg)}
.qa[open] .qa-mark{background:var(--lilac-100);transform:rotate(180deg)}
.qa[open] .qa-mark::after{transform:rotate(0deg)}
.qa-body{overflow:hidden}
.qa-body p{padding:0 3.5rem 1.5rem 0;color:var(--muted);font-size:var(--t-lg);max-width:60ch}
.qa-body a{color:var(--violet-deep)}
@media (min-width:960px){
  .faq-grid{grid-template-columns:5fr 7fr;gap:clamp(2.5rem, 6vw, 7rem)}
  .faq-head{position:sticky;top:7rem}
}

/* ---------- Book + footer ---------- */
.close{background:radial-gradient(120% 70% at 15% 0%,var(--plum) 0%,var(--night) 70%);color:var(--on-dark)}
.book{display:grid;gap:2rem}
.book-title{font:300 clamp(3.5rem, 1.5rem + 9vw, 9rem)/.92 var(--display);letter-spacing:-.03em}
.book-copy{display:grid;gap:1.75rem;justify-items:start}
.book-copy > p:first-child{color:var(--on-dark-2);font-size:var(--t-lg);max-width:38ch}
.send{display:flex;flex-wrap:wrap;gap:.75rem}
.handle{font-size:var(--t-sm);color:var(--on-dark-3)}
.handle a{color:var(--cream);text-underline-offset:.25em}
@media (min-width:960px){
  .book{grid-template-columns:7fr 5fr;gap:clamp(3rem, 6vw, 7rem);align-items:end}
}

.foot{display:grid;gap:1.25rem;padding:3rem var(--gutter) 2.5rem;border-top:1px solid var(--line-dark);color:var(--on-dark-2);font-size:var(--t-sm)}
.foot .wordmark{color:var(--cream);font-size:2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.foot nav a{text-decoration:none;color:var(--on-dark-2);padding:.25rem 0;transition:color .2s}
.foot nav a:hover{color:var(--cream)}
.legal{color:var(--on-dark-3)}
@media (min-width:960px){
  .foot{grid-template-columns:auto 1fr auto;align-items:center;column-gap:3rem}
  .foot .legal{grid-column:1/-1}
}

/* ---------- Floating book (phones) ---------- */
.float-book{position:fixed;z-index:40;left:50%;bottom:max(1rem, env(safe-area-inset-bottom));display:inline-flex;align-items:center;height:3.25rem;padding:0 1.6rem;border-radius:999px;background:var(--violet-deep);color:var(--cream);font-weight:600;text-decoration:none;box-shadow:0 18px 36px -12px rgba(42,27,61,.6);transform:translate(-50%, 160%);transition:transform .5s var(--ease-out)}
.float-book.is-shown{transform:translate(-50%, 0)}
@media (min-width:960px){ .float-book{display:none} }

/* ---------- Lightbox ---------- */
.lightbox{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--cream);overflow:hidden}
.lightbox::backdrop{background:rgba(18,14,24,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox[open]{display:grid;place-items:center}
.lb-stage{display:grid;gap:.85rem;justify-items:center;padding:4.5rem 1rem 1.5rem}
.lightbox video{height:min(80svh, 52rem);width:auto;max-width:calc(100vw - 2rem);aspect-ratio:9/16;object-fit:cover;border-radius:1.25rem;background:var(--plum);view-transition-name:none}
.lb-title{font:400 var(--t-xl)/1.2 var(--display);text-align:center}
.lb-close{position:fixed;top:1rem;right:1rem}
.lightbox[open]:not(.vt) .lb-stage{animation:lbIn .45s var(--ease-out)}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}}
::view-transition-group(clip){animation-duration:.5s;animation-timing-function:var(--ease-out)}
::view-transition-old(clip),::view-transition-new(clip){height:100%;object-fit:cover}

/* ---------- Reduced motion & static captures ---------- */
/* Reduce Motion: keep the gentle in-place animations, drop sliding, zooming and parallax
   (the parallax and clip carousel are already behind no-preference queries) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js [data-step],.js .tile[data-step]{transform:none}
  .js .ch,.js .name-dot{animation-name:fadeOnly}
  .js [data-hero-in]{animation-name:fadeOnly}
  .menu{animation-name:fadeOnly}
  .tile-shot img{animation:none}
  .feature-glow i{animation-duration:40s}
  .clip:hover video,.tile:hover,.tile-ws:has(> summary:active){transform:none}
  .feature:hover .feature-phone,.feature-phone{transform:rotate(-3deg)}
}
@keyframes fadeOnly{from{opacity:0}}
.static *,.static *::before,.static *::after{animation:none!important;transition:none!important}
.static [data-step]{opacity:1!important;transform:none!important}
html.static{scroll-behavior:auto}
.static .bar{position:absolute}.static .float-book{display:none}

/* wide screens: the banner on top, the three clips in a row under it */
@media (min-width:960px){
  .watch{padding-left:var(--gutter);padding-right:var(--gutter)}
  .watch-inner{max-width:var(--max);margin:0 auto}
  .feature{grid-template-columns:7fr 5fr;margin:0 0 clamp(2.5rem, 4vw, 3.5rem);min-height:30rem}
  .feature-copy{padding-bottom:var(--fpad)}
  .feature-phone{align-self:end;width:min(100%, 19rem);margin-bottom:-6rem}
  .ig-link{margin:1.75rem 0 0}
  .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem, 1.6vw, 1.75rem);overflow:visible;padding:0;margin:0}
  .strip li{width:auto}
  .strip .clip{aspect-ratio:4/5}
}

/* Logos (brand/logo-bilingual): the wide one-line logo in the header on every screen (Anthony's call: the stacked
   one took too much room on phones), the stacked logo in the footer. Cream versions on the dark bar and footer;
   minimum sizes 200px (wide) and 120px (stacked). */
.logo{display:block;height:auto;max-width:none}
.logo-line{width:clamp(200px, 16vw, 15.5rem)}
.foot .logo-stack{width:150px}
.bar-inner{height:auto;min-height:4.25rem;padding-top:.5rem;padding-bottom:.5rem}

/* wide screens: the featured clip lives in the banner, so the strip skips it */
@media (min-width:960px){ .strip .is-featured{display:none} }

/* cards rise in as they arrive */
@media (prefers-reduced-motion: no-preference){
  .js .tile[data-step]{transform:translate3d(0,1.5rem,0)}
  .js .tile[data-step].is-in{transform:none}
}
summary,.clip{-webkit-tap-highlight-color:transparent}

/* ---------- Phones: the mobile-first layout ---------- */
@media (max-width:719px){
  /* Watch: a plain heading, then a swipeable row of clips */
  .feature{display:block;margin:0 var(--gutter) 1.75rem;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .feature-glow,.feature-phone,.feature-copy .btn{display:none}
  .feature-title{font-size:var(--t-3xl);line-height:1.04}
  .feature-title span{display:block;margin-top:.75rem;font:400 var(--t-lg)/1.5 var(--text);letter-spacing:0;color:var(--on-dark-2)}
  .strip li{width:min(64vw, 17rem)}
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .strip li{animation:clipIn linear both;animation-timeline:view(inline);animation-range:entry 0% entry 100%}
    }
  }

  /* Ways to learn: one column, every card kept compact */
  .bento{--pad:1.25rem;gap:.75rem}
  .tile{border-radius:1.25rem}
  .tile-private{order:-1;margin-bottom:1.75rem}
  .tile-photo{height:15rem}
  .tile-private .tile-copy{gap:1.1rem;padding:0 var(--pad) 1.5rem;margin-top:-2.5rem;position:relative}
  .tile-title-xl{font-size:3rem}
  .tile-lead{font-size:var(--t-base)}
  .bento-head{margin-bottom:.5rem}
  .bento-head.is-ws{margin-top:2.25rem}
  /* bachata & salsa: words on the left, the little dance on the right */
  .tile-bachata,.tile-salsa{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto auto;align-items:center}
  .tile-bachata .tile-copy,.tile-salsa .tile-copy{padding:var(--pad) 0 0 var(--pad)}
  .tile-title{font-size:2rem}
  .tile-line{font-size:var(--t-base)}
  .motif{grid-row:1;grid-column:2;padding:var(--pad) var(--pad) 0 0;max-height:none}
  .motif text{font-size:26px}
  .style-tags{grid-column:1/-1;padding:.75rem var(--pad) var(--pad)}
  .style-tags li{height:2.1rem;padding:0 .9rem;font-size:.95rem}
  /* workshops: slim cards that slide open */
  .tile-face{gap:.35rem;padding-right:calc(var(--pad) + 2.75rem)}
  .tile-ws .tile-title{font-size:1.65rem;line-height:1.08}
  .tile-plus{width:2.25rem;height:2.25rem;top:var(--pad);right:var(--pad)}
  .eq{height:2.25rem;gap:.3rem;margin-top:.6rem}
  .tile-shot{aspect-ratio:3/1;margin-top:.75rem;margin-right:calc(var(--pad) * -1 - 2.75rem)}
  .tile-lady .tile-shot{aspect-ratio:2/1}
  .tile-lady[open] .tile-shot{aspect-ratio:16/9}
  .tile-ws .ws-body{padding:0 var(--pad) var(--pad)}
  .tile-ws .ws-inner{padding-top:.5rem}
  .tile-lady .ws-body{padding-top:var(--pad)}
  .tile-ws:has(> summary:active){transform:scale(.985)}
  .tile{transition:transform .25s var(--ease-out)}
}
@keyframes clipIn{from{opacity:.4;transform:scale(.88) translateY(.75rem)}}
/* phones: keep the intro short, the facts list is for wide screens */
@media (max-width:719px){ .facts{display:none} }
@media (max-width:719px){ .about-text .bio{display:none} }
/* phones: a smaller header logo (Anthony's call, below the board's 200px minimum) */
@media (max-width:719px){ .bar .logo-line{width:150px} .bar-inner{min-height:3.75rem} }