/* Phase 5.9A: exact example -> exact visual synchronisation. */
.phase59-memory {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #d9e6e3;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6fbfa, #fbf9ff);
}
.phase59-memory > strong {
  color: #0a8076;
  font-size: 11px;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.phase59-memory > div { display: grid; gap: 5px; }
.phase59-memory span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #30445f;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.sync-swatch { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.sync-purple { background: #6d3ff2; }
.sync-teal { background: #0a9587; }
.sync-dark { background: #10233f; }
.phase3-visual-card[data-visual-sync="exact"] { border-color: #c8ded9; }
.phase3-visual-card[data-visual-sync="exact"] .phase3-visual-caption span { color: #08796f; }
.simultaneous-system-visual { width: 100%; height: auto; min-height: 330px; }
@media (max-height: 680px) and (min-width: 980px) {
  .phase59-memory { padding: 8px 10px; gap: 5px; }
  .phase59-memory span { font-size: 11.5px; }
  .simultaneous-system-visual { min-height: 285px; }
}
@media (max-width: 760px) {
  .phase59-memory span { font-size: 13px; }
  .simultaneous-system-visual { min-height: 300px; }
}

/* Phase 5.10 visual semantic + scale correction layer. */
.phase3-visual-card>.math-visual,
.phase2-hero-visual>.math-visual{width:100%;height:100%;min-width:0;min-height:0}
.integer-story{grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr)}
.quadratic-story{grid-template-columns:minmax(235px,.66fr) minmax(0,1.34fr)}
.integer-graph,.quadratic-graph{padding:4px}
.integer-graph>.math-visual,.quadratic-graph>.math-visual{width:100%;height:100%;min-height:0}
.numberline-visual,.parabola-visual,.transformation-visual,.construction-visual,.special-angles-visual,.first-principles-visual,.annuity-visual,.unit-conversion-visual,.parallel-perpendicular-visual{width:100%;height:100%}
@media (max-width:1100px){
  .integer-story,.quadratic-story{grid-template-columns:1fr}
  .integer-graph,.quadratic-graph{min-height:390px}
}
@media (max-width:640px){
  .integer-graph,.quadratic-graph{min-height:330px}
}

/* Keep the Grade 8 integer meaning panel compact so the number line remains the hero visual. */
@media (min-width:1101px){
  .integer-story{grid-template-columns:minmax(178px,.48fr) minmax(0,1.52fr)}
  .integer-meaning{padding:14px;gap:8px}
  .integer-meaning h3{font-size:20px}
  .integer-rule{grid-template-columns:78px minmax(0,1fr);gap:7px;padding:8px;font-size:11px}
  .integer-rule strong{font-size:12px}
  .integer-equation{font-size:24px;padding:9px}
  .quadratic-story{grid-template-columns:minmax(215px,.58fr) minmax(0,1.42fr)}
  .quadratic-explain{padding:14px;gap:7px}
}