/* Phoenix Online Education - PHONE-ONLY layout (computer view is not changed) */
html{overflow-x:hidden!important;max-width:100%}
body{max-width:100%;overflow-x:clip!important}
img,svg,video,iframe{max-width:100%}

/* Remove the dark / light mode switch everywhere */
html body .theme-toggle-btn,
html body [class*="theme-toggle"]{display:none!important}

@media (max-width:820px){
  /* stop glows from making the page wider than the screen */
  html body .why::before,html body .why::after,
  html body .hero-transition-light{display:none!important}
  html body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* remove every decorative layer inside the hero (dots, glows, orbits, chips) */
  html body .hero>:not(.hero-in){display:none!important}
  html body .hero::before,html body .hero::after,
  html body .hero-in::before,html body .hero-in::after,
  html body .hero-c::before,html body .hero-c::after{display:none!important}
  html body .hero [class*="particle"],html body .hero [class*="sparkle"],
  html body .hero [class*="dots"],html body .hero canvas{display:none!important}

  /* the old girl picture is hidden on phones */
  html body .hero-photo-wrap{display:none!important}

  /* no gap between header and hero */
  html body .hero{padding-top:0!important;margin-top:0!important;min-height:0!important}
  html body .hero-in{width:100%!important;max-width:100%!important;box-sizing:border-box;padding:0 14px!important;margin-top:0!important;min-height:0!important;align-items:flex-start!important}

  /* hero text area with the new girl picture behind it */
  html body .hero-c{
    position:relative;width:calc(100% + 28px)!important;max-width:none!important;margin:0 -14px!important;
    box-sizing:border-box;padding:16px 16px 34px!important;min-height:150vw;text-align:left;
    background:
      linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 14%),
      url("/uploads/2023/06/Phone_Girl.png") right bottom 85px/100% auto no-repeat #fff;
  }
  html body .hero-visual,html body .hero-side-stats{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;left:0!important;right:auto!important;box-sizing:border-box}
  html body .hero-side-stats .hsc2{width:100%!important;max-width:100%!important;box-sizing:border-box;margin-left:0!important;margin-right:0!important;transform:none}
  html body .hsc2 div{text-align:left!important}

  /* badges: clean, centred, normal capitalisation */
  html body .hero-pill,html body .htag{display:flex!important;width:max-content;max-width:100%;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:700!important;line-height:1.2;padding:9px 18px!important;border-radius:40px!important;margin:0 auto 10px!important}

  /* heading: left aligned, orange second part, underline swoosh */
  html body .hero h1{font-size:clamp(24px,6.5vw,29px)!important;line-height:1.14!important;letter-spacing:-.4px;text-align:left!important;margin:22px 0 12px!important;max-width:66%}
  html body .hero h1 .h1-line:first-child{display:block!important;text-wrap:balance}
  html body .hero h1 .h1-line:not(:first-child){display:inline!important;color:#F26A0F!important;-webkit-text-fill-color:#F26A0F!important;background:none!important}
  html body .hero h1::after{content:"";display:block;width:34%;height:12px;margin-top:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 10 Q70 0 198 4' fill='none' stroke='%23F26A0F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  html body .hero-c>p{text-align:left;font-size:16px;line-height:1.6;max-width:54%;margin:14px 0 18px!important}

  /* buttons */
  html body .hbts{display:flex!important;flex-direction:column;gap:12px;margin:0 4% !important}
  html body .hbts .bp{font-size:16px!important;white-space:nowrap;padding-left:10px!important;padding-right:10px!important;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;border-radius:18px!important}
  html body .hero-ai-btn{width:100%;box-sizing:border-box;background:#fff!important;border:1.5px solid #F26A0F!important;border-radius:18px!important;box-shadow:none!important}
  html body .hbts .bp,html body .hero-ai-btn{height:52px!important;min-height:52px!important;width:100%!important;box-sizing:border-box;padding:0 12px!important;border-radius:18px!important}
  html body .hero-ai-btn{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px}
  html body .hero-ai-btn .header-btn-top,html body .hero-ai-btn .header-btn-main{font-size:16px!important;font-weight:700!important;line-height:1!important;margin:0!important;padding:0!important;display:inline!important;font-family:inherit!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap}
  html body .hero-inline-search{margin-top:22px!important}

  /* header stays on top and turns slightly see-through while scrolling */
  html body .main-header{position:sticky!important;top:0;z-index:1000;transition:background-color .25s ease,box-shadow .25s ease}
  html body .main-header.is-scrolled{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 14px rgba(0,0,0,.06)}
}