/* MATCHSIK mobile enrollment flow v32.5 */
:root{--v325-navy:#081c3b;--v325-ink:#0a2050;--v325-blue:#1767ff;--v325-orange:#ff681e;--v325-muted:#627493;--v325-line:#dfe8f3;--v325-soft:#f5f9fe}

/* pricing cards: cleaner hierarchy on all viewports */
body.apply-standalone #appPage .billing-mode-grid.premium{gap:14px!important}
body.apply-standalone #appPage .billing-mode-card{border:1px solid #dce6f3!important;border-radius:16px!important;background:#fff!important;box-shadow:0 12px 34px rgba(8,28,59,.07)!important;overflow:hidden!important;min-width:0!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}
body.apply-standalone #appPage .billing-mode-card:before{content:"";position:absolute!important;left:0;right:0;bottom:0;height:4px;background:#dbe6f4}
body.apply-standalone #appPage .billing-mode-card.monthly-card:before{background:var(--v325-blue)}
body.apply-standalone #appPage .billing-mode-card.exam-card:before{background:var(--v325-orange)}
body.apply-standalone #appPage .billing-mode-card.selected{border-color:#98baff!important;box-shadow:0 0 0 3px rgba(23,103,255,.08),0 18px 40px rgba(8,28,59,.09)!important}
body.apply-standalone #appPage .billing-mode-card .mode-icon{display:grid!important;place-items:center!important;width:54px!important;height:54px!important;border-radius:14px!important;background:#edf4ff!important;color:var(--v325-blue)!important;font-size:16px!important;font-weight:900!important;flex:none!important}
body.apply-standalone #appPage .billing-mode-card.exam-card .mode-icon{background:#fff0e8!important;color:var(--v325-orange)!important}
body.apply-standalone #appPage .mode-copy{min-width:0!important}
body.apply-standalone #appPage .mode-copy small{display:block!important;color:#8394ac!important;font-size:10px!important;letter-spacing:.12em!important;font-weight:900!important}
body.apply-standalone #appPage .mode-copy b{display:block!important;color:var(--v325-navy)!important;font-size:22px!important;line-height:1.25!important;letter-spacing:-.04em!important;margin-top:2px!important;word-break:keep-all!important}
body.apply-standalone #appPage .mode-copy p{color:var(--v325-muted)!important;font-size:13px!important;line-height:1.55!important;margin-top:6px!important;word-break:keep-all!important}
body.apply-standalone #appPage .mode-rate{display:flex!important;align-items:baseline!important;gap:7px!important;justify-content:flex-end!important;flex-wrap:wrap!important;min-width:0!important;text-align:right!important}
body.apply-standalone #appPage .mode-rate b{color:var(--v325-navy)!important;font-size:19px!important;white-space:nowrap!important}
body.apply-standalone #appPage .mode-rate.discount-preview b{color:var(--v325-orange)!important}
body.apply-standalone #appPage .mode-rate del{font-size:11px!important;color:#9ba8ba!important}
body.apply-standalone #appPage .mode-rate small{font-size:10px!important;color:#8493a8!important;line-height:1.35!important}
body.apply-standalone #appPage .plan-state-badge{background:var(--v325-blue)!important;color:#fff!important;border:0!important}
body.apply-standalone #appPage .discount-preview-badge{background:#fff0e8!important;color:#d84d0a!important;border:1px solid #ffd0ba!important}

/* later step navigation should stay anchored to the viewport, not drift with content */
@media(max-width:760px){
  body.apply-standalone{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
  body.apply-standalone #appPage .header{display:none!important}
  body.apply-standalone #appPage{min-height:100dvh!important}
  body.apply-standalone #appPage .app-shell{display:block!important;min-height:100dvh!important}
  body.apply-standalone #appPage .sidebar{position:sticky!important;top:0!important;z-index:220!important;width:100%!important;height:50px!important;min-height:50px!important;padding:0 16px!important;border:0!important;border-bottom:1px solid #dce6f3!important;background:rgba(255,255,255,.97)!important;box-shadow:0 6px 22px rgba(8,28,59,.06)!important;display:flex!important;align-items:center!important;gap:8px!important;backdrop-filter:blur(12px)!important}
  body.apply-standalone #appPage .sidebar-label,body.apply-standalone #appPage .sidebar-summary,body.apply-standalone #appPage .sidebar-rule,body.apply-standalone #appPage .step-list{display:none!important}
  body.apply-standalone #appPage .sidebar-cert{font-size:15px!important;line-height:1!important;font-weight:900!important;color:var(--v325-navy)!important;margin:0!important;white-space:nowrap!important}
  body.apply-standalone #appPage .sidebar-tag{display:inline-flex!important;align-items:center!important;min-height:26px!important;padding:3px 8px!important;border-radius:999px!important;font-size:10px!important;margin:0!important}
  body.apply-standalone #appPage .app-main{min-height:calc(100dvh - 50px)!important}
  body.apply-standalone #appPage .app-content{width:100%!important;padding:14px 14px 22px!important;max-width:none!important;overflow:visible!important}
  body.apply-standalone #appPage .mobile-progress{display:none!important}
  body.apply-standalone #appPage .step-eyebrow{font-size:10px!important;margin-bottom:4px!important;letter-spacing:.12em!important}
  body.apply-standalone #appPage .app-title{font-size:28px!important;line-height:1.15!important;margin:0!important;letter-spacing:-.055em!important}
  body.apply-standalone #appPage .app-desc{font-size:13px!important;line-height:1.5!important;margin-top:7px!important;max-width:none!important}
  body.apply-standalone #appPage .draft-status{margin-top:8px!important;min-height:30px!important;padding:5px 10px!important;font-size:10px!important}
  body.apply-standalone #appPage .smart-stepbar{margin:10px 0 12px!important;padding:9px 11px!important;border-radius:12px!important;box-shadow:none!important;background:#fff!important}
  body.apply-standalone #appPage .smart-stepbar small{font-size:10px!important}
  body.apply-standalone #appPage .smart-stepbar b{font-size:12px!important}
  body.apply-standalone #appPage .smart-dots i{width:18px!important;height:3px!important}
  body.apply-standalone #appPage .smart-dots i.on{width:30px!important}
  body.apply-standalone[data-smart-main-step="1"] .smart-question{display:none!important}

  /* step1: choice should fit without scrolling */
  body.apply-standalone[data-smart-main-step="1"] #appPage .course-choice-grid:not(.smart-hidden){display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:12px!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card{min-height:88px!important;padding:13px 16px!important;border-radius:14px!important;text-align:left!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card .choice-chip{display:none!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card h3{font-size:20px!important;line-height:1.2!important;margin:0 0 5px!important;white-space:nowrap!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card strong{font-size:11px!important;line-height:1.35!important;display:block!important;word-break:keep-all!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card p{display:none!important}
  body.apply-standalone[data-smart-main-step="1"] .choice-check{position:absolute!important;right:16px!important;top:24px!important;margin-top:0!important;width:auto!important;height:auto!important;min-height:24px!important;padding:3px 8px!important;border-radius:999px!important;font-size:10px!important}
  body.apply-standalone[data-v325-phase="course"] .smart-nav{display:none!important}

  /* target round: compact six-card layout + no unnecessary schedule wall */
  body.apply-standalone[data-v325-phase="target"] .app-desc{display:none!important}
  body.apply-standalone[data-v325-phase="target"] .smart-stepbar{margin-top:8px!important}
  body.apply-standalone #appPage .smart-round-head{margin-bottom:9px!important;align-items:center!important}
  body.apply-standalone #appPage .smart-round-head b{font-size:20px!important}
  body.apply-standalone #appPage .smart-round-head small{font-size:10px!important;text-align:right!important;max-width:140px!important}
  body.apply-standalone #appPage .smart-round-picker section+section{margin-top:10px!important}
  body.apply-standalone #appPage .smart-round-picker h4{margin-bottom:6px!important;font-size:11px!important}
  body.apply-standalone #appPage .smart-round-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  body.apply-standalone #appPage .smart-round{min-height:70px!important;padding:10px!important;border-radius:12px!important;text-align:center!important}
  body.apply-standalone #appPage .smart-round small{font-size:9px!important}
  body.apply-standalone #appPage .smart-round b{font-size:18px!important;margin-top:1px!important}
  body.apply-standalone #appPage .smart-round span{position:static!important;display:block!important;margin-top:3px!important;font-size:9px!important}
  body.apply-standalone #appPage .smart-round-detail{display:block;margin-top:12px}
  body.apply-standalone #appPage .smart-custom-date{margin-top:9px!important;min-height:40px!important;font-size:12px!important;padding:8px 11px!important}
  body.apply-standalone[data-v325-phase="target"] .smart-nav{margin-top:8px!important;padding-top:0!important}
  body.apply-standalone[data-v325-phase="target"] .smart-nav .smart-next{display:block!important}
  body.apply-standalone[data-v325-phase="target"] .smart-nav .smart-back{width:100%!important;min-height:42px!important}

  /* Plan choice: one clear row per option, no cramped columns */
  body.apply-standalone[data-smart-main-step="3"] .pricing-intro{margin-bottom:10px!important}
  body.apply-standalone #appPage .billing-mode-grid.premium{grid-template-columns:1fr!important;gap:10px!important}
  body.apply-standalone #appPage .billing-mode-card{display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;min-height:112px!important;padding:14px 15px!important;text-align:left!important}
  body.apply-standalone #appPage .billing-mode-card .mode-icon{width:46px!important;height:46px!important;border-radius:12px!important;font-size:14px!important;grid-row:1/3!important}
  body.apply-standalone #appPage .mode-copy b{font-size:20px!important}
  body.apply-standalone #appPage .mode-copy p{font-size:12px!important;margin-top:3px!important}
  body.apply-standalone #appPage .mode-rate{grid-column:2!important;justify-content:flex-start!important;text-align:left!important;border-top:1px solid #edf2f8!important;padding-top:8px!important;margin-top:2px!important}
  body.apply-standalone #appPage .mode-rate b{font-size:17px!important}
  body.apply-standalone #appPage .plan-badge-stack{position:absolute!important;right:11px!important;top:10px!important;display:flex!important;gap:5px!important}
  body.apply-standalone #appPage .pricing-section-head{align-items:flex-end!important;gap:10px!important;margin-bottom:10px!important}
  body.apply-standalone #appPage .pricing-section-head h4{font-size:22px!important;line-height:1.2!important;word-break:keep-all!important}
  body.apply-standalone #appPage .pricing-section-head small{font-size:10px!important;max-width:120px!important;text-align:right!important;line-height:1.35!important}

  /* fixed, stable bottom navigation for steps 4-7 */
  body.apply-standalone[data-smart-main-step="4"] #stepContent>.step-actions,
  body.apply-standalone[data-smart-main-step="5"] #stepContent>.step-actions,
  body.apply-standalone[data-smart-main-step="6"] #stepContent>.step-actions,
  body.apply-standalone[data-smart-main-step="7"] #stepContent>.step-actions{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:500!important;margin:0!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #dce6f3!important;box-shadow:0 -12px 32px rgba(8,28,59,.10)!important;display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:9px!important;backdrop-filter:blur(14px)!important}
  body.apply-standalone[data-smart-main-step="4"] #stepContent>.step-actions button,
  body.apply-standalone[data-smart-main-step="5"] #stepContent>.step-actions button,
  body.apply-standalone[data-smart-main-step="6"] #stepContent>.step-actions button,
  body.apply-standalone[data-smart-main-step="7"] #stepContent>.step-actions button{min-height:50px!important;margin:0!important;border-radius:12px!important;font-size:15px!important}
  body.apply-standalone[data-smart-main-step="4"] #stepContent,
  body.apply-standalone[data-smart-main-step="5"] #stepContent,
  body.apply-standalone[data-smart-main-step="6"] #stepContent,
  body.apply-standalone[data-smart-main-step="7"] #stepContent{padding-bottom:88px!important}

  /* teacher card repaint stability */
  body.apply-standalone[data-smart-main-step="5"] .m2813-teacher-card{animation:none!important;transition:border-color .14s ease,box-shadow .14s ease!important;transform:none!important;will-change:auto!important;opacity:1!important;visibility:visible!important;backface-visibility:hidden!important}
  body.apply-standalone[data-smart-main-step="5"] .m2813-teacher-grid{contain:layout!important}
}

@media(max-width:380px){
  body.apply-standalone #appPage .app-content{padding-inline:11px!important}
  body.apply-standalone[data-smart-main-step="1"] .course-choice-grid{gap:6px!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card{padding:11px 7px!important;min-height:88px!important}
  body.apply-standalone[data-smart-main-step="1"] #appPage .choice-card h3{font-size:18px!important}
  body.apply-standalone #appPage .smart-round{padding:8px 6px!important}
}

.v325-round-sheet{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:900;background:#fff;border:1px solid #d8e4f2;border-radius:20px;box-shadow:0 24px 70px rgba(8,28,59,.24);padding:18px;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;animation:v325SheetIn .2s ease both}
.v325-round-sheet .v325-close{float:right;min-height:32px;border:0;background:#eef4fc;color:#345476;padding:5px 10px;margin:0 0 8px 8px}
.v325-round-sheet small{display:block;color:#6e819c;font-size:10px;font-weight:900;letter-spacing:.11em}
.v325-round-sheet h3{margin:3px 0 0;color:var(--v325-navy);font-size:21px;letter-spacing:-.045em}
.v325-round-sheet p{margin:6px 0 14px;color:var(--v325-muted);font-size:12px;line-height:1.55}
.v325-round-sheet .v325-sheet-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px}
.v325-round-sheet button{min-height:48px;border-radius:12px;font-weight:850;font-size:13px}
.v325-round-sheet .v325-custom{background:#fff;color:#345476;border:1px solid #cddbea}
.v325-round-sheet .v325-continue{background:var(--v325-blue);color:#fff}
.v325-round-sheet input{display:none;width:100%;min-height:48px;border:1px solid #afc6e5;border-radius:11px;padding:9px 11px;margin:0 0 9px;font-size:16px;color:var(--v325-ink);background:#fff}
.v325-round-sheet.is-custom input{display:block}
.v325-round-sheet.is-custom .v325-custom{display:none}
@keyframes v325SheetIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}