@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap");

:root{
  --paper:#f5f7f8; --panel:#ffffff; --ink:#14202b; --mute:#566573; --line:#d9e0e4;
  --scrub:#2e6b5e; --scrub-ink:#ffffff; --honey:#e8a317; --honey-soft:#fcefcf; --honey-ink:#5a3d00;
  --held:#fff5e0; --focus:#1f5fbf;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0f171d; --panel:#16212a; --ink:#e7edf1; --mute:#9aabb8; --line:#27343f;
  --scrub:#5fb39f; --scrub-ink:#07140f; --honey:#f0b43c; --honey-soft:#3a2b0c; --honey-ink:#ffd98a;
  --held:#2a2210; --focus:#8ab4ff;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--body)}
a{color:var(--scrub);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;color:var(--ink);font:800 21px/1 var(--display);letter-spacing:-.01em}
.brand svg{width:26px;height:26px;flex:none}
.top nav{display:flex;gap:22px;flex-wrap:wrap}
.top nav a{color:var(--mute);text-decoration:none;font-weight:700;font-size:16px}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:48px 0 88px}
.hero h1{font:800 clamp(38px,5vw,62px)/1.05 var(--display);letter-spacing:-.012em;margin:0 0 22px;font-variation-settings:"opsz" 96}
.hero .lede{font-size:20px;color:var(--mute);max-width:34em;margin:0 0 30px}
.cta{display:inline-block;background:var(--scrub);color:var(--scrub-ink);font:700 18px/1 var(--body);padding:16px 24px;border-radius:12px;text-decoration:none}
.cta:hover{filter:brightness(1.08)}
.fine{margin:14px 0 0;color:var(--mute);font-size:15px}

/* the product, working */
.demo{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(20,32,43,.35);overflow:hidden}
.demo-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;color:var(--mute)}
.demo-bar b{color:var(--ink)}
.mail{padding:20px 22px 8px;font-size:16px}
.mail .subj{font:700 18px/1.3 var(--display);margin:0 0 12px}
.mail p{margin:0 0 12px}
.lines{margin:0 0 12px;padding:0;list-style:none}
.lines li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px dashed var(--line)}
.lines li:last-child{border-bottom:1px dashed var(--line)}
.fact{display:inline-block;border-radius:6px;padding:0 6px;font-variant-numeric:tabular-nums;font-weight:700;background:var(--honey-soft);color:var(--honey-ink);white-space:nowrap}
.fact .ph{color:var(--mute);font-weight:400;font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.fact .val{display:none}
.demo.filled .fact .ph{display:none}
.demo.filled .fact .val{display:inline}
.legend{display:flex;align-items:center;gap:8px;padding:0 22px 16px;font-size:14px;color:var(--mute)}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--honey);display:inline-block}
.actions{display:flex;gap:10px;padding:14px 22px;border-top:1px solid var(--line)}
.actions span{font:700 15px/1 var(--body);padding:10px 14px;border-radius:9px;border:1px solid var(--line)}
.actions .go{background:var(--scrub);color:var(--scrub-ink);border-color:var(--scrub)}
.reply{margin:0 22px;padding:0 16px;max-height:0;overflow:hidden;border-radius:12px;background:var(--held);border:1px solid transparent;font-size:15.5px;opacity:0}
.reply b{display:block;margin-bottom:4px}
.reply .tag{display:inline-block;margin-top:8px;font-weight:700;font-size:14px;color:var(--honey-ink)}
.demo.replied .reply{opacity:1;max-height:220px;padding:14px 16px;margin:0 22px 20px;border-color:var(--line);transition:opacity .5s ease,max-height .5s ease,padding .5s ease,margin .5s ease}
@media (prefers-reduced-motion:reduce){.demo.replied .reply{transition:none}}

/* the hive: big honeycomb behind the product, bees delivering reminders */
.stage{position:relative;padding:150px 0 30px}
.comb{position:absolute;z-index:0;width:150%;max-width:860px;right:-40%;top:-14%;pointer-events:none}
.comb .c-full{fill:var(--honey);stroke:#b97d06;stroke-width:3}
.comb .c-cap{fill:#f7d27a;stroke:#b97d06;stroke-width:3}
.comb .c-empty{fill:var(--honey-soft);stroke:#d99a17;stroke-width:3}
.comb .c-shine{fill:none;stroke:#fff3cf;stroke-width:3;stroke-linecap:round;opacity:.8}
@media (prefers-color-scheme:dark){
  .comb .c-full{fill:#c98c12;stroke:#7a5300}.comb .c-cap{fill:#a8791a;stroke:#7a5300}
  .comb .c-empty{fill:#2c2410;stroke:#6d4c09}.comb .c-shine{stroke:#f5d58a;opacity:.5}}
.stage .demo{position:relative;z-index:1;margin-right:14%}
.swarm{position:absolute;inset:0;z-index:2;pointer-events:none}
.bee{position:absolute;width:62px;overflow:visible;filter:drop-shadow(0 6px 6px rgba(20,32,43,.25))}
.b1{top:-4%;left:-12%;width:70px;animation:fly1 9s ease-in-out infinite}
.b2{top:14%;right:-6%;width:50px;animation:fly2 7s ease-in-out infinite}
.b3{bottom:6%;right:-10%;width:66px;animation:fly3 11s ease-in-out infinite}
.b4{bottom:-4%;left:8%;width:44px;animation:fly2 8.5s ease-in-out infinite reverse}
.b5{top:40%;left:-9%;width:40px;animation:fly1 10s ease-in-out infinite reverse}
@keyframes fly1{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(38px,-18px) rotate(6deg)}50%{transform:translate(70px,6px) rotate(-2deg)}75%{transform:translate(30px,22px) rotate(4deg)}}
@keyframes fly2{0%,100%{transform:translate(0,0) scaleX(-1)}30%{transform:translate(-40px,20px) scaleX(-1) rotate(-6deg)}60%{transform:translate(-18px,-24px) scaleX(-1) rotate(5deg)}}
@keyframes fly3{0%,100%{transform:translate(0,0) scaleX(-1) rotate(3deg)}40%{transform:translate(-56px,-30px) scaleX(-1) rotate(-5deg)}70%{transform:translate(-20px,-8px) scaleX(-1)}}
@media (prefers-reduced-motion:reduce){.bee{animation:none}}

/* how it works: a real sequence */
section h2{font:800 clamp(28px,3.4vw,40px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 28px}
.how{padding:0 0 88px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.how li{counter-increment:s;border-top:3px solid var(--ink);padding-top:16px}
.how li::before{content:counter(s);font:800 44px/1 var(--display);color:var(--scrub);display:block;margin-bottom:12px}
.how h3{font:700 20px/1.25 var(--display);margin:0 0 8px}
.how p{margin:0;color:var(--mute);font-size:16.5px}

/* guardrails: two columns of plain statements */
.rails{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding:56px 0 88px;border-top:1px solid var(--line)}
.rails h2{margin:0}
.rails dl{margin:0}
.rails dt{font:700 20px/1.3 var(--display);margin:0 0 4px}
.rails dd{margin:0 0 24px;color:var(--mute)}

/* who it is for */
.for{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:44px;margin:0 0 88px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.for h2{margin:0 0 10px}
.for p{margin:0;color:var(--mute);max-width:40em}

/* documents (privacy, terms, connect) */
.doc{padding-top:32px;padding-bottom:72px;max-width:44em}
.doc h1{font:800 clamp(32px,4vw,44px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.doc .meta{color:var(--mute);font-size:15px;margin-bottom:30px}
.doc h2{font:700 23px/1.3 var(--display);margin:34px 0 8px}
.doc li{margin:5px 0}

footer{border-top:1px solid var(--line);color:var(--mute);font-size:15px}
footer .wrap{display:flex;gap:22px;flex-wrap:wrap;padding-top:24px;padding-bottom:36px}
footer a{color:var(--mute)}

html,body{overflow-x:clip}  /* the comb and bees hang past the edge; clip, never scroll sideways */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:24px}
  .stage{padding-top:120px}
  .comb{width:125%;right:-14%;top:-6%}
  .stage .demo{margin-right:6%}
  .b5,.b4{display:none}
  .how ol{grid-template-columns:1fr 1fr}
  .rails{grid-template-columns:1fr;gap:24px}
  .for{grid-template-columns:1fr;padding:30px}
}
@media (max-width:560px){
  body{font-size:17px}
  .how ol{grid-template-columns:1fr}
  .top{padding-top:16px;padding-bottom:16px}
  .top nav{gap:14px}
  .top nav a{font-size:14.5px}
  .top nav a[href='#how'],.top nav a[href='/#how']{display:none}
  .stage .demo{margin-right:0}
  .stage{padding-top:96px}
  .mail{padding:18px 16px 6px}
  .legend,.actions{padding-left:16px;padding-right:16px}
  .reply{margin:0 16px 16px}
}