/* Agent Minder waiting-list site. No third-party requests. Mobile first. Body text: Figtree is named first and used
   when the device already has it, then the system font. The home page does not load this file: home.css serves
   Figtree from this site (fonts/, OFL-1.1; CSP font-src 'self'; the lean home page, 7 Nov 2026). Numbers are tabular,
   as in the app.
   The look is the app's B2GN direction (decisions #266 and #267, 30 Oct 2026; site design
   agent_economy/operations/in_hand/AGENT_MINDER_SITE_B2GN_DESIGN_2026_10_30.md): one blue-black ground on every page
   with one restrained navy light at the top, frosted glass cards, navy accents, light text. One dark look for everyone
   (no prefers-color-scheme switch); print goes back to black on white. Contrast figures are measured in the design,
   section 11 (the worst point is a card at the light's peak, #22304D). */
:root {
  color-scheme: dark;
  /* the ground and its one light (B2GN 3.1); no dot grid, no glows, no bands */
  --ground: #0B0F17;
  --light: radial-gradient(900px 380px at 50% 200px, rgba(38, 74, 150, .34), transparent 72%);
  /* glass cards (B2GN 3.2), flat: the ground is flat, so no live blur is needed */
  --card: rgba(255, 255, 255, .06);
  --card-edge: rgba(255, 255, 255, .10);
  --card-lit: inset 0 1px 0 rgba(255, 255, 255, .10);
  --card-solid: #1A1D25;     /* the card over the bare ground, where a solid is needed */
  --r-card: 22px;
  --r-inner: 14px;
  --hairline: rgba(255, 255, 255, .09);
  --rule: rgba(255, 255, 255, .16);   /* table cell rules */
  /* text (B2GN 3.3) */
  --ink: #FFFFFF;            /* body text and headings: 13.14:1 at the worst point */
  --muted: #A0AABB;          /* secondary text: 5.61:1 at the worst point */
  --text-3: #8F99AB;         /* quiet labels, 13px and up only: 4.58:1 at the worst point */
  --link: #A9C1F2;           /* links, eyebrows and the slogan accents: 7.26:1 at the worst point */
  /* the brand blues (B2GN 14, decision #273; the deep blue #2B4A86 before) */
  --navy: #3D6BE8;           /* a fill only (buttons, step numerals, play): white label 4.70:1 */
  --navy-hover: #426EE9;     /* one step lighter, same hue: white label 4.53:1, still over 4.5 */
  --mark: #4D7CFF;           /* the wordmark's lines: 5.15:1 on the ground; never a fill behind white (3.72:1) */
  --accent-mark: #5B82D6;    /* bars, bullets, checkbox ticks: 3.51:1 at the worst point */
  --focus: #FFFFFF;          /* one ring everywhere: 13.14:1 or more */
  /* the one Yes-type button (the join form's submit) keeps the app's Yes green, white label 4.61:1 */
  --yes: #1D8649;
  /* form fields: the app kit's .k-input */
  --field: rgba(255, 255, 255, .12);
  --field-edge: rgba(255, 255, 255, .55);
  --error-line: #FF7A70;
  --error-text: #FFB3AB;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--ground); }

body {
  margin: 0;
  background: var(--light) no-repeat, var(--ground);
  color: var(--ink);
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  :root { --light: radial-gradient(340px 340px at 50% 236px, rgba(38, 74, 150, .34), transparent 72%); }
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 16px; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -10000px; top: 0; }
.skip:focus { left: 16px; top: 8px; background: var(--card-solid); color: var(--ink); padding: 8px 12px; z-index: 10; }

/* ---- the wordmark: "Coming clear" -------------------------------------------------------------------------
   Under "Agent", a row of small rounded blue marks, each a little longer and more opaque than the last; under
   "Minder", one full blue line that stretches to the word's width (decision #273: bright blue #4D7CFF; it was green,
   then deep blue #2B4A86). */
.site-header { padding: 24px 0 8px; }
.wordmark {
  display: inline-flex;
  gap: 0.3em;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
/* The app icon just left of the name (founder, 1 Nov 2026 17:54, option A): make_app_icons.mark_svg() on the icon's own
   blue-black with its corner radius (22.37%) and a faint ring so it reads on the ground; 34px on a phone, 40px from
   640px. It is centred on the word line (1.1em), not on the words plus their lines, so it rises a little above the
   cap height; the ™ keeps its place after "Minder". */
.wm-icon {
  flex: none; display: block; width: 34px; height: 34px; margin: calc((1.1em - 34px) / 2) 0.15em 0 0;
  border-radius: 22.37%; background: #0B0F17; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); overflow: hidden;
}
.wm-icon svg { display: block; width: 100%; height: 100%; }
.wm-word { display: inline-flex; flex-direction: column; }
.wm-under { display: flex; align-items: center; height: 6px; margin-top: 5px; }
.wm-marks { justify-content: space-between; gap: 3px; }
.wm-marks i { display: block; height: 4px; border-radius: 2px; background: var(--mark); }
.wm-marks i:nth-child(1) { width: 3px;  opacity: 0.30; }
.wm-marks i:nth-child(2) { width: 5px;  opacity: 0.45; }
.wm-marks i:nth-child(3) { width: 7px;  opacity: 0.60; }
.wm-marks i:nth-child(4) { width: 10px; opacity: 0.75; }
.wm-marks i:nth-child(5) { width: 13px; opacity: 0.90; }
.wm-full b { display: block; flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--mark); }
/* the trade mark sign (founder, 20 Oct 2026): after the wordmark and the first "Agent Minder" in each page's text */
sup.tm { font-size: 0.6em; font-weight: 600; line-height: 0; vertical-align: super; margin-left: 0.05em; }
.wordmark sup.tm { font-size: 0.45em; line-height: 1; vertical-align: baseline; margin-left: -0.55em; }

/* ---- content ------------------------------------------------------------------------------------------------ */
main { padding: 16px 0 40px; }

/* No heading leaves one word alone on its last line (site B2GN design, section 8). */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 2.1rem; line-height: 1.15; margin: 16px 0 12px; letter-spacing: -0.015em; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 36px 0 12px; }
h3 { font-size: 1.1rem; margin: 24px 0 8px; }

.lede { font-size: 1.2rem; color: var(--ink); margin: 0 0 20px; }

.points { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.points li {
  position: relative;
  padding: 12px 14px 12px 40px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: var(--card-lit);
  border-radius: var(--r-inner);
}
.points li::before {
  content: "";
  position: absolute; left: 16px; top: 1.15em;
  width: 12px; height: 4px; border-radius: 2px;
  background: var(--accent-mark);
}

.status { font-weight: 600; border-left: 4px solid var(--accent-mark); padding: 4px 0 4px 12px; }

.designs { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; }
.designs figure { margin: 0; }
.designs img {
  display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 390 / 844;
  border: 1px solid var(--card-edge); border-radius: 18px; background: var(--card-solid);
}
.designs figcaption { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.designs-note { color: var(--muted); margin-top: -4px; }

/* ---- the form ----------------------------------------------------------------------------------------------- */
form { margin: 0; }
.field { margin: 0 0 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="email"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--field);
  padding: 12px 14px; border: 1.5px solid var(--field-edge); border-radius: 10px;
}
/* The browser's autofill paints its own light fill; keep the field dark and its text white (site B2GN design, 7). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px #2A2D35 inset; box-shadow: 0 0 0 100px #2A2D35 inset;
  transition: background-color 9999s ease-out 0s;
}
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.check input { width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; flex: 0 0 auto; accent-color: var(--accent-mark); }
.hint { color: var(--muted); font-size: 0.95rem; margin: -4px 0 12px; }

button {
  font: inherit; font-weight: 700; color: #fff; background: var(--navy);
  border: 2px solid var(--navy); border-radius: 10px; padding: 12px 22px; cursor: pointer;
  min-height: 48px;
}
button:hover { background: var(--navy-hover); border-color: var(--navy-hover); }

.small { color: var(--muted); font-size: 0.95rem; }

/* Read aloud, not shown ("Error:" before each message beside a field). */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }

/* The join form's checks (site.js; the GOV.UK pattern). Meaning never rests on colour: a heading, words and a thick
   bar mark each problem. */
.error-summary { border: 4px solid var(--error-line); border-radius: var(--r-inner); padding: 14px 16px; margin: 0 0 20px;
  background: var(--card); }
.error-summary h3 { margin: 0 0 8px; font-size: 1.15rem; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary li { margin: 0 0 6px; }
.error-summary a { font-weight: 700; }
.field-error { margin: 0 0 8px; padding-left: 10px; border-left: 4px solid var(--error-line); font-weight: 700;
  color: var(--error-text); }
input[aria-invalid="true"] { border-width: 3px; border-color: var(--error-line); }
.domain-hint:empty { display: none; }
.domain-hint { margin-top: 8px; }
.btn-hint { color: #fff; background: var(--card); border: 1.5px solid var(--field-edge); border-radius: 10px;
  padding: 8px 14px; min-height: 44px; font-weight: 600; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.btn-hint:hover { background: rgba(255, 255, 255, .12); border-color: var(--field-edge); }

/* A link that does one thing on its own looks like a button (check-email.html's "Join again"). */
.button-link { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: 10px;
  border: 2px solid var(--navy); background: var(--navy); color: #fff; font-weight: 700;
  text-decoration: none; }
.button-link:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }

/* Numbered steps (check-email.html, confirm.html). role="list" keeps them a list for VoiceOver without bullets. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.steps li { counter-increment: step; position: relative; padding: 12px 14px 12px 52px; background: var(--card);
  border: 1px solid var(--card-edge); box-shadow: var(--card-lit); border-radius: var(--r-inner); }
.steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px;   /* a plain bold numeral (founder, 21 Oct 2026) */
  color: var(--ink); font-weight: 700; font-size: 1.05rem; line-height: 1.5;
  display: flex; align-items: flex-start; justify-content: center; }

/* Hidden from sighted users; screen readers still read its label ("Leave this empty"). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.panel { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--card-lit);
  border-radius: var(--r-card); padding: 16px 18px; margin: 16px 0; }

/* confirm.html: a founding member's own link (site.js fills it from #ref=), and its plain Copy button. */
.link-text { font-weight: 700; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--card-edge);
  border-radius: var(--r-inner); padding: 12px 14px; }
.link-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- footer ------------------------------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 20px 0 32px; color: var(--muted); font-size: 0.95rem; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--ink); }

/* privacy page and the founding terms: the whole document in one wide glass reading card (site B2GN design, 4) */
article.notice { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--card-lit);
  border-radius: var(--r-card); padding: 4px 28px 24px; line-height: 1.6; }
.notice ul { padding-left: 1.2rem; }
.notice li { margin-bottom: 6px; }
/* The plans table on the founding terms (decisions #170 and #171): three columns that fit a phone, thin dividers. */
.notice .plans-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 0.9375rem; }
.notice .plans-table th, .notice .plans-table td { text-align: left; vertical-align: top; padding: 8px 6px;
  border-bottom: 1px solid var(--rule); }
.notice .plans-table th { font-weight: 600; }
.notice .plans-table td + td, .notice .plans-table th + th { width: 26%; }
/* Decision #218 (26 Oct 2026): the one plan's list on version 4, and the note at the top of the kept earlier versions. */
.notice .plan-list { margin: 8px 0 16px; }
.version-note, .notice .version-note { border-left: 4px solid var(--accent-mark); background: var(--card);
  border-radius: 0 var(--r-inner) var(--r-inner) 0; padding: 10px 12px; }

@media (max-width: 640px) {
  article.notice { padding: 4px 16px 20px; }
}

@media (min-width: 640px) {
  h1 { font-size: 2.6rem; }
  .wordmark { font-size: 1.75rem; }
  .wm-icon { width: 40px; height: 40px; margin-top: calc((1.1em - 40px) / 2); }
  .designs { grid-template-columns: 1fr 1fr; }
}

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

/* ---- FAQs (site_faq.py; founder, 26 Oct 2026 16:13) ---------------------------------------------------
   The site's own drop-downs: rows on hairlines inside one glass card, a plain + / \2212 at the end, no script needed.
   Compact rows (founder, 26 Oct 2026 20:31: "keep the tabs much much closer together"): 40px rows, over the 24px WCAG
   2.2 target minimum. "More" is a smaller drop-down inside the answer. Every page has one block at the foot of <main>;
   the home page has one under each section from "Why it matters" down; faq.html lists them all with a search box
   (faq.js). */
.faq { margin-top: 32px; }
.faq h2, .faq .faq-h { font-size: 1.35rem; line-height: 1.25; margin: 0 0 8px; }
.faq-list { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--card-lit);
  border-radius: var(--r-card); padding: 4px 16px; }
.faq-q { border-bottom: 1px solid var(--hairline); padding: 0; }
.faq-q:last-child { border-bottom: 0; }
.faq-q > summary, .faq-more > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 40px; cursor: pointer; list-style: none; }
/* One row rule for the FAQ's compact rows (#1891) and the plan block's rows, its "What's in it" list and its "Full
   details" fold (Toby, 27 Oct 2026 15:11: "Can we also make these the same gap as FAQ"); kit_flow_checks.SITE_ROWS_JS
   checks the heights match */
.faq-q > summary, .home .plans .acc .row > summary { font-weight: 600; font-size: 1rem; line-height: 1.35; padding: 4px 0;
  min-height: 40px; }
.home .plans .acc .row { padding: 0; }
.faq-q > summary::-webkit-details-marker, .faq-more > summary::-webkit-details-marker { display: none; }
.faq .pm { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--link); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.faq .pm::before { content: "+"; }
.faq details[open] > summary > .pm::before { content: "\2212"; }
.faq-a { color: var(--muted); max-width: 40rem; padding-bottom: 8px; }
.faq-a p { margin: 0 0 6px; }
.faq-more > summary { display: inline-flex; justify-content: flex-start; gap: 6px; font-weight: 600; color: var(--link); }
.faq-more .pm { width: 22px; height: 22px; font-size: 1.25rem; }
.faq-all { margin: 16px 0 0; }
.faq-topic { margin-top: 36px; }
.faq-search { margin: 24px 0 8px; }
.faq-search label { display: block; font-weight: 600; margin-bottom: 6px; }
.faq-search input { width: 100%; font: inherit; color: var(--ink); background: var(--field); padding: 12px 14px;
  border: 1.5px solid var(--field-edge); border-radius: 10px; }
.faq-n { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; }
.faq-none { margin: 16px 0 0; }
/* the home page: under each section */
.home .faq--home { margin-top: 40px; }
.home .faq--home .faq-list { max-width: 760px; }
.home .faq-band { padding: 0 0 96px; }
.faq-q[hidden], .faq-topic[hidden], .faq-search[hidden], .faq-none[hidden] { display: none; }

/* ---- print: a normal black-on-white document (site B2GN design, 4) ---- */
@media print {
  :root { color-scheme: light; --ink: #000; --muted: #333; --text-3: #333; --link: #000; }
  html, body { background: #fff !important; color: #000; }
  article.notice, .faq-list, .panel, .points li, .steps li, .card, .message, .notice-text, .link-text, .version-note {
    background: #fff !important; box-shadow: none !important; border-color: #999 !important; }
  a { color: #000; }
  .skip { display: none; }
}