/* the new parts sitting inside the old home (owner 2026-11-03) */
.v2{background:transparent;font:16px/1.55 Inter,system-ui,sans-serif}
.v2 .hero{min-height:0!important;height:calc(100svh - 80px)!important;max-height:960px}
.v2 .hc{padding-top:clamp(48px,8vh,96px)!important}
.v2-tiles .s{padding:72px 0 32px}
html[data-theme=dark] .v2 .hero{background:linear-gradient(180deg,#081431,#0f1a45)!important}
.c24>.v2{grid-column:1/-1}
.v2-tiles .s{padding:24px 0 24px}.v2-tiles .w{padding:0}
/* the new header is fixed over the old pages: they start below it */
body{padding-top:72px}
.v2-head .nav,.v2-head .pnav{z-index:80}
.v2-head .nav .w,.v2-head .pnav .w{max-width:1200px}
/* Home and Together run the full width of the window */
.v2-home,.v2-together{width:100vw;margin-left:calc(50% - 50vw)}
.v2-foot{width:100%}
.v2-foot footer{margin-top:64px!important}
.v2.v2-home,.v2.v2-together,.v2.v2-foot,.v2.v2-head,.v2.v2-tiles{max-width:none!important}
.c24>.v2-joins{grid-column:1/-1}.v2-joins .jband{border-radius:28px;margin:8px 0}
html:not([data-theme=dark]) .v2 .jband{background:#f6f8fc!important;box-shadow:none!important}html:not([data-theme=dark]) .v2 .jband .jbg{display:none!important}
/* pick two inside the old pages: the old site's select styling (its own border) must not show inside the pill */
.v2 .pk-pick select,.v2 .pk-pick .ss-btn{border:0!important;outline:0;background-color:transparent!important;box-shadow:none!important;height:auto!important;min-height:0!important;padding:4px 26px 4px 2px!important;font:700 17px Sora,Inter,sans-serif!important;color:var(--ink)!important}
.v2 .pk-pick .ss-btn{padding-right:4px!important}
.v2 .pk-pick .ss{position:relative}
.v2 .pk-pick .ss-pop{font:500 15px Inter,sans-serif;text-align:left;min-width:240px}
.v2-end .end-band{margin:0 0 80px}.v2-end{width:100%}
/* the closing card: centred on wide screens; the place tiles keep white words on hover */
.v2.v2-end{max-width:none!important;width:100%}
.v2-end .end-band>.w{margin-left:auto!important;margin-right:auto!important}
.v2 .cx-places a:hover,.v2 .cx-places a:focus-visible{color:#fff!important}
.v2 .cx-places a.cx-all:hover{color:#2a4fd6!important}
/* products hero inside the old page (owner 2026-11-03: "cards are a bit flashy, dial it down") */
.v2.v2-prod{width:100vw;margin-left:calc(50% - 50vw);max-width:none!important}
.v2 .gjump3 a::before{display:none!important}
.v2 .gjump3 a{box-shadow:none!important;border:1px solid var(--ln)!important;background:var(--sf)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.v2 .gjump3 a:hover{transform:none!important;border-color:color-mix(in srgb,var(--ink) 22%,var(--ln))!important;box-shadow:0 6px 18px rgba(15,25,50,.06)!important}
.v2 .gj-n{color:var(--mut)!important}
.v2 .gjump3 a:hover .gj-a{color:var(--ink)!important}
html:not([data-theme=dark]) .v2 .pr-hero{background:#fff!important}
/* product cards on Products: the product's own building in the town style, alive while seen (owner 2026-11-03) */
.gc-town{display:block;width:100%}
.gc-town .gpic.gc-pic{display:block;height:150px;border-radius:0;margin:0;border-bottom:1px solid var(--ln);--line:#2f63e6;--fill:rgba(47,99,230,.05);background:#f5f7fb!important}
html[data-theme=dark] .gc-town .gpic.gc-pic{--line:rgba(190,210,255,.7);--fill:rgba(255,255,255,.03);background:#0d1a40!important}
.gc-town .gpic .win.on{fill:#ffd166;stroke:#e9b440}
.gc-town .gpic .sign text{fill:var(--line)}
/* product cards: the line-art building in the product's own colour, on its own tint (owner 2026-11-03) */
.gc-town .gpic.gc-pic{--line:color-mix(in srgb,var(--c,#3778f5) 80%,#1b3aa8);--fill:color-mix(in srgb,var(--c,#3778f5) 6%,#fff);background:color-mix(in srgb,var(--c,#3778f5) 10%,#fff)!important;border-bottom:3px solid var(--c,#3778f5)!important;height:160px}
html[data-theme=dark] .gc-town .gpic.gc-pic{--line:color-mix(in srgb,var(--c,#3778f5) 55%,#cfe0ff);--fill:rgba(255,255,255,.03);background:color-mix(in srgb,var(--c,#3778f5) 20%,#0b1638)!important}
html:not([data-theme=dark]) .gcard .gc-town .gpic.gc-pic{background:color-mix(in srgb,var(--c,#3778f5) 12%,#fff)!important}
html[data-theme=dark] .gcard .gc-town .gpic.gc-pic{background:color-mix(in srgb,var(--c,#3778f5) 20%,#0b1638)!important}
.gc-town .gpic .ln,.gc-town .gpic .bf,.gc-town .gpic .win{stroke-width:2.6}
/* owner 2026-11-03: no product colours here - the same line art as the town drawings */
.gc-town .gpic.gc-pic,html:not([data-theme=dark]) .gcard .gc-town .gpic.gc-pic{--line:rgba(47,99,230,.85);--fill:rgba(55,120,245,.05);background:#f4f7fd!important;border-bottom:1px solid var(--ln)!important}
html[data-theme=dark] .gcard .gc-town .gpic.gc-pic{--line:rgba(190,210,255,.7);--fill:rgba(255,255,255,.03);background:#0d1a40!important}
.gc-town .gpic .ln,.gc-town .gpic .bf,.gc-town .gpic .win{stroke-width:2}
.gcard:hover{border-color:var(--ln)!important}
.gc-pic .ccl{animation:ccl 40s linear infinite;animation-play-state:paused}.gc-pic .cbd{animation:ccl 22s linear infinite;animation-play-state:paused}
.gc-pic.live .ccl,.gc-pic.live .cbd{animation-play-state:running}
@keyframes ccl{from{transform:translateX(-80px)}to{transform:translateX(var(--w))}}
.gc-pic .win{transition:fill .6s,stroke .6s}
@media (prefers-reduced-motion:reduce){.gc-pic .ccl,.gc-pic .cbd{animation:none}}
/* home group tiles, both modes: the same blue line art, no group colours (owner 2026-11-03); hover keeps its colour */
.v2 .g6x .gpic{--line:rgba(47,99,230,.85)!important;--fill:rgba(55,120,245,.05)!important;background:#f4f7fd!important}
html[data-theme=dark] .v2 .g6x .gpic{--line:rgba(190,210,255,.7)!important;--fill:rgba(255,255,255,.03)!important;background:#0d1a40!important}
.v2 .g6x .gpic .sign text{fill:var(--line)!important}
.v2 .g6x .gn{color:var(--mut)!important}
/* products cards, hover (owner 2026-11-03): no border change, a soft shadow in the product's colour */
.gcard,html[data-theme=light] .gcard{transition:box-shadow .25s,transform .25s}
.gcard:hover,html[data-theme=light] .gcard:hover{border-color:var(--ln,rgba(15,25,50,.08))!important;outline:0!important;box-shadow:0 18px 40px -12px color-mix(in srgb,var(--c,#3778f5) 45%,transparent)!important;transform:translateY(-3px)}
html[data-theme=dark] .gcard:hover{border-color:rgba(255,255,255,.09)!important}
html[data-theme=light] .gcard:hover{background:#fff!important;border-color:#e6eaf2!important}
html[data-theme=dark] .gcard:hover{background:rgba(255,255,255,.02)!important}
.gc-town .gpic.gc-pic,html:not([data-theme=dark]) .gcard .gc-town .gpic.gc-pic{height:140px}
.gc-pic .bd2.mate{opacity:.45!important}
.gc-pic.live .gcloud,.gc-pic.live .gbird,.gc-pic.live .gwalk{animation-play-state:running}
.gc-pic .gcloud{animation:gcloud 26s linear infinite;animation-play-state:paused}.gc-pic .gbird{animation:gbird 9s linear infinite;animation-play-state:paused}.gc-pic .gwalk{animation:gwalk 22s linear infinite;animation-play-state:paused}
.gc-pic .wleg{animation:step .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
.gc-pic .gdash{display:none}
/* line-art icons (town style) */
.lic{width:48px;height:48px;color:#2f63e6;--lic-fill:rgba(55,120,245,.07);display:block}
html[data-theme=dark] .lic{color:#9db8ff;--lic-fill:rgba(255,255,255,.04)}
.ab2-ic .lic,.ic-app .lic,.gi-app .lic{width:48px;height:48px}
.v2 .lic,.lic{color:#2f63e6!important}html[data-theme=dark] .v2 .lic,html[data-theme=dark] .lic{color:#9db8ff!important}
.gc-town .gpic.gc-pic,html:not([data-theme=dark]) .gcard .gc-town .gpic.gc-pic{height:170px}
.v2 .g6x .gpic .bd2.mate{opacity:.4!important}
/* the faint neighbours rise in with the rest, then stay faint (owner 2026-11-03: the reveal was missing) */
.gc-pic .bd2.mate,.v2 .g6x .gpic .bd2.mate{opacity:0!important}
.gc-pic.live .bd2.mate,.gc-pic[data-done] .bd2.mate,.v2 .g6x .gpic.live .bd2.mate,.v2 .g6x .gpic[data-done] .bd2.mate{opacity:.42!important}
/* pages with a hero (product homes): the hero runs up under the clear header, so the header sits on the sky */
body:has([data-hero]){padding-top:0}
[data-hero] .c15{padding-top:calc(52px + 72px)!important}
[data-hero] .c2{top:0!important}
/* features filters: the searchable boxes inside the old filter bar */
.fx-sel.v2{display:block;background:none;font:inherit}
.fx-sel .ss{display:block;width:100%}
.fx-sel .ss-btn{width:100%;height:44px;border-radius:12px;border:1px solid var(--ln,#e1e7ef);background:var(--sf,#fff);color:var(--ink,#0f1932);font:500 15px Inter,sans-serif;padding:0 36px 0 14px;text-align:left}
html[data-theme=dark] .fx-sel .ss-btn{background:#0f1f47;border-color:rgba(255,255,255,.12);color:#eef3ff}
.fx-sel .ss-pop{top:50px;min-width:280px;z-index:60}
.pg>.v2-town{max-width:none!important;width:100%;margin:-8px 0 32px}
.v2-town .sec-town{height:300px}
.who-c{text-align:center}.who-c .c126{justify-content:center}
/* joins slideshow: line-art buildings instead of app icons */
.v2 .jvis2 .gt[data-b]{width:150px!important;height:150px!important;background:none!important;box-shadow:none!important;border:0!important;--line:#2f63e6;--fill:rgba(55,120,245,.06)}
html[data-theme=dark] .v2 .jvis2 .gt[data-b]{--line:rgba(190,210,255,.8);--fill:rgba(255,255,255,.04)}
.v2 .jvis2 .gt .gtb{width:100%;height:100%;display:block;overflow:visible}
.v2 .jvis2 .gt .win.on{fill:#ffd166;stroke:#e9b440}
.v2 .jvis2 .gt .sign text{fill:var(--line)}
.v2 .jvis2:has(.jscene){width:100%!important;max-width:560px;aspect-ratio:auto!important}
.v2 .jvis2>svg.jscene{position:static;display:block;width:100%;height:auto;overflow:visible;--line:#2f63e6;--fill:rgba(55,120,245,.06)}
.v2 .jvis2>svg.jscene path{stroke:var(--line);stroke-dasharray:none;opacity:1}
.v2 .jvis2>svg.jscene .jdash{stroke-dasharray:14 12;opacity:.5}
.v2 .jvis2>svg.jscene circle{filter:none;fill:var(--fill)}
html[data-theme=dark] .v2 .jvis2>svg.jscene{--line:rgba(190,210,255,.8);--fill:rgba(255,255,255,.04)}
.v2 .jscene .win{transition:fill .4s,stroke .4s}.v2 .jscene .win.on{fill:#ffd166;stroke:#e9b440}.v2 .jscene .sign text{fill:var(--line)}
/* animations: the buildings rise, the road runs, the person walks from one door to the other, windows switch on and off */
.v2 .jsl.on .jscene .jb{transform-box:fill-box;transform-origin:50% 100%;animation:jrise .7s cubic-bezier(.2,.8,.2,1) both}
.v2 .jsl.on .jscene .jbb{animation-delay:.15s}
@keyframes jrise{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
.v2 .jsl.on .jscene .jdash{animation:jroad 1.2s linear infinite}
@keyframes jroad{to{stroke-dashoffset:-26}}
.v2 .jscene .jwalk{opacity:0}
.v2 .jsl.on .jscene .jwalk{animation:jwalk 6s ease-in-out .8s infinite}
@keyframes jwalk{0%{transform:translateX(0);opacity:0}8%{opacity:1}88%{opacity:1;transform:translateX(var(--d))}100%{transform:translateX(var(--d));opacity:0}}
.v2 .jscene .wleg{transform-box:fill-box;transform-origin:50% 0;animation:jstep .35s ease-in-out infinite alternate}
@keyframes jstep{from{transform:skewX(-8deg)}to{transform:skewX(8deg)}}
@media (prefers-reduced-motion:reduce){.v2 .jscene .jb,.v2 .jscene .jdash,.v2 .jscene .wleg{animation:none!important}.v2 .jscene .jwalk{animation:none!important;opacity:1}}
.v2 .jvis2:has(.jscene){margin-top:40px!important;align-self:end}
.v2 .jvis2>svg.jscene .jobj{fill:var(--bg,#fff)}html[data-theme=dark] .v2 .jvis2>svg.jscene .jobj{fill:#13204a}
.v2 .jvis2>svg.jscene .jm-ticket .jobj,.v2 .jvis2>svg.jscene .jm-card .jobj,.v2 .jvis2>svg.jscene .jm-bill .jobj{stroke:#e9a825;fill:#fff6db}
html[data-theme=dark] .v2 .jvis2>svg.jscene .jm-ticket .jobj,html[data-theme=dark] .v2 .jvis2>svg.jscene .jm-card .jobj,html[data-theme=dark] .v2 .jvis2>svg.jscene .jm-bill .jobj{fill:#3a3214}
.v2 .jscene .jhop{animation:jhop .9s ease-in-out infinite alternate}
@keyframes jhop{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.v2 .jscene .jhop{animation:none}}
@keyframes gwalkw{from{transform:translateX(var(--ww))}to{transform:translateX(-40px)}}