@import url("redesign-base.css?v=20260921-hq2");

/* 2026-09-17 polish pass */
html body #support.support-editorial{background:#fff!important;}

html body #proof.proof-editorial .section-head{max-width:none!important;}
@media (min-width:900px){
  html body #proof.proof-editorial .section-head h2{
    max-width:none!important;
    white-space:nowrap!important;
    font-size:clamp(2.7rem,4.1vw,4.35rem)!important;
    letter-spacing:-.055em!important;
  }
}
html body #proof.proof-editorial .evidence-description{
  color:#7c7398!important;
}
html body #proof.proof-editorial .video-card>span{
  color:#7c7398!important;
}

html body #pricing.pricing-editorial .plan .outline{
  border-color:rgba(50,28,91,.28)!important;
}

html body #faq.faq-editorial .faq-art{
  background:transparent!important;
  box-shadow:none!important;
}
html body #faq.faq-editorial .faq-orbit{
  border-color:rgba(50,28,91,.34)!important;
}
html body #faq.faq-editorial .faq-art>span{
  color:#bdb3d8!important;
}
html body #faq.faq-editorial .faq-art i{
  background:#f46f17!important;
}
html body #faq.faq-editorial .faq details{
  background:#fff!important;
  border:1px solid rgba(50,28,91,.12)!important;
  border-radius:14px!important;
  margin-bottom:12px!important;
  overflow:hidden!important;
  box-shadow:0 8px 24px rgba(50,28,91,.035)!important;
}
html body #faq.faq-editorial .faq details:last-child{margin-bottom:0!important;}
html body #faq.faq-editorial .faq summary{
  border:0!important;
  border-radius:14px!important;
  padding:23px 18px!important;
}
html body #faq.faq-editorial .faq details .plus{
  color:#f46f17!important;
}
html body #faq.faq-editorial .faq details>div{
  padding:0 18px 20px!important;
}

/* Header/footer logo sizing and final CTA neural visual. */
html,body{
  max-width:100%;
  overflow-x:clip;
}
html body header.header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
}

/* The source PNG has a large transparent canvas. Keep the link box compact,
   but crop that empty canvas so the actual logo artwork is visibly larger. */
html body header.header a.brand{
  width:170px!important;
  min-width:170px!important;
  height:48px!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
html body header.header a.brand img.brand-logo{
  display:block!important;
  width:170px!important;
  max-width:none!important;
  height:64px!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  transform-origin:left center!important;
}

html body footer.footer>div:first-child{
  position:relative;
}
html body footer.footer>div:first-child a.brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:250px!important;
  height:92px!important;
  overflow:visible!important;
  transform:translateX(-18px)!important;
}
html body footer.footer>div:first-child a.brand img.brand-logo{
  display:block!important;
  width:250px!important;
  max-width:none!important;
  height:96px!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}

html body section.final-cta.editorial .wrap{
  position:relative!important;
  overflow:hidden!important;
}
html body section.final-cta.editorial .wrap .final-brain{
  display:block!important;
  position:absolute!important;
  right:clamp(12px,3vw,48px)!important;
  top:50%!important;
  width:clamp(330px,36vw,440px)!important;
  height:clamp(330px,36vw,440px)!important;
  aspect-ratio:1!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
html body section.final-cta.editorial .wrap .final-brain canvas{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:transparent!important;
}
html body section.final-cta.editorial .wrap>.eyebrow,
html body section.final-cta.editorial .wrap>p,
html body section.final-cta.editorial .wrap>.final-row{
  position:relative!important;
  z-index:1!important;
  max-width:min(650px,55%)!important;
}
html body section.final-cta.editorial .wrap>h2{
  position:relative!important;
  z-index:1!important;
  max-width:none!important;
  width:max-content!important;
  white-space:nowrap!important;
}

@media (max-width:800px){
  html body header.header a.brand{
    width:140px!important;
    min-width:140px!important;
  }
  html body header.header a.brand img.brand-logo{
    width:140px!important;
    height:54px!important;
  }
  html body footer.footer>div:first-child a.brand{
    width:215px!important;
    height:82px!important;
    transform:none!important;
  }
  html body footer.footer>div:first-child a.brand img.brand-logo{
    width:215px!important;
    height:84px!important;
  }
  html body section.final-cta.editorial .wrap .final-brain{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:min(82vw,360px)!important;
    height:min(82vw,360px)!important;
    margin:22px auto 0!important;
    transform:none!important;
  }
  html body section.final-cta.editorial .wrap>.eyebrow,
  html body section.final-cta.editorial .wrap>h2,
  html body section.final-cta.editorial .wrap>p,
  html body section.final-cta.editorial .wrap>.final-row{
    max-width:none!important;
  }
  html body section.final-cta.editorial .wrap>h2{
    width:auto!important;
    white-space:normal!important;
  }
}
/* 2026-09-18 mobile Tilda fixes */
@media (max-width:700px){
  /* Program: keep desktop animation untouched; use a stable 2×2 selector on mobile. */
  html body #program .program-map nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  html body #program .program-map nav a{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    padding:9px 12px!important;
    gap:9px!important;
    border:1px solid rgba(50,28,91,.18)!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#8e83ab!important;
    transform:none!important;
    justify-content:flex-start!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  html body #program .program-map nav a span{
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
    margin:0!important;
    border-radius:50%!important;
    background:transparent!important;
    color:inherit!important;
  }
  html body #program .program-map nav a.current{
    background:#321c5b!important;
    color:#fff!important;
  }
  html body #program .program-map nav a.current span{
    background:#f46f17!important;
    color:#fff!important;
  }
  html body #program .program-map nav a::after{
    display:none!important;
  }

  /* Game mechanics: prevent the role connector from pushing content outside the card. */
  html body #support .contract-roles{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    gap:10px!important;
    margin:28px 0!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  html body #support .contract-roles>span{
    flex:0 0 auto!important;
    min-width:0!important;
    font-size:clamp(1.05rem,5vw,1.35rem)!important;
    white-space:nowrap!important;
  }
  html body #support .contract-roles>span:last-child{
    margin-left:0!important;
  }
  html body #support .contract-link{
    flex:1 1 auto!important;
    min-width:34px!important;
    width:auto!important;
  }

  /* Never let iOS/Android render our arrows/play icon as emoji. */
  html body .button>span:last-child{
    position:relative!important;
    display:inline-block!important;
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    font-size:0!important;
    line-height:0!important;
  }
  html body .button>span:last-child::before{
    content:''!important;
    position:absolute!important;
    width:9px!important;
    height:9px!important;
    top:1px!important;
    right:1px!important;
    border-top:2px solid currentColor!important;
    border-right:2px solid currentColor!important;
  }
  html body .button>span:last-child::after{
    content:''!important;
    position:absolute!important;
    width:14px!important;
    height:2px!important;
    left:2px!important;
    bottom:5px!important;
    background:currentColor!important;
    transform:rotate(-45deg)!important;
    transform-origin:left center!important;
    border-radius:2px!important;
  }
  html body #reviews .video-reviews>summary::before{
    content:''!important;
    background-color:rgba(244,111,23,.12)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%23f46f17' d='M2 1.8v20.4L18 12z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:9px 12px!important;
    font-size:0!important;
  }

  /* GetCourse popup: full usable viewport on phones, iframe scrolls internally. */
  html body #payment-dialog[open]{
    display:flex!important;
    flex-direction:column!important;
    width:calc(100vw - 16px)!important;
    max-width:none!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    margin:auto!important;
    padding:14px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  html body #payment-dialog .dialog-head{
    flex:0 0 auto!important;
    margin-bottom:8px!important;
  }
  html body #payment-dialog .dialog-head h2{
    font-size:1.15rem!important;
  }
  html body #payment-dialog #payment-status{
    display:none!important;
  }
  html body #payment-dialog #payment-widgets{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html body #payment-dialog .widget-frame{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border:0!important;
  }
  html body #payment-dialog .payment-fallback{
    flex:0 0 auto!important;
    margin-top:8px!important;
    font-size:.72rem!important;
    line-height:1.35!important;
  }
}
/* 2026-09-18 final Tilda icon/payment fixes */
/* Stable vector-like arrow used everywhere instead of the ↗ glyph. */
html body .ui-arrow{
  position:relative!important;
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  margin-left:.35em!important;
  vertical-align:-.15em!important;
  font-size:0!important;
  line-height:0!important;
  color:currentColor!important;
  background:none!important;
}
html body .ui-arrow::before{
  content:''!important;
  position:absolute!important;
  width:9px!important;
  height:9px!important;
  top:1px!important;
  right:1px!important;
  border-top:2px solid currentColor!important;
  border-right:2px solid currentColor!important;
}
html body .ui-arrow::after{
  content:''!important;
  position:absolute!important;
  width:14px!important;
  height:2px!important;
  left:2px!important;
  bottom:5px!important;
  background:currentColor!important;
  transform:rotate(-45deg)!important;
  transform-origin:left center!important;
  border-radius:2px!important;
}
html body #reviews .video-reviews>summary::before{
  content:''!important;
  background-color:rgba(244,111,23,.12)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%23f46f17' d='M2 1.8v20.4L18 12z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:9px 12px!important;
  font-size:0!important;
}

/* Payment modal: the GetCourse document is taller than the iframe.
   Let the modal itself scroll and give the iframe enough intrinsic height. */
html body #payment-dialog[open]{
  width:min(860px,calc(100vw - 32px))!important;
  max-width:860px!important;
  max-height:calc(100dvh - 32px)!important;
  padding:24px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:22px!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
html body #payment-dialog #payment-status{display:none!important}
html body #payment-dialog #payment-widgets{
  width:100%!important;
  overflow:visible!important;
}
html body #payment-dialog .widget-frame{
  display:block!important;
  width:100%!important;
  height:920px!important;
  min-height:920px!important;
  border:0!important;
  overflow:visible!important;
}
html body #payment-dialog .payment-fallback{
  margin-top:10px!important;
  position:relative!important;
  z-index:2!important;
}
@media(max-width:700px){
  html body #payment-dialog[open]{
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
    margin:auto!important;
    padding:14px!important;
    border-radius:18px!important;
    overflow-y:auto!important;
    display:block!important;
  }
  html body #payment-dialog .dialog-head{
    position:sticky!important;
    top:-14px!important;
    z-index:5!important;
    background:#fff!important;
    padding:4px 0 10px!important;
    margin-bottom:2px!important;
  }
  html body #payment-dialog .widget-frame{
    height:1080px!important;
    min-height:1080px!important;
  }
  html body #payment-dialog .payment-fallback{
    font-size:.76rem!important;
    line-height:1.4!important;
    margin:8px 0 2px!important;
  }
}
/* 2026-09-18 popup/play cleanup */
/* Desktop payment popup: keep it clean, fixed and without the outer scrollbar. */
@media (min-width:701px){
  html body #payment-dialog[open]{
    display:flex!important;
    flex-direction:column!important;
    width:min(920px,calc(100vw - 48px))!important;
    height:min(790px,calc(100dvh - 40px))!important;
    max-width:920px!important;
    max-height:min(790px,calc(100dvh - 40px))!important;
    padding:22px!important;
    margin:auto!important;
    overflow:hidden!important;
    border-radius:22px!important;
  }
  html body #payment-dialog .dialog-head{
    flex:0 0 auto!important;
    margin-bottom:8px!important;
  }
  html body #payment-dialog #payment-widgets{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html body #payment-dialog .widget-frame{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  html body #payment-dialog .payment-fallback{
    flex:0 0 auto!important;
    margin:8px 0 0!important;
  }
}

/* Mobile play icons: use a clean CSS triangle, never an emoji glyph. */
@media (max-width:700px){
  html body .proof-editorial .play{
    font-size:0!important;
    position:absolute!important;
  }
  html body .proof-editorial .play::before{
    content:''!important;
    display:block!important;
    width:0!important;
    height:0!important;
    border-top:9px solid transparent!important;
    border-bottom:9px solid transparent!important;
    border-left:14px solid #fff!important;
    margin-left:3px!important;
  }
}
/* 2026-09-18 mobile-only SVG icons and compact payment */
@media (max-width:700px){
  /* Real SVG arrow: no font/emoji substitution. */
  html body .ui-arrow{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:19px!important;
    height:19px!important;
    flex:0 0 19px!important;
    margin-left:.28em!important;
    vertical-align:-.18em!important;
    color:currentColor!important;
    background:none!important;
    font-size:0!important;
    line-height:0!important;
  }
  html body .ui-arrow::before,
  html body .ui-arrow::after{
    content:none!important;
    display:none!important;
  }
  html body .ui-arrow svg{
    display:block!important;
    width:19px!important;
    height:19px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    overflow:visible!important;
  }

  /* Proof play buttons: center the triangle optically inside the orange circle. */
  html body .proof-editorial .play{
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
  }
  html body .proof-editorial .play::before{
    content:''!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:16px!important;
    height:18px!important;
    margin:0!important;
    background:#fff!important;
    border:0!important;
    clip-path:polygon(0 0,100% 50%,0 100%)!important;
    transform:translate(-42%,-50%)!important;
  }

  /* Mobile GetCourse popup should shrink-wrap the real form height.
     It only scrolls when the form is genuinely taller than the viewport. */
  html body #payment-dialog[open]{
    width:calc(100vw - 12px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 12px)!important;
    margin:auto!important;
    padding:14px!important;
    border-radius:18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:block!important;
  }
  html body #payment-dialog .dialog-head{
    position:sticky!important;
    top:-14px!important;
    z-index:5!important;
    background:#fff!important;
    padding:4px 0 10px!important;
    margin-bottom:2px!important;
  }
  html body #payment-dialog #payment-widgets{
    width:100%!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html body #payment-dialog .widget-frame{
    display:block!important;
    width:100%!important;
    height:680px!important;
    min-height:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  html body #payment-dialog .payment-fallback{
    margin:8px 0 2px!important;
    font-size:.76rem!important;
    line-height:1.4!important;
  }
}
/* 2026-09-18 hero/mobile Telegram/results fixes */
@media (max-width:700px){
  /* Hero eyebrow: keep the short label on one line. */
  html body .hero-top .eyebrow{
    max-width:none!important;
    width:max-content!important;
    white-space:nowrap!important;
    font-size:.62rem!important;
    letter-spacing:.11em!important;
    line-height:1.2!important;
  }

  /* Results: orange underline sweeps in as each row enters the viewport. */
  html body #results .skill-row::after{
    background:#f46f17!important;
    height:2px!important;
    transition:width .72s cubic-bezier(.22,.61,.36,1)!important;
  }
  html body #results .skill-row.active::after{
    width:100%!important;
  }

  /* iOS in-app browsers (Telegram etc.) overlay their toolbar on top of the page.
     Extend the header background upward so hero text never peeks through above it. */
  html body header.header::before{
    content:''!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:100%!important;
    height:180px!important;
    background:#f4f7fc!important;
    pointer-events:none!important;
  }
}
/* 2026-09-18 mobile menu and iOS top-bar fix */
@media (max-width:700px){
  /* The generic mobile rule hides every direct nav in the header.
     Explicitly restore the dropdown when JS removes [hidden]. */
  html body header.header .menu-toggle{
    position:relative!important;
    z-index:100002!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  html body header.header #mobile-menu[hidden]{
    display:none!important;
  }
  html body header.header #mobile-menu:not([hidden]){
    display:flex!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    z-index:100001!important;
    flex-direction:column!important;
    gap:0!important;
    padding:16px 20px 22px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(50,28,91,.12)!important;
    box-shadow:0 18px 34px rgba(50,28,91,.10)!important;
  }
  html body header.header #mobile-menu:not([hidden]) a{
    display:block!important;
    padding:12px 4px!important;
    color:#321c5b!important;
    border-bottom:1px solid rgba(50,28,91,.08)!important;
  }
  html body header.header #mobile-menu:not([hidden]) a:last-child{
    border-bottom:0!important;
  }

  /* Solid mobile header gives iOS/Telegram a white edge color instead of
     allowing page content to bleed through the translucent browser chrome. */
  html,body{
    background:#fff!important;
  }
  html body header.header{
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}
/* 2026-09-18 polished mobile menu and Telegram sticky header */
@media (max-width:700px){
  html body header.header{
    position:sticky!important;
    top:0!important;
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:99999!important;
  }
  html body header.header::before{
    display:none!important;
    content:none!important;
  }

  /* Compact dropdown card instead of the desktop pill-shaped nav. */
  html body header.header #mobile-menu:not([hidden]){
    display:flex!important;
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    z-index:100001!important;
    flex-direction:column!important;
    gap:0!important;
    padding:8px 14px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(50,28,91,.12)!important;
    border-radius:18px!important;
    box-shadow:0 18px 42px rgba(50,28,91,.16)!important;
    overflow:hidden!important;
  }
  html body header.header #mobile-menu:not([hidden]) a{
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    padding:0 8px!important;
    color:#321c5b!important;
    font-size:1rem!important;
    font-weight:500!important;
    border:0!important;
    border-bottom:1px solid rgba(50,28,91,.08)!important;
    border-radius:0!important;
    background:transparent!important;
  }
  html body header.header #mobile-menu:not([hidden]) a:last-child{
    border-bottom:0!important;
  }
  html body header.header #mobile-menu:not([hidden]) a:active{
    background:#f4f1fa!important;
  }
}
/* 2026-09-18 results underline on all screens */
html body #results .skill-row::after{
  background:#f46f17!important;
  height:2px!important;
  transition:width .72s cubic-bezier(.22,.61,.36,1)!important;
}
html body #results .skill-row.active::after{
  width:100%!important;
}
/* 2026-09-18 Telegram iOS non-sticky header test */
@media (max-width:700px){
  html.telegram-ios-browser body header.header{
    position:relative!important;
    top:auto!important;
  }
}
/* 2026-09-18 payment popup final desktop fix */
@media (min-width:701px){
  html body #payment-dialog[open]{
    display:flex!important;
    flex-direction:column!important;
    width:min(920px,calc(100vw - 48px))!important;
    height:auto!important;
    max-height:calc(100dvh - 32px)!important;
    padding:22px!important;
    margin:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:22px!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  html body #payment-dialog[open]::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
  html body #payment-dialog .dialog-head{
    position:sticky!important;
    top:-22px!important;
    z-index:5!important;
    flex:0 0 auto!important;
    background:#fff!important;
    padding:4px 0 10px!important;
    margin-bottom:4px!important;
  }
  html body #payment-dialog #payment-widgets{
    flex:0 0 auto!important;
    width:100%!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html body #payment-dialog .widget-frame{
    display:block!important;
    width:100%!important;
    height:760px!important;
    min-height:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  html body #payment-dialog .payment-fallback{
    flex:0 0 auto!important;
    margin:8px 0 0!important;
  }
}
/* 2026-09-18 direct GetCourse popup */
html body .gc-payment-dialog{
  width:min(860px,calc(100vw - 32px))!important;
  max-width:860px!important;
  max-height:calc(100dvh - 32px)!important;
  margin:auto!important;
  padding:56px 24px 24px!important;
  border:0!important;
  border-radius:22px!important;
  background:#fff!important;
  color:#321c5b!important;
  overflow:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  box-shadow:0 24px 70px rgba(18,12,30,.28)!important;
}
html body .gc-payment-dialog::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
html body .gc-payment-dialog::backdrop{
  background:rgba(15,16,20,.86)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
html body .gc-payment-dialog .gc-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:5!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(50,28,91,.24)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#321c5b!important;
  font-size:1.25rem!important;
  line-height:1!important;
  cursor:pointer!important;
}
html body .gc-payment-dialog .gc-direct-widget{
  width:100%!important;
  max-width:100%!important;
  min-height:120px!important;
  overflow:visible!important;
}
html body .gc-payment-dialog .gc-direct-widget iframe,
html body .gc-payment-dialog .gc-direct-widget form,
html body .gc-payment-dialog .gc-direct-widget>div{
  max-width:100%!important;
}
@media(max-width:700px){
  html body .gc-payment-dialog{
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
    padding:52px 14px 14px!important;
    border-radius:18px!important;
  }
  html body .gc-payment-dialog .gc-close{
    top:10px!important;
    right:10px!important;
    width:40px!important;
    height:40px!important;
  }
}
/* 2026-09-18 clean GetCourse iframe popup */
html body #payment-dialog.gc-payment-dialog[open]{
  display:flex!important;
  flex-direction:column!important;
  width:min(920px,calc(100vw - 32px))!important;
  height:min(790px,calc(100dvh - 24px))!important;
  max-width:920px!important;
  max-height:calc(100dvh - 24px)!important;
  margin:auto!important;
  padding:12px!important;
  border:0!important;
  border-radius:22px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 24px 70px rgba(18,12,30,.28)!important;
}
html body #payment-dialog.gc-payment-dialog::backdrop{
  background:rgba(15,16,20,.86)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
html body #payment-dialog.gc-payment-dialog .gc-close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  z-index:10!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(50,28,91,.24)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#321c5b!important;
  font-size:1.25rem!important;
  line-height:1!important;
  cursor:pointer!important;
}
html body #payment-dialog.gc-payment-dialog .gc-frame-host{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
html body #payment-dialog.gc-payment-dialog .widget-frame{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
  background:#fff!important;
}
@media(max-width:700px){
  html body #payment-dialog.gc-payment-dialog[open]{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
    padding:8px!important;
    border-radius:18px!important;
  }
  html body #payment-dialog.gc-payment-dialog .gc-close{
    top:8px!important;
    right:8px!important;
    width:40px!important;
    height:40px!important;
  }
}
/* 2026-09-18 lightweight GetCourse overlays */
html body.payment-open{overflow:hidden!important}

html body .gc-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .18s ease!important;
}
html body .gc-overlay.is-open{
  opacity:1!important;
  pointer-events:auto!important;
}
html body .gc-overlay-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(15,16,20,.82)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
}
html body .gc-overlay-inner{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:min(760px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  transform:translate(-50%,-50%)!important;
  overflow:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body .gc-overlay-inner::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
html body .gc-overlay-widget{
  width:100%!important;
  min-height:120px!important;
  background:transparent!important;
}
html body .gc-overlay-widget>div,
html body .gc-overlay-widget form,
html body .gc-overlay-widget iframe{
  max-width:100%!important;
}
html body .gc-overlay-close{
  position:sticky!important;
  top:8px!important;
  float:right!important;
  z-index:5!important;
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  margin:8px 8px -48px 0!important;
  padding:0!important;
  border:1px solid rgba(50,28,91,.22)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#321c5b!important;
  font-size:1.2rem!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 8px 20px rgba(50,28,91,.08)!important;
}

@media(max-width:700px){
  html body .gc-overlay-inner{
    width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
  }
  html body .gc-overlay-close{
    top:6px!important;
    margin:6px 6px -46px 0!important;
  }
}
/* 2026-09-18 preloaded GetCourse iframe overlays */
html body .gc-overlay-frame{
  display:block!important;
  width:100%!important;
  height:min(760px,calc(100dvh - 24px))!important;
  min-height:520px!important;
  border:0!important;
  background:transparent!important;
}
html body .gc-overlay-inner{
  width:min(760px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 12px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
@media(max-width:700px){
  html body .gc-overlay-frame{
    height:calc(100dvh - 12px)!important;
    min-height:0!important;
  }
  html body .gc-overlay-inner{
    width:calc(100vw - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
  }
}

/* 2026-09-18 fitted preloaded GetCourse overlays */
html body .gc-overlay-inner{
  width:min(760px,calc(100vw - 20px))!important;
  max-height:calc(100dvh - 12px)!important;
  overflow:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html body .gc-overlay-inner::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
html body .gc-overlay-frame{
  display:block!important;
  width:100%!important;
  height:620px!important;
  min-height:260px!important;
  border:0!important;
  background:transparent!important;
}
html body .gc-overlay-close{
  position:sticky!important;
  top:6px!important;
  float:right!important;
  margin:6px 6px -46px 0!important;
  z-index:20!important;
}
@media(max-width:700px){
  html body .gc-overlay-inner{
    width:calc(100vw - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
  }
  html body .gc-overlay-frame{
    width:100%!important;
    height:620px!important;
    min-height:260px!important;
  }
  html body .gc-overlay-close{
    top:4px!important;
    margin:4px 4px -44px 0!important;
  }
}

/* 2026-09-18 hero title star: SVG prevents iOS emoji rendering. */
html body .hero .title-star{
  color:#f46f17!important;
  line-height:1!important;
}
html body .hero .title-star svg{
  display:block!important;
  width:1em!important;
  height:1em!important;
  overflow:visible!important;
}
html body .hero .title-star svg path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:3!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke!important;
}