/* Fumble Audio — site design v1 (Designa). Tokens are the source of truth for Coda's build. */
:root{
  --blue:#9CC3E8;      /* device body */
  --blue-deep:#6F9CC9; /* body shadow side */
  --blue-screen:#A9C8E6;
  --orange:#E8590C;    /* logo wordmark */
  --red:#D62A20;       /* hardware keys = primary action */
  --red-dark:#A81F17;
  --cream:#EFE6D2;     /* masking tape / paper */
  --paper:#F7F3EA;
  --ink:#1E2A3B;       /* navy screen-print ink on device */
  --ink-soft:#4A5668;
  --line:#1E2A3B22;
  --radius:18px;
  --sans:"DM Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);letter-spacing:.04em}
.label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.pending{position:absolute;top:14px;right:14px;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:6px;letter-spacing:.08em}

/* header */
.nav{position:sticky;top:0;z-index:10;background:var(--blue);border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav .logo img{height:46px;width:auto}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.nav ul a{text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* buttons: styled after the red SPLICE / SOUND keys */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:14px;text-decoration:none;padding:15px 24px;border-radius:8px;border:2px solid var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn-key{background:var(--red);color:#fff;box-shadow:0 5px 0 var(--red-dark),0 5px 0 2px var(--ink)}
.btn-key:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-dark),0 1px 0 2px var(--ink)}
.btn-ghost{background:var(--cream);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}

/* hero */
.hero{background:var(--blue);border-bottom:2px solid var(--ink);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:84px}
.hero h1{font-size:62px;line-height:1.02;letter-spacing:-.025em;margin:14px 0 20px;font-weight:700}
.hero p.sub{font-size:20px;max-width:30ch;margin:0 0 26px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.hero .formats{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink)}
.hero .formats span{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px;margin:0 6px 6px 0}
.price-note{font-family:var(--mono);font-size:13px;margin-top:6px}
.hero-shot{position:relative}
.hero-shot img{filter:drop-shadow(0 30px 40px #1E2A3B33);transform:rotate(-2deg) scale(1.08)}
.tape-label{display:inline-block;background:var(--cream);padding:4px 14px;transform:rotate(-2deg);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(2% 0,98% 0,100% 30%,97% 60%,100% 100%,2% 100%,0 70%,3% 40%,0 8%)}

/* sections */
section.band{padding:96px 0;border-bottom:2px solid var(--ink)}
section.band.cream{background:var(--cream)}
section.band.dark{background:var(--ink);color:var(--cream)}
h2{font-size:42px;letter-spacing:-.02em;line-height:1.08;margin:12px 0 18px}
.lede{font-size:19px;max-width:58ch;color:var(--ink-soft)}
.dark .lede{color:#D9D2C0}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:22px}
.card h3{margin:10px 0 6px;font-size:20px}
.card p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.card .k{width:34px;height:22px;background:var(--red);border:2px solid var(--ink);border-radius:5px;box-shadow:0 3px 0 var(--red-dark)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.step figure{margin:0;position:relative;background:#F5F5F3;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.step figure img{width:100%;height:100%;object-fit:cover}
.step .n{font-family:var(--mono);font-size:13px;letter-spacing:.12em;margin:18px 0 4px}
.step h3{margin:0 0 6px;font-size:22px}
.step p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* audio clips: reel-counter style players */
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.clip{border:2px solid var(--cream);border-radius:var(--radius);padding:20px;display:flex;gap:16px;align-items:center}
.clip .play{flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);border:2px solid var(--cream);display:grid;place-items:center}
.clip .play:after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.clip h3{margin:0;font-size:17px}
.clip .counter{font-family:var(--mono);font-size:13px;color:#BFB7A3}

.dark-shot{position:relative;margin:50px auto 0;max-width:900px}

/* pricing */
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.price-card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:34px;box-shadow:8px 8px 0 var(--ink)}
.price-card .big{font-size:64px;font-weight:700;letter-spacing:-.03em;line-height:1}
.price-card .was{font-family:var(--mono);text-decoration:line-through;color:var(--ink-soft);margin-left:10px}
.price-card ul{padding-left:20px;margin:20px 0 26px}

/* waitlist */
.waitlist form{display:grid;gap:14px;max-width:520px;margin-top:28px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.field input,.field select{font:inherit;padding:14px 16px;border:2px solid var(--ink);border-radius:10px;background:var(--paper)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.fine{font-size:13.5px;color:var(--ink-soft)}

/* doc pages (FAQ, install, refund, imprint) */
.page-head{background:var(--blue);border-bottom:2px solid var(--ink);padding:64px 0 52px}
.page-head h1{font-size:50px;margin:12px 0 0;letter-spacing:-.02em}
.doc{display:grid;grid-template-columns:240px 1fr;gap:56px;padding:64px 0 96px}
.toc{position:sticky;top:100px;align-self:start;font-size:14.5px}
.toc a{display:block;padding:6px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.prose{max-width:70ch}
.prose h2{font-size:30px;margin:48px 0 12px;padding-top:6px;border-top:2px solid var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--cream);padding:2px 6px;border-radius:5px}
.prose details{border:2px solid var(--ink);border-radius:12px;margin:12px 0;background:#fff}
.prose summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
.prose summary:after{content:"+";font-family:var(--mono);font-size:20px;line-height:1}
.prose details[open] summary:after{content:"–"}
.prose details>div{padding:0 20px 14px}
.prose hr{display:none}

/* footer */
footer{background:var(--ink);color:var(--cream);padding:56px 0 40px;font-size:14.5px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
footer a{text-decoration:none;display:block;padding:3px 0;color:#D9D2C0}
footer a:hover{color:#fff}
footer .bottom{grid-column:1/-1;border-top:1px solid #EFE6D233;padding-top:20px;margin-top:20px;font-family:var(--mono);font-size:12px;color:#BFB7A3}

@media (max-width:880px){
  .hero .wrap,.price,.doc{grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .features{grid-template-columns:1fr 1fr}
  .steps,.clips{grid-template-columns:1fr}
  .nav ul{display:none}
  .toc{position:static}
  footer .wrap{grid-template-columns:1fr}
}

/* ===== v2: desk collage direction (after studiodogu.com reference) ===== */
body{background:#fff}
.nav{display:none}
.top{position:relative;z-index:20;height:120px}
.top .brand{position:absolute;left:50%;top:22px;transform:translateX(-50%)}
.top .brand img{height:70px;width:auto}
.top .cartbtn{position:absolute;right:28px;top:36px}
.tags{position:absolute;left:28px;top:26px}
.tags input{display:none}
.tags .x{display:block;width:40px;height:26px;cursor:pointer;position:relative;margin-bottom:6px}
.tags .x:before,.tags .x:after{content:"";position:absolute;left:0;top:12px;width:40px;height:2px;background:var(--ink);transform:rotate(18deg)}
.tags .x:after{transform:rotate(-18deg)}
.tags ul{list-style:none;margin:0;padding:0}
.tags li{margin:-3px 0}
.tags a{display:inline-block;background:#fff;border:1.6px solid var(--ink);padding:3px 16px;font-family:var(--sans);font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .15s}
.tags li:nth-child(1) a{transform:rotate(0deg) translateX(46px)}
.tags li:nth-child(2) a{transform:rotate(4deg) translateX(30px)}
.tags li:nth-child(3) a{transform:rotate(9deg) translateX(26px);border-radius:999px}
.tags li:nth-child(4) a{transform:rotate(14deg) translateX(20px)}
.tags li:nth-child(5) a{transform:rotate(22deg) translateX(14px);border-radius:999px}
.tags li:nth-child(6) a{transform:rotate(28deg) translateX(10px)}
.tags a:hover,.tags a[aria-current]{background:var(--blue)}
.tags input:not(:checked)~ul{display:block}
.tags input:checked~ul{display:none}

.desk{position:relative;height:880px;max-width:1440px;margin:0 auto;overflow:hidden}
.desk>*{position:absolute}
.welcome{left:50%;top:150px;transform:translateX(-50%);text-align:center;margin:0;font-weight:500;font-size:96px;line-height:.95;letter-spacing:-.01em;white-space:nowrap}
.welcome .s{font-size:.55em;vertical-align:.18em}
.welcome .o{display:inline-block;font-size:1.12em;font-weight:400}
.welcome .r{display:inline-block;transform:rotate(-8deg)}
.welcome .m{font-family:var(--mono);font-size:.5em;font-weight:400;vertical-align:.3em}
.welcome em{font-style:normal;color:var(--orange)}
.sub2{left:50%;top:370px;transform:translateX(-50%);width:520px;text-align:center;font-size:18px;margin:0}
.note{background:var(--blue);padding:22px 26px;font-size:14px;line-height:1.45;box-shadow:0 10px 24px #1E2A3B26}
.note.cream{background:var(--cream)}
.note b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.n1{left:60px;top:330px;width:290px;transform:rotate(-6deg)}
.n2{right:70px;top:300px;width:250px;transform:rotate(5deg)}
.piece{filter:drop-shadow(0 18px 22px #1E2A3B33)}
.p-hero{left:50%;top:440px;width:640px;transform:translateX(-46%) rotate(-4deg)}
.p-splice{left:-40px;top:560px;width:380px;transform:rotate(14deg)}
.p-sound{right:-30px;top:520px;width:360px;transform:rotate(-12deg)}
.p-icon{left:330px;top:250px;width:92px;transform:rotate(-14deg)}
.strip{height:30px;background:var(--cream);opacity:.92;clip-path:polygon(0 8%,100% 0,98% 50%,100% 100%,2% 92%,0 50%)}
.s1{width:110px;left:28px;top:316px;transform:rotate(-38deg)}
.s2{width:110px;right:36px;top:286px;transform:rotate(40deg)}
.s3{width:160px;left:46%;top:452px;transform:rotate(-12deg)}
.d-buy{left:50%;bottom:44px;transform:translateX(-50%)}
.scroll{left:50%;bottom:12px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.tilt-l{transform:rotate(-1.5deg)}.tilt-r{transform:rotate(1.2deg)}
.card:nth-child(odd){transform:rotate(-1.2deg)}.card:nth-child(even){transform:rotate(1deg)}
.step:nth-child(1) figure{transform:rotate(-2deg)}.step:nth-child(2) figure{transform:rotate(1.5deg)}.step:nth-child(3) figure{transform:rotate(-1deg)}
section.band.cream{background:#fff}
section.band{border-bottom:0}
.page-head{background:#fff;border-bottom:0;padding:40px 0 30px;text-align:center}
.page-head h1{font-size:72px;font-weight:500}
@media (max-width:880px){
  .desk{height:auto;padding:20px 20px 60px;display:flex;flex-direction:column;align-items:center;gap:22px}
  .desk>*{position:static;transform:none!important}
  .welcome{font-size:54px;white-space:normal}
  .sub2,.note{width:auto;max-width:360px}
  .p-splice,.p-sound,.p-icon,.strip{display:none}
  .p-hero{width:100%}
  .tags input:not(:checked)~ul{display:none}.tags input:checked~ul{display:block}
  .top .brand img{height:46px}.top{height:90px}
}
/* v2.1: Buy always reachable */
.top .cartbtn{position:fixed;right:28px;top:30px;z-index:50}
.buybar{display:none}
@media (max-width:880px){
  .top .cartbtn{display:none}
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:2px solid var(--ink);padding:10px 16px;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13px}
  body{padding-bottom:72px}
}

/* ===== v3: calmer desk ===== */
.desk{height:860px}
.welcome{top:110px;font-size:84px;font-weight:600;letter-spacing:-.03em;line-height:1}
.welcome .m{font-family:var(--sans);font-size:1em;font-weight:600;vertical-align:0}
.sub2{top:300px;width:480px;font-size:18px;color:var(--ink-soft)}
.p-hero{left:50%;top:400px;width:600px;transform:translateX(-50%) rotate(-3deg)}
.d-buy{left:50%;top:375px;bottom:auto;transform:translateX(-50%);display:none}
.hero-ctas{left:50%;top:790px;transform:translateX(-50%);display:flex;gap:16px}
.p-splice{left:70px;top:150px;width:250px;transform:rotate(-8deg)}
.p-sound{right:70px;top:560px;width:260px;transform:rotate(7deg)}
.p-icon{display:none}
.note{padding:20px 22px 18px;box-shadow:0 8px 18px #1E2A3B1f}
.note:before{content:"";position:absolute;left:50%;top:-12px;width:90px;height:24px;margin-left:-45px;background:var(--cream);opacity:.9;border:1px solid #1E2A3B14;transform:rotate(-3deg)}
.note.cream:before{background:#fff}
.n1{left:90px;top:560px;width:240px;transform:rotate(-4deg)}
.n2{right:90px;top:170px;width:240px;transform:rotate(4deg)}
.strip{display:none}
/* menu: cleaner stack */
.tags li{margin:4px 0}
.tags li:nth-child(n) a{border-radius:2px;font-size:14px;padding:4px 14px}
.tags li:nth-child(1) a{transform:rotate(-2deg)}
.tags li:nth-child(2) a{transform:rotate(1.5deg) translateX(6px)}
.tags li:nth-child(3) a{transform:rotate(-1deg) translateX(2px)}
.tags li:nth-child(4) a{transform:rotate(2deg) translateX(10px)}
.tags li:nth-child(5) a{transform:rotate(-2.5deg) translateX(4px)}
.tags li:nth-child(6) a{transform:rotate(1deg) translateX(8px)}
@media (max-width:1100px){.p-splice,.p-sound{display:none}.n1{left:40px}.n2{right:40px}}
@media (max-width:880px){.hero-ctas{flex-direction:column;align-items:center}.welcome{font-size:46px}}
/* v3.1 */
.hero-ctas{top:390px}
.p-hero{top:480px;width:560px}
.p-splice{display:none}
.p-sound{top:600px;right:80px;width:280px}
.n1{top:610px}
@media (max-width:880px){.desk>.note{position:relative!important}}
.hero-ctas{top:420px}.p-hero{top:510px}.desk{height:900px}
@media (max-width:880px){.desk>*{top:auto!important;left:auto!important;right:auto!important;bottom:auto!important}}
@media (max-width:880px){.desk{overflow:visible;height:auto!important}.hero-ctas{flex-direction:row!important}}

/* ===== v4: only the tape recorder is sharp ===== */
.desk.v4{height:1000px;overflow:hidden}
.v4 .welcome{top:96px;left:0;right:0;text-align:center;font-size:84px;font-weight:600;letter-spacing:-.03em;line-height:1;z-index:3}
.v4 .sub2{top:290px;left:50%;transform:translateX(-50%);width:520px;text-align:center;z-index:3}
.v4 .hero-ctas{top:390px;z-index:3}
.v4 .specline{position:absolute;top:458px;left:0;right:0;margin:0;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);z-index:3}
.v4 .p-hero{top:520px;width:600px;z-index:2;filter:drop-shadow(0 22px 30px #1E2A3B33)}
.blur{position:absolute;pointer-events:none;user-select:none;z-index:1;opacity:.85}
.b1{left:-40px;top:120px;width:330px;transform:rotate(-9deg);filter:blur(9px)}
.b2{right:-60px;top:80px;width:360px;transform:rotate(8deg);filter:blur(12px)}
.b3{right:30px;top:600px;width:320px;transform:rotate(6deg);filter:blur(8px)}
.bnote{width:220px;height:170px;background:#fff;box-shadow:0 8px 18px #1E2A3B1f}
.bnote.cream{background:var(--cream)}
.b4{left:70px;top:620px;transform:rotate(-5deg);filter:blur(7px)}
.b5{left:330px;top:840px;width:180px;height:140px;transform:rotate(4deg);filter:blur(10px)}
@media (max-width:880px){
 .desk.v4{height:auto!important;overflow:visible;padding:40px 20px 30px;text-align:center}
 .v4 .blur{display:none}
 .v4 .welcome,.v4 .sub2,.v4 .hero-ctas,.v4 .specline,.v4 .p-hero{position:relative!important;transform:none!important;width:auto;max-width:100%}
 .v4 .welcome{font-size:46px}
 .v4 .hero-ctas{justify-content:center;margin:18px 0 10px}
 .v4 .specline{font-size:11.5px;line-height:1.6}
 .v4 .p-hero{margin:24px auto 0;display:block}
}
.v4 .welcome{position:absolute;left:50%!important;right:auto!important;width:900px;max-width:92vw;transform:translateX(-50%)!important;margin:0}
@media (max-width:880px){.v4 .welcome{left:auto!important;width:auto}}

/* PUBLIC: inactive 'Coming soon' button */
.btn.is-soon,.btn.is-soon:active{background:#E4DDD0;color:#7A7266;border:2px dashed #9A9284;box-shadow:none!important;transform:none;cursor:default;user-select:none}