/* LinguaBoost Lab interactive catalog final geometry layer.
   Scoped only to the 12 catalog pages marked with body.lb-canon-target. */
body.lb-canon-target {
  --lesson-shell: min(100% - 56px, 1320px);
  --lesson-card: var(--surface, var(--lb-bg, #fffdf7));
  --lesson-line: rgba(255, 145, 36, .24);
  --lesson-line-strong: rgba(255, 145, 36, .32);
  --lesson-shadow: 0 16px 42px rgba(134, 93, 7, .08);
  --lesson-hero-shadow: 0 24px 70px rgba(134, 93, 7, .14);
  font-family: var(--body, "Manrope", system-ui, sans-serif);
}

.lb-canon-target .canon-l-topbar,
.lb-canon-target .friendly-topbar,
.lb-canon-target .nge-shell-topbar,
.lb-canon-target .topbar {
  min-height: 64px !important;
  padding: 14px 28px 14px 42px !important;
  border-radius: 0 !important;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
}

.lb-canon-target .canon-l-tools,
.lb-canon-target .friendly-tools,
.lb-canon-target .shell-tools,
.lb-canon-target .topbar-tools {
  margin-left: auto !important;
}

.lb-canon-target .canon-l-pill,
.lb-canon-target .canon-l-audience-switch,
.lb-canon-target .canon-l-audience-btn,
.lb-canon-target .friendly-tools .btn-tool,
.lb-canon-target .palette-select,
.lb-canon-target .level-bubble,
.lb-canon-target .audience-switch,
.lb-canon-target .audience-btn,
.lb-canon-target .theme-toggle,
.lb-canon-target .lang-toggle {
  border-radius: 8px !important;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.lb-canon-target .canon-l-hero,
.lb-canon-target .hero.friendly-hero,
.lb-canon-target .friendly-hero,
.lb-canon-target .lab-hero,
.lb-canon-target .hero-banner,
.lb-canon-target .hero.is-hero-clean,
.lb-canon-target .hero.is-hero-drama,
.lb-canon-target .hero.is-hero-cosmic,
.lb-canon-target .hero-mini {
  position: relative !important;
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  height: clamp(390px, 24vw, 440px) !important;
  min-height: 390px !important;
  margin: 18px auto !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--lesson-line-strong) !important;
  box-shadow: var(--lesson-hero-shadow) !important;
  box-sizing: border-box !important;
}

.lb-canon-target .canon-l-hero-bg,
.lb-canon-target .hero-img,
.lb-canon-target .hero-banner-img,
.lb-canon-target .lab-hero-bg,
.lb-canon-target .lab-hero-visual img,
.lb-canon-target .friendly-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.lb-canon-target .friendly-photo,
.lb-canon-target .lab-hero-visual {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.lb-canon-target .canon-l-hero::after,
.lb-canon-target .friendly-hero::after,
.lb-canon-target .lab-hero::after,
.lb-canon-target .hero-banner::after,
.lb-canon-target .hero-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg, var(--lb-bg, #fff8f0)) 92%, white 8%) 0%, color-mix(in srgb, var(--bg, var(--lb-bg, #fff8f0)) 78%, transparent) 44%, transparent 82%);
}

.lb-canon-target .canon-l-hero-inner,
.lb-canon-target .friendly-hero-inner,
.lb-canon-target .lab-hero-inner,
.lb-canon-target .hero-banner-overlay,
.lb-canon-target .hero-mini-inner {
  position: relative !important;
  z-index: 2 !important;
  width: 600px !important;
  max-width: 600px !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 34px 28px 34px 46px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.lb-canon-target .hero-copy-panel,
.lb-canon-target .lab-hero-inner > div:first-child,
.lb-canon-target .hero-banner-overlay > .hero-content {
  width: 100% !important;
  max-width: 526px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lb-canon-target .canon-l-hero-title,
.lb-canon-target .friendly-title,
.lb-canon-target .hero-title,
.lb-canon-target .lab-hero-title,
.lb-canon-target .lesson-hero-title,
.lb-canon-target .hero-h1,
.lb-canon-target .hero-mini h1 {
  font-family: var(--display, "Unbounded", "Manrope", system-ui, sans-serif) !important;
  font-size: clamp(2.25rem, 3.75vw, 3.5rem) !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  max-width: 560px !important;
  text-transform: none !important;
}

.lb-canon-target .canon-l-hero-lead,
.lb-canon-target .friendly-lead,
.lb-canon-target .hero-lead,
.lb-canon-target .lab-hero-lead,
.lb-canon-target .lesson-hero-lead,
.lb-canon-target .hero-mini p {
  width: 100% !important;
  max-width: 526px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  font-family: var(--body, "Manrope", system-ui, sans-serif) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  background: color-mix(in srgb, var(--lesson-card) 76%, transparent) !important;
}

.lb-canon-target .canon-l-hero-meta,
.lb-canon-target .friendly-meta,
.lb-canon-target .hero-meta,
.lb-canon-target .lab-hero-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin-top: 2px !important;
}

.lb-canon-target .canon-l-hero-pill,
.lb-canon-target .info-pill,
.lb-canon-target .lab-badge,
.lb-canon-target .hero-badge,
.lb-canon-target .pill {
  border-radius: 8px !important;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.lb-canon-target .star-bar,
.lb-canon-target .canon-l-tracker-stars {
  display: none !important;
}

.lb-canon-target .rail,
.lb-canon-target .step-tracker,
.lb-canon-target .canon-l-tracker,
.lb-canon-target .progress-header {
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  min-height: 80px !important;
  height: auto !important;
  margin: 18px auto 22px !important;
  padding: 8px 28px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 145, 36, .28) !important;
  background: color-mix(in srgb, var(--lesson-card) 90%, transparent) !important;
  box-shadow: 0 14px 34px rgba(134, 93, 7, .08) !important;
  box-sizing: border-box !important;
}

.lb-canon-target .rail-dot,
.lb-canon-target .dot,
.lb-canon-target .step-count,
.lb-canon-target .step-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.lb-canon-target .rail-label,
.lb-canon-target .step-name,
.lb-canon-target .canon-l-tracker-step,
.lb-canon-target .canon-l-tracker-score {
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.lb-canon-target .section,
.lb-canon-target .block,
.lb-canon-target .lesson-flow,
.lb-canon-target .learn-panel,
.lb-canon-target .lesson-score-card,
.lb-canon-target .all-done,
.lb-canon-target .lesson-foot,
.lb-canon-target .prepositions-story-break,
.lb-canon-target .lesson-illustration {
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  margin: 18px auto !important;
  border-radius: 20px !important;
  border: 1px solid var(--lesson-line) !important;
  background: var(--lesson-card) !important;
  overflow: hidden !important;
  box-shadow: var(--lesson-shadow) !important;
  box-sizing: border-box !important;
}

.lb-canon-target .section-head,
.lb-canon-target .section-header,
.lb-canon-target .block-head {
  min-height: 70px !important;
  padding: 20px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255, 145, 36, .18) !important;
  box-sizing: border-box !important;
}

.lb-canon-target .section-head h2,
.lb-canon-target .section-header .section-title,
.lb-canon-target .section-title,
.lb-canon-target .block-title,
.lb-canon-target .learn-panel h2 {
  font-family: var(--display, "Unbounded", "Manrope", system-ui, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}

.lb-canon-target .section-badge,
.lb-canon-target .round-badge,
.lb-canon-target .block-time,
.lb-canon-target .block-kicker,
.lb-canon-target .a1-content-marker {
  border-radius: 8px !important;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.lb-canon-target .section-body {
  padding: 24px !important;
  font-family: var(--body, "Manrope", system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.lb-canon-target .block-intro,
.lb-canon-target .prep-task-note,
.lb-canon-target .feedback,
.lb-canon-target .task-note,
.lb-canon-target .instruction {
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.lb-canon-target .btn,
.lb-canon-target .button,
.lb-canon-target .check-btn,
.lb-canon-target .reset-btn,
.lb-canon-target .option,
.lb-canon-target .chip,
.lb-canon-target .q-opt,
.lb-canon-target .pic-opt,
.lb-canon-target .choice,
.lb-canon-target .answer-chip {
  border-radius: 8px !important;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.lb-canon-target .flip-grid,
.lb-canon-target .cards-grid,
.lb-canon-target .card-grid,
.lb-canon-target .vocab-grid,
.lb-canon-target .learn-grid,
.lb-canon-target .memory-grid,
.lb-canon-target .speak-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  gap: 14px !important;
}

.lb-canon-target .flip-front,
.lb-canon-target .card-front {
  font-family: var(--display, "Unbounded", "Manrope", system-ui, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.lb-canon-target .flip-back,
.lb-canon-target .card-back {
  font-family: var(--body, "Manrope", system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

@media (max-width: 720px) {
  body.lb-canon-target {
    --lesson-shell: min(100% - 28px, 1320px);
  }

  .lb-canon-target .canon-l-topbar,
  .lb-canon-target .friendly-topbar,
  .lb-canon-target .nge-shell-topbar,
  .lb-canon-target .topbar {
    padding: 12px 14px !important;
  }

  .lb-canon-target .canon-l-hero,
  .lb-canon-target .hero.friendly-hero,
  .lb-canon-target .friendly-hero,
  .lb-canon-target .lab-hero,
  .lb-canon-target .hero-banner,
  .lb-canon-target .hero.is-hero-clean,
  .lb-canon-target .hero.is-hero-drama,
  .lb-canon-target .hero.is-hero-cosmic,
  .lb-canon-target .hero-mini {
    height: auto !important;
    min-height: 390px !important;
  }

  .lb-canon-target .canon-l-hero-inner,
  .lb-canon-target .friendly-hero-inner,
  .lb-canon-target .lab-hero-inner,
  .lb-canon-target .hero-banner-overlay,
  .lb-canon-target .hero-mini-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 28px 20px !important;
  }

  .lb-canon-target .canon-l-hero-title,
  .lb-canon-target .friendly-title,
  .lb-canon-target .hero-title,
  .lb-canon-target .lab-hero-title,
  .lb-canon-target .lesson-hero-title,
  .lb-canon-target .hero-h1,
  .lb-canon-target .hero-mini h1 {
    font-size: clamp(2rem, 11vw, 2.75rem) !important;
  }

  .lb-canon-target .section-head,
  .lb-canon-target .section-header,
  .lb-canon-target .block-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}
/* High-specificity override for legacy canon-L body:has(.canon-l-hero) 1240px shell rules. */
body.lb-canon-target:has(.canon-l-hero) .canon-l-hero,
body.lb-canon-target:has(.canon-l-hero) .hero.friendly-hero,
body.lb-canon-target:has(.canon-l-hero) .friendly-hero,
body.lb-canon-target:has(.canon-l-hero) .lab-hero,
body.lb-canon-target:has(.canon-l-hero) .hero-banner,
body.lb-canon-target:has(.canon-l-hero) .hero-mini,
body.lb-canon-target .wrap > .canon-l-hero,
body.lb-canon-target main > .canon-l-hero,
body.lb-canon-target > .canon-l-hero {
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  height: clamp(390px, 24vw, 440px) !important;
  min-height: 390px !important;
  margin: 18px auto !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.lb-canon-target:has(.canon-l-hero) > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target:has(.canon-l-hero) main > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target:has(.canon-l-hero) .wrap > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target:has(.canon-l-hero) .container > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target .wrap > :is(.canon-l-tracker, .section, .block, .lesson-flow, .learn-panel, .lesson-score-card, .all-done, .lesson-foot, .rail),
body.lb-canon-target main > :is(.canon-l-tracker, .section, .block, .lesson-flow, .learn-panel, .lesson-score-card, .all-done, .lesson-foot, .rail) {
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px) {
  body.lb-canon-target:has(.canon-l-hero) .canon-l-hero,
  body.lb-canon-target:has(.canon-l-hero) > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
  body.lb-canon-target:has(.canon-l-hero) main > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
  body.lb-canon-target:has(.canon-l-hero) .wrap > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
  body.lb-canon-target:has(.canon-l-hero) .container > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail) {
    width: var(--lesson-shell) !important;
    max-width: 1320px !important;
  }
}

/* Normalize legacy page shells so --lesson-shell is measured from the viewport, not a 1240px wrapper. */
body.lb-canon-target > .wrap,
body.lb-canon-target main.wrap,
body.lb-canon-target > .app-container,
body.lb-canon-target main.app-container {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Final left-rail alignment: match the Prepositions World hero/content rail. */
body.lb-canon-target {
  --lesson-shell: min(100% - 56px, 1320px);
}

body.lb-canon-target > .wrap,
body.lb-canon-target main.wrap,
body.lb-canon-target > .app-container,
body.lb-canon-target main.app-container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.lb-canon-target:has(.canon-l-hero) .canon-l-hero,
body.lb-canon-target .wrap > .canon-l-hero,
body.lb-canon-target main > .canon-l-hero,
body.lb-canon-target > .canon-l-hero,
body.lb-canon-target .hero.friendly-hero,
body.lb-canon-target .friendly-hero,
body.lb-canon-target .lab-hero,
body.lb-canon-target .hero-banner,
body.lb-canon-target .hero-mini {
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  height: clamp(390px, 24vw, 440px) !important;
  min-height: 390px !important;
  margin: 18px auto !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

body.lb-canon-target:has(.canon-l-hero) .canon-l-hero .canon-l-hero-inner,
body.lb-canon-target .wrap > .canon-l-hero .canon-l-hero-inner,
body.lb-canon-target main > .canon-l-hero .canon-l-hero-inner,
body.lb-canon-target > .canon-l-hero .canon-l-hero-inner,
body.lb-canon-target .friendly-hero-inner,
body.lb-canon-target .lab-hero-inner,
body.lb-canon-target .hero-banner-overlay,
body.lb-canon-target .hero-mini-inner {
  width: 600px !important;
  max-width: 600px !important;
  min-height: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 34px 28px 34px 46px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

body.lb-canon-target .canon-l-hero-title,
body.lb-canon-target .friendly-title,
body.lb-canon-target .hero-title,
body.lb-canon-target .lab-hero-title,
body.lb-canon-target .lesson-hero-title,
body.lb-canon-target .hero-h1,
body.lb-canon-target .hero-mini h1 {
  max-width: 526px !important;
  font-size: clamp(2.25rem, 3.75vw, 3.5rem) !important;
  line-height: .96 !important;
}

body.lb-canon-target .canon-l-hero-lead,
body.lb-canon-target .friendly-lead,
body.lb-canon-target .hero-lead,
body.lb-canon-target .lab-hero-lead,
body.lb-canon-target .lesson-hero-lead,
body.lb-canon-target .hero-mini p,
body.lb-canon-target .canon-l-hero-meta,
body.lb-canon-target .friendly-meta,
body.lb-canon-target .hero-meta,
body.lb-canon-target .lab-hero-badges {
  width: 526px !important;
  max-width: 526px !important;
  box-sizing: border-box !important;
}

body.lb-canon-target .canon-l-hero-lead,
body.lb-canon-target .friendly-lead,
body.lb-canon-target .hero-lead,
body.lb-canon-target .lab-hero-lead,
body.lb-canon-target .lesson-hero-lead,
body.lb-canon-target .hero-mini p {
  margin-top: 16px !important;
}

body.lb-canon-target:has(.canon-l-hero) > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target:has(.canon-l-hero) main > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target:has(.canon-l-hero) .wrap > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target:has(.canon-l-hero) .container > :is(.canon-l-tracker, .progress, .step-tracker, .lesson-flow, .learn-panel, .lesson-score-card, .block, .section, .task-card, .vocab-panel, .china-section, .menu-section, .lesson-foot, .copyright, .all-done, .rail-wrap, .rail),
body.lb-canon-target .wrap > :is(.canon-l-tracker, .section, .block, .lesson-flow, .learn-panel, .lesson-score-card, .all-done, .lesson-foot, .rail, .lesson-illustration),
body.lb-canon-target main > :is(.canon-l-tracker, .section, .block, .lesson-flow, .learn-panel, .lesson-score-card, .all-done, .lesson-foot, .rail, .lesson-illustration) {
  width: var(--lesson-shell) !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.lb-canon-target .section-head:has(> .section-num) {
  justify-content: flex-start !important;
}

@media (max-width: 820px) {
  body.lb-canon-target {
    --lesson-shell: min(100% - 28px, 1320px);
  }

  body.lb-canon-target .canon-l-hero .canon-l-hero-inner,
  body.lb-canon-target .friendly-hero-inner,
  body.lb-canon-target .lab-hero-inner,
  body.lb-canon-target .hero-banner-overlay,
  body.lb-canon-target .hero-mini-inner,
  body.lb-canon-target .canon-l-hero-lead,
  body.lb-canon-target .friendly-lead,
  body.lb-canon-target .hero-lead,
  body.lb-canon-target .lab-hero-lead,
  body.lb-canon-target .lesson-hero-lead,
  body.lb-canon-target .hero-mini p,
  body.lb-canon-target .canon-l-hero-meta,
  body.lb-canon-target .friendly-meta,
  body.lb-canon-target .hero-meta,
  body.lb-canon-target .lab-hero-badges {
    width: 100% !important;
    max-width: none !important;
  }

  body.lb-canon-target .canon-l-hero .canon-l-hero-inner,
  body.lb-canon-target .friendly-hero-inner,
  body.lb-canon-target .lab-hero-inner,
  body.lb-canon-target .hero-banner-overlay,
  body.lb-canon-target .hero-mini-inner {
    padding: 28px 22px !important;
  }
}