/* Keep the hero proportions driven by available height, including browser chrome. */
@media(min-width:901px){
 .intro-layout{height:calc(100svh - 32px);min-height:0;grid-template-columns:minmax(0,2.25fr) minmax(0,1fr)}
 .intro-main,.intro-rail{height:100%;min-height:0}
 .intro-main{padding:clamp(28px,4.5vh,58px) clamp(36px,4vw,82px) 76px;justify-content:center;transition:filter .28s,opacity .28s}
 .intro-brand{margin-bottom:clamp(28px,4.5vh,56px)}
 .intro-brand .brand{width:clamp(290px,21vw,410px)}
 .intro-main h1{font-size:clamp(36px,min(4.2vw,7.7vh),86px);line-height:1.2}
 .intro-bottom{margin-top:0;padding-top:clamp(28px,4.5vh,55px)}
 .intro-bottom>p{font-size:clamp(16px,min(1.25vw,2.25vh),23px);line-height:1.6;max-width:850px}
 .intro-cta{margin-top:clamp(22px,3.2vh,36px);font-size:clamp(13px,1vw,19px)}
 .intro-rail{padding:clamp(20px,3vh,36px);grid-template-rows:minmax(0,1fr) auto;border:0}
 .rail-summary{min-height:0}.rail-navigation{position:absolute;inset:28px 28px 70px;min-height:0;padding:40px 8px 0}
 .rail-intro{font-size:clamp(15px,min(1.2vw,2.2vh),22px);line-height:1.45;margin-bottom:clamp(10px,1.6vh,18px);padding-right:58px}
 .rail-stat{padding:clamp(9px,1.5vh,17px) 19px;border-radius:25px}
 .rail-stat strong{font-size:clamp(43px,min(4.3vw,7.3vh),85px)}
 .rail-stat-wide strong{font-size:clamp(27px,min(2.6vw,4.3vh),46px)}
 .rail-stat span{font-size:clamp(12px,min(.95vw,1.6vh),16px);margin-top:5px}
 .rail-traits{gap:clamp(8px,1.2vh,13px)}
 .rail-trait{padding:clamp(9px,1.5vh,17px) 19px;border-radius:25px}
 .rail-trait h2{font-size:clamp(16px,min(1.2vw,2.1vh),22px);line-height:1.3;margin-bottom:4px}
 .rail-trait p{font-size:clamp(13px,min(.95vw,1.7vh),17px);line-height:1.5}
 .rail-settings{margin-top:10px}
}
.intro-cta .intro-arrow{width:60px;height:60px;line-height:1;display:flex;align-items:center;justify-content:center}
.intro-arrow svg{display:block;width:27px;height:27px;flex:none}
.hero-down{width:44px;height:44px;bottom:18px;border-color:color-mix(in srgb,var(--intro-accent) 55%,transparent);background:transparent}
.hero-down svg{width:20px;height:20px;animation:down-cue 2s ease-in-out infinite}
.trait-detail{top:0;bottom:0;right:calc(100% - 2px);height:100%;box-sizing:border-box;border:0;padding:clamp(28px,4vh,50px) clamp(28px,3vw,55px);transform:translateX(100%);opacity:1;visibility:hidden;z-index:-1;transition:transform .3s cubic-bezier(.2,.75,.25,1),visibility 0s .3s;border-radius:36px 0 0 36px}
.intro-rail{z-index:5;transition:border-radius .3s}.intro-rail>.rail-summary,.intro-rail>.rail-settings{position:relative;z-index:1}
.has-trait-detail .trait-detail{transform:translateX(0);visibility:visible;transition:transform .3s cubic-bezier(.2,.75,.25,1),visibility 0s}
.has-trait-detail .intro-rail{border-radius:0 36px 36px 0}
.trait-detail{clip-path:inset(0 100% 0 0);transition:transform .3s cubic-bezier(.2,.75,.25,1),clip-path .3s cubic-bezier(.2,.75,.25,1),visibility 0s .3s}.has-trait-detail .trait-detail{clip-path:inset(0);transition:transform .3s cubic-bezier(.2,.75,.25,1),clip-path .3s cubic-bezier(.2,.75,.25,1),visibility 0s}
.trait-detail h2{font-size:clamp(26px,2vw,36px);margin:18px 0 22px}.trait-detail li{font-size:clamp(16px,1.05vw,20px);padding-block:clamp(16px,2.5vh,26px)}
@media(max-width:900px){.intro-main{justify-content:center}.intro-brand{margin-bottom:35px}.intro-bottom{margin-top:0;padding-top:38px}.intro-cta .intro-arrow{width:52px;height:52px}.intro-main h1{font-size:clamp(30px,6.8vw,59px)}}
@media(max-width:480px){.intro-main h1{font-size:clamp(28px,7.8vw,38px)}.intro-main{padding-bottom:85px}.intro-bottom>p{font-size:16px}.intro-cta .intro-arrow{width:48px;height:48px}}
@media(max-height:660px) and (min-width:901px){.intro-layout{height:auto;min-height:calc(100svh - 32px)}.intro-main,.intro-rail{height:auto;min-height:calc(100svh - 32px)}.intro-main h1{font-size:40px}.intro-main{padding-top:25px}.intro-brand{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.trait-detail,.has-trait-detail .trait-detail,.intro-main,.intro-rail{transition:none}.hero-down svg{animation:none}}
/* Reference composition: two-thirds statement, one-third compact information. */
@media(min-width:901px){
 .intro-layout{width:95%;height:calc(100svh - 72px);margin:36px auto;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
 .intro-main,.intro-rail{border-radius:40px}
 .intro-main{padding:clamp(28px,4.4vh,44px) clamp(30px,2.25vw,48px);justify-content:space-between;background:var(--bg);border-width:2px}
 .intro-brand{margin-bottom:clamp(28px,5.5vh,60px)}
 .intro-brand .brand{width:clamp(275px,19.5vw,375px)}
 .intro-main h1{font-family:Arial,'Manrope',sans-serif;font-weight:700;font-size:clamp(43px,min(4.35vw,8.8vh),88px);line-height:1.12;letter-spacing:-.025em}
 .intro-bottom{padding-top:clamp(28px,5.5vh,62px);margin-top:0}
 .intro-bottom>p{font-family:Arial,'Manrope',sans-serif;font-size:clamp(17px,min(1.13vw,2.3vh),22px);line-height:1.5;max-width:820px}
 .intro-cta{font-family:Arial,'Manrope',sans-serif;font-size:clamp(17px,1.25vw,24px);font-weight:700;margin-top:clamp(28px,6vh,70px);gap:20px}
 .intro-cta>span:first-child{padding:0 36px;height:clamp(64px,9vh,90px);min-width:230px!important;width:auto!important}
 .intro-cta .intro-arrow{height:clamp(64px,9vh,90px);width:clamp(64px,9vh,90px)}.intro-arrow svg{width:44px;height:44px}
 .hero-down{left:auto;right:calc(33.333% + 44px);bottom:30px;width:40px;height:40px}
 .intro-rail{padding:clamp(26px,3.2vh,40px) clamp(25px,2.25vw,44px) 18px;grid-template-rows:minmax(0,1fr) auto}
 .rail-summary{display:flex;flex-direction:column;gap:0}
 .rail-intro{font-family:Arial,'Manrope',sans-serif;font-weight:500;font-size:clamp(16px,min(1.15vw,2.35vh),22px);line-height:1.15;padding-right:53px;margin-bottom:16px}
 .rail-menu-toggle{width:54px;height:54px;top:15px;right:15px;gap:5px}.rail-menu-toggle span{width:23px;height:2px}.rail-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}.rail-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}
 .rail-stats{gap:10px;margin-bottom:12px}.rail-stat{padding:clamp(13px,1.8vh,20px) 21px;border-radius:clamp(26px,2.2vw,42px);background:var(--bg)}
 .rail-stat strong{font-family:Arial,'Manrope',sans-serif;font-size:clamp(52px,min(4.5vw,8.3vh),88px);font-weight:700;letter-spacing:-.035em;line-height:1}.rail-stat span{font-family:Arial,'Manrope',sans-serif;font-size:clamp(13px,.9vw,17px);color:var(--rail-bg);margin-top:5px}
 .rail-stat-wide strong{font-size:clamp(35px,min(3.5vw,6.4vh),68px)}
 .rail-traits{gap:12px;flex:1;grid-template-rows:repeat(3,minmax(0,1fr))}.rail-trait{display:flex;flex-direction:column;justify-content:center;padding:12px 21px;border-radius:34px;border-width:1.5px;min-height:0}.rail-trait h2{font-family:Arial,'Manrope',sans-serif;font-weight:700;font-size:clamp(18px,min(1.35vw,2.7vh),26px);line-height:1.15;margin-bottom:7px}.rail-trait p{font-family:Arial,'Manrope',sans-serif;font-size:clamp(13px,min(.9vw,1.85vh),17px);line-height:1.3}
 .rail-settings{margin-top:12px}.rail-settings .theme-toggle{width:30px;height:30px}.rail-settings .languages button{padding:4px 3px}.trait-detail{border-radius:40px 0 0 40px}.has-trait-detail .intro-rail{border-radius:0 40px 40px 0}
}
@media(min-width:901px) and (max-height:760px){.intro-layout{height:calc(100svh - 40px);margin:20px auto}.intro-main{padding:25px 30px}.intro-brand{margin-bottom:22px}.intro-main h1{font-size:clamp(40px,4vw,61px)}.intro-bottom{padding-top:25px}.intro-cta{margin-top:24px}.intro-cta>span:first-child,.intro-cta .intro-arrow{height:62px}.intro-cta .intro-arrow{width:62px}.rail-intro{font-size:16px}.intro-rail{padding:20px 24px 14px}.rail-traits{gap:9px}.rail-trait{padding:10px 17px}.rail-trait h2{font-size:18px}.rail-trait p{font-size:13px}}
@media(max-width:900px){.intro-main h1{font-family:Arial,'Manrope',sans-serif;font-weight:700;letter-spacing:-.025em;font-size:clamp(36px,7.5vw,65px)}.intro-main{background:var(--bg)}.intro-cta{font-family:Arial,'Manrope',sans-serif;font-weight:700;font-size:16px}.intro-arrow svg{width:28px;height:28px}}
@media(max-width:480px){.intro-main h1{font-size:clamp(32px,9vw,43px)}.intro-cta{font-size:14px}.intro-brand .brand{width:265px}}