/* ==========================================================================
   Solo School sales page, Version C
   1. Version A base (the Astra V2 export)
   2. Version A edits
   3. Version B sections, namespaced .b-*
   4. Version C
   ========================================================================== */

/* ---------- 1. Version A base ---------- */
@font-face{font-family:Geist;src:url('../fonts/geist-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

@font-face{font-family:Fraunces;src:url('../fonts/fraunces-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{--paper:#eee4cf;--ink:#20231f;--rust:#ae3e21;--gold:#e5af35;--muted:#666558;--line:#c9bfaa;--sans:Geist,Arial,sans-serif;--serif:Fraunces,Georgia,serif;--mono:'Courier New',monospace}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}
body:after{content:'';position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}

button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer;color:inherit}
img,video{display:block;max-width:100%}
button{border:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #397ca2;outline-offset:5px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:650;letter-spacing:-.055em}
em{font-family:var(--serif);font-weight:550}
p{line-height:1.65}
.eyebrow{font:700 .76rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:16px}
.skip-link:focus{top:12px}
.site-header{height:104px;padding:14px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #c9bfaa70;position:relative;z-index:5}
.brand img{width:162px;height:auto}
.site-header nav{display:flex;align-items:center;gap:36px;font-size:.875rem;font-weight:550}
.nav-cta{background:var(--ink);color:var(--paper);padding:15px 22px;display:flex;gap:28px;border-radius:4px}
.nav-cta:hover{background:var(--rust)}
.hero{max-width:1600px;margin:auto;display:grid;grid-template-columns:1fr 1.06fr;gap:40px;padding:76px 5% 70px;align-items:center;overflow:hidden}
.hero .eyebrow{margin-bottom:25px}
.hero h1{font-size:clamp(3.7rem,6.35vw,6.7rem);line-height:.99;letter-spacing:-.07em}
.hero h1 em{color:var(--rust);display:block;font-size:.73em;white-space:nowrap;letter-spacing:-.065em;line-height:1.2;margin-top:6px}
.hero-description{max-width:440px;margin:25px 0 27px;font-size:1.0625rem;line-height:1.6}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;min-height:56px;padding:17px 24px;font-size:.94rem;font-weight:600;border-radius:4px;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.primary{background:var(--rust);color:#fff7e6;box-shadow:0 3px 0 #602d1d}
.primary:hover{background:#94341a}
.hero-fine{font-size:.76rem;margin-top:17px;font-weight:500}
.hero-fine span{padding:0 8px;color:#8c7c60}
.hero-media{position:relative}
.tv-wrap{position:relative;aspect-ratio:1.29}
.tv-screen{position:absolute;inset:8% 5% 10%;background:#171714;overflow:hidden;border-radius:5%;box-shadow:0 20px 30px #35210c24}
.tv-screen>img{height:100%;width:100%;object-fit:cover}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px),radial-gradient(ellipse,transparent 30%,#0004);z-index:2}
.tv-play{position:absolute;inset:0;margin:auto;z-index:3;width:78px;height:78px;border-radius:50%;border:2px solid #fff4d9;background:#fff5d929;color:#fff5d9;font-size:26px;backdrop-filter:blur(3px);transition:background .2s,transform .2s}
.tv-play:hover{background:#b34421cc;transform:scale(1.08)}
.tv-play span{margin-left:4px}
.screen-rec,.screen-label{position:absolute;color:#f4f0d9;font:600 .73rem var(--mono);letter-spacing:.08em;z-index:3;text-shadow:0 1px 4px black}
.screen-rec{top:20px;left:24px}
.screen-label{bottom:20px;left:24px}
.tv-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3%}
.hero .tv-caption .eyebrow{font-size:.62rem;margin:0}
.text-button{padding:12px 0;background:transparent;font-size:.81rem;text-decoration:underline;text-underline-offset:4px;font-weight:550}
.racing-stripes{height:29px;background:linear-gradient(to bottom,#e8b336 0 20%,#df7827 20% 40%,#c74525 40% 60%,#982536 60% 80%,#53213a 80%)}
.proof-strip{padding:26px 5%;display:flex;justify-content:space-between;align-items:center;gap:22px;border-bottom:1px solid var(--line);font-size:.78rem}
.proof-strip strong{font-weight:700}
.proof-strip a{font-family:var(--mono);font-size:.75rem}
.proof-strip a span{margin-left:22px}
.section-pad{padding:110px 5%}
.intro{text-align:center;max-width:1100px;margin:auto}
.intro .eyebrow{color:var(--rust);margin-bottom:30px}
.intro h2{font-size:clamp(2.5rem,4.4vw,4.5rem);line-height:1.09}
.intro h2 em{color:var(--rust);font-size:.92em}
.intro>p:last-child{max-width:640px;margin:30px auto 0;color:#5b5c51;font-size:1.06rem}
footer{background:#20231f;color:var(--paper);padding:50px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px}
footer>img{width:155px;height:auto}
footer>p{font-family:var(--serif);font-size:1.3rem;font-style:italic}
footer>div{display:flex;gap:20px;flex-wrap:wrap;font-size:.72rem;color:#c0bbaa}
dialog{padding:20px;border:1px solid #5c5c50;border-radius:8px;background:#20231f;color:var(--paper);width:min(1000px,95vw);max-height:90dvh;box-shadow:0 30px 150px #0008}
dialog::backdrop{background:#131711dc;backdrop-filter:blur(8px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:30px}
.dialog-heading h2{font-size:1.35rem;letter-spacing:-.025em}
.dialog-close{width:44px;height:44px;background:#ffffff18;border-radius:50%;font-size:20px}
#video-container{aspect-ratio:16/9}
#video-container iframe,#video-container video{width:100%;height:100%;border:0;background:black}
.video-note{font-size:.78rem;color:#c0bbaa;margin-top:12px}
.mobile-cta{display:none}

@media(min-width:1600px){.site-header{padding-inline:calc((100vw - 1440px)/2)}
}

@media(max-width:1000px){.site-header nav{gap:20px}
.hero{gap:16px;padding-block:60px}
.hero h1{font-size:6.3vw}
.hero-description{font-size:1rem}
.tv-caption{flex-direction:column;gap:0}
.hero .tv-caption .eyebrow{font-size:.63rem}
.proof-strip{font-size:.7rem}
.section-pad{padding-block:80px}
}

@media(max-width:700px){html{scroll-padding-top:20px}
.site-header{height:82px;padding:12px 6%}
.brand img{width:130px}
.site-header nav>a:not(.nav-cta){display:none}
.nav-cta{font-size:.75rem;padding:12px 14px;gap:12px}
.hero{grid-template-columns:1fr;padding:42px 6% 32px;gap:25px}
.hero .eyebrow{font-size:.66rem;margin-bottom:21px}
.hero h1{font-size:clamp(3.8rem,12vw,5.5rem);line-height:.99}
.hero h1 em{font-size:.73em}
.hero-description{max-width:400px;margin:22px 0;font-size:1rem}
.hero .button{width:100%;max-width:400px}
.hero-fine{font-size:.7rem;text-align:center;max-width:400px}
.hero-media{margin-inline:-4%;}
.tv-wrap{max-width:510px;margin:auto}
.tv-caption{flex-direction:row;padding:0 6%;}
.tv-play{height:65px;width:65px;font-size:24px}
.screen-rec,.screen-label{font-size:.62rem}
.racing-stripes{height:22px}
.proof-strip{padding:23px 6%;text-align:center;justify-content:center}
.proof-strip p{font-size:.72rem}
.proof-strip p strong{display:block;font-size:1rem}
.proof-strip a{display:none}
.section-pad{padding:72px 6%}
.intro h2{font-size:clamp(2.25rem,8.5vw,3.7rem);line-height:1.13}
.intro>p:last-child{font-size:1rem}
.intro>p:last-child br{display:none}
.intro h2 em{font-size:.9em}
.intro .eyebrow{font-size:.7rem}
.desktop-only{display:none}
footer{padding:40px 6% 110px;flex-direction:column;gap:24px}
footer>div{justify-content:center}
.mobile-cta{position:fixed;bottom:0;inset-inline:0;background:#20231ff2;color:var(--paper);backdrop-filter:blur(10px);padding:12px 6% max(12px,env(safe-area-inset-bottom));z-index:12;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #ffffff30;font-size:.74rem;transform:translateY(110%);transition:transform .25s}
.mobile-cta.visible{transform:translateY(0)}
.mobile-cta strong{display:block;font-size:1.05rem}
.mobile-cta a{padding:13px 16px;background:var(--paper);color:var(--ink);border-radius:3px;font-weight:600}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}


.tv-wrap{aspect-ratio:4/3}
.tv-body{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 12px #32280e28)}
.tv-screen{inset:15.1% 15.2% 28.5%;border-radius:5% / 8%;box-shadow:inset 0 0 30px #0008}
.hero-media{margin-left:-5%;margin-right:-5%}
.tv-caption{padding-inline:10%}
.hero .tv-caption .eyebrow{font-size:.6rem}

@media(max-width:700px){.hero-media{margin-inline:-7%}
.tv-caption{padding-inline:9%}
.hero .tv-caption .eyebrow{font-size:.56rem}
.text-button{font-size:.72rem}
}

.method{display:grid;grid-template-columns:1fr 1.25fr;gap:9%;border-top:1px solid var(--line);padding-top:75px;padding-bottom:95px}
.method h2,.listen h2,.section-heading h2,.practice h2,.enroll-intro h2,.faq h2{font-size:clamp(2.7rem,4.7vw,4.8rem);line-height:1.07}
.method em,.listen em,.section-heading em,.enroll-intro em,.faq em{color:var(--rust)}
.method .eyebrow{max-width:260px;margin-bottom:22px}
.method-copy>p{font-size:1.0625rem;max-width:620px;color:#5b5c51}
.method-copy>p+p{margin-top:20px}
.method-steps{margin-top:34px;padding-top:25px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.method-steps span{display:block;font:700 .75rem var(--mono);color:var(--rust);margin-bottom:13px}
.method-steps strong{font-size:1rem;font-weight:600}
.method-steps p{font-size:.84rem;line-height:1.4;margin-top:8px;max-width:145px;color:#626456}

.world-journey{background:#20231f;color:var(--paper);position:relative}
.world-stage{padding:35px 0 24px}
.world-header{padding:0 5%;display:flex;justify-content:space-between;align-items:end;gap:25px}
.world-header .eyebrow{color:#bfb9a7;margin-bottom:12px}
.world-header h2{font-size:clamp(2rem,3.3vw,3.5rem);line-height:1.1}
.world-header em{font-size:.96em;color:#e6ad62}
.scroll-hint{font:.68rem var(--mono);letter-spacing:.08em;white-space:nowrap;padding-bottom:8px;color:#cbc5b4}
.scroll-hint span{padding-left:15px}
.world-nav{display:flex;padding:22px 5% 18px;gap:26px;flex-wrap:wrap}
.world-nav button{padding:8px 0;background:none;color:#bbb8ad;white-space:nowrap;font-size:.78rem;border-bottom:2px solid transparent}
.world-nav button span{font:.7rem var(--mono);padding-right:7px}
.world-nav button[aria-current=true]{color:#ffe8b3;border-bottom-color:#e4ae57}
.world-nav button:hover{color:white}
.world-viewport{overflow:hidden}
.world-track{display:flex;gap:24px;padding:0 5vw;will-change:transform}
.world-card{position:relative;color:#2c2824;border-radius:8px;display:grid;grid-template-columns:1.05fr 1fr;min-width:0;flex:0 0 82vw;min-height:450px;height:calc(100vh - 245px);max-height:660px;overflow:hidden;isolation:isolate}
.world-copy{position:relative;z-index:1;padding:42px 3.5vw}
.world-copy>.eyebrow{margin-bottom:13px;font-size:.7rem}
.world-copy h3{font-size:clamp(2.2rem,3.55vw,3.8rem);line-height:1;letter-spacing:-.055em}
.world-copy h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,2.35vw,2.5rem);line-height:1.05;letter-spacing:-.035em;margin:18px 0}
.world-description{max-width:420px;font-size:clamp(.94rem,1.2vw,1.08rem);line-height:1.6}
.world-copy ul{list-style:none;padding:0;margin:22px 0;font-size:.84rem;line-height:1.5}
.world-copy li{margin:8px 0;padding-left:18px;position:relative}
.world-copy li:before{content:'+';position:absolute;left:0}
.world-listen{font-size:.78rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-block;min-height:44px;padding-block:10px}
.world-footnote{font:.65rem var(--mono);text-transform:uppercase;letter-spacing:.03em;display:block;margin-top:24px}
.world-art{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}
.world-art img{position:relative;z-index:1;width:93%;height:98%;object-fit:contain;mix-blend-mode:multiply;transform:rotate(13deg) scale(1.12);transition:transform .8s ease-out}
.world-number{font:600 clamp(10rem,26vw,24rem)/1 var(--sans);color:#2228200b;position:absolute;right:6%;top:10%;letter-spacing:-.1em}
.guitar-caption{position:absolute;bottom:28px;right:24px;font:.55rem/1.7 var(--mono);letter-spacing:.07em;z-index:2;text-align:right}
.world-gilmour{background:#d9d9cf}
.world-blues{background:#e8c285}
.world-knopfler{background:#c2c8ab}
.world-mayer{background:#bbd5d2}
.world-rock{background:#e3b19a}
.world-progress{height:2px;margin:22px 5% 0;background:#ffffff20}
.world-progress span{display:block;width:20%;height:100%;background:#e9b24c;transform-origin:left}
.world-journey.is-horizontal .world-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.world-journey:not(.is-horizontal) .world-track{flex-direction:column}
.world-journey:not(.is-horizontal) .world-card{flex:auto;width:100%;height:auto;min-height:530px}
.world-journey:not(.is-horizontal) .scroll-hint{display:none}
.world-journey:not(.is-horizontal) .world-art img{max-height:570px}

.listen{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:7%;background:#e2d7c0;border-bottom:1px solid var(--line)}
.listen .eyebrow{color:var(--rust);margin-bottom:23px}
.listen-copy>p:not(.eyebrow){max-width:445px;margin-top:23px;font-size:1.05rem;color:#585c50}
.listen-copy>p.listen-small{font-size:1rem;color:var(--ink);font-weight:600}
.cassette{position:relative;width:100%;background:none;display:block;padding:0;transform:rotate(-6deg);transition:transform .35s}
.cassette:hover{transform:rotate(-3deg) translateY(-5px)}
.cassette.playing{transform:rotate(-2deg)}
.cassette img{width:100%;height:auto}
.tape-label{position:absolute;top:19%;left:16%;right:16%;color:#302c27;text-align:left;transform:rotate(-.5deg)}
.tape-label>span{font:700 clamp(.45rem,.7vw,.65rem) var(--mono);letter-spacing:.05em;display:block}
.tape-label strong{font-family:var(--serif);font-style:italic;letter-spacing:-.04em;font-weight:650;font-size:clamp(1.3rem,2.5vw,2.2rem);line-height:1.4}
.tape-side{position:absolute;top:58%;left:17%;font:700 clamp(.45rem,.8vw,.65rem) var(--mono);color:#312c23;letter-spacing:.06em}
.tape-controls{display:flex;gap:12px;align-items:center;margin:21px 5% 0;padding:17px 0 8px;border-top:1px solid #b9ab90}
.tape-controls button{border:1px solid #afa78f;background:var(--paper);width:44px;height:44px;flex-shrink:0;border-radius:3px;font-size:16px}
.tape-controls button:first-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.audio-track{flex:1;min-width:0}
.audio-track>div{display:flex;justify-content:space-between;gap:10px;font-size:.68rem}
.audio-track>div span:last-child{font-family:var(--mono);white-space:nowrap}
.audio-track input{width:100%;accent-color:var(--rust);height:21px;margin:4px 0 0;cursor:pointer}
.audio-credit{font:.67rem/1.5 var(--mono);text-align:center;margin-top:10px;color:#626152}

.section-heading{text-align:center;max-width:850px;margin:0 auto 50px}
.section-heading .eyebrow{color:var(--rust);margin-bottom:20px}
.section-heading>p:last-child:not(.eyebrow){color:#66685c;font-size:1.08rem;margin-top:22px}
.lesson-preview{max-width:1200px;margin:auto}
.lesson-video{position:relative;padding:0;display:block;background:#151713;width:100%;border-radius:8px;overflow:hidden;box-shadow:0 16px 45px #36322220}
.lesson-video img{width:100%;height:auto}
.lesson-video .scanlines{opacity:.28}
.lesson-play{width:70px;height:70px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#eee4cfe8;box-shadow:0 4px 25px #0004;display:grid;place-items:center;font-size:22px;transition:background .2s}
.lesson-video:hover .lesson-play{background:#fbe8ae}
.lesson-video-label{position:absolute;top:22px;left:25px;color:#fff7de;text-shadow:0 1px 10px #000;font:700 .68rem var(--mono);letter-spacing:.09em}
.lesson-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:40px}
.lesson-notes .eyebrow{color:var(--rust);font-size:.68rem}
.lesson-notes h3{font-size:1.75rem;line-height:1.15;letter-spacing:-.045em;margin:15px 0}
.lesson-notes p{color:#64665a;font-size:.94rem}
.practice{background:#242823;color:var(--paper);display:grid;grid-template-columns:1fr 1.15fr;gap:8%;align-items:center;overflow:hidden}
.practice .eyebrow{color:#d7b87b;margin-bottom:22px}
.practice h2 em{color:#e1b065}
.practice-copy>p:not(.eyebrow){font-size:1rem;color:#c8c7b8;margin-top:24px;max-width:480px}
.practice-copy>p:nth-of-type(2){font-size:1.13rem;color:#e4dfcf}
.practice ul{list-style:none;padding:0;margin:24px 0 28px;font-size:.87rem;color:#e0d9c5;line-height:2}
.practice li:before{content:'+';padding-right:10px;color:#e2ae53}
.light{background:var(--paper);color:var(--ink);font-size:.84rem;gap:22px}
.practice-image{position:relative;padding:0;background:#151a12;border-radius:6px;overflow:hidden;transform:rotate(2deg);box-shadow:0 24px 50px #0006;border:1px solid #767761}
.practice-image img{width:100%;height:auto}
.preview-caption{display:block;background:#13170f;color:#e8dcbf;font:600 .75rem var(--mono);padding:20px}
.practice-image:hover{transform:rotate(0)}

.bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1200px;margin:auto}
.bonus-card{background:#e4dac5;border-radius:6px;overflow:hidden}
.bonus-card>div:last-child{padding:30px 34px 38px}
.bonus-card .eyebrow{font-size:.68rem;color:var(--rust);margin-bottom:12px}
.bonus-card h3{font-size:1.65rem;letter-spacing:-.045em;margin-bottom:12px}
.bonus-card p:last-child{font-size:.98rem;color:#5f6256}
.bonus-art{height:305px;background:#d3c7b0;overflow:hidden;display:flex;justify-content:center;align-items:center;padding:20px}
.bonus-art img{width:auto;height:95%;object-fit:contain;transform:rotate(-7deg);box-shadow:15px 15px 20px #362e291f}
.backing-type{height:305px;background:#93402b;color:#edcf8b;padding:27px 32px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.backing-type:after{content:'';position:absolute;right:-27%;top:0;width:60%;height:130%;transform:rotate(33deg);background:linear-gradient(to right,transparent 0 10%,#dd8135 10% 23%,#c66c30 23% 36%,#bf552e 36% 49%,#75263a 49% 62%,#482537 62% 75%,transparent 75%)}
.backing-type>span{font:.64rem var(--mono);letter-spacing:.06em;position:relative;z-index:1}
.backing-type strong{font-size:5.4rem;line-height:.85;letter-spacing:-.08em;position:relative;z-index:1}

.teacher{display:grid;grid-template-columns:.95fr 1fr;gap:9%;align-items:center;border-top:1px solid var(--line)}
.teacher-photo{position:relative;max-width:520px}
.teacher-photo>img{width:100%;height:auto;aspect-ratio:.9;object-fit:cover;border-radius:3px}
.photo-caption{position:absolute;bottom:19px;left:20px;font:.62rem var(--mono);color:#fff3d7;letter-spacing:.06em}
.teacher-copy .eyebrow{color:var(--rust);margin-bottom:25px}
.teacher-copy h2{font-size:clamp(2.4rem,3.8vw,4.1rem);line-height:1.08}
.teacher-copy h2 em{color:var(--rust)}
.teacher-copy>p:not(.eyebrow){font-size:.96rem;color:#656659;margin-top:23px;max-width:520px}
.teacher-stat{display:flex;align-items:center;gap:23px;border-top:1px solid var(--line);margin-top:30px;padding-top:25px}
.teacher-stat strong{font-size:2rem;letter-spacing:-.05em}
.teacher-stat span{font-size:.78rem;line-height:1.5;color:#626356}

.enrollment{display:grid;grid-template-columns:1.05fr 1fr;gap:10%;align-items:center;background:#ded2b7;border-block:1px solid #c7bba4}
.enroll-intro .eyebrow{color:var(--rust);margin-bottom:25px}
.enroll-intro h2{font-size:clamp(3rem,5.1vw,5.7rem)}
.enroll-intro>p:last-of-type{font-size:1.2rem;margin:28px 0 40px;color:#5d6052}
.guarantee{display:flex;gap:20px;align-items:center}
.guarantee>span{font-family:var(--serif);font-size:3.5rem;line-height:1;width:85px;height:85px;display:grid;place-items:center;border:1px solid #9d957e;border-radius:50%}
.guarantee strong{font-size:.98rem}
.guarantee p{font-size:.81rem;margin-top:6px;color:#5c5e51}
.enroll-card{background:#f2e9d7;border:1px solid #c6b89b;box-shadow:9px 9px 0 #c0b69c70;padding:38px 42px;border-radius:5px;max-width:560px}
.enroll-card>img{width:175px;height:auto;margin-bottom:22px}
.enroll-card>.eyebrow{font-size:.65rem;margin-bottom:8px}
.price{display:flex;align-items:baseline;gap:10px}
.price strong{font-size:4.8rem;line-height:1.1;letter-spacing:-.075em;font-weight:600}
.price span{font:.85rem var(--mono);color:#686456}
.enroll-card ul{padding:24px 0;margin:24px 0;border-block:1px solid var(--line);list-style:none}
.enroll-card li{font-size:.87rem;line-height:1.5;padding-left:22px;position:relative;margin:12px 0}
.enroll-card li:before{content:'✓';position:absolute;left:0;color:#946038}
.launch-link{width:100%;font-size:.9rem}
.enroll-note{font-size:.75rem;text-align:center;line-height:1.7;margin-top:17px;color:#6a6658}

.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:9%}
.faq .eyebrow{color:var(--rust);margin-bottom:20px}
.faq h2{font-size:3.3rem}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;padding:25px 40px 25px 0;cursor:pointer;font-size:1rem;font-weight:550;line-height:1.5;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:0;top:22px;font-size:24px;font-weight:400}
.faq details[open] summary:after{content:'−'}
.faq details p{padding:0 35px 24px 0;color:#66685b;font-size:.97rem}
.closing{background:#e4d9c0;text-align:center}
.closing>div:last-child{padding:75px 6% 85px}
.closing .eyebrow{color:var(--rust);margin-bottom:25px}
.closing h2{font-size:clamp(3rem,6vw,6rem);line-height:1.04}
.closing h2 em{color:var(--rust)}
.closing .button{margin-top:30px}

@media(min-width:1700px){.world-copy{padding:48px}
.world-card{flex-basis:75vw}
.world-description{max-width:500px}
.world-copy ul{font-size:1rem}
}

@media(max-width:1100px){.world-card{grid-template-columns:1.2fr 1fr}
.world-copy{padding:32px 3vw}
.world-description{font-size:.93rem}
.world-copy ul{margin:16px 0;font-size:.76rem}
.world-nav{gap:19px}
.world-nav button{font-size:.69rem}
.scroll-hint{display:none}
.world-footnote{font-size:.6rem}
.world-listen{font-size:.71rem}
.teacher-copy h2{font-size:3.2vw}
.lesson-notes{gap:30px}
.enroll-card{padding:30px}
.method,.teacher{gap:6%}
.method .eyebrow{font-size:.65rem}
.practice{gap:5%}
.practice .button{font-size:.75rem;padding-inline:18px}
}

@media(max-width:760px){.method{grid-template-columns:1fr;gap:27px}
.method .eyebrow{max-width:none}
.method h2{font-size:3.2rem}
.method h2 br{display:none}
.method-copy>p{font-size:1rem}
.method-steps{gap:15px}
.method-steps strong{font-size:.85rem}
.method-steps p{font-size:.76rem}
.world-stage{padding-block:40px}
.world-header{padding-inline:6%}
.world-header .eyebrow{font-size:.64rem;max-width:250px;line-height:1.6}
.world-header h2{font-size:2.45rem}
.world-header h2 em{display:block;font-size:.89em;line-height:1.2;margin-top:5px}
.world-nav{padding:24px 6%;gap:7px 18px}
.world-nav button{font-size:.72rem;min-height:40px}
.world-nav button span{font-size:.63rem}
.world-track{padding-inline:6%;gap:20px}
.world-card,.world-journey:not(.is-horizontal) .world-card{grid-template-columns:1fr .8fr;min-height:470px}
.world-copy{padding:27px 24px;grid-column:1/3}
.world-copy>.eyebrow{font-size:.61rem;margin-bottom:12px}
.world-copy h3{font-size:2.1rem}
.world-copy h4{font-size:1.65rem;margin:15px 0;width:64%}
.world-description{font-size:.86rem;max-width:66%;line-height:1.55}
.world-copy ul{font-size:.69rem;max-width:67%;margin-top:17px}
.world-footnote{font-size:.56rem;max-width:65%;line-height:1.6}
.world-listen{font-size:.65rem;max-width:68%;line-height:1.5}
.world-art{position:absolute;right:-7%;top:20%;width:43%;bottom:2%;z-index:0;overflow:visible}
.world-art img{width:100%;height:100%;transform:rotate(10deg) scale(1.2)}
.world-number{font-size:9rem;top:22%;right:15%}
.guitar-caption{display:none}
.world-progress{display:none}
.listen{grid-template-columns:1fr;gap:30px}
.listen-copy>p:not(.eyebrow){font-size:1rem}
.listen h2,.section-heading h2,.practice h2{font-size:2.8rem}
.tape-player{max-width:520px;width:100%;margin:auto}
.tape-label>span{font-size:clamp(.42rem,1.9vw,.62rem)}
.tape-label strong{font-size:clamp(1.35rem,5.8vw,2.2rem)}
.tape-side{font-size:clamp(.42rem,1.8vw,.65rem)}
.audio-track>div{font-size:.6rem}
.audio-credit{font-size:.59rem}
.tape-controls{margin-top:10px;gap:8px}
.section-heading{margin-bottom:30px}
.section-heading .eyebrow{font-size:.65rem}
.lesson-video{margin-inline:-2%;width:104%;border-radius:4px}
.lesson-video-label{font-size:.54rem;top:14px;left:16px}
.lesson-play{width:50px;height:50px;font-size:18px}
.lesson-notes{grid-template-columns:1fr;gap:24px;margin-top:32px}
.lesson-notes>div{padding-bottom:24px;border-bottom:1px solid var(--line)}
.lesson-notes>div:last-child{padding-bottom:0;border:0}
.lesson-notes h3{font-size:1.55rem;margin:10px 0}
.lesson-notes h3 br{display:none}
.lesson-notes p{font-size:.96rem}
.practice{grid-template-columns:1fr;gap:40px}
.practice .button{font-size:.84rem}
.practice-image{margin-inline:5px}
.bonus-grid{grid-template-columns:1fr;gap:26px}
.bonus-card>div:last-child{padding:26px}
.bonus-art,.backing-type{height:280px}
.teacher{grid-template-columns:1fr;gap:36px}
.teacher-photo{max-width:400px;margin:auto}
.teacher-photo>img{aspect-ratio:1.1}
.teacher-copy h2{font-size:2.55rem}
.teacher-copy h2 br:last-child{display:none}
.teacher-copy .eyebrow{font-size:.65rem}
.enrollment{grid-template-columns:1fr;gap:36px}
.enroll-intro h2{font-size:3.2rem}
.enroll-intro>p:last-of-type{font-size:1.08rem;margin-bottom:30px}
.guarantee>span{width:70px;height:70px;font-size:2.8rem}
.guarantee strong{font-size:.88rem}
.guarantee p{font-size:.77rem}
.enroll-card{padding:28px;max-width:none}
.enroll-card>img{width:155px}
.price strong{font-size:4.5rem}
.enroll-card li{font-size:.82rem}
.faq{grid-template-columns:1fr;gap:30px}
.faq h2{font-size:2.8rem}
.faq summary{font-size:.96rem}
.faq details p{font-size:.92rem}
.closing h2{font-size:3.5rem}
.closing .eyebrow{font-size:.63rem}
}

@media(max-width:360px){.hero h1{font-size:3.45rem}
.nav-cta{font-size:.66rem}
.brand img{width:115px}
.world-copy{padding:24px 20px}
.world-copy h3{font-size:1.85rem}
.world-description{font-size:.82rem}
.world-copy ul{font-size:.66rem}
.world-card,.world-journey:not(.is-horizontal) .world-card{min-height:480px}
}

/* Readable secondary labels at every screen size. */
.eyebrow,.hero .eyebrow,.hero .tv-caption .eyebrow,.method .eyebrow,.world-copy>.eyebrow,.world-header .eyebrow,.lesson-notes .eyebrow,.bonus-card .eyebrow,.section-heading .eyebrow,.teacher-copy .eyebrow,.enroll-card>.eyebrow,.closing .eyebrow{font-size:max(.75rem,12px)}

.world-nav button{font-size:.875rem}
.world-nav button span,.world-footnote,.world-listen,.guitar-caption,.scroll-hint,.tape-label>span,.tape-side,.audio-credit,.audio-track>div,.photo-caption,.screen-label,.screen-rec,.backing-type>span,.lesson-video-label{font-size:.75rem}

.hero-fine,.proof-strip,.proof-strip a,footer>div,.enroll-note{font-size:.8125rem}
.world-copy ul,.enroll-card li{font-size:.875rem}
.text-button,.hero .text-button{font-size:.875rem}
.hero .tv-caption .eyebrow{max-width:165px}
.tv-caption{gap:10px}

@media(max-width:1100px){.world-nav{gap:10px 23px}
.world-nav button{font-size:.8125rem}
.world-copy ul{font-size:.8125rem}
.tv-caption .eyebrow{display:none}
.tv-caption{justify-content:center}
.world-card{height:calc(100vh - 255px)}
}

@media(max-width:760px){.world-description{max-width:70%;font-size:.875rem}
.world-copy ul{max-width:72%;font-size:.8125rem}
.world-listen,.world-footnote{max-width:70%;font-size:.75rem}
.world-card,.world-journey:not(.is-horizontal) .world-card{min-height:525px}
.world-art{width:39%;right:-5%}
.world-nav button{font-size:.8125rem}
.tape-label>span,.tape-side{font-size:.75rem}
.tape-label>span{letter-spacing:-.025em}
.tape-label strong{line-height:1.2}
.tape-controls{margin-inline:0}
.audio-track>div{font-size:.7rem}
.hero .tv-caption .eyebrow{display:none}
.screen-label{font-size:.65rem}
.hero .eyebrow{font-size:.7rem}
.hero-fine{font-size:.75rem}
.hero .button{font-size:.94rem}
.method-steps p{font-size:.875rem}
.bonus-card h3{font-size:1.55rem}
}


html{scroll-behavior:auto}
.world-journey{overflow-anchor:none}

.world-art{mix-blend-mode:multiply}

@media(max-width:760px){.world-art img{transform:rotate(10deg) scale(1.85)}
.method h2 em:before{content:' '}
}


#video-container{position:relative}
#video-container:after{content:"";position:absolute;inset:0 0 45px;pointer-events:none;background:repeating-linear-gradient(0deg,#00000009 0 1px,transparent 1px 4px)}


@font-face{font-family:Super;src:url('../fonts/gt-super-text.woff2') format('woff2');font-display:swap}

:root{--paper:#151311;--ink:#f1e8d6;--rust:#e9aa67;--gold:#e9aa67;--muted:#b7b7ac;--line:#ffffff26;--serif:Super,Georgia,serif}
body{background:var(--paper);color:var(--ink)}
body:after{opacity:.035;filter:invert(1)}
em{font-weight:400}
p{line-height:1.6}
.site-header{height:112px;padding:23px 4.6%;background:#151311;border:0}
.brand img{width:153px}
.site-header nav{font-size:14px;gap:35px}
.button{min-height:58px;border-radius:2px;padding:17px 27px;font-size:16px;font-weight:550;gap:35px}
.button.primary,.button.light{background:#e4ac78;color:#181b16}
.eyebrow{font:500 12px/1.5 Geist,Arial,sans-serif;letter-spacing:.13em}
.analogue-hero{position:relative;display:block;max-width:none;overflow:hidden;background:#151311;isolation:isolate;padding:24px 0 55px;min-height:0}
.analogue-heading{text-align:center;position:relative;z-index:2}
.analogue-heading .eyebrow{color:#bcc2b9}
.analogue-heading h1{font-size:clamp(76px,8.3vw,140px);font-weight:500;line-height:.95;letter-spacing:-.065em;margin:28px 0 0}
.analogue-heading em{color:#e9ba85;font-family:Super,Georgia,serif;letter-spacing:-.065em}
.analogue-glow{position:absolute;inset:240px 0 0;background:radial-gradient(ellipse at center,#9e52262b,transparent 65%);z-index:-1}
.television{position:relative;width:min(78vw,950px);margin:14px auto -20px;filter:drop-shadow(0 30px 50px #0008);transform:translateY(var(--tv-y,0px));will-change:transform}
.tv-shell{width:100%;height:auto;pointer-events:none}
.analogue-hero .tv-screen{position:absolute;inset:15.1% 15.2% 28.5%;z-index:2;border-radius:5% / 8%;overflow:hidden;background:#110f0e;transform:none}
.tv-screen video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.82)}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 4px);z-index:2}
.tv-osd{position:absolute;left:7%;right:7%;top:8%;display:flex;justify-content:space-between;z-index:3;font:12px monospace;letter-spacing:.08em;text-shadow:0 0 4px #c5e2b3}
.analogue-hero .tv-play{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);border:1px solid #fff8;background:#161d1545;backdrop-filter:blur(5px);height:72px;width:72px;border-radius:50%;color:#f1e8d6;display:grid;place-items:center;padding-left:5px;z-index:4;font-size:20px}
.screen-caption{position:absolute;bottom:10%;width:100%;text-align:center;font:12px monospace;letter-spacing:.12em;z-index:3}
.tv-left,.tv-right{position:absolute;top:51%;z-index:3;font:12px/1.7 monospace}
.tv-left{left:4.6%;display:flex;gap:17px}
.tv-left>span{font-size:30px}
.tv-left b{color:#d7a26c;font-weight:400}
.tv-right{right:4.6%}
.tv-right>span{font:75px/1 Geist;letter-spacing:-.06em;display:block;margin-bottom:10px}
.analogue-bottom{text-align:center;position:relative;z-index:4}
.analogue-bottom>p:not(.hero-fine){font-size:30px;letter-spacing:-.035em;line-height:1.25;margin-bottom:25px}
.analogue-bottom .hero-fine{font-size:13px;color:#b5b5a9;margin:16px 0 0}
.motion-control{background:none;color:#aead9e;font-size:12px;padding:10px;margin:0 0 14px}
.analogue-hero+.racing-stripes{display:none}

@media(max-width:1000px){.site-header nav{gap:20px}
.tv-left,.tv-right{display:none}
.television{width:90vw}
.analogue-heading h1{font-size:11vw}
}

@media(max-width:600px){.site-header{height:95px;padding:18px 24px}
.brand img{width:116px}
.site-header nav>a:not(.nav-cta){display:none}
.site-header nav{font-size:12px}
.analogue-hero{padding:28px 0 40px}
.analogue-heading{padding:0 14px}
.analogue-heading .eyebrow{font-size:12px;letter-spacing:.07em}
.analogue-heading h1{font-size:clamp(47px,14.7vw,78px);margin-top:24px;line-height:1}
.television{width:124%;max-width:none;left:-12%;margin:25px 0 -8px}
.analogue-hero .tv-play{width:48px;height:48px;font-size:14px}
.tv-osd,.screen-caption{font-size:10px}
.analogue-bottom{padding:0 20px}
.analogue-bottom>p:not(.hero-fine){font-size:27px}
.analogue-bottom .hero-fine{font-size:12px}
.button{font-size:14px;min-height:54px}
}


/* A continuous dark narrative, with room for each idea. */
html{scroll-padding-top:0}
h2{font-size:clamp(55px,6.4vw,100px);line-height:1.04;letter-spacing:-.06em;font-weight:500}
.section-pad{padding:125px 6%}
.proof-strip{border-block:1px solid var(--line);background:#1f1c19;padding:30px 6%;color:#b7b9ad;font-size:14px;gap:35px}
.proof-strip strong{color:#f1e8d6;font-size:23px;letter-spacing:-.04em}
.proof-strip a{color:#e4ac78;font-size:14px}
.story{position:relative;height:145vh;min-height:1050px;background:#151311}
.story-inner{position:sticky;top:12vh;padding:90px 6% 70px;max-width:1550px;margin:auto}
.story .eyebrow{color:#dba875;margin-bottom:35px}
.reveal-copy{font-size:clamp(48px,5.8vw,89px);line-height:1.14;letter-spacing:-.047em;max-width:1300px;font-weight:450}
.reveal-copy span{opacity:.2;transition:opacity .15s linear}
.reveal-copy span.is-lit{opacity:1}
.story-end{color:#aaa99a;font-size:18px;margin-top:37px}
.method{background:#1f1c19;border-block:1px solid var(--line);gap:8%;grid-template-columns:1fr 1fr}
.method h2{font-size:clamp(54px,6.2vw,95px)}
.method .eyebrow{font-size:12px;color:#dfa977;max-width:370px;margin-bottom:28px}
.method-copy>p{font-size:19px;color:#b6bcaf}
.method-copy>p+p{margin-top:22px}
.method-steps{margin-top:40px;border-top:1px solid var(--line);padding-top:30px}
.method-steps span{font-size:13px;color:#b68a5d}
.method-steps strong{font-size:17px;color:#f1e8d6}
.method-steps p{font-size:14px;color:#b1b7aa}
.worlds-intro{text-align:center;padding-block:130px 105px;background:#151311}
.worlds-intro .eyebrow{color:#d8a575;margin-bottom:28px}
.worlds-intro h2{font-size:clamp(70px,8vw,125px);line-height:.97}
.worlds-intro h2 em{color:#e4b17c}
.worlds-intro>p:last-child{font-size:20px;line-height:1.5;color:#b3b8ad;margin-top:30px}
.world-selector{position:sticky;top:0;z-index:15;display:flex;justify-content:space-between;gap:20px;padding:0 6%;height:76px;align-items:center;background:#1e1b19f2;backdrop-filter:blur(18px);border-block:1px solid #fff2;overflow-x:auto;scrollbar-width:none}
.world-selector a{font-size:14px;color:#a7b1a2;white-space:nowrap;display:flex;align-items:center;gap:13px;height:100%;border-bottom:2px solid transparent}
.world-selector a span{font-size:12px;color:#828b7c}
.world-selector a[aria-current=true]{color:#f1e8d6;border-color:#e4ae77}
.world-selector a[aria-current=true] span{color:#e4ae77}

/* Electric worlds: native vertical scrolling, photographic depth. */
.electric-world{--world:#ac4226;--accent:#e9aa67;position:relative;isolation:isolate;overflow:hidden;background:#211e1b;min-height:1020px;height:105svh;max-height:1300px;scroll-margin-top:75px;border-bottom:1px solid #ffffff19}
.world-orbit{position:absolute;width:90vw;height:90vw;max-width:1400px;max-height:1400px;border-radius:50%;right:-34vw;top:-6%;background:radial-gradient(circle at 35% 40%,var(--world),color-mix(in srgb,var(--world) 65%,#151311));transform:translateY(calc(var(--world-y,0px) * -.35));z-index:-1}
.electric-copy{position:relative;z-index:3;padding:70px 0 100px 6%;width:52%;max-width:790px}
.electric-copy>.eyebrow{font-size:12px;color:#e8d8bd;line-height:1.7;letter-spacing:.09em;margin-bottom:40px}
.electric-copy>.eyebrow span{margin:0 12px;opacity:.5}
.electric-copy h3{font-size:clamp(90px,9.7vw,152px);line-height:.86;font-weight:740;letter-spacing:-.075em;margin:0 0 36px}
.electric-copy h3 em{font-family:Geist,Arial,sans-serif;font-style:normal;font-weight:740;color:var(--accent);letter-spacing:-.075em}
.electric-copy .world-description{max-width:420px;width:85%;font-size:19px;line-height:1.55;color:#c7c9bc;position:relative}
.electric-copy ul{list-style:none;padding:0;margin:25px 0 0;max-width:440px;font-size:15px;color:#cccabd;line-height:1.55}
.electric-copy li{margin-top:10px;padding-left:19px;position:relative}
.electric-copy li:before{content:'+';position:absolute;left:0;color:var(--accent)}
.guitar-plane{position:absolute;z-index:2;height:119%;width:79%;right:-10%;top:-9%;pointer-events:none;transform:translate3d(var(--pointer-x,0px),var(--world-y,0px),0) rotate(calc(20deg + var(--guitar-turn,0deg)));will-change:transform}
.guitar-plane>img{width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(-20px 35px 28px #0009)}
.world-margin{position:absolute;right:30px;top:36%;writing-mode:vertical-rl;font:12px monospace;letter-spacing:.08em;z-index:4;color:#e6d8bfbd}
.world-footer{position:absolute;bottom:36px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:5}
.world-footer>span{font-size:30px;font-weight:500;letter-spacing:-.04em}
.world-footer>span>span{font-size:14px;color:#b9bdad;font-weight:400;letter-spacing:0}
.world-footer>a{font-size:14px;color:#f1e8d6}
.world-footer>a>span{margin-left:25px;font-size:23px}
.world-sample{display:flex;align-items:center;gap:17px;padding:17px 23px;background:#211e1be3;backdrop-filter:blur(12px);border:1px solid #d8aa743f;text-align:left;font-size:14px}
.world-sample small{display:block;font-size:12px;color:#b5b5a5;margin-top:5px}
.sample-icon{width:38px;height:38px;border:1px solid #ffffff50;border-radius:50%;display:grid;place-items:center;font-size:12px}
.eq{height:26px;display:flex;align-items:center;gap:3px;margin-left:6px}
.eq i{width:2px;height:6px;background:#e9aa67}
.world-sample[aria-pressed=true] .eq i{animation:eq-bars .65s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.2s!important}
.eq i:nth-child(3){animation-delay:-.5s!important}
.eq i:nth-child(4){animation-delay:-.3s!important}
@keyframes eq-bars{to{height:25px}
}
.world-blues{--world:#3a536f;--accent:#a8c7dc;background:#1f1c1a}
.world-knopfler{--world:#89703a;--accent:#e6bd6f;background:#211e1b}
.world-knopfler .electric-copy h3{font-size:clamp(72px,8vw,127px)}
.world-mayer{--world:#376f67;--accent:#a6d4c7;background:#201d1a}
.world-rock{--world:#792d3e;--accent:#e6a197;background:#211e1b}
.electric-world:nth-of-type(even) .world-orbit{right:auto;left:-33vw}
.electric-world:nth-of-type(even) .electric-copy{margin-left:51%;padding-left:0;width:46%;padding-right:5%;max-width:none}
.electric-world:nth-of-type(even) .guitar-plane{right:auto;left:-15%;transform:translate3d(var(--pointer-x,0px),var(--world-y,0px),0) rotate(calc(-20deg - var(--guitar-turn,0deg)))}
.electric-world:nth-of-type(even) .world-margin{left:30px;right:auto}
.world-blues .guitar-plane{height:112%;top:-7%;width:74%;left:-12%!important}
.world-mayer .guitar-plane{height:117%;top:-10%}
.world-rock .guitar-plane{height:111%;top:-6%}

/* The cassette, lessons and supporting detail share the same palette. */
.listen{background:#1f1c19;border-bottom:1px solid var(--line);gap:6%;padding-block:145px}
.listen h2{font-size:clamp(56px,6.4vw,100px)}
.listen-copy>p:not(.eyebrow){color:#b6bdaf;font-size:18px}
.listen-copy>p.listen-small{font-size:17px;color:#e6b67e}
.cassette{filter:drop-shadow(0 25px 30px #0007)}
.tape-controls{border-color:#ffffff33}
.tape-controls button{border-color:#ffffff40}
.audio-track>div{font-size:13px}
.audio-credit{font-size:12px;color:#b3b6a7}
.experience{background:#151311}
.section-heading{max-width:1100px;margin-bottom:65px}
.section-heading>p:last-child:not(.eyebrow){font-size:20px;color:#b6bcaf}
.lesson-preview{max-width:1400px}
.lesson-video{border-radius:3px}
.lesson-play{color:#1b2018}
.lesson-notes{gap:6%;margin-top:50px}
.lesson-notes h3{font-size:32px;line-height:1.12}
.lesson-notes p{font-size:17px;color:#b0b7a9}
.lesson-notes .eyebrow{font-size:12px}

/* Studio: immersive practice with a useful glimpse of the tool. */
.practice-studio{position:relative;isolation:isolate;overflow:hidden;min-height:1030px;height:105svh;max-height:1250px;background:#100e0c}
.studio-photo{position:absolute;inset:0 0 0 18%;width:104%;transform:translateY(var(--studio-y,0px)) scale(1.06);z-index:-2}
.studio-photo img{width:100%;height:100%;object-fit:cover;object-position:45% 50%;filter:brightness(.65) saturate(.65)}
.studio-shade{position:absolute;inset:0;background:linear-gradient(90deg,#151311f7 0%,#151311c7 28%,#15131126 74%),linear-gradient(0deg,#151311ec,transparent 50%);z-index:-1}
.studio-copy{position:relative;padding:90px 0 100px 6%;max-width:710px;width:55%}
.studio-copy .eyebrow{margin-bottom:40px;color:#e4b983}
.studio-copy h2{font-size:clamp(110px,12.7vw,190px);line-height:.85;letter-spacing:-.075em;font-weight:500}
.studio-copy h2 em{color:#f1c995;letter-spacing:-.075em}
.studio-lead{font-size:24px;line-height:1.35;margin-top:35px;letter-spacing:-.025em}
.studio-description{font-size:17px;line-height:1.6;color:#c7baaa;max-width:420px;margin:23px 0 30px}
.studio-copy .button{background:#f1e8d6}
.studio-preview{position:absolute;right:6%;bottom:115px;width:300px;padding:0;border:1px solid #c7aa775e;background:#151311;box-shadow:0 20px 50px #0008}
.studio-preview img{width:100%;height:185px;object-fit:cover}
.studio-preview>span{display:flex;align-items:center;gap:13px;padding:14px 17px;font:12px/1.4 Geist;color:#e8dcc6}
.studio-preview>span>span{font-size:10px}
.studio-bottom{position:absolute;left:6%;right:6%;bottom:33px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.07em;color:#c6b9a7;gap:30px}
.studio-bottom b{font-weight:400;margin-left:12px;color:#f1e8d6}
.practice-skills{display:grid;grid-template-columns:repeat(3,1fr);gap:7%;padding:65px 6% 75px;background:#1f1c19;border-top:1px solid #ffffff20}
.practice-skills span{font-size:12px;color:#d8a674;letter-spacing:.08em}
.practice-skills h3{font-size:32px;line-height:1.1;margin:18px 0}
.practice-skills p{font-size:17px;color:#bfb4a5}

.bonuses{background:#151311}
.bonus-grid{gap:5%;max-width:1350px;margin:auto}
.bonus-card{background:#271d17;border:1px solid #ffffff26;border-radius:3px;overflow:hidden}
.bonus-card>div:last-child{padding:40px}
.bonus-card h3{font-size:32px;color:#f1e8d6}
.bonus-card p:not(.eyebrow){font-size:17px;color:#b2bcac}
.bonus-art{background:#35261c!important;height:380px}
.backing-type{background:#9e472c!important;color:#f1dec0;height:380px;padding:35px!important}
.backing-type strong{font-size:100px;font-weight:650;line-height:.9}
.backing-type>span{font-size:12px}
.teacher{background:#1f1c19;gap:8%;border:0}
.teacher-photo{max-width:none}
.teacher-copy h2{font-size:clamp(46px,4.6vw,74px)}
.teacher-copy>p:not(.eyebrow){font-size:18px;color:#b9bdad}
.teacher-stat strong{font-size:44px}
.teacher-stat span{font-size:14px;color:#b8bdac}
.photo-caption{font-size:12px}
.enrollment{background:#1f1c19;border-block:1px solid #ffffff25;gap:8%}
.enroll-intro h2{font-size:clamp(64px,6.7vw,108px)}
.enroll-intro>p:last-of-type{font-size:22px;color:#bbc4b1}
.guarantee>span{border-color:#bac1a96e;color:#e5b47b}
.guarantee strong{font-size:17px}
.guarantee p{font-size:14px;color:#b6c0ac}
.enroll-card{background:#1d1a17;border:1px solid #acb89b4f;border-radius:3px;box-shadow:12px 12px 0 #100e0d5c;padding:45px}
.enroll-card>.eyebrow{font-size:12px}
.price strong{font-size:95px}
.price span{font-size:14px;color:#b5bdab}
.enroll-card li{font-size:16px;line-height:1.5;margin:15px 0}
.enroll-card li:before{color:#dda36c}
.enroll-card ul{margin:25px 0;padding:20px 0}
.enroll-note{font-size:14px;color:#b3baa9}
.launch-link{font-size:16px}
.faq{background:#151311;gap:8%}
.faq h2{font-size:clamp(55px,5.7vw,88px)}
.faq summary{font-size:18px;padding-block:29px}
.faq details p{font-size:17px;color:#b3b9ac}
.closing{background:#151311}
.closing>div:last-child{padding:110px 6% 125px}
.closing h2{font-size:clamp(75px,9.5vw,155px);line-height:.98}
.closing .racing-stripes{height:26px;opacity:.7}
.closing .eyebrow{font-size:12px}
body>footer{background:#100e0c;border-top:1px solid #ffffff24;color:#bfc5b4;padding:45px 6%}
body>footer p{font-size:17px}
body>footer>div{font-size:13px}
.mobile-cta{background:#1e1b18f5;color:#f1e8d6;border-color:#ffffff2b;backdrop-filter:blur(12px)}
.mobile-cta a{background:#dfac75;color:#241a13}
.mobile-cta[hidden]{display:none}
dialog{background:#241a14;color:#f1e8d6;border-color:#ffffff40}
.dialog-heading{background:#241a14}
.dialog-close{color:#f1e8d6;background:#ffffff16}
.video-note{color:#b5bbae}
.skip-link{color:#161412}
.motion-paused .guitar-plane,.motion-paused .television,.motion-paused .studio-photo,.motion-paused .world-orbit{transform:none!important}
.motion-paused .guitar-plane{transform:rotate(20deg)!important}
.motion-paused .electric-world:nth-of-type(even) .guitar-plane{transform:rotate(-20deg)!important}
.motion-paused .eq i{animation:none!important}
.motion-paused .reveal-copy span{opacity:1}
.motion-paused .story{height:auto;min-height:0}
.motion-paused .story-inner{position:relative;top:auto}

@media(max-width:1100px){.section-pad{padding:95px 6%}
.electric-world{min-height:960px}
.electric-copy{width:55%;padding-top:70px}
.electric-copy>.eyebrow{font-size:12px;letter-spacing:.03em}
.electric-copy>.eyebrow span{margin:0 5px}
.electric-copy h3{font-size:11vw}
.electric-copy .world-description{font-size:17px;width:89%}
.electric-copy ul{font-size:14px;max-width:350px}
.world-knopfler .electric-copy h3{font-size:9.3vw}
.guitar-plane{right:-23%;width:95%;height:112%;top:-3%}
.electric-world:nth-of-type(even) .electric-copy{margin-left:49%;width:51%;padding-right:4%}
.electric-world:nth-of-type(even) .guitar-plane{left:-32%;width:97%}
.world-blues .guitar-plane{left:-25%!important;width:83%!important}
.world-margin{display:none}
.studio-copy{width:63%;max-width:640px}
.studio-copy h2{font-size:15vw}
.studio-photo{left:7%;width:128%}
.studio-preview{width:230px;right:5%;bottom:90px}
.studio-preview img{height:145px}
.studio-preview>span{font-size:10px}
.studio-description{max-width:360px}
.practice-skills{gap:5%}
.bonus-card>div:last-child{padding:30px}
.teacher-copy h2{font-size:4.7vw}
.enroll-card{padding:30px}
.enroll-card li{font-size:15px}
.world-selector{padding-inline:4%;gap:23px}
.world-selector a{font-size:13px;gap:8px}
}

@media(max-width:760px){h2{font-size:50px}
.section-pad{padding:80px 24px}
.proof-strip{padding:25px 24px;gap:20px;flex-wrap:wrap;align-items:flex-start}
.proof-strip p{font-size:13px;flex:1;min-width:125px}
.proof-strip strong{font-size:20px;display:block}
.proof-strip a{font-size:13px}
.story{height:140vh;min-height:900px}
.story-inner{padding:80px 24px 50px;top:6vh}
.reveal-copy{font-size:clamp(36px,8.7vw,62px);line-height:1.15;letter-spacing:-.045em}
.story .eyebrow{font-size:12px;margin-bottom:29px}
.story-end{font-size:16px;margin-top:30px}
.method{grid-template-columns:1fr;gap:35px}
.method h2{font-size:56px}
.method h2 br{display:block}
.method-copy>p{font-size:17px}
.method .eyebrow{font-size:12px}
.method-steps{gap:16px}
.method-steps strong{font-size:15px}
.method-steps p{font-size:14px}
.worlds-intro{padding:85px 24px}
.worlds-intro h2{font-size:clamp(55px,11vw,85px)}
.worlds-intro>p:last-child{font-size:18px}
.world-selector{height:66px;padding:0 24px;gap:27px;justify-content:flex-start}
.world-selector a{font-size:14px;flex-shrink:0}
.electric-world{height:auto;min-height:1130px;max-height:none;scroll-margin-top:65px}
.electric-copy,.electric-world:nth-of-type(even) .electric-copy{padding:49px 24px 0;margin:0;width:100%;max-width:none}
.electric-copy>.eyebrow{font-size:12px;letter-spacing:.035em;margin-bottom:32px;max-width:95%}
.electric-copy h3{font-size:clamp(85px,17vw,125px);line-height:.85;margin-bottom:28px}
.world-knopfler .electric-copy h3{font-size:clamp(65px,13.7vw,104px)}
.electric-copy .world-description{font-size:17px;max-width:450px;width:94%;line-height:1.55}
.electric-copy ul{font-size:14px;max-width:390px;margin-top:22px;line-height:1.5}
.electric-copy li{margin-top:8px}
.world-orbit,.electric-world:nth-of-type(even) .world-orbit{width:900px;height:900px;top:560px;right:-420px;left:auto;max-width:none;max-height:none}
.guitar-plane,.electric-world:nth-of-type(even) .guitar-plane,.world-blues .guitar-plane,.world-rock .guitar-plane,.world-mayer .guitar-plane{height:800px;width:660px!important;right:-130px;left:auto!important;top:510px;transform:translate3d(0,var(--world-y,0px),0) rotate(calc(29deg + var(--guitar-turn,0deg)));z-index:2}
.world-blues,.world-rock{min-height:1250px}
.world-blues .world-orbit,.world-rock .world-orbit{top:650px}
.world-blues .guitar-plane,.world-rock .guitar-plane{top:620px}
.world-knopfler .guitar-plane{top:580px}
.world-knopfler{min-height:1200px}
.world-footer{left:24px;right:24px;bottom:28px;align-items:flex-end}
.world-footer>span{font-size:25px}
.world-footer>span>span{font-size:12px}
.world-footer>a{font-size:13px;background:#1e1b18c9;padding:13px}
.world-footer>a>span{margin-left:14px}
.world-sample{padding:12px;gap:10px;max-width:290px;font-size:13px}
.world-sample small{font-size:11px}
.sample-icon{width:30px;height:30px;font-size:10px}
.eq{margin-left:1px}
.world-gilmour .world-footer>span{display:none}
.world-gilmour .world-footer{justify-content:flex-start}
.listen{gap:45px;padding-block:85px}
.listen h2,.section-heading h2{font-size:50px}
.listen-copy>p:not(.eyebrow){font-size:17px}
.cassette{width:110%;margin-left:-5%}
.tape-label>span{font-size:11px;letter-spacing:-.02em}
.tape-label strong{font-size:25px}
.tape-side{font-size:11px}
.tape-controls{margin:18px 0 0;gap:8px}
.audio-track>div{font-size:11px}
.audio-credit{font-size:12px}
.experience .section-heading{margin-bottom:35px}
.section-heading>p:last-child:not(.eyebrow){font-size:18px}
.lesson-notes{gap:30px}
.lesson-notes h3{font-size:28px}
.lesson-notes p{font-size:17px}
.lesson-video-label{font-size:10px}
.practice-studio{height:auto;min-height:1160px;max-height:none}
.studio-photo{left:-17%;top:0;width:145%;height:720px}
.studio-photo img{object-position:45% 20%;filter:brightness(.8) saturate(.7)}
.studio-shade{background:linear-gradient(0deg,#100e0c 17%,#151311f5 43%,#15131117 80%,#15131140)}
.studio-copy{position:relative;padding:410px 24px 0;width:100%;max-width:none}
.studio-copy .eyebrow{font-size:12px;margin-bottom:25px}
.studio-copy h2{font-size:clamp(100px,22vw,150px);line-height:.86;max-width:580px}
.studio-lead{font-size:23px;margin-top:28px}
.studio-description{font-size:17px;max-width:470px;margin:23px 0 27px}
.studio-preview{position:relative;right:auto;bottom:auto;margin:38px 24px 105px;width:calc(100% - 48px);max-width:470px;display:flex;align-items:center;text-align:left}
.studio-preview img{width:43%;height:104px;object-fit:cover}
.studio-preview>span{font-size:12px;line-height:1.6;display:block;padding:15px}
.studio-preview>span>span{display:block;margin-bottom:5px}
.studio-bottom{bottom:35px;left:24px;right:24px;font-size:11px;letter-spacing:.03em;gap:20px;line-height:1.5}
.studio-bottom b{display:block;margin:0}
.practice-skills{grid-template-columns:1fr;gap:35px;padding:60px 24px}
.practice-skills h3{font-size:31px;margin:14px 0}
.practice-skills p{font-size:17px}
.practice-skills>div+div{padding-top:30px;border-top:1px solid #ffffff23}
.bonus-card>div:last-child{padding:28px}
.bonus-card h3{font-size:28px}
.bonus-card p:not(.eyebrow){font-size:17px}
.bonus-art,.backing-type{height:320px}
.teacher{gap:40px}
.teacher-photo{width:100%;max-width:480px}
.teacher-copy h2{font-size:clamp(43px,8.5vw,60px)}
.teacher-copy>p:not(.eyebrow){font-size:17px}
.teacher-stat strong{font-size:38px}
.teacher-stat span{font-size:13px}
.enroll-intro h2{font-size:clamp(58px,10vw,80px)}
.enroll-intro>p:last-of-type{font-size:20px}
.guarantee p{font-size:14px}
.guarantee strong{font-size:16px}
.enroll-card{padding:30px 25px}
.enroll-card li{font-size:16px}
.price strong{font-size:87px}
.faq h2{font-size:52px}
.faq summary{font-size:17px}
.faq details p{font-size:16px}
.closing h2{font-size:clamp(58px,11vw,85px)}
.closing>div:last-child{padding:85px 24px}
.closing .eyebrow{font-size:12px}
body>footer{padding:40px 24px 100px}
body>footer>div{font-size:13px}
.mobile-cta{padding-inline:20px}
.mobile-cta span{font-size:13px}
.mobile-cta a{font-size:13px}
.motion-paused .electric-world:nth-of-type(even) .guitar-plane,.motion-paused .guitar-plane{transform:rotate(29deg)!important}
}

@media(prefers-reduced-motion:reduce){.guitar-plane,.television,.studio-photo,.world-orbit{will-change:auto;transform:none!important}
.guitar-plane{transform:rotate(20deg)!important}
.electric-world:nth-of-type(even) .guitar-plane{transform:rotate(-20deg)!important}
.reveal-copy span{opacity:1;transition:none}
.story{height:auto;min-height:0}
.story-inner{position:relative;top:auto}
.eq i{animation:none!important}
}


.analogue-heading h1 em{font-size:1em;line-height:inherit;margin-top:0;white-space:normal;color:#e9ba85}
.analogue-hero .tv-play{margin:0;right:auto;bottom:auto}
.analogue-hero .tv-play:hover{transform:translate(-50%,-50%) scale(1.06)}

.listen{overflow:hidden}
.mobile-cta:not([hidden]){transform:translateY(0)}

/* Sales-page refinements. */
[hidden]{display:none!important}
.analogue-heading h1{font-size:clamp(66px,7.5vw,124px)}
.analogue-bottom{padding-bottom:25px}
.analogue-hero{padding-bottom:85px}
.hero-bands{position:absolute;bottom:0;right:-90px;width:440px;transform:rotate(32deg) translateY(30px);transform-origin:bottom right;z-index:0;pointer-events:none;opacity:.85}
.hero-bands i{display:block;height:24px;background:#efbb55}
.hero-bands i:nth-child(2){background:#e99a43}
.hero-bands i:nth-child(3){background:#d65c38}
.hero-bands i:nth-child(4){background:#a83c43}
.hero-bands i:nth-child(5){background:#6d3047}
.struggle{background:#1f1c19;border-block:1px solid #f1e8d621}
.struggle-heading .eyebrow{color:#deb07c;margin-bottom:27px}
.struggle-heading h2{font-size:clamp(56px,6.1vw,96px)}
.struggle-layout{display:grid;grid-template-columns:1fr 1.13fr;gap:8%;margin-top:65px;align-items:start}
.struggle-tabs{border-top:1px solid #f1e8d630}
.struggle-tabs button{position:relative;display:flex;gap:23px;align-items:center;text-align:left;width:100%;min-height:102px;background:transparent;color:#ada298;border-bottom:1px solid #f1e8d630;padding:23px 16px 23px 0}
.struggle-tabs button>span{font-size:13px;color:#bb9471}
.struggle-tabs strong{font-size:clamp(20px,1.8vw,28px);font-weight:450;letter-spacing:-.03em}
.struggle-tabs button[aria-selected=true]{color:#f1e8d6}
.struggle-tabs button i{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#e6ab74;transform-origin:left;transform:scaleX(0)}
.struggle-tabs button[aria-selected=true] i{transform:scaleX(var(--tab-progress,0))}
.struggle-panels{position:relative;min-height:345px;padding-top:3px}
.struggle-panel h3{font-size:clamp(28px,3vw,47px);font-weight:450;line-height:1.15;margin-bottom:25px;letter-spacing:-.045em}
.struggle-panel h3 em{color:#e9b883}
.struggle-panel p{font-size:19px;color:#c6b9aa;max-width:530px}
.struggle-panel .panel-takeaway{color:#e8b580;font-size:16px;margin-top:23px}
.panel-number{display:block;font-size:13px;letter-spacing:.12em;color:#c89a70;margin-bottom:20px}
.tabs-pause{font-size:12px;color:#bcaa98;background:transparent;padding:15px 0;margin-top:25px}
.world-preview{background:transparent;border:1px solid #e9cfac6b;color:#f1e8d6;margin-top:28px;font-size:14px;min-height:54px;padding:15px 22px}
.world-preview:hover{background:#ffffff0c}
.electric-world{min-height:1060px}
.tape-navigation{display:flex;align-items:center;justify-content:space-between;margin:0 3% 25px;gap:15px}
.tape-navigation button{background:none;border:1px solid #b69a7366;border-radius:50%;height:46px;width:46px;font-size:22px;flex-shrink:0}
.tape-navigation span{font-size:13px;letter-spacing:.025em;color:#c3b29f;text-align:center}
.tape-player{--tape-accent:#e6b47d}
.tape-label strong{color:#322b22}
.tape-dots{display:flex;justify-content:center;gap:14px;margin-top:24px}
.tape-dots button{height:38px;width:38px;border-radius:50%;border:1px solid #a8866250;background:none;color:#b0a08c;font-size:12px}
.tape-dots button[aria-pressed=true]{background:var(--tape-accent);color:#211610;border-color:var(--tape-accent)}
.tape-player[data-tape="1"]{--tape-accent:#afc6dd}
.tape-player[data-tape="2"]{--tape-accent:#d3b666}
.tape-player[data-tape="3"]{--tape-accent:#b6d1c9}
.tape-player[data-tape="4"]{--tape-accent:#dc9b9a}
.tape-player[data-tape="1"] .tape-label strong{color:#294865}
.tape-player[data-tape="2"] .tape-label strong{color:#6e481f}
.tape-player[data-tape="3"] .tape-label strong{color:#2e5c55}
.tape-player[data-tape="4"] .tape-label strong{color:#7e2c38}
.tape-reel{position:absolute;top:37.08%;width:11.715%;aspect-ratio:1;border-radius:50%;background-image:url('../img/vintage-cassette.webp');background-size:853.66% auto;animation:reel-spin 12s linear infinite;animation-play-state:paused;pointer-events:none;z-index:2}
.reel-left{left:24.215%;background-position:27.43% 44.99%}
.reel-right{left:64.285%;background-position:72.81% 44.99%}
.cassette.playing .tape-reel{animation-play-state:running}
@keyframes reel-spin{to{transform:rotate(360deg)}
}
.tape-player [aria-disabled=true],.tape-player button:disabled{cursor:default;opacity:.55}
.tape-player input:disabled{opacity:.35}
.lesson-video .ambient-video{width:100%;height:auto;aspect-ratio:1500/844;object-fit:cover}
.preview-pending{aspect-ratio:16/9;background:#1f1c19;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px;text-align:center;gap:18px}
.preview-pending .eyebrow{color:#e3ae76}
.preview-pending h3{font-size:clamp(25px,3vw,44px);font-weight:450;letter-spacing:-.04em}
.preview-pending p{color:#c8b7a6;font-size:16px}
.preview-pending .button{margin-top:10px;min-height:48px;font-size:14px}
#video-container:has(.preview-pending):after{display:none}
.launch-link{display:flex;justify-content:space-between}
#join-dialog{width:min(460px,calc(100vw - 32px));padding:45px 32px;border:1px solid #b7966b66;background:#211e1b;color:#f1e8d6;border-radius:3px}
#join-dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
#join-dialog>img{width:155px;height:auto;margin-bottom:28px}
#join-dialog h2{font-size:43px}
#join-dialog p{font-size:16px}
#join-dialog .join-price{font-size:75px;letter-spacing:-.06em;margin:25px 0 10px}
#join-dialog .join-price span{font-size:14px;letter-spacing:0}
.join-message{margin:24px 0;color:#cdb9a2}
.join-close{position:absolute;right:15px;top:10px;background:none;color:#f1e8d6;font-size:29px}
.join-back{width:100%;justify-content:center}
.tape-player .audio-credit{min-height:36px}
.world-sample{background:#211e1be3}
.world-footer>a{color:#f1e8d6}
.mobile-cta:not([hidden]){transform:translateY(0)}

@media(max-width:760px){.analogue-heading h1{font-size:clamp(42px,10.7vw,73px)}
.hero-bands{width:190px;right:-70px;transform:rotate(32deg) translateY(80px);opacity:.65}
.hero-bands i{height:13px}
.analogue-hero{padding-bottom:95px}
.analogue-bottom{padding-top:22px;padding-bottom:0}
.struggle-heading h2{font-size:clamp(43px,8.5vw,61px)}
.struggle-layout{grid-template-columns:1fr;gap:36px;margin-top:38px}
.struggle-tabs button{min-height:83px;gap:17px}
.struggle-tabs strong{font-size:21px}
.struggle-panels{min-height:365px}
.struggle-panel h3{font-size:32px}
.struggle-panel p{font-size:17px}
.struggle-panel .panel-takeaway{font-size:16px}
.tabs-pause{margin-top:10px}
.world-preview{margin-top:23px}
.electric-world{min-height:1240px}
.world-blues,.world-rock{min-height:1380px}
.world-knopfler{min-height:1330px}
.guitar-plane,.electric-world:nth-of-type(even) .guitar-plane,.world-mayer .guitar-plane{top:635px}
.world-knopfler .guitar-plane{top:710px}
.world-blues .guitar-plane,.world-rock .guitar-plane{top:745px}
.world-orbit,.electric-world:nth-of-type(even) .world-orbit{top:680px}
.world-blues .world-orbit,.world-rock .world-orbit{top:780px}
.tape-navigation{margin:0 0 32px;gap:10px}
.tape-navigation span{font-size:12px}
.tape-navigation button{width:43px;height:43px}
.tape-dots{gap:12px}
.tape-label strong{font-size:clamp(21px,6vw,33px)}
.preview-pending{aspect-ratio:auto;min-height:310px;padding:28px 18px}
.preview-pending h3{font-size:28px}
.preview-pending p{font-size:15px}
.studio-copy .button{font-size:14px;padding-inline:19px;gap:25px}
}

@media(prefers-reduced-motion:reduce){.tape-reel{animation:none!important}
.struggle-tabs button i{transition:none}
}


.tape-player[data-tape="4"] .tape-label strong{font-size:clamp(17px,2vw,28px)}


/* Cream paper, graphite equipment, and the five original logo inks. */
:root{--cream:#f4ebd9;--charcoal:#151311;--orange:#ea6f1c;--orange-deep:#c4502a;--rust:var(--orange);--gold:var(--orange);--muted:#b5b8ba}

.site-header,.analogue-hero{background:var(--cream);color:#23201d}

.site-header .nav-cta{color:#23201d!important;border-color:#23201d55}

.analogue-heading .eyebrow,.analogue-bottom .hero-fine{color:#656057}

.analogue-heading h1 em{color:#c4502a}

.analogue-glow{background:radial-gradient(ellipse at center,#d5c5a655,transparent 65%)}

.television{filter:drop-shadow(0 22px 30px #29231b30)}

.tv-left b{color:#c4502a}

.tv-screen{color:#f4ebd9}

.tv-hit-target{position:absolute;inset:0;z-index:4;width:100%;height:100%;background:transparent;border:0;border-radius:5%;padding:0}

.tv-hit-target:focus-visible{outline:3px solid var(--orange);outline-offset:-5px}

.hero-bands{position:absolute;right:0;bottom:0;width:clamp(190px,25vw,380px);transform:none;opacity:1;z-index:1;display:flex;flex-direction:column;align-items:flex-end}

.hero-bands i{height:15px;width:100%;background:#fab01e}

.hero-bands i:nth-child(2){width:89%;background:#ea6f1c}

.hero-bands i:nth-child(3){width:96%;background:#c31a26}

.hero-bands i:nth-child(4){width:100%;background:#95193c}

.hero-bands i:nth-child(5){width:84%;background:#4f1136}

.analogue-bottom{padding-bottom:25px}

.button.primary,.button.light,.mobile-cta a{background:var(--orange);color:#1c1916;border:1px solid #a74617;border-top-color:#ffab5b;box-shadow:0 5px 0 #a64118,0 8px 0 #0002;font-weight:600}

.button.primary:hover,.button.light:hover,.mobile-cta a:hover{background:#f38132;transform:translateY(-1px)}

.button.primary:active,.button.light:active,.mobile-cta a:active{transform:translateY(3px);box-shadow:0 2px 0 #a64118}

.struggle{background:var(--cream);color:#23201d;border-color:#d2c8b6}

.struggle-heading .eyebrow,.panel-number{color:#a23d1c}

.struggle-tabs{border-color:#23201d30}

.struggle-tabs button{color:#716b61;border-color:#23201d30}

.struggle-tabs button>span{color:#857567}

.struggle-tabs button[aria-selected=true]{color:#23201d}

.struggle-tabs button[aria-selected=true]>span{color:#c4502a}

.struggle-tabs button i{background:var(--orange)}

.struggle-panel h3 em{color:#bd4d24}

.struggle-panel p{color:#61594f}

.struggle-panel .panel-takeaway{color:#a23d1c}

.tabs-pause{color:#655b50}

.world-preview{background:#f8f2e6;color:#25221f;border:1px solid #b8b3a8;border-top:2px solid #fffdf8;box-shadow:0 5px 0 #a9a59c,0 7px 0 #0b0a09;border-radius:3px;padding:15px 22px;font-weight:600;gap:38px}

.world-preview>span{font-size:12px;border-left:1px solid #b8b3a8;padding-left:20px;line-height:22px}

.world-preview:hover{background:#fffaf0;transform:translateY(-1px)}

.world-preview:active{transform:translateY(3px);box-shadow:0 2px 0 #a9a59c,0 4px 0 #0b0a09}

.proof-strip a,.story .eyebrow,.worlds-intro .eyebrow,.listen .eyebrow,.experience .eyebrow,.bonuses .eyebrow,.teacher-copy .eyebrow,.enrollment .eyebrow,.faq .eyebrow,.closing .eyebrow{color:#f08a45}

.world-selector a[aria-current=true]{border-color:var(--orange)}

.world-selector a[aria-current=true] span{color:var(--orange)}

.tape-controls #audio-play{background:var(--orange);color:#151311;border-color:#ef9b5f;box-shadow:0 3px 0 #a64118}

.tape-player{--tape-accent:var(--orange)}

.tape-reel{background-color:#151311}

.tape-controls input{accent-color:var(--orange)}

body>footer,.video-note,.world-selector a,.world-footer>span>span{color:#b8bdc1}

.enroll-card{border-color:#ffffff26;box-shadow:12px 12px 0 #0f0d0c5c}

@media(max-width:760px){
 .hero-bands{width:160px;right:0;bottom:0;transform:none;opacity:1}

 .hero-bands i{height:10px}

 .analogue-bottom{padding-bottom:0}

 .analogue-hero{padding-bottom:95px}

 .world-gilmour .world-footer{justify-content:space-between}

}


@media(max-width:1000px){
 .struggle-layout{display:block;margin-top:38px}

 .struggle-panels{display:none}

 .struggle-tabs>.struggle-panel{padding:28px 0 32px 34px;border-bottom:1px solid #23201d30}

 .struggle-panel h3{font-size:32px;max-width:650px}

 .struggle-panel p{font-size:17px;max-width:650px}

 .struggle-tabs .panel-number{display:none}

 .struggle-tabs button[aria-expanded=true]{color:#23201d}

 .struggle-tabs button[aria-expanded=true]>span{color:#c4502a}

 .struggle-tabs button[aria-expanded=true] i{transform:scaleX(var(--tab-progress,0))}

 .tabs-pause{margin-top:10px}

}


/* Supplied curved-screen CRT: the video sits behind the transparent bezel. */
.television{width:min(90vw,1050px);margin:24px auto 20px}

.tv-shell{position:relative;z-index:3}

.analogue-hero .tv-screen{inset:13% 18% 19%;z-index:2;border-radius:13% / 10%}

.tv-screen:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,#0005 100%),linear-gradient(135deg,#e6f3ff10,transparent 32%)}

@media(max-width:600px){.television{width:124%;left:-12%;margin:25px 0 0}
}


/* Student video stories: paper sleeves and analogue monitor previews. */
.student-results{background:var(--cream);color:#23201d;border-block:1px solid #d2c8b6}

.results-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:65px}

.results-heading .eyebrow{color:#a23d1c;margin-bottom:25px}

.results-heading h2{font-size:clamp(60px,7vw,108px);line-height:1}

.results-heading h2 em{color:#c4502a}

.results-mark{font:11px/1.7 var(--mono);letter-spacing:.06em;color:#766c5d;text-align:right;padding-bottom:8px}

.results-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}

.result-screen{position:relative;width:100%;aspect-ratio:4/3;display:block;overflow:hidden;background:#1a1815;border:9px solid #312d28;border-bottom-width:18px;border-radius:8px;box-shadow:0 3px 0 #13110f,0 14px 20px #21180f18;padding:0;color:var(--cream)}

.result-screen:disabled{cursor:default;opacity:1}

.result-screen:not(:disabled):hover .result-play{background:var(--orange);color:#1c1916;transform:translate(-50%,-50%) scale(1.05)}

.result-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.result-standby{position:absolute;inset:0;background:radial-gradient(ellipse,#463f39 0%,#1e1c19 75%)}

.result-bars{position:absolute;inset:32% 0 30%;opacity:.58;background:linear-gradient(90deg,#fab01e 0 20%,#ea6f1c 20% 40%,#c31a26 40% 60%,#95193c 60% 80%,#4f1136 80%)}

.result-screen:after{content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;box-shadow:inset 0 0 30px #0008;background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 4px)}

.result-osd{position:absolute;inset:20px 18px auto;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.08em;color:#f4ebd9a6}

.result-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;display:grid;place-items:center;padding-left:3px;border:1px solid #f4ebd985;color:#f4ebd9;background:#151311bd;font-size:18px;transition:background .2s,transform .2s;z-index:1}

.result-status{position:absolute;inset:auto 12px 17px;z-index:2;text-align:center;font:11px var(--mono);letter-spacing:.02em;color:#d3d6d6}

.result-screen.has-poster .result-standby{background:none}

.result-screen.has-poster .result-bars,.result-screen.has-poster .result-osd{display:none}

.result-screen.has-poster .result-status{padding:9px;background:#151311c9}

.result-caption{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding-top:26px}

.result-number{font:12px/1.8 var(--mono);color:#a23d1c}

.result-caption h3{font-size:21px;line-height:1.3;letter-spacing:-.025em;font-weight:500}

.result-caption p{grid-column:2;font-size:16px;line-height:1.5;color:#635d53;margin-top:12px}

.results-pending{margin-top:32px;color:#766c5d;font-size:13px}

@media(max-width:1000px){.results-grid{gap:20px}
.results-mark{display:none}
.result-screen{border-width:6px;border-bottom-width:13px}
.result-osd{inset:13px 10px auto;font-size:8px}
.result-play{height:42px;width:42px;font-size:14px}
.result-status{font-size:10px;bottom:12px}
.result-caption{grid-template-columns:23px 1fr;gap:6px}
.result-caption h3{font-size:18px}
}

@media(max-width:760px){.results-heading{margin-bottom:40px}
.results-heading h2{font-size:clamp(48px,12.5vw,75px)}
.results-grid{grid-template-columns:1fr;gap:38px}
.result-screen{aspect-ratio:16/11;border-width:8px;border-bottom-width:16px}
.result-osd{inset:20px 18px auto;font-size:10px}
.result-play{width:58px;height:58px;font-size:18px}
.result-status{font-size:11px;bottom:17px}
.result-caption{padding-top:22px;grid-template-columns:30px 1fr;gap:10px}
.result-caption h3{font-size:21px}
.results-pending{margin-top:26px}
}


/* Clear, readable copy with fewer decorative labels. */
.hero-intro{font-size:18px;color:#625c52}

.struggle-layout{grid-template-columns:1fr 1.1fr;gap:7%}
.struggle-tabs strong{font-size:clamp(23px,2vw,30px);line-height:1.3}
.struggle-tabs button{min-height:110px}
.struggle-tabs button>span{font-size:17px}
.struggle-panel p{font-size:clamp(24px,2.2vw,32px);line-height:1.5;color:#332f29;max-width:670px;letter-spacing:-.025em}
.struggle-panels{min-height:350px;padding-top:13px}

.worlds-intro h2{font-size:clamp(72px,8vw,125px)}
.worlds-intro .worlds-tagline{font-size:clamp(27px,3vw,42px);line-height:1.3;color:#f1e8d6;margin:36px auto 23px;letter-spacing:-.035em}
.worlds-intro .worlds-description{max-width:820px;font-size:24px;line-height:1.6;color:#c9cccd;margin:0 auto}

.world-label{font-size:18px;line-height:1.5;color:#e8dcc6;margin-bottom:36px;letter-spacing:.015em}
.world-label span{margin:0 10px;opacity:.55}
.electric-copy h3,.world-knopfler .electric-copy h3{font-size:clamp(70px,8.2vw,124px);line-height:.95;letter-spacing:-.06em}
.electric-copy h3 em{letter-spacing:-.06em}
.electric-copy .world-description{font-size:22px;line-height:1.6;width:92%;max-width:540px;color:#d4d6d5}
.electric-copy ul{font-size:20px;line-height:1.55;max-width:530px;color:#eee6d8;margin-top:28px}
.electric-copy li{margin-top:14px;padding-left:24px}
.world-preview{font-size:18px;min-height:59px}
.world-selector a{font-size:16px}
.world-selector a span{font-size:14px}
.world-footer>a{font-size:17px}

.track-label{font-size:18px;line-height:1.5;color:#f08a45;margin-bottom:26px}
.listen-copy>p:not(.track-label){font-size:22px;line-height:1.6;color:#d1d3cf}
.listen-copy .listen-small{font-size:21px;color:#edb880}
.tape-navigation span{font-size:16px}
.audio-credit{font-size:14px!important}
.audio-track>div{font-size:15px!important}
.tape-dots button{font-size:15px;min-width:42px;min-height:42px}

.lesson-notes p,.practice-skills p,.bonus-card p:not(.eyebrow),.teacher-copy>p:not(.eyebrow){font-size:21px;line-height:1.6;color:#cbd0ce}
.section-heading>p{font-size:22px}
.lesson-video-label,.practice-skills span{font-size:16px}

.studio-copy{max-width:800px;width:61%;padding-top:100px;padding-bottom:110px}
.studio-copy h2{font-size:clamp(80px,8.3vw,128px);line-height:1;letter-spacing:-.06em}
.studio-copy h2 em{letter-spacing:-.06em}
.studio-copy .studio-lead{font-size:28px;line-height:1.4;margin-top:35px}
.studio-copy .studio-description{font-size:22px;line-height:1.6;max-width:570px}
.studio-copy .button{font-size:18px}
.practice-studio{min-height:850px;height:auto;max-height:none}

.results-heading{display:block;text-align:center;margin-bottom:55px}
.results-heading h2{font-size:clamp(60px,7vw,108px)}
.results-grid{--slide-size:min(72vw,740px);display:flex;gap:34px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc((100% - var(--slide-size))/2) 22px;scroll-padding-inline:calc((100% - var(--slide-size))/2);overscroll-behavior-x:contain}
.results-grid::-webkit-scrollbar{display:none}
.result-card{flex:0 0 var(--slide-size);min-width:0;scroll-snap-align:center;opacity:.48;transition:opacity .2s}
.result-card.is-current{opacity:1}
.result-screen{aspect-ratio:16/10}
.result-osd{font-size:14px}
.result-status{font-size:16px;bottom:22px}
.result-caption h3{font-size:24px}
.result-number{font-size:16px}
.results-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:16px}
.results-controls button{width:58px;height:50px;display:grid;place-items:center;font-size:25px;background:#f9f2e4;color:#292521;border:1px solid #aaa397;border-top-color:#fff;box-shadow:0 5px 0 #aaa397;border-radius:3px}
.results-controls button:disabled{opacity:.35;cursor:default}
.results-controls span{font-size:17px;min-width:50px;text-align:center;color:#5d554a}
.results-pending{text-align:center;font-size:16px;margin-top:28px}

.bonus-card{background:#1f1c19}
.bonus-card h3{font-size:34px}
.bonus-art{background:#e9ddc3!important;height:440px;overflow:hidden;padding:0!important}
.playbook-stack{position:relative;height:100%;max-width:610px;margin:auto;perspective:1100px}
.playbook-cover{position:absolute;width:218px;height:315px;background:#0a0908;color:#f5eedc;top:68px;left:50%;padding:28px 25px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:2px 17px 17px 2px;box-shadow:inset 7px 0 0 #ffffff0a,inset 9px 0 0 #000b,0 18px 25px #30271c45;font-family:Super,Georgia,serif}
.playbook-cover svg{position:absolute;right:20px;top:22px;width:30px;height:69px}
.playbook-cover>span{font-size:18px;margin-bottom:15px}
.playbook-cover strong{font-size:33px;line-height:1.12;font-weight:500;letter-spacing:-.025em}
.playbook-cover i{width:35px;height:4px;background:#c4502a;margin-top:18px}
.playbook-cover.front{transform:translateX(-50%) rotate(-4deg);z-index:3}
.playbook-cover.back-left{transform:translateX(-104%) rotate(-12deg) scale(.91);z-index:1;top:72px}
.playbook-cover.back-right{transform:translateX(4%) rotate(11deg) scale(.91);z-index:2;top:72px}

.teacher-copy h2{font-size:clamp(56px,5.7vw,86px);margin-bottom:32px}
.teacher-copy h2 em{color:#efb773}
.teacher-stat span{font-size:18px;line-height:1.5}
.course-label{font-size:19px;color:#cbd0ce}
.enroll-intro>p:last-of-type{font-size:24px;color:#ced0cc}
.enroll-card li{font-size:19px;line-height:1.6}
.enroll-note,.guarantee p{font-size:16px}
.guarantee strong{font-size:19px}
.faq summary{font-size:21px}
.faq details p{font-size:20px;line-height:1.6;color:#cbd0ce}
.proof-strip,.proof-strip a{font-size:17px}
.story-end{font-size:22px}
body>footer>div{font-size:15px}
body>footer>p{font-size:25px}
.hero-fine{font-size:16px!important}

/* The bottom edge compresses on hover, like a physical key. */
.button,.mobile-cta a,.results-controls button,.tape-navigation button,.tape-dots button,.tape-controls button,.dialog-close,.join-close{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.button.primary:hover,.button.light:hover,.mobile-cta a:hover{transform:translateY(5px);box-shadow:0 0 0 #a64118;background:#f38132}
.button.primary:active,.button.light:active,.mobile-cta a:active{transform:translateY(6px);box-shadow:none}
.button.world-preview:hover{transform:translateY(5px);box-shadow:0 0 0 #a9a59c,0 2px 0 #0b0a09;background:#fffaf0}
.button.world-preview:active{transform:translateY(7px);box-shadow:none}
.results-controls button:not(:disabled):hover{transform:translateY(5px);box-shadow:none;background:#fff9ee}
.tape-navigation button,.tape-dots button,.tape-controls button{box-shadow:0 3px 0 #0a0908}
.tape-navigation button:hover,.tape-dots button:hover,.tape-controls button:hover,.tape-controls #audio-play:hover{transform:translateY(3px);box-shadow:none}
.dialog-close:hover,.join-close:hover{transform:translateY(3px)}
.cassette:hover{transform:rotate(-6deg) translateY(4px)}
.result-screen:not(:disabled):hover{transform:translateY(4px)}
.result-screen:not(:disabled):hover .result-play{transform:translate(-50%,-50%)}

@media(max-width:1100px){.electric-copy h3,.world-knopfler .electric-copy h3{font-size:7.8vw}
.electric-copy .world-description{font-size:21px}
.electric-copy ul{font-size:19px}
.playbook-cover{width:180px;height:280px;padding:25px 21px}
.playbook-cover strong{font-size:29px}
.playbook-cover>span{font-size:16px}
.studio-copy{width:65%}
.studio-copy h2{font-size:8.6vw}
}

@media(max-width:1000px){.struggle-panel p{font-size:25px}
.struggle-tabs>.struggle-panel{padding:26px 0 34px 34px}
.results-grid{--slide-size:72vw;gap:24px}
.result-card{flex-basis:var(--slide-size)}
.result-screen{border-width:8px;border-bottom-width:16px}
.result-play{width:58px;height:58px;font-size:20px}
.result-osd{font-size:12px}
.result-status{font-size:15px}
}

@media(max-width:900px){.electric-world{height:auto;min-height:0;max-height:none;padding-bottom:860px}
.electric-copy,.electric-world:nth-of-type(even) .electric-copy{padding:55px 6% 0;margin:0;width:100%;max-width:none}
.electric-copy h3,.world-knopfler .electric-copy h3{font-size:clamp(57px,12vw,105px);line-height:.97;max-width:700px}
.world-label{font-size:17px;margin-bottom:28px}
.world-label span{margin-inline:5px}
.electric-copy .world-description{width:100%;max-width:650px;font-size:21px}
.electric-copy ul{max-width:650px;font-size:20px;line-height:1.6}
.guitar-plane,.electric-world:nth-of-type(even) .guitar-plane,.world-blues .guitar-plane,.world-knopfler .guitar-plane,.world-rock .guitar-plane,.world-mayer .guitar-plane{height:800px;width:660px!important;right:-130px;left:auto!important;top:auto!important;bottom:0;transform:translate3d(0,var(--world-y,0px),0) rotate(calc(29deg + var(--guitar-turn,0deg)))}
.world-orbit,.electric-world:nth-of-type(even) .world-orbit{width:820px;height:820px;top:auto;bottom:70px;right:-550px}
}

@media(max-width:760px){.hero-intro{font-size:16px}
.struggle-tabs strong{font-size:23px}
.struggle-tabs button{min-height:90px;gap:14px}
.struggle-panel p{font-size:23px;line-height:1.55}
.struggle-tabs>.struggle-panel{padding:24px 0 32px}
.worlds-intro{padding-block:85px}
.worlds-intro h2{font-size:clamp(52px,13vw,85px)}
.worlds-intro .worlds-tagline{font-size:27px;margin-block:30px 24px}
.worlds-intro .worlds-description{font-size:21px;line-height:1.6;text-align:left}
.world-label{font-size:16px}
.electric-copy h3,.world-knopfler .electric-copy h3{font-size:clamp(49px,13.3vw,85px)}
.world-preview{font-size:17px}
.world-selector a{font-size:16px}
.world-selector{gap:26px}
.track-label{font-size:17px}
.listen-copy>p:not(.track-label){font-size:21px}
.tape-navigation span{font-size:15px}
.audio-track>div{font-size:13px!important;gap:8px}
.audio-credit{font-size:14px!important;line-height:1.6}
.tape-controls{flex-wrap:wrap}
.audio-track{min-width:0}
.tape-dots{gap:14px}
.lesson-notes p,.practice-skills p,.bonus-card p:not(.eyebrow),.teacher-copy>p:not(.eyebrow){font-size:20px}
.practice-studio{min-height:0;padding-bottom:75px}
.studio-copy{padding:410px 24px 0;width:100%;max-width:none}
.studio-copy h2{font-size:clamp(53px,13vw,82px);line-height:1.02}
.studio-copy .studio-lead{font-size:25px}
.studio-copy .studio-description{font-size:21px}
.studio-copy .button{font-size:16px;gap:16px;padding-inline:18px}
.results-heading{margin-bottom:35px}
.results-heading h2{font-size:clamp(48px,12.5vw,75px)}
.results-grid{--slide-size:90vw;gap:18px;margin-inline:-24px;width:calc(100% + 48px)}
.result-screen{aspect-ratio:16/11}
.result-caption{grid-template-columns:24px 1fr;gap:8px;padding-top:20px}
.result-caption h3{font-size:22px}
.results-controls{gap:26px;margin-top:10px}
.results-controls button{width:54px;height:47px}
.results-pending{font-size:16px;line-height:1.5}
.bonus-art{height:360px}
.playbook-cover{top:45px;width:178px;height:267px}
.playbook-cover.back-left,.playbook-cover.back-right{top:49px}
.playbook-cover.back-left{transform:translateX(-86%) rotate(-12deg) scale(.86)}
.playbook-cover.back-right{transform:translateX(-14%) rotate(11deg) scale(.86)}
.playbook-cover>span{font-size:16px}
.playbook-cover strong{font-size:28px}
.playbook-cover svg{width:25px;height:57px}
.teacher-copy h2{font-size:clamp(51px,12.3vw,78px)}
.teacher-stat span{font-size:17px}
.enroll-card li{font-size:18px}
.enroll-intro>p:last-of-type{font-size:22px}
.faq summary{font-size:20px}
.faq details p{font-size:19px}
.button{font-size:17px}
.hero-fine{font-size:14px!important}
.proof-strip p{font-size:16px}
.proof-strip p strong{font-size:25px}
}


/* Continuous, evenly paced student video ribbon. */
.results-grid{--slide-size:min(38vw,520px);position:relative;padding:0 0 22px;scroll-snap-type:none;scroll-behavior:auto;margin-inline:-6.82%;width:113.64%;scroll-padding:0}
.result-card{opacity:1;scroll-snap-align:none}
.results-controls .results-pause{font-size:19px}

@media(max-width:760px){.results-grid{--slide-size:82vw;width:calc(100% + 48px);margin-inline:-24px;gap:20px}
}

@media(prefers-reduced-motion:reduce){.result-clone{display:none}
.results-pause{display:none}
}


.product-image-placeholder{width:100%;max-width:1040px;aspect-ratio:16/9;margin:64px auto 0;border:1px dashed #f1e8d64d;border-radius:8px;background:#ffffff03;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:#b8b9b6;font-size:20px}
.product-image-placeholder svg{color:#ea6f1c;opacity:.8}
@media(max-width:760px){.product-image-placeholder{margin-top:40px;aspect-ratio:4/3;font-size:17px;gap:18px}
}


/* The hub's VHS logo effect, repeating at the requested seven-second interval. */
.site-header .brand{position:relative;display:inline-block;line-height:0;flex-shrink:0}
.site-header .brand>img:first-child{position:relative;z-index:1;animation:vhs-jitter 7s steps(1) infinite}
.site-header .brand .vhs-ghost{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;animation:vhs-ghost-a 7s steps(1) infinite}
.site-header .brand .vhs-ghost.a{filter:sepia(1) saturate(9) hue-rotate(-40deg)}
.site-header .brand .vhs-ghost.b{animation-name:vhs-ghost-b;animation-delay:.08s;filter:sepia(1) saturate(9) hue-rotate(140deg)}

@keyframes vhs-jitter{0%,97.3%{transform:none;clip-path:none}
97.75%{transform:translate(2px) skew(4deg)}
98.2%{transform:translate(-3px,1px)}
98.65%{transform:translate(1px,-1px) skew(-3deg)}
99.1%{transform:none;clip-path:polygon(0 0,100%0,100% 38%,0 38%,0 42%,100% 42%,100% 100%,0 100%)}
99.55%{transform:translate(-1px)}
to{transform:none;clip-path:none}
}
@keyframes vhs-ghost-a{0%,97.3%{opacity:0}
97.75%{opacity:.7;transform:translate(-5px);clip-path:polygon(0 30%,100% 30%,100% 55%,0 55%)}
98.2%{opacity:.75;transform:translate(6px);clip-path:polygon(0 60%,100% 60%,100% 78%,0 78%)}
98.65%{opacity:.6;transform:translate(-4px,1px);clip-path:polygon(0 10%,100% 10%,100% 32%,0 32%)}
99.1%{opacity:.7;transform:translate(3px);clip-path:polygon(0 45%,100% 45%,100% 70%,0 70%)}
99.55%{opacity:.5;transform:translate(-2px);clip-path:polygon(0 0,100%0,100% 20%,0 20%)}
to{opacity:0}
}
@keyframes vhs-ghost-b{0%,97.3%{opacity:0}
97.75%{opacity:.7;transform:translate(5px);clip-path:polygon(0 50%,100% 50%,100% 72%,0 72%)}
98.2%{opacity:.7;transform:translate(-6px);clip-path:polygon(0 15%,100% 15%,100% 38%,0 38%)}
98.65%{opacity:.6;transform:translate(4px,-1px);clip-path:polygon(0 70%,100% 70%,100% 95%,0 95%)}
99.1%{opacity:.7;transform:translate(-3px);clip-path:polygon(0 0,100%0,100% 25%,0 25%)}
99.55%{opacity:.5;transform:translate(2px);clip-path:polygon(0 80%,100% 80%,100% 100%,0 100%)}
to{opacity:0}
}

@media(prefers-reduced-motion:reduce){.site-header .brand>img:first-child{animation:none}
.site-header .brand .vhs-ghost{display:none}
}

.mobile-cta{position:fixed;inset:auto 0 0;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 6% max(16px,env(safe-area-inset-bottom));background:#1e1b18f5;color:#f1e8d6;backdrop-filter:blur(12px);border-top:1px solid #ffffff2b;transform:translateY(110%);transition:transform .25s}
.mobile-cta:not([hidden]){transform:translateY(0)}
.mobile-cta[hidden]{display:none}
.mobile-cta>span{font-size:19px;font-weight:500}
.mobile-cta strong{display:inline-block;margin-left:20px;font-size:22px}
.mobile-cta a{padding:15px 28px;border-radius:3px;font-size:17px;font-weight:600}
.proof-strip p{flex:1}
.proof-strip p:last-child{text-align:right}

@media(max-width:760px){.mobile-cta{padding:12px 20px max(12px,env(safe-area-inset-bottom));gap:18px}
.mobile-cta>span{font-size:14px}
.mobile-cta strong{display:block;margin-left:0;font-size:18px}
.mobile-cta a{font-size:14px;padding:13px 16px}
.proof-strip p:last-child{text-align:left}
}



/* Plain navigation with retro monospaced lettering. */
.site-header nav{gap:34px;align-items:center}
.site-header nav>a{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;line-height:1.3;min-height:44px;display:inline-flex;align-items:center;padding:12px 0;color:#272923;background:none;border:0;border-radius:0;box-shadow:none;transition:color .16s}
.site-header nav>a:hover{color:#c4502a}
.site-header nav>.nav-cta{gap:24px;border-bottom:1px solid #27292366}
.site-header nav>.nav-cta:hover{color:#c4502a!important;border-color:#c4502a}
.site-header .nav-cta>span{font-family:var(--sans);font-size:23px;font-weight:400}

/* Aligned starts and a full-width finish; only the drawing tips are staggered. */
.analogue-hero{padding-bottom:132px}
.hero-ribbons{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.hero-ribbons path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.television{z-index:2}

/* Amplifier-panel proportions: bold figures, quiet hardware details. */
.proof-strip{display:block;position:relative;padding:52px 5.5%;background:linear-gradient(180deg,#2d2925,#151311);border-top:1px solid #535552;border-bottom:1px solid #0b0a09;color:#f3e9d4}
.proof-panel{max-width:1500px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr .85fr;gap:0}
.proof-panel p,.proof-strip p:last-child{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;text-align:left;min-width:0;padding:6px 40px 22px;border-left:1px solid #ffffff29;line-height:1.4}
.proof-panel p:first-child{border-left:0;padding-left:0}
.proof-panel p:last-child{padding-right:0}
.proof-panel strong{display:block;color:#f6ead1;font-family:var(--sans);font-weight:650;font-size:clamp(43px,5.25vw,80px);line-height:1;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 2px 0 #0008}
.proof-panel p>span{font-size:19px;line-height:1.45;color:#cfd0c8;max-width:300px}
.proof-panel p::after{content:'';position:absolute;bottom:0;left:40px;width:58px;height:5px;background:#ea6f1c;box-shadow:8px 0 0 #ea6f1c}
.proof-panel p:first-child::after{left:0}
.proof-strip::before,.proof-strip::after{content:'';position:absolute;top:18px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#727574 0 42%,#1e1b18 44% 56%,#727574 58%);box-shadow:0 1px 2px #0009}
.proof-strip::before{left:18px}
.proof-strip::after{right:18px}

@media(max-width:1000px){.site-header nav{gap:24px}
.site-header nav>a{font-size:14px}
.proof-strip{padding:43px 5%}
.proof-panel p,.proof-strip p:last-child{padding-inline:24px}
.proof-panel p:first-child{padding-left:0}
.proof-panel p::after{left:24px}
.proof-panel p>span{font-size:17px}
.proof-panel strong{font-size:clamp(35px,5.2vw,53px)}
}

@media(max-width:700px){.site-header{height:auto;min-height:140px;flex-direction:column;gap:15px;padding:20px 20px 16px}
.site-header .brand>img:first-child{width:140px}
.site-header nav{width:100%;justify-content:center;gap:20px;flex-wrap:wrap}
.site-header nav>a:not(.nav-cta){display:inline-flex}
.site-header nav>a{font-size:14px;letter-spacing:.025em;padding:10px 0;min-height:40px}
.site-header nav>.nav-cta{gap:12px}
.proof-strip{padding:34px 26px}
.proof-panel{grid-template-columns:1fr}
.proof-panel p,.proof-strip p:last-child{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:center;border-left:0;border-bottom:1px solid #ffffff25;padding:23px 0 27px;min-height:103px}
.proof-panel p:first-child{padding-top:7px}
.proof-panel p:last-child{border-bottom:0}
.proof-panel p::after,.proof-panel p:first-child::after{left:0;bottom:13px;width:30px;height:3px;box-shadow:none}
.proof-panel strong{font-size:clamp(35px,9.5vw,56px);letter-spacing:-.065em}
.proof-panel p>span{font-size:17px;line-height:1.5}
.proof-strip::before,.proof-strip::after{top:12px;width:6px;height:6px}
}

@media(max-width:600px){.analogue-hero{padding-bottom:76px}
.analogue-heading{padding-inline:34px}
.analogue-heading h1{font-size:clamp(39px,10.4vw,62px)}
.television{width:calc(100% - 36px);left:0;margin:26px auto 15px}
}


/* Scroll stories and interactive course sections. */
.preworld-journey{position:relative;isolation:isolate}
.preworld-journey>section{position:relative}
.preworld-journey .story-inner{padding-inline:9%;padding-bottom:120px}
.preworld-journey .story{padding-bottom:65px}
.preworld-journey .story-end{max-width:900px}

.myths{background:#4f1931;color:#f3e7cb;padding:110px 8% 150px}
.myths-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;max-width:1400px;margin:0 auto 60px}
.myths-heading h2{font-size:clamp(56px,7vw,105px);line-height:1;letter-spacing:-.055em;font-weight:500}
.myths-heading h2 em{color:#efac6d}
.myths-heading>p{font-size:19px;padding-bottom:6px}
.myth-grid{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1400px;margin:auto}
.myth-card{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;perspective:1400px;text-align:left;min-height:440px;color:#3a1824;cursor:pointer;border-radius:20px}
.myth-card-inner{display:grid;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.25,1)}
.myth-card.is-flipped .myth-card-inner{transform:rotateY(180deg)}
.myth-front,.myth-back{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:flex-start;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:32px 30px 34px;border-radius:20px 20px 0 20px;clip-path:polygon(0 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,0 100%);background:#f0e5c9;overflow:hidden}
.myth-front::after,.myth-back::after{content:'';position:absolute;bottom:0;right:0;width:42px;height:42px;border-top-left-radius:15px;background:#d1bea0}
.myth-back{transform:rotateY(180deg);background:#ed8b45;color:#291d1a;padding-top:37px}
.myth-back::after{background:#ba5426}
.myth-number{font-family:var(--mono);font-size:18px;font-weight:700;border:1.5px solid currentColor;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;margin-bottom:25px}
.myth-claim{font-size:clamp(29px,3.3vw,50px);line-height:1.06;letter-spacing:-.05em;font-weight:800;text-transform:uppercase;display:block;max-width:100%}
.myth-prompt{font-size:16px;font-weight:600;margin-top:auto;padding-top:27px;display:flex;gap:22px}
.myth-prompt>span{font-size:22px;line-height:1}
.myth-truth{font-size:clamp(25px,2.35vw,35px);line-height:1.12;font-weight:700;letter-spacing:-.035em;display:block}
.myth-answer{font-size:19px;line-height:1.5;margin-top:24px;display:block}
.myth-card:hover .myth-front{background:#fbf0d4}
.myth-card:focus-visible{outline:3px solid #f49a55;outline-offset:7px}

.struggle-cinema{background:#151311;color:#f3ead7;padding-bottom:100px}
.cinema-heading{text-align:center;padding:120px 10% 30px}
.cinema-heading h2{font-size:clamp(52px,6vw,88px);font-weight:500;line-height:1.05;letter-spacing:-.055em}
.cinema-heading em{color:#efb275}
.struggle-chapter{position:relative;min-height:145svh}
.chapter-stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:80px 10% 100px}
.chapter-copy{max-width:1040px;width:100%;text-align:center}
.chapter-copy h3{font-size:clamp(55px,7.1vw,108px);font-weight:500;line-height:1.04;letter-spacing:-.06em;color:#f3ead7;transform-origin:center center}
.chapter-copy p{font-size:clamp(24px,2.5vw,34px);line-height:1.5;letter-spacing:-.025em;color:#cdd0ca;max-width:850px;margin:35px auto 0}
.journey-motion-ready .chapter-copy h3{transform:translateY(var(--chapter-shift,80px)) scale(var(--chapter-scale,1.08));will-change:transform}
.journey-motion-ready .chapter-copy p{opacity:var(--chapter-reveal,0);transform:translateY(var(--copy-shift,22px))}
.worlds-intro{background:var(--cream,#f0e5cf);color:#262320;padding:135px 10% 150px}
.worlds-intro h2{color:#242521}
.worlds-intro h2 em{color:#c4502a}
.worlds-intro .worlds-tagline{color:#282a26}
.worlds-intro .worlds-description{color:#5b5b51}
.worlds-intro .product-image-placeholder{color:#68665c;border-color:#77756877;background:#24252104}

@media(max-width:1000px){.myths{padding-inline:7%}
.myth-grid{gap:18px}
.myth-front,.myth-back{padding-inline:22px}
.myth-card{min-height:430px}
.myth-claim{font-size:34px}
.myth-truth{font-size:27px}
.myth-answer{font-size:18px}
.myths-heading{align-items:flex-start;flex-direction:column;gap:25px}
.chapter-copy h3{font-size:clamp(51px,7vw,80px)}
}

@media(max-width:760px){.myth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.myth-claim{font-size:33px}
.myth-card{min-height:430px}
.chapter-copy p{font-size:24px}
.cinema-heading{padding-top:90px}
.struggle-chapter{min-height:155svh}
.chapter-stage{padding:65px 11% 90px}
.chapter-copy h3{font-size:clamp(43px,7.6vw,60px)}
.worlds-intro{padding:85px 10% 115px}
.preworld-journey .story-inner{padding-inline:10%}
}

@media(max-width:520px){.myths{padding:80px 10% 105px}
.myths-heading{margin-bottom:38px}
.myths-heading h2{font-size:52px}
.myths-heading>p{font-size:18px}
.myth-grid{grid-template-columns:1fr;gap:22px}
.myth-card{min-height:405px}
.myth-front,.myth-back{padding:30px 28px}
.myth-claim{font-size:clamp(29px,8.5vw,40px)}
.myth-truth{font-size:29px}
.myth-answer{font-size:19px}
.myth-number{margin-bottom:24px}
.cinema-heading h2{font-size:46px}
.chapter-copy h3{font-size:43px}
.chapter-copy p{font-size:23px;line-height:1.45;margin-top:28px}
.chapter-stage{padding-inline:10%;min-height:100svh}
.struggle-cinema{padding-bottom:85px}
.worlds-intro h2{font-size:clamp(47px,12vw,64px)}
.worlds-intro .worlds-description{font-size:21px}
.preworld-journey .story-inner{padding-bottom:95px}
}

@media(prefers-reduced-motion:reduce){.myth-card-inner{transition:none}
.struggle-chapter{min-height:0}
.chapter-stage{position:relative;min-height:0;padding-block:80px}
.journey-motion-ready .chapter-copy h3,.journey-motion-ready .chapter-copy p{transform:none;opacity:1;will-change:auto}
.preworld-journey .story{min-height:0;height:auto}
.preworld-journey .story-inner{position:relative;top:0}
}

/* Focus the colour bands on the two course introductions. */
.worlds-intro{position:relative;isolation:isolate;overflow:hidden}
.intro-ribbons{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.intro-ribbons path{fill:none;stroke-linecap:butt;stroke-linejoin:round}

.myths{background:#e9e0cd;color:#26221f}
.myths-heading h2 em{color:#bd491f}
.myth-card{color:#f5ecd9}
.myth-front{background:#2b2723}
.myth-front::after{background:#45484a}
.myth-back{background:#fff9eb;color:#292521;box-shadow:inset 0 0 0 1px #d1c7b2}
.myth-back::after{background:#d3c7ae}
.myth-card:hover .myth-front{background:#38332e}
.myth-number{color:#f9a055}
.myth-card-inner{height:100%}
.myth-front,.myth-back{overflow-wrap:break-word}
.myth-prompt{gap:10px}

.scroll-passage{position:relative;min-height:210svh;background:#151311;color:#f4ebd9}
.passage-stage{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:100px 9% 120px;max-width:1600px;margin:auto}
.passage-stage h2{font-size:clamp(60px,6.5vw,100px);line-height:1.02;font-weight:500;margin-bottom:45px}
.passage-stage h2 em{color:#efad75}
.scroll-copy{font-size:clamp(29px,3.5vw,53px);line-height:1.35;letter-spacing:-.035em;max-width:1180px}
.journey-motion-ready .scroll-copy span{color:#646565;transition:color .15s}
.journey-motion-ready .scroll-copy span.is-lit{color:#f4ebd9}
.future-story{background:#181614}
.future-story .passage-stage{max-width:1450px}
.future-story .passage-stage h2{font-size:clamp(66px,8vw,120px)}

.course-fit{background:#eee5d2;color:#292521;padding:120px 8%}
.course-fit>h2{text-align:center;font-size:clamp(58px,7vw,104px);line-height:1.02;font-weight:500}
.course-fit>h2 em{color:#bd491f}
.fit-intro{text-align:center;font-size:23px;margin:28px 0 50px}
.fit-console{max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:8%;padding:48px;background:#2d2925;border:2px solid #484b4c;border-radius:16px;box-shadow:0 12px 0 #1b1816,0 30px 55px #15131120;color:#f4ebd9;position:relative}
.fit-console::before,.fit-console::after{content:'+';position:absolute;color:#858684;font:20px var(--mono);top:10px}
.fit-console::before{left:14px}
.fit-console::after{right:14px}
.fit-switches{display:flex;flex-direction:column;gap:18px;justify-content:center}
.fit-switches button{display:grid;grid-template-columns:12px 1fr 24px;gap:15px;align-items:center;text-align:left;padding:22px 20px;background:#433d37;border:1px solid #565b5d;border-radius:5px;box-shadow:0 6px 0 #171513;font-size:22px;line-height:1.3;font-weight:550;transition:transform .15s,box-shadow .15s}
.fit-switches button>span:last-child{font:15px var(--mono);color:#c5c1b8}
.fit-switches button:hover,.fit-switches button[aria-selected=true]{transform:translateY(5px);box-shadow:0 1px 0 #171513}
.fit-switches button[aria-selected=true]{background:#ebe2ce;color:#26221f}
.fit-switches button[aria-selected=true]>span:last-child{color:#5d5b54}
.fit-led{width:9px;height:9px;border-radius:50%;background:#191614;box-shadow:inset 0 1px 2px #000}
.fit-switches [aria-selected=true] .fit-led{background:#ee751e;box-shadow:0 0 10px #ee751eaa}
.fit-output{display:flex;align-items:center;min-height:330px}
.fit-output h3{font-size:clamp(35px,3.7vw,55px);line-height:1.08;font-weight:500}
.fit-output h3 em{color:#ffa35d}
.fit-output p{font-size:22px;line-height:1.55;margin-top:24px;color:#d1cec5}
.fit-note{text-align:center;font-size:21px;line-height:1.5;margin-top:45px}

@media(max-width:760px){.fit-console{grid-template-columns:1fr;gap:35px;padding:30px 24px}
.fit-switches button{font-size:19px;padding:18px 15px}
.fit-output{min-height:265px}
.fit-output h3{font-size:40px}
.fit-output p{font-size:20px}
.course-fit{padding:85px 6%}
.fit-note{font-size:19px}
.passage-stage{padding:65px 8% 100px}
.passage-stage h2{font-size:54px;margin-bottom:30px}
.scroll-copy{font-size:30px}
.future-story .passage-stage h2{font-size:66px}
}

@media(max-width:520px){.myths{padding:75px 5% 90px}
.myths-heading{padding-inline:3%}
.myth-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.myth-card{min-height:400px;border-radius:12px}
.myth-front,.myth-back{padding:20px 15px 30px;border-radius:12px 12px 0 12px;clip-path:polygon(0 0,100% 0,100% calc(100% - 25px),calc(100% - 25px) 100%,0 100%)}
.myth-front::after,.myth-back::after{width:25px;height:25px;border-radius:9px 0 0}
.myth-claim{font-size:clamp(19px,5.2vw,27px);line-height:1.12;letter-spacing:-.035em}
.myth-truth{font-size:21px;line-height:1.15}
.myth-answer{font-size:16px;line-height:1.5;margin-top:18px}
.myth-number{font-size:15px;width:30px;height:30px;margin-bottom:22px}
.myth-prompt{font-size:13px;line-height:1.3;padding-top:25px}
.myth-prompt>span{font-size:17px}
.myths-heading h2{font-size:49px}
.scroll-copy{font-size:clamp(25px,7vw,32px)}
.passage-stage h2{font-size:clamp(43px,12vw,58px)}
.passage-stage{padding-inline:8%}
.future-story .passage-stage h2{font-size:60px}
.worlds-intro{padding-inline:10%;padding-bottom:130px}
}

@media(prefers-reduced-motion:reduce){.scroll-passage{min-height:0}
.passage-stage{position:relative;min-height:0;padding-block:100px}
.journey-motion-ready .scroll-copy span{color:#f4ebd9;transition:none}
}

.doors-clock{display:flex;align-items:center;gap:22px}
.doors-label{font-size:18px;font-weight:550;white-space:nowrap}
.clock-display{padding:8px 15px 6px;border-radius:5px;background:#100c0d;border:1px solid #513233;box-shadow:inset 0 2px 8px #000}
.clock-units{display:flex;align-items:flex-start;gap:5px}
.clock-unit{display:flex;flex-direction:column;align-items:center;gap:3px}
.clock-digits{display:flex;gap:3px}
.clock-digits svg{width:20px;height:30px;overflow:visible}
.clock-digits polygon{fill:#351516}
.clock-digits polygon.lit{fill:#ff5147;filter:drop-shadow(0 0 2px #ff281877)}
.clock-caption{font:10px/1.2 var(--mono);letter-spacing:.08em;color:#d09590;text-transform:uppercase}
.clock-colon{font:26px/30px var(--mono);color:#ff5147}
.mobile-cta{padding-block:10px max(10px,env(safe-area-inset-bottom))}
.mobile-cta a{flex-shrink:0}

@media(max-width:600px){.mobile-cta{gap:10px;padding-inline:12px}
.doors-clock{gap:4px;flex-direction:column;align-items:flex-start}
.doors-label{font-size:13px}
.clock-display{padding:5px 7px 4px}
.clock-units{gap:2px}
.clock-digits{gap:1px}
.clock-digits svg{width:13px;height:21px}
.clock-colon{font-size:18px;line-height:21px}
.clock-caption{font-size:8px}
.mobile-cta a{padding:13px 12px;font-size:13px}
}

@media(max-width:760px){.fit-console{display:flex;flex-direction:column;gap:18px}
.fit-switches,.fit-output{display:contents}
.fit-switches button:nth-child(1){order:1}
.fit-switches button:nth-child(2){order:3}
.fit-switches button:nth-child(3){order:5}
.fit-output [role=tabpanel]:nth-child(1){order:2}
.fit-output [role=tabpanel]:nth-child(2){order:4}
.fit-output [role=tabpanel]:nth-child(3){order:6}
.fit-output [role=tabpanel]{padding:20px 5px 15px}
.fit-output h3{font-size:35px}
}

@media(max-width:360px){.mobile-cta{padding-inline:10px;gap:8px}
.mobile-cta a{font-size:12px;letter-spacing:-.02em;padding:12px 8px}
.clock-digits svg{width:11px;height:19px}
.clock-colon{font-size:16px;line-height:19px}
}

/* Oversized story text matches the opening story; tall passages flow naturally. */
.scroll-passage,.future-story{background:#151311}
.passage-stage{max-width:1550px;padding:100px 9% 120px}
.passage-stage h2,.future-story .passage-stage h2{font-size:clamp(44px,4.4vw,68px);line-height:1.08;margin-bottom:44px}
.scroll-copy{font-size:clamp(48px,5.8vw,89px);line-height:1.14;letter-spacing:-.047em;font-weight:450;max-width:1300px}
.passage-natural{min-height:0}
.passage-natural .passage-stage{position:relative;top:auto}
.journey-motion-ready .scroll-copy span{color:inherit;opacity:.2;transition:opacity .15s linear}
.journey-motion-ready .scroll-copy span.is-lit{opacity:1}
.future-join{margin-top:48px;align-self:flex-start;font-size:20px}

/* Equal thumbnail proportions and content-led card heights. */
.bonus-grid{gap:32px}
.bonus-card{position:relative;min-width:0;height:auto;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.bonus-card .bonus-visual{width:100%;height:auto!important;aspect-ratio:3/2;flex:none;container-type:inline-size;position:relative;overflow:hidden}
.bonus-card .bonus-copy{padding:32px;flex:1}
.bonus-card .bonus-copy p{margin:0;overflow:visible}
.bonus-card .playbook-stack{width:100%;height:100%;max-width:none}
.bonus-visual .playbook-cover{width:min(36cqw,218px);height:min(52cqw,315px);top:10cqw;padding:4cqw}
.bonus-visual .playbook-cover.back-left,.bonus-visual .playbook-cover.back-right{top:11cqw}
.bonus-visual .playbook-cover>span{font-size:clamp(12px,3cqw,18px);margin-bottom:2cqw}
.bonus-visual .playbook-cover strong{font-size:clamp(21px,5.5cqw,33px)}
.bonus-visual .playbook-cover svg{width:5cqw;max-width:30px;height:auto;top:3cqw;right:3cqw}
.bonus-visual .playbook-cover i{margin-top:3cqw}
.bonus-card .backing-type{padding:30px!important}
.bonus-card .backing-type strong{font-size:clamp(68px,15cqw,100px)}
.bonus-open{position:absolute;inset:0;z-index:5;width:100%;height:100%;background:transparent;border-radius:3px;padding:0;text-align:right}
.bonus-open>span{position:absolute;top:18px;right:18px;background:#151311e8;color:#fff4dd;border:1px solid #ffffff40;border-radius:3px;padding:10px 13px;font-size:14px;box-shadow:0 3px 0 #090807;transition:transform .2s,background .2s}
.bonus-open:focus-visible{outline:3px solid #ea6f1c;outline-offset:-3px}
.bonus-card:hover,.bonus-card:focus-within{transform:translateY(-5px);box-shadow:0 14px 25px #0004}
.bonus-card:hover .bonus-open>span,.bonus-open:focus-visible>span{background:#c65121;transform:translateY(2px)}
.bonus-card:active{transform:translateY(0)}

#bonus-dialog{width:min(980px,94vw);padding:24px;background:#1f1c19}
#bonus-dialog .dialog-heading{margin-bottom:22px}
#bonus-dialog h2{font-size:clamp(22px,3vw,34px);line-height:1.15}
.bonus-close{background:#ffffff14;color:#f4ebd9;min-width:44px;height:44px;border-radius:50%;font-size:30px}
.bonus-close:hover{background:#c65121}
#bonus-preview-art{overflow:hidden;border-radius:3px}
#bonus-preview-art .bonus-visual{width:100%;height:auto!important;aspect-ratio:3/2;max-height:58vh;container-type:inline-size;position:relative}
#bonus-preview-art .playbook-stack{width:100%;height:100%;max-width:none}
#bonus-preview-art .playbook-cover{top:10%;height:80%;max-height:360px;width:27%;padding:3%}
#bonus-preview-art .playbook-cover>span{font-size:clamp(12px,2.5vw,20px)}
#bonus-preview-art .playbook-cover strong{font-size:clamp(22px,3.8vw,40px)}
#bonus-preview-description{font-size:20px;line-height:1.55;margin:22px 0 0;color:#e1dccf}

@media(max-width:760px){.passage-stage{padding:85px 10% 100px}
.passage-stage h2,.future-story .passage-stage h2{font-size:44px;margin-bottom:35px}
.scroll-copy{font-size:clamp(36px,8.7vw,62px);line-height:1.15;letter-spacing:-.045em}
.future-join{font-size:18px;margin-top:35px}
.bonus-card .bonus-copy{padding:26px}
.bonus-grid{gap:30px}
.bonus-card .backing-type{padding:24px!important}
.bonus-card .backing-type>span{font-size:11px}
.bonus-card .backing-type strong{font-size:clamp(64px,18cqw,90px)}
#bonus-dialog{padding:18px}
#bonus-preview-description{font-size:18px}
.bonus-open>span{font-size:13px;top:12px;right:12px;padding:8px 10px}
}

@media(max-width:520px){.myth-grid{align-items:start}
.myth-card{min-height:0}
.myth-card-inner{display:block;min-height:0;height:auto}
.myth-front{position:relative;min-height:240px}
.myth-back{position:absolute;inset:0;min-height:240px}
.myth-card.is-flipped .myth-front{position:absolute;inset:0}
.myth-card.is-flipped .myth-back{position:relative}
.myth-prompt{padding-top:20px}
.bonus-card .bonus-copy{padding:24px}
.bonus-card h3{font-size:28px}
.bonus-card p:not(.eyebrow){font-size:20px}
#bonus-preview-art .playbook-cover{width:38%;height:78%;padding:5%;top:9%}
#bonus-preview-art .playbook-cover>span{font-size:11px}
#bonus-preview-art .playbook-cover strong{font-size:21px}
#bonus-preview-art .playbook-cover svg{width:19px;top:12px;right:12px}
#bonus-preview-art .playbook-cover i{margin-top:10px}
.passage-stage{padding-inline:10%}
}

@media(prefers-reduced-motion:reduce){.journey-motion-ready .scroll-copy span{opacity:1;transition:none}
.bonus-card,.bonus-open>span{transition:none}
.passage-stage{position:relative;min-height:0}
.scroll-passage{min-height:0}
}

.chapter-led{display:block;width:15px;height:15px;border:2px solid #0d0c0a;border-radius:50%;margin:0 auto 34px;background:#3a3530;box-shadow:0 0 0 2px #433d37,inset 0 1px 3px #0009}
.is-playing .chapter-led{background:#eab657;box-shadow:0 0 0 2px #433d37,0 0 16px #eab65765,inset 0 1px 2px #fff7;animation:chapter-signal 1.5s ease-in-out infinite}
.is-complete .chapter-led{background:#79dc88;box-shadow:0 0 0 2px #433d37,0 0 18px #65dd7888,inset 0 1px 2px #fff8;animation:none}
@keyframes chapter-signal{0%,100%{opacity:1}
50%{opacity:.35}
}

@media(max-width:600px){.mobile-cta{padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:8px}
.doors-clock{flex-direction:row;align-items:center;gap:6px}
.doors-label{font-size:12px;line-height:1.15;max-width:38px;white-space:normal}
.clock-display{padding:4px 5px 3px}
.clock-units{gap:2px}
.clock-digits svg{width:10px;height:18px}
.clock-colon{font-size:14px;line-height:18px}
.clock-caption{font-size:8px}
.mobile-cta a{font-size:12px;padding:12px 8px;letter-spacing:-.02em}
.mobile-cta a>span{display:none}
.chapter-led{margin-bottom:26px}
}

@media(prefers-reduced-motion:reduce){.is-playing .chapter-led{animation:none}
}

.teacher{background:var(--cream,#f4ebd9);color:#292521}
.teacher-copy h2{color:#292521}
.teacher-copy h2 em{color:#bd491f}
.teacher-copy>p:not(.eyebrow){color:#52564f}
.teacher-stat{border-color:#29252130}
.teacher-stat strong{color:#bd491f}
.teacher-stat span{color:#52564f}

#bonus-dialog .dialog-heading{background:transparent}

@media(max-width:600px){.mobile-cta .doors-label{font-size:12px}
.mobile-cta .clock-caption{font-size:8px}
.mobile-cta .clock-colon{font-size:14px;line-height:18px}
.mobile-cta{min-height:60px}
}

#bonus-preview-art .backing-type{padding:24px!important}
#bonus-preview-art .backing-type strong{font-size:clamp(50px,18cqw,100px)}
#bonus-preview-art .backing-type>span{font-size:11px}

@media(max-width:520px){.bonus-card .backing-type{padding:20px!important}
.bonus-card .backing-type strong{font-size:clamp(50px,18cqw,80px)}
.bonus-card .backing-type>span{font-size:10px}
#bonus-preview-art .backing-type{padding:18px!important}
#bonus-preview-art .backing-type>span{font-size:10px}
}

/* Physical transport key, centred on the lesson picture. */
.lesson-video .lesson-play{top:50%;left:50%;width:80px;height:80px;transform:translate(-50%,-50%);border-radius:3px;border:2px solid #f8efdc;background:#eee3cfeF;color:#292521;box-shadow:inset 0 0 0 4px #cbc1af,0 6px 0 #68645b,0 10px 22px #0006;z-index:3;transition:transform .16s,box-shadow .16s,background .16s}
.lesson-play svg{width:28px;height:30px;display:block}
.lesson-video:hover .lesson-play,.lesson-video:focus-visible .lesson-play{background:#fff4df;transform:translate(-50%,calc(-50% + 4px));box-shadow:inset 0 0 0 4px #d8cdb8,0 2px 0 #68645b,0 5px 12px #0005}
.lesson-video:active .lesson-play{transform:translate(-50%,calc(-50% + 6px));box-shadow:inset 0 0 0 4px #d8cdb8}

.chapter-led{position:absolute;top:36px;right:5%;margin:0}
.is-playing .chapter-led{background:#f45045;box-shadow:0 0 0 2px #433d37,0 0 16px #f4504575,inset 0 1px 2px #fff7}
.is-complete .chapter-led{background:#79dc88;box-shadow:0 0 0 2px #433d37,0 0 18px #65dd7888,inset 0 1px 2px #fff8}

.faq{background:#2b2723;color:#f4ebd9}
.faq h2,.faq summary{color:#f4ebd9}
.faq h2 em{color:#efad75}
.faq details p{color:#d1d0c9}
.faq-list,.faq details{border-color:#f4ebd930}
.faq summary:focus-visible{outline-color:#efad75}

@media(max-width:600px){.lesson-video .lesson-play{width:58px;height:58px}
.lesson-play svg{width:23px;height:25px}
.chapter-led{top:24px;right:7%;margin:0}
}

@media(prefers-reduced-motion:reduce){.lesson-video .lesson-play{transition:none}
}

.cassette.playing,.cassette.playing:hover{transform:rotate(0deg)}

/* The hero bands continue through the navigation to the very top of the page. */
.site-header::after{content:'';position:absolute;top:0;bottom:0;right:15px;width:60px;pointer-events:none;background:linear-gradient(to right,#fab01e 0 20%,#ea6f1c 20% 40%,#c31a26 40% 60%,#95193c 60% 80%,#4f1136 80% 100%)}
.site-header nav{margin-right:60px}

@media(max-width:700px){.site-header nav{width:calc(100% - 70px);margin-right:70px}
}

@media(max-width:600px){.site-header::after{right:5px;width:25px}
.site-header nav{width:calc(100% - 30px);margin-right:30px}
}


/* The lesson clip is a silent demonstration, without interactive controls. */
.lesson-video{cursor:default}
.lesson-video .ambient-video{pointer-events:none}


/* The title frame stays still while only the headline inside it animates. */
.chapter-title-frame{position:relative;padding:26px 24px 0}
.chapter-title-frame .chapter-led{top:0;right:0;margin:0}

@media(max-width:600px){.chapter-title-frame{padding:25px 0 0}
.chapter-title-frame .chapter-led{top:0;right:0}
}


/* V1 art direction with shared action buttons and mobile navigation. */
:root{--key-ink:#26221f;--radius:4px;--press-depth:5px;--motion:.18s ease}

/* Physical keys: one primary, one secondary, one compact size. */
body .button,body .mobile-cta a{
 --key-face:var(--orange);--key-hover:#f38132;--key-edge:#a64118;--key-border:#bc531a;
 display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:60px;
 padding:16px 26px;border:1px solid var(--key-border);border-top-color:#ffffff60;border-radius:var(--radius);
 background:var(--key-face);color:var(--key-ink);font:600 18px/1.4 var(--sans);letter-spacing:-.015em;text-transform:none;
 box-shadow:0 var(--press-depth) 0 var(--key-edge);transition:transform var(--motion),box-shadow var(--motion),background var(--motion);
}

body .button.world-preview,body .button.light{
 --key-face:var(--cream);--key-hover:#fff8e9;--key-edge:#a29d91;--key-border:#b4ae9f;background:var(--key-face);
}

body .button:hover,body .mobile-cta a:hover{background:var(--key-hover);transform:translateY(4px);box-shadow:0 1px 0 var(--key-edge)}

body .button:active,body .mobile-cta a:active{transform:translateY(5px);box-shadow:none}

.action-icon{display:block;flex:none;width:22px;height:22px}
.button.world-preview>.action-icon{width:20px;height:20px}

body .button>span{border:0;padding:0;font:inherit}

body .button.compact-join{min-height:48px;padding:11px 20px;font-size:16px;gap:16px}

body .button.join-back{--key-face:var(--cream);--key-hover:#fff8e9;--key-edge:#a29d91;--key-border:#b4ae9f}


body .studio-copy .button{background:var(--key-face)}

body .studio-copy .button:hover{background:var(--key-hover)}

body .button:focus-visible{outline:3px solid var(--orange);outline-offset:6px}

@media(max-width:760px){body .button{min-height:56px;font-size:17px;padding:15px 22px;gap:20px}
}

.menu-toggle{display:none}
.clock-mobile-caption{display:none}

/* A compact single-row header; the disclosure expands into the page. */
@media(max-width:900px){
 .site-header{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:space-between;gap:0;height:auto;min-height:94px;padding:16px 96px 16px 24px}

 .site-header .brand>img:first-child{width:138px;height:auto}

 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:92px;min-height:46px;padding:10px 12px;background:transparent;color:#26221f;border:1px solid #26221f55;border-radius:3px;font:700 14px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase}

 .menu-toggle:focus-visible{outline:3px solid #a64118;outline-offset:4px}

 .menu-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

 .menu-toggle .close-lines{display:none}
.menu-toggle[aria-expanded=true] .menu-lines{display:none}
.menu-toggle[aria-expanded=true] .close-lines{display:block}

 .site-header nav{display:none;flex:0 0 100%;width:100%;margin:18px 0 0;padding:8px 0 0;border-top:1px solid #26221f30;flex-direction:column;align-items:stretch;gap:0}

 .site-header.is-menu-open nav{display:flex}

 .site-header nav>a,.site-header nav>a:not(.nav-cta){display:flex;align-items:center;justify-content:space-between;font:700 16px/1.4 var(--mono);letter-spacing:.035em;min-height:56px;padding:16px 0;border:0;border-bottom:1px solid #26221f25}

 .site-header nav>.nav-cta{gap:18px;border-bottom:0}
.site-header nav .action-icon{width:22px;height:22px}

}

@media(max-width:600px){
 .site-header{padding-right:46px;min-height:90px}
.site-header .brand>img:first-child{width:132px}

 .mobile-cta{padding:8px 12px max(10px,env(safe-area-inset-bottom));gap:12px;min-height:64px}

 .mobile-cta .doors-label,.mobile-cta .clock-caption{display:none}

 .doors-clock{display:block;flex:0 1 auto;min-width:0}

 .clock-display{padding:5px 7px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:4px}

 .clock-units{display:flex;gap:3px;align-items:center}

 .clock-unit{display:flex}
.clock-digits{gap:1px}
.clock-digits svg{width:11px;height:20px}

 .mobile-cta .clock-colon{font:16px/20px var(--mono)}

 .mobile-cta .clock-mobile-caption{display:block;font:700 11px/1.2 var(--mono);letter-spacing:.085em;color:#e5aaa4;text-align:center;white-space:nowrap}

 body .button.compact-join{min-height:44px;padding:11px 13px;font-size:14px;gap:10px;white-space:nowrap}

 .compact-join .action-icon{width:18px;height:18px}

}

@media(max-width:380px){
 .mobile-cta{padding-inline:10px;gap:10px}
.clock-units{gap:2px}
.clock-digits svg{width:10px;height:19px}

 body .button.compact-join{padding-inline:10px;gap:7px;font-size:14px}
.compact-join .action-icon{width:16px;height:16px}

 .site-header{padding-left:20px}
.site-header .brand>img:first-child{width:120px}

}

@media(prefers-reduced-motion:reduce){body .button{transition:none}
}



/* ---------- 2. Version A edits ---------- */
/* Opus edits: delete this block to undo the visual changes. */

/* ---------- Type: extended grotesk headlines (tape-sleeve "T-120" lettering),
   GT Super italic accents as before, wide caps for labels ---------- */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-roman.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
:root{--sans:"Archivo",Arial,sans-serif;--serif:Super,Georgia,serif;--mono:"Archivo",Arial,sans-serif}
body{font-family:var(--sans)}
h1,h2,h3{font-family:var(--sans)}
/* one weight for every section title; the long scroll-reveal sentence stays light */
html body h2,html body .electric-copy h3{font-weight:760!important;font-stretch:108%}
html body #story-title{font-weight:450!important;font-stretch:100%}
html body h1 em,html body h2 em,html body h3 em,.analogue-heading em,.opus-amp,footer>p{
  font-family:Super,Georgia,serif;font-style:italic;font-weight:400;font-stretch:100%}
.analogue-heading h1{font-weight:900;font-stretch:116%;letter-spacing:-.062em;font-size:clamp(40px,6.6vw,110px)}
.analogue-heading h1 em{font-size:.9em;line-height:1.15}
/* world titles keep the two-tone sans look, all in Archivo */
html body .electric-copy h3 em{font-family:var(--sans);font-style:normal;font-weight:760;font-stretch:108%}
.opus-amp{color:#c4502a;letter-spacing:0!important;font-size:1.05em}
@media (max-width:760px){.analogue-heading h1{font-size:clamp(30px,8.6vw,50px);font-stretch:110%}}
/* labels that were Courier: wide caps, like the markings on a tape deck */
nav>a,.nav-cta,.myth-number,.audio-track>div span,.audio-credit,.result-osd,.result-status,.result-number,.bonus-visual span,.fit-switches span,.price span,.clock-caption,.world-label,.track-label{font-stretch:120%;letter-spacing:.12em}
/* the typed cassette label and the VCR text keep their typewriter/OSD faces */
.tape-label>span,.tape-side{font-family:"Courier New",monospace}

/* ---------- Nav: wide caps, and Join is a real button ---------- */
@media (min-width:901px){
  .site-header nav>a{font-family:var(--sans);font-size:12.5px;font-weight:700;font-stretch:125%;letter-spacing:.14em}
  .site-header nav>.nav-cta{background:#23201d;color:#f1e8d6!important;border:0!important;padding:0 18px;min-height:44px;border-radius:6px;gap:12px;transition:background-color .2s,color .2s}
  .site-header nav>.nav-cta:hover{background:#ea6f1c;color:#1b1916!important}
  .site-header nav>.nav-cta .action-icon{width:16px;height:16px}
}
@media (max-width:900px){.site-header nav>a{font-family:var(--sans);font-stretch:120%;font-size:15px;letter-spacing:.1em}}

/* ---------- Hero TV: sharp still, live CRT, glow, square play button ---------- */
.tv-screen .opus-screen-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:1;display:block;filter:contrast(1.04) saturate(1.05)}
.tv-screen #hero-loop,.tv-screen .scanlines{display:none}
.tv-screen .opus-crt{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,rgba(255,214,170,.08),transparent 45%,rgba(0,0,0,.42) 100%);
  box-shadow:inset 0 0 38px rgba(255,205,150,.28);animation:opus-flicker 6s steps(1) infinite}
.tv-screen .opus-crt::after{content:"";position:absolute;left:0;right:0;top:-30%;height:26%;background:linear-gradient(transparent,rgba(255,244,220,.10) 50%,transparent);animation:opus-roll 6.5s linear infinite}
@keyframes opus-roll{to{transform:translateY(520%)}}
@keyframes opus-flicker{0%,100%{opacity:1}41%{opacity:.86}42%{opacity:1}77%{opacity:.92}78%{opacity:1}}
.television::before{content:"";position:absolute;left:50%;top:46%;width:72%;height:66%;translate:-50% -50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,200,140,.55),rgba(234,111,28,.18) 60%,transparent);filter:blur(34px);animation:opus-glow 4.5s ease-in-out infinite}
@keyframes opus-glow{50%{opacity:.7}}
.tv-screen .opus-play{position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:4;pointer-events:none;display:grid;place-items:center;
  width:clamp(58px,6.4vw,92px);aspect-ratio:1;border-radius:0;border:clamp(4px,.45vw,6px) solid #f4ebd9;background:rgba(12,10,8,.72);
  color:#f4ebd9;transition:background-color .2s,color .2s}
.tv-screen .opus-play svg{width:40%;height:40%;margin-left:8%}
.tv-screen:hover .opus-play{background:#ea6f1c;color:#1b1916}

/* ---------- "Find out how" scroll cue ---------- */
.story-end.opus-cue{display:inline-flex;align-items:center;gap:18px;margin-top:44px;color:#f1e8d6;text-decoration:none;font-family:var(--sans);font-weight:700;font-stretch:120%;font-size:clamp(17px,1.5vw,21px);letter-spacing:.14em;text-transform:uppercase}
.opus-cue-arrow{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(241,232,214,.5);transition:background-color .25s,box-shadow .25s}
.opus-cue-arrow svg{width:24px;height:24px;animation:opus-nudge 1.6s ease-in-out infinite}
.opus-cue:hover .opus-cue-arrow{background:#ea6f1c;color:#1b1916;box-shadow:none}
@keyframes opus-nudge{50%{transform:translateY(5px)}}

/* ---------- Practice Center: headline colours match the other dark sections; the video plays behind ---------- */
#practice-title em{color:#ea6f1c}
.studio-photo img{display:none}
.studio-photo .opus-practice-video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:brightness(.5) saturate(.85);display:block}

/* ---------- Footer line in warm cream, not blue-grey ---------- */
footer>p{color:#eadfc8}


/* ---------- A touch bigger on phones ---------- */
@media (max-width:760px){
  html body .hero-fine{font-size:16px}
  html body .myth-prompt{font-size:15px}
  html body .audio-track>div,html body .audio-credit{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .tv-screen .opus-crt,.tv-screen .opus-crt::after,.television::before,.opus-cue-arrow svg{animation:none}
}

/* ---------- Join buttons: bigger, uppercase wide caps like the mock-up ---------- */
.button.primary,.mobile-cta .compact-join{font-family:var(--sans);font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:.08em;font-size:18px;min-height:66px;padding:20px 30px;gap:22px}
.button.primary .action-icon{width:22px;height:22px}
.analogue-bottom .button.primary{font-size:19px;min-height:70px;padding:22px 34px}
@media (max-width:760px){
  .button.primary,.analogue-bottom .button.primary{font-size:15px;font-stretch:110%;letter-spacing:.06em;min-height:58px;padding:16px 22px;white-space:nowrap}
  .button.primary .action-icon{width:18px;height:18px}
  .mobile-cta .compact-join{font-size:11.5px;font-stretch:100%;letter-spacing:.05em;min-height:46px;padding:10px 14px;gap:8px;white-space:nowrap}
  .mobile-cta .compact-join .action-icon{width:14px;height:14px}
}
@media (min-width:901px){.site-header nav>.nav-cta{font-size:14px;min-height:48px;padding:0 20px}}

/* ---------- Mobile worlds: the guitar rises beside the Watch Preview button ---------- */
@media (max-width:760px){
  .electric-world{padding-bottom:690px!important}
  .electric-world .guitar-plane,.electric-world .world-orbit{margin-top:-170px}
  .electric-world .world-preview{position:relative;z-index:4}
}

/* ---------- Cassette player: tape-deck keys ---------- */
.tape-controls button,.tape-navigation button{
  font-size:0!important;display:grid;place-items:center;width:58px!important;height:46px!important;border:0!important;border-radius:3px!important;
  background:linear-gradient(#efe6d2,#cdc1a5)!important;color:#1b1916!important;
  box-shadow:0 5px 0 #6a604c,0 9px 12px rgba(0,0,0,.45),inset 0 1px 0 #fff!important;transition:transform .08s,box-shadow .08s!important}
.tape-controls #audio-play{width:74px!important;background:linear-gradient(#f28a3a,#dd661a)!important;box-shadow:0 5px 0 #8a3a0d,0 9px 12px rgba(0,0,0,.45),inset 0 1px 0 #ffc79b!important}
.tape-controls button:hover,.tape-navigation button:hover{transform:none!important}
.tape-controls button:active,.tape-navigation button:active,.tape-controls #audio-play[aria-pressed=true]{transform:translateY(4px)!important;box-shadow:0 1px 0 #6a604c,0 3px 6px rgba(0,0,0,.4),inset 0 1px 0 #fff!important}
.tape-controls #audio-play[aria-pressed=true]{box-shadow:0 1px 0 #8a3a0d,0 3px 6px rgba(0,0,0,.4),inset 0 1px 0 #ffc79b!important}
.tape-controls button::before,.tape-navigation button::before{content:"";width:18px;height:16px;background:currentColor}
#audio-play::before{width:17px;height:18px;clip-path:polygon(10% 0,100% 50%,10% 100%)}
#audio-play[aria-pressed=true]::before{clip-path:none;width:15px;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)}
#audio-rewind::before{clip-path:polygon(0 0,16% 0,16% 48%,100% 0,100% 100%,16% 52%,16% 100%,0 100%)}
.tape-prev::before{width:22px!important;clip-path:polygon(0 50%,50% 0,50% 50%,100% 0,100% 100%,50% 50%,50% 100%)}
.tape-next::before{width:22px!important;clip-path:polygon(100% 50%,50% 0,50% 50%,0 0,0 100%,50% 50%,50% 100%)}
.tape-dots{gap:8px!important}
.tape-dots button{position:relative;width:52px!important;min-width:0!important;height:38px!important;min-height:0!important;border:0!important;border-radius:3px!important;
  background:linear-gradient(#35312c,#221f1b)!important;color:#d6cab2!important;font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:13px!important;letter-spacing:.08em;
  box-shadow:0 4px 0 #0b0a09,inset 0 1px 0 rgba(255,255,255,.12)!important;transition:transform .08s,box-shadow .08s!important}
.tape-dots button:hover{transform:none!important}
.tape-dots button[aria-pressed=true]{background:linear-gradient(#efe6d2,#cdc1a5)!important;color:#1b1916!important;transform:translateY(3px)!important;box-shadow:0 1px 0 #6a604c,inset 0 1px 0 #fff!important}
.tape-dots button::after{content:"";position:absolute;top:-9px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a1411}
.tape-dots button[aria-pressed=true]::after{background:#ff4a2e;box-shadow:0 0 6px #ff4a2e}

/* ---------- Worlds: no "Keep exploring" links ---------- */
.world-footer>a{display:none!important}

/* ---------- Student Results: same keys and play button as the rest of the page ---------- */
.results-controls button{
  font-size:0!important;display:grid;place-items:center;width:58px!important;height:46px!important;border:0!important;border-radius:3px!important;
  background:linear-gradient(#efe6d2,#cdc1a5)!important;color:#1b1916!important;
  box-shadow:0 5px 0 #6a604c,0 9px 12px rgba(0,0,0,.25),inset 0 1px 0 #fff!important;transition:transform .08s,box-shadow .08s!important}
.results-controls button:hover{transform:none!important}
.results-controls button:active,.results-controls .results-pause[aria-pressed=true]{transform:translateY(4px)!important;box-shadow:0 1px 0 #6a604c,0 3px 6px rgba(0,0,0,.2),inset 0 1px 0 #fff!important}
.results-controls button::before{content:"";width:16px;height:16px;background:currentColor}
.results-prev::before{clip-path:polygon(0 50%,100% 0,100% 100%)}
.results-next::before{clip-path:polygon(100% 50%,0 0,0 100%)}
.results-pause::before{width:14px!important;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)!important}
.results-pause[aria-pressed=true]::before{width:16px!important;background:currentColor!important;clip-path:polygon(10% 0,100% 50%,10% 100%)}
.result-play{border-radius:0!important;border:4px solid #f4ebd9!important;background:rgba(12,10,8,.72)!important;box-shadow:none!important;color:#f4ebd9!important}

/* ---------- 3. Version B sections (namespaced: every class is b-*, scoped to .b-scope) ---------- */
.b-scope {
  
  --s1: #fbb020;
  --s2: #ea6f1b;
  --s3: #c21b25;
  --s4: #951a3c;
  --s5: #4f1036;

  --cream: #fff6d7;
  --paper: #f3ead5;
  --paper-2: #eadfc6;
  --paper-3: #dfd1b3;
  --line: #d3c5a6;

  --ink: #1b1916;
  --ink-2: #3f3931;
  --ink-3: #685f51;

  --tape: #151311;
  --tape-2: #1f1c19;
  --tape-3: #2b2723;
  --on-tape: #f5ecd8;
  --on-tape-2: #cfc4ad;

  
  --accent-ink: #c4421c;
  --accent-dark: #f08a3e;

  --cta: #ea6f1b;
  --cta-hover: #f07d2b;
  --cta-edge: #a3460f;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "GT Super", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(84px, 11vw, 150px);
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
.b-scope *, .b-scope *::before, .b-scope *::after { box-sizing: border-box; }
.b-scope {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 760px) {
.b-scope { font-size: 1.1875rem; }
}
.b-scope img, .b-scope svg, .b-scope video { display: block; max-width: 100%; }
.b-scope img { height: auto; }
.b-scope button { font: inherit; color: inherit; }
.b-scope a { color: inherit; }
.b-scope h1, .b-scope h2, .b-scope h3, .b-scope h4, .b-scope p, .b-scope ul, .b-scope ol, .b-scope figure, .b-scope blockquote { margin: 0; }
.b-scope ul, .b-scope ol { padding: 0; list-style: none; }
.b-scope ::selection { background: var(--s1); color: var(--ink); }
.b-scope :focus-visible {
  outline: 3px solid var(--s2);
  outline-offset: 3px;
  border-radius: 6px;
}
.b-scope .b-skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}
.b-scope .b-skip-link:focus { top: 16px; }
.b-scope .b-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.b-scope .b-wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
:is(.b-scope.b-section, .b-scope .b-section) { padding-block: var(--section); position: relative; }
:is(.b-scope.b-dark, .b-scope .b-dark) { background: var(--tape); color: var(--on-tape); }
.b-scope .b-label {
  font-size: .8125rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-3);
}
:is(.b-scope.b-dark, .b-scope .b-dark) .b-label { color: var(--on-tape-2); }
.b-scope .b-h2 {
  font-size: clamp(2.35rem, 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.b-scope .b-h2 em, .b-scope .b-display em {
  font-style: italic;
  font-weight: 800;
  color: var(--accent-ink);
}
:is(.b-scope.b-dark, .b-scope .b-dark) .b-h2 em { color: var(--accent-dark); }
.b-scope .b-h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.b-scope .b-lede {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
:is(.b-scope.b-dark, .b-scope .b-dark) .b-lede { color: var(--on-tape-2); }
.b-scope .b-prose > * + * { margin-top: 1.05em; }
.b-scope .b-prose p { text-wrap: pretty; color: var(--ink-2); }
:is(.b-scope.b-dark, .b-scope .b-dark) .b-prose p { color: var(--on-tape-2); }
.b-scope .b-prose strong { color: var(--ink); font-weight: 700; }
:is(.b-scope.b-dark, .b-scope .b-dark) .b-prose strong { color: var(--on-tape); }
.b-scope .b-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.b-scope .b-fine {
  font-size: .9375rem;
  color: var(--ink-3);
  line-height: 1.45;
}
:is(.b-scope.b-dark, .b-scope .b-dark) .b-fine { color: var(--on-tape-2); }
.b-scope .b-section-head { max-width: 820px; }
.b-scope .b-section-head .b-lede { margin-top: 22px; max-width: 680px; }
.b-scope .b-btn {
  --edge: var(--cta-edge);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 58px;
  padding: .95em 1.55em 1em;
  border: 0;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 760;
  font-stretch: 104%;
  letter-spacing: -.01em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.b-scope .b-btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s var(--ease); }
.b-scope .b-btn:hover svg { transform: translateX(3px); }
.b-scope .b-btn-primary {
  background: var(--cta);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--edge), 0 16px 26px -12px rgba(163, 70, 15, .7);
}
.b-scope .b-btn-primary:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 6px 0 var(--edge), 0 20px 30px -12px rgba(163, 70, 15, .75); }
.b-scope .b-btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge), 0 6px 12px -8px rgba(163, 70, 15, .7); }
.b-scope .b-btn-ghost {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}
.b-scope .b-btn-ghost:hover { background: rgba(255, 246, 215, .08); }
.b-scope .b-btn-ghost .b-ico-play { width: .8em; height: .8em; }
.b-scope .b-btn-block { width: 100%; }
.b-scope .b-btn-small { min-height: 44px; padding: .6em 1.05em .65em; font-size: 1rem; border-radius: 10px; box-shadow: 0 4px 0 var(--edge); }
.b-scope .b-btn-small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.b-scope .b-text-link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .4em 0;
  background: none;
  border: 0;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  cursor: pointer;
}
.b-scope .b-text-link:hover { text-decoration-color: currentColor; }
.b-scope .b-play-badge {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  flex: none;
}
.b-scope .b-play-badge svg { width: 13px; height: 13px; margin-left: 2px; }
.b-scope .b-stripes {
  display: block;
  height: 30px;
  background: linear-gradient(to bottom, var(--s1) 0 20%, var(--s2) 20% 40%, var(--s3) 40% 60%, var(--s4) 60% 80%, var(--s5) 80%);
}
.b-scope .b-mini-stripes {
  display: inline-grid;
  grid-template-rows: repeat(5, 1fr);
  width: 18px; height: 12px;
  vertical-align: middle;
}
.b-scope .b-mini-stripes i:nth-child(1) { background: var(--s1); }
.b-scope .b-mini-stripes i:nth-child(2) { background: var(--s2); }
.b-scope .b-mini-stripes i:nth-child(3) { background: var(--s3); }
.b-scope .b-mini-stripes i:nth-child(4) { background: var(--s4); }
.b-scope .b-mini-stripes i:nth-child(5) { background: var(--s5); }
.js .b-scope [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .b-scope [data-reveal].is-in { opacity: 1; transform: none; }
@keyframes b-blink { to { visibility: hidden; } }
.b-scope .b-ribbons {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.b-scope .b-ribbons path { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.b-scope .b-lead { padding-bottom: calc(var(--section) * .8); }
.b-scope .b-lead-quote {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 17em;
  text-wrap: balance;
}
.b-scope .b-lead-quote .b-hl { color: var(--accent-ink); }
.b-scope .b-lead .b-lede { margin-top: 26px; max-width: 34em; }
.b-scope .b-jcards {
  display: grid;
  gap: 26px;
  margin-top: clamp(44px, 6vw, 72px);
}
@media (min-width: 860px) {
.b-scope .b-jcards { grid-template-columns: 1fr 1fr; gap: 34px; }
}
.b-scope .b-jcard {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  min-height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 22px 40px -24px rgba(58, 38, 12, .45);
  transform: rotate(var(--tilt, 0deg));
}
.b-scope .b-jcard-a { --tilt: -.8deg; background: #ece3cf; color: #4c463d; }
.b-scope .b-jcard-b { --tilt: .6deg; }
.b-scope .b-jcard-spine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 18px 0;
  background: var(--ink);
  color: var(--cream);
  font-size: .75rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.b-scope .b-jcard-a .b-jcard-spine { background: #5a544b; }
.b-scope .b-jcard-body { padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) 26px; }
.b-scope .b-jcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.b-scope .b-jcard-side {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -.04em;
  line-height: .9;
}
.b-scope .b-jcard-b .b-jcard-side { color: var(--accent-ink); }
.b-scope .b-jcard-type {
  font-size: .75rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: right;
  opacity: .75;
}
.b-scope .b-jcard-title {
  margin-top: 12px;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.b-scope .b-jcard-band {
  height: 26px;
  margin: 20px calc(clamp(22px, 3vw, 34px) * -1) 18px;
  background: linear-gradient(to bottom, var(--s1) 0 20%, var(--s2) 20% 40%, var(--s3) 40% 60%, var(--s4) 60% 80%, var(--s5) 80%);
}
.b-scope .b-jcard-a .b-jcard-band {
  background: linear-gradient(to bottom, #c9c0ad 0 20%, #b3a994 20% 40%, #9b917d 40% 60%, #857b68 60% 80%, #6d6454 80%);
}
.b-scope .b-jcard-list { counter-reset: t; }
.b-scope .b-jcard-list li {
  display: grid;
  grid-template-columns: 2.1em 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(60, 50, 35, .22);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.b-scope .b-jcard-list li:last-child { border-bottom: 0; }
.b-scope .b-jcard-list li span {
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.b-scope .b-jcard-b .b-jcard-list li span { color: var(--accent-ink); }
.b-scope .b-jcard-a .b-jcard-list li:last-child { color: #2e2a25; font-weight: 600; }
.b-scope .b-jcard-b .b-jcard-list li:last-child { font-weight: 700; color: var(--ink); }
.b-scope .b-lead-stat {
  display: grid;
  gap: 22px;
  align-items: center;
  margin-top: clamp(50px, 7vw, 84px);
  padding-top: 36px;
  border-top: 2px solid var(--ink);
}
@media (min-width: 860px) {
.b-scope .b-lead-stat { grid-template-columns: auto 1fr; gap: 44px; }
}
.b-scope .b-lead-stat .b-stat-big {
  font-size: clamp(4.4rem, 10vw, 8.5rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -.06em;
  line-height: .8;
  color: var(--accent-ink);
}
.b-scope .b-lead-stat p { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.b-scope .b-lead-stat p strong { color: var(--ink); }
.b-scope .b-myths { background: var(--paper-2); }
.b-scope .b-myths .b-section-head { display: grid; gap: 22px; }
@media (min-width: 980px) {
.b-scope .b-myths .b-section-head { max-width: none; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; }
}
.b-scope .b-flip-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 700; color: var(--ink-2); }
.b-scope .b-flip-hint svg { width: 20px; height: 20px; }
.b-scope .b-myth-grid {
  display: grid;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 60px);
}
@media (min-width: 640px) {
.b-scope .b-myth-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
.b-scope .b-myth-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.b-scope .b-myth {
  --c: var(--s1);
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
.b-scope .b-myth:nth-child(2) { --c: var(--s2); }
.b-scope .b-myth:nth-child(3) { --c: var(--s3); }
.b-scope .b-myth:nth-child(4) { --c: var(--s4); }
.b-scope .b-myth:nth-child(5) { --c: var(--s5); }
.b-scope .b-myth:nth-child(6) { --c: var(--s2); }
.b-scope .b-myth-inner {
  position: relative;
  display: grid;
  min-height: 270px;
  transform-style: preserve-3d;
  transition: transform .75s var(--ease);
}
.b-scope .b-myth.is-flipped .b-myth-inner { transform: rotateY(180deg); }
.b-scope .b-myth-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.b-scope .b-myth-front {
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 34px -24px rgba(58, 38, 12, .5);
  border-top: 10px solid var(--c);
  transition: box-shadow .3s, transform .3s var(--ease);
}
.b-scope .b-myth:hover .b-myth-front { box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 26px 40px -22px rgba(58, 38, 12, .55); }
.b-scope .b-myth-back {
  transform: rotateY(180deg);
  background: var(--tape);
  color: var(--on-tape);
  border-top: 10px solid var(--c);
}
.b-scope .b-myth-kicker {
  font-size: .75rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.b-scope .b-myth-back .b-myth-kicker { color: var(--on-tape-2); }
.b-scope .b-myth-claim {
  margin-top: 16px;
  font-size: clamp(1.55rem, 2.3vw, 1.9rem);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.b-scope .b-myth-truth {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 1.7rem);
  line-height: 1.12;
  color: var(--cream);
  text-wrap: balance;
}
.b-scope .b-myth-answer {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-tape-2);
}
.b-scope .b-myth-answer cite { display: block; margin-top: 8px; font-style: normal; font-size: .875rem; color: #a99d86; }
.b-scope .b-myth-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-2);
}
.b-scope .b-myth-back .b-myth-foot { color: var(--on-tape-2); }
.b-scope .b-myth-stamp {
  position: absolute;
  right: 22px;
  bottom: 20px;
  padding: 5px 10px 4px;
  border: 2.5px solid currentColor;
  border-radius: 6px;
  color: color-mix(in srgb, var(--c) 78%, #6b2a10);
  font-size: .8125rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: .85;
}
.b-scope .b-myth-front { position: relative; }
.b-scope .b-myth-foot svg { width: 18px; height: 18px; }
.b-scope .b-story-grid {
  display: grid;
  gap: clamp(40px, 6vw, 90px);
}
@media (min-width: 980px) {
.b-scope .b-story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.b-scope .b-story-photo { position: sticky; top: 90px; }
}
.b-scope .b-story-photo img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 14px 14px 0 0;
}
.b-scope .b-story-photo .b-stripes { height: 26px; border-radius: 0 0 14px 14px; }
.b-scope .b-story-photo figcaption {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.b-scope .b-cred strong {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 850;
  font-stretch: 112%;
  letter-spacing: -.04em;
  line-height: 1;
}
.b-scope .b-cred span { display: block; margin-top: 6px; font-size: .875rem; line-height: 1.35; color: var(--ink-3); }
.b-scope .b-story-copy .b-h2 { margin-top: 14px; }
.b-scope .b-story-text {
  margin-top: 34px;
  line-height: 1.6;
  color: var(--ink-2);
}
.b-scope .b-story-text p { text-wrap: pretty; }
.b-scope .b-story-text > * + * { margin-top: 1.05em; }
.b-scope .b-story-text em { font-style: normal; color: var(--ink); background: linear-gradient(transparent 62%, rgba(251, 176, 32, .45) 62%); }
.b-scope .b-pull {
  margin: 1.2em 0 !important;
  padding: .1em 0 .1em .7em;
  border-left: 6px solid var(--s2);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--accent-ink);
}
.b-scope .b-story-bio {
  margin-top: 40px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.b-scope .b-idea { overflow: hidden; }
.b-scope .b-idea .b-h2 { max-width: 13em; }
.b-scope .b-idea-grid {
  display: grid;
  gap: clamp(40px, 5vw, 70px);
  margin-top: clamp(36px, 5vw, 60px);
}
@media (min-width: 1040px) {
.b-scope .b-idea-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.b-scope .b-idea .b-prose p { font-size: clamp(1.1rem, 1.5vw, 1.25rem); }
.b-scope .b-idea .b-prose .b-big { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.35; color: var(--on-tape); font-weight: 600; }
.b-scope .b-phrase {
  position: relative;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 20px;
  background: var(--tape-2);
  box-shadow: inset 0 0 0 1px #34302a;
}
.b-scope .b-phrase-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 14px; }
.b-scope .b-phrase-title { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; color: var(--cream); }
.b-scope .b-phrase svg { width: 100%; height: auto; overflow: visible; }
.b-scope .b-phrase .b-str { stroke: #5e574d; stroke-width: 1.4; }
.b-scope .b-phrase .b-sname { fill: #8d836f; font: 700 15px var(--sans); font-stretch: 112%; }
.b-scope .b-phrase .b-fret { fill: var(--cream); font: 800 25px var(--sans); font-stretch: 100%; }
.b-scope .b-phrase .b-fret-bg { fill: var(--tape-2); }
.b-scope .b-phrase .b-bend { fill: none; stroke: var(--s1); stroke-width: 2.4; }
.b-scope .b-phrase .b-bend-head { fill: var(--s1); }
.b-scope .b-phrase .b-bend-lbl { fill: var(--s1); font: 800 14px var(--sans); font-stretch: 118%; letter-spacing: .08em; }
.b-scope .b-phrase .b-vib { fill: none; stroke: var(--s2); stroke-width: 2.4; }
.b-scope .b-phrase .b-ann { fill: #e6dcc6; font: 21px var(--serif); }
.b-scope .b-phrase .b-ann-num { fill: var(--tape); font: 800 14px var(--sans); }
.b-scope .b-phrase .b-ann-dot { fill: var(--s1); }
.b-scope .b-phrase .b-tick { stroke: #6e6558; stroke-width: 1.2; stroke-dasharray: 3 4; }
.b-scope .b-phrase .b-note { opacity: 0; transition: opacity .5s var(--ease); }
.b-scope .b-phrase.is-in .b-note { opacity: 1; }
.b-scope .b-phrase.is-in .b-note:nth-of-type(2) { transition-delay: .25s; }
.b-scope .b-phrase figcaption { margin-top: 18px; font-size: 1rem; line-height: 1.5; color: var(--on-tape-2); }
.b-scope .b-phrase-legend { display: none; }
@media (max-width: 620px) {
.b-scope .b-phrase .b-ann { display: none; }
.b-scope .b-phrase-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin-top: 14px;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: #e6dcc6;
  }
.b-scope .b-phrase-legend li { display: flex; gap: 10px; align-items: center; }
.b-scope .b-phrase-legend b {
    display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--s1); color: var(--tape);
    font: 800 12px var(--sans);
  }
}
.b-scope .b-intro { overflow: hidden; isolation: isolate; }
.b-scope .b-intro .b-wrap { position: relative; z-index: 2; }
.b-scope .b-intro-grid {
  display: grid;
  gap: 50px;
  align-items: center;
}
@media (min-width: 980px) {
.b-scope .b-intro-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.b-scope .b-intro .b-h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.b-scope .b-intro .b-lede { margin-top: 24px; max-width: 30em; }
.b-scope .b-intro-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.b-scope .b-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.2;
}
:is(.b-scope.b-dark, .b-scope .b-dark) .b-chip { background: var(--tape-2); color: var(--on-tape); box-shadow: inset 0 0 0 1.5px #3a352e; }
.b-scope .b-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--s2)); flex: none; }
.b-scope .b-sleeve-stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1600px;
  padding: 20px 0 40px;
}
.b-scope .b-sleeve-stage::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 18%; right: 14%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 24, 8, .38), transparent);
  filter: blur(6px);
  z-index: -1;
}
.b-scope .b-sleeve {
  
  --sw: min(330px, 70vw);
  --sh: calc(var(--sw) * 188 / 104);
  --sd: calc(var(--sw) * .27);
  --rx: 4deg;
  --ry: 34deg;
  position: relative;
  width: var(--sw);
  height: var(--sh);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .8s var(--ease);
}
.b-scope .b-sleeve-face, .b-scope .b-sleeve-spine, .b-scope .b-sleeve-cap { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.b-scope .b-sleeve-face {
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1px;
  transform: translateZ(calc(var(--sd) / 2));
  background:
    radial-gradient(120% 70% at 20% 10%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(160deg, #fff8df, #f1e4c2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  color: var(--ink);
}
.b-scope .b-sleeve-spine {
  top: 0;
  height: 100%;
  width: var(--sd);
  left: calc((var(--sw) - var(--sd)) / 2);
  overflow: hidden;
  transform: rotateY(-90deg) translateZ(calc(var(--sw) / 2));
  background: linear-gradient(180deg, #f6ecd0, #e8d9b3);
  color: var(--ink);
}
.b-scope .b-sleeve-spine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 26, 10, .22), rgba(40, 26, 10, .08)); pointer-events: none; }
.b-scope .b-spine-title {
  position: absolute;
  top: 5%;
  height: 49%;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-scope .b-spine-title span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: calc(var(--sd) * .21);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.b-scope .b-spine-title small { font-size: .5em; letter-spacing: .2em; margin-top: 1.2em; font-weight: 800; }
.b-scope .b-spine-stripes { position: absolute; left: 0; right: 0; top: 58.16%; height: 11.96%; }
.b-scope .b-spine-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  background: var(--tape);
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: calc(var(--sd) * .42);
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -.05em;
}
.b-scope .b-sleeve-cap { left: 0; width: 100%; height: var(--sd); top: calc((var(--sh) - var(--sd)) / 2); }
.b-scope .b-sleeve-cap.b-top { transform: rotateX(90deg) translateZ(calc(var(--sh) / 2)); background: #e6d6ad; }
.b-scope .b-sleeve-cap.b-bottom { transform: rotateX(-90deg) translateZ(calc(var(--sh) / 2)); background: #0d0c0b; }
.b-scope .b-sleeve-top {
  display: flex;
  justify-content: space-between;
  padding: 7% 8% 0;
  font-size: clamp(.5rem, 1.6vw, .66rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.b-scope .b-sleeve-logo { width: 78%; margin: 9% auto 0; }
.b-scope .b-sleeve-tag {
  margin: 6% 8% 0;
  font-size: clamp(.62rem, 1.9vw, .82rem);
  font-weight: 800;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
}
.b-scope .b-sleeve-band {
  position: relative;
  margin-top: auto;
  height: 26%;
  flex: none;
}
.b-scope .b-sleeve-band .b-stripes { position: absolute; left: 0; right: 0; top: 16%; height: 46%; }
.b-scope .b-sleeve-band::after {
  
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 30%;
  background: var(--tape);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
}
.b-scope .b-sleeve-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 20%;
  flex: none;
  box-sizing: border-box;
  padding: 0 8% 7%;
  background: var(--tape);
  color: var(--cream);
}
.b-scope .b-sleeve-big {
  font-size: clamp(1.5rem, 5.4vw, 2.3rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -.05em;
  line-height: .85;
}
.b-scope .b-sleeve-big small { display: block; font-size: .36em; letter-spacing: .06em; font-style: normal; margin-top: 6px; }
.b-scope .b-sleeve-specs {
  text-align: right;
  font-size: clamp(.46rem, 1.4vw, .58rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  opacity: .85;
}
.b-scope .b-sleeve-sticker {
  position: absolute;
  top: 3.5%;
  right: -16px;
  width: 24%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--s1);
  color: var(--ink);
  font-size: clamp(.55rem, 1.7vw, .8rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  transform: translateZ(calc(var(--sd) / 2 + 4px)) rotate(12deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
}
.b-scope .b-how { margin-top: clamp(80px, 10vw, 130px); }
.b-scope .b-how-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; }
.b-scope .b-steps {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  counter-reset: step;
}
@media (min-width: 700px) {
.b-scope .b-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.b-scope .b-steps { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
.b-scope .b-step {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.b-scope .b-key {
  display: grid;
  place-items: center;
  width: 64px; height: 48px;
  border-radius: 8px;
  background: linear-gradient(#3a3631, #1b1916);
  color: var(--cream);
  box-shadow: 0 5px 0 #0b0a09, inset 0 1px 0 rgba(255, 255, 255, .18);
}
.b-scope .b-key svg { width: 22px; height: 22px; }
.b-scope .b-key.b-rec svg { color: #ff4b3a; }
.b-scope .b-step-num {
  position: absolute;
  top: 26px; right: 24px;
  font-size: .875rem;
  font-weight: 800;
  font-stretch: 118%;
  color: var(--ink-3);
}
.b-scope .b-step h4 {
  margin-top: 24px;
  font-size: 1.3rem;
  font-weight: 780;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.b-scope .b-step p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.b-scope .b-lesson {
  display: grid;
  gap: 34px;
  align-items: center;
  margin-top: clamp(70px, 9vw, 120px);
}
@media (min-width: 980px) {
.b-scope .b-lesson { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 60px; }
}
.b-scope .b-monitor {
  position: relative;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(#2a2622, #151311);
  box-shadow: 0 30px 50px -24px rgba(30, 20, 8, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.b-scope .b-monitor video, .b-scope .b-monitor img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }
.b-scope .b-monitor .b-stripes { height: 10px; margin: 12px 0 0; border-radius: 3px; }
.b-scope .b-monitor-tag {
  position: absolute;
  top: 26px; left: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.b-scope .b-monitor-tag i { width: 9px; height: 9px; border-radius: 50%; background: #ff4b3a; animation: b-blink 1.4s steps(2, start) infinite; }
.b-scope .b-lesson .b-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.b-scope .b-worlds { background: var(--tape); color: var(--on-tape); }
.b-scope .b-worlds-head { padding-top: var(--section); padding-bottom: clamp(40px, 5vw, 64px); }
.b-scope .b-worlds-head .b-lede { margin-top: 22px; max-width: 34em; }
.b-scope .b-world-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(21, 19, 17, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #2d2924;
}
.b-scope .b-world-nav ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.b-scope .b-world-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 4px 20px;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 720;
  color: rgba(245, 236, 216, .55);
  transition: color .3s;
}
.b-scope .b-world-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 10px; bottom: -1px;
  height: 5px;
  background: var(--c);
  transform: scaleX(.14);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.b-scope .b-world-nav a:hover { color: var(--on-tape); }
.b-scope .b-world-nav a[aria-current="true"] { color: var(--on-tape); }
.b-scope .b-world-nav a[aria-current="true"]::after { transform: none; }
.b-scope .b-world-nav .b-n { font-size: .75rem; font-weight: 800; font-stretch: 118%; color: var(--ct, var(--c)); }
@media (max-width: 759px) {
.b-scope .b-world-nav ol { width: 100%; padding: 0 12px; }
.b-scope .b-world-nav a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 4px 14px; font-size: .8125rem; line-height: 1.15; }
.b-scope .b-world-nav .b-full { display: none; }
}
@media (min-width: 760px) {
.b-scope .b-world-nav .b-short { display: none; }
}
.b-scope .b-world {
  --c: var(--s1);
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 7%, #141210);
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.b-scope .b-world-inner {
  position: relative;
  display: grid;
  gap: 10px;
  padding-block: clamp(46px, 8vw, 120px);
}
@media (min-width: 980px) {
.b-scope .b-world-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 40px; min-height: min(92vh, 900px); }
}
.b-scope .b-world-ghost {
  position: absolute;
  right: -2vw;
  bottom: -6vw;
  font-size: clamp(12rem, 30vw, 26rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -.08em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 26%, transparent);
  pointer-events: none;
  user-select: none;
}
.b-scope .b-world-copy { position: relative; z-index: 2; order: 2; }
@media (min-width: 980px) {
.b-scope .b-world-copy { order: 0; }
}
.b-scope .b-world-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8125rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct, var(--c));
}
.b-scope .b-world-num::before { content: ""; width: 34px; height: 5px; background: var(--c); }
.b-scope .b-world-name {
  margin-top: 18px;
  font-size: clamp(3rem, 7.6vw, 6.4rem);
  font-weight: 850;
  line-height: .88;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.b-scope .b-world-players {
  margin-top: 14px;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 700;
  font-stretch: 110%;
  color: var(--on-tape-2);
}
.b-scope .b-world-pull {
  margin-top: 24px;
  max-width: 22em;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  line-height: 1.2;
  color: var(--cream);
  text-wrap: balance;
}
.b-scope .b-world-pull::before { content: "\201C"; color: var(--ct, var(--c)); margin-right: .05em; }
.b-scope .b-world-pull::after { content: "\201D"; color: var(--ct, var(--c)); margin-left: .02em; }
.b-scope .b-world-body { margin-top: 18px; max-width: 32em; font-size: 1.125rem; line-height: 1.6; color: #d9ceb6; }
.b-scope .b-world-learn { margin-top: 26px; display: grid; gap: 2px; max-width: 32em; }
.b-scope .b-world-learn li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--on-tape);
}
.b-scope .b-world-learn li::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--c) 35%, transparent);
}
.b-scope .b-world-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.b-scope .b-world-actions .b-btn-ghost { min-height: 52px; font-size: 1rem; }
.b-scope .b-world-actions .b-text-link { color: var(--ct, var(--c)); }
.b-scope .b-world-art {
  position: relative;
  height: clamp(250px, 64vw, 360px);
  z-index: 1;
}
@media (min-width: 980px) {
.b-scope .b-world-art { height: min(80vh, 760px); }
}
.b-scope .b-spot {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(210px, 56vw, 520px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff9e6 0%, var(--cream) 34%, #e9d6aa 100%);
  box-shadow: 0 0 0 clamp(8px, 1.2vw, 14px) var(--c), 0 0 0 clamp(16px, 2.4vw, 28px) color-mix(in srgb, var(--c) 28%, transparent), 0 40px 90px -20px rgba(0, 0, 0, .7);
}
.b-scope .b-world-guitar {
  position: absolute;
  left: 50%; top: 50%;
  height: 104%;
  width: auto;
  max-width: none;
  translate: -50% -50%;
  transform: translateY(var(--py, 0px)) rotate(calc(var(--rot, -12deg) + var(--pr, 0deg)));
  filter: drop-shadow(18px 26px 22px rgba(0, 0, 0, .5));
  will-change: transform;
}
@media (max-width: 979px) {
.b-scope .b-world-art { height: clamp(230px, 60vw, 420px); margin-bottom: 8px; }
.b-scope .b-world-guitar { height: auto; width: clamp(150px, 36vw, 250px); transform: translateY(var(--py, 0px)) rotate(calc(var(--rot, -12deg) + 62deg + var(--pr, 0deg))); }
}
.b-scope .b-fit { background: var(--paper-2); }
.b-scope .b-fit-grid { display: grid; gap: 22px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) {
.b-scope .b-fit-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
.b-scope .b-fit-card { padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: var(--cream); }
.b-scope .b-fit-card.b-no { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.b-scope .b-fit-card h3 { font-size: 1.5rem; font-weight: 780; letter-spacing: -.02em; }
.b-scope .b-fit-card ul { margin-top: 18px; }
.b-scope .b-fit-card li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  line-height: 1.5;
  color: var(--ink-2);
}
.b-scope .b-fit-card li strong { color: var(--ink); }
.b-scope .b-fit-card svg { width: 24px; height: 24px; margin-top: 1px; }
.b-scope .b-fit-card.b-yes svg { color: #2f7d4a; }
.b-scope .b-fit-card.b-no svg { color: var(--s3); }
.b-scope .b-close { overflow: hidden; isolation: isolate; padding-bottom: calc(var(--section) * 1.1); }
.b-scope .b-close .b-wrap { position: relative; z-index: 2; }
.b-scope .b-close-inner { max-width: 780px; margin-inline: auto; }
.b-scope .b-close .b-h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
.b-scope .b-close .b-prose { margin-top: 34px; line-height: 1.6; }
.b-scope .b-close .b-prose p { color: #e4d9c1; }
.b-scope .b-signoff { margin-top: 38px; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--cream); }
.b-scope .b-signature { width: min(300px, 70%); margin-top: 10px; opacity: .95; }
.b-scope .b-close-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 44px; }
.b-scope .b-close-cta .b-fine { max-width: 22em; }
@media (prefers-reduced-motion: reduce) {
.b-scope { scroll-behavior: auto; }
.b-scope *, .b-scope *::before, .b-scope *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.js .b-scope [data-reveal] { opacity: 1; transform: none; }
.b-scope .b-ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
.b-scope .b-ticker-track .b-dup { display: none; }
.b-scope .b-world-guitar { --py: 0px !important; --pr: 0deg !important; }
}
.b-scope .b-hint-narrow { display: none; }
@media (max-width: 639px) {
.b-scope .b-hint-wide { display: none; }
.b-scope .b-hint-narrow { display: inline; }
.b-scope .b-myth-grid, .b-scope .b-takes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 8px var(--gutter) 22px;
    scrollbar-width: none;
  }
.b-scope .b-myth-grid::-webkit-scrollbar, .b-scope .b-takes::-webkit-scrollbar { display: none; }
.b-scope .b-myth, .b-scope .b-take { scroll-snap-align: start; }
.js .b-scope .b-myth-grid [data-reveal], .js .b-scope .b-takes [data-reveal] { opacity: 1; transform: none; }
.b-scope .b-myth-inner { min-height: 250px; }
.b-scope .b-jcard-list li { padding: 8px 0; font-size: 1rem; }
.b-scope .b-jcard { grid-template-columns: 44px 1fr; }
}
@media (max-width: 759px) {
.b-scope .b-takes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 8px var(--gutter) 22px;
    scrollbar-width: none;
  }
}
@media (max-width: 699px) {
.b-scope .b-steps { gap: 0; margin-top: 22px; }
.b-scope .b-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 16px;
    padding: 18px 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-top: 1.5px solid var(--line);
  }
.b-scope .b-step .b-key { width: 52px; height: 42px; grid-row: span 2; }
.b-scope .b-step h4 { margin-top: 0; font-size: 1.18rem; }
.b-scope .b-step p { margin-top: 4px; font-size: 1rem; }
.b-scope .b-step-num { display: none; }
}
@media (max-width: 979px) {
.b-scope .b-story-photo img { aspect-ratio: 4 / 3.3; object-position: 50% 16%; }
.b-scope .b-world-art { height: clamp(210px, 58vw, 330px); }
.b-scope .b-spot { width: clamp(170px, 46vw, 300px); }
.b-scope .b-world-inner { padding-block: 40px 56px; }
.b-scope .b-world-pull { margin-top: 18px; }
}
@media (max-width: 979px) {
.b-scope .b-world-guitar { height: clamp(240px, 74vw, 380px); width: auto; transform: translateY(var(--py, 0px)) rotate(calc(var(--rot, -12deg) * .35 + 70deg + var(--pr, 0deg))); }
}
@media (max-width: 639px) {
.b-scope .b-deck-model { display: none; }
.b-scope .b-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-scope .b-phrase-top { flex-direction: column; gap: 4px; }
.b-scope .b-dock { padding-inline: 14px; gap: 10px; }
.b-scope .b-dock-timer { display: grid; gap: 3px; }
.b-scope .b-dock-timer .b-dock-label { display: block; font-size: .625rem; letter-spacing: .14em; }
.b-scope .b-dock .b-seg-sm svg { width: 12px; height: 19px; }
.b-scope .b-dock .b-seg-sm .b-seg-colon { font-size: .95rem; }
.b-scope .b-dock .b-seg { gap: 3px; }
.b-scope .b-dock .b-btn { white-space: nowrap; }
}



/* ==========================================================================
   4. Version C
   ========================================================================== */

/* Version B's palette, matched to Version A's creams and charcoal */
.b-scope {
  --paper: #f4ebd9;
  --paper-2: #e9e0cd;
  --cream: #fbf5e7;
  --line: #d6cbb5;
  --tape: #151311;
  --tape-2: #1f1c19;
  --on-tape: #f4ebd9;
  --on-tape-2: #cbc6b8;
  --accent-ink: #c4502a;
  --accent-dark: #ea6f1c;
  --wrap: 1300px;
  font-size: 18px;
  background: none;
  overflow-x: visible;
}
@media (min-width: 760px) { .b-scope { font-size: 19px; } }
/* Headlines follow Version A: Archivo, with GT Super for the accent */
.b-scope .b-h2 { font-size: clamp(44px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.055em; }
.b-scope .b-h2 em { font-weight: 400; letter-spacing: -.035em; }
.b-scope h3.b-h3 { font-weight: 760; }

/* ---- Hero: eyebrow, subheader, and the video plays inside the TV ---- */
.c-eyebrow {
  display: block;
  margin: 0 0 22px;
  font: 700 13px/1.2 var(--sans); font-stretch: 125%;
  letter-spacing: .16em; text-transform: uppercase;
  color: #b8481f;
}
.c-hero-sub {
  max-width: 36em; margin: 26px auto 0;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5;
  color: #5b554a; text-wrap: balance;
}
.c-tv-frame { position: absolute; inset: 0; z-index: 6; display: none; background: #000; }
.c-tv-frame iframe, .c-tv-frame video { width: 100%; height: 100%; border: 0; display: block; }
.television.is-playing .c-tv-frame { display: block; }
.television.is-playing .opus-play,
.television.is-playing .tv-osd,
.television.is-playing .opus-crt,
.television.is-playing .tv-hit-target { display: none; }

/* ---- Band: one flat row ---- */
.c-band {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 26px max(5%, 20px);
  background: linear-gradient(180deg, #221f1c, #151311);
  border-top: 1px solid #45474a; border-bottom: 1px solid #0b0a09;
  color: #f3e9d4;
}
.c-band p {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin: 0; padding: 4px 18px;
  border-left: 1px solid #ffffff22;
  line-height: 1.3;
}
.c-band p:first-child { border-left: 0; }
.c-band strong { font: 800 clamp(26px, 2.4vw, 36px)/1 var(--sans); font-stretch: 112%; letter-spacing: -.035em; white-space: nowrap; }
.c-band span { font-size: 16px; color: #c9c6ba; }
@media (max-width: 760px) {
  .c-band { padding: 18px 12px; }
  .c-band p { flex-direction: column; align-items: center; gap: 6px; padding: 2px 8px; text-align: center; }
  .c-band strong { font-size: 21px; }
  .c-band span { font-size: 12.5px; line-height: 1.3; }
}

/* ---- Welcome from Paul ---- */
.c-welcome {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(560px, 46vw, 760px);
  background: #151311; color: #f4ebd9;
}
.c-welcome-photo { position: absolute; inset: 0 0 0 auto; width: 64%; z-index: -2; }
.c-welcome-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 22%; }
.c-welcome-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #151311 36%, rgba(21,19,17, .82) 48%, rgba(21,19,17, .1) 72%, transparent),
              linear-gradient(0deg, #151311, transparent 22%);
}
.c-welcome-copy { width: min(560px, 44%); margin-left: 7%; padding-block: 110px; }
.c-welcome h2 { font-size: clamp(50px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.055em; }
.c-welcome h2 em { color: #ea6f1c; }
.c-welcome p { margin-top: 20px; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; color: #cfc8b6; }
.c-welcome .c-welcome-hi { margin-top: 34px; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.4; color: #f4ebd9; }
.c-signature { width: 230px; height: auto; margin-top: 26px; opacity: .95; }
@media (max-width: 900px) {
  .c-welcome { display: block; min-height: 0; }
  .c-welcome-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; }
  .c-welcome-photo img { object-position: 42% 20%; }
  .c-welcome-shade { background: linear-gradient(0deg, #151311 0%, rgba(21,19,17, .9) calc(100% - 75vw), transparent calc(100% - 42vw)); }
  .c-welcome-copy { width: auto; margin: -70px 0 0; padding: 0 24px 80px; position: relative; }
  .c-welcome h2 { font-size: clamp(40px, 11vw, 56px); }
  .c-signature { width: 190px; }
}

/* ---- "Already in reach": the headline, then one line at a time ---- */
.c-reach { position: relative; height: 330vh; background: #151311; color: #f4ebd9; }
.c-reach-stage {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px 9% 60px; max-width: 1360px; margin-inline: auto;
}
.c-reach h2 { max-width: 15em; font-size: clamp(38px, 4.6vw, 76px); line-height: 1.04; letter-spacing: -.05em; }
.c-reach h2 em { color: #ea6f1c; }
.c-reach-list { list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.8vw, 24px); }
.c-reach-list li {
  display: grid; grid-template-columns: clamp(28px, 3vw, 44px) 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: baseline;
  max-width: 34em;
  font: 600 clamp(21px, 2.1vw, 34px)/1.22 var(--sans); letter-spacing: -.02em;
  opacity: .13; transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.c-reach-list li::before { content: ""; height: clamp(7px, .7vw, 10px); background: var(--c); transform: translateY(-.28em); }
.c-reach-list li.is-on, .c-reach-turn.is-on { opacity: 1; transform: none; }
.c-reach-turn {
  margin-top: clamp(34px, 4.6vw, 64px);
  font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.2;
  color: #e9aa67;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
@media (max-width: 760px) {
  .c-reach { height: 290vh; }
  .c-reach-stage { padding: 80px 24px 110px; }
  .c-reach h2 { font-size: clamp(32px, 8.6vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .c-reach { height: auto; }
  .c-reach-stage { position: static; min-height: 0; padding-block: 110px; }
}

/* ---- Pain cards (Version B's flip cards) ---- */
.c-pain .b-myth-claim { font-size: clamp(1.6rem, 2.4vw, 2.05rem); }
.c-pain .b-myth-back .b-myth-truth { font-size: clamp(1.55rem, 2.2vw, 1.95rem); }
.c-pain .b-myth-inner { min-height: 300px; }
.c-pain .b-myth-answer { margin-top: auto; padding-top: 18px; border-top: 1px solid #ffffff1c; }
.c-pain .b-myth-truth { margin-bottom: 18px; }

/* ---- Benefits: where you end up, as a J-card ---- */
.c-benefits { padding: clamp(100px, 11vw, 150px) 6%; background: #151311; color: #f4ebd9; text-align: center; }
.c-benefits h2 em { color: #ea6f1c; }
.c-jcard {
  display: grid; grid-template-columns: 64px 1fr;
  max-width: 1000px; margin: clamp(46px, 5vw, 70px) auto 0;
  background: #f4ebd9; color: #1b1916; text-align: left;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 40px 70px -30px rgba(0, 0, 0, .8);
  transform: rotate(-.6deg);
}
.c-jcard-spine {
  display: flex; justify-content: space-between; align-items: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 22px 0; background: #1b1916; color: #f4ebd9;
  font: 800 12px/1 var(--sans); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase;
}
.c-jcard-body { padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3.6vw, 52px) clamp(18px, 2.6vw, 34px); }
.c-jcard-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 18px; }
.c-jcard-side { grid-row: span 2; font: 900 clamp(64px, 7vw, 96px)/.8 var(--sans); font-stretch: 125%; letter-spacing: -.04em; }
.c-jcard-title { font: 800 clamp(15px, 1.2vw, 18px)/1.2 var(--sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.c-jcard-band { display: block; height: 22px; background: linear-gradient(#fbb020 0 20%, #ea6f1b 20% 40%, #c21b25 40% 60%, #951a3c 60% 80%, #4f1036 80%); }
.c-jcard-list { list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; }
.c-jcard-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 20px 0 22px; border-top: 1.5px dashed #c9bda4; }
.c-tn { font: 800 15px/1.5 var(--sans); font-stretch: 118%; letter-spacing: .06em; color: #c4502a; padding-top: 5px; }
.c-jcard-list h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 760; letter-spacing: -.03em; line-height: 1.15; }
.c-jcard-list p { margin-top: 6px; font-size: 18px; line-height: 1.5; color: #4c463d; }
.js .c-benefits [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .c-benefits .c-jcard[data-reveal] { transform: translateY(22px) rotate(-.6deg); }
.js .c-benefits [data-reveal].is-in { opacity: 1; transform: none; }
.js .c-benefits .c-jcard[data-reveal].is-in { transform: rotate(-.6deg); }
@media (max-width: 640px) {
  .c-jcard { grid-template-columns: 40px 1fr; transform: none; }
  .c-jcard-spine { font-size: 10px; padding: 16px 0; }
  .c-jcard-list li { grid-template-columns: 34px 1fr; gap: 8px; padding: 16px 0 18px; }
  .c-jcard-list p { font-size: 16px; }
  .js .c-benefits .c-jcard[data-reveal], .js .c-benefits .c-jcard[data-reveal].is-in { transform: none; }
}

/* ---- How every world works ---- */
.c-how { background: #e9e0cd; }
.c-how .b-steps { margin-top: 40px; }

/* ---- Worlds (Version B) with a benefit headline ---- */
.b-scope .c-world-hook {
  margin-top: 22px; max-width: 19em;
  font: 700 clamp(24px, 2.3vw, 34px)/1.16 var(--sans); letter-spacing: -.03em;
  color: #f4ebd9; text-wrap: balance;
}
.b-scope .b-world-learn { margin-top: 22px; }
.b-scope .b-world-actions .button.world-preview { min-height: 54px; font-size: 16px; color: #1b1916; }

/* ---- Cassette: the hubs spin on their own, over a body with the hubs cut out ---- */
.tape-reel { background-size: 100% 100% !important; background-position: 0 0 !important; }
.reel-left { background-image: url("../img/reel-l.webp") !important; }
.reel-right { background-image: url("../img/reel-r.webp") !important; }

/* ---- Hero: the price line sits centred under the button at every width ---- */
.analogue-bottom .hero-fine { margin-inline: auto; text-align: center; }

/* ---- Hero: pressing play grows the TV as big as the window allows: nearly the full
   width on phones, the full window height on laptops. It sits in front of the stripes.
   The CRT image is 1504 x 1046, but the set itself only fills the middle 78% of its
   width (the rest is a soft transparent edge), so the sizes below allow for that. ---- */
.television { transition: width .7s cubic-bezier(.2,.7,.2,1), margin .7s cubic-bezier(.2,.7,.2,1), left .7s cubic-bezier(.2,.7,.2,1); }
.television.is-playing {
  --tvw: min(94vw / .78, 1480px, calc((100svh - 40px) * 1504 / 1046));
  width: var(--tvw);
  max-width: none;
  left: 50%;
  margin: 24px 0 20px calc(var(--tvw) / -2);
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) { .television { transition: none; } }

/* ---- Pop-up tape player for "Hear the solo" in each world ---- */
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-tape-pop {
  width: min(560px, calc(100vw - 24px)); max-width: none; padding: clamp(26px, 5vw, 44px) clamp(18px, 4vw, 40px) clamp(22px, 4vw, 34px);
  border: 0; border-radius: 4px; background: #1f1c19; color: #f4ebd9;
  box-shadow: 0 0 0 1px #ffffff1c, 0 40px 90px rgba(0, 0, 0, .6);
  overflow: visible;
}
.c-tape-pop::backdrop { background: rgba(12,11,10, .78); backdrop-filter: blur(4px); }
.c-tape-pop[open] { animation: c-pop-in .35s cubic-bezier(.2,.7,.2,1); }
@keyframes c-pop-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.c-tape-pop-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 2px solid #f4ebd9; border-radius: 0; background: transparent; color: #f4ebd9; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.c-tape-pop-close svg { width: 18px; height: 18px; }
.c-tape-pop-close:hover { background: #ea6f1c; border-color: #ea6f1c; color: #151311; }
.c-tape-pop .c-pop-cassette { width: 100%; margin: 8px 0 0; transform: rotate(-2deg); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55)); cursor: default; }
.c-tape-pop .c-pop-cassette.playing { transform: rotate(0deg); }
.c-tape-pop .c-pop-cassette img { width: 100%; height: auto; }
.c-tape-pop[data-tape="1"] .tape-label strong { color: #294865; }
.c-tape-pop[data-tape="2"] .tape-label strong { color: #6e481f; }
.c-tape-pop[data-tape="3"] .tape-label strong { color: #2e5c55; }
.c-tape-pop[data-tape="4"] .tape-label strong { color: #7e2c38; }
.c-tape-pop .tape-label strong { font-size: clamp(21px, 5.4vw, 30px); }
.c-tape-pop .c-pop-controls { margin: 26px 0 0; flex-wrap: nowrap; }
.c-tape-pop .c-pop-play { width: 74px !important; background: linear-gradient(#f28a3a, #dd661a) !important; box-shadow: 0 5px 0 #8a3a0d, 0 9px 12px rgba(0,0,0,.45), inset 0 1px 0 #ffc79b !important; }
.c-tape-pop .c-pop-play[aria-pressed="true"] { transform: translateY(4px) !important; box-shadow: 0 1px 0 #8a3a0d, 0 3px 6px rgba(0,0,0,.4), inset 0 1px 0 #ffc79b !important; }
.c-pop-play::before { width: 17px !important; height: 18px !important; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.c-pop-play[aria-pressed="true"]::before { clip-path: none; width: 15px !important; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%) !important; }
.c-pop-rew::before { clip-path: polygon(0 0, 16% 0, 16% 48%, 100% 0, 100% 100%, 16% 52%, 16% 100%, 0 100%); }
.c-tape-pop .audio-track > div { font-size: 14px !important; }
@media (max-width: 480px) {
  .c-tape-pop .c-pop-controls button { width: 50px !important; }
  .c-tape-pop .c-pop-play { width: 60px !important; }
}

/* ---- Practice Center heading: the same size as "Solo like never before" ---- */
html body .studio-copy h2 { font-size: clamp(50px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.055em; }
html body .studio-copy h2 em { letter-spacing: -.035em; }
@media (max-width: 900px) { html body .studio-copy h2 { font-size: clamp(40px, 11vw, 56px); } }

/* ==========================================================================
   Version D: copy from the "Sales Page Copy" doc
   ========================================================================== */

/* Band: four items; two by two on phones */
.c-band-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .c-band-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .c-band-4 p:nth-child(3) { border-left: 0; }
}

/* Welcome sign-off */
.c-welcome .c-welcome-cheers { margin-top: 26px; color: #f4ebd9; }
.c-welcome .c-welcome-cheers + .c-signature { margin-top: 6px; }

/* "Closer than you think": six lines. When they don't all fit on screen (phones,
   short laptops) the section drops the pinned stage and each line reveals as it
   scrolls into view. */
.c-reach-list li { max-width: 36em; font-size: clamp(19px, 1.8vw, 28px); }
.c-reach.is-flow { height: auto; }
.c-reach.is-flow .c-reach-stage { position: static; min-height: 0; padding-block: clamp(80px, 10vw, 130px); }

/* Three truths: paragraphs inside each chapter */
.chapter-copy p .c-para { display: block; }
.chapter-copy p .c-para + .c-para { margin-top: .75em; }

/* Benefits: a longer headline */
.c-benefits h2 { font-size: clamp(38px, 4.6vw, 76px); max-width: 15em; margin-inline: auto; text-wrap: balance; }
.c-benefits h2 em { text-wrap: balance; }

/* Worlds: the hook is a full sentence now */
.b-scope .c-world-hook { font-size: clamp(21px, 1.9vw, 28px); max-width: 22em; }
.c-reach { height: 420vh; }

/* ==========================================================================
   Version E: the tweaks from the team call
   ========================================================================== */

/* ---- Headlines: all sans. The accent line is Archivo italic in the same weight,
   like Version B, instead of the GT Super serif ---- */
html body h1 em, html body h2 em, html body h3 em,
html body .analogue-heading em, html body .opus-amp,
.b-scope .b-h2 em, .c-reach-turn {
  font-family: var(--sans);
  font-style: italic;
  font-weight: inherit;
  font-stretch: inherit;
  letter-spacing: inherit;
}
html body .analogue-heading h1 em { font-size: 1em; line-height: 1; }
html body .opus-amp { font-size: 1em; }

/* ---- Welcome: the new photo, with the guitar kept clear of the shading ---- */
.c-welcome-photo { width: 62%; }
.c-welcome-photo img { object-position: 60% 45%; }
.c-welcome-shade {
  background: linear-gradient(90deg, #151311 38%, rgba(21,19,17, .55) 43%, transparent 52%),
              linear-gradient(0deg, #151311, transparent 7%);
}
@media (max-width: 900px) {
  .c-welcome-photo { width: 100%; aspect-ratio: 3 / 2; }
  .c-welcome-photo img { object-position: 50% 50%; }
  .c-welcome-shade { background: linear-gradient(0deg, #151311 0, transparent 10%); }
  .c-welcome-photo + .c-welcome-shade { top: 0; bottom: auto; height: calc(100vw * 2 / 3); }
  .c-welcome-copy { margin-top: 12px; }
}

/* ---- Dream: a retro "keep scrolling" key, centred ---- */
.c-scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: max-content; margin: clamp(48px, 6vw, 72px) auto 0;
  color: #f4ebd9; text-decoration: none;
}
.c-scroll-key {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border: 4px solid #f4ebd9; border-radius: 0;
  background: rgba(12, 10, 8, .6);
  transition: background-color .2s, color .2s, border-color .2s;
}
.c-scroll-key svg { width: 24px; height: 24px; animation: c-nudge 1.6s ease-in-out infinite; }
.c-scroll-label { font: 700 12px/1 var(--sans); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; color: #cbc6b8; }
.c-scroll-cue:hover .c-scroll-key { background: #ea6f1c; border-color: #ea6f1c; color: #151311; }
@keyframes c-nudge { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .c-scroll-key svg { animation: none; } }

/* ---- "Closer than you think": a tape insert on plum ---- */
.c-reach-e { background: #4f1036; }
.c-reach-e .c-reach-stage { align-items: center; padding-inline: 5%; }
.c-reach-card { width: min(1000px, 100%); margin: 0; transform: rotate(-.5deg); }
.c-reach-card .c-jcard-body { padding-top: clamp(26px, 3.4vw, 46px); }
.c-reach-card h2 { color: #1b1916; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -.05em; max-width: 15em; text-wrap: balance; }
.c-reach-card h2 em { color: #c4502a; }
.c-reach-card .c-jcard-band { margin-top: clamp(18px, 2vw, 26px); }
.c-reach-card .c-jcard-list { margin-top: clamp(10px, 1.4vw, 18px); }
.c-reach-card .c-reach-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: baseline;
  max-width: none; padding: 16px 0 17px; border-top: 1.5px dashed #c9bda4;
  font: inherit; letter-spacing: normal;
  opacity: .16; transform: translateY(10px);
}
.c-reach-card .c-reach-list li:first-child { border-top: 0; }
.c-reach-card .c-reach-list li::before { content: none; }
.c-reach-card .c-reach-list li.is-on { opacity: 1; transform: none; }
.c-reach-card .c-reach-list p { margin: 0; font: 700 clamp(18px, 1.7vw, 24px)/1.3 var(--sans); letter-spacing: -.02em; color: #1b1916; }
.c-reach-e .c-reach-turn { color: #f4ebd9; font-weight: 700; text-align: center; margin-inline: auto; max-width: 22em; }
@media (max-width: 640px) {
  .c-reach-card { transform: none; }
  .c-reach-card .c-reach-list li { grid-template-columns: 34px 1fr; gap: 8px; padding: 13px 0 14px; }
  .c-reach-e .c-reach-stage { padding-inline: 16px; }
}

/* ---- How each world works: the lesson video across the full width ---- */
.c-lesson-wide { margin-top: clamp(80px, 9vw, 120px); }
.c-lesson-head { max-width: 760px; margin-inline: auto; text-align: center; }
.c-lesson-head .b-lede { margin-top: 16px; }
.c-lesson-head .b-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.c-lesson-video { position: relative; margin-top: clamp(34px, 4vw, 52px); }
.c-lesson-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #000; box-shadow: 0 30px 60px -30px rgba(30, 20, 8, .55); }
.c-lesson-video .b-monitor-tag { top: 16px; left: 16px; }

/* ---- Worlds: a cassette player for each world ---- */
.c-world-deck { position: relative; z-index: 1; width: min(560px, 100%); justify-self: center; }
.c-deck-cassette { width: 100%; margin: 0; transform: rotate(-2deg); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); cursor: default; }
.c-deck-cassette.playing, .c-deck-cassette.playing:hover { transform: rotate(0deg); }
.c-deck-cassette img { width: 100%; height: auto; }
.c-deck-cassette .tape-label strong { font-size: clamp(20px, 2.3vw, 32px); }
.c-world-deck[data-world-deck="1"] .tape-label strong { color: #294865; }
.c-world-deck[data-world-deck="2"] .tape-label strong { color: #6e481f; }
.c-world-deck[data-world-deck="3"] .tape-label strong { color: #2e5c55; }
.c-world-deck[data-world-deck="4"] .tape-label strong { color: #7e2c38; }
/* each world's tape carries a sticker in that world's colour */
.c-sticker {
  position: absolute; top: 12%; right: 10%; z-index: 3;
  display: grid; justify-items: center; gap: 1px;
  padding: 7px 10px 6px; min-width: 16%;
  background: var(--c); color: #fff6d7;
  font: 800 clamp(9px, .8vw, 11px)/1 var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(7deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .25);
}
.c-sticker b { font-size: 2.1em; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
#world-blues .c-sticker, #world-rock .c-sticker { color: #1b1916; }
.c-deck-controls { margin: 28px 0 0; flex-wrap: nowrap; border-color: #ffffff26 !important; }
.c-world-deck .c-pop-play { width: 74px !important; background: linear-gradient(#f28a3a, #dd661a) !important; box-shadow: 0 5px 0 #8a3a0d, 0 9px 12px rgba(0,0,0,.45), inset 0 1px 0 #ffc79b !important; }
.c-world-deck .c-pop-play[aria-pressed="true"] { transform: translateY(4px) !important; box-shadow: 0 1px 0 #8a3a0d, 0 3px 6px rgba(0,0,0,.4), inset 0 1px 0 #ffc79b !important; }
.c-world-deck .audio-track > div { font-size: 14px !important; color: #f4ebd9; }
@media (max-width: 979px) {
  .c-world-deck { order: 3; margin-top: 30px; width: min(480px, 100%); }
}
@media (max-width: 480px) {
  .c-world-deck .c-deck-controls button { width: 50px !important; }
  .c-world-deck .c-pop-play { width: 60px !important; }
}

/* ---- Extras: background videos instead of artwork ---- */
.c-bonus-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Meet your teacher: polaroids ---- */
.c-polaroids { max-width: 520px; }
.c-polaroid {
  margin: 0; padding: 14px 14px 52px;
  background: #fbf8f1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 22px 40px -22px rgba(40, 28, 12, .55);
}
.c-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 0; filter: saturate(.92) contrast(1.02); }
.c-polaroid-main { transform: rotate(-2deg); }
.c-polaroid-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.c-polaroid-sm { padding: 6px 6px 20px; }
.c-polaroid-sm:nth-child(1) { transform: rotate(3deg); }
.c-polaroid-sm:nth-child(2) { transform: rotate(-2.5deg) translateY(6px); }
.c-polaroid-sm:nth-child(3) { transform: rotate(2deg); }
.c-polaroid-sm:nth-child(4) { transform: rotate(-3.5deg) translateY(4px); }
@media (max-width: 760px) {
  .c-polaroids { margin-inline: auto; }
  .c-polaroid { padding: 10px 10px 40px; }
  .c-polaroid-sm { padding: 4px 4px 14px; }
  .c-polaroid-row { gap: 10px; margin-top: 22px; }
}

/* ---- Worlds: each tape has its own label colour (the label is the tape image) ---- */
.c-world-deck .tape-label > span, .c-world-deck .tape-side { color: #f4ebd9; }
.c-world-deck[data-world-deck="0"] .tape-label strong { color: #f4ebd9; }
.c-world-deck[data-world-deck="1"] .tape-label strong,
.c-world-deck[data-world-deck="1"] .tape-label > span,
.c-world-deck[data-world-deck="1"] .tape-side { color: #1b1916; }
.c-world-deck[data-world-deck="2"] .tape-label strong { color: #fff6d7; }
.c-world-deck[data-world-deck="3"] .tape-label strong { color: #fff6d7; }
.c-world-deck[data-world-deck="4"] .tape-label strong,
.c-world-deck[data-world-deck="4"] .tape-label > span,
.c-world-deck[data-world-deck="4"] .tape-side { color: #1b1916; }

/* ---- "Closer than you think": a warm stone background instead of plum ---- */
.c-reach-e { background: #9a9082; }
.c-reach-e .c-reach-turn { color: #1b1916; }

/* ---- Worlds: alternate the columns on desktop (tape left for the Blues and Mayer) ---- */
@media (min-width: 980px) {
  .b-scope .b-world:is([data-world="1"], [data-world="3"]) .b-world-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .b-scope .b-world:is([data-world="1"], [data-world="3"]) .b-world-copy { order: 2; }
  .b-scope .b-world:is([data-world="1"], [data-world="3"]) .c-world-deck { order: 1; }
  .b-scope .b-world:is([data-world="1"], [data-world="3"]) .b-world-ghost { right: auto; left: -2vw; }
}

/* ---- How each world works: the line under the heading at a readable size ---- */
.b-scope .c-how .b-how-head { display: block; }
.b-scope .c-how .b-how-head .b-fine { margin-top: 18px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--ink-2); }

/* ---- Tape and carousel keys: flat colours with a hard edge, no gradients or glows ---- */
html body .c-world-deck .tape-controls button,
html body .results-controls button {
  background: #efe6d2 !important;
  color: #1b1916 !important;
  box-shadow: 0 5px 0 #8f8570 !important;
}
html body .c-world-deck .tape-controls .c-pop-play {
  background: #ea6f1c !important;
  box-shadow: 0 5px 0 #9a430f !important;
}
html body .c-world-deck .tape-controls button:active,
html body .results-controls button:active,
html body .results-controls .results-pause[aria-pressed=true] {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #8f8570 !important;
}
html body .c-world-deck .tape-controls .c-pop-play:active,
html body .c-world-deck .tape-controls .c-pop-play[aria-pressed="true"] {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #9a430f !important;
}
.b-scope .c-how .b-key { background: #1b1916; box-shadow: 0 5px 0 #000; }

/* ---- Tape reels: faster, and the left (take-up) reel turns quicker than the right ---- */
html body .c-deck-cassette .reel-left { animation-duration: 1.4s !important; }
html body .c-deck-cassette .reel-right { animation-duration: 2.4s !important; }

/* ---- Headline accents: one orange on dark sections, the deeper orange on light ones ---- */
html body #faq-title em, html body #struggle-title em, html body #five-worlds-heading em { color: #ea6f1c; }
html body .teacher h2 em { color: #c4502a; }

/* ---- Close: keep the text clear of the stripes down the left edge at tablet widths ---- */
@media (min-width: 760px) and (max-width: 1100px) {
  .b-scope .c-close .b-wrap { width: auto; margin-left: 136px; margin-right: var(--gutter); }
}
@media (max-width: 759px) {
  .b-scope .c-close .b-wrap { padding-left: 12px; }
}

/* ==========================================================================
   Swapped: "How each world works" now sits on dark, "A year from now" on cream
   ========================================================================== */
.b-scope .c-how.b-dark .b-how-head .b-fine { color: var(--on-tape-2); }
.b-scope .c-how.b-dark .b-step { background: #1f1c19; box-shadow: inset 0 0 0 1.5px #3d3732; }
.b-scope .c-how.b-dark .b-step h4 { color: var(--on-tape); }
.b-scope .c-how.b-dark .b-step p { color: var(--on-tape-2); }
.b-scope .c-how.b-dark .b-step-num { color: #8d897f; }
.b-scope .c-how.b-dark .b-key { background: #efe6d2; color: #1b1916; box-shadow: 0 5px 0 #8f8570; }
.b-scope .c-how.b-dark .b-key.b-rec svg { color: #d8321f; }
@media (max-width: 699px) {
  .b-scope .c-how.b-dark .b-step { background: none; box-shadow: none; border-top-color: #3d3732; }
}
.b-scope .c-how.b-dark .c-lesson-video video { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }

/* "A year from now" on cream, with a black tape insert */
.c-benefits { background: #e9e0cd; color: #1b1916; }
.c-benefits h2 { color: #1b1916; }
.c-benefits h2 em { color: #c4502a; }
.c-benefits .c-jcard { background: #1f1d1b; color: #f4ebd9; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 40px 70px -34px rgba(40, 28, 12, .75); }
.c-benefits .c-jcard-spine { background: #ea6f1c; color: #1b1916; }
.c-benefits .c-jcard-side, .c-benefits .c-jcard-title { color: #f4ebd9; }
.c-benefits .c-jcard-list li { border-top-color: #45403a; }
.c-benefits .c-tn { color: #ea6f1c; }
.c-benefits .c-jcard-list h3 { color: #f4ebd9; }
.c-benefits .c-jcard-list p { color: #c9c2b2; }

/* ---- Follow along: centre the paragraph block, pills under the video ---- */
.b-scope .c-lesson-head .b-lede { max-width: 36em; margin-inline: auto; }
.b-scope .c-lesson-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.c-benefits .c-jcard-head { grid-template-columns: 1fr; gap: 10px; }

/* ---- Welcome: a wider column on big screens so each headline line fits on one line ---- */
@media (min-width: 901px) { .c-welcome h2 { white-space: nowrap; } }
@media (min-width: 1500px) {
  .c-welcome-copy { width: min(700px, 48%); }
  .c-welcome-copy p { max-width: 560px; }
}

/* ---- Welcome: the fade and the photo follow the text column, so the text always
   sits on solid dark and the fade ends before Paul and the guitar ---- */
@media (min-width: 901px) {
  .c-welcome { --col: min(540px, 40%); }
  .c-welcome-copy { width: var(--col); }
  .c-welcome-photo { left: calc(7% + var(--col) - 40px); right: 0; width: auto; }
  .c-welcome-photo img { object-position: 62% 40%; }
  .c-welcome-shade {
    background:
      linear-gradient(90deg, #151311 calc(7% + var(--col) + 16px), rgba(21,19,17, .6) calc(7% + var(--col) + 60px), rgba(21,19,17, 0) calc(7% + var(--col) + 120px)),
      linear-gradient(0deg, #151311, transparent 7%);
  }
}
@media (min-width: 1500px) {
  .c-welcome { --col: min(620px, 42%); }
}

/* ---- No serif left: the pain card punchlines and Paul's sign-off in Archivo ---- */
.b-scope .b-myth-truth { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.b-scope .b-signoff { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }

/* ---- Student Results keys: dark on the cream section so they stand out ---- */
html body .results-controls button { background: #1b1916 !important; color: #f4ebd9 !important; box-shadow: 0 5px 0 #000 !important; }
html body .results-controls button:active,
html body .results-controls .results-pause[aria-pressed=true] { box-shadow: 0 1px 0 #000 !important; }

/* ---- Introducing Solo School: the product image ---- */
.c-product { display: block; width: min(1040px, 100%); height: auto; margin: 64px auto 0; filter: drop-shadow(0 30px 40px rgba(40, 28, 12, .25)); }
@media (max-width: 760px) { .c-product { margin-top: 40px; width: calc(100% + 16px); max-width: none; margin-left: -8px; } }

/* ---- The last serif outside the tapes: the guarantee "14" and the footer line ---- */
html body .guarantee > span { color: #ea6f1c; font-family: var(--sans); font-weight: 800; font-stretch: 110%; letter-spacing: -.04em; font-size: 2.2rem; }
html body footer > p { font-family: var(--sans); font-style: italic; font-weight: 700; letter-spacing: -.02em; }

/* ---- New copy: world body line, practice headline size, extras sub-headings ---- */
.b-scope .b-world .b-world-body { margin-top: 14px; max-width: 32em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: #d9ceb6; }
html body #practice-title { font-size: clamp(38px, 4.4vw, 72px); }
.bonus-copy .c-bonus-sub { margin-top: 6px; font-weight: 700; color: #ea6f1c; }
html body .bonus-copy p.c-bonus-sub { color: #ea6f1c; }
html body #practice-title { text-wrap: balance; }
html body .faq-list details p + p { margin-top: 1em; }

/* ---- Practice Center: the new preview is a light UI, so dim it a touch more behind the text ---- */
html body .studio-photo .opus-practice-video { filter: brightness(.4) saturate(.8); }
@media (max-width: 760px) { html body .studio-photo .opus-practice-video { filter: brightness(.3) saturate(.75); } }

/* ---- Practice Center: copy on the left, the preview playing on the right ---- */
html body .practice-studio.c-practice-split { height: auto; min-height: 0; max-height: none; padding: clamp(90px, 10vw, 140px) 6%; background: #151311; }
.c-practice-inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 80px); align-items: center; max-width: 1400px; margin-inline: auto; }
html body .c-practice-split .studio-copy { position: static; width: auto; max-width: none; padding: 0; }
.c-practice-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #000; box-shadow: 0 0 0 1px #ffffff1a, 0 40px 70px -30px rgba(0, 0, 0, .8); }
@media (max-width: 980px) {
  .c-practice-inner { grid-template-columns: 1fr; }
  html body .practice-studio.c-practice-split { padding: 80px 24px; }
}

/* ---- Extras: the previews are 16:9 ---- */
html body .bonus-card .bonus-visual.c-bonus-video { aspect-ratio: 16 / 9; }

/* ---- Worlds: the big outlined number sits fully inside the world, not cut off ---- */
.b-scope .b-world .b-world-ghost { right: clamp(20px, 3vw, 56px); bottom: clamp(20px, 2.5vw, 44px); padding-right: .06em; }
@media (min-width: 980px) {
  .b-scope .b-world:is([data-world="1"], [data-world="3"]) .b-world-ghost { right: auto; left: clamp(20px, 3vw, 56px); }
}

/* ---- Meet your teacher: one polaroid that fades through Paul's photos ---- */
.c-polaroid-stack { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #d9d2c3; }
.c-polaroid-stack img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .8s ease; }
.c-polaroid-stack img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .c-polaroid-stack img { transition: none; } }

/* ---------- Version B pricing section (namespaced) ---------- */
.b-scope .b-join { overflow: hidden; }
.b-scope .b-join-grid { display: grid; gap: 40px; align-items: start; grid-template-areas: "title" "card" "points"; }
.b-scope .b-join-title { grid-area: title; }
.b-scope .b-join-grid .b-price-card { grid-area: card; }
.b-scope .b-join-grid .b-join-points { grid-area: points; margin-top: 0; }
@media (min-width: 1040px) {
.b-scope .b-join-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title card" "points card"; grid-template-rows: auto 1fr; column-gap: 80px; row-gap: 40px; }
.b-scope .b-join-title { align-self: end; }
.b-scope .b-join-grid .b-price-card { align-self: center; }
}
.b-scope .b-join .b-h2 { font-size: clamp(2.6rem, 6vw, 5rem); }
.b-scope .b-join-points { display: grid; gap: 26px; }
.b-scope .b-join-points h3 { font-size: 1.25rem; font-weight: 760; letter-spacing: -.015em; color: var(--on-tape); }
.b-scope .b-join-points p { margin-top: 6px; color: var(--on-tape-2); line-height: 1.55; }
.b-scope .b-join-points > div { padding-left: 22px; border-left: 4px solid var(--c, var(--s1)); }
.b-scope .b-join-points > div:nth-child(2) { --c: var(--s2); }
.b-scope .b-join-points > div:nth-child(3) { --c: var(--s3); }
.b-scope .b-price-card {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(170deg, #fff8e0, #f2e5c4);
  color: var(--ink);
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.b-scope .b-pc-spine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: var(--tape);
  color: var(--cream);
  font-size: .75rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.b-scope .b-pc-body { padding: clamp(24px, 3.4vw, 40px); }
.b-scope .b-pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.b-scope .b-pc-logo { width: min(210px, 52%); }
.b-scope .b-pc-corner {
  width: 92px;
  height: 92px;
  flex: none;
  margin: -6px -6px 0 0;
}
.b-scope .b-pc-list { margin-top: 26px; }
.b-scope .b-pc-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(60, 48, 30, .14);
  line-height: 1.4;
}
.b-scope .b-pc-list li:first-child { border-top: 0; }
.b-scope .b-pc-list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--c, var(--s2)); }
.b-scope .b-pc-list li:nth-child(5n+1) { --c: #d98f00; }
.b-scope .b-pc-list li:nth-child(5n+2) { --c: var(--s2); }
.b-scope .b-pc-list li:nth-child(5n+3) { --c: var(--s3); }
.b-scope .b-pc-list li:nth-child(5n+4) { --c: var(--s4); }
.b-scope .b-pc-list li:nth-child(5n+5) { --c: var(--s5); }
.b-scope .b-pc-list .b-bonus { font-size: .6875rem; font-weight: 800; font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-right: 6px; }
.b-scope .b-pc-price {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.b-scope .b-pc-amount {
  font-size: clamp(4.4rem, 9vw, 6.4rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -.07em;
  line-height: .8;
}
.b-scope .b-pc-amount sup { font-size: .42em; vertical-align: .95em; letter-spacing: 0; margin-right: .04em; }
.b-scope .b-pc-terms { padding-bottom: 4px; line-height: 1.35; }
.b-scope .b-pc-terms strong { display: block; font-size: 1.125rem; }
.b-scope .b-pc-terms span { color: var(--ink-3); font-size: 1rem; }
.b-scope .b-price-card .b-btn { margin-top: 26px; min-height: 64px; font-size: 1.25rem; }
.b-scope .b-pc-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: .9375rem; color: var(--ink-3); }
.b-scope .b-pc-assure span { display: inline-flex; align-items: center; gap: 6px; }
.b-scope .b-pc-assure svg { width: 16px; height: 16px; }
.b-scope .b-pc-clock {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 26px calc(clamp(24px, 3.4vw, 40px) * -1) calc(clamp(24px, 3.4vw, 40px) * -1);
  padding: 20px 16px 22px;
  background: var(--tape);
  color: var(--on-tape-2);
}
.b-scope .b-pc-clock .b-label { color: var(--on-tape-2); }
.b-scope .b-seg { display: flex; align-items: flex-start; gap: 6px; }
.b-scope .b-seg-unit { display: grid; justify-items: center; gap: 4px; }
.b-scope .b-seg-digits { display: flex; gap: 3px; }
.b-scope .b-seg svg { width: 22px; height: 34px; }
.b-scope .b-seg polygon { fill: #3a1411; transition: fill .15s; }
.b-scope .b-seg polygon.b-on { fill: #ff4a2e; filter: drop-shadow(0 0 3px rgba(255, 74, 46, .75)); }
.b-scope .b-seg-cap { font-size: .625rem; font-weight: 800; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: #8e836f; }
.b-scope .b-seg-colon { color: #ff4a2e; font-size: 1.6rem; line-height: 1; margin-top: 2px; text-shadow: 0 0 6px rgba(255, 74, 46, .6); }
.b-scope .b-seg-sm svg { width: 15px; height: 23px; }
.b-scope .b-seg-sm .b-seg-colon { font-size: 1.1rem; }
.b-scope .b-seg-sm .b-seg-cap { display: none; }


/* ---- Pricing: Version B's card, with the page's own Join button ---- */
.b-scope .c-join .c-pc-join { width: 100%; justify-content: center; margin-top: 4px; }

/* ---- Three truths: headlines a little smaller so each fits on two lines ---- */
html body .chapter-copy h3 { font-size: clamp(40px, 5.2vw, 80px); text-wrap: balance; }
@media (max-width: 760px) { html body .chapter-copy h3 { font-size: clamp(32px, 8.4vw, 44px); } }
@media (max-width: 520px) { html body .chapter-copy h3 { font-size: 34px; } }

/* ---- Student Results keys: the tape-deck key style, with the icons centred ---- */
html body .results-controls { gap: 12px !important; }
html body .results-controls button {
  display: flex !important; align-items: center; justify-content: center;
  width: 58px !important; height: 46px !important; padding: 0 !important;
  background: #efe6d2 !important; color: #1b1916 !important;
  border: 1.5px solid #b9ab90 !important; border-radius: 3px !important;
  box-shadow: 0 5px 0 #8f8570 !important;
}
html body .results-controls .results-pause { width: 74px !important; background: #ea6f1c !important; border-color: #c65a14 !important; box-shadow: 0 5px 0 #9a430f !important; }
html body .results-controls button:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 #8f8570 !important; }
html body .results-controls .results-pause:active,
html body .results-controls .results-pause[aria-pressed=true] { transform: translateY(4px) !important; box-shadow: 0 1px 0 #9a430f !important; }

/* ---- Sticky bottom bar: Version B's warm near-black ---- */
html body .mobile-cta { background: rgba(21, 19, 17, .96); border-top-color: rgba(255, 246, 215, .12); }

/* ---- Hero stripes: the header's stripes overlap the hero's by 2px, so no hairline shows where they meet ---- */
html body .site-header { z-index: 6; }
html body .site-header::after { height: auto !important; bottom: -2px; }

/* ---- Hero: "Watch the video" under the TV (from Version B) ---- */
.c-watch {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  margin: 0 auto 26px; padding: .4em 0;
  background: none; border: 0; cursor: pointer;
  font: 700 clamp(17px, 1.3vw, 20px)/1.2 var(--sans); letter-spacing: -.01em; color: #1b1916;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: rgba(27, 25, 22, .35);
  transition: text-decoration-color .2s;
}
.c-watch:hover { text-decoration-color: #1b1916; }
.c-play-badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1b1916; color: #f4ebd9; flex: none; transition: background-color .2s; }
.c-play-badge svg { width: 13px; height: 13px; margin-left: 2px; }
.c-watch:hover .c-play-badge { background: #ea6f1c; color: #1b1916; }

/* ---- TV play button: the triangle centred in the square ---- */
html body .tv-screen .opus-play svg { margin-left: 0; }

/* ---- Close: always leave room under the button for the stripes' bottom run ---- */
@media (min-width: 760px) { .b-scope .c-close { padding-bottom: max(calc(var(--section) * 1.1), 190px); } }