/* eagleview_payment.css — Payment page styles
   Extracted from inline <style> in eagleview_payment.html so browsers can
   cache these rules across page loads. Page-specific ONLY;
   anything shared with the sibling page lives in
   eagleview-shared.css and is loaded first.
*/

/* Payment-page body overrides: stack children vertically so the footer
   can sit at the bottom of a full-height viewport (shared body just
   sets font/colors/scroll). */
body{min-height:100vh;display:flex;flex-direction:column;}

/* ── logo header ── */
.top{position:relative;z-index:2;padding:16px 64px;}
.nl{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:17px;font-weight:800;color:var(--tx);}

/* ── hero-style wrap ── */
/* Content is anchored to the top (not centred), so the Individual / Student / Company tab bar stays at exactly the same
   place on all three tabs, whatever the height of each view. */
.wrap{position:relative;flex:1;display:flex;align-items:flex-start;padding:64px clamp(20px,5vw,64px) 64px;overflow:hidden;}
/* No filter:blur here on purpose: each glow is already a radial-gradient that fades to transparent at its edge, and a
   600px blurred layer that also moves had to be re-blurred by the browser every frame (and again each time a tab's
   orbs were shown), which made the whole page stutter. */
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.o1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,255,.11),transparent 70%);top:-220px;left:-180px;animation:orb 18s ease-in-out infinite;}
.o2{width:460px;height:460px;background:radial-gradient(circle,rgba(255,104,32,.09),transparent 70%);bottom:-160px;right:-140px;animation:orb 22s ease-in-out infinite;animation-delay:-6s;}
.o3{width:360px;height:360px;background:radial-gradient(circle,rgba(124,58,237,.08),transparent 70%);bottom:20%;left:38%;animation:orb 26s ease-in-out infinite;animation-delay:-13s;}
/* .inner mirrors index.html .hi (same 1280px cap + gap) and .col-mock
   mirrors .hm (same negative left offset) so the panel sits at the exact
   same horizontal position on both pages. */
.inner{position:relative;z-index:1;display:flex;align-items:flex-start;gap:80px;max-width:1280px;width:100%;margin:0 auto;}
.col-form{flex:1 1 460px;min-width:0;max-width:460px;}
/* margin-left:auto pushes the panel to the far right of the 1280px .inner
   container (same natural resting spot as .hm on the home page, where .ht
   {flex:1} does the pushing). Then left:-220px nudges it back exactly like
   the home page does — same absolute panel position on both pages. */
/* Pinned near the top (not centred against the form) so the panel does not jump when the tab changes. */
.col-mock{flex:0 0 auto;align-self:flex-start;margin-top:40px;position:relative;animation:fadeUp .6s .15s ease both;margin-left:auto;left:-220px;}

.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.22);color:var(--cy);padding:6px 16px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:22px;animation:fadeUp .6s ease both,glowBorder 3s ease-in-out infinite;}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0;}
h1{font-size:clamp(32px,4.2vw,46px);font-weight:900;line-height:1.04;letter-spacing:-1.6px;margin-bottom:14px;color:var(--tx);animation:fadeUp .6s .1s ease both;}
h1 .grad,.grad-text{display:block;background:linear-gradient(135deg,var(--or) 0%,#FFB300 38%,var(--cy) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite;}
.grad-text{display:inline-block;}
.sub{font-size:14.5px;color:var(--tx2);line-height:1.7;margin-bottom:28px;min-height:3.4em;animation:fadeUp .6s .2s ease both;}
.cur{display:inline-block;width:2px;height:1em;background:var(--cy);vertical-align:text-bottom;margin-left:1px;animation:blink .75s steps(1) infinite;}

.card{animation:fadeUp .6s .25s ease both;}
/* Plans: three square cards side by side (period, standard price, See offer). The selected card gets
   the cyan border; the "See offer" pill strikes the standard price and shows the launch price under it.
   Every rule is scoped to .plans so the hidden coupon-only 3 Months row (#hpCard) keeps its row look. */
.plans{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px;}
.plans .plan{position:relative;flex-direction:column;justify-content:center;align-items:center;gap:10px;aspect-ratio:1;padding:16px 8px 12px;text-align:center;cursor:pointer;}
.plans .plan.sel{border-color:transparent;}
.plan-sel-indicator{position:absolute;left:0;top:0;width:0;height:0;z-index:2;border-radius:14px;background:rgba(0,229,255,.05);border:1.5px solid var(--cy);box-shadow:0 0 0 1px rgba(0,229,255,.15),0 0 24px rgba(0,229,255,.05);pointer-events:none;opacity:0;box-sizing:border-box;/* transform only: runs on the compositor, so it stays smooth even while the page repaints. All three cards are the same size, so width/height never need to animate. */transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
.plan-sel-indicator.show{opacity:1;}
.plan-sel-indicator.no-anim{transition:none;}
.plans .plan-dur{font-size:15px;}
.plans .plan-badge{position:absolute;z-index:3;top:-9px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;}
.plan-std-price{position:relative;display:inline-block;font-size:19px;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums;transition:color .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;}
.plan-std-price::after{content:'';position:absolute;left:-6%;right:-6%;top:50%;height:4px;background:rgba(255,107,122,.85);border-radius:2px;transform:translateY(-50%) rotate(-15deg) scaleX(0);opacity:0;transition:transform .4s ease,opacity .3s ease;pointer-events:none;}
.plan.revealed .plan-std-price{opacity:.6;}
.plan.revealed .plan-std-price::after{transform:translateY(-50%) rotate(-15deg) scaleX(1);opacity:1;}
.plan-std-price s{text-decoration:none;}
.plan.sel .plan-std-price{color:var(--cy);}
.plan-offer-col{position:relative;width:100%;height:30px;}
.plan-price{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:17px;font-weight:800;color:var(--cy);font-variant-numeric:tabular-nums;opacity:0;transform:scale(.9);pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
.plan.revealed .plan-price{opacity:1;transform:scale(1);pointer-events:auto;}
.reveal-offer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--or);background:rgba(255,165,87,.10);border:1px solid rgba(255,165,87,.35);border-radius:6px;padding:3px 8px;cursor:pointer;transition:opacity .25s ease,background .2s;}
.reveal-offer:hover,.reveal-offer:focus-visible{background:rgba(255,165,87,.22);outline:none;}
.plan.revealed .reveal-offer{opacity:0;pointer-events:none;}
/* Narrow phones: the three cards stack into one column of rows (period, price, offer in a line). */
@media(max-width:400px){
  .plans{grid-template-columns:1fr;gap:16px;}
  .plans .plan{aspect-ratio:auto;flex-direction:row;justify-content:space-between;padding:14px 16px;text-align:left;}
  .plans .plan-badge{left:auto;right:14px;transform:none;}
  .plan-offer-col{width:96px;flex-shrink:0;}
}
.plan{display:flex;align-items:center;background:var(--sf);border:1.5px solid rgba(0,229,255,.09);border-radius:14px;padding:14px 16px;gap:0;transition:border-color .35s cubic-bezier(.4,0,.2,1),background .35s cubic-bezier(.4,0,.2,1);}
.plan:hover{border-color:rgba(0,229,255,.28);background:#0E1730;}
.plan.sel{border-color:transparent;}
.plan-left{flex:1;}
.plan-dur{font-size:14px;font-weight:700;color:var(--tx);transition:color .35s cubic-bezier(.4,0,.2,1);}
.plan.sel .plan-dur{color:var(--cy);}
.plan-desc{font-size:11px;color:var(--tx3);margin-top:2px;}
/* Used by the hidden coupon-only 3 Months row (#hpCard), which stays a full-width row. */
.plan-right{margin-right:14px;display:flex;align-items:center;gap:18px;}
.radio{width:18px;height:18px;border:2px solid rgba(0,229,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .35s cubic-bezier(.4,0,.2,1);}
.plan.sel .radio{border-color:var(--cy);}
.radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--cy);opacity:0;transform:scale(0);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);}
.plan.sel .radio::after{opacity:1;transform:scale(1);}
.plan-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:linear-gradient(90deg,var(--or),#FFB300);color:#050B14;border-radius:20px;padding:2px 8px;margin-left:8px;}
@media(max-width:380px){
  .hp-price{font-size:16px;}
}

.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.16),transparent);margin:6px 0 18px;}
.inp{width:100%;background:var(--sf);border:1.5px solid rgba(0,229,255,.1);border-radius:10px;padding:12px 15px;font-size:13px;color:var(--tx);font-family:inherit;outline:none;margin-bottom:10px;transition:border-color .2s,box-shadow .2s;}
.inp:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(0,229,255,.08);}
.inp::placeholder{color:var(--tx2);}
.inp[readonly]{background:#080D1C;color:var(--tx2);border-color:rgba(0,229,255,.06);}
.email-row{position:relative;}
.mid-ok{display:none;align-items:center;gap:7px;font-size:12px;color:var(--tx2);margin-bottom:10px;}
.mid-dot{width:7px;height:7px;border-radius:50%;background:var(--gr);box-shadow:0 0 6px var(--gr);flex-shrink:0;}
.mid-ok strong{color:var(--gr);font-weight:600;}
.hint{font-size:11px;color:var(--tx3);margin-bottom:10px;line-height:1.5;}
.hint strong{color:var(--tx2);}
.err{display:none;font-size:12px;color:#FF6B7A;margin-bottom:10px;}
.coupon-row{display:flex;gap:8px;margin-bottom:10px;}
/* "Have a coupon code?" button. Same box as the input (padding, font, border), so swapping it for the
   input row moves nothing. No height animation on purpose: it made this page (big blurred orbs) blank
   and reload in the browser. The row only fades in, which costs nothing. */
.coupon-toggle{display:block;width:100%;box-sizing:border-box;margin:0 0 10px;padding:12px 15px;background:rgba(255,104,32,.05);border:1.5px dashed rgba(255,104,32,.35);border-radius:10px;color:#FF9A5C;font-size:13px;font-weight:700;font-family:inherit;line-height:normal;cursor:pointer;transition:background .2s,border-color .2s;}
.coupon-toggle:hover{background:rgba(255,104,32,.12);border-color:rgba(255,104,32,.6);}
.coupon-toggle:focus-visible{outline:2px solid var(--cy);outline-offset:2px;}
@keyframes couponIn{from{opacity:0;}to{opacity:1;}}
.coupon-row.coupon-in,.co-form.coupon-in{animation:couponIn .25s ease both;}
@media(prefers-reduced-motion:reduce){.coupon-row.coupon-in,.co-form.coupon-in{animation:none;}}
#hpCard{display:none;margin-bottom:10px;transition:border-color .35s cubic-bezier(.4,0,.2,1),background .35s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;}
#hpCard.sel{border-color:var(--cy);background:rgba(0,229,255,.05);box-shadow:0 0 0 1px rgba(0,229,255,.15),0 0 24px rgba(0,229,255,.05);}
.hp-price{font-size:19px;font-weight:800;color:var(--cy);font-variant-numeric:tabular-nums;}
@keyframes hpPulse{0%{box-shadow:0 0 0 0 rgba(0,229,255,.4);}70%{box-shadow:0 0 0 12px rgba(0,229,255,0);}100%{box-shadow:0 0 0 0 rgba(0,229,255,0);}}
.hp-just-unlocked{animation:hpPulse 1.1s ease-out;}
.coupon-row .inp{margin-bottom:0;flex:1;min-width:0;}
.coupon-apply-btn{padding:0 16px;background:rgba(255,104,32,.08);border:1.5px solid rgba(255,104,32,.35);border-radius:10px;color:#FF9A5C;font-size:12px;font-weight:700;font-family:inherit;transition:all .2s;white-space:nowrap;}
.coupon-apply-btn:hover{background:rgba(255,104,32,.16);border-color:rgba(255,104,32,.6);}

.pay-btn{width:100%;padding:15px;background:linear-gradient(135deg,#FDA149,#FC8215);color:#fff;font-size:14.5px;font-weight:700;border:none;border-radius:11px;font-family:inherit;box-shadow:0 0 28px rgba(252,130,21,.3),0 4px 20px rgba(0,0,0,.3);transition:all .25s;position:relative;overflow:hidden;}
.pay-btn::after{content:'';position:absolute;top:0;left:-100%;bottom:0;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:beam 2.5s linear infinite;}
.pay-btn:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(252,130,21,.5),0 8px 28px rgba(252,130,21,.35);}
.pay-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.trust{font-size:11px;color:var(--tx3);text-align:center;margin-top:14px;}
.success{display:none;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:8px 0;}
.success-icon{font-size:42px;}
.success-title{font-size:18px;font-weight:800;color:var(--cy);}
.success-msg{font-size:13px;color:var(--tx2);line-height:1.6;}
.footer-links{margin-top:22px;display:flex;gap:18px;justify-content:center;}
.footer-links a{font-size:11px;color:var(--tx3);text-decoration:none;transition:color .15s;}
.footer-links a:hover{color:var(--cy);}

/* ── mockup (exact copy of the homepage HUD) ── */
.mock{width:215px;transform-origin:top left;}
.asb{width:215px;background:linear-gradient(160deg,#0C1A38 0%,#050D20 100%);border-radius:20px;overflow:hidden;border:1px solid #FC8215;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 60px rgba(252,130,21,.08);position:relative;animation:float1 7s ease-in-out infinite;}
.ah{padding:11px 14px;display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,#0D1F3A,#152A50,#0D1F3A);border-bottom:1px solid rgba(0,229,255,.1);position:relative;overflow:hidden;}
.ahi{width:32px;height:32px;background:linear-gradient(135deg,#001628,#003B6F);border:1px solid rgba(0,229,255,.3);border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(0,229,255,.2);}
.ar{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid rgba(0,229,255,.04);transition:background .15s;}
.ri{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.rl{font-size:12px;color:rgba(200,220,240,.75);flex:1;font-weight:500;}
.rb{font-size:10px;font-weight:800;color:var(--bg);background:var(--cy);padding:2px 8px;border-radius:100px;min-width:24px;text-align:center;box-shadow:0 0 8px rgba(0,229,255,.4);}
.rb.o{background:var(--or);box-shadow:0 0 8px rgba(255,104,32,.4);}
.rb.w{background:transparent;font-size:13px;padding:0;box-shadow:none;color:var(--tx);}
.nr{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid rgba(0,229,255,.03);}
.nc2{width:14px;height:14px;border-radius:3px;border:1.5px solid rgba(0,229,255,.18);flex-shrink:0;}
.nt{font-size:10.5px;color:rgba(180,205,230,.4);flex:1;}
.ntp{color:rgba(100,140,175,.28);font-style:italic;}
.sbc{padding:8px 10px;display:flex;gap:7px;background:rgba(0,0,0,.25);border-top:1px solid rgba(0,229,255,.05);}
.sbct{flex:1;border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:5px;}
.sbct.de{background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.12);}
.sbct.us{background:rgba(255,104,32,.05);border:1px solid rgba(255,104,32,.12);}
.sbcv{font-size:15px;font-weight:900;letter-spacing:1px;font-family:var(--mn);font-variant-numeric:tabular-nums;}
.sbct.de .sbcv{color:var(--cy);}
.sbct.us .sbcv{color:var(--or);}
.sbf{padding:6px 10px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.35);border-top:1px solid rgba(0,229,255,.05);}
.sbfs{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--tx3);font-family:var(--mn);}
.sbfd{width:5px;height:5px;border-radius:50%;background:#00E676;box-shadow:0 0 6px #00E676;animation:pulse 2s ease-in-out infinite;}

@media(max-width:900px){
  .inner{flex-direction:column;gap:44px;}
  .col-form{max-width:460px;width:100%;}
  /* Hide the whole panel column on mobile — the .asb was peeking in from
     the left edge and competing with the license form for attention.
     (Chip hiding + nav-logo shrink is handled by eagleview-shared.css.) */
  .col-mock{display:none;}
  .wrap{padding-top:20px;}
}

/* ── SMOOTH-SCROLL + PAINT PERF ────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{overscroll-behavior-y:none;}
/* Promote continually-animated elements to their own compositor layer so
   they don't force repaints of the rest of the page. */
.orb,.asb,.col-mock,.grad,.grad-text{will-change:transform;}
/* Honour users who opted into calmer motion (also disables JS-driven
   smooth scrolls via the matchMedia check in the script below). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── INDIVIDUAL | COMPANY SWITCH + COMPANY VIEW ────────────────────────────
   Appended only; no rule above is changed. The checkout script is untouched. */
[hidden]{display:none !important;}
.seg{position:relative;display:inline-flex;padding:4px;gap:2px;background:var(--sf);border:1px solid rgba(0,229,255,.14);border-radius:100px;}
.seg button{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--tx2);background:transparent;border:0;border-radius:100px;padding:8px 18px;cursor:pointer;position:relative;z-index:1;transition:color .3s ease;}
.seg button:hover{color:var(--tx);}
.seg button[aria-selected="true"]{color:#fff;}
/* The orange highlight: one pill that slides (and resizes) under whichever tab is selected. */
.seg-pill{position:absolute;left:0;top:4px;width:0;height:0;border-radius:100px;background:linear-gradient(135deg,#FDA149,#FC8215);box-shadow:0 0 18px rgba(252,130,21,.35);pointer-events:none;opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
.seg-pill.show{opacity:1;}
.seg-pill.no-anim{transition:none;}
@media(prefers-reduced-motion:reduce){.seg-pill{transition:none;}}
.seg button:focus-visible{outline:2px solid var(--cy);outline-offset:2px;}
/* The tab bar sits right above the card, as wide as the card, three equal tabs. */
.seg-slot{margin-bottom:18px;}
.seg-slot .seg{display:flex;width:100%;box-sizing:border-box;}
.seg-slot .seg button{flex:1;padding:8px 10px;}

.st-soon{font-size:clamp(26px,5vw,34px);letter-spacing:-.8px;}
.co-price{margin-bottom:14px;}
.co-amt{font-size:clamp(34px,6vw,44px);font-weight:900;letter-spacing:-1.4px;color:var(--tx);line-height:1.1;}
.co-amt span{font-size:15px;font-weight:600;letter-spacing:0;color:var(--tx2);}
.co-tax{font-size:12.5px;color:var(--tx2);margin-top:6px;line-height:1.5;}
.co-steps{list-style:none;counter-reset:co;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px;}
.co-steps li{counter-increment:co;position:relative;padding-left:34px;font-size:13px;line-height:1.55;color:var(--tx2);}
.co-steps li strong{color:var(--tx);}
.co-steps li::before{content:counter(co);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.28);color:var(--cy);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
/* Company order form: two short fields share a row, and stack on narrow phones. */
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.co-row .inp{min-width:0;}
/* Field wrapper: the input, then its own message. The wrapper carries the gap that the input used to. */
.fld{min-width:0;margin-bottom:10px;}
.fld .inp{margin-bottom:0;}
.fld .cb-list{top:calc(100% + 4px);}
.fld .cb.up .cb-list{top:auto;bottom:calc(100% + 4px);}
.fe{display:none;margin:6px 2px 0;font-size:11.5px;line-height:1.4;color:#FF6B7A;}
.fe.on{display:block;animation:couponIn .2s ease both;}
.inp.bad{border-color:rgba(255,107,122,.75);}
.inp.bad:focus{border-color:#FF6B7A;box-shadow:0 0 0 3px rgba(255,107,122,.13);}
@media(prefers-reduced-motion:reduce){.fe.on{animation:none;}}
@media(max-width:400px){.co-row{grid-template-columns:1fr;gap:0;}}

/* Country picker: a searchable list that opens under the field. Same surface, border and cyan focus as the other inputs.
   It fades in (opacity only, like the coupon box) and never animates height. */
.cb{position:relative;min-width:0;}
.cb .inp{padding-right:38px;cursor:text;}
/* Phone: a narrow country-code dropdown next to the number box. Stays side by side on phones. */
.co-phone{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;}
.cb-dial .inp{padding-left:13px;padding-right:30px;text-overflow:ellipsis;}
.cb-dial .cb-chev{right:13px;}
.cb-chev{position:absolute;right:15px;top:16px;width:7px;height:7px;border-right:1.5px solid var(--tx2);border-bottom:1.5px solid var(--tx2);transform:rotate(45deg);pointer-events:none;transition:transform .2s ease,border-color .2s ease;}
.cb.open .cb-chev{transform:translateY(3px) rotate(225deg);border-color:var(--cy);}
.cb-list{position:absolute;left:0;top:calc(100% - 6px);z-index:30;width:max(100%,264px);max-height:252px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;background:var(--sf2);border:1px solid rgba(0,229,255,.28);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.65),0 0 0 3px rgba(0,229,255,.05);scrollbar-width:thin;scrollbar-color:rgba(0,229,255,.28) transparent;animation:couponIn .15s ease both;}
.cb.up .cb-list{top:auto;bottom:calc(100% + 4px);}
.cb-list::-webkit-scrollbar{width:8px;}
.cb-list::-webkit-scrollbar-thumb{background:rgba(0,229,255,.22);border-radius:8px;}
.cb-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--tx);cursor:pointer;}
.cb-opt.act{background:rgba(0,229,255,.09);}
.cb-opt[aria-selected="true"] .cb-name{color:var(--cy);font-weight:700;}
.cb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-name mark{background:none;color:var(--or);font-weight:700;}
.cb-dial{flex-shrink:0;font-size:11.5px;color:var(--tx2);font-variant-numeric:tabular-nums;}
.cb-none{padding:14px 10px;font-size:12.5px;color:var(--tx2);text-align:center;}
@media(prefers-reduced-motion:reduce){.cb-list{animation:none;}.cb-chev{transition:none;}}
.co-cta{display:block;box-sizing:border-box;text-align:center;text-decoration:none;}
.co-hint{margin-top:12px;text-align:center;}
.trust a{color:var(--tx2);}
.trust a:hover{color:var(--cy);}

/* Student application: the proof upload box, the declaration, and the "payment received" note. */
.st-need{margin:0 0 12px;padding:12px 14px;border:1px solid rgba(0,229,255,.18);border-left:3px solid var(--or);border-radius:10px;background:rgba(0,229,255,.04);}
.st-need-h{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or);}
.st-need-l{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;}
.st-need-l li{padding:4px 10px;font-size:12.5px;font-weight:600;color:var(--tx);border:1px solid rgba(0,229,255,.3);border-radius:999px;background:rgba(0,229,255,.08);}
.st-need-n{margin:0;font-size:12px;line-height:1.55;color:var(--tx2);}
.st-need-n strong{color:var(--tx);}
.st-paid{margin:0 0 16px;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,229,160,.35);background:rgba(0,229,160,.07);color:var(--tx2);font-size:12.5px;line-height:1.55;}
.st-paid strong{display:block;color:var(--gr);margin-bottom:2px;}
.st-drop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border:1.5px dashed rgba(0,229,255,.28);border-radius:10px;background:var(--sf);transition:border-color .15s,background .15s;}
.st-drop.drag{border-color:var(--cy);background:rgba(0,229,255,.06);}
.st-drop.has{border-style:solid;}
.st-drop.bad{border-color:rgba(255,107,122,.75);}
.st-file{display:none;}
.st-pick,.st-clear{font:inherit;font-size:12.5px;font-weight:600;border-radius:8px;cursor:pointer;padding:8px 13px;}
.st-pick{color:var(--tx);background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.3);}
.st-pick:hover{background:rgba(0,229,255,.14);}
.st-pick.bad{border-color:rgba(255,107,122,.75);}
.st-pick{order:1;}
.st-clear{order:2;color:var(--tx2);background:none;border:1px solid rgba(255,255,255,.14);margin-left:auto;}
.st-clear:hover{color:var(--tx);}
.st-info{order:3;flex:1 1 100%;min-width:0;font-size:12px;color:var(--tx2);line-height:1.45;overflow-wrap:anywhere;}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--tx2);cursor:pointer;}
.chk input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--cy);}
.chk input.bad{outline:2px solid rgba(255,107,122,.75);outline-offset:1px;}
@media(prefers-reduced-motion:reduce){.st-drop{transition:none;}}