/* lms.css: /learning-management-system/ only (body.page-lms). Split hero, the five-card "Teaching is your passion"
   grid, the three peach CTA bands, the four split feature blocks on the peach tint, safety video badges, the
   "Why Thousands" benefits, the testimonial pair and the flat FAQ rows. Numbers are the measured bboxes from
   reference/learning-management-system at 390 (base rules) and 1440 (min-width 1025px). */

/* ---- Shared bits ---- */
.page-lms .lms-intro { font: 400 18px/30px var(--font-sans); color: var(--c-text); text-align: center; margin: 0 auto; }
/* "Book a Demo" pills have a fixed width on desktop (281px hero, 313px bands); phones size to content */
@media (min-width: 1025px) {
  .page-lms .lms-demo { min-width: 313px; }
  .page-lms .lms-demo--hero { min-width: 281px; }
}

/* ---- Hero: text column + illustration, graph-paper background scaled to the section height ---- */
.page-lms .lms-hero { padding: 68px 0 20px; background-size: contain; }
.page-lms .lms-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 50px; justify-items: center; }
.page-lms .lms-hero__text { text-align: center; }
.page-lms .lms-hero__title { max-width: 308px; }
.page-lms .lms-hero__lead { font: 400 18px/30px var(--font-sans); color: var(--c-text); max-width: 350px; margin: 11px auto 0; }
.page-lms .lms-hero .lms-demo { margin-top: 44px; }
.page-lms .lms-hero__media { width: 100%; max-width: 350px; }
.page-lms .lms-hero__img { width: 100%; height: auto; aspect-ratio: 350 / 197; object-fit: cover; }
@media (min-width: 768px) {
  .page-lms .lms-hero { padding: 80px 0 30px; }
  .page-lms .lms-hero__grid { grid-template-columns: minmax(0, 779fr) minmax(0, 391fr); column-gap: 40px; align-items: center; padding-inline: 10px; }
  .page-lms .lms-hero__title { max-width: none; }
  .page-lms .lms-hero__lead { max-width: none; }
  .page-lms .lms-hero__media { max-width: none; }
  .page-lms .lms-hero__img { aspect-ratio: 391 / 230; }
}
@media (min-width: 1025px) {
  .page-lms .lms-hero { padding: 100px 0 30px; }
  .page-lms .lms-hero__grid { grid-template-columns: 779px 391px; justify-content: center; }
}

/* ---- "Teaching is your passion": heading, intro, then 2 + 3 bordered cards ---- */
.page-lms .lms-passion { padding: 32px 0 60px; }
.page-lms .lms-passion__title { margin-inline: calc(-1 * var(--gutter)); }
.page-lms .lms-passion__intro { margin: 15px -5px 0; }
.page-lms .lms-cards { display: grid; row-gap: 23px; margin-top: 60px; }
.page-lms .lms-cards__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 23px; }
.page-lms .lms-card { padding: 30px 0 13px 30px; }
.page-lms .lms-card .feature-card__media--bleed { margin-left: -30px; }
.page-lms .lms-card--onboarding { padding-top: 20px; }
.page-lms .lms-card--onboarding .feature-card__media { margin-bottom: 19px; }
.page-lms .lms-card--engagement { padding-right: 30px; }
.page-lms .lms-card--engagement .feature-card__media { margin-bottom: 18px; }
.page-lms .lms-card--admin { padding: 27px 0 40px 30px; background: var(--card-bg-chart) top center / contain no-repeat, var(--c-white); }
.page-lms .lms-card--admin .feature-card__media { margin-bottom: 60px; }
.page-lms .lms-card--admin .feature-card__media img { height: 166px; object-fit: contain; }
.page-lms .lms-card--business { background: var(--card-bg-lines) top center / contain no-repeat, var(--c-white); }
.page-lms .lms-card--business .feature-card__media { margin-bottom: 39px; }
@media (min-width: 768px) {
  .page-lms .lms-passion { padding: 64px 0 80px; }
  .page-lms .lms-passion__title { margin-inline: auto; text-align: left; max-width: 1006px; }
  .page-lms .lms-passion__intro { margin: 10px auto 0; max-width: 900px; }
  .page-lms .lms-cards { --container: 1180px; row-gap: 21px; margin-top: 95px; }
  .page-lms .lms-cards__row--2 { grid-template-columns: minmax(0, 572fr) minmax(0, 588fr); gap: 20px; }
  .page-lms .lms-cards__row--3 { grid-template-columns: minmax(0, 329fr) minmax(0, 364fr) minmax(0, 366fr); gap: 60px; }
  .page-lms .lms-card { padding-bottom: 15px; }
  .page-lms .lms-card .feature-card__media { margin-bottom: 20px; }
  .page-lms .lms-card--onboarding .feature-card__media { margin-bottom: 19px; }
  .page-lms .lms-card--admin { padding: 30px 0 15px 30px; }
  .page-lms .lms-card--admin .feature-card__media img { margin-right: 0; }
}
@media (min-width: 1025px) {
  .page-lms .lms-passion { padding: 80px 0 90px; }
  .page-lms .lms-passion__title { max-width: 1040px; margin-left: max(0px, calc(50% - 530px)); }
}

/* ---- Peach CTA bands (three) ---- */
.page-lms .lms-cta { padding: 48px 0 58px; }
.page-lms .lms-cta__title { margin-inline: calc(-1 * var(--gutter)); }
.page-lms .lms-cta__text { font: 500 19px/30px var(--font-sans); max-width: none; margin: 36px -5px 0; }
.page-lms .lms-cta__text--run { font-size: 18px; margin: 39px 0 0; }
.page-lms .lms-cta__title--run { padding-inline: 20px; }
.page-lms .lms-cta .btn { margin-top: 52px; }
@media (min-width: 768px) {
  .page-lms .lms-cta__title { margin-inline: auto; }
  .page-lms .lms-cta__title--run { max-width: 780px; padding-inline: 0; }
  .page-lms .lms-cta__text { max-width: 475px; margin: 29px auto 0; }
  .page-lms .lms-cta__text--run { margin-top: 30px; }
  .page-lms .lms-cta__text--ready { max-width: 452px; }
  .page-lms .lms-cta__title--ready { max-width: 1038px; }
  .page-lms .lms-cta .btn { margin-top: 45px; }
  .page-lms .lms-cta__text--run + .btn { margin-top: 44px; }
}

/* ---- "Powerful Features — For Tutors." intro ---- */
.page-lms .lms-features-intro { padding: 48px 0 63px; }
.page-lms .lms-features-intro .container { padding-inline: 16px; }
.page-lms .lms-features-intro__text { color: var(--c-ink); max-width: 563px; margin-top: 40px; }
@media (min-width: 768px) { .page-lms .lms-features-intro { padding-top: 64px; } .page-lms .lms-features-intro__text { margin-top: 41px; } }

/* ---- Split feature blocks on the peach tint (brand, batch, fees, AI) ---- */
.page-lms .lms-block { position: relative; }
.page-lms .lms-block + .lms-block { margin-top: 30px; }
.page-lms .lms-block__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-lms .lms-block__title { margin-inline: auto; }
.page-lms .lms-block__sub { font: 400 18px/30px var(--font-sans); color: var(--c-text); margin-top: 20px; }
.page-lms .lms-block__quote { margin-top: 34px; }
.page-lms .lms-block__media img { width: 100%; height: auto; }

/* Brand: the photo starts 30px (50px on desktop) above the tint band */
.page-lms .lms-block--brand { padding-bottom: 55px; }
.page-lms .lms-block--brand .lms-block__media { margin-top: -30px; }
.page-lms .lms-block__photo { border-radius: var(--r-10); box-shadow: var(--shadow-photo); aspect-ratio: 370 / 296; object-fit: cover; }
.page-lms .lms-block--brand .lms-block__title { margin-top: 60px; }
.page-lms .lms-block--brand .lms-block__quote { margin-right: -8px; }

/* Batch: the dashboard shot is pinned to the section and clipped by its bottom edge, as in the source */
.page-lms .lms-block--batch { min-height: 581px; padding-top: 40px; overflow: hidden; }
.page-lms .lms-block--batch .lms-block__media { position: absolute; top: 397px; left: calc((100% - 285px) * .55); width: 285px; }

/* Fees: heading and sub centred, shot between the sub and the copy */
.page-lms .lms-block--fees { padding: 40px 0 65px; text-align: center; }
.page-lms .lms-block--fees .lms-block__grid { margin-top: 44px; row-gap: 40px; }
.page-lms .lms-block--fees .lms-block__media { width: 326px; max-width: 100%; margin-inline: auto; }
.page-lms .lms-block--fees .lms-block__quote { margin: 0 10px; text-align: left; }

/* AI: copy first, then the composite, which hangs 75px into the safety section */
.page-lms .lms-block--ai { padding-top: 40px; text-align: center; }
.page-lms .lms-block--ai + .lms-safety { position: relative; }
.page-lms .lms-block--ai .lms-block__sub { margin-top: 19px; }
.page-lms .lms-block--ai .lms-block__quote { margin: 25px 10px 0; text-align: left; }
.page-lms .lms-block--ai .lms-block__media { width: 350px; max-width: 100%; margin: 34px auto -75px; }

@media (min-width: 768px) {
  .page-lms .lms-block__grid { column-gap: 40px; }
  .page-lms .lms-block--brand { padding-bottom: 44px; }
  .page-lms .lms-block--brand .lms-block__grid { grid-template-columns: minmax(0, 376fr) minmax(0, 764fr); column-gap: 90px; align-items: start; }
  .page-lms .lms-block--brand .lms-block__media { margin-top: -50px; }
  .page-lms .lms-block--brand .lms-block__text { padding-top: 40px; }
  .page-lms .lms-block--brand .lms-block__title { margin: 0; text-align: left; }
  .page-lms .lms-block--brand .lms-block__quote { margin-left: -30px; margin-right: 0; }
  .page-lms .lms-block__photo { aspect-ratio: 376 / 301; }

  .page-lms .lms-block--batch { min-height: 327px; padding-bottom: 55px; }
  .page-lms .lms-block--batch .lms-block__grid { grid-template-columns: minmax(0, 787fr) minmax(0, 443fr); column-gap: 0; }
  .page-lms .lms-block--batch .lms-block__title { margin: 0; text-align: left; }
  .page-lms .lms-block--batch .lms-block__quote { max-width: 661px; }
  .page-lms .lms-block--batch .lms-block__media { top: 60px; left: calc((100% - 30%) * .88); width: 30%; }

  .page-lms .lms-block--fees { padding-bottom: 0; }
  .page-lms .lms-block--fees .lms-block__grid { grid-template-columns: minmax(0, 544fr) minmax(0, 532fr); column-gap: 61px; align-items: start; margin-top: 45px; padding-left: 30px; max-width: 1167px; }
  .page-lms .lms-block--fees .lms-block__media { width: auto; margin: 0 0 -57px; }
  .page-lms .lms-block--fees .lms-block__quote { margin: 64px 0 0; }

  .page-lms .lms-block--ai .lms-block__grid { grid-template-columns: minmax(0, 595fr) minmax(0, 615fr); column-gap: 0; align-items: start; padding-inline: 10px; }
  .page-lms .lms-block--ai .lms-block__sub { margin-top: 20px; }
  .page-lms .lms-block--ai .lms-block__quote { margin: 119px 0 0; }
  .page-lms .lms-block--ai .lms-block__media { width: auto; margin: 5px 0 -111px -20px; }
}
@media (min-width: 1025px) {
  .page-lms .lms-block--fees + .lms-block--ai { margin-top: 90px; }
  .page-lms .lms-block--ai .lms-block__media { width: 635px; max-width: none; }
}

/* ---- Safety video: heading, 1150px video, badges overlaid on desktop and listed below on phones ---- */
.page-lms .lms-safety { padding: 32px 0 38px; }
.page-lms .lms-safety__title { font-size: 22px; line-height: 26.4px; max-width: 272px; }
.page-lms .lms-safety .video-block { margin-top: 50px; }
.page-lms .lms-safety .video-block__badges { gap: 0; padding: 38px 0 0 10px; }
.page-lms .lms-safety .perk__icon { width: 40px; height: 40px; margin-block: -1px; }
.page-lms .lms-safety .perk__label { padding: 10px; }
/* Phones list "Track your progress" first, as the source's tablet/mobile copy did */
.page-lms .lms-safety .perk:last-child { order: -1; }
@media (min-width: 768px) {
  .page-lms .lms-safety { padding: 48px 0 42px; }
  .page-lms .lms-safety__title { font-size: inherit; line-height: inherit; max-width: none; }
  .page-lms .lms-safety .video-block { margin-top: 40px; }
  .page-lms .lms-safety .video-block__badges { gap: 24px; padding: 0; }
  .page-lms .lms-safety .perk__icon { margin-block: 0; }
  .page-lms .lms-safety .perk__label { padding: 0 0 0 20px; }
  .page-lms .lms-safety .perk:last-child { order: 0; }
}
@media (min-width: 1025px) {
  .page-lms .lms-safety__title { font-size: 54px; line-height: 62px; }
  .page-lms .lms-safety .video-block__badges { left: 20px; right: 20px; bottom: 81px; gap: 40px; }
}

/* ---- "Why Thousands of Tutors Choose Our Platform" ---- */
.page-lms .lms-benefits { padding: 0 0 50px; }
.page-lms .lms-benefits .container { padding-inline: 16px; }
.page-lms .lms-benefits__title { font-size: 22px; line-height: 26.4px; }
.page-lms .lms-br-desktop { display: none; }
.page-lms .lms-benefits__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 44px; margin-top: 41px; padding-inline: 20px; }
.page-lms .icon-box--benefit .icon-box__title { margin: 20px 0 10px; }
.page-lms .icon-box--benefit .icon-box__text { max-width: 318px; }
@media (min-width: 768px) {
  .page-lms .lms-benefits { padding-top: 48px; }
  .page-lms .lms-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; padding-inline: 10px; }
  .page-lms .icon-box--benefit .icon-box__text { max-width: 305px; }
}
@media (min-width: 1025px) {
  .page-lms .lms-benefits .container { padding-inline: var(--gutter); }
  .page-lms .lms-benefits__title { font-size: 54px; line-height: 62px; }
  .page-lms .lms-br-desktop { display: inline; }
}

/* ---- "What Our Tutors Say": two peach avatar cards ---- */
.page-lms .lms-voices { padding: 16px 0 129px; }
.page-lms .lms-voices .container { padding-inline: 16px; }
.page-lms .lms-voices__title { font-size: 26px; line-height: 31.2px; }
.page-lms .lms-voices__intro { margin-top: 21px; }
.page-lms .lms-voices__pair { gap: 30px; margin: 76px 0 0; padding-top: 0; }
@media (min-width: 768px) {
  .page-lms .lms-voices { padding: 48px 0 177px; }
  .page-lms .lms-voices__intro { margin-top: 1px; max-width: 760px; }
}
@media (min-width: 1025px) {
  .page-lms .lms-voices .container { padding-inline: var(--gutter); }
  .page-lms .lms-voices__title { font-size: 54px; line-height: 62px; }
}

/* ---- FAQ: flat white rows with a grey hairline (the source's accordion skin) ---- */
.page-lms .lms-faq { padding: 48px 0 59px; }
.page-lms .lms-faq .accordion { margin: 20px 10px 0; }
.page-lms .lms-faq .accordion__item { border-bottom: 1px solid #D5D5D5; }
.page-lms .lms-faq .accordion__item + .accordion__item { border-top: 0; }
.page-lms .lms-faq .accordion__trigger { background: transparent; padding: 20px 32px; gap: 4px; font: 400 18px/24px var(--font-sans); }
.page-lms .lms-faq .accordion__panel { padding: 0 32px 20px; }
@media (min-width: 768px) {
  .page-lms .lms-faq .accordion { margin: 20px 0 0; }
  .page-lms .lms-faq .accordion__trigger { padding: 20px 30px; gap: 20px; }
  .page-lms .lms-faq .accordion__panel { padding: 0 30px 20px; }
}
@media (min-width: 1025px) { .page-lms .lms-faq { padding: 80px 0 107px; } }

/* ---- Weights as the live site renders them ----
   The source only ships the Circular Std Book file: weight 500 falls back to Book (no synthesis below 600), and
   <strong>/<b> are Book with synthetic bold. The rebuild's real Medium/Bold cuts are wider and heavier and change
   line breaks, so this page renders its 500 text at 400 and its body-copy bold spans as synthetic bold from the
   same Book file ("Circular Std Book Only", declared in main.css section 1). */
.page-lms main .btn,
.page-lms .lms-cta__text,
.page-lms .icon-box--benefit .icon-box__text,
.page-lms .lms-safety .perk__label { font-weight: 400; }
.page-lms .lms-passion__intro strong,
.page-lms .lms-block__quote strong { font-family: "Circular Std Book Only", var(--font-sans); font-weight: 700; color: var(--c-ink); }

/* ---- CTA "Get Started Today": label then a thin arrow ---- */
.page-lms .lms-start { gap: 5px; }
.page-lms .lms-start .lms-start__arrow { width: 1.1em; height: 1.1em; margin-block: -.05em; }


/* ---- Testimonial cards: the source's raw HTML widget sets Arial on the whole card, quote marks included ---- */
.page-lms .testimonial-card--avatar,
.page-lms .testimonial-card--avatar::before,
.page-lms .testimonial-card--avatar::after,
.page-lms .testimonial-card--avatar .testimonial-card__name,
.page-lms .testimonial-card--avatar .testimonial-card__role,
.page-lms .testimonial-card--avatar .testimonial-card__text,
.page-lms .testimonial-card--avatar .testimonial-card__signature { font-family: Arial, sans-serif; }
/* The widget's elements without their own line-height inherit the theme's 30px; its first style block also
   left translateX(±140%) on the quote marks, which the later blocks never reset (so they sit ~30px further out). */
.page-lms .testimonial-card--avatar::before,
.page-lms .testimonial-card--avatar::after,
.page-lms .testimonial-card--avatar .testimonial-card__name,
.page-lms .testimonial-card--avatar .testimonial-card__signature { line-height: 30px; }
.page-lms .testimonial-card--avatar::before { transform: translateX(-140%); }
.page-lms .testimonial-card--avatar::after { transform: translateX(140%); }

/* ---- FAQ: thin ElementsKit-style chevron drawn in CSS in place of the heavy sprite glyph ---- */
.page-lms .lms-faq .accordion__trigger .icon { display: none; }
.page-lms .lms-faq .accordion__trigger::after {
  content: ""; flex: none; width: 12px; height: 12px; margin: 6px 3px 0 0;
  border: solid currentColor; border-width: 0 2px 2px 0; color: var(--c-ink);
  transform: rotate(45deg); transition: transform var(--t-base), color var(--t-base);
}
.page-lms .lms-faq .accordion__trigger[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 0; color: var(--c-brand); }