:root { --text:#1d1d1f; --muted:#6e6e73; --blue:#0071e3; --surface:#f5f5f7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:#fff; font-family:system-ui,"PingFang SC","Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
nav { width:min(980px,calc(100% - 44px)); height:52px; margin:auto; display:flex; align-items:center; justify-content:space-between; font-size:12px; }
nav .brand { font-size:17px; font-weight:650; letter-spacing:-.02em; }
nav div { display:flex; gap:28px; color:#424245; }
.hero { max-width:1040px; margin:auto; padding:110px 22px 72px; text-align:center; }
.kicker { margin:0 0 18px; color:var(--muted); font-size:19px; font-weight:600; }
h1 { margin:0 auto; font-size:clamp(54px,7.4vw,92px); line-height:1.02; letter-spacing:-.065em; }
.intro { max-width:760px; margin:32px auto 0; color:var(--muted); font-size:clamp(20px,2.4vw,28px); line-height:1.45; letter-spacing:-.025em; }
.adhd { margin:18px 0 0; color:#86868b; font-size:15px; }
.actions { margin-top:34px; display:flex; align-items:center; justify-content:center; gap:28px; font-size:17px; }
.button { padding:12px 22px; color:#fff; border-radius:980px; background:var(--blue); }
.button:hover { background:#0077ed; }
.more { color:var(--blue); }
.more span { font-size:25px; vertical-align:-2px; }
.product { padding:0 22px 110px; overflow:hidden; }
.window { position:relative; width:min(980px,100%); min-height:590px; margin:auto; overflow:hidden; border:1px solid #dedee2; border-radius:24px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.13); }
.window header { height:48px; padding:0 18px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#86868b; border-bottom:1px solid #e8e8ed; font-size:11px; text-align:center; }
.dots { color:#c7c7cc; letter-spacing:3px; text-align:left; }
article { max-width:720px; padding:74px 58px 150px; margin:auto; }
article small { color:#86868b; font-size:13px; }
article h2 { margin:20px 0 34px; font-family:ui-serif,Georgia,serif; font-size:38px; letter-spacing:-.035em; }
article p { margin:22px 0; color:#6e6e73; font-family:ui-serif,Georgia,serif; font-size:20px; line-height:1.85; }
article .reading { margin-left:-22px; padding:16px 22px; color:#1d1d1f; border-left:3px solid var(--blue); background:linear-gradient(90deg,#eef6ff,transparent); }
.player { position:absolute; left:50%; bottom:30px; width:min(680px,calc(100% - 40px)); height:68px; padding:0 22px; display:flex; align-items:center; gap:16px; transform:translateX(-50%); border:1px solid #dedee2; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 10px 35px rgba(0,0,0,.1); backdrop-filter:blur(20px); }
.player button { width:34px; height:34px; padding:0; color:#555; border:0; border-radius:50%; background:transparent; font-size:22px; }
.player .pause { color:#fff; background:var(--text); font-size:11px; }
.timeline { flex:1; height:4px; overflow:hidden; border-radius:4px; background:#dedee2; }
.timeline i { display:block; width:58%; height:100%; background:var(--blue); }
.player span { color:#6e6e73; font-size:12px; }
.listen { max-width:980px; margin:0 auto 130px; padding:0 22px; text-align:center; }
.listen h2 { margin:0; font-size:clamp(44px,6vw,72px); letter-spacing:-.055em; }
.listen-intro { max-width:620px; margin:22px auto 48px; color:var(--muted); font-size:20px; line-height:1.5; }
.samples { display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
.sample { padding:30px; border-radius:24px; background:var(--surface); }
.sample.featured { background:#edf6ff; }
.sample span { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; }
.sample strong { display:block; margin-bottom:28px; font-size:22px; letter-spacing:-.025em; }
.sample audio { display:block; width:100%; }
.transcript { max-width:760px; margin:26px auto 0; color:#86868b; font-size:12px; line-height:1.6; }
.facts { max-width:980px; margin:0 auto 130px; padding:70px 22px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d2d2d7; border-bottom:1px solid #d2d2d7; text-align:center; }
.facts div { display:flex; flex-direction:column; gap:10px; }
.facts strong { font-size:28px; letter-spacing:-.035em; }
.facts span { color:var(--muted); font-size:14px; }
.story { padding:140px 22px; color:#f5f5f7; background:#000; text-align:center; }
.story p { max-width:900px; margin:0 auto 28px; font-size:clamp(32px,5vw,58px); line-height:1.16; letter-spacing:-.05em; font-weight:650; }
.story span { color:#86868b; font-size:14px; }
footer { max-width:980px; margin:auto; padding:30px 22px; display:flex; justify-content:space-between; color:#86868b; font-size:12px; }
footer a { color:#424245; }
@media (max-width:700px) {
  .hero { padding-top:72px; }
  h1 { font-size:52px; }
  .intro { font-size:20px; }
  .window { min-height:550px; border-radius:18px; }
  article { padding:56px 28px 135px; }
  article h2 { font-size:30px; }
  article p { font-size:17px; }
  .samples { grid-template-columns:1fr; }
  .sample { padding:24px; }
  .facts { grid-template-columns:1fr; gap:42px; margin-bottom:70px; }
  .story { padding:100px 22px; }
  footer { gap:20px; flex-direction:column; }
}