/* BrounStack V2 video QA corrections, 2026-11-10.
   Last-loaded after legacy styles to avoid old component rules leaking into new design. */
:root{--ui-ink:#142a46;--ui-blue:#104b98;--ui-muted:#526984;--ui-border:#d9e4f0}
body{overflow-x:hidden}
.container{width:min(1160px,calc(100% - 52px))}
.site-header-global{z-index:100;box-shadow:0 1px 8px #1a34520c}
.site-header-inner{width:min(1160px,calc(100% - 52px));height:72px;gap:22px}
.site-header-global .site-nav{gap:clamp(14px,2.1vw,32px);margin:auto}
.site-header-global .site-nav a{font-size:13px;letter-spacing:0;line-height:1.3;padding:25px 0 23px}
.site-header-global .brand{font-size:24px;gap:10px}
.site-header-actions{gap:13px}
.site-header-global .site-signin{border:0;padding:11px 12px}
.site-header-global .site-signup{border-radius:7px;min-height:42px;padding:10px 20px}
.v2-hero-wrap{overflow:hidden}
.v2-hero{width:min(1160px,calc(100% - 52px));grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,60px);min-height:0;padding-top:72px;padding-bottom:72px;align-items:center}
.v2-hero-copy h1{font-size:clamp(42px,4.3vw,62px);letter-spacing:-.055em;line-height:1.1}
.v2-hero-copy .eyebrow{font-size:12px}
.v2-hero-copy .hero-description{font-size:16px;max-width:510px}
.v2-hero-copy .hero-actions .button{font-size:13px;min-height:47px;padding:11px 18px}
.hero-benefits{margin-top:31px;gap:11px}
.hero-benefits .benefit{gap:7px;padding-right:12px}
.benefit strong{font-size:11px}.benefit small{font-size:10px}
.benefit-icon{font-size:22px}
.v2-code-studio{align-self:center;min-width:0}
.v2-code-studio .editor-shell{width:100%;max-width:100%;overflow:hidden}
.v2-code-studio .editor-tabs{min-height:46px;padding:9px 12px;gap:14px}
.v2-code-studio .editor-main{grid-template-columns:minmax(0,1.27fr) minmax(0,.92fr);min-height:0;align-items:stretch}
.v2-code-studio .code-view{padding:15px 9px;font-size:11px;line-height:1.55;white-space:normal;overflow:auto;min-height:0;max-height:310px}
.v2-code-studio .code-view>div{display:block;white-space:pre;min-height:25px;line-height:25px}
.v2-code-studio .line-no{font-size:10px}
.v2-code-studio .output-view{min-width:0;padding:12px}
.v2-code-studio .output-card{height:100%;min-height:242px;max-height:274px;padding:22px 16px}
.v2-code-studio .output-card h3{font-size:clamp(22px,2.5vw,30px)}
.v2-code-studio .editor-footer{min-height:35px}
.v2-code-studio .preview-disclosure{text-align:left;line-height:1.5;margin-top:8px;color:#406485}
/* Bring structure into focus: substantial sections, limited whitespace, and readable cards. */
.v2-popular{padding-top:70px;padding-bottom:72px}
.v2-popular .section-heading{margin-bottom:28px}
.v2-popular .course-grid{gap:18px}
.v2-popular .course-card{min-height:234px;padding:21px}
.v2-popular .course-card h3{font-size:19px}
.catalog-workspace{padding-top:64px;padding-bottom:74px}
.catalog-results-grid{gap:20px}
.catalog-result-card{min-height:248px}
.catalog-hero{padding-top:68px;padding-bottom:70px}
.path-section{padding-top:62px;padding-bottom:75px}
.services-hero{padding-top:66px;padding-bottom:67px}
.services-section{padding-top:66px;padding-bottom:68px}
.service-card h3{font-size:18px}
.service-description{font-size:13px}
.v2-site-footer{border-top:1px solid #dae4f0}
/* Give the pages more useful context while preserving mock-only safety. */
.v2-secondary-band{background:#f0f6ff;padding:70px 0}
.v2-section-title{font-size:clamp(30px,3vw,43px);color:#102747;line-height:1.18;letter-spacing:-.05em;margin:10px 0 14px}
.v2-section-lead{font-size:15px;line-height:1.75;color:#536983;max-width:650px}
.v2-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin-top:28px}
.v2-feature-item{background:white;border:1px solid #d9e5f2;border-radius:12px;padding:25px;min-height:210px}
.v2-feature-number{font-size:12px;color:#1855a5;font-weight:900}
.v2-feature-item h3{font-size:18px;color:#152f51;margin:15px 0 9px}
.v2-feature-item p{font-size:13px;color:#546b84;line-height:1.7}
.v2-feature-item a{font-size:12px;font-weight:850;color:#1253a5}
.v2-page-heading{padding:71px 0 77px;background:linear-gradient(115deg,#f5f9ff,#e5f1ff)}
.v2-page-heading h1{font-size:clamp(39px,5vw,62px);color:#102844;max-width:770px;line-height:1.13;letter-spacing:-.055em;margin:17px 0}
.v2-page-heading p:not(.section-kicker){max-width:650px;color:#4e6681;font-size:16px;line-height:1.72}
.v2-page-content{padding-top:74px;padding-bottom:85px}
.v2-page-content .v2-feature-grid{margin-top:30px}
.v2-note{font-size:12px;color:#728297;padding-top:24px}
.v2-inline-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:23px}
@media(max-width:1080px){
 .site-header-inner{gap:12px}
 .site-header-global .site-nav{gap:12px}
 .site-header-global .site-nav a{font-size:12px}
 .v2-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
 .v2-hero-copy h1{font-size:clamp(38px,4.3vw,48px)}
 .hero-benefits{flex-wrap:wrap}
}
@media(max-width:980px){
 .site-header-inner{height:66px}
 .site-header-global .site-nav{margin:0;gap:0}
 .site-header-global .site-nav a{padding:12px 10px;font-size:14px}
 .v2-hero{grid-template-columns:1fr;width:min(720px,calc(100% - 44px));padding-top:59px;padding-bottom:65px;gap:36px}
 .v2-hero-copy h1{font-size:clamp(44px,6.2vw,62px)}
 .v2-code-studio{max-width:690px}
}
@media(max-width:680px){
 .container,.site-header-inner{width:calc(100% - 34px)}
 .v2-hero{width:calc(100% - 34px);padding-top:46px;padding-bottom:50px}
 .v2-hero-copy h1{font-size:clamp(39px,10vw,52px)}
 .v2-hero-copy .hero-description{font-size:14px}
 .v2-code-studio .editor-main{grid-template-columns:1fr}
 .v2-code-studio .code-view{max-height:255px}
 .v2-code-studio .output-card{height:168px;min-height:0}
 .v2-code-studio .output-card h3{font-size:23px}
 .v2-feature-grid{grid-template-columns:1fr}
 .v2-popular{padding-top:54px}
 .v2-page-heading{padding:49px 0}
 .v2-page-content{padding:49px 0}
 .site-header-global .site-signup{padding:9px 11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}