/* Vocalings phone site (2026-10-12) — DESIGN_SPEC.md. One Sentence style, built phone-first (390 px), calm centred
   column from 768 px. Full-bleed colour plates are the only dividers. No filter / backdrop-filter / mix-blend-mode
   anywhere (iPhone Safari painted a white box around a filtered video parent, v3.7). */
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-display:optional}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Bold.woff2") format("woff2");font-weight:700;font-display:optional}
/* fallback sized near Bricolage so a late font swap doesn't push the buttons around */
@font-face{font-family:"Bricolage Fallback";src:local("HelveticaNeue-CondensedBold"),local("Helvetica Neue Condensed Bold"),local("Arial Bold"),local("Arial-BoldMT");
  size-adjust:92%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

:root{
  --paper:#fff;--ink:#000;--pink:#ff4fcf;--yellow:#fbe85a;--navy:#0b1430;--cyan:#3fe9ff;
  --fine:#4d4d4d;--struck:#6f6f6f;--on-black-2:#c9c9c9;--on-navy-2:#b8c0dd;--rule:#000;--dock-line:rgba(0,0,0,.12);
  --font:"Bricolage Grotesque","Bricolage Fallback","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gutter-l:max(16px,env(safe-area-inset-left));--gutter-r:max(16px,env(safe-area-inset-right));
  --col:600px;--nav-h:52px;
  --r-pill:999px;--r-bubble:22px;--r-focus:8px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-lift:cubic-bezier(.34,1.36,.64,1);
  --t-press:120ms;--t-release:200ms;--t-exit:150ms;--t-lift:480ms;--t-lift-fade:140ms;--t-move:220ms;--stagger:70ms;
  --t-dock-in:260ms;--t-dock-out:180ms;--t-icon:180ms;
}

/* ───────── base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;color-scheme:light;
  scroll-padding-top:8px;scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--font);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,dl,dd,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
a,button,summary{touch-action:manipulation}
button,summary,.btn{-webkit-user-select:none;user-select:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-focus)}
.plate--navy :focus-visible,.plate--black :focus-visible,.dock :focus-visible{outline-color:var(--yellow)}
.dock :focus-visible{outline-color:var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:calc(var(--col) + 32px);margin-inline:auto;padding-inline:var(--gutter-l) var(--gutter-r)}

/* plates: full-bleed colour, the hard edge between two plates is the divider */
.plate{padding-block:64px}
.plate--white{background:var(--paper);color:var(--ink)}
.plate--pink{background:var(--pink);color:var(--ink)}
.plate--yellow{background:var(--yellow);color:var(--ink)}
.plate--navy{background:var(--navy);color:#fff}
.plate--black{background:#000;color:#fff}

/* ───────── type ───────── */
.h1,.h2,.h3,.lede,.price,.sum,.genres,.tick,.amt{font-family:var(--font);font-weight:800}
.h1{font-size:clamp(36px,11.8vw,72px);font-size:clamp(36px,min(11.8vw,7svh),72px);text-wrap:balance;line-height:.93;letter-spacing:-.025em;
  font-variation-settings:"wdth" 85;min-height:calc(2 * .93em)}
.h2{font-size:clamp(34px,10.77vw,60px);line-height:.95;letter-spacing:-.022em;font-variation-settings:"wdth" 86;text-wrap:balance}
.h3{font-size:clamp(22px,6.15vw,28px);line-height:1.05;letter-spacing:-.012em;font-variation-settings:"wdth" 88}
.lede{font-size:clamp(22px,6.15vw,30px);font-weight:700;line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wdth" 92;text-wrap:balance}
.body{font-size:17px;line-height:1.5}
.fine{font-size:15px;line-height:1.35;color:var(--fine)}
.plate--black .body--2{color:var(--on-black-2)}

/* ───────── buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border-radius:var(--r-pill);
  font:700 17px/1 var(--font);font-variation-settings:"wdth" 92;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-release) var(--ease-out),background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.btn:active{transform:scale(.97);transition-duration:var(--t-press)}
.btn--primary{background:var(--ink);color:#fff}
button.btn{border:0;cursor:pointer}
.btn--secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--lg{min-height:56px;font-size:18px}
.plate--black .btn--primary{background:var(--yellow);color:var(--ink)}
.plate--black .btn--secondary{color:#fff;box-shadow:inset 0 0 0 2px #fff}
@media (max-width:359px){.btn{font-size:15px;padding:0 10px}}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--pink);color:var(--ink)}
  .plate--pink .btn--primary:hover{background:#fff;color:var(--ink)}
  .plate--black .btn--primary:hover{background:#fff;color:var(--ink)}
  .btn--secondary:hover{background:var(--ink);color:#fff}
  .plate--black .btn--secondary:hover{background:#fff;color:var(--ink)}
  .vbtn:hover svg{opacity:.7}
}
.cta{display:grid;grid-template-columns:1.45fr 1fr;gap:10px;width:100%}
.cta--stack{grid-template-columns:1fr;gap:10px}

/* video pause/play: 44 px target, 32 px ring */
.vbtn{position:relative;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer;display:grid;place-items:center;
  transition:transform var(--t-release) var(--ease-out)}
.vbtn::before{content:"";position:absolute;inset:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.vbtn:active{transform:scale(.97);transition-duration:var(--t-press)}
.vbtn svg{position:relative;width:12px;height:12px;fill:currentColor}   /* above the ::before disc */
.vbtn .g-play{display:none}
.vbtn.is-paused .g-pause{display:none}
.vbtn.is-paused .g-play{display:inline}

/* ───────── 0 HERO ───────── */
/* ───────── NAV ───────── */
.nav{position:relative;z-index:50;height:calc(var(--nav-h) + env(safe-area-inset-top));background:#fff;padding-top:env(safe-area-inset-top)}   /* scrolls away (Itay 2026-10-12) */
.nav.is-open .nav-in{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;padding-top:env(safe-area-inset-top);height:calc(var(--nav-h) + env(safe-area-inset-top))}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dock-line);opacity:0;transition:opacity 200ms var(--ease-out)}
.nav.is-open::after{opacity:1}
.nav.is-open .nav-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dock-line)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:calc(var(--col) + 32px);margin-inline:auto;padding-inline:var(--gutter-l) var(--gutter-r)}
.nav-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 22px/1 var(--font);font-variation-settings:"wdth" 85;letter-spacing:-.04em;text-decoration:none}
.nav-brand img{width:32px;height:32px;margin:-2px 0}
.nav-links{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:-8px;padding:0 8px 0 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink);
  font:700 16px/1 var(--font);font-variation-settings:"wdth" 92;cursor:pointer;transition:transform var(--t-release) var(--ease-out)}
.menu-btn:active{transform:scale(.97);transition-duration:var(--t-press)}
.menu-ic{position:relative;width:20px;height:12px}
.menu-ic i{position:absolute;left:0;right:0;height:2px;border-radius:1px;background:currentColor;transition:transform 200ms var(--ease-out)}
.menu-ic i:first-child{top:1px}
.menu-ic i:last-child{bottom:1px}
.nav.is-open .menu-ic i:first-child{transform:translateY(4px) rotate(45deg)}
.nav.is-open .menu-ic i:last-child{transform:translateY(-4px) rotate(-45deg)}
/* the menu: a full-screen sheet under the bar */
.menu{position:fixed;left:0;right:0;bottom:0;top:calc(var(--nav-h) + env(safe-area-inset-top));background:#fff;overflow-y:auto;overscroll-behavior:contain;
  padding:8px var(--gutter-r) calc(24px + env(safe-area-inset-bottom)) var(--gutter-l);display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  opacity:0;transform:translateY(-8px);transition:opacity 150ms var(--ease-in),transform 150ms var(--ease-in)}
.menu[hidden]{display:none}   /* the closed sheet must not sit (invisible) over the page and swallow taps */
.menu.is-open{opacity:1;transform:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.menu-links:focus{outline:none}
.menu-links{display:flex;flex-direction:column;max-width:var(--col);width:100%;margin-inline:auto}
.menu-links a{display:flex;align-items:center;min-height:60px;border-bottom:1.5px solid var(--rule);font:800 clamp(28px,8vw,40px)/1 var(--font);font-variation-settings:"wdth" 86;letter-spacing:-.022em;text-decoration:none}
.menu-links a:active{color:#444}
.menu-cta{display:grid;gap:10px;max-width:var(--col);width:100%;margin-inline:auto}
.menu-cta .fine{text-align:center;margin-top:2px}
@media (hover:hover) and (pointer:fine){.menu-links a:hover{color:#444}.nav-links a:hover{text-decoration:underline}}
@media (min-width:900px){
  .menu-btn{display:none}
  .nav-links{display:flex;gap:24px}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;text-decoration:none;text-underline-offset:4px}
}

/* ───────── 0 HERO: exactly the first screen; headline / plugin / buttons spread over the height ───────── */
.hero.plate{padding:0}   /* (.hero.plate: beats the >= 768 .plate padding) */
.hero-in{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h) - env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-block:14px 6px;text-align:center}   /* (Itay: even, ordinary spacing around the headline; nothing stretched; spare height stays below the buttons) */
.hero-in > .demo{margin-top:18px}
.hero-in > .hero-act{margin-top:12px}
.hero-in > *{max-width:100%}
.hero-head,.hero-act{width:100%}
.hero-sub{margin-top:10px;font-size:16px;line-height:1.3;color:var(--fine);text-wrap:balance}
.demo{--plug-w:min(358px,calc(100vw - 32px));width:var(--plug-w);position:relative}
.hero .demo{width:100%}
.ask-row{height:40px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.ask{display:inline-flex;align-items:center;gap:6px;max-width:340px;padding:11px 16px;border-radius:var(--r-bubble);
  background:var(--pink);color:var(--ink);font:800 18px/1.1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.01em;
  white-space:nowrap;position:relative;transform:rotate(-2deg);transform-origin:50% 100%}
.ask::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:14px;margin-left:-7px;background:var(--pink);
  transform:rotate(45deg);border-radius:0 0 3px 0;z-index:-1}
.ask-mic{width:16px;height:16px;display:none;flex:none}
.ask.is-talk .ask-mic{display:block}
/* typing (Itay 2026-10-12): the bubble types the request with a caret, in step with the plugin; SEND = a small hop */
.ask{min-width:44px;justify-content:center}
.ask-c{display:none;width:2px;height:1em;margin-left:-4px;background:var(--ink);border-radius:1px;animation:caret 1s steps(1) infinite}
.ask.is-typing .ask-c{display:inline-block}
@keyframes caret{50%{opacity:0}}
.ask.is-listening .ask-t::after{content:"\2026";letter-spacing:.06em}
.ask.is-sent{animation:sent 280ms var(--ease-out)}
@keyframes sent{40%{transform:translateY(-4px) rotate(-2deg) scale(1.04)}}
.plug{position:relative;margin-top:8px;isolation:isolate}
.plug::after{content:"";position:absolute;left:6%;right:6%;bottom:-10px;height:14px;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.22),rgba(0,0,0,.08) 60%,transparent)}
.mtop{display:block;width:100%;height:auto}
.plug-mask{aspect-ratio:1584/993;-webkit-mask:url(img/chassis_mask.png) 0 0/100% 100% no-repeat;mask:url(img/chassis_mask.png) 0 0/100% 100% no-repeat}
.plug-mask video{display:block;width:100%;height:100%;object-fit:cover}
.result-row{height:36px;margin-top:6px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:4px}
.moves,.dots{grid-area:1/1;min-width:0}
.moves{display:flex;justify-content:center;gap:12px;font:700 16px/1 var(--font);font-variation-settings:"wdth" 88;transition:opacity 150ms var(--ease-out)}
.moves li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.moves li.is-in{animation:moveIn var(--t-move) var(--ease-out) both}
@keyframes moveIn{from{opacity:0;transform:translateY(4px)}}
.ok{width:18px;height:18px;flex:none}
.ok circle{fill:var(--ink)}
.ok path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;justify-content:center;gap:6px;opacity:0;transition:opacity 150ms var(--ease-out)}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.demo[data-state="think"] .moves{opacity:0}
.demo[data-state="think"] .dots{opacity:1}
.demo[data-state="think"] .dots i{animation:dot 1.2s steps(2,jump-none) infinite}
.demo[data-state="think"] .dots i:nth-child(2){animation-delay:150ms}
.demo[data-state="think"] .dots i:nth-child(3){animation-delay:300ms}
@keyframes dot{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
/* sound (2026-10-12, Itay: the header should play audio): speaker-off like a muted reel; on = the raw vocal, then the mix */
.sbtn{grid-area:1/2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border:0;border-radius:var(--r-pill);background:none;
  color:var(--ink);font:700 15px/1 var(--font);font-variation-settings:"wdth" 92;cursor:pointer;position:relative;transition:transform var(--t-release) var(--ease-out)}
.sbtn::before{content:"";position:absolute;inset:5px 0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color 160ms var(--ease-out)}
.sbtn:active{transform:scale(.97);transition-duration:var(--t-press)}
.sbtn svg,.sbtn-t{position:relative}
.sbtn svg{width:20px;height:20px}
.sbtn .spk{fill:currentColor}
.sbtn g path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sbtn .s-on{display:none}
.sbtn[aria-pressed="true"]{color:#fff}
.sbtn[aria-pressed="true"]::before{background:var(--ink)}
.sbtn[aria-pressed="true"] .s-on{display:inline}
.sbtn[aria-pressed="true"] .s-off{display:none}
@media (max-width:389px){.sbtn{padding:0 10px}.sbtn-t{display:none}}
/* tap the plugin to pause / play it (no separate pause button: it read as an audio control) */
.plug-tap{position:absolute;inset:0;z-index:2;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.plug-paused{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,0,0,.62);display:grid;place-items:center;
  opacity:0;transform:scale(.9);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.plug-paused svg{width:16px;height:16px;fill:#fff;margin-left:3px}
.plug-tap.is-paused .plug-paused{opacity:1;transform:none}
@media (max-width:339px){.moves{gap:8px;font-size:15px}.moves .ok{width:16px;height:16px}}
.demo.no-anim *{transition:none!important;animation:none!important}
.hero .fine{margin-top:6px}
/* DAW strip under the hero buttons (Itay 2026-10-12): the best-known DAW icons drifting by */
.cta--hero{display:flex;flex-direction:column;align-items:stretch;gap:0}
.btn--xl{min-height:54px;font-size:19px}
.buy-link{align-self:center;position:relative;display:inline-flex;align-items:center;min-height:36px;margin-top:0;padding:0 8px;
  font:700 17px/1 var(--font);font-variation-settings:"wdth" 92;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  -webkit-user-select:none;user-select:none;transition:transform var(--t-release) var(--ease-out)}
.buy-link::after{content:"";position:absolute;inset:-5px 0}   /* 46 px tall to tap */
.buy-link:active{transform:scale(.97);transition-duration:var(--t-press)}
@media (hover:hover) and (pointer:fine){.buy-link:hover{text-decoration-color:var(--pink)}}
/* "All major DAWs" + the drifting icons on one row */
.daws-row{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px}
.daws-label{flex:none;font-size:14px;font-weight:600;line-height:1.15;color:var(--fine);text-align:left;width:4.6em}
.daw-strip{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 88%,transparent)}
.daw-track{display:flex;gap:16px;width:max-content;padding-right:16px;animation:daws 28s linear infinite}
.daw-track img{width:36px;height:36px;flex:none}
@keyframes daws{to{transform:translateX(-50%)}}
/* short screens and small in-app browsers: drop the result row so both buttons stay on the first screen */
.hero.is-compact .result-row{height:0;margin:0}
.hero.is-compact .moves,.hero.is-compact .dots{display:none}
.hero.is-compact .result-row .sbtn{position:absolute;right:0;bottom:-6px;z-index:3;background:#fff;border-radius:var(--r-pill)}
.hero.is-compact .hero-in{padding-block:8px 8px}
.hero.is-compact .hero-in > .demo{margin-top:34px}
.hero.is-compact .stage{padding:26px 10px 10px}
.hero.is-compact .tries{margin-top:10px}
.hero.is-compact .hero-in > .hero-act{margin-top:10px}
.hero.is-compact .h1{font-size:clamp(30px,min(12.31vw,6.4svh),72px)}
.hero.is-compact .hero-sub{margin-top:4px;font-size:14px}
.hero.is-compact .btn{min-height:48px}
.hero.is-compact .daws-row{display:none}
@media (max-height:600px){
  .hero .result-row{height:0;margin:0}
  .hero .moves,.hero .dots{display:none}
  .hero .result-row .sbtn{position:absolute;right:0;bottom:-6px;z-index:3;background:#fff;border-radius:var(--r-pill)}
  .hero .hero-in{padding-block:8px 8px}
  .hero .hero-in > .hero-act{margin-top:10px}
  .hero .hero-in > .demo{margin-top:34px}
  .hero .stage{padding:26px 10px 10px}
  .hero .cta .btn{min-height:48px}
  .hero .daws-row{display:none}
  .hero .h1{font-size:clamp(30px,min(12.31vw,6.4svh),72px)}
  .hero .hero-sub{margin-top:4px;font-size:14px}
}

/* ───────── 1 WHAT IT IS ───────── */
#what .lede{margin-top:16px}
#what .body{margin-top:16px}
.ticks{margin-top:24px;display:grid;gap:4px}
.tick{min-height:44px;display:flex;align-items:center;gap:12px;font-size:20px;line-height:1.1;letter-spacing:-.01em;font-variation-settings:"wdth" 90}
.tick svg{width:24px;height:24px;flex:none}
.tick circle{fill:var(--ink)}
.tick path{fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ───────── 2-4 STEPS ───────── */
.step{padding:48px 0 32px}
.step-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.step-count{font-size:15px;font-weight:600;white-space:nowrap}
.plate--navy .step-count{color:var(--cyan)}
.plate--yellow .step-count{color:var(--ink)}
.plate--white .step-count{color:var(--fine)}
.step .body{margin-top:12px}
.plate--navy .body{color:#fff}
/* frameless full-bleed reel; its background is baked in the plate colour, top and bottom feathered */
.reel{position:relative;width:100%;margin-top:20px;aspect-ratio:4/5;background:var(--plate);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
.reel video{display:block;width:100%;height:100%;object-fit:cover}
/* on top of moving footage the button gets its own disc in the plate colour (a bare ring vanished on the yellow step
   and read as one of the plugin's own buttons on the others) */
.reel .vbtn{position:absolute;top:12px;right:max(8px,env(safe-area-inset-right));color:var(--ink)}
.reel .vbtn::before{background:var(--plate);box-shadow:inset 0 0 0 1.5px currentColor}
.note{margin-top:16px;font-size:15px;color:var(--fine)}
.reel--voice{margin-top:24px}
#voice .reel--voice + .wrap .body:first-child{margin-top:24px}
.plate--black .h3,.plate--black dd{color:inherit}
#sessions dd{color:var(--on-black-2)}

/* ───────── 5 VOICE ───────── */
#voice .lede{margin-top:12px}
.lede--yellow{color:var(--yellow)}
#voice .body{margin-top:16px}
.genres{margin-top:24px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:clamp(22px,6.15vw,36px);line-height:1.15;letter-spacing:-.015em;font-variation-settings:"wdth" 86}
#voice .body--2{margin-top:24px}

/* ───────── 6 INSIDE ───────── */
.sum{margin-top:20px;font-size:clamp(22px,6.67vw,34px);line-height:1.15;letter-spacing:-.01em;font-variation-settings:"wdth" 84}
.sum s{color:var(--struck);text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:.14em}
.sum-total{display:block;margin-top:8px;font-size:clamp(36px,10.26vw,56px);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"wdth" 85}
.sum-total span{background:var(--yellow);padding:0 .12em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#inside .body{margin-top:24px}
@keyframes fade{from{opacity:0}}
.callouts{position:relative;z-index:1;height:28px;font-size:14px;font-weight:600}
.co{position:absolute;top:0;line-height:1}
.co--l{left:0}
.co--r{right:0}
/* lines drop from the labels onto the real on/off switch (7.45% across) and S button (92.9%) in the crop */
.callouts::before,.callouts::after{content:"";position:absolute;top:19px;width:1.5px;height:21px;margin-left:-.75px;background:var(--ink)}
.callouts::before{left:7.45%}
.callouts::after{left:92.9%}
.crop{display:block;width:100%;height:auto;margin:4px 0 12px}
.note,.final .body{text-wrap:balance}
.body,.facts dd{text-wrap:pretty}
.close{margin-top:24px;font-size:17px;font-weight:700;line-height:1.4}

/* ───────── 7 SESSIONS ───────── */
.facts{margin-top:32px;display:grid;gap:32px}
.facts dd{margin-top:8px;font-size:17px;line-height:1.5}
/* DAW icons (2026-10-12, Itay: show them instead of only naming them) */
.daws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px;margin-top:20px}
.daws li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.2;color:#fff;text-align:center}
.daws img{width:60px;height:60px}
.daws-not{display:block;margin-top:20px}
@media (min-width:768px){.daws{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ───────── 8 PRICE (2026-10-13): the swinging price tag (from concepts5/price-tag.html) ───────── */
/* ───────── the section ───────── */
.pt{overflow:hidden;padding-top:0;text-align:center}   /* (the string starts at the very top edge; the tag swings in from outside) */
.pt{--tw:min(300px,76vw);--len:clamp(58px,17vw,84px)}   /* tag width, string length above the tag */

/* the pendulum: string + tag, turning around the top edge of the plate */
.pt-pend{position:relative;width:var(--tw);margin-inline:auto;padding-top:var(--len);transform-origin:50% 0;will-change:transform}
.pt-string{position:absolute;z-index:2;left:50%;top:0;width:2px;margin-left:-1px;height:calc(var(--len) + var(--tw) * .0933);
  background:var(--ink);border-radius:0 0 1px 1px;pointer-events:none}   /* ends on the hole's top rim (28 / 300 of the tag) */

/* the tag: an SVG head (chamfered corners, the punched hole, the eyelet) + a yellow body that grows with its text */
.pt-tag{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;
  transform-origin:50% calc(var(--tw) * .0933);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pt-head{display:block;width:100%;height:auto}
.pt-head .shape{fill:var(--yellow)}
.pt-head .eyelet{fill:none;stroke:var(--ink);stroke-width:3}
.pt-body{display:flex;flex-direction:column;align-items:center;margin-top:-1px;padding:0 calc(var(--tw) * .06) calc(var(--tw) * .12);
  background:var(--yellow);border-radius:0 0 calc(var(--tw) * .08) calc(var(--tw) * .08)}
.pt-price{display:flex;align-items:flex-start;justify-content:center;margin-top:calc(var(--tw) * -.035);
  font:800 calc(var(--tw) * .78)/.8 var(--font);font-variation-settings:"wdth" 76,"opsz" 96;letter-spacing:-.05em;white-space:nowrap}
.pt-cur{font-size:.4em;line-height:1;margin:.12em .04em 0 0;letter-spacing:0}   /* the small raised "$" of a price tag */
.pt-num{display:block;padding-right:.04em}
.pt-once{margin-top:calc(var(--tw) * .03);font:800 calc(var(--tw) * .28)/.9 var(--font);font-variation-settings:"wdth" 82,"opsz" 96;letter-spacing:-.02em}

/* under the tag */
.pt-line{max-width:19em;margin:30px auto 0;font:700 clamp(20px,5.6vw,26px)/1.22 var(--font);font-variation-settings:"wdth" 92;letter-spacing:-.01em;text-wrap:balance}
.pt-cta{max-width:440px;margin:28px auto 0}
.pt .key{min-height:56px;font-size:20px;background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #000;transform:translateY(-3px);
  transition:transform 120ms var(--ease-out),box-shadow 120ms var(--ease-out),background-color 160ms var(--ease-out)}
.pt .key:active{transform:translateY(1px);box-shadow:0 1px 0 #000}
@media (hover:hover) and (pointer:fine){.pt .key.btn--primary:hover{background:#fff27a;color:var(--ink)}}
.pt .buy-link{margin-top:12px}
.pt-fine{max-width:26em;margin:18px auto 0;font-size:15px;line-height:1.4;color:var(--ink);text-wrap:balance}

@media (max-width:359px){.pt .key{font-size:17px}.pt .key .dl-ic{width:20px;height:20px;margin-right:8px}}
@media (min-width:768px){.plate.pt{padding-top:0;padding-bottom:96px}.pt-line{margin-top:40px}}
.plate.pt{padding-top:0}   /* (the string starts at the very top edge of the pink) */
@media (prefers-reduced-motion:reduce){.pt .key{transition:none}.pt .key:active{transform:translateY(-3px);box-shadow:0 5px 0 #000}}

.fine--ink{margin-top:12px;color:var(--ink)}

/* ───────── 9 FAQ ───────── */
#faq .body{margin-top:16px}
.ask-us{display:inline-block;padding-block:12px;margin-block:-12px;font-weight:700;text-underline-offset:3px}
/* (Itay 2026-10-13) "Big answers", from concepts6/faq-big.html: no hairline rows; each question is a big bold line with a
   round key on the right in its answer's colour, with the hard black edge of the site's yellow key. Tap the row: the key
   latches down, its "+" lies down into a "-", and the answer opens under it in a flat block of that colour, its first words
   big. Native <details> underneath (works without JavaScript); site.js §15 adds the height animation. */
.fb{margin-top:36px;display:grid;gap:6px}
.fb-row{--c:var(--yellow);--k:var(--ink);--t:var(--ink);--t2:var(--ink)}
.fb-row summary{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;column-gap:14px;min-height:72px;padding:10px 0;
  list-style:none;cursor:pointer;-webkit-touch-callout:none}
.fb-row summary::-webkit-details-marker{display:none}
.fb-row summary:focus-visible{outline-offset:4px}
.fb-q{font:800 clamp(25px,7.5vw,38px)/1.02 var(--font);font-variation-settings:"wdth" 84;letter-spacing:-.022em;text-wrap:balance}
/* the key: a round flat colour button with the hard black edge; latched down while open */
.fb-key{justify-self:end;position:relative;width:52px;height:52px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 2px #000,0 4px 0 #000;transform:translateY(-2px);
  transition:transform 140ms var(--ease-out),box-shadow 140ms var(--ease-out)}
.fb-key i{position:absolute;left:50%;top:50%;width:20px;height:3px;margin:-1.5px 0 0 -10px;border-radius:2px;background:var(--k)}
.fb-key i + i{transform:rotate(90deg);transition:transform 260ms var(--ease-out)}
.fb-row.is-open .fb-key,html:not(.js) .fb-row[open] .fb-key{transform:translateY(1px);box-shadow:inset 0 0 0 2px #000,0 1px 0 #000}
.fb-row.is-open .fb-key i + i,html:not(.js) .fb-row[open] .fb-key i + i{transform:rotate(180deg)}   /* the "+" lies down into a "-" */
.fb-row summary:active .fb-key{transform:translateY(2px);box-shadow:inset 0 0 0 2px #000,0 0 0 #000;transition-duration:80ms}
@media (hover:hover) and (pointer:fine){
  .fb-row:not(.is-open) summary:hover .fb-key{transform:translateY(-3px);box-shadow:inset 0 0 0 2px #000,0 5px 0 #000}
}
/* the answer: a height-animated wrapper around a flat colour block */
.fb-a{overflow:hidden}
html.js .fb-a{transition:height 380ms var(--ease-out)}
html.js .fb-row:not(.is-open) .fb-a{transition-duration:240ms}
.fb-panel{margin:4px 0 18px;padding:22px 22px 26px;border-radius:24px;background:var(--c);color:var(--t2)}
.fb-panel p{font-size:18px;line-height:1.45;font-weight:500;text-wrap:pretty}
.fb-panel p + p{margin-top:12px}   /* (2026-10-14: an answer can have a second paragraph) */
.fb-lead{display:block;margin-bottom:12px;color:var(--t);font:800 clamp(34px,10.5vw,52px)/.95 var(--font);font-variation-settings:"wdth" 78;letter-spacing:-.035em;text-wrap:balance}
.fb-lead--long{margin-bottom:10px;font-size:clamp(23px,6.6vw,30px);line-height:1.08;font-variation-settings:"wdth" 84;letter-spacing:-.018em}
/* the words inside the block rise in a beat after the block opens */
html.js .fb-panel p{transition:opacity 260ms var(--ease-out) 90ms,transform 320ms var(--ease-out) 90ms}
html.js .fb-row:not(.is-open) .fb-panel p{opacity:0;transform:translateY(10px);transition:opacity 120ms var(--ease-out),transform 0s linear 120ms}
/* palette per answer: navy carries white type */
.fb-row--yellow{--c:var(--yellow)}
.fb-row--cyan{--c:var(--cyan)}
.fb-row--pink{--c:var(--pink)}
.fb-row--navy{--c:var(--navy);--k:#fff;--t:#fff;--t2:var(--on-navy-2)}
@media (min-width:768px){
  .fb{margin-top:44px}
  .fb-panel{padding:28px 30px 32px;border-radius:28px}
  .fb-panel p{font-size:19px}
}
@media (max-width:359px){
  .fb-row summary{grid-template-columns:minmax(0,1fr) 48px;column-gap:10px}
  .fb-key{width:48px;height:48px}
  .fb-panel{padding:18px 18px 22px;border-radius:20px}
  .fb-panel p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html.js .fb-a,.fb-key,.fb-key i + i,html.js .fb-panel p{transition:none!important}
  html.js .fb-row:not(.is-open) .fb-panel p{opacity:1;transform:none}
}

/* ───────── 10 FINAL + FOOTER ───────── */
.final{text-align:center}
.final-in{display:grid;justify-items:center}
/* the film runs edge to edge from the top of the section; its dark edges melt into the black */
.final{padding-top:0}
.film{margin-top:0;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}   /* (the promo is 16:9) */
.film .vbtn{color:#fff}
.final .h2{margin-top:8px}
.final .body{margin-top:16px;max-width:30em}
.final .cta{margin-top:28px;max-width:480px}
.foot{padding:48px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid #222}
.foot-brand{display:flex;align-items:center;gap:8px;font:800 20px/1 var(--font);font-variation-settings:"wdth" 85;letter-spacing:-.03em}
.foot-brand img{width:28px;height:28px}
.foot-links{margin-top:12px;display:flex;flex-wrap:wrap;column-gap:20px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:#fff;text-decoration:none}
.foot-c{margin-top:8px;font-size:15px;color:var(--on-black-2)}
@media (hover:hover) and (pointer:fine){.foot-links a:hover{text-decoration:underline}}

/* ───────── DOCK: Try/Buy bar once the hero buttons are gone ───────── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--dock-line);
  padding:8px var(--gutter-r) calc(8px + env(safe-area-inset-bottom)) var(--gutter-l);
  display:grid;grid-template-columns:1.45fr 1fr;gap:10px;
  visibility:hidden;transform:translateY(100%);
  transition:transform var(--t-dock-out) var(--ease-in),visibility 0s linear var(--t-dock-out)}
.dock .btn{min-height:48px}
.dock.is-on{visibility:visible;transform:none;transition:transform var(--t-dock-in) var(--ease-out),visibility 0s}
@media (max-height:500px){.dock .btn{min-height:44px}}

/* ───────── tablet / desktop: calm centred column ───────── */
@media (min-width:768px){
  body{font-size:18px}
  .body,.facts dd{font-size:18px}
  .br-ph{display:none}
  .hero-in{justify-content:center;padding-block:32px 40px}
  .hero-in > .demo{margin-top:28px}
  .hero-in > .hero-act{margin-top:28px}
  .hero .h1{min-height:0;max-width:12em;margin-inline:auto;text-wrap:balance}
  .demo{--plug-w:min(640px,var(--col),calc((100svh - 420px) * 1.595));min-width:420px}
  .hero .cta,.dock,.final .cta,#price .cta{max-width:480px;margin-inline:auto}
  .dock{left:50%;right:auto;width:min(520px,100%);transform:translate(-50%,100%);border:1px solid var(--dock-line);border-bottom:0;border-radius:16px 16px 0 0}
  .dock.is-on{transform:translate(-50%,0)}
  .plate{padding-block:96px}
  .step{padding:72px 0 48px}
  .reel{width:560px;margin-inline:auto;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    mask-composite:intersect}
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  .btn,.vbtn{transition:none}
  .btn:active,.vbtn:active{transform:none}
  .ask,.ask.is-lifting,.ask.is-out{transition:none!important}
  .moves li.is-in{animation:none}
  .daw-track{animation:none;margin-inline:auto}
  .ask.is-sent,.ask-c{animation:none}
  .demo[data-state="think"] .dots i{animation:none;opacity:1}
  .dock,.dock.is-on{transition:opacity 0s,visibility 0s;transform:none}
  .dock{opacity:0}
  .dock.is-on{opacity:1}
  @media (min-width:768px){.dock,.dock.is-on{transform:translateX(-50%)}}
}
.plate--navy .body--2{color:var(--on-navy-2)}
.nw{white-space:nowrap}

/* very narrow layouts (Safari text zoom 200 %, ~195 px): stack the buttons and let long lines wrap */
@media (max-width:299px){
  .cta{grid-template-columns:1fr}
  .btn{white-space:normal;text-align:center;padding-block:10px}
  .ask{white-space:normal}
  .ask-row{height:auto;min-height:40px}
  .moves{flex-wrap:wrap}
  .result-row{height:auto;min-height:44px}
  .sum-total{font-size:28px}
  .receipt{padding-inline:12px}
  .r-tbl li{flex-wrap:wrap;column-gap:8px}
}
/* landscape phones: headline + buttons on the left, the plugin on the right, so both buttons are on screen 1 */
@media (orientation:landscape) and (max-height:500px){
  .hero .wrap{max-width:none}
  .hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:28px;row-gap:18px;align-content:center;
    align-items:center;justify-items:start;text-align:left;padding-block:8px}
  .hero-in > .demo,.hero-in > .hero-act{margin-top:0}
  .hero-head{grid-column:1;grid-row:1;align-self:end}
  .hero-act{grid-column:1;grid-row:2;align-self:start}
  .hero .demo{grid-column:2;grid-row:1/3;min-width:0;--plug-w:min(46vw,calc((100svh - var(--nav-h) - 100px) * 1.595))}
  .br-ph{display:none}
  .hero .h1{min-height:0;max-width:none;font-size:clamp(30px,4.6vw,46px)}
  .hero .cta{max-width:440px;margin-inline:0}
  .reel{width:min(560px,calc((100svh - 24px) * .8));margin-inline:auto}
}
@media (max-height:500px) and (orientation:portrait){.hero-sub{display:none}}

/* ───────── 2026-10-12 (Itay): yellow stage, choose-a-request, DAW caption, What's inside swipe ───────── */
/* the hero plugin on a yellow stage, the pink bubble on its corner (like the v4.1 header he liked) */
.hero-in > .demo{margin-top:46px}
.stage{position:relative;background:var(--yellow);padding:28px 8px 14px;margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r))}   /* full-width yellow band: the plugin as big as the phone allows (Itay: as big as vocalessential.com/vst) */
.stage .ask{left:14px}
.stage .ask{position:absolute;left:10px;top:-22px;z-index:3;max-width:calc(100% - 20px);transform:rotate(-4deg);transform-origin:0 100%}
.stage .ask::after{left:26px;margin-left:0}
.ask.is-sent{animation:sentL 280ms var(--ease-out)}
@keyframes sentL{40%{transform:translateY(-4px) rotate(-4deg) scale(1.04)}}
.stage .plug{margin-top:0}
.stage .plug::after{bottom:-8px;opacity:.75}
/* choose a request: plays that request in the plugin with sound */
.tries{display:flex;gap:6px;margin-top:10px}
.try{flex:1 1 0;min-width:0;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:0 8px;border:0;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font:700 14px/1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-release) var(--ease-out),background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.try::after{content:"";position:absolute;inset:-4px 0}   /* 46 px to tap */
.try:active{transform:scale(.97);transition-duration:var(--t-press)}
.try-ic{width:17px;height:17px;flex:none}
.try .w1,.try .w2{opacity:.35}
.try[aria-pressed="true"]{background:var(--ink);color:#fff}
.try[aria-pressed="true"] .w1{animation:wave 900ms steps(2,jump-none) infinite}
.try[aria-pressed="true"] .w2{animation:wave 900ms 150ms steps(2,jump-none) infinite}
@keyframes wave{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
@media (hover:hover) and (pointer:fine){.try:not([aria-pressed="true"]):hover{background:var(--ink);color:#fff}}
.demo.is-done .plug-paused{opacity:0}
@media (max-width:374px){.try{font-size:13px;padding:0 6px;gap:4px}.try-ic{width:15px;height:15px}}
/* DAWs: the icons, the line under them */
.daws-row{flex-direction:column;gap:4px;margin-top:6px}
.daw-strip{width:100%;flex:none}
.daws-label{width:auto;text-align:center;font-size:13.5px;line-height:1.2;font-weight:500}
/* What's inside: how it works as three cards you swipe (How it works is off the page since 2026-10-13, replaced by the VSL card;
   these rules stay for saved/how-it-works-2026-10-13.html, which says how to put it back) */
#what .lede{margin-top:14px}
.rail{display:flex;gap:12px;margin-top:28px;padding:0 var(--gutter-r) 4px var(--gutter-l);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter-l);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.scard{flex:0 0 min(330px,84vw);scroll-snap-align:start;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;
  -webkit-mask-image:-webkit-radial-gradient(white,black)}   /* (keeps the rounded clip on Safari while the video plays) */
.scard--navy{background:var(--navy);color:#fff}
.scard--yellow{background:var(--yellow);color:var(--ink)}
.scard--white{background:#fff;color:var(--ink)}
.scard-text{padding:22px 20px 4px}
.scard .step-count{font-size:14px;font-weight:600}
.scard--navy .step-count{color:var(--cyan)}
.scard--white .step-count{color:var(--fine)}
.scard-title{margin-top:6px;font:800 clamp(30px,8.4vw,40px)/.95 var(--font);font-variation-settings:"wdth" 86;letter-spacing:-.022em}
.scard-text p:last-child{margin-top:10px;font-size:16px;line-height:1.45}
.scard .reel{margin-top:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
.scard--navy .reel .vbtn{color:#fff}
.rail-foot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px}
.rail-dots{display:flex;gap:4px}
.rail-dots button{position:relative;width:28px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.rail-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:4px;background:rgba(0,0,0,.28);transition:width 200ms var(--ease-out),margin 200ms var(--ease-out),background-color 200ms var(--ease-out)}
.rail-dots button[aria-current="true"]::before{width:22px;margin-left:-11px;background:var(--ink)}
.rail-foot .note{margin-top:0;color:var(--ink);text-align:center;font-size:14px}
@media (min-width:768px){.rail{justify-content:center}.scard{flex-basis:300px}}
@media (prefers-reduced-motion:reduce){.try[aria-pressed="true"] .w1,.try[aria-pressed="true"] .w2{animation:none;opacity:1}.rail{scroll-behavior:auto}}

/* (Itay 2026-10-12) the plugin is the sound button: a small tag on its corner, like a muted reel */
.plug-tap{display:block}
.snd{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.72);color:#fff;font:700 13px/1 var(--font);font-variation-settings:"wdth" 92;white-space:nowrap;
  transition:padding 200ms var(--ease-out),background-color 160ms var(--ease-out)}
.snd svg{width:18px;height:18px;flex:none}
.snd g path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.snd .s-on{display:none}
.plug-tap[aria-pressed="true"] .snd .s-on{display:inline}
.plug-tap[aria-pressed="true"] .snd .s-off{display:none}
.plug-tap[aria-pressed="true"] .snd{background:#fff;color:var(--ink)}   /* raw vocal */
.plug-tap[aria-pressed="true"].is-mix .snd{background:var(--pink)}   /* mixed */
.plug-tap[aria-pressed="true"] .w1{animation:wave 900ms steps(2,jump-none) infinite}
.plug-tap[aria-pressed="true"] .w2{animation:wave 900ms 150ms steps(2,jump-none) infinite}
.plug-tap:active .snd{transform:scale(.97)}
/* under the plugin: the buttons and the DAWs share the rest of the first screen evenly (no dead space at the bottom) */
.hero-act{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:16px}
.hero-in > .hero-act{margin-top:16px}
/* (Itay 2026-10-12 round 2) the spare height goes above the headline and below the DAW row, not between the plugin and
   the button: the button sits right under the yellow band, the whole block sits a little lower on tall phones */
.hero-in{justify-content:center}
.hero-act .daws-row{margin-top:0}
@media (prefers-reduced-motion:reduce){.plug-tap[aria-pressed="true"] .w1,.plug-tap[aria-pressed="true"] .w2{animation:none;opacity:1}}

/* landscape phones: the stage is a normal card in the right column */
@media (orientation:landscape) and (max-height:500px){
  .hero .demo{width:calc(var(--plug-w) + 24px)}
  .stage{margin-inline:0;border-radius:24px;padding:24px 12px 10px}
}
@media (min-width:768px) and (min-height:501px){.stage{margin-inline:0;border-radius:28px;padding:30px 14px 14px}.hero .demo{width:min(var(--col),100%,calc((100svh - 480px) * 1.595 + 28px))}}

/* ───────── 1 Hear what it sounds like ───────── */
.hear .body{margin-top:14px}
/* the earlier player's request tabs + bubble: only the concept pages use them now (concepts/ab-slider.html,
   concepts5/hear-ab-hold.html), the rest of that player is gone (2026-10-13) */
.ab-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:var(--r-pill);background:#1c1c1c}
.ab-tabs button{min-height:44px;border:0;border-radius:var(--r-pill);background:none;color:#fff;font:700 16px/1 var(--font);font-variation-settings:"wdth" 92;cursor:pointer;
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),transform var(--t-release) var(--ease-out)}
.ab-tabs button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.ab-tabs button:active{transform:scale(.97);transition-duration:var(--t-press)}
.ab-ask{margin:30px 0 0 6px;display:inline-flex;max-width:calc(100% - 12px);padding:11px 16px;border-radius:var(--r-bubble);background:var(--pink);color:var(--ink);
  font:800 20px/1.1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.01em;position:relative;transform:rotate(-3deg);transform-origin:0 100%}
.ab-ask::after{content:"";position:absolute;left:24px;bottom:-6px;width:14px;height:14px;background:var(--pink);transform:rotate(45deg);border-radius:0 0 3px 0;z-index:-1}
@media (hover:hover) and (pointer:fine){.ab-tabs button:not([aria-pressed="true"]):hover{background:#2a2a2a}}

/* (Itay 2026-10-13) "one giant play button", from concepts5/hear-big-play.html. On WHITE since 2026-10-13 (Itay: a different
   background from the navy sky, "so users know when a new section is starting"): the hard edge under the header is the
   divider, no stars. The record stays dark navy like a vinyl (two faint grooves, a hard black edge under it like the site's
   keys), the giant yellow play button is its label; the clip's real peaks are drawn round it. Chips and the Raw / Mixed pill
   are the site's black-outline controls (the same family as the effects tabs and the VSL chips): a chosen chip is black;
   Raw = black, Mixed = pink. While it plays the ring turns slowly and the part already heard lights up (white on Raw, pink on
   Mixed); flipping reshapes the ring. No filter / backdrop-filter / blend, no soft shadows. */
.hear--white{--hp-disc:var(--navy);--hp-bar:#34416f;--hp-groove:rgba(255,255,255,.075);--hp-hover:#f1f1f1;position:relative}
.hear--white .hp-player{display:flex;flex-direction:column;align-items:center;text-align:center}

/* genre: four small chips, one row (Acoustic first) */
.hear--white .hp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px}   /* (2026-10-13: right under the title now; the intro line is gone, Itay) */
.hear--white .hp-chips button{min-height:44px;padding:0 19px;border:0;border-radius:var(--r-pill);background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);
  font:700 16px/1 var(--font);font-variation-settings:"wdth" 92;letter-spacing:-.005em;cursor:pointer;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform var(--t-release) var(--ease-out)}
.hear--white .hp-chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
@media (max-width:389px){.hear--white .hp-chips{gap:6px}.hear--white .hp-chips button{padding:0 14px}}
@media (max-width:359px){.hear--white .hp-chips button{padding:0 13px;font-size:15px}}   /* (320 px: the four chips still on one line) */

/* the request: the pink bubble, its tail pointing down at the record */
.hear--white .hp-ask{margin-top:26px;max-width:100%}
.hear--white .hp-ask-t{position:relative;display:inline-block;max-width:100%;padding:11px 18px 12px;border-radius:var(--r-bubble);background:var(--pink);color:var(--ink);
  font:800 clamp(16px,4.9vw,22px)/1.1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.01em;text-wrap:balance;transform:rotate(-2deg)}   /* (4.9vw: the longest request, the acoustic one, stays on one line from 360 px up) */
.hear--white .hp-ask-t::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:14px;margin-left:-7px;background:var(--pink);
  transform:rotate(45deg);border-radius:0 0 3px 0;z-index:-1}
@media (max-width:359px){.hear--white .hp-ask-t{font-size:15px;padding-inline:16px}}   /* (320 px: the acoustic request on one line too) */
.hear--white .hp-ask-t.is-new{animation:hpAsk 300ms var(--ease-out)}
@keyframes hpAsk{from{opacity:.2;transform:translateY(6px) rotate(-2deg) scale(.96)}}

/* the record: a navy disc (r 162 of 170, so its 5 px hard black edge fits inside the box) with the ring of real peaks and
   the giant play button as its label. (Short phones: a smaller record, so the chips, the button and the switch fit on one
   screen above the dock.) */
.hear--white .hp-rec{position:relative;width:min(320px,100%);aspect-ratio:1/1;margin-top:16px;overflow:hidden}   /* (clips the turning square's corners) */
@supports (height:1svh){.hear--white .hp-rec{width:min(320px,100%,max(240px,calc(100svh - 296px)))}}
@supports not (aspect-ratio:1/1){.hear--white .hp-rec::after{content:"";display:block;padding-top:100%}}
.hear--white .hp-rec::before{content:"";position:absolute;inset:2.353%;border-radius:50%;background:#000;transform:translateY(5px)}   /* the hard edge (does not turn) */
.hear--white .hp-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:hpSpin 40s linear infinite;animation-play-state:paused}
.hear--white .hp-player.is-playing .hp-ring{animation-play-state:running}
@keyframes hpSpin{to{transform:rotate(360deg)}}
.hear--white .hp-disc{fill:var(--hp-disc)}
.hear--white .hp-groove{fill:none;stroke:var(--hp-groove);stroke-width:1.2}
.hear--white .hp-ring line{stroke:var(--hp-bar);stroke-width:6.5;stroke-linecap:round;transition:stroke 140ms linear}
.hear--white .hp-ring line.on{stroke:#fff}
.hear--white .hp-player.is-mix .hp-ring line.on{stroke:var(--pink)}
/* the giant play button: the site's yellow key with its hard black edge; it stays pressed down while it plays */
.hear--white .hp-btn{position:absolute;inset:21.75%;padding:0;border:0;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 5px 0 #000;transform:translateY(-3px);
  transition:transform 120ms var(--ease-out),box-shadow 120ms var(--ease-out),background-color 160ms var(--ease-out)}
.hear--white .hp-player.is-playing .hp-btn{transform:translateY(1px);box-shadow:0 1px 0 #000}
.hear--white .hp-player .hp-btn:active{transform:translateY(2px);box-shadow:0 0 0 #000;transition-duration:80ms}
.hear--white .hp-btn svg{width:38%;height:38%;fill:currentColor}
.hear--white .hp-btn .i-play{transform:translateX(4%)}
.hear--white .hp-btn .i-pause{display:none}
.hear--white .hp-player.is-playing .hp-btn .i-pause{display:inline}
.hear--white .hp-player.is-playing .hp-btn .i-play{display:none}
.hear--white .hp-player.is-loading .hp-btn{animation:hpLoad 900ms var(--ease-out) infinite alternate}
@keyframes hpLoad{from{transform:translateY(-3px)}to{transform:translateY(-1px) scale(.95)}}

/* Raw / Mixed: the two big halves of one outlined pill */
.hear--white .hp-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;max-width:440px;margin-top:24px;padding:6px;border-radius:var(--r-pill);background:#fff;
  box-shadow:inset 0 0 0 2px var(--ink)}
.hear--white .hp-switch button{position:relative;min-height:58px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink);
  font:800 clamp(21px,6.2vw,26px)/1 var(--font);font-variation-settings:"wdth" 86;letter-spacing:-.015em;cursor:pointer;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out),transform var(--t-release) var(--ease-out)}
.hear--white .hp-switch button[data-v="raw"][aria-pressed="true"]{background:var(--ink);color:#fff}
.hear--white .hp-switch button[data-v="mix"][aria-pressed="true"]{background:var(--pink);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}   /* (review 2026-10-13: pink alone is 2.89:1 on white; the black edge marks the state) */
.hear--white .hp-chips button:active,.hear--white .hp-switch button:active{transform:scale(.97);transition-duration:var(--t-press)}
/* a nudge: after a few seconds of the raw take, the Mixed half pulses a pink outline (once per visit) */
.hear--white .hp-switch button.is-nudge{animation:hpNudge 1.1s var(--ease-out) 3}
@keyframes hpNudge{0%{box-shadow:inset 0 0 0 0 var(--pink)}35%{box-shadow:inset 0 0 0 4px var(--pink)}100%{box-shadow:inset 0 0 0 0 var(--pink)}}
.hear--white .hp-note{margin-top:14px;color:var(--fine)}

/* round and pill controls keep their shape when focused from the keyboard (focus elsewhere has an 8 px radius); the play
   button's ring is white so it shows on the navy record */
.hear--white .hp-btn:focus-visible{border-radius:50%;outline-color:#fff;outline-offset:5px}
.hear--white .hp-chips button:focus-visible,.hear--white .hp-switch button:focus-visible{border-radius:var(--r-pill)}
.hear--white .hp-switch button:focus-visible{outline-offset:1px}   /* (a black ring right round the half, a hair of white between: shows on black, pink and white) */
@media (hover:hover) and (pointer:fine){
  .hear--white .hp-btn:hover{background:#fff27a}
  .hear--white .hp-chips button:not([aria-pressed="true"]):hover,.hear--white .hp-switch button:not([aria-pressed="true"]):hover{background:var(--hp-hover)}
}
@media (prefers-reduced-motion:reduce){
  .hear--white .hp-ring{animation:none}
  .hear--white .hp-ring line,.hear--white .hp-btn{transition:none}
  .hear--white .hp-player.is-loading .hp-btn,.hear--white .hp-ask-t.is-new{animation:none}
  .hear--white .hp-switch button.is-nudge{animation:none;box-shadow:inset 0 0 0 4px var(--pink)}
}

/* What's inside: shorter cards, all one colour (white on the pink plate) (kept for the saved How it works, see above) */
.scard{flex-basis:min(300px,80vw)}
.scard-text{padding:18px 18px 2px}
.scard-title{font-size:clamp(28px,7.6vw,36px)}
.scard-text p:last-child{font-size:15px;line-height:1.4}
.scard .reel{aspect-ratio:1/1}
.scard .reel video{object-fit:cover}
/* How it works cards (Itay 2026-10-12): a title and one short line, nothing else */
.scard-text{padding:20px 18px 6px}
.scard-title{margin-top:0;font-size:clamp(26px,7.2vw,34px);line-height:.98;text-wrap:balance}
.scard-text p:last-child{margin-top:8px;font-size:15px;line-height:1.4;color:#333}
#what .h2 + *{margin-top:0}
.rail{margin-top:24px}
.scard .reel{aspect-ratio:auto;flex:1 1 0;min-height:min(300px,80vw);margin-top:6px}   /* the video fills whatever height the text leaves (no white gap) */

/* ───────── the buddy flying next to "Hear what it sounds like." (existing poses; the motion is code) ───────── */
.hear-head{position:relative;padding-right:110px}
.flyer{position:absolute;right:-6px;top:-14px;width:112px;height:112px;pointer-events:none;animation:fly 9s ease-in-out infinite}
.flyer-in{position:relative;width:100%;height:100%;animation:bob 2.2s ease-in-out infinite}
.flyer img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 180ms var(--ease-out)}
.flyer img.is-on{opacity:1}
@keyframes fly{
  0%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(-26px,-12px) rotate(-7deg)}
  40%{transform:translate(-8px,10px) rotate(4deg)}
  60%{transform:translate(-34px,4px) rotate(-3deg)}
  80%{transform:translate(-12px,-16px) rotate(6deg)}
  100%{transform:translate(0,0) rotate(0deg)}}
@keyframes bob{50%{transform:translateY(-6px)}}
.hear.is-listening .flyer{animation-duration:14s}
@media (prefers-reduced-motion:reduce){.flyer,.flyer-in{animation:none}}

/* ───────── What's inside: the real plugin, one module at a time ───────── */
.inside-lede{margin-top:14px;font-size:clamp(20px,5.4vw,26px)}
.mods{margin-top:26px}
.mods-plug{margin:0 8px}
.mods-stack{position:relative;aspect-ratio:1400/899}
.mods-img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 200ms var(--ease-out)}
.mods-img.is-on{opacity:1}
.mods-hot{position:absolute;top:52.0%;height:6.4%;padding:0;border:0;background:none;cursor:pointer}
.mods-hot::after{content:"";position:absolute;inset:-12px 0}
.mods-tabs{display:flex;gap:4px;margin-top:18px;padding:4px;border-radius:var(--r-pill);background:var(--soft,#f1f1f1);overflow-x:auto;scrollbar-width:none}
.mods-tabs::-webkit-scrollbar{display:none}
.mods-tabs button{flex:1 0 auto;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink);
  font:700 15px/1 var(--font);font-variation-settings:"wdth" 90;cursor:pointer;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform var(--t-release) var(--ease-out)}
.mods-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.mods-tabs button:active{transform:scale(.97);transition-duration:var(--t-press)}
@media (hover:hover) and (pointer:fine){.mods-tabs button:not([aria-selected="true"]):hover{background:#e3e3e3}}
.mods-panel{margin-top:22px}
.mods-panel .h3{font-size:clamp(28px,7.4vw,36px)}
.mods-sub{margin-top:8px;font-size:18px;font-weight:700;line-height:1.3}
.mods-panel ul{margin-top:14px;display:grid;gap:10px}
.mods-panel li{position:relative;padding-left:22px;font-size:16px;line-height:1.45}
.mods-panel li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.mods-panel:not([hidden]){animation:fade 180ms var(--ease-out)}
.mods-all{margin-top:22px;padding-top:16px;border-top:1.5px solid var(--ink);font-size:15px;font-weight:600;line-height:1.4}
@media (min-width:768px){.mods-plug{max-width:640px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.mods-img{transition:none}.mods-panel:not([hidden]){animation:none}}

/* (Itay 2026-10-12) the flying buddy: smaller, only normal + happy, facing left */
.hear-head{padding-right:86px}
.flyer{width:80px;height:80px;right:0;top:-6px}
.flyer img{transform:scaleX(-1)}
@keyframes fly{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(-16px,-8px) rotate(5deg)}
  50%{transform:translate(-6px,8px) rotate(-3deg)}
  75%{transform:translate(-20px,2px) rotate(4deg)}
  100%{transform:translate(0,0) rotate(0deg)}}

/* What's inside = real module videos (the key lights, the camera pushes in, the module shows off) */
.mods-stack{aspect-ratio:1000/628}
.mods-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 200ms var(--ease-out)}
.mods-vid.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.mods-vid{transition:none}}

/* ───────── "Every effect a pro vocal needs:" (round 2): one big condensed title; on screen the words rise in one by one
   and the colon lands last, pointing at the plugin below ───────── */
.fx-title{font-size:clamp(46px,14.4vw,92px);line-height:.88;letter-spacing:-.035em;font-variation-settings:"wdth" 76;max-width:9.5em}
.fx-title .w{display:inline-block}
.js .fx-title:not(.go) .w{opacity:0;transform:translateY(.42em) rotate(4deg)}
.js .fx-title.go .w{transition:transform 560ms var(--ease-lift) calc(var(--i) * 90ms),opacity 200ms var(--ease-out) calc(var(--i) * 90ms)}
@media (prefers-reduced-motion:reduce){.fx-title .w{transition:none!important}}

/* ───────── And the best part is… (was "Made for you", navy, round 2): a deck of six white cards to throw ───────── */
/* all cards share one grid cell, so the deck is as tall as the tallest card (text zoom safe); the cards behind peek above.
   (2026-10-13, six cards) every proof panel has the same height (--dvis-h), so the title sits at the same place on every
   card; cards 4-6 behind the third wait invisibly at its place. #voice clips sideways (overflow:clip, hidden where clip is
   unknown) so a thrown card never makes the page wider than the screen. */
.made{overflow:hidden;overflow:clip}
.deck{--dvis-h:clamp(226px,72vw,320px)}
.deck-stack{display:grid;grid-template-columns:minmax(0,1fr);margin-top:52px;touch-action:pan-y}
.dcard{grid-area:1/1;display:flex;flex-direction:column;min-height:clamp(420px,116vw,500px);padding:16px 16px 22px;border-radius:28px;
  background:#fff;color:var(--ink);transform-origin:50% 0;box-shadow:0 22px 44px -22px rgba(0,0,0,.7);
  transition:transform 440ms var(--ease-out),opacity 300ms var(--ease-out);-webkit-user-select:none;user-select:none}
/* every card is its own layer (a grid item with a z-index), so nothing of a card underneath shows through; without
   JavaScript (no data-pos) the first card is the one on top */
.dcard{z-index:0}
.dcard:first-child{z-index:1}
.dcard[data-pos="0"]{z-index:4}
.dcard[data-pos="1"]{z-index:3;transform:translateY(-18px) scale(.94) rotate(-2.4deg)}
.dcard[data-pos="2"]{z-index:2;transform:translateY(-34px) scale(.88) rotate(2deg)}
.dcard[data-pos="3"],.dcard[data-pos="4"],.dcard[data-pos="5"]{z-index:1;transform:translateY(-34px) scale(.88) rotate(2deg);opacity:0}
.dcard.is-drag{transition:none}
.dcard.is-gone{transition:transform 320ms var(--ease-out),opacity 320ms var(--ease-in)}
.dvis{flex:none;display:flex;flex-direction:column;justify-content:center;min-height:var(--dvis-h)}
.dvis--panel{padding:16px;border-radius:20px}
.dcard-t{margin-top:16px;font:800 clamp(28px,8.2vw,40px)/.96 var(--font);font-variation-settings:"wdth" 86;letter-spacing:-.022em;text-wrap:balance}
.dcard-p{margin-top:8px;font-size:16px;line-height:1.42;color:var(--fine)}

/* 1 · your voice (YELLOW, 2026-10-13): a vocal (the Acoustic take's real peaks) flows in from the left into the buddy while
   the pink ring fills (listening), he turns happy and what he heard lands as three stickers. One 10.4 s loop that every part
   shares, so they stay in step; it starts over each time the card comes back to the top. The still = the last frame. */
.dvis--an{background:var(--yellow);justify-content:center;--an-d:clamp(92px,27vw,118px)}
.an-top{display:flex;align-items:center}
.an-wave{position:relative;flex:1 1 0;min-width:0;height:56px;margin-right:calc(var(--an-d) * -.5);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
.an-strip{position:absolute;left:0;top:0;display:block;width:1109px;max-width:none;height:56px;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.an-disc{position:relative;z-index:1;flex:none;width:var(--an-d);height:var(--an-d)}
.an-disc::before{content:"";position:absolute;inset:12%;border-radius:50%;background:var(--navy);box-shadow:0 0 0 2px var(--ink)}
.an-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.an-track,.an-prog{fill:none;stroke-width:6}
.an-track{stroke:rgba(0,0,0,.12)}
.an-prog{stroke:var(--pink);stroke-dasharray:289.03;stroke-dashoffset:0}
.an-b{position:absolute;left:13%;top:12%;width:74%;height:74%}
.an-b--idle{opacity:0}
.an-k{display:grid;margin-top:12px;font:700 13px/1.2 var(--font);color:var(--ink)}
.an-k span{grid-area:1/1}
.an-k1{opacity:0}
.an-chips{display:flex;flex-wrap:wrap;gap:8px 6px;margin-top:8px}
/* each reading has its slot (a dashed outline) that waits, pulsing, while he listens; the sticker lands on it */
.an-slot{position:relative;display:inline-flex;border-radius:var(--r-pill)}
.an-slot::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px dashed rgba(0,0,0,.32)}
.an-chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 11px 7px 8px;border-radius:var(--r-pill);background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink),0 3px 0 var(--ink);font:700 14px/1 var(--font);font-variation-settings:"wdth" 92;white-space:nowrap}
.an-chip .ok{flex:none;width:16px;height:16px}
.an-chip .ok circle{fill:var(--ink)}
.an-chip .ok path{fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:359px){.an-chip{gap:5px;padding:6px 9px 6px 7px;font-size:13px}}   /* (320 px: two stickers on the first row) */

/* (the old card 1's cyan chips: not on index.html since 2026-10-13, kept because concepts6/made-tabs.html uses them) */
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 9px;border-radius:var(--r-pill);background:rgba(63,233,255,.1);box-shadow:inset 0 0 0 1px rgba(63,233,255,.55);
  color:#fff;font:700 14px/1 var(--font);font-variation-settings:"wdth" 92;white-space:nowrap}
.chip .ok{width:16px;height:16px}
.chip .ok circle{fill:var(--cyan)}
.chip .ok path{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 2 · fix what bugs you (black): his request, then what he did */
.dvis--fix{background:#000}
.fix{display:grid;gap:12px}
.fix li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.you{flex:none;padding:9px 13px;border-radius:16px 16px 16px 4px;background:var(--pink);color:var(--ink);font:800 15px/1.1 var(--font);font-variation-settings:"wdth" 88;transform:rotate(-1.5deg)}
.him{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 9px;border-radius:var(--r-pill);background:var(--yellow);color:var(--ink);font:700 14px/1 var(--font);font-variation-settings:"wdth" 92;white-space:nowrap}
.him .ok{width:16px;height:16px}
.him .ok circle{fill:var(--ink)}
.him .ok path{fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* (2026-10-13) narrow phones: the longest row ("it sounds thin" + "Low end warmed") ran past the panel's right edge below 375 px */
@media (max-width:374px){.dvis--fix .fix li{gap:6px}.dvis--fix .you{padding:7px 10px;font-size:13px}.dvis--fix .him{gap:4px;padding:6px 9px 6px 7px;font-size:12.5px}.dvis--fix .him .ok{width:14px;height:14px}}
@media (max-width:359px){.dvis--fix{padding-inline:10px}}

/* 3 · every effect in one plugin (NAVY, 2026-10-13): the plugin's five module names light up one after another, each with
   its on/off light (every module has one), and stay lit. Code-drawn, not the plugin's keys. */
.dvis--mk{background:var(--navy);--mk-h:clamp(32px,9.4vw,40px)}
.mk{display:grid;gap:6px}
.mk li{display:flex;align-items:center;justify-content:space-between;height:var(--mk-h);padding:0 6px 0 14px;border-radius:12px;
  background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--yellow);
  font:800 clamp(17px,5vw,22px)/1 var(--font);font-variation-settings:"wdth" 90;letter-spacing:.05em}
.mk-pw{flex:none;width:calc(var(--mk-h) - 8px);height:calc(var(--mk-h) - 8px);border-radius:50%;background:var(--pink);
  fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;overflow:visible}
.mk li,.mk-pw{transition:background-color 200ms var(--ease-out) calc(250ms + var(--i) * 260ms),color 200ms var(--ease-out) calc(250ms + var(--i) * 260ms),
  box-shadow 200ms var(--ease-out) calc(250ms + var(--i) * 260ms),stroke 200ms var(--ease-out) calc(250ms + var(--i) * 260ms)}

/* 4 · presets (pink): a picker wheel of real preset names, the one in the white band is "loaded" */
.dvis--presets{position:relative;align-items:stretch;background:var(--pink)}
.roller{position:relative;height:5.6em;overflow:hidden;font:800 clamp(24px,7vw,34px)/1.12 var(--font);font-variation-settings:"wdth" 84;letter-spacing:-.02em;color:var(--ink);
  -webkit-mask-image:linear-gradient(transparent,#000 34%,#000 66%,transparent);mask-image:linear-gradient(transparent,#000 34%,#000 66%,transparent)}
.roller::before{content:"";position:absolute;left:0;right:0;top:2.24em;height:1.12em;border-radius:12px;background:#fff}
.roller-in{position:relative;display:flex;flex-direction:column;align-items:center}
.roller-in span{display:block;height:1.12em;white-space:nowrap}
.roller-in.anim{transition:transform 460ms cubic-bezier(.77,0,.175,1)}

/* 5 · save your own presets (WHITE with a black edge, 2026-10-13): a name is typed, Save goes down, the new preset lands in
   the list under two real factory names (site.js §12 types it; the still = the saved list) */
.dvis--us{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.us-bar{display:flex;align-items:center;gap:8px}
.us-field{flex:1;min-width:0;display:flex;align-items:center;height:46px;padding:0 12px;border-radius:14px;box-shadow:inset 0 0 0 2px var(--ink);
  font:700 17px/1 var(--font);white-space:nowrap;overflow:hidden}
.us-t:not(:empty)~.us-ph{display:none}
.us-ph{color:var(--struck)}
.us-caret{display:none;flex:none;width:2px;height:22px;margin-left:1px;background:var(--ink)}
.us-key{flex:none;display:grid;place-items:center;height:46px;padding:0 16px;border-radius:var(--r-pill);background:var(--yellow);color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink),0 3px 0 var(--ink);font:800 16px/1 var(--font);transition:transform 110ms var(--ease-out),box-shadow 110ms var(--ease-out)}
.us-list{display:grid;gap:2px;margin-top:14px;font:800 clamp(18px,5.4vw,24px)/1 var(--font);font-variation-settings:"wdth" 86;letter-spacing:-.01em}
.us-list li{position:relative;display:flex;align-items:center;gap:8px;height:clamp(32px,9vw,38px);padding:0 12px;border-radius:12px;color:var(--struck)}
.us-list .us-new{z-index:1;background:var(--yellow);color:var(--ink);transition:transform 480ms var(--ease-lift),opacity 160ms var(--ease-out)}
.us-new .ok{flex:none;width:20px;height:20px;transition:transform 300ms var(--ease-lift) 260ms}
.us-new .ok circle{fill:var(--ink)}
.us-new .ok path{fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dvis--us.is-play .us-caret{display:block;animation:usBlink 1s steps(1) infinite}
.dvis--us.is-play.is-saved .us-caret{display:none}
.dvis--us.is-press .us-key{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 var(--ink)}
.dvis--us.is-play:not(.is-saved) .us-new{opacity:0;transform:translateY(-40px);transition:none}
.dvis--us.is-play:not(.is-saved) .us-new .ok{transform:scale(0);transition:none}
@keyframes usBlink{50%{opacity:0}}

/* 6 · record live (cyan; 2026-10-13, Itay: no millisecond number, "ultra-low latency" + an animation): the LIVE switch goes
   on, then "You sing" (the raw take, black) and "You hear" (the mixed take, pink) are drawn at the same moment under ONE
   playhead: what goes in comes out at once. A calm 5.2 s loop while the deck is on screen. The still = both drawn. */
.dvis--live{background:var(--cyan);padding:20px 18px;align-items:stretch}
.live{display:flex;align-items:center;gap:12px}
.live-sw{position:relative;flex:none;width:64px;height:36px;border-radius:var(--r-pill);background:var(--pink);transition:background-color 260ms var(--ease-out)}
.live-sw i{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transform:translateX(28px);transition:transform 300ms var(--ease-out)}
.live-l{font:800 18px/1 var(--font);letter-spacing:.08em}
.lt{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:repeat(2,clamp(38px,11vw,48px));gap:8px 10px;align-items:center;margin-top:18px}
.lt-l{grid-column:1;display:flex;align-items:center;gap:6px;font:700 14px/1 var(--font);color:var(--ink);white-space:nowrap}
.lt-l svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.lt-lanes{grid-column:2;grid-row:1/3;align-self:stretch;position:relative;display:grid;grid-template-rows:1fr 1fr;gap:8px}
.lt-lane{display:block;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.lt-wave{position:absolute;inset:0 10px}
.lt-wave svg{position:absolute;left:0;top:0;display:block;width:100%;height:calc(50% - 4px);fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.lt-wave .lt-mix{top:auto;bottom:0;stroke:var(--pink)}
.lt-wave path{vector-effect:non-scaling-stroke}
.lt-run{position:absolute;top:-6px;bottom:-6px;left:8px;right:8px;overflow:hidden;pointer-events:none}
.lt-head{position:absolute;top:0;bottom:0;left:2px;right:2px;transform:translateX(100%)}
.lt-head::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--ink)}
@media (max-width:359px){.lt-w{display:none}.lt-l svg{width:20px;height:20px}.lt-wave svg{stroke-width:2}}   /* (320 px: the mic and the headphones alone, so the lanes keep room) */

/* each card's proof plays when it is the top card (.go); before that it waits, so it plays every time it comes back. Only with
   JavaScript and without reduced motion: otherwise every panel shows its last frame. The loops pause while the deck is off
   screen (.deck.is-off, site.js §12). */
@media (prefers-reduced-motion:no-preference){
  .js .dcard:not(.go) .fix .you,.js .dcard:not(.go) .fix .him{opacity:0;transform:translateY(8px)}
  .js .dcard .fix li .you{transition:opacity 260ms var(--ease-out) calc(250ms + var(--i) * 600ms),transform 260ms var(--ease-out) calc(250ms + var(--i) * 600ms)}
  .js .dcard .fix li .him{transition:opacity 260ms var(--ease-out) calc(600ms + var(--i) * 600ms),transform 260ms var(--ease-out) calc(600ms + var(--i) * 600ms)}
  .js .dcard.go .fix .you{transform:rotate(-1.5deg)}
  .js .dcard:not(.go) .fix .you,.js .dcard:not(.go) .fix .him{transition-delay:0s}
  /* 1 */
  .js .dcard:not(.go) .an-wave{opacity:0}
  .js .dcard:not(.go) .an-prog{stroke-dashoffset:289.03}
  .js .dcard:not(.go) .an-b--idle,.js .dcard:not(.go) .an-k1{opacity:1}
  .js .dcard:not(.go) .an-b--happy,.js .dcard:not(.go) .an-k2,.js .dcard:not(.go) .an-chip{opacity:0}
  .js .dcard.go .an-wave{animation:anWave 10.4s linear infinite}
  .js .dcard.go .an-strip{animation:anFlow 3.2s linear infinite}   /* (the strip is the same 44 peaks three times: a third = one seamless loop) */
  .js .dcard.go .an-slot::before{animation:anSlot 1.2s ease-in-out calc(var(--i) * 200ms) infinite}
  .js .dcard.go .an-prog{animation:anRing 10.4s linear infinite}
  .js .dcard.go .an-b--idle{animation:anIdle 10.4s linear infinite}
  .js .dcard.go .an-b--happy{animation:anHappy 10.4s linear infinite}
  .js .dcard.go .an-k1{animation:anK1 10.4s linear infinite}
  .js .dcard.go .an-k2{animation:anK2 10.4s linear infinite}
  .js .dcard.go .an-chip{animation:anChip 10.4s linear calc(var(--i) * 400ms) infinite both}
  /* 3 */
  .js .dcard:not(.go) .mk li{background:transparent;color:#5d6a9c;box-shadow:inset 0 0 0 2px #2a3766;transition-delay:0s}
  .js .dcard:not(.go) .mk-pw{background:#1a2550;stroke:#5d6a9c;transition-delay:0s}
  .js .dcard.go .mk li{animation:mkPress 260ms var(--ease-out) calc(250ms + var(--i) * 260ms) both}
  /* 6 */
  .js .dcard:not(.go) .live-sw{background:rgba(0,0,0,.22);transition-delay:0s}
  .js .dcard:not(.go) .live-sw i{transform:none;transition-delay:0s}
  .js .dcard.go .live-sw,.js .dcard.go .live-sw i{transition-delay:450ms}
  .js .dcard:not(.go) .lt-wave{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
  .js .dcard:not(.go) .lt-head{transform:none}
  .js .dcard.go .lt-wave{animation:ltRec 5.2s linear 1s infinite both}
  .js .dcard.go .lt-head{animation:ltHead 5.2s linear 1s infinite both}
  .js .deck.is-off .dcard.go *,.js .deck.is-off .dcard.go .an-slot::before{animation-play-state:paused}
}
@keyframes anWave{0%{opacity:0}3%{opacity:1}35%{opacity:1}40%{opacity:0}100%{opacity:0}}
@keyframes anFlow{from{transform:translateX(-33.3333%)}to{transform:none}}
@keyframes anSlot{50%{opacity:.35}}
@keyframes anRing{0%{stroke-dashoffset:289.03;opacity:1}4%{stroke-dashoffset:289.03}37%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}96%{stroke-dashoffset:289.03;opacity:0}100%{stroke-dashoffset:289.03;opacity:1}}
@keyframes anIdle{0%{opacity:1}39%{opacity:1}40.5%{opacity:0}93%{opacity:0}94.5%{opacity:1}100%{opacity:1}}
@keyframes anHappy{0%{opacity:0;transform:scale(.9)}39%{opacity:0;transform:scale(.9)}40.5%{opacity:1;transform:scale(1.1)}44%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}94.5%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes anK1{0%{opacity:1}38%{opacity:1}39.5%{opacity:0}95%{opacity:0}97%{opacity:1}100%{opacity:1}}
@keyframes anK2{0%{opacity:0}40%{opacity:0}41.5%{opacity:1}92%{opacity:1}93.5%{opacity:0}100%{opacity:0}}
@keyframes anChip{0%{opacity:0;transform:translateY(-14px) scale(.85)}44%{opacity:0;transform:translateY(-14px) scale(.85);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}48%{opacity:1;transform:none}80%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.4,0,1,1)}84%{opacity:0;transform:translateY(4px)}100%{opacity:0;transform:translateY(4px)}}
@keyframes mkPress{0%{transform:none}45%{transform:translateY(2px) scale(.985)}100%{transform:none}}
@keyframes ltRec{0%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);opacity:1}70%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:1}88%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:1}96%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:0}100%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);opacity:0}}
@keyframes ltHead{0%{transform:none;opacity:1}70%{transform:translateX(100%);opacity:1}88%{transform:translateX(100%);opacity:1}96%{transform:translateX(100%);opacity:0}100%{transform:none;opacity:0}}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.deck-btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  transition:transform var(--t-release) var(--ease-out),background-color 160ms var(--ease-out)}
.deck-btn:active{transform:scale(.94);transition-duration:var(--t-press)}
.deck-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.deck-btn:hover{background:rgba(255,255,255,.26)}}
.deck-count{min-width:4.6em;text-align:center;font:800 18px/1 var(--font);color:#fff;font-variant-numeric:tabular-nums}
.deck-n{color:var(--yellow)}
@media (prefers-reduced-motion:reduce){.dcard,.fix .you,.fix .him,.roller-in.anim,.live-sw,.live-sw i,.mk li,.mk-pw,.us-key,.us-new,.us-new .ok{transition:none!important}}

/* ───────── What's inside: one connected plugin ───────── */
.conn{position:relative;aspect-ratio:1400/899}
.conn-base{position:absolute;inset:0;width:100%;height:100%}
.conn-key{position:absolute;padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity 120ms}   /* the plugin's own key-lit fade */
.conn-key img{display:block;width:100%;height:100%}
.conn-key.is-on{opacity:1}
.conn-key::after{content:"";position:absolute;inset:-10px 0}
.conn-panel{position:absolute;overflow:hidden;touch-action:pan-y;border-radius:4px}
.conn-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.conn-vid.is-on{visibility:visible}

/* ───────── FREE TRIAL SHEET (Itay 2026-10-12): a native <dialog>; on phones a white sheet that slides up from the bottom,
   from 600 px a centred card. Navy scrim behind. ───────── */
html.sheet-open{overflow:hidden}
.tsheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;
  display:none;align-items:flex-end;justify-content:center;overflow:hidden;color:var(--ink)}
.tsheet[open]{display:flex}
.tsheet::backdrop{background:rgba(11,20,48,.62);opacity:0;transition:opacity 260ms var(--ease-out)}
.tsheet.is-in::backdrop{opacity:1}
.ts-card{position:relative;width:100%;max-width:520px;max-height:calc(100% - 20px);overflow-y:auto;overscroll-behavior:contain;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:#fff;text-align:left;
  transform:translateY(105%);transition:transform 420ms cubic-bezier(.32,.72,0,1)}
.tsheet.is-in .ts-card{transform:none}
.tsheet.is-out .ts-card{transition-duration:240ms;transition-timing-function:var(--ease-in)}
.ts-card::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(0,0,0,.14)}
.ts-x{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.ts-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ts-x:active{transform:scale(.94)}
.ts-buddy{width:84px;height:84px;margin-top:4px}
.ts-buddy--big{width:120px;height:120px}
.ts-h{margin-top:10px;font:800 clamp(34px,10.2vw,48px)/.95 var(--font);font-variation-settings:"wdth" 84;letter-spacing:-.03em;text-wrap:balance;outline:none}
.ts-p{margin-top:10px;font-size:17px;line-height:1.4;color:var(--fine);text-wrap:pretty}
.ts-form{margin-top:20px}
.ts-l{display:block;margin-top:14px;font:700 15px/1.2 var(--font)}
.ts-l:first-child{margin-top:0}
.ts-in{display:block;width:100%;height:56px;margin-top:7px;padding:0 16px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);
  font:500 17px/1 var(--font);-webkit-appearance:none;appearance:none;transition:box-shadow 140ms var(--ease-out)}
.ts-in:focus{outline:none;border-width:3px;padding-inline:15px;box-shadow:0 0 0 4px var(--pink)}
.ts-in[aria-invalid="true"]{border-color:#c2007a}
.ts-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.ts-err{margin-top:7px;font:600 14px/1.3 var(--font);color:#b0006e}
.ts-err--form{margin-top:12px;text-align:center}
.ts-go{width:100%;margin-top:20px}
.ts-go[disabled]{opacity:.75;cursor:progress}
.ts-go.is-busy .ts-go-t::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:ts-dots 1s steps(4) infinite}
@keyframes ts-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ts-fine{margin-top:14px;font-size:13px;line-height:1.4;color:var(--fine);text-align:center}
.ts-fine a{color:inherit}
.ts-step--done{text-align:center}
.ts-step--done .ts-buddy{margin-inline:auto}
.ts-mail{display:inline-block;color:var(--ink);overflow-wrap:anywhere}
.ts-next{display:grid;gap:12px;margin:22px 0 0;padding:16px;border-radius:18px;background:var(--yellow);text-align:left;counter-reset:none}
.ts-next li{display:flex;align-items:flex-start;gap:12px;font:600 16px/1.35 var(--font)}
.ts-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:800 15px/1 var(--font)}
.ts-done-btn{width:100%;margin-top:20px}
@media (min-width:600px){
  .tsheet{align-items:center}
  .ts-card{border-radius:28px;padding:30px 30px 28px;max-height:calc(100% - 48px);transform:translateY(24px) scale(.98);opacity:0;
    transition:transform 320ms var(--ease-out),opacity 220ms var(--ease-out)}
  .ts-card::before{display:none}
  .tsheet.is-in .ts-card{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.ts-card,.tsheet::backdrop{transition:none!important}}
.foot-mor{max-width:34em;margin-top:14px;font-size:12px;line-height:1.45;color:#9a9a9a}

/* ───────── BUY + THANK-YOU pages (Itay 2026-10-12): the same plates, type and buttons as the landing page ───────── */
.nav-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;font:700 17px/1 var(--font);color:var(--ink);text-decoration:none}
.nav-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.page-pay .plate{padding-block:28px 40px}
.pay-note{margin-top:14px;font-size:15px;line-height:1.45;color:var(--fine)}
.checkout-container{position:relative;min-height:450px;margin:18px -6px 0}
.pay-loading{display:grid;place-items:center;height:450px;border-radius:20px;background:#f4f4f4;font:700 16px/1 var(--font);color:var(--fine)}
.pay-loading::after{content:"";display:inline-block;width:1.2em;animation:ts-dots 1s steps(4) infinite}
.pay-err{margin-top:12px;padding:14px 16px;border-radius:14px;background:#fff0f9;box-shadow:inset 0 0 0 2px var(--pink);font-size:15px;line-height:1.45}
.pay-err a{color:inherit}
.pay-trust{display:grid;gap:10px;margin-top:20px}
.pay-trust li{display:flex;align-items:center;gap:10px;font:600 15px/1.3 var(--font)}
.pay-trust svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* buy page (2026-10-14, Itay: nobody should have to scroll to reach the payment). Phone: a small order card, then the
   card form starts in the first screen. >= 960 px: the order on the left, the form on the right, side by side. */
.buy{padding:12px 0 44px}
.buy-in{display:grid;grid-template-columns:minmax(0,1fr);max-width:calc(var(--col) + 32px);margin-inline:auto;padding-inline:var(--gutter-l) var(--gutter-r)}
.buy-head{display:flex;align-items:center;gap:14px}
.buy-tile{flex:none;width:clamp(104px,30vw,150px);padding:9px 6px 6px;border-radius:16px;background:var(--yellow)}
.buy-tile img{width:100%}
.buy-name{min-width:0}
.buy-h{font:800 clamp(28px,8.2vw,40px)/.92 var(--font);font-variation-settings:"wdth" 78;letter-spacing:-.03em;text-wrap:balance}
.buy-sub{margin-top:7px;font:600 clamp(16px,4.4vw,19px)/1.2 var(--font);color:var(--fine)}
.buy-sub b{color:var(--ink);font-weight:800;white-space:nowrap}
.buy-lines{margin-top:14px;border-top:1px solid rgba(0,0,0,.12)}
.buy-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12);font-size:16px;line-height:1.3}
.buy-lines b{flex:none;font-weight:700}
.buy-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:12px;font:800 clamp(22px,6.4vw,28px)/1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.02em}
.buy-pay{margin-top:24px}
.buy-f-h{display:flex;align-items:center;gap:8px;font:800 clamp(22px,6.2vw,26px)/1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.015em}
.buy-f-h svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.buy-ways{margin-top:6px;font-size:15px;color:var(--fine)}
.buy .checkout-container{margin:12px -6px 0}
.buy-after{margin-top:20px}
.buy .pay-trust{margin-top:0}
.buy .pay-note{margin-top:14px}
/* (2026-10-15, Itay picked "below") the benefits list under the form, in the reference's style: bold lead, two thin rules */
.bn{margin-top:16px;padding:12px 0;border-block:1px solid rgba(0,0,0,.14)}
.bn li{position:relative;padding:7px 0 7px 22px;font-size:16px;line-height:1.35}
.bn li::before{content:"";position:absolute;left:4px;top:calc(7px + .55em);width:7px;height:7px;border-radius:50%;background:var(--ink)}
.bn b{font-weight:700}
.bn--below{margin-top:0}
@media (min-width:960px){.bn li{font-size:17px}}
.buy-fine{margin-top:10px;font-size:13px;line-height:1.3;color:var(--fine)}
.buy-fine a{color:inherit;text-underline-offset:2px}
/* (2026-10-15, Itay picked look D "Straight to pay") phones and tablets: the order as one bar, tap it for the lines */
.lx-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;border:0;border-radius:20px;
  background:#f3f3f3;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform var(--t-release) var(--ease-out)}
.lx-bar:active{transform:scale(.985);transition-duration:var(--t-press)}
.lx-bar:focus-visible{border-radius:20px}
.lx-bar img{width:76px;border-radius:10px;background:var(--yellow);padding:5px 4px 4px}
.lx-name b{display:block;font:800 19px/1.05 var(--font);font-variation-settings:"wdth" 86;letter-spacing:-.015em}
.lx-name small{display:block;margin-top:4px;font-size:14px;line-height:1.25;color:var(--fine)}
.lx-amt{text-align:right}
.lx-amt b{display:block;font:800 20px/1 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.015em;white-space:nowrap}
.lx-amt small{display:inline-flex;align-items:center;gap:3px;margin-top:6px;font-size:13px;font-weight:700;color:var(--fine)}
.lx-amt small svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.lx-bar[aria-expanded="true"] .lx-amt small svg{transform:rotate(180deg)}
.lx-more{padding:4px 4px 0}
.lx-more .buy-lines{margin-top:0;border-top:0}
.lx-more:not([hidden]){animation:fade 180ms var(--ease-out)}
.buy--d{padding-top:6px}
@media (max-width:959px){.buy--d .buy-sum{display:none}.buy--d .buy-pay{margin-top:20px}}
@media (max-width:374px){.lx-bar{gap:9px;padding:8px 10px 8px 8px}.lx-bar img{width:58px}.lx-name b{font-size:17px}.lx-name small{display:none}.lx-amt b{font-size:17px}}   /* (320 px: the name and the price on one line each) */
@media (hover:hover) and (pointer:fine){.lx-bar:hover{background:#ebebeb}}
@media (prefers-reduced-motion:reduce){.lx-amt small svg,.lx-bar{transition:none}.lx-more:not([hidden]){animation:none}}
@media (min-width:960px){
  .page-buy .nav-in{max-width:1192px}
  .buy--d .lx-sum{display:none}
  .buy{padding:28px 0 80px}
  .buy-in{max-width:1192px;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-rows:auto auto 1fr;column-gap:clamp(48px,6vw,88px);
    grid-template-areas:"sum pay" "after pay" ". pay";align-items:start}
  .buy-sum{grid-area:sum}
  .buy-head{flex-direction:column;align-items:stretch;gap:24px}
  .buy-name{order:-1}
  .buy-h{font-size:clamp(56px,5.4vw,76px);line-height:.88;letter-spacing:-.035em;font-variation-settings:"wdth" 76}
  .buy-sub{margin-top:12px;font-size:24px}
  .buy-tile{width:auto;padding:26px 20px 20px;border-radius:28px}
  .buy-tile img{width:min(100%,620px,max(300px,calc((100svh - 470px) * 1.558)));margin-inline:auto}   /* (a short laptop screen still shows the total) */
  .buy-lines{margin-top:20px}
  .buy-lines li{padding:12px 0;font-size:17px}
  .buy-total{padding-top:16px;font-size:30px}
  .buy-pay{grid-area:pay;margin-top:0;padding:28px 24px 16px;border-radius:28px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.14)}
  .buy-pay .buy-f-h,.buy-pay .buy-ways{padding-inline:4px}
  .buy .checkout-container{margin:14px 0 0}
  .buy-after{grid-area:after;margin-top:24px}
}
.thx{text-align:center}
.thx-buddy{width:140px;height:140px;margin-inline:auto}
.thx-h{margin-top:10px;font:800 clamp(52px,16vw,96px)/.88 var(--font);font-variation-settings:"wdth" 76;letter-spacing:-.04em;outline:none}
.thx-line{margin-top:14px;font:600 18px/1.4 var(--font);color:var(--fine);text-wrap:balance}
.thx-keyrow{margin-top:14px}
.thx-line.is-wait::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:ts-dots 1s steps(4) infinite}   /* (2026-10-15) dots while the key is on its way */
.thx-key{display:inline-block;max-width:100%;padding:16px 18px;border-radius:16px;background:var(--yellow);font:700 clamp(20px,6.2vw,28px)/1.1 var(--mono);letter-spacing:.04em;
  -webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.thx-copy{width:100%;max-width:420px;margin:16px auto 0}
.thx-mailed{margin-top:12px;font:600 16px/1.35 var(--font);color:var(--fine)}
.thx-steps{margin-top:34px;text-align:left}
.thx-sh{font:800 clamp(28px,8vw,40px)/.95 var(--font);font-variation-settings:"wdth" 84;letter-spacing:-.025em;text-align:center}
.thx-steps .ts-next{margin-top:16px}
.thx-dl a{color:inherit;font-weight:800}
.thx-note,.thx-help{margin-top:16px;font-size:15px;line-height:1.45;color:var(--fine);text-align:center}
.thx-help a{color:inherit}
@media (min-width:768px){.page-pay .plate{padding-block:48px 56px}}

.dl-ic{flex:none;width:22px;height:22px;margin-right:10px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ───────── legal + contact pages (the v1 drafts in this style) ───────── */
.legal h1{font:800 clamp(40px,12vw,72px)/.9 var(--font);font-variation-settings:"wdth" 80;letter-spacing:-.035em;text-wrap:balance}
.legal h2{margin-top:32px;font:800 clamp(22px,6.2vw,28px)/1.05 var(--font);font-variation-settings:"wdth" 88;letter-spacing:-.015em}
.legal h3{margin-top:22px;font:800 19px/1.2 var(--font)}
.legal p,.legal li{margin-top:12px;font-size:17px;line-height:1.55;max-width:38em}
.legal ul,.legal ol{margin-top:8px;padding-left:1.2em;list-style:disc}
.legal ol{list-style:decimal}
.legal a{color:var(--ink);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
.legal h1 + p{color:var(--fine);font-size:15px}

/* ───────── 0 HERO "All night sky" (Itay 2026-10-13, from concepts3/sky.html) ─────────
   The section is the whole first screen; the nav bar floats on top of it (it scrolls away like before). */
.nav--sky{position:absolute;top:0;left:0;right:0;background:transparent;color:#fff}
.nav--sky .nav-brand,.nav--sky .menu-btn{color:#fff}
.nav--sky.is-open .nav-brand,.nav--sky.is-open .menu-btn{color:var(--ink)}   /* (the open menu bar is white) */
.nav--sky .menu{color:var(--ink)}   /* (the menu sheet is white: its links stay black) */
@media (hover:hover) and (pointer:fine){.nav--sky:not(.is-open) .nav-links a:hover{color:var(--yellow);text-decoration:none}}
.sky{position:relative;isolation:isolate;overflow:hidden;color:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;
  height:100vh;height:100svh;min-height:400px;
  padding:calc(var(--nav-h) + env(safe-area-inset-top) + clamp(14px,4.2svh,46px)) 0 clamp(10px,2.2svh,26px);   /* (Itay: the headline lower than in the concept) */
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 78% 11%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 92%,rgba(255,255,255,.4) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 94% 62%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 5% 58%,rgba(255,255,255,.45) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 58% 7%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 31%,rgba(255,255,255,.4) 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 29%,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 21% 46%,rgba(255,255,255,.35) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 70% 44%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 9% 84%,rgba(255,255,255,.4) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 88%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 50% 26%,rgba(255,255,255,.3) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 64% 97%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 3% 30%,rgba(255,255,255,.45) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 97% 40%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(120% 78% at 50% 54%,#1b2b60,#0b1430 60%,#060b1f)}
.sky :focus-visible{outline-color:var(--yellow)}
/* twinkling "+" sparkles, the same kind as on the plugin's TV */
.spark{position:absolute;z-index:0;width:var(--s,10px);height:var(--s,10px);color:#fff;opacity:.7;pointer-events:none;animation:twinkle var(--d,5s) ease-in-out var(--dl,0s) infinite}
.spark svg{width:100%;height:100%;fill:currentColor}
.spark--c{color:var(--cyan)}
.spark--p{color:var(--pink)}
@keyframes twinkle{0%,100%{opacity:var(--o,.7);transform:scale(1)}50%{opacity:.15;transform:scale(.6)}}
.sky-h1{position:relative;z-index:1;flex:none;width:100%;padding-inline:var(--gutter-l) var(--gutter-r);color:#fff;
  font:800 clamp(34px,min(13vw,7.4svh),78px)/.9 var(--font);font-variation-settings:"wdth" 78;letter-spacing:-.03em}
.sky-h1 span{display:block;width:max-content;max-width:none;margin-inline:auto;white-space:nowrap}   /* (width = the line, for the JS fit) */
/* the stage: everything between the headline and the button; the plugin takes as much of it as it can */
.sky-stage{position:relative;z-index:1;flex:1 1 0;min-height:0;width:100%;display:grid;place-items:center;container-type:size}
.float{--bub:50px;position:relative;width:min(calc(100vw - 40px),600px);padding-top:var(--bub)}
@supports (width:1cqh){.float{width:min(calc(100cqw - 40px),calc((100cqh - var(--bub) - 36px) * 1.5575),600px)}}   /* (>= 18 px of sky above and below) */
.float-in{position:relative;isolation:isolate;animation:hover 7s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* rim light, all behind the plugin so only what spills past its edges shows (no filters):
   1. a thin pink-to-cyan line that follows the chassis outline exactly (the chassis mask itself, 2.5 px bigger),
   2. three wider faint rings the same way, 3. soft glows: pink from the lower left, cyan from the upper right, a pink pool
   under it. Every glow ellipse stays inside its box, so no box edge ever shows. */
.halo{position:absolute;z-index:-1;left:-14%;right:-14%;top:-28%;bottom:-20%;pointer-events:none;background:
  radial-gradient(30% 11% at 50% 88.5%,rgba(255,79,207,.42),rgba(255,79,207,0)),
  radial-gradient(21% 28% at 21.9% 70.3%,rgba(255,79,207,.5),rgba(255,79,207,.16) 55%,rgba(255,79,207,0)),
  radial-gradient(21% 32% at 78.1% 33.8%,rgba(63,233,255,.42),rgba(63,233,255,.12) 55%,rgba(63,233,255,0)),
  radial-gradient(50% 50% at 50% 50%,rgba(130,150,255,.2),rgba(130,150,255,0))}
.rim,.rim-top{position:absolute;z-index:-1;pointer-events:none;
  background:linear-gradient(200deg,var(--cyan) 8%,#9aa8ff 46%,var(--pink) 82%)}
.rim{--o:2.5px;left:calc(-1 * var(--o));right:calc(-1 * var(--o));top:calc(2.36% - var(--o));bottom:calc(-1 * var(--o));
  -webkit-mask:url(img/chassis_mask.png) 0 0/100% 100% no-repeat;mask:url(img/chassis_mask.png) 0 0/100% 100% no-repeat}
.rim--w1{--o:5px;opacity:.22}.rim--w2{--o:10px;opacity:.09}.rim--w3{--o:16px;opacity:.045}   /* three faint steps = a soft glow that keeps the chassis shape */
.rim-top{left:-2px;right:-2px;top:-2.5px;height:calc(2.36% + 5px);
  -webkit-mask:url(img/monitor_top.png) 0 0/100% 100% no-repeat;mask:url(img/monitor_top.png) 0 0/100% 100% no-repeat}
.float .plug{margin-top:0}
.float .plug::after{display:none}

/* the request bubble on the plugin's top-left corner (live hero style), typing in step with the video */
.float .ask{position:absolute;left:4px;top:auto;bottom:calc(100% - 8px);z-index:3;max-width:calc(100% - 8px);transform:rotate(-4deg);transform-origin:0 100%}
.float .ask::after{left:26px;margin-left:0}

/* buttons + DAWs */
.sky-act{flex:none;width:100%;max-width:calc(440px + 32px);padding-inline:var(--gutter-l) var(--gutter-r);display:flex;flex-direction:column;align-items:stretch}
.sky .key{min-height:56px;font-size:20px;background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #000;transform:translateY(-3px);
  transition:transform 120ms var(--ease-out),box-shadow 120ms var(--ease-out),background-color 160ms var(--ease-out)}
.sky .key:active{transform:translateY(1px);box-shadow:0 1px 0 #000}
@media (hover:hover) and (pointer:fine){.sky .key:hover{background:#fff27a;color:var(--ink)}}
.sky .buy-link{margin-top:10px;color:#fff;text-decoration-color:#fff}
@media (hover:hover) and (pointer:fine){.sky .buy-link:hover{text-decoration-color:var(--pink)}}
.sky .daws-row{margin-top:12px}
.sky .daws-label{color:var(--on-navy-2)}

/* very short browsers (the JS guard): first the DAW caption goes, then the DAW row */
.sky.is-tight .daws-label{display:none}
.sky.is-tighter .daws-row{display:none}
@media (max-width:374px){.sky .daws-label{font-size:12.5px;font-variation-settings:"wdth" 88}}
@media (max-width:359px){.float .ask{font-size:16px;padding:10px 14px}.sky .daws-label{font-size:12.5px;font-variation-settings:"wdth" 88}.sky .key{font-size:17px}.sky .key .dl-ic{width:20px;height:20px;margin-right:8px}}

/* tablet / desktop: the same screen, centred */
@media (min-width:768px){.float{--bub:52px}.float .ask{font-size:20px}}

.sky-act{position:relative;z-index:1}
.sky .cta--hero{display:flex;flex-direction:column;align-items:stretch}
@media (prefers-reduced-motion:reduce){.spark,.float-in{animation:none}.sky .key{transition:none}.sky .key:active{transform:translateY(-3px);box-shadow:0 5px 0 #000}}
/* phones on their side: headline left, plugin right, buttons under the headline */
@media (orientation:landscape) and (max-height:500px){
  .sky{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:1fr auto auto 1fr;column-gap:20px;align-items:center;text-align:left;height:auto;min-height:100svh;
    padding:calc(var(--nav-h) + 8px) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
  .sky-h1{grid-column:1;grid-row:2;align-self:end;padding:0;font-size:clamp(28px,7.2vh,44px)}
  .sky-h1 span{margin-inline:0}
  .sky-act{grid-column:1;grid-row:3;align-self:start;margin-top:14px;padding:0;max-width:none}
  .sky-stage{grid-column:2;grid-row:1 / -1;height:100%;min-height:220px}
  .sky .daws-row{display:none}
  /* (review 2026-10-13) here the plugin fills the whole height, so its glow reaches the sky's bottom edge, where #hear carries
     the sky on with no edge: the cut showed as a straight line. The sky's own background is painted again over its last
     30 px (solid for the last 4, then fading in smooth steps), so the glow fades out before the edge; where there is no
     glow nothing changes. (The plugin's bottom is always >= 34 px above the edge, so the band never covers it.) */
  .sky::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;pointer-events:none;background:inherit;
    -webkit-mask-image:linear-gradient(to top,#000 4px,rgba(0,0,0,.84) 10.5px,rgba(0,0,0,.5) 17px,rgba(0,0,0,.16) 23.5px,rgba(0,0,0,0) 30px);
    mask-image:linear-gradient(to top,#000 4px,rgba(0,0,0,.84) 10.5px,rgba(0,0,0,.5) 17px,rgba(0,0,0,.16) 23.5px,rgba(0,0,0,0) 30px)}
}
/* (review 2026-10-13) old hero rules that also match the new markup, neutralised: .demo's 420 px floor (>= 768 px) and the
   old .hero-act gap; the nav's keyboard ring yellow on the sky; the open menu bar white across the whole width */
.sky .float.demo{min-width:0}
.sky-act{gap:0}
.nav--sky:not(.is-open) :focus-visible{outline-color:var(--yellow)}
.nav--sky.is-open .nav-in{max-width:none;padding-inline:max(var(--gutter-l),calc((100vw - var(--col)) / 2)) max(var(--gutter-r),calc((100vw - var(--col)) / 2))}
/* (Itay 2026-10-13) the deck's colour panels moved into the deck block above (1 yellow, 2 black, 3 navy, 4 pink, 5 white, 6 cyan) */

/* ───────── 2 WATCH IT (Itay 2026-10-13: the VSL card replaces How it works; from concepts7/vsl-card.html) ─────────
   The film as one 4:5 card on the yellow plate: the poster, the silent teaser and the film stacked in one rounded frame with
   the site's hard black edge; the giant yellow key sits on the frame's bottom edge; under it the controls (playing) or watch
   again + the trial key (ended); the chapter chips under that. site.js §16 drives it (states on .vc[data-state]). */
.vc-sec .h2{max-width:11em}
.vc{--kd:clamp(104px,34vw,144px);--r:28px;position:relative;margin-top:26px}
.vc-stage{position:relative}

/* the screen: the poster, the teaser loop and the film stacked in one rounded 4:5 frame with a hard black edge */
.vc-screen{position:relative;isolation:isolate;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--navy);box-shadow:0 6px 0 #000}
@supports not (aspect-ratio:4/5){.vc-screen{height:0;padding-top:125%}}
.vc-screen::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;box-shadow:inset 0 0 0 2px #000;pointer-events:none}
.vc-poster,.vc-video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.vc-poster{z-index:0}
/* the teaser has captions in its bottom fifth: only its top 80.5 % shows (its picture has faded to navy there), the poster's
   empty navy band stays below it; the last 8 px of the cut melt into the poster */
.vc-tz{position:absolute;z-index:1;left:0;top:0;right:0;height:80.5%;overflow:hidden;border-radius:var(--r) var(--r) 0 0;opacity:0;transition:opacity 420ms var(--ease-out);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 8px),transparent)}
.vc-tz video{display:block;width:100%;height:124.224%;max-width:none;object-fit:cover}
.vc.tz-on .vc-tz{opacity:1}
.vc-video{z-index:2;opacity:0;background:transparent}
.vc[data-state="playing"] .vc-video,.vc[data-state="paused"] .vc-video,.vc[data-state="ended"] .vc-video{opacity:1}

/* the length with a speaker: it plays with sound */
.vc-len{position:absolute;z-index:5;right:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:var(--r-pill);
  background:#000;color:#fff;font:700 14px/1 var(--mono);letter-spacing:.02em;transition:opacity 160ms var(--ease-out)}
.vc-len svg{width:16px;height:16px;flex:none}
.vc[data-state="playing"] .vc-len,.vc[data-state="paused"] .vc-len,.vc[data-state="ended"] .vc-len{opacity:0}

/* the giant key: the whole card is one button; the yellow key itself sits on the frame's bottom edge */
.vc-big{position:absolute;inset:0;z-index:7;margin:0;padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink);cursor:pointer;
  -webkit-touch-callout:none}
.vc-big:focus-visible{outline:3px solid #000;outline-offset:5px;border-radius:calc(var(--r) + 4px)}
.vc-key{position:absolute;left:50%;top:100%;width:var(--kd);height:var(--kd);margin:calc(var(--kd) / -2) 0 0 calc(var(--kd) / -2);border-radius:50%;
  background:var(--yellow);box-shadow:inset 0 0 0 2.5px #000,0 5px 0 #000;transform:translateY(-3px);display:grid;place-items:center;
  transition:transform 120ms var(--ease-out),box-shadow 120ms var(--ease-out),background-color 160ms var(--ease-out)}
.vc-key svg{width:34%;height:34%;margin-left:7%;fill:#000;transition:opacity 140ms var(--ease-out),transform 200ms var(--ease-out)}
.vc-big:active .vc-key,.vc[data-state="loading"] .vc-key{transform:translateY(1px);box-shadow:inset 0 0 0 2.5px #000,0 1px 0 #000}
@media (hover:hover) and (pointer:fine){.vc[data-state="idle"] .vc-big:hover .vc-key{background:#fff27a}}
/* while the film is on, the key folds away (the controls take its place under the card) */
.vc-big{transition:visibility 0s linear 0s}
.vc-key{opacity:1}
.vc[data-state="playing"] .vc-big,.vc[data-state="paused"] .vc-big,.vc[data-state="ended"] .vc-big{visibility:hidden;transition:visibility 0s linear 180ms}
.vc[data-state="playing"] .vc-key,.vc[data-state="paused"] .vc-key,.vc[data-state="ended"] .vc-key{opacity:0;transform:translateY(8px) scale(.6);
  transition:opacity 160ms var(--ease-in),transform 180ms var(--ease-in)}

/* loading ring (inside the giant key, then inside the small centre key while the film waits for data) */
.vc .spin{position:absolute;inset:27%;border-radius:50%;border:4px solid rgba(0,0,0,.18);border-top-color:#000;opacity:0;animation:vc-spin 800ms linear infinite;transition:opacity 140ms}
@keyframes vc-spin{to{transform:rotate(360deg)}}
.vc[data-state="loading"] .vc-key svg{opacity:0;transform:scale(.6)}
.vc[data-state="loading"] .vc-key .spin{opacity:1}

/* tap the picture to pause / play; a small yellow key in the middle while paused or waiting */
.vc-tap{position:absolute;inset:0;z-index:3;display:none;cursor:pointer}
.vc[data-state="playing"] .vc-tap,.vc[data-state="paused"] .vc-tap{display:block}
.vc-mid{position:absolute;z-index:4;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--yellow);
  box-shadow:inset 0 0 0 2px #000,0 4px 0 #000;display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.7);
  transition:opacity 140ms var(--ease-in),transform 160ms var(--ease-in)}
.vc-mid svg{width:30px;height:30px;margin-left:5px;fill:#000}
.vc-mid .spin{border-width:3.5px;inset:22%}
.vc[data-state="paused"] .vc-mid,.vc.is-wait[data-state="playing"] .vc-mid{opacity:1;transform:none;transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out)}
.vc.is-wait .vc-mid svg{opacity:0}
.vc.is-wait .vc-mid .spin{opacity:1}

/* under the card: the key's lower half (idle), the controls (playing) or the last call (ended), all in the same room */
.vc-foot{position:relative;height:calc(var(--kd) / 2 + 30px)}
.vc-deck,.vc-end{position:absolute;left:0;right:0;top:22px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 140ms var(--ease-in),transform 140ms var(--ease-in),visibility 0s linear 140ms}
.vc[data-state="playing"] .vc-deck,.vc[data-state="paused"] .vc-deck,.vc[data-state="ended"] .vc-end{opacity:1;visibility:visible;transform:none;
  transition:opacity 220ms var(--ease-out) 90ms,transform 260ms var(--ease-out) 90ms,visibility 0s}
.vc-deck{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px 44px;align-items:center;column-gap:4px}
.vc-btn{position:relative;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:#000;display:grid;place-items:center;cursor:pointer;
  transition:transform var(--t-release) var(--ease-out)}
.vc-btn:active{transform:scale(.92);transition-duration:var(--t-press)}
.vc-btn svg{width:22px;height:22px;fill:currentColor}
.vc-btn svg[stroke]{fill:none}
.vc-btn:focus-visible{border-radius:50%}
.vc-pp{background:#000;color:var(--yellow)}
.vc-pp svg{width:18px;height:18px}
.vc-pp .i-play{margin-left:3px}
.vc-pp .i-pause,.vc-pp.is-paused .i-play{display:block}
.vc-pp .i-play,.vc-pp.is-paused .i-pause{display:none}
.vc-mute .i-on{display:block}.vc-mute .i-off{display:none}
.vc-mute[aria-pressed="true"] .i-on{display:none}.vc-mute[aria-pressed="true"] .i-off{display:block}
.vc-fs .i-exit{display:none}
.vc.is-fs .vc-fs .i-enter{display:none}.vc.is-fs .vc-fs .i-exit{display:block}
@media (hover:hover) and (pointer:fine){.vc-btn:not(.vc-pp):hover{background:rgba(0,0,0,.08)}.vc-pp:hover{background:var(--pink);color:#000}}

/* the progress bar: one segment per chapter, each as long as its chapter; the gaps are the chapter ticks */
.vc-bar{position:relative;height:44px;margin-inline:6px 4px;display:flex;align-items:center;gap:3px;cursor:pointer;touch-action:none;border-radius:6px}
.vc-bar:focus-visible{outline-offset:2px}
.vc-seg{position:relative;flex:var(--d) 1 0;min-width:0;height:6px;border-radius:3px;background:rgba(0,0,0,.2);overflow:hidden}
.vc-seg i{position:absolute;inset:0;background:#000;transform-origin:0 50%;transform:scaleX(0)}
.vc-thumb{position:absolute;left:0;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#000;box-shadow:0 0 0 2px var(--yellow);pointer-events:none}
.vc-time{font:700 13px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.01em;padding-inline:2px 4px;min-width:3.4em;text-align:right}

/* the end: watch again + the trial key, right under the film's own "Try it free" card */
.vc-end{display:flex;gap:10px;align-items:center}
.vc-again{flex:none;width:52px;height:52px;box-shadow:inset 0 0 0 2px #000}
.vc-again svg{width:24px;height:24px}
.vc-end .btn{flex:1 1 auto;min-width:0}
.vc-end .dl-ic{width:22px;height:22px;margin-right:9px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vc-msg{position:absolute;z-index:5;left:12px;top:12px;max-width:calc(100% - 110px);padding:7px 12px;border-radius:16px;background:#000;color:#fff;font-size:15px;line-height:1.25;display:none}
.vc.is-err .vc-msg{display:block}

/* the chapter chips: one row you scroll sideways; the chapter on screen is black */
.vc-chaps{display:flex;gap:8px;margin:2px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));padding:6px var(--gutter-r) 8px var(--gutter-l);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter-l);scrollbar-width:none}
.vc-chaps::-webkit-scrollbar{display:none}
.vc-chaps::after{content:"";flex:0 0 1px}   /* (keeps the end padding in a scrolling row) */
.vc-chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:0 16px 0 7px;border:0;border-radius:var(--r-pill);
  background:transparent;box-shadow:inset 0 0 0 2px #000;color:#000;font:700 16px/1 var(--font);font-variation-settings:"wdth" 90;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-release) var(--ease-out),background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.vc-chip b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#000;color:var(--yellow);font:700 13px/1 var(--mono);transition:background-color 160ms,color 160ms}
.vc-chip:active{transform:scale(.97);transition-duration:var(--t-press)}
.vc-chip[aria-current="true"]{background:#000;color:#fff}
.vc-chip[aria-current="true"] b{background:var(--yellow);color:#000}
.vc-chip:focus-visible{outline-offset:2px;border-radius:var(--r-pill)}
@media (hover:hover) and (pointer:fine){.vc-chip:not([aria-current="true"]):hover{background:#fff}}

/* full screen (desktop, Android, iPad: the whole player; iPhone uses the video's own full screen) */
.vc:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:#000;color:#fff}
.vc:fullscreen .vc-stage{height:calc(100% - 110px);aspect-ratio:4/5;max-width:100%;width:auto}
.vc:fullscreen .vc-screen{height:100%;box-shadow:none;border-radius:12px}
.vc:fullscreen .vc-foot{width:min(100%,720px);height:84px}
.vc:fullscreen .vc-btn,.vc:fullscreen .vc-time{color:#fff}
.vc:fullscreen .vc-pp{background:var(--yellow);color:#000}
.vc:fullscreen .vc-seg{background:rgba(255,255,255,.28)}
.vc:fullscreen .vc-seg i,.vc:fullscreen .vc-thumb{background:#fff}
.vc:fullscreen .vc-thumb{box-shadow:0 0 0 2px #000}
.vc:fullscreen :focus-visible{outline-color:var(--yellow)}
.vc:-webkit-full-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:#000;color:#fff;width:100%;height:100%}
.vc:-webkit-full-screen .vc-stage{height:calc(100% - 110px);aspect-ratio:4/5;max-width:100%;width:auto}
.vc:-webkit-full-screen .vc-screen{height:100%;box-shadow:none;border-radius:12px}
.vc:-webkit-full-screen .vc-foot{width:min(100%,720px);height:84px}
.vc:-webkit-full-screen .vc-btn,.vc:-webkit-full-screen .vc-time{color:#fff}
.vc:-webkit-full-screen .vc-pp{background:var(--yellow);color:#000}
.vc:-webkit-full-screen .vc-seg{background:rgba(255,255,255,.28)}
.vc:-webkit-full-screen .vc-seg i,.vc:-webkit-full-screen .vc-thumb{background:#fff}

@media (max-width:359px){
  .vc{--r:22px}
  .vc-time{display:none}
  .vc-deck{grid-template-columns:44px minmax(0,1fr) 44px 44px}
  .vc-chip{font-size:15px;padding-right:13px}
  .vc-end .btn{font-size:15px;padding:0 12px}
  .vc-end .dl-ic{width:19px;height:19px;margin-right:7px}
}
@media (min-width:768px){
  .vc-sec .wrap{text-align:center}
  .vc-sec .h2{margin-inline:auto}
  .vc{width:min(100%,440px,max(260px,calc((100svh - 330px) * .8)));margin-inline:auto;margin-top:36px;--kd:144px;text-align:left}
  .vc-chaps{flex-wrap:wrap;justify-content:center;overflow:visible;margin:6px 0 0;padding:6px 0 0}
  .vc-chaps::after{display:none}
}
/* wide screens: the title and the chapters on the left, the card on the right. (2026-10-15, Itay: the long one-per-line list
   ran past the card's end) the chapters wrap as chips in a few rows, and title + chips sit centred against the card */
@media (min-width:900px){
  .vc-sec .wrap{max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto 1fr;column-gap:72px;align-items:start;text-align:left}
  .vc-sec .h2{grid-column:1;grid-row:2;max-width:9em;margin:0}
  .vc{grid-column:2;grid-row:1 / span 4;width:min(440px,max(300px,calc((100svh - 250px) * .8)));margin:0}
  .vc-chaps{grid-column:1;grid-row:3;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;max-width:560px;margin-top:32px}
}
/* (review 2026-10-13) phones on their side: the card only as tall as the screen allows, so the picture and its controls fit
   on screen together (at 667x375 it was 600x750; How it works had this rule for its reel); the controls under it keep at
   least 360 px so the bar stays usable. Full screen: the stage rules above set width:auto. ([data-vsl]: only the real
   page's section; concepts7/vsl-card.html loads this file too and stays as it was) */
@media (orientation:landscape) and (max-height:500px){
  [data-vsl] .vc{--kd:88px;--cw:max(180px,calc((100svh - 96px) * .8));width:min(100%,max(var(--cw),360px));margin-inline:auto}
  [data-vsl] .vc-stage{width:min(100%,var(--cw));margin-inline:auto}
}
@media (orientation:landscape) and (max-height:500px) and (min-width:900px){
  [data-vsl] .vc{width:max(var(--cw),360px)}   /* (the two-column grid's auto column: a % width there collapses the card to 0) */
}
@media (prefers-reduced-motion:reduce){
  .vc-key,.vc-key svg,.vc-mid,.vc-deck,.vc-end,.vc-len,.vc-tz,.vc-big,.vc-chip,.vc-btn{transition:none!important}
  .vc .spin{animation:none;border-top-color:#000;border-right-color:#000}
  .vc[data-state="playing"] .vc-key,.vc[data-state="paused"] .vc-key,.vc[data-state="ended"] .vc-key{transform:none}
}

/* ───────── DESKTOP (2026-10-14, Itay: "we need to make the website good for desktop as well") ─────────
   Phones and tablets keep everything above unchanged. From 1024 px the sections use the width: a 1160 px frame and two
   columns wherever a section has two things to show (Hear: title | player, Effects: plugin | tabs, Best part: the six
   points | the deck, Price: tag | words, FAQ: title | questions, End: film | last call). The hero stays one centred
   screen (it already worked); its plugin may grow on a tall screen. */
.deck-toc{display:none}
@media (min-width:1024px){
  :root{--dcol:1160px;--gutter-l:max(40px,env(safe-area-inset-left));--gutter-r:max(40px,env(safe-area-inset-right))}
  .nav-in{max-width:calc(var(--dcol) + 32px)}
  /* hero: same screen, the plugin may grow past 600 px when the height allows it */
  .float{width:min(calc(100vw - 40px),760px)}
  @supports (width:1cqh){.float{width:min(calc(100cqw - 40px),calc((100cqh - var(--bub) - 36px) * 1.5575),820px)}}

  /* 1 Hear: the title (and the buddy) on the left, the player on the right */
  .hear--white > .wrap{max-width:calc(var(--dcol) + 32px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:80px;align-items:center}
  .hear-head{padding-right:0}
  .hear-head .h2{font-size:clamp(60px,5.6vw,84px);max-width:7em}
  .hear-head .flyer{position:relative;right:auto;top:auto;width:150px;height:150px;margin-top:36px}
  .hear-head .flyer img{transform:none}   /* (2026-10-15, Itay) phones flip him to face the title; here he faces the player on the right */
  .hear--white .hp-chips{margin-top:0}
  .hear--white .hp-rec{width:min(360px,100%)}

  /* 2 Watch: the existing two-column layout, in the same frame as the rest */
  .vc-sec .wrap{max-width:calc(var(--dcol) + 32px);column-gap:96px}
  .vc-sec .h2{font-size:clamp(60px,5.6vw,84px)}

  /* 3 Every effect: the title across, then the plugin on the left and the tabs + what's inside on the right */
  #inside > .wrap{max-width:calc(var(--dcol) + 32px)}
  #inside .fx-title{font-size:clamp(60px,5.6vw,84px)}
  .mods{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:64px;align-items:center;
    max-width:calc(var(--dcol) + 32px);margin:44px auto 0;padding-inline:var(--gutter-l) var(--gutter-r)}
  .mods-plug{max-width:none;margin:0}
  .mods > .wrap{max-width:none;margin:0;padding:0}
  .mods-tabs{margin-top:0}

  /* 4 And the best part is…: the six points as a list on the left (a click brings that card up), the deck on the right */
  .made > .wrap{max-width:calc(var(--dcol) + 32px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-rows:auto 1fr;
    column-gap:88px;align-items:start}
  .made .h2{grid-column:1;grid-row:1;font-size:clamp(60px,5.6vw,84px);max-width:7em;margin-top:24px}
  .deck-toc{grid-column:1;grid-row:2;display:grid;gap:2px;margin:32px 0 0;padding:0;list-style:none}
  .deck-toc button{display:flex;align-items:center;gap:16px;width:100%;min-height:52px;padding:6px 0;border:0;background:none;color:var(--on-navy-2);
    font:700 22px/1.2 var(--font);font-variation-settings:"wdth" 90;letter-spacing:-.01em;text-align:left;cursor:pointer;transition:color 160ms var(--ease-out)}
  .deck-toc-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;
    font:800 15px/1 var(--font);font-variant-numeric:tabular-nums;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
  .deck-toc button[aria-current="true"]{color:#fff}
  .deck-toc button[aria-current="true"] .deck-toc-n{background:var(--yellow);color:var(--ink);box-shadow:none}
  .deck{grid-column:2;grid-row:1 / span 2}
  .deck-stack{margin-top:0}

  /* 5 Price: the tag on the left, the words and the buttons on the right */
  .pt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center;--tw:340px;--len:96px;
    padding-inline:max(var(--gutter-l),calc((100% - var(--dcol)) / 2)) max(var(--gutter-r),calc((100% - var(--dcol)) / 2));text-align:left}
  .pt-pend{grid-column:1;grid-row:1;justify-self:center;align-self:start}
  .pt > .wrap{grid-column:2;grid-row:1;max-width:480px;margin:0;padding:0}
  .pt-line{max-width:none;margin:0;font-size:32px}
  .pt .pt-cta{max-width:420px;margin:32px 0 0}
  .pt .buy-link{align-self:flex-start;margin-left:-8px}   /* (its 8 px tap padding: the words line up with the button) */
  .pt-fine{max-width:30em;margin:22px 0 0}

  /* 6 FAQ: the title on the left, the questions on the right */
  #faq > .wrap{max-width:calc(var(--dcol) + 32px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px);grid-template-rows:auto auto 1fr;column-gap:88px}
  #faq .h2{grid-column:1;grid-row:1;font-size:clamp(60px,5.6vw,84px)}
  #faq .body{grid-column:1;grid-row:2}
  .fb{grid-column:2;grid-row:1 / span 3;margin-top:0}

  /* 7 End: the film on the left, the last call on the right */
  .final{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:64px;align-items:center;text-align:left;
    padding-inline:max(var(--gutter-l),calc((100% - var(--dcol)) / 2)) max(var(--gutter-r),calc((100% - var(--dcol)) / 2))}
  .final .film{width:auto;margin:0}
  .final > .wrap{max-width:none;margin:0;padding:0}
  .final-in{justify-items:start}
  .final .h2{margin-top:0;font-size:clamp(56px,4.8vw,72px)}
  .final .cta{width:100%;max-width:420px;margin-inline:0}

  /* footer: one row */
  .foot .wrap{max-width:calc(var(--dcol) + 32px);display:grid;grid-template-columns:auto 1fr;column-gap:48px;align-items:center}
  .foot-links{grid-column:2;grid-row:1;justify-self:end;margin-top:0}
  .foot-mor,.foot-c{grid-column:1 / -1}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.deck-toc button:not([aria-current="true"]):hover{color:#fff}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.deck-toc button,.deck-toc-n{transition:none}}


/* ───────── MORE AI page (ai.html, 2026-10-15; opened by the plugin) ───────── */
.ai{padding:12px 0 56px}
.ai-in{max-width:calc(var(--col) + 32px);margin-inline:auto;padding-inline:var(--gutter-l) var(--gutter-r)}
.ai-h{font:800 clamp(34px,10vw,56px)/.92 var(--font);font-variation-settings:"wdth" 78;letter-spacing:-.03em;text-wrap:balance}
.ai-sub{margin-top:10px;font-size:17px;line-height:1.4;color:var(--fine)}
.ai-l{display:block;margin-top:22px;font:700 15px/1 var(--font)}
.ai-key{display:block;width:100%;margin-top:8px;min-height:54px;padding:0 16px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);
  font:700 18px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.ai-key::placeholder{color:#9a9a9a;font-weight:400}
.ai-msg{margin-top:10px;padding:12px 14px;border-radius:12px;background:#fff0f9;box-shadow:inset 0 0 0 2px var(--pink);font-size:15px;line-height:1.4}
.ai-opts{display:grid;gap:12px;margin-top:22px}
.ai-opt{display:flex;flex-direction:column;padding:18px 18px 18px;border-radius:20px;background:#f3f3f3}
.ai-opt--plan{background:var(--yellow)}
.ai-tag{font:700 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#4d4d4d}
.ai-opt-h{margin-top:8px;font:800 26px/1 var(--font);font-variation-settings:"wdth" 84;letter-spacing:-.02em}
.ai-price{margin-top:6px;font:800 30px/1 var(--font);font-variation-settings:"wdth" 86}
.ai-price small{font-size:16px;font-weight:600;color:#4d4d4d}
.ai-list{margin:12px 0 16px;display:grid;gap:6px}
.ai-list li{position:relative;padding-left:18px;font-size:16px;line-height:1.35}
.ai-list li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.ai-buy{margin-top:auto;width:100%}
.ai-fine{margin-top:16px;font-size:13px;line-height:1.4;color:var(--fine)}
.ai-fine a{color:inherit}
.ai-done{padding-top:28px;text-align:center;outline:none}
.ai-done img{width:120px;height:120px;margin:0 auto 10px}
@media (min-width:768px){.ai-opts{grid-template-columns:1fr 1fr}.ai{padding:36px 0 80px}}