/* ---------- tokens ---------- */
:root{
  --bg:#F5EFE6; --bg-2:#EDE4D6; --ink:#1D1813; --ink-2:#6B5F52; --line:#D9CDBB;
  --accent:#C9643B; --accent-ink:#AE4F2A; --ok:#6F8F6A; --glow:#E8B35A;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:20px; --wrap:1200px; --narrow:640px;
}
[data-tone="dark"]{ --bg:#17130F; --bg-2:#221C16; --ink:#F3EBDF; --ink-2:#B3A595; --line:#3A3029; --ok:#8FAF86; }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F5EFE6;color:#1D1813;font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.band{background:var(--bg);color:var(--ink);padding:clamp(72px,10vw,128px) 16px;scroll-margin-top:64px}
.wrap{max-width:var(--wrap);margin:0 auto}
.wrap--narrow{max-width:var(--narrow);margin:0 auto}

/* ---------- type ---------- */
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 20px}
.h1{font:500 clamp(40px,6vw,76px)/1.02 var(--serif);letter-spacing:-.01em;margin:0 0 20px;overflow-wrap:anywhere}
.h2{font:500 clamp(32px,4.2vw,52px)/1.08 var(--serif);letter-spacing:-.01em;margin:0 0 16px;overflow-wrap:anywhere}
.h3{font:600 22px/1.25 var(--sans);margin:0 0 8px}
.lede{font-size:clamp(19px,1.6vw,22px);color:var(--ink-2);max-width:38ch;margin:0 0 32px}
p{margin:0 0 1em;max-width:60ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent-ink);color:#fff;text-decoration:none;font:600 17px/1 var(--sans);padding:16px 26px;border-radius:999px;border:0;cursor:pointer}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--small{padding:10px 18px;font-size:15px}
.btn[aria-disabled="true"]{background:var(--bg-2);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}

/* ---------- components ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 14px;font:500 15px/1 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
[data-tone="dark"] .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.grid-2{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(245,239,230,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__brand{font:600 22px/1 var(--serif);text-decoration:none}
.nav__links{display:flex;gap:22px;align-items:center;font:500 15px/1 var(--sans)}
.nav__links a{text-decoration:none}
@media (max-width:640px){.nav__links a:not(.btn){display:none}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,900px);display:grid;align-items:end;padding:0;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(245,239,230,.94) 0%,rgba(245,239,230,.84) 28%,rgba(245,239,230,0) 54%),linear-gradient(0deg,rgba(245,239,230,.9) 0%,rgba(245,239,230,0) 40%)}
.hero__copy{width:100%;padding:140px 16px 64px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.hero__chips{list-style:none;margin:0;padding:0 16px 40px;display:flex;gap:10px;flex-wrap:wrap;max-width:var(--wrap);margin-inline:auto;width:100%}
@media (min-width:900px){
  .hero{align-items:center}
  .hero__copy{padding:160px 16px 120px}
  .hero__chips{position:absolute;right:max(16px,calc((100% - var(--wrap))/2));bottom:56px;flex-direction:column;align-items:flex-end;width:auto;padding:0}
}
.hero__media img{background:#E9DDCB url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAVACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEBQL/xAAfEAACAgIDAAMAAAAAAAAAAAABAgADBBEFEiETMUH/xAAWAQEBAQAAAAAAAAAAAAAAAAADAQL/xAAbEQACAwADAAAAAAAAAAAAAAAAAQIRIRIxUf/aAAwDAQACEQMRAD8AoNltrEruPqLIAWPsdjqOhOplclkOj6WBF32NKNPDcryT1+42vI6qWY+zG442W1lmlIVnYqJXpniTU5Lg6/Jzk1K7dmHsIQ2MivCAWogCPw1HzEwhNeEP/9k=) center/cover}
.hero__copy>*{max-width:520px}

/* ---------- meet ---------- */
.meet{align-items:center}
.meet__points{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:18px;font-size:19px}
.meet__points strong{display:block;font-family:var(--serif);font-weight:500;font-size:24px;margin-bottom:4px}
.meet__note{color:var(--ink-2);border-left:3px solid var(--accent);padding-left:14px}
.meet__fig{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.meet__fig figcaption{padding:16px 22px 22px;font:500 17px/1.4 var(--serif);color:var(--ink-2)}
.wave{display:block;width:60%;margin:18px auto 0;color:var(--accent)}
.wave rect{transform-origin:center;transform-box:fill-box;animation:wave 1.4s ease-in-out infinite}
.wave rect:nth-child(odd){animation-delay:-.7s}
.wave rect:nth-child(3n){animation-delay:-.35s}
@keyframes wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wave rect{animation:none}}

/* ---------- health tiles ---------- */
.status{display:inline-flex;align-items:center;gap:10px;font:500 17px/1 var(--sans);color:var(--ok);margin:0 0 28px}
.status__dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(111,143,106,.5);animation:pulse 2s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 14px rgba(111,143,106,0)}}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px;display:grid;gap:12px;color:var(--ink);align-content:start}
.tile header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tile__k{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tile__v{font:500 17px/1.2 var(--sans)} .tile__v b{font:500 28px/1 var(--serif)}
.tile__v--ok{color:var(--ok)}
.tile svg{width:100%;height:auto;color:var(--accent)}
.tile__f{font-size:15px;color:var(--ink-2);display:flex;gap:14px;flex-wrap:wrap}
.axis{font:400 11px var(--mono);fill:var(--ink-2)}
.fineprint{font-size:14px;color:var(--ink-2);margin-top:28px}
/* heart rate: dash-drawn loop */
.ecg{stroke-dasharray:640;stroke-dashoffset:640;animation:ecg 2.6s linear infinite}
@keyframes ecg{to{stroke-dashoffset:0}}
/* blood pressure */
.bp{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* activity bars grow from the baseline */
.bars rect{y:80px;height:0;animation:grow .9s cubic-bezier(.2,.7,.2,1) forwards}
.bars rect:nth-child(1){--h:28px;animation-delay:0ms}
.bars rect:nth-child(2){--h:46px;animation-delay:60ms}
.bars rect:nth-child(3){--h:38px;animation-delay:120ms}
.bars rect:nth-child(4){--h:60px;animation-delay:180ms}
.bars rect:nth-child(5){--h:22px;animation-delay:240ms}
.bars rect:nth-child(6){--h:34px;animation-delay:300ms}
.bars rect:nth-child(7){--h:52px;animation-delay:360ms}
.bars rect:nth-child(8){--h:44px;animation-delay:420ms}
.bars rect:nth-child(9){--h:30px;animation-delay:480ms}
.bars rect:nth-child(10){--h:40px;animation-delay:540ms}
.bars rect:nth-child(11){--h:26px;animation-delay:600ms}
.bars rect:nth-child(12){--h:18px;animation-delay:660ms}
.bars rect:nth-child(13){--h:12px;animation-delay:720ms}
@keyframes grow{to{y:calc(80px - var(--h));height:var(--h)}}
/* sleep segments extend */
.seg rect{width:0;animation:extend 1.2s ease-out forwards}
.seg rect:nth-child(1){--w:34px;animation-delay:0ms}
.seg rect:nth-child(2){--w:70px;animation-delay:150ms}
.seg rect:nth-child(3){--w:60px;animation-delay:300ms}
.seg rect:nth-child(4){--w:56px;animation-delay:450ms}
.seg rect:nth-child(5){--w:40px;animation-delay:600ms}
.seg rect:nth-child(6){--w:20px;animation-delay:750ms}
@keyframes extend{to{width:var(--w)}}
.seg--awake{fill:var(--glow)} .seg--light{fill:#8FB7D9} .seg--deep{fill:#6B6FB8}
.key{display:inline-flex;align-items:center;gap:6px}.key::before{content:"";width:8px;height:8px;border-radius:50%}
.key--awake::before{background:var(--glow)}.key--light::before{background:#8FB7D9}.key--deep::before{background:#6B6FB8}
/* movement strip */
.move__track{fill:var(--line)} .move__bed{fill:#6B6FB8} .move__up{fill:var(--ok)} .move__quiet{fill:var(--glow)} .move__out{fill:#8FB7D9}
.move__mark{fill:var(--accent);stroke:var(--bg-2);stroke-width:3;animation:pulse 2s ease-out infinite}
/* meds */
.meds{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:17px}
.tick{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;font-size:14px;margin-right:8px;opacity:0;animation:pop .4s ease-out forwards}
.meds li:nth-child(2) .tick{animation-delay:.3s}.meds li:nth-child(3) .tick{animation-delay:.6s}
.tick--pending{background:var(--bg);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line)}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* reduced motion: final states, no animation */
@media (prefers-reduced-motion:reduce){
  .ecg,.bp{stroke-dashoffset:0;animation:none}
  .bars rect{animation:none;y:calc(80px - var(--h));height:var(--h)}
  .seg rect{animation:none;width:var(--w)}
  .tick{animation:none;opacity:1}
  .status__dot,.move__mark{animation:none}
}

/* ---------- hub ---------- */
.hub{align-items:center}
.hub__list{margin:0 0 20px;display:grid;gap:16px}
.hub__list div{border-top:1px solid var(--line);padding-top:14px}
.hub__list dt{font:500 20px/1.2 var(--serif);margin-bottom:4px}
.hub__list dd{margin:0;color:var(--ink-2);font-size:17px}
.hub__fig{margin:0}
.hub__svg{width:100%;height:auto;color:var(--ink-2)}
.nodes circle{fill:var(--bg-2);stroke:var(--line);stroke-width:1.5}
.spokes line{stroke-dasharray:220;stroke-dashoffset:220}
.is-in .spokes line{animation:draw 1.1s ease-out forwards}
.is-in .spokes line:nth-child(2){animation-delay:.1s}.is-in .spokes line:nth-child(3){animation-delay:.2s}.is-in .spokes line:nth-child(4){animation-delay:.3s}.is-in .spokes line:nth-child(5){animation-delay:.4s}.is-in .spokes line:nth-child(6){animation-delay:.5s}
@media (prefers-reduced-motion:reduce){.spokes line{stroke-dashoffset:0;animation:none}}

/* ---------- who ---------- */
.plain{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink-2)}
.plain li::before{content:"— ";color:var(--accent)}
.card .btn{margin-top:4px}

/* ---------- offers ---------- */
.offer{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid}
.offer--featured{box-shadow:0 0 0 1.5px var(--accent)}
.offer picture img{aspect-ratio:16/10;object-fit:cover;background:#000;width:100%}
.offer__body{padding:28px}
.offer__price{margin:0 0 20px}
.offer__price span{font:500 44px/1 var(--serif)}
/* ---------- footer ---------- */
.footer{padding:40px 16px}
.footer__row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:15px}
.footer nav{display:flex;gap:20px}.footer nav a{text-decoration:none;color:var(--ink-2)}
.footer__fine{color:var(--ink-2)}

/* ---------- story ---------- */
.story{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:56px}
.story__beat{display:grid;gap:24px;align-items:center}
.story__beat picture img{border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover;width:100%}
.story__time{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--accent-ink)}
.story__beat p{font-size:19px}
@media (min-width:900px){
  .story__beat{grid-template-columns:1fr 1fr;gap:48px}
  .story__beat:nth-child(even) picture{order:2}
}

/* ---------- privacy ---------- */
.privacy{align-items:center}
.privacy__fig{margin:0}.privacy__fig img{border-radius:var(--radius)}
.spec{list-style:none;margin:0;padding:0;font:400 15px/1.5 var(--mono)}
.spec li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.spec li:last-child{border-bottom:1px solid var(--line)}
.spec li span:first-child{color:var(--ink-2)}
.spec li span:last-child{text-align:right}

/* ---------- hero on phones: chips in one scrollable row so the copy clears the screen ---------- */
@media (max-width:899px) and (orientation:portrait){
  .hero__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:28px}
  .hero__chips::-webkit-scrollbar{display:none}
  .hero__chips .chip{flex:0 0 auto}
  .hero__copy{padding-top:200px}
}

/* ---------- hero media: one rule for every width ----------
   The frame is height-fitted and centred on 66% of the band, so the device (at the frame's centre)
   always sits right of the copy; the left 30% of the frame fades into the page. */
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__media img,.hero__video{position:absolute;top:0;left:66%;height:100%;width:auto;max-width:none;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hero__video{display:none}
@media (prefers-reduced-motion:no-preference){
  .hero__video{display:block;opacity:0;transition:opacity .8s ease}
  .hero__media.has-video .hero__video{opacity:1}
  .hero__media.has-video picture{visibility:hidden}
}
/* phones: anchor the device further right so roughly 40% of it hangs off-screen and the copy stays legible */
@media (max-width:899px) and (orientation:portrait){ .hero__media img,.hero__video{left:108%} }
@media (max-width:899px) and (orientation:landscape){ .hero__media img,.hero__video{left:70%} .hero__copy{padding-top:120px} }
/* phones: a soft paper glow behind each line of copy so it reads over the device without changing the scene */
@media (max-width:899px){
  .hero__copy .eyebrow,.hero__copy .h1,.hero__copy .lede{color:var(--ink);text-shadow:0 0 14px rgba(245,239,230,.95),0 0 28px rgba(245,239,230,.9),0 0 48px rgba(245,239,230,.85),0 1px 2px rgba(245,239,230,1)}
  .hero__copy .eyebrow{color:#4E4337}
  .hero__copy .lede{color:#3A3028}
}

/* pronunciation cue in the hero eyebrow */
.say{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px;color:var(--ink-2)}
@media (max-width:420px){ .hero__copy .eyebrow{font-size:11px;letter-spacing:.1em} .hero__copy .say{font-size:11px} }