/* Civic Action Toolbox splash — implements the Claude Design handoff
   (design_handoff_splash_page, 2026-08-14) pixel-for-pixel.
   Brand tokens: cobalt #1B2FC4 · brick red #C42D18 · yellow #FFD028 ·
   cream #FFF3DC · ink #4A3B2E · maroon #5A1500 · periwinkle #A0A1D2.
   Pairing rules: never yellow on cream, never red↔cobalt text, no gray,
   no borders, no shadows, no gradients. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: "DM Sans", sans-serif; color: #4A3B2E; background: #FFF3DC; }

a { color: #1B2FC4; }
a:hover { color: #C42D18; }

section, footer { padding-left: 8vw; padding-right: 8vw; }

.inner { max-width: 1040px; margin: 0 auto; }

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C42D18; }

.eyebrow-on-cobalt { color: #A0A1D2; }   /* never red on cobalt */

.btn-pill { display: inline-flex; align-items: center; height: 56px; padding: 0 36px; background: #FFD028; color: #5A1500; font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 700; text-decoration: none; border-radius: 999px; transition: background 0.15s; }

.btn-pill:hover { background: #F2C31B; color: #5A1500; }

/* HERO */

.hero { background: #1B2FC4; padding-top: 40px; padding-bottom: 88px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 80px; }

.lockup { display: flex; align-items: center; gap: 14px; }

.lockup-icon { height: 46px; width: auto; display: block; }

/* The wordmark is real HTML text (not an SVG) so the webfont applies;
   the two words must always be two different colors. */
.lockup-word { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 26px; line-height: 1.02; }

.word-civic { color: #FFF3DC; }
.word-toolbox { color: #FFD028; }

.coming { font-size: 15px; font-weight: 500; color: #FFD028; letter-spacing: 0.02em; }

.accent-rule { width: 72px; height: 8px; background: #FFD028; border-radius: 4px; margin-bottom: 28px; }

.hero h1 { max-width: 19ch; font-family: "Baloo 2", cursive; font-weight: 800; font-size: clamp(44px, 6.4vw, 88px); line-height: 1.05; color: #FFF3DC; }

.hero-body { margin-top: 28px; max-width: 52ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: #FFFFFF; }

.cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; }

.cta-note { font-size: 15px; color: #FFFFFF; }

/* THE PRODUCT */

.product { background: #FFF3DC; padding-top: 96px; padding-bottom: 88px; }

.product-cols { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }

.product-copy { flex: 1 1 300px; }

.product h2 { margin-top: 16px; max-width: 20ch; font-family: "Baloo 2", cursive; font-weight: 800; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; color: #1B2FC4; }

.section-body { margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.55; color: #4A3B2E; }

/* Product mock: fixed 704px design width, scaled to fit by JS (see index.html) */

.mock-box { flex: 2 1 460px; max-width: 100%; overflow: hidden; }

.mock { width: 704px; transform-origin: top left; background: #FFFFFF; border-radius: 14px; overflow: hidden; font-size: 11px; line-height: 1.45; }

.mock-chrome { display: flex; align-items: center; gap: 10px; background: #FFF3DC; padding: 9px 12px; }

.mock-dots { display: flex; gap: 5px; }

.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-red { background: #C42D18; }
.dot-yellow { background: #FFD028; }
.dot-cobalt { background: #1B2FC4; }

.mock-url { flex: 1; background: #FFFFFF; border-radius: 9px; padding: 4px 10px; font-size: 10px; color: #4A3B2E; }

.mock-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 16px 20px; }

.mock-kicker { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: #C42D18; }

.mock-headline { margin: 8px 0 14px; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 19px; line-height: 1.12; color: #4A3B2E; }

.mock-lines { display: flex; flex-direction: column; gap: 5px; }

.mock-lines span { height: 6px; border-radius: 3px; background: #FDEBD0; }

.mock-lines .para-end { margin-bottom: 8px; }

.mock-tag { display: inline-block; background: #FFD028; color: #5A1500; font-weight: 700; font-size: 9px; border-radius: 5px; padding: 3px 8px; margin-bottom: 6px; }

.mock-card { background: #1B2FC4; border-radius: 12px; padding: 12px; }

.mock-card p { margin: 2px 0 9px; color: #FFFFFF; }

.mock-card p.tight { margin-bottom: 1px; }

.mock-card p.watch-next { margin-bottom: 12px; }

.mock-lockup { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }

.mock-lockup img { height: 13px; width: auto; display: block; }

.mock-lockup-word { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 11px; color: #FFF3DC; }

.mock-title { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 16px; line-height: 1.1; color: #FFD028; margin-bottom: 10px; }

.mock-label { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: #A0A1D2; }

.mock-label.mb4 { margin-bottom: 4px; }

.mock-meetings { background: #FFFFFF; border-radius: 8px; padding: 8px 10px; margin-bottom: 9px; display: flex; flex-direction: column; gap: 6px; }

.mock-meeting { display: flex; justify-content: space-between; gap: 8px; }

.meeting-date { font-weight: 700; color: #4A3B2E; }

.meeting-name { color: #4A3B2E; }

/* Mock "links" are inert spans — decorative only */
.mock-link-cobalt { color: #1B2FC4; text-decoration: underline; white-space: nowrap; }
.mock-link-yellow { color: #FFD028; font-weight: 700; }
.mock-link-white { color: #FFFFFF; text-decoration: underline; }

.mock-actions { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }

.mock-action { display: flex; align-items: center; gap: 7px; }

.action-chip { width: 14px; height: 14px; border-radius: 4px; background: #C42D18; color: #FFD028; font-weight: 700; font-size: 8px; display: flex; align-items: center; justify-content: center; flex: none; }

.mock-form { background: #FFFFFF; border-radius: 10px; padding: 10px; }

.mock-form-title { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 12px; color: #1B2FC4; margin-bottom: 7px; }

.mock-field { background: #FFF3DC; border-radius: 6px; padding: 6px 8px; color: #4A3B2E; margin-bottom: 6px; }

.mock-field.field-tall { height: 32px; }

.mock-field:last-of-type { margin-bottom: 9px; }

.mock-submit { display: inline-block; background: #FFD028; color: #5A1500; font-weight: 700; border-radius: 999px; padding: 5px 16px; }

/* HOW IT WORKS */

.how { background: #FFF3DC; padding-top: 8px; padding-bottom: 96px; }

.how-h2 { margin-top: 16px; max-width: 24ch; font-family: "Baloo 2", cursive; font-weight: 800; font-size: clamp(32px, 4vw, 54px); line-height: 1.05; color: #1B2FC4; }

.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }

.how-card { background: #FFFFFF; border-radius: 24px; padding: 32px; }

.number-chip { width: 44px; height: 44px; border-radius: 12px; background: #C42D18; color: #FFD028; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }

.how-card h3 { margin: 22px 0 10px; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 24px; line-height: 1.15; color: #1B2FC4; }

.how-card p { font-size: 16px; line-height: 1.55; color: #4A3B2E; }

/* STATS */

.stats { background: #FFD028; padding-top: 80px; padding-bottom: 80px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; }

.stat-numeral { font-family: "Baloo 2", cursive; font-weight: 800; font-size: clamp(56px, 7vw, 88px); line-height: 1; color: #C42D18; }

.stat-unit { font-size: 0.5em; }

.stat-caption { margin-top: 10px; font-size: 17px; line-height: 1.45; font-weight: 500; color: #5A1500; }

/* WHO'S BEHIND IT */

.who { background: #1B2FC4; padding-top: 96px; padding-bottom: 96px; }

.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: start; }

.who-h2 { margin-top: 16px; max-width: 22ch; font-family: "Baloo 2", cursive; font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; color: #FFF3DC; }

.who-body { margin-top: 22px; max-width: 46ch; font-size: 17px; line-height: 1.6; color: #FFFFFF; }

.who-body + .who-body { margin-top: 20px; }

.who-email { color: #FFD028; }
.who-email:hover { color: #FFD028; text-decoration: underline; }

.pilot-card { background: #FFFFFF; border-radius: 24px; padding: 36px; }

.pilot-card h3 { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 26px; line-height: 1.1; color: #1B2FC4; }

.pilot-card p { margin: 14px 0 26px; font-size: 16px; line-height: 1.55; color: #4A3B2E; }

/* FOOTER */

footer { background: #C42D18; padding-top: 36px; padding-bottom: 36px; }

.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.footer-icon { height: 36px; width: auto; display: block; }

.footer-domain { font-size: 15px; font-weight: 500; color: #FFD028; }