/* Student portal preview (phone mockups) */
/* portal */
.portal{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.feat{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.feat li{display:flex;gap:14px;align-items:flex-start;font-weight:700}
.feat li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.phones{display:flex;justify-content:center;align-items:flex-start;gap:16px;padding:10px 0 34px}
.phone{--pw:min(250px,44vw);width:var(--pw);font-size:calc(var(--pw)/21);aspect-ratio:9/17.5;background:#F8F8FB;color:#2A2540;border:.55em solid #1B1840;border-radius:2.6em;overflow:hidden;box-shadow:0 40px 70px -28px rgba(16,27,74,.55);font-family:var(--body);animation:bob 7s ease-in-out infinite}
.ph2{margin-top:3.6em;animation-delay:-3.5s}
.p-top{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:.9em 1em;height:3.6em}
.p-top svg{width:1.7em;height:1.7em;stroke:#D63B25;fill:none;stroke-width:2.4;stroke-linecap:round}
.p-top svg.dots{fill:#D63B25;stroke:none;width:1.4em}
.p-top b{font:700 1.7em/1 var(--display);letter-spacing:-.05em;color:#271E45}
.p-body{padding:1.2em}
.p-body h5{margin:.2em 0 1.2em;font:700 1.35em var(--body);color:#2A2540}
.stat{display:flex;align-items:center;gap:.9em;padding:1em;border-radius:.9em;margin-bottom:1em}
.stat i{flex:none;width:3em;height:3em;border-radius:.7em;display:grid;place-items:center;color:#fff}
.stat i svg{width:1.6em;height:1.6em}
.stat span{font-weight:600;font-size:.98em}
.stat b{margin-left:auto;font:700 1.6em var(--body);color:#5C5870}
.s1{background:#FDEEEC}.s1 i{background:#E5352F}
.s2{background:#FFF6DC}.s2 i{background:#F2A63B}
.s3{background:#F0ECFB}.s3 i{background:#3A2468}
.menu{padding:.7em .8em;display:grid;gap:.1em}
.mi{display:flex;align-items:center;gap:.8em;padding:.42em .6em;border-radius:.8em;font-weight:600;transition:background .4s,color .4s}
.mi i{flex:none;width:2.3em;height:2.3em;border-radius:.6em;background:#EEEEF2;display:grid;place-items:center;transition:background .4s,color .4s}
.mi svg{width:1.25em;height:1.25em}
.mi.act{background:#F9E6E4;color:#D63B25}
.mi.act i{background:#D63B25;color:#fff}
.ico{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob{50%{transform:translateY(-10px)}}