/* The family story uses the existing rails, type and blue surfaces. */
:root{--section-paper:linear-gradient(180deg,#DCEBFA 0%,#EFF6FD 46%,#FFFFFF 100%)}
.product-stage::before{background:linear-gradient(180deg,#76ABE9 0%,#B8D6F7 40%,#EAF3FD 72%,#FFFFFF 100%)}
.hero-atmosphere{mask-image:linear-gradient(#000 55%,transparent 100%)}
.product-stage{isolation:auto;container-type:normal}
.product-stage::before,.product-stage::after,.hero-atmosphere{z-index:0}
.hero-intro{width:min(440px,calc(100% - 56px));background:#FFF}
.hero-intro h1{width:fit-content;max-width:100%;font-family:"Geist",Arial,sans-serif}
.hero-intro h1 span{white-space:normal}
.office-copy{max-width:48%}
@media(min-width:1201px){.hero-intro{width:calc(440 * var(--layout-unit));max-width:calc(100% - 56px)}.hero-intro h1{font-size:calc(36 * var(--layout-unit))}}
@media(max-width:680px){
 .hero-intro{width:calc(100% - 40px)}
 .hero-intro h1{font-size:clamp(25px,6.7vw,38px);padding:13px 15px}
 .hero-waitlist{font-size:17px;gap:12px;padding:17px 21px;min-height:56px}
 .office-copy{max-width:calc(100% - 48px)}
}
@media(max-width:380px){.nav-login{font-size:10px;padding-inline:7px}body:has(.nav-login) .nav-cta{font-size:10px;padding-inline:7px}.hero-intro h1{font-size:22px}.hero-waitlist{font-size:15px;padding-inline:18px}}

/* Larger orbit features and descriptions, without the former heading tile. */
.workflow-panel .feature-icon{width:calc(108 * var(--layout-unit));height:calc(108 * var(--layout-unit))}
.workflow-panel .feature-icon canvas{width:calc(96 * var(--layout-unit));height:calc(96 * var(--layout-unit))}
.workflow-panel .feature-detail{left:50%;bottom:24px;width:min(calc(100% - 48px),calc(560 * var(--layout-unit)));max-width:none;transform:translate(-50%,14px) scale(.97);padding:calc(21.6 * var(--layout-unit)) calc(24 * var(--layout-unit))}
.workflow-panel .feature-detail[data-open="true"]{transform:translateX(-50%)}
.workflow-panel .feature-detail strong{font-size:calc(19.2 * var(--layout-unit))}
.workflow-panel .feature-detail p{font-size:calc(15.6 * var(--layout-unit))}
@media(max-width:1100px){
 .workflow-panel .feature-icon{width:108px;height:108px}
 .workflow-panel .feature-icon canvas{width:96px;height:96px}
 .workflow-panel .feature-detail{width:min(calc(100% - 48px),560px);padding:16px 19px}
 .workflow-panel .feature-detail strong{font-size:19.2px}
 .workflow-panel .feature-detail p{font-size:14.4px}
}
@media(max-width:680px){
 .workflow-panel .feature-icon{width:96px;height:96px}
 .workflow-panel .feature-icon canvas{width:67.2px;height:67.2px}
 .workflow-panel{height:clamp(560px,104vw,640px);min-height:0;aspect-ratio:auto}
 .workflow-panel .work-scene{top:12px;bottom:170px}
}

@media(min-width:681px) and (max-width:1200px){.workflow-panel .work-scene{top:calc(32px + 8vw);bottom:calc(208px + 2vw)}}

/* Match the feature heading to the playroom heading at every width. */
:root{--family-heading-size:clamp(1.65rem,2.7vw,2.8rem)}
.office-copy,.family-features h2{font-size:var(--family-heading-size)}
@media(min-width:1201px){:root{--family-heading-size:calc(44.8 * var(--layout-unit))}}
@media(max-width:680px){:root{--family-heading-size:1.7rem}}
.family-system{position:relative;isolation:isolate}
.family-system::before{content:"";position:absolute;z-index:-1;inset:0 var(--grid-margin);background:var(--section-paper);pointer-events:none}
.family-system .family-features,.family-system .engineering,.family-system .eng-stage{background:transparent}