/* Holy Plugins site · style pack v2 (dark studio) + light mode from the device setting.
   Buttons, fields and tags are rounded rectangles (12px), like the deck. Never full pills. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --page: #0d0c0b; --surface: #161513; --raised: #1f1d1a;
  --ink: #f1ebe0; --muted: #a39a8c; --line: rgba(241,235,224,.12);
  --gold: #e2a44c; --gold-text: #e2a44c; --on-gold: #14110d; --gold-soft: rgba(226,164,76,.10);
  --glow: rgba(226,164,76,.18); --glow2: rgba(255,236,210,.06); --bar: rgba(13,12,11,.82);
  --deck-shadow: drop-shadow(0 0 90px rgba(255,236,210,.18)) drop-shadow(0 40px 60px rgba(0,0,0,.8));
  --card-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --r: 12px; --r-card: 20px;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page: #f6f1e7; --surface: #fffaf1; --raised: #efe7d8;
    --ink: #1e1b18; --muted: #5f574c; --line: rgba(30,27,24,.12);
    --gold: #c8862a; --gold-text: #8a5a14; --gold-soft: rgba(200,134,42,.10);
    --glow: rgba(200,134,42,.20); --glow2: rgba(255,255,255,.7); --bar: rgba(246,241,231,.85);
    --deck-shadow: drop-shadow(0 34px 50px rgba(60,40,20,.35)) drop-shadow(0 8px 16px rgba(60,40,20,.18));
    --card-shadow: 0 24px 60px rgba(60,40,20,.14), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .only-dark { display: none !important; }
}
@media (prefers-color-scheme: dark) { .only-light { display: none !important; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
  margin: 0; background: var(--page); color: var(--ink); font: 17px/1.6 var(--sans);
  background-image: radial-gradient(ellipse 90% 60% at 50% -10%, var(--glow), transparent 70%),
                    radial-gradient(ellipse 60% 40% at 85% 40%, var(--glow2), transparent 70%);
  background-repeat: no-repeat; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.kicker { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.serif { font-family: var(--serif); font-weight: 400; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1; }
h1 em, h2 em, h3 em, .serif em { color: var(--gold-text); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.btn, .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 28px;
  border-radius: var(--r); font: 600 16px var(--sans); text-decoration: none; cursor: pointer; border: 0;
  transition: transform .2s, box-shadow .2s, background .2s; }
.btn { background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 30px var(--glow); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px var(--glow); }
.btn2 { background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold); font-weight: 500; padding: 0 24px; }
.btn2:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn.sm, .btn2.sm { height: 40px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.field { font: inherit; height: 50px; padding: 0 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); width: 100%; }
.tag { font: 500 11px var(--mono); letter-spacing: .14em; padding: 5px 10px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-text); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }

/* header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.hdr { height: 72px; background: var(--bar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hdr .in { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.hdr .mark img { width: 44px; height: 44px; }
.hdr .word img { height: 30px; width: auto; max-width: 46vw; }
.hdr .acts { justify-self: end; display: flex; gap: 4px; }
.ibtn { position: relative; width: 44px; height: 44px; border-radius: var(--r); border: 0; background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ibtn:hover { background: var(--gold-soft); }
.badge { position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 6px; background: var(--gold); color: var(--on-gold); font: 500 10px/16px var(--mono); text-align: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.badge.on { transform: scale(1); }
.buybar { background: var(--bar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.buybar .in { max-width: 1180px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.buybar .nm { font-family: var(--serif); font-size: 24px; margin-right: 10px; }
.buybar .pr { font: 13px var(--mono); color: var(--muted); }
main { padding-top: 72px; }
body.has-buybar main { padding-top: 129px; }

/* menu sheet */
.sheet { position: fixed; inset: 0; z-index: 80; background: var(--page); display: flex; flex-direction: column; padding: 18px 24px 40px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet .close { align-self: flex-end; }
.sheet nav { margin: auto 0; display: flex; flex-direction: column; gap: 10px; }
.sheet nav a { font: 400 clamp(44px, 8vw, 80px)/1.05 var(--serif); color: var(--ink); text-decoration: none; }
.sheet nav a:hover { color: var(--gold-text); }

/* bag drawer */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.bag { position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: min(420px, 100vw); background: var(--surface); border-left: 1px solid var(--line);
  padding: 24px; display: flex; flex-direction: column; gap: 22px; transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.bag.open { transform: none; }
.bag .hd { display: flex; justify-content: space-between; align-items: center; }
.bag h2 { font-size: 36px; }
.bag .item { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bag .item .deck-mount { width: 104px; flex: 0 0 104px; }
.bag .item .txt { flex: 1; }
.bag .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; }
.bag .total b { font: 400 28px/1.1 var(--serif); text-align: right; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 28px; }

/* deck (the rendered plugin) */
.deck-mount { position: relative; width: 100%; aspect-ratio: 724 / 593; filter: var(--deck-shadow); }
.deck-glow { position: relative; }
.deck-glow::before { content: ""; position: absolute; inset: 6% 2% -8% 2%; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(36px); }
.deck { position: absolute; left: 0; top: 0; width: 724px; height: 593px; transform-origin: 0 0; border-radius: 14px; user-select: none; -webkit-user-select: none; }
.deck > img.plate { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; }
.deck .reel { position: absolute; top: 28px; width: 280px; height: 280px; } .deck .reel.l { left: 50px; } .deck .reel.r { left: 394px; }
.deck .print { position: absolute; color: #d8cdb8; text-shadow: 0 1px 0 rgba(0,0,0,.6); pointer-events: none; }
/* the plugin's own maker badge + hand lettering (plugin assets, same spots as PluginEditor.cpp) */
.deck .maker { position: absolute; left: 30px; top: 3px; width: 34px; height: 34px; pointer-events: none; }
.deck .pname { position: absolute; left: 0; right: 0; top: 6px; height: 30px; margin: 0 auto; width: auto; pointer-events: none; }
.deck .key { position: absolute; top: 8px; right: 44px; width: 26px; height: 24px; border-radius: 6px; color: #e9e2d4; font: 600 12px var(--sans); display: flex; align-items: center; justify-content: center; background: linear-gradient(#3a3734,#24221f); box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
/* Readout, scale and labels: the plugin's own numbers (fruity-speed PluginEditor.cpp, request 15 fonts).
   JUCE font sizes are heights: CSS size = height / 1.3 (Plex Mono) or / 1.276 (Space Grotesk). Glass box = 248,314. */
.deck .glass { position: absolute; left: 248px; top: 314px; width: 228px; height: 58px; border-radius: 6px; overflow: hidden; font-family: var(--mono); --led: rgba(201,191,168,.8); }
.deck .glass[data-dir="down"] { --led: #ffab3d; }
.deck .glass[data-dir="up"] { --led: #9fe3ff; }
.deck .glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%); pointer-events: none; }
.deck .glass > * { position: absolute; white-space: nowrap; }
.deck .lamp { left: 3.7px; top: 2.2px; width: 4.6px; height: 4.6px; border-radius: 50%; background: #7dff8a; box-shadow: 0 0 4px #7dff8a; }
.deck .lbl { font: 400 5.4px/10px var(--mono); letter-spacing: .234em; color: #8a8172; }
.deck .lbl.st { left: 11.5px; top: -.5px; }
.deck .lbl.ky { right: 19px; top: 2.5px; line-height: 9px; }
.deck .redo { left: 210px; top: 2px; width: 12px; height: 10px; font: 600 7.7px/10px var(--mono); text-align: center; color: #8a8172; }
.deck .amt { left: 6px; top: 13px; width: 130px; font: 600 14.6px/24px var(--mono); color: var(--led); }
.deck .root { right: 50px; top: 11px; font: 600 10.8px/17px var(--mono); color: #ffa63d; }
.deck .mode { left: 180px; width: 42px; text-align: right; top: 11px; font: 600 10px/17px var(--mono); color: #ffa63d; }
.deck .tempo { left: 2px; top: 41px; width: 224px; text-align: center; font: 400 7.7px/14px var(--mono); color: var(--led); opacity: .85; }
.deck .scale { position: absolute; inset: 0; width: 724px; height: 593px; pointer-events: none; }
.deck .num { position: absolute; transform: translate(-50%,-50%); font: 500 7.45px var(--sans); color: #d6ccb8; text-shadow: 0 .8px 0 rgba(0,0,0,.6); pointer-events: none; }
.deck .num.zero { font-size: 9.4px; font-weight: 600; }
.deck .semi { left: 0; right: 0; top: 548px; height: 16px; text-align: center; font: 600 8.6px/16px var(--sans); letter-spacing: .357em; padding-left: .357em; color: #d6ccb8; }
.deck .adv { left: 46px; bottom: 17px; font: 400 7.85px var(--sans); letter-spacing: .026em; color: #9c9382; padding: 6px 4px; }
.deck .halo { position: absolute; left: 282px; top: 400px; width: 160px; height: 160px; pointer-events: none; overflow: visible; }
.deck .halo path { fill: none; stroke: #e2a44c; stroke-linecap: round; }
.deck .knob { position: absolute; left: 292px; top: 410px; width: 140px; height: 140px; border-radius: 50%; }
.deck .knob img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.deck.live .knob { cursor: grab; touch-action: none; }
.deck.live .knob.dragging { cursor: grabbing; }
.deck .knob:focus-visible { outline: 2px solid #e2a44c; outline-offset: 6px; }
.deck .hint { position: absolute; left: 446px; top: 472px; font: 500 11px var(--mono); letter-spacing: .14em; color: #e2a44c; pointer-events: none; white-space: nowrap; transition: opacity .5s; }
.deck .hint.gone { opacity: 0; }

/* sections */
.hero { text-align: center; padding: 64px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero h1 { font-size: clamp(76px, 13vw, 168px); line-height: .95; letter-spacing: -.01em; }
.hero .lead { font-size: 20px; line-height: 30px; max-width: 580px; margin: 0; }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero .deck-glow { width: 100%; max-width: 780px; margin-top: 36px; }
.cue { margin: 24px auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-text); font: 500 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.cue span.box { width: 48px; height: 48px; border-radius: var(--r); border: 1px solid var(--gold); background: var(--gold-soft); display: flex; align-items: center; justify-content: center; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.split { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.split > * { flex: 1 1 380px; min-width: 0; }
.try { padding: 40px; }
.try h2 { font-size: 60px; }
.tracks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.track { display: flex; align-items: stretch; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .2s, background .2s; }
.track.on { border-color: var(--gold); background: var(--gold-soft); }
.track .pick { flex: 1; min-height: 64px; padding: 12px 18px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-family: inherit; }
.track .pick b { font-size: 17px; font-weight: 600; } .track .pick span { font-size: 13px; color: var(--muted); }
.track .play { width: 64px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.track .play.playing { background: var(--gold); color: var(--on-gold); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.steps .card { padding: 28px; }
.steps .n { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--gold-text); margin: 0 0 8px; }
.steps h3 { font-size: 38px; margin-bottom: 8px; }
.steps p { margin: 0; font-size: 16px; color: var(--muted); }
.buy { padding: 40px; display: flex; flex-direction: column; gap: 48px; }
.buy h2 { font-size: 68px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price .now { font: 400 44px/1 var(--serif); }
.price s { color: var(--muted); }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; }
.feats b { display: block; font-size: 17px; margin-bottom: 4px; } .feats p { margin: 0; font-size: 15px; line-height: 23px; color: var(--muted); }
.specs { margin: 0; display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); background: var(--raised); border-radius: 14px; padding: 4px 20px; }
.specs dt { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
.specs dd { margin: 0; font: 15px/22px var(--mono); padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt:nth-last-of-type(1), .specs dd:last-of-type { border-bottom: 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0 16px; }
.faq summary { font-size: 17px; font-weight: 500; cursor: pointer; padding: 10px 0; min-height: 44px; }
.faq p { margin: 0; color: var(--muted); }
.about { text-align: center; padding: 96px 0; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about p.big { margin: 0; font: 400 40px/46px var(--serif); }
.about img { width: 72px; height: 72px; }

/* session strip: three deck readouts on a run of tape */
.session { padding: 8px 0 24px; }
.tape { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.tape::before { content: ""; position: absolute; left: 4%; right: 4%; top: 41px; height: 6px; border-radius: 3px;
  background: linear-gradient(#5a4232, #3b2a1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.35); }
.tape li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.tape li p { margin: 0; max-width: 300px; font-size: 16px; line-height: 25px; color: var(--muted); }
.tape .n { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-top: 14px; }
.lcd { position: relative; width: 190px; padding: 9px 14px 8px; border-radius: 8px; font-family: var(--mono); color: #f3a644; text-align: left;
  background: linear-gradient(#141210, #0b0a09); border: 2px solid #3a3632;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.45), inset 0 1px 6px rgba(0,0,0,.8); }
.lcd::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(165deg, rgba(255,255,255,.10), transparent 40%); pointer-events: none; }
.lcd .l { display: flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: .18em; color: #8a7255; }
.lcd .dot { width: 6px; height: 6px; border-radius: 50%; background: #6fe08a; box-shadow: 0 0 6px #6fe08a; }
.lcd.rec .dot { background: #ff4a3d; box-shadow: 0 0 6px #ff4a3d; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.lcd b { display: block; font-size: 22px; font-weight: 600; margin: 2px 0; text-shadow: 0 0 6px rgba(243,166,68,.75), 0 0 16px rgba(243,166,68,.3); }
.lcd .t { font-size: 11px; color: #d0913f; text-shadow: 0 0 6px rgba(243,166,68,.4); }
@media (max-width: 760px) {
  .tape { grid-template-columns: 1fr; gap: 36px; }
  .tape::before { display: none; }
  .tape li + li { padding-top: 36px; border-top: 1px solid var(--line); }
}

/* footer */
footer { border-top: 1px solid var(--line); margin-top: 24px; }
footer .in { max-width: 1100px; margin: 0 auto; padding: 56px 24px 32px; display: flex; flex-direction: column; gap: 48px; }
footer form { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end; }
footer form > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
footer nav { display: flex; flex-wrap: wrap; gap: 32px 72px; }
footer nav div { display: flex; flex-direction: column; gap: 10px; }
footer nav a { color: var(--ink); text-decoration: none; } footer nav a:hover { color: var(--gold-text); }
footer .legal { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 20px; font: 12px var(--mono); color: var(--muted); }
footer .legal p { margin: 0; }

/* help + account */
.side { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; padding: 56px 0 88px; }
.side > nav { flex: 1 1 200px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; }
.side > nav a { color: var(--ink); text-decoration: none; } .side > nav a:hover { color: var(--gold-text); }
.side > div { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.side section + section { border-top: 1px solid var(--line); padding-top: 40px; }
.side h2 { font-size: 44px; margin-bottom: 16px; }
.side h3 { font: 600 18px var(--sans); margin: 20px 0 8px; }
.side ol, .side ul { padding-left: 22px; margin: 0; } .side li { margin: 6px 0; }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th, table.t td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
table.t th { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.notice { font: 13px var(--mono); color: var(--muted); }

@media (max-width: 700px) {
  .try, .buy { padding: 24px; }
  .try h2 { font-size: 46px; } .buy h2 { font-size: 54px; }
  .about p.big { font-size: 32px; line-height: 38px; }
  .buybar .nm { font-size: 20px; } .buybar .pr s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* currency picker (rounded rectangle, never a pill) */
.cur { font: 500 13px var(--mono); letter-spacing: .06em; height: 44px; padding: 0 30px 0 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cur:hover { background-color: var(--gold-soft); }
.cur option { color: #1e1b18; }
.curline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu-cur { display: none; margin-top: 24px; max-width: 320px; }
@media (max-width: 560px) { #curTop { display: none; } .menu-cur { display: flex; } }

/* hand lettering: the plugin's own hand for the big headlines + product name (Harry 31 Oct) */
.hl { display: flex; flex-direction: column; gap: .12em; line-height: 1; }
.hl .hand { display: block; height: clamp(58px, 7.4vw, 104px); }
.hl .hand svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.hl .hand.gold { color: var(--gold-text); }
.hl-name { align-items: center; }
.hl-name .hand { height: clamp(84px, 11vw, 150px); }
.hl-card .hand { height: 64px; }

/* email sign-up (plan 3 task 6): footer, under the home hero, end of the product page, /join, and the pop-up */
.su { display: flex; flex-direction: column; gap: 18px; }
.su h2 { font-size: clamp(34px, 5vw, 48px); line-height: 1.02; margin: 0; }
.su-lead { margin: 10px 0 0; max-width: 46ch; }
.su form { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.su form .btn { grid-column: 1 / -1; width: 100%; }
.su-fine { margin: 12px 0 0; font-size: 13px; }
.su-msg { margin: 10px 0 0; font-size: 15px; } .su-msg:empty { display: none; }
.su-msg.err { color: #d9583b; }
.su-done { display: none; margin: 0; font-size: 18px; }
.su.is-done form, .su.is-done .su-fine, .su.is-done .su-msg { display: none; }
.su.is-done .su-done { display: block; }
.su .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.su-card { max-width: 1080px; margin: 0 auto; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: center;
  background-image: radial-gradient(ellipse 70% 90% at 0% 0%, var(--gold-soft), transparent 70%); }
.su-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; align-items: end; }
.su-footer h2 { font-size: 40px; line-height: 44px; }
.su-big { max-width: 560px; margin: 0 auto; text-align: center; align-items: center; }
.su-big h2 { font-size: clamp(48px, 9vw, 76px); line-height: .98; }
.su-big .su-lead { margin-left: auto; margin-right: auto; font-size: 18px; }
.su-big .su-box { width: 100%; }
.join-page { padding-top: 48px; padding-bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.join-deck { width: min(420px, 90%); }
@media (max-width: 760px) {
  .su-card, .su-footer { grid-template-columns: 1fr; }
  .su-card { padding: 28px 22px; }
}
@media (max-width: 480px) { .su form { grid-template-columns: 1fr; } }

/* pop-up: centred card on desktop, bottom sheet on phones */
.pop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8,7,6,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.pop.open { opacity: 1; pointer-events: auto; }
.pop-card { position: relative; width: 100%; max-width: 520px; padding: 36px 30px 22px; text-align: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, var(--gold-soft), transparent 70%);
  transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pop.open .pop-card { transform: none; }
.pop .su-lead { margin-left: auto; margin-right: auto; }
.pop-x { position: absolute; top: 10px; right: 10px; color: var(--muted); }
.pop-no { margin-top: 10px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.pop-no:hover { color: var(--ink); }
@media (max-width: 640px) {
  .pop { align-items: flex-end; padding: 0; }
  .pop-card { max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); }
  .pop-card::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: -18px auto 18px; }
}
@media (prefers-reduced-motion: reduce) { .pop, .pop-card { transition: none; } }

/* cookie banner (Europe only, Clarity) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin: 0 auto; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 12px; }
.consent[hidden] { display: none; }
.consent p { margin: 0; font-size: 15px; line-height: 22px; }
.consent .row-btns { justify-content: flex-start; gap: 10px; }

/* ---- Free plugins first (Harry 31 Oct 18:43) ---- */
[hidden] { display: none !important; }
.free-hero { text-align: center; padding: 56px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.free-hero .names { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; color: var(--ink); }
.free-hero .fname { height: clamp(56px, 9vw, 104px); width: auto; color: var(--ink); }
.free-hero .amp { font: 400 clamp(36px, 6vw, 64px)/1 var(--serif); color: var(--gold-text); }
.free-hero h1 { font-size: clamp(44px, 7vw, 84px); line-height: 1; margin: 0; }
.free-hero .lead { font-size: 20px; line-height: 30px; max-width: 560px; margin: 0; }
.free-hero .shot { width: 100%; max-width: 980px; height: auto; margin-top: 28px; border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.free-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; width: 100%; max-width: 980px; text-align: left; }
.free-two .card { padding: 26px 28px; }
.free-two h3 { font-size: 34px; margin: 0 0 6px; }
.free-two p { margin: 0; }
.soon-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 0 var(--gold); animation: soonPulse 2s ease-out infinite; }
@keyframes soonPulse { 0% { box-shadow: 0 0 0 0 rgba(226,164,76,.6); } 100% { box-shadow: 0 0 0 10px rgba(226,164,76,0); } }
.soon-line { margin: 4px 0 0; }
.sheet nav small.soon { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin-left: 8px; vertical-align: middle; }

/* ---- "Try it yourself" coach on the demo deck (Harry 31 Oct 18:43): ring + nudge on the knob, callout with an arrow.
   Sits over the deck in % (knob centre = 50% x, 81% y of the 724 × 593 deck) so it stays readable on phones. ---- */
.deck .hint { display: none; }
.coach { position: absolute; inset: 0; pointer-events: none; z-index: 3; transition: opacity .5s; }
.coach.gone { opacity: 0; }
.coach .ring { position: absolute; left: 50%; top: 81%; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 24px rgba(226,164,76,.55); animation: coachRing 1.8s ease-out infinite; }
.coach .ring.b { animation-delay: .9s; }
@keyframes coachRing { 0% { transform: translate(-50%, -50%) scale(.92); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; } }
.coach .call { position: absolute; left: 68%; top: 46%; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 11px; border-radius: var(--r); background: var(--gold); color: var(--on-gold); box-shadow: 0 14px 30px rgba(0,0,0,.45); animation: coachBob 1.8s ease-in-out infinite; }
.coach .call b { font: 600 clamp(13px, 1.6vw, 16px)/1.15 var(--sans); white-space: nowrap; }
.coach .call span { font: 500 clamp(10px, 1.2vw, 12px)/1.2 var(--mono); letter-spacing: .06em; white-space: nowrap; opacity: .85; }
.coach .arrow { position: absolute; left: 55%; top: 60%; width: 15%; height: auto; overflow: visible; animation: coachBob 1.8s ease-in-out infinite; }
.coach .arrow path { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
@keyframes coachBob { 50% { transform: translate(-4px, 4px); } }
.deck.live.nudge .knob { animation: knobNudge 2.4s ease-in-out infinite; }
@keyframes knobNudge { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-16deg); } 78% { transform: rotate(14deg); } 88% { transform: rotate(-5deg); } }
@media (max-width: 560px) { .coach .call { left: 60%; top: 44%; padding: 7px 10px 8px; } .coach .arrow { left: 52%; top: 58%; } }
@media (prefers-reduced-motion: reduce) { .coach .ring, .coach .call, .coach .arrow, .deck.live.nudge .knob, .soon-dot { animation: none; } }
@media (max-width: 760px) { .try.split > .deck-glow { order: -1; } }

/* ---- Teaser mode (Harry 31 Oct 18:52): no product name or details, "something special · 10 Dec" ---- */
.soon-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; margin-right: 6px; border-radius: var(--r); border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-text); font: 500 13px var(--mono); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.soon-btn:hover { background: var(--gold); color: var(--on-gold); }
.soon-btn .soon-dot { margin-right: 8px; }
@media (max-width: 640px) { .soon-btn { padding: 0 9px; height: 32px; font-size: 11px; letter-spacing: .02em; margin-right: 0; } .soon-btn .soon-dot { margin-right: 6px; } }
.tease { padding: 88px 24px 72px; }
.tease-card { max-width: 980px; margin: 0 auto; padding: 56px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; overflow: hidden; }
.tease-card::before { content: ""; position: absolute; inset: -30% 10% auto; height: 120%; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(30px); pointer-events: none; }
.tease-card > * { position: relative; }
.tease h2.hl, .soon-page h1.hl { display: flex; flex-direction: column; align-items: center; gap: 0; }
.tease .hl .hand { height: clamp(64px, 10vw, 120px); }
.tease .lead, .soon-page .lead { font-size: 20px; line-height: 30px; max-width: 560px; margin: 0; }
.soon-page { text-align: center; padding: 88px 24px 56px; display: flex; flex-direction: column; align-items: center; gap: 22px; min-height: 62vh; justify-content: center; }
.soon-page .hl .hand { height: clamp(80px, 14vw, 170px); }
.count { display: flex; gap: 12px; margin-top: 10px; }
.count > div { min-width: 82px; padding: 14px 10px 10px; border-radius: var(--r); background: #141210; border: 1px solid rgba(226,164,76,.35); box-shadow: inset 0 2px 10px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; }
.count b { font: 600 34px/1 var(--mono); color: #ffab3d; text-shadow: 0 0 12px rgba(255,171,61,.45); }
.count span { font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #8a8172; margin-top: 6px; }
@media (max-width: 480px) { .count > div { min-width: 68px; } .count b { font-size: 26px; } }
.join-tease { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.join-tease .hand { display: block; height: clamp(60px, 12vw, 120px); } .join-tease .hand svg { height: 100%; width: auto; } .join-tease .hand.gold { color: var(--gold-text); }

/* Free plugins: the real plugin renders on the page itself, poking out with the deck's shadow (no dark box; Harry 31 Oct 19:05) */
.free-hero .plugs { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(18px, 4vw, 48px); width: 100%; max-width: 860px; margin: 36px 0 28px; padding: 0 8px; isolation: isolate; }
.free-hero .plugs::before { content: ""; position: absolute; inset: 4% 6% -6%; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(36px); z-index: -1; }
.free-hero .plugs img { height: auto; filter: var(--deck-shadow); border-radius: 10px; }
.free-hero .plugs .pk { width: 41%; margin-bottom: 4%; }  /* pitch left, key right */
.free-hero .plugs .pp { width: 41%; }

/* ---- Free plugins pages as part of the site (Harry 31 Oct 20:50) ---- */
.free-get form { grid-template-columns: 1fr 1.4fr; }
.free-get form .wide { grid-column: 1 / -1; }
.locked-note { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--gold); background: var(--gold-soft); font-size: 15px; }
.free-prod { padding-bottom: 56px; }
.free-prod-card { max-width: 1080px; margin: 0 auto; padding: 40px; }
.free-prod-img { display: flex; justify-content: center; }
.free-prod-img img { width: 78%; max-width: 380px; height: auto; filter: var(--deck-shadow); border-radius: 10px; }
.free-prod .hl-card .hand { height: 60px; }
.fl-tease-card { max-width: 1080px; margin: 0 auto; padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fl-tease-card h2 { font-size: clamp(32px, 5vw, 48px); margin: 0; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1080px; margin: 32px auto 0; }
.dl-card { padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.dl-card > img { width: 62%; max-width: 280px; height: auto; filter: var(--deck-shadow); border-radius: 10px; }
.dl-card .dl-txt { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.dl-card .hl-card .hand { height: 52px; }
.dl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 6px; }
.dl .btn, .dl .btn2 { flex: 1 1 160px; height: auto; min-height: 58px; flex-direction: column; gap: 0; padding: 10px 18px; }
.dl small { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.dl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1080px; margin: 24px auto 0; }
.dl-steps .card { padding: 26px 28px; } .dl-steps ol { margin: 10px 0 0; padding-left: 20px; } .dl-steps li { margin-bottom: 6px; }
.su form.one { grid-template-columns: 1fr; }
.press-kit { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
.press-kit .plugs { margin: 20px auto 0; }
.press-kit blockquote { margin: 0; padding: 18px 20px; border-left: 3px solid var(--gold); background: var(--surface); border-radius: 0 12px 12px 0; }
.press-kit h2 { font-size: 34px; margin: 18px 0 0; }
.press-kit .plugs { display: flex; align-items: flex-end; justify-content: center; gap: 32px; }
.press-kit .plugs img { width: 38%; height: auto; filter: var(--deck-shadow); border-radius: 10px; }

/* /free simpler (Harry 31 Oct 20:57): stacked cards (pitch in front, key behind), one button → pop-up */
.stack { position: relative; width: 100%; max-width: 620px; aspect-ratio: 620 / 520; margin: 40px auto 8px; isolation: isolate; }
.stack::before { content: ""; position: absolute; inset: 6% 4% -6%; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(36px); z-index: -1; }
.stack img { position: absolute; height: auto; filter: var(--deck-shadow); border-radius: 10px; }
.stack .sk { width: 44%; right: 8%; top: 4%; transform: rotate(5deg); }
.stack .sp { width: 48%; left: 14%; top: 10%; transform: rotate(-3deg); z-index: 1; }
.free-details { padding-bottom: 56px; }
.free-details-card { max-width: 1080px; margin: 0 auto; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.free-details .free-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 48px; }
.free-details .free-two h3 { margin: 0 0 6px; } .free-details .free-two p { margin: 0; }
.free-details .hl-card .hand { height: 52px; }
.free-details .row-btns { justify-content: flex-start; }
.su-pop { text-align: left; } .su-pop h2 { font-size: 40px; }
/* bigger main button on /free (Harry 31 Oct 21:01) */
.btn-xl { height: 64px; padding: 0 40px; font-size: 19px; font-weight: 600; border-radius: 14px; box-shadow: 0 14px 40px var(--glow), 0 0 0 6px var(--gold-soft); animation: ctaGlow 2.6s ease-in-out infinite; }
.btn-xl span { transition: transform .2s; } .btn-xl:hover span { transform: translateX(4px); }
@keyframes ctaGlow { 50% { box-shadow: 0 18px 48px var(--glow), 0 0 0 10px var(--gold-soft); } }
.cta-note { margin: 0; font-size: 14px; }
.stack-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
@media (max-width: 480px) { .btn-xl { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn-xl { animation: none; } }