*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f9f2;color:#183d33;font-family:"Helvetica Neue",Arial,sans-serif}a{color:inherit}header,main,footer{max-width:1280px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:26px 40px;gap:24px}nav{display:flex;align-items:center;gap:26px;font-size:14px}.brand{font-weight:750;font-size:30px;text-decoration:none;letter-spacing:-2px}.brand span{color:#487839}nav a{text-decoration:none}.button{display:inline-flex;gap:26px;align-items:center;justify-content:center;padding:17px 24px;border-radius:100px;background:#183d33;color:white;text-decoration:none;font-size:14px;font-weight:600;border:0;cursor:pointer}.button.light{background:#b2ef76;color:#183d33}.hero{padding:65px 40px 60px;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:650}h1{font-size:clamp(48px,5.8vw,78px);line-height:1.02;letter-spacing:-4px;font-weight:550;margin:24px 0}h1 em{font-style:normal;color:#537b43}p{line-height:1.7}h2{font-size:clamp(30px,3.5vw,48px);letter-spacing:-1.6px;line-height:1.1;font-weight:550}h3{font-size:23px;letter-spacing:-.6px;line-height:1.25}.lede{font-size:18px;max-width:510px;color:#52695c}.actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:28px 0}.small{font-size:12px;color:#52695c}.phone-wrap{background:#e9eedf;border-radius:44px;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}.phone{width:308px;height:644px;overflow:hidden;flex:none;border-radius:42px;box-shadow:0 20px 50px #183d331a}.phone iframe{width:384px;height:802px;border:0;transform:scale(.802);transform-origin:top left}.strip{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #cfd8c6;border-bottom:1px solid #cfd8c6;padding:24px 40px;font-size:14px}.section{padding:80px 40px}.section-head{max-width:650px}.audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:40px}.audiences article{border-top:2px solid #b2ef76;padding:24px 0}.num{font-size:12px;color:#557345}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.green{background:#b2ef76;border-radius:36px;padding:44px}.score{font-size:105px;letter-spacing:-7px;line-height:1.1}.progress{height:8px;border-radius:8px;background:#183d3322;margin:20px 0}.progress span{display:block;width:68%;height:100%;background:#183d33;border-radius:8px}.row{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid #183d3322;font-size:14px}.steps{counter-reset:s}.steps article{padding:22px 0;border-bottom:1px solid #cfd8c6}.steps h3{margin:0}.steps p{margin-bottom:0}details{padding:22px 0;border-bottom:1px solid #cfd8c6}summary{cursor:pointer;font-size:18px}details p{max-width:760px}.end{background:#e9eedf;text-align:center;border-radius:32px;padding:55px 24px}.end p{max-width:560px;margin:20px auto}footer{padding:40px;font-size:12px;display:flex;justify-content:space-between;gap:30px}a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #467b34;outline-offset:5px}.draft-nav{background:#183d33;color:white;text-align:center;padding:10px 18px;font-size:12px}.draft-nav a{margin:0 12px}.shot{padding:26px;border-radius:20px;background:#e9eedf;margin:18px 0}.shot a{font-weight:bold}@media(max-width:760px){header{padding:22px}nav{gap:14px}nav .desktop{display:none}.hero{grid-template-columns:1fr;padding:32px 22px;gap:28px}h1{letter-spacing:-2.5px}.phone-wrap{padding:20px 0}.section{padding:48px 22px}.strip{padding:22px;flex-wrap:wrap}.audiences,.split{grid-template-columns:1fr;gap:20px}.green{padding:26px}.audiences{margin-top:20px}.audiences article{padding:10px 0}footer{padding:28px 22px;flex-direction:column}.draft-nav a{display:inline-block;margin:5px 8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:359px){.phone{width:264px;height:552px;border-radius:36px}.phone iframe{transform:scale(.6875)}.hero,.section{padding-left:18px;padding-right:18px}.score{font-size:82px}header{gap:12px;padding:20px 18px}nav{gap:10px;font-size:12px}.brand{font-size:27px}.green{padding:22px}.row{font-size:12px}}
.choice-tabs,.journey-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}.choice-tabs button,.journey-tabs button{font:inherit;font-size:14px;border:1px solid #cfd8c6;border-radius:30px;padding:15px 22px;background:transparent;color:#183d33;cursor:pointer}.choice-tabs button[aria-pressed=true],.journey-tabs button[aria-pressed=true]{background:#183d33;color:white;border-color:#183d33}.visual-stage,.journey-stage{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;background:#e9eedf;border-radius:32px;padding:45px;min-height:420px}.scene{position:relative;text-align:center}.scene svg{width:100%;max-width:360px}.floating-note{display:inline-block;background:white;padding:15px 24px;border-radius:15px;box-shadow:0 10px 25px #183d330a}.path-copy h3,.journey-stage h3{font-size:38px;line-height:1.1;margin:18px 0}.visual-route{display:flex;flex-direction:column;gap:5px;margin:24px 0}.visual-route b{font-weight:400;color:#6c8760}.visual-route span{font-size:16px}.mini-app{background:white;border-radius:22px;padding:26px;box-shadow:0 18px 40px #183d3309}.mini-title{display:flex;justify-content:space-between;font-weight:600;margin-bottom:20px;gap:12px}.mini-title span{font-size:12px;font-weight:400}.check-row{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid #e9eedf;font-size:14px}.check-row small{margin-left:auto;color:#52695c}.check{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#b2ef76}.check.pending{background:#eef2e7}.broker-tile{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid #e9eedf}.broker-tile small{display:block;margin-top:8px}.broker-tile b{margin-left:auto}.avatar-mini{padding:14px;border-radius:50%;background:#e9eedf}.production-board{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.production-board h3{font-size:20px}.production-board p{font-size:14px}.production-board details{font-size:13px}.production-board summary{font-size:14px}.film-visual,.format-visual{height:170px;background:#b2ef76;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:20px;font-size:48px}.film-visual span{font-size:30px}.format-visual span{font-size:14px;border:2px solid #183d33;border-radius:6px;padding:20px 10px}.format-visual span:first-child{padding:10px 20px}@media(max-width:760px){.visual-stage,.journey-stage{grid-template-columns:1fr;padding:24px;gap:28px}.scene svg{max-width:240px}.path-copy h3,.journey-stage h3{font-size:30px}.mini-app{padding:18px}.check-row{gap:8px;font-size:12px}.choice-tabs button,.journey-tabs button{padding:13px 15px;font-size:12px}.production-board{grid-template-columns:1fr 1fr}.mini-title{font-size:14px}.journey-stage{min-height:530px}}@media(max-width:359px){.production-board{grid-template-columns:1fr}.mini-app{padding:12px}.check-row small{font-size:10px}.visual-stage,.journey-stage{padding:18px}.check{width:25px;height:25px}}
.journey-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}.example-person{display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px}.example-person small{display:block;font-size:11px;font-weight:400;margin-top:6px;color:#52695c}.example-score{font-size:80px;letter-spacing:-5px}.example-score small{font-size:18px;letter-spacing:0}.passport-example{background:#b2ef76}.passport-example .check{background:#183d33;color:white}.passport-example .check.pending{background:#ffffff88;color:#183d33}.mini-app .button{width:100%;margin-top:20px}.request-figure{font-size:48px;letter-spacing:-2px;margin:28px 0}.private-note{padding:18px 0;font-size:12px;color:#52695c}.broker-option{display:flex;align-items:center;text-align:left;width:100%;border:1px solid #d5decf;background:white;color:#183d33;border-radius:14px;padding:18px 12px;margin:14px 0;gap:12px;cursor:pointer;font:inherit}.broker-option[aria-pressed=true]{border:2px solid #183d33;background:#f2f8eb;padding:17px 11px}.broker-option small{display:block;font-size:11px;margin-top:7px}.selected-mark{margin-left:auto}.consent-example{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;margin-top:22px}.consent-example input{width:18px;height:18px;flex:none;accent-color:#183d33}.button:disabled{opacity:.4;cursor:not-allowed}.restart{display:block;background:none;border:0;color:#183d33;text-decoration:underline;margin:22px auto 0;cursor:pointer;padding:10px}.connection-complete{display:flex;align-items:center;gap:14px;margin-top:25px}.connection-complete span{display:grid;place-items:center;background:#b2ef76;width:44px;height:44px;border-radius:50%}.journey-stage{min-height:560px}.journey-tabs button{min-height:46px}@media(max-width:760px){.journey-heading{display:block}.example-person{margin-top:24px}.journey-stage{min-height:640px}.journey-stage h3{margin:0}.journey-tabs{gap:8px}.journey-tabs button{flex:1 1 40%;padding:13px 8px}.broker-option{gap:8px}.avatar-mini{padding:10px}}
.problem-select{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}.problem-select button{font:inherit;font-size:14px;border:1px solid #cfd8c6;background:transparent;color:#183d33;border-radius:24px;padding:14px 18px;cursor:pointer}.problem-select button[aria-pressed=true]{background:#183d33;border-color:#183d33;color:white}.benefit-stage{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:360px;background:#e9eedf;border-radius:32px;padding:40px}.benefit-copy h3{font-size:36px;line-height:1.12;margin:0 0 20px;letter-spacing:-1.2px}.benefit-copy p{font-size:17px;max-width:370px}.benefit-proof{background:white;border-radius:20px;padding:26px}.benefit-proof .row strong{font-size:13px;text-align:right}.benefit-outcome{margin:18px 0 0;font-size:14px;line-height:1.6;color:#42643a}@media(max-width:760px){.benefit-stage{grid-template-columns:1fr;gap:20px;padding:24px;min-height:520px}.benefit-copy h3{font-size:29px}.benefit-proof{padding:18px}.problem-select button{font-size:12px;padding:12px 14px}.benefit-proof .row{font-size:12px;gap:12px}.benefit-proof .row strong{font-size:12px}}

/* The top phone is interactive; the walkthrough has its own input rules. */
.hero .phone iframe{pointer-events:auto}

/* Full learning-page content, integrated into the homepage hierarchy. */
#young-adults .learning-title{font-size:clamp(48px,5.8vw,78px);line-height:1.02;letter-spacing:-4px;font-weight:550;margin:24px 0}
#young-adults .learning-title em{font-style:normal;color:#537b43}
#young-adults .green h3{font-size:clamp(30px,3.5vw,48px);letter-spacing:-1.6px;line-height:1.1;font-weight:550}
@media(max-width:760px){#young-adults .learning-title{letter-spacing:-2.5px}}
/* Let the hero phone sit directly on the page, with a soft contact shadow. */
.hero .phone-wrap{background:transparent;border:0;border-radius:0;isolation:isolate}
.hero .phone-wrap::after{content:"";position:absolute;left:50%;bottom:18px;width:min(96%,400px);height:28px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(24,38,30,.65) 0%,rgba(24,38,30,.4) 32%,rgba(24,38,30,.16) 58%,transparent 78%);filter:blur(5px);pointer-events:none;z-index:-1}
.hero .phone{box-shadow:none}

.product-definition{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.product-definition .eyebrow{margin:0 0 22px}
.product-definition h2{margin:0;font-size:clamp(34px,3.5vw,50px);line-height:1.08;letter-spacing:-1.8px}
.definition-copy p{margin:0 0 22px;font-size:17px;line-height:1.7;max-width:570px}
.definition-copy .definition-lead{font-size:24px;line-height:1.4;font-weight:550;letter-spacing:-.5px}
.definition-copy .definition-scope{margin-bottom:0;font-size:15px;color:#537b43}
.homepage-product-image{margin:24px 40px 70px}
.homepage-product-image figcaption{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin:0 0 34px}
.homepage-product-image figcaption h2{margin:0}
.homepage-product-image figcaption p{max-width:570px;margin:0;font-size:17px;line-height:1.7}
.homepage-product-image__frame{overflow:hidden;border-radius:32px;background:#10120f;aspect-ratio:5056/3392}
.homepage-product-image img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.product-definition{grid-template-columns:1fr;gap:28px}.product-definition h2{font-size:36px}.definition-copy .definition-lead{font-size:21px}.definition-copy p{font-size:16px}}
@media(max-width:760px){.homepage-product-image{margin:8px 22px 54px}.homepage-product-image figcaption{grid-template-columns:1fr;gap:18px;margin-bottom:24px}.homepage-product-image figcaption p{font-size:16px}.homepage-product-image__frame{border-radius:22px;aspect-ratio:4/5}.homepage-product-image img{object-position:58% center}}

/* Keep the opening view dedicated to the hero. */
main>.hero:first-child{min-height:100svh;padding-bottom:120px}
@media(max-width:760px){main>.hero:first-child{padding-bottom:88px}}
.brand{display:inline-flex;align-items:center;gap:2px}
.brand svg{width:25px;height:25px;stroke:#487839;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Shared hero anchors keep the phone aligned between the two landing pages. */
@media(min-width:761px){main>.hero:first-child{grid-template-columns:minmax(0,1.2fr) minmax(356px,1fr)}}
@media(max-width:760px){main>.hero:first-child>div:first-child{min-height:480px}}
/* Interactive hero grid fades clear of the phone's contact shadow. */
main>.hero:first-child{position:relative;isolation:isolate}
.hero-ripple{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Homepage section links, inspired by the reference's white navigation strip. */
.homepage-key-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#fff;padding:20px 40px;margin:0;color:#183d33}
.homepage-key-details a{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:12px 16px;text-decoration:none;font-size:18px;font-weight:650;line-height:1.3}
.homepage-key-details svg{width:29px;height:29px;flex:none}
.homepage-key-details a:hover{background:#f0f5e9}
.homepage-key-details a:focus-visible{outline:3px solid #487839;outline-offset:-3px}
#credit-passport,#how,#fees,#questions{scroll-margin-top:100px}
@media(max-width:700px){.homepage-key-details{grid-template-columns:1fr 1fr;padding:12px 16px}.homepage-key-details a{justify-content:flex-start;font-size:15px;padding:12px 10px;gap:10px}.homepage-key-details svg{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep key details in the opening viewport, below the hero content at the right. */
main>.hero:first-child{height:calc(100svh - var(--hero-header-height,84px));min-height:0;padding:20px 40px 88px;gap:28px}
main>.hero:first-child>.homepage-key-details{position:absolute;bottom:16px;right:24px;display:flex;justify-content:flex-end;background:transparent;padding:0;gap:8px;z-index:2}
main>.hero:first-child>.homepage-key-details a{font-size:15px;min-height:48px;padding:10px 14px;gap:9px}
main>.hero:first-child>.homepage-key-details svg{width:24px;height:24px}
@media(min-width:761px) and (max-height:820px){main>.hero:first-child .phone-wrap{padding:10px}main>.hero:first-child .phone{zoom:.78}main>.hero:first-child h1{font-size:60px}}
@media(min-width:761px) and (max-height:650px){main>.hero:first-child .phone{zoom:.58}main>.hero:first-child h1{font-size:48px}main>.hero:first-child .lede{font-size:16px}main>.hero:first-child{padding-top:8px}}
@media(max-width:760px){main>.hero:first-child{height:calc(100svh - var(--hero-header-height,84px));min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:18px 24px 104px}main>.hero:first-child>div:first-child{min-height:0;width:100%}main>.hero:first-child h1{font-size:38px;letter-spacing:-1.8px;margin:0 0 14px}main>.hero:first-child .lede{font-size:15px;line-height:1.5;margin:0}main>.hero:first-child .actions{margin:14px 0 0}main>.hero:first-child .button{padding:12px 18px}main>.hero:first-child .phone-wrap{padding:8px;flex:1;min-height:0}main>.hero:first-child .phone{zoom:.43}main>.hero:first-child>.homepage-key-details{display:grid;grid-template-columns:auto auto;right:16px;bottom:12px;gap:0}main>.hero:first-child>.homepage-key-details a{font-size:13px;padding:8px 10px;min-height:42px}main>.hero:first-child>.homepage-key-details svg{width:21px;height:21px}}

@media(max-width:760px){main>.hero:first-child .phone-wrap{flex:0 1 auto;margin:auto 0}main>.hero:first-child .phone-wrap::after{width:160px;bottom:0;height:15px}}
@media(max-width:760px) and (max-height:740px){main>.hero:first-child .phone{zoom:.3}main>.hero:first-child h1{font-size:32px}main>.hero:first-child{padding-top:12px;gap:0}main>.hero:first-child .lede{font-size:14px}}

/* Align key details with the hero copy and the base of the phone. */
main>.hero:first-child>.homepage-key-details{left:40px;right:auto;justify-content:flex-start;gap:2px}
main>.hero:first-child>.homepage-key-details a{padding-inline:10px;font-size:14px}
main>.hero:first-child>.homepage-key-details a:first-child{padding-left:0}
@media(min-width:761px){main>.hero:first-child>.homepage-key-details{bottom:var(--hero-phone-bottom,120px);max-width:calc((100% - 108px)*.545);flex-wrap:wrap}}
@media(max-width:760px){main>.hero:first-child>.homepage-key-details{left:24px;right:auto}}

/* Borrower-facing fee explanation; amounts follow the existing approved model. */
.fees-section{background:#eef3e7;color:#183d33}
.fees-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:44px}
.fees-heading h2{margin:16px 0 0}.fees-heading>p{font-size:17px;line-height:1.7;margin:0;max-width:48ch}
.fees-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.fees-grid article{padding-top:24px;border-top:1px solid #b8c8ad}
.fees-grid h3{font-size:23px;margin:0 0 18px}.fees-grid p{font-size:15px;line-height:1.75;margin:0 0 16px}
.fees-grid .fees-price{font-size:62px;font-weight:550;line-height:1;letter-spacing:-2px;margin:0 0 30px}
.fees-price span{display:block;font-size:13px;letter-spacing:0;font-weight:500;margin-top:12px;line-height:1.5}
.fees-detail{color:#52695c}.fees-funding{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid #b8c8ad;margin-top:30px;padding-top:26px}.fees-funding h3{font-size:19px;line-height:1.4;margin:0}.fees-funding p{font-size:15px;margin:0;line-height:1.75}
@media(max-width:760px){.fees-heading,.fees-grid,.fees-funding{grid-template-columns:1fr;gap:24px}.fees-heading{margin-bottom:28px}.fees-heading>p{font-size:16px}.fees-grid article{padding-top:20px}.fees-grid .fees-price{font-size:52px}.fees-funding{gap:12px}}