/* BENDO mockup: WINNETKA's product sheet, panel aspect 720/1220. */
:root{--purchase-fill:#cdcdcd;--purchase-hover:#dddddd;--purchase-ink:#171717}
body{font-family:Arial,sans-serif}
.hero{gap:24px 64px;padding-block:28px 30px;grid-template-rows:auto auto}
.hero-content{gap:20px;grid-row:1;align-self:end}
.hero-lockup{max-width:430px;width:100%;margin:auto}
.hero-lockup img{width:100%;max-width:100%;margin:0;height:auto}
.instrument{grid-row:1/3}
.instrument-view.is-playing{width:min(100%,420px,calc((100svh - 165px)*720/1220));aspect-ratio:720/1220;background:transparent}
.instrument-view.is-playing .panel-button{aspect-ratio:720/1220}
#demo{object-fit:contain;border-radius:0}.audition-overlay{top:17%}
.demo-tools{display:flex;justify-content:center;margin-top:6px}
.demo-tools .share-product{width:auto;flex-basis:auto;gap:7px;font-size:12px}
.purchase-term{font:400 12px/1.4 Arial,sans-serif;color:var(--muted);text-align:center;margin-top:5px}
.buy,.sticky-buy{background:var(--purchase-fill);color:var(--purchase-ink);border-color:#414141;box-shadow:inset 0 0 0 1px #ffffffa6,inset 0 3px 0 #0000000c,4px 4px 0 #222}
.buy .price,.sticky-buy .price{display:flex;align-items:center;align-self:stretch;justify-content:center;flex:none;min-width:84px;padding-inline:18px;margin:0;font:400 28px/1 Arial,sans-serif;background:transparent;color:inherit;border-left:1px solid #00000026}
.buy:hover,.sticky-buy:hover{background:var(--purchase-hover);color:var(--purchase-ink);border-color:#414141}
.sticky-buy{width:390px;padding:0 0 0 16px}.sticky-buy .price{font-size:25px;min-width:74px;padding-inline:14px}
.hero-thesis{grid-column:2;grid-row:2;align-self:start;text-align:center;max-width:480px;width:100%;margin:auto;font:400 16px/1.4 Arial,sans-serif}
.thesis-label{font:700 17px/1.25 Arial,sans-serif;margin-bottom:10px}
.thesis-lines{font:400 25px/1.22 Arial,sans-serif;margin-bottom:10px}
.hero-reviews .gr-reviews{margin-top:8px}.hero-reviews .gr-quote{gap:5px}.hero-reviews .gr-rating{margin:0}
#testimonials .testimonial-artwork{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 56px)/3);gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:14px;scrollbar-width:thin}
#testimonials .testimonial-artwork .tm{grid-column:auto;max-width:none;width:100%;padding:0;border:0;scroll-snap-align:start}
.proof-card{width:100%;height:auto}.tm-vid{position:relative;width:100%;background:transparent;aspect-ratio:4/5}
.tm-vid video{width:100%;height:100%;object-fit:contain}
.tm-vid .play-badge{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;white-space:nowrap;background:var(--ink);color:#fff;border:1px solid #fff;font:700 14px/1.2 Arial,sans-serif;box-shadow:0 4px 14px #0004}
.tm-vid .play-badge svg{width:18px;height:18px}
.proof-status{margin-top:8px;font:400 13px/1.4 Arial,sans-serif;text-align:center}
.story-row{border-top:1px solid var(--line);padding-block:36px;gap:56px}
.story-copy h2:not(.statement),.purchase-end h2{font:700 32px/1.2 Arial,sans-serif;letter-spacing:0;text-transform:lowercase}
.story-copy p{font:400 16px/1.6 Arial,sans-serif}
.detail-group{display:flex;flex-direction:column;gap:18px;min-width:0;width:100%}
.detail-photo{background:transparent;aspect-ratio:auto;overflow:visible;width:100%;max-width:480px}
.detail-photo img{position:static;width:100%;height:auto;max-width:100%}
.section-purchase{padding-top:4px;padding-bottom:30px}
.purchase-end{text-align:center;width:100%;max-width:480px;margin:auto}
.purchase-end h2{margin-bottom:8px}.purchase-end>p{margin-bottom:18px}
.purchase-end .buy{margin-top:0}.footer a{font-size:11px}
@media(max-width:1000px) and (min-width:701px){.hero{column-gap:36px}.hero-content{gap:16px}.hero-thesis .thesis-lines{font-size:23px}.buy>span:first-child{font-size:24px}.buy .price{font-size:25px;min-width:73px;padding-inline:12px}}
@media(max-width:700px){
.hero{padding-top:20px;gap:0;display:flex;flex-direction:column}
.hero-lockup{max-width:340px;margin:0 auto 14px}.purchase{margin:0 auto}
.purchase .paymarks{margin-bottom:2px}.purchase .buy{order:1}.purchase .compatibility{order:2;margin:10px 0 0}.purchase-term{order:3}
.hero-reviews:has(.gr-rating,.gr-reviews){display:contents}.hero-reviews .gr-rating{order:1;margin:12px auto 0}.hero-reviews .gr-reviews{order:3;margin:20px auto 0}
.instrument{margin-top:16px;width:100%}.instrument-view.is-playing{width:min(100%,430px);aspect-ratio:720/1220}
.demo-purchase{margin-top:12px}.hero-thesis{order:4;margin:22px auto 0}.thesis-lines{font-size:23px}
.buy .price{font-size:26px;min-width:72px;padding-inline:13px}.buy>span:first-child,.sticky-buy>span:first-child{font-size:clamp(17px,6.1cqi,28px)}
#testimonials .testimonial-artwork{grid-template-columns:none;grid-auto-columns:82%;gap:16px;max-width:none;margin:0}
#testimonials .testimonial-artwork .tm{max-width:none;justify-self:stretch}
.story-row{padding-block:28px;gap:24px}.story-copy h2:not(.statement),.purchase-end h2{font-size:28px}
.story-row .detail-group{order:1;max-width:430px;margin:auto}.story-row .story-copy{order:0}
.requirements-row{gap:28px}.section-purchase{padding-bottom:24px}
}
@media(max-width:359px){.hero-lockup{max-width:280px}.buy .price{font-size:24px;min-width:64px;padding-inline:10px}.compatibility,.footer a{font-size:11px}.entry-reassurance{font-size:11px}.paymarks{margin-bottom:8px}}

.tm-vid.is-playing .play-badge{left:auto;right:8px;top:8px;transform:none}
/* BENDO: the controls lists */
.controls{display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;margin:14px 0 0}
.controls dt{font:700 13px/1.55 Arial,sans-serif;letter-spacing:.06em;white-space:nowrap}
.controls dd{margin:0;font:400 16px/1.5 Arial,sans-serif}
.story-copy .controls+p{margin-top:16px}
@media(max-width:700px){.controls{gap:8px 14px}.controls dd{font-size:15px}}
/* BENDO: the countdown, a lit LCD in the panel's green */
.countdown{text-align:center;margin:14px auto 0;width:100%;max-width:430px}
.cd-label,.cd-then{font:700 22px/1.15 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.cd-then{margin-top:10px}
.cd-lcd{display:flex;justify-content:center;align-items:baseline;gap:4px 6px;margin-top:8px;padding:12px 14px;border:1.5px solid #000;color:#86c169;background-color:#122110;background-image:radial-gradient(circle,rgba(134,193,105,.07) .5px,transparent .8px);background-size:3px 3px;box-shadow:inset 0 2px 6px #000a}
.cd-n{font:700 34px/1 ui-monospace,Menlo,"Courier New",monospace;font-variant-numeric:tabular-nums;text-shadow:0 0 6px #86c16955}
.cd-u{font:700 10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
.cd-u:last-child{margin-right:0}
.purchase-end .countdown{margin:14px auto 18px}
@media(max-width:700px){.countdown{order:2;margin-top:14px}.cd-n{font-size:clamp(24px,8cqi,32px)}}
/* FREE FOR and THEN $19 in their own black bands, the LCD between them */
.cd-label,.cd-then{display:block;background:#000;color:#fff;padding:9px 12px 8px;margin:0}
.countdown .cd-lcd{margin-top:0;border-top:0;border-bottom:0}
.cd-then{margin-top:0}
/* the clock itself: white ground, house ink and type */
.countdown .cd-lcd{color:var(--ink);background:#fff;background-image:none;box-shadow:none;border:1.5px solid #000;border-top:0;border-bottom:0}
.countdown .cd-n{font:400 34px/1 "Archivo Black","Arial Black",sans-serif;text-shadow:none}
@media(max-width:700px){.countdown .cd-n{font-size:clamp(24px,8cqi,32px)}}
.countdown .cd-n{font-variant-numeric:tabular-nums;display:inline-block;min-width:1.25em;text-align:right}
.cd-label,.cd-then{text-wrap:balance}
.countdown .cd-lcd{color:#4a8f2f}   /* BENDO green, deepened from the LCD #86c169 to read on white */
.cd-label,.cd-then{white-space:nowrap;font-size:min(22px,calc((100vw - 56px) / 17.5))}   /* one row each, sized to the phone width (the bottom line is ~16.9x its size) */
.countdown .cd-lcd{color:#86c169}   /* the buy button green (Tony, 2 Nov) */
.countdown .cd-u{color:#000}
.countdown .cd-lcd{color:#620c88}   /* shell purple, sampled off the panel rail (Tony, 2 Nov: try it) */
.countdown .cd-lcd{color:#7d0fad}   /* shell purple, a little lighter (Tony, 2 Nov) */
.countdown .cd-lcd{color:#9f13dc}   /* shell purple, lighter again (Tony, 2 Nov) */
.cd-label,.cd-then{font-size:min(22px,calc((min(100vw,462px) - 56px) / 19.6))}   /* the longer bottom line is ~19.3x its size; both bands share one size */