@font-face {
  font-family: 'DNF BitBit';
  src: url('../goldenbell/fonts/DNFBitBit-Regular.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* One reading voice throughout; only the numbers printed on cards stay plain. */
body, input, select, textarea, button, h1, h2, h3, .brand, .btn {
  font-family: 'DNF BitBit', 'Apple SD Gothic Neo', sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}

.hero h1, .page-head h1, .sub-hero h1, .quiz-card h1 {
  font-size: 40px;
  line-height: 1.45;
  letter-spacing: 0;
}

:root { --ink: #111b2e; --muted: #434e63; --blue: #2854cc; }
body { font-size: 19px; line-height: 1.9; }
.hero p, .page-head p, .sub-hero p { font-size: 19px; line-height: 1.9; }
.hero p, .sub-hero p, .lesson-section > p, .example-head p { max-width: 38rem; }
p, .ox-question, .result-note, .callout { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.title-phrase { white-space: nowrap; }
.content-stack { max-width: 960px; }
.lesson-section h2, .example-head h2, .info-card h2, .concept-card h2,
.next-step h2, .quiz-complete h2 { font-size: 24px; line-height: 1.55; letter-spacing: 0; }
.lesson-section h2, .example-head h2 { margin-bottom: 16px; }
.kicker, .badge, .counter, .place-label, .digit-column span,
.simple-table th, .magic-card-label, .bit-chip small, .formula-box small,
.quiz-optional, footer { font-size: 15px; letter-spacing: 0; }
.top nav { font-size: 16px; color: var(--ink); }
.place-box small { font-size: 15px; opacity: 1; }
.number-grid span, .nums span { font-size: 16px; color: var(--ink); }
.clean-equation { font-size: 28px; line-height: 1.7; letter-spacing: 0; overflow-wrap: anywhere; }
.ox-question { font-size: 24px; line-height: 1.7; letter-spacing: 0; }
.choice-card p { opacity: 1; }
.btn, button { line-height: 1.6; }

/* Release persistent compositing layers once text stops moving. No scaled text. */
.reveal-ready [data-reveal] { transform: translateY(12px); will-change: auto; }
.reveal-ready [data-reveal].is-visible { transform: none; will-change: auto; }

/* Card numbers such as the large 32 are intentionally not BitBit. */
.deck > b, .deck > small, .deck > span, .nums, .number-grid,
.magic-card-number, .place-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 800px) {
  .hero h1, .page-head h1, .sub-hero h1, .quiz-card h1 { font-size: 32px; }
}
@media (max-width: 600px) {
  .top { height: auto; min-height: 68px; padding-block: 12px; flex-wrap: nowrap; gap: 12px; }
  .top .brand { font-size: 17px; gap: 7px; }
  .top .brand b { width: 30px; height: 30px; border-radius: 10px; }
  .top nav { width: auto; margin-left: auto; justify-content: flex-end; gap: 12px; font-size: 14px; }
  .top nav a { padding-block: 10px; }
  .hero h1, .page-head h1, .sub-hero h1, .quiz-card h1 { font-size: 28px; }
  .hero p, .sub-hero p { font-size: 17px; line-height: 1.85; }
  .lesson-section, .worked-example, .quiz-card { padding: 24px 20px; }
  .decimal-demo, .binary-demo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .digit-column span { padding-block: 10px; }
  .lesson-section .clean-equation, .clean-equation { font-size: 20px; }
  .ox-question { font-size: 22px; padding: 20px 16px; }
  .card-sum-flow span { font-size: 14px; }
}
@media (max-width: 350px) {
  .top nav { gap: 8px; }
  .top .brand { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { transform: none; }
}

/* Keep both introductions aligned with the content cards below them. */
.sub-page .sub-hero { padding-block: 34px 24px; }
.sub-page .sub-hero-inner {
  width: min(960px, calc(100% - 36px));
  padding: 30px 32px;
}
.sub-page .sub-hero-inner::after { content: none; }
.sub-page .sub-hero h1 { margin: 10px 0; line-height: 1.32; }
.sub-page .sub-hero p { line-height: 1.7; }

@media (max-width: 600px) {
  .sub-page .sub-hero { padding-block: 24px 20px; }
  .sub-page .sub-hero-inner { padding: 22px; }
  .sub-page .sub-hero h1 { margin: 8px 0; }
  .sub-page .sub-hero p { line-height: 1.65; }
}

@media (max-width: 390px) {
  .sub-page .sub-hero-inner { width: calc(100% - 24px); }
}