/* wakerup.com — hand-drawn redesign.
   Tokens mirror the app (app/src/constants/theme.ts): paper, ink, one yellow. */

@font-face{font-family:"Nunito Sans";src:url(nunito-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(nunito-sans-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(nunito-sans-800.woff2) format("woff2");font-weight:800 900;font-display:swap}

:root{
  --paper:#fffcf4;--surface:#fffef9;--soft:#f2efe5;--ink:#20201c;--on-ink:#fffcf4;
  --yellow:#ffda24;--butter:#fff2be;--line:#e8e6de;--text:#20201c;--text-2:#65645b;--text-3:#77756b;
  --green:#28634a;--red:#a94c36;--night:#20231f;--night-text:#fff9ed;--night-muted:#b9beb1;--night-line:#41453b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font-family:"Nunito Sans",ui-rounded,-apple-system,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #3575b1;outline-offset:3px}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;font-weight:800;color:var(--text-2);margin-bottom:12px}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(30px,4.2vw,44px)}
.lede{font-size:17px;line-height:1.6;color:var(--text-2);max-width:36em}
.section{padding:88px 0}
.section.tight{padding:56px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:800;font-size:15px;border:0;white-space:nowrap}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.small{min-height:44px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:default}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:6px 11px;border-radius:99px;background:var(--soft);color:var(--text-2)}
.pill.platform{background:var(--ink);color:var(--paper)}
.pill.platform.soon{background:transparent;color:var(--text);border:1.5px dashed var(--text-3)}
.pill.platform svg{width:14px;height:14px;fill:currentColor}
.pill.y{background:var(--yellow);color:var(--ink)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:22px;gap:16px}
.wordmark{display:inline-block;font-size:26px;font-weight:800;letter-spacing:-1px;padding-bottom:.24em;background:url(../illustrations/wordmark-underline.png) no-repeat 50% 100%/72% auto}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:700;color:var(--text-2)}
.nav-links a:hover{color:var(--text)}
.nav-toggle{display:none}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-block:40px 80px}
.hero h1{font-size:clamp(46px,7.2vw,88px);line-height:.98;letter-spacing:-.045em}
.hero .lede{margin-top:22px;font-size:19px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-phones{position:relative;height:640px}
.hero-phones img{position:absolute;width:300px;border-radius:44px;filter:drop-shadow(0 30px 40px rgba(32,32,28,.18))}
.hero-phones .p1{left:8%;top:40px;transform:rotate(-4deg)}
.hero-phones .p2{right:4%;top:0;transform:rotate(3deg);width:280px}
.hero-phones .art{position:absolute;left:-14%;bottom:-4%;width:300px;filter:none;border-radius:0}

/* email capture */
.lead{display:flex;gap:10px;max-width:520px}
.lead input{flex:1;min-width:0;min-height:54px;border-radius:999px;border:1px solid var(--line);background:var(--surface);padding:0 20px;font-size:16px;color:var(--text)}
.lead input::placeholder{color:var(--text-3)}
.lead-error{color:var(--red);font-size:14px;margin-top:10px;font-weight:700}
.lead-done{color:var(--green);font-size:15px;margin-top:10px;font-weight:800}
.lead-fine{font-size:13px;color:var(--text-3);margin-top:12px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:26px 26px 0;overflow:hidden;display:flex;flex-direction:column;min-height:420px}
.step .num{font-size:13px;font-weight:800;color:var(--text-2)}
.step h3{font-size:26px;margin:8px 0 8px}
.step p{color:var(--text-2);font-size:15.5px}
.step .art{margin-top:auto;align-self:center;height:180px;object-fit:contain;padding-top:16px}
.step.butter{background:var(--butter);border-color:var(--butter)}
.step.stone{background:var(--soft);border-color:var(--soft)}

/* the ladder — names and times only; the artwork stays in the app */
.rungs{list-style:none;counter-reset:rung;margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.rungs li{counter-increment:rung;display:flex;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.rungs li:before{content:counter(rung);font-weight:800;color:var(--text-3);width:22px}
.rungs b{font-size:18px;font-weight:800;letter-spacing:-.3px;flex:1}
.rungs span{font-size:14px;font-weight:700;color:var(--text-2);white-space:nowrap}
@media(max-width:640px){.rungs{grid-template-columns:1fr}}

/* the ladder */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.rung{border:1px solid var(--line);border-radius:22px;padding:18px 18px 64px;min-height:170px;position:relative;overflow:hidden;background:var(--surface)}
.rung.butter{background:var(--butter);border-color:var(--butter)}.rung.stone{background:var(--soft);border-color:var(--soft)}
.rung b{display:block;font-size:20px;font-weight:800;letter-spacing:-.5px;width:62%}
.rung span{display:block;font-size:13.5px;font-weight:700;color:var(--text-2);margin-top:4px;width:62%}
.rung img{position:absolute;right:6px;bottom:0;height:88px;max-width:40%;object-fit:contain;object-position:bottom right}

/* alarm time (dark) */
.night{background:var(--night);color:var(--night-text)}
.night .eyebrow,.night .lede{color:var(--night-muted)}
.night-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.night-list{list-style:none;margin-top:28px;display:grid;gap:14px}
.night-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--night-line);font-size:16px}
.night-list li b{display:block;font-size:17px;margin-bottom:2px}
.night-list li span{color:var(--night-muted);font-size:15px}
.night-list .ic{flex:none;width:44px;height:44px;border-radius:14px;background:rgba(255,218,36,.12);display:grid;place-items:center;color:var(--yellow);font-size:20px;font-weight:800}
.night-phone{justify-self:center;width:300px;border-radius:44px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4))}

/* people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.faces{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:28px}
.faces img{width:100%;aspect-ratio:1;border-radius:50%;background:var(--soft);border:1px solid var(--line);object-fit:cover}
.faces img:nth-child(3n){background:var(--butter)}
.badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.badges figure{width:118px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 8px}
.badges img{height:56px;margin:0 auto 8px;object-fit:contain}
.badges figcaption{font-size:12.5px;font-weight:800;color:var(--text-2)}

/* show / episodes */
.show{background:var(--butter)}
.show-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.episode{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:26px}
.episode .pill{margin-bottom:12px}
.episode h3{font-size:26px;margin-bottom:10px}
.episode p{color:var(--text-2);font-size:15.5px}
.episode a.more{display:inline-block;margin-top:16px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.show .lede{color:var(--text-2)}
.brands{display:flex;gap:20px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:26px;padding:26px 30px;background:var(--surface);margin-top:26px;flex-wrap:wrap}
.brands h3{font-size:22px}
.brands p{color:var(--text-2);font-size:15px;margin-top:4px;max-width:44em}

/* footer */
.footer{border-top:1px solid var(--line);padding:56px 0 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer p{color:var(--text-2);font-size:14.5px;max-width:34em;margin-top:12px}
.footer h4{font-size:13px;font-weight:800;color:var(--text-2);margin-bottom:12px}
.footer ul{list-style:none;display:grid;gap:8px}
.footer li a{font-size:15px;font-weight:700}
.footer li a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{margin-top:40px;font-size:13px;color:var(--text-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-bottom:40px}
  .hero-phones{height:560px;margin-top:16px}
  .hero-phones .p1{left:0}.hero-phones .p2{right:0}.hero-phones .art{display:none}
  .steps{grid-template-columns:1fr}.step{min-height:0}.step .art{height:150px}
  .ladder{grid-template-columns:repeat(2,1fr)}
  .night-grid,.people,.show-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}.nav-links.open{display:flex;position:absolute;left:0;right:0;top:78px;flex-direction:column;background:var(--paper);padding:20px 24px 28px;border-bottom:1px solid var(--line);z-index:30}
  .nav-toggle{display:inline-flex}
}
@media(max-width:560px){
  .hero-phones{height:auto;display:flex;gap:12px}
  .hero-phones img{position:static;width:48%;transform:none!important}.hero-phones .p2{width:48%}
  .ladder{grid-template-columns:1fr}
  .faces{grid-template-columns:repeat(5,1fr)}
  .lead{flex-direction:column}
  .section{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* legal + support pages */
.doc{max-width:760px;padding-block:24px 72px}
.doc h1{font-size:clamp(34px,5vw,52px);margin-bottom:8px}
.doc .updated{font-size:14px;color:var(--text-3);font-weight:700;margin-bottom:28px}
.doc h2{font-size:24px;margin:40px 0 12px}
.doc h3{font-size:17px;margin:22px 0 6px}
.doc p,.doc li{font-size:16px;line-height:1.65;color:var(--text-2)}
.doc p{margin-bottom:14px}
.doc ul{padding-left:22px;margin-bottom:14px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--text)}
.doc a{text-decoration:underline;text-underline-offset:4px;font-weight:700}
.doc-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-3)}