/* App palette tokens: single source on the site. Values mirror
   ios/AlertInbox/AlertInbox/Views/Theme.swift (light / dark). Do not add
   colours elsewhere in this file; use these tokens. */
:root{
  --background:#f7f4ef;
  --card:#fffdfa;
  --criticalFill:#cd392e;
  --normalFill:#e2e9f1;
  --normalText:#3a5a80;
  --unknownFill:#eae7e2;
  --unknownText:#6b665e;
  --accent:#3a5a80;
  --allClear:#488a61;
  /* Site-only neutrals (not in Theme.swift): body text and on-accent text. */
  --fg:#26231f;
  --onAccent:#fffdfa;
  --radius:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --background:#181614;
    --card:#282521;
    --criticalFill:#ea564a;
    --normalFill:#2e3a4a;
    --normalText:#a7c3e1;
    --unknownFill:#3b3834;
    --unknownText:#b0aaa0;
    --accent:#688eba;
    --allClear:#79b88f;
    --fg:#f3efe8;
    --onAccent:#181614;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--fg);font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:46rem;margin:0 auto;padding:0 16px}
.wide{max-width:60rem}
header{border-bottom:1px solid var(--unknownFill)}
header .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{font-weight:700;font-size:1.2rem;color:var(--fg);text-decoration:none}
nav a{margin-right:16px;color:var(--unknownText);text-decoration:none;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--fg);text-decoration:underline}
a{color:var(--accent)}
h1{font-size:2.1rem;line-height:1.2;margin:2.5rem 0 1rem}
h2{font-size:1.4rem;margin:2.5rem 0 .5rem}
h3{font-size:1.1rem;margin:1.5rem 0 .25rem}
.lead{font-size:1.2rem;color:var(--unknownText)}
.note,.card{background:var(--card);border-radius:var(--radius);padding:14px 18px;margin:1.5rem 0;border:1px solid var(--unknownFill)}
.note{border-left:4px solid var(--accent)}
.card{margin:0}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1rem 0}
.card h3{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
pre{background:var(--card);border:1px solid var(--unknownFill);padding:14px 16px;overflow-x:auto;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border-bottom:1px solid var(--unknownFill);padding:8px 10px;text-align:left;vertical-align:top}
.tablewrap{overflow-x:auto;background:var(--card);border-radius:var(--radius);border:1px solid var(--unknownFill);padding:4px 8px}
footer{border-top:1px solid var(--unknownFill);margin-top:3rem;padding:20px 0 40px;color:var(--unknownText);font-size:.9rem}
.cta{display:inline-block;background:var(--accent);color:var(--onAccent);padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:600}
/* Pills, in the style of the inbox severity pills. Status uses the calm
   tokens only; critical red is reserved for critical and never used here. */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:600;white-space:nowrap}
.pill.available{background:var(--card);border:1px solid var(--allClear);color:var(--fg)}
.pill.available::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--allClear)}
.pill.progress{background:var(--normalFill);color:var(--normalText)}
.pill.planned{background:var(--unknownFill);color:var(--unknownText)}
.pill.critical{background:var(--criticalFill);color:#fff}
/* Tentative roadmap: a horizontal timeline on wide screens, a vertical one on
   phones. Only the stage items (direct children) get the timeline marker. */
.roadmap{list-style:none;margin:1.5rem 0;padding:0 0 0 28px;display:grid;gap:16px;position:relative}
.roadmap::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--unknownFill)}
.roadmap>li{position:relative}
.roadmap>li::before{content:"";position:absolute;left:-28px;top:16px;width:18px;height:18px;border-radius:50%;box-sizing:border-box;background:var(--background);border:3px solid var(--accent)}
.roadmap>li.now::before{background:var(--accent)}
.roadmap>li.later::before{border-color:var(--unknownText)}
.roadmap .card{height:100%}
.roadmap .q{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-weight:700;color:var(--normalText)}
.roadmap .q small{font-weight:500;color:var(--unknownText);font-size:.85rem}
.roadmap .items{list-style:none;margin:0;padding:0}
.roadmap .items li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--unknownFill);line-height:1.4}
.roadmap .items li:first-child{border-top:0;padding-top:0}
.roadmap .items .pill{flex:none;margin-top:1px}
@media (min-width:52rem){
  .roadmap{grid-template-columns:repeat(3,1fr);padding:30px 0 0}
  .roadmap::before{left:0;right:0;top:8px;bottom:auto;width:auto;height:2px}
  .roadmap>li::before{left:18px;top:-30px}
  .roadmap .items li{flex-direction:column;gap:4px}
}
fieldset{border:1px solid var(--unknownFill);border-radius:var(--radius);background:var(--card);margin:1rem 0;padding:12px 18px}
legend{font-weight:600;padding:0 6px}
label{display:block;margin:6px 0}
input[type=text],input[type=email]{width:100%;max-width:26rem;padding:8px 10px;border-radius:12px;border:1px solid var(--unknownText);background:var(--background);color:var(--fg);font:inherit}
fieldset:disabled{opacity:.75}
/* Hero buttons */
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin:1.25rem 0}
.cta.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cta{white-space:nowrap}
/* Embedded waitlist form */
.formframe{background:var(--card);border:1px solid var(--unknownFill);border-radius:var(--radius);overflow:hidden;margin:1.5rem 0 .5rem}
.formframe iframe{display:block;width:100%;height:80vh;min-height:520px;max-height:1000px;border:0}
/* The form scrolls inside its frame, so the thank-you screen appears in view after sending. */
.small{font-size:.9rem;color:var(--unknownText)}
/* Phone layout (reviewed 2026-11-04 at 320 and 390 px). */
h1{font-size:clamp(1.75rem,6.5vw,2.1rem)}
legend{float:left;width:100%;padding:0;margin:0 0 6px}
legend+*{clear:left}
input[type=radio],input[type=checkbox]{width:18px;height:18px;vertical-align:-3px;margin:0 8px 0 0;accent-color:var(--accent)}
label{padding:4px 0}
@media (max-width:40rem){
  body{font-size:16px}
  header .wrap{display:block;padding-top:12px;padding-bottom:0}
  nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0 0;padding:4px 0 12px}
  nav a{margin:0;font-size:.95rem}
  h1{margin-top:1.75rem}
  .lead{font-size:1.08rem}
  pre{font-size:12px;padding:12px}
  /* Tables become stacked rows: tool and status on one line, meaning below. */
  .tablewrap{padding:0 14px}
  .tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:auto}
  .tablewrap tr:first-child{display:none}
  .tablewrap tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--unknownFill)}
  .tablewrap tr:last-child{border-bottom:0}
  .tablewrap td{border:0;padding:0}
  .tablewrap td:first-child{font-weight:600}
  .tablewrap td:nth-child(3){grid-column:1/-1;color:var(--unknownText);font-size:.92rem}
}