/* Learning-science graphs (Individual Tuition): chalkboard SVG panels that
   draw themselves when scrolled into view. Timing is SMIL on each SVG's own
   clock; the component pauses it until the panel is visible. */
.lv-section {
  --lv-ink:#213e38; --lv-green:#176859; --lv-copy:#5d6c65; --lv-paper:#fdfbf7;
  --lv-sage:#f0f4ec; --lv-line:#dde6df; --lv-clay:#c77d48;
  background:var(--lv-sage); color:var(--lv-ink); padding:96px 0;
}
.lv-wrap { max-width:1180px; margin-inline:auto; padding-inline:36px; }
.lv-head { max-width:680px; margin:0 auto 56px; text-align:center; }
.lv-eyebrow { color:var(--lv-green); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.lv-h2 { font-family:Outfit,system-ui,sans-serif; font-size:clamp(28px,3.2vw,44px); line-height:1.15; letter-spacing:-.035em; font-weight:650; color:var(--lv-ink); }
.lv-head p { color:var(--lv-copy); font-size:16px; line-height:1.75; margin-top:14px; }

.lv-row { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.lv-row + .lv-row { margin-top:72px; }
.lv-row--flip { grid-template-columns:.85fr 1.15fr; }
.lv-row--flip .lv-panel { order:2; }
.lv-text h3 { font-family:Outfit,system-ui,sans-serif; font-size:clamp(22px,2.2vw,28px); line-height:1.25; letter-spacing:-.025em; font-weight:600; color:var(--lv-ink); margin-bottom:16px; }
.lv-text p { color:var(--lv-copy); font-size:16px; line-height:1.8; margin-bottom:14px; }
.lv-text strong { color:var(--lv-green); font-weight:600; }
.lv-text .lv-small { font-size:13px; line-height:1.65; color:#7a8a81; margin-top:18px; margin-bottom:0; }

.lv-panel { position:relative; margin:0; background:#1f4a41; border-radius:24px; padding:16px 16px 48px; box-shadow:0 24px 50px -30px #0f3b3280; }
.lv-panel svg { display:block; width:100%; height:auto; overflow:visible; }
.lv-replay { position:absolute; right:14px; bottom:12px; height:30px; padding-inline:12px; border-radius:999px; border:1px solid #ffffff2e; background:#ffffff0d; color:#d9e6d7; font:500 12px/1 Inter,system-ui,sans-serif; cursor:pointer; transition:background-color .15s ease; }
.lv-replay:hover { background:#ffffff1f; }
.lv-replay:focus-visible { outline:3px solid var(--lv-clay); outline-offset:3px; }

.lv-grid line { stroke:#ffffff10; stroke-width:1; }
.lv-axis { stroke:#d9e6d7; stroke-width:2; stroke-linecap:round; fill:none; opacity:.8; }
.lv-curve { fill:none; stroke:#f4efe3; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.lv-curve--clay { stroke:#e3a06f; }
.lv-curve--muted { stroke:#9fb8a6; stroke-width:3; }
.lv-fill { fill:#f4efe31a; }
.lv-shade { fill:#e3a06f40; }
.lv-mean { stroke:#f4efe3; stroke-width:1.5; stroke-dasharray:4 6; }
.lv-mean--clay { stroke:#e3a06f; }
.lv-label { fill:#f4efe3; font:500 13px Inter,system-ui,sans-serif; }
.lv-label,.lv-math,.lv-tick { paint-order:stroke; stroke:#1f4a41; stroke-width:4px; stroke-linejoin:round; }
.lv-label--clay { fill:#f0bf98; }
.lv-label--muted { fill:#b9cbbd; }
.lv-label--big { font:600 16px Inter,system-ui,sans-serif; }
.lv-math { fill:#f4efe3; font:italic 18px Georgia,serif; }
.lv-tick { fill:#b9cbbd; font:500 11px Inter,system-ui,sans-serif; }
.lv-dot { fill:#e3a06f; }
.lv-bracket { stroke:#f4efe3; stroke-width:1.5; fill:none; }

@media (max-width:900px) {
  .lv-row,.lv-row--flip { grid-template-columns:1fr; gap:28px; }
  .lv-row--flip .lv-panel { order:0; }
}
@media (max-width:640px) {
  .lv-section { padding:64px 0; }
  .lv-wrap { padding-inline:16px; }
  .lv-head { margin-bottom:36px; text-align:left; }
  .lv-panel { padding:10px 8px 44px; border-radius:20px; }
  .lv-label { font-size:17px; }
  .lv-label--big { font-size:18px; }
  .lv-tick { font-size:15px; }
  .lv-math { font-size:22px; }
  .lv-replay { right:10px; bottom:9px; }
}

/* Reduced motion: show the finished graphs; the component also jumps the
   SVG clock to the end, this is the CSS backstop. */
@media (prefers-reduced-motion:reduce) {
  .lv-curve { stroke-dashoffset:0!important; }
  .lv-anim { opacity:1!important; }
  .lv-replay { display:none; }
}