/* One consistent reading scale and a safe top inset across topic screens. */
#app,#app:not(.showing-browse){padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#app>header{padding-top:12px;padding-bottom:10px;min-height:106px;max-width:900px;width:100%;margin:0 auto}
#app>.content,#app:not(.showing-browse)>.content{padding:22px 18px 12px}
#app .page:not(#browse){width:100%;max-width:760px;margin:0 auto}
#app .page .page-title{margin:0 0 18px;padding:2px 0 0}
#app .page .page-title h2,#app #college .page-title h2{font-size:clamp(25px,3.2vw,32px);line-height:1.16;letter-spacing:-.7px;margin:0 0 10px}
#app .page .page-title .eyebrow{font-size:10px;letter-spacing:1.4px;line-height:1.4;margin-bottom:10px}
#app .page .page-title>p:last-child{font-size:14px;line-height:1.5;margin:0}
#app .page .tool,#app #practice .quiz,#app .journey-card,#app .eligibility-walkthrough{padding:18px;border-radius:14px}
#app #practice .quiz h3{font-size:21px;line-height:1.3;letter-spacing:-.3px;margin:14px 0}
#app #answers{gap:8px}#app #answers button{font-size:16px;line-height:1.35;min-height:44px;padding:10px 12px}
#app .quiz-top,#app .quiz-audio-controls{font-size:12px;margin-bottom:12px}#app #feedback{font-size:14px;line-height:1.5}
#app .pay-main>strong{font-size:clamp(36px,7vw,50px);line-height:1.1}#app .pay-caption,#app .gross-note{font-size:13px;line-height:1.5}
#app .pay-controls h3,#app .journey-content h3,#app #eligibilityBody h3,#app #connect .focused-contact h3{font-size:23px;line-height:1.25;margin-bottom:12px}
#app .pay-controls label,#app .simple-school-picker label{font-size:14px}#app .pay-controls select,#app .picker-trigger{font-size:16px;min-height:44px;padding:10px 12px}
#app .simple-college-result,#app .simple-student-card{padding:18px}#app .simple-cost-row{padding:10px 0}#app .simple-cost-row>span{font-size:14px}#app .simple-cost-row strong{font-size:24px}#app .simple-cost-row.balance strong{font-size:28px}
#app .college-view-switch button{padding:10px 12px;font-size:14px}#app .simple-takeaway,#app .simple-student-caption,#app .simple-student-use,#app .journey-content>p,#app #connect .recruiter-bio p,#app #connect .contact-lead{font-size:14px!important;line-height:1.55}
#app .faq summary{font-size:16px;line-height:1.4;padding-top:12px;padding-bottom:12px}#app .faq-answer>p{font-size:14px;line-height:1.55}
#app #connect .recruiter-bio{padding:16px;margin-top:14px}#app #connect .recruiter-bio h3{font-size:20px;margin-bottom:10px}#app #connect .contact-quick>a{font-size:14px;min-height:44px;padding:10px}
#app .screen-actions>.contact-primary{min-height:44px;font-size:15px;padding:10px 14px}#app .screen-actions{padding-top:8px}
#app.showing-browse>.content{padding:16px 0 10px}#app .browse-title{margin:4px 18px 12px!important}#app .browse-title h2{font-size:25px;line-height:1.2}.topic-card,.topic-card.is-centered,.topic-card:active{max-height:480px}.topic-copy h3{font-size:clamp(26px,4dvh,34px);line-height:1.1}.topic-copy p{font-size:14px;line-height:1.5}
.intro{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}.intro-card{height:auto;max-height:100%;max-width:1000px}.intro .collage{height:min(62dvh,500px)}.intro h1{font-size:clamp(28px,3.6vw,42px);line-height:1.12}.intro-copy{padding:14px}.intro .button{font-size:16px;min-height:44px;padding:10px 14px}
@media(max-width:1023px) and (orientation:portrait){.intro-card{grid-template-rows:auto auto;gap:14px;max-width:600px}.intro .collage{height:min(32dvh,280px)}.intro-copy{padding:0 8px}.intro h1{font-size:29px;margin:10px 0 14px}.intro-copy .eyebrow{margin-bottom:8px}.intro-note{font-size:11px;margin:8px 0}}
@media(max-width:1023px) and (max-height:720px) and (orientation:portrait){.intro .collage{height:22dvh}.intro-card{gap:10px}.intro h1{font-size:26px}.intro-copy>.language-switch{margin-bottom:8px}}
@media(min-width:600px){#app>header{min-height:68px;grid-template-rows:44px}#app>.content,#app:not(.showing-browse)>.content{padding-top:26px;padding-bottom:16px}}
@media(max-height:550px){#app>header{padding-top:5px;padding-bottom:5px;min-height:48px}#app>.content,#app:not(.showing-browse)>.content{padding:12px 16px 6px}#app .page .page-title{margin-bottom:12px}#app .page .page-title h2,#app #college .page-title h2{font-size:24px}#app .page .tool,#app #practice .quiz,#app .journey-card,#app .eligibility-walkthrough{padding:14px}.intro .collage{height:min(82dvh,330px)}.intro h1{font-size:25px}.intro-copy{padding:8px}.topic-copy p{display:none}}
/* Recruiter overview is one screen: a fluid collage and fixed contact actions. */
#app #connect.connect-single{display:grid;grid-template-rows:auto minmax(90px,1fr) auto 44px 46px auto;gap:12px;height:100%;min-height:0;max-width:760px;padding:0;overflow:hidden}
#connect .connect-heading .eyebrow{font-size:9px;line-height:1.4;letter-spacing:1.2px;margin:0 0 8px}#connect .connect-heading h2{font-size:clamp(23px,3vw,30px);line-height:1.15;margin:0;letter-spacing:-.5px}
#connect .connect-photos{position:relative;min-height:0;overflow:hidden;border-radius:14px}#app #connect .recruiter-collage{height:100%!important;width:100%;min-height:0;padding:5px;gap:5px;border-radius:14px}#connect .connect-photos>button{position:absolute;right:12px;bottom:12px;z-index:2;min-height:40px;padding:8px 14px;border:1px solid #d2b643;border-radius:9px;background:#10180feb;color:#ffe16a;font:700 13px Arial;cursor:pointer}
#app #connect .connect-intro{font-size:13px;line-height:1.5;margin:0;color:#cbd4c2}#connect .connect-direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#connect .connect-direct a{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #64734f;background:#172010;border-radius:8px;color:#f1f4e9;font-size:13px;font-weight:700;text-align:center}
#app #connect .contact-primary{height:46px;min-height:46px;font-size:15px;margin:0;padding:10px 16px;width:100%}#connect .connect-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;min-height:32px}#connect .connect-bottom a{color:#ffdb57;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.recruiter-about-dialog{width:520px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 44px);margin:auto;padding:18px;background:#10180f;border:1px solid #65764c;border-radius:16px;color:#f4f5ec;overflow:hidden}.recruiter-about-dialog::backdrop{background:#000c}.recruiter-about-dialog[open]{display:flex;flex-direction:column;gap:14px}.recruiter-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.recruiter-dialog-heading h2{font-size:22px;line-height:1.2;margin:0;letter-spacing:-.5px}.recruiter-dialog-heading button{width:40px;height:40px;flex:none;background:transparent;color:#fff;border:1px solid #596b42;border-radius:8px;font-size:25px;cursor:pointer}.recruiter-detail-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.recruiter-detail-tabs button{min-height:40px;padding:8px 6px;border:1px solid #596b42;border-radius:8px;background:#18220f;color:#dce4d2;font-size:13px;cursor:pointer}.recruiter-detail-tabs [aria-selected=true]{border-color:#ffcc00;color:#ffdf69;background:#2b2c14}.recruiter-detail-body{min-height:0}.recruiter-detail-body p{font-size:14px;line-height:1.55;margin:0 0 12px}.recruiter-detail-body p:last-child{margin:0}.recruiter-detail-body a{display:block;min-height:40px;padding:9px 0;color:#ffdf69;font-size:13px;overflow-wrap:anywhere}.recruiter-about-dialog>.button{min-height:44px;font-size:14px;flex:none}
@media(max-height:650px){#app #connect.connect-single{grid-template-rows:auto minmax(65px,1fr) auto 40px 44px auto;gap:8px}#connect .connect-heading .eyebrow{display:none}#connect .connect-heading h2{font-size:23px}#app #connect .connect-intro{font-size:12px;line-height:1.4}#connect .connect-direct a{min-height:40px}#app #connect .contact-primary{height:44px;min-height:44px}#connect .connect-bottom{min-height:28px;font-size:11px}.recruiter-about-dialog{padding:14px}.recruiter-about-dialog[open]{gap:10px}.recruiter-detail-body p{font-size:13px;line-height:1.45}}
@media(orientation:landscape) and (max-height:550px){#app #connect.connect-single{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 40px 44px auto;gap:6px 16px}#connect .connect-photos{grid-column:1;grid-row:1/6}#connect .connect-heading,#connect .connect-intro,#connect .connect-direct,#app #connect .contact-primary,#connect .connect-bottom{grid-column:2}.recruiter-about-dialog{width:min(760px,calc(100vw - 32px))}.recruiter-about-dialog[open]{gap:8px}.recruiter-dialog-heading h2{font-size:20px}.recruiter-detail-body section:not([hidden]){column-count:2;column-gap:20px}.recruiter-detail-body a{min-height:34px;padding:6px 0}.recruiter-detail-body p{font-size:12px;line-height:1.4}}
#connect .recruiter-collage img{display:block;width:100%;height:100%;object-fit:cover}
/* FAQs are a continuous reading list, with the app header outside the scroller. */
#app #questions.page{display:block;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#65764c transparent;padding:2px 4px max(24px,env(safe-area-inset-bottom)) 0;scroll-padding-top:12px}
#app #questions .faq{overflow:visible}#app #questions .faq details{overflow:visible}#app #questions .faq-answer{padding-bottom:12px}
#app #questions:focus-visible{outline:2px solid #ffcc00;outline-offset:-2px}

/* Pay controls and the weekend result stay together without paginated columns. */
#app #pay.page{display:block;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:0 3px max(12px,env(safe-area-inset-bottom)) 0;scrollbar-width:thin}
#app #pay .page-title{margin-bottom:14px}#app #pay .page-title .eyebrow{font-size:9px;margin-bottom:7px}#app #pay .page-title h2{font-size:clamp(24px,3vw,30px);margin-bottom:7px}#app #pay .page-title>p:last-child{font-size:13px}
#app #pay .pay-layout{display:grid;grid-template-columns:1fr;gap:12px;max-width:760px}
#app #pay .pay-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:5px;padding:14px;border-radius:14px}
#app #pay .pay-controls>label{grid-column:1;grid-row:1;margin:0;font-size:12px}#app #pay .pay-controls>#rank{grid-column:1;grid-row:2}
#app #pay #yearsField,#app #pay #privateField{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:auto 44px;gap:5px;margin:0;min-width:0}
#app #pay .pay-controls label{font-size:12px;line-height:1.4;margin:0}#app #pay .pay-controls select{height:44px;min-height:44px;width:100%;min-width:0;font-size:16px;padding:8px 24px 8px 9px;margin:0}
#app #pay .pay-display{padding:18px;border-radius:14px}#app #pay .pay-main{gap:5px}#app #pay .pay-main>.kicker{font-size:10px}#app #pay .pay-main>strong{font-size:clamp(40px,7dvh,56px);line-height:1.1;margin:4px 0}#app #pay .pay-caption{font-size:12px;line-height:1.4}#app #pay .gross-note{font-size:11px;margin:10px 0 0}#app #pay .text-link{font-size:12px;margin-top:8px}#app #pay .pay-breakdown{margin-top:12px}#app #pay .pay-breakdown summary{font-size:13px;min-height:44px;padding:10px 0}#app #pay .pay-breakdown .micro{font-size:12px}
@media(min-width:760px) and (orientation:landscape){#app #pay .pay-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;max-width:none}}