/* BotSay marketing site, scaffolded 2026-09-21 from the mocks (docs/marketing/site/site.css). Same
   tokens as the product (apps/web/app/globals.css) plus the identity direction's additions: a FIXED
   deep band that is the same island in both themes, and --mk-boundary-deep for boundaries on it.
   Fonts are copied into site/src/fonts (the mocks' repo-root path does not exist on Pages). */
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-700-normal.woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin-500-normal.woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2'); font-weight: 400; font-display: swap; }
:root {
  color-scheme: light dark;
  --paper: light-dark(#ffffff, #0e1217); --surface: light-dark(#ffffff, #161c23); --band: light-dark(#f1f3f5, #1d242d);
  --rule: light-dark(#e4e7eb, #262e38); --rule-strong: light-dark(#cbd1d8, #37404c); --field: light-dark(#7b8593, #6b7683);
  --ink: light-dark(#171e24, #f2f5f8); --ink-body: light-dark(#39424c, #d5dbe2); --ink-muted: light-dark(#4f5966, #aab4bf); --ink-subtle: light-dark(#5f6873, #909ca9);
  --accent: light-dark(#c2430a, #fe5c10); --accent-on: light-dark(#ffffff, #0e1217); --link: light-dark(#105cf7, #7ebbfb);
  --up: light-dark(#0a7a0a, #4cc94c); --danger: light-dark(#c4402b, #e88080); --danger-ground: light-dark(#fdf3f1, #3a1a18);
  /* the deep island: literals, never themed */
  --deep: #0e1217; --deep-panel: #161c23; --deep-ink: #f2f5f8; --deep-body: #d5dbe2; --deep-muted: #aab4bf; --deep-subtle: #909ca9; --mk-boundary-deep: #5f6b7b; --deep-orange: #fe5c10; --deep-link: #7ebbfb; --viz-deep-band: #16304f; --viz-deep-line: #6daaf5;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
:root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; }
/* An anchor jump lands below the sticky header (.hdr, 65 px), at every width. */
section[id] { scroll-margin-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink-body); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; } h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--ink); margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0 0 16px; text-wrap: pretty; } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font: 500 21px var(--display); color: var(--ink); text-decoration: none; } .wordmark b { color: var(--accent); font-weight: 500; } .wordmark i { color: var(--ink-subtle); font-style: normal; }
.deep .wordmark, .wordmark--deep { color: var(--deep-ink); }
.eyebrow { font: 600 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 16px var(--body); height: 48px; padding: 0 22px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn--quiet { background: transparent; border-color: var(--rule-strong); color: var(--ink); font-weight: 500; } .btn--sm { height: 38px; font-size: 15px; padding: 0 16px; }
.muted { color: var(--ink-subtle); font-size: 14px; } .fine { font-size: 14px; color: var(--ink-muted); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

/* ---- coming soon: one screen, split */
.cs { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.cs__say { display: flex; flex-direction: column; padding: 28px 56px 28px max(32px, calc((100vw - 1240px) / 2)); }
.cs__top { display: flex; justify-content: space-between; align-items: center; } .cs__top a.signin { font-size: 15px; color: var(--ink-muted); }
.cs__mid { margin: auto 0; padding: 24px 0; max-width: 560px; }
.cs h1 { font-size: clamp(34px, 3.6vw, 52px); margin: 14px 0 18px; }
.cs__lede { font-size: 19px; color: var(--ink-body); max-width: 52ch; }
.signup { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 10px; max-width: 520px; } .signup input { flex: 1 1 300px; min-width: 0; font: 400 17px var(--body); height: 48px; padding: 0 14px; border: 1px solid var(--field); border-radius: 6px; background: var(--surface); color: var(--ink); }
.signup .btn { flex: 1 0 auto; }
.signup input[aria-invalid='true'] { border-color: var(--danger); } .err { color: var(--danger); font-size: 15px; margin: 0 0 8px; }
.cs__foot { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-subtle); } .cs__foot a, .cs__foot .link-btn { color: var(--ink-muted); }
.deep { background: var(--deep); color: var(--deep-body); } .deep h2, .deep h3 { color: var(--deep-ink); } .deep a { color: var(--deep-link); }
.cs__show { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; gap: 18px; }
.pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }
.tile { background: var(--deep-panel); border: 1px solid var(--mk-boundary-deep); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; }
.tile__cap { font: 600 12px var(--body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--deep-subtle); margin-bottom: 14px; }
.tile__name { font-size: 14px; color: var(--deep-muted); } .tile__fig { font: 700 56px/1 var(--body); letter-spacing: -0.03em; color: var(--deep-ink); margin: 4px 0 8px; } .tile__fig small { font-size: 22px; font-weight: 500; color: var(--deep-muted); }
.tile--ours .tile__fig { font-size: 34px; font-weight: 600; } .tile__range { font: 600 34px/1 var(--body); letter-spacing: -0.02em; color: var(--deep-ink); } .tile__range small { font-size: 14px; font-weight: 400; color: var(--deep-muted); letter-spacing: 0; display: block; margin-bottom: 6px; }
.upchip { color: #4cc94c; font-weight: 600; } .verdict { display: inline-block; margin-top: 14px; font: 700 21px var(--body); white-space: nowrap; color: var(--deep-ink); border-bottom: 3px solid var(--deep-orange); padding-bottom: 2px; align-self: flex-start; }
.interval { margin-top: 16px; } .interval svg { display: block; width: 100%; height: auto; }
.sum { font-size: 15px; color: var(--deep-muted); max-width: 56ch; } .sum strong { color: var(--deep-ink); font-weight: 600; }
.thanks { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 14px 20px; max-width: 520px; margin-top: 16px; background: var(--surface); } .thanks h2 { font-size: 24px; margin-bottom: 8px; }
.share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---- full site */
.hdr { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .hdr nav { display: flex; align-items: center; gap: 24px; } .hdr nav a:not(.btn) { color: var(--ink-muted); text-decoration: none; font-size: 16px; font-weight: 500; }
section { padding: 96px 0; } section.band { background: var(--band); } section.tight { padding: 64px 0; }
.claim h1 { font-size: clamp(40px, 5.2vw, 68px); max-width: 17ch; } .claim p { font-size: 21px; max-width: 56ch; margin-top: 24px; color: var(--ink-body); }
.situation p { font: 400 26px/1.45 var(--display); color: var(--ink-muted); max-width: 30ch; margin: 0 auto; text-align: left; } .situation p strong { color: var(--ink); font-weight: 500; }
.sec-h { font-size: clamp(28px, 3vw, 40px); max-width: 22ch; margin-bottom: 16px; } .sec-p { max-width: 60ch; font-size: 18px; }
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; } .frame { border: 1px solid var(--rule-strong); border-radius: 12px; padding: 22px; background: var(--surface); } .frame h3 { font: 700 22px var(--body); letter-spacing: 0; margin-bottom: 8px; } .frame p { font-size: 16px; margin: 0; color: var(--ink-muted); } .frame .mini { margin: 16px 0 0; font-size: 15px; border-top: 1px solid var(--rule); padding-top: 12px; }
.loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; } .loop .day { font: 600 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .loop h3 { font: 600 21px/1.3 var(--body); letter-spacing: 0; margin: 6px 0 8px; } .loop p { font-size: 16px; color: var(--ink-muted); margin: 0; }
.shot { margin-top: 48px; border: 1px solid var(--rule-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgb(14 18 23 / 12%); background: var(--surface); } .shot__bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--band); } .shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); } .shot iframe { display: block; width: 100%; height: 560px; border: 0; }
table.facts { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 17px; } table.facts th, table.facts td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); } table.facts th { font-weight: 500; color: var(--ink-muted); width: 34%; } table.facts td { color: var(--ink); }
.ask { text-align: center; } .ask h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 20ch; margin: 0 auto 16px; } .ask p { max-width: 54ch; margin: 0 auto 28px; }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; } .price { border: 1px solid var(--rule-strong); border-radius: 12px; padding: 24px; background: var(--surface); } .price h3 { font: 600 18px var(--body); letter-spacing: 0; } .price .amt { font: 700 40px/1.1 var(--body); color: var(--ink); letter-spacing: -0.02em; margin: 10px 0 4px; } .price .amt small { font-size: 16px; font-weight: 400; color: var(--ink-muted); } .price p { font-size: 16px; margin: 0; color: var(--ink-muted); }
.who p { font-size: 20px; max-width: 58ch; } .who p strong { color: var(--ink); font-weight: 600; }
footer.ftr { border-top: 1px solid var(--rule); padding: 32px 0 48px; font-size: 15px; } footer.ftr .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } footer.ftr a, footer.ftr .link-btn { color: var(--ink-muted); } footer.ftr span + span a, footer.ftr .link-btn { display: inline-block; margin-right: 18px; padding: 6px 0; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.prose { max-width: 70ch; } .prose h2 { font-size: 28px; margin: 48px 0 12px; } .prose h1 { font-size: 46px; margin-bottom: 16px; } .toc { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 18px 22px; margin: 28px 0; columns: 2; font-size: 16px; list-style: none; } .toc li { margin-bottom: 6px; }
.mockbar { position: fixed; right: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; background: #171e24; color: #fff; border-radius: 999px; padding: 6px 8px 6px 14px; font: 13px var(--body); z-index: 9; } .mockbar a, .mockbar button { color: inherit; font: inherit; background: transparent; border: 1px solid rgb(255 255 255 / 35%); border-radius: 999px; padding: 2px 10px; cursor: pointer; text-decoration: none; }
.staging { background: #fab219; color: #171e24; font: 600 13px var(--body); text-align: center; padding: 4px; }
@media (max-width: 900px) {
  .cs { grid-template-columns: minmax(0, 1fr); } .cs__say { padding: 20px; } .cs__mid { padding: 32px 0; } .cs__show { padding: 32px 20px 72px; } .pair { grid-template-columns: minmax(0, 1fr); }
  .signup { flex-direction: column; } .signup input { flex: none; width: 100%; } .btn { width: 100%; } .hdr nav a:not(.btn) { display: none; } .hdr .btn { width: auto; } .hdr { backdrop-filter: none; }
  .wrap { padding: 0 20px; } section { padding: 64px 0; } .frames, .loop, .prices { grid-template-columns: minmax(0, 1fr); } .toc { columns: 1; } .shot iframe { height: 420px; } table.facts th { width: 42%; }
}

/* ---- second pass, 2026-09-20 (Frank): white grounds, colour, more pictures, positive framing */
:root { --t-blue: light-dark(#e7eefb, #17253a); --t-green: light-dark(#e4f3ec, #122c25); --t-orange: light-dark(#fbede4, #33210f); --t-purple: light-dark(#eeebf7, #272138); --t-sky: light-dark(#e5f0f9, #142737);
  --c-blue: light-dark(#105cf7, #6daaf5); --c-sky: #7ebbfb; --c-lime: #b4dc5b; --c-green: light-dark(#0a7a0a, #4cc94c); --c-orange: light-dark(#c2430a, #fe5c10); }
.pic { position: relative; border-radius: 20px; padding: 28px; } .pic--blue { background: var(--t-blue); } .pic--green { background: var(--t-green); } .pic--orange { background: var(--t-orange); } .pic--purple { background: var(--t-purple); } .pic--sky { background: var(--t-sky); }
.ill { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 14px; padding: 18px 20px; box-shadow: 0 10px 30px rgb(14 18 23 / 8%); font-size: 15px; color: var(--ink-body); }
.ill__cap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-subtle); margin-bottom: 10px; } .ill__cap svg { width: 16px; height: 16px; fill: var(--ink-muted); }
.ill__q { font: 600 16px/1.35 var(--body); color: var(--ink); margin: 0 0 10px; } .ill p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.b { display: inline-block; border-radius: 5px; padding: 0 6px; font-weight: 600; background: var(--band); color: var(--ink); } .b--you { background: var(--c-lime); color: #171e24; }
.good { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--body); color: var(--c-green); background: var(--t-green); border-radius: 999px; padding: 3px 12px; }
.rows2 { list-style: none; margin: 0; padding: 0; } .rows2 li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px; gap: 10px; align-items: center; padding: 7px 0; font-size: 15px; } .rows2 .r { color: var(--ink-subtle); font-weight: 600; } .rows2 .v { text-align: right; color: var(--ink); font-weight: 600; }
.rows2 .bar2 { height: 8px; border-radius: 4px; background: var(--band); margin-top: 4px; } .rows2 .bar2 i { display: block; height: 100%; border-radius: 4px; background: var(--c-sky); } .rows2 .you .bar2 i { background: var(--c-blue); } .rows2 .you span { color: var(--ink); font-weight: 600; }
.kind { display: inline-block; font: 600 12px var(--body); letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px; padding: 2px 8px; } .kind--write { background: var(--t-blue); color: var(--c-blue); } .kind--mention { background: var(--t-green); color: var(--c-green); } /* #72: --c-orange on --t-orange is 4.47:1 at 12px, under WCAG's 4.5; this shade is 4.89:1. The accent token itself is unchanged. */
 .kind--decide { background: var(--t-orange); color: light-dark(#b83f09, var(--c-orange)); }
.todo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--rule); } .todo:first-of-type { border-top: 0; padding-top: 0; } .todo strong { color: var(--ink); display: block; margin-top: 4px; } .todo .gain { font: 600 14px var(--body); color: var(--c-green); white-space: nowrap; align-self: center; }
.engines { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; font-size: 14px; color: var(--ink-subtle); margin-top: 28px; } .engines span { display: inline-flex; align-items: center; gap: 7px; } .engines svg { width: 16px; height: 16px; fill: var(--ink-subtle); }
.cs2 { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); } .cs2 .cs__say { padding-right: 40px; }
.cs2__show { display: flex; align-items: center; padding: 32px max(32px, calc((100vw - 1240px) / 2)) 32px 16px; } .stack { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 28px 176px; border-radius: 24px; background: var(--t-blue); }
.stack .ill--stand { position: absolute; right: -12px; bottom: -28px; width: 300px; } .stack .ill--work { position: absolute; left: -12px; bottom: 30px; width: 250px; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } .feat--flip > :first-child { order: 2; } .feat h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; } .feat p { font-size: 18px; max-width: 46ch; }
.hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .hero2 h1 { font-size: clamp(38px, 4.4vw, 58px); } .hero2 p.l { font-size: 20px; margin: 22px 0 28px; max-width: 48ch; }
.strip5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .strip5 div { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--ink-subtle); } .strip5 b { display: block; font: 600 18px var(--body); color: var(--ink); }
.mail { max-width: 420px; margin: 0 auto; } .mail .from { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-subtle); margin-bottom: 8px; }
.cta-band { background: var(--t-blue); border-radius: 24px; padding: 56px 32px; text-align: center; } .cta-band h2 { font-size: clamp(28px, 3.2vw, 42px); max-width: 20ch; margin: 0 auto 14px; } .cta-band p { max-width: 52ch; margin: 0 auto 26px; }
@media (max-width: 900px) { .cs2, .hero2, .feat { grid-template-columns: minmax(0, 1fr); gap: 32px; } .feat--flip > :first-child { order: 0; } .cs2__show { padding: 8px 20px 72px; } .stack { padding: 20px 20px 20px; } .stack .ill--stand, .stack .ill--work { position: static; width: auto; margin-top: 14px; } .strip5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pic { padding: 18px; } }

/* ---- third pass: product menu, feature pages, FAQ, support, column footer */
.menu { position: relative; } .menu > a::after { content: ''; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.menu__list { position: absolute; top: 100%; left: -16px; min-width: 300px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 16px 40px rgb(14 18 23 / 14%); padding: 8px; display: none; }
.menu:hover .menu__list, .menu:focus-within .menu__list { display: block; } .menu__list a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink) !important; font-weight: 600 !important; } .menu__list a span { display: block; font-weight: 400; font-size: 14px; color: var(--ink-subtle); } .menu__list a:hover { background: var(--band); }
.faq { max-width: 820px; margin: 32px auto 0; } .faq details { border-top: 1px solid var(--rule-strong); padding: 4px 0; } .faq details:last-child { border-bottom: 1px solid var(--rule-strong); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font: 600 18px/1.35 var(--body); color: var(--ink); position: relative; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 400 26px var(--body); color: var(--ink-subtle); } .faq details[open] summary::after { content: '\2212'; } .faq details p { margin: 0 0 18px; max-width: 64ch; }
footer.ftr2 { border-top: 1px solid var(--rule); padding: 56px 0 40px; font-size: 15px; } .ftr2 .cols { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 32px; } .ftr2 .fh { font: 600 13px var(--body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; } .ftr2 a { display: block; color: var(--ink-muted); text-decoration: none; padding: 4px 0; } .ftr2 a:hover { color: var(--ink); text-decoration: underline; }
 /* #72: a link inside the base line's sentence stays inline and underlined, or "Caspio." splits (#44). */
 .ftr2 .base a { display: inline; padding: 0; text-decoration: underline; }
 .ftr2 .link-btn { color: var(--ink-subtle); } .ftr2 .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: 40px; padding-top: 20px; color: var(--ink-subtle); font-size: 14px; }
.fhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } .fhero h1 { font-size: clamp(34px, 4vw, 52px); } .fhero p.l { font-size: 20px; margin: 20px 0 28px; max-width: 46ch; }
.crumbs { font-size: 14px; color: var(--ink-subtle); margin-bottom: 14px; } .crumbs a { color: var(--ink-muted); }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .points h3 { font: 600 20px/1.3 var(--body); letter-spacing: 0; margin-bottom: 8px; } .points p { font-size: 16px; color: var(--ink-muted); margin: 0; } .points .n { font: 600 13px var(--body); letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; display: block; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cardlink { display: block; text-decoration: none; border: 1px solid var(--rule-strong); border-radius: 14px; padding: 22px; background: var(--surface); color: var(--ink-body); } .cardlink:hover { border-color: var(--accent); } .cardlink h3 { font: 600 20px/1.3 var(--body); letter-spacing: 0; margin-bottom: 6px; } .cardlink p { font-size: 16px; margin: 0 0 12px; color: var(--ink-muted); } .cardlink span { color: var(--link); font-weight: 500; }
.srcrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; } .srcrow:first-of-type { border-top: 0; } .srcrow b { color: var(--ink); font-weight: 600; }
.help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ftr2 .cols, .points, .cards, .cards--4, .fhero, .help { grid-template-columns: minmax(0, 1fr) !important; } .fhero { gap: 28px; } .menu__list { display: none !important; } }
@media (max-width: 1100px) and (min-width: 901px) { .cs__mid { padding: 8px 0; } .cs__lede { font-size: 17px; } .cs2 h1 { font-size: 34px !important; } .cs__foot { font-size: 13px; gap: 12px; } }

/* ---- consent banner (Frank, 2026-09-21: Google Tag Manager and Analytics). Nothing loads before a choice. */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 8; width: min(420px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 16px 40px rgb(14 18 23 / 16%); padding: 18px 20px; font-size: 15px; }
.consent h2 { font: 600 17px var(--body); letter-spacing: 0; margin-bottom: 6px; } .consent p { margin: 0 0 14px; color: var(--ink-muted); } .consent .row { display: flex; gap: 8px; } .consent .btn { flex: 1; height: 40px; font-size: 15px; background: var(--surface); color: var(--ink); border-color: var(--field); }
@media (max-width: 900px) { .consent { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 14px 16px; } }
/* #104: below 900px, on a page with the email field, the sheet sits at the top of the viewport. At the
   bottom, on phones shorter than about 760px, it covered the email field itself on arrival (Frank,
   2026-09-22, NOTES.md section 0: never over the email field). Pages without the field keep the
   bottom sheet, including /waiting-list once the in-page sign-up has replaced the form. */
@media (max-width: 900px) { body:has(input[type="email"]) .consent { top: 8px; bottom: auto; } }
/* #85: on a page with a share row and no email field (/thanks/, and /waiting-list once the thanks state is swapped
   in) the banner takes the bottom-right corner above 900px, over the illustration, so the row is clear
   on arrival (Frank, 2026-09-22, NOTES.md section 0). The selector states the ruling itself, no email
   field, so a page with a share row and a form still keeps the banner bottom-left. Below 900px it is a
   full-width sheet and the row scrolls clear. Without :has, it stays bottom-left. */
@media (min-width: 901px) { body:has(.share):not(:has(input[type="email"])) .consent { left: auto; right: 16px; } }