/* Rehearse marketing site — same design language as the iOS app.
   Tokens mirror the app's asset-catalog color sets (light/dark). */

:root{
  --bg:#F1EEFA; --surface:#FFFFFF; --ink:#201C33; --sec:#6C6889; --line:#E7E2F4;
  --violet:#6C5CE7; --violet-deep:#4B3FB8; --violet-soft:#EDE9FD;
  --mint:#1FA968; --mint-bg:#E4F6ED; --coral:#E4614B; --coral-bg:#FCEAE6;
  --shadow:0 24px 60px -30px rgba(52,40,120,.45);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131020; --surface:#211B36; --ink:#F3F0FB; --sec:#A6A0C6; --line:#332B4C;
    --violet:#8B7DF5; --violet-deep:#6C5CE7; --violet-soft:#2B2448;
    --mint:#41CE8A; --mint-bg:#183A2C; --coral:#FF7D68; --coral-bg:#3C231F;
    --shadow:0 24px 70px -30px rgba(0,0,0,.65);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 700px at 12% -8%, color-mix(in srgb,var(--violet) 15%,transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 30%, color-mix(in srgb,var(--coral) 9%,transparent), transparent 55%),
    var(--bg);
  color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5;
}
.wrap{max-width:980px; margin:0 auto; padding:0 22px;}
h1,h2{letter-spacing:-.025em; line-height:1.12; text-wrap:balance; margin:0;}
h1{font-size:clamp(30px,6vw,50px); font-weight:850;}
h2{font-size:clamp(23px,4vw,32px); font-weight:850;}
a{color:var(--violet);}

/* ── Simon ── */
.simon{display:block; overflow:visible;}
.simon .s-eyes{transform-box:fill-box; transform-origin:center 60%; animation:blink 4.6s infinite;}
@keyframes blink{0%,93.5%,100%{transform:scaleY(1);} 96%{transform:scaleY(.08);}}
.hero-simon .simon, .cta-in .simon{animation:breathe 3.6s ease-in-out infinite; transform-origin:50% 100%;}
@keyframes breathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.02);}}

/* ── Masthead ── */
.mast{padding:18px 0;}
.mast-in{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.brand{display:flex; align-items:center; gap:9px; font-size:19px; font-weight:850; letter-spacing:-.02em;}
.brand-mark{display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--violet-soft);}
.mast-cta{font-size:14px; font-weight:800; text-decoration:none; color:var(--violet);
  border:2px solid var(--line); padding:9px 16px; border-radius:99px;}
.mast-cta:hover{border-color:var(--violet);}

/* ── Hero ── */
.hero{display:flex; align-items:center; gap:36px; padding:44px 22px 70px;}
.hero-copy{flex:1.25; display:flex; flex-direction:column; gap:18px; align-items:flex-start;}
.eyebrow{margin:0; font-size:12.5px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--violet);}
.lede{margin:0; font-size:17.5px; color:var(--sec); font-weight:600; max-width:34em;}
.hero-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.cta-note{font-size:13px; font-weight:700; color:var(--sec);}
.hero-simon{flex:1; display:flex; flex-direction:column; align-items:center; gap:14px; min-width:250px;}
.hero-bubble{position:relative; background:var(--surface); border:2px solid var(--line); border-radius:20px;
  padding:13px 17px; font-size:15.5px; font-weight:800; text-align:center; max-width:250px; box-shadow:var(--shadow);}
.hero-bubble::after{content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:17px; height:17px; background:var(--surface); border-right:2px solid var(--line); border-bottom:2px solid var(--line); border-bottom-right-radius:4px;}

/* ── Buttons ── */
.btn{display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  font:inherit; font-size:16px; font-weight:850; padding:15px 28px; border-radius:99px;}
.btn.primary{background:var(--violet); color:#fff; box-shadow:0 14px 26px -14px var(--violet);}
.btn.primary:hover{background:var(--violet-deep);}
.btn:focus-visible{outline:3px solid var(--violet); outline-offset:3px;}

/* ── Steps ── */
.steps-sec{padding:30px 22px 60px; text-align:center;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px; text-align:left;}
.step{display:flex; flex-direction:column; gap:13px;}
.step-k{margin:0; font-size:12.5px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; color:var(--violet);}
.step > p:last-child{margin:0; font-size:15px; color:var(--sec); font-weight:600;}
.phone{border-radius:30px; overflow:hidden; border:6px solid #211D34; background:#211D34; box-shadow:var(--shadow);}
.phone img{display:block; width:100%; height:auto;}

/* the live beat-card mockup (step 3) */
.beatcard{background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--mint);
  border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow);}
.bc-tag{margin:0; font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; color:var(--mint);}
.bc-said{margin:0; font-family:ui-serif,Georgia,serif; font-size:16.5px; line-height:1.5;}
.bc-said em{font-style:normal; background:var(--mint-bg); border-radius:5px; padding:0 3px;}
.bc-note{margin:0; font-size:14px; font-weight:600;}
.bc-try{margin:0; font-size:13.5px; font-weight:800; color:var(--mint); background:var(--mint-bg);
  padding:9px 12px; border-radius:12px;}

/* ── How you sound ── */
.sound-sec{background:var(--surface); border-block:1px solid var(--line); padding:60px 0;}
.sound-in{display:flex; align-items:center; gap:40px;}
.sound-in > div:first-child{flex:1.3;}
.sound-in p{color:var(--sec); font-weight:600; font-size:16.5px; max-width:34em;}
.chips{flex:1; display:flex; flex-wrap:wrap; gap:10px; align-content:center;}
.chip{display:inline-flex; gap:7px; align-items:baseline; padding:9px 15px; border-radius:99px;
  font-size:14.5px; font-weight:800; background:var(--mint-bg); color:var(--mint);}
.chip b{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; opacity:.7;}
.chip.watch{background:var(--coral-bg); color:var(--coral);}

/* ── Who it's for ── */
.for-sec{padding:64px 22px; text-align:center;}
.for-copy{margin:16px auto 0; max-width:38em; font-size:17px; color:var(--sec); font-weight:600;}

/* ── Waitlist ── */
.cta-sec{background:var(--violet-soft); padding:64px 0; scroll-margin-top:20px;}
.cta-in{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;}
.wl-form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; max-width:460px;}
.wl-form input[type="email"]{flex:1; min-width:210px; font:inherit; font-size:16px; font-weight:600;
  padding:14px 18px; border-radius:99px; border:2px solid var(--line); background:var(--surface); color:var(--ink);}
.wl-form input[type="email"]:focus{outline:none; border-color:var(--violet);}
.hp{position:absolute; left:-5000px; opacity:0; pointer-events:none;}
.wl-done{font-size:18px; font-weight:800; color:var(--violet-deep); margin:0;}
.wl-err{font-size:14px; font-weight:700; color:var(--coral); margin:0;}

/* ── Footer / legal ── */
.foot{padding:26px 0 40px;}
.foot-in{display:flex; justify-content:space-between; gap:14px; font-size:13.5px; font-weight:700; color:var(--sec);}
.foot nav{display:flex; gap:18px;}
.foot a{color:var(--sec); text-decoration:none;}
.foot a:hover{color:var(--violet);}
.legal{padding:40px 22px 70px; max-width:680px; line-height:1.6;}
.legal h1{margin-bottom:6px;}
.legal .updated{color:var(--sec); font-weight:700; font-size:13.5px; margin-bottom:26px;}
.legal h2{font-size:19px; margin:34px 0 10px;}
.legal p{margin-bottom:12px;}
.legal ul{margin:0 0 12px 20px;}
.legal li{margin-bottom:10px;}
.legal a{color:var(--violet); text-decoration:none;}
.legal a:hover{text-decoration:underline;}
.legal .lede{font-size:16px; color:var(--sec);}

/* ── Responsive ── */
@media (max-width:760px){
  .hero{flex-direction:column-reverse; text-align:center; padding-top:8px; gap:24px;}
  .hero-copy{align-items:center;}
  .hero-cta{justify-content:center;}
  .steps{grid-template-columns:1fr; max-width:420px; margin-inline:auto;}
  .sound-in{flex-direction:column; text-align:center;}
  .chips{justify-content:center;}
  .foot-in{flex-direction:column; align-items:center;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}