/* Shared responsive layer: broad canvases, readable text, and safe grid minimums. */
body.website-motion .wrap{width:calc(100% - 2 * clamp(24px,3vw,64px));max-width:1600px;margin-inline:auto}
body.website-motion .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px)}
body.website-motion :is(.hero-grid,.contact-grid,.form-grid,.cards,.people,.benefits,.editorial-grid)>*{min-width:0}
body.website-motion .hero h1{max-width:18ch;overflow-wrap:break-word}
body.website-motion .hero .lead{max-width:55ch}
body.website-motion .motion-showcase{width:100%;max-width:820px;justify-self:end}
body.website-motion :is(.person,.detail,.editorial-card,.footer) a{overflow-wrap:anywhere}
body.website-motion .menu-toggle{flex:none;min-width:44px;min-height:44px}
/* A large side button requires a real outside gutter. Compact view keeps its accessible text. */
body.website-motion .sa-launch{top:auto;bottom:calc(92px + env(safe-area-inset-bottom));right:12px;transform:none;width:64px;min-height:56px;padding:10px 6px;gap:0}
body.website-motion .sa-launch>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.website-motion .sa-launch .sa-avatars img{width:28px;height:28px}
body.website-motion .sa-close{position:sticky;float:right;top:8px;right:auto;margin:8px 8px -52px 0;width:44px;height:44px;z-index:2}
body.website-motion .sa-dialog{max-height:calc(100dvh - 24px);bottom:12px}
@media(min-width:2080px){body.website-motion .sa-launch{top:50%;bottom:auto;right:16px;transform:translateY(-50%);width:112px;padding:11px 9px;gap:7px}body.website-motion .sa-launch>span:last-child{position:static;width:auto;height:auto;clip-path:none;white-space:normal}}
@media(max-width:1100px){body.website-motion .topbar .wrap>span{display:none}body.website-motion .topbar .wrap{justify-content:center}body.website-motion .topbar-links{flex-wrap:wrap;justify-content:center;gap:6px 18px}body.website-motion .topbar-links a:last-child{display:none}}
@media(max-width:1024px){body.website-motion .nav,body.website-motion .header-actions .btn:not(.oetp-header-cta){display:none}body.website-motion .menu-toggle{display:inline-flex}body.website-motion .header-actions .oetp-header-cta{display:inline-flex}body.website-motion .header-inner{justify-content:space-between}body.website-motion .mobile-nav[data-open=true]{display:grid;gap:2px;padding:8px 0 18px}body.website-motion .mobile-nav a{padding:13px 4px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}}
@media(max-width:900px){body.website-motion .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}body.website-motion .motion-showcase{justify-self:center}}
@media(max-width:640px){body.website-motion .wrap{width:calc(100% - 32px)}body.website-motion .topbar{display:none}body.website-motion .hero h1{max-width:none;font-size:clamp(30px,8.2vw,48px)}body.website-motion .btn{white-space:normal;text-align:center;max-width:100%;height:auto;min-height:48px;padding-block:12px}body.website-motion .header-actions .oetp-header-cta{white-space:nowrap;padding-block:0}body.website-motion .form-grid{grid-template-columns:minmax(0,1fr)}body.website-motion .person>div{min-width:0}body.website-motion .sa-launch{width:56px;min-height:52px;bottom:calc(82px + env(safe-area-inset-bottom));right:8px;padding:8px 4px}body.website-motion .sa-launch .sa-avatars img{width:25px;height:25px}}
@media(max-width:360px){body.website-motion .header-inner{gap:8px}body.website-motion .logo{padding-inline:8px}body.website-motion .logo img{height:30px}body.website-motion .header-actions{gap:6px}}
@media(max-height:500px){body.website-motion .sa-dialog{top:12px;bottom:auto;margin-top:0;max-height:calc(100dvh - 24px)}}

/* Chapter rhythm: fit short chapters to the available canvas, let long content grow. */
body.website-motion main > section:is(.hero,.section,.band){
    scroll-margin-top:0;
}
body.website-motion main > section:is(.section,.band){
    border-top:1px solid var(--line);
    padding-block:clamp(40px,6svh,64px);
}
body.website-motion .section-head{margin-bottom:28px;gap:28px}
body.website-motion .editorial-card{padding:24px}
body.website-motion .editorial-card .text-link{padding-top:20px}
body.website-motion .hero-proof{font-size:13px;line-height:1.45}
body.website-motion .hero h1{font-size:clamp(32px,3.4vw,56px);line-height:1.08;max-width:24ch}
body.website-motion .hero .lead{font-size:17px;line-height:1.6}
body.website-motion .hero-actions{margin-top:22px}
body.website-motion .hero-proof{margin-top:20px}
body.website-motion .hero .btn{font-size:14px;min-height:48px;padding-inline:16px}

@media(min-width:960px) and (min-height:600px){
    body.website-motion main > section:is(.section,.band):not(:has(.contact-grid)){
        min-height:0;
        display:flex;
        align-items:center;
    }
    body.website-motion .hero{
        min-height:0;
        display:flex;
        align-items:center;
        padding-block:clamp(20px,3svh,32px);
    }
    body.website-motion .hero-grid{
        grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
        gap:clamp(28px,3vw,64px);
    }
    body.website-motion .hero h1{
        font-size:clamp(36px,min(3.4vw,5.8svh),56px);
        margin-block:14px 18px;
    }
    body.website-motion .motion-showcase{
        min-height:0;
        height:clamp(360px,calc(100svh - 244px),580px);
        max-width:660px;
    }
    body.website-motion .motion-showcase .visual-tag{top:18px;left:20px;right:20px}
    body.website-motion .motion-showcase [data-stage-products]{
        top:80px;bottom:188px;height:auto;left:12%;right:12%;
    }
    body.website-motion .motion-showcase [data-stage-products] img{
        max-height:100%;object-fit:contain;object-position:bottom;
    }
    body.website-motion .motion-showcase .visual-floor{bottom:178px}
    body.website-motion .motion-showcase .visual-card{bottom:16px;left:16px;right:16px}
    body.website-motion .motion-showcase .visual-card div{padding:12px 14px}
    body.website-motion .motion-showcase .visual-card b{font-size:24px}
    body.website-motion .stage-control{bottom:128px;left:20px;right:20px}
    body.website-motion .showcase-float{top:60px;font-size:10px;padding:8px 10px}
    body.website-motion .showcase-float--second{top:58px}
    body.website-motion .trust-item{padding-block:18px}
}

@media(max-width:959px){
    body.website-motion .hero{padding-block:28px 48px}
    body.website-motion .hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}
    body.website-motion .hero-copy{max-width:680px;width:100%;margin-inline:auto}
    body.website-motion .hero h1{font-size:clamp(30px,5.3vw,46px);max-width:24ch;margin-block:14px 20px}
    body.website-motion .motion-showcase{justify-self:center;max-width:600px}
    body.website-motion .editorial-card{padding:22px}
}
@media(max-width:640px){
    body.website-motion .hero{padding-block:24px 40px}
    body.website-motion .hero h1{font-size:clamp(30px,7.8vw,38px);max-width:none}
    body.website-motion .hero .lead{font-size:17px;line-height:1.6}
    body.website-motion .hero-proof{gap:8px;font-size:13px}
    body.website-motion .hero-proof li{padding:7px 10px}
    body.website-motion .hero-actions{gap:10px;margin-top:22px}
    body.website-motion .hero-grid{gap:48px}
    body.website-motion .hero .eyebrow{font-size:11px;letter-spacing:.09em}
    body.website-motion main > section:is(.section,.band){padding-block:48px}
    body.website-motion .section-head{margin-bottom:24px}
    body.website-motion .section-head h2{font-size:30px;line-height:1.15}
    body.website-motion .editorial-grid{gap:16px}
}
@media(max-height:599px){
    body.website-motion .hero{padding-block:24px 32px}
    body.website-motion main > section:is(.section,.band){padding-block:32px}
}

@media(min-width:960px) and (min-height:600px){
    body.website-motion .breadcrumb + .hero{
        min-height:0;
        padding-block:16px;
    }
    body.website-motion .breadcrumb + .hero .motion-showcase{
        height:clamp(320px,calc(100svh - 286px),580px);
    }
    body.website-motion main > section:is(.section,.band){padding-block:clamp(24px,4svh,40px)}
    body.website-motion .section-head{margin-bottom:24px}
    body.website-motion .editorial-card{padding:20px}
    body.website-motion .hero .status-note{font-size:13px;line-height:1.5;padding:10px 12px;margin-top:16px}
}
@media(max-width:959px) and (min-height:700px){
    body.website-motion .hero-copy{
        min-height:calc(100svh - 224px);
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
    }
    body.website-motion .hero-actions{width:100%}
}
@media(max-width:640px) and (min-height:700px){
    body.website-motion .hero-copy{min-height:calc(100svh - 176px)}
}

html:has(body.website-motion){scroll-padding-top:77px}
@media(max-width:640px){html:has(body.website-motion){scroll-padding-top:67px}}

/* Content-led chapters: short sections keep a compact rhythm on tall screens. */
@media(min-width:960px) and (min-height:600px){
    body.website-motion .hero{min-height:0;padding-block:clamp(36px,5svh,72px)}
    body.website-motion .breadcrumb + .hero{min-height:0;padding-block:32px 56px}
    body.website-motion .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,3vw,56px)}
    body.website-motion .hero h1{font-size:clamp(36.1px,2.9925vw,51.3px);max-width:26ch}
    body.website-motion .hero .lead{font-size:17.1px;line-height:1.65;max-width:60ch}
    body.website-motion .hero .motion-showcase{height:clamp(380px,49.4svh,494px);max-width:none;justify-self:stretch}
    body.website-motion .breadcrumb + .hero .motion-showcase{height:clamp(361px,47.5svh,475px)}
    body.website-motion main > section:is(.section,.band):not(:has(.contact-grid)){min-height:0;display:block}
    body.website-motion main > section:is(.section,.band){padding-block:clamp(48px,6svh,80px)}
    body.website-motion .section-head{margin-bottom:28px;align-items:flex-start}
    body.website-motion .section-head h2{font-size:clamp(30.4px,2.565vw,39.9px);max-width:28ch}
    body.website-motion .editorial-grid{gap:24px}
    body.website-motion .editorial-card{padding:26.6px}
    body.website-motion .editorial-card h3{font-size:20.9px;line-height:1.3}
    body.website-motion .editorial-card p{font-size:16.15px;line-height:1.7;max-width:62ch}
}

/* One shared content edge, including the independently rendered OETP catalog. */
@media screen and (min-width:960px){
    body.website-motion .wrap,
    body.website-motion main > section:is(.section,.band) > .wrap,
    body:has(> main.wrap) .wrap{
        width:calc(min(calc(100% - clamp(24px,3vw,64px)),calc(50% + 780px)) * .95);
        max-width:none;
    }
    body:has(> main.wrap) main.wrap{padding:24px 0}
    body:has(> main.wrap) .header-inner{padding-block:0;min-height:76px}
    body:has(> main.wrap) :is(.topbar,.footer) .wrap{padding-block:0}
}
body:has(> main.wrap) .header-inner{padding-block:0;min-height:76px}
/* Reserve the header and the visible 40px top bar on landscape screens. */
@media(max-width:1024px){
    body:is(.website-motion,:has(> main.wrap)) .header:has(.mobile-nav[data-open=true]){z-index:70}
    body:is(.website-motion,:has(> main.wrap)) .mobile-nav[data-open=true]{
        max-height:calc(100dvh - 116px);
        overflow-y:auto;
        overscroll-behavior:contain;
    }
}
@media(max-width:640px){
    body.website-motion .mobile-nav[data-open=true]{max-height:calc(100dvh - 66px)}
    body:has(> main.wrap) .header-inner{min-height:66px}
    body:has(> main.wrap) .mobile-nav[data-open=true]{max-height:calc(100dvh - 106px)}
}

/* The FAQ width limit belongs to the inner accordion, not the full section. */
body.website-motion main > section.editorial-faq{max-width:none}