/* Landing page structure. Colours all come from theme tokens. */
.hero{position:relative; overflow:hidden; color:#fff; background:var(--hero-bg,var(--ink)); padding:36px 0 44px}
.hero-in{display:grid; gap:32px; align-items:center}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:6px 13px 6px 9px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.hero-h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; font-size:clamp(2.1rem,8.5vw,4.2rem); line-height:1; margin:0 0 16px}
.hero-h1 em{font-style:normal; color:var(--signal)}
.hero-sub{font-size:1rem; line-height:1.6; color:rgba(255,255,255,.78); max-width:50ch; margin:0 0 22px}
.hero-cta .btn{flex:1 1 auto}
.btn-line{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3)}
.btn-line:hover{background:rgba(255,255,255,.1)}
.hero-proof{display:flex; flex-wrap:wrap; gap:20px 28px; padding-top:22px; margin-top:24px; border-top:1px solid rgba(255,255,255,.14)}
.proof-n{font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1; color:#fff}
.proof-k{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:5px}

/* the phone */
.phone-stage{display:flex; justify-content:center}
.phone{
  width:min(272px,78vw); border-radius:32px; padding:8px;
  background:linear-gradient(160deg,#2b4552,#0a161d);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone-screen{position:relative; background:#08141A; border-radius:25px; overflow:hidden; min-height:460px}
.phone-notch{position:absolute; top:7px; left:50%; transform:translateX(-50%); width:74px; height:5px; border-radius:6px; background:rgba(255,255,255,.15); z-index:4}
.phone-cam{position:relative; height:208px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 20%, #1d4a55 0%, #0e2630 62%, #08141A 100%)}
.phone-figure{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:140px}
.phone-figure .fig-head,.phone-figure .fig-body{fill:var(--mint,#7FD1BE)}
.phone-figure .fig-head{opacity:.9}.phone-figure .fig-body{opacity:.72}
.phone-recbar{position:absolute; top:14px; left:12px; z-index:3; display:flex; align-items:center; gap:7px;
  background:rgba(6,15,20,.66); padding:5px 10px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.1)}
.phone-recdot{width:7px; height:7px; border-radius:50%; background:#E4453A; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.phone-time{font-family:var(--font-mono); font-size:.7rem; color:#fff}
.phone-ring{position:absolute; top:11px; right:11px; z-index:3; width:42px; height:42px; transform:rotate(-90deg)}
.phone-ring circle{fill:none; stroke-width:3.5; stroke-linecap:round}
.phone-ring .trk{stroke:rgba(255,255,255,.16)}
.phone-ring .bar{stroke:var(--signal); stroke-dasharray:119; stroke-dashoffset:119; transition:stroke-dashoffset .12s linear}
.phone-wave{position:absolute; bottom:12px; left:0; right:0; z-index:3; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:24px}
.phone-wave i{width:3px; height:5px; border-radius:3px; background:rgba(255,255,255,.6); animation:bar .9s ease-in-out infinite}
.phone-wave i:nth-child(2n){animation-duration:.7s}
.phone-wave i:nth-child(3n){animation-duration:1.15s; background:var(--mint,#7FD1BE)}
@keyframes bar{0%,100%{height:5px}50%{height:20px}}
.paused .phone-wave i{animation-play-state:paused; height:5px}
.paused .phone-recdot{animation:none; background:#3b5b66}
.phone-card{padding:16px 14px; display:flex; flex-direction:column; gap:10px}
.ph-line{opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease}
.ph-line.on{opacity:1; transform:none}
.ph-name{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:#fff; min-height:1.2em}
.ph-head{font-size:.8rem; color:rgba(255,255,255,.66); min-height:1.1em}
.ph-caret{display:inline-block; width:2px; height:.9em; background:var(--signal); vertical-align:-.1em; margin-left:2px; animation:blink .8s steps(1) infinite}
.ph-chips{display:flex; flex-wrap:wrap; gap:6px; min-height:26px}
.ph-chip{padding:4px 10px; border-radius:var(--radius-pill); font-size:.68rem; font-weight:600;
  background:rgba(127,209,190,.15); color:var(--mint,#7FD1BE); border:1px solid rgba(127,209,190,.22);
  opacity:0; transform:scale(.82); transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.5,.4,1)}
.ph-chip.on{opacity:1; transform:none}
.ph-facts{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1)}
.ph-fk{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.42)}
.ph-fv{font-size:.8rem; font-weight:600; color:#fff; margin-top:3px}
.ph-mask{font-family:var(--font-mono); color:var(--signal)}
.phone-done{position:absolute; inset:auto 0 0 0; z-index:5; padding:12px 14px; display:flex; align-items:center; gap:9px;
  background:var(--accent-dark); font-size:.8rem; font-weight:600; color:#fff; transform:translateY(100%);
  transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.phone-done.on{transform:none}
.ph-tick{width:18px; height:18px; border-radius:50%; background:#fff; color:var(--accent-dark); display:grid; place-items:center; font-size:.66rem; font-weight:800; flex:none}

/* bands */
.band{padding:48px 0}
.band-alt{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-wash{background:var(--accent-wash)}
.band-h2{font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(1.5rem,5vw,2.3rem); margin:0 0 10px}
.band-lead{font-size:1rem; color:var(--muted); max-width:56ch; margin:0 0 26px}

.steps{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.step{background:var(--card); padding:22px 18px}
.step-n{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em; color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:12px}
.step-n::after{content:''; flex:1; height:1px; background:var(--line)}
.step h3{font-size:1rem; margin:0 0 6px; font-family:var(--font-body); font-weight:700}
.step p{margin:0; font-size:.88rem; color:var(--muted)}

.pays{display:grid; gap:16px}
.pay{border-radius:var(--radius); padding:24px; border:1px solid var(--line); background:var(--card)}
.pay-free{background:var(--accent); color:var(--on-accent); border-color:transparent}
.pay-free .eyebrow,.pay-free .pay-fine{color:rgba(255,255,255,.75)}
.pay-price{font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.04em; margin:6px 0 4px}
.ticks{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem}
.ticks li::before{content:'✓'; flex:none; width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:.64rem; font-weight:800; background:var(--accent-wash); color:var(--accent-dark); margin-top:1px}
.pay-free .ticks li::before{background:rgba(255,255,255,.22); color:#fff}
.pay-fine{font-size:.8rem; color:var(--muted); margin:16px 0 0}

.script-grid{display:grid; gap:18px}
.tape{background:white; border-radius:var(--radius); padding:20px; color:#fff}
.beat{display:grid; grid-template-columns:62px 1fr; gap:12px; padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.16)}
.beat:last-child{border-bottom:none; padding-bottom:0}
.beat time{font-family:var(--font-mono); font-size:.7rem; color:var(--signal); padding-top:2px}
.beat p{margin:0; font-size:.88rem; color:black;}
.beat b{color:#000}

.qs{display:grid; gap:14px}
.q{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.q h3{margin:0 0 8px; font-size:.95rem; font-family:var(--font-body); font-weight:700}
.q p{margin:0; font-size:.88rem; color:var(--muted)}

.closer{padding:56px 0; color:#fff; background:var(--hero-bg,var(--ink))}
.closer h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,6vw,2.7rem); letter-spacing:-.04em; margin:0 0 10px}
.closer p{color:rgba(255,255,255,.76); max-width:44ch; margin:0 auto 22px}
.tile{transition:transform .2s ease, border-color .2s ease}
.tile:hover{transform:translateY(-3px); border-color:var(--accent); text-decoration:none}

.rise{opacity:0; transform:translateY(18px)}
.rise.seen{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease}

@media(min-width:760px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .qs{grid-template-columns:repeat(3,1fr)}
  .pays{grid-template-columns:1.05fr .95fr}
  .script-grid{grid-template-columns:.9fr 1.1fr; align-items:center}
}
@media(min-width:920px){
  .hero{padding:64px 0 76px}
  .hero-in{grid-template-columns:1.05fr .95fr; gap:48px}
  .hero-cta .btn{flex:0 0 auto}
  .band{padding:70px 0}
  .proof-n{font-size:1.85rem}
}
@media(prefers-reduced-motion:reduce){
  .phone-wave i,.phone-recdot,.ph-caret{animation:none !important}
  .rise{opacity:1; transform:none}
  .ph-line,.ph-chip{opacity:1; transform:none}
}