/* Homepage demo integration; shared navigation remains unchanged. */
.attio-hero:has(.ui-stage-frame){height:auto;padding-bottom:72px}
.attio-hero .hero-copy{height:auto;padding-top:64px}
.attio-hero .ui-stage-shell{position:relative;top:auto;left:auto;transform:none;width:min(var(--kuwork-container,1440px),calc(100% - var(--kuwork-container-gutter,48px)));height:auto;margin:40px auto 0;scroll-margin-top:110px}
.attio-hero .ui-stage-frame{display:block;width:100%;height:calc(62.5cqw + 9.25px);aspect-ratio:auto;border:0;background:transparent;pointer-events:none}
@media(max-width:1100px){
 .attio-hero .ui-stage-shell{width:calc(100% - 40px);margin-top:40px}
}
@media(max-width:600px){
 .attio-hero:has(.ui-stage-frame){padding-bottom:48px}
 .attio-hero .ui-stage-shell{width:100%;margin-top:28px}
}

/* Cast the window shadow outside the iframe so its rectangular viewport cannot clip it. */
.attio-hero .ui-stage-shell{isolation:isolate;container-type:inline-size}
.attio-hero .ui-stage-shell::before{content:"";position:absolute;inset:14px;z-index:-1;border-radius:20px;pointer-events:none;box-shadow:0 30px 80px rgba(15,17,21,.08),0 8px 24px rgba(15,17,21,.04)}
/* Match the scaled 1562 × 976.25 stage plus mat padding before JS reports its size. */
@media(max-width:700px){
 .attio-hero .ui-stage-frame{height:calc(62.5cqw + 1.75px)}
 .attio-hero .ui-stage-shell::before{inset:4px;border-radius:clamp(5px,1.5vw,10px);box-shadow:0 8px 22px rgba(15,17,21,.08),0 2px 6px rgba(15,17,21,.04)}
}

@media(min-width:1600px){.attio-hero .ui-stage-shell{width:min(1440px,calc(100% - 48px))}}

/* Tighten the hero rhythm without changing its title, buttons, or shared navigation. */
.attio-hero #attio-hero-title{margin-top:24px}
.attio-hero .hero-copy>p{margin-top:24px!important}
.attio-hero .hero-actions{margin-top:24px}
@media(max-width:640px){
 .attio-hero .hero-copy{padding-top:40px}
 .attio-hero #attio-hero-title{margin-top:24px}
 .attio-hero .hero-copy>p{margin-top:20px!important}
}