@import url("fonts/fonts.css");

/* ---------- tokens ---------- */
:root{
  --ink:#07101D;          /* approved smile ink */
  --navy:#011635;         /* logo navy */
  --orange:#F95E15;       /* Morning  (sampled from approved can art) */
  --blue:#0A6AF2;         /* Daily */
  --purple:#612BB2;       /* Nightly */
  --orange-50:#FFF1EA; --blue-50:#EAF2FF; --purple-50:#F1EAFB;
  --muted:#4B5565; --line:rgba(7,16,29,.12);
  --canvas:#fff; --surface:#fff; --on-ink:#fff;   /* on-ink: text on --ink fills */
  --ring:rgba(7,16,29,.14); --placeholder:#6B7482; --hover:rgba(7,16,29,.06); --error:#B42318;
  --glass:rgba(255,255,255,.78); --glass-edge:rgba(255,255,255,.7); --glass-shadow:rgba(7,16,29,.07);
  --r-card:28px; --r-ctl:16px;
  --gutter:14px;
  --display:"Anton","Haettenschweiler","Impact","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:900px){:root{--r-card:44px;--gutter:20px}}
:root[data-theme=dark]{
  color-scheme:dark;
  --ink:#EEF2F8; --muted:#A6B0C0; --on-ink:#07101D; --line:rgba(255,255,255,.12);
  --canvas:#1E1F22; --surface:#16181C;
  --ring:rgba(255,255,255,.16); --placeholder:#8B95A7; --hover:rgba(255,255,255,.1); --error:#FF948C;
  --glass:rgba(26,28,32,.62); --glass-edge:rgba(255,255,255,.09); --glass-shadow:rgba(0,0,0,.28);
}
:root[data-theme=dark] .nav__logo,:root[data-theme=dark] .wl-done img{filter:brightness(0) invert(.94)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- page frame: rounded container on a white canvas ---------- */
.frame{padding:var(--gutter)}
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);min-height:calc(100svh - var(--gutter)*2);display:flex;flex-direction:column;align-items:center}

/* ---------- floating nav pill ---------- */
.nav{position:absolute;z-index:20;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--glass-edge) inset,0 8px 30px var(--glass-shadow)}
@media (min-width:900px){
  .nav{top:20px;left:24px;right:24px;padding:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__brand,.nav__right{display:flex;align-items:center;border-radius:999px;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--glass-edge) inset,0 8px 30px var(--glass-shadow)}
  .nav__brand{padding:10px 24px}
  .nav__right{padding:8px}
}
.nav__logo{display:block;height:34px;width:auto}
@media (min-width:900px){.nav__logo{height:40px}}
.nav__right{display:flex;align-items:center;gap:6px}
.nav__link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);transition:background .2s}
.nav__link:hover{background:var(--hover)}
.nav__link svg{width:12px;height:12px}
.nav__cta{display:none;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.nav__cta:hover{background:var(--blue);color:#fff}
@media (min-width:560px){.nav__cta{display:inline-flex}}

/* ---------- type ---------- */
.h1{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.004em;line-height:.94;text-align:center;font-size:clamp(60px,17.4vw,104px)}
.h1 .br{display:block}
@media (min-width:720px){.h1{font-size:clamp(88px,8.4vw,170px)}.h1 .br{display:inline}}
.sub{margin:0;max-width:30em;text-align:center;color:var(--muted);font-size:16px;line-height:1.5}
@media (min-width:720px){.sub{font-size:19px}}

/* ---------- waitlist form ---------- */
.wl{width:100%;max-width:560px;margin:0 auto}
.wl__field{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:calc(var(--r-ctl) + 10px);background:var(--surface);box-shadow:0 0 0 1.5px var(--ring),0 14px 40px var(--glass-shadow);transition:box-shadow .2s}
.wl__field:focus-within{box-shadow:0 0 0 2.5px var(--blue),0 14px 40px rgba(10,106,242,.16)}
.wl--error .wl__field{box-shadow:0 0 0 2.5px #D92D20,0 14px 40px rgba(217,45,32,.12)}
.wl input[type=email]{width:100%;min-width:0;height:54px;padding:0 16px;border:0;border-radius:var(--r-ctl);background:transparent;font-size:17px;outline:0}
.wl input::placeholder{color:var(--placeholder);opacity:1}
.wl__btn{display:flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 24px;border:0;border-radius:var(--r-ctl);background:var(--ink);color:var(--on-ink);font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s var(--ease)}
.wl__btn:hover{background:var(--blue);color:#fff}
.wl__btn:active{transform:scale(.98)}
.wl__btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.wl__btn:hover svg{transform:translateX(3px)}
.wl__btn[disabled]{opacity:.7;cursor:progress}
@media (min-width:600px){.wl__field{flex-direction:row;align-items:center}.wl input[type=email]{height:56px}.wl__btn{height:56px}}
.wl__note{margin:12px 8px 0;text-align:center;font-size:12.5px;line-height:1.45;color:var(--muted)}
.wl__note a{text-underline-offset:2px}
.wl__msg{margin:10px 8px 0;min-height:1.4em;text-align:center;font-size:14px;font-weight:500;color:var(--error)}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* success / duplicate state */
.wl-done{display:none;width:100%;max-width:560px;margin:0 auto;padding:22px 22px 24px;border-radius:26px;background:var(--surface);box-shadow:0 0 0 1.5px var(--ring),0 14px 40px var(--glass-shadow);text-align:center}
.wl-done[data-show]{display:block;animation:rise .5s var(--ease)}
.wl-done img{width:58px;height:auto;margin:0 auto 12px}
.wl-done h2{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:36px;line-height:1;text-transform:uppercase}
.wl-done p{margin:0 auto 16px;max-width:30em;color:var(--muted);font-size:15px}
.wl-done a{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:14px;background:var(--ink);color:var(--on-ink);font-size:15px;font-weight:600;text-decoration:none}
.wl-done a:hover{background:var(--blue);color:#fff}
.wl-done a svg{width:12px;height:12px}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px 12px 28px;font-size:13px;color:var(--muted)}
@media (min-width:900px){.foot{padding:24px 28px 36px}}
.foot nav{display:flex;gap:18px}
.foot a{text-underline-offset:3px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}