/* Shared chrome for both builds, after Jack's 2026-09-22 notes: interface face for nav and buttons, controls built like
   hardware parts, textured grounds (paper, black grain, the studio behind the words), the real marks. */
@font-face{ font-family:"Monoblock"; src:url("../fonts/Monoblock.otf") format("opentype"); font-display:swap }
@font-face{ font-family:"Geist"; src:url("../fonts/Geist.woff2") format("woff2"); font-weight:100 900; font-display:swap }
@font-face{ font-family:"Geist Mono"; src:url("../fonts/GeistMono.woff2") format("woff2"); font-weight:100 900; font-display:swap }
:root{ --ui:"Monoblock", "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif; --umono:"Monoblock", "Geist Mono", ui-monospace, Menlo, monospace }

/* grounds */
.ground{ position:relative; isolation:isolate }
.ground::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.35; background-image:radial-gradient(70% 60% at 85% 0%, rgba(220,136,85,.16), transparent 60%), radial-gradient(60% 50% at 10% 100%, rgba(255,255,201,.05), transparent 60%), linear-gradient(rgba(240,240,240,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(240,240,240,.05) 1px, transparent 1px); background-size:auto, auto, 28px 28px, 28px 28px; -webkit-mask-image:linear-gradient(180deg, #000, rgba(0,0,0,.35) 30%, rgba(0,0,0,.35) 70%, #000); mask-image:linear-gradient(180deg, #000, rgba(0,0,0,.35) 30%, rgba(0,0,0,.35) 70%, #000) }
.ground::after{ display:none }
.tex-grain{ position:relative; isolation:isolate } .tex-grain::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:url("../media/grain-cover.webp") center/cover no-repeat; mix-blend-mode:soft-light; opacity:.55; -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%); mask-image:radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%) }
.paper.tex-paper{ background-image:url("../media/tex-paper.webp"); background-size:900px; background-blend-mode:multiply; background-color:#F0F0F0 }

/* marks */
.brand{ display:flex; align-items:center; gap:12px } .brand img{ height:22px; width:auto } .brand .v{ font:500 11px/1 var(--ui); letter-spacing:.08em; color:rgba(240,240,240,.62) }
.mark-sp{ display:flex; align-items:center; gap:12px } .mark-sp img:first-child{ height:34px; width:auto } .mark-sp img:last-child{ height:16px; width:auto; opacity:.9 }

/* chrome type */
.nav nav a, .nav .price, .bar .l, .btn, .pill, .chip, .mono, .num, .k, .fine, .timer, .eyebrow, .specstrip span, .counters span, .cmp th, .cmp td:first-child, .card .by, .clip .who, .clip .n, .bill, .buy .terms b, .spec dt, .unit .facts .num, .feat .num, .row .src, .plan .k, .plan .timer, .ab-seg button, .ab-time, .ab-head, .hero .word, .hero .priceline, .modlist h4, .mod i, .tier h3 small, .newlist i, .bp figcaption, .bp .tabs button, .pane .cap, footer nav, footer .legal, .crate .alt, .crate .amt em, .plan .amt em, .hero .tag, .play .cap span{ font-family:var(--ui) !important; letter-spacing:.01em !important; text-transform:none !important }
.eyebrow, .k, .plan .k, .num, .feat .num, .unit .facts .num, .mod i, .newlist i, .modlist h4, .tier h3 small, .hero .word{ font-weight:400 !important; font-size:13px !important; letter-spacing:.06em !important }
.chip, .bill, .cmp th, .cmp td:first-child, .spec dt, .buy .terms b, .row .src, .clip .n, .bp figcaption, .counters span, .timer, .plan .timer, .ab-time{ font-family:var(--umono) !important; font-size:12px !important; letter-spacing:.02em !important }

/* buttons as parts: a top light, a bottom shadow, a press */
/* ==== BUTTONS (Jack, 2026-09-22: "more premium, design not font"): one construction for every button on the page.
   A button is a machined part, not a flat fill: a body gradient with a lit top edge, a hairline rim a shade darker than
   the body, a soft floor shadow, a whisper of grain, and a sheen that moves on hover. Same fonts as before. ==== */
:root{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") }
.btn, .pill{ font:400 15px/1 var(--ui) !important; letter-spacing:.02em !important; border-radius:12px !important; padding:0 24px !important; height:48px !important; position:relative; isolation:isolate; overflow:hidden; text-transform:none !important; text-decoration:none; cursor:pointer;
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), filter .28s, border-color .28s !important }
.btn::before, .pill::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 }
.btn::after, .pill::after{ content:""; position:absolute; left:-40%; top:-120%; width:60%; height:340%; z-index:-1; pointer-events:none; transform:rotate(22deg); background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%); opacity:0; transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .35s }
.btn:hover::after, .pill:hover::after{ opacity:1; transform:rotate(22deg) translateX(260%) }
/* the orange one: the Analog Orange body lit from above, a copper rim, a warm floor */
.btn-primary, .pill.buy{ color:#1E1E1E !important; border:1px solid #9d5a30 !important;
  background:linear-gradient(180deg, #F2AE82 0%, #E4925F 28%, #DC8855 58%, #C56F3F 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(90,40,15,.35), inset 0 0 0 1px rgba(255,220,190,.18), 0 1px 0 rgba(0,0,0,.45), 0 10px 22px -6px rgba(220,136,85,.45), 0 22px 44px -14px rgba(0,0,0,.6) !important }
.btn-primary:hover, .pill.buy:hover{ transform:translateY(-1px); filter:saturate(1.04) brightness(1.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(90,40,15,.35), inset 0 0 0 1px rgba(255,220,190,.22), 0 1px 0 rgba(0,0,0,.45), 0 14px 28px -6px rgba(220,136,85,.55), 0 26px 50px -14px rgba(0,0,0,.6) !important }
.btn-primary:active, .pill.buy:active{ transform:translateY(1px); filter:brightness(.97); box-shadow:inset 0 2px 5px rgba(80,35,10,.35), inset 0 0 0 1px rgba(255,220,190,.12), 0 1px 0 rgba(0,0,0,.35) !important }
/* the dark one: smoked glass with a lit rim */
.btn-ghost, .pill:not(.buy){ color:#F0F0F0 !important; border:1px solid rgba(240,240,240,.14) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.03) 100%), rgba(18,18,17,.72) !important;
  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 12px 26px -10px rgba(0,0,0,.65) !important; -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2) }
.btn-ghost:hover, .pill:not(.buy):hover{ border-color:rgba(240,240,240,.32) !important; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.45), 0 16px 32px -10px rgba(0,0,0,.7), 0 0 0 4px rgba(240,240,240,.04) !important }
.btn-ghost:active, .pill:not(.buy):active{ transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.35) !important }
.paper .btn-ghost{ background:linear-gradient(180deg, rgba(30,30,30,.06), rgba(30,30,30,.02)) !important; color:#1E1E1E !important; border-color:rgba(30,30,30,.3) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(30,30,30,.12) !important }
.nav .pill{ height:36px !important; padding:0 16px !important; border-radius:10px !important }
.btn s, .pill s{ opacity:.55; font-weight:500; margin-right:2px } .pill i{ display:none }
.btn .ic, .pill .ic{ width:16px; height:16px; flex:none } .btn .ic svg, .pill .ic svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; display:block }

/* the nav bars */
.nav nav a{ font:400 14px/1 var(--ui) !important; color:rgba(240,240,240,.78) !important; padding:9px 12px !important; border-radius:9px }
.nav nav a:hover{ color:#F0F0F0 !important; background:rgba(240,240,240,.06) }
.nav .price{ font:500 13px/1 var(--ui) !important; color:rgba(240,240,240,.7) !important } .nav .price b{ font-weight:600 !important; color:#F0F0F0 }
.nav .btn, .nav .pill{ height:38px !important; padding:0 16px !important; font-size:13.5px !important; border-radius:10px !important }
.bar .l{ font:500 13px/1.3 var(--ui) !important; color:rgba(240,240,240,.7) !important } .bar .pill{ height:40px !important }

/* lamps and plates for anything you click */
.lamp{ width:8px; height:8px; border-radius:50%; background:#3a2a1f; box-shadow:inset 0 1px 1px rgba(0,0,0,.6); flex:none; transition:background .2s, box-shadow .2s }
.on > .lamp, .lamp.on, .mod:hover .lamp, .mod.on .lamp{ background:#DC8855; box-shadow:0 0 6px rgba(220,136,85,.9), 0 0 14px rgba(220,136,85,.45), inset 0 1px 0 rgba(255,255,255,.5) }
.plate{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(240,240,240,.14); border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35) }
.paper .plate{ background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); border-color:rgba(30,30,30,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(30,30,30,.12) }
.screw{ position:absolute; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #6a6a68, #2a2a29 70%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.12) }
.screw::after{ content:""; position:absolute; left:1px; right:1px; top:3px; height:1px; background:rgba(0,0,0,.7); transform:rotate(var(--r, 20deg)) }
.screw.tl{ left:7px; top:7px } .screw.tr{ right:7px; top:7px; --r:-40deg } .screw.bl{ left:7px; bottom:7px; --r:70deg } .screw.br{ right:7px; bottom:7px; --r:-15deg }

/* the module list as labelled plates with a lamp */
.mod{ position:relative; padding:14px 16px 14px 18px !important; grid-template-columns:auto 1fr auto !important; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important; border:1px solid rgba(240,240,240,.14) !important; border-radius:12px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3) !important }
.mod .lamp{ position:absolute; right:12px; top:12px }
.mod:hover, .mod.on{ background:linear-gradient(180deg, rgba(220,136,85,.16), rgba(220,136,85,.05)) !important; border-color:rgba(220,136,85,.5) !important }
.mod b{ font-family:var(--edit) } .mod i{ color:rgba(240,240,240,.55) !important }

/* players as a transport */
.ab-play{ background:linear-gradient(180deg, #f6f4ee, #d9d6cf) !important; color:#1E1E1E !important; border:1px solid rgba(0,0,0,.35) !important; 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 6px 14px rgba(0,0,0,.35) !important }
.ab-play:active{ transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.45) !important }
.ab-seg{ background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)) !important; border:1px solid rgba(240,240,240,.16) !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) !important; border-radius:10px !important; padding:3px !important }
.ab-seg button{ font:400 13.5px/1 var(--ui) !important; border-radius:8px !important; padding:9px 10px !important; color:rgba(240,240,240,.7) !important; transition:background .2s, color .2s, box-shadow .2s !important }
.ab-seg button[aria-pressed="true"]{ background:linear-gradient(180deg, #E79A6A, #C97643) !important; color:#1E1E1E !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px rgba(220,136,85,.35) !important }
.ab-wave{ background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.3)) !important; border:1px solid rgba(240,240,240,.1) !important; box-shadow:inset 0 2px 8px rgba(0,0,0,.5) !important }
.player, .card, .plan, .spec, .clip, .note{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.35) }
.player, .plan, .spec, .card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important }
.clip .play i{ background:linear-gradient(180deg, #f6f4ee, #d9d6cf) !important; color:#1E1E1E !important; border:1px solid rgba(0,0,0,.35) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.4) !important; width:54px !important; height:54px !important }

/* details as a panel of switches */
summary::after{ content:"" !important; width:22px; height:22px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border:1px solid rgba(240,240,240,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); flex:none; background-image:linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor); background-size:10px 1.5px, 1.5px 10px; background-position:center; background-repeat:no-repeat; transition:transform .25s !important }
.paper summary::after{ background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.5)); border-color:rgba(30,30,30,.3); background-image:linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor); background-size:10px 1.5px, 1.5px 10px; background-position:center; background-repeat:no-repeat }
details[open] summary::after{ transform:rotate(45deg) }
/* grounds by name: url() inside an inline custom property resolves against the stylesheet, so they live here */
.g-desk, .g-rack, .g-outboard, .g-synth, .g-keys{ --ground-img:none }

/* ==== THE PRIMARY BUTTON (Jack 2026-09-23: the OriginButton, in orange). Resting: a hairline orange rim and orange type on the
   dark; on hover, focus or press an orange disc grows from where the pointer came in until it covers the button, the type
   turning near-black; leaving, it shrinks back to that point. js/origin.js sets --ox/--oy/--od and .is-fill. ==== */
.pill.buy, .btn-primary{ color:#DC8855 !important; background:rgba(20,20,19,.6) !important; border:1px solid rgba(220,136,85,.9) !important; box-shadow:0 1px 0 rgba(0,0,0,.45), 0 10px 22px -12px rgba(0,0,0,.6) !important; transition:color .3s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s !important }
.pill.buy::after, .btn-primary::after{ display:none }
.pill.buy .ofill, .btn-primary .ofill{ position:absolute; left:var(--ox, 50%); top:var(--oy, 50%); width:var(--od, 0px); height:var(--od, 0px); margin:0; border-radius:50%; background:#DC8855; transform:translate(-50%,-50%) scale(0); transition:transform .5s cubic-bezier(.16,1,.3,1); z-index:-1; pointer-events:none }
.pill.buy.is-fill, .btn-primary.is-fill{ color:#1E1E1E !important; border-color:#DC8855 !important }
.pill.buy.is-fill .ofill, .btn-primary.is-fill .ofill{ transform:translate(-50%,-50%) scale(1) }
.pill.buy:hover, .btn-primary:hover{ filter:none; transform:translateY(-1px); box-shadow:0 1px 0 rgba(0,0,0,.45), 0 14px 28px -12px rgba(220,136,85,.45) !important }
.pill.buy:active, .btn-primary:active{ transform:translateY(0) scale(.985); filter:none; box-shadow:0 1px 0 rgba(0,0,0,.35) !important }
.pill.buy s, .btn-primary s{ opacity:.6 }
/* the hero's Try it free: flat, a clear centre, a white outline and white type, so it sits under the orange button (Jack 2026-09-24) */
.stage .ctas .pill:not(.buy), #bar .pill:not(.buy){ background:transparent !important; border:1.5px solid rgba(240,240,240,.85) !important; color:#F0F0F0 !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; text-shadow:none }
.stage .ctas .pill:not(.buy):hover, #bar .pill:not(.buy):hover{ background:rgba(240,240,240,.08) !important; border-color:#F0F0F0 !important; transform:none; box-shadow:none !important }
.stage .ctas .pill:not(.buy):active, #bar .pill:not(.buy):active{ transform:translateY(1px); box-shadow:none !important }