/* A spacious promise, scattered origins and a clear closing moment. */
html[data-theme=dark] .site-header .brand{color:var(--color-ink)}
.nav-actions{gap:22px}.nav-stores{gap:10px}.site-header .nav-stores a{width:auto;height:44px;min-height:44px;padding:0;background:transparent;border-radius:5px;display:flex;align-items:center}.site-header .nav-stores a:hover{background:transparent}.site-header .nav-stores img{height:40px;width:auto;max-width:none}.site-header .brand{min-height:44px}
.hero-copy{padding-top:28px}.hero-copy>p{font-size:17px;line-height:1.75;margin-top:26px;max-width:44ch}.source-map{margin-top:28px;height:calc(100% - 28px)}.source-field .source{transform:translate(var(--source-dx),var(--source-dy)) rotate(var(--source-turn)) scale(var(--source-scale));transform-origin:center}.source-bamboohr .source-mark img{border-radius:5px}.flow-label{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.flow-label small{font-size:11px;line-height:1.4;font-weight:500;color:var(--color-ink-2)}.source-map .flow-connector{gap:10px}.journey-lines{opacity:1}.journey-lines .source-route{stroke-width:.85;opacity:.1;animation:route-breathe 18s ease-in-out infinite}.journey-lines .source-route-token{stroke:var(--color-accent);stroke-width:1.15;stroke-dasharray:8 650;opacity:.25;animation:quiet-stream 11s linear infinite}.journey-lines .main-route{stroke-width:1.2;opacity:.5}html{--route-rest:.025;--route-peak:.19}html[data-theme=dark]{--route-rest:.055;--route-peak:.32}
@keyframes route-breathe{0%,42%,100%{opacity:var(--route-rest)}12%,27%{opacity:var(--route-peak)}}@keyframes quiet-stream{from{stroke-dashoffset:658}to{stroke-dashoffset:0}}
.motion-paused .source-route,.offscreen .source-route,.sources-offscreen .source-route,.motion-paused .source-route-token,.offscreen .source-route-token,.sources-offscreen .source-route-token{animation-play-state:paused}
.features{background:var(--color-white)}.desktop-section{background:var(--color-paper)}.collection-section{background:var(--color-white)}.privacy-section{background:var(--color-paper-2)}.download{background:#233342;color:#e6edf3;padding:86px 0}.download h2{color:#f7f9fa}.download h2 span{color:#9ce2d0}.download-layout{gap:34px}html[data-theme=dark] .download{background:#0b151c}html[data-theme=dark] .download h2{color:#e6edf3}html[data-theme=dark] .download h2 span{color:#7bd7c2}
@media(min-width:961px) and (max-height:720px){.hero-copy{padding-top:8px}.hero-copy h1{font-size:clamp(32px,7cqw,48px)}.hero-copy>p{font-size:15px;line-height:1.65;margin-top:18px}.source-map{margin-top:22px;height:calc(100% - 22px)}.source-field .source{transform:translate(var(--source-dxm),var(--source-dym)) rotate(var(--source-turn)) scale(var(--source-scale))}}
@media(max-width:1100px) and (min-width:761px){.nav-actions{gap:14px}.nav-stores{gap:8px}.site-header .nav-stores img{height:37px}}
@media(max-width:960px){.hero-copy{padding-top:16px}.hero-copy>p{font-size:17px;line-height:1.75;margin-top:24px}.source-map{height:434px;min-height:434px;margin-top:32px}.source-field{height:320px}.source-field .source{transform:translate(var(--source-dxm),var(--source-dym)) rotate(var(--source-turn)) scale(var(--source-scale))}.source-map .flow-connector{top:366px}.download{padding:70px 0}}
@media(max-width:760px){:root{--header-height:124px}.site-header .nav{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto 44px;grid-template-areas:"brand how theme" "stores stores stores";gap:10px 12px;padding-block:12px}.site-header .brand{grid-area:brand;justify-content:flex-start;width:auto}.nav-actions{display:contents}.nav-how{grid-area:how;font-size:12px;white-space:nowrap}.theme-toggle{grid-area:theme;width:44px;height:44px;padding:12px}.nav-stores{grid-area:stores;justify-content:center;gap:12px;width:100%}.site-header .nav-stores img{height:40px}.source-map{height:470px;min-height:470px;margin-top:32px}.source-field{height:352px;gap:10px 8px}.source-map .flow-connector{top:402px}.hero-copy>p{font-size:16px;line-height:1.75;margin-top:24px}.download{padding:64px 0}.download-layout{gap:28px}}
@media(max-width:420px){.hero-copy{padding-top:12px}.source-field .source{font-size:11px}.source-map{margin-top:30px}.source-field{gap:10px 6px}}
@media(max-width:360px){.site-header .nav{grid-template-columns:minmax(0,1fr) auto 40px;column-gap:9px}.site-header .brand{font-size:18px}.nav-how{font-size:11px}.theme-toggle{width:40px}.source-field .source-mark{width:36px;height:36px}.source-field .source{font-size:11px}.source-map .flow-connector{font-size:13px}.hero-copy>p{font-size:15px;line-height:1.75}.source-field{gap:10px 4px}}

/* One audience statement; ongoing sync belongs to the source illustration. */
.hero-copy>p{max-width:51ch;margin-top:24px;font-size:16px;line-height:1.7}


.journey-lines .sync-track{stroke-width:1;opacity:.24}
.journey-lines .sync-route{stroke:var(--color-accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 96;opacity:.8;animation:sync-stream 5.6s linear infinite}

@keyframes sync-stream{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes sync-turn{0%,15%{transform:rotate(0)}40%,65%{transform:rotate(180deg)}90%,100%{transform:rotate(360deg)}}
.motion-paused .sync-route,.offscreen .sync-route,.sources-offscreen .sync-route{animation-play-state:paused}
@media(min-width:961px) and (max-height:720px){.hero-copy>p{font-size:15px;line-height:1.65;margin-top:20px}}
@media(max-width:960px){.hero-copy>p{max-width:48ch;margin-top:22px;font-size:16px;line-height:1.75}.hero-device{padding-top:24px}}
@media(max-width:360px){.hero-copy>p{font-size:15px}}

/* Milestones and a ready document packet, with a shared optical size. */
.feature-chapters .icon{width:27px;height:27px;stroke-width:1.65}
@media(max-width:760px){.feature-chapters .icon{width:25px;height:25px}}
@media(max-width:360px){.source-map .flow-connector{width:max-content;max-width:calc(100% - 24px);padding-inline:14px}.flow-connector>img,.flow-connector>.icon{flex-shrink:0}}

/* The laptop has one centered introduction, followed by a private-first choice. */
.desktop-heading{display:block;text-align:center}.desktop-heading>div{width:100%;margin-inline:auto}.desktop-heading p{max-width:44ch;margin-inline:auto}
/* Sync belongs to the collection hub and the complete source-to-device flow. */
.source-map .flow-connector>.package-sync{width:20px;height:20px;flex-shrink:0;animation:sync-turn 12s linear infinite;translate:none;stroke-width:1.7}.flow-connector:hover>.package-sync{translate:none}
.motion-paused .package-sync,.offscreen .package-sync,.sources-offscreen .package-sync{animation-play-state:paused}
.hero-layout:is(.motion-paused,.sources-offscreen) .flow-connector>.package-sync{animation-play-state:paused}
@media(min-width:961px){.hero-layout.offscreen .flow-connector,.hero-layout.offscreen .flow-connector:before,.hero-layout.offscreen .flow-connector>.package-sync{animation-play-state:paused}}
@media(min-width:961px){.source-map{margin-top:44px;height:calc(100% - 44px)}}
@media(min-width:961px) and (max-height:720px){.source-map{margin-top:32px;height:calc(100% - 32px)}}
@media(max-width:960px){.source-map .flow-connector{width:max-content;max-width:calc(100% - 24px);padding-inline:16px}.flow-connector>img,.flow-connector>.icon{flex-shrink:0}.source-map .flow-connector>.package-sync{width:16px;height:16px;margin-inline:2px;stroke-width:1.8;transform-box:view-box;transform-origin:50% 50%}}

/* Device sync is a shared laptop action in Home and Connections. */
.desktop-titlebar>.desktop-phone-sync{gap:7px;min-height:44px;padding:8px 10px;font-size:12px;white-space:nowrap;flex-shrink:0}.desktop-phone-sync>.icon:last-child{width:15px;height:15px}
@media(max-width:760px){.desktop-titlebar{flex-wrap:nowrap;gap:10px}.desktop-titlebar>.desktop-phone-sync{font-size:11px;padding:7px 8px;gap:6px}}
@media(max-width:420px){.desktop-phone-sync>span{display:none}.desktop-titlebar>.desktop-phone-sync{width:46px;justify-content:center;padding:7px 4px;gap:4px}.desktop-phone-sync>.icon:first-child{width:17px;height:17px}.desktop-phone-sync>.icon:last-child{width:13px;height:13px}}

/* One prompt, one guide, then an inline handoff to the browser app. */
.prompt-workspace [hidden],#prompt-editor[hidden]{display:none!important}.ai-sharing-policy{font-size:12px;line-height:1.75;color:var(--color-ink-2);margin-top:23px;padding-top:18px;border-top:1px solid var(--color-rule);max-width:66ch}.ai-sharing-policy strong{font-weight:600;color:var(--color-ink)}
.assistant-handoff{min-height:290px;padding:12px 0 5px;outline:none}.handoff-destination{display:flex;align-items:center;gap:16px;margin-bottom:24px}.handoff-destination>img{width:38px;height:38px;object-fit:contain}.assistant-handoff h3{font-size:27px;line-height:1.3;font-weight:650;letter-spacing:-.025em;margin:0}.handoff-destination span{display:block;margin-top:5px;font-size:12px;color:var(--color-ink-2)}.assistant-handoff>p{font-size:16px;line-height:1.7;max-width:40ch;color:var(--color-ink-2)}.handoff-progress{height:2px;background:var(--color-rule);margin:26px 0;overflow:hidden}.handoff-progress i{height:100%;display:block;background:var(--color-accent);transform-origin:left;animation:handoff-countdown 3.5s linear forwards}.handoff-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.handoff-actions>a,.handoff-actions>button,#handoff-copy{display:inline-flex;align-items:center;min-height:44px;border:0;border-radius:0;background:transparent;font-size:14px;color:var(--color-accent);padding:6px 0;text-underline-offset:4px}.handoff-actions>button{color:var(--color-ink-2)}#handoff-fallback{margin:20px 0}#handoff-fallback label{display:block;font-size:13px;margin-bottom:10px}#handoff-fallback textarea{resize:none}.assistant-handoff:focus-visible{outline:2px solid var(--color-focus);outline-offset:8px;border-radius:5px}@keyframes handoff-countdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Original site's bottom-left Analytics Cookies banner. */
.cookie-settings.analytics-banner{position:fixed;z-index:100;bottom:16px;left:16px;transform:none;width:min(calc(100% - 32px),400px);max-height:45vh;overflow:auto;padding:16px;border:1px solid var(--color-rule);border-radius:18px;background:var(--color-white);box-shadow:0 3px 16px var(--color-shadow);display:block;color:var(--color-ink)}.analytics-banner>div>strong{font-size:14px;font-weight:700;line-height:1.6}.cookie-settings.analytics-banner p{margin-top:3px;font-size:14px;color:var(--color-ink-2);line-height:1.6}.cookie-settings.analytics-banner a{display:inline;min-height:0;font-size:inherit;color:var(--color-accent)}.analytics-banner .analytics-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;gap:10px}.cookie-settings.analytics-banner button{min-height:48px;padding:10px 14px;border:1px solid var(--color-rule);border-radius:18px;background:var(--color-paper-2);color:var(--color-ink);font:inherit;font-size:14px}.cookie-settings.analytics-banner button:hover{background:var(--color-paper-3)}
@media(max-width:760px){.prompt-workspace{margin-top:28px}.assistant-handoff{min-height:270px}.assistant-handoff h3{font-size:23px}.handoff-destination{gap:13px}.handoff-destination>img{width:34px;height:34px}.assistant-handoff>p{font-size:15px}.ai-sharing-policy{font-size:12px}}
@media(prefers-reduced-motion:reduce){.handoff-progress{display:none}}
.cookie-settings.analytics-banner[hidden]{display:none}

.features{position:relative}.legacy-anchor{position:absolute;top:0;left:0}

/* A single gathering funnel on phones; desktop paths remain gently visible. */
@media(min-width:961px){
 html{--route-rest:.14;--route-peak:.32}
 html[data-theme=dark]{--route-rest:.22;--route-peak:.46;--color-route:#6f9d94}
 .journey-lines .source-route{stroke-width:1.05}
 .journey-lines .source-route-token{opacity:.42}
}
@media(max-width:960px){
 .source-map{--funnel-mouth:165px;height:calc(var(--funnel-mouth) + 251px);min-height:0;max-height:none;margin-top:20px}
 .source-field{display:block;position:relative;width:min(100%,380px);height:calc(var(--funnel-mouth) - 25px);margin-inline:auto;padding:0;container-type:inline-size}
 .source-field .source{position:absolute;left:calc(var(--funnel-x)*1%);top:var(--funnel-y);width:46px;max-width:none;gap:0;transform:translate(-50%,-50%) rotate(var(--source-turn)) scale(var(--source-scale))}
 .source-field .source-mark{width:43px;height:43px;padding:9px;border-radius:12px;box-shadow:0 5px 14px #23334210}
 .source-field .source-mark img,.source-field .source-mark .icon{width:27px;height:27px}
 .source-field .source>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .source-field .source:nth-child(1){--funnel-x:12;--funnel-y:25px}
 .source-field .source:nth-child(2){--funnel-x:30;--funnel-y:31px}
 .source-field .source:nth-child(3){--funnel-x:50;--funnel-y:20px}
 .source-field .source:nth-child(4){--funnel-x:70;--funnel-y:30px}
 .source-field .source:nth-child(5){--funnel-x:88;--funnel-y:24px}
 .source-field .source:nth-child(6){--funnel-x:10;--funnel-y:70px}
 .source-field .source:nth-child(7){--funnel-x:29;--funnel-y:76px}
 .source-field .source:nth-child(8){--funnel-x:49;--funnel-y:64px}
 .source-field .source:nth-child(9){--funnel-x:69;--funnel-y:75px}
 .source-field .source:nth-child(10){--funnel-x:89;--funnel-y:68px}
 .source-field .source:nth-child(11){--funnel-x:12;--funnel-y:117px}
 .source-field .source:nth-child(12){--funnel-x:31;--funnel-y:124px}
 .source-field .source:nth-child(13){--funnel-x:50;--funnel-y:111px}
 .source-field .source:nth-child(14){--funnel-x:70;--funnel-y:121px}
 .source-field .source:nth-child(15){--funnel-x:88;--funnel-y:115px}
 .source-map .flow-connector{top:calc(var(--funnel-mouth) + 183px);left:50%;right:auto;transform:translateX(-50%)}
 .journey-lines .funnel-body{fill:url(#funnel-surface);stroke:#80b3a6;stroke-width:1;stroke-linejoin:round}
 .funnel-shade-start{stop-color:#d1e9df}.funnel-shade-end{stop-color:#8abdab}
 .journey-lines .funnel-rim{fill:#e7f3ed;stroke:#83b4a5;stroke-width:1.2}
 .journey-lines .funnel-opening{fill:#b4d7c9;stroke:none}
 html[data-theme=dark] .funnel-shade-start{stop-color:#46786b}html[data-theme=dark] .funnel-shade-end{stop-color:#254e45}
 html[data-theme=dark] .journey-lines .funnel-body{stroke:#5f9d89}
 html[data-theme=dark] .journey-lines .funnel-rim{fill:#83b7a3;stroke:#a4d4bf}
 html[data-theme=dark] .journey-lines .funnel-opening{fill:#2e574a}
 .journey-lines .funnel-throat{stroke:var(--color-accent);stroke-width:1.3;opacity:.3}
 .journey-lines .funnel-flow{stroke:var(--color-accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:12 88;animation:sync-stream 3.8s linear infinite;opacity:.65}
 .motion-paused .funnel-flow,.sources-offscreen .funnel-flow{animation-play-state:paused}
}
@media(max-width:360px){.source-field .source-mark{width:36px;height:36px;padding:7px;border-radius:10px}.source-field .source-mark img,.source-field .source-mark .icon{width:23px;height:23px}.source-field .source{width:39px}}

html:not([data-theme=dark]) .desktop-sidebar>p{color:#596b77}

/* Phone visitors use browser AI apps; installed desktop editors stay on larger screens. */
@media(max-width:960px){.prompt-tools [data-assistant=codex],.prompt-tools [data-assistant=cursor]{display:none}.prompt-tools{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.prompt-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Independent sources travel through the full funnel, scaling only after entry. */
@media(max-width:960px){
 .source-field{clip-path:polygon(0 -40px,100% -40px,100% var(--funnel-mouth),calc(100% - 28px) var(--funnel-mouth),calc(50% + 16px) calc(var(--funnel-mouth) + 130px),calc(50% + 16px) calc(var(--funnel-mouth) + 150px),calc(50% + 10px) calc(var(--funnel-mouth) + 154px),calc(50% - 10px) calc(var(--funnel-mouth) + 154px),calc(50% - 16px) calc(var(--funnel-mouth) + 150px),calc(50% - 16px) calc(var(--funnel-mouth) + 130px),28px var(--funnel-mouth),0 var(--funnel-mouth))}
 .source-field.paths-ready .source{left:0;top:0;transform:none;translate:none;offset-path:var(--feed-path);offset-anchor:center;offset-rotate:0deg;rotate:none;scale:none;animation:source-travel var(--feed-duration) linear infinite,source-fade var(--feed-duration) linear infinite;animation-delay:var(--feed-delay),var(--feed-delay)}
 .source-field.paths-ready .source-mark{rotate:var(--source-turn);scale:var(--source-scale);animation:var(--feed-depth-animation) var(--feed-duration) linear infinite;animation-delay:var(--feed-delay)}
 .source-field .source-more{display:none}
 .source:nth-child(1){--feed-depth-animation:source-depth-far}
 .source:nth-child(2){--feed-depth-animation:source-depth-far}
 .source:nth-child(3){--feed-depth-animation:source-depth-far}
 .source:nth-child(4){--feed-depth-animation:source-depth-far}
 .source:nth-child(5){--feed-depth-animation:source-depth-far}
 .source:nth-child(6){--feed-depth-animation:source-depth-middle}
 .source:nth-child(7){--feed-depth-animation:source-depth-middle}
 .source:nth-child(8){--feed-depth-animation:source-depth-middle}
 .source:nth-child(9){--feed-depth-animation:source-depth-middle}
 .source:nth-child(10){--feed-depth-animation:source-depth-middle}
 .source:nth-child(11){--feed-depth-animation:source-depth-near}
 .source:nth-child(12){--feed-depth-animation:source-depth-near}
 .source:nth-child(13){--feed-depth-animation:source-depth-near}
 .source:nth-child(14){--feed-depth-animation:source-depth-near}
 .source:nth-child(15){--feed-depth-animation:source-depth-near}
 .motion-paused .source-field :is(.source,.source-mark),.sources-offscreen .source-field :is(.source,.source-mark){animation-play-state:paused}
}
@keyframes source-travel{
 from{offset-distance:0%}
 to{offset-distance:100%}
}
@keyframes source-fade{0%,98%,100%{opacity:0}6%,86%{opacity:1}}
@keyframes source-depth-far{
 0%,52%{scale:var(--source-scale);rotate:var(--source-turn)}
 100%{scale:calc(var(--source-scale)*.18);rotate:var(--source-turn)}
}
@keyframes source-depth-middle{
 0%,42%{scale:var(--source-scale);rotate:var(--source-turn)}
 100%{scale:calc(var(--source-scale)*.18);rotate:var(--source-turn)}
}
@keyframes source-depth-near{
 0%,26%{scale:var(--source-scale);rotate:var(--source-turn)}
 100%{scale:calc(var(--source-scale)*.18);rotate:var(--source-turn)}
}

/* A shorter outcome keeps the phone headline compact. */
.hero-copy h1 .hero-answer-phone{display:none}
@media(max-width:960px){.hero-copy h1 .hero-answer-wide{display:none}.hero-copy h1 .hero-answer-phone{display:block}}

/* Two complete phrases, sized to the available phone content width. */
.hero-copy h1 .hero-line{display:inline;color:inherit}
@media(max-width:960px){
 .hero-copy h1{font-size:clamp(18px,8.2cqw,46px);line-height:1.15}
 .hero-copy h1 .hero-lead,.hero-copy h1 .hero-answer-phone{font-size:inherit;white-space:nowrap}
 .hero-copy h1 .hero-answer-phone{margin-top:4px}
 html[lang=es] .hero-copy h1{font-size:clamp(17px,7cqw,42px)}
}
.handoff-timer{margin-top:18px}.handoff-timer>span{font-size:13px;color:var(--color-ink-2);font-variant-numeric:tabular-nums}.handoff-timer .handoff-progress{margin:12px 0 20px}.handoff-timer[hidden]{display:none}.handoff-progress i{animation:none;transform:scaleX(var(--handoff-progress,0))}

/* Mobile media controls have their own layout space below the physical phone. */
.phone.playback-blocked .film-still{display:block}
@media(max-width:960px){.hero-device,.feature-device{flex-direction:column;align-items:center;justify-content:center;gap:32px;padding-bottom:24px}.hero-device .phone,.feature-device .phone{flex:none}.hero-device .film-control,.feature-device .film-control{position:static;transform:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;margin:0;border:1px solid var(--color-route);border-radius:9px;background:var(--color-white);color:var(--color-accent);font-size:14px;line-height:1.3;flex:none}.film-control .icon{width:18px;height:18px}}

/* Demo controls stay available with every OS motion setting. */
.film-control{display:inline-flex;align-items:center;justify-content:center}

html[data-theme=dark] #handoff-logo:is([src$="/chatgpt.svg"],[src$="/grok.svg"]){filter:invert(1)}

/* Progress stays within its own paint area without changing the tabs' layout. */
.chapter-track i{width:100%;transform:scaleX(var(--chapter-ratio,0));transform-origin:left;transition:none}

/* These silent demonstrations use the external control, including on iPhone. */
.product-film{pointer-events:none}
.product-film::-webkit-media-controls,.product-film::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
