/* ── Tokens ────────────────────────────────────────────────────────────
   Single-theme by intent: this page is a console. The app is dark, the
   product photography is dark, and a light rendering would misrepresent
   the thing being sold. Every colour is painted explicitly so the page
   holds on any host ground.                                            */
:root{
  --ink:        #101014;   /* chassis black, faint violet bias          */
  --panel:      #191920;   /* module face                               */
  --panel-hi:   #22222b;   /* raised / hover                            */
  --rule:       #2f2f3a;   /* hairline                                  */
  --orange:     #ee7b30;   /* THE accent. Same value the app uses.      */
  --orange-dim: #b45a20;
  --green:      #46c46b;   /* signal present. semantic, never decoration*/
  --cream:      #e9e5dd;   /* silkscreen legend                         */
  --dim:        #8d8a97;
  --dimmer:     #63616e;

  --display: "Barlow Condensed", "Oswald", "Helvetica Neue Condensed", sans-serif;
  --body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  --col: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--orange); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:2px; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.012em;
  line-height:.98;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.75rem,7.2vw,5.25rem); }
h2{ font-size:clamp(1.9rem,3.9vw,3rem); }
h3{ font-size:1.32rem; letter-spacing:.02em; }
p{ margin:0; max-width:64ch; }

/* screen-printed panel legend. The mixer's own vernacular. */
.legend{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dimmer);
}

.wrap{ width:100%; max-width:var(--col); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
section{ border-top:1px solid var(--rule); }
.stack{ display:flex; flex-direction:column; }
.pad{ padding-block:clamp(64px,9vw,112px); }

/* ── Header ─────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(16,16,20,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.top .wrap{ display:flex; align-items:center; gap:20px; height:60px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--cream); text-decoration:none; margin-right:auto; }
.brand:hover{ text-decoration:none; }
.brand img{ width:26px; height:26px; border-radius:6px; }
.brand span{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:1.12rem; }
.top nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); }
.top nav a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.top nav a:hover{ color:var(--cream); text-decoration:none; }
@media (max-width:760px){ .top nav .hide-sm{ display:none; } }
@media (max-width:600px){ .top nav .price-link{ display:none; } .brand span{ font-size:1rem; } }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  padding:13px 22px; border-radius:3px; white-space:nowrap;
  border:1px solid var(--rule); background:var(--panel-hi); color:var(--cream);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover{ background:#2b2b36; border-color:#3d3d4a; text-decoration:none; transform:translateY(-1px); }
.btn-primary{
  background:var(--orange); border-color:var(--orange); color:#170c04;
  box-shadow:0 0 0 1px rgba(238,123,48,.24), 0 10px 28px -14px rgba(238,123,48,.8);
}
.btn-primary:hover{ background:#f68b41; border-color:#f68b41; }
.btn-sm{ padding:9px 15px; font-size:.7rem; }
.lit{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); flex:none; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{ border-top:none; padding-top:clamp(52px,7vw,86px); padding-bottom:clamp(28px,4vw,52px); overflow-x:hidden; }
.hero h1{ margin-top:18px; }
.hero .sub{ margin-top:22px; font-size:clamp(1.06rem,1rem + .5vw,1.32rem); color:var(--dim); max-width:52ch; }
.hero .sub strong{ color:var(--cream); font-weight:600; }
.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center; }
.cta .fine{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--dimmer); text-transform:uppercase; }

.hero-banner{
  margin:clamp(44px,6vw,72px) 0 0;
  width:100%;
}
.hero-banner img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.11);
  background:#0d0d0f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.35),
    0 18px 42px -16px rgba(0,0,0,.88);
}

/* ── Tape strip: eight passes, one take ───────────────────────────────
   Peak-envelope fill, mirrored about centre. Same draw as WaveformView
   in the app (Theme.accentGreen at 85%, closed path above and below). */
.tape{
  border:1px solid var(--rule); border-radius:6px;
  background:#0d0d0f; padding:12px 12px 10px;
}
.tape-ruler{
  display:grid; grid-template-columns:34px 1fr; align-items:end;
  gap:10px; margin-bottom:6px; padding-bottom:7px;
  border-bottom:1px solid var(--rule);
}
.tape-ruler .bars{
  display:grid; grid-template-columns:repeat(4,1fr);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--dimmer);
}
.tape-ruler .bars span{
  padding-left:8px;
  border-left:1.5px solid rgba(238,123,48,.55);
}
.lane{ display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; height:40px; }
.lane .n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--dimmer); }
.lane .track{
  position:relative; height:34px;
  background:#0d0d0f; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 0.5px rgba(0,0,0,.5);
}
.lane .track svg{
  display:block; width:100%; height:100%;
  transform-origin:left center; transform:scaleX(0);
  animation:pass 1.15s cubic-bezier(.2,.7,.3,1) forwards;
}
.lane .track::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(238,123,48,.42) 0 1.5px, transparent 1.5px 25%),
    repeating-linear-gradient(90deg,
      rgba(141,138,151,.20) 0 .7px, transparent .7px 6.25%);
}
@keyframes pass{ to{ transform:scaleX(1); } }
.tape .caption{ display:flex; justify-content:space-between; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); }
@media (prefers-reduced-motion:reduce){
  .lane .track svg{ animation:none; transform:scaleX(1); }
}

/* ── Proof points ───────────────────────────────────────────────────── */
.three{ display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.three h3{ margin-bottom:9px; color:var(--cream); }
.three p{ color:var(--dim); font-size:.98rem; }
.three .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--orange); display:block; margin-bottom:14px; }

/* ── Files section ──────────────────────────────────────────────────── */
.split{ display:grid; gap:clamp(32px,5vw,64px); grid-template-columns:1fr; align-items:center; }
@media (min-width:880px){ .split{ grid-template-columns:1.05fr .95fr; } }
.finder{
  border:1px solid var(--rule); border-radius:6px; background:var(--panel);
  font-family:var(--mono); font-size:.83rem; overflow:hidden;
}
.finder .bar{ display:flex; align-items:center; gap:8px; padding:10px 13px; background:var(--panel-hi); border-bottom:1px solid var(--rule); color:var(--dim); font-size:.75rem; letter-spacing:.06em; }
.finder .dot{ width:9px; height:9px; border-radius:50%; background:#3a3a46; }
.finder ul{ list-style:none; margin:0; padding:8px 0; overflow-x:auto; }
/* Real filenames are long on purpose. That is the point of this block. Let
   the list scroll sideways inside its own box rather than wrapping into mush. */
.finder li{ padding:6px 15px; color:var(--cream); white-space:nowrap; font-size:.78rem; }
.finder li.mix{ color:var(--orange); }

/* ── Feature modules ────────────────────────────────────────────────── */
.mods{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:6px; overflow:hidden;
       grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .mods{ grid-template-columns:repeat(2,1fr); } .mod:last-child{ grid-column:span 2; } }
@media (max-width:620px){ .mods{ grid-template-columns:1fr; } .mod:last-child{ grid-column:auto; } }
.mod{ background:var(--panel); padding:26px 24px; display:flex; flex-direction:column; gap:9px; transition:background .16s ease; }
.mod:hover{ background:var(--panel-hi); }
.mod h3{ font-size:1.05rem; letter-spacing:.045em; }
.mod p{ color:var(--dim); font-size:.93rem; line-height:1.55; }

/* ── Video slot ─────────────────────────────────────────────────────── */
.video{
  aspect-ratio:16/9; width:100%; border:1px dashed var(--rule); border-radius:6px;
  background:var(--panel); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; text-align:center; padding:24px;
}
.video .legend{ max-width:44ch; line-height:1.7; }
.video-note{ color:var(--dim); font-size:.93rem; max-width:52ch; }

/* ── Specs ──────────────────────────────────────────────────────────── */
.specs{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule); border-radius:6px; overflow:hidden; }
.specs div{ flex:1 1 180px; padding:18px 20px; border-right:1px solid var(--rule); background:var(--panel); }
.specs div:last-child{ border-right:none; }
.specs strong{ display:block; font-family:var(--mono); font-size:.94rem; font-weight:500; color:var(--cream); margin-top:5px; letter-spacing:.02em; }

/* ── Price ──────────────────────────────────────────────────────────── */
.price-card{
  border:1px solid var(--rule); border-radius:8px; background:var(--panel);
  padding:clamp(28px,4vw,44px); display:grid; gap:26px; align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .price-card{ grid-template-columns:auto 1fr; gap:clamp(36px,5vw,60px); } }
.amount{ font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,8vw,5rem); line-height:.85; color:var(--orange); }
.was{ font-family:var(--mono); font-size:.82rem; color:var(--dimmer); text-decoration:line-through; margin-left:10px; letter-spacing:.06em; }
.incl{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px; }
.incl li{ position:relative; padding-left:24px; color:var(--dim); font-size:.98rem; }
.incl li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:10px; height:2px; background:var(--orange);
}
.incl b{ color:var(--cream); font-weight:600; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{ display:grid; gap:0; border-top:1px solid var(--rule); }
details{ border-bottom:1px solid var(--rule); }
summary{
  cursor:pointer; list-style:none; padding:19px 0; display:flex; gap:16px; align-items:baseline;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.16rem;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; margin-left:auto; color:var(--orange); font-family:var(--mono); font-weight:400; font-size:1.15rem; }
details[open] summary::after{ content:"–"; }
details p{ padding-bottom:20px; color:var(--dim); font-size:.98rem; }
details p + p{ padding-top:0; margin-top:-8px; }

/* ── Mailing list ───────────────────────────────────────────────────── */
.hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.list-form{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.list-form input{
  flex:1 1 260px; min-width:0;
  font-family:var(--mono); font-size:.88rem; color:var(--cream);
  background:#0c0c10; border:1px solid var(--rule); border-radius:3px; padding:13px 15px;
}
.list-form input::placeholder{ color:var(--dimmer); }
.list-form button{ cursor:pointer; font-family:var(--mono); }
.form-note{ margin-top:12px; font-size:.86rem; color:var(--dim); min-height:1.4em; }
.form-note.warn{ color:var(--orange); }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--rule); padding-block:40px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; }
footer .legend{ margin-right:auto; }

/* ── Version chip ───────────────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); border:1px solid rgba(238,123,48,.35);
  background:rgba(238,123,48,.08); padding:5px 10px; border-radius:99px;
}

/* ── How it works ───────────────────────────────────────────────────── */
.steps{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
        border-radius:6px; overflow:hidden; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--panel); padding:26px 22px; display:flex; flex-direction:column; gap:10px; }
.step .num{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--orange); }
.step h3{ font-size:1.08rem; }
.step p{ color:var(--dim); font-size:.93rem; }

/* ── NAM callout ────────────────────────────────────────────────────── */
.callout{
  display:grid; gap:clamp(28px,4vw,48px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:880px){ .callout{ grid-template-columns:1.1fr .9fr; } }
.callout .panel{
  border:1px solid var(--rule); border-radius:8px; background:var(--panel);
  padding:28px 26px; display:flex; flex-direction:column; gap:14px;
}
.callout .panel .row{ display:flex; gap:12px; align-items:baseline; }
.callout .panel .row b{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
                        text-transform:uppercase; color:var(--orange); min-width:3.2rem; }
.callout .panel .row span{ color:var(--dim); font-size:.95rem; }

/* ── Desk carousel ──────────────────────────────────────────────────── */
.desk{ position:relative; }
.desk-frame{
  position:relative;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.11);
  background:#0d0d0f;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.35),
    0 18px 42px -16px rgba(0,0,0,.88);
}
.desk-track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  touch-action:pan-x;
}
.desk-track::-webkit-scrollbar{ display:none; }
.desk-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  margin:0;
  position:relative;
}
.desk-slide img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0d0d0f;
}
.desk-slide figcaption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.desk-caption{
  display:flex; align-items:baseline; justify-content:center; gap:12px;
  margin-top:14px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--cream);
}
.desk-caption .legend{ color:var(--orange); }
.desk-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:40px; height:40px; padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(16,16,20,.72);
  color:var(--cream);
  font-family:var(--mono); font-size:1.35rem; line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.desk-btn:hover{ background:var(--orange); border-color:var(--orange); color:#170c04; }
.desk-prev{ left:12px; }
.desk-next{ right:12px; }
.desk-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:16px;
}
.desk-dots button{
  width:8px; height:8px; padding:0; border-radius:50%;
  border:0; background:var(--rule); cursor:pointer;
}
.desk-dots button[aria-current="true"]{ background:var(--orange); }
@media (max-width:620px){
  .desk-btn{ width:34px; height:34px; font-size:1.15rem; }
  .desk-prev{ left:8px; }
  .desk-next{ right:8px; }
}
@media (prefers-reduced-motion:reduce){
  .desk-track{ scroll-behavior:auto; }
}

/* ── Versus ─────────────────────────────────────────────────────────── */
.versus{ width:100%; border-collapse:collapse; font-size:.95rem; }
.versus th, .versus td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule); vertical-align:top; }
.versus thead th{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
                  color:var(--dimmer); font-weight:500; background:var(--panel); }
.versus tbody th{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--cream); font-weight:500; width:28%; }
.versus td{ color:var(--dim); }
.versus td.win{ color:var(--cream); }
.versus{ border:1px solid var(--rule); border-radius:6px; overflow:hidden; display:block; }
.versus table{ width:100%; } /* unused */
.versus{ display:table; }

/* ── Quote ──────────────────────────────────────────────────────────── */
.pull{
  border-left:3px solid var(--orange); padding:8px 0 8px 22px;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.15;
  max-width:28ch;
}