/* Credit Academy — interactive learning styles. Loaded only on /learn pages. */

.learn-h2 { margin: 38px 0 16px; font-size: 20px; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.learn-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.learn-card:hover { transform: translateY(-4px); }
.learn-ic { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: var(--mint); color: var(--coral); }
.learn-ic .icon { width: 22px; height: 22px; }
.learn-tag { margin: 14px 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.learn-card h3 { margin: 0 0 8px; font-size: 18px; }
.learn-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.learn-card em { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--coral); font-style: normal; font-weight: 700; font-size: 13px; }
.learn-card em .icon { width: 16px; height: 16px; }

.learn-disclaimer { display: flex; gap: 12px; margin-top: 32px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.learn-disclaimer .icon { flex: 0 0 20px; color: var(--muted); }
.learn-disclaimer p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.learn-callout { display: flex; gap: 12px; margin-top: 22px; padding: 16px 18px; border: 1px solid #f1d3a8; border-radius: 13px; background: #fdf3e3; }
.learn-callout .icon { flex: 0 0 20px; color: #a9701a; }
.learn-callout div { color: #6e5320; font-size: 13px; line-height: 1.6; }
.back-link { display: inline-block; margin: 26px 0 -10px; color: var(--muted); font-size: 13px; font-weight: 700; }

/* Flip cards */
.flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.flip-card { height: 180px; padding: 0; border: 0; background: none; perspective: 1200px; cursor: pointer; text-align: left; }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { background: var(--ink); color: var(--white); }
.flip-front strong { font-size: 17px; }
.flip-front em { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-style: normal; font-size: 12px; }
.flip-front em .icon { width: 14px; height: 14px; }
.flip-back { background: var(--white); border: 2px solid var(--coral); transform: rotateY(180deg); }
.flip-back p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.flip-back small { color: var(--coral); font-weight: 700; font-size: 11px; }

/* Quiz */
.quiz { display: grid; gap: 16px; }
.quiz-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white); font-size: 13px; }
.quiz-bar strong { font-size: 15px; }
.quiz-q { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.quiz-q h4 { display: flex; gap: 11px; margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.quiz-num { flex: 0 0 26px; display: grid; height: 26px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--coral); font-size: 12px; }
.quiz-opts { display: grid; gap: 9px; }
.quiz-opt { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.quiz-opt:hover:not(:disabled) { border-color: var(--ink); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-correct { border-color: #1d9e75; background: #e6f7ef; color: #0f6e56; }
.quiz-opt.is-wrong { border-color: var(--coral); background: #fde9ea; color: var(--coral); }
.quiz-explain { display: flex; gap: 9px; margin: 13px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--soft); font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.quiz-explain .icon { flex: 0 0 16px; color: #1d9e75; }
.quiz-done { padding: 18px 20px; border-radius: 14px; background: #e6f7ef; border: 1px solid #9fe1cb; font-size: 14px; color: #0f6e56; }

/* Simulator */
.sim, .util { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.sim-controls { display: grid; gap: 18px; align-content: start; }
.sim-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 13px; font-weight: 600; }
.sim-row span small { color: var(--muted); font-weight: 400; }
.sim-row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--coral); }
.sim-row b { font-size: 14px; color: var(--coral); }
.sim-readout, .util-readout { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; border-radius: 16px; background: var(--cream); }
.sim-readout > small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.sim-score { font-size: 64px; font-weight: 800; line-height: 1; }
.sim-cat { margin: 2px 0 16px; font-size: 16px; font-weight: 700; }
.sim-track, .util-track { position: relative; width: 100%; height: 10px; border-radius: 6px; background: #e3dcd9; overflow: hidden; }
.sim-track i, .util-track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; transition: width .25s, background .25s; }
.sim-scale { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; color: var(--muted); font-size: 10px; }
.sim-tip, .util-tip { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); min-height: 30px; }

/* Utilization */
.util-inputs { display: grid; gap: 16px; align-content: start; }
.util-inputs label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; }
.util-field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); overflow: hidden; }
.util-field i { padding: 0 12px; color: var(--muted); font-style: normal; }
.util-field input { flex: 1; padding: 12px 14px 12px 0; border: 0; background: none; font-size: 16px; font-weight: 700; }
.util-field input:focus { outline: none; }
.util-pct { font-size: 60px; font-weight: 800; line-height: 1; }
.util-cat { margin: 2px 0 16px; font-size: 15px; font-weight: 700; }
.util-track { overflow: visible; }
.util-mark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); opacity: .35; }
.util-mark.good { background: #1d9e75; opacity: .6; }

/* Code explorer */
.code-search { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.code-search .icon { flex: 0 0 18px; color: var(--muted); }
.code-search input { flex: 1; padding: 13px 0; border: 0; background: none; font-size: 14px; }
.code-search input:focus { outline: none; }
.code-list { display: grid; gap: 10px; margin-top: 16px; }
.code-item { padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.code-item summary { display: flex; align-items: center; gap: 13px; cursor: pointer; list-style: none; }
.code-item summary::-webkit-details-marker { display: none; }
.code-abbr { flex: 0 0 auto; padding: 6px 11px; border-radius: 8px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; }
.code-item summary small { display: block; color: var(--muted); font-size: 11px; }
.code-item p { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.code-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* Classes */
.class-progress { padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--ink); color: var(--white); }
.class-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-size: 13px; }
.class-progress-head b { color: var(--mint); }
.class-track { width: 100%; height: 9px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; }
.class-track i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--mint); transition: width .3s; }
.class-module { margin-top: 26px; }
.lesson { margin-bottom: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.lesson summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-size: 14px; }
.lesson summary::-webkit-details-marker { display: none; }
.lesson-check { display: grid; flex: 0 0 24px; height: 24px; place-items: center; border-radius: 50%; border: 2px solid var(--line); color: transparent; }
.lesson-check .icon { width: 14px; height: 14px; }
.lesson.is-done .lesson-check { background: #1d9e75; border-color: #1d9e75; color: var(--white); }
.lesson.is-done summary strong { color: var(--muted); }
.lesson-body { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.lesson-body p { margin: 0 0 14px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* Debt payoff simulator */
.payoff { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.payoff-head, .payoff-row { display: grid; grid-template-columns: 1.4fr 1fr .7fr .9fr; gap: 8px; align-items: center; }
.payoff-head { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.payoff-row { margin-bottom: 8px; }
.payoff-row input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-size: 13px; }
.payoff-row input:focus { outline: none; border-color: var(--ink); }
.pf-num { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); overflow: hidden; }
.pf-num input { border: 0; background: none; }
.pf-num i { padding: 0 4px 0 8px; color: var(--muted); font-style: normal; font-size: 12px; }
.pf-num i:last-child { padding: 0 8px 0 0; }
.payoff-extra { display: grid; gap: 7px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.payoff-extra .pf-num { max-width: 160px; }
.payoff-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.payoff-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--cream); text-align: center; }
.payoff-card[data-strategy="avalanche"] { border-color: var(--coral); }
.pf-tag { display: inline-block; padding: 4px 11px; border-radius: 20px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 700; }
.payoff-card[data-strategy="avalanche"] .pf-tag { background: var(--coral); }
.payoff-card small { display: block; margin: 9px 0 12px; color: var(--muted); font-size: 11px; min-height: 28px; }
.pf-time { font-size: 26px; font-weight: 800; }
.pf-int { margin-top: 5px; color: var(--muted); font-size: 12px; }
.pf-int b { color: var(--ink); }
.payoff-verdict { grid-column: 1 / -1; margin: 4px 0 0; padding: 13px 15px; border-radius: 11px; background: var(--soft); font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.cert-actions { margin-top: 13px; }
.cert-ready { border-color: #9fe1cb; background: #e6f7ef; }
.cert-ready .icon { color: #1d9e75; }

/* Credit rebuilding toolkit */
.rebuild-progress { padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--ink); color: var(--white); margin-bottom: 22px; }
.rebuild-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-size: 13px; }
.rebuild-progress-head b { color: var(--mint); }
.rebuild-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.rebuild-tool { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: border-color .15s; }
.rebuild-tool.is-active { border-color: #1d9e75; box-shadow: inset 0 0 0 1px #1d9e75; }
.rebuild-ic { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--mint); color: var(--coral); }
.rebuild-tool.is-active .rebuild-ic { background: #e6f7ef; color: #1d9e75; }
.rebuild-ic .icon { width: 20px; height: 20px; }
.rebuild-tool h3 { margin: 13px 0 7px; font-size: 16px; }
.rebuild-tool p { margin: 0 0 13px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.rebuild-tool .text-link { margin-bottom: 13px; font-size: 12px; }
.rebuild-tool .js-rebuild-toggle { margin-top: auto; }
.rebuild-tool.is-active .js-rebuild-toggle { border-color: #1d9e75; color: #0f6e56; background: #e6f7ef; }

/* Credit audit */
.audit { display: grid; gap: 16px; }
.audit-progress { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); position: sticky; top: 8px; z-index: 2; }
.audit-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.audit-progress-head span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.audit-progress-head strong { white-space: nowrap; font-size: 13px; }
.audit-progress-head b { color: var(--coral); }
.audit-progress-track { width: 100%; height: 7px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.audit-progress-track i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--coral); transition: width .3s; }
.audit.is-wizard .audit-q { display: none; }
.audit.is-wizard .audit-q.is-active { display: block; animation: auditIn .25s ease; }
@keyframes auditIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.audit-foot { display: flex; }
.audit-back { padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.audit-back:hover { border-color: var(--ink); color: var(--ink); }
.audit.is-done .audit-q, .audit.is-done .audit-progress, .audit.is-done .audit-foot { display: none; }
.audit-q { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.audit-q h4 { display: flex; gap: 11px; margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.quiz-opt.is-selected { border-color: var(--coral); background: #fde9ea; color: var(--coral); }
.audit-result { padding: 28px; border: 2px solid var(--coral); border-radius: var(--radius); background: var(--white); text-align: center; box-shadow: var(--shadow); }
.audit-badge { display: inline-block; padding: 5px 14px; border-radius: 20px; background: var(--coral); color: var(--white); font-size: 12px; font-weight: 700; }
.audit-result h3 { margin: 14px 0 8px; font-size: 22px; }
.audit-result p { max-width: 520px; margin: 0 auto 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.audit-lead { max-width: 460px; margin: 18px auto 0; }
.audit-lead label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.audit-lead-row { display: flex; gap: 8px; flex-wrap: wrap; }
.audit-lead-row input { flex: 1; min-width: 120px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; }
.audit-lead-row input:focus { outline: none; border-color: var(--ink); }

@media (max-width: 720px) {
  .sim, .util, .payoff { grid-template-columns: 1fr; }
}

/* ============================================================
   Academy Portal — dark gamified hub (Stitch design, self-hosted)
   Palette: bg #131313 · surface #1c1b1b · surface-high #2d2d2d
   primary #e31e24 · gold #F1D279 · on-surface #e4e2e0
   ============================================================ */
.academy-portal {
  --ac-bg: #131313; --ac-surface: #1c1b1b; --ac-surface-high: #2d2d2d;
  --ac-outline: #3a3939; --ac-on: #e4e2e0; --ac-on-dim: #9a9a98;
  --ac-red: #e31e24; --ac-gold: #f1d279;
  --ac-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  background: var(--ac-bg); color: var(--ac-on);
  padding: 34px 0 70px;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.academy-portal .ac-wrap { max-width: 760px; }
.academy-portal a { color: inherit; }

.ac-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 30px; }
.ac-brand { font-family: var(--ac-mono); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.ac-brand em { color: var(--ac-red); font-style: normal; }
.ac-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid var(--ac-outline); border-radius: 999px; background: var(--ac-surface); font-family: var(--ac-mono); font-size: 10px; letter-spacing: .08em; }
.ac-tier { color: var(--ac-gold); font-weight: 700; }
.ac-chip-sub { color: var(--ac-on-dim); }

.ac-hero { padding-bottom: 22px; }
.ac-eyebrow { display: block; color: var(--ac-red); font-family: var(--ac-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ac-hero h1 { margin: 10px 0 8px; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.ac-hero p { margin: 0; max-width: 520px; color: var(--ac-on-dim); font-size: 14px; line-height: 1.6; }

.ac-current { display: block; position: relative; margin-bottom: 36px; padding: 22px 22px 22px 26px; border: 1px solid var(--ac-outline); border-left: 4px solid var(--ac-red); border-radius: 14px; background: linear-gradient(180deg, #232020, var(--ac-surface)); transition: border-color .2s, transform .15s; }
.ac-current:hover { transform: translateY(-2px); border-color: #5a4040; }
.ac-current-top { display: flex; align-items: center; justify-content: space-between; }
.ac-play { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--ac-red); }
.ac-play .icon { width: 15px; height: 15px; }
.ac-current strong { display: block; margin: 6px 0 16px; font-size: 19px; font-weight: 700; }
.ac-bar { height: 7px; border-radius: 999px; background: #3a3535; overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ac-red), #ff4d52); }
.ac-continue { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--ac-on); font-weight: 700; font-size: 14px; }
.ac-continue .icon { width: 15px; height: 15px; color: var(--ac-red); }

.ac-h2 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--ac-on); }
.academy-portal .ac-h2 + * { margin-top: 0; }

.ac-advance { display: grid; gap: 12px; margin-bottom: 34px; }
.ac-advance-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--ac-outline); border-radius: 14px; background: var(--ac-surface); }
.ac-advance-card strong { display: block; font-size: 15px; }
.ac-advance-card small { color: var(--ac-on-dim); font-size: 12px; }
.ac-ring-bg { fill: none; stroke: #3a3535; stroke-width: 6; }
.ac-ring-fg { fill: none; stroke: var(--ac-red); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 32px 32px; transition: stroke-dashoffset .6s ease; }
.ac-ring-text { fill: var(--ac-on); font-family: var(--ac-mono); font-size: 15px; font-weight: 700; }

.ac-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 34px; }
.ac-tile { position: relative; display: block; padding: 18px; border: 1px solid var(--ac-outline); border-radius: 14px; background: var(--ac-surface); transition: transform .15s, border-color .2s, background .2s; }
.ac-tile:hover { transform: translateY(-2px); border-color: var(--ac-red); background: var(--ac-surface-high); }
.ac-tile-ic { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 12px; border-radius: 9px; color: var(--ac-red); background: rgba(227, 30, 36, .12); }
.ac-tile-ic .icon { width: 19px; height: 19px; }
.ac-tile strong { display: block; font-size: 15px; font-weight: 700; }
.ac-tile small { display: block; margin-top: 3px; color: var(--ac-on-dim); font-size: 11px; }
.ac-tile-flag { position: absolute; top: 16px; right: 16px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: #1f9d55; }
.ac-tile-flag .icon { width: 13px; height: 13px; }
.ac-tile.is-done { border-color: rgba(31, 157, 85, .5); }

.ac-badges { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 36px; }
.ac-badge { display: grid; justify-items: center; gap: 9px; width: 84px; text-align: center; opacity: .42; filter: grayscale(1); }
.ac-badge.earned { opacity: 1; filter: none; }
.ac-badge span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; color: var(--ac-red); background: radial-gradient(circle at 50% 35%, #3a2020, #1c1b1b); border: 1px solid #4a2c2c; }
.ac-badge.earned span { box-shadow: 0 0 0 3px rgba(227, 30, 36, .18); }
.ac-badge span .icon { width: 24px; height: 24px; }
.ac-badge small { color: var(--ac-on-dim); font-size: 11px; font-weight: 600; }
.ac-badge.earned small { color: var(--ac-on); }

.ac-signin { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--ac-outline); border-radius: 12px; background: var(--ac-surface); color: var(--ac-on-dim); font-size: 13px; }
.ac-signin a { color: var(--ac-gold); font-weight: 700; }

.academy-portal .learn-disclaimer { border-color: var(--ac-outline); background: var(--ac-surface); color: var(--ac-on-dim); }
.academy-portal .learn-disclaimer strong { color: var(--ac-on); }
.academy-portal .learn-disclaimer .icon { color: var(--ac-red); }

@media (max-width: 560px) {
  .ac-hero h1 { font-size: 30px; }
  .ac-hub { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac-badges { gap: 14px; justify-content: space-between; }
}

/* Academy intro splash — animated, self-dismissing (~4.5s) */
.ac-intro {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #1c1717, #131313 70%);
  animation: acIntroOut 4.6s ease forwards;
}
.ac-intro::before {
  content: ''; position: absolute; left: 50%; top: 46%; width: 720px; height: 720px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(227, 30, 36, .26), rgba(227, 30, 36, 0) 62%);
  animation: acGlow 2.6s ease-in-out infinite;
}
.ac-intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(227, 30, 36, .07) 50%, transparent 58%);
  background-size: 100% 240%;
  animation: acScan 3.4s linear infinite;
}
.ac-intro-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 15px; text-align: center; padding: 24px; }
.ac-intro-brand { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .16em; color: #e4e2e0; text-shadow: 0 0 20px rgba(227, 30, 36, .55); opacity: 0; animation: acRise .7s ease .15s forwards; }
.ac-intro-brand em { color: #e31e24; font-style: normal; }
.ac-intro-eyebrow { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #e31e24; opacity: 0; animation: acRise .7s ease .55s forwards; }
.ac-intro-title {
  margin: 0; font-size: 50px; font-weight: 800; letter-spacing: -.025em; line-height: 1.02;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(100deg, #ffffff 28%, #f1d279 50%, #ffffff 72%);
  background-size: 230% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: acTitleIn 1s ease .9s forwards, acShimmer 3s linear 2s infinite;
}
.ac-intro-loader { width: 210px; height: 4px; margin-top: 16px; border-radius: 999px; background: #2d2d2d; overflow: hidden; opacity: 0; animation: acRise .6s ease 1.2s forwards; }
.ac-intro-loader i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #e31e24, #ff4d52, #f1d279); box-shadow: 0 0 14px rgba(227, 30, 36, .75); animation: acBar 2.6s cubic-bezier(.45, .05, .25, 1) 1.2s forwards; }
@keyframes acRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes acTitleIn { from { opacity: 0; transform: translateY(18px); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes acShimmer { from { background-position: 200% center; } to { background-position: -80% center; } }
@keyframes acBar { from { width: 0; } to { width: 100%; } }
@keyframes acGlow { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.82); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes acScan { from { background-position: 0 -70%; } to { background-position: 0 170%; } }
@keyframes acIntroOut { 0%, 80% { opacity: 1; visibility: visible; transform: scale(1); } 100% { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .ac-intro { animation: none; opacity: 0; visibility: hidden; pointer-events: none; } }

/* ============================================================
   Activity sub-pages — dark theme overrides (FCRA quiz, score sim,
   utilization, codes, payoff, classes, rebuild, myths). Scoped to
   .academy-portal so public pages are untouched. Uses --ac-* vars.
   ============================================================ */
.academy-sub { padding-top: 0; }
.academy-portal .page-hero { padding: 40px 0 30px; background: transparent; border-bottom: 1px solid var(--ac-outline); }
.academy-portal .page-hero .eyebrow { color: var(--ac-red); }
.academy-portal .page-hero h1 { color: #fff; }
.academy-portal .page-hero h1 em { color: var(--ac-red); }
.academy-portal .page-hero p { color: var(--ac-on-dim); }
.academy-portal .section { padding: 30px 0 14px; }
.academy-portal .learn-h2 { color: var(--ac-on); }
.academy-portal .back-link { color: var(--ac-on-dim); }
.academy-portal .back-link:hover { color: var(--ac-red); }
.academy-portal .text-link { color: var(--ac-red); }

.academy-portal .quiz-q,
.academy-portal .code-search,
.academy-portal .code-item,
.academy-portal .lesson,
.academy-portal .sim,
.academy-portal .util,
.academy-portal .payoff,
.academy-portal .rebuild-tool { border-color: var(--ac-outline); background: var(--ac-surface); box-shadow: none; }

.academy-portal .quiz-bar,
.academy-portal .class-progress,
.academy-portal .rebuild-progress,
.academy-portal .flip-front { background: linear-gradient(180deg, #232020, var(--ac-surface)); border: 1px solid var(--ac-outline); color: var(--ac-on); }
.academy-portal .class-progress-head b,
.academy-portal .rebuild-progress-head b { color: var(--ac-gold); }
.academy-portal .class-track { background: #3a3535; }
.academy-portal .class-track i { background: linear-gradient(90deg, var(--ac-red), #ff4d52); }

.academy-portal .flip-front strong { color: #fff; }
.academy-portal .flip-front em { color: var(--ac-gold); }
.academy-portal .flip-back { background: var(--ac-surface-high); border-color: var(--ac-red); color: var(--ac-on); }
.academy-portal .flip-back small { color: var(--ac-red); }

.academy-portal .quiz-num { background: rgba(227, 30, 36, .14); color: var(--ac-red); }
.academy-portal .quiz-opt { background: var(--ac-surface-high); border-color: var(--ac-outline); color: var(--ac-on); }
.academy-portal .quiz-opt:hover:not(:disabled) { border-color: var(--ac-red); }
.academy-portal .quiz-opt.is-correct { border-color: #1f9d55; background: rgba(31, 157, 85, .15); color: #86e3aa; }
.academy-portal .quiz-opt.is-wrong { border-color: var(--ac-red); background: rgba(227, 30, 36, .15); color: #ff8a8e; }
.academy-portal .quiz-explain { background: var(--ac-surface-high); color: var(--ac-on-dim); }
.academy-portal .quiz-explain .icon { color: #1f9d55; }
.academy-portal .quiz-done { background: rgba(31, 157, 85, .12); border-color: rgba(31, 157, 85, .4); color: #9fe7bd; }

.academy-portal .sim-row b { color: var(--ac-red); }
.academy-portal .sim-row input[type="range"] { accent-color: var(--ac-red); }
.academy-portal .sim-readout,
.academy-portal .util-readout { background: var(--ac-bg); }
.academy-portal .sim-readout > small,
.academy-portal .sim-scale,
.academy-portal .util-readout small { color: var(--ac-on-dim); }
.academy-portal .sim-track,
.academy-portal .util-track { background: #3a3535; }
.academy-portal .sim-tip,
.academy-portal .util-tip { color: var(--ac-on-dim); }
.academy-portal .util-field { background: var(--ac-surface-high); border-color: var(--ac-outline); }
.academy-portal .util-field input { color: var(--ac-on); }
.academy-portal .util-field i { color: var(--ac-on-dim); }
.academy-portal .util-mark { background: var(--ac-on); }

.academy-portal .code-search input { color: var(--ac-on); }
.academy-portal .code-search input::placeholder { color: var(--ac-on-dim); }
.academy-portal .code-search .icon { color: var(--ac-on-dim); }
.academy-portal .code-abbr { background: var(--ac-red); color: #fff; }
.academy-portal .code-item summary small,
.academy-portal .code-empty { color: var(--ac-on-dim); }
.academy-portal .code-item p { color: var(--ac-on-dim); border-top-color: var(--ac-outline); }

.academy-portal .lesson-check { border-color: var(--ac-outline); }
.academy-portal .lesson.is-done .lesson-check { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.academy-portal .lesson.is-done summary strong { color: var(--ac-on-dim); }
.academy-portal .lesson-body { border-top-color: var(--ac-outline); }
.academy-portal .lesson-body p { color: var(--ac-on-dim); }

.academy-portal .payoff-head { color: var(--ac-on-dim); }
.academy-portal .payoff-row input,
.academy-portal .pf-num { background: var(--ac-surface-high); border-color: var(--ac-outline); color: var(--ac-on); }
.academy-portal .pf-num input { color: var(--ac-on); }
.academy-portal .pf-num i { color: var(--ac-on-dim); }
.academy-portal .payoff-extra { border-top-color: var(--ac-outline); }
.academy-portal .payoff-card { background: var(--ac-bg); border-color: var(--ac-outline); }
.academy-portal .payoff-card[data-strategy="avalanche"] { border-color: var(--ac-red); }
.academy-portal .pf-tag { background: var(--ac-surface-high); color: var(--ac-on); }
.academy-portal .payoff-card[data-strategy="avalanche"] .pf-tag { background: var(--ac-red); color: #fff; }
.academy-portal .payoff-card small,
.academy-portal .pf-int { color: var(--ac-on-dim); }
.academy-portal .pf-int b { color: var(--ac-on); }
.academy-portal .payoff-verdict { background: var(--ac-surface-high); color: var(--ac-on-dim); }

.academy-portal .rebuild-ic { background: rgba(227, 30, 36, .14); color: var(--ac-red); }
.academy-portal .rebuild-tool.is-active { border-color: #1f9d55; box-shadow: inset 0 0 0 1px #1f9d55; }
.academy-portal .rebuild-tool.is-active .rebuild-ic { background: rgba(31, 157, 85, .16); color: #86e3aa; }
.academy-portal .rebuild-tool h3 { color: var(--ac-on); }
.academy-portal .rebuild-tool p { color: var(--ac-on-dim); }
.academy-portal .rebuild-tool.is-active .js-rebuild-toggle { border-color: #1f9d55; color: #9fe7bd; background: rgba(31, 157, 85, .14); }

.academy-portal .learn-callout { background: rgba(241, 210, 121, .08); border-color: rgba(241, 210, 121, .35); }
.academy-portal .learn-callout .icon { color: var(--ac-gold); }
.academy-portal .learn-callout div { color: #e7d4a4; }
.academy-portal .cert-ready { background: rgba(31, 157, 85, .12); border-color: rgba(31, 157, 85, .4); }
.academy-portal .cert-ready .icon { color: #86e3aa; }
.academy-portal .button-outline { border-color: var(--ac-outline); color: var(--ac-on); background: transparent; }
.academy-portal .button-outline:hover { border-color: var(--ac-red); color: var(--ac-red); }

/* ============================================================
   Collector's Playbook simulator — navy/green/gold (own palette)
   ============================================================ */
.collector-game {
  --cg-navy: #081a2f; --cg-card: #102a43; --cg-card2: #16365a; --cg-line: #1f3e5e;
  --cg-green: #1fbf75; --cg-gold: #f5b942; --cg-red: #e84c4f; --cg-text: #dce2f3; --cg-dim: #8fa3c0;
  margin: 18px 0; padding: 22px; border: 1px solid var(--cg-line); border-radius: 18px;
  background: var(--cg-navy); color: var(--cg-text);
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.collector-game button { font: inherit; }
.cg-disclaimer { display: flex; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--cg-line); border-radius: 11px; background: var(--cg-card); font-size: 12px; line-height: 1.55; color: var(--cg-dim); }
.cg-disclaimer .icon { flex: 0 0 18px; color: var(--cg-gold); }
.cg-disclaimer strong { color: var(--cg-text); }
.cg-header { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--cg-line); }
.cg-brand { display: block; color: var(--cg-green); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cg-title strong { font-size: 22px; font-weight: 800; }
.cg-levelwrap { display: grid; gap: 6px; min-width: 160px; }
.cg-levelwrap span { font-size: 11px; font-weight: 700; color: var(--cg-dim); letter-spacing: .04em; }
.cg-progress { height: 7px; border-radius: 999px; background: #0c2238; overflow: hidden; }
.cg-progress i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cg-green), #4edf92); transition: width .35s; }
.cg-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0; }
.cg-meter { padding: 11px 13px; border: 1px solid var(--cg-line); border-radius: 12px; background: var(--cg-card); }
.cg-meter span { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--cg-dim); }
.cg-meter span b { color: var(--cg-text); }
.cg-meter-money strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--cg-green); }
.cg-bar { height: 7px; margin-top: 9px; border-radius: 999px; background: #0c2238; overflow: hidden; }
.cg-bar i { display: block; height: 100%; width: 70%; border-radius: 999px; transition: width .35s; }
.cg-bar-good i { background: var(--cg-green); }
.cg-bar-bad i { background: var(--cg-gold); }
.cg-stage { margin-top: 6px; }
.cg-scene { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.cg-file { align-self: start; border: 1px solid var(--cg-line); border-radius: 14px; background: var(--cg-card); overflow: hidden; }
.cg-file-head { padding: 11px 15px; background: var(--cg-card2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-green); }
.cg-file dl { margin: 0; padding: 6px 15px 12px; }
.cg-file dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cg-line); }
.cg-file dl > div:last-child { border-bottom: 0; }
.cg-file dt { font-size: 11px; color: var(--cg-dim); }
.cg-file dd { margin: 0; font-size: 12px; font-weight: 600; text-align: right; }
.cg-scene-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(31,191,117,.14); color: var(--cg-green); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cg-prompt { margin: 14px 0 18px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.cg-choices { display: grid; gap: 11px; }
.cg-choice { min-height: 48px; padding: 14px 16px; border: 1px solid var(--cg-line); border-left: 4px solid var(--cg-line); border-radius: 12px; background: var(--cg-card); color: var(--cg-text); text-align: left; font-size: 14px; line-height: 1.45; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.cg-choice:hover { background: var(--cg-card2); transform: translateY(-1px); }
.cg-choice-compliant:hover { border-left-color: var(--cg-green); }
.cg-choice-risky:hover { border-left-color: var(--cg-gold); }
.cg-choice-violation:hover { border-left-color: var(--cg-red); }
.cg-fb { padding: 22px; border: 1px solid var(--cg-line); border-radius: 14px; background: var(--cg-card); animation: cgFade .3s ease; }
@keyframes cgFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cg-fb-verdict { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cg-fb-compliant .cg-fb-verdict { background: rgba(31,191,117,.16); color: var(--cg-green); }
.cg-fb-risky .cg-fb-verdict { background: rgba(245,185,66,.16); color: var(--cg-gold); }
.cg-fb-violation .cg-fb-verdict { background: rgba(232,76,79,.18); color: #ff9b9d; }
.cg-fb-why { margin: 14px 0 16px; font-size: 16px; font-weight: 600; line-height: 1.55; }
.cg-fb-box { display: grid; gap: 4px; margin-bottom: 12px; padding: 13px 15px; border-radius: 11px; background: var(--cg-navy); border: 1px solid var(--cg-line); }
.cg-fb-box b { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cg-fb-box span { font-size: 13px; line-height: 1.55; color: var(--cg-dim); }
.cg-fb-law b { color: var(--cg-gold); }
.cg-fb-tip { border-color: rgba(31,191,117,.35); }
.cg-fb-tip b { color: var(--cg-green); }
.cg-badge-won { margin: 6px 0 14px; padding: 11px 14px; border-radius: 11px; background: rgba(245,185,66,.12); border: 1px solid rgba(245,185,66,.4); color: var(--cg-gold); font-size: 13px; font-weight: 700; }
.cg-next { width: 100%; min-height: 50px; margin-top: 8px; border: 0; border-radius: 12px; background: var(--cg-green); color: #052015; font-size: 15px; font-weight: 800; cursor: pointer; transition: filter .15s; }
.cg-next:hover { filter: brightness(1.07); }
.cg-report { padding: 28px; border: 1px solid var(--cg-line); border-radius: 16px; background: var(--cg-card); text-align: center; }
.cg-report-grade { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; font-size: 40px; font-weight: 800; color: #052015; background: var(--cg-green); }
.cg-grade-C { background: var(--cg-gold); color: #2a1d00; }
.cg-grade-D, .cg-grade-F { background: var(--cg-red); color: #2a0808; }
.cg-report h3 { margin: 0 0 8px; font-size: 24px; }
.cg-report-sub { max-width: 520px; margin: 0 auto 20px; font-size: 13px; line-height: 1.6; color: var(--cg-dim); }
.cg-report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cg-stat { padding: 13px; border: 1px solid var(--cg-line); border-radius: 11px; background: var(--cg-navy); }
.cg-stat span { display: block; font-size: 11px; color: var(--cg-dim); }
.cg-stat strong { font-size: 19px; font-weight: 800; }
.cg-report-badges > span { font-size: 12px; font-weight: 700; color: var(--cg-dim); }
.cg-badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 22px; }
.cg-badge { padding: 7px 13px; border: 1px solid var(--cg-line); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--cg-dim); opacity: .55; }
.cg-badge.won { border-color: var(--cg-gold); color: var(--cg-gold); opacity: 1; background: rgba(245,185,66,.1); }
.cg-foot { margin-top: 16px; text-align: center; }
.cg-reset { padding: 9px 16px; border: 1px solid var(--cg-line); border-radius: 9px; background: transparent; color: var(--cg-dim); font-size: 12px; font-weight: 700; cursor: pointer; }
.cg-reset:hover { color: var(--cg-text); border-color: var(--cg-dim); }
@media (max-width: 640px) {
  .cg-scene { grid-template-columns: 1fr; }
  .cg-prompt { font-size: 17px; }
}

/* Flagship banner — Collector's Playbook (on the academy hub) */
.ac-banner { display: grid; grid-template-columns: 290px 1fr; overflow: hidden; margin-bottom: 24px; border: 1px solid var(--ac-outline); border-radius: 16px; background: linear-gradient(180deg, #241a1a, var(--ac-surface)); transition: transform .15s, border-color .2s; }
.ac-banner:hover { transform: translateY(-2px); border-color: var(--ac-red); }
.ac-banner-img { min-height: 190px; background: url("/assets/academy-banner.png") center / cover no-repeat, linear-gradient(135deg, #14365a, #0c141f); }
.ac-banner-body { padding: 26px; display: grid; align-content: center; gap: 9px; }
.ac-banner-tag { color: var(--ac-gold); font-family: var(--ac-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ac-banner-body h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.12; }
.ac-banner-body p { margin: 0; color: var(--ac-on-dim); font-size: 14px; line-height: 1.55; max-width: 560px; }
.ac-banner-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--ac-red); font-weight: 800; font-size: 14px; }
.ac-banner-cta .icon { width: 15px; height: 15px; }
@media (max-width: 620px) { .ac-banner { grid-template-columns: 1fr; } .ac-banner-img { min-height: 150px; } }

/* Certification callout (academy hub) */
.ac-cert { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 16px; margin-bottom: 24px; padding: 14px 20px; border: 1px solid rgba(245, 210, 121, .35); border-radius: 14px; background: linear-gradient(180deg, rgba(245, 185, 66, .08), var(--ac-surface)); transition: transform .15s, border-color .2s; }
.ac-cert:hover { transform: translateY(-2px); border-color: var(--ac-gold); }
.ac-cert-badge { width: 72px; height: 72px; flex: 0 0 72px; background: url("/assets/certification-badge.png") center / contain no-repeat; }
.ac-cert-body strong { display: block; margin: 3px 0; font-size: 16px; color: #fff; }
.ac-cert-body p { margin: 0; color: var(--ac-on-dim); font-size: 13px; line-height: 1.5; }
.ac-cert-cta { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ac-gold); color: #2a1d00; }
.ac-cert-cta .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .ac-cert { grid-template-columns: 56px 1fr; } .ac-cert-badge { width: 56px; height: 56px; flex-basis: 56px; } .ac-cert-cta { display: none; } }