/* ============================================================
   Daypart — daypart.fm shared stylesheet
   Palette + type from the brand masters (assets/README.md)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap');

:root{
  --bg:#0b0b12;        /* tile base */
  --bg-deep:#000000;   /* deepest */
  --surface:#13131c;
  --surface-2:#181822;
  --surface-3:#1f1f2b;
  --bone:#f5f5f7;
  --gold:#ffd166;
  --gold-lift:#ffdc88;
  --indigo:#5b6cff;    /* night accent, used very sparingly */
  --line:rgba(245,245,247,.10);
  --line-strong:rgba(245,245,247,.18);
  --dim:rgba(245,245,247,.64);
  --faint:rgba(245,245,247,.42);
  --ghost:rgba(245,245,247,.26);

  --serif:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;

  --maxw:1200px;
  --pad:clamp(22px,5vw,64px);
  --r:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--bone);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(255,209,102,.28); color:var(--bone);}

/* warm vignette + faint grain on the whole page */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,209,102,.06), transparent 55%),
    radial-gradient(100% 60% at 50% 120%, rgba(91,108,255,.05), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer{position:relative; z-index:1;}

a{color:inherit;}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.025em; line-height:1.04;}
p{margin:0;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.section{padding:clamp(72px,11vw,140px) 0; position:relative;}
.eyebrow{font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); opacity:.92;}
.lede{font-size:clamp(18px,2.1vw,21px); line-height:1.6; color:var(--dim);}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(14px);
  background:rgba(11,11,18,.66); border-bottom:1px solid transparent; transition:border-color .3s, background .3s;}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(11,11,18,.82);}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--bone);}
.brand svg{width:28px; height:28px; display:block;}
.brand .nm{font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:-.03em;}
.nav-links{display:flex; align-items:center; gap:clamp(18px,3vw,38px);}
.nav-links a{font-size:15px; color:var(--dim); text-decoration:none; transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--bone);}
.nav-burger{display:none; background:none; border:0; color:var(--bone); padding:6px; cursor:pointer;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:15.5px; font-weight:600;
  text-decoration:none; border-radius:999px; padding:13px 22px; letter-spacing:-.01em; transition:transform .15s, box-shadow .2s, background .2s; cursor:pointer; border:0;}
.btn-gold{background:var(--gold); color:#1a1505; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 40px rgba(255,209,102,.18);}
.btn-gold:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 18px 50px rgba(255,209,102,.28);}
.btn-ghost{color:var(--bone); border:1px solid var(--line-strong); background:rgba(245,245,247,.02);}
.btn-ghost:hover{border-color:var(--ghost); background:rgba(245,245,247,.05);}
.btn-text{display:inline-flex; align-items:center; gap:7px; color:var(--bone); text-decoration:none; font-size:15.5px; border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:border-color .2s, gap .2s;}
.btn-text:hover{border-color:var(--gold); gap:11px;}

/* App Store badge */
.appstore{display:inline-flex; align-items:center; gap:11px; background:var(--bone); color:#0b0b12; border-radius:13px; padding:10px 20px 10px 16px; text-decoration:none; transition:transform .15s, box-shadow .2s;}
.appstore:hover{transform:translateY(-1px); box-shadow:0 16px 44px rgba(245,245,247,.14);}
.appstore svg{width:24px; height:24px; display:block; flex:none;}
.appstore .lab{display:flex; flex-direction:column; line-height:1.05; text-align:left; white-space:nowrap;}
.appstore .lab small{font-size:10.5px; letter-spacing:.02em; opacity:.7;}
.appstore .lab b{font-size:18px; font-weight:600; font-family:var(--serif); letter-spacing:-.01em; white-space:nowrap;}

/* ---------- the mark ---------- */
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); padding:64px 0 48px; position:relative; overflow:hidden;}
.foot-sun{position:absolute; left:50%; bottom:-160px; transform:translateX(-50%); width:min(1100px,140vw); pointer-events:none; opacity:.9;}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start; position:relative;}
.foot .brand .nm{font-size:25px;}
.foot-tag{margin-top:16px; font-family:var(--serif); font-style:italic; font-size:18px; color:var(--dim); max-width:280px;}
.foot-col h5{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:14px;}
.foot-col a{display:block; color:var(--dim); text-decoration:none; font-size:15px; padding:5px 0; transition:color .2s;}
.foot-col a:hover{color:var(--bone);}
.foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; color:var(--faint); font-size:13.5px; position:relative;}

/* ---------- phone frame ---------- */
.phone{position:relative; width:var(--pw,330px); aspect-ratio:330/700; border-radius:46px; background:linear-gradient(160deg,#23232e,#0a0a10); padding:11px;
  box-shadow:0 60px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(245,245,247,.07), 0 0 110px rgba(255,209,102,.10);}
.phone-screen{position:relative; width:100%; height:100%; border-radius:36px; background:var(--bg); overflow:hidden;}
.phone-notch{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:34%; height:26px; background:#000; border-radius:0 0 16px 16px; z-index:5;}

/* now playing */
.np{position:absolute; inset:0; display:flex; flex-direction:column; padding:8% 7% 7%;}
.np-status{display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--bone); padding:6px 4px 0; letter-spacing:.02em;}
.np-sys{display:inline-flex; align-items:center; gap:6px; color:var(--bone);}
.np-sys svg{display:block;}
.np-bar{display:flex; align-items:center; gap:9px; margin-top:14px;}
.np-onair{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.17em;}
.np-onair .d{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}
.np-onair .ctx{color:var(--faint); font-weight:500; letter-spacing:0;}
.np-art{margin-top:14px; width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#0d0d15; position:relative;}
.np-kicker{margin-top:18px; font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--faint);}
.np-title{font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:-.02em; margin-top:7px; line-height:1.08;}
.np-artist{margin-top:6px; font-size:14px; color:var(--dim);}
.np-scrub{margin-top:auto; padding-top:14px;}
.np-track{height:3px; border-radius:2px; background:var(--line-strong); position:relative;}
.np-track::after{content:""; position:absolute; left:0; top:0; bottom:0; width:14%; background:var(--gold); border-radius:2px;}
.np-times{display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:8px;}
.np-ctrl{display:flex; align-items:center; justify-content:center; gap:30px; margin-top:14px;}
.np-skip{width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); color:var(--dim); display:flex; align-items:center; justify-content:center; font-size:17px;}
.np-play{width:66px; height:66px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 0 38px rgba(255,209,102,.42);}
.np-play i{display:block; width:6px; height:22px; background:#1a1505; border-radius:1px; margin:0 2.5px;}

/* ---------- cards & grids ---------- */
.card{background:linear-gradient(180deg,var(--surface),var(--surface) 60%,rgba(19,19,28,.6)); border:1px solid var(--line); border-radius:var(--r); padding:30px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}

/* divider with horizon + sun */
.horizon{position:relative; height:1px; background:var(--line); margin:0 auto; max-width:var(--maxw);}
.horizon::after{content:""; position:absolute; left:50%; top:0; transform:translate(-50%,-100%); width:64px; height:32px; background:var(--gold); border-radius:64px 64px 0 0; opacity:.5; filter:blur(.2px); box-shadow:0 0 50px rgba(255,209,102,.4);}

/* reveal — content is ALWAYS fully opaque; the only motion is a subtle
   upward settle. Because opacity is never animated, content is visible even
   if the animation is paused/throttled or motion is reduced. No scroll
   dependency, so it works in any embedding context. */
.reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion: no-preference){
  .reveal{animation:revealUp .6s ease-out both;}
}
@keyframes revealUp{
  from{transform:translateY(12px);}
  to{transform:translateY(0);}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-burger{display:block;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .foot-in{grid-template-columns:1fr 1fr;}
  .foot-in .foot-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .foot-in{grid-template-columns:1fr;}
}

/* ============================================================
   HOME PAGE
   ============================================================ */
/* hero */
.hero-sec{position:relative; padding-top:clamp(40px,7vw,76px); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,5vw,64px); align-items:center; min-height:clamp(540px,72vh,720px);}
.hero-h1{font-size:clamp(38px,5vw,60px); line-height:1.05; letter-spacing:-.032em;}
.hero-h1 em{font-style:italic; font-weight:400; color:var(--gold-lift);}
.hero-lede{margin-top:clamp(22px,3vw,30px); max-width:500px; position:relative;}
.hero-cta{margin-top:clamp(26px,4vw,38px);}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(28px,4vw,42px);}
.chip{font-size:13.5px; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:7px 16px; white-space:nowrap;}
.hero-phone{display:flex; justify-content:center; align-items:center; position:relative;}
.hero-phone-glow{position:absolute; width:80%; height:60%; left:50%; top:46%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,209,102,.16), transparent 70%); filter:blur(30px); z-index:-1; pointer-events:none;}

/* daypart marquee under hero */
.hero-marq{margin-top:clamp(46px,7vw,84px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.hero-marq-in{display:inline-flex; align-items:center; gap:22px; white-space:nowrap; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,30px); color:var(--faint); animation:marq 34s linear infinite; will-change:transform;}
.hero-marq-in .sep{color:var(--gold); opacity:.7; font-style:normal;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* the idea */
.idea-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start;}
.idea-h2{font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em; line-height:1.08;}
.idea-h2, .sec-h2{text-wrap:balance;}
.idea-body p{margin-bottom:18px; font-size:clamp(16px,1.7vw,18.5px); color:var(--dim); line-height:1.66;}
.idea-body p em{font-style:italic; color:var(--bone);}
.idea-not{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;}
.idea-not span{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--gold-lift); position:relative; padding-left:18px;}
.idea-not span::before{content:"—"; position:absolute; left:0; color:var(--faint);}

/* section heads */
.sec-head{max-width:760px; margin-bottom:clamp(40px,6vw,64px);}
.sec-h2{font-size:clamp(28px,4vw,46px); letter-spacing:-.03em; margin-top:16px; line-height:1.06;}
.sec-sub{margin-top:22px;}

/* daypart band */
.dp-band{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.dp-seg{position:relative; border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:20px 18px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;}
.dp-seg:hover{transform:translateY(-5px); border-color:var(--line-strong);}
.dp-ix{font-family:var(--serif); font-size:14px; color:var(--faint); letter-spacing:.04em;}
.dp-glow{position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%; background:var(--c); opacity:.16; filter:blur(26px);}
.dp-name{font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.02em;}
.dp-name::before{content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c); margin-right:8px; vertical-align:middle; box-shadow:0 0 12px var(--c);}
.dp-time{font-size:13px; color:var(--faint); margin-top:5px; font-variant-numeric:tabular-nums;}
.dp-mood{font-size:13.5px; color:var(--dim); margin-top:12px; line-height:1.45; text-wrap:pretty; min-height:4.35em;}
.dp-foot{max-width:640px; margin:30px auto 0; text-align:center; color:var(--faint); font-size:15px; font-style:italic; font-family:var(--serif);}

/* sources */
.src-grid{margin-top:8px;}
.src-card{display:flex; flex-direction:column;}
.src-art{width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; margin-bottom:22px; border:1px solid var(--line);}
.src-h3{font-size:23px; letter-spacing:-.02em;}
.src-p{margin-top:12px; color:var(--dim); font-size:15.5px; line-height:1.62; text-wrap:pretty;}
.src-note{max-width:780px; margin:clamp(34px,5vw,52px) auto 0; text-align:center; color:var(--dim); font-size:16px; line-height:1.62;}

/* programmer */
.programmer-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5vw,70px); align-items:center;}
.prog-h2{margin-top:16px;}
.prog-p{margin-top:20px; color:var(--dim); font-size:clamp(16px,1.7vw,18px); line-height:1.66; max-width:520px;}
.prog-list{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:16px;}
.prog-list li{position:relative; padding-left:26px; color:var(--dim); font-size:15.5px; line-height:1.5;}
.prog-list li b{color:var(--bone); font-weight:600;}
.prog-list li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(255,209,102,.5);}
.prog-vis{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:20px; padding:26px;}
.seq{display:flex; flex-direction:column; gap:9px;}
.seq-row{display:grid; grid-template-columns:auto 64px 1fr auto; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:var(--bg); border:1px solid var(--line); transition:border-color .3s, background .3s;}
.seq-row.active{border-color:rgba(255,209,102,.45); background:rgba(255,209,102,.06); box-shadow:0 0 30px rgba(255,209,102,.08);}
.seq-dot{width:10px; height:10px; border-radius:50%;}
.seq-dot.music{background:#ffd166;} .seq-dot.talk{background:#5b6cff;} .seq-dot.ident{background:#f5f5f7;} .seq-dot.radio{background:#e7a23f;}
.seq-k{font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--faint);}
.seq-t{font-size:15px; color:var(--bone);}
.seq-len{font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums;}
.seq-cap{margin-top:18px; text-align:center; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--faint);}

/* on device */
.ondevice-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:center;}
.priv-card{display:flex; flex-direction:column; gap:4px; background:linear-gradient(180deg,var(--surface),var(--surface)); border:1px solid var(--line); border-radius:20px; padding:14px;}
.priv-row{display:flex; gap:16px; align-items:flex-start; padding:18px; border-radius:14px;}
.priv-row+.priv-row{border-top:1px solid var(--line);}
.priv-ic{color:var(--gold); line-height:0; margin-top:1px; min-width:24px; display:flex;}
.priv-ic svg{width:24px; height:24px; display:block;}
.priv-row b{display:block; font-size:16px; margin-bottom:3px;}
.priv-row small{font-size:14px; color:var(--dim); line-height:1.5;}

/* moods & themes */
.mt-grid{margin-top:8px;}
.mt-card{display:flex; flex-direction:column;}
.mt-kicker{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:10px;}
.mt-tag{font-size:10.5px; letter-spacing:.1em; color:var(--gold); background:rgba(255,209,102,.12); border:1px solid rgba(255,209,102,.25); padding:3px 9px; border-radius:999px;}
.mt-h3{font-size:clamp(22px,2.6vw,28px); letter-spacing:-.02em; margin-top:16px;}
.mt-p{margin-top:12px; color:var(--dim); font-size:15.5px; line-height:1.62; text-wrap:pretty;}
.mood-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; padding-top:26px;}
.mood-chip{font-size:14px; color:var(--bone); border:1px solid var(--line); border-radius:999px; padding:8px 16px 8px 13px; display:inline-flex; align-items:center; gap:9px; transition:border-color .2s, background .2s;}
.mood-chip::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c);}
.mood-chip:hover{border-color:var(--ghost); background:rgba(245,245,247,.03);}
.theme-week{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:auto; padding-top:26px;}
.tw-day{display:flex; flex-direction:column; align-items:center; gap:7px; padding:13px 4px; border:1px solid var(--line); border-radius:11px; background:var(--bg); transition:border-color .2s, transform .25s;}
.tw-day:hover{border-color:var(--ghost); transform:translateY(-3px);}
.tw-d{font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--faint); text-transform:uppercase;}
.tw-t{font-family:var(--serif); font-size:13.5px; font-weight:500; letter-spacing:-.01em; color:var(--gold-lift); text-align:center;}

/* get / cta */
.get-sec{position:relative; overflow:hidden; text-align:center; padding-bottom:clamp(120px,16vw,200px);}
.get-in{position:relative;}
.get-sun{position:absolute; left:50%; bottom:-120px; transform:translateX(-50%); width:min(1000px,130vw); pointer-events:none; z-index:0;}
.get-content{position:relative; z-index:1;}
.get-h2{font-size:clamp(32px,5.2vw,60px); letter-spacing:-.032em; line-height:1.02;}
.get-sub{max-width:520px; margin:24px auto 0;}
.get-cta{justify-content:center; margin-top:34px;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:left; gap:40px;}
  .hero-phone{order:-1;}
  .idea-grid, .programmer-grid, .ondevice-grid{grid-template-columns:1fr; gap:30px;}
  .dp-band{grid-template-columns:repeat(2,1fr);}
  .prog-vis{order:2;}
}
@media (max-width:560px){
  .dp-band{grid-template-columns:1fr;}
  .seq-row{grid-template-columns:auto 1fr auto; gap:10px;}
  .seq-k{display:none;}
}

/* mobile nav sheet */
.m-sheet{position:fixed; inset:0; z-index:60; background:rgba(8,8,14,.96); backdrop-filter:blur(8px); display:none; flex-direction:column; padding:26px var(--pad);}
.m-sheet.open{display:flex;}
.m-sheet .m-top{display:flex; justify-content:space-between; align-items:center;}
.m-sheet nav{display:flex; flex-direction:column; gap:6px; margin-top:48px;}
.m-sheet nav a{font-family:var(--serif); font-size:34px; color:var(--bone); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line);}
.m-sheet .m-cta{margin-top:auto;}

/* ============================================================
   HOW IT WORKS PAGE
   ============================================================ */
.pagehead{padding-top:clamp(60px,9vw,120px); padding-bottom:0;}
.pagehead-in{max-width:840px;}
.pagehead-h1{font-size:clamp(36px,5.6vw,66px); letter-spacing:-.034em; line-height:1.02; margin-top:18px;}
.pagehead-sub{margin-top:24px; max-width:600px;}
.step-rail{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px;}
.step-rail-i{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--dim); font-size:14.5px; border:1px solid var(--line); border-radius:999px; padding:9px 17px; transition:color .2s, border-color .2s, background .2s;}
.step-rail-i span{font-family:var(--serif); color:var(--gold); font-size:13px;}
.step-rail-i:hover{color:var(--bone); border-color:var(--ghost); background:rgba(245,245,247,.03);}

.step-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,84px); align-items:center;}
.step-copy{max-width:520px;}
.step-num{font-family:var(--serif); font-size:clamp(40px,5vw,58px); color:var(--gold); opacity:.85; line-height:1; letter-spacing:-.02em;}
.step-h2{font-size:clamp(28px,3.8vw,44px); letter-spacing:-.03em; margin-top:14px; line-height:1.05;}
.step-p{margin-top:20px; color:var(--dim); font-size:clamp(16px,1.7vw,18px); line-height:1.66;}
.tick-list{list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px;}
.tick-list li{position:relative; padding-left:30px; color:var(--bone); font-size:15.5px; line-height:1.45;}
.tick-list li::before{content:""; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:rgba(255,209,102,.14);}
.tick-list li::after{content:""; position:absolute; left:6px; top:7px; width:6px; height:3.5px; border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold); transform:rotate(-45deg);}
.step-phone, .step-vis{display:flex; justify-content:center;}
.step-alt .step-phone, .step-alt .step-vis{order:-1;}

/* in-app screen chrome */
.app-screen{position:absolute; inset:0; display:flex; flex-direction:column; padding:9% 0 0;}
.app-top{display:flex; align-items:center; justify-content:space-between; padding:14px 18px 0;}
.app-back{font-size:24px; color:var(--gold); line-height:1; width:24px;}
.app-title{font-family:var(--serif); font-size:18px; font-weight:500;}
.app-add{font-size:24px; color:var(--gold); line-height:1; width:24px; text-align:right; display:flex; justify-content:flex-end; align-items:center;}
.app-sub{padding:6px 18px 0; font-size:12px; color:var(--faint); text-align:center; margin-top:-2px;}
.src-group{padding:14px 16px 0;}
.src-group-h{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:9px;}
.src-group-h em{font-style:normal; margin-left:auto; color:var(--ghost);}
.sg-dot{width:7px; height:7px; border-radius:50%;}
.sg-dot.music{background:#ffd166;} .sg-dot.radio{background:#e7a23f;} .sg-dot.ident{background:#5b6cff;}
.src-item{display:flex; align-items:center; gap:12px; padding:9px; border-radius:12px; background:var(--surface); border:1px solid var(--line); margin-bottom:8px;}
.src-thumb{width:38px; height:38px; border-radius:9px; overflow:hidden; flex:none; border:1px solid var(--line);}
.src-lines b{display:block; font-size:14px; font-weight:600;}
.src-lines small{font-size:11.5px; color:var(--faint);}

/* daypart bar (vertical, in app) */
.daybar{flex:1; display:flex; flex-direction:column; margin:18px 16px 0; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.db-seg{position:relative; display:flex; flex-direction:column; justify-content:center; padding:0 16px; background:color-mix(in srgb, var(--c) 12%, var(--bg)); border-bottom:1px solid rgba(0,0,0,.35);}
.db-seg::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c);}
.db-seg:last-child{border-bottom:0;}
.db-seg.active{background:color-mix(in srgb, var(--c) 26%, var(--bg)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent);}
.db-t{position:absolute; top:-8px; left:16px; font-size:10.5px; color:var(--bone); background:var(--bg); padding:1px 6px; border-radius:5px; font-variant-numeric:tabular-nums; border:1px solid var(--line);}
.db-n{font-family:var(--serif); font-size:15px; font-weight:500; letter-spacing:-.01em;}
.db-handle{position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:42px; height:5px; border-radius:5px; background:var(--c); box-shadow:0 0 14px var(--c); z-index:3;}
.db-foot{text-align:center; font-size:11px; color:var(--faint); padding:12px 0 14px;}

.promise-grid{margin-top:8px;}
.promise h3{font-size:20px; letter-spacing:-.02em;}
.promise p{margin-top:11px; color:var(--dim); font-size:15px; line-height:1.6; text-wrap:pretty;}

@media (max-width:900px){
  .step-grid{grid-template-columns:1fr; gap:34px;}
  .step-alt .step-phone, .step-alt .step-vis{order:0;}
  .step-phone, .step-vis{order:-1;}
}

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-wrap{max-width:820px;}
.faq-group{margin-bottom:clamp(40px,6vw,64px);}
.faq-cat{font-family:var(--serif); font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; color:var(--gold-lift); margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.faq{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:18px; padding:22px 40px 22px 0; font-family:var(--serif); font-size:clamp(18px,2.1vw,21px); font-weight:500; letter-spacing:-.015em; color:var(--bone); line-height:1.3; transition:color .2s; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary em{font-style:italic; color:var(--gold-lift);}
.faq summary:hover{color:var(--gold-lift);}
/* plus → minus toggle */
.faq summary::before{content:""; position:absolute; right:0; top:30px; width:18px; height:2px; background:var(--gold); border-radius:2px;}
.faq summary::after{content:""; position:absolute; right:8px; top:22px; width:2px; height:18px; background:var(--gold); border-radius:2px; transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.faq[open] summary::after{transform:scaleY(0);}
.faq-a{overflow:hidden; padding:0 36px 4px 0; max-width:680px;}
.faq-a p{color:var(--dim); font-size:16.5px; line-height:1.68; padding-bottom:24px;}
.faq-a p b{color:var(--bone); font-weight:600;}
.faq-a p em{font-style:italic; color:var(--bone);}
.faq-a a{color:var(--gold-lift); text-decoration:none; border-bottom:1px solid rgba(255,220,136,.35);}
.faq-a a:hover{border-bottom-color:var(--gold-lift);}
/* open/close animation */
.faq[open] .faq-a{animation:faqIn .4s cubic-bezier(.2,.7,.2,1);}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px);}to{opacity:1; transform:none;}}
.faq-cta{margin-top:8px; padding:30px; border:1px dashed var(--line-strong); border-radius:var(--r); text-align:center;}
.faq-cta p{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--dim); margin-bottom:12px;}

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.priv-updated{margin-top:22px; font-size:13.5px; color:var(--faint); letter-spacing:.02em;}
.priv-summary{padding-top:clamp(30px,5vw,46px); padding-bottom:clamp(40px,6vw,64px);}
.priv-tldr{background:linear-gradient(180deg,rgba(255,209,102,.07),rgba(255,209,102,.02)); border:1px solid rgba(255,209,102,.22); border-radius:20px; padding:clamp(28px,4vw,40px) clamp(30px,4vw,44px);}
.priv-toc-spacer{}
.priv-tldr-h{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.priv-tldr ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;}
.priv-tldr li{position:relative; padding-left:30px; font-size:16.5px; line-height:1.55; color:var(--dim);}
.priv-tldr li b{color:var(--bone); font-weight:600;}
.priv-tldr li::before{content:""; position:absolute; left:2px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(255,209,102,.5);}

.priv-layout{display:grid; grid-template-columns:230px 1fr; gap:clamp(30px,5vw,70px); align-items:start;}
.priv-toc{position:sticky; top:96px;}
.priv-toc-h{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px;}
.priv-toc nav{display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line);}
.priv-toc nav a{font-size:14.5px; color:var(--dim); text-decoration:none; padding:7px 0 7px 16px; margin-left:-1px; border-left:1px solid transparent; transition:color .2s, border-color .2s;}
.priv-toc nav a:hover{color:var(--bone); border-left-color:var(--gold);}

.priv-body{max-width:680px;}
.priv-block{margin-bottom:clamp(34px,5vw,50px); scroll-margin-top:96px;}
.priv-block h2{font-size:clamp(22px,2.8vw,30px); letter-spacing:-.025em; margin-bottom:16px;}
.priv-block p{color:var(--dim); font-size:16.5px; line-height:1.7; margin-bottom:15px;}
.priv-block p b{color:var(--bone); font-weight:600;}
.priv-block a{color:var(--gold-lift); text-decoration:none; border-bottom:1px solid rgba(255,220,136,.35);}
.priv-block a:hover{border-bottom-color:var(--gold-lift);}
.priv-list{list-style:none; padding:0; margin:0 0 15px;}
.priv-list li{position:relative; padding-left:26px; color:var(--dim); font-size:16px; line-height:1.6; margin-bottom:11px;}
.priv-list li b{color:var(--bone); font-weight:600;}
.priv-list li::before{content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.priv-flag{font-size:14.5px !important; color:var(--faint) !important; border-left:2px solid var(--line-strong); padding:4px 0 4px 16px; font-style:italic;}
.priv-contact a{font-family:var(--serif); font-size:22px; letter-spacing:-.01em;}

@media (max-width:820px){
  .priv-layout{grid-template-columns:1fr; gap:8px;}
  .priv-toc{display:none;}
  .priv-toc-spacer{display:none;}
}