/* Fit the opening composition to the available viewport, without clipping copy. */
.mobile-even-layout{display:none}
.hero-visual .orbit{max-height:100%;width:100%;inset:0}
.hero-visual .hero-mac{top:auto;bottom:14%}
.hero-visual .phone{top:auto;bottom:10%}
.hero-visual .tablet.landscape{top:auto;bottom:16%}
@media(min-width:801px){
 .header,.hero.wrap{width:calc(100% - 64px);max-width:1440px;margin-left:auto;margin-right:auto}
 .hero{margin-top:20px;min-height:0;height:auto;padding:28px 40px;gap:24px}
 .hero{min-height:calc(100svh - 124px)}
 .hero-visual{height:clamp(300px,calc(100svh - 200px),500px);margin-right:0}
 .hero h1{font-size:clamp(34px,5.5svh,64px);line-height:1.18}
 .hero-copy>p{margin-block:18px;font-size:15px;line-height:1.75}
 .hero .actions{margin-top:22px;gap:12px}
 .hero-caption{margin-top:22px}
}
@media(max-width:800px){
 .hero:has(.mobile-even-layout){padding-block:0;gap:0}
 .hero:has(.mobile-even-layout)>.hero-copy,.hero:has(.mobile-even-layout)>.hero-visual{display:none}
 .mobile-even-layout{display:flex;flex-direction:column;align-items:stretch;gap:var(--even-gap,12px);padding-block:var(--even-gap,12px);width:100%}
 .mobile-title-line{font-size:clamp(28px,4.7dvh,42px);font-weight:700;line-height:1;letter-spacing:-1.2px}
 .secondary-title{color:#65727c}
 .mobile-intro-line{font-size:13px;line-height:1;color:#657580;white-space:nowrap}
 .mobile-button-row{display:flex;gap:10px;align-items:center}
 .hero .mobile-button-row .button{font-size:12px;white-space:nowrap;padding:11px 12px;gap:6px;min-height:44px;line-height:1.4}
 .mobile-explore{font-size:12px;line-height:1;margin:0;align-self:flex-start}
 .mobile-version{display:flex;align-items:center;gap:6px;font-size:9px;line-height:1.2;color:#7c8991}
 .hero .mobile-device-scene{display:block;position:relative;flex:none;align-self:center;margin:0!important;padding:0;aspect-ratio:1.35;height:auto;min-width:0;max-width:100%}
 .mobile-device-label{display:flex;justify-content:center;gap:12px;position:static;font-size:9px;line-height:1;color:#8b9096}
 .dark .mobile-intro-line,.dark .secondary-title{color:#a3afb9}
}
@media(max-width:800px){
 .header{margin-top:8px;top:8px}
 .hero{margin-top:16px;padding:24px 20px 22px;gap:20px;min-height:0;align-items:stretch;justify-content:flex-start}
 .hero-copy{width:100%}
 .hero h1{font-size:clamp(28px,4.7svh,42px);line-height:1.18;margin:0;letter-spacing:-1.2px}
 .hero-copy>p{font-size:13px;line-height:1.7;margin:18px 0 0}
 .hero .actions{display:grid;grid-template-columns:max-content max-content;justify-content:start;align-items:center;gap:16px 10px;margin-top:20px}
 .hero .actions .button{font-size:12px;line-height:1.4;padding:11px 12px;gap:6px;min-height:44px;white-space:nowrap}
 .hero .actions .button svg{width:17px;height:17px}
 .hero .actions>.text-link{grid-column:1/-1;margin:0;width:auto;font-size:12px;line-height:1.5}
 .hero-caption{margin-top:18px;font-size:10px;line-height:1.5;gap:6px}
 .hero-visual{align-self:center;flex:none;width:min(100%,calc((100svh - 390px)*1.35));max-width:420px;min-width:190px;height:auto;aspect-ratio:1.35;margin:0}
 .hero-visual .hero-mac{width:93%;right:0;bottom:13%}
 .hero-visual .phone{width:21%;left:0;bottom:8%}
 .hero-visual .tablet.landscape{width:44%;left:9%;bottom:13%}
 .hero-visual .visual-note{bottom:0;right:0;left:0;justify-content:center;gap:12px;font-size:9px;line-height:1.4}
}
@media(max-width:340px){.hero{padding-inline:14px}.hero .actions{gap:8px}.hero .actions .button{padding-inline:9px;font-size:11px}}
@media(max-width:800px) and (max-height:650px){
 .hero{padding-top:18px;padding-bottom:16px;gap:14px}
 .hero-copy>p{margin-top:14px}
 .hero .actions{margin-top:16px}
 .hero-caption{margin-top:14px}
}
/* The header stays unchanged. Share spare height between every content row. */
@media(max-width:800px){
 .hero{height:calc(100dvh - 92px);min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding-block:18px 16px}
 .hero-copy{display:contents}
 .hero h1,.hero-copy>p,.hero .actions,.hero-caption{flex:none}
 .hero-copy>p,.hero .actions,.hero-caption,.hero-visual{margin-top:auto;margin-bottom:0}
 .hero-copy>p{padding-top:12px}
 .hero .actions{padding-top:14px}
 .hero-caption{padding-top:12px}
 .hero-visual{margin-top:auto;padding-top:0;max-width:420px;width:min(100%,calc((100dvh - 400px)*1.35));min-width:170px}
}