:root { --navy:#102f56; --blue:#1766ba; --ink:#17233b; --muted:#65728a; --gold:#f5b83c; --white:#fff; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.payment-portal { align-items:center; background:linear-gradient(135deg,#e8f4ff 0%,#f7fbff 48%,#e8f7f3 100%); display:flex; flex-direction:column; gap:24px; justify-content:center; min-height:100vh; overflow:hidden; padding:32px; position:relative; }
.portal-shell { background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.95); border-radius:28px; box-shadow:0 28px 70px rgba(28,70,112,.16); display:grid; grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr); margin:0 auto; max-width:1120px; min-height:630px; overflow:hidden; position:relative; width:100%; z-index:1; }
.school-panel { background:linear-gradient(145deg,#0b2c51 0%,#124d83 63%,#1765a5 100%); color:var(--white); display:flex; flex-direction:column; overflow:hidden; padding:48px 58px 42px; position:relative; }
.school-panel::before,.school-panel::after { border:1px solid rgba(255,255,255,.12); border-radius:50%; content:""; pointer-events:none; position:absolute; }
.school-panel::before { height:520px; right:-255px; top:-180px; width:520px; }.school-panel::after { bottom:-245px; height:430px; left:-215px; width:430px; }
.brand { align-items:center; color:var(--white); display:inline-flex; gap:13px; position:relative; text-decoration:none; width:max-content; z-index:1; }.brand:hover { color:var(--white); }
.brand-mark { align-items:center; background:var(--white); border-radius:13px; box-shadow:0 7px 18px rgba(0,0,0,.18); display:flex; height:53px; justify-content:center; overflow:hidden; padding:4px; width:53px; }.brand-mark img { display:block; max-height:100%; max-width:100%; object-fit:contain; }
.brand-name { font-size:17px; font-weight:750; letter-spacing:-.2px; line-height:1.15; }.brand-name small { display:block; font-size:11px; font-weight:500; letter-spacing:.1px; margin-top:5px; opacity:.72; }
.welcome-copy { margin:auto 0 45px; max-width:440px; position:relative; z-index:1; }.eyebrow { align-items:center; display:flex; font-size:11px; font-weight:750; letter-spacing:1.45px; margin:0 0 18px; text-transform:uppercase; }.eyebrow span { background:var(--gold); border-radius:50%; box-shadow:0 0 0 5px rgba(245,184,60,.18); height:7px; margin-right:11px; width:7px; }
h1 { font-size:clamp(38px,4.1vw,57px); font-weight:700; letter-spacing:-2.6px; line-height:1.04; margin:0; }h1 em { color:#bde9ff; font-family:Georgia,serif; font-weight:400; }.intro { color:rgba(255,255,255,.77); font-size:16px; line-height:1.65; margin:25px 0 0; max-width:390px; }
.feature-list { display:flex; gap:28px; position:relative; z-index:1; }.feature { align-items:center; display:flex; gap:11px; }.feature > span:last-child { display:flex; flex-direction:column; }.feature strong { font-size:12px; font-weight:700; }.feature small { color:rgba(255,255,255,.63); font-size:10px; margin-top:2px; }
.feature-icon { border:1px solid rgba(255,255,255,.27); border-radius:10px; height:34px; position:relative; width:34px; }.feature-icon::before,.feature-icon::after { content:""; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); }.feature-icon--shield::before { border:2px solid #bde9ff; border-radius:7px 7px 10px 10px; height:14px; width:12px; }.feature-icon--shield::after { background:#bde9ff; border-radius:50%; height:3px; width:3px; }.feature-icon--receipt::before { border:2px solid #bde9ff; border-radius:2px; height:16px; width:12px; }.feature-icon--receipt::after { background:#bde9ff; box-shadow:0 4px 0 #bde9ff; height:2px; transform:translate(-40%,-50%); width:6px; }.school-footer { color:rgba(255,255,255,.52); font-size:10px; line-height:1.4; margin:45px 0 0; position:relative; z-index:1; }
.login-panel { align-items:center; display:flex; flex-direction:column; justify-content:center; padding:44px 52px 28px; }.login-card { animation:card-arrival .7s cubic-bezier(.2,.9,.2,1) both; max-width:365px; position:relative; width:100%; }.card-topline { background:linear-gradient(90deg,var(--gold),#ffe5a9); border-radius:4px; height:4px; margin-bottom:27px; width:43px; }.card-kicker { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:1.4px; margin:0 0 11px; text-transform:uppercase; }h2 { color:var(--ink); font-size:31px; letter-spacing:-1.1px; line-height:1.1; margin:0; }.card-description { color:var(--muted); font-size:14px; line-height:1.6; margin:13px 0 29px; }
.form-message { align-items:flex-start; background:#fff4ed; border:1px solid #ffd7c1; border-radius:11px; color:#a54711; display:flex; font-size:12px; gap:9px; line-height:1.45; margin:-7px 0 22px; padding:10px 12px; }.form-message span { align-items:center; background:#d86622; border-radius:50%; color:white; display:inline-flex; flex:0 0 auto; font-size:10px; font-weight:800; height:16px; justify-content:center; margin-top:1px; width:16px; }.form-message p { margin:0; }
.payment-form label { color:#33415b; display:block; font-size:12px; font-weight:700; margin-bottom:9px; }.input-wrap { position:relative; }.id-icon { border:1.7px solid #8ba0b8; border-radius:4px; height:16px; left:17px; position:absolute; top:50%; transform:translateY(-50%); width:18px; }.id-icon::before { border-bottom:1.5px solid #8ba0b8; bottom:4px; content:""; left:3px; position:absolute; width:9px; }.id-icon::after { background:#8ba0b8; border-radius:50%; content:""; height:3px; left:5px; position:absolute; top:3px; width:3px; }
.payment-form input { background:#f7faff; border:1px solid #dce7f0; border-radius:10px; color:var(--ink); font:inherit; font-size:16px; font-weight:600; height:55px; outline:none; padding:0 16px 0 47px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; width:100%; }.payment-form input::placeholder { color:#9aaabe; font-size:14px; font-weight:400; }.payment-form input:focus { background:var(--white); border-color:#4d94d6; box-shadow:0 0 0 4px rgba(46,125,201,.12); }.field-help { color:#8795a9; font-size:11px; margin:9px 0 24px; }
.payment-form button { align-items:center; background:linear-gradient(110deg,#0c4c87,#176fb8); border:0; border-radius:10px; box-shadow:0 10px 21px rgba(18,91,156,.24); color:var(--white); cursor:pointer; display:flex; font:inherit; font-size:14px; font-weight:700; height:54px; justify-content:space-between; overflow:hidden; padding:0 17px 0 20px; position:relative; transition:box-shadow .2s ease,transform .2s ease; width:100%; }.payment-form button::before { background:rgba(255,255,255,.13); border-radius:50%; content:""; height:110px; position:absolute; right:-34px; top:-27px; transition:transform .35s ease; width:110px; }.payment-form button:hover { box-shadow:0 13px 26px rgba(18,91,156,.32); transform:translateY(-2px); }.payment-form button:hover::before { transform:scale(1.25); }.payment-form button:focus-visible { outline:3px solid #f5b83c; outline-offset:3px; }.payment-form button span,.payment-form button svg { position:relative; z-index:1; }.payment-form button svg { fill:none; height:20px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; width:20px; }
.security-note { align-items:center; color:#8090a5; display:flex; font-size:11px; gap:7px; justify-content:center; margin-top:23px; }.lock-icon { border:1.5px solid #99a9b9; border-radius:3px; height:11px; position:relative; width:10px; }.lock-icon::before { border:1.5px solid #99a9b9; border-bottom:0; border-radius:6px 6px 0 0; content:""; height:6px; left:1px; position:absolute; top:-6px; width:5px; }.support-line { color:#8090a5; display:flex; font-size:11px; gap:13px; margin-top:54px; max-width:365px; width:100%; }.support-time { color:#47749e; font-weight:700; margin-left:auto; white-space:nowrap; }
.ambient { border-radius:50%; filter:blur(1px); pointer-events:none; position:absolute; }.ambient--one { animation:drift 13s ease-in-out infinite alternate; background:rgba(114,192,245,.27); height:360px; left:-130px; top:-100px; width:360px; }.ambient--two { animation:drift 17s ease-in-out -5s infinite alternate-reverse; background:rgba(89,196,160,.17); bottom:-130px; height:410px; right:-115px; width:410px; }.ambient--three { animation:drift 14s ease-in-out -7s infinite alternate; background:rgba(245,184,60,.15); height:180px; right:19%; top:6%; width:180px; }
.ad-card { animation:card-arrival .7s .15s cubic-bezier(.2,.9,.2,1) both; background:var(--white); border:1px solid rgba(255,255,255,.95); border-radius:22px; box-shadow:0 18px 48px rgba(28,70,112,.14); margin:0 auto; max-width:1120px; padding:10px 10px 4px; position:relative; transition:box-shadow .2s ease; width:100%; z-index:1; }.ad-card:hover { box-shadow:0 22px 56px rgba(28,70,112,.22); }.ad-card-link { border-radius:inherit; bottom:0; left:0; position:absolute; right:0; top:0; z-index:0; }.ad-track { border-radius:14px; display:grid; overflow:hidden; position:relative; z-index:1; }.ad-slide { display:block; grid-area:1/1; opacity:0; transition:opacity .7s ease,visibility .7s; visibility:hidden; }.ad-slide.is-active { opacity:1; visibility:visible; }.ad-slide picture,.ad-slide img { display:block; }.ad-slide img { height:auto; width:100%; }.ad-slide:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.ad-dots { display:flex; justify-content:center; padding-top:2px; pointer-events:none; position:relative; z-index:1; }.ad-dot { background:none; border:0; cursor:pointer; height:22px; padding:0; pointer-events:auto; position:relative; width:22px; }.ad-dot::before { background:#c3cedb; border-radius:4px; content:""; height:7px; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); transition:background .3s ease,width .3s ease; width:7px; }.ad-dot:hover::before { background:#8ba0b8; }.ad-dot.is-active::before { background:var(--navy); width:18px; }.ad-dot:focus-visible { border-radius:6px; outline:2px solid var(--blue); }
@keyframes card-arrival { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }@keyframes drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(25px,18px,0) scale(1.08); } }
@media (max-width:820px) { .payment-portal { padding:18px; }.portal-shell { grid-template-columns:1fr; max-width:550px; min-height:0; }.school-panel { min-height:345px; padding:31px 33px; }.welcome-copy { margin:52px 0 22px; }h1 { font-size:43px; }.intro { font-size:14px; margin-top:16px; }.feature-list { display:none; }.school-footer { margin-top:auto; }.login-panel { padding:38px 33px 28px; }.support-line { margin-top:31px; }.ad-card { max-width:550px; } }
@media (max-width:440px) { .payment-portal { padding:0; }.portal-shell { border-radius:0; min-height:100vh; }.school-panel { border-radius:0 0 25px 25px; min-height:320px; padding:28px 24px; }.login-panel { padding:33px 24px 24px; }.brand-name { font-size:15px; }h1 { font-size:37px; }.support-line { font-size:10px; }.payment-portal { gap:16px; }.ad-card { border-radius:16px; margin-bottom:16px; padding:6px 6px 2px; width:calc(100% - 32px); }.ad-track { border-radius:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }