:root { --ink:#0f172a; --muted:#566274; --line:#d8e0ee; --brand:#0a58ca; --brand-d:#084298; --navy:#1e3a8a; --ok:#166534; --bad:#b91c1c; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink); background:#f4f7fc; min-height:100vh; }
.stu-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:100vh; }
.stu-hero { background:linear-gradient(155deg,#0b1f5c 0%,#1e3a8a 55%,#2563eb 100%); color:#fff; padding:48px 52px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.stu-hero::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.06); top:-120px; right:-140px; }
.stu-hero::after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.05); bottom:-100px; left:-80px; }
.stu-hero > * { position:relative; z-index:1; }
.stu-badge { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 14px; font-size:.8rem; font-weight:600; letter-spacing:.3px; }
.stu-hero h1 { font-size:2.5rem; line-height:1.15; margin:20px 0 14px; font-weight:800; }
.stu-hero h1 span { color:#fcd34d; }
.stu-hero p.lead { font-size:1.05rem; opacity:.92; max-width:460px; margin:0 0 26px; line-height:1.65; }
.stu-points { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.stu-points li { display:flex; gap:12px; align-items:flex-start; font-size:.95rem; opacity:.95; }
.stu-points i { flex:0 0 26px; height:26px; border-radius:50%; background:rgba(252,211,77,.2); color:#fcd34d; display:grid; place-content:center; font-style:normal; font-size:.8rem; font-weight:800; }
.stu-main { display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.stu-card { width:100%; max-width:440px; background:#fff; border-radius:20px; padding:34px 32px; box-shadow:0 18px 50px rgba(15,23,42,.10); }
.stu-logo { display:block; height:54px; width:auto; margin:0 auto 18px; }
.stu-card h2 { font-size:1.5rem; margin:0 0 6px; text-align:center; font-weight:800; color:var(--ink); }
.stu-sub { text-align:center; color:var(--muted); font-size:.93rem; margin:0 0 22px; line-height:1.55; }
.stu-field { margin-bottom:16px; }
.stu-field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:#1e293b; }
.stu-field input { width:100%; padding:12px 14px; font:inherit; font-size:.95rem; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.stu-field input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(10,88,202,.14); }
.stu-pw { position:relative; }
.stu-pw input { padding-right:62px; }
.stu-pw button { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--brand); font:600 .8rem inherit; font-family:inherit; cursor:pointer; padding:8px 10px; border-radius:8px; }
.stu-pw button:hover { background:#eff4fd; }
.stu-hint { font-size:.8rem; color:var(--muted); margin-top:6px; line-height:1.5; }
.stu-meter { height:5px; border-radius:99px; background:#e8edf7; margin-top:8px; overflow:hidden; }
.stu-meter i { display:block; height:100%; width:0; background:#dc2626; transition:width .25s, background .25s; }
.stu-btn { width:100%; border:0; border-radius:10px; padding:13px 16px; font:700 1rem inherit; font-family:inherit; background:var(--brand); color:#fff; cursor:pointer; transition:background .15s; text-align:center; text-decoration:none; display:inline-block; }
.stu-btn:hover { background:var(--brand-d); }
.stu-btn.ghost { background:#fff; color:var(--brand); border:1.5px solid var(--line); }
.stu-btn.ghost:hover { background:#f1f5fb; }
.stu-btn[disabled] { opacity:.6; cursor:not-allowed; }
.stu-alert { border-radius:10px; padding:12px 14px; font-size:.9rem; margin-bottom:18px; line-height:1.5; }
.stu-alert.err { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.stu-alert.ok { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.stu-alert.info { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.stu-links { text-align:center; margin-top:18px; font-size:.9rem; color:var(--muted); line-height:1.9; }
.stu-links a { color:var(--brand); font-weight:600; text-decoration:none; }
.stu-links a:hover { text-decoration:underline; }
.stu-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:-4px 0 16px; font-size:.85rem; }
.stu-row a { color:var(--brand); font-weight:600; text-decoration:none; }
.stu-icon { width:64px; height:64px; border-radius:50%; display:grid; place-content:center; margin:0 auto 16px; font-size:1.8rem; }
.stu-icon.ok { background:#dcfce7; color:#166534; } .stu-icon.bad { background:#fee2e2; color:#991b1b; } .stu-icon.mail { background:#dbeafe; color:#1e40af; }
.stu-google { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:12px 16px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:#1f2937; font:600 .95rem inherit; font-family:inherit; text-decoration:none; transition:background .15s, box-shadow .15s; }
.stu-google:hover { background:#f8fafc; box-shadow:0 2px 8px rgba(15,23,42,.08); }
.stu-or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.8rem; margin:18px 0; }
.stu-or::before, .stu-or::after { content:""; flex:1; height:1px; background:var(--line); }
.stu-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
a:focus-visible, button:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
@media (max-width: 900px) {
  .stu-wrap { grid-template-columns:1fr; }
  .stu-hero { padding:28px 22px 30px; }
  .stu-hero h1 { font-size:1.7rem; margin:14px 0 10px; }
  .stu-hero p.lead { font-size:.95rem; margin-bottom:0; }
  .stu-points { display:none; }
  .stu-main { padding:20px 14px 36px; margin-top:-18px; }
  .stu-card { padding:28px 20px; }
}
.stu-disc { max-width:440px; margin:18px auto 0; font-size:.72rem; line-height:1.55; color:#64748b; }
.stu-disc a { color:#475569; }

/* the card and the disclaimer stack (they used to sit side by side on phones) */
.stu-main { flex-direction: column; align-items: center; }
.stu-main .stu-card { width: 100%; }
.stu-main .stu-disc { width: 100%; }