/* V8: scoped additions; the established hero, orbit and pricing layout stay intact. */
/* V9: pricing-only reflective treatment. */
.pricing-section .plan{isolation:isolate;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s}
.pricing-section .plan>*{position:relative;z-index:1}
.pricing-section .plan:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff08 39%,#ffffffad 46%,#d9e3e74d 49%,#ffffffd9 51%,transparent 61%);background-size:300% 100%;background-position:100% 0;opacity:0;animation:plan-reflection 2.7s ease-in-out infinite;animation-play-state:paused}
.pricing-section .plan:after{inset:0;padding:2px;z-index:2;background:conic-gradient(from var(--edge-angle),transparent 0deg 235deg,var(--edge-color) 290deg,#fff 317deg,var(--edge-color) 331deg,transparent 350deg)}
.pricing-section .plan:focus-within{transform:translateY(-8px) scale(1.018);box-shadow:0 24px 38px -25px #26332666;background:#fafbf8;z-index:2}
.pricing-section .plan:focus-within:before{opacity:.85;animation-play-state:running}
@media(hover:hover) and (pointer:fine){.pricing-section .plan:hover{transform:translateY(-8px) scale(1.018);box-shadow:0 24px 38px -25px #26332666;background:#fafbf8;z-index:2}.pricing-section .plan:hover:before{opacity:.85;animation-play-state:running}}
@keyframes plan-reflection{0%,15%{background-position:100% 0}80%,100%{background-position:0% 0}}
.motion-paused .pricing-section .plan:before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pricing-section .plan{transition:none}.pricing-section .plan:hover,.pricing-section .plan:focus-within{transform:none}.pricing-section .plan:before{animation:none; background-position:50% 0;opacity:.25}}
.apps-note{max-width:690px;margin:22px auto 0;padding-inline:24px;color:#555e50}
.polish-heading{max-width:810px;margin-bottom:56px}
.polish-heading h2{font-size:clamp(40px,5vw,66px);line-height:1.05;letter-spacing:-.05em;margin:16px 0 22px}
.polish-heading>p{font-size:20px;line-height:1.5;color:#62695e}
.state-tag{display:inline-block;font-size:10px;letter-spacing:.14em;font-weight:650;color:#66755b;white-space:nowrap}
.team-story{text-align:center;padding:20px 0 0}
.goal-node{max-width:550px;margin:auto}
.goal-node>span{display:inline-block;border:1px solid #c9d2c2;border-radius:30px;padding:8px 23px;font-size:12px;font-weight:650;letter-spacing:.1em}
.goal-node p{font-size:clamp(20px,2.3vw,29px);line-height:1.35;letter-spacing:-.025em;margin:22px 0}
.flow-stem{position:relative;width:1px;height:65px;background:#d2d7cc;margin:0 auto;overflow:hidden}
.flow-stem:after{content:'';position:absolute;inset:-30px 0 auto;height:30px;background:linear-gradient(transparent,#89b86c,transparent);animation:stem-travel 3s linear infinite}
.coordinator{display:flex;align-items:center;flex-direction:column;gap:13px}
.coordinator img{width:110px;height:114px;object-fit:contain;filter:drop-shadow(0 10px 12px #22331912)}
.coordinator strong{font-size:17px;letter-spacing:-.04em}
.branch-lines{height:90px;margin-top:22px}
.branch-lines svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#d2d7cc;stroke-width:1;vector-effect:non-scaling-stroke}
.branch-lines .flow-energy{stroke:#81ad68;stroke-width:1.5;stroke-dasharray:5 95;animation:flow-travel 5s linear infinite}
.team-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.branch-logos{height:54px;display:flex;gap:17px;justify-content:center;align-items:center}
.branch-logos img{width:32px;height:32px;object-fit:contain}
.team-branches h3{font-size:28px;font-weight:650;letter-spacing:-.04em;margin:16px 0 12px}
.team-branches p{font-size:17px;line-height:1.5}
.team-branches small{display:block;color:#666a62;font-size:12px;margin-top:7px}
.workflow-result{position:relative;max-width:700px;margin:72px auto 0;padding-top:36px;border-top:1px solid #d5dccf}
.workflow-result:before{content:'';position:absolute;left:50%;top:-40px;height:40px;width:1px;background:#d5dccf}
.workflow-result h3{font-size:36px;letter-spacing:-.04em;margin:14px 0}
.workflow-result>p{font-size:18px;line-height:1.6;color:#60685a;max-width:560px;margin:auto}
.workflow-result>div{display:flex;justify-content:center;gap:24px;margin-top:24px;font-size:12px;color:#557044}
.workflow-result>div span:before{content:'✓';margin-right:6px}
.strategic-moment{padding-block:115px 135px}
.strategic-moment h2{font-size:clamp(37px,5.6vw,78px);line-height:1.13;letter-spacing:-.055em;margin:24px 0}
.strategic-moment h2 span{color:#748269}
.strategic-moment>p{font-size:20px;color:#62695e}
.context-scroll{height:170vh;position:relative}
.context-sticky{position:sticky;top:110px;min-height:560px;height:calc(100svh - 150px);max-height:760px;display:grid;grid-template-columns:.85fr 1.2fr;gap:60px;align-items:center}
.context-terms{position:relative;z-index:1}
.context-term{margin:0;padding:20px 0;opacity:.37;transition:opacity .45s,transform .55s;transform-origin:left center}
.context-term strong{font-size:clamp(24px,3vw,42px);font-weight:550;letter-spacing:-.04em;line-height:1.15;display:block}
.context-term span{display:block;font-size:15px;line-height:1.5;margin-top:12px;color:#60685a;max-width:290px}
.context-term.active{opacity:1;transform:translateX(8px)}
.context-term.active strong{color:#3f5f2f}
.context-images{position:relative;height:100%;max-height:580px;min-height:440px;overflow:hidden;border-radius:24px;background:#ebece4}
.context-images figure{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(var(--image-shift,40px)) scale(1.025);transition:opacity .65s,transform .85s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.context-images figure.active{opacity:1;transform:none;z-index:1}
.context-images img{width:100%;height:100%;object-fit:cover}
.context-images figure:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#18201470)}
.context-images figcaption{position:absolute;bottom:25px;left:28px;right:28px;z-index:2;font-size:16px;color:white}

.image-annotation{position:absolute;left:9%;bottom:10%;z-index:1;color:white;padding-left:17px;border-left:1px solid #ffffff70}
.image-annotation:before{content:'';position:absolute;left:-1px;top:-36px;width:85px;height:36px;border-top:1px solid #ffffff70;transform:skewY(-23deg);transform-origin:bottom left}
.image-annotation:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;left:81px;top:-72px;background:#fff}
.image-annotation span{font-size:12px;letter-spacing:.045em}
.image-annotation p{font-size:14px;margin:7px 0 0}
.campaign-note{font-size:11px;color:#7a8075;margin-top:20px}
.phone-halo{display:none}
.phone-hardware{width:360px;height:760px;max-width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;animation:none;filter:drop-shadow(12px 20px 20px #18231225)}
.phone-hardware:before{display:none}
.phone-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.phone-display{position:absolute;left:9.9%;right:9.8%;top:3.4%;bottom:3.4%;height:auto;border:0;border-radius:43px;padding:0 20px;background:#fafbf7}
.phone-status{padding-top:15px}
.phone-greeting{padding-block:26px 20px}
.phone-greeting h3{font-size:27px}
.phone-greeting p{font-size:11px}
.phone-result strong{font-size:12px}
.phone-result p{font-size:10px}
.phone-idea p{font-size:12px}
.phone-reply{font-size:10px;margin-top:24px}
.phone-sample{font-size:9px}
.phone-float-note{left:8%;bottom:16px;transform:none}
@property --edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan{--edge-color:#82ba5b;position:relative}
.plan.pro{--edge-color:#64ada0}
.plan.ultra{--edge-color:#8a9eb7}
.plan:after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--edge-angle),transparent 0deg 290deg,var(--edge-color) 338deg,transparent 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .25s;animation:edge-travel 2.7s linear infinite;animation-play-state:paused}
.plan:focus-within:after{opacity:1;animation-play-state:running}
@media(hover:hover) and (pointer:fine){.plan:hover:after{opacity:1;animation-play-state:running}}
.faqs details[open]>p{animation:faq-enter .22s ease-out}
.site-footer .tool-playground{container-type:inline-size;min-height:760px}
.site-footer .tool-playground .footer-wordmark{font-size:min(17.4cqw,247px);font-weight:900;letter-spacing:-.055em;max-width:100%;width:100%;padding:0 12px 8px;bottom:0;box-sizing:border-box;z-index:3;pointer-events:none}
.site-footer .platform-letter{flex:none}
.motion-paused .flow-stem:after,.motion-paused .flow-energy,.motion-paused .plan:after{animation-play-state:paused}
@keyframes stem-travel{to{transform:translateY(95px)}}
@keyframes flow-travel{to{stroke-dashoffset:-100}}
@keyframes edge-travel{to{--edge-angle:360deg}}
@keyframes faq-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:900px){.context-sticky{gap:28px}.phone-layout{gap:25px}.phone-hardware{width:330px;height:697px}.phone-display{border-radius:39px;padding-inline:17px}.phone-greeting h3{font-size:24px}.phone-greeting{padding-block:20px 14px}.phone-reply{margin-top:15px}.phone-float-note{font-size:10px;left:4%}}
@media(max-width:700px){.polish-heading{margin-bottom:38px}.polish-heading h2{font-size:40px}.polish-heading>p{font-size:17px}.team-branches{gap:10px}.branch-logos{gap:8px;height:40px}.branch-logos img{width:23px;height:23px}.team-branches h3{font-size:clamp(14px,4vw,24px)}.team-branches p{font-size:13px}.team-branches small{font-size:10px;line-height:1.5}.workflow-result{margin-top:60px}.workflow-result h3{font-size:30px}.workflow-result>p{font-size:16px}.workflow-result>div{gap:12px;font-size:10px;flex-wrap:wrap}.strategic-moment{padding-block:60px 80px}.strategic-moment h2{font-size:39px}.strategic-moment>p{font-size:17px}.context-scroll{height:190svh}.context-sticky{top:85px;min-height:0;height:calc(100svh - 110px);max-height:800px;grid-template-columns:1fr;grid-template-rows:150px minmax(0,1fr);gap:20px}.context-terms{height:150px}.context-term{position:absolute;inset:0;opacity:0;padding:15px 0;pointer-events:none}.context-term.active{opacity:1;transform:none}.context-term strong{font-size:32px}.context-term span{font-size:15px;max-width:none}.context-images{min-height:0;height:100%;max-height:540px;border-radius:18px}.context-images figcaption{font-size:13px;bottom:18px;left:20px}.image-annotation{left:8%;right:6%;bottom:8%}.image-annotation p{font-size:12px}.phone-hardware{width:340px;height:718px}.phone-scene{width:100%;padding-bottom:48px}.phone-float-note{bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap}.site-footer .tool-playground{min-height:1160px}.site-footer .tool-playground .footer-wordmark{font-size:17.4cqw;padding-inline:3px}.state-tag{font-size:9px}}
@media(max-width:370px){.phone-hardware{width:300px;height:634px}.phone-display{border-radius:34px;padding-inline:13px}.phone-greeting{padding-block:14px 9px}.phone-greeting h3{font-size:22px}.phone-result{padding:10px 8px}.phone-idea{margin-top:9px;padding:10px}.phone-reply{margin-top:10px}.phone-result strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.flow-stem:after,.flow-energy,.plan:after,.faqs details[open]>p{animation:none}.context-scroll{height:auto}.context-sticky{position:relative;top:auto;height:auto;min-height:0;max-height:none;display:block}.context-terms{display:none}.context-images{height:auto;min-height:0;max-height:none;background:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.context-images figure{position:relative;opacity:1;transform:none;aspect-ratio:1;transition:none;overflow:hidden;border-radius:18px}.context-term{transition:none}}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.context-images{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.context-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;height:auto;margin-bottom:24px}.context-term{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}.context-term.active{transform:none}.context-term strong{font-size:26px}}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.context-terms{grid-template-columns:1fr}}
/* Rendered device sequences (devices.js adds .is-3d once the sequence loads); without it the CSS mockups above stay. */
.device-stage.is-3d{margin-top:0!important}
.device-stage.is-3d:after{content:'';display:block;height:75vh}
.demo-section:has(.is-3d){overflow-x:clip}
.is-3d .device{aspect-ratio:1.55;transform:none!important;width:min(100%,calc((100vh - 150px) * 1.08));margin:0 auto 45%;position:sticky;top:96px}
.is-3d .lid{position:static;padding:0;border-radius:0;background:none;box-shadow:none;transform:none!important;animation:none}
.is-3d .lid:after,.is-3d .base,.is-3d .camera,.is-3d .device:after{display:none}
.device-seq{position:absolute;pointer-events:none;max-width:none;opacity:0;transition:opacity .6s}
.device-seq.is-on{opacity:1}
.is-3d .screen{position:absolute;left:0;top:0;z-index:1;min-height:0;transform-origin:0 0;border-radius:8px 8px 3px 3px;opacity:0;visibility:hidden;will-change:transform,opacity}
.phone-section:has(.is-3d),.watch-section{overflow-x:clip}
/* close-ups: the rendered frame fills the hardware box; DOM screens are pinned by devices.js */
.phone-hardware.is-3d{width:min(560px,44vw,62vh);height:auto;filter:none}
.phone-hardware.is-3d .phone-shell{display:none}
.phone-hardware.is-3d .phone-display{left:0;top:0;right:auto;bottom:auto;z-index:1;transform-origin:0 0;border-radius:42px;opacity:0;visibility:hidden;will-change:transform,opacity}
.is-3d>.device-seq{left:0;top:0}
.watch-section{padding-block:clamp(70px,10vw,140px)}
.watch-section .watch-layout{width:min(1320px,calc(100% - 48px))}
.watch-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:clamp(24px,5vw,80px)}
.watch-hardware{position:relative;width:min(820px,100%,92vh);aspect-ratio:1;margin-inline:auto}
.watch-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.watch-hardware.is-3d .watch-poster{display:none}
.watch-copy h2{font-size:clamp(40px,5vw,64px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 22px}
.watch-intro{font-size:20px;line-height:1.5;max-width:30ch}
@media(max-width:900px){.watch-layout{grid-template-columns:1fr}.watch-scene{order:-1}.watch-copy{text-align:left}.phone-hardware.is-3d{width:min(440px,78vw)}}
@media(prefers-reduced-motion:reduce){.watch-note,.watch-pulse{animation:none;opacity:1;transform:none}}
/* opaque frames on the section colour; feather the canvas edges into the page */
.device-seq{-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.phone-section:has(.is-3d){background:#f4f5f1}
.device-stage.is-3d,.is-3d .device,.is-3d .lid{pointer-events:none}
.is-3d .screen{pointer-events:auto}
/* the laptop lift changes layout above the reader while scrolling; browser scroll anchoring would fight it */
html:has(.device-stage.is-3d){overflow-anchor:none}
/* idle float of the close-ups: whole device (frame + pinned screen) moves together, perfectly smooth */
@keyframes device-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-.6deg)}}
.watch-hardware.is-3d,.phone-hardware.is-3d{animation:device-float 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.watch-hardware.is-3d,.phone-hardware.is-3d{animation:none}}
.apps-count{display:grid;justify-items:center;gap:6px;margin:34px auto 0}
.apps-count strong{font-size:clamp(76px,10vw,148px);line-height:.9;font-weight:800;letter-spacing:-.06em;color:#262626;background:linear-gradient(180deg,#262626 55%,#3c7a1b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.apps-count span{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;color:#262626}
.apps-count em{font-style:normal;font-size:18px;color:#5d635a}
@media(min-width:901px){.phone-section:has(.is-3d) .phone-layout{width:min(1240px,calc(100% - 48px));grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px}}
/* App directory (restored): old design tokens scoped to the dialog */
.dir{--canvas:#fcfcfb;--ink:#111110;--ink-2:#2a2926;--line:#e2dfd7;--line-strong:#cfcbc1;--muted:#5f5c55;--r-l:20px;--r-m:12px;--surface:#fff;--surface-2:#f6f5f1;--lapel:#3c7a1b;--lapel-soft:#e9f5df;--font-interface:inherit;--shadow:0 1px 2px rgba(17,17,16,.04),0 12px 32px -12px rgba(17,17,16,.16)}
/* app directory (dialog) */
.dir{width:min(1100px,calc(100vw - 32px));max-width:none;height:min(860px,calc(100vh - 32px));height:min(860px,calc(100dvh - 32px));margin:auto;padding:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--canvas);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.dir::backdrop{background:rgba(17,17,16,.45)}
.dir__in{display:grid;grid-template-rows:auto auto auto 1fr;height:100%;min-height:0}
.dir__head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:clamp(18px,3vw,28px) clamp(18px,3vw,28px) 12px}
.dir__head h2{font-size:clamp(24px,3vw,32px)}
.dir__lead{margin-top:6px;color:var(--muted);font-size:15px;max-width:62ch;text-wrap:pretty}
.dir__close{flex:none}
.dir__close svg{width:16px;height:16px}
.dir__tools{display:grid;gap:10px;padding:0 clamp(18px,3vw,28px) 10px}
.dir__search{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:0 14px;min-height:46px;color:var(--muted)}
.dir__search:focus-within{border-color:var(--ink)}
.dir__search svg{width:18px;height:18px;flex:none}
.dir__search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.dir__cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.dir__cats button{flex:none;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font:500 13px/1 var(--font-interface);cursor:pointer}
.dir__cats button:hover{border-color:var(--ink);color:var(--ink)}
.dir__cats button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.dir__count{padding:0 clamp(18px,3vw,28px);margin:0 0 8px;font-size:13px;color:var(--muted);min-height:1em}
.dir__grid{list-style:none;margin:0;padding:0 clamp(18px,3vw,28px) clamp(18px,3vw,28px);overflow:auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;align-content:start;overscroll-behavior:contain}
.dir .card{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;gap:3px 12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);align-content:start}
.dir .card__logo{grid-row:1/4;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:#fff;font-weight:700;color:var(--muted)}
.dir .card__logo img{width:24px;height:24px;object-fit:contain}
.dir .card b{font-size:15px;line-height:1.25}
.dir .card__st{justify-self:start;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:#f1efe8;color:var(--muted)}
.dir .card__st--live{background:var(--lapel-soft);color:var(--lapel)}
.dir .card p{margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.dir .card small{grid-column:2;font-size:12px;color:var(--muted);opacity:.8}
.dir__empty{padding:32px 16px;text-align:center;display:grid;gap:4px;color:var(--muted)}
.dir__empty b{color:var(--ink)}
@media(max-width:640px){.dir{width:calc(100vw - 16px);height:calc(100dvh - 16px)}.dir__head{position:relative;padding-right:64px}.dir__close{position:absolute;top:12px;right:12px;width:40px;height:40px;padding:0;justify-content:center;font-size:0}.dir__close svg{width:18px;height:18px}.dir__grid{grid-template-columns:1fr}}
.apps-open{margin-top:18px}
.dir .dir__close{width:auto;font-size:14px;padding:10px 16px}
.dir .dir__head h2{font-size:clamp(24px,3vw,32px);margin:0}
/* ---------- Robotchi app simulation on the laptop display (Apple-style; sizes in --u = 1 % of the display width) ---------- */
.mac-app{--ink:#1d1d1f;--ink2:#6e6e73;--line:#e5e5ea;--blue:#0071e3;display:none;position:absolute;inset:0;z-index:5;grid-template:calc(var(--u)*3.4) 1fr/calc(var(--u)*19) 1fr;background:#fbfbfd;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Albert Sans",system-ui,sans-serif;font-size:calc(var(--u)*1.32);line-height:1.35;letter-spacing:-.01em;overflow:hidden;text-align:left}
.is-3d .mac-app{display:grid}
.mac-app p{margin:0}
.ma-bar{grid-column:1/-1;display:flex;align-items:center;gap:calc(var(--u)*.7);padding-inline:calc(var(--u)*1.4);border-bottom:1px solid var(--line);background:#f5f5f7}
.ma-bar i{width:calc(var(--u)*.95);height:calc(var(--u)*.95);border-radius:50%;background:#ff5f57}.ma-bar i:nth-child(2){background:#febc2e}.ma-bar i:nth-child(3){background:#28c840}
.ma-bar span{margin-inline:auto;transform:translateX(-50%);font-weight:600;font-size:calc(var(--u)*1.1);color:var(--ink2);letter-spacing:.04em}
.ma-side{padding:calc(var(--u)*1.6) calc(var(--u)*1.1);background:linear-gradient(#f2f2f7ee,#ececf1ee);border-right:1px solid var(--line);display:grid;align-content:start;gap:calc(var(--u)*.35)}
.ma-brand{display:flex;align-items:center;gap:calc(var(--u)*.8);font-weight:700;font-size:calc(var(--u)*1.25);letter-spacing:.02em;margin-bottom:calc(var(--u)*1.4)!important}
.ma-brand img{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002}
.ma-item{display:flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.6) calc(var(--u)*.8);border-radius:calc(var(--u)*.7);color:#3a3a3c}
.ma-item b{width:calc(var(--u)*1.6);text-align:center;color:var(--blue);font-weight:500}
.ma-item.is-on{background:#e3e3e8;font-weight:600}
.ma-item em{margin-left:auto;font-style:normal;font-size:calc(var(--u)*1);background:var(--blue);color:#fff;border-radius:99px;padding:0 calc(var(--u)*.6)}
.ma-main{position:relative;padding:calc(var(--u)*3) calc(var(--u)*4.2);display:grid;align-content:start;gap:calc(var(--u)*1.5)}
.ma-eyebrow{font-size:calc(var(--u)*1.05);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.ma-hello{margin-top:calc(var(--u)*-1)!important;font-size:calc(var(--u)*3.3);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.ma-compose{display:flex;align-items:center;gap:calc(var(--u)*.2);min-height:calc(var(--u)*4.4);padding:0 calc(var(--u)*.8) 0 calc(var(--u)*1.6);border-radius:calc(var(--u)*1.4);background:#fff;box-shadow:0 0 0 1px var(--line),0 calc(var(--u)*.6) calc(var(--u)*2) #0000000d;font-size:calc(var(--u)*1.4)}
.ma-src{display:none}
.ma-caret{width:2px;height:1.2em;background:var(--blue);animation:ma-blink 1s steps(1) infinite}
.ma-send{margin-left:auto;display:grid;place-items:center;width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border-radius:50%;background:#d1d1d6;color:#fff;font-size:calc(var(--u)*1.4);transition:background .3s,transform .3s}
.mac-app[data-step="2"] .ma-send{background:var(--blue);transform:scale(1.08)}
.ma-steps{display:flex;gap:calc(var(--u)*2.2);color:var(--ink2)}
.ma-step{display:flex;align-items:center;gap:calc(var(--u)*.7);opacity:0;transform:translateY(calc(var(--u)*.6));transition:opacity .5s,transform .5s,color .3s}
.ma-step i{position:relative;width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;border:2px solid #d1d1d6;box-sizing:border-box}
.ma-step.is-run i{border-color:var(--blue) var(--blue) #d1d1d6 #d1d1d6;animation:ma-spin .8s linear infinite}
.ma-step.is-done{color:var(--ink)}
.ma-step.is-done i{border-color:var(--blue);background:var(--blue)}
.ma-step.is-done i:after{content:'';position:absolute;left:30%;top:18%;width:25%;height:45%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ma-step.is-in{opacity:1;transform:none}
.ma-results{display:grid;border-radius:calc(var(--u)*1.4);background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.ma-row{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*1.05) calc(var(--u)*1.6);border-top:1px solid var(--line);opacity:0;transform:translateY(calc(var(--u)*1.2));transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.ma-row:first-child{border-top:0}
.ma-row.is-in{opacity:1;transform:none}
.ma-row b{display:grid;place-items:center;width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:calc(var(--u)*.8);background:var(--c);color:#fff;font-weight:600}
.ma-row span{display:grid;font-weight:600}
.ma-row small{font-weight:400;color:var(--ink2);font-size:calc(var(--u)*1.12)}
.ma-row em{margin-left:auto;font-style:normal;font-weight:600;font-size:calc(var(--u)*1.12);color:var(--blue);background:#0071e314;border-radius:99px;padding:calc(var(--u)*.3) calc(var(--u)*.9)}
.ma-toast{position:absolute;left:50%;bottom:calc(var(--u)*2.4);display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.9) calc(var(--u)*.9) calc(var(--u)*.9) calc(var(--u)*1.2);border-radius:99px;background:#1d1d1fee;color:#f5f5f7;backdrop-filter:blur(12px);box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) #0003;white-space:nowrap;opacity:0;transform:translate(-50%,calc(var(--u)*2)) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1.1)}
.ma-toast b{display:grid;place-items:center;width:calc(var(--u)*2);height:calc(var(--u)*2);border-radius:50%;background:#30d158;color:#fff;font-size:calc(var(--u)*1.1)}
.ma-toast em{font-style:normal;font-weight:600;background:var(--blue);color:#fff;border-radius:99px;padding:calc(var(--u)*.55) calc(var(--u)*1.4)}
.ma-toast.is-in{opacity:1;transform:translate(-50%,0) scale(1)}
@keyframes ma-blink{50%{opacity:0}}
@keyframes ma-spin{to{transform:rotate(360deg)}}
.ma-results{opacity:0;transition:opacity .4s}.ma-results:has(.is-in){opacity:1}
.ma-draft{display:grid;gap:calc(var(--u)*.5);padding:calc(var(--u)*1.3) calc(var(--u)*1.6);border-radius:calc(var(--u)*1.4);background:#fff;box-shadow:0 0 0 1px var(--line);opacity:0;transform:translateY(calc(var(--u)*1));transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.ma-draft.is-in{opacity:1;transform:none}
.ma-draft-h{display:flex;gap:calc(var(--u)*.8);align-items:center;font-weight:600}
.ma-draft-h b{font-size:calc(var(--u)*1);text-transform:uppercase;letter-spacing:.06em;color:#bf5af2;background:#bf5af21a;border-radius:99px;padding:calc(var(--u)*.2) calc(var(--u)*.8)}
.ma-draft-to{color:var(--ink2);font-size:calc(var(--u)*1.12)}
.ma-draft-body{color:#3a3a3c;min-height:3.9em}
.ma-draft-body .ma-caret{display:inline-block;vertical-align:text-bottom;margin-left:1px}
.ma-compose .ma-caret{display:none}.mac-app[data-step="1"] .ma-compose .ma-caret{display:block}
.ma-draft .ma-caret{display:none}.ma-draft.is-typing .ma-caret{display:inline-block}
/* ---------- iPhone brief: iOS style (3D mode) ---------- */
.is-3d .phone-display{--ink:#1d1d1f;--ink2:#8e8e93;--blue:#0071e3;background:#f2f2f7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Albert Sans",system-ui,sans-serif;color:var(--ink)}
.is-3d .phone-app-bar{border-color:#e5e5ea}
.is-3d .phone-app-bar .status-dot{background:#30d158}
.is-3d .phone-greeting>span{color:var(--ink2);font-weight:600}
.is-3d .phone-greeting h3{font-weight:700;letter-spacing:-.035em}
.is-3d .phone-greeting p,.is-3d .phone-result p{color:var(--ink2)}
.is-3d .phone-result{border:0;border-radius:14px;box-shadow:0 1px 2px #0000000d,0 0 0 1px #e5e5ea}
.is-3d .phone-result .result-icon{background:#0071e3;color:#fff;border-radius:9px}
.is-3d .phone-result+.phone-result .result-icon{background:#5e5ce6}
.is-3d .phone-idea{background:#fff;border:0;box-shadow:0 0 0 1px #e5e5ea;border-radius:16px}
.is-3d .phone-idea>span{color:#5e5ce6;font-weight:600}
.is-3d .phone-reply{border:0;border-radius:99px;box-shadow:0 0 0 1px #d1d1d6;background:#fff}
.is-3d .phone-reply span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px}
.di-act{display:none}
.is-3d .dynamic-island{display:flex;align-items:center;justify-content:space-between;padding:0 7px;box-sizing:border-box;transition:width .6s cubic-bezier(.2,.9,.2,1.1)}
.is-3d .di-act{display:contents}
.is-3d .di-act img{width:16px;height:16px;border-radius:50%;opacity:0;transition:opacity .3s .3s}
.is-3d .di-act b{color:#30d158;font-size:9px;font-weight:600;opacity:0;transition:opacity .3s .3s}
.phone-display.is-live .dynamic-island{width:50%}
.phone-display.is-live .di-act img,.phone-display.is-live .di-act b{opacity:1}
.is-3d .phone-display .phone-result,.is-3d .phone-display .phone-idea,.is-3d .phone-display .phone-reply{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.is-3d .phone-display.is-replay .phone-result,.is-3d .phone-display.is-replay .phone-idea,.is-3d .phone-display.is-replay .phone-reply{opacity:0;transform:translateY(14px);transition:none}
/* ---------- Watch: watchOS notification ---------- */
.watch-face{position:absolute;left:0;top:0;z-index:1;display:none;transform-origin:0 0;box-sizing:border-box;padding:calc(var(--u,2px)*7) calc(var(--u,2px)*6.5);border-radius:21%/17%;background:#000;color:#fff;overflow:hidden;opacity:0;visibility:hidden;will-change:transform,opacity;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Albert Sans",system-ui,sans-serif;line-height:1.2}
.is-3d .watch-face{display:block}
.watch-face p{margin:0}
.wf-time{text-align:right;font-size:calc(var(--u,2px)*8);font-weight:600;color:#fff;letter-spacing:-.02em}
.wf-card{margin-top:calc(var(--u,2px)*4);padding:calc(var(--u,2px)*5);border-radius:calc(var(--u,2px)*8);background:#1c1c1e;transform:translateY(120%);opacity:0;transition:transform .7s cubic-bezier(.2,1.2,.3,1),opacity .4s}
.wf-app{display:flex;align-items:center;white-space:nowrap;gap:calc(var(--u,2px)*2.5);font-size:calc(var(--u,2px)*5.2);font-weight:600;color:#8e8e93;letter-spacing:.04em}
.wf-app img{width:calc(var(--u,2px)*9);height:calc(var(--u,2px)*9);border-radius:50%;background:#fff}
.wf-app span{margin-left:auto;letter-spacing:0;font-weight:500}
.wf-title{margin-top:calc(var(--u,2px)*3)!important;font-size:calc(var(--u,2px)*8.4);font-weight:600;letter-spacing:-.02em}
.wf-body{margin-top:calc(var(--u,2px)*1.5)!important;font-size:calc(var(--u,2px)*6.4);color:#aeaeb2}
.wf-btn{margin-top:calc(var(--u,2px)*4)!important;padding:calc(var(--u,2px)*4) 0;border-radius:99px;background:#0a84ff;text-align:center;font-size:calc(var(--u,2px)*7);font-weight:600;transform:translateY(160%);opacity:0;transition:transform .7s .15s cubic-bezier(.2,1.2,.3,1),opacity .4s .15s}
.watch-face.is-live .wf-card,.watch-face.is-live .wf-btn{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.wf-card,.wf-btn{transform:none;opacity:1}}
.watch-scene,.phone-scene{position:relative}
.inspect-hint{position:absolute;left:0;right:0;bottom:-6px;z-index:2;margin:0;text-align:center;font-size:13px;letter-spacing:.02em;color:#8e8e93;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s;pointer-events:none}
.inspect-hint span{display:inline-block;margin-right:4px}
.is-inspectable .inspect-hint{opacity:1;transform:none}
@media(max-width:700px){.is-3d .device{width:76vw}}
/* realtime close-ups: hosts sized here, the 3D module adds the canvas (with bleed) inside */
.phone-hardware.is-3d{width:min(620px,46vw,calc((100vh - 110px) / 1.5));height:auto;aspect-ratio:2/3}
@media(max-width:900px){.phone-hardware.is-3d{width:min(460px,80vw)}}
.watch-hardware.is-3d,.phone-hardware.is-3d{animation:none}
.phone-hardware.is-3d .phone-display{border-radius:44px}
.is-3d .lid{position:relative;z-index:1;will-change:auto}
/* iPhone and Watch share the page white; a short line bridges the two */
.phone-section,.phone-section:has(.is-3d){background:none;border-block:0}
.device-bridge{padding-block:40px 10px;text-align:center}
.device-bridge h2{margin-top:0}
/* Laptop scenarios (Find leads / Do the research / Prep my meeting): one scene visible at a time */
.ma-scene{display:none}
.mac-app[data-scenario=leads] [data-s=leads],.mac-app[data-scenario=research] [data-s=research],.mac-app[data-scenario=meeting] [data-s=meeting]{display:contents}
.ma-main{transition:opacity .25s}
.mac-app.is-switching .ma-main{opacity:0}
.ma-steps{flex-wrap:wrap;row-gap:calc(var(--u)*.6)}
/* Phones: the laptop opens in the normal flow (no pinned runway), controls right below it, larger app type */
@media(max-width:700px){
  .device-stage.is-3d:after{height:0}
  .is-3d .device{position:relative;top:auto;margin-bottom:26vw}
  .is-3d .ma-row small{display:none}
  .is-3d .ma-compose{min-height:calc(var(--u)*3.6)}
  .is-3d .mac-app{grid-template:1fr/1fr}
  .is-3d .ma-bar,.is-3d .ma-side,.is-3d .ma-eyebrow,.is-3d .ma-hello{display:none}
  .is-3d .ma-main{padding:calc(var(--u)*2.2) calc(var(--u)*2.6);gap:calc(var(--u)*1.1)}
  .is-3d .ma-row{padding-block:calc(var(--u)*.7)}
  .is-3d .ma-row b{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4)}
  .is-3d .ma-draft-to{display:none}
  .is-3d .ma-draft-body{min-height:0}
}
/* The old demo's status line stays for screen readers only */
.demo-section:has(.is-3d) .demo-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.is-3d .ma-toast{bottom:calc(var(--u)*.9)}}
/* The legacy 2D demo under the Mac app is only the reduced-motion fallback: keep it out of layout in 3D */
.is-3d .screen>.sidebar,.is-3d .screen>.workspace{display:none}
/* Desktop: the scenario controls float at the bottom of the view while the open laptop is pinned */
@media(min-width:701px){
  .device-stage.is-3d~.demo-controls{position:sticky;bottom:22px;z-index:6;opacity:0;pointer-events:none;transition:opacity .4s}
  .device-stage.is-3d.is-open~.demo-controls{opacity:1;pointer-events:auto}
}
/* Phones: a hero title with real presence (it may wrap over three or four lines) */
@media(max-width:700px){html[lang] .hero h1{font-size:clamp(34px,10.5vw,46px);line-height:1.02;letter-spacing:-.05em}html[lang] [data-hero-promise]{white-space:normal}}
/* Below-the-fold sections are laid out and painted only when they come near the viewport (first load does one screen) */
#why,#how,#apps,#context,#iphone,.device-bridge,#watch,.strategic-moment,#pricing,.closing,#faq{content-visibility:auto;contain-intrinsic-size:auto 1000px}
/* First-visit intro (intro.js): typed welcome over the page while the 3D loads */
.site-intro{display:none}
.intro .site-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding:calc(50svh - 120px) 24px 24px;background:#fafafa;transition:opacity .6s cubic-bezier(.4,0,.2,1),visibility .6s}
.site-intro.is-out{opacity:0;visibility:hidden}
.intro-lock,.intro-lock body{overflow:hidden}
.si-card{display:grid;justify-items:center;gap:26px;text-align:center;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.site-intro.is-out .si-card{transform:translateY(-14px) scale(.98)}
.si-card img{width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:0 10px 30px #0000001a;animation:si-pop .7s cubic-bezier(.2,.9,.25,1.25) both}
.si-line{margin:0;min-height:3.4em;font-size:clamp(30px,4.6vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.05em;color:#1b1d1a;white-space:pre-line}
.si-caret{display:inline-block;width:.07em;height:.82em;margin-left:.06em;vertical-align:-.06em;border-radius:2px;background:#3fb80f;animation:ma-blink 1s steps(1) infinite}
@keyframes si-pop{from{opacity:0;transform:scale(.6)}}
.si-typed{visibility:hidden}
.si-typed span{visibility:hidden}
html{scrollbar-gutter:stable} /* the intro's scroll lock never changes the page width */
.si-typed span.on{visibility:visible}
/* caret: a box-shadow on the last letter (paint only, never touches line breaking) */
.si-typed span.last{box-shadow:.08em 0 0 #3fb80f;animation:si-caret 1s steps(1) infinite}
@keyframes si-caret{50%{box-shadow:.08em 0 0 transparent}}
.si-line{width:fit-content;text-align:left}
/* MacBook film (devices.js laptop): placed like the old canvas (host + bleed); plays once in view, no scroll runway */
.device-film{position:absolute;display:block;object-fit:fill;pointer-events:none;z-index:0;background:transparent}
.device-stage.is-3d:after{height:0}
.is-3d .device{position:relative;top:auto}
.is-3d .screen{transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.hero-content{position:relative;z-index:2} /* above the film frame's empty top */