.public-body {
  background: #fbfcfa;
}

.public-landing {
  overflow: hidden;
  color: #18231d;
}

.public-container {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.public-header {
  border-bottom: 1px solid #e4ebe5;
  background: rgba(255, 255, 255, 0.96);
}

.public-navbar,
.public-brand,
.public-nav,
.public-nav-actions,
.public-hero-actions,
.public-trust-row,
.public-section-heading,
.public-heading-inline,
.public-avatar-row,
.public-footer-bottom {
  display: flex;
  align-items: center;
}

.public-navbar {
  min-height: 64px;
  justify-content: space-between;
  gap: 26px;
}

.public-brand {
  flex: 0 0 auto;
  gap: 9px;
  color: #17211b;
  font-size: 16px;
}

.public-brand-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: #168758;
  font-size: 17px;
  font-weight: 800;
}

.public-brand small {
  color: #7a857e;
  font-size: 14px;
}

.public-nav {
  align-self: stretch;
  gap: 28px;
}

.public-nav a {
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: #47534b;
  font-size: 13px;
  font-weight: 700;
}

.public-nav a:hover,
.public-nav a.is-active {
  border-color: #16905d;
  color: #087146;
}

.public-nav-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.public-language-switcher select {
  min-height: 34px;
  border-color: #d9e4dc;
}

.public-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid #d9e4dc;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.public-button-primary {
  border-color: #078451;
  color: #fff;
  background: #078451;
  box-shadow: 0 7px 16px rgba(10, 127, 79, 0.16);
}

.public-button-primary:hover {
  background: #076d43;
}

.public-button-secondary {
  color: #14643f;
  background: #fff;
}

.public-button-secondary:hover {
  border-color: #8ac9a8;
  background: #f3faf5;
}

.public-button-large {
  min-height: 41px;
  padding: 10px 18px;
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(540px, 1.1fr);
  align-items: center;
  gap: 35px;
  min-height: 354px;
  padding: 28px 0 24px;
}

.public-kicker,
.public-eyebrow {
  display: inline-block;
  color: #14714a;
  font-size: 12px;
  font-weight: 800;
}

.public-kicker {
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecf7f0;
}

.public-hero h1 {
  max-width: 580px;
  margin: 12px 0 12px;
  color: #172033;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

.public-hero h1 span {
  color: #079055;
}

.public-hero-copy > p {
  max-width: 570px;
  margin: 0;
  color: #606b64;
  font-size: 14px;
}

.public-hero-actions {
  gap: 12px;
  margin-top: 17px;
}

.public-trust-row {
  flex-wrap: wrap;
  gap: 13px 21px;
  margin-top: 29px;
  color: #627068;
  font-size: 11px;
  font-weight: 700;
}

.public-trust-row i {
  margin-right: 6px;
  color: #14915b;
  font-size: 15px;
}

.public-hero-collage {
  position: relative;
  height: 312px;
}

.collage-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid #e1e8e2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 23px rgba(25, 55, 37, 0.09);
}

.collage-lesson {
  z-index: 2;
  top: 8px;
  left: 52px;
  width: 286px;
  min-height: 126px;
  padding: 14px;
}

.collage-card-header,
.collage-progress-label,
.collage-lesson-footer,
.collage-profile,
.collage-course-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collage-card-header {
  color: #778178;
  font-size: 9px;
}

.collage-card-header i {
  color: #168758;
}

.collage-lesson > strong {
  display: block;
  margin: 8px 0 10px;
  font-size: 13px;
}

.collage-progress-label {
  color: #69756d;
  font-size: 8px;
}

.collage-progress {
  overflow: hidden;
  height: 4px;
  margin: 5px 0 9px;
  border-radius: 999px;
  background: #e6eee8;
}

.collage-progress span {
  display: block;
  width: 60%;
  height: 100%;
  border-radius: inherit;
  background: #098552;
}

.collage-lesson-footer > span,
.collage-classroom > span {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  color: #fff;
  background: #098552;
  font-size: 8px;
  font-weight: 800;
}

.collage-lesson-footer small {
  color: #6d786f;
  font-size: 8px;
}

.collage-video {
  top: 8px;
  right: 91px;
  width: 133px;
  height: 126px;
  border-left: 0;
  background: #c3aa9c;
}

.collage-person {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #fff;
  background: #bd6f51;
  font-size: 30px;
  font-weight: 800;
}

.collage-video button {
  position: absolute;
  top: 50%;
  left: -15px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  color: #0b8754;
  background: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}

.collage-messages {
  z-index: 3;
  top: -7px;
  right: 1px;
  width: 186px;
  padding: 12px;
}

.collage-messages > strong,
.collage-dictionary > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
}

.collage-messages > div {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 5px;
  padding: 4px 0;
  font-size: 7px;
}

.collage-messages b {
  font-size: 8px;
}

.collage-messages small {
  grid-column: 2;
  color: #7c867f;
}

.collage-messages em {
  position: absolute;
  top: 5px;
  right: 0;
  color: #7c867f;
  font-size: 6px;
  font-style: normal;
}

.collage-message-button {
  display: block;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid #dce9df;
  border-radius: 4px;
  color: #14754b;
  background: #f7fbf8;
  text-align: center;
  font-size: 7px;
  font-weight: 800;
}

.mini-avatar {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}

.mini-avatar-orange { background: #ca7858; }
.mini-avatar-blue { background: #5377ae; }
.mini-avatar-green { background: #42956a; }
.mini-avatar-purple { background: #7c639e; }

.collage-quiz {
  top: 154px;
  left: 5px;
  width: 150px;
  min-height: 138px;
  padding: 12px;
}

.collage-quiz > span,
.collage-quiz > small,
.collage-quiz > b {
  display: block;
}

.collage-quiz > span { font-size: 8px; font-weight: 700; }
.collage-quiz > strong { display: block; margin-top: 8px; font-size: 20px; }
.collage-quiz > small { color: #6f7b73; font-size: 8px; }
.collage-quiz > b { margin: 12px 0 6px; font-size: 8px; }
.collage-quiz > div { padding: 3px 0; color: #536158; font-size: 7px; }
.collage-quiz div i:first-child { margin-right: 4px; color: #59ad80; }
.collage-quiz div i:last-child { float: right; color: #138b56; }

.collage-classroom {
  top: 154px;
  left: 172px;
  width: 160px;
  min-height: 138px;
  padding: 12px;
}

.collage-classroom strong { display: block; font-size: 9px; }
.collage-classroom > small { display: block; margin-top: 2px; color: #7b867e; font-size: 7px; }
.avatar-stack { display: flex; align-items: center; margin: 8px 0; }
.avatar-stack .mini-avatar { margin-right: -6px; }
.avatar-stack > span:last-child { margin-left: 9px; color: #6c756e; font-size: 7px; }
.collage-classroom > span { display: block; margin: 5px 0 7px; text-align: center; }

.collage-profile {
  top: 154px;
  right: 167px;
  width: 132px;
  min-height: 138px;
  flex-wrap: wrap;
  padding: 12px;
}

.collage-person-small { width: 31px; height: 31px; border-radius: 50%; font-size: 12px; }
.collage-profile strong { margin-left: 8px; font-size: 9px; }
.collage-profile small { width: 100%; margin-top: 6px; color: #6f7b73; font-size: 7px; }
.collage-profile b { margin-top: 8px; font-size: 8px; }
.collage-profile .collage-progress { width: 76px; margin: 7px 0 5px; }
.collage-profile em { color: #657067; font-size: 7px; font-style: normal; }

.collage-dictionary {
  top: 170px;
  right: 0;
  width: 154px;
  min-height: 122px;
  padding: 12px;
}

.collage-dictionary > div { margin-bottom: 9px; padding: 5px; border: 1px solid #e2e9e3; border-radius: 4px; color: #9aa19c; font-size: 7px; }
.collage-dictionary > div i { margin-right: 4px; }
.collage-dictionary b { display: block; font-size: 9px; }
.collage-dictionary small { display: block; margin-top: 4px; color: #68736b; font-size: 7px; line-height: 1.35; }

.public-section {
  padding: 20px 0;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.public-feature-card,
.public-community-card,
.public-course-card,
.public-testimonial,
.public-stats {
  border: 1px solid #e3ebe4;
  border-radius: 8px;
  background: #fff;
}

.public-feature-card {
  min-height: 153px;
  padding: 16px;
}

.public-feature-card > i,
.public-community-card > i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: #128c59;
  font-size: 13px;
}

.public-feature-card h2 { margin: 10px 0 5px; font-size: 10px; }
.public-feature-card p { min-height: 39px; margin: 0; color: #69736c; font-size: 10px; line-height: 1.4; }
.public-feature-card a,
.public-heading-inline > a,
.public-audience-card a { display: inline-block; margin-top: 8px; color: #10784d; font-size: 10px; font-weight: 800; }
.public-feature-card a i,
.public-heading-inline > a i,
.public-audience-card a i { margin-left: 4px; }

.public-community-layout {
  display: grid;
  grid-template-columns: 1.45fr repeat(5, 1fr);
  gap: 10px;
}

.public-community-intro {
  min-height: 132px;
  padding: 18px;
  border-radius: 8px;
  background: #edf8f0;
}

.public-community-intro h2 { margin: 0 0 7px; color: #078351; font-size: 12px; }
.public-community-intro p { margin: 0; color: #536159; font-size: 10px; line-height: 1.45; }
.public-avatar-row { gap: 0; margin-top: 14px; }
.public-avatar-row .mini-avatar { margin-right: -6px; }
.public-avatar-row > span:last-child { margin-left: 13px; color: #66736a; font-size: 9px; font-weight: 700; }

.public-community-card { min-height: 132px; padding: 14px; }
.public-community-card > i { width: 24px; height: 24px; color: #108a56; background: #eaf6ed; font-size: 12px; }
.public-community-card h3 { margin: 8px 0 4px; font-size: 10px; }
.public-community-card p { min-height: 32px; margin: 0; color: #6a756e; font-size: 8px; line-height: 1.35; }
.public-mini-message { display: block; margin-top: 7px; padding: 5px; border: 1px solid #edf1ed; border-radius: 5px; color: #727b75; background: #fff; font-size: 7px; }
.public-mini-message b { color: #3e4a42; }

.public-section-heading { justify-content: space-between; margin-bottom: 13px; }
.public-section-heading h2 { margin: 3px 0 0; font-size: 16px; }
.public-heading-inline > a { margin: 0; }

.public-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.public-steps article { position: relative; text-align: center; }
.public-steps article:not(:last-child)::after { position: absolute; top: 22px; right: -18px; width: 35px; border-top: 1px dotted #68a888; content: ""; }
.public-steps article > span { display: grid; width: 43px; height: 43px; margin: 0 auto 8px; place-items: center; border-radius: 50%; color: #117c4d; background: #eaf6ee; font-size: 18px; }
.public-steps h3 { margin: 0 0 4px; font-size: 12px; }
.public-steps p { max-width: 190px; margin: 0 auto; color: #6b756f; font-size: 9px; line-height: 1.4; }

.public-audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.public-audience-card { position: relative; min-height: 202px; overflow: hidden; padding: 18px; border: 1px solid #e1eae2; border-radius: 8px; background: #f5fbf6; }
.public-audience-card h2 { max-width: 290px; margin: 4px 0 8px; font-size: 16px; }
.public-audience-card ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: #506057; font-size: 10px; }
.public-audience-card li::before { margin-right: 7px; color: #079055; content: "✓"; font-weight: 800; }
.audience-portrait { position: absolute; right: 22px; bottom: -14px; display: grid; width: 112px; height: 139px; place-items: center; border-radius: 56px 56px 0 0; color: #fff; font-size: 42px; font-weight: 800; }
.audience-portrait-student { background: #bf765d; }
.audience-portrait-instructor { background: #435e55; }

.public-course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.public-course-card { overflow: hidden; }
.course-cover { position: relative; display: grid; height: 93px; place-items: center; font-size: 28px; }
.course-cover b { position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 999px; color: #fff; background: rgba(26, 41, 32, 0.68); font-size: 9px; }
.course-cover-german { background: #e5d1a6; }
.course-cover-english { background: #a7c8d9; }
.course-cover-french { background: #e6b7b0; }
.course-cover-spanish { background: #ddbb7a; }
.public-course-card > div:last-child { padding: 11px; }
.public-course-card h3 { margin: 0; font-size: 12px; }
.public-course-card p { margin: 2px 0 8px; color: #748078; font-size: 9px; }
.public-course-card footer { display: flex; justify-content: space-between; color: #69736c; font-size: 8px; }
.public-course-card footer span { color: #9b6b0c; font-weight: 700; }

.public-bottom-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 13px; }
.public-testimonial, .public-stats { min-height: 166px; padding: 18px; }
.public-testimonial > i { color: #ccd9cf; font-size: 25px; }
.public-testimonial h2, .public-stats h2 { margin: 3px 0 8px; font-size: 12px; }
.public-testimonial p { max-width: 430px; margin: 0 0 12px; color: #657067; font-size: 10px; line-height: 1.5; }
.public-testimonial > div { display: flex; align-items: center; gap: 7px; }
.public-testimonial b { font-size: 10px; }
.public-testimonial b small { display: block; color: #7b857d; font-size: 8px; font-weight: 400; }
.public-stats > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.public-stats > div > span { display: flex; align-items: center; gap: 8px; }
.public-stats i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #118553; background: #eaf6ed; font-size: 13px; }
.public-stats b { color: #0d8954; font-size: 15px; }
.public-stats b small { display: block; color: #6b766e; font-size: 8px; font-weight: 400; }

.public-footer { margin-top: 25px; padding: 26px 0 15px; border-top: 1px solid #e0e9e1; background: #fff; }
.public-footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 0.8fr) 1.5fr; gap: 30px; }
.public-footer p { margin: 9px 0; color: #69746c; font-size: 10px; line-height: 1.45; }
.public-footer h3 { margin: 2px 0 9px; font-size: 11px; }
.public-footer-grid > div:not(:first-child) > a { display: block; margin: 5px 0; color: #637067; font-size: 10px; }
.public-footer-grid a:hover { color: #078451; }
.public-socials { display: flex; gap: 11px; }
.public-socials span { color: #4b584f; font-size: 14px; }
.public-newsletter { display: flex; overflow: hidden; border: 1px solid #dbe5dd; border-radius: 5px; }
.public-newsletter input { min-width: 0; flex: 1; padding: 8px; border: 0; outline: 0; color: #26372b; font-size: 10px; }
.public-newsletter button { width: 36px; border: 0; color: #fff; background: #078451; cursor: pointer; }
.public-footer-bottom { justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 13px; border-top: 1px solid #edf1ed; color: #7b857d; font-size: 9px; }
.public-footer-bottom > span:last-child { display: flex; gap: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1120px) {
  .public-feature-grid { grid-template-columns: repeat(4, 1fr); }
  .public-community-layout { grid-template-columns: repeat(3, 1fr); }
  .public-community-intro { grid-column: span 2; }
}

@media (max-width: 900px) {
  .public-navbar { flex-wrap: wrap; padding: 12px 0; }
  .public-nav { order: 3; width: 100%; min-height: 33px; gap: 19px; overflow-x: auto; }
  .public-hero { grid-template-columns: 1fr; }
  .public-hero-collage { width: min(620px, 100%); margin: 0 auto; }
  .public-feature-grid { grid-template-columns: repeat(3, 1fr); }
  .public-footer-grid { grid-template-columns: repeat(3, 1fr); }
  .public-footer-grid > div:first-child { grid-column: span 3; }
}

@media (max-width: 640px) {
  .public-container { width: min(100% - 30px, 1240px); }
  .public-nav-actions { margin-left: auto; gap: 6px; }
  .public-nav-actions .public-button { padding: 7px 9px; }
  .public-hero { min-height: 0; padding-top: 22px; }
  .public-hero h1 { font-size: 22px; }
  .public-hero h1 br { display: none; }
  .public-hero-actions { align-items: stretch; flex-direction: column; }
  .public-trust-row { gap: 9px 14px; margin-top: 20px; }
  .public-hero-collage { height: 272px; transform: scale(0.82); transform-origin: top left; width: 122%; margin-bottom: -50px; }
  .public-feature-grid, .public-community-layout, .public-audience-grid, .public-course-grid, .public-bottom-grid { grid-template-columns: 1fr; }
  .public-community-intro { grid-column: auto; }
  .public-steps { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .public-steps article:nth-child(2)::after { display: none; }
  .public-audience-card { min-height: 220px; }
  .audience-portrait { width: 85px; height: 108px; right: 12px; }
  .public-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .public-footer-grid > div:first-child { grid-column: span 2; }
  .public-footer-grid > div:last-child { grid-column: span 2; }
  .public-footer-bottom { align-items: flex-start; flex-direction: column; }
}
/* Clean testing landing page: header + hero only */
.lp-hero-main {
  min-height: calc(100vh - 64px);
  background:
    radial-gradient(circle at 82% 26%, rgba(31, 143, 95, 0.12), transparent 34%),
    radial-gradient(circle at 58% 76%, rgba(31, 143, 95, 0.08), transparent 30%),
    #fbfcfa;
}

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 86px);
  min-height: calc(100vh - 64px);
  padding: clamp(48px, 7vw, 90px) 0;
}

.lp-hero-copy {
  position: relative;
  z-index: 2;
}

.lp-hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: #087146;
  background: #eaf8ef;
  border: 1px solid #ccebd6;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.lp-hero h1 {
  max-width: 760px;
  margin: 22px 0 20px;
  color: #111827;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.lp-hero h1 span {
  display: inline;
  color: #159457;
}

.lp-hero-copy > p {
  max-width: 610px;
  margin: 0;
  color: #4f5d55;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  font-weight: 400;
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.lp-hero-button {
  min-height: 62px;
  padding: 16px 26px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.lp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 42px;
  color: #2f4a3b;
}

.lp-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
}

.lp-hero-trust i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #14915b;
  background: #eaf8ef;
  border-radius: 12px;
}

.lp-hero-visual {
  position: relative;
  min-height: 650px;
}

.lp-hero-glow {
  position: absolute;
  inset: 40px 40px 20px 40px;
  background:
    radial-gradient(circle, rgba(31, 143, 95, 0.14), transparent 62%),
    repeating-radial-gradient(circle at center, rgba(31, 143, 95, 0.14) 0 1px, transparent 1px 16px);
  border-radius: 50%;
}

.lp-main-preview-card,
.lp-floating-card,
.lp-progress-mini-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e3ebe4;
  box-shadow: 0 26px 70px rgba(20, 46, 31, 0.13);
  backdrop-filter: blur(14px);
}

.lp-main-preview-card {
  z-index: 3;
  left: 70px;
  top: 70px;
  width: min(420px, 70%);
  padding: 28px;
  border-radius: 30px;
}

.lp-preview-card-top,
.lp-course-preview-head,
.lp-progress-row,
.lp-floating-card,
.lp-mini-card-top {
  display: flex;
  align-items: center;
}

.lp-preview-card-top {
  justify-content: space-between;
  margin-bottom: 18px;
  color: #111827;
  font-size: 18px;
}

.lp-preview-card-top strong {
  font-weight: 700;
}

.lp-course-preview-box {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #edf1ed;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(20, 46, 31, 0.08);
}

.lp-course-preview-head {
  gap: 16px;
}

.lp-course-flag {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  box-shadow: 0 8px 16px rgba(20, 46, 31, 0.08);
  font-size: 42px;
}

.lp-course-preview-head h2 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 400;
}

.lp-course-preview-head p {
  margin: 5px 0 0;
  color: #56635c;
  font-size: 15px;
}

.lp-level-pill {
  margin-left: auto;
  padding: 7px 10px;
  color: #087146;
  background: #dff4e7;
  border-radius: 10px;
  font-weight: 700;
}

.lp-course-art {
  position: relative;
  height: 180px;
  margin: 24px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf6f9 0%, #dff1e8 62%, #b7ddc3 100%);
  border: 1px solid #dceee4;
  border-radius: 18px;
}

.lp-art-sun {
  position: absolute;
  top: 28px;
  left: 58px;
  width: 34px;
  height: 34px;
  background: #fff6c5;
  border-radius: 50%;
}

.lp-art-hill {
  position: absolute;
  bottom: -42px;
  width: 260px;
  height: 120px;
  background: #89caa3;
  border-radius: 50%;
}

.lp-art-hill-one {
  left: -50px;
}

.lp-art-hill-two {
  right: -68px;
  background: #6bbd8d;
}

.lp-art-building {
  position: absolute;
  bottom: 44px;
  width: 54px;
  height: 54px;
  background: #f8f3e7;
  border: 2px solid rgba(76, 93, 82, 0.18);
  border-radius: 8px 8px 3px 3px;
}

.lp-art-building-one {
  left: 78px;
}

.lp-art-building-two {
  right: 86px;
  height: 68px;
}

.lp-art-tower {
  position: absolute;
  right: 122px;
  bottom: 48px;
  width: 12px;
  height: 100px;
  background: #7f8b87;
  border-radius: 999px;
}

.lp-art-tower::before {
  position: absolute;
  top: -18px;
  left: -12px;
  width: 36px;
  height: 20px;
  background: #7f8b87;
  border-radius: 999px;
  content: "";
}

.lp-art-bridge {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 34px;
  height: 16px;
  border-top: 5px solid #6b7f74;
  border-radius: 50%;
}

.lp-progress-row {
  justify-content: space-between;
  color: #4f5d55;
  font-size: 15px;
}

.lp-progress-row strong {
  color: #0b8754;
  font-size: 20px;
  font-weight: 700;
}

.lp-progress-bar {
  height: 10px;
  margin: 10px 0 26px;
  overflow: hidden;
  background: #e4eee8;
  border-radius: 999px;
}

.lp-progress-bar span {
  display: block;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, #13905b, #20b46f);
  border-radius: inherit;
}

.lp-continue-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 56px;
  color: #ffffff;
  background: linear-gradient(135deg, #168758, #21a968);
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
}

.lp-continue-button i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #158a56;
  background: #ffffff;
  border-radius: 50%;
  font-size: 11px;
}

.lp-floating-card {
  z-index: 4;
  right: 4px;
  width: 320px;
  min-height: 100px;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 24px;
}

.lp-floating-dictionary {
  top: 50px;
}

.lp-floating-check {
  top: 196px;
}

.lp-floating-classroom {
  top: 342px;
}

.lp-floating-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  color: #13905b;
  background: #e6f7ec;
  border-radius: 20px;
  font-size: 25px;
}

.lp-floating-icon.purple {
  color: #5d4ad7;
  background: #eeeaff;
}

.lp-floating-icon.amber {
  color: #cb7d16;
  background: #fff1d7;
}

.lp-floating-card strong {
  display: block;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

.lp-floating-card small {
  display: block;
  margin-top: 6px;
  color: #159457;
  font-size: 15px;
  font-weight: 600;
}

.lp-floating-card > i {
  color: #76847c;
}

.lp-progress-mini-card {
  z-index: 4;
  right: 0;
  bottom: 36px;
  width: 320px;
  min-height: 180px;
  padding: 24px;
  border-radius: 26px;
}

.lp-mini-card-top {
  justify-content: space-between;
}

.lp-mini-card-top strong {
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

.lp-mini-card-top a {
  color: #118454;
  font-size: 14px;
  font-weight: 700;
}

.lp-mini-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  width: 145px;
  height: 84px;
  margin-top: 26px;
  padding: 10px;
  background:
    linear-gradient(#edf4ef 1px, transparent 1px),
    linear-gradient(90deg, #edf4ef 1px, transparent 1px);
  background-size: 24px 24px;
}

.lp-mini-chart span {
  width: 12px;
  background: #159457;
  border-radius: 999px;
}

.lp-mini-chart span:nth-child(1) { height: 22px; }
.lp-mini-chart span:nth-child(2) { height: 32px; }
.lp-mini-chart span:nth-child(3) { height: 48px; }
.lp-mini-chart span:nth-child(4) { height: 36px; }
.lp-mini-chart span:nth-child(5) { height: 70px; }

.lp-mini-progress-circle {
  position: absolute;
  right: 28px;
  bottom: 58px;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  color: #118454;
  background:
    radial-gradient(circle at center, #ffffff 54%, transparent 56%),
    conic-gradient(#159457 0 72%, #e2eee7 72% 100%);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
}

.lp-progress-mini-card small {
  display: block;
  margin-top: 14px;
  color: #53635a;
  font-size: 14px;
}

@media (max-width: 1080px) {
  .lp-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .lp-hero-visual {
    min-height: 610px;
  }

  .lp-main-preview-card {
    left: 0;
  }

  .lp-floating-card,
  .lp-progress-mini-card {
    right: 0;
  }
}

@media (max-width: 760px) {
  .lp-hero-main {
    min-height: auto;
  }

  .lp-hero {
    width: min(100% - 32px, 1240px);
    padding: 42px 0;
  }

  .lp-hero h1 {
    font-size: 32px;
  }

  .lp-hero-actions,
  .lp-hero-button {
    width: 100%;
  }

  .lp-hero-visual {
    display: grid;
    gap: 14px;
    min-height: auto;
  }

  .lp-hero-glow,
  .lp-main-preview-card,
  .lp-floating-card,
  .lp-progress-mini-card {
    position: static;
    width: 100%;
  }

  .lp-floating-card {
    min-height: 86px;
  }

  .lp-progress-mini-card {
    display: none;
  }
}