/* Direction A: "Match the videos" — bright navy / butter-yellow / cream, Anton headlines, host reacts to the result */
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --navy: #0C2446; --navy-2: #173A6B;
  --cream: #FFF6E9; --cream-2: #FBE9CF;
  --card: #FFFFFF;
  --gold: #FFD166;           /* butter yellow from the thumbnails (fills only) */
  --gold-hi: #FFD166;
  --gold-text: #8A5A00;
  --ink: #1F2430; --ink-2: #454C5C;
  --line: #EAD9BD;
  --good: #0B6E5F; --good-bg: #E2F4EF;
  --short: #B3261E; --short-bg: #FFEDEA;
  --coral: #F2665A; --teal: #128C7E;
  --focus: #1F5FBF;
  --radius: 16px;
  --serif: "Anton", Impact, "Arial Narrow", sans-serif;
  --sans: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body { font-weight: 500; }
strong, b { font-weight: 800; }
/* header */
.site-header { background: var(--navy); border-bottom: 6px solid var(--gold); }
.brand img { width: 58px; height: 58px; border-radius: 50%; }
.brand .wm { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.55rem; letter-spacing: .02em; line-height: 1; text-transform: uppercase; color: #fff; }
.brand .wm em { font-style: normal; color: var(--gold); }
.nav a { color: #F1F4F9; font-weight: 800; }
.nav a:hover { background: var(--navy-2); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--gold); }
/* hero */
.hero { padding-top: 34px; padding-bottom: 16px; }
.hero h1 { text-wrap: balance; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: 3rem; line-height: 1.05; color: var(--navy); }
.hero h1::after { content: ""; display: block; width: 120px; height: 8px; border-radius: 4px; background: var(--coral); margin-top: 12px; }
.hero p.lead { color: var(--ink-2); font-weight: 600; }
.examples .label { color: var(--navy); font-weight: 800; }
.chip { font-weight: 800; color: var(--navy); background: #fff; border: 3px solid var(--navy); }
.chip:hover { background: var(--gold); border-color: var(--navy); }
.chip.reset { border-color: transparent; background: transparent; }
/* cards + form */
.card { border: 2px solid var(--line); box-shadow: 0 3px 0 #EAD9BD; }
.q-label { font-weight: 800; }
.num { background: var(--gold); color: var(--navy); border: 2px solid var(--navy); font-weight: 900; }
.field input, .field select, select.big { border-color: #7C7466; font-weight: 700; }
details.more summary::before { border-color: var(--navy); }
.see-btn { background: var(--gold); color: var(--navy); border: 3px solid var(--navy); font-weight: 900; }
.see-btn:hover { background: var(--navy); color: #fff; }
.see-btn .see-sum { font-weight: 800; color: inherit; }
.back-link { color: var(--navy); }
/* results */
.results-col h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.6rem; }
.answer { border-width: 3px; position: relative; min-height: 190px; }
.answer.short { background: var(--short-bg); border-color: #F2A79F; }
.answer.good { background: var(--good-bg); border-color: #9BD3C5; }
.answer.ok { background: #FFF4D6; border-color: #F0CD72; }
.answer.short::before, .answer.good::before, .answer.ok::before {
  content: ""; float: right; width: 128px; height: 150px; margin: -8px -6px 6px 14px;
  background: center bottom / contain no-repeat;
}
.answer.short::before { background-image: url("brand/host_worried.png"); }
.answer.good::before { background-image: url("brand/host_thumbsup.png"); }
.answer.ok::before { background-image: url("brand/host_smug.png"); }
.answer .big { font-family: var(--sans); font-weight: 900; font-size: 1.8rem; line-height: 1.2; color: var(--navy); }
.answer .big strong { font-weight: 900; }
.seg-ss { background: var(--navy); }
.seg-other { background: var(--teal); }
.seg-out { background: var(--coral); }
.flow .bar { background: #F3E7D3; }
.idea { border-left-color: var(--gold); background: #FFFBF2; }
.offer button { background: var(--navy); }
.pending { color: #6B4500; background: #FFE9AE; }
.disclaimer { background: #FBE9CF; border-left-color: var(--coral); }
.site-footer { background: var(--navy); }
.claim.mid { border-color: var(--navy); border-width: 3px; }
.claim .amt { font-family: "Anton", Impact, sans-serif; font-weight: 400; }
.prose h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
table.ages tr.fra td { background: #FFF4D6; }
/* chart colors (SVG drawn by app.js) */
.chart path[fill="#D4B37A"] { fill: #FFD166; fill-opacity: .55; }
.chart path[stroke="#0F1B2D"] { stroke: #0C2446; }
.chart line[stroke="#9C3B26"] { stroke: #B3261E; }
.chart text[fill="#9C3B26"] { fill: #B3261E; }
@media (max-width: 640px) {
  .hero h1 { font-size: 2.3rem; }
  .brand .wm { font-size: 1.3rem; }
  .brand img { width: 48px; height: 48px; }
  .nav a { border-color: #2D4C7C; }
  .answer.short::before, .answer.good::before, .answer.ok::before { width: 96px; height: 112px; margin: -6px -8px 4px 10px; }
  .answer .big { font-size: 1.5rem; }
}