/* MOD-FX 2.0, build B: the spec sheet as a luxury object. Structure taken from RUMOR, Warmtone, DRUMFLX, Scorch 2, Freq-FX
   and ToneFLX; every surface in the Synth Palace system (graphite, Analog Orange, Palace Display, Signal Sans, grain).
   Monoblock carries chips, tables and numbers on this test build only: the licence is the demo. */
@font-face{ font-family:"Palace Display"; src:url("../fonts/PalaceDisplay.otf") format("opentype"); font-display:swap }
@font-face{ font-family:"ANLG Type"; src:url("../fonts/ANLGType.otf") format("opentype"); font-display:swap }
@font-face{ font-family:"Signal Sans"; src:url("../fonts/SignalSans.woff2") format("woff2"), url("../fonts/SignalSans.otf") format("opentype"); font-display:swap }
@font-face{ font-family:"Monoblock"; src:url("../media/monoblock_light.otf") format("opentype"); font-display:swap }

:root{
  --g:#1A1A19; --g2:#141413; --paper:#F0F0F0; --orange:#DC8855; --glow:#FFFFC9;
  --t:#F0F0F0; --t2:rgba(240,240,240,.66); --t3:rgba(240,240,240,.46); --line:rgba(240,240,240,.14); --line2:rgba(240,240,240,.3);
  --card:rgba(240,240,240,.05);
  --display:"Palace Display", Georgia, serif; --edit:"ANLG Type", Georgia, serif; --sans:"Monoblock", "Signal Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;   /* Jack 2026-09-23: all the copy in Monoblock, "easier to read when it's small" (the DEMO cut: licence before deploy) */ --mono:"Monoblock", ui-monospace, Menlo, monospace;
  --w:1360px; --gutter:clamp(16px, 4vw, 56px); --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box } html{ scroll-behavior:smooth }
body{ margin:0; background:var(--g); color:var(--t); font-family:var(--sans); font-size:15px; line-height:1.6; overflow-x:hidden; zoom:.9 }   /* Jack 2026-09-23: the page at 100 percent is to look as it did at his 90 percent browser zoom (the hero's maths reads this zoom, js/stage.js) */
img, video{ max-width:100%; display:block } a{ color:inherit; text-decoration:none } button{ font:inherit; cursor:pointer } ::selection{ background:var(--orange); color:var(--g) }
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 80% at 50% 0%, rgba(220,136,85,.07), transparent 55%), radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.5), transparent 70%) }
body::after{ content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.085; mix-blend-mode:overlay; background-size:300px 300px; animation:grain 1.2s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") }
@keyframes grain{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-2%,1%) } 50%{ transform:translate(1%,-2%) } 75%{ transform:translate(-1%,2%) } 100%{ transform:translate(0,0) } }
@media (prefers-reduced-motion:reduce){ body::after{ animation:none } html.js .rv{ opacity:1 !important; transform:none !important; filter:none !important } }
.wrap{ width:min(var(--w), 100% - 2*var(--gutter)); margin-inline:auto; position:relative; z-index:1 }
html.js .rv{ opacity:0; transform:translateY(20px); filter:blur(5px); transition:opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease) } html.js .rv.in{ opacity:1; transform:none; filter:none }

/* type */
h1, h2, h3{ font-weight:400; margin:0; text-wrap:balance }
h1{ font-family:var(--display); font-size:clamp(40px, 5.6vw, 84px); line-height:.98; letter-spacing:-.04em }
h2{ font-family:var(--display); font-size:clamp(30px, 3.8vw, 52px); line-height:1.02; letter-spacing:-.035em }
h2 span{ color:var(--t3) }
h3{ font-family:var(--edit); font-size:clamp(22px, 2.2vw, 30px); line-height:1.1; letter-spacing:-.02em }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--t2) }
.num{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--orange) }
.lede{ font-size:clamp(16px, 1.25vw, 19px); color:var(--t2); max-width:58ch; margin:0 }
p{ margin:0 0 1em }
section{ position:relative; padding:clamp(60px, 9vh, 120px) 0 }
section.band{ background:var(--g2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.head{ max-width:64ch; margin-bottom:38px } .head .lede{ margin-top:16px }
.cross{ position:absolute; width:14px; height:14px; opacity:.5 } .cross::before, .cross::after{ content:""; position:absolute; background:var(--t3) }
.cross::before{ left:50%; top:0; width:1px; height:100%; margin-left:-.5px } .cross::after{ top:50%; left:0; height:1px; width:100%; margin-top:-.5px }
.cross.tl{ left:0; top:26px } .cross.tr{ right:0; top:26px }

/* pills */
.pill{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 22px; border-radius:999px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; border:1px solid var(--line2); color:var(--t); background:transparent; white-space:nowrap; transition:transform .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease) }
.pill:hover{ transform:translateY(-1px); border-color:var(--t) } .pill:active{ transform:scale(.98) }
.pill.buy{ background:var(--orange); color:var(--g); border-color:var(--orange) } .pill.buy:hover{ background:#e39463 }
.pill s{ opacity:.55 } .pill i{ font-style:normal; width:22px; height:22px; border-radius:50%; background:rgba(30,30,30,.16); display:grid; place-items:center; font-size:12px }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0 }
.chip{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t2); border:1px solid var(--line); border-radius:4px; padding:6px 9px; background:var(--card) }
.chip b{ color:var(--t); font-weight:400 }

/* nav: a pill bar with the price in it */
.nav{ position:fixed; z-index:100; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 22px; background:transparent; transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent }
.nav.scrolled{ background:rgba(20,20,19,.78); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--line2); box-shadow:0 10px 40px rgba(0,0,0,.35) }
.nav .l, .nav .r{ display:flex; align-items:center; gap:6px; flex:none }
.nav .brand{ display:flex; align-items:center; gap:10px; margin-right:14px; white-space:nowrap } .nav .brand img{ height:22px; width:auto }
.nav nav{ display:flex; gap:2px } .nav nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t2); padding:9px 11px; border-radius:999px; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,.7) } .nav nav a:hover{ color:var(--t); background:rgba(240,240,240,.06) }
.nav .price{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t2); padding:0 12px; white-space:nowrap } .nav .price b{ color:var(--t); font-weight:400 } .nav .price s{ opacity:.5 }
.nav .pill{ height:34px; padding:0 16px }
@media (max-width:1000px){ .nav nav, .nav .price{ display:none } .nav{ padding:10px 14px } }
/* the persistent buy bar (Freq-FX, Warmtone): appears once the hero has gone */
.bar{ position:fixed; z-index:99; left:0; right:0; bottom:0; padding:10px var(--gutter); background:rgba(20,20,19,.86); border-top:1px solid var(--line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:space-between; gap:12px; transform:translateY(110%); transition:transform .6s var(--ease) }
.bar.on{ transform:none } .bar .l{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 } .bar .l b{ color:var(--t); font-weight:400 } .bar .l s{ opacity:.5 } .bar .l em{ font-style:normal; margin-left:8px }
.bar .r{ display:flex; gap:8px } .bar .pill{ height:38px; padding:0 18px }
@media (max-width:640px){ .bar .l span, .bar .l > b{ display:none } }   /* a phone shows the price, not a clipped name (Jack 2026-09-24) */

/* hero: fullscreen, centred, one sentence */
.hero{ min-height:100svh; padding:0; display:grid; place-items:center; text-align:center; overflow:hidden; background:#0e0d0c }
.hero picture, .hero .loop{ position:absolute; inset:0 } .hero img, .hero video{ width:100%; height:100%; object-fit:cover; object-position:60% 50% }
.hero .loop{ opacity:0; transition:opacity 1.4s var(--ease) } .hero .loop.on{ opacity:1 }
.hero::before{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(42% 50% at 50% 52%, rgba(14,13,12,.66), rgba(14,13,12,.25) 60%, rgba(14,13,12,0) 100%), radial-gradient(90% 80% at 50% 50%, transparent 40%, rgba(14,13,12,.75) 100%), linear-gradient(180deg, rgba(14,13,12,.5), transparent 25%, transparent 70%, rgba(26,26,25,1)) }
.hero .wrap{ z-index:2; display:grid; justify-items:center; gap:22px; padding:120px 0 90px }
.hero .mark{ width:min(360px, 60vw); height:auto; opacity:.97 }
.hero .word{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--t2) }
.hero h1{ max-width:14ch; text-shadow:0 2px 40px rgba(0,0,0,.5) }
.hero .sent{ font-size:clamp(16px, 1.35vw, 20px); color:var(--t2); max-width:44ch; margin:0 }
.hero .priceline{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--t2) } .hero .priceline b{ font-family:var(--edit); font-size:34px; color:var(--t); font-weight:400; letter-spacing:-.02em; margin-right:8px } .hero .priceline s{ opacity:.5 }
.hero .ctas{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }

/* the unit: three fact lines and the whole rack */
.unit .facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:26px }
.unit .facts div{ border-top:1px solid var(--line2); padding-top:14px } .unit .facts .num{ display:block; margin-bottom:8px } .unit .facts p{ margin:0; font-size:15.5px; color:var(--t2) } .unit .facts p b{ color:var(--t); font-weight:400 }
.unit figure{ margin:0; border-radius:8px; overflow:hidden; border:1px solid var(--line); box-shadow:0 50px 120px rgba(0,0,0,.5) }
@media (max-width:820px){ .unit .facts{ grid-template-columns:1fr } }

/* play: the rack in the browser */
.play .frame{ padding:8px; border-radius:14px; background:var(--card); border:1px solid var(--line) } .play .mfxp{ border-radius:8px }
.play .cap{ display:flex; justify-content:space-between; gap:16px; margin-top:12px; flex-wrap:wrap }

/* features [01]-[08] */
.feat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px, 5vw, 80px); align-items:center; padding:clamp(40px, 6vh, 80px) 0; border-top:1px solid var(--line) }
.feat:nth-of-type(even){ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .feat:nth-of-type(even) .txt{ order:2 }
.feat.full{ grid-template-columns:1fr } .feat.full .txt{ order:0; max-width:64ch; margin-inline:auto; text-align:center } .feat.full .txt .num{ display:block } .feat.full .txt p{ margin-inline:auto } .feat.full .txt .chips{ justify-content:center } .feat.full figure{ aspect-ratio:21/9 }   /* the sequencer's words centred (Jack 2026-09-24) */
.feat .num{ display:block; margin-bottom:12px } .feat h3{ font-family:var(--display); font-size:clamp(26px, 2.8vw, 40px); letter-spacing:-.035em; margin-bottom:12px } .feat p{ color:var(--t2); max-width:48ch }
.feat figure{ margin:0; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#0f0f0e; aspect-ratio:3/2; box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 20px 50px rgba(0,0,0,.4) } .feat figure video{ width:100%; height:100%; object-fit:cover; display:block }
/* the module pictures: no card, no ground, the module itself on the section's black (Jack 2026-09-23: "full screen no background") */
.feat figure.shot{ background:none; border:0; box-shadow:none; aspect-ratio:auto; overflow:visible; position:relative; display:flex; align-items:center; justify-content:center; gap:5% }
.feat figure.shot img{ width:100%; height:auto; object-fit:contain; display:block; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) }
.feat.full figure.strip{ width:min(100%, 1440px); margin:0 auto }   /* a tad bigger (Jack 2026-09-24) */ .feat figure.strip video{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) } .feat figure.duo{ align-items:flex-end } .feat figure.duo img{ width:100%; height:auto; max-width:none; object-fit:fill }   /* the box has the picture's own shape (--r), so the loops laid on it by % land on the panel */
.feat figure .sticker{ position:absolute; top:-14px; right:-10px; z-index:2; transform:rotate(6deg); font:400 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#111; background:var(--orange); padding:9px 13px; border-radius:3px; box-shadow:0 8px 20px rgba(0,0,0,.45) } .feat figure img{ width:100%; height:100%; object-fit:cover }
@media (max-width:900px){ .feat, .feat:nth-of-type(even){ grid-template-columns:1fr } .feat .txt{ order:0 !important } }

/* sound rows */
.rows{ border-top:1px solid var(--line2) }
.row{ display:grid; grid-template-columns:190px 170px minmax(0,1fr); gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line) }
.row .m{ font-family:var(--edit); font-size:22px } .row .src{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--t2) }
@media (max-width:820px){ .row{ grid-template-columns:1fr; gap:8px } }
.ab{ --ab-signal:var(--orange); display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:12px; align-items:center }
.ab-head{ display:none } .ab-c{ display:none } .ab-row{ display:contents }
.ab-wave{ order:2; position:relative; height:46px; border-radius:6px; background:rgba(0,0,0,.28); border:1px solid rgba(240,240,240,.08); cursor:pointer; outline:none } .ab-wave:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
.ab-plot{ position:absolute; inset:7px 10px } .ab-plot svg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.ab-base{ fill:none; stroke:rgba(240,240,240,.3); stroke-width:1.6; stroke-linecap:round } .ab-prog{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p,0%)) 0 0) } .ab-fill{ fill:none; stroke:var(--ab-signal); stroke-width:1.6; stroke-linecap:round }
.ab-play{ order:1; width:40px; height:40px; border-radius:50%; border:1px solid var(--line2); background:var(--card); color:var(--t); display:grid; place-items:center } .ab-play svg{ width:14px; height:14px } .ab-play:hover{ border-color:var(--t) }
.ab-seg{ order:3; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line2); border-radius:999px; padding:3px; gap:2px }
.ab-seg button{ border:0; background:transparent; color:var(--t2); padding:7px 12px; border-radius:999px; font-family:var(--mono); font-size:11px; letter-spacing:.1em } .ab-seg button[aria-pressed="true"]{ background:var(--t); color:var(--g) }
.ab-time{ order:4; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--t3); font-variant-numeric:tabular-nums; min-width:76px; text-align:right }
@media (max-width:640px){ .ab{ grid-template-columns:auto minmax(0,1fr); } .ab-seg{ grid-column:1/-1 } .ab-time{ display:none } }

/* signal path and counters */
.path{ overflow-x:auto; padding-bottom:8px } .path svg{ width:100%; min-width:900px; height:auto; display:block }
.counters{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:56px }
.counters div{ padding-top:14px; text-align:center }   /* no rules over the numbers (Jack 2026-09-24: phone, then desktop) */ .counters b{ display:block; font-family:var(--edit); font-size:clamp(40px, 5vw, 72px); font-weight:400; letter-spacing:-.04em; line-height:1 } .counters span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--t2) }
@media (max-width:640px){ .counters{ grid-template-columns:1fr 1fr; gap:26px 16px } .counters div{ padding-top:0 } }
.counters div{ padding-top:26px }   /* the display face's numerals rise above their line box: room so they never touch the rule */

/* why: the comparison */
.cmp{ width:100%; border-collapse:collapse; font-size:14.5px } .cmp th, .cmp td{ padding:14px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line) }
.cmp th{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--t3); font-weight:400 } .cmp td:first-child{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--t2); width:160px }
.cmp td{ color:var(--t3) } .cmp .us{ color:var(--t); background:rgba(220,136,85,.08); border-left:1px solid rgba(220,136,85,.35); border-right:1px solid rgba(220,136,85,.35) } .cmp th.us{ color:var(--orange) }
.cmp tr:last-child td{ border-bottom:0 } .cmpwrap{ border:1px solid var(--line); border-radius:8px; overflow:auto; background:var(--card) }

/* in the wild */
.wild{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px }
.clip{ position:relative; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:#0f0f0e; border:1px solid var(--line); cursor:pointer }
.clip img, .clip video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.clip .n{ position:absolute; left:10px; top:10px; z-index:2 } .clip .play{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75)); transition:opacity .3s }
.clip .play i{ width:64px; height:64px; border-radius:50%; border:1px solid var(--line2); background:rgba(26,26,25,.7); display:grid; place-items:center; color:var(--t) } .clip .play i svg{ width:30px; height:30px; margin-left:4px }
.clip .who{ position:absolute; left:10px; right:10px; bottom:10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em } .clip.playing .play{ opacity:0; pointer-events:none }
.clipq{ font-size:13px; color:var(--t2); margin:20px 2px 0; line-height:1.45 }
@media (max-width:1000px){ .wild{ grid-template-columns:repeat(3, minmax(0,1fr)) } } @media (max-width:640px){ .wild{ grid-template-columns:1fr 1fr } }

/* words */
.tiers{ display:grid; grid-template-columns:1fr; gap:34px }
.tier h3{ margin-bottom:14px; display:flex; align-items:baseline; gap:14px } .tier h3 small{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t3) }
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px }
.card{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px 18px 14px; display:grid; gap:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) }
.card q{ quotes:none; font-size:15.5px; line-height:1.5; color:var(--t); text-wrap:pretty } .card .by{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t2) } .card .by img{ width:24px; height:24px; border-radius:50%; object-fit:cover }
.stars{ color:var(--orange); font-size:12px; letter-spacing:2px }

/* (the old crate section is gone; the checkout from 8420 lives in .co) */

/* buy */
.buy .grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px, 5vw, 80px); align-items:start }
.buy .big{ font-family:var(--edit); font-size:clamp(72px, 9vw, 128px); line-height:.9; letter-spacing:-.05em } .buy .big s{ font-size:.35em; color:var(--t3); margin-left:14px }
.buy .terms{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin:24px 0; font-size:14.5px; color:var(--t2) } .buy .terms b{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t3); font-weight:400; margin-bottom:3px }
.buy .ctas{ display:flex; gap:10px; flex-wrap:wrap } .buy .timer{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--t3); margin-top:14px } .buy .timer b{ color:var(--t); font-weight:400 }
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:12px } .spec{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px } .spec h4{ margin:0 0 10px; font-family:var(--edit); font-weight:400; font-size:20px } .spec dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13.5px } .spec dt{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t3); padding-top:2px } .spec dd{ margin:0; color:var(--t2) }
.specs .wide{ grid-column:1/-1 }
@media (max-width:900px){ .buy .grid{ grid-template-columns:1fr } } @media (max-width:560px){ .specs{ grid-template-columns:1fr } .buy .terms{ grid-template-columns:1fr } }

/* faq */
details{ border-top:1px solid var(--line); padding:2px 0 } details:last-of-type{ border-bottom:1px solid var(--line) }
summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 0; font-family:var(--ui); font-size:clamp(16px, 1.35vw, 19px); letter-spacing:.02em; line-height:1.4 }   /* Monoblock (Jack 2026-09-24) */
summary:focus{ outline:none } summary:focus-visible{ outline:1.5px solid rgba(240,240,240,.6); outline-offset:4px; border-radius:6px }   /* the ring only for the keyboard, never the browser's blue on a click */
summary::-webkit-details-marker{ display:none } summary::after{ content:"+"; font-family:var(--mono); color:var(--orange); transition:transform .25s } details[open] summary::after{ transform:rotate(45deg) }
details p{ color:var(--t2); margin:0 0 18px; max-width:64ch }
.faq .wrap{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(24px, 5vw, 80px) } @media (max-width:820px){ .faq .wrap{ grid-template-columns:1fr } }

/* footer (task #2, 2026-09-25): the sign-off is one big link home to synth-palace.com, over the studio's own Juno and CS
   (media/studio-juno-cs-*.webp), faded in from the section above; the small print sits in a quiet row underneath */
footer.spfoot{ position:relative; z-index:1; background:var(--g2); overflow:hidden } #specs{ border-bottom:0; padding-bottom:clamp(40px, 6vh, 80px) }   /* the spec band runs straight into the footer's photo, no seam */
.sp-home{ position:relative; display:block; isolation:isolate; padding:clamp(110px, 15vh, 170px) 0 clamp(96px, 13vh, 150px); text-align:center; color:var(--t) }
.sp-photo{ position:absolute; inset:0; z-index:-1; background:url("../media/studio-juno-cs-2880.webp") 50% 58% / cover no-repeat; opacity:.95; filter:brightness(.42) saturate(1.02);   /* the full-size original (Analog Console/Studio pics 2026/6.jpg) at natural exposure, darkened here so the shadows keep their detail */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 42%, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 42%, #000 78%, transparent 100%) }
.sp-photo::after{ content:""; position:absolute; inset:0; background:radial-gradient(52% 58% at 50% 54%, rgba(14,14,13,.72), rgba(14,14,13,.2) 70%, transparent), radial-gradient(40% 40% at 50% 100%, rgba(220,136,85,.14), transparent 70%) }
.sp-in{ display:flex; flex-direction:column; align-items:center }
.sp-eyebrow{ font:400 14px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--t2) }
.sp-lock{ display:flex; align-items:center; gap:clamp(14px, 1.6vw, 22px); margin:26px 0 22px }
.sp-lock img:first-child{ height:clamp(58px, 6vw, 84px); width:auto }
.sp-lock img:last-child{ height:clamp(28px, 3vw, 42px); width:auto }
.sp-line{ font-family:var(--edit); font-size:clamp(20px, 1.8vw, 26px); line-height:1.3; color:var(--t2) }
.sp-go{ display:inline-flex; align-items:center; gap:12px; margin-top:38px; height:52px; padding:0 26px; border-radius:12px; border:1.5px solid var(--orange); color:var(--orange); font:400 16px/1 var(--ui); letter-spacing:.02em; background:rgba(14,14,13,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .3s var(--ease), color .3s var(--ease) }
.sp-go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease) }
.sp-home:hover .sp-go, .sp-home:focus-visible .sp-go{ background:var(--orange); color:#141413 } .sp-home:hover .sp-go svg{ transform:translateX(4px) }
.sp-home:focus-visible{ outline:none } .sp-home:focus-visible .sp-go{ outline:2px solid var(--glow); outline-offset:4px }
.sp-base{ display:flex; justify-content:space-between; align-items:center; gap:14px 30px; flex-wrap:wrap; padding:26px 0 34px; border-top:1px solid var(--line) }
footer .sp-base nav{ display:flex; gap:8px 28px; flex-wrap:wrap; font:400 14px/1.4 var(--ui); letter-spacing:.02em; color:var(--t2) } footer .sp-base nav a{ transition:color .2s } footer .sp-base nav a:hover{ color:var(--t) }
footer .sp-base .legal{ display:flex; gap:6px 24px; flex-wrap:wrap; margin:0; font:400 13px/1.5 var(--ui); color:var(--t3) }
@media (max-width:640px){ .sp-home{ padding:84px 0 88px } .sp-photo{ background-image:url("../media/studio-juno-cs-1920.webp"); background-position:40% 50% } }
@media (prefers-reduced-motion:reduce){ .sp-go svg{ transition:none } }

/* the playable hero: see the stage rules at the end */
.deck{ border-radius:18px; padding:10px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(240,240,240,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4), 0 40px 100px rgba(0,0,0,.55) }
.deck .frame{ border-radius:10px; overflow:hidden; background:#0a0a0b; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6) }
.deck .note{ margin:10px 6px 2px; font:13px/1.5 var(--ui); color:var(--t3) }
.transport{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 8px 14px }
.loops{ display:flex; gap:6px; padding:4px; border-radius:12px; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3)); border:1px solid rgba(240,240,240,.12); box-shadow:inset 0 2px 6px rgba(0,0,0,.5) }
.loops button{ display:grid; gap:2px; min-width:82px; padding:8px 12px; border:0; border-radius:9px; background:transparent; color:var(--t2); text-align:left; transition:background .2s, color .2s, box-shadow .2s }
.loops button b{ font:400 16px/1 var(--ui); letter-spacing:0 } .loops button span{ font:400 11.5px/1 var(--ui); opacity:.8 }
.loops button[aria-pressed="true"]{ background:linear-gradient(180deg, #E79A6A, #C97643); color:var(--g); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px rgba(220,136,85,.35) }
.tbtn{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:12px; font:400 14.5px/1 var(--ui); color:var(--t); border:1px solid rgba(240,240,240,.2); background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 rgba(0,0,0,.35); transition:transform .2s, filter .2s }
.tbtn:hover{ filter:brightness(1.1) } .tbtn:active{ transform:translateY(1px) }
.tbtn.play{ width:52px; height:52px; padding:0; border-radius:50%; justify-content:center; background:linear-gradient(180deg, #f6f4ee, #d9d6cf); color:var(--g); border:1px solid rgba(0,0,0,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.4) }
.tbtn.play svg{ width:20px; height:20px; fill:currentColor; margin-left:3px } .tbtn.play.on svg{ margin:0 }
.tgroup{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.tseg{ display:grid; grid-template-columns:auto auto; padding:3px; gap:3px; border-radius:12px; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3)); border:1px solid rgba(240,240,240,.12); box-shadow:inset 0 2px 6px rgba(0,0,0,.5) }
.tseg button{ border:0; background:transparent; color:var(--t2); padding:9px 12px; border-radius:9px; font:400 13.5px/1 var(--ui) } .tseg button[aria-pressed="true"]{ background:var(--t); color:var(--g) }
.meter{ display:flex; gap:3px; align-items:flex-end; height:28px; justify-self:end } .meter i{ width:6px; height:100%; border-radius:2px; background:rgba(240,240,240,.1); position:relative; overflow:hidden }
.meter i::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:var(--l, 0%); background:linear-gradient(180deg, #ff5a3c, #DC8855 40%, #6fb98f 100%); transition:height .08s linear }
@media (max-width:900px){ .transport{ grid-template-columns:1fr; } .meter{ display:none } }
@media (max-width:700px){ .transport{ display:none } .deck .note{ display:none } .deck::after{ content:"Open this page on a desktop to play the rack."; display:block; margin:10px 6px 2px; font:13px/1.5 var(--ui); color:var(--t3) } }


/* the stage: the scene fills the screen, the unit centred, text above, transport under (js/stage.js sizes it) */
#hero.playhero{ min-height:0; padding:0; display:block; text-align:center; background:#050505 }
#hero.playhero::before{ display:none } #hero.playhero .wrap{ display:none }
.stage{ position:relative; display:block; width:100%; overflow:hidden; height:100vh; background:#050505 }
.stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:36%; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,.55) 40%, rgba(8,8,8,.96) 72%, #080808 84%, #080808 100%) }   /* solid for the last sixth: the picture is gone before the section starts (Jack 2026-09-24) */   /* Jack 2026-09-23: a dark fade so the edge into the next section is seamless */
.scene{ position:absolute; left:0; top:0; width:6400px; height:3000px; z-index:1 }
.scene .mfxp2{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; background:transparent }
.stage .top{ position:absolute; left:0; right:0; top:0; z-index:3; padding:62px 16px 0; text-align:center; pointer-events:none; display:grid; justify-items:center; gap:0 }
.stage .top > *{ pointer-events:auto }
.stage .eyebrow{ margin:0 0 12px; font:400 12.5px/1 var(--ui); letter-spacing:.02em; color:var(--t2); text-shadow:0 1px 12px rgba(0,0,0,.8) }
/* the wordmark is the title now (Jack 2026-09-23: the line under it went, the mark grows into its room) */
.stage .markline{ margin:0 0 22px; line-height:0 } .stage .mark{ width:auto; height:clamp(54px, 5.95vw, 88px); max-width:min(80vw, 480px); filter:drop-shadow(0 6px 24px rgba(0,0,0,.6)) }
.stage h1{ margin:18px 0 14px; font-size:clamp(19px, 1.6vw, 25px); line-height:1.05; max-width:none; text-shadow:0 2px 26px rgba(0,0,0,.7) }
.stage .strip{ margin:0 0 34px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; font:400 13px/1.4 var(--ui); color:var(--t2); text-shadow:0 1px 12px rgba(0,0,0,.8) }
.stage .strip span::before{ content:"+ "; color:var(--orange) }
.stage .ctas{ display:flex; gap:10px; justify-content:center; margin:0 }
.stage .transport{ position:absolute; z-index:3; top:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:max-content; max-width:96vw; margin:0; padding:0; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none }
.stage .transport .tbtn{ position:relative; isolation:isolate; overflow:hidden; height:46px; padding:0 22px; border-radius:999px; font:400 14px/1 var(--ui); color:var(--t); border:1px solid rgba(240,240,240,.14); background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.03) 100%), rgba(14,14,13,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.45), 0 14px 30px -10px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2); transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s }
.stage .transport .tbtn::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--grain); background-size:120px 120px; opacity:.07; mix-blend-mode:overlay }
.stage .transport .tbtn:hover{ border-color:rgba(240,240,240,.32); transform:translateY(-1px) } .stage .transport .tbtn:active{ transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5) }
.stage .transport .tbtn.play{ width:54px; height:54px; padding:0; justify-content:center; color:var(--g); border:1px solid rgba(0,0,0,.55); background:radial-gradient(circle at 50% 28%, #ffffff 0%, #f1efe8 38%, #cfccc3 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 5px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.5), 0 12px 26px -6px rgba(0,0,0,.6), 0 0 0 6px rgba(240,240,240,.05); -webkit-backdrop-filter:none; backdrop-filter:none }
.stage .transport .tbtn.play::before{ opacity:.05 }
.stage .transport .tbtn.play:hover{ background:radial-gradient(circle at 50% 28%, #ffffff 0%, #f6f4ee 40%, #d8d5cc 100%) } .stage .transport .tbtn.play:active{ box-shadow:inset 0 3px 6px rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.4) }
.stage .transport .tbtn.play svg{ width:20px; height:20px; fill:currentColor; margin-left:3px } .stage .transport .tbtn.play.on svg{ margin:0 }
.stage .loops{ display:flex; gap:2px; padding:3px; border-radius:999px; border:1px solid rgba(240,240,240,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(14,14,13,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.45), 0 14px 30px -10px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2) }
.stage .loops button{ display:block; min-width:0; height:38px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--t2); font:400 14px/1 var(--ui); letter-spacing:.01em; text-align:center; transition:background .2s, color .2s, box-shadow .2s }
.stage .loops button:hover{ color:var(--t) } .stage .loops button[aria-pressed="true"]{ color:var(--g); background:linear-gradient(180deg, #ffffff, #dedbd3); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.4) }
/* Dry / MOD-FX, back under the unit (Jack 2026-09-24: "the button to switch between dry and mod effects is just gone"): the loops' pill */
.stage .transport .tseg{ display:flex; gap:2px; padding:3px; border-radius:999px; border:1px solid rgba(240,240,240,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(14,14,13,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.45), 0 14px 30px -10px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2) }
.stage .transport .tseg button{ display:block; height:38px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--t2); font:400 14px/1 var(--ui); letter-spacing:.01em; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s }
.stage .transport .tseg button:hover{ color:var(--t) } .stage .transport .tseg button[aria-pressed="true"]{ color:var(--g); background:linear-gradient(180deg, #ffffff, #dedbd3); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.4) }
.stage.is-phone.phone-audio .desk-thru{ display:none !important }   /* only once js/phonehero.js has put its own switch in: a page opened wide and then narrowed keeps the desktop's (Jack 2026-09-25: "the dry/wet slider is missing from the mobile version") */
.stage .transport .tseg button{ white-space:nowrap }   /* "MOD-FX" never breaks onto two lines */
@media (min-width:701px) and (max-width:1000px){   /* tablets and phones on their side: the transport fits the screen instead of running off both edges */
  .stage .transport{ gap:8px }
  .stage .transport .tbtn.play{ width:48px; height:48px }
  .stage .loops button{ padding:0 11px; font-size:13px }
  .stage .transport .preset span{ min-width:0; width:clamp(130px, 20vw, 200px); font-size:13px }
  .stage .transport .tseg button{ padding:0 12px; font-size:13px }
}
/* the rack is a picture of the preset that plays (Jack 2026-09-24: "more of a visualiser"): its controls do not move */
.mfxp2[data-visual] .hit, .mfxp2[data-visual] canvas.live.glass{ pointer-events:none !important; cursor:default !important }   /* a phone has its own (js/phonehero.js) */
.stage .tcap{ position:absolute; z-index:3; left:50%; transform:translateX(-50%); margin:0; font:11.5px/1.4 var(--ui); color:rgba(240,240,240,.45); white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.8) }
@media (max-width:700px){ .stage .transport{ display:none } .stage .top{ padding-top:70px } }

/* the transport's preset stepper (the plugin's header band, folded into the bar) */
.tpreset{ display:flex; align-items:center; gap:4px }
.tname{ height:44px; min-width:170px; padding:0 14px; border-radius:10px; background:#050605; box-shadow:inset 0 2px 6px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; gap:.7em; font:400 13px/1 var(--ui); letter-spacing:.06em; color:#5ad07a; white-space:nowrap }
.tname span{ color:#6b746d; font-size:11px } .tname b{ font-weight:400; text-shadow:0 0 8px rgba(90,208,122,.55) }
.tchev{ width:36px; padding:0 !important; justify-content:center } .tchev svg{ width:8px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }

.specsec .specs{ margin-top:8px }

/* ==== THE CHECKOUT: a direct port of the 2.0 staging site's section 10 (Jack, 2026-09-22: "a direct port from 8420").
   Its markup, its Helvetica stack, its colours, its cards, buttons and effects, verbatim, scoped to #cta; the old site's
   .btn classes are cobtn here so this site's own button rules cannot touch them. ==== */
#cta{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; --accent:#f4f2ec; --ink:#e8e6e0; --ink-dim:#8a8781; --ink-faint:#5c5a56; --black:#0a0a0b; --accent-blue:#90b6df; --font-btn:"Helvetica Neue",Helvetica,Arial,sans-serif; --font-btn-weight:500; --font-btn-track:-.005em; color:var(--ink); -webkit-font-smoothing:antialiased }
#cta *, #cta *::before, #cta *::after{ box-sizing:border-box }
#cta h2, #cta h3{ font-family:inherit; margin-top:0; letter-spacing:normal; text-transform:none }
#cta a{ color:inherit }
#cta p, #cta ul{ font-family:inherit }
#cta .cobtn{ --btn-y:0px; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border-radius:8px; font-size:14.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; text-decoration:none; cursor:pointer; border:1px solid transparent; transform:translateY(var(--btn-y)); transition:transform .18s cubic-bezier(.16,1,.3,1), background-color .18s ease, border-color .18s ease, color .18s ease; font-family:var(--font-btn); font-weight:var(--font-btn-weight); letter-spacing:var(--font-btn-track); }
#cta .cobtn-primary{ background:var(--accent); color:#0a0a0b; border-color:var(--accent) }
#cta .cobtn-primary:hover{ background:#ffffff; border-color:#ffffff }
#cta .lm{ position:relative; display:inline-block; perspective:1000px; perspective-origin:50% 50%; }
#cta .lm-stage{ position:relative; transform-style:preserve-3d; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; min-width:196px; /* hero CTA keeps its original size */ }
#cta .lm--sm .lm-stage{ min-height:44px; padding:0 20px; min-width:0; }
#cta .lm-shader, #cta .lm-face{ position:absolute; inset:0; border-radius:100px; }
#cta .lm-shader{ transform:translateZ(0); overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 18px 12px rgba(0,0,0,.10), 0 6px 6px rgba(0,0,0,.14); transition:box-shadow .15s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.34,1.56,.64,1); }
#cta .lm-shader canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; border-radius:100px; }
#cta .lm-face{ inset:2px; border-radius:100px; transform:translateZ(10px); background:linear-gradient(180deg,#1b1b1d 0%,#0a0a0b 100%); transition:box-shadow .15s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.34,1.56,.64,1); }
#cta .lm-label{ position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center; gap:9px; transform:translateZ(20px); pointer-events:none; white-space:nowrap; font-size:14.5px; font-weight:600; letter-spacing:.01em; color:var(--ink); text-shadow:0 1px 2px rgba(0,0,0,.6); }
#cta .lm--sm .lm-label{ font-size:12.5px; letter-spacing:.02em; }
#cta .lm-label svg{ width:14px; height:14px; flex:none; }
#cta .lm-hit{ position:absolute; inset:0; z-index:4; transform:translateZ(25px); background:transparent; border:0; padding:0; cursor:pointer; border-radius:100px; overflow:hidden; -webkit-tap-highlight-color:transparent; }
#cta .lm-hit:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
#cta .lm[data-pressed="1"] .lm-shader{ transform:translateZ(0) translateY(1px) scale(.985) }
#cta .lm[data-pressed="1"] .lm-face{ transform:translateZ(10px) translateY(1px) scale(.985); box-shadow:inset 0 2px 4px rgba(0,0,0,.45) }
#cta .lm-ripple{ position:absolute; width:20px; height:20px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 70%); animation:lmRipple .6s ease-out forwards; }
@media (prefers-reduced-motion:reduce){
  #cta .lm-ripple{ display:none }
}
#cta .cobtn-ghost:hover{ border-color:rgba(232,230,224,.62); background:rgba(10,10,11,.52) }
#cta .cobtn:active{ --btn-y:1px }
#cta .cobtn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
@media (prefers-reduced-transparency:reduce){
  #cta .cobtn-ghost{ background:#141416; backdrop-filter:none; -webkit-backdrop-filter:none }
}
@media (max-width:560px){
  #cta .cobtn{ width:100% }
}
#cta .btn-mini{ display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 18px; border-radius:7px; cursor:pointer; /* touch min */ font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink); background:rgba(244,242,236,.06); border:1px solid rgba(244,242,236,.20); transition:background-color .16s ease, border-color .16s ease, transform .16s ease; font-family:var(--font-btn); font-weight:var(--font-btn-weight); letter-spacing:var(--font-btn-track); }
#cta .btn-mini:hover{ background:rgba(244,242,236,.11); border-color:rgba(244,242,236,.38) }
#cta .btn-mini:active{ transform:translateY(1px) }
#cta .btn-mini:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
#cta .btn-mini svg{ width:14px; height:14px; flex:none }
#cta{ position:relative; padding:clamp(84px,12vh,144px) clamp(20px,5vw,64px); }
#cta + .sec{ border-top:1px solid rgba(244,242,236,.07); }
#cta .sec-tight{ padding-top:clamp(52px,7vh,80px); padding-bottom:clamp(52px,7vh,80px) }
#cta .sec-inner{ max-width:1180px; margin-inline:auto; }
#cta .sec-no{ font-size:10px; font-weight:700; letter-spacing:.32em; color:var(--accent); margin-bottom:14px; }
#cta h2{ font-size:clamp(28px,4.2vw,52px); font-weight:800; letter-spacing:-.024em; line-height:1.04; margin-bottom:14px; }
#cta h2 .thin{ font-weight:300; color:var(--ink-dim); }
#cta .lede{ font-size:clamp(14px,1.2vw,16.5px); color:var(--ink-dim); line-height:1.65; max-width:62ch; }
#cta .sec-head{ margin-bottom:clamp(36px,5vw,60px); }
#cta{ text-align:center; background:#020202 }
#cta .sec-inner{ max-width:760px }
#cta h2{ margin-bottom:12px }
#cta .plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); align-items:stretch; max-width:820px; text-align:left; /* Top margin clears the flag, which straddles the card's top edge, and keeps the pair off the countdown above it. The art no longer carries a negative bottom margin to fight (see .cta-shot--ui), so this is just the gap it wants. */ margin:clamp(30px,4vh,46px) auto clamp(22px,3vh,34px); }
#cta .plan{ position:relative; display:flex; flex-direction:column; padding:clamp(18px,2vw,26px); border:1px solid rgba(244,242,236,.14); border-radius:14px; background:rgba(244,242,236,.03); }
#cta .plan--best{ border-color:rgba(144,182,223,.60); background:rgba(144,182,223,.055); box-shadow:0 0 0 1px rgba(144,182,223,.22), 0 0 30px -8px rgba(144,182,223,.40); }
#cta .plan-flag{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); padding:5px 12px; border-radius:999px; white-space:nowrap; /* phosphor, so the badge reads as the top of the green stroke it sits on rather than a white sticker landing on a green card. Ink stays near black -- phosphor is a light green and carries dark type well. */ background:var(--accent-blue); color:#0a0a0b; box-shadow:0 0 18px -4px rgba(144,182,223,.75); font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
#cta .plan-name{ margin:0 0 10px; font-size:clamp(15px,1.5vw,19px); font-weight:700; letter-spacing:-.01em; }
#cta .plan-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px }
#cta .plan-price b{ font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-.02em }
#cta .plan-price s{ font-size:clamp(13px,1.2vw,16px); color:var(--ink-faint) }
#cta .plan--trial{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; gap:clamp(14px,2vw,28px); padding:clamp(14px,1.5vw,20px) clamp(18px,2vw,26px); }
#cta .plan--trial .plan-name{ margin:0 0 4px }
#cta .plan--trial .plan-trial-copy{ flex:1 1 auto; min-width:0 }
#cta .plan-trial-sub{ margin:0; font-size:clamp(12.5px,1.05vw,14.5px); line-height:1.45; color:var(--ink-dim); }
#cta .plan.plan--trial > .plan-btn{ margin-top:0; width:auto; flex:0 0 auto; min-width:clamp(150px,16vw,190px); min-height:46px; }
@media (max-width:640px){
  #cta .plan--trial{ flex-direction:column; align-items:stretch; text-align:left }
  #cta .plan.plan--trial > .plan-btn{ width:100%; min-width:0 }
}
#cta .plan-list{ list-style:none; padding:0; margin:0 0 clamp(14px,1.9vh,20px); display:grid; gap:5px; font-size:clamp(11.5px,.92vw,13px); line-height:1.45; color:var(--ink-dim); }
#cta .plan-list li{ position:relative; padding-left:16px }
#cta .plan-list li::before{ content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; }
#cta .plan > .lm, #cta .plan > .plan-btn{ margin-top:auto; width:100% }
#cta .plan-btn{ text-align:center }
@media (min-width:721px) and (hover:hover) and (pointer:fine){
  #cta .plan, #cta .plans .crate{ --sp-hue:211; /* --accent-blue #90b6df, locked */ --sp-size:300px; /* spotlight diameter */ --sp-ring:1.5px; /* lit border thickness */ --sp-x:50%; --sp-y:-60%; /* parked above the card until the pointer arrives */ --sp-on:0; /* proximity, 0..1, driven from JS */ /* isolation makes .plan the stacking context, which is what keeps the z-index:-1 bloom below the card's text but still above its own background -- and stops it escaping behind the section. */ isolation:isolate; background-image:radial-gradient( var(--sp-size) var(--sp-size) at var(--sp-x) var(--sp-y), hsl(var(--sp-hue) 70% 62% / calc(.11 * var(--sp-on))), transparent 70%); }
  #cta .plan::before, #cta .plans .crate::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; padding:var(--sp-ring); background:radial-gradient( calc(var(--sp-size) * .55) calc(var(--sp-size) * .55) at var(--sp-x) var(--sp-y), hsl(0 0% 100% / calc(.90 * var(--sp-on))) 0%, hsl(var(--sp-hue) 92% 58% / calc(.95 * var(--sp-on))) 30%, transparent 72%); -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude; }
  #cta .plan::after, #cta .plans .crate::after{ content:''; position:absolute; inset:-16px; z-index:-1; pointer-events:none; border-radius:30px; /* the card's 14 plus the 16 inset */ background:radial-gradient( calc(var(--sp-size) * .5) calc(var(--sp-size) * .5) at calc(var(--sp-x) + 16px) calc(var(--sp-y) + 16px), hsl(var(--sp-hue) 92% 55% / calc(.5 * var(--sp-on))), transparent 70%); filter:blur(16px); }
}
@media (max-width:720px){
  #cta .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; gap:10px }
  #cta .plan{ padding:14px 12px }
  #cta .plan-name{ font-size:13.5px; margin-bottom:8px }
  #cta .plan-price b{ font-size:34px; letter-spacing:-.03em }
  #cta .plan-price s{ font-size:12px }
  #cta .plan-list{ font-size:11px; gap:4px; line-height:1.4 }
  #cta .plan-list li{ padding-left:13px }
  #cta .plan-flag{ font-size:8px; letter-spacing:.12em; padding:4px 8px }
  #cta .plan .cobtn{ font-size:12.5px; padding:0 10px; min-height:44px }
  #cta .plan > .lm, #cta .plan .lm-stage, #cta .plan .lm-hit{ width:100%; min-width:0 }
  #cta .plan .lm-label{ font-size:11.5px; letter-spacing:0 }
  #cta .plan-flag{ letter-spacing:.16em }
}
#cta{ scroll-margin-top:75px }
@media (max-width:820px){
  #cta h2{ font-size:clamp(24px,6.2vw,34px) }
  #cta .lede{ font-size:12.5px }
  #cta .sec-no{ font-size:9px }
}
#cta .plans:has(.crate){ max-width:1180px }
#cta .crate{ grid-column:1 / -1; position:relative; border:1px solid rgba(244,242,236,.16); border-radius:10px; background:rgba(244,242,236,.02); font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; font-size:12.5px; color:var(--ink) }
#cta .crate-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
#cta .crate-stack{ position:relative; padding:clamp(28px,4vw,56px) clamp(20px,3vw,44px) clamp(24px,3vw,40px); border-right:1px solid rgba(244,242,236,.16); display:flex; flex-direction:column; align-items:center; outline:none }
#cta .crate-card{ position:relative; margin:0; width:min(58%,300px); background:#0d0d0f; border:1px solid rgba(244,242,236,.7); border-radius:6px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.45) }
#cta .crate-card img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; background:#111 }
#cta .crate-card--main img{ aspect-ratio:1/1; object-position:30% 50% }
#cta .crate-card figcaption{ display:flex; justify-content:space-between; gap:10px; padding:11px 13px; background:var(--accent); color:#0a0a0b; font-size:12px }
#cta .crate-card figcaption s, #cta .crate-lines s, #cta .crate-sep s, #cta .crate-was s{ opacity:.55; margin-right:6px }
#cta .crate-no{ position:absolute; left:10px; top:10px; z-index:1; font-style:normal; font-size:11px; padding:5px 8px; border-radius:4px; background:rgba(10,10,11,.85); border:1px solid rgba(244,242,236,.5) }
#cta .crate-plus{ display:flex; align-items:center; gap:18px; width:min(70%,380px); margin:26px 0 22px; color:var(--ink-dim) }
#cta .crate-plus i{ flex:1; height:1px; background:rgba(244,242,236,.22) }
#cta .crate-plus b{ font-weight:400; font-size:20px }
#cta .crate-fan{ position:relative; width:100%; height:clamp(200px,20vw,260px) }
#cta .crate-fan .crate-card{ position:absolute; left:50%; top:0; width:min(30%,170px); border-color:rgba(244,242,236,.25); transform:translate(calc(-50% + var(--x)*.42), var(--y)) rotate(var(--r)); transition:transform .5s cubic-bezier(.2,.8,.2,1) }
#cta .crate-fan .crate-card figcaption{ flex-direction:column; gap:3px; background:#1b1b1e; color:var(--ink); font-size:11px }
#cta .crate-stack:hover .crate-fan .crate-card, #cta .crate-stack:focus-visible .crate-fan .crate-card{ transform:translate(calc(-50% + var(--x)), 0) rotate(0deg) }
#cta .crate-hint{ margin-top:18px; padding:10px 18px; border:1px solid rgba(244,242,236,.28); border-radius:999px; color:var(--ink-dim); font-size:11.5px; letter-spacing:.2em }
#cta .crate-bill{ padding:clamp(28px,4vw,56px) clamp(20px,3.4vw,52px) clamp(24px,3vw,40px); display:flex; flex-direction:column }
#cta .crate-eyebrow, #cta .crate-today{ color:var(--ink-dim); letter-spacing:.24em; font-size:12px }
#cta .crate-lines{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:22px }
#cta .crate-lines li, #cta .crate-sep{ display:flex; align-items:baseline; gap:12px; color:var(--ink-dim) }
#cta .crate-lines li i, #cta .crate-sep i{ flex:1; border-bottom:1px dotted rgba(244,242,236,.28); transform:translateY(-4px) }
#cta .crate-lines li.is-main{ color:var(--ink) }
#cta .crate-lines em{ font-style:normal; margin-left:8px; padding:3px 7px; border-radius:3px; background:#e0524a; color:#0a0a0b; font-size:11px; letter-spacing:.06em }
#cta .crate-sep{ margin-top:22px; padding-top:22px; border-top:1px solid rgba(244,242,236,.16); color:var(--ink) }
#cta .crate-note{ margin:20px 0 0; padding-bottom:26px; border-bottom:1px solid rgba(244,242,236,.55); color:var(--ink-dim); font-size:12px; line-height:1.7; letter-spacing:.14em }
#cta .crate-today{ margin-top:28px }
#cta .crate-was{ margin-top:12px; color:var(--ink-dim); font-size:15px }
#cta .crate-price{ font:800 clamp(56px,8vw,112px)/1 var(--font-btn, sans-serif); letter-spacing:-.03em; text-transform:none; margin:30px 0 22px; color:var(--accent) }   /* the note's rule above it, nothing between (Jack 2026-09-24: simpler checkout) */
#cta .crate-btn{ width:100%; text-align:center }
#cta .crate .lm{ width:100% }
#cta .crate-timer{ margin-top:18px; display:flex; justify-content:center; align-items:baseline; gap:14px; color:var(--ink-dim); letter-spacing:.2em; font-size:11.5px }
#cta .crate-timer b{ font:600 clamp(18px,1.8vw,24px)/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.06em; color:var(--ink); font-variant-numeric:tabular-nums }
#cta .crate-alt{ margin-top:22px; text-align:center; color:var(--ink-dim); letter-spacing:.2em; font-size:12px; text-decoration:none }
#cta .crate-alt:hover{ color:var(--ink) }
@media (max-width:860px){
  #cta .crate-body{ grid-template-columns:1fr }
  #cta .crate-stack{ border-right:0; border-bottom:1px solid rgba(244,242,236,.16) }
  #cta .crate-hint{ display:none }
  #cta .crate-fan .crate-card{ transform:translate(calc(-50% + var(--x)), 0) rotate(0deg) }
}
@media (prefers-reduced-motion:reduce){
  #cta .crate-fan .crate-card{ transition:none }
}

/* Jack (2026-09-22): the plugin's lighting slightly warmer to sit in the AI room. Same matrix as the scene's baked
   plugin layer (scripts/hero_wide_bg.py PLUG_WARM); the cables and the phosphor screens are left alone. */
.mfxp2 .mfxplate .l, .mfxp2 .mfxplate .shadows > * { filter: url(#plugwarm); }

/* 02 · the modules: the 8420 rack row in this build's look (dark tray, grain, the display face; Jack 2026-09-22) */
.modules{ --mh:clamp(270px, 40vh, 440px); --lift:1.14 }   /* Jack 2026-09-23: bigger modules */
.modules .head{ margin-bottom:18px }
.modrow{ display:flex; gap:10px; align-items:flex-end; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; outline:0;
  --pad:calc(var(--mh) * .9 * (var(--lift) - 1) + 10px); padding:calc(var(--mh) * (var(--lift) - 1) + 40px) 0 18px; margin-inline:calc(var(--pad) * -1);   /* room above for the lifted tile AND the Chorus sticker riding above it */
  --fade:clamp(40px, 7vw, 120px); --fl:var(--fade); --fr:var(--fade);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%) }
.modrow::-webkit-scrollbar{ display:none; width:0; height:0 }
.modrow::before, .modrow::after{ content:''; flex:1 0 var(--pad) }
.modrow.at-start{ --fl:0px } .modrow.at-end{ --fr:0px }
.modtile{ position:relative; flex:0 0 auto; background:none; border:0; padding:0; cursor:pointer; display:block; transform-origin:bottom center; transition:transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease; filter:brightness(.68) }
.modtile img{ display:block; height:var(--mh); width:auto; border-radius:3px; box-shadow:0 22px 44px rgba(0,0,0,.55) }
.modtile:hover{ filter:brightness(.88) }
.modtile[aria-selected="true"]{ transform:scale(var(--lift)); filter:brightness(1); position:relative; z-index:2 }
.modules .rail{ height:1px; background:var(--line) }
.moddetail{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:24px 56px; padding-top:28px; border-top:1px solid var(--line); align-items:start }
.moddetail .num{ display:block; margin-bottom:10px }
.moddetail h3{ font-family:var(--display); font-size:clamp(26px, 2.8vw, 40px); line-height:1.04; letter-spacing:-.035em; margin:0 0 12px } .moddetail h3 span{ color:var(--t2) }
.moddetail p{ margin:0; color:var(--t2); font-size:16px; max-width:48ch }
.modpoints{ list-style:none; margin:0; padding:0 }
.modpoints li{ display:grid; grid-template-columns:minmax(120px, 30%) 1fr; gap:14px; border-top:1px solid var(--line2); padding:10px 0; font-size:14.5px; color:var(--t2) }
.modpoints li:first-child{ border-top:0; padding-top:0 }
.modpoints li b{ font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--t); padding-top:2px }
@media (max-width:820px){ .moddetail{ grid-template-columns:1fr; gap:18px } .modules{ --mh:clamp(190px, 30vh, 260px) } }

/* 03 · the walkthrough: the video small, the facts beside it (Jack 2026-09-22) */
/* Jack 2026-09-23: the video in the centre, a little larger, the three facts in a row underneath */
.unitgrid{ display:flex; flex-direction:column; align-items:center; gap:36px }
.unitgrid .vid{ order:0; width:min(100%, 1000px) }
.unitgrid .facts{ order:1; width:min(100%, 1000px); grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; margin:0 }
.vid{ position:relative; display:block; width:100%; aspect-ratio:16/9; margin:0; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#000; cursor:pointer; box-shadow:0 34px 90px rgba(0,0,0,.55) }
.vid img{ display:block; width:100%; height:100%; object-fit:cover; opacity:.88; transition:opacity .25s ease, transform .6s ease }
.vid:hover img{ opacity:1; transform:scale(1.02) }
.vid .vplay{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.vid .vplay span{ width:76px; height:76px; border-radius:50%; display:grid; place-items:center; color:#111; background:radial-gradient(circle at 50% 28%, #ffffff 0%, #f1efe8 38%, #cfccc3 100%); box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8); transition:transform .2s ease } .vid .vplay svg{ margin-left:4px }
.vid:hover .vplay span{ transform:scale(1.06) }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
@media (max-width:820px){ .unitgrid{ gap:26px } .unitgrid .facts{ grid-template-columns:1fr } }

/* phones: the modules row runs edge to edge instead of hanging past the page (its lift clearance was 22 px of sideways scroll) */
@media (max-width:820px){ .modrow{ --pad:var(--gutter); margin-inline:calc(var(--gutter) * -1) } }

/* the modules band's ground (Jack 2026-09-23: "fix the background so it fills the entire section"): the shared grain
   sheet keeps its cover but loses the radial fade that left the band's edges bare on wide screens; a soft lamp-like
   lift in the middle instead, and a faint vignette at the very edges so it still reads as lit */
.modules.tex-grain::before{ -webkit-mask-image:none; mask-image:none; opacity:.4 }
.modules::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 62% 70% at 50% 42%, rgba(255,250,236,.06), rgba(255,250,236,0) 70%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.22)) }

/* the preset stepper in the transport (Jack 2026-09-23: the plugin's presets instead of Randomise) */
.stage .transport .preset{ display:flex; align-items:center; height:46px; padding:0 6px; border-radius:999px; border:1px solid rgba(240,240,240,.14); background:linear-gradient(180deg, rgba(40,40,38,.92), rgba(18,18,17,.96)); box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) }
.stage .transport .preset button{ width:36px; height:36px; border-radius:50%; border:0; background:none; color:var(--t); font:400 24px/1 var(--ui); cursor:pointer; opacity:.85 } .stage .transport .preset button:hover{ opacity:1; background:rgba(255,255,255,.08) }
.stage .transport .preset span{ min-width:240px; padding:0 6px; text-align:center; font:400 14px/1 var(--ui); color:var(--t); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* the modules band meets the hero's black foot: no seam line, its ground rising out of the same black */
#hero.playhero + .modules{ border-top:0 }
#hero.playhero + .modules::after{ background:radial-gradient(ellipse 62% 70% at 50% 46%, rgba(255,250,236,.06), rgba(255,250,236,0) 70%), linear-gradient(180deg, #080808 0%, rgba(8,8,8,.85) 6%, rgba(8,8,8,0) 30%, rgba(0,0,0,0) 78%, rgba(0,0,0,.22) 100%) }

/* the formats pill in the hero's top right (Jack 2026-09-23) */
.stage .formats{ position:absolute; z-index:3; top:70px; right:clamp(18px, 3vw, 44px); padding:0 22px; height:44px; display:flex; align-items:center; border:1.5px solid rgba(240,240,240,.62); border-radius:999px; font:400 15px/1 var(--ui); letter-spacing:.06em; color:#f0f0f0; background:rgba(8,8,8,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); text-shadow:0 1px 8px rgba(0,0,0,.6); pointer-events:none }
@media (max-width:700px){ .stage .formats{ top:auto; bottom:14px; right:14px; height:36px; padding:0 16px; font-size:13px } }

/* 02 the modules + 03 the walkthrough: solid black, one with the hero's fade, with a whisper of texture (Jack 2026-09-23:
   "a solid black background so it blends with the fade on the hero but with some subtle texture so it looks more premium") */
#modules, #unit, #wildsec{ background:#080808; border-top:0; border-bottom:0 } #stream{ border-top:0; border-bottom:0 }
#modules.tex-grain::before, #unit.tex-grain::before, #wildsec.tex-grain::before, #wildsec.ground::before, #stream.tex-grain::before{ display:none }   /* the grain sheet has its own light left side: on a wide screen that read as a divider */
#hero.playhero + .modules::after, #modules::after, #unit::after, #features::after, #wildsec::after, #stream::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255,250,236,.05), rgba(255,250,236,0) 70%), var(--grain);
  background-size:auto, 140px 140px; opacity:.11; mix-blend-mode:screen }   /* on black only added light shows: a fine grain and a faint centre lift, screened in */
#modules .rail{ background:rgba(255,255,255,.06) }
#modules .moddetail{ border-top-color:rgba(255,255,255,.08) } #modules .modpoints li{ border-top-color:rgba(255,255,255,.06) }
#unit .facts div{ border-top-color:rgba(255,255,255,.08) }

/* the module's demo player under its copy (the sound rows' panel) */
.moddetail .modplayer{ grid-column:1 / -1; margin-top:6px }
.moddetail .modplayer .ab{ width:100% }

/* 04 after the video: patching and the modulators, on the same black as 02 and 03 */
#features{ position:relative; isolation:isolate }
#features .feat{ border-top:0 !important }   /* no rules between the modulator sources (Jack 2026-09-24) */

/* the modules section: the demo player pinned to the head's right, in the empty space beside the heading, the waveform
   above its controls; it starts in the section's top padding and ends before the row, so the section keeps its height
   (Jack 2026-09-23: "shorten the width... pin it to the right... without increasing the section height") */
.modules .head{ position:relative; max-width:none; margin-bottom:22px }
.modules .head .modplayer{ position:absolute; right:0; top:-16px; width:min(46%, 520px); margin:0 }
.modules .head .modplayer .ab{ grid-template-columns:auto auto 1fr; grid-template-rows:auto auto; gap:8px 12px; align-items:center }
.modules .head .modplayer .ab-wave{ grid-column:1 / -1; grid-row:1; height:46px; order:0 }
.modules .head .modplayer .ab-plot{ inset:8px 12px }
.modules .head .modplayer .ab-base, .modules .head .modplayer .ab-fill{ stroke-width:5px }
.modules .head .modplayer .ab-play{ grid-row:2; grid-column:1; width:34px; height:34px }
.modules .head .modplayer .ab-seg{ grid-row:2; grid-column:2; padding:2px } .modules .head .modplayer .ab-seg button{ padding:6px 10px }
.modules .head .modplayer .ab-time{ grid-row:2; grid-column:3; text-align:left; min-width:0 }
@media (max-width:900px){ .modules .head .modplayer{ position:static; width:100%; margin-top:18px } }
@media (max-width:640px){ .modules .head .modplayer .ab-time{ display:inline } }
/* 05 · the presets: the 2.0 plugin's preset browser. Every rect is the browser's own (PresetBrowser::resized at 2894x1920, printed by
   scripts/pbshot), as % of the art; every font is cqw against the same width, sized as the plugin sizes it (px / 2894 * 100). */
@font-face{ font-family:'Signal Sans'; src:url('../media/SignalSans.woff2') format('woff2'), url('../media/SignalSans.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap }
.presets .head{ text-align:center; max-width:none } .presets .head h2{ margin-inline:auto } .presets .head h2 small{ font-size:.86em; font-weight:inherit }   /* the numerals sit larger than the letters; brought level (Jack 2026-09-24) */ .presets .lede{ margin:10px auto 0; color:var(--t2); max-width:66ch }   /* centred, the lede two lines (Jack 2026-09-24) */
.pbwrap{ width:min(100%, 960px); margin:0 auto; container-type:inline-size; border-radius:8px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.55) }
.pbwrap{ aspect-ratio:2894/1600; background:#050505 }   /* the browser ends under its Export / Import row: the box is the art's top 1600 px, the foot below is hidden by the box's own overflow (Jack 2026-09-24) */
.pbwrap .pb{ position:relative }
.pbwrap .pb-ver{ display:none }
.pb-cat, .pb-item{ transition:background .15s }
.pb{ --off:240,240,240; --sel-fill:rgba(255,255,255,.08); --sel-bar:#5ad07a; --sel-text:#f0efea; --green:#5ad07a;   /* Theme offWhite, kSelFill 0x14ffffff, kSelBar the house green (2026-09-23), kSelText */
     position:relative; container-type:inline-size; font-family:var(--ui); text-align:left; width:100%; margin:0 }   /* Monoblock, as the rest of the page (Jack 2026-09-24: not Signal Sans) */
.pb-art{ display:block; width:100%; height:auto; aspect-ratio:2894/1920; user-select:none; -webkit-user-drag:none }
.pb button{ font-family:inherit }
/* CATEGORY: the list body (43,137 234x1520), rows 96 tall, the name in caps at 22 px from 24 in, the picked row filled with a 4 px bar */
.pb-cats{ position:absolute; left:1.486%; top:7.135%; width:8.086%; height:79.17%; display:flex; flex-direction:column }
.pb-cat{ flex:none; height:4.4cqw; display:flex; align-items:center; min-width:0; cursor:pointer; border:0; background:transparent; padding:0 .55cqw 0 .829cqw; text-align:left; position:relative; font-size:.66cqw; letter-spacing:.06em; text-transform:uppercase; color:rgba(var(--off),.60) }
.pb-cat.empty{ color:rgba(var(--off),.34) }
.pb-cat:hover{ background:rgba(255,255,255,.05); color:rgba(var(--off),.92) }
.pb-cat:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px }
.pb-cat[aria-pressed="true"]{ background:var(--sel-fill); color:var(--sel-text) }
.pb-cat[aria-pressed="true"]::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:.138cqw; background:var(--sel-bar) }
.pb-cat[aria-pressed="true"]::after{ content:""; position:absolute; left:.138cqw; top:0; bottom:0; width:.9cqw; background:linear-gradient(90deg, rgba(90,208,122,.42), rgba(90,208,122,0)) }
/* NAME: the list body (309,137 658x1740), rows 64, the name at 38 px from 24 in, a 44 px gutter for the heart */
.pb-list, .pb-auth{ position:absolute; top:7.135%; height:90.625%; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(var(--off),.18) transparent }
.pb-list{ left:10.677%; width:22.737% }
.pb-auth{ left:34.52%; width:6.703%; overflow-y:hidden; pointer-events:none }
.pb-item{ flex:none; height:3.5cqw; display:flex; align-items:center; min-width:0; border:0; background:transparent; cursor:pointer; text-align:left; padding:0 .3cqw 0 .829cqw; font-size:1.06cqw; letter-spacing:.01em; color:rgba(var(--off),.60) }
.pb-item .nm{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.pb-item:hover{ background:rgba(255,255,255,.05); color:rgba(var(--off),.92) }
.pb-item:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px }
.pb-item[aria-pressed="true"]{ background:var(--sel-fill); color:var(--green) }   /* the plugin: the loaded preset reads green */
.pb-item .hrt{ margin-left:auto; flex:none; width:1.1cqw; height:1.1cqw; margin-right:.2cqw; color:rgba(var(--off),.26) }
.pb-item .hrt.fav{ color:var(--orange) }
.pb-item .hrt svg{ display:block; width:100%; height:100% }
.pb-empty{ padding:1cqw .9cqw; font-size:.9cqw; line-height:1.6; color:rgba(var(--off),.45) }
/* AUTHOR: rows level with the names, 26 px, faded until its row is picked */
.pb-auth-row{ flex:none; height:3.5cqw; display:flex; align-items:center; padding-left:.3cqw; font-size:.72cqw; color:rgba(var(--off),.36); overflow:hidden; white-space:nowrap }
.pb-auth-row.on{ color:rgba(var(--off),.8) }
/* PREVIEW: the name in Palace Display 50 at (1248,154), the category at 22 under it, the rack shot at (1248,278 1580x1048) */
.pb-name{ position:absolute; left:43.124%; top:8.021%; width:54.596%; height:3.333%; font-family:var(--display); font-size:1.728cqw; line-height:1.15; letter-spacing:-.01em; color:rgba(var(--off),1); overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.pb-sub{ position:absolute; left:43.124%; top:11.354%; width:54.596%; font-size:.7cqw; color:rgba(var(--off),.42) }
.pb-shot{ position:absolute; left:43.124%; top:14.479%; width:54.596%; height:54.583%; overflow:hidden; background:#050505 }
.pb-shot img{ width:100%; height:100%; object-fit:cover; display:block }
.pb-shot .pb-cap{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:1.05cqw; letter-spacing:.04em; color:rgba(var(--off),.45) }
.pb-shot img[hidden]{ display:none }
.pb-shot .pb-cap:empty{ display:none }
/* VERSION: the number (62,1728 196x42) and the line under it (62,1776 196x34), over the plate the plugin drew */
.pb-ver{ position:absolute; left:2.142%; top:90%; width:6.773%; pointer-events:none }
.pb-ver b{ display:block; height:2.1875cqw; font-weight:400; font-size:1.24cqw; line-height:1.15; color:rgba(var(--off),.95) }
.pb-ver i{ display:block; margin-top:.35cqw; font-style:normal; font-size:.62cqw; line-height:1.2; color:var(--green) }
@media (max-width:700px){ .pb-cat{ font-size:1.05cqw } .pb-item{ font-size:1.6cqw } .pb-auth-row{ font-size:1.1cqw } }

/* section 04 (Jack 2026-09-23: "a really nice vintage dark texture"): a worn charcoal tile (media/tex-vintage.webp, seamless), folds of an
   old sheet laid over it soft-light, a vignette, the grain screened on top; the modules breathe and their screens loop */
#wildsec{ position:relative; isolation:isolate; background:#080808 !important; border:0; --ground-op:0 }
#features{ --fade:clamp(160px, 22vh, 260px); background:linear-gradient(180deg, #080808 0, rgba(8,8,8,.82) 30%, rgba(8,8,8,.4) 62%, rgba(8,8,8,0) 100%) top / 100% var(--fade) no-repeat, linear-gradient(0deg, #1a1a19 0, rgba(26,26,25,.82) 30%, rgba(26,26,25,.4) 62%, rgba(26,26,25,0) 100%) bottom / 100% var(--fade) no-repeat, radial-gradient(90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.5) 100%) no-repeat, url('../media/tex-vintage.webp') center / 1024px 1024px repeat #0c0c0b }   /* the texture fades in from the section above and out into the one below (Jack 2026-09-24) */
#features::before{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%) }
#features::after{ -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), transparent 100%); mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), transparent 100%) }   /* the grain runs on through the top (the walkthrough above has it too), and fades out at the bottom (the presets below do not) */   /* the vignette on the section itself, never a box inside it */
#features::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('../media/tex-folds.webp') center / cover no-repeat; mix-blend-mode:soft-light; opacity:.26 }
.feat figure.shot .shotbox{ position:relative; display:block; width:100%; animation:breathe 9s ease-in-out infinite }
.feat figure.duo .shotbox{ width:min(48%, calc(min(72vh, 680px) * var(--r, .38))); max-width:none; flex:none } .feat figure.duo .shotbox + .shotbox{ animation-delay:-4.5s }
.feat figure.duo .shotbox img{ max-width:100% }
@keyframes breathe{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@media (prefers-reduced-motion:reduce){ .feat figure.shot .shotbox{ animation:none } }
.features .lede{ margin-top:12px; color:var(--t2); max-width:62ch }
/* the modulator screens loop: a small video laid over the glass of the still (the still stays crisp and transparent) */
.feat figure.shot video.glass{ position:absolute; object-fit:fill; pointer-events:none }
/* the 1.5 update's presets wear the plugin's NEW pill (58x24 native, Signal Sans 17, Analog Orange outline) before the heart */
.pb-item .new{ flex:none; margin-left:auto; margin-right:.41cqw; height:.9cqw; padding:0 .45cqw; display:flex; align-items:center; font-size:.587cqw; letter-spacing:.06em; color:rgba(220,136,85,.85); border:1px solid rgba(220,136,85,.85); border-radius:999px; background:rgba(220,136,85,.13) }
.pb-item .new + .hrt{ margin-left:0 }

/* the module block: the name in the display face, its line under it in the mono face (Jack 2026-09-23: "they merge together too much") */
.moddetail .modtitle span{ display:block; font:400 15px/1.45 var(--mono); letter-spacing:.02em; color:var(--t2); margin-top:8px; text-transform:none }

.modtile .sticker{ position:absolute; top:-10px; right:6px; z-index:3; transform:rotate(7deg); font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#111; background:var(--orange); padding:8px 11px; border-radius:3px; box-shadow:0 8px 20px rgba(0,0,0,.45); pointer-events:none }
/* section 04's head sits centred over the first module (Jack 2026-09-23: "so there isn't so much empty space on the right") */
.features .head{ text-align:center; max-width:none; margin-left:auto; margin-right:auto } .features .head h2{ max-width:22ch; margin-left:auto; margin-right:auto } .features .head .lede{ max-width:78ch; margin-left:auto; margin-right:auto }

/* the customers' cards: the avatar and the name large and centred at the top, the words under them (Jack 2026-09-23) */
.words .card{ display:flex; flex-direction:column; text-align:left }
.words .card .by{ order:-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin:4px 0 22px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08) }
.words .card .by img{ width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 10px 24px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.08) }
.words .card .by span{ font-family:var(--mono); font-size:13.5px; letter-spacing:.16em; color:var(--t); text-transform:uppercase }
.words .card q{ margin-top:0 }

/* the walkthrough's head, centred over the video (Jack 2026-09-23) */
#unit .head{ text-align:center; max-width:none; margin-left:auto; margin-right:auto } #unit .head h2{ max-width:24ch; margin-left:auto; margin-right:auto } #unit .head .lede{ margin-left:auto; margin-right:auto }

/* the checkout's pointer spotlight is off (Jack 2026-09-23: "get rid of the blue mouse hover glow") */
#cta .plan::before, #cta .plans .crate::before, #cta .plan::after, #cta .plans .crate::after{ display:none !important }
#cta .cobtn-outline{ background:transparent; color:var(--accent); border:1px solid rgba(244,242,236,.85) }
#cta .cobtn-outline:hover{ background:rgba(244,242,236,.08); border-color:#ffffff }

/* 02b · the stream: a corridor of module pictures (perspective in cqw, keyframes traced by js/stream.js), the chosen one in the
   middle with its words and its demo player. The stage planes take no pointer: in a 3D context a flat parent at z=0 would
   otherwise catch every click meant for a card behind the screen plane. */
#stream{ position:relative; isolation:isolate; padding:clamp(88px, 12vh, 150px) 0 0; background:#080808 }   /* the hero's fade ends in this same #080808; the grain layer fades in below the seam so the two are one surface */
#stream::after{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 320px); mask-image:linear-gradient(to bottom, transparent 0, #000 320px) }   /* starts in the hero's own black and settles into the sections' (Jack 2026-09-24: a seamless edge, and more room under the hero) */
#stream .head{ text-align:center; max-width:none; margin:0 auto 6px } #stream .head h2{ max-width:30ch; margin:0 auto }
.corridor{ --corh:clamp(700px, 92vh, 1000px); --imgh:clamp(300px, min(calc(1.18 * var(--corh) - 500px), 36cqw), 680px); position:relative; container-type:inline-size; height:var(--corh); overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%) }
.corridor .rails{ position:absolute; inset:0; perspective:var(--persp, 30cqw); perspective-origin:50% var(--axis, 50%); pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%) }   /* the rails fade into the dark before the edge cuts them */
.corridor .rails .stage3{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none }
.corridor .scard{ position:absolute; left:50%; top:var(--axis, 50%); width:var(--cw, 10.7cqw); height:var(--ch, 27cqw); margin-left:calc(var(--cw, 10.7cqw) / -2); margin-top:calc(var(--ch, 27cqw) / -2); background:none; border:0; padding:0; backface-visibility:hidden; will-change:transform; cursor:pointer; pointer-events:auto; outline:0 }
.corridor .scard img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; will-change:filter; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .22s }
.corridor .scard img.is-out{ opacity:0 }
.corridor .scard.r:hover img{ transform:translateX(-9%) scale(1.04) } .corridor .scard.l:hover img{ transform:translateX(9%) scale(1.04) }   /* a hovered module slides out of its rail toward the middle: click, and it swaps in */   /* brightness and blur ride ish-dof (js/stream.js), in step with the card's travel */
.corridor.is-paused .scard, .corridor.is-off .scard, .corridor.is-paused .scard img, .corridor.is-off .scard img{ animation-play-state:paused }
.corridor .centre{ position:absolute; left:50%; top:var(--axis, 50%); transform:translate(-50%, calc(var(--imgh) / -2)); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; width:min(76%, 760px) }   /* the module's own centre sits on the corridor's axis, the words hang under it */
.corridor .cimg{ height:var(--imgh); width:auto; max-width:100%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)); transition:opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1) }
.corridor .cimg.is-swap{ opacity:0; transform:translateY(8px) }
.corridor .ctext{ text-align:center; pointer-events:auto; text-shadow:0 2px 20px rgba(0,0,0,.85); padding:14px 40px 6px; width:100% }   /* no backdrop: its edges showed as a dark box (Jack 2026-09-23); the text shadow does the work */
.corridor .ckind{ display:block } .corridor .ctitle{ font:400 13px/1.4 var(--ui); letter-spacing:.06em; color:var(--t); margin:4px 0 0; white-space:nowrap }   /* the name: the same small label as "Effect", in white */
.corridor .csub{ font:400 14px/1.6 var(--mono); color:var(--t2); max-width:none; margin:12px auto 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.corridor .cplayer{ width:min(100%, 440px); pointer-events:auto; margin:18px auto 0 }
.corridor .cplayer .ab{ grid-template-columns:1fr auto auto auto 1fr; grid-template-rows:auto auto; gap:8px 12px }   /* the wave full width, the controls centred under it */ .corridor .cplayer .ab-wave{ grid-column:1 / -1; grid-row:1; height:42px; order:0 } .corridor .cplayer .ab-plot{ inset:8px 12px } .corridor .cplayer .ab-base, .corridor .cplayer .ab-fill{ stroke-width:4px } .corridor .cplayer .ab-play{ grid-row:2; grid-column:2; width:34px; height:34px } .corridor .cplayer .ab-seg{ grid-row:2; grid-column:3; padding:2px } .corridor .cplayer .ab-seg button{ padding:6px 10px } .corridor .cplayer .ab-time{ grid-row:2; grid-column:4; text-align:left; min-width:0; align-self:center }
@media (prefers-reduced-motion:reduce){ .corridor .scard, .corridor .scard img{ animation-play-state:paused } }
@media (max-width:700px){
  /* phones (Jack 2026-09-24: "the exact same as desktop, but cropped inward"): the same corridor and path, laid out at a
     desktop-like width and centred on its own axis; the phone sees the middle of it */
  /* the title slides down to sit ~32 px over the module (Jack 2026-09-24) while the module and the animation stay put: the
     section's top grows by D and the corridor comes up by D, where D = the module's own drop from the corridor's top
     (123 - 0.09 x its height, from the 41% centre line) minus the gap wanted */
  #stream{ --pimgh:clamp(220px, 34vh, 300px); --lift:calc(91px - var(--pimgh) * .09); padding-top:calc(104px + var(--lift)); overflow-x:clip }
  #stream .head{ position:relative; z-index:4 }
  #stream .head{ margin-bottom:0 }
  .corridor{ --imgh:var(--pimgh); width:230vw; margin-left:calc(50% - 115vw); margin-top:calc(-1 * var(--lift)); height:calc(var(--imgh) + 300px) }
  .corridor .scard img{ transform:scale(1.25) }   /* the passing pictures 25% larger about their own centres: the movement is untouched */   /* the desktop corridor, cropped: laid out wide and centred, the phone shows its middle */
  .corridor .centre{ width:92vw }
}

/* the formats pill in the nav row, top right (Jack 2026-09-23) */
.nav .formats{ position:static; margin-left:auto; height:32px; padding:0 14px; display:flex; align-items:center; border:1.5px solid rgba(240,240,240,.55); border-radius:999px; font:400 13px/1 var(--ui); letter-spacing:.06em; color:rgba(240,240,240,.92); white-space:nowrap; background:rgba(8,8,8,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:0 1px 2px rgba(0,0,0,.6) }   /* a dark backing: it sat over the hero's lamp glow and vanished (Jack 2026-09-24) */
/* the stream's middle: empty until a click; then the module, arrows either side, its words and player */
.corridor .chint{ position:absolute; left:50%; top:var(--axis, 50%); transform:translate(-50%, -50%); z-index:3; font:400 13px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(240,240,240,.45); pointer-events:none; text-shadow:0 2px 16px rgba(0,0,0,.9) }
.corridor .cslot .sticker{ position:absolute; top:-12px; right:-26px; z-index:4; transform:rotate(7deg); font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#111; background:var(--orange); padding:8px 11px; border-radius:3px; box-shadow:0 6px 16px rgba(0,0,0,.5); pointer-events:none }
.corridor .cslot{ position:relative; height:var(--imgh); width:calc(var(--imgh) * .51); display:flex; justify-content:center; align-items:flex-end; flex:none }
.corridor .cstage{ position:relative; display:inline-block; line-height:0; max-width:100% }
.corridor .cscreens{ position:absolute; inset:0; pointer-events:none } .corridor .cscreens canvas{ position:absolute; display:block }
.corridor .carrow{ position:absolute; top:calc(var(--imgh) / 2); transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(240,240,240,.28); background:rgba(14,14,13,.72); color:#f0f0f0; display:grid; place-items:center; cursor:pointer; pointer-events:auto; z-index:4; transition:border-color .2s, background .2s, transform .2s; padding:0 }
.corridor .carrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.corridor .carrow.prev{ left:calc(50% - var(--imgh) * .32 - 64px) } .corridor .carrow.next{ right:calc(50% - var(--imgh) * .32 - 64px) }
.corridor .carrow:hover{ border-color:rgba(240,240,240,.7); background:rgba(24,24,23,.9) } .corridor .carrow:active{ transform:translateY(-50%) scale(.96) }
.corridor .cfly{ position:absolute; z-index:5; pointer-events:none; object-fit:contain; transition:transform .58s cubic-bezier(.2,.9,.25,1); will-change:transform; filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) }
.corridor .cfly.ghost{ z-index:4; transition:opacity .3s ease, transform .3s ease } .corridor .cfly.ghost.is-gone{ opacity:0; transform:scale(.96) }
@media (max-width:700px){ .corridor .carrow{ width:40px; height:40px } }
/* the stream and the walkthrough: a dashed rule between them, with room either side (Jack 2026-09-24) */
#unit{ padding-top:clamp(64px, 9vh, 110px) !important }
.secrule{ display:block; width:min(calc(100% - 2 * var(--gutter, 24px)), 1200px); height:1px; margin:0 auto calc(clamp(64px, 9vh, 110px) + 38px); border:0;
  background:repeating-linear-gradient(90deg, rgba(240,240,240,.3) 0 10px, transparent 10px 20px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) }

/* 09 · the words: a scope face behind the cards (Jack 2026-09-24: "a cooler background"): a phosphor-green graticule, a soft
   glow where the beam lives, fine scanlines and one slow trace drifting across; it fades into the black above and below */
#words{ isolation:isolate; overflow:hidden; border-top:0 !important; border-bottom:0 !important; background:linear-gradient(180deg, #080808 0, #070807 220px, #070807 calc(100% - 220px), #020202 100%) }   /* no rules at the joins; the base eases from the clips' black above to the crate's below */
#words::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(90,208,122,.075), rgba(90,208,122,0) 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(240,240,240,.055) 1px, transparent 1px) center / 120px 120px,
    linear-gradient(90deg, rgba(240,240,240,.055) 1px, transparent 1px) center / 120px 120px,
    linear-gradient(rgba(240,240,240,.022) 1px, transparent 1px) center / 24px 24px,
    linear-gradient(90deg, rgba(240,240,240,.022) 1px, transparent 1px) center / 24px 24px,
    radial-gradient(110% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 220px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 220px), transparent 100%) }
#words::after{ content:""; position:absolute; left:0; right:0; top:34%; height:240px; z-index:-1; pointer-events:none; opacity:.22;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='240' viewBox='0 0 1200 240'><path d='M0 120 C 60 120 70 60 100 60 S 140 180 170 180 S 210 90 240 110 S 290 150 320 120 S 360 40 400 70 S 450 200 500 170 S 540 100 580 118 S 640 128 680 100 S 720 30 760 60 S 820 210 860 180 S 910 110 950 122 S 1010 140 1040 110 S 1090 50 1130 80 S 1180 120 1200 120' fill='none' stroke='%23DC8855' stroke-width='1.6' stroke-linecap='round'/></svg>") 0 0 / 1200px 240px repeat-x; filter:drop-shadow(0 0 6px rgba(220,136,85,.9)) blur(.3px);
  animation:words-trace 38s linear infinite;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
@keyframes words-trace{ to{ background-position:-1200px 0 } }
@media (prefers-reduced-motion:reduce){ #words::after{ animation:none } }
/* the cards go a little glassy so the face shows through */
#words .card{ background:linear-gradient(180deg, rgba(30,30,30,.88), rgba(18,18,18,.92)) !important; border-color:rgba(240,240,240,.1) !important }   /* no backdrop blur: Safari drops blurred boxes inside a masked, moving strip */
/* the cards light up under the pointer (Jack 2026-09-24): the outline brightens nearest the cursor, the neighbours' edges
   catching it too, and a soft glow sits inside the card underneath; orange, as the trace */
#words .card{ position:relative; isolation:isolate }
#words .card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; z-index:2; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(220,136,85,.95), rgba(220,136,85,.28) 45%, rgba(220,136,85,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0; transition:opacity .35s ease }
#words .card::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(220,136,85,.11), rgba(220,136,85,0) 62%);
  opacity:0; transition:opacity .35s ease }
#cards.is-lit .card::before, #cards.is-lit .card::after{ opacity:1 }
#wildsec .head{ max-width:none } #wildsec .head h2{ max-width:none; white-space:nowrap } @media (max-width:640px){ #wildsec .head h2{ white-space:normal } }   /* "Used by 1,000+ producers." on one line */
/* the testimonials as a slow carousel, left to right (Jack 2026-09-24) */
#words .tiers{ grid-template-columns:minmax(0,1fr) } #words .tiers, #words .tier{ min-width:0; max-width:100%; overflow:hidden }   /* the carousel's long track must never widen the column (Safari: the section then never counted as on screen)*/
#cards.is-carousel{ display:block; position:relative; width:100%; min-width:0; overflow:hidden; box-sizing:content-box; padding:6px 0 10px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) }
#cards.is-carousel .card{ position:absolute; left:0; top:6px; width:320px; margin:0; will-change:transform }   /* each card moved on its own by js/site.js */
@media (prefers-reduced-motion:reduce){ #cards.is-carousel{ overflow-x:auto } }
/* the plugin on its own, first and plain (Jack 2026-09-24: "make the option to get just mod-fx for $70 more obvious") */
#cta .plan--solo{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; gap:clamp(18px,3vw,48px); padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px); border-color:rgba(220,136,85,.5); background:linear-gradient(180deg, rgba(220,136,85,.07), rgba(220,136,85,.02)) }
#cta .solo-copy{ flex:1 1 auto; min-width:0 }
#cta .solo-eyebrow{ font:400 12px/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.24em; text-transform:uppercase; color:var(--orange); margin-bottom:10px }
#cta .plan--solo .plan-name{ font-size:clamp(20px,2vw,26px); margin:0 0 8px }
#cta .plan--solo .plan-trial-sub{ max-width:52ch }
#cta .solo-buy{ flex:0 0 auto; display:flex; align-items:center; gap:clamp(16px,2vw,28px) }
#cta .solo-price{ font-size:clamp(34px,3.6vw,48px); font-weight:700; letter-spacing:-.03em; color:var(--ink); white-space:nowrap }
#cta .solo-price s{ font-size:.42em; font-weight:400; color:var(--ink-dim); margin-right:8px; vertical-align:middle }
#cta .solo-btn{ min-height:52px; padding:0 26px; font-size:14px; white-space:nowrap }
#cta .plans-or{ grid-column:1 / -1; display:flex; align-items:center; gap:16px; margin:4px 0; font:400 12px/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim) }
#cta .plans-or i{ flex:1; height:1px; background:rgba(244,242,236,.12) }
@media (max-width:760px){ #cta .plan--solo{ flex-direction:column; align-items:stretch } #cta .solo-buy{ justify-content:space-between } }

/* ---- phones (Jack 2026-09-24: "do all your suggested fixes") ---- */
@media (max-width:640px){
  /* the preset browser on a phone (Jack 2026-09-24: "you get stuck in it"): no inner scroller at all. The categories as a
     row of chips, the rack with its name laid on it, then the first presets as rows and a button that opens the rest in
     the page's own flow (js/library.js) */
  .pbwrap{ aspect-ratio:auto; background:#0a0a0a; border:1px solid rgba(240,240,240,.1); border-radius:10px }
  .pbwrap .pb{ display:grid; grid-template-areas:"cats" "shot" "list" "more"; container-type:normal }
  .pb .pb-art, .pb .pb-auth, .pb .pb-ver{ display:none }
  .pb .pb-cats{ position:static; grid-area:cats; width:auto; height:auto; flex-direction:row; gap:6px; overflow-x:auto; padding:12px 12px 10px; scrollbar-width:none; overscroll-behavior-x:contain }
  .pb .pb-cats::-webkit-scrollbar{ display:none }
  .pb .pb-cat{ height:32px; padding:0 12px; font-size:11px; white-space:nowrap; border:1px solid rgba(240,240,240,.16); border-radius:999px }
  .pb .pb-cat[aria-pressed="true"]{ border-color:var(--sel-bar) }
  .pb .pb-cat[aria-pressed="true"]::before, .pb .pb-cat[aria-pressed="true"]::after{ display:none }
  .pb .pb-shot{ position:relative; left:auto; top:auto; grid-area:shot; width:100%; height:auto; aspect-ratio:1580/1048 }
  .pb .pb-shot::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(180deg, rgba(5,5,5,0), rgba(5,5,5,.88)); pointer-events:none }
  .pb .pb-shot .pb-cap{ font-size:13px }
  .pb .pb-name{ position:relative; left:auto; top:auto; z-index:2; grid-area:shot; align-self:end; width:auto; height:auto; padding:0 14px 26px; font-size:20px; text-shadow:0 2px 12px rgba(0,0,0,.8) }
  .pb .pb-sub{ position:relative; left:auto; top:auto; z-index:2; grid-area:shot; align-self:end; width:auto; padding:0 14px 10px; font-size:11.5px }
  .pb .pb-list{ position:static; grid-area:list; width:auto; height:auto; max-height:none; overflow:visible; overscroll-behavior:auto; border-top:1px solid rgba(240,240,240,.08) }
  .pb .pb-list .pb-item:nth-child(n+7){ display:none } .pb.is-all .pb-list .pb-item:nth-child(n+7){ display:flex }
  .pb .pb-item{ height:44px; padding:0 14px; font-size:14px; border-bottom:1px solid rgba(240,240,240,.05) }
  .pb .pb-item .hrt{ width:18px; height:18px; margin-right:0 }
  .pb .pb-item .new{ height:16px; padding:0 6px; margin-right:8px; font-size:9px; border-radius:8px }
  .pb .pb-empty{ padding:14px; font-size:13px }
  .pb .pb-more{ grid-area:more; display:block; margin:10px 12px 12px; height:40px; border-radius:8px; border:1px solid rgba(240,240,240,.18); background:transparent; color:var(--t); font:400 13px/1 var(--ui); letter-spacing:.02em }
  .pb .pb-more[hidden]{ display:none }
  /* Compass and Conductor, a size smaller */
  .feat figure.duo{ justify-content:center; gap:18px } .feat figure.duo .shotbox{ width:34% }
  /* the effect's sentence may take two lines */
  .corridor .csub{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:clip; font-size:13px }
  /* the testimonials: narrower cards, short fades, the heading and its note stacked */
  #cards.is-carousel .card{ width:264px }
  #cards.is-carousel{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) }
  #words .tier h3{ flex-direction:column; align-items:flex-start; gap:6px }
}
/* the hero on a phone (Jack 2026-09-24: controls missing, bottom cropped, a black gap under the headline): the text, then
   the rack as desktop shows it, whole, fading in from the black at its top and out at its foot */
.stage .phone-rack{ display:none }
@media (max-width:700px){
  .stage.is-phone{ height:auto !important; padding-bottom:10px; display:flex !important; flex-direction:column }
  .stage.is-phone .phone-rack{ order:1 } .stage.is-phone .transport{ order:2 }
  /* the text lies on the room's wall (the AI's upper room, js/stage.js picture), a soft shade behind it */
  .stage.is-phone .top{ position:absolute !important; left:0; right:0; top:0; z-index:3 }
  .stage.is-phone::before{ content:""; position:absolute; left:0; right:0; top:0; height:62vw; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.45) 55%, rgba(5,5,5,0) 100%) }
  .stage.is-phone .scene{ display:none }
  .stage.is-phone .top{ padding:74px 16px 0 }
  .stage.is-phone .strip{ margin-bottom:24px }
  .stage.is-phone::after{ display:none }
  .stage.is-phone .phone-rack{ display:block; width:100%; height:auto; margin-top:0 }   /* the whole rack, both pages, fading to black at its own foot (scripts/phone_hero_media.py) */
  .stage.is-phone .transport{ margin-top:-34px !important; position:relative; z-index:3 }   /* the player sits in the fade under the rack */
}
@media (max-width:700px){ .stage.is-phone .tcap{ display:none !important }
  /* the phone's transport: listen only (js/phonehero.js), under the rack: play and the loops, then the preset and Dry / MOD-FX */
  .stage.is-phone .transport{ display:flex !important; position:relative !important; top:auto !important; left:auto !important; transform:none !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 8px; width:auto; max-width:none; margin:4px 0 0; padding:0 12px }
  .stage.is-phone .transport .tbtn.play{ width:46px; height:46px }
  .stage.is-phone .transport .tbtn.play.loading{ opacity:.55 }
  .stage.is-phone .loops button{ height:34px; padding:0 12px; font-size:13px }
  .stage.is-phone .transport::before{ content:""; order:2; flex-basis:100%; height:0 }   /* play + loops, then preset + Dry / MOD-FX, each row centred */
  .stage.is-phone .transport .preset{ height:40px; order:3; flex:0 1 auto; width:min(238px, 60vw); min-width:0; justify-content:space-between; padding:0 2px }
  .stage.is-phone .transport .preset button{ flex:none; width:32px; height:32px }
  .stage.is-phone .transport .preset span{ flex:1 1 auto; min-width:0; padding:0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; letter-spacing:0 }
  .stage.is-phone .mark{ height:auto; width:min(74vw, 330px); max-width:none }   /* the wordmark scales as a whole, never squeezed */
  .stage.is-phone .phone-thru, .stage.is-phone .desk-thru{ order:4 } .stage.is-phone .phone-thru button{ padding:9px 11px; font-size:12.5px }
}
.phone-thru{ display:none } .stage.is-phone .phone-thru{ display:grid }
@media (min-width:641px){ .pb .pb-more{ display:none } }   /* only phones show the Show all button */
@media (max-width:640px){
  #words::before{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    background-size:auto, auto, 60px 60px, 60px 60px, 12px 12px, 12px 12px, auto }
  #words{ background:linear-gradient(180deg, #080808 0, #070807 60px, #070807 calc(100% - 60px), #020202 100%) }
  #words::after{ top:30%; opacity:.28 }
}
#words .tier h3{ font-family:var(--ui); font-weight:400; font-size:clamp(17px, 1.5vw, 21px); letter-spacing:.01em }   /* Monoblock (Jack 2026-09-24: the display face looked odd here) */
@media (max-width:640px){ .wild{ gap:30px 14px } }   /* more air between the clips on a phone */
@media (max-width:640px){
  #features .head .lede{ display:none }   /* phones: the headline alone (Jack 2026-09-24) */
  .feat figure.shot:not(.duo):not(.strip) .shotbox{ width:78% }   /* the LFO, follower and randomiser a size smaller on a phone */
}

/* ---- phones: every block of words centred (Jack 2026-09-24: "centre mobile text ... anywhere it does so"). Rows that are
   rows (the crate's price lines with their dotted leaders, the preset list) keep their shape. ---- */
@media (max-width:640px){
  .unitgrid .facts, .unit .facts, .unitgrid .facts p{ text-align:center }
  .unitgrid .facts .num{ display:block }
  .feat .txt, .feat.full .txt{ text-align:center; margin-inline:auto }
  .feat .txt .num{ display:block } .feat .txt p{ margin-inline:auto } .feat .txt .chips, .chips{ justify-content:center }
  #wildsec .head, #wildsec .head h2, #wildsec .head .lede{ text-align:center; margin-inline:auto }
  .clip .who{ text-align:center } .clipq{ text-align:center }
  #words .tier h3{ align-items:center; text-align:center }
  #words .card q{ text-align:center }
  #cta .plan--solo{ text-align:center } #cta .plan--solo .plan-trial-sub{ margin-inline:auto }
  #cta .solo-buy{ flex-direction:column; align-items:center; gap:14px }
  #cta .crate-bill{ text-align:center } #cta .crate-eyebrow, #cta .crate-today, #cta .crate-was, #cta .crate-price, #cta .crate-note{ text-align:center }
  #cta .crate-lines li, #cta .crate-sep{ text-align:left }
  #cta .plan--trial, #cta .plan--trial .plan-trial-copy{ text-align:center }
  .faq .wrap, .faq h2{ text-align:center }
  summary{ position:relative; justify-content:center; text-align:center; padding-left:34px; padding-right:34px }
  summary::after{ position:absolute; right:0; top:50%; margin-top:-11px }
  details p{ text-align:center; margin-inline:auto }
  .specsec .head, .specsec h2{ text-align:center }
  .spec{ text-align:center } .spec dl{ grid-template-columns:1fr; gap:2px } .spec dt{ padding-top:10px } .spec dd{ margin:0 }
  .sp-base{ flex-direction:column; text-align:center } footer .sp-base nav, footer .sp-base .legal{ justify-content:center } footer .sp-base .legal{ flex-direction:column; align-items:center }
}
@media (max-width:640px){ #features .feat .chips{ display:none } }   /* phones: no label chips over the modulators (Jack 2026-09-24) */

/* ---- BOOT CONSOLE (the 1.5 site's loading screen, brought back for 2.0: Jack 2026-09-25 "bring back the 1.5 loading
   screen but make the accent colour orange and label it 2.0 ... because the loading takes a few seconds"). The same
   panel, rail, checklist and timings; the 1.5's blue is the site's orange; set in Geist Mono (the Monoblock demo has no
   ":" "%" or the middle dot). Hidden by default, shown only once the inline script adds .booting to <html>, so with JS
   off it never appears and never traps anyone. */
#boot{ display:none }
html.booting{ overflow:hidden }
html.booting body{ overflow:hidden }
html.booting #boot{ display:flex; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:#0a0a0a; color:#e8e6e0;
  font-family:"Geist Mono", ui-monospace, Menlo, monospace; transition:opacity .5s cubic-bezier(.16,1,.3,1) }
#boot.is-done{ opacity:0; pointer-events:none }
.boot-c{ position:absolute; width:14px; height:14px; pointer-events:none }
.boot-c.tl{ top:26px; left:26px; border-top:1px solid #262626; border-left:1px solid #262626 }
.boot-c.tr{ top:26px; right:26px; border-top:1px solid #262626; border-right:1px solid #262626 }
.boot-c.bl{ bottom:26px; left:26px; border-bottom:1px solid #262626; border-left:1px solid #262626 }
.boot-c.br{ bottom:26px; right:26px; border-bottom:1px solid #262626; border-right:1px solid #262626 }
.boot-box{ position:relative; width:min(470px,82vw) }
.boot-mark{ font-size:26px; font-weight:700; letter-spacing:.06em; text-align:center; color:#f4f2ec; line-height:1 }
.boot-mark b{ font-weight:700; color:var(--orange) }
.boot-sub{ margin-top:11px; text-align:center; font-size:8px; letter-spacing:.34em; color:#4a4a4a }
.boot-rail{ position:relative; height:1px; background:#1f1f1f; margin:44px 0 14px }
.boot-fill{ position:absolute; left:0; top:0; height:1px; width:0; background:#e8e6e0 }
.boot-dot{ position:absolute; top:-1.5px; left:0; width:4px; height:4px; border-radius:50%; background:var(--orange); box-shadow:0 0 7px rgba(220,136,85,.6); transform:translateX(-2px) }
.boot-list{ list-style:none; margin:0; padding:0 }
.boot-list li{ display:flex; align-items:baseline; gap:10px; font-size:10px; letter-spacing:.16em; line-height:2.05; color:#333; transition:color .3s ease }
.boot-list li.is-active{ color:#8a8781 } .boot-list li.is-done{ color:#6f6d68 }
.boot-list .bl-k{ flex:none; width:6px; color:#262626 } .boot-list li.is-active .bl-k{ color:var(--orange) } .boot-list li.is-done .bl-k{ color:#3d3d3d }
.boot-list .bl-n{ flex:1; min-width:0 } .boot-list .bl-s{ flex:none; letter-spacing:.1em; color:#2e2e2e } .boot-list li.is-done .bl-s{ color:#e8e6e0 }
.boot-foot{ display:flex; align-items:baseline; justify-content:space-between; margin-top:34px; font-size:9px; letter-spacing:.22em; color:#3d3d3d }
.boot-pct{ color:#e8e6e0; font-weight:700; letter-spacing:.1em; font-variant-numeric:tabular-nums }
@media (max-width:560px){ .boot-box{ width:84vw } .boot-mark{ font-size:21px } .boot-list li{ font-size:9px; letter-spacing:.1em } .boot-c{ display:none } }
@media (prefers-reduced-motion:reduce){ #boot{ transition:none } .boot-fill, .boot-dot{ transition:none } }