/*
 * "Classic" preview: the live fanmore.ca, changed as little as possible.
 *
 *  - Fonts: Orbitron kept (self-hosted), Pangram for body text, and the
 *    brand guide's Pilot Command for the FANMORE logo only.
 *  - Every section from "What is FanMore?" down sits on white, in FanMore
 *    blue and navy, instead of on blue in faded lavender.
 *  - Contrast: every text colour meets WCAG AA. The live page's muted text
 *    was lavender or cyan at 20–75% opacity (1.3:1 to 3.9:1), and its red
 *    buttons carried white text at 3.6:1.
 *
 * Loaded after the page's own <style>, so it only has to name what changes.
 */
:root {
  --ink: #1800DF;       /* FanMore blue: body text on white, 9.98:1 */
  --ink-2: #0A006B;     /* navy: secondary text on white, 17.1:1 */
  --line: #D6D4F7;      /* decorative rules */
  --field: #7B73E8;     /* form borders, 3.4:1 on white */
}

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'FM Pilot Command'; src: url(/fonts/pilot-command.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'FM Pangram'; src: url(/fonts/pangram-regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'FM Pangram'; src: url(/fonts/pangram-bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
/* Orbitron everywhere the live page uses it (open licence, self-hosted);
   Pilot Command, the brand guide's display face, only for the FANMORE logo.
   Pilot Command is all capitals and very wide — right for a logotype, hard
   going for headings, labels and figures. Kevin, 28 Sep 2026. */
@font-face { font-family: 'FM Orbitron'; src: url(/fonts/orbitron-variable.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
.nav-logo, .hero-wordmark, .footer-logo { font-family: 'FM Pilot Command', 'FM Orbitron', sans-serif; }

/* Pangram is wider than Rajdhani; a touch smaller keeps the same measure. */
body { font-size: 16px; }

/* ── The blue top: fixed where it failed, otherwise unchanged ──────────── */
.hero-badge { color: var(--lav); }                 /* was lavender at 50% */
.hero-cta { background: var(--cyan); color: var(--darker); }   /* white on red was 3.6:1 */
.hero-cta:hover { background: var(--white); }
.nav-cta { background: var(--cyan) !important; color: var(--darker) !important; }
.nav-cta:hover { background: var(--white) !important; }
.ticker-inner, .ticker-inner span { color: var(--darker); }    /* navy on red, 4.7:1 */
.ticker-inner span.sep { color: var(--white); }

/* ── From "What is FanMore?" down: white, blue and navy ─────────────────── */
#about, #how, #audiences, #contact { background: var(--white); color: var(--ink); }
/* A strip of the brand between white sections, so they still read as blocks. */
#how, #audiences, #contact { border-top: 10px solid var(--blue); }
.section-eyebrow { color: var(--ink); }
.section-eyebrow::before { background: var(--red); }
.section-title { color: var(--ink); }
.section-title .accent-cyan { color: var(--ink-2); }   /* cyan on white is 1.9:1 */

.about-body { color: var(--ink); }
.about-body strong { color: var(--ink-2); }
/* The stat tiles stay solid brand blue: white and cyan on blue both pass. */
.stat-grid { background: var(--white); border-color: var(--white); }
.stat-cell { background: var(--blue); }

/* The giant FANMORE watermark: on the live page it is near-transparent white,
   so painting over the cards did no harm. Visible on white, it must sit
   behind them or it hides the end of their text. */
#how::after { color: var(--lav); z-index: 0; }
.pillars-grid { position: relative; z-index: 1; }
.pillar-card { background: var(--lav); border: 1px solid var(--line); }
.pillar-card:hover { background: var(--white); border-color: var(--blue); }
.pillar-card::before { color: var(--line); }
.pillar-title { color: var(--ink); }
.pillar-body { color: var(--ink-2); }

.audiences-grid { background: var(--line); }
.audience-card { background: var(--white); }
.audience-card:hover { background: var(--lav); }
.audience-card:nth-child(1) .audience-tag { color: var(--darker); }  /* navy on red 4.7:1; white was 3.7:1 */
.audience-title { color: var(--ink); }
.audience-body { color: var(--ink-2); }

#contact::before { display: none; }
.contact-info-title { color: var(--ink); }
.contact-email { color: var(--ink); border-bottom-color: var(--ink); }
.contact-email:hover { color: var(--ink-2); border-color: var(--ink-2); }
.contact-blurb { color: var(--ink-2); }
.contact-person { border-left-color: var(--cyan); }
.contact-person-kind { color: var(--ink); }
.contact-person-name { color: var(--ink); }
.contact-person-role { color: var(--ink-2); }
.contact-person a { color: var(--ink); }
.contact-person a:hover { color: var(--ink-2); }
.form-field label { color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--white); border: 2px solid var(--field); color: var(--ink-2);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #5B57A6; }
.form-field select option { background: var(--white); color: var(--ink-2); }
.submit-btn { background: var(--blue); color: var(--white); }   /* white on red was 3.6:1 */
.submit-btn:hover { background: var(--darker); }
.form-success { background: var(--lav); border-color: var(--blue); color: var(--ink-2); }
.preview-note {
  margin: 0 0 1rem; padding: .7rem .9rem; border: 2px dashed #B8860B; background: #FFF8E1;
  color: var(--ink-2); font-weight: 700;
}

/* ── Brand-guide elements beside the section headings ──────────────────── */
.title-row { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.title-row .section-title { margin-bottom: 0; }
.title-art { display: flex; align-items: center; gap: .7rem; flex: none; }
.title-art-el { display: block; height: auto; }
.title-art-el.wide { width: clamp(120px, 14vw, 180px); }
.title-art-el.slashes { width: clamp(90px, 10vw, 130px); }
.title-art-el.plus { width: clamp(26px, 3vw, 38px); }
.title-art-el.plus:nth-child(2) { transform: translateY(-40%); }
.title-art-el.chev { width: clamp(40px, 4.5vw, 58px); margin-right: -.4rem; }
.title-art-el.hatch { width: clamp(16px, 1.8vw, 22px); }
.title-art-el.hatch + .hatch { transform: translateY(18%); }

/* ── Company-updates sign-up: white like every section below the hero ──
   FanMore blue and navy on white; the field matches the contact form's. */
#updates { background: var(--white); color: var(--ink); border-top: 10px solid var(--blue); position: relative; }
#updates .section-eyebrow { color: var(--ink); }
#updates .section-eyebrow::before { background: var(--red); }
#updates .section-title { color: var(--ink); }
#updates .section-title .accent-cyan { color: var(--ink-2); }   /* cyan on white is 1.9:1 */
.updates-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.updates-lede { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; margin-top: 1.2rem; max-width: 34rem; }
.updates-label { display: block; font-family: 'FM Orbitron', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; }
.updates-row { display: flex; gap: .6rem; }
.updates-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .85rem 1rem;
  background: var(--white); color: var(--ink-2); border: 2px solid var(--field);
}
.updates-row input::placeholder { color: #5B57A6; }
.updates-btn {
  font-family: 'FM Orbitron', sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--blue); color: var(--white); border: 0; padding: 0 1.4rem; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.updates-btn:hover { background: var(--darker); }
.updates-btn:disabled { cursor: wait; }
.updates-consent { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; color: var(--ink-2); font-size: .92rem; line-height: 1.5; cursor: pointer; }
.updates-consent input { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; accent-color: var(--blue); }
.updates-fine { margin-top: .9rem; font-size: .85rem; color: var(--ink-2); }
.updates-fine a { color: var(--ink); }
.updates-status { margin-top: .8rem; min-height: 1.4em; font-weight: 700; color: var(--ink); }
.updates-status.ok { color: var(--ink-2); }
.updates-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.title-art-el.tri { width: clamp(60px, 7vw, 90px); }
@media (max-width: 900px) { .updates-inner { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 520px) { .updates-row { flex-direction: column; } .updates-btn { padding: .9rem; clip-path: none; } }

/* ── Privacy policy page ─────────────────────────────────────────────────── */
.privacy-page { background: var(--blue); }
#privacy { background: var(--white); color: var(--ink-2); padding: 9rem 4rem 5rem; }
.privacy-inner { max-width: 46rem; margin: 0 auto; }
#privacy .section-title { color: var(--ink); margin-bottom: 1rem; }
#privacy .section-eyebrow { color: var(--ink); }
#privacy .section-eyebrow::before { background: var(--red); }
#privacy h2 { font-family: 'FM Orbitron', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--ink); margin: 2.4rem 0 .6rem; letter-spacing: .02em; }
#privacy h3 { font-family: 'FM Orbitron', sans-serif; font-weight: 700; font-size: .92rem; color: var(--ink); margin: 1.4rem 0 .3rem; }
#privacy p { margin: 0 0 1rem; line-height: 1.75; }
#privacy a { color: var(--ink); }
.privacy-meta { color: var(--ink); font-weight: 700; }
.privacy-draft { background: #FFF8E1; border: 2px dashed #B8860B; color: var(--ink-2); font-weight: 700; padding: .7rem 1rem; margin-bottom: 2rem; }
.privacy-todo { background: #FFF1B8; color: var(--ink-2); padding: 0 .25em; }
.footer-copy a { color: var(--lav); }
@media (max-width: 900px) { #privacy { padding: 7rem 1.25rem 4rem; } }

/* ── Falconstar (added in this preview) ─────────────────────────────────── */
#falconstar { background: var(--white); color: var(--ink); border-top: 10px solid var(--blue); position: relative; }
.falconstar-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; margin-top: 2.5rem; }
#falconstar .about-body p + p { margin-top: 1.1rem; }   /* the live page's reset zeroes p margins */
.falconstar-links { display: grid; gap: 1rem; }
.falconstar-link {
  display: block; text-decoration: none; background: var(--lav); border-left: 6px solid var(--red);
  padding: 1.1rem 1.3rem; color: var(--ink-2); transition: background .2s, border-color .2s;
}
.falconstar-link:nth-child(2) { border-left-color: var(--cyan); }
.falconstar-link:hover { background: var(--white); border-left-color: var(--blue); outline: 1px solid var(--line); }
.falconstar-link-kind { display: block; font-family: 'FM Orbitron', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: .35rem; }
.falconstar-link-title { display: block; font-family: 'FM Orbitron', sans-serif; font-size: .95rem; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.falconstar-link-where { display: block; margin-top: .45rem; font-weight: 700; color: var(--ink); }
.falconstar-caution { margin-top: 2.5rem; max-width: 72ch; font-size: .85rem; color: var(--ink-2); }
@media (max-width: 900px) { .falconstar-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ── Footer stays navy; only its faded text is fixed ───────────────────── */
.footer-copy { color: var(--lav); }                /* was lavender at 35% */