/* Shape rule: controls, panels and screenshots 6px; tiles 2px; the phone mockup uses device-like radii.
   Archivo, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:"Archivo"; font-style:normal; font-weight:400 800; font-stretch:62% 125%; font-display:swap; src:url("fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo"; font-style:normal; font-weight:400 800; font-stretch:62% 125%; font-display:swap; src:url("fonts/archivo-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#F5F7F8; --surface:#FFFFFF; --ink:#0C3552; --muted:#58707F; --line:#D6DEE3;
  --accent:#1D6FB8; --accent-ink:#FFFFFF; --soft:#E6EFF7;
  --coping:#E6DFD3; --coping-line:#D3C9B8;
  --tile-1:#1D6FB8; --tile-2:#4B93CF; --tile-3:#0F4F8A; --tile-4:#8DBCE3; --grout:#F5F7F8;
  --tile-off:#DCE6EE; --sun:#F2C230;
  --phone:#0C3552; --bubble:#E9EEF2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08202F; --surface:#0D2A3D; --ink:#E3EDF3; --muted:#8FA8B8; --line:#1C3D52;
    --accent:#5EA4E6; --accent-ink:#06223A; --soft:#12354D;
    --coping:#0B2536; --coping-line:#1C3D52;
    --tile-1:#2F7FC6; --tile-2:#5EA4E6; --tile-3:#1B5C99; --tile-4:#8DBCE3; --grout:#0B2536;
    --tile-off:#143348; --phone:#02111B; --bubble:#1A3A50;
  }
}
:root[data-theme="dark"]{
  --bg:#08202F; --surface:#0D2A3D; --ink:#E3EDF3; --muted:#8FA8B8; --line:#1C3D52;
  --accent:#5EA4E6; --accent-ink:#06223A; --soft:#12354D;
  --coping:#0B2536; --coping-line:#1C3D52;
  --tile-1:#2F7FC6; --tile-2:#5EA4E6; --tile-3:#1B5C99; --tile-4:#8DBCE3; --grout:#0B2536;
  --tile-off:#143348; --phone:#02111B; --bubble:#1A3A50;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 "Archivo", system-ui, sans-serif}
h1,h2,h3{margin:0; line-height:1.05}
a{color:var(--accent); text-underline-offset:2px}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

.tileband{height:22px; background-color:var(--grout);
  background-image:
    repeating-linear-gradient(90deg, var(--tile-1) 0 9px, transparent 9px 11px, var(--tile-2) 11px 20px, transparent 20px 22px, var(--tile-3) 22px 31px, transparent 31px 33px),
    repeating-linear-gradient(90deg, var(--tile-2) 0 9px, transparent 9px 11px, var(--tile-1) 11px 20px, transparent 20px 22px, var(--tile-4) 22px 31px, transparent 31px 33px, var(--tile-3) 33px 42px, transparent 42px 44px);
  background-size:100% 9px, 100% 9px; background-position:0 1px, 5px 12px; background-repeat:no-repeat}
.mark{width:22px; height:22px; flex:none; background:
  linear-gradient(var(--tile-1),var(--tile-1)) 0 0/10px 10px no-repeat,
  linear-gradient(var(--tile-4),var(--tile-4)) 12px 0/10px 10px no-repeat,
  linear-gradient(var(--tile-3),var(--tile-3)) 0 12px/10px 10px no-repeat,
  linear-gradient(var(--tile-2),var(--tile-2)) 12px 12px/10px 10px no-repeat}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:11px 20px; border-radius:6px; font-weight:700; text-decoration:none; border:1px solid var(--line); color:var(--ink); background:var(--surface); white-space:nowrap}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink))}
.btn.quiet{border-color:transparent; background:none; font-weight:600}

/* header */
.top{background:var(--coping); border-bottom:1px solid var(--coping-line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; padding-bottom:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-stretch:115%; font-size:1.15rem; text-decoration:none; color:var(--ink)}
.bar nav{display:flex; gap:6px; align-items:center}

/* hero */
.hero{background:var(--coping); padding:56px 0 0}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start}
.hero h1{font-size:clamp(2.4rem, 4.6vw, 3.6rem); font-weight:800; font-stretch:122%; letter-spacing:-0.025em; max-width:17ch}
.lede{font-size:1.2rem; line-height:1.55; max-width:48ch; margin:22px 0 28px}
.hero .actions{display:flex; gap:10px; flex-wrap:wrap}

/* phone showing the selected reminder */
.phone{background:var(--phone); border-radius:34px; padding:12px; box-shadow:0 24px 50px color-mix(in srgb, var(--ink) 22%, transparent)}
.screen{background:var(--surface); border-radius:24px; min-height:330px; display:flex; flex-direction:column; overflow:hidden}
.screen .from{text-align:center; padding:16px 12px 10px; border-bottom:1px solid var(--line); font-weight:700; font-size:.95rem}
.screen .from small{display:block; font-weight:400; color:var(--muted); font-size:.78rem}
.thread{padding:16px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.stamp{align-self:center; font-size:.75rem; color:var(--muted); margin-bottom:4px}
.bubble{background:var(--bubble); border-radius:18px 18px 18px 5px; padding:10px 14px; font-size:.95rem; line-height:1.45; max-width:92%; overflow-wrap:anywhere}
.bubble a{pointer-events:none}
.mail{border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:.92rem; line-height:1.5; white-space:pre-line}
.mail b{display:block; margin-bottom:6px}
.via{font-size:.78rem; color:var(--muted); margin-top:auto; padding-top:10px}
.thread.swap{animation:swap .25s ease-out}
@keyframes swap{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* the year: one tile per week after the build */
.year{padding-top:48px; padding-bottom:56px}
.year h2{font-size:1.25rem; font-weight:700; font-stretch:112%}
.year .hint{color:var(--muted); margin:6px 0 18px}
.tiles{display:grid; grid-template-columns:repeat(53, minmax(0,1fr)); gap:3px; padding:3px; background:var(--grout); border:1px solid var(--coping-line)}
.tiles > *{aspect-ratio:1; border-radius:2px; background:var(--tile-off); border:0; padding:0; margin:0}
.tiles button{background:var(--tile-1); cursor:pointer}
.tiles button:hover{background:var(--tile-3)}
.tiles button[aria-pressed="true"]{background:var(--sun); outline:2px solid var(--ink); outline-offset:1px}
.months{display:grid; grid-template-columns:repeat(53, minmax(0,1fr)); font-size:.78rem; color:var(--muted); margin-top:6px}
.months span{white-space:nowrap}
.steps{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:4px 20px}
.steps button{all:unset; box-sizing:border-box; display:grid; grid-template-columns:4.6rem 1fr; gap:10px; width:100%; padding:8px 10px; border-radius:6px; cursor:pointer}
.steps button:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.steps button:focus-visible{outline:3px solid var(--accent)}
.steps button[aria-pressed="true"]{background:var(--surface); box-shadow:inset 4px 0 0 var(--sun)}
.steps .when{font-weight:700; font-stretch:112%; font-variant-numeric:tabular-nums}
.steps .what small{display:block; color:var(--muted); font-size:.82rem}

/* how it works: a real sequence, so it's numbered */
section.how{padding:72px 0}
.how h2,.faq h2,.end h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:800; font-stretch:118%; letter-spacing:-0.015em; max-width:20ch}
/* how it works: a real screenshot beside the three steps; each step marked with a brand tile */
.how-grid{display:grid; grid-template-columns:300px minmax(0,1fr); gap:64px; align-items:center}
.shot{margin:0}
.shot img{display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--line); box-shadow:0 18px 40px color-mix(in srgb, var(--ink) 14%, transparent)}
.shot figcaption{margin-top:12px; font-size:.9rem; color:var(--muted)}
.how ol{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:24px}
.how li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:16px}
.how li::before{content:""; grid-row:span 2; width:18px; height:18px; margin-top:4px; border-radius:2px; background:var(--tile-1)}
.how li:nth-child(2)::before{background:var(--tile-2)}
.how li:nth-child(3)::before{background:var(--tile-3)}
.how h3{font-size:1.15rem; font-weight:700; margin-bottom:6px}
.how p{margin:0; color:var(--muted); max-width:52ch}

.faq{padding:8px 0 72px}
.faq dl{margin:30px 0 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); max-width:980px}
.faq dt{font-weight:700; padding:18px 24px 18px 0; border-top:1px solid var(--line)}
.faq dd{margin:0; padding:18px 0; border-top:1px solid var(--line); color:var(--muted); max-width:62ch}

.end{background:var(--coping); border-top:1px solid var(--coping-line)}
.end .wrap{padding-top:64px; padding-bottom:64px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.end p{margin:12px 0 0; color:var(--muted); max-width:46ch}
/* top bar section links: plain text, desktop only */
.jump{display:flex; gap:22px; margin-right:14px}
@media (max-width:1040px){.jump{display:none}}
.jump a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem}
.jump a:hover{color:var(--accent)}
#how,#pricing,#faq{scroll-margin-top:16px}

/* dashboard: text left, screenshot right (how-it-works runs the other way) */
section.desk{padding:24px 0 80px}
.desk h2,.pricing h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:800; font-stretch:118%; letter-spacing:-0.015em; max-width:20ch}
.desk-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center}
.desk p{color:var(--muted); max-width:48ch; margin:14px 0 0}
.ticks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.ticks li{display:grid; grid-template-columns:12px minmax(0,1fr); gap:12px; align-items:baseline}
.ticks li::before{content:""; width:10px; height:10px; border-radius:2px; background:var(--tile-2)}

/* trust: four plain facts in a ruled row */
.trust{padding:72px 0; border-top:1px solid var(--line)}
.trust h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:800; font-stretch:118%; letter-spacing:-0.015em; max-width:20ch}
.trust .sub{color:var(--muted); max-width:56ch; margin:12px 0 0}
.trust-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 32px; margin-top:32px}
.trust-grid div{border-top:3px solid var(--tile-1); padding-top:16px}
.trust-grid div:nth-child(2){border-color:var(--tile-2)}
.trust-grid div:nth-child(3){border-color:var(--tile-3)}
.trust-grid div:nth-child(4){border-color:var(--tile-4)}
.trust h3{font-size:1.05rem; font-weight:700}
.trust-grid p{color:var(--muted); margin:8px 0 0; font-size:.95rem}
.trust-grid a{color:var(--accent)}

/* pricing: three plans side by side, divided by rules rather than boxed as cards */
.pricing{padding:72px 0; border-top:1px solid var(--line)}
.pricing .free{margin:16px 0 0; max-width:60ch; padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sun); border-radius:6px}
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:36px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.plan{padding:26px 28px}
.plan + .plan{border-left:1px solid var(--line)}
.plan:first-child{padding-left:0}
.plan h3{font-size:1.15rem; font-weight:700}
.plan .price{margin:10px 0 6px; color:var(--muted)}
.plan .price b{font-size:2.4rem; font-weight:800; font-stretch:118%; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.02em}
.plan p{margin:0}
.includes{margin:32px 0 0}
.includes h3{font-size:1.05rem; font-weight:700}
.includes .ticks{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 32px; max-width:860px; margin-top:14px}
.pricing .note{color:var(--muted); font-size:.92rem; margin:22px 0 24px}
.end a:not(.btn),.faq dd a{color:var(--accent)}

footer{padding:22px 0 40px; color:var(--muted); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (max-width:860px){
  .hero{padding-top:36px}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .phone{max-width:340px}
  .tiles,.months{grid-template-columns:repeat(18, minmax(0,1fr))}
  .months{display:none}
  .how-grid{grid-template-columns:1fr; gap:36px}
  .shot{max-width:280px; order:2}
  .faq dl{grid-template-columns:1fr}
  .faq dd{border-top:0; padding-top:0}
  .bar nav .btn.primary{display:none}
  .jump{display:none}
  .desk-grid{grid-template-columns:1fr; gap:32px}
  .plans{grid-template-columns:1fr}
  .plan,.plan:first-child{padding:20px 0}
  .plan + .plan{border-left:0; border-top:1px solid var(--line)}
  .includes .ticks{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 24px}
  .shot.wide{max-width:none; order:0}
  .wrap{padding:0 16px}
  .year{padding-top:40px}
}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.thread.swap{animation:none}}

/* policy pages: a single readable column */
.doc{padding:48px 0 72px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(2rem, 5vw, 3rem); font-weight:800; font-stretch:120%; letter-spacing:-0.02em}
.doc .updated{color:var(--muted); margin:10px 0 32px}
.doc h2{font-size:1.25rem; font-weight:700; font-stretch:112%; margin:36px 0 10px}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:1.2em}
.doc li{margin:4px 0}
.consent{background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:6px; padding:16px 18px; margin:14px 0}
.keywords{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:14px 0}
.keywords b{font-stretch:112%}
footer nav{display:flex; gap:18px; flex-wrap:wrap}
.consent p{margin:0 0 10px}
.consent p:last-child{margin-bottom:0}

/* Web Interface Guidelines: native controls and scrollbars follow the theme, headings avoid one-word last lines,
   taps respond without the double-tap zoom delay, and a skip link appears on keyboard focus. */
:root{color-scheme:light dark}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
h1,h2,h3{text-wrap:balance}
a,button,summary,select,input[type=checkbox],label{touch-action:manipulation}
a,button,summary{-webkit-tap-highlight-color:color-mix(in srgb, var(--accent) 18%, transparent)}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:6px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
#year{scroll-margin-top:16px}