/* Standard lessons: the lesson-length speedometer (set piece) */
.speedo { background: var(--tarmac); color: var(--ink-on-dark); padding: 0; overflow: clip; }
.speedo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 60% at 75% 50%, rgba(242,140,30,.14), transparent 70%); pointer-events: none; }
.speedo-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 20px) 0 32px; }
.speedo-head { position: relative; margin-bottom: clamp(18px, 2.4vw, 32px); }
.speedo-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: center; }
.speedo h2 { color: var(--white); font-size: clamp(2rem, 3.5vw, 3.6rem); }
.speedo .lede { margin-top: 18px; }
.speedo-options { display: grid; gap: 12px; }
.speedo-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%;
  padding: 16px 22px; border-radius: 14px; border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  color: var(--white); cursor: pointer; text-align: left; font: inherit;
  transition: border-color .3s, background-color .3s, transform .4s var(--ease-out);
}
.speedo-opt:hover { border-color: rgba(242,140,30,.7); transform: translateX(6px); }
.speedo-opt.is-active { border-color: var(--mini); background: rgba(242,140,30,.14); }
.opt-len { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.35rem); }
.opt-price { font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--mini); font-variant-numeric: tabular-nums; }
.speedo-note { margin-top: 20px; font-size: 1rem; color: var(--ink-on-dark-soft); }
.speedo-note a { color: var(--white); text-decoration-color: var(--mini); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.speedo-note a:hover { color: var(--mini); }

.speedo-dial { position: relative; justify-self: center; width: min(100%, calc(100svh - var(--header-h) - 290px), 540px); min-width: 300px; aspect-ratio: 1; }
.speedo-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
.speedo-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 14; stroke-linecap: round; }
.speedo-fill { fill: none; stroke: var(--mini); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1000; }
.tick { stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-linecap: round; }
.tick-major { stroke: var(--white); stroke-width: 4; }
.tick-label { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 20px; fill: var(--ink-on-dark-soft); }
.dial-unit { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 13px; letter-spacing: .18em; fill: var(--ink-on-dark-soft); }
.speedo-readout { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; }
.readout-price { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.readout-len { margin-top: 6px; font-size: 1rem; color: var(--ink-on-dark-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .speedo-pin { min-height: 0; padding: clamp(72px, 9vw, 140px) 0; }
  .speedo-grid { grid-template-columns: 1fr; }
  .speedo-dial { width: min(100%, 420px); }
}

/* Dark scene: light lede */
.speedo .lede { color: var(--ink-on-dark-soft); }