@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');
:root { --paper:#fbf7ef; --deep:#efe8db; --ink:#203738; --muted:#667069; --blue:#416775; --coral:#d84b38; --line:rgba(32,55,56,.18); --serif:"Newsreader",Georgia,serif; --sans:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif; --mono:"DM Mono",ui-monospace,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); }
a { color:inherit; }
img { display:block; max-width:100%; }
.skip-link { position:fixed; z-index:100; left:1rem; top:-5rem; padding:.75rem 1rem; background:var(--ink); color:white; }
.skip-link:focus { top:1rem; }
.brand { display:inline-flex; align-items:center; gap:10px; width:fit-content; color:inherit; text-decoration:none; font-family:var(--serif); font-size:1.45rem; }
.brand img { border-radius:9px; }
header { position:absolute; z-index:10; inset:0 0 auto; height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(20px,4vw,64px); }
header nav, footer nav { display:flex; gap:2rem; font-size:.82rem; }
header nav a, footer nav a { text-decoration:none; }
.status, em, .promise b { width:fit-content; border:1px solid var(--coral); color:#b33727; padding:5px 7px; font-family:var(--mono); font-size:.58rem; font-style:normal; font-weight:500; letter-spacing:.09em; line-height:1; text-transform:uppercase; }
.status { justify-self:end; }
.eyebrow { margin:0 0 20px; color:var(--blue); font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; line-height:1.4; text-transform:uppercase; }
h1,h2 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.045em; line-height:.96; }
.hero { min-height:100vh; display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:clamp(40px,7vw,120px); padding:140px max(24px,calc((100vw - 1300px)/2)) 100px; background:radial-gradient(circle at 78% 45%,rgba(164,173,147,.23),transparent 32%),var(--paper); }
.hero h1 { max-width:760px; font-size:clamp(4.3rem,7vw,8rem); }
.lead { max-width:600px; margin:30px 0 0; color:var(--muted); font-size:clamp(1.05rem,1.45vw,1.3rem); line-height:1.65; }
.actions { display:flex; align-items:center; gap:24px; margin-top:34px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:0 22px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); text-decoration:none; font-size:.88rem; font-weight:600; }
.text-link { font-size:.86rem; font-weight:600; text-underline-offset:5px; }
.consent { margin-top:32px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-family:var(--serif); font-size:1.1rem; }
.watch-preview { min-height:620px; display:grid; place-items:center; align-content:center; }
.strap { width:190px; height:145px; background:repeating-linear-gradient(90deg,#1a211f 0 4px,#252d2b 4px 8px); border-inline:1px solid #0d1110; }
.strap.top { border-radius:55px 55px 12px 12px; }
.strap.bottom { border-radius:12px 12px 55px 55px; }
.device { position:relative; z-index:2; width:min(350px,70vw); aspect-ratio:.82; margin-block:-22px; padding:14px; border-radius:31% / 25%; background:#222a28; box-shadow:0 55px 100px rgba(32,55,56,.25),inset 0 0 0 2px #4a5552; }
.crown { position:absolute; right:-23px; top:26%; width:17px; height:62px; border-radius:0 10px 10px 0; background:#2b3432; }
.watch-app-capture { width:100%; height:100%; border-radius:29% / 23%; object-fit:cover; }
.screen { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:29% / 23%; background:#050707; color:white; }
.wave { color:var(--coral); font-family:var(--serif); font-size:2.6rem; line-height:.7; }
.screen small { margin-top:24px; }
.screen strong { margin-top:8px; font-family:var(--serif); font-size:clamp(3rem,5vw,4.8rem); font-weight:400; letter-spacing:-.05em; }
.stop { display:grid; place-items:center; width:72px; height:72px; margin-top:26px; border-radius:50%; background:var(--coral); }
.stop i { width:22px; height:22px; border-radius:3px; background:white; }
.screen em { margin-top:14px; border:0; color:#d7ddda; }
.promise { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto; align-items:center; gap:24px; padding:28px max(24px,calc((100vw - 1240px)/2)); background:var(--ink); color:var(--paper); }
.promise p { margin:0; text-align:center; font-family:var(--serif); font-size:1.18rem; }
.promise b { color:#ffb2a7; }
.section { padding:150px max(24px,calc((100vw - 1240px)/2)); }
.section-heading,.states,.questions,.cta { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,120px); }
.section h2,.cta h2 { font-size:clamp(3.7rem,6vw,7rem); }
.section-heading>p,.states>div>p:not(.eyebrow),.cta p { color:var(--muted); line-height:1.72; }
.feature-list { margin-top:100px; border-top:1px solid var(--line); }
.feature-list article { display:grid; grid-template-columns:.25fr 1fr; padding:38px 0; border-bottom:1px solid var(--line); }
.feature-list article>div { display:grid; grid-template-columns:1fr 1.3fr; gap:10px 60px; }
.feature-list em { grid-column:1/-1; }
.feature-list h3 { margin:8px 0 0; font-family:var(--serif); font-size:clamp(2rem,3vw,3.4rem); font-weight:400; }
.feature-list p,.state-list p,.steps p { margin:10px 0 0; color:var(--muted); line-height:1.65; }
.states { background:var(--deep); border-block:1px solid var(--line); }
.state-list { border-top:1px solid var(--line); }
.state-list article { display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); }
.state-list b { font-family:var(--serif); font-size:1.55rem; font-weight:500; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); margin:88px 0 0; padding:0; border-block:1px solid var(--line); list-style:none; }
.steps li { display:grid; grid-template-columns:34px 1fr; gap:16px; min-height:280px; padding:30px 24px; border-right:1px solid var(--line); }
.steps li:last-child { border-right:0; }
.steps h3 { margin:16px 0 10px; font-family:var(--serif); font-size:1.7rem; font-weight:400; }
.reliability { max-width:900px; margin:44px 0 0 auto; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); line-height:1.65; }
.questions>div:last-child { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { display:flex; justify-content:space-between; padding:24px 0; cursor:pointer; font-family:var(--serif); font-size:1.42rem; list-style:none; }
summary::after { content:"+"; }
details[open] summary::after { content:"−"; }
details p { margin:0 45px 26px 0; color:var(--muted); line-height:1.65; }
details em { display:inline-flex; margin-right:7px; }
.cta { align-items:end; min-height:620px; padding:120px max(24px,calc((100vw - 1240px)/2)); background:var(--ink); color:var(--paper); }
.cta .eyebrow { color:#b8ced5; }
.cta p { color:#bdc8c1; }
.cta .button { background:var(--paper); color:var(--ink); }
footer { min-height:120px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:24px max(24px,calc((100vw - 1240px)/2)); background:#142525; color:var(--paper); font-size:.75rem; }
footer nav { justify-self:end; }
@media (max-width:900px) { header { grid-template-columns:1fr auto; } header nav { display:none; } .hero,.section-heading,.states,.questions,.cta { grid-template-columns:1fr; } .feature-list article>div { grid-template-columns:1fr; } .steps { grid-template-columns:1fr 1fr; } footer { grid-template-columns:1fr; justify-items:start; padding-block:40px; } footer nav { justify-self:start; flex-wrap:wrap; } }
@media (max-width:600px) { .hero { gap:20px; padding:120px 20px 70px; } .hero h1 { font-size:clamp(3.7rem,16vw,5.3rem); } .actions { align-items:flex-start; flex-direction:column; } .watch-preview { min-height:540px; } .strap { width:150px; height:115px; } .promise { grid-template-columns:1fr; justify-items:center; } .promise>span { transform:rotate(90deg); } .section { padding-block:90px; } .feature-list article { grid-template-columns:38px 1fr; } .state-list article { grid-template-columns:34px 1fr; } .state-list article em { grid-column:2; } .steps { grid-template-columns:1fr; margin-top:56px; } .steps li { min-height:0; padding:28px 0; border-right:0; border-bottom:1px solid var(--line); } .cta { padding-block:90px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }