/* hero */
.hero{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-top:40px;padding-bottom:28px}
.hero h1{margin:0;font-weight:600;font-size:clamp(40px,9.6vw,64px);line-height:1.12;letter-spacing:-0.03em}
.hero h1 .soft{color:var(--soft)}
.lede{margin:0;font-size:clamp(17px,4.4vw,19px);line-height:1.7;color:var(--body);max-width:30em}
.note{margin:0;font-size:14px;color:var(--muted)}
.chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.chips .lab{font-size:13px;font-weight:500;color:var(--muted);margin-right:4px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:14px;font-weight:600}
.chip-more{border:1px dashed #B5AE9F;border-radius:8px;padding:7px 12px;font-size:14px;color:var(--muted)}

/* demo */
.demo{padding-top:8px;padding-bottom:24px}
#pb-motion{position:absolute;opacity:0;pointer-events:none}
.win{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(24,24,27,.06),0 24px 48px -12px rgba(24,24,27,.12);overflow:hidden}
.winbar{display:flex;align-items:center;gap:6px;padding:8px 10px 0;background:#ECE7DC;border-bottom:1px solid var(--line)}
.tab{font-size:13px;font-weight:500;padding:8px 14px;border-radius:8px 8px 0 0;color:var(--muted)}
.t-cl{background:var(--surface);color:var(--ink)}
.pause{margin-left:auto;margin-bottom:4px;font-size:13px;color:var(--muted);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;cursor:pointer;user-select:none}
.pause:hover{background:#E2DCCF;color:var(--ink)}
.pause .p-on{display:none}
#pb-motion:checked ~ .win .pause .p-off{display:none}
#pb-motion:checked ~ .win .pause .p-on{display:inline}
#pb-motion:focus-visible ~ .win .pause{outline:2px solid var(--focus);outline-offset:2px}
.panes{display:grid;grid-template-columns:1fr minmax(220px,.8fr) 1fr}
.pane{padding:28px;display:flex;flex-direction:column;gap:14px}
.pane-mid{background:#F7F4ED;justify-content:center;gap:18px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.who{font-size:13px;font-weight:500;color:var(--muted)}
.me,.ai{text-wrap:pretty}
.me{align-self:flex-end;background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px 14px 4px 14px;font-size:15px;line-height:1.6;max-width:90%}
.ai{background:#EFEBE2;padding:12px 16px;border-radius:14px 14px 14px 4px;font-size:15px;line-height:1.6;max-width:92%}
.track{position:relative;height:10px;overflow:hidden;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px) center/100% 2px no-repeat}
.runner{position:absolute;inset:0;opacity:0}
.runner::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.hub{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.tile{width:64px;height:64px;border-radius:18px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.hubname{font-size:12px;color:var(--muted)}
.kept{background:#fff;border:1px solid var(--accent);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.6}
.kept b{display:block;font-size:12px;font-weight:600;color:var(--accent-text)}
.kept strong{font-weight:600}
.carry{background:var(--accent-wash);border:1px dashed var(--accent);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.6;color:var(--accent-ink)}
.caption{border-top:1px solid var(--line);padding:16px 24px;text-align:center;font-size:15px;margin:0}
.caption span{color:var(--muted)}

/* one authored sequence, 10s: say it in ChatGPT, PB keeps it, switch to Claude, PB brings it */
@keyframes s1{0%{opacity:0;transform:translateY(6px)}5%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes run1{0%,8%{opacity:0;transform:translateX(0)}10%,19%{opacity:1}21%,100%{opacity:0;transform:translateX(calc(100% - 10px))}}
@keyframes tap{0%,21%,31%,100%{transform:none}26%{transform:scale(1.07)}}
@keyframes s2{0%,23%{opacity:0;transform:translateY(6px)}29%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tabA{0%,40%{background-color:var(--surface);color:var(--ink)}46%,96%{background-color:transparent;color:var(--muted)}100%{background-color:var(--surface);color:var(--ink)}}
@keyframes tabB{0%,40%{background-color:transparent;color:var(--muted)}46%,96%{background-color:var(--surface);color:var(--ink)}100%{background-color:transparent;color:var(--muted)}}
@keyframes dimL{0%,40%{opacity:1}46%,96%{opacity:.6}100%{opacity:1}}
@keyframes dimR{0%,40%{opacity:.6}46%,96%{opacity:1}100%{opacity:.6}}
@keyframes sa{0%,46%{opacity:0;transform:translateY(6px)}51%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes run2{0%,52%{opacity:0;transform:translateX(0)}54%,61%{opacity:1}63%,100%{opacity:0;transform:translateX(calc(100% - 10px))}}
@keyframes s3{0%,62%{opacity:0;transform:translateY(6px)}67%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4{0%,70%{opacity:0;transform:translateY(6px)}76%,96%{opacity:1;transform:none}100%{opacity:0}}
.q1{animation:s1 10s cubic-bezier(.16,1,.3,1) infinite}
.r1 .runner{animation:run1 10s cubic-bezier(.45,0,.2,1) infinite}
.tile{animation:tap 10s ease-out infinite}
.q2{animation:s2 10s cubic-bezier(.16,1,.3,1) infinite}
.t-gpt{animation:tabA 10s ease-out infinite}
.t-cl{animation:tabB 10s ease-out infinite}
.pane-l{animation:dimL 10s ease-out infinite}
.pane-r{animation:dimR 10s ease-out infinite}
.qa{animation:sa 10s cubic-bezier(.16,1,.3,1) infinite}
.r2 .runner{animation:run2 10s cubic-bezier(.45,0,.2,1) infinite}
.q3{animation:s3 10s cubic-bezier(.16,1,.3,1) infinite}
.q4{animation:s4 10s cubic-bezier(.16,1,.3,1) infinite}
#pb-motion:checked ~ .win .q1,#pb-motion:checked ~ .win .q2,#pb-motion:checked ~ .win .q3,#pb-motion:checked ~ .win .q4,#pb-motion:checked ~ .win .qa,#pb-motion:checked ~ .win .tile,#pb-motion:checked ~ .win .tab,#pb-motion:checked ~ .win .pane{animation:none}
#pb-motion:checked ~ .win .runner{animation:none;opacity:1;transform:translateX(calc(100% - 10px))}
@media (prefers-reduced-motion: reduce){.q1,.q2,.q3,.q4,.qa,.tile,.tab,.pane,.r1 .runner,.r2 .runner{animation:none}.r1 .runner,.r2 .runner{opacity:1;transform:translateX(calc(100% - 10px))}.pause,#pb-motion{display:none}}

/* what it remembers */
.kinds{margin-top:40px;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px 40px;align-items:start}
.kinds-t{margin:0;font-size:20px;font-weight:600;line-height:1.4}
.kinds-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kinds-list li{display:flex;flex-direction:column;gap:4px;padding:2px 20px;border-left:1px solid var(--line)}
.kinds-list b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.kinds-list b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.kinds-list span{font-size:14px;color:var(--muted);line-height:1.6;padding-left:16px;text-wrap:pretty}
.kinds-note{grid-column:2;margin:0;font-size:14px;color:var(--muted);padding-left:20px}

/* sections */
.sec{padding-top:112px;padding-bottom:96px}
.h2{margin:0;font-weight:600;font-size:clamp(30px,7.4vw,48px);line-height:1.15;letter-spacing:-0.02em}
.sub{margin:0;font-size:17px;line-height:1.7;color:var(--body)}
.center{text-align:center}
.plat{display:flex;flex-direction:column;align-items:center;gap:40px}
.net{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,110px) minmax(220px,.9fr) minmax(48px,110px) minmax(0,1fr);grid-template-areas:"gpt w1 hub w3 cl" "gem w2 hub w4 grok" ". . more . .";row-gap:18px;align-items:center}
.g-gpt{grid-area:gpt}.g-gem{grid-area:gem}.g-cl{grid-area:cl}.g-grok{grid-area:grok}.g-hub{grid-area:hub}.g-more{grid-area:more}
.g-w1{grid-area:w1}.g-w2{grid-area:w2}.g-w3{grid-area:w3}.g-w4{grid-area:w4}
.node{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.node h3{margin:2px 0 0;font-size:20px;font-weight:700}
.node .what{font-size:14px;color:var(--muted)}
.ok{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok)}
.ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.node-more{background:transparent;border:1px dashed #B5AE9F}
.node-more h3,.node-more .soon{color:var(--muted)}
.soon{font-size:13px;font-weight:600}
.wire{position:relative;height:2px;background:repeating-linear-gradient(90deg,#B5AE9F 0 6px,transparent 6px 11px)}
.wire::before,.wire::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 0 3px var(--paper)}
.wire::before{left:-1px}.wire::after{right:-1px}
.hubx{align-self:stretch;background:var(--ink);color:#FBFAF7;border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.hubx b{font-size:20px;font-weight:600}
.hubx span{font-size:14px;color:#D4D0C8}
.g-more{display:flex;flex-direction:column;align-items:center}
.wire-v{width:2px;height:28px;background:repeating-linear-gradient(180deg,#B5AE9F 0 6px,transparent 6px 11px)}
.g-more .node{width:100%}
.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.install{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:center;padding-top:96px;padding-bottom:96px}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.steps li{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-size:15px;font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums;min-width:20px}
.steps h3{margin:0 0 4px;font-size:17px;font-weight:600}
.steps p{margin:0;font-size:15px;color:var(--body);line-height:1.6}
.mock{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 2px rgba(24,24,27,.05),0 20px 40px -14px rgba(24,24,27,.12)}
.mock .tag{font-size:13px;color:var(--muted)}
.mock .t{font-size:22px;font-weight:700}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font-size:15px}
.opt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px}
.box{width:18px;height:18px;border-radius:5px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:none}
.mock .go{min-height:52px;border-radius:10px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center}

.ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.feat{background:var(--ink);color:#fff;border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:12px;grid-row:span 2}
.feat h3{margin:0;font-size:22px;font-weight:600}
.feat p{margin:0;font-size:15px;line-height:1.7;color:#D4D0C8}
.feat .row{display:flex;justify-content:space-between;align-items:center;background:#26262B;border-radius:10px;padding:14px 16px;font-size:15px}
.feat .badge{background:var(--accent);color:var(--accent-on);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600}
.feat .toast{align-self:flex-end;background:#fff;color:var(--ink);border-radius:8px;padding:8px 12px;font-size:13px}
.tip{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:6px}
.tip h3{margin:0;font-size:18px;font-weight:600}
.tip p{margin:0;font-size:15px;line-height:1.7;color:var(--body)}

.dark{background:var(--ink);color:var(--paper)}
.privacy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;padding-top:96px;padding-bottom:96px}
.privacy .lead{margin:0;font-size:17px;line-height:1.8;color:#D4D0C8}
.privacy a{color:var(--accent-night);font-size:16px;align-self:flex-start;padding:10px 0;text-underline-offset:4px}
.privacy a:hover{color:var(--accent-night-hover)}
.facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;font-size:16px}
.facts li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid #33332F;line-height:1.7;text-wrap:pretty}
.facts li:last-child{border-bottom:none}
.facts .k{font-size:14px;color:#B5AE9F;min-width:56px;flex:none}

.faq{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px 56px;align-items:start}
.qa-list{border-top:1px solid var(--line)}
.qa-list details{border-bottom:1px solid var(--line)}
.qa-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-size:17px;font-weight:600;color:var(--ink)}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .15s ease-out}
.qa-list details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.qa-list summary:hover{color:var(--accent-hover)}
.qa-list p{margin:0 0 18px;font-size:15px;line-height:1.75;color:var(--body);max-width:40em}
.qa-list a{color:var(--accent-text);text-underline-offset:3px}
.join{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-top:112px;padding-bottom:112px}
.price{font-size:14px;color:var(--muted)}

@media (max-width:900px){
.panes{grid-template-columns:1fr}
.pane-mid{border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 28px}
.track{display:none}
.pane-mid{position:relative}
.pane-mid::before,.pane-mid::after{content:"";position:absolute;left:50%;width:2px;height:22px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 9px)}
.pane-mid::before{top:-11px}
.pane-mid::after{bottom:-11px}
}
@media (max-width:720px){
.hero{padding-top:28px}
.sec{padding-top:80px;padding-bottom:72px}
.install,.privacy{padding-top:72px;padding-bottom:72px}
.join{padding-top:80px;padding-bottom:80px}
.faq{grid-template-columns:1fr}
.net{grid-template-columns:1fr 1fr;grid-template-areas:"hub hub" "gpt cl" "gem grok" "more more";gap:12px}
.wire{display:none}
.wire-v{display:none}
.kinds{grid-template-columns:1fr}
.kinds-list{grid-template-columns:1fr 1fr;row-gap:16px}
.kinds-list li{padding:0 12px 0 0;border-left:none}
.kinds-note{grid-column:1;padding-left:0}
.pane{padding:22px}
}
/* Former inline presentation styles. */
.logo-accent{fill:var(--accent)}
.check-mark{stroke:var(--accent-on)}
.platform-head{display:flex;flex-direction:column;gap:14px}
.install-copy{display:flex;flex-direction:column;gap:20px}
.control{display:flex;flex-direction:column;gap:40px}
.control-demo{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.privacy-copy{display:flex;flex-direction:column;gap:16px}
.join-help{margin:0;font-size:13px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.beta-note{max-width:560px;margin-top:8px}