/* Products overview */
.pr{--p-ink:var(--jv-ink);--p-mute:var(--jv-ink-mute);--p-acc:var(--jv-navy);--p-bg:var(--jv-canvas);--p-alt:var(--jv-canvas-soft);--p-card:var(--jv-surface);--p-line:var(--jv-border);--p-soft:var(--jv-mint-soft);--p-g:#2e9d74;--p-a:#d97b1c;--p-b:#3d6fd1}
html.dark .pr{--p-acc:var(--jv-mint);--p-soft:rgba(144,208,186,.1);--p-g:#5fcf9f;--p-a:#f0a24d;--p-b:#8fb0ff}
.pr *{box-sizing:border-box}
.pr h1,.pr h2,.pr h3{font-family:var(--jv-font-display);color:var(--p-ink)}
.pr svg{max-width:100%}
.pr-kick{display:inline-flex;align-items:center;gap:8px;font:600 .78rem/1 var(--jv-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-acc)}
.pr-kick::before{content:"";width:22px;height:2px;background:currentColor}
.pr-sec{padding:84px 0}.pr-alt{background:var(--p-alt)}
.pr-head{max-width:760px;margin-bottom:38px}.pr-head--c{margin-inline:auto;text-align:center}
.pr-head h2{margin:12px 0 0;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.025em}
.pr-head p{margin:14px 0 0;color:var(--p-mute);font-size:1.05rem;line-height:1.6}
.pr-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--p-soft);color:var(--p-acc)}
.pr-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-ic--lg{width:72px;height:72px;border-radius:20px}.pr-ic--lg svg{width:34px;height:34px}
.pr-ghost{display:inline-flex;align-items:center;padding:14px 26px;border:1.5px solid var(--p-line);border-radius:99px;font-weight:600;color:var(--p-ink);background:var(--p-card)}
.pr-ghost:hover{border-color:var(--p-acc)}
.pr-st{font:700 .68rem var(--jv-font-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px;white-space:nowrap}
.pr-st--ready{background:rgba(46,157,116,.14);color:var(--p-g)}
.pr-st--soon{background:rgba(217,123,28,.16);color:var(--p-a)}
.pr-st--progress{background:rgba(61,111,209,.14);color:var(--p-b)}

/* hero */
.pr-hero{position:relative;overflow:hidden;padding:64px 0 70px;background:var(--p-bg)}
.pr-hero>.jv-wrap{position:relative;z-index:1}
.pr-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:prd 20s ease-in-out infinite}
.pr-blob--1{width:460px;height:460px;right:-90px;top:-100px;background:var(--p-soft);opacity:.9}
.pr-blob--2{width:380px;height:380px;left:-120px;bottom:-140px;background:rgba(144,208,186,.32);animation-delay:-10s}
@keyframes prd{50%{transform:translate(40px,28px) scale(1.12)}}
.pr-hero h1{margin:16px 0 0;max-width:880px;font:800 clamp(2rem,4.4vw,3.5rem)/1.08 var(--jv-font-display);letter-spacing:-.03em}
.pr-hero h1 em{display:block;font-style:normal;color:var(--p-acc)}
.pr-lead{margin:18px 0 0;max-width:640px;font-size:1.12rem;line-height:1.65;color:var(--p-mute)}
.pr-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pr-hero .pr-kick,.pr-hero h1,.pr-lead,.pr-hero__cta{animation:pru .8s cubic-bezier(.2,.7,.2,1) both}
.pr-hero h1{animation-delay:.07s}.pr-lead{animation-delay:.14s}.pr-hero__cta{animation-delay:.21s}
@keyframes pru{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.pr-orbit{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;margin:44px 0 0;padding:0;position:relative}
.pr-orbit::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:repeating-linear-gradient(90deg,var(--p-line) 0 6px,transparent 6px 12px);z-index:0}
.pr-orb{position:relative;z-index:1;animation:pru .7s calc(.3s + var(--i)*.09s) cubic-bezier(.2,.7,.2,1) both}
.pr-orb a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 6px;text-align:center;color:var(--p-ink)}
.pr-orb span{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--p-card);border:2px solid var(--p-line);color:var(--p-acc);box-shadow:0 14px 28px -18px rgba(38,55,115,.5);transition:transform .3s,border-color .3s}
.pr-orb a:hover span{transform:translateY(-6px) scale(1.06);border-color:var(--jv-mint-strong)}
.pr-orb svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pr-orb b{font:700 .95rem var(--jv-font-display)}

/* grid */
.pr-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pr-filter button{padding:10px 18px;border:1px solid var(--p-line);border-radius:99px;background:var(--p-card);color:var(--p-ink);font:600 .88rem inherit;font-family:inherit;cursor:pointer;transition:all .2s}
.pr-filter button:hover{border-color:var(--jv-mint-strong)}
.pr-filter button.is-on{background:var(--jv-navy);border-color:var(--jv-navy);color:#fff}
html.dark .pr-filter button.is-on{background:var(--jv-mint);border-color:var(--jv-mint);color:var(--jv-navy-ink)}
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pr-card{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--p-card);border:1px solid var(--p-line);transition:transform .35s,border-color .35s,box-shadow .35s}
.pr-card:hover{transform:translateY(-6px);border-color:var(--jv-mint-strong);box-shadow:0 30px 56px -34px rgba(38,55,115,.55)}
.pr-card[hidden]{display:none}
.pr-card--hero{grid-column:1/-1;flex-direction:row}
.pr-card--hero .pr-card__vis{flex:1.25;aspect-ratio:auto;min-height:340px}
.pr-card--hero .pr-card__body{flex:1;padding:40px}
.pr-card--hero h2{font-size:2.2rem}
.pr-card__vis{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--p-alt)}
.pr-card__vis img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s}
.pr-card:hover .pr-card__vis img{transform:scale(1.05)}
.pr-card__stage{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.92);color:#263773;font:700 .68rem var(--jv-font-mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
.pr-card__art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,var(--p-soft),transparent 70%),linear-gradient(135deg,var(--p-alt),var(--p-bg))}
.pr-card__art i{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px solid var(--jv-mint-strong);opacity:.4;transform:translate(-50%,-50%);animation:prr 4.5s ease-out infinite}
.pr-card__art i:nth-child(1){width:90px;height:90px}.pr-card__art i:nth-child(2){width:90px;height:90px;animation-delay:1.5s}.pr-card__art i:nth-child(3){width:90px;height:90px;animation-delay:3s}
@keyframes prr{to{width:300px;height:300px;opacity:0}}
.pr-card__art b{position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:26px;background:var(--jv-navy);color:#fff;box-shadow:0 24px 40px -20px rgba(38,55,115,.7);transition:transform .4s}
html.dark .pr-card__art b{background:var(--jv-mint);color:var(--jv-navy-ink)}
.pr-card:hover .pr-card__art b{transform:rotate(-6deg) scale(1.08)}
.pr-card__art b svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr-card__body{display:flex;flex-direction:column;gap:6px;padding:26px 28px 28px}
.pr-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pr-card h2{margin:0;font-size:1.7rem;letter-spacing:-.02em}
.pr-card__cat{margin:0;font:600 .78rem var(--jv-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--p-acc)}
.pr-card__tag{margin:8px 0 0;font-size:1.05rem;line-height:1.5;color:var(--p-ink);font-weight:600}
.pr-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.pr-card li{display:flex;gap:10px;color:var(--p-mute);font-size:.95rem;line-height:1.45}
.pr-card li svg{flex:none;width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--p-g);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pr-card__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-weight:700;color:var(--p-acc)}
.pr-card__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.pr-card:hover .pr-card__go svg{transform:translateX(5px)}
.pr-empty{padding:30px;text-align:center;color:var(--p-mute)}

/* flow */
.pr-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0;counter-reset:f;position:relative}
.pr-flow li a{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:24px;border-radius:20px;background:var(--p-card);border:1px solid var(--p-line);color:inherit;transition:transform .3s,border-color .3s}
.pr-flow li a:hover{transform:translateY(-5px);border-color:var(--jv-mint-strong)}
.pr-flow li:not(:last-child) a::after{content:"";position:absolute;right:-19px;top:50%;width:20px;height:2px;background:var(--jv-mint-strong)}
.pr-flow li:not(:last-child) a::before{content:"";position:absolute;right:-20px;top:calc(50% - 4px);border-left:7px solid var(--jv-mint-strong);border-block:5px solid transparent;z-index:2}
.pr-flow__n{position:absolute;right:18px;top:16px;font:800 1.6rem var(--jv-font-display);color:var(--p-line)}
.pr-flow h3{margin:6px 0 0;font-size:1.2rem}
.pr-flow p{margin:0;color:var(--p-mute);font-size:.94rem;line-height:1.55}
.pr-flow__n2{margin:26px 0 0;color:var(--p-mute)}
.pr-flow__n2 a{font-weight:700;color:var(--p-acc);text-decoration:underline}

/* picker */
.pr-pick{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;padding:26px;border-radius:26px;background:var(--p-card);border:1px solid var(--p-line);box-shadow:0 30px 60px -44px rgba(38,55,115,.5)}
.pr-pick__q{display:grid;gap:10px;align-content:start}
.pr-pick__q button{padding:16px 20px;border:1.5px solid var(--p-line);border-radius:16px;background:var(--p-bg);color:var(--p-ink);font:600 1rem inherit;font-family:inherit;text-align:left;cursor:pointer;transition:all .25s}
.pr-pick__q button:hover{border-color:var(--jv-mint-strong)}
.pr-pick__q button[aria-selected=true]{background:var(--jv-navy);border-color:var(--jv-navy);color:#fff;transform:translateX(6px)}
html.dark .pr-pick__q button[aria-selected=true]{background:var(--jv-mint);border-color:var(--jv-mint);color:var(--jv-navy-ink)}
.pr-pick__a{display:flex;gap:24px;align-items:center;padding:30px;border-radius:20px;background:radial-gradient(500px 260px at 100% 0,var(--p-soft),transparent 70%),var(--p-alt)}
.pr-pick__a[hidden]{display:none}
.pr-pick__a:not([hidden]){animation:pru .45s cubic-bezier(.2,.7,.2,1) both}
.pr-pick__why{margin:0;color:var(--p-mute);font-size:.95rem}
.pr-pick__a h3{margin:6px 0;font-size:2rem;letter-spacing:-.02em}
.pr-pick__a p{margin:0 0 4px;line-height:1.55}
.pr-pick__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* base */
.pr-base{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pr-base article{padding:26px;border-radius:20px;background:var(--p-card);border:1px solid var(--p-line)}
.pr-base h3{margin:16px 0 6px;font-size:1.1rem}.pr-base p{margin:0;color:var(--p-mute);font-size:.94rem;line-height:1.55}

/* reveal */
.pr-js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.pr-js [data-r].in{opacity:1;transform:none}
.pr-js .pr-card[data-r].in{transition:opacity .7s var(--d,0s),transform .35s,border-color .35s,box-shadow .35s}

@media (max-width:1000px){
  .pr-orbit{grid-template-columns:repeat(3,1fr)}.pr-orbit::before{display:none}
  .pr-grid{grid-template-columns:1fr}.pr-card--hero{flex-direction:column}.pr-card--hero .pr-card__vis{min-height:0;aspect-ratio:16/9}.pr-card--hero .pr-card__body{padding:26px 28px 28px}.pr-card--hero h2{font-size:1.9rem}
  .pr-flow,.pr-base{grid-template-columns:repeat(2,1fr)}.pr-flow li a::before,.pr-flow li a::after{display:none}
  .pr-pick{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pr-sec{padding:60px 0}.pr-orbit{grid-template-columns:repeat(2,1fr)}
  .pr-flow,.pr-base{grid-template-columns:1fr}
  .pr-pick__a{flex-direction:column;align-items:flex-start;padding:22px}.pr-pick__q button[aria-selected=true]{transform:none}
}
@media (prefers-reduced-motion:reduce){.pr *{animation:none!important;transition:none!important}.pr-js [data-r]{opacity:1;transform:none}}

/* listing v2: uniform bento */
.pr-grid{grid-template-columns:repeat(6,1fr);gap:24px}
.pr-card--big{grid-column:span 3}.pr-card--sm{grid-column:span 2}
.pr-card{border-radius:22px}
.pr-v{display:grid;place-items:center;aspect-ratio:16/10;padding:22px;background:radial-gradient(120% 90% at 100% 0,var(--p-soft),transparent 60%),linear-gradient(160deg,var(--p-alt),var(--p-bg));border-bottom:1px solid var(--p-line)}
.pr-card--sm .pr-v{aspect-ratio:16/11;padding:18px}
.pr-frame{display:block;width:100%;border-radius:12px;overflow:hidden;background:var(--p-card);border:1px solid var(--p-line);box-shadow:0 22px 40px -26px rgba(14,24,56,.55);transition:transform .5s}
.pr-card:hover .pr-frame{transform:translateY(-4px) scale(1.015)}
.pr-frame>i{display:flex;gap:5px;padding:8px 10px;background:var(--p-alt);border-bottom:1px solid var(--p-line)}
.pr-frame>i b{width:8px;height:8px;border-radius:50%;background:var(--p-line)}
.pr-frame img{display:block;width:100%;height:auto;background:#fff}
.pr-frame--mk{min-height:150px}
.pr-mk{display:block;padding:14px 16px}
.pr-mk__h{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--p-line)}
.pr-mk__h b{font:700 .9rem var(--jv-font-display);color:var(--p-ink)}
.pr-mk__h em{font:600 .62rem var(--jv-font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--p-mute)}
.pr-mk ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.pr-mk li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:var(--p-bg);border:1px solid var(--p-line);font-size:.8rem;color:var(--p-ink)}
.pr-mk li span{flex:1}
.pr-mk li i{width:9px;height:9px;border-radius:50%;flex:none}
.pr-mk li i.g{background:var(--p-g)}.pr-mk li i.a{background:var(--p-a)}.pr-mk li i.r{background:#d9482b;animation:prb 1.6s infinite}
@keyframes prb{50%{opacity:.35}}
.pr-mk u{text-decoration:none;font:700 .66rem var(--jv-font-mono);padding:3px 9px;border-radius:99px;white-space:nowrap}
.pr-mk u.ok{background:rgba(46,157,116,.14);color:var(--p-g)}.pr-mk u.wa{background:rgba(217,123,28,.16);color:var(--p-a)}.pr-mk u.bd{background:rgba(217,72,43,.14);color:#d9482b}
.pr-card__body{padding:24px 26px 26px}
.pr-card__top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pr-card__stage{position:static;padding:0;background:none;box-shadow:none;border-radius:0;font:600 .72rem var(--jv-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-mute)}
.pr-card__top .pr-st{margin-left:auto}
.pr-card h2{font-size:1.6rem}
.pr-card--sm h2{font-size:1.4rem}
.pr-card--sm .pr-card__tag{font-size:1rem}
#products.pr-sec{padding-top:40px}
.pr-hero{padding-bottom:36px}
@media (max-width:1100px){.pr-card--sm{grid-column:span 3}.pr-card--sm:last-child{grid-column:span 6}}
@media (max-width:760px){.pr-grid{grid-template-columns:1fr}.pr-card--big,.pr-card--sm,.pr-card--sm:last-child{grid-column:auto}}

.pr-svg{display:block;width:100%;height:auto;font-family:var(--jv-font-body)}
.pr-svg .sv-bg{fill:var(--p-bg)}.pr-svg .sv-side{fill:var(--p-alt)}
.pr-svg .sv-m rect{fill:var(--p-line)}.pr-svg .sv-k{fill:var(--p-card);stroke:var(--p-line)}
.pr-svg .sv-t{font-size:10px;fill:var(--p-mute)}.pr-svg text.sv-t{font-size:10px;fill:var(--p-mute)}
.pr-svg .sv-n{font-size:13px;font-weight:700;fill:var(--p-ink)}
.pr-svg .sv-a{fill:var(--jv-mint);opacity:.28}.pr-svg .sv-l{fill:none;stroke:var(--jv-navy);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:prl 2.4s .3s forwards}
.pr-svg .sv-d{fill:var(--jv-mint-strong,var(--jv-mint));stroke:var(--p-card);stroke-width:2}
.pr-svg .sv-b rect{fill:var(--jv-navy)}.pr-svg .sv-b rect[opacity]{fill:var(--p-line);opacity:1}
.pr-svg .sv-chip rect{fill:var(--p-bg);stroke:var(--p-line)}.pr-svg .sv-chip .sv-on{fill:var(--jv-mint);stroke:none}
.pr-svg .sv-ln,.pr-svg .sv-ln line{stroke:var(--p-line)}
.pr-svg .sv-ok{fill:rgba(46,157,116,.16)}.pr-svg .sv-lo{fill:rgba(217,123,28,.18)}
.pr-svg .sv-pt{font-size:9.5px;font-weight:700;text-anchor:middle;fill:var(--p-ink)}
.pr-svg .sv-w{fill:#d97b1c}
@keyframes prl{to{stroke-dashoffset:0}}