/* Local assets and system fonts only. Mobile first. */
:root { --paper:#f3f0e8; --ink:#151915; --muted:#60655f; --mint:#5be5a9; --green:#17654b; --dark:#151a17; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p { margin-top:0; }
a:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
::selection { background:var(--mint); color:var(--ink); }
.wrap { width:min(1200px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:10px; padding:14px 20px; background:var(--ink); color:white; transform:translateY(-180%); z-index:20; }
.skip-link:focus { transform:none; }
.header { height:80px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:9px; min-height:44px; flex-shrink:0; }
.brand-symbol { width:31px; height:31px; fill:none; stroke:var(--green); stroke-width:1.65; }
.brand-center { fill:var(--green); stroke:none; }
.wordmark { font-size:20px; font-weight:700; letter-spacing:-.065em; white-space:nowrap; }
.wordmark span { color:var(--green); font-weight:400; }
.header-home { justify-content:center; }
.brand-product { gap:8px; }
.brand-product .brand-guitarist { display:block; width:40px; height:40px; flex-shrink:0; }
.brand-product .wordmark { font-size:23px; font-weight:600; letter-spacing:-.05em; }
.brand-product .wordmark span { font-family:Georgia,'Times New Roman',serif; font-size:1.14em; font-style:italic; letter-spacing:-.065em; }
.header nav { display:flex; align-items:center; gap:17px; font-size:11px; }
.header nav a { display:inline-flex; align-items:center; min-height:44px; }
.header nav a:hover,.header nav [aria-current=page] { color:var(--green); }
.header-social { flex-direction:column; justify-content:center; gap:0; height:112px; }
.header-social .social-links { gap:22px; }
.social-links a { gap:5px; color:#526452; }
.social-links a>span { font-size:10px; color:#71866d; }
.social-icon { display:block; width:16px; height:16px; flex-shrink:0; fill:currentColor; }
.hero { position:relative; overflow:clip; }
.hero-stage { position:relative; padding:24px 0 58px; text-align:center; isolation:isolate; }
.hero-atmosphere { position:absolute; inset:0 auto 0 50%; width:100vw; transform:translateX(-50%); z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(180deg,var(--paper),#eaf0e4 40%,#f2e9da 80%,var(--paper)); }
.hero-atmosphere span { position:absolute; display:block; border-radius:50%; }
.ambient-sage { width:160vw; height:140vw; max-width:1100px; max-height:850px; left:8%; top:50px; background:radial-gradient(ellipse,#b4d1b37a,transparent 68%); animation:ambient-sage 22s ease-in-out infinite alternate; }
.ambient-warm { width:140vw; height:130vw; max-width:900px; max-height:760px; left:-65%; top:160px; background:radial-gradient(ellipse,#e4c79f6b,transparent 68%); animation:ambient-warm 19s ease-in-out infinite alternate; }
@keyframes ambient-sage { to { transform:translate(-8%,12%) scale(1.08); opacity:.6; } }
@keyframes ambient-warm { to { transform:translate(16%,-8%) scale(1.12); opacity:.55; } }
.hero-copy,.hero-actions { position:relative; z-index:3; }
.hero h1 { display:flex; flex-direction:column; align-items:center; font-size:clamp(62px,16vw,88px); font-weight:700; letter-spacing:-.065em; line-height:.9; margin-bottom:25px; }
.hero-title-main { display:block; }
.hero-zero { position:relative; display:inline-block; margin-top:-.06em; padding:0 .05em .1em 0; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:1.37em; font-weight:400; letter-spacing:-.075em; color:var(--green); line-height:.86; }
.hero-period { color:#47876a; }
.hero-zero svg { position:absolute; width:103%; height:24px; left:-1%; bottom:-9px; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; opacity:.42; }
.hero-copy .hero-lead { font-size:16px; font-weight:400; color:#46544b; line-height:1.5; margin-bottom:0; letter-spacing:-.02em; }
.hero-copy .hero-benefits { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; font-size:10px; color:#526a5a; line-height:1.5; letter-spacing:.015em; margin:10px 0 0; }
.hero-benefits span+span { display:inline-flex; align-items:center; gap:14px; }
.hero-benefits span+span::before { content:''; width:3px; height:3px; border-radius:50%; background:#759380; }
.hero-scene { position:relative; width:calc(100% + 40px); height:clamp(285px,77vw,350px); margin:8px -20px 0; pointer-events:none; }
.hero-art { position:absolute; inset:0; z-index:2; overflow:visible; }
/* Only soften the cropped neck edge, outside the decorative meter. */
.hero-poster,.hero-canvas { position:absolute; left:50%; top:56%; width:142%; height:auto; aspect-ratio:16/9; max-width:none; transform:translate(-50%,-50%); object-fit:contain; mask-image:linear-gradient(to right,transparent,#000 4%); }
.hero-canvas[hidden] { display:none; }
.sequence-ready .hero-poster { visibility:hidden; }
.tuning-demo { position:absolute; z-index:1; left:2%; top:10px; width:96%; color:var(--green); visibility:hidden; opacity:var(--meter-opacity,1); transform:translate(var(--meter-x,0px),var(--meter-y,0px)) rotate(-7deg); }
.scene-ready .tuning-demo { visibility:visible; }
.demo-value { display:grid; font-family:Arial,Helvetica,sans-serif; font-size:clamp(200px,64vw,320px); font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:-.085em; line-height:1; white-space:nowrap; color:#17654b08; -webkit-text-stroke:1px #17654b45; }
.demo-value>span { grid-area:1/1; }
.demo-value .demo-next { opacity:0; }
.tuning-scale { position:absolute; top:0; left:17%; width:66%; height:40px; mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }
.scale-track { position:relative; height:40px; }
.scale-track::after { content:''; position:absolute; left:var(--needle,21.2%); top:30px; width:calc(50% - var(--needle,21.2%)); height:1px; background:#17654b75; }
.scale-track svg { display:block; width:100%; height:100%; fill:none; stroke:#17654b40; stroke-width:1; vector-effect:non-scaling-stroke; }
.scale-baseline { opacity:.55; }
.scale-center { position:absolute; left:50%; top:4px; width:1px; height:32px; background:#17654b73; }
.scale-needle { position:absolute; left:var(--needle,21.2%); top:9px; width:2px; height:23px; background:#47876a; transform:translateX(-50%); }
.scale-needle::before { content:''; position:absolute; width:5px; height:5px; left:50%; top:-7px; border-radius:50%; background:inherit; transform:translateX(-50%); box-shadow:0 0 0 4px #5be5a912; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:center; align-items:center; width:min(100%,302px); gap:10px; margin:0 auto; }
.store-button { appearance:none; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-width:0; min-height:56px; padding:10px 12px; border:1px solid #405448; border-radius:14px; background:linear-gradient(160deg,#293a30,#17251d); box-shadow:inset 0 1px 0 #ffffff15,0 5px 16px #1723160d; color:var(--paper); font-family:inherit; text-align:left; opacity:1; cursor:default; -webkit-text-fill-color:var(--paper); }
.store-button .store-icon { width:21px; height:24px; fill:currentColor; flex-shrink:0; }
.store-button>span { display:flex; flex-direction:column; gap:4px; }
.store-button small { font-size:8px; font-weight:400; text-transform:uppercase; letter-spacing:.13em; color:#c1cec4; -webkit-text-fill-color:#c1cec4; }
.store-button strong { font-size:14px; font-weight:500; letter-spacing:-.025em; white-space:nowrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:48px; padding:14px 21px; border-radius:99px; font-size:12px; font-weight:600; transition:background .2s; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:var(--green); }
.how-section { position:relative; isolation:isolate; overflow:clip; background:linear-gradient(145deg,#1b281f,var(--dark) 62%,#1b2720); color:var(--paper); padding:64px 0 58px; scroll-margin-top:0; }
.how-atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.how-atmosphere span { position:absolute; display:block; width:760px; height:760px; border-radius:50%; }
.how-light-sage { left:35%; top:-360px; background:radial-gradient(ellipse,#87b18b26,transparent 67%); animation:how-sage-drift 24s ease-in-out infinite alternate; }
.how-light-warm { left:-380px; bottom:-380px; background:radial-gradient(ellipse,#c6ac7b16,transparent 67%); animation:how-warm-drift 28s ease-in-out infinite alternate; }
@keyframes how-sage-drift { to { transform:translate(-16%,18%) scale(1.12); opacity:.55; } }
@keyframes how-warm-drift { to { transform:translate(18%,-10%) scale(1.08); opacity:.55; } }
.how-layout { position:relative; display:grid; gap:36px; max-width:520px; }
.how-intro h2 { font-size:clamp(43px,8.8vw,62px); font-weight:500; line-height:1.02; letter-spacing:-.055em; margin:0; }
.how-intro h2>span,.how-intro h2>em { display:block; }
.how-intro h2>em { margin-top:5px; font-family:Georgia,'Times New Roman',serif; font-size:1.1em; font-weight:400; font-style:italic; letter-spacing:-.045em; color:#c1d8bf; }
.instrument-prompt { margin:29px auto 13px; text-align:center; font-size:13px; color:#bdcbbc; }
.instrument-pair { display:flex; gap:14px; height:224px; max-width:450px; margin-inline:auto; }
.instrument-sample { appearance:none; position:relative; flex:1; min-width:0; margin:0; padding:0; font-family:inherit; cursor:pointer; background:linear-gradient(155deg,#b6d3b00d,#b6d3b003); border:1px solid #abc9af28; overflow:hidden; border-radius:18px; box-shadow:inset 0 1px 0 #ffffff05; transition:border-color .25s,background .25s; }
.instrument-sample:hover { border-color:#bcd5b66b; background:#bfd8b50c; }
.instrument-sample[aria-pressed=true] { border-color:#bad3a98c; background:linear-gradient(155deg,#b6d3b018,#b6d3b005); }
.instrument-sample:focus-visible { outline:2px solid #c3ddb5; outline-offset:4px; }
.instrument-sample img { position:absolute; width:auto; height:calc(100% - 12px); max-width:none; left:50%; top:9px; transform:translateX(-50%); }
.electric-sample img { transform:translateX(-50%) rotate(5deg); }
.instrument-label { position:absolute; bottom:0; left:0; right:0; padding:30px 0 16px; background:linear-gradient(transparent,#19231bea 78%); text-align:center; font-size:12px; color:#d1ddce; }
.instrument-check { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:21px; height:21px; border:1px solid #c1dbb53d; border-radius:50%; background:#26392bf0; color:#d2e8c4; font-size:11px; opacity:0; transition:opacity .25s; }
.instrument-sample[aria-pressed=true] .instrument-check { opacity:1; }
.mode-demo { width:100%; max-width:480px; min-width:0; margin-inline:auto; padding:20px; border:1px solid #abc9af2b; border-radius:26px; background:linear-gradient(155deg,#263b2a8c,#111b15b3); box-shadow:0 22px 60px #060d0826,inset 0 1px 0 #ffffff05; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-wordmark { white-space:nowrap; font-size:17px; letter-spacing:-.06em; color:#dbe6d5; }
.preview-wordmark em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:#bfd7b5; }
.mode-switch { display:flex; gap:2px; padding:2px; background:#0b140d33; border:1px solid #a8c8ac12; border-radius:9px; }
.mode-switch button,.string-choices button { appearance:none; font-family:inherit; color:#b7c9b8; cursor:pointer; border:1px solid transparent; transition:background .25s,border-color .25s,color .25s; }
.mode-switch button { min-height:36px; min-width:48px; padding:6px 9px; background:transparent; border-radius:6px; font-size:10px; }
.mode-switch button[aria-pressed=true] { background:#c3d8bd16; border-color:#bdd8b32e; color:#edf1e7; box-shadow:inset 0 1px 0 #ffffff08; }
.mode-switch button:hover { color:#f2f3e9; background:#b9d6b31c; }
.mode-demo button:focus-visible { outline:2px solid #c3ddb5; outline-offset:3px; }
.mode-stage { padding:17px 0 4px; text-align:center; }
.mode-readout { display:flex; flex-direction:column; align-items:center; gap:5px; }
.mode-readout>span:first-child { color:#d6ecc8; font-size:44px; font-weight:400; line-height:1; letter-spacing:-.06em; }
.mode-readout>span:last-child { color:#acbda9; font-size:10px; }
.mode-scale { position:relative; width:82%; max-width:300px; height:31px; margin:12px auto 0; }
.mode-scale-track { position:absolute; left:0; right:0; top:15px; height:10px; background:repeating-linear-gradient(90deg,#9abd9c4d 0 1px,transparent 1px calc(100% / 20)); mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent); }
.mode-scale-track::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#96b99b45; }
.mode-scale-zero { position:absolute; top:-3px; left:50%; transform:translateX(-50%); color:#bfd1b8; font-size:9px; }
.mode-needle { position:absolute; left:50%; top:13px; width:2px; height:15px; border-radius:2px; transform:translateX(-50%); background:#b8e39d; }
.mode-needle::before { content:''; position:absolute; width:4px; height:4px; top:-5px; left:50%; border-radius:50%; transform:translateX(-50%); background:inherit; box-shadow:0 0 12px #b8e39d55; }
.mode-result { display:inline-flex; align-items:center; gap:5px; margin-top:4px; color:#c3e5b0; font-size:10px; }
.mode-result::before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.mode-demo[data-state=tuning] .mode-result { color:#c8c7b4; }
.headstock-frame { --string-size:38px; --string-hit:44px; position:relative; width:calc(100% - 32px); max-width:400px; aspect-ratio:4 / 5; margin:3px auto -14px; }
.headstock-frame>img { position:absolute; inset:0; width:100%; height:100%; }
.headstock-frame>svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.headstock-frame line { stroke:#9bb29175; stroke-width:1.2px; }
.string-choices { position:absolute; inset:0; }
.string-choices button { position:absolute; left:4%; top:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:var(--string-hit); height:var(--string-hit); padding:0; background:transparent; border:0; border-radius:50%; transform:translate(-50%,-50%); isolation:isolate; }
.string-choices button::before { content:''; position:absolute; z-index:-1; width:var(--string-size); height:var(--string-size); border:1px solid #a9c4a947; border-radius:50%; background:#1b2b20; transition:background .25s,border-color .25s; }
.string-choices button>span { font-size:15px; line-height:1; }
.string-choices button>small { font-size:7px; line-height:1; color:#aabea5; }
.string-choices button:hover::before { border-color:#c0d7b580; background:#2b3e2b; }
.string-choices button[aria-pressed=true] { color:#e1f1d3; }
.string-choices button[aria-pressed=true]::before { border-color:#bbd69a; background:#354c2e; box-shadow:0 0 20px #c8e4b00e; }
.string-choices button[aria-pressed=true]>small { color:#d2e2c4; }
.privacy-section { position:relative; isolation:isolate; overflow:clip; padding:72px 0 66px; background:radial-gradient(ellipse at 78% 55%,#d9e4cf8c,transparent 57%),linear-gradient(125deg,var(--paper),#edeee2); }
.privacy-layout { display:grid; align-items:center; gap:32px; max-width:1050px; }
.privacy-section h2 { font-size:clamp(32px,7.8vw,62px); font-weight:500; line-height:1.04; letter-spacing:-.055em; margin:0 0 26px; }
.privacy-section h2>span,.privacy-section h2>em { display:block; }
.privacy-section h2>em { margin-top:5px; font-family:Georgia,'Times New Roman',serif; font-size:1.1em; font-weight:400; letter-spacing:-.045em; color:var(--green); }
.project-license { margin:-4px 0 10px; color:#526452; font-size:12px; line-height:1.6; }
.mint-dot { color:var(--green); }
.trust-points { list-style:none; margin:0; padding:0; }
.trust-points li { display:flex; align-items:flex-start; gap:16px; padding:23px 0; border-bottom:1px solid #aabd9b4d; }
.trust-points li:first-child { padding-top:0; }
.trust-points li:last-child { border:0; padding-bottom:0; }
.trust-check { display:grid; place-items:center; flex:0 0 29px; height:29px; border:1px solid #b8caaa80; border-radius:50%; background:#d6e1cb57; color:#396448; font-size:12px; }
.trust-points h3 { margin:3px 0 7px; font-size:17px; line-height:1.3; font-weight:500; letter-spacing:-.02em; }
.trust-points p { margin:0; color:#505c4e; font-size:13px; line-height:1.7; }
.text-link { display:inline-flex; gap:24px; font-size:12px; min-height:44px; align-items:center; border-bottom:1px solid var(--ink); }
.text-link:hover { color:var(--green); }
.footer { border-top:1px solid #cbd1c2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:23px; padding-bottom:26px; }
.footer .brand-guitarist { width:32px; height:32px; }
.footer .wordmark { font-size:20px; }
.footer>div { display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:10px; }
.footer>div a { display:inline-flex; align-items:center; gap:5px; min-height:44px; }
.footer>div a:hover { color:var(--green); }
.footer>div>span { color:var(--muted); font-size:9px; }
.footer-social { display:flex; align-items:center; gap:2px; }
.footer-social .social-icon-link { justify-content:center; width:44px; height:44px; border:1px solid transparent; border-radius:50%; color:#3f5b43; }
.footer-social .social-icon-link:hover { background:#dce5d480; border-color:#bdcbb680; }
.footer-social .social-icon { width:19px; height:19px; }
.policy-main { padding-top:38px; padding-bottom:65px; }
.policy-heading { padding-bottom:34px; border-bottom:1px solid #cbd1c2; }
.policy-heading h1 { font-size:clamp(46px,9.7vw,88px); letter-spacing:-.055em; line-height:1; margin-bottom:27px; }
.policy-date { font-size:12px; color:var(--muted); margin:0; }
.policy-layout { display:grid; gap:36px; padding-top:35px; align-items:start; }
.brand-ring { display:block; width:30px; height:30px; border:1.5px solid var(--green); border-radius:50%; }
.policy-summary { background:#dce5d4; border-radius:10px; display:grid; grid-template-columns:30px 1fr; column-gap:20px; padding:24px; }
.policy-summary>p { font-size:25px; font-weight:600; line-height:1.1; letter-spacing:-.035em; margin:0 0 14px; }
.policy-summary>span:not(.brand-ring) { grid-column:2; font-size:12px; line-height:1.7; color:#365238; }
.policy-summary>a { grid-column:1/-1; margin-top:23px; border-top:1px solid #b2c5a8; padding-top:18px; font-size:11px; line-height:1.6; }
.policy-content { max-width:760px; }
.policy-content section+section { margin-top:38px; }
.policy-content h2 { font-size:20px; line-height:1.3; letter-spacing:-.025em; margin-bottom:14px; }
.policy-content p { font-size:14px; line-height:1.8; color:#50594e; margin-bottom:15px; overflow-wrap:anywhere; }
.policy-content strong { color:#293b28; font-weight:600; }
.policy-content a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
@media(min-width:600px) {
  .wrap { width:min(1200px,calc(100% - 72px)); }
  .header { height:96px; }
  .header nav { gap:30px; font-size:12px; }
  .header-social { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .header-social .brand { grid-column:2; }
  .header-social .social-links { grid-column:3; justify-self:end; gap:20px; font-size:11px; }
  .brand-symbol { width:36px; height:36px; }
  .wordmark { font-size:25px; }
  .hero-stage { padding-top:38px; padding-bottom:68px; }
  .hero h1 { flex-direction:row; align-items:baseline; justify-content:center; column-gap:.13em; font-size:clamp(70px,9vw,96px); margin-bottom:25px; }
  .hero-title-main { display:inline; }
  .hero-zero { margin:0; }
  .hero-copy .hero-lead { font-size:18px; }
  .hero-copy .hero-benefits { font-size:11px; }
  .mobile-break { display:none; }
  .hero-scene { width:100%; height:390px; margin:6px auto 0; }
  .hero-poster,.hero-canvas { width:min(132%,1120px); top:57%; }
  .tuning-demo { left:6%; top:-10px; width:88%; }
  .demo-value { font-size:300px; }
  .hero-actions { width:338px; }
  .store-button { min-height:58px; gap:12px; }
  .store-button strong { font-size:15px; }
  .store-button small { font-size:9px; }
  .privacy-section { padding-top:88px; padding-bottom:88px; }
  .footer { padding-top:30px; padding-bottom:32px; }
  .footer>div { gap:28px; font-size:11px; }
  .policy-main { padding-top:60px; padding-bottom:94px; }
  .policy-layout { grid-template-columns:230px 1fr; gap:56px; padding-top:55px; }
  .policy-summary { display:block; position:sticky; top:30px; padding:28px; }
  .policy-summary>p { margin:26px 0 20px; font-size:30px; }
  .policy-summary>span:not(.brand-ring),.policy-summary>a { display:block; }
  .policy-content p { font-size:15px; }
}
@media(min-width:800px) {
  .privacy-layout { grid-template-columns:1.1fr 1fr; gap:38px; }
  .privacy-section h2 { font-size:clamp(38px,4.8vw,62px); }
}
@media(min-width:1000px) {
  .hero-stage { padding-top:30px; }
  .hero h1 { font-size:112px; }
  .hero-scene { height:420px; }
  .tuning-demo { left:5%; top:-4px; width:90%; }
  .demo-value { font-size:360px; }
  .ambient-warm { left:-18%; top:80px; }
  .privacy-layout { gap:100px; }
}
@media(max-height:760px) and (min-width:600px) {
  .hero h1 { font-size:86px; }
  .hero-scene { height:320px; }
  .hero-poster,.hero-canvas { width:min(125%,940px); }
  .hero-stage { padding-top:22px; padding-bottom:46px; }
  .demo-value { font-size:270px; }
}
@media(max-height:720px) and (max-width:599px) {
  .hero-stage { padding-top:12px; padding-bottom:38px; }
  .hero h1 { font-size:54px; margin-bottom:23px; }
  .hero-scene { height:245px; }
  .demo-value { font-size:180px; }
  .tuning-demo { top:2px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button { transition:none; }
  .hero-atmosphere span { animation:none; }
  .demo-value>span { transform:none; }
  .how-atmosphere span { animation:none; }
  .mode-demo button,.string-choices button::before,.instrument-sample,.instrument-check { transition:none; }
}
@media(min-width:900px) {
  .how-section { padding:86px 0 82px; }
  .how-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; column-gap:clamp(44px,5.7vw,80px); max-width:1200px; }
  .how-intro h2 { font-size:clamp(48px,4.7vw,66px); }
  .instrument-prompt { margin-top:35px; }
  .instrument-pair { height:238px; }
}
@media(max-width:399px) {
  .mode-demo { padding:14px; }
  .headstock-frame { width:calc(100% - 24px); }
  .preview-wordmark { font-size:16px; }
}
@media(max-width:359px) {
  .hero-actions { gap:8px; }
  .hero .store-button { padding:10px 8px; gap:8px; }
  .hero .store-button .store-icon { width:20px; height:24px; }
  .hero .store-button strong { font-size:13px; }
}