/* Night teal is the brand. Canary yellow appears only in the bird and on the alert screen. */
:root{--page:#F3F6F6;--surf:#FFFFFF;--text:#0E1517;--sub:#4A5B5E;--line:#D5E1E1;--accent:#0F6E66;--bird:#0F3B38;--canary:#F5C842;--onCanary:#1E1700;--onCanarySub:#4A3B00;--late:#C2452A;--device:#0B0F10;--appBg:#0E1517;--appSurf:#172226;--appText:#E4ECEC;--appSub:#9DB0B2;--appAccent:#56C2B6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--page:#0E1517;--surf:#172226;--text:#E4ECEC;--sub:#9DB0B2;--line:#26353A;--accent:#56C2B6;--bird:#F5C842;--late:#F08A6E;--device:#05090A}}
:root[data-theme="dark"]{--page:#0E1517;--surf:#172226;--text:#E4ECEC;--sub:#9DB0B2;--line:#26353A;--accent:#56C2B6;--bird:#F5C842;--late:#F08A6E;--device:#05090A}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:18px/1.55 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,.wm{font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
/* Language: Spanish by default; the toggle switches to English. Without JS, Spanish shows. */
html[data-lang="en"] .es,html:not([data-lang="en"]) .en{display:none}
.sprite{position:absolute}

header{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--bird);text-decoration:none}
.brand svg{width:40px;height:40px}
.wm{font-size:24px;font-weight:800;color:var(--text)}
.lang{font:600 15px/1 -apple-system,system-ui;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;min-height:44px}
.lang:hover{background:var(--surf)}
.lang:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Hero: the claim on the left, the real alert screen on the right. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center;padding:48px 0 88px}
.hero h1{font-size:64px;font-weight:800;max-width:560px}
.hero .lead{font-size:21px;color:var(--sub);margin:24px 0 32px;max-width:500px}
.soon{font-weight:700;font-size:17px}
.proofline{font-size:15px;color:var(--sub);margin-top:6px}

/* Feature rows: one big phone and two short lines each, alternating sides. */
.feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:72px;align-items:center;padding:72px 0;border-top:1px solid var(--line)}
.feature:nth-of-type(even) .device{order:2}
.feature h2{font-size:44px;font-weight:800;max-width:460px}
.feature h2+p{font-size:20px;color:var(--sub);margin-top:18px;max-width:440px}

/* Proof: one sentence, big, nothing around it. */
.proof{padding:96px 0;border-top:1px solid var(--line)}
.proof p{font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;font-size:48px;font-weight:800;line-height:1.1;max-width:820px}
.proof .date{display:block;font-size:20px;font-weight:600;color:var(--sub);margin-top:16px;font-family:-apple-system,system-ui,sans-serif}

.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding:72px 0;border-top:1px solid var(--line)}
.how h2{font-size:32px;font-weight:800}
.how p{color:var(--sub);margin-bottom:14px;max-width:480px}
.how p strong{color:var(--text)}

.quiet{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;padding:40px 0;border-top:1px solid var(--line);font-size:15px;color:var(--sub)}
.quiet h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 8px}
.quiet p{margin:0 0 10px;max-width:620px}
footer{border-top:1px solid var(--line);padding:28px 0 48px;font-size:15px;color:var(--sub);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* The phone: an iPhone drawn in CSS, so every screen is the real app state at real proportions. */
.device{width:300px;aspect-ratio:300/630;border-radius:52px;background:var(--device);padding:11px;box-shadow:0 30px 60px -30px rgba(6,20,22,.45)}
.scr{position:relative;height:100%;border-radius:42px;overflow:hidden;background:var(--appBg);color:var(--appText);display:flex;flex-direction:column;padding:54px 20px 22px;font-size:14px;line-height:1.35}
.island{position:absolute;top:11px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:16px;background:#000}
.sb{position:absolute;top:15px;left:30px;right:26px;display:flex;justify-content:space-between;font:600 14px/1 -apple-system,system-ui}
.sb svg{width:44px;height:12px}
.scr h4{font-family:ui-rounded,"SF Pro Rounded",system-ui;font-size:26px;font-weight:800;line-height:1.1;margin:10px 0 0}
.sp{flex:1}
.b{border-radius:14px;text-align:center;font-weight:600;font-size:15px;padding:14px;margin-top:8px}

.s-alert{background:var(--canary);color:var(--onCanary)}
.s-alert .top{display:flex;justify-content:space-between;align-items:center;font-family:ui-rounded,"SF Pro Rounded",system-ui;font-weight:800;font-size:16px;margin-top:8px}
.s-alert .m{background:var(--onCanary);color:var(--canary);border-radius:8px;padding:3px 9px;font-size:15px}
.s-alert .pict{width:100%;aspect-ratio:64/48;height:auto;margin:30px 0 18px;display:block}
.s-alert .meta{color:var(--onCanarySub);font-size:14px}
.s-alert .b{background:var(--onCanary);color:var(--canary)}
.s-alert .b.out{background:transparent;color:var(--onCanary);border:2px solid var(--onCanary)}

.s-cov .app{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-top:6px;color:var(--appText)}
.s-cov .app svg{width:26px;height:26px;color:var(--canary)}
.s-cov .state{background:var(--appSurf);border-radius:18px;padding:18px;margin-top:18px}
.s-cov .ok{display:flex;align-items:center;gap:8px;color:var(--appAccent);font-weight:700;font-size:15px}
.s-cov .ok svg{width:20px;height:20px}
.s-cov .zone{font-family:ui-rounded,"SF Pro Rounded",system-ui;font-size:30px;font-weight:800;margin:8px 0 4px}
.s-cov .note{color:var(--appSub);font-size:13px}
.s-cov .row{display:flex;justify-content:space-between;padding:14px 2px;border-bottom:1px solid #26353A;font-size:15px}
.s-cov .row span:last-child{color:var(--appSub)}
.s-cov .b{background:transparent;border:1px solid #3A474B;color:var(--appText)}

.s-late .tag{color:#F08A6E;font-weight:700;font-size:16px;margin-top:26px}
.s-late .b.pri{background:var(--appAccent);color:#062421}
.s-late .b.sec{border:1px solid #3A474B}
.s-late .meta{color:var(--appSub);margin-top:12px}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding:24px 0 64px}
  .hero h1{font-size:44px}
  .hero .device{margin:0 auto}
  .feature{grid-template-columns:minmax(0,1fr);gap:36px;padding:56px 0}
  .feature .device,.feature:nth-of-type(even) .device{order:2;margin:0 auto}
  .feature h2{font-size:34px}
  .proof{padding:64px 0}
  .proof p{font-size:34px}
  .how,.quiet{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:360px){.device{width:272px}}

/* Lock screen in the hero: the notification as it arrives. */
.s-lock{background:#16262A;align-items:center;text-align:center}
.s-lock .date{font-weight:600;font-size:15px;margin-top:22px;color:#D5E1E1}
.s-lock .clock{font:200 76px/1 -apple-system,system-ui;letter-spacing:-.02em;margin-top:2px}
.s-lock .notif{display:flex;gap:10px;text-align:left;width:100%;background:rgba(228,236,236,.16);border-radius:20px;padding:12px;margin-top:34px;font-size:14px}
.s-lock .ic{flex:none;width:36px;height:36px;border-radius:9px;background:#123A3A;color:var(--canary);display:flex;align-items:center;justify-content:center}
.s-lock .ic svg{width:26px;height:26px}
.s-lock .notif>div{flex:1}
.s-lock .nt{display:flex;justify-content:space-between}
.s-lock .nt span{color:#B9C8CA;font-size:13px}
.s-lock .lockbar{display:flex;justify-content:space-between;width:100%;padding:0 18px}
.s-lock .lockbar span{width:44px;height:44px;border-radius:50%;background:rgba(228,236,236,.16)}
.device{box-shadow:0 0 0 1px rgba(127,150,154,.28),0 30px 60px -30px rgba(6,20,22,.45)}

/* The film: the 16:9 cut on wide screens, the 9:16 cut on phones. */
.film{padding:72px 0;border-top:1px solid var(--line)}
.film h2{font-size:32px;font-weight:800;margin-bottom:24px}
.film video{display:block;width:100%;border-radius:20px;background:#0E1517}
.film-v{display:none!important;max-width:420px;margin:0 auto}
.film p{font-size:15px;color:var(--sub);margin-top:14px;max-width:720px}
@media (max-width:860px){.film-h{display:none!important}.film-v{display:block!important}}

/* Fuller screens */
.s-alert .pict{margin:44px 0 30px}
.s-alert .when{font-family:var(--display);font-size:24px;font-weight:800;line-height:1.1}
.s-alert .meta{font-size:15px;margin-top:4px}
.s-lock .notif.old{margin-top:8px}
.s-late .facts{margin-top:22px;border-top:1px solid #26353A}
.s-late .row,.s-cov .row{display:flex;justify-content:space-between;padding:13px 2px;border-bottom:1px solid #26353A;font-size:15px}
.s-late .row span:last-child{color:var(--appSub)}

/* Type: Bricolage Grotesque (OFL, self-hosted) for display, the system face for reading. */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{--display:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif}
h1,h2,h3,h4,.wm,.proof p,.s-alert .top,.s-cov .zone,.scr h4{font-family:var(--display)!important}
.hero h1{letter-spacing:-.025em}
.feature h2,.proof p{letter-spacing:-.02em}

/* Load motion: the hero eases in once. Nothing loops; off with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .hero>div:first-child>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero>div:first-child>*:nth-child(2){animation-delay:.08s}
  .hero>div:first-child>*:nth-child(3){animation-delay:.16s}
  .hero>div:first-child>*:nth-child(4){animation-delay:.2s}
  .hero .device{animation:rise 1s cubic-bezier(.2,.7,.2,1) .15s both}
  .hero .notif{animation:drop .6s cubic-bezier(.2,.7,.2,1) .9s both}
  .hero .notif.old{animation-delay:.75s}
  #bird path{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.2s ease-out .1s forwards}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* v3: benefits first; one light fine-print block at the very bottom */
.pictorow .bigpict{width:300px;aspect-ratio:1;border-radius:52px;background:var(--canary);color:var(--onCanary);display:flex;align-items:center;justify-content:center;padding:34px}
.pictorow .bigpict svg{width:100%;height:auto}

.cta{padding:88px 0;border-top:1px solid var(--line)}
.cta p:first-child{font-family:var(--display);font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.02em;max-width:760px;margin-bottom:18px}
.fine{padding:28px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--sub)}
.fine p{max-width:880px;margin-bottom:8px}
@media (max-width:860px){.pictorow .bigpict{margin:0 auto;width:260px}.cta{padding:64px 0}.cta p:first-child{font-size:30px}}
.hero .claim{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-top:18px;max-width:520px}
.hero .claim+.lead{margin-top:14px}
@media (prefers-reduced-motion:no-preference){.hero>div:first-child>*:nth-child(5){animation-delay:.24s}}
@media (max-width:860px){.hero .claim{font-size:23px}}
a.lang{display:inline-flex;align-items:center;text-decoration:none}