:root{
  --bg:#F8FAFC;
  --panel:#FFFFFF;
  --card:#FFFFFF;
  --glass:rgba(248,250,252,.95);
  --muted:#475569;
  --text:#0F172A;
  --yellow:#EAB308;
  --brand:#C5A059;
  --highlight:#FEF08A;
  --blue:#1D4ED8;
  --radius:18px;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
}
*{box-sizing:border-box}
html,body{margin:0;background:#F8FAFC;color:#0F172A;font:16px/1.7 "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}

/* Utilities */
.container{max-width:1200px;margin:auto;padding:48px 24px}
.muted{color:var(--muted)}

/* Announcement bar */
.announce{
  display:flex;gap:.75rem;align-items:center;justify-content:center;
  padding:.65rem 1rem;background:#EFF6FF;border-bottom:1px solid #BFDBFE;
  color:#1D4ED8;font-weight:600
}
.announce .underline{text-decoration:underline}
.sirene{filter:drop-shadow(0 0 6px #f33)}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media (max-width:1000px){.hero{grid-template-columns:1fr;gap:28px}}
.hero__kicker{font-size:30px;margin:0 0 10px;border-bottom:4px solid var(--brand);display:inline-block;padding-bottom:6px}
.hero__title{font-size:56px;margin:6px 0 10px;font-weight:800}
@media (max-width:640px){.hero__title{font-size:42px}}
.hero__sub{color:var(--muted);max-width:58ch}
.hero__ctas{display:flex;gap:14px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:12px;border:1px solid #2a3455;text-decoration:none;font-weight:700}
.btn--primary{background:linear-gradient(135deg,#f7c948,#f59f00);color:#1b1200;border:none;box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--text)}
.hero__media{display:flex;justify-content:center}
.hero__frame{background:linear-gradient(135deg,#24314d,#182033);padding:10px;border-radius:22px;box-shadow:var(--shadow)}
.hero__frame img{display:block;width:min(560px,100%);height:auto;border-radius:14px}

/* Section headers */
.section{margin-top:30px}
.section__title{font-size:34px;margin:0 0 6px;text-align:center;color:#0F172A}
.section__lead{color:#475569;text-align:center;margin:0 0 28px}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1000px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.tiles{grid-template-columns:1fr}}

.tile{
  display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:inherit;
  padding:26px;border-radius:var(--radius);background:#FFFFFF;box-shadow:var(--shadow);
  border:1px solid #E2E8F0;min-height:240px;transition:transform .12s ease, box-shadow .12s ease
}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.1)}
.tile__icon{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:#EFF6FF;border:1px solid #BFDBFE
}
.tile__icon svg{width:34px;height:34px;fill:none;stroke:#1D4ED8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile__title{font-size:26px;margin:.2rem 0;color:#0F172A}
.tile__desc{color:#475569;margin:0}
.tile__meta{margin-top:auto;color:#1D4ED8;font-weight:600}

/* Tile gradients */
.grad--red{background:linear-gradient(145deg,#8e1d1d,#c02d2d)}
.grad--blue{background:linear-gradient(145deg,#1c3d8e,#233e9f)}
.grad--orange{background:linear-gradient(145deg,#a7470c,#d06214)}
.grad--midnight{background:linear-gradient(145deg,#121a27,#0d1522)}
.grad--green{background:linear-gradient(145deg,#17633c,#1d7a48)}
.grad--amber{background:linear-gradient(145deg,#8a5a08,#aa7611)}
.grad--red,.grad--blue,.grad--orange,.grad--midnight,.grad--green,.grad--amber{
  border:1px solid rgba(255,255,255,.08)
}

/* Coming soon card */
.card{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:20px;padding:24px;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.card--books{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:800px){.card--books{grid-template-columns:1fr}}
.card--books h5{font-size:20px;margin:.2rem 0 10px}
.card--books ul{margin:0;padding-left:18px;color:#d9e6ff}
.card--books li{margin:.3rem 0}
.card--books .more{color:#ffdca8}

/* Store */
.store__cta{display:flex;justify-content:center;margin:16px 0 22px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.gallery{grid-template-columns:1fr}}
.shot{background:#F8FAFC;border-radius:16px;padding:12px;border:1px solid #E2E8F0;box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto;border-radius:10px}

/* Footer */
.footer{margin-top:64px;background:#0F172A;border-top:1px solid rgba(255,255,255,.06)}
.footer__inner{display:flex;gap:40px;justify-content:space-between;align-items:flex-start;padding-top:36px}
@media (max-width:900px){.footer__inner{flex-direction:column}}
.brand{display:flex;gap:14px;align-items:center}
.brand__logo{width:44px;height:44px;border-radius:10px}
.brand__name{font-weight:800;font-size:20px}
.links{display:flex;gap:60px}
.links h6{margin:.2rem 0 8px;font-size:14px;opacity:.8;text-transform:uppercase;letter-spacing:.08em}
.links a{display:block;color:#cfe3ff;text-decoration:none;margin:.25rem 0}
.links a:hover{text-decoration:underline}
.verse{margin:10px 0 0;color:#c9d7f3;font-style:italic;opacity:.9}
.verse span{display:block;opacity:.7;margin-top:4px}
.footer__bar{display:flex;flex-direction:column;gap:.5rem;padding:16px 24px 36px;color:#a8b6d3}

/* ---------- HOMEPAGE LAYOUT ---------- */
.home { padding-block: 24px 80px; }
.home .hero { display:grid; grid-template-columns: 1.2fr 1fr; gap:48px; align-items:center; padding-block:32px 24px; }
@media (max-width: 980px){ .home .hero{grid-template-columns:1fr; gap:24px;} }

.hero .brand{font-size:40px; margin:0 0 4px;}
.hero .kicker{opacity:.7; margin:0 0 16px;}
.hero .headline{font-size:44px; line-height:1.1; margin:0 0 16px;}
.hero .sublead{opacity:.9; margin:0 0 20px;}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin: 8px 0 12px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid #2a3550; text-decoration:none; font-weight:600}
.btn-primary{background:linear-gradient(135deg,#ffce3a,#ff9a1f); color:#1a1205; border:0;}
.btn-ghost{background:transparent; color:var(--text,#0F172A);}
.pill-row{display:flex; align-items:center; gap:8px; opacity:.85}
.pill{background:#0f1626; border:1px solid #283146; padding:6px 10px; border-radius:999px;}
.pill-row .dot{opacity:.6}

.hero-art{display:flex; justify-content:center}
.hero-art img{width:min(520px,90%); border-radius:20px; border:1px solid #283146; background:#0f1626; padding:10px; box-shadow:0 10px 40px rgba(0,0,0,.35)}

/* ---------- GRID CARDS ---------- */
.paths{padding-block:32px 12px;}
.section-title{font-size:28px; margin:0 0 8px;}
.section-sub{opacity:.8; margin:0 0 18px;}

.card-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
@media (max-width: 980px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 640px){ .card-grid{grid-template-columns:1fr;} }

.card{
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border:1px solid #223049; border-radius:18px; padding:18px;
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-3px); border-color:#2f4166; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.card .card-icon{font-size:24px; background:#0f1626; border:1px solid #27324a; width:44px; height:44px; display:grid; place-items:center; border-radius:12px;}
.card h4{font-size:20px; margin:4px 0;}
.card p{opacity:.85; margin:0 0 12px;}
.card-foot{opacity:.9; font-size:.95rem; border-top:1px dashed #2b3854; padding-top:10px;}

.card.red{ background: linear-gradient(135deg, #2b0f12, #18090a); border-color:#432126; color:#eaf0ff;}
.card.blue{ background: linear-gradient(135deg, #111a38, #0c1223); border-color:#243258; color:#eaf0ff;}
.card.orange{ background: linear-gradient(135deg, #2a1707, #1b0f06); border-color:#4a2c16; color:#eaf0ff;}
.card.slate{ background: linear-gradient(135deg, #121821, #0f141c); border-color:#273142; color:#eaf0ff;}
.card.green{ background: linear-gradient(135deg, #0f281a, #0a1b12); border-color:#214f39; color:#eaf0ff;}
.card.gold{ background: linear-gradient(135deg, #2a1f05, #1b1504); border-color:#4a3a12; color:#eaf0ff;}

/* ---------- COMING SOON ---------- */
.coming{padding-block:36px}
.coming-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width: 900px){ .coming-grid{grid-template-columns:1fr;} }
.coming-card{background:#0f1626; border:1px solid #283146; border-radius:16px; padding:16px;}
.coming-card h4{margin:0 0 8px;}
.link-list{margin:0; padding-left:18px; line-height:1.7; opacity:.95}
.note{display:flex; gap:10px; align-items:center; background:#0e1524; border:1px dashed #2b3854; border-radius:12px; padding:10px 12px; margin-top:16px; opacity:.95}

/* ---------- STORE ---------- */
.store{padding-block:42px 20px;}
.store-cta{margin:8px 0 16px}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width: 900px){ .gallery{grid-template-columns:1fr 1fr;} }
@media (max-width: 560px){ .gallery{grid-template-columns:1fr;} }
.tile{background:#0f1626; border:1px solid #283146; border-radius:16px; padding:10px; display:grid; place-items:center}
.tile img{width:100%; height:auto; border-radius:10px}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.06); background:#0F172A;color:#94A3B8}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:24px;}
@media (max-width: 980px){ .footer-inner{grid-template-columns:1fr; gap:18px;} }
.footer-logo{width:56px; height:56px; border-radius:12px; border:1px solid #2a3550; background:#0f1626; padding:6px}
.brand-name{font-weight:800; margin-top:8px}
.brand-tag{opacity:.85; margin-bottom:10px}
.links-col a, .support-col a{display:block; color:#cfd8ff; text-decoration:none; margin:6px 0}
.links-col a:hover, .support-col a:hover{text-decoration:underline}
.verse{opacity:.9; margin:10px 0 0; font-style:italic}
.legal{opacity:.7; font-size:.9rem; margin-top:16px}

/* ---------- TRAINER QUESTION/ANSWER READABILITY ---------- */

/* Question stems – covers all 7 trainers */
.q-text,
.q-stem,
.question-card h2,
.qcard h2,
.h,
#questionText,
#questionHeader,
#questionArea h2,
#qText,
.prompt-text,
[id="questionText"],
[id="questionHeader"] {
  font-size: 1.25rem !important;  /* 20px */
  line-height: 1.65 !important;
  font-weight: 600 !important;
}

/* Answer / choice buttons – covers .opt, .option, .choice, .choice-label li */
.choice,
.choice-btn,
.option,
.opt,
.options label,
.options button,
.choice-label,
.choices li,
#choicesContainer button {
  font-size: 1rem !important;     /* 16px */
  line-height: 1.55 !important;
  padding: 14px 16px !important;
  min-height: 44px !important;
}

/* Question cards – better breathing room */
.question-card,
.qcard,
.q-card,
.pad {
  padding: 20px 24px !important;
}

/* All trainer action buttons – tap-friendly */
.btn,
button.btn,
[type="button"].btn {
  min-height: 44px !important;
  padding: 10px 18px !important;
  font-size: 0.95rem !important;
}

@media (max-width: 640px) {
  .q-text, .q-stem, .question-card h2, .qcard h2, .h,
  #questionText, #questionHeader, #questionArea h2, #qText, .prompt-text {
    font-size: 1.125rem !important; /* 18px on mobile */
    line-height: 1.6 !important;
  }
  .choice, .choice-btn, .option, .opt,
  .options label, .options button, .choice-label, .choices li,
  #choicesContainer button {
    font-size: 1rem !important;
    padding: 12px 14px !important;
  }
}

/* Accessibility - Big Text */
.big-text {
  font-size: 1.15em;
}

.big-text h1 { font-size: 2.5rem; }
.big-text h2 { font-size: 2rem; }
.big-text h3 { font-size: 1.5rem; }
.big-text .btn { font-size: 1.1em; }
.big-text .chip { font-size: 1em; }

/* Accessibility - Reduced Motion */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Accessible, consistent focus rings */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid #7dd3fc;       /* cyan ring */
  outline-offset: 2px;
  border-radius: 10px;
}
:where(.chip, .btn):focus-visible {
  outline-color: #facc15;            /* warmer ring for interactive chips/buttons */
}

/* Skip link — now defined globally in tffm-core.css */
/* Disabled buttons — now defined globally in tffm-core.css */
button:disabled, [type="button"]:disabled, [type="submit"]:disabled {
  background: #CBD5E1 !important;
  color: #64748B !important;
  border-color: transparent !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Nav brand image – constrained on all pages ── */
.nav-brand img {
  height: 34px !important;
  width: 34px !important;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ── Full nav styles for pages not loading tffm-core.css ── */
.site-nav{position:sticky;top:0;z-index:900;height:56px;background:rgba(248,250,252,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(15,23,42,.1);box-shadow:0 1px 4px rgba(15,23,42,.06)}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin-inline:auto;padding-inline:22px}
.nav-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex-shrink:0}
.nav-brand img{height:34px !important;width:34px !important;object-fit:cover;border-radius:6px;flex-shrink:0}
.nav-brand-text{display:flex;flex-direction:column;line-height:1}
.nav-brand-name{font-size:.88rem;font-weight:700}
.nav-brand-tag{font-size:.62rem;opacity:.6;text-transform:uppercase;letter-spacing:.09em;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:1px}
.nav-link{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;text-decoration:none;color:inherit;font-size:.84rem;font-weight:500;white-space:nowrap}
.nav-link:hover{background:rgba(29,78,216,.07);color:#1D4ED8}
.nav-link svg{width:13px !important;height:13px !important;stroke:currentColor;flex-shrink:0}
.nav-burger{display:none}
.nav-drawer{display:none}
@media(max-width:768px){.nav-links{display:none}.nav-burger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;color:inherit}}

/* ── Utility ── */
.hidden { display: none !important; }
/* ── YELLOW STUDY HIGHLIGHT — correct answers in NREMT/textbook/math ──────── */
.choice-btn.correct,
.option.correct,
.opt.correct,
[data-state="correct"],
.correct-answer {
  background: #FEF08A !important;
  color: #0F172A !important;
  border-color: #EAB308 !important;
}