/* Source layout with Kelly’s supplied October 23 video renders. */
:root{--ld-motion-ease:cubic-bezier(.75,0,.25,1);--ld-scene-surface:#f7f7f7;--ld-scene-ink:#000;--ld-scene-muted:#a4a4a4}
body{font-feature-settings:"ss02" 1}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lucid-motion{position:relative;overflow:hidden;isolation:isolate;background:var(--ld-scene-surface);color:var(--ld-scene-ink);border-radius:48px;container-type:inline-size;width:100%;aspect-ratio:2/1}
.imessage-motion{aspect-ratio:1/1;height:100%;border-radius:40px}
.motion-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.motion-toggle{position:absolute;bottom:20px;right:20px;z-index:3;border:1px solid #00000006;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#ffffffc9;color:#555;cursor:pointer;font-size:16px;backdrop-filter:blur(12px);transition:transform .2s}
.motion-toggle:hover{transform:scale(1.05)}
.motion-toggle:active{transform:scale(.9)}
.motion-toggle[hidden]{display:none}
.motion-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#00000003}
.motion-progress i{display:block;width:100%;height:100%;transform-origin:left;background:#00000020}
.motion-still .motion-progress{display:none}
/* Keep the source inline grid: all rotating phrases share one clipped row. */
@media(max-width:700px){
 .lucid-motion{aspect-ratio:1/1;border-radius:24px}
 .motion-toggle{bottom:12px;right:12px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .tx3 .rot{height:auto!important;display:flex!important;flex-direction:column}
 .tx3 .rot b{position:static!important;opacity:1!important;transform:none!important;filter:none!important}
}

/* Keep supplied identities intact; match the neighboring muted gray marks. */
.logo-poke{filter:grayscale(1);opacity:.5}
.logo-dots{filter:brightness(0);opacity:.5}

/* Provider colors shared by waitlist and login; Google remains first. */
.modal .sso[data-sso="Google"]{background:#fff!important;color:#000!important;border:1px solid #fff!important}
.modal .sso[data-sso="Google"]:hover{background:#fafafa!important}
.modal .sso[data-sso="Apple"]{background:#000!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important}
.modal .sso[data-sso="Apple"]:hover{background:#222!important}

/* One landing-page composition across desktop and mobile; no cloned phone scenes. */
.mobile-hero-caption{display:none}
@media(max-width:700px){
 .mobile-hero-caption{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-top:0}
 .mobile-hero-caption h2{margin:0}
 .mobile-hero-caption p{margin:0;max-width:320px;font-size:18px;line-height:1.3;color:var(--text-tertiary)}
 html body #hero #facts{display:flex!important;position:relative;width:calc(100% - 32px)!important;max-width:400px;height:auto!important;padding:8px!important;margin-top:16px;left:auto;bottom:auto;transform:none;opacity:1;visibility:visible}
 html body #hero #facts .fact{flex:1 1 0!important;min-width:0;width:auto!important;padding:16px 8px!important;gap:8px!important}
 html body #hero #facts .fact:nth-child(n+3){display:none!important}
 html body #hero #facts .fact b{display:block!important;font-size:clamp(18px,5.6vw,22px)!important}
 html body #hero #facts .fact small{display:block!important;font-size:12px!important;white-space:normal}
 html body #hero #facts .fact+.fact{background-size:1px 48px!important}
 .agents-sec>.fit{display:none!important}
}

@media(max-width:700px){
 html body #hero #facts{width:100%!important}
 html body #hero #facts .fact small{white-space:nowrap;font-size:clamp(9px,2.8vw,11px)!important}
 #nav.nav:not(.pill) .nav-actions .btn-login{display:flex!important;opacity:1;pointer-events:auto}
 #nav.nav.pill .nav-actions .btn-login{display:none!important}
 #nav.nav.pill .nav-actions .btn-early:not(.btn-login){padding:0 18px!important;width:auto!important}

}

/* Mobile typography uses the agent section's 34px heading / 18px body rhythm. */
@media(max-width:700px){
 .mobile-hero-caption h2,.steps-sec h2,.chat-sec h2,.agents-sec h2,.bcopy h2{
  font-size:34px!important;line-height:1.1!important;letter-spacing:-.34px!important;font-weight:500;text-wrap:balance;
 }
 .mobile-hero-caption p,.steps-sec .heading-m,.chat-sec .heading-m,.agents-sec .heading-m,.bcopy .heading-m,.cta .heading-m{
  font-size:18px!important;line-height:1.35!important;letter-spacing:0!important;text-wrap:balance;
 }
 /* The old floating-facts fade otherwise washes out the bottom of every mobile section. */
 #factsfade{display:none!important}
 /* Keep benefit copy at actual screen size, outside the desktop canvas scale. */
 #benefits{height:auto;padding:64px 16px;overflow:hidden}
 #benefits .bens-in{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;display:grid;gap:16px}
 #benefits .bcopy{position:relative;left:auto!important;top:auto!important;zoom:1!important;width:100%;gap:16px;margin-bottom:24px}
 #benefits .bcopy>*{opacity:1;transform:none}
 #benefits .bglow{display:none}
 #benefits .bcard{position:relative;left:auto!important;top:auto!important;width:100%!important;height:auto;aspect-ratio:504/480;border-radius:24px}
 #benefits .bcard:nth-of-type(3),#benefits .bcard:last-child{aspect-ratio:752/480}
 /* Full photos and their embedded captions remain intact in a swipeable rail. */
 #humans{height:auto;padding:32px 0 48px;overflow:hidden}
 #humans .sph-comp{position:relative;left:auto;top:auto;width:100%;height:auto!important;transform:none;display:flex;align-items:center;gap:16px;padding:24px 16px 40px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;pointer-events:auto}
 #humans .sph-comp::-webkit-scrollbar{display:none}
 #humans .st-card{position:relative;left:auto!important;top:auto!important;width:min(78vw,320px)!important;height:auto!important;flex:0 0 min(78vw,320px);opacity:1;scale:1;translate:none!important;scroll-snap-align:center;transition:none}
 #humans .st-card:last-child{order:-1}
 #humans .st-card.bl{display:none}
 #humans .st-card img{width:100%;height:auto;border-radius:24px;animation:none;filter:none}
 #humans .stg{filter:blur(20px);opacity:.25;animation:none}
 /* Restore “Hey [icon],” and reserve room for every complete typed prompt. */
 .cta .hl{width:100%;gap:8px;min-height:224px;justify-content:flex-start}
 .cta .l1{display:grid!important;grid-template-columns:auto 48px auto;justify-content:center;align-items:center;gap:16px 8px!important;width:100%}
 .cta .l1>span:first-child,.cta .l1 .cm{display:block!important;margin:0!important}
 .cta .l1 .miniicon{width:48px;height:48px;padding:0!important;margin:0!important;zoom:1!important;transform:none!important;scale:1!important;opacity:1!important}
 .cta .miniicon .ic{position:absolute;left:0;top:0;transform:scale(.6);transform-origin:0 0;animation:none}
 .cta .miniicon .gl{width:64px;height:64px;left:-8px;top:-8px;filter:blur(16px);border-radius:50%}
 .cta .l1 .ca{grid-column:1/-1;margin:0!important;min-height:1.15em}
 .cta .l1 .ca::first-letter{text-transform:none}
 .cta .d2xl{font-size:clamp(28px,8vw,34px)!important;line-height:1.15!important;white-space:normal}
 .cta .l2{width:100%;min-height:2.3em;white-space:normal;overflow-wrap:normal;text-wrap:balance}
 .cta .caret.c1{display:none!important}
 .cta .hl.t1 .l2 .caret{visibility:visible}
 .cta .inner{width:100%;gap:24px!important}
}