/* 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}
/* One 315-char review made all 8 cards its height, leaving dead space around the short ones
   (Tony, 4 Nov). Cards keep their natural height and the track follows the card you are on;
   gr-card-fit in the page sets the height. */
.hero-reviews .gr-carousel{align-items:flex-start;transition:height .22s ease}
.hero-reviews .gr-quote{justify-content:flex-start}
@media(prefers-reduced-motion:reduce){.hero-reviews .gr-carousel{transition:none}}
#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:3;margin:20px auto 0}.hero-reviews .gr-reviews{order:3;margin:12px 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}
/* The single-column grids default to an auto minimum, so .cd-then ("then the price goes up
   to $19", white-space:nowrap, 433px min-content) pinned the column at 430px inside a 343px
   wrap and pushed the page to 447px on every phone. Everything in the column then sat 16px
   from the left and 1px from the right, which is what read as "not centered" (Tony, 4 Nov).
   minmax(0,1fr) lets the track shrink to the wrap; the countdown fitter then sizes to it. */
.requirements-row,.story-row{grid-template-columns:minmax(0,1fr)}
}
@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 */
.cd-keep,body[data-landing-family] .countdown .cd-keep{margin:0 0 10px;font:700 min(14px,calc((min(100vw,462px) - 56px) / 30))/1.2 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#000}   /* under the clock (Tony, 2 Nov) */
.cd-label,.cd-then{background:#9f13dc}   /* the bands in the numbers' shell purple (the owner, 2 Nov) */
.cd-pitch{margin:0;padding:6px 0 0}
/* lockups on the clock: each line Arial bold, fitted to the clock's width, hugging it (Tony, 2 Nov) */
.cd-fit,body[data-landing-family] .countdown .cd-fit{display:table;margin:0 auto;white-space:nowrap;font:700 20px/1.08 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#000}
.cd-keep,body[data-landing-family] .countdown .cd-keep{margin:0;padding:0 0 6px;font-size:inherit;white-space:normal}
.cd-fit .cd-ab{font:400 1em/1 "Archivo Black","Arial Black",sans-serif}   /* BENDO / bend, stretch, break in Archivo Black, the rest Arial bold (Tony, 2 Nov) */
.countdown .cd-pitch .cd-fit,body[data-landing-family] .countdown .cd-pitch .cd-fit{font-weight:400}   /* the two lines under the clock lighter than Arial bold (Tony, 2 Nov) */
.cd-fit .cd-arb{font:900 1em/1 "Arial Black",Arial,sans-serif}   /* bend, stretch, break in Arial Black (Tony, 2 Nov) */
/* v 2.0 release note, above the clock in the purchase column (Tony, 6 Nov: "above the clock, it needs a date, and it needs to not be purple"; picked the black band). The black strip's type, the clock's width. */
.release-note{width:100%;max-width:430px;margin:14px auto 0;box-sizing:border-box;background:#000;color:#fff}
.release-note a{color:inherit;text-decoration:none}
.release-note u{text-decoration:underline;text-underline-offset:2px}
.release-note a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:700px){.release-note{order:2}}
/* the pitch lockup sits between share BENDO and the hero GET BENDO on phones (Tony, 6 Nov); a second copy, shown only there.
   It carries .countdown so the deadline hides it with the clock, as the desktop one is hidden inside the clock. */
.cd-pitch-m{display:none}
@media(max-width:700px){.purchase .cd-pitch{display:none}.cd-pitch-m{display:block;margin:2px auto 24px}   /* (24 collapses with .demo-purchase's 12) equal ink gaps: share BENDO -> lockup -> GET BENDO, measured at 360 and 390 */.cd-pitch-m[hidden]{display:none}}
/* a quote left alone on its row of two is centred across the row, not parked in the left column (Tony, 6 Nov) */
#testimonials .testimonial .tm:not(:first-child):last-child:nth-child(even){grid-column:1/-1;justify-self:center;max-width:820px}
/* the keys: heading, the strip of keys, then the twelve in two columns, one centred block (6 Nov: beside a
   690px list the 76px strip left most of its column empty) */
#keys{grid-template-columns:minmax(0,1fr)}
#keys .story-copy{max-width:960px}
#keys .detail-group{margin:6px 0 4px}
#keys .detail-photo{max-width:none}
@media(min-width:701px){
 #keys .controls{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);column-gap:18px}
 #keys .controls dd:nth-of-type(odd){margin-right:22px}
 /* a row with copy and no picture spans the row, centred */
 #possibilities .story-copy{grid-column:1/-1;max-width:none;text-align:center}
}
/* a credit too long for a phone breaks at its last separator, which then goes: never a line that starts with a dot (6 Nov) */
.tm-who .tm-nb{white-space:nowrap}
@media(max-width:480px){.tm-who .tm-sep{display:none}.tm-who .tm-nb{display:block}}

/* SMPLUTILITY: the family sheet above (BENDO's product sheet), with this product's palette
   and hero proportions. The page ground, ink and rules are the family's; only the purchase
   button takes the product's colour (the unit's charcoal key). */
/* The purchase button is the app's pad grey (Tony, 11 Nov 2026: lighter grey), black type (Tony, 12 Nov 2026). */
:root{--purchase-fill:#aeb4b6;--purchase-hover:#b9bfc1;--purchase-ink:#000}
.buy,.sticky-buy{border-color:#2c3133;box-shadow:inset 0 0 0 1px #ffffff2e,4px 4px 0 #222}
.buy:hover,.sticky-buy:hover{border-color:#2c3133}
.buy .price,.sticky-buy .price{border-left-color:#ffffff40}
.hero-lockup{max-width:480px}
/* The hero picture is the app's own window, the proportion it has on screen. */
.instrument-view.is-playing{width:min(100%,420px,calc((100svh - 190px)*895/1394));aspect-ratio:895/1394}
.instrument-view.is-playing .panel-button{position:static;aspect-ratio:895/1394;padding:0;border:0;background:transparent;cursor:zoom-in}
.detail-photo{background:transparent}
/* SMPLUTILITY in text keeps the mark's two halves, as the app draws it (mpc-librarian/src/brand.ts):
   SMPL Archivo Black in the mark's red, tracked -0.03em; UTILITY Archivo Light in the pad grey, 0.05em. */
.gz-name{white-space:nowrap;text-transform:none}
body[data-landing-family] .gz-name b{font-family:'Archivo Black',sans-serif;font-weight:400;font-style:normal;font-synthesis:none;color:#e00004;letter-spacing:-.03em}
body[data-landing-family] .gz-name i{font-family:Archivo,sans-serif;font-weight:300;font-style:normal;font-synthesis:none;color:#aeb4b6;letter-spacing:.05em}
@media(max-width:700px){.instrument-view.is-playing{width:min(100%,430px);aspect-ratio:895/1394}}
/* No countdown on this page: the hero is one row, the statement sits under the purchase block. */
@media(min-width:701px){.hero{grid-template-rows:auto}.hero-content{grid-row:1;align-self:center}.instrument{grid-row:1}
  .hero-thesis{grid-column:auto;grid-row:auto;margin:6px auto 0}}
/* The hero statement's first line is an ordinary heading (the family's h2 role). */
.hero-thesis .section-heading{margin:0 0 10px}
/* "free." beside the last purchase button: Arial Black (Tony, 11 Nov 2026). */
body[data-landing-family] .requirements-row .purchase-end>p{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-synthesis:none}

.story-copy .copy-link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}