/* Vision: a poster. One number, said loud. Orange leads on this page. */

.vz-h2{font-size:clamp(2.35rem,9.6vw,4.4rem);font-weight:900;line-height:.97;letter-spacing:-.03em}

/* ---------- first screen: the poster fills it ---------- */
.vz-hero{position:relative;overflow:hidden}
.vz-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 70% at 8% -12%,rgba(255,255,255,.5),transparent 62%),radial-gradient(80% 70% at 104% 104%,rgba(160,70,0,.4),transparent 70%)}
.vz-hero__in{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:min(calc(100vh - 88px - var(--tabbar)),760px);min-height:min(calc(100svh - 88px - var(--tabbar)),760px);padding-block:clamp(26px,4.2vw,54px) clamp(26px,4.2vw,54px)}
.vz-h1{margin-top:18px;display:grid;font-size:clamp(2.95rem,16vw,7.6rem);font-weight:900;line-height:.89;letter-spacing:-.036em;max-width:none}
.vz-h1 span{display:block}
.vz-hero__foot{display:grid;gap:18px;padding-top:20px;border-top:5px solid var(--orange-ink)}
.vz-hero__goal{font:800 clamp(1.5rem,6vw,2.3rem)/1.08 var(--display);letter-spacing:-.014em;max-width:15ch;text-wrap:balance}

/* ---------- the math ---------- */
.vz-math__grid{display:grid;gap:30px}
.vz-math__grid>*{min-width:0}
.vz-sum{display:grid;font:900 clamp(2.5rem,12.4vw,4.9rem)/1.04 var(--display);letter-spacing:-.036em}
.vz-sum__row{display:grid;grid-template-columns:1.02em minmax(0,1fr);align-items:baseline}
.vz-sum__op{font-weight:800;color:var(--text-3)}
.vz-sum__v{white-space:nowrap}
.vz-sum__row--eq{margin-top:.14em;padding-top:.14em;border-top:5px solid var(--text);color:var(--orange-hi);text-shadow:0 0 46px rgba(255,138,36,.5)}
.vz-sum__row--eq .vz-sum__op{color:var(--orange-hi)}

/* one hundred glass cells on a gloss tile, like the tile in the logo. One is lit. */
.vz-cells{padding:clamp(16px,4.4vw,30px)}
.vz-cells__grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,1.35vw,9px)}
.vz-cells__grid i{position:relative;aspect-ratio:1;border-radius:24%;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.27)}
.vz-cells__grid i.on{z-index:1}
.vz-cells__grid i.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 34% 28%,#ffe3c2 0,#ffa64a 34%,#ee7411 68%,#b3560b 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42),0 0 20px rgba(255,138,36,.95),0 0 58px rgba(255,138,36,.6)}
.vz-cells__grid i.on::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(255,169,79,.9);opacity:0}
.vz-cells figcaption{margin-top:clamp(14px,3vw,22px);font-size:1.06rem;font-weight:700;color:var(--text);text-wrap:balance}
.vz-cells__grid i:nth-child(10n+2){--c:1}.vz-cells__grid i:nth-child(10n+3){--c:2}.vz-cells__grid i:nth-child(10n+4){--c:3}
.vz-cells__grid i:nth-child(10n+5){--c:4}.vz-cells__grid i:nth-child(10n+6){--c:5}.vz-cells__grid i:nth-child(10n+7){--c:6}
.vz-cells__grid i:nth-child(10n+8){--c:7}.vz-cells__grid i:nth-child(10n+9){--c:8}.vz-cells__grid i:nth-child(10n){--c:9}
.vz-cells__grid i:nth-child(n+11){--r:1}.vz-cells__grid i:nth-child(n+21){--r:2}.vz-cells__grid i:nth-child(n+31){--r:3}
.vz-cells__grid i:nth-child(n+41){--r:4}.vz-cells__grid i:nth-child(n+51){--r:5}.vz-cells__grid i:nth-child(n+61){--r:6}
.vz-cells__grid i:nth-child(n+71){--r:7}.vz-cells__grid i:nth-child(n+81){--r:8}.vz-cells__grid i:nth-child(n+91){--r:9}
.anim .vz-cells__grid i{opacity:0;transform:scale(.3)}
.anim .vz-cells.in .vz-cells__grid i{animation:vz-pop .46s var(--spring) both;animation-delay:calc((var(--r,0) + var(--c,0)) * 34ms + 160ms)}
.anim .vz-cells__grid i.on::after{opacity:0}
.anim .vz-cells.in .vz-cells__grid i.on::after{animation:vz-lit .7s 1.25s var(--ease) both}
.anim .vz-cells.in .vz-cells__grid i.on::before{animation:vz-ping 2.6s 2s ease-out infinite}
@keyframes vz-pop{to{opacity:1;transform:none}}
@keyframes vz-lit{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.28)}100%{opacity:1;transform:none}}
@keyframes vz-ping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.7)}}

.vz-less{padding-top:22px;border-top:1px solid var(--line-2)}
.vz-less p{font:800 clamp(1.75rem,7.2vw,2.7rem)/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance;max-width:14ch}

/* ---------- where it starts: west to east ---------- */
.vz-where__grid{display:grid;gap:22px;margin-top:clamp(22px,4vw,42px)}
.vz-where__grid>*{min-width:0}
.vz-map{position:relative;padding:12px 8px 62px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:radial-gradient(60% 70% at 12% 70%,rgba(99,217,54,.13),transparent 70%),radial-gradient(60% 70% at 88% 50%,rgba(255,138,36,.13),transparent 70%),radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(180deg,#121612,#070907);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -50px #000}
.vz-map__stage{position:relative}
.vz-map svg{width:100%;height:auto;overflow:visible}
.vz-map__l{position:absolute;display:grid;gap:6px;justify-items:start}
.vz-map__l b{font:800 clamp(1.08rem,3.6vw,1.5rem)/1.1 var(--display);color:var(--text);white-space:nowrap}
.vz-map__l--la{left:3.5%;top:calc(71.3% + clamp(18px,4.4vw,40px))}
.vz-map__l--ny{right:3.5%;top:calc(50% + clamp(18px,4.4vw,40px));justify-items:end}
.vz-map__dots circle,.vz-map__ring,.vz-map__pt{transform-box:fill-box;transform-origin:center}
.vz-map__trav{opacity:0;transform-origin:323.36px 349.87px}
.anim .vz-map__dots circle{opacity:0}
.anim .vz-map.in .vz-map__dots circle{animation:vz-dot .34s var(--ease) both;animation-delay:calc(var(--i) * 46ms + 420ms)}
.anim .vz-map__pt--ny{opacity:0}
.anim .vz-map.in .vz-map__pt--ny{animation:vz-pt .6s 1.86s var(--spring) both}
.anim .vz-map.in .vz-map__ring{animation:vz-ring 2.8s 2.4s ease-out infinite}
.anim .vz-map.in .vz-map__trav{animation:vz-trav 1.5s .36s linear both}
.anim .vz-map__l--ny{opacity:0}
.anim .vz-map.in .vz-map__l--ny{animation:vz-fade .5s 2s var(--ease) both}
@keyframes vz-dot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes vz-pt{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes vz-ring{0%{opacity:.95;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.5)}}
@keyframes vz-trav{0%{opacity:0;transform:rotate(0deg)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:rotate(107.75deg)}}
@keyframes vz-fade{from{opacity:0}to{opacity:1}}
.vz-coasts{display:grid;gap:18px}
.vz-coast{padding-top:14px;border-top:4px solid var(--green)}
.vz-coast--e{border-top-color:var(--orange)}
.vz-coast h3{font-size:clamp(1.3rem,4.6vw,1.7rem)}
.vz-coast p{margin-top:7px;color:var(--text-2);line-height:1.46}
@media (min-width:372px){.vz-coasts{grid-template-columns:1fr 1fr;gap:16px}}

/* ---------- why now: the bright band ---------- */
.vz-why__grid{display:grid;gap:28px}
.vz-why__h{font-size:clamp(3.4rem,17vw,7.2rem);line-height:.88;letter-spacing:-.04em}
.vz-why__h::after{content:"";display:block;width:1.7em;height:.15em;margin-top:.2em;border-radius:99px;background:linear-gradient(180deg,#ffbd7c 0,#ff8f2d 46%,#ee7410 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 22px -10px rgba(238,116,16,.9)}
.vz-why__list{display:grid}
.vz-why__list li{padding:20px 0 22px;border-top:4px solid #0b0e0b}
.vz-why__list li:last-child{border-bottom:4px solid #0b0e0b}
.vz-why__list p{font:800 clamp(1.55rem,6.4vw,2.35rem)/1.08 var(--display);letter-spacing:-.016em;text-wrap:balance;max-width:21ch}

/* ---------- the plan: a path that snakes down the page ---------- */
.vz-path{--gap:36px;display:grid;gap:var(--gap);margin-top:clamp(26px,4.6vw,50px)}
.vz-step{position:relative;width:86%;--c:var(--green);--c-hi:var(--green-hi);--c-glow:rgba(99,217,54,.34)}
.vz-step--o{--c:var(--orange);--c-hi:var(--orange-hi);--c-glow:rgba(255,138,36,.34)}
.vz-step:nth-child(even){justify-self:end}
.vz-step__a{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h n" "p p" "go go";gap:6px 12px;justify-items:start;padding:16px 20px 20px;border-radius:var(--r-lg);color:var(--text);text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.022));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -56px 64px -48px var(--c-glow),0 30px 60px -42px #000;transition:transform var(--t-2) var(--ease),border-color var(--t-2)}
.vz-step__a:hover{transform:translateY(-4px);border-color:var(--line-3)}
.vz-step__n{grid-area:n;justify-self:end;margin-right:-4px;font:900 clamp(5.2rem,23vw,7.2rem)/.84 var(--display);letter-spacing:-.05em;color:var(--c-hi);text-shadow:0 0 34px var(--c-glow);font-variant-numeric:lining-nums}
.vz-step h3{grid-area:h;align-self:end;padding-bottom:4px;font-size:clamp(1.5rem,5.6vw,1.85rem)}
.vz-step p{grid-area:p;color:var(--text-2);max-width:28ch}
.vz-step__go{grid-area:go;display:inline-flex;align-items:center;min-height:30px;margin-top:4px;font-weight:700;color:var(--c-hi)}
.vz-step:not(:last-child)::after{content:"";position:absolute;z-index:-1;top:50%;bottom:calc(var(--gap) * -1);left:100%;width:8.14%;border:3px dotted var(--c);border-left:0;border-bottom:0;border-top-right-radius:30px}
.vz-step:nth-child(even):not(:last-child)::after{left:auto;right:100%;border:3px dotted var(--c);border-right:0;border-bottom:0;border-top-left-radius:30px;border-top-right-radius:0}

/* ---------- closing ---------- */
.vz-dream{display:grid;gap:22px;justify-items:start;padding:clamp(30px,6.4vw,70px) clamp(22px,5.4vw,64px) clamp(28px,6vw,64px)}
.vz-dream__q{font-size:clamp(2.7rem,12vw,5.8rem);font-weight:900;line-height:.93;letter-spacing:-.034em;max-width:10ch}
.vz-dream figcaption{display:flex;align-items:center;gap:11px;font-size:1.06rem;color:var(--text-2)}
.vz-dream figcaption strong{font:800 1.34rem/1.2 var(--display);color:var(--text)}
.vz-dream figcaption .coin{font-size:1.5rem}
.vz-quiet{margin-top:22px;font-size:.92rem;font-weight:500;color:var(--text-3);text-align:center}

/* ---------- wider screens ---------- */
@media (min-width:760px){
  .vz-hero__foot{grid-template-columns:1fr auto;align-items:end;gap:30px}
  .vz-hero__goal{max-width:none}
  .vz-map{padding:22px 22px 30px}
  .vz-coasts{gap:28px}
}
@media (min-width:980px){
  .vz-math__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"h cells" "sum cells" "less cells";grid-template-rows:auto auto 1fr;gap:26px 64px;align-items:start}
  .vz-math__h{grid-area:h}
  .vz-sum{grid-area:sum}
  .vz-cells{grid-area:cells;align-self:center}
  .vz-less{grid-area:less;margin-top:10px}
  .vz-less p{max-width:none}

  .vz-where__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:44px;align-items:center}
  .vz-coasts{grid-template-columns:1fr;gap:34px}

  .vz-why__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:64px;align-items:start}
  .vz-why__list p{max-width:24ch}

  .vz-path{--gap:0px}
  .vz-step{width:46%}
  .vz-step+.vz-step{margin-top:-44px}
  .vz-step__a{padding:20px 28px 26px}
  .vz-step__n{font-size:8.6rem}
  .vz-step:not(:last-child)::after{bottom:44px;width:67.4%;border-top-right-radius:44px}
  .vz-step:nth-child(even):not(:last-child)::after{border-top-left-radius:44px}
}