/* Shared styling for Holt's three public pages: the landing page, the privacy
   policy, and the terms. These are the pages a signed-out visitor -- and a
   Google verification reviewer -- can reach, so they carry no app JavaScript
   and no session. The palette and type are the app's own (brief.html), because
   the site and the product should not look like two different companies. */

:root{
  --paper:#f4f5f4; --card:#fff; --line:#e2e7e5; --text:#141d1b; --muted:#5e6b68;
  --dim:#8b9895; --btn-ink:#fbfefe; --accent:#0b6e75; --accent-2:#e0eff0;
  --soft:#eef1f0; --band:#fff;
  --warn:#8a5504; --warn-bg:#fdf3e2; --risk:#8f3125; --risk-bg:#fdeae6;
  --ok:#2c6b43; --alert:#e07a1f;
  --serif:"Iowan Old Style",Charter,Palatino,Georgia,serif;
  --sans:-apple-system,ui-sans-serif,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 1px 2px rgba(20,29,27,.04),0 14px 38px rgba(20,29,27,.07);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0e1514; --card:#161f1d; --line:#28332f; --text:#e8edeb; --muted:#93a09c;
    --dim:#6f7d79; --btn-ink:#07100f; --accent:#5cc6ce; --accent-2:#123231;
    --soft:#1c2624; --band:#111a19;
    --warn:#dda54f; --warn-bg:#2b2416; --risk:#e58a79; --risk-bg:#301d19;
    --ok:#6fba88; --alert:#f0a24a;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 38px rgba(0,0,0,.4);}
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);
  font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3{text-wrap:balance}

/* ------------------------------------------------------------ chrome */

header.site{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;margin:0 auto;padding:20px}
.wordmark{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.02em;
  color:var(--accent);text-decoration:none}
header.site nav{display:flex;align-items:center;gap:20px;font-size:14px}
header.site nav a{color:var(--muted);text-decoration:none}
header.site nav a:hover{color:var(--text)}
header.site nav a.cta{color:var(--accent);font-weight:650}
@media (max-width:620px){ header.site nav a:not(.cta){display:none} }

footer.site{border-top:1px solid var(--line);padding:28px 20px 48px;
  text-align:center;font-size:14px}
footer.site p{margin:0 0 6px}
footer.site .dim{color:var(--muted);font-size:13px}

.shell{max-width:1080px;margin:0 auto;padding:0 20px}
.shell.narrow{max-width:760px}
.center{text-align:center}
.center-block{text-align:center}

.eyebrow{font:11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.btn{display:inline-block;background:var(--accent);color:var(--btn-ink);text-decoration:none;
  font-weight:650;padding:14px 28px;border-radius:12px}
.btn:hover{filter:brightness(1.06)}
.btn-quiet{display:inline-block;color:var(--muted);text-decoration:none;font-weight:600;
  padding:14px 8px}
.btn-quiet:hover{color:var(--accent)}
.fineprint{font-size:13px;color:var(--muted);margin:16px 0 0}

/* -------------------------------------------------------------- hero */

.hero-band{padding:26px 0 56px}
.hero-grid{max-width:1080px;margin:0 auto;padding:0 20px;
  display:grid;gap:52px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.hero-copy h1{font-family:var(--serif);font-size:52px;line-height:1.04;font-weight:600;
  letter-spacing:-.03em;margin:0 0 20px}
.hero-copy .lede{font-size:18.5px;line-height:1.6;color:var(--muted);margin:0 0 16px;max-width:32em}
/* The plain statement of what this app is. Google's OAuth review checks the
   home page for an explicit purpose and for the app name in a prominent
   position -- a clever hook alone fails both. */
.hero-copy .purpose{font-size:18.5px;line-height:1.62;color:var(--text);margin:0 0 18px;max-width:33em}
.hero-copy .purpose strong{font-weight:650}
.cta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}

/* The mock frame the question demo sits in. Same paper and border as the app,
   so the site and the product read as one thing. */
.mock{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:22px 20px 24px;box-shadow:var(--shadow)}
.kick{font:11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0}
.mrule{font:11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);margin:22px 0 11px;display:flex;align-items:center;gap:8px}
.mrule::after{content:"";flex:1;height:1px;background:var(--line)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-copy h1{font-size:40px}
}
@media (max-width:560px){
  .hero-copy h1{font-size:34px}
  .hero-copy .lede{font-size:17px}
  .mock{padding:18px 15px 20px}
  .asked q{font-size:19px}
}

/* ------------------------------------------------------------- bands */

.band{padding:64px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--band)}
.band.close{text-align:center}
.band-title{font-family:var(--serif);font-size:36px;line-height:1.1;font-weight:600;
  letter-spacing:-.025em;margin:0 0 16px;text-align:center}
.band-lede{color:var(--muted);font-size:17px;margin:0 auto 34px;max-width:36em;text-align:center}
.band.close .band-lede{margin-bottom:28px}
@media (max-width:560px){ .band{padding:48px 0} .band-title{font-size:28px} }

/* --------------------------------------------------- before and after */

.ba{display:grid;gap:22px;grid-template-columns:1fr auto 1fr;align-items:start;
  margin:34px 0 56px}
.ba-label{font:11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px}
.ba-arrow{align-self:center;color:var(--dim);padding-top:24px}

.inbox{list-style:none;margin:0;padding:0}
.inbox li{display:flex;gap:10px;align-items:baseline;padding:11px 13px;font-size:13.5px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;margin-bottom:6px;
  color:var(--muted)}
.inbox .from{flex:0 0 108px;font-weight:650;color:var(--text);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox .subj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox .more{justify-content:center;color:var(--dim);font-style:italic;background:transparent;
  border-style:dashed}

.ba-note{color:var(--muted);font-size:13.5px;margin:14px 0 0;line-height:1.5}

@media (max-width:820px){
  .ba{grid-template-columns:1fr;gap:8px}
  .ba-arrow{transform:rotate(90deg);justify-self:center;padding:6px 0}
  .ba-col+.ba-col{margin-top:6px}
}

/* -------------------------------------------------------------- nots */

.nots p{font-size:17px;line-height:1.62;margin:0 0 20px;color:var(--muted)}
.nots strong{color:var(--text)}

/* ------------------------------------------------------------- facts */

.facts{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.fact h3{font-size:15.5px;font-weight:650;margin:0 0 9px;line-height:1.35}
.fact p{margin:0;font-size:15px;line-height:1.62;color:var(--muted)}
.fact code{font:12.5px var(--mono);background:var(--soft);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;color:var(--text)}

/* -------------------------------------------------------------- prose
   (privacy policy and terms) */

.prose{max-width:720px;margin:0 auto;padding:0 20px 40px}
.prose h1{font-family:var(--serif);font-size:36px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
.prose h2{font-family:var(--serif);font-size:23px;font-weight:600;margin:36px 0 10px}
.prose h3{font-size:15px;font-weight:650;margin:24px 0 6px}
.prose p,.prose li{font-size:15.5px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:9px}
.prose code{font:13.5px var(--mono);background:var(--soft);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px}
.prose .updated{color:var(--muted);font-size:14px;margin:0 0 8px}
.prose blockquote{margin:14px 0;padding:14px 18px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  font-size:15px}
.prose table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.prose th{font:12px var(--mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:500}
.scroll{overflow-x:auto}

/* ------------------------------------------------- the live hero question

   The mock is a working demo, not a screenshot: the chips are questions Holt
   actually answers and the answers are the ones it gives. A parent deciding
   whether to hand over their inbox should get to try it first. */

.ask-mock .kick{margin-bottom:16px}
.asked{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin-bottom:18px}
.asked q{font-family:var(--serif);font-size:21px;font-style:italic;line-height:1.35;
  display:block;quotes:none}
.answer{display:flex;gap:11px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.a-mark{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-2);color:var(--accent);margin-top:1px}
.answer p{margin:0;font-size:15.5px;line-height:1.55}

.qchips{display:flex;flex-wrap:wrap;gap:7px}
.qchips button{font:13px var(--sans);padding:8px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  transition:border-color .12s ease,color .12s ease}
.qchips button:hover{border-color:var(--accent);color:var(--accent)}
.qchips button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
  background:var(--accent-2)}
.qchips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.mock-foot{font-size:12.5px;color:var(--dim);margin:14px 2px 0;text-align:center;line-height:1.5}

/* The questions the pile of mail on the left can now answer. */
.qlist{list-style:none;margin:0;padding:0}
.qlist li{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:9px;padding:11px 14px;margin-bottom:6px}
.qlist q{font-family:var(--serif);font-size:15.5px;font-style:italic;quotes:none}

.reassure{margin:26px auto 0;max-width:52ch;text-align:center;font-size:15px;
  color:var(--muted);padding-top:22px;border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }