/* SPDX-License-Identifier: Apache-2.0 AND LicenseRef-Commons-Clause-1.0 */
/* One Connect landing page. Everything is drawn the way the mark is drawn: ink rings, flat fills, fat struts,
   on the dot grid of the node canvas. Tokens live in brand.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font-sans);font-variation-settings:"CASL" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
h1,h2,h3{margin:0;font-family:var(--font-display);font-variation-settings:"CASL" 1;font-weight:900;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--font-mono)}
.skip{position:absolute;left:16px;top:12px;z-index:50;padding:10px 14px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--card);transform:translateY(-300%)}
.skip:focus{transform:none}

/* ports, dots, tags: the smallest pieces of the canvas */
.port{display:inline-block;width:12px;height:12px;flex:none;border-radius:50%;background:var(--c,var(--aqua));border:2.5px solid var(--ink)}
.dot{display:inline-block;width:10px;height:10px;flex:none;border-radius:50%;background:var(--c);border:2px solid var(--ink)}
.tag{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 16px 0 12px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--card);font:700 14px/1 var(--font-sans);font-variation-settings:"CASL" .6}

/* keys: buttons with a lip that press in, like the app's switches */
.key{--k:var(--aqua);display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--k);color:var(--ink);box-shadow:var(--lip);font:800 17px/1 var(--font-sans);font-variation-settings:"CASL" 1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform 160ms var(--spring),box-shadow 160ms var(--spring),background 120ms linear}
.key svg{width:20px;height:20px;margin-top:-2px}
.key:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);transition-duration:60ms}
.key.paper{--k:var(--card)}
.key-sm{height:42px;padding:0 18px;font-size:15px;box-shadow:0 3px 0 var(--ink)}
.key-sm:hover{box-shadow:0 5px 0 var(--ink)}
.key-xs{height:36px;padding:0 15px;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.key-xs:hover{box-shadow:0 4px 0 var(--ink)}
.key[disabled]{opacity:.5;pointer-events:none}
.key .badge{display:inline-block;padding:3px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--sun);font:800 11px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-in{display:flex;align-items:center;gap:20px;max-width:1240px;height:74px;margin:0 auto;padding:0 24px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:900 21px/1 var(--font-display);font-variation-settings:"CASL" 1;letter-spacing:-0.02em}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:9px 13px;border-radius:999px;font:650 15px/1 var(--font-sans);font-variation-settings:"CASL" .5;text-decoration:none;color:var(--ink-2)}
.nav-links a:hover{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

/* hero: the headline is the hub */
.hero{position:relative;display:grid;place-items:center;min-height:min(740px,calc(100svh - 74px));padding:48px 24px 72px;background:var(--grid);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to bottom,transparent,var(--paper));z-index:-1;pointer-events:none}
.hero-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.hero-wires .w{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.hero-wires .f{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-dasharray:0.01 46;animation:signal 2.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}
@keyframes signal{to{stroke-dashoffset:-46.01}}
.hero-nodes{position:absolute;inset:0;z-index:1;pointer-events:none}
.hn{position:absolute;left:var(--x);top:var(--y);will-change:transform}
.hn.agent{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;margin-left:-60px}
.hn-dot{width:66px;height:66px;border-radius:50%;border:3px solid var(--ink);background:var(--f);box-shadow:var(--lip)}
.hn.agent b{font:800 15px/1 var(--font-sans);font-variation-settings:"CASL" 1;padding:5px 10px;border-radius:999px;background:var(--paper)}
.hn.coral{--f:var(--coral)}.hn.sun{--f:var(--sun)}.hn.grape{--f:var(--grape)}
.hn.pill{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px 0 12px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:0 3px 0 var(--ink);font:700 15px/1 var(--font-sans);font-variation-settings:"CASL" .6;white-space:nowrap}
.hn.pill .mono{font-size:13px;color:var(--ink-3)}
.hn.diamond{display:grid;place-items:center;width:78px;height:78px}
.hn.diamond::before{content:"";position:absolute;inset:11px;border:3px solid var(--ink);border-radius:12px;background:var(--aqua);transform:rotate(45deg);box-shadow:3px 3px 0 var(--ink)}
.hn.diamond span{position:relative;font:850 14px/1 var(--font-sans);font-variation-settings:"CASL" 1}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px;max-width:960px;text-align:center}
.hub{position:relative;display:inline-block;font-size:clamp(46px,6.6vw,96px);line-height:.98;padding:0 8px}
.hub .hl{position:relative;white-space:nowrap}
.hub .hl::after{content:"";position:absolute;left:-6px;right:-6px;bottom:.04em;height:.3em;background:var(--aqua);border-radius:999px;z-index:-1}
.hub-port{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:3px solid var(--ink);background:var(--aqua)}
.hub-port.l{left:-34px}.hub-port.r{right:-34px}
.lede{max-width:34ch;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.fine{font-size:14px;color:var(--ink-3)}

/* vendors */
.vendors{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 24px 24px}
.vendors p{font:700 14px/1 var(--font-sans);font-variation-settings:"CASL" .6;color:var(--ink-3)}
.vendors ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:0;padding:0;list-style:none}
.vendors li{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font:650 15px/1 var(--font-sans);font-variation-settings:"CASL" .4}

/* the spine: wires between frames, so the page reads like a workflow */
.spine{max-width:1160px;height:96px;margin:0 auto;padding:0 24px}
.spine svg{width:100%;height:100%;overflow:visible}
.spine path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spine.lit path{stroke-dasharray:4 12;animation:flow 1.1s linear infinite;stroke:var(--aqua-deep)}

/* frames: each big feature is a workflow frame on the canvas */
.frame{max-width:1160px;margin:0 auto;border:3px solid var(--ink);border-radius:30px;background:var(--card);box-shadow:0 7px 0 var(--ink);overflow:hidden}
.frame + .spine,.spine + .frame{position:relative}
.frame-h{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 22px;border-bottom:3px solid var(--ink);background:var(--paper-2)}
.frame-tag{display:inline-flex;align-items:center;gap:9px;font:850 16px/1 var(--font-sans);font-variation-settings:"CASL" 1}
.status{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font:600 12.5px/1 var(--font-mono);font-variation-settings:"MONO" 1,"CASL" .6;color:var(--ink-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.status.running{background:var(--aqua);color:var(--ink)}.status.running::before{background:var(--ink);animation:blink 1s steps(2) infinite}
.status.done{background:var(--lime);color:var(--ink)}.status.done::before{background:var(--ink)}
@keyframes blink{50%{opacity:.2}}
.frame-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:48px}
.frame.flip .frame-b{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.frame.flip .copy{order:2}
.copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.copy h2{font-size:clamp(36px,4.2vw,58px);line-height:1}
.copy > p{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:44ch}
.facts{display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none}
.facts li{position:relative;padding-left:24px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.facts li::before{content:"";position:absolute;left:0;top:.36em;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--ink);background:var(--aqua)}
.facts b{color:var(--ink);font-weight:750}
.demo{position:relative;min-width:0;border:2px solid var(--ink);border-radius:24px;background:var(--paper) var(--grid);padding:18px}

/* Canvas demo */
.cv-svg{display:block;width:100%;height:auto;overflow:visible}
.cv-svg .w{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;transition:stroke 200ms linear}
.cv-svg .w.on{stroke:var(--aqua-deep);stroke-dasharray:6 9;animation:flow .8s linear infinite}
.cv-svg .w.lit{stroke:var(--aqua-deep)}
.cv-svg .fill{stroke:var(--ink);stroke-width:3}
.cv-svg .coral{fill:var(--coral)}.cv-svg .sun{fill:var(--sun)}.cv-svg .card{fill:var(--card)}.cv-svg .paper2{fill:var(--aqua)}
.cv-svg .port{fill:var(--c);stroke:var(--ink);stroke-width:2.5}
.cv-svg text{fill:var(--ink);font-family:var(--font-sans)}
.cv-svg .glyph{font-size:28px;font-weight:900;font-variation-settings:"CASL" 1;text-anchor:middle}
.cv-svg .lbl{font-size:15px;font-weight:750;font-variation-settings:"CASL" 1;text-anchor:middle}
.cv-svg .pill-t{font-size:14px;font-weight:650;font-variation-settings:"CASL" .5;text-anchor:middle}
.cv-svg .mono-t{font-variation-settings:"MONO" 1,"CASL" .6;font-size:12.5px;fill:var(--ink-3)}
.cv-svg .head{fill:var(--h);stroke:var(--ink);stroke-width:3}
.cv-svg .step-t{font-size:16px;font-weight:850;font-variation-settings:"CASL" 1}
.cv-svg .step-s{font-size:12px;font-family:var(--font-mono);font-variation-settings:"MONO" 1,"CASL" .6;text-anchor:end}
.cv-svg .step-n{font-size:12.5px;fill:var(--ink-3)}
.cv-svg .bar{fill:var(--paper-2);stroke:var(--ink);stroke-width:1.5}
.cv-svg .bar-fill{fill:var(--lime);transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform 700ms var(--ease)}
.cv-svg .dia{transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}
.cv-svg .dia-t{font-size:15px;font-weight:850;font-variation-settings:"CASL" 1;text-anchor:middle}
.cv-svg .agent circle:first-child{transform-box:fill-box;transform-origin:center}
.cv-svg .busy circle:first-child{animation:breathe .9s var(--ease) infinite alternate}
@keyframes breathe{to{transform:scale(1.07)}}
.cv-svg .done .head{fill:var(--lime)}
.cv-svg [data-n="ship"].done .fill{fill:var(--lime)}
.cv-svg [data-n="decide"].wait .dia{animation:nudge 1.2s var(--ease) infinite}
@keyframes nudge{50%{transform:rotate(45deg) scale(1.08)}}
.cv-stage{position:relative}
.cv-ask{position:absolute;left:73%;top:80%;display:flex;gap:8px;transform:translate(-50%,0)}
.demo-bar{display:flex;align-items:center;gap:14px;margin-top:6px}
.demo-note{font:600 13px/1.3 var(--font-mono);font-variation-settings:"MONO" 1,"CASL" .6;color:var(--ink-3)}

/* One Ask demo */
.ask{display:flex;flex-direction:column;gap:14px;padding:22px}
.ask-bar{display:flex;align-items:center;gap:4px;min-height:58px;padding:0 22px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:0 3px 0 var(--ink);font:650 17px/1.3 var(--font-sans);font-variation-settings:"CASL" .5}
.ask-q{color:var(--ink-3)}
.ask-q.typed{color:var(--ink)}
.caret{width:2.5px;height:22px;background:var(--ink);animation:blink 1s steps(2) infinite}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px}
.ask-chips button{height:36px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);font:600 14px/1 var(--font-sans);font-variation-settings:"CASL" .5;cursor:pointer;transition:transform 140ms var(--spring),background 120ms linear}
.ask-chips button:hover{background:var(--card);transform:translateY(-1px)}
.ask-chips button[aria-pressed="true"]{background:var(--aqua)}
.ask-a{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border:var(--ring) solid var(--ink);border-radius:20px;background:var(--card);animation:rise 360ms var(--spring) both}
.ask-a[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.ask-a-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.verdict{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--lime);font:800 13px/1 var(--font-sans);font-variation-settings:"CASL" 1}
.verdict::before{content:"✓"}
.verdict.no{background:var(--sun)}.verdict.no::before{content:"?"}
.rev{font-size:12.5px;color:var(--ink-3)}
.ask-a p{font-size:16.5px;line-height:1.55}
.cites{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.cites li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1.5px solid var(--hair);border-radius:12px;background:var(--paper);animation:rise 300ms var(--ease) both}
.cites li:nth-child(2){animation-delay:90ms}.cites li:nth-child(3){animation-delay:180ms}
.cites .path{font:600 13.5px/1.3 var(--font-mono);font-variation-settings:"MONO" 1,"CASL" .4}
.cites .lines{font:500 12.5px/1 var(--font-mono);font-variation-settings:"MONO" 1,"CASL" .4;color:var(--ink-3)}
.cites .how{margin-left:auto;height:22px;padding:0 9px;border:1.5px solid var(--ink);border-radius:999px;background:var(--c);font:700 11.5px/19px var(--font-sans);font-variation-settings:"CASL" .8}
.ask-a .key{align-self:flex-start}
.flyer{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:0 3px 0 var(--ink);font:700 14px/1 var(--font-sans);opacity:0;pointer-events:none}
.flyer.go{animation:fly 1.1s var(--ease) forwards}
@keyframes fly{0%{opacity:0;transform:translate(0,10px) scale(.8)}25%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(60px,-150px) scale(.7) rotate(-8deg)}}

/* Designer demo */
.dz{display:flex;flex-direction:column;gap:16px;padding:22px}
.dz-prompt{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 8px 8px 22px;border:var(--ring) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:0 3px 0 var(--ink)}
.dz-q{flex:1;min-width:0;font:650 16.5px/1.3 var(--font-sans);font-variation-settings:"CASL" .5}
.dz-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;min-height:360px}
.phone{position:relative;width:216px;padding:30px 16px 18px;border:3px solid var(--ink);border-radius:34px;background:var(--card);box-shadow:0 5px 0 var(--ink);transition:transform 300ms var(--spring)}
.phone-notch{position:absolute;top:10px;left:50%;width:58px;height:8px;margin-left:-29px;border-radius:999px;background:var(--ink)}
.ph-title{font:900 21px/1.1 var(--font-display);font-variation-settings:"CASL" 1;margin-bottom:12px}
.ph-rows{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ph-rows li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 10px 0 12px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);font:650 13.5px/1.2 var(--font-sans);font-variation-settings:"CASL" .4}
.ph-rows em{display:block;font-style:normal;font:500 11.5px/1.2 var(--font-mono);font-variation-settings:"MONO" 1;color:var(--ink-3)}
.tg{position:relative;flex:none;width:36px;height:22px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2)}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--ink);transition:transform 220ms var(--spring)}
.tg.on{background:var(--lime)}.tg.on::after{transform:translateX(14px)}
.ph-new{display:none!important}
.ph-new.in{display:flex!important;animation:pop 420ms var(--spring) both;background:color-mix(in srgb,var(--pink) 30%,var(--paper))!important}
@keyframes pop{from{opacity:0;transform:scale(.7)}}
.ph-foot{margin-top:12px;font:500 11.5px/1.2 var(--font-mono);font-variation-settings:"MONO" 1;color:var(--ink-3);text-align:center}
.phone.sketch .ph-title,.phone.sketch .ph-rows li,.phone.sketch .ph-foot{color:transparent;background:repeating-linear-gradient(90deg,var(--paper-2) 0 12px,var(--card) 12px 24px);border-color:var(--hair)}
.phone.sketch .ph-title{border-radius:8px;width:70%}
.phone.sketch .tg,.phone.sketch em{visibility:hidden}
.proposal{position:relative;align-self:start;margin-top:40px;display:flex;flex-direction:column;gap:10px;max-width:260px;padding:16px;border:var(--ring) solid var(--ink);border-radius:20px;background:var(--card);box-shadow:0 4px 0 var(--ink);animation:rise 380ms var(--spring) both}
.proposal[hidden]{display:none}
.proposal::before{content:"";position:absolute;right:100%;top:34px;width:24px;border-top:3px dashed var(--ink)}
.pr-h{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--font-sans);font-variation-settings:"CASL" .8;color:var(--ink-2)}
.pr-t{font:800 17px/1.3 var(--font-sans);font-variation-settings:"CASL" 1}
.pr-b{display:flex;flex-wrap:wrap;gap:8px}
.proposal.gone{animation:out 300ms var(--ease) forwards}
@keyframes out{to{opacity:0;transform:translateY(-8px) scale(.96)}}
.swatches{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:6px}
.swatches i{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);background:var(--c)}
.swatches span{margin-left:4px;font-size:12px;color:var(--ink-3)}

/* ink: the log */
.ink{--dot:rgba(251,246,236,.11);margin-top:0;padding:110px 24px;background:var(--ink) var(--grid);color:var(--paper)}
.ink-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;max-width:1160px;margin:0 auto}
.ink h2{font-size:clamp(44px,5.4vw,76px);line-height:.96}
.ink .copy > p{color:rgba(251,246,236,.78)}
.tag.on-ink{align-self:flex-start;background:transparent;border-color:var(--paper);color:var(--paper)}
.tag.on-ink .port{border-color:var(--paper)}
.log{position:relative;display:flex;flex-direction:column;gap:8px;min-height:420px;padding:18px;border:3px solid var(--paper);border-radius:24px;background:#0c1b1f;box-shadow:0 7px 0 var(--aqua)}
.log-h{display:flex;justify-content:space-between;padding:0 4px 6px;font-size:13px;color:var(--paper)}
.log-h .dim{opacity:.55}
.log-rows{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.log-rows li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 12px;padding:10px 12px;border:1.5px solid rgba(251,246,236,.16);border-radius:14px;background:rgba(251,246,236,.04);font:500 13.5px/1.35 var(--font-mono);font-variation-settings:"MONO" 1,"CASL" .5;animation:rise 300ms var(--ease) both}
.log-rows .t{color:rgba(251,246,236,.5)}
.log-rows .k{color:var(--aqua)}
.log-rows .who{color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-rows .what{grid-column:1/-1;color:rgba(251,246,236,.62)}
.log-rows li.warn{border-color:var(--sun)}.log-rows li.warn .k{color:var(--sun)}
.log-rows li.ok{border-color:var(--lime)}.log-rows li.ok .k{color:var(--lime)}
.log-ask{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding:16px;border:3px solid var(--ink);border-radius:18px;background:var(--aqua);color:var(--ink);animation:rise 360ms var(--spring) both}
.log-ask[hidden]{display:none}
.log-ask p{font-size:14px}.log-ask .q{font:850 19px/1.2 var(--font-sans);font-variation-settings:"CASL" 1}
.replay{align-self:flex-end;margin-top:auto;padding:6px 2px;border:0;background:none;color:var(--aqua);font:700 14px var(--font-sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.replay[hidden]{display:none}

/* guards */
.guards{max-width:1160px;margin:0 auto;padding:110px 24px 40px;text-align:center}
.guards h2{font-size:clamp(34px,4vw,54px);margin-bottom:40px}
.stickers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.sticker{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border:3px solid var(--ink);border-radius:24px;background:var(--c);box-shadow:0 5px 0 var(--ink);text-align:left;rotate:var(--r,0deg);transition:rotate 260ms var(--spring),translate 260ms var(--spring),opacity 500ms var(--ease),transform 600ms var(--spring)}
.sticker:nth-child(1){--r:-2deg}.sticker:nth-child(2){--r:1.5deg}.sticker:nth-child(3){--r:-1deg}.sticker:nth-child(4){--r:2deg}
.sticker:hover{rotate:0deg;translate:0 -4px}
.sticker b{font:900 21px/1.15 var(--font-display);font-variation-settings:"CASL" 1}
.sticker b .mono{font-size:18px;font-variation-settings:"MONO" 1,"CASL" 1}
.sticker span{font-size:15px;color:var(--ink)}

/* bring your own subscriptions */
.byo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center;max-width:1160px;margin:0 auto;padding:80px 24px 110px}
.byo .copy h2{font-size:clamp(36px,4.2vw,56px)}
.byo-art svg{width:100%;height:auto;overflow:visible}
.byo-art .spokes path{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.byo-art .vn circle{fill:var(--c);stroke:var(--ink);stroke-width:4}
.byo-art text{fill:var(--ink);font:750 16px var(--font-sans);font-variation-settings:"CASL" 1;text-anchor:middle}
.byo-art .hubn circle{fill:var(--aqua);stroke:var(--ink);stroke-width:5}
.byo-art .hubn text{font:900 22px var(--font-display);font-variation-settings:"CASL" 1}
.byo-art .vn{transform-box:fill-box;transform-origin:center;animation:float 4s ease-in-out infinite alternate}
.byo-art .vn:nth-child(3n+2){animation-duration:5s}.byo-art .vn:nth-child(3n){animation-duration:4.5s;animation-delay:-1s}
@keyframes float{to{transform:translateY(-5px)}}

/* download */
.download{--dot:rgba(19,38,43,.13);padding:100px 24px;background:var(--sun) var(--grid);border-block:3px solid var(--ink)}
.download-in{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:760px;margin:0 auto;text-align:center}
.download h2{font-size:clamp(40px,5vw,68px);line-height:1}
.appicon{width:104px;height:104px;border-radius:24px;filter:drop-shadow(0 5px 0 var(--ink))}
.download .key.paper{--k:var(--card)}
.download .fine{color:var(--ink-2)}
.soon{display:inline-flex;align-items:center;gap:9px;font:700 14px/1 var(--font-sans);font-variation-settings:"CASL" .8}
.story{position:relative;max-width:640px;margin:6px 0 4px;padding:26px 30px 22px;border:3px solid var(--ink);border-radius:28px;background:var(--card);box-shadow:0 5px 0 var(--ink);text-align:left}
.story::after{content:"";position:absolute;left:46px;bottom:-17px;width:26px;height:26px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--card);transform:rotate(45deg);box-shadow:4px 4px 0 var(--ink)}
.story blockquote{margin:0}
.story p{font:600 clamp(18px,1.9vw,22px)/1.5 var(--font-sans);font-variation-settings:"CASL" .5}
.story p::before{content:"“";margin-right:2px;font-weight:900}.story p::after{content:"”";margin-left:2px;font-weight:900}
.story figcaption{position:absolute;left:96px;bottom:-46px;display:flex;align-items:center;gap:9px;font:800 15px/1 var(--font-sans);font-variation-settings:"CASL" 1;white-space:nowrap}
.story figcaption::before{content:"";width:22px;height:22px;border-radius:50%;border:2.5px solid var(--ink);background:var(--coral)}
.download .story + .cta{margin-top:44px}
.download .tag{background:var(--card)}

/* footer */
.foot{background:var(--paper-2)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;max-width:1240px;margin:0 auto;padding:36px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot nav a{font-weight:600;text-decoration:none;color:var(--ink-2)}
.foot nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .fine{flex-basis:100%}

/* reveal (only when the script runs, so the page is complete without it) */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 500ms var(--ease),transform 600ms var(--spring)}
.js [data-reveal].in{opacity:1;transform:none}

/* responsive */
@media (max-width:1180px){
  .hn{transform-origin:center}
  .hn.pill.issue,.hn[data-side="r"].pill{display:none}
  .hub{font-size:clamp(46px,6.4vw,84px)}
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-in .key-sm{margin-left:auto}
  .hero{min-height:auto;padding:48px 20px 72px}
  .hero-wires{display:none}
  .hero-nodes{position:static;display:flex;justify-content:center;gap:14px;order:2;margin-top:12px;pointer-events:none}
  .hero{display:flex;flex-direction:column;align-items:center}
  .hn{position:relative;left:auto;top:auto}
  .hn.agent{width:auto;margin:0}
  .hn-dot{width:44px;height:44px}
  .hn.agent b{font-size:13px}
  .hn.diamond,.hn.pill{display:none}
  .hub-port{display:none}
  .frame-b,.frame.flip .frame-b,.ink-in,.byo{grid-template-columns:1fr}
  .frame.flip .copy{order:0}
  .frame-b{gap:32px;padding:30px 24px}
  .frame{margin:0 16px;border-radius:24px}
  .spine{height:64px}
  .stickers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .byo{padding:56px 20px 80px}
  .byo-art{max-width:520px;margin:0 auto}
  .ink{padding:80px 20px}
}
@media (max-width:620px){
  body{font-size:16px}
  .hub{font-size:clamp(40px,11vw,56px)}
  .hub .hl::after{height:.26em}
  .key{height:50px;padding:0 20px;font-size:16px}
  .cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .cta .key{width:100%}
  .frame-h{height:52px;padding:0 14px}
  .frame-b{padding:24px 16px}
  .demo{padding:12px;border-radius:18px}
  .ask,.dz{padding:14px}
  .dz-prompt{flex-direction:column;align-items:stretch;border-radius:20px;padding:12px}
  .dz-stage{grid-template-columns:1fr;justify-items:center;min-height:0;padding-bottom:36px}
  .proposal{margin-top:0}
  .proposal::before{display:none}
  .stickers{grid-template-columns:1fr}
  .cv{overflow-x:auto;overscroll-behavior-x:contain}
  .cv-stage{min-width:520px}
  .log{min-height:380px;padding:12px}
  .log-rows li{font-size:12.5px}
  .demo-bar{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}