/* Free lessons on the electric-blue system. Loaded after /site.css and the original /learn.css:
   remaps the old theme variables so every lesson component (cards, player, quiz, code, callouts, certificate)
   picks up the new look without touching learn-engine.js. Headline sizes are re-tuned because the old
   display face was a condensed all-caps font and Manrope is wider. */
:root {
  --copper: var(--electric); --copper-hover: var(--electric-hi);
  --silicon-blue: #A9C4F0; --glint: #E8EEF8; --slate: #0B1222; --wafer-dark: #070C18;
  --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted);
  --font-display: var(--sans); --font-body: var(--sans); --font-mono: var(--mono);
  --max-w: 1180px; --ease-out: cubic-bezier(.16, 1, .3, 1);
}
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.btn--copper { background: var(--electric); color: #04070F; box-shadow: 0 8px 28px var(--electric-glow); }
.btn--copper:hover { background: var(--electric-hi); }
.btn__arrow { width: 18px; height: 18px; }

.form-nav { background: rgba(4, 7, 15, 0.95); border-bottom-color: var(--line); }
.form-nav-back { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font: 600 1rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--electric); }

/* headlines: bold Manrope, tight tracking */
.learn-hero__headline { font-weight: 800; font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 1.0; letter-spacing: -0.045em; }
.learn-hero__headline span { display: block; background: linear-gradient(90deg, #FFFFFF 0%, #CFE0FF 40%, var(--electric) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.wcard__title { font-weight: 700; font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.025em; }
.wp-title { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.wp-lname { font-weight: 800; font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.05; letter-spacing: -0.04em; }
.lblk--h { font-weight: 700; font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.02em; }
.lquiz__q { font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; }
.wp-done__headline { font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.0; letter-spacing: -0.04em; }
.wp-master__title { font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.05; letter-spacing: -0.035em; }

/* the old serif italics read as decoration; the new system is upright and clean */
.wcard__tagline, .learn-noscript, .lquiz__explain { font-style: normal; }
.wcard__tagline { color: var(--electric-hi); }
.lquiz__opt { font-size: 1.0625rem; }
.cert-gate__label { font-weight: 600; font-size: 1.05rem; }
.wcard__summary { font-size: 1rem; line-height: 1.55; }
.wp-back { display: inline-flex; align-items: center; min-height: 44px; }

/* catalog sections: The build path (steps 1-4) leads, extras follow */
.learn-sect { grid-column: 1 / -1; display: grid; gap: 8px; }
.learn-sect__title { font: 700 clamp(1.9rem, 6.5vw, 2.8rem)/1.05 var(--sans); letter-spacing: -0.04em; }
.learn-sect__sub { color: var(--muted); max-width: 40rem; font-size: 1.0625rem; }
.learn-sect--extra { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.wcard--step { border-color: rgba(111, 168, 255, 0.45); }
.wcard--step .wcard__level { color: var(--electric); }