/* Versioned responsive layer: keeps returning visitors from reusing the first deployment's cached layout. */
body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.site-header {
  width: 100%;
  padding: 0 max(24px, calc((100% - var(--max)) / 2));
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 900px) {
  .site-header { padding: 0 24px; }
  .hero { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { max-width: 680px; }
  .hero-visual { width: min(100%, 680px); }
  .status-board { grid-template-columns: 1fr 1fr; padding: 0 24px; }
  .status-board > div { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .status-board > div:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, 0.15); }
  .split-heading, .curriculum-heading { grid-template-columns: 1fr; gap: 28px; }
  .reason-grid { grid-template-columns: 1fr; }
  .reason-grid article { min-height: auto; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .reason-grid p { min-height: auto; }
  .plain-language-section, .selection-section, .fit-section, .apply-section { grid-template-columns: 1fr; gap: 58px; }
  .dictionary-intro { max-width: 650px; }
  .guide-character { max-width: 520px; }
  .selection-copy, .apply-copy { max-width: 650px; }
}

@media (max-width: 760px) {
  .site-header { width: 100%; padding: 0 16px; }
}

@media (max-width: 360px) {
  .brand { gap: 9px; }
  .brand-mark { width: 36px; height: 36px; font-size: 20px; }
  .brand b { font-size: 16px; }
  .header-cta { padding: 10px 11px; font-size: 10px; }
  .hero h1 { font-size: 36px; }
  .hero-proof b { font-size: 16px; }
}