/* The artwork now belongs to the guide icon. The home cover is a product demo. */
#companies-grid .wg-demo-card .wg-blob{background:linear-gradient(145deg,#25252b,#15171d);border:1px solid rgba(255,255,255,.12)}
#companies-grid .wg-demo-card .wg-blob-info{display:contents}
#companies-grid .wg-demo-card .wg-blob-pic{inset:6% 4% 46%;border-radius:0;overflow:visible}
#companies-grid .wg-demo-card .wg-blob-name{position:absolute;top:57%;left:8%;right:8%;z-index:2;text-align:center;font-size:clamp(1.05rem,1.35vw,1.5rem);line-height:1.2;white-space:normal}
#companies-grid .wg-demo-card .wg-blob-note{position:absolute;top:66%;left:8%;right:8%;z-index:2;text-align:center;color:#d1d0d0;font-size:clamp(.72rem,.8vw,.9rem);line-height:1.35}
#companies-grid .wg-demo-card .wg-open-btn{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:8px 20px;border-radius:12px;background:var(--accent,#82aaff);color:var(--on-accent,#0b1324);font-weight:700;font-size:.9rem;white-space:nowrap}
#companies-grid .wg-demo-card:hover .wg-open-btn{filter:brightness(1.1)}
#companies-grid .wg-demo-card .wg-blob-veil,#companies-grid .wg-demo-card .wg-blob-open{display:none}
.home-demo,.home-demo>svg{display:block;width:100%;height:100%}.home-demo{--demo-accent:#aabce0;pointer-events:none}.home-demo svg{overflow:visible;font-family:Inter,system-ui,sans-serif}.home-demo text{fill:#d7dbe4;font-size:10px;letter-spacing:0;font-weight:450}.home-demo .hd-heading{font-weight:650;font-size:11px}.home-demo .hd-small{font-size:9px}.home-demo .hd-muted{fill:#9098a8;font-size:9px}.home-demo .hd-preview-label{text-anchor:end;font-size:7px;letter-spacing:1px;fill:#8c94a2}.home-demo .hd-app-label{font-size:10px;fill:#d3d8e3}.home-demo .hd-caption{text-anchor:middle;font-size:8.5px;fill:var(--demo-accent)}.hd-window{fill:#13171f;stroke:#454952;stroke-width:1}.hd-panel{fill:#202631;stroke:#343c49;stroke-width:.7}.hd-card{fill:#303b4c;stroke:#4b5869;stroke-width:.7}.hd-line{stroke:#647184;stroke-width:3;stroke-linecap:round}.hd-divider{stroke:#353c49;stroke-width:1}.hd-dot{fill:#657181}.hd-accent,.hd-tick{fill:var(--demo-accent)}.hd-track{fill:#3d4654}.hd-art{fill:var(--demo-accent);opacity:.5}.hd-mountain{fill:#4f776b}.hd-play{fill:var(--demo-accent);stroke:#16202b;stroke-width:1}.hd-sun{fill:#f1d2a0}.hd-clip{fill:#455a75;stroke:#839bbd;stroke-width:1}.hd-playhead,.hd-caret{stroke:var(--demo-accent);stroke-width:2}.home-demo .hd-onaccent{fill:#181d25;font-size:9px;font-weight:600}.hd-plate{fill:#d0c9b8}.hd-plate-inner{fill:#eee6d6;stroke:#b8ae9e;stroke-width:2}.hd-leaf{fill:#6f9774}.hd-food{fill:#c78d60}.hd-avatar{fill:var(--demo-accent);opacity:.8}.hd-person{fill:#596b7e}.home-demo .hd-centered{text-anchor:middle}.hd-level{fill:#465b4b;stroke:#89aa8d;stroke-width:2}.hd-player{fill:var(--demo-accent)}.hd-coin{fill:#e5c172}.hd-draw{fill:none;stroke:var(--demo-accent);stroke-width:4;stroke-linecap:round}.hd-check circle{fill:var(--demo-accent)}.hd-check path{fill:none;stroke:#15201b;stroke-width:2}.hd-step-dots circle{fill:#4c515b}
.home-demo{--hd-p:7s;--hd-phase:0s}
/* Every scene loops forever on its own clock and fades into the next, so nothing ever cuts or restarts the picture. The period and the phase are set per tile, so no two tiles move together. */
.hd-scene{opacity:0;animation:hd-scene calc(var(--hd-p) * 4) linear infinite;animation-delay:calc(var(--hd-p) * var(--hd-i,0) - var(--hd-phase))}
@keyframes hd-scene{0%{opacity:0}4%,21%{opacity:1}28%,100%{opacity:0}}
.hd-step-dots circle{animation:hd-dot calc(var(--hd-p) * 4) linear infinite;animation-delay:calc(var(--hd-p) * var(--hd-i,0) - var(--hd-phase))}
@keyframes hd-dot{0%,25%{fill:var(--demo-accent)}26%,100%{fill:#4c515b}}
.hd-pointer{transform:translate(265px,168px);fill:#f5f4ef;stroke:#11151d;stroke-width:1.5;filter:drop-shadow(1px 2px 2px #0005)}
.hd-click{fill:none;stroke:var(--demo-accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.hd-scene .hd-pointer{animation:hd-pointer var(--hd-p) ease-in-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-click{animation:hd-click var(--hd-p) ease-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-scroll-content{animation:hd-scroll var(--hd-p) ease-in-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-scrollbar{animation:hd-scrollbar var(--hd-p) ease-in-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-drag-card{animation:hd-drag var(--hd-p) ease-in-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-writing{animation:hd-write var(--hd-p) steps(4,end) infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-caret{animation:hd-blink 1s steps(2,end) infinite}
.hd-scene .hd-progress{transform-box:fill-box;transform-origin:left;animation:hd-progress var(--hd-p) linear infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-playhead{animation:hd-playhead var(--hd-p) linear infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-player{animation:hd-jump var(--hd-p) ease-in-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-check,.hd-scene .hd-tick{animation:hd-check var(--hd-p) ease-in-out infinite;animation-delay:calc(-1 * var(--hd-phase))}
.hd-scene .hd-tick-1{animation-delay:calc(.45s - var(--hd-phase))}
.hd-scene .hd-tick-2{animation-delay:calc(.9s - var(--hd-phase))}
@keyframes hd-pointer{0%,10%{transform:translate(274px,167px);opacity:0}18%{opacity:1}30%,38%{transform:var(--pointer-first)}57%,65%{transform:var(--pointer-second)}85%{opacity:1}100%{transform:translate(254px,161px);opacity:0}}@keyframes hd-click{0%,29%,42%,56%,72%,100%{opacity:0;transform:scale(.35)}32%,60%{opacity:.8;transform:scale(.55)}39%,68%{opacity:0;transform:scale(1.7)}}@keyframes hd-scroll{0%,35%{transform:translateY(0)}65%,100%{transform:translateY(-55px)}}@keyframes hd-scrollbar{0%,35%{transform:translateY(0)}65%,100%{transform:translateY(68px)}}@keyframes hd-drag{0%,34%{transform:translateX(0)}65%,100%{transform:translateX(99px)}}@keyframes hd-write{0%,20%{clip-path:inset(0 100% 0 0)}75%,100%{clip-path:inset(0)}}@keyframes hd-blink{50%{opacity:0}}@keyframes hd-progress{0%,30%{transform:scaleX(.1)}100%{transform:scaleX(1)}}@keyframes hd-playhead{0%,25%{transform:translateX(0)}100%{transform:translateX(210px)}}@keyframes hd-check{0%,35%{opacity:0}45%,100%{opacity:1}}@keyframes hd-jump{0%,30%{transform:translate(0,0)}47%{transform:translate(55px,-55px)}61%{transform:translate(76px,-23px)}75%{transform:translate(120px,-78px)}100%{transform:translate(137px,-47px)}}
.hd-paused .home-demo *,.hd-paused.home-demo *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.home-demo *{animation:none!important}.home-demo .hd-scene{opacity:0}.home-demo .hd-scene[data-step="0"]{opacity:1}.home-demo .hd-pointer{display:none}.home-demo .hd-writing{clip-path:none}.home-demo .hd-check{opacity:1}}

/* The hero's default gives way so the first row of apps shows without scrolling (a height set with the grip still wins). */
html.home-fit .wp-hero{height:var(--home-hero-h);min-height:0}
/* All five apps stand in one row from a laptop's width up, so the row is the whole set. */
@media (min-width:1100px){#companies-grid .wg-rail-wrap{grid-template-columns:repeat(5,minmax(0,1fr))}}