/* The two entrances scale together, without stacking or recropping on mobile. */
.gateway-page{height:100svh;min-height:600px;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#fff}
.gateway-main{height:100%;min-height:0;width:100%;margin:auto;padding:24px clamp(12px,2.2vw,40px) clamp(32px,4svh,56px);display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(12px,1.5svh,24px)}
.gateway-wordmark img{width:clamp(100px,12vw,165px);height:auto}
.gateway-topbar{display:flex;align-items:center;gap:clamp(24px,4vw,64px)}
.gateway-wordmark{display:block;flex:none}
.gateway-nav{display:flex;align-items:center;gap:clamp(20px,3vw,48px);flex:1;min-width:0}
.gateway-nav a{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:550;white-space:nowrap;color:#202124;transition:color .2s}
.gateway-nav a:hover,.gateway-nav .gateway-contact{color:#2563eb}
.gateway-nav .gateway-contact{margin-left:auto}
.gateway-topbar a:focus-visible{outline:2px solid #2563eb;outline-offset:5px;border-radius:4px}
.gateway-intro{font-size:clamp(21px,3.2vw,48px);font-weight:450;line-height:1.45;letter-spacing:-.04em;margin:clamp(8px,2vw,32px) 0 clamp(8px,2vw,32px);color:#202124}
.gateway-grid{--gateway-grid-gap:clamp(8px,1.2vw,22px);container-type:size;display:flex;align-items:center;justify-content:center;gap:var(--gateway-grid-gap);width:100%;height:100%;min-height:0}
.gateway-entry{display:block;position:relative;isolation:isolate;container-type:inline-size;flex:none;width:min(calc((100% - var(--gateway-grid-gap)) / 2),calc(100cqh * 9 / 16));min-width:0;color:#fff;background:white}
.gateway-entry::after{content:"";position:absolute;inset:50% 0 0;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.08) 35%,rgba(0,0,0,.72))}
.gateway-art{aspect-ratio:9/16;overflow:hidden;background:#e6e9ee;position:relative}
.gateway-art img,.gateway-art video{display:block;width:100%;height:100%;object-fit:cover}
.gateway-art img{object-fit:contain}
.gateway-label{position:absolute;inset:auto 0 0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(12px,6cqw,32px);color:#fff}
.gateway-label h2{font-size:clamp(15px,8cqw,42px);font-weight:450;line-height:1.3;letter-spacing:-.04em;text-wrap:initial}
.gateway-label svg{width:clamp(18px,9cqw,38px);height:clamp(18px,9cqw,38px);flex:none;transition:transform .2s}
.gateway-entry:hover svg{transform:translateX(3px)}
.gateway-entry:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.audience-header{height:88px;background:#fff}
.audience-header .header-inner{justify-content:flex-start;gap:40px;max-width:1600px;padding-inline:40px}
.audience-header .brand,.audience-header .brand img{width:140px;height:auto;flex:none}
.audience-header .audience-nav{position:static;display:flex;flex:0 1 auto;gap:30px;margin:0;padding:0;border:0;background:transparent;box-shadow:none;align-items:center}
.audience-header .audience-nav a{font-size:16px;white-space:nowrap;min-height:44px;display:flex;align-items:center;color:#737982}
.audience-header .audience-nav a[aria-current="page"]{color:#202124;text-decoration:underline;text-decoration-color:#2563eb;text-underline-offset:10px}
.audience-header .audience-nav a:hover{color:#2563eb}
.personal-main{max-width:1280px;margin:auto;padding:56px 40px 32px;display:flex;flex-direction:column;align-items:stretch;gap:40px}
.personal-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.personal-message{min-width:0}
.personal-message h1{font-size:clamp(32px,3.6vw,52px);line-height:1.2;letter-spacing:-.035em;margin:0 0 16px;text-wrap:balance}
.personal-message>p{max-width:44ch;font-size:18px;line-height:1.7;text-wrap:pretty}
.personal-downloads{display:flex;flex-direction:row;align-items:stretch;gap:12px;width:332px;max-width:100%}
.personal-store{display:flex;flex:1 1 0;align-items:center;justify-content:flex-start;width:auto;height:52px;min-width:0;padding:10px 14px;border:1px solid #c8cdd3;border-radius:6px;background:#fff;color:#202124;transition:border-color .2s,background-color .2s}
.personal-store:hover{border-color:#737982;background:#f8f9fa;color:#202124}
.personal-store .personal-store-logo{display:block;width:128px;max-width:100%;height:30px;object-fit:contain;object-position:left center;flex:none}
.personal-park{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.personal-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;width:100%;max-width:1100px;margin-inline:auto;padding-block:24px 32px}
.personal-story-heading{min-width:0}
.personal-story-context{margin-bottom:16px;font-size:16px;line-height:1.7;color:var(--body)}
.personal-story-context span{display:inline-block;max-width:100%}
.personal-story h2{font-size:clamp(28px,2.6vw,36px);line-height:1.35;letter-spacing:-.025em}
.personal-story-copy{display:grid;gap:24px;max-width:64ch;font-size:18px;line-height:1.85}
.personal-story-more{justify-self:start}
.personal-store:focus-visible{outline:2px solid #2563eb;outline-offset:5px;border-radius:6px}
@media(max-width:700px){
 .personal-copy{align-items:stretch;text-align:left}
 .personal-message h1{font-size:clamp(30px,6vw,40px);margin-bottom:16px}
 .personal-message>p{max-width:32ch;font-size:16px}
 .personal-store{padding-inline:12px}
 .personal-story{grid-template-columns:1fr;gap:24px;padding-block:8px 16px}
 .personal-story-copy{font-size:16px}
}
@media(max-width:600px){
 .gateway-topbar{align-items:flex-start;flex-direction:column;gap:12px}
 .gateway-nav{width:100%;gap:20px}
 .gateway-nav a{font-size:14px}
 .gateway-page{height:auto;min-height:100svh;display:flex;flex-direction:column}
 .gateway-main{height:auto;min-height:0;grid-template-rows:repeat(3,auto);align-content:start;padding:24px 12px 32px;gap:24px}
 .gateway-intro{margin:8px 0 0}
 .gateway-grid{container-type:normal;height:auto;max-width:100%;align-items:flex-start}
 .gateway-entry{width:calc((100% - var(--gateway-grid-gap)) / 2)}
 .gateway-label{padding:14px 10px;gap:4px}.gateway-label h2{font-size:clamp(15px,4.3vw,25px);white-space:nowrap}.gateway-label svg{width:18px;height:18px}
 .audience-header{height:72px}.audience-header .header-inner{padding-inline:16px;gap:20px}.audience-header .brand,.audience-header .brand img{width:90px}.audience-header .audience-nav{gap:16px}.audience-header .audience-nav a{font-size:13px}
 .personal-main{padding:40px 20px 24px;gap:28px}.personal-park{border-radius:12px}
 html[lang="en"] .gateway-label h2{white-space:normal;font-size:16px}
 html[lang="en"] .audience-header .header-inner{gap:12px}html[lang="en"] .audience-header .audience-nav{gap:12px}html[lang="en"] .audience-header .audience-nav a{font-size:12px}
}
@media(max-width:350px){.audience-header .header-inner{gap:12px;padding-inline:12px}.audience-header .brand,.audience-header .brand img{width:80px}.audience-header .audience-nav{gap:12px}.audience-header .audience-nav a{font-size:12px}.gateway-label{padding-inline:8px}.gateway-label svg{width:16px;height:16px}}
@media(max-width:380px){html[lang="en"] .personal-page .audience-header .header-inner{padding-inline:8px;gap:8px}html[lang="en"] .personal-page .audience-header .brand,html[lang="en"] .personal-page .audience-header .brand img{width:64px}html[lang="en"] .personal-page .audience-header .header-contact{padding-inline:8px!important}}
@media(prefers-reduced-motion:reduce){.gateway-label svg,.personal-store{transition:none}.gateway-entry:hover svg{transform:none}}

/* The entrance fills the first screen with the headline and the two cards; the footer sits
   below the fold (reached by scrolling) instead of shrinking the cards. Cards keep their
   9:16 ratio and sit right under the headline at every size. */
@media(min-width:601px){
 .gateway-page{height:auto;min-height:0;display:block}
 .gateway-main{height:100svh;min-height:600px}
}
.gateway-grid{align-items:flex-start}
@media(min-width:601px) and (max-aspect-ratio:4/5){
 .gateway-page{min-height:100svh;display:flex;flex-direction:column}
 .gateway-main{flex:1 0 auto;height:auto;min-height:0;grid-template-rows:repeat(3,auto);align-content:start}
 .gateway-grid{container-type:normal;height:auto}
 .gateway-entry{width:calc((100% - var(--gateway-grid-gap)) / 2)}
}