/* OverDub design system — tokens + base + components.
   One typeface: Montserrat (self-hosted). Warm throughout; no neutral grey.
   Ported from the OverDub Design System (project 96e1019f). */

@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  /* color */
  --paper:#faf8f4; --paper-warm:#f4efe6; --paper-spec:#f1ece2; --surface-card:#fff;
  --ink:#1c1a17; --ink-700:#3a3631; --ink-600:#56514a; --ink-500:#6b655c; --ink-450:#5f574d; --ink-300:#6b6359; --ink-200:#bdb6aa;
  --night:#15140f; --night-screen:#161410; --night-bezel:#0f0e0c;
  --cream:#efe9dd; --cream-bright:#f6f1e8; --cream-500:#b3ab9d; --cream-400:#ada597; --cream-300:#c0b8aa;
  --accent:#c2632e; --accent-ink:#fff;
  --green:#3ddc97; --amber:#d6a23a; --red:#dc4b3e;
  --green-text:#1f8a5b; --amber-text:#8a6310; --red-text:#b5332a;
  --line:rgba(0,0,0,0.07); --line-strong:rgba(0,0,0,0.12); --line-dark:rgba(255,255,255,0.10); --line-dark-strong:rgba(255,255,255,0.16);
  --border:var(--line); --border-on-dark:var(--line-dark);
  /* type */
  --font:"Montserrat",system-ui,-apple-system,sans-serif;
  --text-hero:clamp(40px,6.2vw,82px); --text-display:clamp(34px,5.6vw,72px);
  --text-h1:clamp(30px,4.7vw,62px); --text-h2:clamp(30px,4.4vw,52px); --text-h3:clamp(28px,3.6vw,42px); --text-title:clamp(20px,2.7vw,31px);
  --track-hero:-0.035em; --track-tight:-0.025em; --track-snug:-0.015em; --track-mono:0.04em; --track-kicker:0.18em; --track-label:0.10em;
  --lh-hero:0.98; --lh-tight:1.06; --lh-body:1.6;
  --num:tabular-nums lining-nums;
  /* space + radius */
  --measure:1100px; --gutter:24px;
  --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:24px; --r-pill:999px;
  /* elevation */
  --shadow-card:0 24px 60px -34px rgba(40,28,16,0.40),0 4px 14px -8px rgba(0,0,0,0.08);
  --shadow-device:0 40px 80px -30px rgba(40,28,16,0.45),0 8px 24px -12px rgba(0,0,0,0.30);
  --glow-accent:0 12px 26px -10px rgba(194,99,46,0.75);
  --glow-accent-lg:0 0 0 4px rgba(255,255,255,0.08),0 10px 24px -8px rgba(194,99,46,0.70);
  --wash-accent:radial-gradient(60% 55% at 50% 38%,rgba(194,99,46,0.13),rgba(194,99,46,0) 70%);
  --blur-nav:saturate(180%) blur(14px);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:var(--lh-body)}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img,svg{display:block}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.kicker{font-size:12.5px;font-weight:600;letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--accent)}
.accent{color:var(--accent)}
.balance{text-wrap:balance}
.pretty{text-wrap:pretty}
.tnum{font-variant-numeric:var(--num)}

/* display / body roles */
.display{font-weight:700;letter-spacing:var(--track-tight);line-height:var(--lh-tight)}
.hero{font-size:var(--text-hero);line-height:var(--lh-hero);letter-spacing:var(--track-hero);font-weight:700}
.h1{font-size:var(--text-h1)} .h2{font-size:var(--text-h2)} .h3{font-size:var(--text-h3)} .title{font-size:var(--text-title)}
.lead{font-size:18px;color:var(--ink-500)}
.body{font-size:17px;line-height:1.6;color:var(--ink-600)}
.mono{font-variant-numeric:var(--num);letter-spacing:var(--track-mono)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,244,0.72);backdrop-filter:var(--blur-nav);-webkit-backdrop-filter:var(--blur-nav);border-bottom:1px solid rgba(0,0,0,0.06)}
.nav .wrap{height:60px;display:flex;align-items:center;justify-content:space-between}

/* logo */
.logo{display:inline-flex;align-items:center;gap:11px}
.logo .wm{font-weight:500;letter-spacing:0.012em;font-size:18px;color:var(--ink)}

/* button + pill */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:600;border:none;cursor:pointer;border-radius:var(--r-pill);background:var(--ink);color:var(--cream-bright);transition:transform var(--dur,.12s) var(--ease),filter .15s var(--ease);text-align:center}
.btn:active{transform:scale(.94)}
.btn:hover{filter:brightness(1.08)}
.btn.sm{font-size:13.5px;padding:9px 17px}
.btn.lg{font-size:15.5px;padding:14px 26px}
.btn.link{background:transparent;color:var(--ink);padding:6px 2px;border-radius:0}
.btn.link span{box-shadow:inset 0 -1.5px 0 var(--accent)}
.btn.link:hover{filter:none;color:var(--accent)}
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-500);background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:5px 11px;font-variant-numeric:var(--num)}
.pill.active{color:#fff;background:var(--accent);border-color:var(--accent)}

/* status tag */
.tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;font-variant-numeric:var(--num)}
.tag .dot{width:7px;height:7px;border-radius:50%}
.tag.green{color:var(--green-text)} .tag.green .dot{background:var(--green)}
.tag.amber{color:var(--amber-text)} .tag.amber .dot{background:transparent;border:1.5px solid var(--amber);border-radius:50%;width:8px;height:8px}
.tag.red{color:var(--red-text)} .tag.red .dot{background:var(--red);border-radius:1px}
.tag.pill{padding:5px 11px;border-radius:var(--r-pill);background:rgba(61,220,151,0.14)}
/* on dark */
.tag.on-dark.green{color:var(--green)} .tag.on-dark.amber{color:var(--amber)} .tag.on-dark.red{color:var(--red)}

/* card */
.card{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);padding:24px}

/* eq + waveform bars */
.bars{display:flex;align-items:flex-end;gap:2px}
.bars i{flex:1;min-width:2px;border-radius:2px;background:var(--accent)}

/* sections */
section{padding:0}
.sec-paperwarm{background:var(--paper-warm)}
.sec-ink{background:var(--ink);color:var(--cream-bright)}
.sec-night{background:var(--night);color:var(--cream)}
.center{text-align:center}
.rule{width:40px;height:2px;background:var(--accent);margin:56px auto 0}

/* spec grid */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--border-on-dark);border:1px solid var(--border-on-dark);border-radius:var(--r-lg);overflow:hidden;margin-top:1px}
.spec-cell{background:var(--night);padding:30px 28px}
.spec-cell .k{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent)}
.spec-cell h4{font-family:var(--font);font-size:20px;font-weight:600;letter-spacing:-0.015em;line-height:1.2;margin:12px 0 8px;color:var(--cream)}
.spec-cell p{font-size:14.5px;line-height:1.6;color:var(--cream-400)}

/* phone mock */
.phone{position:relative;width:312px;flex:none}
.phone .wash{position:absolute;inset:-44px -80px;background:var(--wash-accent);pointer-events:none}
.phone .bezel{position:relative;border-radius:46px;background:var(--night-bezel);padding:11px;box-shadow:var(--shadow-device)}
.phone .screen{border-radius:36px;overflow:hidden;background:var(--night-screen);height:632px;display:flex;flex-direction:column}
.trackrow{border:1px solid var(--line-dark);border-radius:var(--r-md);padding:12px 13px;background:rgba(255,255,255,0.02)}
.trackrow.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(194,99,46,0.16),rgba(194,99,46,0.03))}
.trackrow .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.trackrow .nm{font-size:13.5px;font-weight:600;color:var(--cream)}

@media(max-width:720px){
  .featured{grid-template-columns:1fr!important}
  .featured .right{border-left:none!important;border-top:1px solid var(--border-on-dark)}
}

/* waitlist */
.wl-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.wl-form input{font:500 15px/1 var(--font);background:var(--surface-card);border:1px solid var(--line-strong);color:var(--ink);border-radius:var(--r-pill);padding:14px 20px;min-width:280px}
.wl-form input::placeholder{color:var(--ink-300)}
.wl-form input:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent)}
.wl-ok{display:none;margin-top:22px;color:var(--green-text);font-weight:600;font-size:16px}
.wl-err{display:none;margin-top:16px;color:var(--red-text);font-size:14px}
.wl-note{margin-top:14px;font-size:13px;color:var(--ink-500)}