/* The public front page. Ported from the design handoff (Claude Design); every rule is kept to
   the page's root, .vz, so nothing here reaches the sign-in card or the dashboard. Motion is CSS
   only and stops under prefers-reduced-motion. */
.vz-unused{margin:0;background:#070A12}
.vz a{color:#9FD3FF}
.vz a:hover{color:#D6ECFF}
.vz *{box-sizing:border-box}
.vz h1,.vz h2,.vz h3{font-family:'Syne',ui-sans-serif,system-ui,sans-serif;margin:0;text-wrap:balance}
.vz p{margin:0;text-wrap:pretty}
.vz .mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.vz .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vz .btnp{transition:filter .2s ease, transform .2s ease}
.vz .btnp:hover{filter:brightness(1.1);transform:translateY(-1px)}
.vz .btng{transition:background .2s ease,border-color .2s ease}
.vz .btng:hover{background:rgba(124,196,255,.08);border-color:rgba(124,196,255,.5)}
.vz .navlink{color:#AEB8CF;text-decoration:none}
.vz .navlink:hover{color:#FFFFFF}
.vz input[type=range]{width:100%;accent-color:var(--acc);height:28px;cursor:pointer}
.vz .vfield{display:flex;align-items:center;gap:8px;background:#080C17;border:1px solid rgba(150,170,220,.28);border-radius:10px;padding:0 14px;min-height:54px;transition:border-color .2s ease}
.vz .vfield:focus-within{border-color:var(--acc)}
.vz .vfield input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#FFFFFF;font:500 20px 'IBM Plex Mono',ui-monospace,Menlo,monospace;padding:12px 0}
.vz .tab{cursor:pointer;border:0;font:600 15px 'Hanken Grotesk',system-ui,sans-serif;padding:10px 16px;border-radius:8px;min-height:44px;flex:1 1 180px;transition:background .2s ease,color .2s ease}
.vz .tw{animation:tw 4s ease-in-out infinite}
.vz .tw2{animation:tw 6s ease-in-out 1s infinite}
.vz .tw3{animation:tw 3s ease-in-out 2s infinite}
@keyframes tw{0%,100%{opacity:.25}
50%{opacity:1}
}
.vz .p{stroke-dasharray:16 900;animation:travel 5s linear infinite}
@keyframes travel{from{stroke-dashoffset:916}
to{stroke-dashoffset:0}
}
.vz .spin{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.vz .spinr{transform-box:fill-box;transform-origin:center;animation:spin 95s linear infinite reverse}
.vz .orb{transform-origin:11px 11px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.vz .breathe{transform-box:fill-box;transform-origin:center;animation:breathe 5s ease-in-out infinite}
.vz .breathe2{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out 1.5s infinite}
@keyframes breathe{0%,100%{transform:scale(.82);opacity:.65}
50%{transform:scale(1.12);opacity:1}
}
.vz .drift{animation:drift 14s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
.vz .sheen{background:linear-gradient(90deg,#93A6CC 0%,#93A6CC 42%,#FFFFFF 50%,#93A6CC 58%,#93A6CC 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite}
@keyframes sheen{from{background-position:100% 0}
to{background-position:-60% 0}
}
.vz .rollin{animation:roll 10s cubic-bezier(.7,0,.2,1) infinite}
@keyframes roll{0%,16%{transform:translateY(0)}
20%,36%{transform:translateY(-24px)}
40%,56%{transform:translateY(-48px)}
60%,76%{transform:translateY(-72px)}
80%,96%{transform:translateY(-96px)}
100%{transform:translateY(-120px)}
}
.vz .k1,.vz .k2,.vz .k3,.vz .k4,.vz .k5,.vz .k6,.vz .k7{border:1px solid rgba(150,170,220,.22);color:#8B96B0;background:transparent}
.vz .k1{animation:k1 14s ease-in-out infinite}
.vz .k2{animation:k2 14s ease-in-out infinite}
.vz .k3{animation:k3 14s ease-in-out infinite}
.vz .k4{animation:k4 14s ease-in-out infinite}
.vz .k5{animation:k5 14s ease-in-out infinite}
.vz .k6{animation:k6 14s ease-in-out infinite}
.vz .k7{animation:k7 14s ease-in-out infinite}
@keyframes k1{0%,6%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
9%,90%{color:#E4F2FF;background:color-mix(in oklab,var(--acc) 16%,transparent);border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
@keyframes k2{0%,17%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
20%,90%{color:#E4F2FF;background:color-mix(in oklab,var(--acc) 16%,transparent);border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
@keyframes k3{0%,28%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
31%,90%{color:#E4F2FF;background:color-mix(in oklab,var(--acc) 16%,transparent);border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
@keyframes k4{0%,39%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
42%,90%{color:#E4F2FF;background:color-mix(in oklab,var(--acc) 16%,transparent);border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
@keyframes k5{0%,50%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
53%,90%{color:#E4F2FF;background:color-mix(in oklab,var(--acc) 16%,transparent);border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
@keyframes k6{0%,61%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
64%,90%{color:#E4F2FF;background:color-mix(in oklab,var(--acc) 16%,transparent);border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
@keyframes k7{0%,72%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
75%,90%{color:#1A1204;background:#FFB547;border-color:#FFB547}
95%,100%{color:#8B96B0;background:transparent;border-color:rgba(150,170,220,.22)}
}
.vz .q1,.vz .q2,.vz .q3,.vz .q4{border:1px solid rgba(150,170,220,.3);color:#9AA4BC;background:#0B1020}
.vz .q1{animation:q1 8s ease-in-out infinite}
.vz .q2{animation:q2 8s ease-in-out infinite}
.vz .q3{animation:q3 8s ease-in-out infinite}
.vz .q4{animation:q4 8s ease-in-out infinite}
@keyframes q1{0%,8%{color:#9AA4BC;border-color:rgba(150,170,220,.3);box-shadow:none}
11%,90%{color:#07101C;background:var(--acc);border-color:var(--acc);box-shadow:0 0 28px color-mix(in oklab,var(--acc) 60%,transparent)}
95%,100%{color:#9AA4BC;background:#0B1020;border-color:rgba(150,170,220,.3);box-shadow:none}
}
@keyframes q2{0%,31%{color:#9AA4BC;border-color:rgba(150,170,220,.3);box-shadow:none}
34%,90%{color:#07101C;background:var(--acc);border-color:var(--acc);box-shadow:0 0 28px color-mix(in oklab,var(--acc) 60%,transparent)}
95%,100%{color:#9AA4BC;background:#0B1020;border-color:rgba(150,170,220,.3);box-shadow:none}
}
@keyframes q3{0%,53%{color:#9AA4BC;border-color:rgba(150,170,220,.3);box-shadow:none}
56%,90%{color:#07101C;background:var(--acc);border-color:var(--acc);box-shadow:0 0 28px color-mix(in oklab,var(--acc) 60%,transparent)}
95%,100%{color:#9AA4BC;background:#0B1020;border-color:rgba(150,170,220,.3);box-shadow:none}
}
@keyframes q4{0%,76%{color:#9AA4BC;border-color:rgba(150,170,220,.3);box-shadow:none}
79%,90%{color:#1A1204;background:#FFB547;border-color:#FFB547;box-shadow:0 0 28px rgba(255,181,71,.55)}
95%,100%{color:#9AA4BC;background:#0B1020;border-color:rgba(150,170,220,.3);box-shadow:none}
}
.vz .how{position:relative}
.vz .spine{position:absolute;top:0;bottom:0;left:50%;width:12px;margin-left:-6px;overflow:hidden}
.vz .spine::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:rgba(150,170,220,.16)}
.vz .comet{position:absolute;left:4px;width:4px;height:160px;border-radius:2px;background:linear-gradient(180deg,transparent,var(--acc) 65%,#FFB547);animation:comet 8s linear infinite}
@keyframes comet{0%{top:-160px;opacity:1}
90%{top:100%;opacity:1}
100%{top:100%;opacity:0}
}
.vz .hrow{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:32px;align-items:center}
.vz .ha{grid-column:1;grid-row:1;text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.vz .hnode{grid-column:2;grid-row:1;display:flex;justify-content:center;position:relative}
.vz .hb{grid-column:3;grid-row:1;width:100%;max-width:440px}
.vz .flip .ha{grid-column:3;text-align:left;align-items:flex-start}
.vz .flip .hb{grid-column:1;justify-self:end}
@media (max-width:760px){.vz .spine{left:24px}
.vz .hrow{grid-template-columns:48px minmax(0,1fr);gap:14px 18px}
.vz .ha,.vz .flip .ha{grid-column:2;grid-row:1;text-align:left;align-items:flex-start}
.vz .hb,.vz .flip .hb{grid-column:2;grid-row:2;justify-self:start}
.vz .hnode{grid-column:1;grid-row:1 / span 2;align-self:start}

}
.vz .fa{animation:fa 8s ease-out infinite}
.vz .fb{animation:fb 8s ease-out infinite}
.vz .fc{animation:fc 8s ease-out infinite}
.vz .fd{animation:fd 8s ease-out infinite}
@keyframes fa{0%,6%{opacity:0;transform:translateY(6px)}
12%,92%{opacity:1;transform:none}
100%{opacity:0}
}
@keyframes fb{0%,22%{opacity:0;transform:translateY(6px)}
28%,92%{opacity:1;transform:none}
100%{opacity:0}
}
@keyframes fc{0%,38%{opacity:0;transform:translateY(6px)}
44%,92%{opacity:1;transform:none}
100%{opacity:0}
}
@keyframes fd{0%,54%{opacity:0;transform:translateY(6px)}
60%,92%{opacity:1;transform:none}
100%{opacity:0}
}
.vz .type{display:inline-block;overflow:hidden;white-space:nowrap;width:32ch;vertical-align:bottom;animation:type 8s steps(32) infinite}
@keyframes type{0%,8%{width:0}
30%,92%{width:32ch}
100%{width:0}
}
.vz .caret{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}
}
.vz .tog{background:#FFB547;animation:tog 8s ease-in-out infinite}
@keyframes tog{0%,45%{background:#2A3350}
52%,92%{background:#FFB547}
100%{background:#2A3350}
}
.vz .knob{left:21px;animation:knob 8s ease-in-out infinite}
@keyframes knob{0%,45%{left:3px}
52%,92%{left:21px}
100%{left:3px}
}
.vz .mover{position:absolute;animation:mover 9s ease-in-out infinite}
@keyframes mover{0%{left:1%;opacity:0}
6%,26%{left:1%;opacity:1}
38%,56%{left:35%;opacity:1}
68%,88%{left:69%;opacity:1}
96%,100%{left:69%;opacity:0}
}
.vz .ping{animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,181,71,.65)}
100%{box-shadow:0 0 0 10px rgba(255,181,71,0)}
}
.vz.still *{animation:none !important}
@media (prefers-reduced-motion: reduce){.vz *{animation:none !important}
}
html{scroll-behavior:smooth}
.vz .tab{background:transparent;color:#B8C2D8}
.vz .tab[aria-pressed="true"]{background:var(--acc);color:#07101C}
[hidden]{display:none !important}


/* The site's own form and type rules (hub.css) must not restyle the design. */
.vz label { display: revert; gap: revert; color: inherit; font-size: inherit; }
.vz .mono { font-size: inherit; }
.vz h1, .vz h2, .vz h3 { letter-spacing: normal; font-weight: 700; }
.vz input[type="text"], .vz input[type="number"] { min-height: 0; border-radius: 0; width: auto; }
.vz button, .vz a { -webkit-tap-highlight-color: transparent; }
.vz a[data-go] { cursor: pointer; }
.vz a[data-go="in"] { display: inline-flex; align-items: center; min-height: 44px; }
/* The hero's map: the product's own constellation (sky.js), for looking at only. */
.vz .hero-sky .sky-sun { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 0; filter: drop-shadow(0 0 14px rgba(255,170,80,0.55)) drop-shadow(0 0 40px rgba(255,140,60,0.25)); }
.vz .hero-sky .sky-haze { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; z-index: 0; background: radial-gradient(circle, rgba(255,214,160,0.16) 0%, rgba(255,190,120,0.10) 30%, rgba(255,160,90,0.05) 48%, transparent 66%); filter: blur(6px); }
.vz .hero-sky .sky-controls, .vz .hero-sky .sky-feed { display: none !important; }
/* Real screenshots of the product, with sample data. */
.vz .shot { position: relative; height: 230px; border-radius: 12px; background: #080C17; border: 1px solid rgba(150,170,220,.14); overflow: hidden; }
.vz .shot img { position: absolute; left: 0; top: 0; width: 185%; max-width: none; height: 100%; object-fit: cover; display: block; }
.vz .frame { margin: 0; border-radius: 16px; border: 1px solid rgba(150,170,220,.18); background: #080C17; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.vz .frame img { display: block; width: 100%; height: auto; }
.vz .points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vz .points li { display: flex; gap: 12px; align-items: flex-start; }
.vz .points .mark { color: #FFB547; line-height: 1.6; flex: none; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.vz .points b { display: block; color: #FFFFFF; font-weight: 600; font-size: 17px; }
.vz .points span { color: #B8C2D8; font-size: 16px; }
/* FAQ */
.vz .faq { display: grid; gap: 10px; }
.vz .faq details { border: 1px solid rgba(150,170,220,.16); border-radius: 14px; background: #0C1120; }
.vz .faq summary { cursor: pointer; padding: 18px 22px; min-height: 44px; font-weight: 600; font-size: 17px; color: #FFFFFF; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.vz .faq summary::-webkit-details-marker { display: none; }
.vz .faq summary::after { content: '+'; color: #7CC4FF; font: 500 22px 'IBM Plex Mono', ui-monospace, monospace; flex: none; }
.vz .faq details[open] summary::after { content: '−'; }
.vz .faq details p { padding: 0 22px 20px; color: #B8C2D8; font-size: 16px; }
.vz .faq summary:focus-visible { outline: 2px solid #7CC4FF; outline-offset: 2px; border-radius: 14px; }
.vz .frame { flex: 1.5 1 480px; min-width: 0; }
.vz .frame img { width: 150%; max-width: none; }
.vz .tab[data-period] { flex: 1 1 120px; }
/* The hero: the sky fills it, behind the text, dimmed where the text is. */
.vz .hero { display: flex; align-items: center; min-height: 760px; }
.vz .skystage { position: absolute; top: 50%; right: max(0px, calc(50% - 840px)); width: min(1500px, 104%); min-width: 1100px; aspect-ratio: 1000 / 640; transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 70%, transparent 100%); }
.vz .hero-sky { position: absolute; inset: 0; transition: transform .3s ease-out; }
.vz .hero-sky-stage { position: absolute; inset: 0; }
.vz .hero-sky .sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: auto; cursor: default; outline-offset: -6px; }
.vz .skydim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7,10,18,.70) 0%, rgba(7,10,18,.66) 40%, rgba(7,10,18,0) 60%); }
.vz .tip { position: absolute; z-index: 3; pointer-events: none; background: #0F1629; border: 1px solid rgba(124,196,255,.5); border-radius: 10px; padding: 10px 12px; width: max-content; max-width: 250px; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; animation: tipin .18s ease-out; }
@keyframes tipin { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }
.vz .skyhint { position: absolute; z-index: 2; left: max(24px, calc(50% - 576px)); bottom: 28px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8E99B3; display: flex; align-items: center; gap: 8px; pointer-events: none; }
@media (min-width: 1700px) { .vz .skystage { width: 86vw; right: -6vw; } }
@media (max-width: 820px) { .vz .hero { min-height: 0; } .vz .skystage { opacity: .32; } .vz .hero-sky .sky-canvas { pointer-events: none; } .vz .skyhint, .vz .tip { display: none !important; } }
/* The products showcase: three tabs, one large panel. */
.vz .ptab { cursor: pointer; position: relative; overflow: hidden; text-align: left; border: 1px solid rgba(150,170,220,.18); border-radius: 12px; padding: 14px 18px; min-height: 64px; flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; background: transparent; transition: background .25s ease, border-color .25s ease; }
.vz .ptab:hover { border-color: rgba(124,196,255,.5); }
.vz .ptab-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; color: #B8C2D8; }
.vz .ptab-sub { font-size: 14px; color: #8E99B3; }
.vz .ptab-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--acc); display: none; }
.vz .ptab[aria-pressed="true"] { background: rgba(124,196,255,.10); border-color: var(--acc); }
.vz .ptab[aria-pressed="true"] .ptab-name { color: #FFFFFF; } .vz .ptab[aria-pressed="true"] .ptab-sub { color: #B8C2D8; }
.vz .ptab[aria-pressed="true"] .ptab-bar { display: block; }
.vz .tbarA { animation: tbarA 6s linear forwards; } .vz .tbarB { animation: tbarB 6s linear forwards; }
@keyframes tbarA { from { width: 0; } to { width: 100%; } } @keyframes tbarB { from { width: 0; } to { width: 100%; } }
.vz .panelin { animation: panelin .5s cubic-bezier(.2,.8,.2,1); }
@keyframes panelin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.vz .pshot { position: relative; height: 420px; border-radius: 16px; background: #080C17; border: 1px solid rgba(150,170,220,.12); overflow: hidden; }
.vz .pshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .vz .pshot { height: 260px; } }