.lesson-page { background: var(--d-white); }

.lesson-hero {
  position: relative;
  overflow: hidden;
  padding: 126px 0 62px;
  text-align: center;
  background:
    radial-gradient(circle at 82% 12%,rgba(67,174,203,.22),transparent 30%),
    linear-gradient(145deg,#f7fbfa,#e7f5f1);
}
.lesson-hero::after {
  content: "";
  position: absolute;
  right: -280px;
  bottom: -470px;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(20,127,151,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.1),0 0 0 160px rgba(255,255,255,.07);
}
.lesson-hero-inner { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; }
.lesson-hero .d-eyebrow { display: inline-flex; padding: 7px 11px; background: rgba(47,117,232,.09); border-radius: 999px; }
.lesson-hero h1 { margin-inline: auto; font-size: clamp(2.5rem,5vw,4.25rem); }
.lesson-hero .d-lead { margin-inline: auto; }
.lesson-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.lesson-meta span { padding: 7px 11px; color: var(--d-muted); background: rgba(255,255,255,.78); border: 1px solid var(--d-line); border-radius: 999px; font-size: .79rem; font-weight: 750; }

.lesson-progress { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); max-width: 780px; margin: 34px auto 0; padding: 8px; background: rgba(255,255,255,.86); border: 1px solid var(--d-line); border-radius: 19px; box-shadow: 0 12px 32px rgba(25,83,96,.08); }
.lesson-progress > a,.lesson-progress > span { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-height: 56px; padding: 8px 12px; color: var(--d-muted); border-radius: 13px; font-size: .82rem; font-weight: 800; text-align: left; text-decoration: none; }
.lesson-progress > a:hover { color: var(--d-blue-dark); background: #eef4ff; }
.lesson-progress > .is-current { color: var(--d-ink); background: #e8f0ff; }
.lesson-progress-number { display: grid; width: 34px; height: 34px; place-items: center; color: var(--d-blue-dark); background: #fff; border: 1px solid #bed0e8; border-radius: 50%; font-weight: 900; }
.lesson-progress > .is-current .lesson-progress-number { color: #fff; background: var(--d-blue); border-color: var(--d-blue); }

.lesson-main { padding: 76px 0 0; background: var(--d-paper); }
.lesson-video-shell { max-width: 1000px; margin-inline: auto; padding: 13px; background: var(--d-navy); border-radius: 28px; box-shadow: var(--d-shadow); }
.lesson-video-shell video { display: block; width: 100%; aspect-ratio: 16/9; background: #061820; border-radius: 18px; object-fit: contain; }
.lesson-video-note { max-width: 820px; margin: 22px auto 0; padding: 18px 20px; text-align: center; color: var(--d-muted); background: #fff; border: 1px solid var(--d-line); border-radius: 17px; }
.lesson-video-note strong { color: var(--d-ink); }
.lesson-video-note.is-before { display: flex; align-items: center; gap: 15px; margin: 0 auto 16px; text-align: left; background: #eef4ff; border-color: #b9d0ee; }
.lesson-guidance-label { flex: 0 0 auto; padding: 7px 10px; color: #fff; background: var(--d-blue); border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .03em; }

.lesson-reward { padding: 38px 0 46px; background: var(--d-paper); }
.lesson-reward-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: center; max-width: 1000px; margin: 0 auto; padding: 28px 30px; background: linear-gradient(135deg,#fff,#f3fbf8); border: 1px solid rgba(19,143,145,.2); border-top: 4px solid var(--d-orange); border-radius: 25px; box-shadow: 0 20px 48px rgba(25,83,96,.1); }
.lesson-reward-icon { display: grid; width: 66px; height: 66px; place-items: center; background: #fff1df; border-radius: 20px; font-size: 2rem; }
.lesson-reward-copy .d-eyebrow { margin-bottom: 5px; color: var(--d-cyan-dark); }
.lesson-reward-copy h2 { margin-bottom: 7px; font-size: clamp(1.55rem,2.8vw,2.25rem); }
.lesson-reward-copy p { margin: 0; color: var(--d-muted); }
.lesson-reward-actions { display: grid; min-width: 205px; gap: 10px; text-align: center; }
.lesson-reward-actions .d-text-link { font-size: .78rem; }
#experience-title,#app-title { scroll-margin-top: 105px; }
.result-finale { background: #f6fbf9; }
.result-finale .lesson-reward-card { max-width: 1080px; }

.lesson-section { padding: 80px 0; }
.lesson-section-white { background: #fff; }
.lesson-section-mint { background: var(--d-mint); }
.lesson-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 21px; }
.lesson-card { padding: 29px; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius); }
.lesson-card-number { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 22px; color: #fff; background: var(--d-blue); border-radius: 14px; font-weight: 900; }
.lesson-card:nth-child(2) .lesson-card-number { background: var(--d-cyan-dark); }
.lesson-card:nth-child(3) .lesson-card-number { color: var(--d-ink); background: var(--d-orange); }
.lesson-card .lesson-card-icon { color: var(--d-ink); background: #e8f0ff; font-size: 1.18rem; }
.lesson-card:nth-child(2) .lesson-card-icon { color: var(--d-ink); background: #e2f5f1; }
.lesson-card:nth-child(3) .lesson-card-icon { color: var(--d-ink); background: #fff0df; }
.lesson-card p { margin-bottom: 0; color: var(--d-muted); }

.lesson-details { max-width: 860px; margin: 31px auto 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }
.lesson-details summary { position: relative; padding: 19px 40px 19px 0; font-weight: 850; cursor: pointer; list-style: none; }
.lesson-details summary::-webkit-details-marker { display: none; }
.lesson-details summary::after { content: "+"; position: absolute; right: 5px; color: var(--d-blue-dark); font-size: 1.45rem; }
.lesson-details[open] summary::after { content: "−"; }
.lesson-details ol { display: grid; gap: 10px; margin: 0 0 24px; padding-left: 24px; color: var(--d-muted); }

.lesson-worksheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
.lesson-pdf { overflow: hidden; min-height: 480px; background: #fff; border: 1px solid var(--d-line); border-radius: 25px; box-shadow: 0 18px 44px rgba(25,83,96,.11); }
.lesson-pdf iframe { display: block; width: 100%; height: 480px; border: 0; }
.lesson-checks { display: grid; gap: 14px; margin: 26px 0; padding: 0; list-style: none; }
.lesson-checks li { display: grid; grid-template-columns: 25px 1fr; gap: 11px; color: var(--d-muted); }
.lesson-checks li::before { content: "✓"; display: grid; width: 24px; height: 24px; place-items: center; color: var(--d-cyan-dark); background: #d9eee8; border-radius: 50%; font-size: .75rem; font-weight: 900; }
.lesson-sequence-note { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin: 22px 0 4px; padding: 16px 17px; color: #37505c; background: rgba(255,255,255,.78); border: 1px solid rgba(19,143,145,.2); border-radius: 16px; }
.lesson-sequence-note > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--d-cyan-dark); background: #ddf3ed; border-radius: 11px; font-size: 1.15rem; font-weight: 900; }
.lesson-sequence-note p { margin: 0; font-size: .88rem; line-height: 1.55; }
.lesson-sequence-note strong { color: var(--d-ink); }
.lesson-bottom-next { padding: 30px 0; color: #fff; background: var(--d-navy); }
.lesson-bottom-next-inner { display: flex; align-items: center; justify-content: center; gap: 24px; }
.lesson-bottom-next h2 { margin: 0; color: #fff; font-size: clamp(1.35rem,2.5vw,1.9rem); }

.lesson-next { padding: 82px 0; color: #fff; text-align: center; background: var(--d-navy); }
.lesson-next h2 { max-width: 760px; margin-inline: auto; }
.lesson-next p { max-width: 650px; margin: 0 auto 26px; color: rgba(255,255,255,.7); }
.lesson-next .d-actions { justify-content: center; }

.result-grid-modern { display: grid; grid-template-columns: repeat(3,1fr); gap: 21px; }
.result-card-modern { padding: 29px; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius); }
.result-card-modern:nth-child(2) .lesson-card-number { background: var(--d-cyan-dark); }
.result-card-modern:nth-child(3) .lesson-card-number { color: var(--d-ink); background: var(--d-orange); }
.result-prompt-modern { margin: 15px 0; padding: 13px 15px; color: var(--d-blue-dark); background: #eef4ff; border-radius: 13px; font-weight: 850; text-align: center; }
.result-checklist-modern { display: grid; gap: 11px; margin: 18px 0 0; padding: 0; list-style: none; }
.result-checklist-modern li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; color: var(--d-muted); font-size: .9rem; }
.result-checklist-modern li::before { content: "✓"; color: var(--d-cyan-dark); font-weight: 900; }
.result-summary { padding: 80px 0; color: #fff; background: var(--d-navy); }
.result-summary-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; }
.result-summary p { color: rgba(255,255,255,.72); }
.result-summary-card { padding: 31px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; }
.result-summary-card strong { color: #8ed9db; }
.result-app-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: center; }
.result-app-stage { display: grid; min-height: 430px; place-items: center; background: linear-gradient(145deg,var(--d-blue),var(--d-cyan)); border-radius: 29px; }
.result-app-stage img { width: 190px; border-radius: 38px; box-shadow: 0 22px 48px rgba(0,0,0,.22); }
.lesson-store-badges { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 24px; }
.lesson-store-badges a { display: inline-flex; transition: .2s; }
.lesson-store-badges a:hover { transform: translateY(-2px); }
.lesson-store-badges img { width: auto; height: 51px; }
.lesson-price-note { margin-top: 21px; padding: 15px 17px; color: #37505c; background: rgba(255,255,255,.75); border: 1px solid rgba(17,112,133,.14); border-radius: 15px; font-size: .85rem; }

@media(max-width:980px){
  .lesson-card-grid,.result-grid-modern { grid-template-columns: 1fr; }
  .lesson-worksheet-grid,.result-summary-grid,.result-app-grid { grid-template-columns: 1fr; }
  .lesson-pdf { max-width: 720px; }
  .result-app-stage { max-width: 600px; }
  .lesson-reward-card { grid-template-columns: 64px 1fr; }
  .lesson-reward-actions { grid-column: 2; grid-template-columns: auto 1fr; align-items: center; }
}
@media(max-width:720px){
  .lesson-hero { padding: 104px 0 48px; }
  .lesson-hero h1 { font-size: clamp(2.35rem,11.5vw,3.3rem); }
  .lesson-progress { grid-template-columns: 1fr; }
  .lesson-main { padding-top: 54px; }
  .lesson-video-shell { padding: 7px; border-radius: 18px; }
  .lesson-video-shell video { border-radius: 12px; }
  .lesson-video-note.is-before { display: grid; gap: 8px; padding: 15px 16px; }
  .lesson-guidance-label { justify-self: start; }
  .lesson-reward { padding: 28px 0 38px; }
  .lesson-reward-card { grid-template-columns: 1fr; gap: 16px; padding: 23px 20px; }
  .lesson-reward-icon { width: 54px; height: 54px; border-radius: 16px; font-size: 1.7rem; }
  .lesson-reward-actions { grid-column: auto; grid-template-columns: 1fr; }
  .lesson-reward-actions .d-button { width: 100%; }
  .lesson-bottom-next { padding: 28px 0; }
  .lesson-bottom-next-inner { display: grid; gap: 14px; text-align: center; }
  .lesson-bottom-next .d-button { width: 100%; }
  .lesson-section { padding: 62px 0; }
  .lesson-pdf,.lesson-pdf iframe { min-height: 380px; height: 380px; }
  .lesson-next { padding: 64px 0; }
  .lesson-store-badges { display: grid; }
  .lesson-store-badges a { justify-content: center; }
  .lesson-store-badges img { height: 50px; }
}