:root { color-scheme: light; --ink:#1d2621; --muted:#5f6b64; --line:rgba(30,46,37,.14); --accent:#2f5d4a; --bg:#eef1ec; --card:#fbfcfa; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
header, main, footer { width:min(760px, 100%); margin:0 auto; padding:0 20px; }
header { padding-top:36px; display:flex; align-items:center; gap:12px; }
header a { color:var(--ink); text-decoration:none; font-weight:800; font-size:20px; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:10px; }
header a .logo { width:58px; height:29px; flex:none; }
header span { color:var(--muted); font-size:14px; }
main { margin-top:24px; margin-bottom:40px; padding:28px 32px; background:var(--card); border:1px solid var(--line); border-radius:18px; }
h1 { margin:0 0 6px; font-size:28px; line-height:1.2; letter-spacing:-.01em; }
h2 { margin:28px 0 8px; font-size:19px; }
.updated { margin:0 0 20px; color:var(--muted); font-size:14px; }
a { color:var(--accent); }
ul { padding-left:22px; }
li { margin:4px 0; }
.choices { display:grid; gap:10px; margin:18px 0; }
.choices a { display:block; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); text-decoration:none; font-weight:600; }
.choices a:hover { border-color:var(--accent); }
.fine { color:var(--muted); font-size:14px; }
footer { padding-bottom:40px; color:var(--muted); font-size:13px; }
footer nav a { margin-right:14px; }
footer p { margin:10px 0 0; }
/* Question-led pages: a short, self-contained answer first, then detail. */
.lead { font-size:18px; line-height:1.55; margin:10px 0 18px; }
.answer { font-weight:600; margin:0 0 8px; }
main.home section { margin-top:30px; }
main.home h1 { font-size:34px; }
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:18px 0 6px; }
.cta { display:inline-block; padding:12px 20px; border-radius:12px; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; }
.cta:hover { opacity:.92; }
.cta-quiet { font-weight:600; }
/* Phones can't install a Chrome extension; the note says so, and the mail-it
   link appears only where it helps. */
.desktop-note { margin:10px 0 6px; color:var(--muted); font-size:14px; }
.desktop-mail { display:none; font-weight:600; white-space:nowrap; }
@media (max-width: 760px), (pointer: coarse) {
  .desktop-mail { display:inline; }
  /* On the devices that can't run it, say so as a callout rather than a footnote. */
  .desktop-note { margin:14px 0 6px; padding:12px 14px; border-radius:10px; background:#e6efe9; color:var(--accent); font-weight:600; }
}
/* Pre-launch (COMING_SOON in tools/site_build.py): the button is a badge. */
.cta-soon { background:transparent; color:var(--accent); border:2px dashed var(--accent); padding:10px 18px; cursor:default; }
.cta-soon:hover { opacity:1; }
.soon-note { padding:10px 14px; border-radius:10px; background:#e6efe9; color:var(--accent); font-weight:600; }
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:14px 0; }
.plan { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.plan-pro { border-color:var(--accent); }
.plan h3 { margin:0 0 4px; font-size:17px; }
.plan .price { margin:0 0 6px; font-size:22px; font-weight:800; }
.plan .price span { font-size:14px; font-weight:600; color:var(--muted); }
.plan ul { margin:0; }
.faq details { border-top:1px solid var(--line); padding:10px 0; }
.faq details:last-of-type { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-weight:600; }
.faq details p { margin:8px 0 0; }
/* Promo video: a local poster until play, then the YouTube player. */
.promo-video { position:relative; aspect-ratio:16/9; margin:0 0 8px; border-radius:14px; overflow:hidden; background:#101512; }
.promo-video a, .promo-video img, .promo-video iframe { display:block; width:100%; height:100%; border:0; }
.promo-video img { object-fit:cover; }
.promo-play-icon { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:rgba(29,38,33,.84); box-shadow:0 6px 24px rgba(0,0,0,.25); transition:background .15s ease, transform .15s ease; }
.promo-play-icon::after { content:""; position:absolute; left:30px; top:24px; border-style:solid; border-width:14px 0 14px 23px; border-color:transparent transparent transparent #fff; }
.promo-video a:hover .promo-play-icon { background:var(--accent); transform:scale(1.05); }
.promo-video a:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.promo-note { margin:0 0 24px; color:var(--muted); font-size:13px; }
@media (max-width: 560px) { .promo-play-icon { width:60px; height:60px; margin:-30px 0 0 -30px; } .promo-play-icon::after { left:24px; top:18px; border-width:12px 0 12px 19px; } }
@media (max-width: 560px) { main { padding:22px 18px; } main.home h1 { font-size:28px; } }