body{font-family:Manrope,Arial,sans-serif}
.hero {
    height: 940px;
    background-image: linear-gradient( to right, rgba(3, 7, 24, 0.45) 0%, rgba(102, 102, 102, 0) 100% ),url('../images/hero-worker-figma.webp');
    background-size: cover;
    background-repeat: no-repeat
}
.header{height:104px;padding:24px 80px}
.header .logo{width:112px;height:56px}
.header nav{height:56px;gap:14px;padding:10px;border-radius:70px}
.header nav a{padding:6px 16px;font-size:16px;line-height:24px;border-radius:200px}
.header nav a:hover,.header nav a:focus-visible{background:rgba(255,255,255,.16);outline:none}
.header select{width:118px;height:56px;padding:10px 36px 10px 16px;border-radius:70px;font:500 16px/24px Manrope,Arial,sans-serif;background-position:calc(100% - 22px) 25px,calc(100% - 17px) 25px}
.hero-copy{top:447px;transform:translateX(-50%);width:1054px;text-shadow:none}
.hero-copy h1{max-width:892px;margin:0 auto 16px;font:600 96px/.95 Nunito,Arial,sans-serif;letter-spacing:0}
.hero-copy p{margin:0 0 40px;font:400 20px/1.4 Manrope,Arial,sans-serif}
.stores{gap:12px}
.stores a{width:180px;height:54px;justify-content:center;gap:4px;padding:8px 16px;border-radius:200px;font:600 18px/1.5 Manrope,Arial,sans-serif}
.page-card{margin-top:-100px;padding-top:100px;border-radius:100px 100px 0 0}
.page-card h2{font-family:Nunito,Arial,sans-serif}
.benefits{padding:0 80px 80px}
.benefits h2{margin:0 auto;font-size:48px;line-height:1.06;letter-spacing:0}
.benefit-grid{gap:16px;margin-top:50px}
.benefit-grid article{height:282px;padding:40px;border-radius:40px}
.benefit-grid h3{font:500 28px/1.25 Manrope,Arial,sans-serif}
.benefit-grid p{font:400 18px/1.5 Manrope,Arial,sans-serif;color:#686c75}

@media(max-width:900px){
 .hero{height:1110px;background-size:1594px 1110px;background-position:-366px 0}
 .header{height:104px;padding:24px 32px}
 .header nav{display:none;position:absolute;left:32px;right:32px;top:88px;transform:none;height:auto;flex-direction:column;align-items:stretch;padding:12px;background:rgba(22,77,125,.96);box-shadow:0 16px 40px rgba(0,0,0,.2)}
 .header.is-menu-open nav{display:flex}
 .header nav a{text-align:center;padding:12px 16px}
 .menu{display:block;width:48px;height:48px;margin-left:20px;padding:4px}
 .menu i{height:3px;margin:7px 3px;border-radius:3px;transition:transform .2s ease,opacity .2s ease}
 .header.is-menu-open .menu i:nth-child(1){transform:translateY(10px) rotate(45deg)}
 .header.is-menu-open .menu i:nth-child(2){opacity:0}
 .header.is-menu-open .menu i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
 .hero-copy{top:463px;transform:translateX(-50%);width:704px}
 .hero-copy h1{max-width:522px;font-size:48px;line-height:1.06;margin-bottom:8px}
 .hero-copy p{max-width:522px;margin:0 auto 32px;font-size:20px;line-height:1.4}
 .page-card{margin-top:-306px;padding-top:50px;border-radius:56px 56px 0 0}
 .benefits{padding:0 32px 40px}
 .benefits h2{width:666px;max-width:100%;font-size:40px;line-height:1.1}
 .benefit-grid{display:flex;flex-direction:column;gap:12px;margin-top:40px}
 .benefit-grid article{width:100%;height:164px;padding:32px 40px;border-radius:32px}
 .benefit-grid article:nth-child(2){height:131px}
 .benefit-grid article:nth-child(3){height:137px}
 .benefit-grid h3{font-size:24px}.benefit-grid p{font-size:16px}
}

/* FAQ state icon: plus when closed, cross when open. */
.faq summary::after{content:"";flex:0 0 auto;width:20px;height:20px;background:linear-gradient(#858b90,#858b90) center/14px 2px no-repeat,linear-gradient(#858b90,#858b90) center/2px 14px no-repeat;transition:transform .22s ease}.faq details[open] summary::after{transform:rotate(45deg)}

/* Figma 5089:230576–230648 — outcomes, learning cards, teachers and FAQ */
@media (min-width: 901px) {
  .outcomes { width: 948px; height: 365px; margin: 100px auto; border: 0; }
  .outcome-ring { position: absolute; inset: 0 auto auto 74px; width: 799px; height: 365px; pointer-events: none; }
  .outcomes h2 { position: relative; z-index: 1; width: 849px; font-family: Nunito, sans-serif; font-size: 48px; line-height: 1.06; font-weight: 700; letter-spacing: 0; }
  .tag { z-index: 2; min-height: 70px; padding: 10px 16px; border-color: #c7ecff; border-radius: 57px; display: flex; align-items: center; gap: 8px; font: 400 18px/1.5 Manrope, sans-serif; }
  .tag img { width: 24px; height: 24px; flex: 0 0 24px; }
  .tag-one { left: 0; top: 0; }
  .tag-two { right: 0; top: 0; }
  .tag-three { left: 0; bottom: 0; }
  .tag-four { right: 0; bottom: 0; }

  .teachers { min-height: 404px; padding: 100px 20px; }
  .teachers p { font-family: Nunito, sans-serif; font-size: 48px; line-height: 1.06; font-weight: 600; }
  .teachers strong { font-weight: 600; }
  .faq { padding: 80px 15% 80px; }
  .faq h2 { margin-bottom: 50px; font-family: Nunito, sans-serif; font-size: 48px; line-height: 1.06; font-weight: 700; }
  .faq-list { max-width: 1000px; margin: 0 auto; display: grid; gap: 24px; }
  .faq details { margin: 0; padding: 28px 32px; border-radius: 40px; background: #f6f6f7; }
  .faq summary { font: 500 28px/1.25 Manrope, sans-serif; }
  .faq summary::after { content: ''; width: 24px; height: 24px; background: url('../images/faq-close.svg') center/contain no-repeat; }
  .faq p { margin-top: 12px; font: 400 28px/1.25 Manrope, sans-serif; color: #7d8388; }
}

@media (max-width: 900px) {
  .outcome-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
  .tag { display: flex; align-items: center; gap: 8px; }
  .tag img { width: 20px; height: 20px; }
}

@media (max-width: 520px) {
  .outcome-ring { display: none; }
  .tag img { width: 16px; height: 16px; }
  .faq summary::after { content: ''; width: 16px; height: 16px; background: url('../images/faq-close.svg') center/contain no-repeat; }
}

@media(max-width:520px){
 .hero{height:854px;background-size:1280px 853px;background-position:-425px 0}
 .header{height:88px;padding:16px}
 .header .logo{width:112px;height:56px}
 .header form{margin-left:auto}
 .header select{width:118px;height:56px;font-size:14px}
 .menu{width:40px;height:40px;margin-left:8px;padding:0}
 .header nav{left:16px;right:16px;top:80px}
 .hero-copy{top:427px;width:390px}
 .hero-copy h1{width:390px;font-size:40px;line-height:1.0;margin-bottom:10px;padding:0 8px}
 .hero-copy p{width:390px;padding:0 42px;font-size:16px;line-height:1.12;margin-bottom:40px}
 .stores{gap:12px;padding:0 16px}
 .stores a{width:173px;height:52px;padding:6px 12px;font-size:15px}
 .page-card{margin-top:-40px;padding-top:40px;border-radius:40px 40px 0 0}
 .benefits{padding:0 16px 40px}
 .benefits h2{font-size:30px;line-height:1.2;width:358px}
 .benefit-grid{gap:10px;margin-top:40px}
 .benefit-grid article,.benefit-grid article:nth-child(2),.benefit-grid article:nth-child(3){height:160px;padding:24px;border-radius:28px}
 .benefit-grid h3{font-size:22px}.benefit-grid p{font-size:14px}
}

@media(prefers-reduced-motion:reduce){.menu i{transition:none}}

.faq summary::after{content:"";flex:0 0 auto;background:linear-gradient(#858b90,#858b90) center/70% 2px no-repeat,linear-gradient(#858b90,#858b90) center/2px 70% no-repeat;transition:transform .22s ease}.faq details[open] summary::after{transform:rotate(45deg)}

.teachers strong,.teachers-line{display:block}
.teachers-line{color:#adb1b4}
.teachers-reveal-word{display:inline-block}
.teachers-reveal-letter{color:#adb1b4;transition:color .35s ease}
.teachers-reveal-word.is-visible .teachers-reveal-letter{color:#27313b;transition-delay:var(--letter-delay,0ms)}
@media(prefers-reduced-motion:reduce){
 .teachers-line,.teachers-reveal-word .teachers-reveal-letter{color:#27313b;transition:none;transition-delay:0ms}
}

/* Home-only responsive corrections. Keep desktop rules and shared pages intact. */
@media (max-width: 900px) {
  .hero-copy { max-width: calc(100% - 32px); }
  .benefit-grid article { height: auto; min-height: 164px; gap: 16px; }
  .benefit-grid article:nth-child(2) { height: auto; min-height: 131px; }
  .benefit-grid article:nth-child(3) { height: auto; min-height: 137px; }
  .benefit-grid p { max-width: 100%; }

  /* These framed images are mobile-only; the desktop animated stage is separate. */
  .course-step .mobile-phone {
    width: min(290px, 100%);
    height: auto;
    filter: none;
    will-change: auto;
  }

  .page-card { z-index: 3; border-bottom-left-radius: 56px; border-bottom-right-radius: 56px; }
  .download { height: auto; min-height: 590px; padding: 150px 32px 145px; }
  .download h2 { margin: 28px auto 0; font-size: 40px; }
  .download > p { margin: 16px 0 32px; }
  .download .p3 { left: 32px; bottom: 45px; }
  .download .p4 { right: 32px; bottom: 45px; }
  .page-card + .site-footer { margin-top: -56px; padding-top: 620px; }
}

/* Below this width there is no room for portraits beside both store buttons. */
@media (max-width: 700px) {
  .download .p3, .download .p4 { display: none; }
}

@media (max-width: 520px) {
  .hero-copy { width: 100%; max-width: 100%; }
  .hero-copy h1 { width: auto; max-width: 358px; padding: 0 16px; font-size: 44px; text-wrap: balance; }
  .hero-copy p { width: auto; max-width: 358px; padding: 0 24px; line-height: 1.4; }
  .stores a { min-width: 0; flex: 0 1 173px; padding: 6px 8px; }
  .stores a img, .stores a img.apple { width: 32px; height: 32px; flex-basis: 32px; }
  .stores a span { white-space: nowrap; }
  .header > a { flex-shrink: 0; }
  .header .logo { width: clamp(88px, 28.7vw, 112px); }
  .menu { flex-shrink: 0; }
  .benefit-grid article,
  .benefit-grid article:nth-child(2),
  .benefit-grid article:nth-child(3) { min-height: 160px; }

  .course { padding: 0 16px 40px; }
  .course > h2 { font-size: 32px; }
  .course-step .step-copy h3 { font-size: 22px; line-height: 1.25; }
  .course-step .step-copy p { font-size: 16px; line-height: 1.4; }
  .course-step .step-copy,
  .course-step.left .step-copy,
  .course-step.right .step-copy { margin-bottom: 24px; }

  .page-card { border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
  .download { min-height: 520px; padding: 140px 0 80px; }
  .download .person { width: 110px; height: 110px; top: 40px; }
  .download .p1 { left: 16px; }
  .download .p2 { right: 16px; }
  .download .app-mark { width: 88px; height: 88px; border-radius: 20px; }
  .download h2 { max-width: 358px; margin: 24px auto 0; padding: 0 16px; font-size: 32px; }
  .download > p { font-size: 18px; margin: 16px 0 32px; }

  .page-card + .site-footer {
    margin-top: -40px;
    height: auto;
    min-height: 675px;
    padding: 110px 16px 120px;
    background-position: left center;
  }
  .page-card + .site-footer .site-footer-links { grid-template-rows: auto auto; grid-auto-flow: column; gap: 24px 20px; }
  .page-card + .site-footer .site-footer-legal { left: 16px; right: 16px; bottom: 40px; flex-wrap: wrap; gap: 20px 32px; font-size: 14px; }
  .page-card + .site-footer .site-footer-legal span { order: 1; flex-basis: 100%; }
}