@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --ink:#1B2A41;      /* dusk ink: all text */
  --paper:#FFFFFF;
  --sky:#E3EDF5;      /* daytime band */
  --night:#2C3E5C;    /* sleep window */
  --moss:#2E6B4F;     /* ok / activity */
  --amber:#B86E00;    /* nudge */
  --red:#B3261E;      /* alert */
  --muted:#4A5A70;
  --measure:38rem;
}
*{box-sizing:border-box}
html{font-size:125%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,sans-serif;line-height:1.55}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:4px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
header.site{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;flex-wrap:wrap;gap:.75rem}
.mark{font-weight:700;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.mark svg{width:1.6rem;height:1.6rem}
nav a{margin-left:1.1rem;font-size:.9rem}
h1{font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.08;letter-spacing:-.01em;margin:2.5rem 0 1rem;max-width:16ch}
h2{font-size:1.5rem;line-height:1.2;margin:3rem 0 .75rem}
h3{font-size:1.1rem;margin:1.6rem 0 .3rem}
p,li{max-width:var(--measure)}
.lede{font-size:1.2rem;color:var(--muted);max-width:30rem}
/* The day strip: one 24-hour day, the product in a single picture */
.day{margin:2.75rem 0 1rem}
.strip{position:relative;height:8rem;border-radius:.6rem;overflow:hidden;
  background:linear-gradient(90deg,var(--night) 0 33.3%,var(--sky) 33.3% 91.6%,var(--night) 91.6%)}
.tick{position:absolute;bottom:0;width:4px;height:25%;background:var(--moss);border-radius:2px 2px 0 0}
.flag{position:absolute;top:.55rem;transform:translateX(-50%);font-size:.78rem;font-weight:700;
  padding:.18rem .5rem;border-radius:1rem;color:#fff;white-space:nowrap}
.flag.nudge{background:var(--amber);top:.5rem}
.flag.alert{background:var(--red);top:2.3rem}
.flag.clear{background:var(--moss);top:4.1rem}
.hours{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:.35rem}
.legend{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.legend span{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;vertical-align:-.05rem;margin-right:.3rem}
@media (prefers-reduced-motion:no-preference){
  .tick{animation:rise .5s ease-out both}
  .flag{animation:pop .4s ease-out both}
  .flag.nudge{animation-delay:1.1s}.flag.alert{animation-delay:1.7s}.flag.clear{animation-delay:2.3s}
}
@keyframes rise{from{height:0}}
@keyframes pop{from{opacity:0;transform:translate(-50%,.4rem)}}
ol.steps{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
ol.steps li{border-top:6px solid var(--c);padding-top:.8rem}
ol.steps b{display:block;font-size:1.1rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin:1.75rem 0}
.store{display:inline-flex;align-items:center;min-height:3.6rem;padding:0 1.4rem;border-radius:.6rem;
  background:var(--ink);color:#fff;text-decoration:none;font-weight:700}
.store[aria-disabled=true]{background:var(--muted)}
.nots li{margin:.35rem 0}
.doc h1{font-size:2.2rem;max-width:none}
.doc .updated{color:var(--muted)}
.callout{border-left:6px solid var(--red);padding:.6rem 1rem;background:#FBECEB;max-width:var(--measure)}
footer{margin:4rem 0 2rem;padding-top:1.25rem;border-top:2px solid var(--sky);font-size:.85rem;color:var(--muted)}
footer a{margin-right:1rem}
.legend .li{font-style:normal;white-space:nowrap;margin-right:1rem;display:inline-block}