:root{--ink:#16161D;--ink2:#3B3B45;--mute:#8B8B95;--mute2:#B4B4BC;--line:#E9E9EE;--wash:#F5F5F7;--pink:#F0508C;--pinksoft:#FDE8F0;--sf:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--spring:cubic-bezier(.2,.9,.25,1.15);--ease:cubic-bezier(.2,.9,.25,1)}
*{box-sizing:border-box;margin:0}
html{color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wordmark{display:block;width:auto;color:var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;gap:16px}
.nav .links{display:flex;gap:22px;font-size:15px;font-weight:500;color:var(--ink2)}
.nav .links a{text-decoration:none;transition:color .2s}
.nav .links a:hover{color:var(--pink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:var(--pinksoft);color:var(--ink);border-radius:999px;padding:6px 12px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;padding-top:32px;padding-bottom:56px}
h1{font-size:clamp(38px,6vw,60px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.hero h1{margin-top:20px}
.hero p.lead{font-size:20px;line-height:1.45;color:var(--ink2);margin-top:20px;max-width:30em}
.cta{display:inline-block;text-align:center;background:var(--ink);color:#fff;font-weight:600;font-size:16px;border-radius:28px;padding:15px 24px;margin-top:28px}
.fine{font-size:14px;color:var(--mute);margin-top:14px}
.sec{padding-top:84px;padding-bottom:84px;border-top:1px solid var(--line)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pink)}
h2{font-size:clamp(30px,4.2vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin-top:10px}
.sec .lead{font-size:18px;color:var(--ink2);max-width:560px;margin-top:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{background:var(--wash);border-radius:24px;padding:28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(22,22,29,.35)}}
.card .n{font-size:14px;font-weight:700;color:var(--pink);margin-bottom:26px}
.card h3{font-size:21px;letter-spacing:-.01em;font-weight:600;margin-bottom:8px}
.card p{font-size:16px;line-height:1.45;color:var(--ink2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.privacy{background:var(--ink);color:#fff;border-radius:32px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.privacy p{color:rgba(255,255,255,.72);font-size:18px;margin-top:14px}
.privacy ul{list-style:none;padding:0}
.privacy li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.82)}
.privacy li:last-child{border-bottom:0}
.privacy li svg{flex:none;margin-top:4px}
.privacy li b{display:block;color:#fff;font-weight:600}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{font-size:18px;font-weight:500;cursor:pointer;transition:color .2s;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary:hover{color:var(--pink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pink);font-size:24px;line-height:1;transition:transform .3s var(--ease)}
details[open] summary::after{content:"\2212";transform:rotate(180deg)}
details[open] p{animation:rise .4s var(--ease) both}
details p{color:var(--ink2);margin-top:10px}
footer{background:var(--wash);margin-top:40px;font-size:14px;color:var(--ink2)}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:44px;padding-bottom:44px}
footer .cols{display:flex;gap:56px;flex-wrap:wrap}
footer .cols div{display:flex;flex-direction:column;gap:10px}
footer b{color:var(--ink);font-weight:600}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--pink)}
footer .copy{margin-top:14px}
.page{max-width:720px;padding-top:32px;padding-bottom:64px}
.page h1{font-size:clamp(34px,5vw,44px)}
.page h2{font-size:22px;letter-spacing:-.01em;font-weight:600;margin-top:32px}
.page p,.page ul,.page ol{margin-top:12px;color:var(--ink2)}
.page li{margin-top:6px}
.page a{color:var(--pink)}
.note{background:var(--pinksoft);color:var(--ink)!important;border-radius:14px;padding:12px 16px;font-size:15px}
.downloads{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.page .downloads a{color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--wash);border-radius:20px;padding:20px;text-decoration:none;font-size:14px;font-weight:600}
.downloads img{height:64px;width:auto;max-width:100%;border-radius:14px}
.page .downloads .dark{background:var(--ink);color:#fff}
/* Hero devices: the wireframe's Today screen and Watch, drawn at full size and scaled */
.visual{--s:.68;--w:.8;position:relative;height:calc(898px*var(--s) + 40px)}
.dev-phone{position:absolute;left:50%;top:0;width:calc(426px*var(--s));height:calc(898px*var(--s));margin-left:calc(426px*var(--s)/-2);translate:0 calc(var(--py,0px)*-.04);animation:lift 1s var(--ease) both}
.dev-watch{position:absolute;right:0;bottom:0;width:calc(236px*var(--w));height:calc(286px*var(--w));translate:0 calc(var(--py,0px)*-.1);animation:lift 1s var(--ease) .25s both}
.dev-phone .scale{width:426px;transform:scale(var(--s));transform-origin:top left}
.dev-watch .scale{width:236px;transform:scale(var(--w));transform-origin:top left}
.tap{animation:tap 6s ease-in-out 2.4s infinite}
.phone{width:426px;height:898px;border-radius:72px;background:#1d1d20;padding:12px;box-shadow:0 0 0 2px #3a3a3e inset,0 30px 60px -20px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.2);position:relative}
.screen{width:402px;height:874px;border-radius:60px;overflow:hidden;position:relative}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;background:#000;border-radius:20px;z-index:10}
.status{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:4px 34px 0 46px;font:600 17px var(--sf);z-index:9;letter-spacing:-.2px}
.status .ic{display:flex;gap:7px;align-items:center}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:140px;height:5px;border-radius:3px;background:#111;z-index:9}
.content{position:absolute;inset:54px 0 0 0;overflow:hidden;display:flex;flex-direction:column}
.pad{padding:0 24px}
.lt{font:700 34px/1.12 var(--sf);letter-spacing:-.6px}
.xs{font:400 13px/1.3 var(--sf);color:var(--mute)}
.tabbar{position:absolute;left:16px;right:16px;bottom:26px;height:64px;border-radius:32px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 8px 30px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:space-around;padding:0 6px;z-index:8}
.tabbar div{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 10px var(--sf);color:var(--mute);width:64px;padding:6px 0;border-radius:24px}
.tabbar div.on{color:var(--pink);background:var(--pinksoft)}
.tl{display:flex;flex-direction:column}
.blk{display:flex;gap:12px;padding:10px 0;align-items:flex-start;position:relative;animation:rise .6s var(--ease) both;animation-delay:calc(1000ms + var(--n,0)*120ms)}
.blk:nth-child(2){--n:1}.blk:nth-child(3){--n:2}.blk:nth-child(4){--n:3}
.blk .tm{width:46px;font:500 13px var(--sf);color:var(--mute);padding-top:3px;font-variant-numeric:tabular-nums;flex:none}
.blk .bd{flex:1;min-width:0}
.blk .tt{font:600 16px var(--sf);letter-spacing:-.2px;display:flex;align-items:center;gap:6px}
.blk .mt{font:400 13px var(--sf);color:var(--mute);margin-top:2px}
.blk .st{width:26px;height:26px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--mute2);margin-top:-1px}
.blk.done .tt{color:var(--mute)}
.blk.done .st{background:var(--ink);border-color:var(--ink)}
.blk.now{background:#fff;border-radius:18px;box-shadow:0 0 0 1.5px var(--pink),0 6px 18px rgba(0,0,0,.06);padding:12px;margin:4px -12px}
.nowtag{font:700 11px var(--sf);color:var(--pink);letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.nowtag::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--pink);animation:pulse 1.8s ease-out infinite}
.wnow{font:600 13px var(--sf);margin-top:6px}
.mini{display:flex;gap:8px;margin-top:10px}
.mini span{font:600 13px var(--sf);padding:7px 12px;border-radius:999px;background:var(--ink);color:#fff;display:flex;gap:5px;align-items:center}
.mini span.s{background:var(--wash);color:var(--ink)}
.watch{width:236px;height:286px;border-radius:72px;background:#1b1b1d;padding:13px;box-shadow:0 0 0 2px #3a3a3e inset,0 20px 40px -14px rgba(0,0,0,.4);position:relative}
.watch::after{content:"";position:absolute;right:-7px;top:78px;width:9px;height:46px;border-radius:5px;background:#2c2c30}
.wscreen{width:210px;height:260px;border-radius:58px;background:#000;overflow:hidden;color:#fff;position:relative;padding:16px 18px}
.wtime{position:absolute;top:12px;right:22px;font:600 15px var(--sf)}

/* The Day Circle section: labels are HTML so they stay readable on a phone */
.dc{display:grid;grid-template-columns:1fr minmax(0,270px) 1fr;grid-template-rows:1fr 1fr;column-gap:10px;max-width:520px;margin:0 auto}
.dc svg{grid-column:2;grid-row:1/3;width:100%;height:auto;display:block}
.dl{font-size:13px;line-height:1.3;color:var(--mute);padding:26px 0}
.dl b{display:block;font-weight:600;color:var(--ink)}
.dl.tl{grid-column:1;grid-row:1;text-align:right}
.dl.bl{grid-column:1;grid-row:2;text-align:right;align-self:end}
.dl.tr{grid-column:3;grid-row:1}
.dl.br{grid-column:3;grid-row:2;align-self:end}

/* Motion. Timings and easing come from the wireframe: .7s, 90 ms between sections */
@keyframes grow{from{transform:scale(.18);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,80,140,.45)}70%{box-shadow:0 0 0 7px rgba(240,80,140,0)}100%{box-shadow:0 0 0 0 rgba(240,80,140,0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lift{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes tap{0%,86%,100%{scale:1}89%{scale:1.04}92%{scale:.985}95%{scale:1.02}98%{scale:1}}
@keyframes drop{0%{opacity:0;transform:translateY(-280px)}60%{opacity:1;transform:translateY(0)}78%{transform:translateY(-44px)}100%{transform:translateY(0)}}
.grow{animation:grow .7s var(--spring) both;animation-delay:calc(var(--base,0ms) + var(--i,0)*90ms)}
.visual .grow{--base:500ms}
.dc .grow{animation:none}
.js .dc .grow{opacity:0}
.js .dc.in .grow{opacity:1;animation:grow .7s var(--spring) both;animation-delay:calc(var(--i,0)*90ms)}
.home .nav .wordmark circle[fill="#F0508C"]{transform-box:fill-box;transform-origin:center;animation:drop .9s ease-in 150ms both}
.hero-copy>*{animation:rise .7s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:80ms}
.hero-copy>:nth-child(3){animation-delay:160ms}
.hero-copy>:nth-child(4){animation-delay:240ms}
.hero-copy>:nth-child(5){animation-delay:320ms}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.stagger{opacity:1;transform:none;transition:none}
.js .stagger>*{opacity:0;transform:translateY(20px)}
.js .in .stagger>*,.js .in.stagger>*{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms),box-shadow .35s var(--ease)}
.js .stagger>:nth-child(2){--d:120ms}
.js .stagger>:nth-child(3){--d:240ms}
.js .in .stagger>*:hover,.js .in.stagger>*:hover{--d:0ms}
@media (hover:hover){.js .in.stagger>.card:hover{transform:translateY(-4px)}}
.js .privacy li path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--ease) calc(var(--d,0ms) + 300ms)}
.js .privacy.in li path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .reveal,.js .stagger>*,.js .dc .grow{opacity:1;transform:none}
 .js .privacy li path{stroke-dashoffset:0}
}
@media (max-width:820px){
 .hero,.split,.privacy{grid-template-columns:1fr}
 .g3{grid-template-columns:1fr}
 .privacy{padding:32px 24px;border-radius:24px}
 .sec{padding-top:56px;padding-bottom:56px}
 .nav .links .hide{display:none}
 .split{gap:40px}
 .visual{--s:.6;--w:.46;max-width:400px;margin:0 auto;width:100%}
 .dev-watch{bottom:44px}
 .hero{padding-top:16px}
 footer .cols{gap:32px}
}
@media (max-width:560px){
 .dc{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:20px;row-gap:14px}
 .dc svg{grid-column:1/3;grid-row:1;max-width:280px;margin:0 auto}
 .dl{padding:0;text-align:center!important;font-size:14px}
 .dl.tl{grid-column:1;grid-row:2}
 .dl.tr{grid-column:2;grid-row:2}
 .dl.bl{grid-column:1;grid-row:3}
 .dl.br{grid-column:2;grid-row:3}
}
@media (max-width:360px){
 .visual{--s:.54;--w:.42}
 .nav .links{gap:16px}
}