.desktop-topbar{display:none}
.desktop-content{display:contents}

@media (min-width:900px){
 body{background:#edf1f7}
 .phone{min-height:100dvh;padding-left:256px;background:#f3f6fb}
 .screen{max-width:none;min-height:100dvh;padding:0 0 70px;background:#f3f6fb}
 .desktop-topbar{position:sticky;z-index:20;top:0;height:88px;padding:0 38px;border-bottom:1px solid #dfe5ef;background:#ffffffed;backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between}
 .desktop-topbar h1{margin:4px 0 0;color:var(--navy);font-size:25px;line-height:1}
 .desktop-user{display:flex;align-items:center;gap:13px;text-align:right}.desktop-user span{display:grid;gap:3px}.desktop-user strong{font-size:14px;color:var(--navy)}.desktop-user small{font-size:11px;color:#748095}.desktop-user b,.desktop-user img{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--yellow);color:var(--navy);object-fit:cover}
 .desktop-content{display:block;width:min(1480px,100%);margin:0 auto;padding:30px 38px 58px}
 .bottom-nav{position:fixed;z-index:30;left:0;right:auto;top:0;bottom:0;transform:none;width:256px;height:100dvh;border:0;border-radius:0;background:var(--navy);display:flex;flex-direction:column;gap:7px;padding:130px 18px 26px;box-shadow:10px 0 36px #001e5712}
 .bottom-nav:before{content:"";position:absolute;left:30px;top:34px;width:170px;height:50px;background:url('assets/auston-logo.png') center/contain no-repeat}
 .bottom-nav:after{content:"Verified student portal";position:absolute;left:31px;bottom:28px;color:#aebbd1;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
 .nav-btn{flex:none;width:100%;height:54px;border-radius:14px;background:transparent;color:#e9eef8;display:grid;grid-template-columns:28px 1fr;justify-items:start;align-items:center;padding:0 18px;gap:12px;font-size:13px}.nav-btn img{filter:brightness(0) invert(1);opacity:.86}.nav-btn.active{background:var(--yellow);color:var(--navy);font-weight:800}.nav-btn.active img{filter:none;opacity:1}
 .home-bg,.yellow-page{margin:0;padding:0;min-height:0;background:transparent}
 .home-bg{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);grid-template-areas:"head head" "summary due-title" "class-title due" "next library-title" "next notice";column-gap:26px;row-gap:11px;align-content:start}
 .home-bg>.header{grid-area:head;min-height:94px;margin:0 0 8px;padding:21px 24px;border:1px solid #e3e8f0;box-shadow:0 12px 34px #001e570b}.home-bg>.summary{grid-area:summary;margin:0;min-height:158px;padding:28px}.home-bg>.section-title:nth-of-type(1){grid-area:class-title}.home-bg>.next{grid-area:next;margin:0;min-height:232px;padding:30px}.home-bg>.section-title:nth-of-type(2){grid-area:due-title}.home-bg>.due-list{grid-area:due;margin:0}.home-bg>.section-title:nth-of-type(3){grid-area:library-title}.home-bg>.notice-list{grid-area:notice;margin:0;min-height:112px}
 .home-bg .header h1{font-size:25px}.home-bg .summary h2{font-size:34px}.home-bg .next h2{font-size:28px}
 .yellow-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;align-content:start}.yellow-page>.page-title,.yellow-page>.filters,.yellow-page>.search-box,.yellow-page>.career-match,.yellow-page>.day-heading,.yellow-page>.profile-card,.yellow-page>.signout,.yellow-page>.version{grid-column:1/-1}.yellow-page>.page-title{min-height:94px;margin:0;padding:22px 26px;border-radius:22px;background:var(--navy);color:white}.yellow-page>.page-title h1,.yellow-page>.page-title p{color:white}.yellow-page>.section-title{grid-column:1/-1;margin:8px 0 0}.yellow-page>.social-card,.yellow-page>.job-card{margin:0}.page-title h1{font-size:27px}.card{padding:22px;border:1px solid #e4e8ef;box-shadow:0 12px 34px #001e5709}
 .phone[data-view="jobs"] .career-match{display:grid;grid-template-columns:auto 1fr;align-items:center;min-height:150px}.phone[data-view="feed"] .graduation-card{grid-row:4/span 2}.phone[data-view="feed"] .composer{grid-column:2}.phone[data-view="class"] .agenda-card{grid-column:1/-1}.phone[data-view="settings"] .settings-card{min-height:235px}
 .phone[data-view="card"] .desktop-content{display:grid;grid-template-columns:minmax(560px,1.25fr) minmax(300px,.75fr);gap:22px 28px;align-items:start}.phone[data-view="card"] .page-title{grid-column:1/-1;margin:0;padding:22px 26px;border-radius:22px;background:var(--navy);color:white}.phone[data-view="card"] .page-title h1,.phone[data-view="card"] .page-title p{color:white}.phone[data-view="card"] .id-card{grid-column:1;grid-row:2/span 2;margin:0;width:100%;max-width:none;height:390px}.phone[data-view="card"] .support{grid-column:2;margin:0}.phone[data-view="card"] .desktop-content>.primary{grid-column:2;margin:0}
 .id-brand{height:94px}.id-info{padding:34px}.portrait{width:156px;height:156px}.profile-avatar{width:64px;height:64px}.profile-card{min-height:112px}
 .app-sheet{left:auto;right:28px;bottom:28px;transform:translateY(110%);width:460px;border-radius:28px}.app-sheet.open{transform:none}.benefits{left:auto;right:0;width:560px;transform:translateX(100%)}.benefits.open{transform:none}.flow-page{width:720px;max-width:calc(100vw - 256px)}
 .phone[data-stage="signup"],.phone[data-stage="login"],.phone[data-stage="start"],.phone[data-stage="splash"]{padding-left:0;background:linear-gradient(115deg,#001e57 0 48%,#ffcc03 48%)}
 .screen.auth{display:grid;place-items:center;max-width:none;padding:42px;min-height:100dvh;background:linear-gradient(115deg,#001e57 0 48%,#ffcc03 48%)}
 .auth-page{width:min(540px,100%);max-height:calc(100dvh - 60px);border:1px solid #ffffff70;border-radius:28px;box-shadow:0 32px 90px #0014345c;overflow:hidden}.auth-form-page{overflow-y:auto}.auth-panel{padding-left:60px;padding-right:60px}.auth-page>h1{font-size:36px}.get-started{padding:54px}.get-started h1{font-size:39px}.splash{min-height:440px}
}

@media (min-width:1280px){
 .home-bg{grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr)}
 .phone[data-view="jobs"] .yellow-page{grid-template-columns:repeat(3,minmax(0,1fr))}.phone[data-view="jobs"] .yellow-page>.page-title,.phone[data-view="jobs"] .yellow-page>.filters,.phone[data-view="jobs"] .yellow-page>.search-box,.phone[data-view="jobs"] .yellow-page>.career-match,.phone[data-view="jobs"] .yellow-page>.section-title{grid-column:1/-1}
 .phone[data-view="feed"] .yellow-page{grid-template-columns:minmax(340px,.8fr) repeat(2,minmax(0,1fr))}.phone[data-view="feed"] .yellow-page>.page-title,.phone[data-view="feed"] .yellow-page>.filters{grid-column:1/-1}.phone[data-view="feed"] .graduation-card{grid-column:1;grid-row:3/span 2}.phone[data-view="feed"] .composer{grid-column:2/-1}
}