/* ========================================================================
   Lessons pages — private one-on-one, and corporate / group events.
   Loaded after mockup-home.css, which supplies the palette, buttons,
   .eyebrow / .section-title / .section-sub and the FAQ accordion.
   ======================================================================== */

.lesson-crumb{
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
  padding:14px 0;
  font-size:13px;color:var(--muted);
}
.lesson-crumb .container{display:flex;gap:10px;align-items:center;padding:0 40px}
.lesson-crumb a{color:var(--ivory-dim);text-decoration:none}
.lesson-crumb a:hover{color:var(--gold)}
.lesson-crumb .cur{color:var(--gold)}

.lesson-hero{
  padding:90px 40px 70px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(15,61,46,0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(212,175,55,0.10) 0%, transparent 55%),
    var(--ink);
  position:relative;
}
.lesson-hero h1.section-title{max-width:16ch}
.lesson-hero .section-sub{max-width:70ch}
.lesson-hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}

/* ---- the two-way switch between private and corporate ---- */
.lessons-switch{
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0;
}
.lessons-switch-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);
}
.lessons-switch a{
  display:block;padding:22px 32px;
  background:var(--ink-2);
  text-decoration:none;
  transition:background 0.25s,box-shadow 0.25s;
}
.lessons-switch a strong{
  display:block;
  font-family:'Fraunces',serif;font-size:19px;font-weight:700;
  color:var(--ivory-dim);letter-spacing:-0.01em;
}
.lessons-switch a span{
  display:block;margin-top:4px;
  font-size:13px;color:var(--muted);
}
.lessons-switch a:hover{background:var(--ink-3)}
.lessons-switch a:hover strong{color:var(--gold)}
/* The current page is marked rather than hidden, so the pair always reads as
   a set and the other side is always one click away. */
.lessons-switch a.on{
  background:var(--ink-3);
  box-shadow:inset 3px 0 0 var(--gold);
}
.lessons-switch a.on strong{color:var(--gold)}

/* ---- body sections ---- */
.lesson-body{padding:90px 40px}
.lesson-body-alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lesson-body .section-sub{max-width:78ch;margin-top:18px}
.lesson-body .section-sub a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(212,175,55,0.35)}

.lesson-callout{
  border-left:3px solid var(--gold);
  background:rgba(212,175,55,0.06);
  padding:20px 26px;
  margin-bottom:44px;
  font-size:16.5px;color:var(--ivory-dim);
  max-width:84ch;
}

.lesson-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
  margin-top:44px;
}
.lesson-card{background:var(--ink);padding:34px 32px}
.lesson-body-alt .lesson-card{background:var(--ink)}
.lesson-card h3{
  font-family:'Fraunces',serif;font-size:20px;font-weight:700;
  color:var(--gold);margin-bottom:12px;
}
.lesson-card p{color:var(--ivory-dim);font-size:15.5px;line-height:1.65}

.lesson-note{
  margin-top:44px;padding:30px 34px;
  border:1px solid var(--line);border-radius:8px;
  background:rgba(212,175,55,0.04);
}
.lesson-note h3{
  font-family:'Fraunces',serif;font-size:21px;font-weight:700;
  color:var(--ivory);margin-bottom:10px;
}
.lesson-note p{color:var(--ivory-dim);font-size:16px;max-width:78ch}

.lesson-split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:start}
.lesson-list{list-style:none;padding:0;margin:8px 0 0}
.lesson-list li{
  padding:14px 0 14px 30px;
  border-bottom:1px solid var(--line);
  color:var(--ivory-dim);font-size:15.5px;
  position:relative;
}
.lesson-list li::before{
  content:"";position:absolute;left:4px;top:22px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}
.lesson-list li:last-child{border-bottom:none}
.lesson-list-check li::before{
  content:"✓";background:none;
  left:0;top:13px;width:auto;height:auto;
  color:var(--gold);font-size:14px;font-weight:700;
}
.lesson-disclaimer{
  margin-top:26px;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.7;max-width:70ch;
}

/* ---- video ---- */
.lesson-video{padding:90px 40px;background:var(--ink-2);border-top:1px solid var(--line)}
.lesson-video-inner{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:center}
.lesson-video-btn{margin-top:28px;display:inline-flex}
.lesson-video-media{
  position:relative;display:block;border-radius:8px;overflow:hidden;
  border:1px solid rgba(212,175,55,0.25);
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
  text-decoration:none;
}
.lesson-video-media img{
  display:block;width:100%;height:auto;
  transition:transform 0.5s ease,filter 0.3s ease;
}
.lesson-video-media:hover img{transform:scale(1.03);filter:brightness(1.08)}
.lesson-video-media:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---- quote ---- */
.lesson-quote{
  padding:90px 40px;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(212,175,55,0.07) 0%, transparent 60%),
    var(--ink);
  border-top:1px solid var(--line);
}
.lesson-quote blockquote{margin:26px 0 0;max-width:82ch}
.lesson-quote blockquote p{
  font-family:'Fraunces',serif;
  font-size:clamp(19px,2vw,23px);
  line-height:1.6;color:var(--ivory);
  font-style:italic;margin-bottom:20px;
}
.lesson-quote blockquote footer{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--muted);
  letter-spacing:1px;text-transform:uppercase;
  padding-top:18px;border-top:1px solid var(--line);
}

/* ---- closing CTA ---- */
.lesson-cta{
  padding:90px 40px;
  background:var(--ink-2);
  border-top:1px solid var(--line);
}
.lesson-cta .section-sub{max-width:76ch}

/* ---- responsive ---- */
@media (max-width:1024px){
  .lesson-grid,.lesson-split,.lesson-video-inner,.lessons-switch-inner{grid-template-columns:1fr}
  .lesson-split{gap:40px}
  .lesson-video-inner{gap:40px}
  .lesson-hero,.lesson-body,.lesson-video,.lesson-quote,.lesson-cta{padding-left:24px;padding-right:24px}
  .lesson-crumb .container{padding:0 24px}
  /* stacked, an inset left bar reads oddly — mark the current page along the top */
  .lessons-switch a.on{box-shadow:inset 0 3px 0 var(--gold)}
}
@media (max-width:640px){
  .lesson-hero{padding-top:60px;padding-bottom:50px}
  .lesson-body,.lesson-video,.lesson-quote,.lesson-cta{padding-top:60px;padding-bottom:60px}
  .lesson-card{padding:26px 22px}
  .lesson-hero-cta{flex-direction:column;align-items:stretch}
  .lesson-hero-cta a{text-align:center;justify-content:center}
}