@charset "UTF-8";

:root{--paper:#fffcf7;
--surface:#fffefa;
--raised:#fff2df;
--accent-soft:#fff0d4;
--dark-bg:#18191a;
--dark-surface:#222426;
--dark-raised:#2b2d2f;
--ink:#30271e;
--dark-ink:#f4efe9;
--dark-muted:#b4aaa0;
--dark-accent:#ffa351;
--muted:#766654;
--orange:#a64a00;
--golden-orange:linear-gradient(115deg,#ff870b 0%,#ffa51c 56%,#ffc34c 100%);
--on-orange:#392300;
--peach:#fff0d4;
--line:#ecdfcd;
--serif:Georgia,"Times New Roman",serif;
--sans:"Avenir Next",Avenir,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:30px}
body{margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.65}
a{color:inherit;
text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);
outline-offset:6px}
.shell{width:min(1240px,calc(100% - 96px));
margin:auto}
.skip{position:absolute;
top:-80px;
background:var(--surface);
padding:12px;
z-index:100}
.skip:focus{top:0}
header{height:112px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px}
.brand{display:flex;
align-items:center;
gap:12px;
font-weight:700;
font-size:25px;
letter-spacing:-1px;
line-height:1.1}
.brand small{display:block;
font-size:9px;
letter-spacing:2.2px;
margin-top:8px;
font-weight:600}
.mark{display:grid;
place-items:center;
width:44px;
height:48px;
background:var(--ink);
color:#ff9b40;
border-radius:13px;
font-size:35px}
.header-actions,nav{display:flex;
align-items:center;
gap:30px}
nav{font-size:14px}
nav a:hover,.text-link:hover{color:var(--orange)}
#language{background:transparent;
border:0;
cursor:pointer;
padding:8px;
font-size:12px;
font-weight:700}
.button{display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
padding:17px 24px;
border-radius:9px;
background:var(--golden-orange);
color:var(--on-orange);
font-size:14px;
font-weight:600;
transition:background .2s,transform .2s}
.button:hover{background:var(--golden-orange);
transform:translateY(-2px)}
.button.small{font-size:12px;
padding:13px 19px}
.hero{display:grid;
grid-template-columns:1fr 1fr;
min-height:740px;
align-items:center;
gap:22px;
padding-top:35px;
padding-bottom:65px}
.eyebrow{font-size:10px;
font-weight:700;
letter-spacing:2px;
margin:0 0 27px;
color:var(--orange)}
h1,h2,h3{font-family:var(--serif);
font-weight:400;
letter-spacing:-2px;
line-height:1.06;
margin:0;
white-space:pre-line}
h1{font-size:clamp(54px,5.2vw,76px);
max-width:570px}
h1 em{font-weight:400;
color:var(--orange)}
.intro{font-size:17px;
max-width:435px;
color:var(--muted);
line-height:1.8;
margin:28px 0}
.quiet{font-size:11px;
color:var(--muted);
margin:14px 0}
.text-link{display:inline-block;
border-bottom:1px solid currentColor;
padding-bottom:4px;
font-weight:600;
font-size:13px}
.explore{margin-top:30px}
/* Keep both devices in one grid row so the caption follows their actual height. */
.hero-art{display:grid;
grid-template-columns:minmax(0,1fr);
position:relative;
isolation:isolate}
.orb{position:absolute;
inset:65px -5px 95px 5px;
border-radius:50%;
background:var(--raised);
z-index:-2}
.tablet,.phone{margin:0;
background:#1e201e;
border:6px solid #292b27;
border-radius:29px;
box-shadow:0 30px 55px #33322330,0 2px 2px #ffffff55 inset;
overflow:hidden}
.tablet img,.phone img{display:block;
width:100%;
height:auto}
.tablet{grid-area:1/1;
align-self:start;
width:75%;
margin:25px 0 0 4%;
padding:9px;
transform:rotate(-7deg);
border-radius:26px}
.tablet img{border-radius:14px}
.phone{width:245px;
border-radius:32px;
border-width:7px}
.hero-phone{grid-area:1/1;
align-self:start;
justify-self:end;
width:36%;
margin-top:150px;
transform:rotate(8deg)}
.handnote{grid-area:2/1;
justify-self:end;
margin:56px 40px 0 24px;
text-align:right;
font-family:var(--serif);
font-style:italic;
font-size:22px;
transform:rotate(-5deg)}
.audience{display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:26px 0;
font-size:12px;
color:var(--muted)}
.audience span:first-child{color:var(--ink);
font-family:var(--serif);
font-size:20px}
.section{padding-top:115px;
padding-bottom:115px}
h2{font-size:clamp(38px,4vw,56px)}
h3{font-size:43px}
h4{font-size:18px;
margin:0 0 12px;
font-weight:600;
line-height:1.4}
.section-heading{text-align:center;
margin-bottom:65px}
.feature-grid{display:grid;
grid-template-columns:1.05fr 1fr;
gap:100px;
align-items:center}
.material-art,.recording-art{height:620px;
position:relative;
overflow:hidden;
background:var(--raised);
border-radius:4px;
display:flex;
justify-content:center;
padding-top:45px}
.material-art .phone{width:252px;
transform:rotate(-6deg)}
.art-label{position:absolute;
bottom:0;
left:0;
right:0;
text-align:center;
padding:20px;
font-size:9px;
letter-spacing:2px;
font-weight:600;
background:inherit}
.feature-copy p{font-size:16px;
line-height:1.85;
color:var(--muted);
margin:25px 0}
.index{display:block;
font-size:10px;
letter-spacing:1.8px;
color:var(--orange);
margin-bottom:28px}
hr{border:0;
border-top:1px solid var(--line);
margin:30px 0}
.feature-copy h4+p{margin-top:12px}
.practice{background:var(--dark-bg);
color:var(--dark-ink);
padding:95px 0}
.practice-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:110px;
align-items:center}
.practice .index{color:var(--dark-accent)}
.practice p{color:var(--dark-muted);
font-size:15px;
line-height:1.9;
margin-top:28px}
.practice .practice-foot{font-family:var(--serif);
font-style:italic;
color:var(--dark-accent);
font-size:20px}
.plan{border-top:1px solid #62665b;
border-bottom:1px solid #62665b}
.plan-top{padding:25px 0;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
font-size:11px;
color:var(--dark-muted)}
.plan-top>span:last-child{font-size:35px;
color:var(--dark-ink);
font-family:var(--serif)}
.plan-top small{font-family:var(--sans);
font-size:10px}
.phase{display:flex;
gap:18px;
align-items:center;
border-top:1px solid #494e42;
padding:23px 12px}
.phase>span{font-size:11px;
color:var(--dark-muted)}
.phase h4{font-size:16px;
margin:0}
.phase p{margin:5px 0 0;
font-size:11px}
.phase b{margin-left:auto;
font:27px var(--serif);
font-weight:400;
white-space:nowrap}
.phase.active{background:var(--dark-raised);
border-left:2px solid #f7a66b}
.phase.active h4,.phase.active b{color:var(--dark-accent)}
.practice .example-note{font-size:10px;
margin:17px 0}
.progress-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:110px;
align-items:center}
.recording-art{background:var(--raised);
height:590px}
.recording-art .phone{transform:rotate(6deg);
width:248px}
.feature-copy .serif-note{font-family:var(--serif);
font-size:26px;
line-height:1.4;
color:var(--orange);
font-style:italic;
max-width:380px;
margin-top:35px}
.trainer{display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:80px;
background:var(--raised);
padding:55px 70px;
overflow:hidden}
.trainer p:not(.eyebrow){color:var(--muted);
max-width:440px}
/* trainer-card.webp is the app's staff card cut from the trainer screenshot; this restores its own corners. */
.trainer-crop{aspect-ratio:1114/664;
overflow:hidden;
background:#fff;
border-radius:5.2%/8.7%;
box-shadow:0 18px 40px #6b4a2a1f,0 2px 6px #6b4a2a14}
.trainer-crop img{width:100%;
height:auto;
display:block}
.pricing{display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
padding-top:100px;
padding-bottom:100px}
.pricing h2{font-size:41px}
.pricing p{margin-top:0;
color:var(--muted)}
.pricing .eyebrow{color:var(--orange)}
.pricing .quiet{font-size:12px}
.story{background:var(--accent-soft);
padding:90px 0}
.story-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center}
.story h2{font-size:48px}
.story-author{display:flex;align-items:center;gap:18px;margin-top:30px}
.story-avatar{position:relative;width:88px;height:88px;flex:0 0 88px;overflow:hidden;border-radius:50%;background:var(--raised)}
.about-avatar{margin-bottom:26px}
.story-avatar .story-portrait{position:absolute;width:180px;max-width:none;height:320px;left:-30px;top:-96px}
.story-author .signature{margin:0 0 6px}
.story-author .quiet{margin:0}
.story p{margin:0 0 24px;
font-size:15px}
.story .eyebrow{font-size:10px}
.signature{display:block;
font-family:var(--serif);
font-style:italic;
font-size:25px;
margin:34px 0 8px}
.story .quiet{font-size:11px}
.faq{display:grid;
grid-template-columns:1fr 1fr;
gap:90px}
.faq h2{font-size:44px}
details{border-bottom:1px solid var(--line);
padding:22px 0}
details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
gap:20px;
font-weight:600;
font-size:14px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';
font-size:20px;
font-weight:400;
color:var(--orange)}
details[open] summary:after{content:'−'}
details p{font-size:14px;
color:var(--muted)}
details a{text-decoration:underline;
overflow-wrap:anywhere}
.closing{text-align:center;
padding:20px 0 110px}
.closing h2{margin:0 0 34px}
.closing .eyebrow{margin-bottom:18px}
footer{border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:32px 0;
font-size:10px;
color:var(--muted)}
footer .brand{font-size:20px;
color:var(--ink)}
.footer-dot{font-size:12px;
color:var(--orange)}
footer>div{display:flex;
gap:23px}

@media(min-width:1500px){.hero{min-height:780px}
}

@media(max-width:1050px){.shell{width:calc(100% - 56px)}
header nav{display:none}
.hero{min-height:650px}
.hero h1{font-size:58px}
.hero-phone{margin-top:130px}
.handnote{font-size:18px}
.feature-grid,.progress-grid,.practice-grid{gap:55px}
.trainer{gap:40px;
padding:45px}
.story-grid,.pricing,.faq{gap:50px}
.audience{font-size:10px}
.audience span:first-child{font-size:17px}
}

@media(max-width:700px){.shell{width:calc(100% - 40px)}
header{height:90px;
gap:12px}
.brand{font-size:21px;
gap:9px}
.brand small{font-size:7px}
.mark{width:36px;
height:40px;
font-size:28px}
.header-actions{gap:5px}
.header-actions .button{display:none}
#language{padding:12px}
.hero{display:flex;
flex-direction:column;
gap:32px;
padding-top:32px;
padding-bottom:40px;
align-items:stretch}
.hero h1{font-size:clamp(48px,12vw,68px);
max-width:560px}
.eyebrow{font-size:9px;
margin-bottom:23px}
.intro{font-size:16px;
margin:24px 0}
.button{font-size:12px}
.explore{margin-top:20px}
.hero-art{max-width:520px;
width:100%;
margin:auto}
.tablet{width:73%;
margin-left:5%}
.hero-phone{width:35%;
margin-right:3%;
margin-top:105px}
.orb{inset:50px 0 85px}
.handnote{font-size:17px;
margin:48px 20px 0}
.audience{display:grid;
grid-template-columns:1fr 1fr;
gap:13px;
font-size:10px;
padding:22px 0}
.audience span:first-child{grid-column:1/-1;
font-size:19px}
.audience span:last-child{grid-column:1/-1}
.section{padding-top:70px;
padding-bottom:70px}
.section-heading{text-align:left;
margin-bottom:38px}
h2{font-size:40px;
letter-spacing:-1.4px}
h3{font-size:35px;
letter-spacing:-1.3px}
.feature-grid,.practice-grid,.progress-grid,.trainer,.pricing,.story-grid,.faq{grid-template-columns:1fr;
gap:35px}
.feature-copy p{font-size:15px}
.material-art{height:520px;
order:2}
.material-art .phone{width:225px}
.index{margin-bottom:19px}
.practice{padding:65px 0}
.practice-grid{gap:25px}
.recording-art{height:540px}
.recording-art .phone{width:225px}
.trainer{padding:32px 26px;
gap:25px}
.trainer-crop{max-width:340px;
width:100%;
margin:auto}
.pricing{padding-top:70px;
padding-bottom:65px;
gap:22px}
.pricing h2{font-size:36px}
.story{padding:65px 0}
.story h2{font-size:40px}
.story-grid{gap:20px}
.faq h2{font-size:39px}
.faq{gap:35px}
.closing{padding-top:10px;
padding-bottom:70px}
.closing h2{font-size:41px}
footer{flex-wrap:wrap;
gap:18px}
footer>div{width:100%;
flex-wrap:wrap;
gap:20px}
footer p{margin:0}
.signature{margin-top:24px}
}

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





/* Original artwork supplied by Jonas;
 preserve its full composition. */
.brand-logo{display:block;
width:70px;
height:70px;
object-fit:contain;
flex-shrink:0;
border-radius:10px}
footer .brand-logo{width:52px;
height:52px}
@media(max-width:700px){.brand-logo{width:56px;
height:56px}
}


.practice-screen{margin:0}
.practice-screen-crop{position:relative;
width:100%;
aspect-ratio:2064/1810;
overflow:hidden;
border-radius:24px;
background:#fffcf7;
border:1px solid #e6dccd;
box-shadow:0 22px 50px #0004}
/* Shows the session from the navigation bar to the end of the metronome card (y 70–1880 of 2752). */
.practice-screen-crop img{position:absolute;
display:block;
width:100%;
max-width:none;
height:auto;
left:0;
top:-3.87%}
.practice-screen figcaption{font-size:11px;
color:var(--dark-muted);
text-align:center;
margin-top:18px}
.practice-followup{display:grid;
grid-template-columns:1fr 1fr;
gap:110px;
align-items:center;
margin-top:65px;
padding-top:55px;
border-top:1px solid #494e42}
.practice-followup h3{font-size:38px}
.practice-followup>div>p{max-width:440px}
@media(max-width:1050px){.practice-followup{gap:55px}
}
@media(max-width:700px){.practice-followup{grid-template-columns:1fr;
gap:25px;
margin-top:40px;
padding-top:35px}
.practice-screen{max-width:440px;
margin:auto}
.practice-followup h3{font-size:34px}
}

/* Complete-site navigation and document layouts. */
.site-header{position:relative;z-index:5}
.desktop-nav a[aria-current="page"]{color:var(--orange);text-decoration:underline;text-underline-offset:7px}
.language-link{padding:10px;font-size:12px;font-weight:700}
.mobile-menu{display:none}
.screenshot-note{font-size:11px;color:var(--muted);margin-top:18px;margin-bottom:20px}
.practice .screenshot-note{color:var(--dark-muted)}
.page-intro{padding:85px 0 65px;max-width:1000px}
.page-intro h1{font-size:clamp(43px,5.8vw,76px);max-width:960px}
.page-intro .intro{max-width:720px;font-size:19px}
.feature-jumps{display:flex;flex-wrap:wrap;gap:24px;padding:0 0 30px;border-bottom:1px solid var(--line)}
.feature-detail{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding:85px 0;border-bottom:1px solid var(--line);scroll-margin-top:30px}
.feature-detail h2{font-size:44px}
.feature-visual{background:var(--raised);border-radius:5px;padding:35px 30px 18px;display:flex;flex-direction:column;align-items:center}
.feature-visual .phone{width:min(100%,245px)}
.feature-tablet{margin:0;width:100%;border:8px solid #292b27;border-radius:18px;overflow:hidden}
.feature-tablet img{display:block;width:100%;height:auto}
.feature-visual .practice-screen{width:100%}
.planner-visual,.progress-visual{background:var(--raised)}
.report-feature{padding:60px 50px;background:var(--accent-soft);margin-top:60px}
.report-feature h2{max-width:750px;font-size:40px}
.report-feature>p:last-child{max-width:800px}
.more-features{padding-top:35px;padding-bottom:45px}
.comparison-section{max-width:1000px;margin-bottom:55px}
table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
caption{text-align:left;font-family:var(--serif);font-size:30px;padding-bottom:25px;line-height:1.2}
th,td{padding:20px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
th:first-child{width:52%}thead th{background:#e7e9dd}tbody th{font-weight:500}td{color:var(--muted)}
.purchase-options{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:25px 0 55px}
.purchase-options article{border-top:2px solid var(--orange);padding-top:25px}
.purchase-options h2{font-size:29px;letter-spacing:-.7px}.purchase-options p{font-size:14px;color:var(--muted)}
.trial-section{max-width:850px;background:var(--accent-soft);padding:45px;margin-bottom:15px}
.trial-section h2{font-size:38px}.trial-section p{font-size:16px}.trial-section .quiet{font-size:12px;margin:22px 0}.trial-section .button{margin-top:10px}
.story-article{max-width:760px;padding-bottom:65px;font-size:19px;line-height:1.9}.story-article p{margin:0 0 26px}
.invitation{max-width:900px}.invitation h2{font-size:42px}.invitation p{max-width:700px;margin-top:24px}.action-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:25px}.action-row a{overflow-wrap:anywhere}
/* Same width as .page-intro, so the buttons line up under the intro text. */
.help-actions{max-width:1000px;margin-top:-30px;margin-bottom:55px}.help-questions{max-width:900px;padding-bottom:85px}.faq-list p{font-size:15px}.faq-list{min-width:0}
/* Same width as .page-intro so the text lines up under the heading; lines stay at reading length. */
.legal-copy{max-width:1000px;padding-bottom:85px}.legal-copy>*{max-width:800px}.legal-copy h2{font-size:30px;margin-top:35px}.draft-note{background:var(--accent-soft);padding:20px;border-left:3px solid var(--orange)}
.footer-invitation{padding:35px 0;border-top:1px solid var(--line)}.site-footer{flex-wrap:wrap;padding-bottom:40px}.site-footer>div{width:100%;display:flex;gap:22px;flex-wrap:wrap}.site-footer .brand small{font-size:8px}.site-footer .brand{font-size:22px}.footer-link:hover{text-decoration:underline}
.language-landing{max-width:850px;padding-top:10vh;padding-bottom:70px}.language-landing>img{object-fit:contain;margin-bottom:25px}.language-landing h1{font-size:clamp(50px,7vw,88px)}.language-landing h1 em{color:var(--orange)}.landing-legal{margin-top:60px;font-size:13px;color:var(--muted)}.landing-legal a{color:inherit}
.phase h3{font-family:var(--sans);font-size:16px;letter-spacing:0;margin:0;line-height:1.4}.phase.active h3{color:var(--dark-accent)}.feature-copy h3+p{margin-top:12px}.feature-copy hr+h3{font-family:var(--sans);font-size:18px;letter-spacing:0;font-weight:600;line-height:1.4}
.brand-logo{width:60px;height:60px}
@media(max-width:1100px){
.site-header .desktop-nav{display:none}.mobile-menu{display:block;border:0!important;padding:0;position:relative}.mobile-menu summary{padding:10px;min-height:44px;align-items:center;gap:12px}.mobile-menu nav{display:flex;position:absolute;right:0;top:48px;min-width:240px;background:var(--paper);box-shadow:0 12px 30px #25282026;border:1px solid var(--line);padding:15px;flex-direction:column;align-items:stretch;gap:0;border-radius:8px}.mobile-menu nav a{padding:12px}.header-actions{gap:12px}.feature-detail{gap:45px}
}
@media(max-width:700px){
.site-header{height:92px}.site-header .brand-logo{width:48px;height:48px}.site-header .brand{font-size:19px}.site-header .brand small{font-size:6px;letter-spacing:1.6px}.header-actions{gap:0}.language-link{padding:10px}.mobile-menu summary{font-size:12px;padding:8px;gap:8px}.mobile-menu nav{right:0}
.page-intro{padding:45px 0 35px}.page-intro h1{font-size:45px;letter-spacing:-1.6px}.page-intro .intro{font-size:17px}.feature-jumps{gap:17px}.feature-jumps a{font-size:12px}.feature-detail{grid-template-columns:1fr;gap:25px;padding:55px 0}.feature-detail h2{font-size:36px}.feature-visual{padding:25px 25px 15px}.feature-visual .phone{width:225px}.report-feature{padding:30px 25px;margin-top:40px}.report-feature h2{font-size:34px}
.comparison-section{width:calc(100% - 32px)}table{font-size:12px}th,td{padding:14px 8px}th:first-child{width:47%}caption{font-size:27px}.purchase-options{grid-template-columns:1fr;gap:20px;padding-top:0}.purchase-options h2{font-size:27px}.trial-section{padding:28px}.trial-section h2{font-size:33px}.story-article{font-size:17px;padding-bottom:40px}.invitation h2{font-size:36px}.action-row{gap:20px}.help-actions{margin-top:0}.help-questions{padding-bottom:55px}.footer-invitation a{font-size:12px}.site-footer>div{gap:17px}.legal-copy{padding-bottom:55px}.language-landing{padding-top:50px}.screenshot-note{font-size:10px}
}
/* Long localized words and screenshot panels must fit narrow phones. */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual}
@media(max-width:700px){html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{hyphens:auto}}
.feature-visual{min-width:0}.feature-visual .phone{max-width:100%}

.purchase-options .purchase-price{font-family:var(--serif);font-size:38px;line-height:1.2;color:var(--orange);margin:18px 0}.purchase-price small{font-family:var(--sans);font-size:13px;color:var(--muted);white-space:nowrap}.regional-prices{font-size:12px;color:var(--muted);margin-top:-30px;margin-bottom:45px}

.duo-section{padding:30px 0 85px;scroll-margin-top:25px}.duo-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin-bottom:38px}.duo-heading h2{font-size:48px}.duo-heading .eyebrow{margin-bottom:20px}.duo-heading>p{color:var(--muted);font-size:15px;line-height:1.8;margin:0}.duo-stage{background:#23282b;border-radius:20px;padding:55px 40px 30px;display:flex;align-items:end;justify-content:center;gap:45px}.duo-view{margin:0;min-width:0}.duo-view-outer{width:27%}.duo-view-inner{width:58%}.duo-crop{position:relative}.duo-crop img{display:block;width:100%;height:auto}.duo-view figcaption{text-align:center;color:var(--dark-muted);font-size:11px;letter-spacing:1px;margin-top:24px}.duo-section>.screenshot-note{text-align:center}@media(max-width:700px){.duo-heading{grid-template-columns:1fr;gap:22px}.duo-heading h2{font-size:38px}.duo-stage{padding:32px 16px 22px;gap:15px;border-radius:14px}.duo-view-outer{width:30%}.duo-view-inner{width:65%}.duo-view figcaption{font-size:10px;letter-spacing:0;margin-top:16px}.duo-section{padding-bottom:60px}}

/* A full-width chapter separates the Duo presentation from pricing and the creator story. */
.duo-section{background:var(--raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:85px 0 65px;margin:25px 0 0}
.duo-heading{gap:90px;margin-bottom:48px;align-items:center}
.duo-heading h2{font-size:clamp(40px,4.8vw,64px);max-width:600px}
.duo-heading .eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase}
.duo-heading>p{max-width:380px;justify-self:end}
.duo-stage{background:#23282b;border:1px solid #393735;border-radius:24px;box-shadow:0 18px 45px #30271e08;padding:60px 50px 35px;gap:55px}
.duo-view figcaption{color:var(--dark-muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:28px}
.duo-section .screenshot-note{text-align:center;margin:24px 0 0}
@media(max-width:700px){.duo-section{padding:60px 0 45px;margin-top:15px}.duo-heading{gap:22px;margin-bottom:32px}.duo-heading h2{font-size:40px}.duo-heading>p{justify-self:start;max-width:none}.duo-stage{padding:30px 14px 24px;gap:14px;border-radius:16px}.duo-view figcaption{font-size:9px;letter-spacing:.5px;margin-top:18px}}

.duo-section{background:var(--dark-bg);color:var(--dark-ink);border-color:#393735}
.duo-heading .eyebrow{color:var(--dark-accent)}
.duo-heading>p,.duo-section .screenshot-note,.duo-view figcaption{color:var(--dark-muted)}
.duo-stage{background:transparent;border:0;box-shadow:none;padding-top:12px;border-radius:0}
/* iPhone Duo hardware around the full-display captures. Folded, the hinge spine sits on the
   left with tighter corners; unfolded, the crease runs down the middle of the inner display. */
.duo-outer,.duo-inner{padding:7px;background:#17191b;box-shadow:0 0 0 1.5px #4b4f53,0 26px 50px #0008}
.duo-outer{border-radius:16px 38px 38px 16px;box-shadow:-7px 0 0 -1px #2e3236,-7px 0 0 0 #474b50,0 0 0 1.5px #4b4f53,0 26px 50px #0008}
.duo-outer img{border-radius:10px 31px 31px 10px}
.duo-inner{border-radius:34px}
.duo-inner img{border-radius:27px}
.duo-outer::before,.duo-inner::before{content:"";position:absolute;right:-4px;top:24%;width:3px;height:11%;border-radius:0 3px 3px 0;background:#3a3e42}
.duo-outer::after{content:"";position:absolute;top:7%;right:9.6%;width:4.4%;aspect-ratio:1;border-radius:50%;background:#0c0d0e;box-shadow:0 0 0 1px #2a2d30}
.duo-inner::after{content:"";position:absolute;top:7px;bottom:7px;left:50%;width:10px;transform:translateX(-50%);background:linear-gradient(90deg,#0000,#0000000d 40%,#ffffff40 50%,#00000012 60%,#0000);pointer-events:none}
@media(max-width:700px){.duo-outer,.duo-inner{padding:4px}.duo-outer{border-radius:10px 22px 22px 10px;box-shadow:-4px 0 0 -1px #2e3236,-4px 0 0 0 #474b50,0 0 0 1px #4b4f53,0 16px 32px #0008}.duo-outer img{border-radius:7px 18px 18px 7px}.duo-inner{border-radius:20px}.duo-inner img{border-radius:16px}.duo-inner::after{top:4px;bottom:4px;width:6px}.duo-outer::before,.duo-inner::before{right:-3px;width:2px}}

/* Quiet musical accents live in dedicated space, clear of copy and controls. */
.music-drift{position:absolute;pointer-events:none;user-select:none;color:#b16b25}
.drifting-note{position:absolute;width:25px;height:38px;opacity:.45;animation:musical-drift 12s ease-in-out infinite alternate}
.drifting-note.note-1{left:12%;top:12px;animation-delay:-4s}
.drifting-note.note-2{left:52%;top:0;width:20px;opacity:.3;animation-duration:15s;animation-delay:-8s;color:#827563}
.drifting-note.note-3{left:84%;top:18px;width:29px;animation-duration:14s;animation-delay:-2s}
.music-interlude{position:relative;height:110px;margin-top:-15px;margin-bottom:22px;max-width:650px;overflow:hidden}
.music-ribbon{position:absolute;inset:8px 0;width:100%;height:85px;color:#b99b71;opacity:.2;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.music-drift--interlude{inset:18px 12%}
.music-drift--interlude .note-1{top:25px}
.music-drift--interlude .note-3{top:5px}
@keyframes musical-drift{0%{transform:translate(-8px,5px) rotate(-9deg)}50%{transform:translate(3px,-5px) rotate(1deg)}100%{transform:translate(10px,2px) rotate(9deg)}}
@media(max-width:700px){.drifting-note{width:19px;height:29px}.drifting-note.note-2{display:none}.drifting-note.note-3{width:22px;top:0}.music-interlude{height:85px;margin-top:0;margin-bottom:14px}.music-ribbon{height:65px}.music-drift--interlude{inset:8px 15%}}
@media(prefers-reduced-motion:reduce){.drifting-note{animation:none}}

/* One short musical entrance; the default remains a complete, still composition. */
/* The score scales with the artwork width, and so does the tilted tablet's top edge beneath the notes.
   A width-relative margin keeps the notes a constant ~12px above the tablet at every size. */
.hero-score{position:absolute;top:13px;margin-top:-13.5%;left:0;width:100%;height:auto;overflow:visible;z-index:-1;pointer-events:none;user-select:none;color:#b79566}
.hero-score-lines{opacity:.48}
.hero-score-note{color:#b16b25}
.hero-note-glyph{fill:currentColor;opacity:.68;pointer-events:none;transition:color 180ms ease,opacity 180ms ease}
.hero-note-glyph path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* A stationary target keeps the hop from repeatedly retriggering beneath the pointer. */
@media(hover:hover) and (pointer:fine){
  .hero-note-target{pointer-events:all}
  .hero-note-target:hover .hero-note-glyph{color:#c58a28;opacity:1}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-note-target:hover .hero-note-glyph{animation:hero-note-hop 480ms ease-in-out}
}
@keyframes hero-note-hop{0%,100%{transform:none}38%{transform:translateY(-5px) rotate(-5deg)}72%{transform:translateY(-1px) rotate(1deg)}}
@media(prefers-reduced-motion:no-preference){
  .hero-art.is-arriving .hero-score-lines path{stroke-dasharray:1;animation:hero-staff-draw 1.5s ease-out backwards}
  .hero-art.is-arriving .hero-score-lines path:nth-child(2){animation-delay:90ms}
  .hero-art.is-arriving .hero-score-lines path:nth-child(3){animation-delay:180ms}
  .hero-art.is-arriving .hero-score-lines path:nth-child(4){animation-delay:270ms}
  .hero-art.is-arriving .hero-score-lines path:nth-child(5){animation-delay:360ms}
  .hero-art.is-arriving .tablet{animation:hero-tablet-arrive 1.5s 240ms cubic-bezier(.22,1,.36,1) backwards}
  .hero-art.is-arriving .hero-phone{animation:hero-phone-arrive 1.5s 510ms cubic-bezier(.22,1,.36,1) backwards}
  .hero-art.is-arriving .hero-score-note{animation:hero-note-settle 1050ms 720ms cubic-bezier(.22,1,.36,1) backwards}
  .hero-art.is-arriving .hero-score-note--second{animation-delay:975ms}
  .hero-art.is-arriving .hero-score-note--third{animation-delay:1230ms}
  .hero-art.is-arriving .handnote{animation:hero-caption-arrive 900ms 1440ms ease-out backwards}
}
@keyframes hero-staff-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hero-tablet-arrive{from{opacity:0;transform:translate(-6px,22px) rotate(-9deg)}to{opacity:1;transform:rotate(-7deg)}}
@keyframes hero-phone-arrive{from{opacity:0;transform:translate(6px,18px) rotate(10deg)}to{opacity:1;transform:rotate(8deg)}}
@keyframes hero-note-settle{from{opacity:0;transform:translate(-10px,-13px) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes hero-caption-arrive{from{opacity:0;transform:translateY(5px) rotate(-5deg)}to{opacity:1;transform:rotate(-5deg)}}

/* A small playable instrument, drawn without image or audio downloads. */
.metronome{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-top:80px;padding-bottom:80px}
.metro-stage{display:flex;justify-content:center;background:radial-gradient(ellipse at center,#e8d1a940,transparent 68%)}
.metro-instrument{width:300px;max-width:100%;height:auto;overflow:visible}
.metro-pendulum{transform-box:view-box;transform-origin:0 0}
.metro-copy h2{font-size:48px}.metro-copy>p:not(.eyebrow){color:var(--muted);line-height:1.8;max-width:410px;margin:22px 0}
.metro-controls{max-width:340px}.metro-controls[hidden]{display:none}.metro-readout{display:flex;align-items:baseline;gap:10px;margin:22px 0 12px}.metro-readout output{font-family:var(--serif);font-size:48px;font-variant-numeric:tabular-nums}.metro-readout span,.metro-controls label{font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.metro-controls input{display:block;width:100%;margin:14px 0;accent-color:#a45e22;cursor:pointer;min-height:24px}.metro-range{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:24px}.metro-toggle{border:0;cursor:pointer;font:inherit;font-size:13px}.metro-controls .quiet{min-height:30px;line-height:1.6}.metro-toggle:focus-visible,.metro-controls input:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
@media(max-width:700px){.metronome{grid-template-columns:1fr;gap:20px;padding-top:45px;padding-bottom:45px}.metro-instrument{width:230px}.metro-copy{max-width:400px;margin:auto;width:100%}.metro-copy h2{font-size:40px}.metro-controls{max-width:none}}

/* Shared treatment for contained cream panels and screenshot backdrops. */
.material-art,.recording-art,.trainer,.feature-visual,.report-feature,.trial-section{
  border-radius:24px;
  background:linear-gradient(135deg,#fff7e9 0%,#fff1d9 100%);
  box-shadow:inset 0 0 0 1px #b88c4520;
}
.material-art .art-label,.recording-art .art-label{background:#fff2dc}
@media(max-width:700px){
  .material-art,.recording-art,.trainer,.feature-visual,.report-feature,.trial-section{border-radius:16px}
}

/* The About portrait belongs to the story, with prose flowing around it. */
/* Match the page introduction so the heading and story share a left edge. */
.story-article{display:flow-root;max-width:1000px}
/* Keep each paragraph beside the portrait intact; widen only between paragraphs. */
.story-article>p{display:flow-root}
.about-portrait{float:left;width:240px;max-width:34%;margin:4px 32px 24px 0;border-radius:20px;overflow:hidden;background:var(--raised)}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 60%}
@media(max-width:700px){.about-portrait{width:200px;margin-right:24px;border-radius:18px}}
@media(max-width:520px){.about-portrait{float:none;width:190px;max-width:100%;margin:4px 0 24px}}