:root { --navy:#1e3a8a; --ink:#162a4a; --orange:#fca311; --muted:#65758b; --border:#e6ebf2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#fafbfe; color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.container { width:min(1120px,calc(100% - 64px)); margin:0 auto; }
.portal-header { background:#fff; border-bottom:1px solid var(--border); }
.header-inner { min-height:100px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { display:inline-flex; }
.brand img { display:block; width:235px; max-width:100%; height:auto; }
.back-link { display:inline-flex; align-items:center; gap:8px; color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; }
.back-link:hover { color:var(--navy); }
.portal-main { flex:1; padding-top:74px; padding-bottom:46px; }
.portal-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:84px; }
.intro { padding-bottom:12px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:2px; color:var(--navy); }
.eyebrow > span { width:7px; height:7px; background:var(--orange); border-radius:2px; }
.intro h1 { margin:23px 0 24px; font-size:clamp(46px,5vw,68px); line-height:1.08; font-weight:800; letter-spacing:-2.8px; color:var(--navy); }
.intro h1 > span { color:var(--ink); }
.intro-lead { font-size:23px; line-height:1.5; font-weight:500; letter-spacing:-.5px; margin:0 0 17px; }
.intro-description { max-width:420px; color:var(--muted); font-size:15px; line-height:1.85; margin:0; }
.intro-signature { margin-top:32px; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.intro-signature > span { height:2px; width:32px; background:var(--orange); }
.login-card { background:#fff; border:1px solid var(--border); border-radius:24px; padding:30px 34px 0; box-shadow:0 18px 55px rgba(30,58,138,.065); overflow:hidden; }
.card-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card-category { font-size:10px; color:var(--muted); letter-spacing:1.5px; font-weight:700; }
.external-badge { font-size:11px; font-weight:600; color:var(--navy); border:1px solid var(--border); border-radius:6px; padding:5px 8px; }
.portal-icon { margin-top:30px; width:74px; height:74px; display:grid; place-items:center; color:var(--navy); background:#f1f5fc; border:1px solid #e8eef8; border-radius:18px; }
.login-card h2 { margin:22px 0 11px; font-size:29px; font-weight:750; letter-spacing:-.9px; line-height:1.2; color:var(--navy); }
.card-description { font-size:14px; line-height:1.8; color:var(--muted); margin:0 0 27px; }
.login-button { min-height:56px; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#382400; background:var(--orange); border:1px solid #ee990f; text-decoration:none; font-size:15px; font-weight:750; border-radius:11px; transition:background .18s ease; }
.login-button:hover { background:#f5b13d; }
.login-button svg { flex-shrink:0; }
.new-tab-note { color:var(--muted); font-size:11px; line-height:1.6; margin:12px 0 28px; }
.card-support { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:0 -34px; padding:22px 34px; background:#fafbfe; border-top:1px solid var(--border); }
.card-support strong { display:block; font-size:11px; font-weight:650; line-height:1.7; }
.card-support div > span { display:block; color:var(--muted); font-size:11px; line-height:1.7; }
.card-support a { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; color:var(--navy); font-size:12px; font-weight:700; text-decoration:none; }
.card-support a:hover { text-decoration:underline; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; border-top:1px solid var(--border); margin-top:66px; padding-top:30px; }
.step { display:flex; gap:15px; align-items:flex-start; }
.step-number { padding-top:1px; color:#c1cbdc; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-1px; }
.step h2 { font-size:13px; margin:0 0 7px; font-weight:700; line-height:1.5; }
.step p { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }
.portal-footer { border-top:1px solid var(--border); background:#fff; }
.footer-inner { min-height:66px; display:flex; justify-content:space-between; align-items:center; gap:18px; color:var(--muted); font-size:11px; }
.footer-inner a { text-decoration:none; font-weight:600; color:var(--navy); }
@media (max-width:991px) {
    .portal-hero { gap:42px; }
    .login-card { padding:24px 25px 0; }
    .card-support { margin:0 -25px; padding:20px 25px; align-items:flex-start; flex-direction:column; gap:8px; }
    .intro-lead { font-size:20px; }
    .desktop-break { display:none; }
}
@media (max-width:767px) {
    .container { width:min(520px,calc(100% - 40px)); }
    .header-inner { min-height:82px; gap:16px; }
    .brand img { width:185px; }
    .back-link { font-size:11px; gap:5px; }
    .back-link svg { display:none; }
    .portal-main { padding-top:42px; padding-bottom:34px; }
    .portal-hero { grid-template-columns:1fr; gap:30px; }
    .intro { padding:0; }
    .intro h1 { font-size:47px; margin:18px 0; letter-spacing:-2px; }
    .intro h1 br { display:none; }
    .intro-lead { font-size:20px; }
    .intro-description { font-size:14px; }
    .intro-signature { margin-top:21px; }
    .login-card { border-radius:20px; }
    .portal-icon { margin-top:26px; }
    .card-support { flex-direction:row; align-items:center; }
    .login-card h2 { font-size:27px; }
    .steps { grid-template-columns:1fr; gap:20px; margin-top:36px; padding-top:27px; }
    .step { gap:17px; }
    .step-number { min-width:28px; }
    .footer-inner { flex-wrap:wrap; gap:10px 20px; padding:18px 0; }
    .footer-inner > span:nth-child(2) { display:none; }
}
@media (max-width:370px) {
    .container { width:calc(100% - 32px); }
    .brand img { width:160px; }
    .intro h1 { font-size:41px; }
    .card-support { flex-direction:column; align-items:flex-start; }
    .login-card { padding-left:21px; padding-right:21px; }
    .card-support { margin-left:-21px; margin-right:-21px; padding-left:21px; padding-right:21px; }
    .login-button { padding-left:14px; padding-right:14px; font-size:13px; }
}