@charset "UTF-8";

/* ---- graphics from wireframes/zade-hero-wire-4 (2).html: story scene, wind-farm poster, card and popup illustrations ---- */
/* story scene */
@media print{.story-scene{position:static;height:300px}}
.story-scene{position:absolute;inset:6% 3% 6% 40%;display:flex;align-items:center;justify-content:center}

.L{opacity:0;transition:opacity .6s ease}
.story[data-step="1"] [data-on~="1"],.story[data-step="2"] [data-on~="2"],.story[data-step="3"] [data-on~="3"],.story[data-step="4"] [data-on~="4"]{opacity:1}

@media (max-width:900px){.story-scene{position:static;order:-1;flex:0 0 42%;min-height:0;padding:12px}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.sp,.sn-no,.L{transition:none}}

.story-scene{position:absolute;inset:4%;padding:0}
@media (max-width:900px){.story-scene{position:absolute;inset:3%;flex:none;padding:0}}
.story-scene{position:relative;inset:auto;flex:none;width:min(100%,calc((100vh - 150px) * 52 / 59));width:min(100%,calc((100svh - 150px) * 52 / 59));aspect-ratio:52 / 59;padding:clamp(8px,1vw,16px);border:1px solid var(--accent);border-radius:6px;background:var(--bg)}
@media (max-width:900px){.story-scene{position:relative;inset:auto;width:auto;height:100%;padding:6px}}
.story-stage .story-scene{margin:auto 0}
.story-scene{width:min(100%,calc((100vh - 340px) * 52 / 59));width:min(100%,calc((100svh - 340px) * 52 / 59))}
@media (max-width:900px){.story-stage .story-scene{order:0;flex:1 1 0;width:auto;height:auto;min-height:0;margin:0}}

.story-stage,.story-scene,.story-list,.pc,.pc-top,.pc-dots{border-color:var(--line)}
.story-stage,.story-scene,.story-list,.pc,.op{border-radius:0}
.story-scene{background:transparent;border-color:transparent}
.story-scene{--wf:#e4e4e4}

.story .story-stage .story-scene{padding:0}

.story-scene{--ink:#3c3c46}

.story-scene{--f-t:#fafafa;--f-l:#cfcfd3;--f-r:#b2b2b8;--f-acc-t:#8b8b95;--f-acc-l:#5d5d68;--f-acc-r:#3c3c46}

.story-scene{--ink:#1d1d1f}

.story .story-scene{transform:translateZ(0);contain:layout paint}

/* hero poster */
.hero-bg:has(.hero-poster) canvas{display:none}
.hero-bg.fx svg.hero-poster,.hero-bg svg.hero-poster{display:block;position:absolute;right:0;top:auto;bottom:calc(100% - var(--ground,100%));width:auto;height:var(--ground,100%);aspect-ratio:1440 / 700;overflow:visible}
.hero-poster .hp-f{stroke:none}
.hero-poster .hp-a .hp-f{fill:#dcdcdc}
.hero-poster .hp-b .hp-f{fill:#e5e5e5}
.hero-poster .hp-c .hp-f{fill:#ececec}
.hero-poster .hp-l{fill:none;stroke:#b9b9b9;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-poster .hp-b .hp-l{stroke:#c8c8c8}
.hero-poster .hp-c .hp-l{stroke:#d4d4d4}
.hero-poster .hp-d{fill:#b9b9b9;stroke:none}
.hero-poster .hp-b .hp-d,.hero-poster .hp-c .hp-d{fill:#cdcdcd}


.hero-poster .hp-rot{animation:spin 60s linear infinite}


@media (prefers-reduced-motion:reduce) and (max-width:0px){.hero-poster .hp-rot{animation:none}}
.hero-poster .hp-a .hp-f{fill:#d6d6d6}
.hero-poster .hp-a .hp-l{stroke:#adadad}
.hero-poster .hp-a .hp-d{fill:#a8a8a8}
.hero-poster .hp-d .hp-f{fill:#f0f0f0}
.hero-poster .hp-d .hp-l{stroke:#dcdcdc}
.hero-poster .hp-d .hp-d{fill:#dadada}

.hero-poster .hp-far{stroke:#d7d7d7}

.hero-poster .hp-mast{stroke:#b4b4b4}

.hero-poster .hp-fig{fill:#a6a6a6}
.hero-poster .hp-w{fill:none;stroke:#dfdfdf;stroke-width:1.2;vector-effect:non-scaling-stroke;animation:hpwind 12s linear infinite}
.hero-poster .hp-cups{animation:spin 5s linear infinite}
.hero-poster .hp-blink{animation:hpblink 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.hero-poster .hp-w,.hero-poster .hp-cups,.hero-poster .hp-blink{animation:none}}

.hero-bg.fx svg.hero-poster,.hero-bg svg.hero-poster{bottom:0;height:100%}


@media (max-width:720px){.hero-bg.fx svg.hero-poster,.hero-bg svg.hero-poster{transform-origin:100% var(--ground,100%);transform:scale(.6)}.hero-poster .hp-w{stroke:#e6e6e6}}


.hero-bg:has(.hero-poster) canvas{display:block}
.hero-poster .hp-t .hp-f{fill:none;stroke:#a9a9a9;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-poster .hp-b .hp-f{stroke:#b9b9b9}
.hero-poster .hp-c .hp-f{stroke:#c9c9c9}
.hero-poster .hp-d .hp-f{stroke:#d6d6d6}
.hero-poster .hp-a .hp-l{stroke:#8f8f8f}
.hero-poster .hp-b .hp-l{stroke:#a6a6a6}
.hero-poster .hp-c .hp-l{stroke:#bdbdbd}
.hero-poster .hp-t .hp-d{fill:#0b0b0b}
.hero-poster .hp-c .hp-d,.hero-poster .hp-d .hp-d{fill:#8c8c8c}




.hero-poster .hp-w{stroke:rgba(255,255,255,.13)}
.hero-poster .hp-far{stroke:rgba(255,255,255,.22)}

.hero-poster .hp-mast{stroke:rgba(255,255,255,.5)}
.hero-poster .hp-fig{fill:rgba(255,255,255,.55)}
.hero-poster .hp-t .hp-f{stroke:rgba(255,255,255,.36)}
.hero-poster .hp-b .hp-f{stroke:rgba(255,255,255,.28)}
.hero-poster .hp-c .hp-f{stroke:rgba(255,255,255,.2)}
.hero-poster .hp-d .hp-f{stroke:rgba(255,255,255,.14)}
.hero-poster .hp-a .hp-l{stroke:rgba(255,255,255,.34)}
.hero-poster .hp-b .hp-l{stroke:rgba(255,255,255,.24)}
.hero-poster .hp-c .hp-l,.hero-poster .hp-d .hp-l{stroke:rgba(255,255,255,.16)}
.hero-poster .hp-t .hp-d,.hero-poster .hp-c .hp-d,.hero-poster .hp-d .hp-d{fill:#fff}
@media (max-width:720px){.hero-poster .hp-w{stroke:rgba(255,255,255,.1)}}
.hero-poster .hp-w{stroke:rgba(255,255,255,.07)}


.hero-poster .hp-road{stroke:rgba(255,255,255,.26);stroke-dasharray:7 6}
.hero-poster .hp-road2{stroke:rgba(255,255,255,.05);stroke-width:7}
.hero-poster .hp-tree{stroke:rgba(255,255,255,.3)}


.hero-poster .hp-sub .hp-f{fill:#141414;stroke:rgba(255,255,255,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-poster .hp-sub .hp-l{stroke:rgba(255,255,255,.34)}

.hero-poster .hp-w,.hero-poster .hp-cont,.hero-poster .hp-bird,.hero-poster .hp-road2{display:none}
.hero-poster .hp-far{stroke:rgba(255,255,255,.13)}
.hero-poster .hp-tree{stroke:rgba(255,255,255,.16)}
.hero-poster .hp-road{stroke:rgba(255,255,255,.16)}



.hero-poster .hp-row{fill:#0b0b0b;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-poster .hp-rot{visibility:hidden;animation:none!important}
.hero-poster .hp-cups,.hero-poster .hp-blink,.hero-poster .hp-w{animation:none!important}
/* card + popup illustrations */
.card-face,.card-reveal{grid-area:1 / 1;display:flex;flex-direction:column;transition:opacity .45s ease,transform .45s ease}
.card-reveal{justify-content:space-between;gap:20px;opacity:0;transform:translateY(12px)}
.card-reveal p{margin:0;font-size:clamp(18px,1.3vw,24px);line-height:1.35;max-width:520px}
.card:hover .card-reveal,.card:focus-visible .card-reveal{opacity:1;transform:none}
.row-calm{stroke:var(--card);stroke-opacity:.28;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:14 16;animation:drift 6s linear infinite}
.row-wind{stroke:var(--card);stroke-opacity:.28;stroke-width:4;stroke-linecap:round;stroke-dasharray:46 18;animation:drift 1.2s linear infinite}
.play .row-wind{animation:drift 1.2s linear infinite, found 6s ease infinite}
.scan{transform:translate(70px,98px)}
.play .scan{animation:scan 6s cubic-bezier(.65,0,.25,1) infinite}
.ping{transform-box:fill-box;transform-origin:center;opacity:0}
.play .ping{animation:ping 6s ease-out infinite}
.play .sv-all{animation:svfade 6s ease infinite}
.tower{transform-box:fill-box;transform-origin:50% 100%}
.play .tower{animation:rise 6s cubic-bezier(.5,0,.2,1) infinite}
.play .nacelle{animation:pop 6s ease infinite}
.play .build{animation:grow 6s cubic-bezier(.3,1.4,.5,1) infinite}
.spin-fast{animation:spin 2.4s linear infinite}
@media (hover:none){.card-reveal{opacity:1;transform:none;justify-content:flex-start;gap:12px}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.rotor-k,.accel,.play .accel,.play .net,.play .node,.final .gust,
    .w-calm,.row.on .w-gust,.w-flow,.wv .rotor,.pill .pg,.pill .rotor,
    .spin,.spin-fast,.gust,.row-calm,.row-wind,.play .row-wind,.play .scan,.play .ping,.play .sv-all,.play .tower,.play .nacelle,.play .build{animation:none!important}.row-wind{stroke-opacity:1}.scan,.play .scan{transform:translate(250px,60px)}}
.ink .row-calm,.ink .row-wind{stroke:var(--fg)}
.vis-main svg{width:100%;max-width:560px;height:auto}
.card-reveal{flex-direction:row;align-items:center;justify-content:flex-start;gap:24px;padding-right:52px}
.card-reveal .anim{flex:0 0 42%;width:42%;max-width:240px;height:84px}
.card-reveal p{font-size:clamp(15px,1.15vw,19px)}
@media (hover:none){.card-reveal{gap:16px;padding-right:0}}
@media (max-width:720px){.card-reveal{flex-direction:column;align-items:flex-start}.card-reveal .anim{flex:none;width:100%;max-width:none}}
.vis-main{display:flex;align-items:center;justify-content:center;min-height:460px;background:var(--soft);padding:24px;text-align:center;color:var(--muted);font-size:14px}
@media (max-width:720px){.vis-main{min-height:260px}}
.sp-txt,.offer-desc,.arrows li,.why-big p,.why-proof,.talk p,.book p,.checks li,.op-how p,.fact,.card-reveal p,.did{font-size:clamp(15px,1.15vw,17px);line-height:1.5;letter-spacing:-.01em}
.offer-team,.why-big,.stat,.vis-main,.vis-stat,.vis-facts{background-color:var(--soft)!important}
.why-big,.stat,.case-card,.story-stage,.collage,.story-card,.vis-main,.vis-stat,.vis-facts{border:1px solid var(--line)}
.hero .row-calm,.hero .row-wind{stroke:#fff}
.hero .card-reveal .tower,.hero .card-reveal .nacelle,.hero .card-reveal .spin-fast path,.hero .card-reveal .build circle{fill:var(--night-2);stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke}
.mini,.vis-main{color:var(--fg)}
.vis-main .tower,.vis-main .nacelle,.vis-main .spin-fast path,.vis-main .build circle{fill:var(--soft);stroke:var(--fg);stroke-width:1.3;vector-effect:non-scaling-stroke}
.card-reveal{gap:clamp(20px,2.4vw,40px);padding-right:60px}
.card-reveal .anim{flex:0 0 40%;width:40%;max-width:300px;height:clamp(96px,13vh,130px)}
.card-reveal p{font-size:clamp(17px,1.4vw,23px)}
@media (hover:none){.card-reveal{padding-right:0}}
@media (max-width:720px){.card-reveal{gap:16px}.card-reveal .anim{flex:none;width:100%;max-width:none;height:84px}}
.vis-main{min-height:clamp(260px,30vw,380px)}
.hero .row-calm,.hero .row-wind{stroke:var(--fg)}
.hero .card-reveal .tower,.hero .card-reveal .nacelle,.hero .card-reveal .spin-fast path,.hero .card-reveal .build circle{fill:var(--soft);stroke:var(--fg)}
.card-reveal [stroke="#fff"]{stroke:var(--fg)}
.card-reveal [fill="#fff"]{fill:var(--fg)}
.card-reveal [fill^="rgba(12"]{fill:var(--soft)}
.pv text{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;fill:var(--muted)}













.op.play .pv-b0{animation:pvb0 10s linear infinite}
.op.play .pv-b1{animation:pvb1 10s linear infinite}
.op.play .pv-b2{animation:pvb2 10s linear infinite}
.op.play .pv-b3{animation:pvb3 10s linear infinite}
.op.play .pv-m0{animation:pvm0 10s linear infinite}
.op.play .pv-m1{animation:pvm1 10s linear infinite}
.op.play .pv-m2{animation:pvm2 10s linear infinite}
.op.play .pv-m3{animation:pvm3 10s linear infinite}



@media (prefers-reduced-motion:reduce) and (max-width:0px){.op.play .pv *{animation:none!important}}


@media (max-width:720px){.hero .card-reveal{gap:10px}.hero .card-reveal .anim{height:72px}.hero .card-reveal p{font-size:15px}.pv text{font-size:11px}}


@media (prefers-reduced-motion:reduce) and (max-width:0px){.offer-anim.play .scan{animation:none;transform:translate(80px,60px)}}

body .offer-desc.outcome,body .wl-card .wl-q,body .card-reveal p,body .op-lead,body .fund p,body .fund p b,body .final-sub,body .wl-logo span,body .hero .sub{font-size:18px}
body .offer-card .offer-out p.offer-desc.outcome,body .hero .card .card-reveal p{font-size:18px}
.hero .card,.case-card,.fund,.wl .wl-card,.wl .wl-logo,.wl .wl-photo,.reel .reel-ph,.op .vis-main,.op .vis-stat,.op .vis-facts{border-radius:var(--r)}
/* keyframes */
@keyframes antsway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes ascycle{0%{opacity:0}5%,28%{opacity:1}33.3%,100%{opacity:0}}
@keyframes barloop{0%{transform:scaleY(.12)}14%,80%{transform:scaleY(1)}92%,100%{transform:scaleY(.12)}}
@keyframes botblink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.12)}}
@keyframes botbob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes botmer{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
@keyframes botsh{from{transform:scale(1)}to{transform:scale(.82)}}
@keyframes cellbest{from{fill:var(--card)}to{fill:var(--accent)}}
@keyframes cellfill{from{fill:var(--card)}to{fill:var(--fg)}}
@keyframes drift{to{stroke-dashoffset:-60}}
@keyframes drift8{to{stroke-dashoffset:-8}}
@keyframes eyes2{0%,38%{transform:translate(3.5px,-1.5px)}50%,88%{transform:translate(1.2px,-3.2px)}100%{transform:translate(3.5px,-1.5px)}}
@keyframes eyes3{0%,25%{transform:translate(3.5px,1px)}35%,60%{transform:translate(3px,-2.5px)}70%,90%{transform:translate(3.8px,0)}100%{transform:translate(3.5px,1px)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes grow{0%,36%{transform:scale(0)}52%,100%{transform:scale(1)}}
@keyframes growonce{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes gust360{from{stroke-dashoffset:360}to{stroke-dashoffset:0}}
@keyframes gustfast{from{stroke-dashoffset:710}to{stroke-dashoffset:0}}
@keyframes gvcycle{0%{opacity:0}4%,21%{opacity:1}25%,100%{opacity:0}}
@keyframes hpblink{0%,55%,100%{opacity:1}70%,85%{opacity:.15}}
@keyframes hpwind{to{stroke-dashoffset:-90}}
@keyframes needle{0%,26%{transform:rotate(45deg)}33.3%,59%{transform:rotate(135deg)}66.6%,93%{transform:rotate(360deg)}100%{transform:rotate(405deg)}}
@keyframes pindrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes ping{0%,64%{opacity:0;transform:scale(1)}70%{opacity:.9}100%{opacity:0;transform:scale(2.6)}}
@keyframes pinloop{0%,76%{opacity:0;transform:translateY(-14px)}82%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes pkt{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes pop{0%,28%{opacity:0}36%,100%{opacity:1}}
@keyframes pvall{0%{opacity:0}4%,94%{opacity:1}100%{opacity:0}}
@keyframes pvb0{0%,8%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
@keyframes pvb1{0%,24%{transform:scaleX(0)}36%,100%{transform:scaleX(1)}}
@keyframes pvb2{0%,40%{transform:scaleX(0)}52%,100%{transform:scaleX(1)}}
@keyframes pvb3{0%,56%{transform:scaleX(0)}68%,100%{transform:scaleX(1)}}
@keyframes pvgo{0%,75%{fill:transparent;stroke:var(--line)}79%,100%{fill:var(--fg);stroke:var(--fg)}}
@keyframes pvgot{0%,75%{fill:var(--muted)}79%,100%{fill:var(--on-fg)}}
@keyframes pvm0{0%,20%{opacity:0}23%,100%{opacity:1}}
@keyframes pvm1{0%,36%{opacity:0}39%,100%{opacity:1}}
@keyframes pvm2{0%,52%{opacity:0}55%,100%{opacity:1}}
@keyframes pvm3{0%,68%{opacity:0}71%,100%{opacity:1}}
@keyframes pvscan{0%{opacity:0;transform:translate(20px,46px)}6%,8%{opacity:1;transform:translate(20px,46px)}20%{transform:translate(310px,46px)}24%{transform:translate(20px,98px)}36%{transform:translate(110px,98px)}40%{transform:translate(20px,150px)}52%{transform:translate(270px,150px)}56%{transform:translate(20px,202px)}68%,71%{opacity:1;transform:translate(220px,202px)}75%,100%{opacity:0;transform:translate(220px,202px)}}
@keyframes qfloat{from{transform:translateY(2px) rotate(-5deg)}to{transform:translateY(-4px) rotate(6deg)}}
@keyframes rd1{0%,36%{opacity:0}40%,94%{opacity:1}100%{opacity:0}}
@keyframes rd2{0%,10%{opacity:0}14%,94%{opacity:1}100%{opacity:0}}
@keyframes rd3{0%,64%{opacity:0}68%,94%{opacity:1}100%{opacity:0}}
@keyframes ringloop{0%,78%{opacity:0}84%,94%{opacity:1}100%{opacity:0}}
@keyframes ringpulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes rise{0%{transform:scaleY(0)}28%,100%{transform:scaleY(1)}}
@keyframes riseonce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rock{0%,100%{transform:rotate(-5deg)}40%{transform:rotate(9deg)}70%{transform:rotate(2deg)}}
@keyframes scan{
    0%{transform:translate(70px,98px)}
    22%{transform:translate(160px,22px)}
    44%{transform:translate(330px,98px)}
    66%,100%{transform:translate(250px,60px)}
  }
@keyframes scan-sq{0%{transform:translate(30px,98px)}22%{transform:translate(58px,22px)}44%{transform:translate(98px,98px)}66%,100%{transform:translate(80px,60px)}}
@keyframes scan1{0%,34%{opacity:0;transform:translateY(0)}36%{opacity:1;transform:translateY(0)}47%{opacity:1;transform:translateY(-74px)}49%,100%{opacity:0;transform:translateY(-74px)}}
@keyframes scan2{0%,8%{opacity:0;transform:translateY(0)}10%{opacity:1;transform:translateY(0)}21%{opacity:1;transform:translateY(-74px)}23%,100%{opacity:0;transform:translateY(-74px)}}
@keyframes scan3{0%,62%{opacity:0;transform:translateY(0)}64%{opacity:1;transform:translateY(0)}75%{opacity:1;transform:translateY(-74px)}77%,100%{opacity:0;transform:translateY(-74px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes svfade{0%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes sway-hard{0%,100%{transform:rotate(26deg)}50%{transform:rotate(58deg)}}
@keyframes sway-soft{0%,100%{transform:rotate(4deg)}50%{transform:rotate(14deg)}}
@keyframes tileloop{0%{opacity:0}5%,78%{opacity:.4}86%,100%{opacity:0}}
@keyframes wfbreath{from{opacity:1}to{opacity:.5}}
@keyframes wfcell{from{opacity:0}to{opacity:1}}
@keyframes wfpin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes zwalk{0%,12%{transform:translate(14px,6px)}42%,58%{transform:translate(76px,-4px)}88%,100%{transform:translate(14px,6px)}}
@keyframes zwalk16{0%{transform:translate(0,0)}8%,24%{transform:translate(-10px,-4px)}34%,50%{transform:translate(57px,-80px)}62%,92%{transform:translate(111px,-4px)}100%{transform:translate(0,0)}}

/* poster: light version of the black-ground rules */
  .hero .hero-bg::before{background:#fff}
  
  
  
  
  .hero-poster .hp-w{stroke:rgba(11,11,11,.13)}
  .hero-poster .hp-far{stroke:rgba(11,11,11,.22)}
  
  .hero-poster .hp-mast{stroke:rgba(11,11,11,.5)}
  .hero-poster .hp-fig{fill:rgba(11,11,11,.55)}
  .hero-poster .hp-t .hp-f{stroke:rgba(11,11,11,.36)}
  .hero-poster .hp-b .hp-f{stroke:rgba(11,11,11,.28)}
  .hero-poster .hp-c .hp-f{stroke:rgba(11,11,11,.2)}
  .hero-poster .hp-d .hp-f{stroke:rgba(11,11,11,.14)}
  .hero-poster .hp-a .hp-l{stroke:rgba(11,11,11,.34)}
  .hero-poster .hp-b .hp-l{stroke:rgba(11,11,11,.24)}
  .hero-poster .hp-c .hp-l,.hero-poster .hp-d .hp-l{stroke:rgba(11,11,11,.16)}
  .hero-poster .hp-t .hp-d,.hero-poster .hp-c .hp-d,.hero-poster .hp-d .hp-d{fill:#0b0b0b}
  .hero-poster .hp-w{stroke:rgba(11,11,11,.1)}
  .hero-poster .hp-w{stroke:rgba(11,11,11,.07)}
  
  
  .hero-poster .hp-road{stroke:rgba(11,11,11,.26);stroke-dasharray:7 6}
  .hero-poster .hp-road2{stroke:rgba(11,11,11,.05);stroke-width:7}
  .hero-poster .hp-tree{stroke:rgba(11,11,11,.3)}
  
  
  .hero-poster .hp-sub .hp-f{fill:#fff;stroke:rgba(11,11,11,.34);stroke-width:1;vector-effect:non-scaling-stroke}
  .hero-poster .hp-sub .hp-l{stroke:rgba(11,11,11,.34)}
  
  .hero-poster .hp-w,.hero-poster .hp-cont,.hero-poster .hp-bird,.hero-poster .hp-road2{display:none}
  .hero-poster .hp-far{stroke:rgba(11,11,11,.13)}
  .hero-poster .hp-tree{stroke:rgba(11,11,11,.16)}
  .hero-poster .hp-road{stroke:rgba(11,11,11,.16)}
  
  
  
  .hero-poster .hp-row{fill:#fff;stroke:rgba(11,11,11,.2);stroke-width:1;vector-effect:non-scaling-stroke}
  .hero .hero-bg::before{background:#fff}
  .hero-poster .hp-rot{visibility:hidden;animation:none!important}
  .hero-poster .hp-cups,.hero-poster .hp-blink,.hero-poster .hp-w{animation:none!important}
/* ===== Zade · styles/zade.DESIGN.md ===== */
:root{
  --bg:#fff;--ink:#0b0b0b;--fg:#0b0b0b;--fg-2:#4a4a4a;--fg-3:#6b6b6b;--mute:#b9b9b9;
  --line:#0b0b0b;--line-l:#e3e3e3;--soft:#f7f7f7;--dim:#ededed;--card:#fff;--block:#ededed;
  --muted:#6b6b6b;--accent:#0b0b0b;--night:#fff;--night-2:#f7f7f7;--on-fg:#fff;
  --hot:#ff560a;
  --sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--disp:var(--sans);
  --gut:24px;--r:8px;--nav:67px;
  --sec-t:clamp(48px,26.3px + 5.57vw,96px);--sec-b:clamp(64px,30.6px + 8.57vw,128px);
  --ease-io:cubic-bezier(.5,0,.2,1);--ease-out:cubic-bezier(0,0,0,1);--ease-back:cubic-bezier(.275,.6,.16,1.24);
}
@supports (color:color(display-p3 1 0 0)){:root{--hot:#ff560a}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg{display:block}
::selection{background:var(--hot);color:var(--ink)}
:focus-visible{outline:2px solid #0052ef;outline-offset:3px}
.wrap{padding-inline:var(--gut)}

/* ---------- type (§E) ---------- */
.h1{margin:0;font-size:clamp(50px,26.97px + 5.905vw,112px);line-height:1;font-weight:400;letter-spacing:-.04em}
.h2{margin:0;font-size:clamp(42px,30.86px + 2.857vw,72px);line-height:1;font-weight:400;letter-spacing:-.04em}
.h2s{margin:0;font-size:clamp(38px,34.29px + .952vw,48px);line-height:1.075;font-weight:400;letter-spacing:-.035em}
.h3{margin:0;font-size:clamp(28px,24.29px + .952vw,38px);line-height:1.1;font-weight:400;letter-spacing:-.03em}
.h4{margin:0;font-size:clamp(22px,21.26px + .19vw,24px);line-height:1.1;font-weight:400;letter-spacing:-.01em}
.lead{margin:0;font-size:clamp(20px,18.51px + .381vw,24px);line-height:1.2;letter-spacing:-.01em}
.body-l{font-size:18px;line-height:23.4px;letter-spacing:-.01em}
.mono,.eyebrow{font:400 13px/16.9px var(--mono);text-transform:uppercase;letter-spacing:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.fg2{color:var(--fg-2)}.fg3{color:var(--fg-3)}

/* ---------- buttons: Sanity capsules + Patch label roll ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:45px;padding:0 32px;border:1px solid var(--ink);border-radius:99999px;background:transparent;color:var(--ink);font:400 13px/1 var(--mono);text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.btn--md{height:35px;padding:0 12px}
.btn--brand{background:var(--hot);border-color:var(--hot)}
.btn--brand:hover{background:var(--ink);border-color:var(--ink);color:var(--hot)}



.btn .av{width:25px;height:25px;margin-left:-7px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:7px;letter-spacing:.04em}
.btn--brand:hover .av{background:var(--hot);color:var(--ink)}
.roll{display:inline-grid;overflow:hidden}
.roll>span{grid-area:1/1;transition:transform .4s var(--ease-io)}
.roll>span+span{transform:translateY(110%)}
@media (hover:hover){.btn:hover .roll>span:first-child{transform:translateY(-110%)}.btn:hover .roll>span+span{transform:none}}

/* ---------- Patch pieces: block with a head bar, section counter ---------- */
.blk{position:relative;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.bar{display:flex;align-items:stretch;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--line);transition:background-color .3s var(--ease-io),color .3s var(--ease-io)}
.bar>.mono{display:flex;align-items:center;gap:12px;padding:0 20px}
.bar .cell{display:grid;place-items:center;flex:none;width:56px;border:0;border-left:1px solid var(--line);background:none;font-size:20px;line-height:1;cursor:pointer;transition:background-color .3s var(--ease-io),color .3s var(--ease-io)}
.ctr{position:relative;display:inline-block;flex:none;width:56px;height:56px;border:1px solid var(--line);overflow:hidden}
.ctr::before{content:"";position:absolute;top:50%;left:-50%;width:200%;border-top:1px solid var(--line);transform:rotate(45deg)}
.ctr::after{content:attr(data-n);position:absolute;left:6px;bottom:5px;font:400 13px/1 var(--mono)}




/* ---------- reveal (Patch timings, §F) ---------- */
.h-line{display:block}
html.js [data-anim="h"] .h-line{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
html.js [data-anim="h"] .h-word{display:inline-block;transform:translateY(75%) rotateX(-88deg);transform-origin:50% 75%}
html.js [data-anim="h"].in .h-word{transform:none;transition:transform .7s var(--ease-out)}
html.js [data-anim="up"]{opacity:0;transform:translateY(24px)}
html.js [data-anim="up"].in{opacity:1;transform:none;transition:opacity .3s ease-in-out,transform .5s var(--ease-out)}
html.js .slide{opacity:0;transform:translateX(-120px)}
html.js .slide.in{opacity:1;transform:none;transition:transform .8s var(--ease-back) .2s,opacity .3s ease .2s}
html.js .ctr::before{transform:rotate(-135deg)}
html.js .ctr::after{transform:translateY(24px)}
html.js .in .ctr::before,html.js .ctr.in::before{transform:rotate(45deg);transition:transform 1s cubic-bezier(.5,0,0,1)}
html.js .in .ctr::after,html.js .ctr.in::after{transform:none;transition:transform .6s var(--ease-io) .2s}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;height:var(--nav);background:#fff;border-bottom:1px solid transparent;transition:border-color .2s ease}
.top.stuck{border-bottom-color:var(--line-l)}
.nav{display:flex;align-items:center;gap:32px;height:100%}
.logo{font:500 24px/1 var(--sans);letter-spacing:-.04em}
.nav-links{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.nav-links a{position:relative;display:flex;align-items:center;height:35px;padding:0 12px;border-radius:99999px;font:400 13px/1 var(--mono);text-transform:uppercase;overflow:hidden;isolation:isolate}
.nav-links a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dim);transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s var(--ease-io)}
.nav-links a:hover::before{transform:none}
.nav .btn{margin-left:auto}
@media (max-width:720px){.nav-links{display:none}.nav .btn .more{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100vh - var(--nav));min-height:calc(100svh - var(--nav));padding-top:clamp(40px,8vh,96px);padding-bottom:var(--gut);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;--fx-ink:11,11,11;--fx-a:11,11,11;--fx-b:121,121,121;--fx-hi:255,85,0;--fx-glow:0}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,0) 58%)}
.hero-copy{max-width:min(1180px,100%)}
.hero .h1{font-size:clamp(44px,28.5px + 4.03vw,88px)}
.hero .h1 .h1-b{color:var(--fg-3)}
.hero .sub{max-width:24em;margin-top:28px}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:auto;padding-top:56px}
.cards-lab{grid-column:1/-1;margin:0}
.card{display:flex;flex-direction:column;width:100%;min-height:clamp(200px,24vh,260px);padding:0;text-align:left;cursor:pointer}
.card .body{position:relative;display:grid;flex:1;padding:24px 20px 22px}
.card-face,.card-reveal{grid-area:1/1;display:flex;transition:opacity .45s ease,transform .45s ease}
.card .card-face{flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0}
.card .card-reveal{flex-direction:row;align-items:center;gap:28px;padding:0;opacity:0;transform:translateY(12px)}
.card-reveal .anim{flex:0 0 38%;width:38%;max-width:280px;height:auto;overflow:visible}
.card-reveal p{margin:0;max-width:26em}
.card:hover .bar,.card:focus-visible .bar{background:var(--ink);color:#fff}
.card:hover .cell,.card:focus-visible .cell{background:var(--hot);color:var(--ink);border-color:var(--hot)}
.card:hover .card-face,.card:focus-visible .card-face{opacity:0;transform:translateY(-12px)}
.card:hover .card-reveal,.card:focus-visible .card-reveal{opacity:1;transform:none}
@media (hover:none){.card .body{display:flex;flex-direction:column;gap:14px}.card .card-reveal{opacity:1;transform:none}.card:hover .card-face{opacity:1;transform:none}.card:hover .bar{background:none;color:inherit}.card:hover .cell{background:none;color:inherit;border-color:var(--line)}}
@media (max-width:900px){
  .card .card-reveal{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-bg::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.2) 75%,#fff 100%)}
  .cards{grid-template-columns:1fr}
  .card-reveal{flex-direction:column;align-items:flex-start;gap:10px}.card-reveal .anim{width:100%;max-width:none;height:72px}
}

/* ---------- process ---------- */
.process{padding-top:var(--sec-t)}
.story{position:relative;height:400vh;height:400svh}
.story-pin{position:sticky;top:var(--nav);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;height:calc(100vh - var(--nav));height:calc(100svh - var(--nav));padding-block:24px}
.steps{display:flex;flex-direction:column;justify-content:center;margin:0;padding:0;list-style:none}
.steps li{border-top:1px solid var(--line-l)}
.steps li:last-child{border-bottom:1px solid var(--line-l)}
.sl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:baseline;width:100%;padding:clamp(16px,3vh,28px) 0;border:0;background:none;text-align:left;cursor:pointer}
.sl-no{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink);font:400 13px/1 var(--mono);transition:background-color .3s var(--ease-io),color .3s var(--ease-io),border-color .3s var(--ease-io)}
.sl[aria-current="step"] .sl-no{background:var(--hot);border-color:var(--hot)}
.sl.past .sl-no{background:var(--ink);color:#fff}
.sl-t{font-size:clamp(22px,18px + 1.05vw,32px);line-height:1.12;letter-spacing:-.025em}
.sl-t .w{display:inline-block;white-space:pre}
.sl-t .c{color:rgba(11,11,11,.22)}
.sl-t .c.on{color:var(--ink)}
.sl.past .sl-t .c.on{color:var(--fg-3)}
.sl:hover .sl-t .c:not(.on){color:rgba(11,11,11,.4)}
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:20px}
.prog i{height:2px;background:var(--line-l);overflow:hidden}
.prog i::before{content:"";display:block;height:100%;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:0 50%}
.stage{display:flex;flex-direction:column;min-height:0}
.stage .story-scene{position:relative;inset:auto;width:auto;aspect-ratio:auto;margin:0;border:0;border-radius:0;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vh,40px);
  background:var(--soft) radial-gradient(circle,rgba(11,11,11,.16) 1px,transparent 1.2px) 0 0/16px 16px}

@media (max-width:900px){
  .story-pin{grid-template-columns:1fr;grid-template-rows:minmax(0,46%) minmax(0,1fr);gap:16px;padding-block:12px}
  .stage{order:-1}
  .sl{padding:10px 0;gap:14px}.sl-t{font-size:clamp(17px,4.6vw,22px)}
}

/* ---------- solutions ---------- */
.solutions{padding-top:var(--sec-t);padding-bottom:var(--sec-b)}

.offer{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;cursor:pointer}

.offer .h3{margin-top:32px;max-width:13em}

.offer .get{margin-top:32px}
.get .mono,.out .mono{display:block;margin-bottom:12px;color:var(--fg-3)}
.ticks{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-l)}
.ticks li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-l)}
.ticks li::before{content:"\2192";flex:none}
.offer .out{margin-top:32px}
.offer .out p{margin:0}



.offer:hover .bar,.offer:focus-within .bar{background:var(--ink);color:#fff}
.offer:hover .cell,.offer:focus-within .cell{background:var(--hot);border-color:var(--hot);color:var(--ink)}


.talk{display:flex;align-items:center;gap:20px;margin-top:24px;padding:12px 12px 12px 12px;border:1px solid var(--line-l);border-radius:99999px}
.talk .av{flex:none;width:56px;height:56px;border-radius:50%;background:var(--dim);display:grid;place-items:center;color:var(--fg-3);font:400 9px/1 var(--mono);text-transform:uppercase}
.talk p{flex:1;margin:0}
@media (max-width:900px){
  .offers{grid-template-columns:1fr}.offer{display:flex;flex-direction:column}
  .team-row{grid-template-columns:1fr}.team-row .price{flex-direction:row;align-items:flex-end;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}
  .talk{flex-wrap:wrap;border-radius:var(--r)}.talk .btn{width:100%}
}

/* ---------- graphics repainted for the white canvas (§G) ---------- */
.card-reveal [stroke="#fff"]{stroke:var(--ink)}
.card-reveal [fill="#fff"]{fill:var(--ink)}
.card-reveal [fill^="rgba(12"]{fill:var(--soft)}
.card-reveal .tower,.card-reveal .nacelle,.card-reveal .spin-fast path,.card-reveal .build circle{fill:var(--soft);stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.card-reveal .row-calm,.card-reveal .row-wind{stroke:var(--ink)}
.card.play .row-wind{stroke:var(--hot)}

@media (prefers-reduced-motion:reduce) and (max-width:0px){
  html.js [data-anim] .h-word,html.js [data-anim],html.js .slide{transform:none!important;opacity:1!important;transition:none!important}
  .roll>span,.btn,.bar,.card-face,.card-reveal{transition:none}
}

/* ===== Section grounds: accent hero, then white / grey (zade.DESIGN.md §A) ===== */
:root{--grey:#f4f4f4}
.sec-grey{background:var(--grey)}
.sec-grey .stage .story-scene{background:#fff radial-gradient(circle,rgba(11,11,11,.16) 1px,transparent 1.2px) 0 0/16px 16px}
.sec-grey .steps li,.sec-grey .steps li:last-child{border-color:#dcdcdc}

/* hero on the accent: ink text, white second line, black primary button */
.hero{background:var(--hot);color:var(--ink)}
.hero .fg2,.hero .fg3,.hero .cards-lab{color:var(--ink)}
.hero .h1 .h1-b{color:#fff}
.hero .hero-bg{--fx-ink:11,11,11;--fx-a:11,11,11;--fx-b:255,255,255;--fx-hi:255,255,255}
.hero .hero-bg::before{background:transparent}
.hero .hero-bg::after{background:linear-gradient(90deg,var(--hot) 0%,color-mix(in srgb,var(--hot) 90%,transparent) 34%,transparent 58%)}
.hero-poster .hp-hill,.hero-poster .hp-hill-b,.hero-poster .hp-ridge,.hero-poster .hp-row,.hero-poster .hp-sub .hp-f{fill:var(--hot)}
.hero-poster .hp-row{stroke:rgba(11,11,11,.22)}

.hero .card{border-color:var(--ink)}
.hero .card:hover .cell,.hero .card:focus-visible .cell{background:#fff;border-color:var(--ink);color:var(--ink)}
.card.play .row-wind{stroke:var(--ink)}
@media (max-width:900px){.hero .hero-bg::after{background:linear-gradient(180deg,var(--hot) 0%,color-mix(in srgb,var(--hot) 88%,transparent) 40%,color-mix(in srgb,var(--hot) 20%,transparent) 75%,var(--hot) 100%)}}
.process{padding-bottom:24px}

/* xl button: Sanity hero ("Start building" / "Watch demo"): 55px, 8px 32px, sans 24px sentence case */





/* hero: centred composition (wireframe), wind farm on both sides */
.hero-copy{position:relative;max-width:min(1180px,100%);margin-inline:auto;text-align:center}
.hero-copy::before{content:"";position:absolute;z-index:-1;left:50%;top:-6%;bottom:-10%;width:min(118%,1280px);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,var(--hot) 0%,color-mix(in srgb,var(--hot) 82%,transparent) 50%,transparent 100%)}
.hero .sub{margin-inline:auto}

.hero .hero-bg::after{background:none}
.hero .h1{font-size:clamp(44px,28.5px + 4.03vw,88px);text-wrap:balance}
.hero .h1 .h-line{text-wrap:balance}
@media (max-width:900px){.hero .hero-bg::after{background:linear-gradient(180deg,transparent 0%,transparent 70%,var(--hot) 100%)}}

/* hero copy in white + grey (user call over ink, zade.DESIGN.md §C) */
.hero .h1 .h1-a{color:#fff}
.hero .h1 .h1-b{color:#e4e4e4}
body .hero .sub{color:#fff;font-size:24px;line-height:28.8px}

/* header over the accent hero (picked from hero variant 2): transparent with white type, white once the page scrolls */
.top{position:fixed;left:0;right:0;background:transparent;transition:background-color .3s var(--ease-io),border-color .3s var(--ease-io),color .3s var(--ease-io)}
.top:not(.stuck){color:#fff}
.top.stuck{background:#fff}
.top:not(.stuck) .btn--brand{background:var(--ink);border-color:var(--ink);color:#fff}
.top:not(.stuck) .btn--brand .av{background:#fff;color:var(--ink)}
.top:not(.stuck) .btn--brand:hover{background:#fff;border-color:#fff;color:var(--ink)}
.top:not(.stuck) .nav-links a::before{background:rgba(255,255,255,.18)}
.hero{min-height:100vh;min-height:100svh;padding-top:calc(var(--nav) + clamp(40px,7vh,88px))}
.process .sec-head,.solutions{scroll-margin-top:var(--nav)}
#process,#offering,#team,#talk{scroll-margin-top:var(--nav)}

/* ===== Process v2: Patch "promise" layout + high-tech line figure ===== */
.process{padding-top:0;padding-bottom:0}
.process .story-pin{grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:16px;padding-block:16px}
.pp-left{display:flex;flex-direction:column;gap:16px;min-height:0}
.pp-intro .bar h2{margin:0}
.pp-intro p{margin:0;padding:18px 20px 22px}
.pc-dots{display:flex!important;gap:8px;width:auto!important;padding:0 16px;cursor:default}
.pc-dots i{width:10px;height:10px;border:1px solid var(--ink);border-radius:50%;transition:background-color .3s var(--ease-io)}
.story[data-step="1"] .pc-dots i:nth-child(1),.story[data-step="2"] .pc-dots i:nth-child(2),.story[data-step="3"] .pc-dots i:nth-child(3),.story[data-step="4"] .pc-dots i:nth-child(4){background:var(--hot);border-color:var(--hot)}
.stage{flex:1;min-height:0}
/* figure ground: fine square grid, like the blueprint references */
.sec-grey .stage .story-scene,.stage .story-scene{position:relative;padding:20px;background:linear-gradient(#ececec 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#ececec 1px,transparent 1px) 0 0/28px 28px,#fff}



/* line drawing: flat white faces, thin ink outlines, no grey shading */

/* callouts: thin leader lines, mono caps labels, only for the current step */





/* the numbered list (Patch promise): big lines, the current one in ink */














@media (max-width:900px){
  .process .story-pin{grid-template-columns:1fr;grid-template-rows:minmax(0,46%) minmax(0,1fr);gap:12px;padding-block:12px}
  .pp-intro p{display:none}
  .pp-intro .bar{border-bottom:0}
  .pp-left{gap:8px}
  .pp-list{padding:16px}
  .pp-list .ctr{display:none}
  .pp-list .sl{grid-template-columns:30px minmax(0,1fr);gap:14px;padding:8px 0}
  .pp-list .sl-no{width:28px;height:28px}
  .pp-list .sl-t{font-size:clamp(17px,4.6vw,22px)}
  .pp-list .prog{margin-left:44px}
  .callouts text{font-size:13px}
}

/* progress segments in the brand colour */
.prog i::before{background:var(--hot)}

/* ===== Process variant 2: figure on a filled accent ground (Patch steps: visual on the brand colour) ===== */

/* review only: process variant switcher */

/* process: two equal halves */
.process .story-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}


@media (max-width:900px){.process .story-pin{grid-template-columns:1fr}}

/* ===== Solutions v2: Patch blocks with a line figure, priced in Sanity type ===== */

.offer{grid-row:span 7}
.offer>.fig{position:relative;margin:0!important;height:clamp(150px,13vw,190px);border-bottom:1px solid var(--line);display:grid;place-items:center;
  background:linear-gradient(#ececec 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#ececec 1px,transparent 1px) 0 0/24px 24px,#fff}
.offer .fig .anim{width:min(70%,360px);height:auto;max-height:78%;overflow:visible}


.offer .fig [stroke="#fff"]{stroke:var(--ink)}
.offer .fig [fill="#fff"]{fill:var(--ink)}
.offer .fig [fill^="rgba(12"]{fill:#fff}
.offer .fig .tower,.offer .fig .nacelle,.offer .fig .spin-fast path,.offer .fig .build circle{fill:#fff;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.offer .fig .row-calm,.offer .fig .row-wind{stroke:var(--ink)}
.offer.play .fig .row-wind{stroke:var(--hot)}

.offer .h3{margin-top:28px}





@media (max-width:900px){.offer{grid-row:auto}.team-row.blk{grid-template-columns:1fr}.team-row.blk>:not(.bar){padding-inline:20px}.team-row.blk .price{padding-top:16px;margin-inline:20px}}
@media (max-width:900px){.team-row.blk .bar .fg3{display:none}}

/* ===== Solutions hover (sanity.io "Context" cards): the active card fills with the accent,
   corner brackets frame the figure, labels turn into black chips, the other cards step back ===== */
.offer,.team-row.blk{transition:background-color .3s var(--ease-io),opacity .3s var(--ease-io),border-color .3s var(--ease-io)}
.chip{padding:3px 6px;margin:-3px -6px;transition:background-color .2s ease,color .2s ease}
.offer>.fig::after{content:"";position:absolute;inset:12px 22% 38px;pointer-events:none;opacity:0;transform:scale(1.06);transition:opacity .3s var(--ease-io),transform .4s var(--ease-io);
  background:linear-gradient(var(--ink),var(--ink)) 0 0/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 14px no-repeat}
@media (hover:hover){
  .offers:has(.offer:hover) .offer:not(:hover){opacity:.45}
  .offer:hover{background:var(--hot)}
  .offer:hover .bar,.offer:focus-within .bar{background:transparent;color:var(--ink)}
  .offer:hover .chip{background:var(--ink);color:#fff}
  .offer:hover .cell{background:var(--ink);border-color:var(--ink);color:#fff}
  .offer:hover>.fig{background:linear-gradient(rgba(11,11,11,.1) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(11,11,11,.1) 1px,transparent 1px) 0 0/24px 24px,transparent}
  .offer:hover>.fig::after{opacity:1;transform:none}
  .offer:hover .fig .fig-r{color:var(--ink)}
  .offer:hover .fig [fill^="rgba(12"],.offer:hover .fig .tower,.offer:hover .fig .nacelle,.offer:hover .fig .spin-fast path,.offer:hover .fig .build circle{fill:#fff}
  .offer.play:hover .fig .row-wind{stroke:#fff}
  .offer:hover .desc,.offer:hover .ticks li{color:var(--ink)}
  .offer:hover .ticks,.offer:hover .ticks li{border-color:rgba(11,11,11,.22)}
  .offer:hover .get .mono,.offer:hover .out .mono,.offer:hover .price .mono{color:var(--ink)}
}

/* "Have a question" (sanity.io closing block "Less talk, more code"): centred headline, xl button with Ivan's photo in it */
.talk2{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,3vw,44px);padding-top:clamp(64px,8vw,128px);text-align:center}
.talk2 .h2{max-width:14em;text-wrap:balance}



@media (max-width:600px){.talk2 .btn{width:100%}}

/* ===== Case (Patch testimonial) ===== */
.case{padding-top:var(--sec-t);padding-bottom:var(--sec-b)}


.case-card{margin-top:clamp(40px,6vw,72px)}
.case-body{display:grid;grid-template-columns:minmax(200px,26%) minmax(0,1fr);gap:16px;padding:16px}
.case-logo{position:relative;display:grid;place-items:center;min-height:clamp(220px,24vw,340px);border:1px solid var(--line-l);border-radius:var(--r);background:linear-gradient(#ececec 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#ececec 1px,transparent 1px) 0 0/24px 24px,#fff}
.case-logo .ph{color:var(--fg-3)}
.case-quote{display:flex;flex-direction:column;justify-content:space-between;gap:40px;margin:0;padding:clamp(24px,3.4vw,52px);border-radius:var(--r);background:var(--hot);color:var(--ink)}
.case-quote blockquote{margin:0;max-width:22em;text-wrap:pretty}
.author{display:flex;align-items:center;gap:16px;padding-top:18px;border-top:1px solid rgba(11,11,11,.25)}
.tag{padding:4px 8px;border:1px solid var(--ink);border-radius:99999px}
.fund{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:16px;padding:clamp(20px,2.4vw,32px)}
.fund p{margin:0;max-width:44em;color:var(--fg-2)}
.fund b{display:block;margin-bottom:4px;font-weight:500;color:var(--ink);font-size:clamp(22px,21.26px + .19vw,24px);letter-spacing:-.01em}
@media (max-width:900px){
  .case .sec-head .h2s{grid-column:1/-1}
  .case-body{grid-template-columns:1fr}
  .case-logo{min-height:140px}
  .fund{flex-direction:column;align-items:flex-start}.fund .btn{width:100%}
}

/* ===== Solutions cards v3 (twenty.com partner cards): white card on grey, dotted rules, raster line visual, icon list, square arrow ===== */





.ras{width:min(86%,400px);height:auto;overflow:visible}
.ras .rf{fill:var(--hot)}
.ras .ln{fill:none;stroke:var(--hot);stroke-width:2;stroke-linecap:round}








.ic{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--hot);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}






.sq{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1px solid #cfcfcf;border-radius:6px;background:#fff;transition:background-color .25s var(--ease-io),border-color .25s var(--ease-io)}
.sq::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;background:linear-gradient(135deg,#fff 0 50%,#cfcfcf 50% 52%,var(--grey) 52%);border-bottom-right-radius:6px;transition:background .25s var(--ease-io)}
.sq svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-io)}
/* motion */



@media (hover:hover){
  .pcard:hover .ras-pv .aim{transform:translate(236px,136px)}
  .pcard:hover .ras-sv .blades{animation-duration:1.6s}
  .pcard:hover .ras-sv .gusts path{stroke-dasharray:24 18;animation:drift 1s linear infinite}
  .pcard:hover .sq{background:var(--hot);border-color:var(--hot)}
  .pcard:hover .sq::after{background:linear-gradient(135deg,var(--hot) 0 50%,var(--ink) 50% 52%,var(--grey) 52%)}
  .pcard:hover .sq svg{transform:translateX(3px)}
  .pcard:hover .pc-go .mono{color:var(--ink)}
}
@media (max-width:900px){.pcards{grid-template-columns:1fr}.pcard{grid-row:auto;display:block}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.ras-sv .blades{animation:none}.ras-pv .aim{transition:none}}
/* other blocks on the grey solutions ground */


/* Integrated team in the same card language (not clickable: no hover) */





@media (max-width:900px){.tc-row{grid-template-columns:1fr;gap:20px}.tc-row .pc-price{align-items:flex-start;text-align:left;padding-top:16px;border-top:1px dotted #bdbdbd}}

/* Integrated team: not clickable, so not a card — a flat information row on the grey ground between hairlines */





/* sprint cards: 1px ink outline */


/* sprint cards: accent hover brought back (sanity.io "Context" cards) */



.ras .rf,.ras .ln,.ic{transition:fill .3s ease,stroke .3s ease}
@media (hover:hover){
  .pcards:has(.pcard:hover) .pcard:not(:hover){opacity:.45}
  .pcard:hover{background:var(--hot)}
  .pcard:hover .pc-head .h4{background:var(--ink);color:#fff}
  .pcard:hover .pc-head,.pcard:hover .pc-vis,.pcard:hover .pc-foot{border-color:rgba(11,11,11,.35)}
  .pcard:hover .pc-vis::after{opacity:1;transform:none}
  .pcard:hover .ras .rf{fill:var(--ink)}
  .pcard:hover .ras .ln{stroke:var(--ink)}
  .pcard:hover .ic{stroke:var(--ink)}
  .pcard:hover .fg2,.pcard:hover .fg3,.pcard:hover .pc-cap,.pcard:hover .pc-go .mono{color:var(--ink)}
  .pcard:hover .pc-list li{border-color:rgba(11,11,11,.2)}
  .pcard:hover .sq{background:var(--ink);border-color:var(--ink)}
  .pcard:hover .sq::after{background:linear-gradient(135deg,var(--ink) 0 50%,var(--hot) 50%)}
  .pcard:hover .sq svg{stroke:#fff}
}

/* Integrated team v3 (seccosquared.com contact block): solid accent panel, big ink type, items as underlined "fields". Not clickable: no button, no hover */

/* Integrated team: wireframe layout (copy / you get / price), smaller type */

.case-lg{width:min(70%,200px);height:auto;color:var(--ink)}

/* raster visual always fits its band */

.ras{width:auto;max-width:86%;height:calc(100% - 56px);max-height:240px}

/* sprint card hover, variant "black" (review switch): card inverts to ink, the orange raster stays the brightest spot */

/* fund row in the same language as "Have a question": centred, no plaque, xl button with Ivan inside */
.fund2{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:clamp(64px,8vw,112px);text-align:center}
.fund2 .h2s{max-width:16em;text-wrap:balance}
.fund2 .lead{max-width:26em;margin:0}
.fund2 .btn{margin-top:clamp(8px,1.5vw,20px)}
@media (max-width:600px){.fund2 .btn{width:100%}}

/* fund row: horizontal, in a grey container */
.fund2{flex-direction:row;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:16px;padding:clamp(24px,3vw,44px);border-radius:var(--r);background:var(--grey);text-align:left}
.f2-copy .h3{margin:0;max-width:18em}
.f2-copy p{margin:12px 0 0;max-width:34em}
.fund2 .btn{margin:0;flex:none}
@media (max-width:900px){.fund2{flex-direction:column;align-items:flex-start}}

/* ===================== CALM PASS: no lines, wireframe structure ===================== */
.eyebrow{font:400 13px/16.9px var(--mono);text-transform:uppercase;color:var(--ink)}
.pp-t{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pc-dots{display:flex!important;gap:8px;width:auto!important;padding:0!important;border:0!important}
.pc-dots i{width:8px;height:8px;border:0!important;border-radius:50%;background:#d6d6d6}
.story[data-step="1"] .pc-dots i:nth-child(1),.story[data-step="2"] .pc-dots i:nth-child(2),.story[data-step="3"] .pc-dots i:nth-child(3),.story[data-step="4"] .pc-dots i:nth-child(4){background:var(--hot)}

/* hero cards: white, no outline, no bar line; label top-left, small arrow square top-right, title bottom */
.hero .card{border:0!important;border-radius:var(--r);background:#fff}
.hero .card .bar{border:0;min-height:0;padding:18px 18px 0 20px;background:none!important;color:var(--fg-3)!important}
.hero .card .bar>.mono{padding:0}
.hero .card .cell{width:36px;height:36px;border:0!important;border-radius:6px;background:var(--grey)!important;color:var(--ink)!important;font-size:16px}
.hero .card:hover .cell,.hero .card:focus-visible .cell{background:var(--ink)!important;color:#fff!important}
.hero .card .body{padding-top:12px}

/* process: intro + figure left, steps right; no frames, no grid, no callouts */
.process{padding:0;background:#fff}
.process .story-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);padding-block:clamp(16px,3vh,32px)}
.pp-left{display:flex;flex-direction:column;gap:20px;min-height:0}
.pp-intro{padding:0;border:0;background:none}
.pp-intro p{margin:12px 0 0;max-width:30em}
.stage{flex:1;min-height:0;border:0!important;border-radius:var(--r);background:var(--grey)!important;overflow:hidden}
.stage .story-scene,.sec-grey .stage .story-scene{background:none!important;padding:clamp(12px,3vh,32px)}

.process .steps{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4.5vh,44px);margin:0;padding:0;list-style:none;border:0}
.process .steps li,.process .steps li:last-child{border:0;padding:0}
.process .sl{display:block;padding:0;border:0;background:none}
.process .sl-no{display:none}
.process .sl-t{font-size:clamp(22px,13px + 1.7vw,36px);line-height:1.15;letter-spacing:-.025em}
.process .sl-t .c{color:#cfcfcf}
.process .sl-t .c.on{color:var(--hot)}
.process .sl.past .sl-t .c.on{color:#9a9a9a}
.process .sl[aria-current="step"]:not(.past) .sl-t .c.on{color:var(--hot)}
@media (max-width:900px){.process .story-pin{grid-template-columns:1fr;grid-template-rows:minmax(0,48%) minmax(0,1fr)}.pp-intro p{display:none}.process .steps{justify-content:flex-start;gap:12px}.process .sl-t{font-size:clamp(17px,4.6vw,22px)}}

/* solutions: heading, two white cards on grey, no lines */
.solutions{padding-top:var(--sec-t);padding-bottom:var(--sec-b)}
.s-head .h2{margin-top:16px;max-width:16em}
.s-head .pp-t{justify-content:flex-start}


.oc-open{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:var(--grey);cursor:pointer;transition:background-color .2s ease}
.oc-open svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}



/* case: grey card, logo / client / quote, author below; no lines */
.case{padding-top:var(--sec-t);padding-bottom:var(--sec-b);background:#fff}
.c-head{max-width:22em;margin:0}
.case3{display:grid;grid-template-columns:clamp(120px,12vw,180px) minmax(0,.6fr) minmax(0,2fr);gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,56px);padding:clamp(24px,3vw,44px);border-radius:var(--r);background:var(--grey)}
.c3-logo{display:grid;place-items:center;aspect-ratio:1;border-radius:6px;background:#fff}
.c3-logo .case-lg{width:80%}
.c3-quote{margin:0;max-width:22em;text-wrap:pretty}
.c3-from{grid-column:3;display:flex;align-items:center;gap:14px}
.c3-from .tag{padding:4px 8px;border:1px solid var(--ink);border-radius:99999px}
@media (max-width:900px){.case3{grid-template-columns:1fr}.c3-logo{width:110px}.c3-from{grid-column:auto}}
.fund2{background:var(--grey)}



.pp-intro{padding-left:0}.pp-intro p{padding:0}

/* ===== Hero on black, wind farm exactly as in the wireframe ===== */
.hero .hero-bg{--fx-ink:255,255,255;--fx-a:96,84,255;--fx-b:92,190,255;--fx-hi:214,236,255;--fx-glow:.16}
.hero .hero-bg::before{background:#101010}




.hero-poster .hp-w{stroke:rgba(255,255,255,.13)}
.hero-poster .hp-far{stroke:rgba(255,255,255,.22)}

.hero-poster .hp-mast{stroke:rgba(255,255,255,.5)}
.hero-poster .hp-fig{fill:rgba(255,255,255,.55)}
.hero-poster .hp-t .hp-f{stroke:rgba(255,255,255,.36)}
.hero-poster .hp-b .hp-f{stroke:rgba(255,255,255,.28)}
.hero-poster .hp-c .hp-f{stroke:rgba(255,255,255,.2)}
.hero-poster .hp-d .hp-f{stroke:rgba(255,255,255,.14)}
.hero-poster .hp-a .hp-l{stroke:rgba(255,255,255,.34)}
.hero-poster .hp-b .hp-l{stroke:rgba(255,255,255,.24)}
.hero-poster .hp-c .hp-l,.hero-poster .hp-d .hp-l{stroke:rgba(255,255,255,.16)}
.hero-poster .hp-t .hp-d,.hero-poster .hp-c .hp-d,.hero-poster .hp-d .hp-d{fill:#fff}
@media (max-width:720px){.hero-poster .hp-w{stroke:rgba(255,255,255,.1)}}
.hero-poster .hp-w{stroke:rgba(255,255,255,.07)}


.hero-poster .hp-road{stroke:rgba(255,255,255,.26);stroke-dasharray:7 6}
.hero-poster .hp-road2{stroke:rgba(255,255,255,.05);stroke-width:7}
.hero-poster .hp-tree{stroke:rgba(255,255,255,.3)}


.hero-poster .hp-sub .hp-f{fill:#141414;stroke:rgba(255,255,255,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-poster .hp-sub .hp-l{stroke:rgba(255,255,255,.34)}

.hero .hero-bg::after{content:"";position:absolute;inset:0;bottom:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cpath d='M0 .5H112M.5 0V112' stroke='%23fff' stroke-opacity='.1'/%3E%3Cpath d='M0 -5L1.6 -1.6L5 0L1.6 1.6L0 5L-1.6 1.6L-5 0L-1.6 -1.6Z M112 -5L113.6 -1.6L117 0L113.6 1.6L112 5L110.4 1.6L107 0L110.4 -1.6Z M0 107L1.6 110.4L5 112L1.6 113.6L0 117L-1.6 113.6L-5 112L-1.6 110.4Z M112 107L113.6 110.4L117 112L113.6 113.6L112 117L110.4 113.6L107 112L110.4 110.4Z' fill='%23fff' fill-opacity='.5'/%3E%3C/svg%3E") 50% 0/112px 112px;-webkit-mask-image:linear-gradient(#000 0%,#000 55%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(#000 0%,#000 55%,rgba(0,0,0,.35) 100%)}
.hero-poster .hp-w,.hero-poster .hp-cont,.hero-poster .hp-bird,.hero-poster .hp-road2{display:none}
.hero-poster .hp-far{stroke:rgba(255,255,255,.13)}
.hero-poster .hp-tree{stroke:rgba(255,255,255,.16)}
.hero-poster .hp-road{stroke:rgba(255,255,255,.16)}



.hero .hero-bg::after{opacity:.55}
.hero-poster .hp-row{fill:#0b0b0b;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.hero .hero-bg::before{background:#0b0b0b}
.hero .head::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(10px,3.5vh,48px);bottom:clamp(14px,4.5vh,60px);width:min(112%,1180px);transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,11,11,.62) 0%,rgba(11,11,11,.5) 45%,rgba(11,11,11,0) 100%);
    -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,rgba(0,0,0,.6) 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,rgba(0,0,0,.6) 62%,transparent 100%)}
.hero-poster .hp-rot{visibility:hidden;animation:none!important}
.hero-poster .hp-cups,.hero-poster .hp-blink,.hero-poster .hp-w{animation:none!important}
.hero .head::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,11,11,.8) 0%,rgba(11,11,11,.62) 48%,rgba(11,11,11,0) 100%)}
.hero{background:#0b0b0b;color:#fff}
.hero .h1 .h1-a{color:#fff}
.hero .h1 .h1-b{color:rgba(255,255,255,.38)}
body .hero .sub{color:rgba(255,255,255,.72)}
.hero .cards-lab{color:rgba(255,255,255,.6)}
.hero-copy::before{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,11,11,.8) 0%,rgba(11,11,11,.6) 48%,rgba(11,11,11,0) 100%)}
.hero .hero-bg::after{background:none!important}
/* cards: dark, no lines */
.hero .card,.hero .card:hover,.hero .card:focus-visible,.hero .card.play{background:#222222!important;color:#fff}
.hero .card:hover,.hero .card:focus-visible{background:#202020!important}
.hero .card .bar{color:rgba(255,255,255,.6)!important}
.hero .card .h3,.hero .card .card-t{color:#fff}
.hero .card .fg2{color:rgba(255,255,255,.75)}
.hero .card .cell{background:#fff!important;color:var(--ink)!important}
.hero .card:hover .cell{background:var(--hot)!important;color:var(--ink)!important}
.hero .card-reveal [stroke="#fff"],.hero .card-reveal .row-calm,.hero .card-reveal .row-wind{stroke:#fff}
.hero .card-reveal [fill="#fff"]{fill:#fff}
.hero .card-reveal .tower,.hero .card-reveal .nacelle,.hero .card-reveal .spin-fast path,.hero .card-reveal .build circle{fill:#222222;stroke:#fff}
.hero .card.play .row-wind{stroke:var(--hot)}
/* header over black: orange CTA so it doesn't vanish */
.top:not(.stuck) .btn--brand{background:var(--hot);border-color:var(--hot);color:var(--ink)}
.top:not(.stuck) .btn--brand .av{background:var(--ink);color:#fff}

/* wind farm LED matrix in the brand orange */
.hero .hero-bg{--fx-a:255,85,0;--fx-b:255,140,70;--fx-hi:255,214,190;--fx-glow:.14}

/* ===== Why-us mosaic layout (wireframe) ===== */
:root{--nav-h:67px;--h-xl:clamp(44px,30px + 3.6vw,80px);--h-m:clamp(28px,22px + 1.6vw,44px);--r:8px}
.wl{container-type:inline-size;max-width:1560px;margin:0 auto}
.wl-in{position:relative;height:94cqw}
.wl-i,.wl-ghost{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--w) * 1cqw);margin:0}
.wl-i{z-index:1;border:1px solid rgba(255,255,255,.26);background:var(--card);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.wl-head{position:absolute;z-index:2;left:50%;top:37.5cqw;width:46cqw;transform:translateX(-50%);text-align:center}
.wl-head .eyebrow{display:block}
.wl-head h2{margin:1.6cqw 0 0;font-family:var(--sans);font-size:4.5cqw;font-weight:500;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.wl-card{display:flex;flex-direction:column;padding:max(16px,1.5cqw)}
.wl-k{font-family:var(--mono);font-size:max(11px,.85cqw);line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wl-k::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.8em;background:var(--accent)}
.wl-n{margin-top:max(12px,1.1cqw);font-family:var(--sans);font-size:max(44px,4.4cqw);font-weight:400;line-height:1;letter-spacing:-.05em}
.wl-l{margin:max(8px,.7cqw) 0 0;font-size:max(14px,1.15cqw);line-height:1.35;color:var(--muted)}
.wl-f{margin-top:max(16px,1.5cqw);padding-top:max(14px,1.3cqw);border-top:1px solid rgba(255,255,255,.3)}
.wl-f span{display:block;font-family:var(--mono);font-size:max(11px,.85cqw);line-height:1.2;letter-spacing:.1em;text-transform:uppercase}
.wl-f small{display:block;margin-top:.4em;font-size:max(13px,1.1cqw);line-height:1.35;color:var(--muted)}
.wl-q{margin:max(12px,1cqw) 0 0;font-size:max(15px,1.42cqw);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.wl-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:8px;text-align:center}
.wl-logo span{font-size:max(13px,1.25cqw);font-weight:500;line-height:1.1;letter-spacing:-.03em}

.wl-photo{aspect-ratio:1;border-color:transparent;background:linear-gradient(160deg,#343b54 0%,#1b2030 100%)}

.wl-ghost{z-index:0;height:calc(var(--h) * 1cqw);padding:1.6cqw;background:#1d2232;filter:blur(9px);opacity:.75}
.wl-ghost i{display:block;height:.9cqw;margin-bottom:.8cqw;background:rgba(255,255,255,.22)}
.wl-ghost i:nth-child(2){width:86%}
.wl-ghost i:nth-child(3){width:58%}
.wl-ghost b{position:absolute;left:1.6cqw;bottom:1.6cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:rgba(255,255,255,.3)}
@media (max-width:1199px){.wl-in{height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:12px}.wl-i{position:relative;left:auto;top:auto;width:auto;box-shadow:none}.wl-ghost{display:none}.wl-head{position:static;grid-column:1 / -1;width:auto;transform:none;margin-bottom:clamp(12px,3vw,28px);text-align:left}.wl-head h2{max-width:14em;margin-top:16px;font-size:clamp(32px,6.4vw,60px)}.wl-card,.wl-photo{grid-column:span 2}.wl-logo,.wl-photo{aspect-ratio:auto;min-height:150px}.wl-k{font-size:12px}.wl-q{font-size:17px}.wl-l{font-size:15px}.wl-f small{font-size:14px}.wl-n{font-size:56px}.wl-logo span{font-size:17px}.wl-logo-ph span,.wl-photo .mz-ph{font-size:11px}}
@media (max-width:640px){.wl-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wl-logo{min-height:120px}.wl-photo{min-height:170px}}
@media print{.wl-ghost{display:none}.wl-i{box-shadow:none}}
.mz-photo,.wl-photo{background:var(--block)}
.wl-i{border-color:var(--line);box-shadow:none}
.wl-f{border-top-color:var(--line)}
.wl-ghost{background:#e9e9e9}
.wl-ghost i{background:rgba(0,0,0,.14)}
.wl-ghost b{background:rgba(0,0,0,.18)}
.wl-f{border-top-style:dashed}
.wl-head h2{font-weight:400;letter-spacing:-.03em}
.wl.rv .wl-i,.wl.rv .wl-ghost{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.wl.rv .wl-i.in{opacity:1;transform:none}
.wl.rv .wl-ghost.in{opacity:.75;transform:none}
@media (min-width:1200px){.wl-in{--wl0:62vh;--wls:34vh;height:calc(var(--wl0) + 8 * var(--wls) + 40vh)}.wl-ghost{display:none}.wl-head{position:sticky;z-index:0;top:calc(50vh - 8.5cqw + var(--nav-h) / 2);left:auto;width:60cqw;margin:0 auto;transform:none}.wl-head h2{font-size:4cqw;line-height:1.08}.wl-in > :nth-child(10){top:calc(var(--wl0) + 0 * var(--wls));left:8cqw;right:auto}.wl-in > :nth-child(11){top:calc(var(--wl0) + 0.7 * var(--wls));left:auto;right:2cqw}.wl-in > :nth-child(14){top:calc(var(--wl0) + 1.4 * var(--wls));left:12cqw;right:auto}.wl-in > :nth-child(13){top:calc(var(--wl0) + 2.1 * var(--wls));left:auto;right:2cqw}.wl-in > :nth-child(12){top:calc(var(--wl0) + 2.8 * var(--wls));left:2cqw;right:auto}.wl-in > :nth-child(6){top:calc(var(--wl0) + 3.7 * var(--wls));left:auto;right:4cqw}.wl-in > :nth-child(7){top:calc(var(--wl0) + 4.4 * var(--wls));left:10cqw;right:auto}.wl-in > :nth-child(8){top:calc(var(--wl0) + 5.1 * var(--wls));left:auto;right:12cqw}.wl-in > :nth-child(15){top:calc(var(--wl0) + 5.8 * var(--wls));left:4cqw;right:auto}.wl-in > :nth-child(16){top:calc(var(--wl0) + 6.5 * var(--wls));left:auto;right:2cqw}.wl-in > :nth-child(17){top:calc(var(--wl0) + 7.4 * var(--wls));left:10cqw;right:auto}.wl-in > :nth-child(9){top:calc(var(--wl0) + 8.0 * var(--wls));left:auto;right:2cqw}}
.wl-s{display:block}
.wl-s + .wl-s{margin-top:.28em}
.wl-say .w{display:inline-block;white-space:pre}
.wl-say.dim .c{color:rgba(0,0,0,.16);transition:color .25s ease}
.wl-say.dim .c.on{color:var(--fg)}
.wl-say.dim{display:grid;align-items:center}
.wl-say.dim .wl-s{grid-area:1 / 1;margin:0;opacity:0;transform:translateY(.25em);transition:opacity .45s ease,transform .45s ease}
.wl-say.dim .wl-s.show{opacity:1;transform:none}
@media (min-width:1200px){.wl-in > .wl-photo{width:21cqw}.wl-in > .wl-photo:nth-child(10){left:3cqw}.wl-in > .wl-photo:nth-child(14){left:5cqw}.wl-in > .wl-photo:nth-child(17){left:4cqw}.wl-photo .mz-ph{font-size:max(11px,.85cqw)}}
@media (max-width:1199px){.wl-in{display:flex;flex-direction:column;gap:0;height:auto;padding-bottom:12vh}.wl-head{position:sticky;z-index:0;top:calc(50vh - 76px + var(--nav-h) / 2);top:calc(50svh - 76px + var(--nav-h) / 2);order:0;width:auto;margin:0;padding:0;text-align:center;transform:none}.wl-head .wl-s{max-width:none;justify-self:center;text-wrap:balance}.wl-head h2{max-width:none;margin-top:12px;font-size:clamp(26px,6.2vw,44px);line-height:1.08}.wl-in > .wl-i{position:relative;z-index:1;left:auto;top:auto;width:min(74%,420px);margin-top:20vh}.wl-in > .wl-photo{width:min(58%,320px);aspect-ratio:1;min-height:0}.wl-in > .wl-logo{width:min(38%,190px);aspect-ratio:1;min-height:0}.wl-in > :nth-child(10){order:1;align-self:flex-start;margin-top:46vh}.wl-in > :nth-child(11){order:2;align-self:flex-end}.wl-in > :nth-child(14){order:3;align-self:flex-start}.wl-in > :nth-child(13){order:4;align-self:flex-end}.wl-in > :nth-child(12){order:5;align-self:flex-start}.wl-in > :nth-child(6){order:6;align-self:flex-end;margin-top:46vh}.wl-in > :nth-child(7){order:7;align-self:flex-start}.wl-in > :nth-child(8){order:8;align-self:flex-end}.wl-in > :nth-child(15){order:9;align-self:flex-start}.wl-in > :nth-child(16){order:10;align-self:flex-end}.wl-in > :nth-child(17){order:11;align-self:flex-start;margin-top:46vh}.wl-in > :nth-child(9){order:12;align-self:flex-end}}
@media (max-width:1199px) and (prefers-reduced-motion:reduce) and (max-width:0px){.wl-head{position:static}}
h1,h2,h3,h4,.sl-t,.wl-say{text-wrap:balance}
.wl-k,.wl-f span{letter-spacing:.07em}
.sl-no,.price,.vis-stat,.vis-facts,.wl-n{font-variant-numeric:tabular-nums}
body .wl-card .wl-l,body .reel-cap span{font-size:14px}
body .offer-desc.outcome,body .wl-card .wl-q,body .card-reveal p,body .op-lead,body .fund p,body .fund p b,body .final-sub,body .wl-logo span,body .hero .sub{font-size:18px}
body .final h2,body .wl .wl-card .wl-n{font-size:var(--h-xl)}
@media (max-width:1199px){body .wl .wl-say{font-size:var(--h-m)}}
.hero .card,.case-card,.fund,.wl .wl-card,.wl .wl-logo,.wl .wl-photo,.reel .reel-ph,.op .vis-main,.op .vis-stat,.op .vis-facts{border-radius:var(--r)}
@media (min-width:721px) and (max-width:1199px){body .wl .wl-say{font-size:clamp(32px,4.6vw,48px);line-height:1.08}}
@media (max-width:1199px){.wl .wl-in{padding-bottom:clamp(16px,3vh,32px)}.wl .wl-in::after{content:"";order:99;flex:none;width:100%;height:calc(150px + 10vh)}.wl .wl-in > :nth-child(15),.wl .wl-in > :nth-child(6){width:min(100%,300px);padding:14px}body .wl .wl-in > :nth-child(15) .wl-n,body .wl .wl-in > :nth-child(6) .wl-n{font-size:32px}}
.wl .wl-head .eyebrow::before{display:none}
.wl .wl-logo{display:flex;align-items:center;justify-content:center}
.wl .wl-logo .wl-lg{display:block;width:74%;height:auto;max-height:64%;object-fit:contain}
.wl .wl-logo .wl-lg-ten{width:96%;max-height:80%}
.wl .wl-photo:has(.wl-ph-img){padding:0;overflow:hidden}
.wl .wl-photo .wl-ph-img{display:block;width:100%;height:100%;object-fit:cover;object-position:42% 60%}
/* ===== wind farm fully in the brand colour ===== */
.hero .hero-bg{--fx-ink:255,85,0;--fx-a:255,85,0;--fx-b:255,130,60;--fx-hi:255,85,0;--fx-glow:.12}
.hero .card-reveal [stroke="#fff"],.hero .card-reveal .row-calm,.hero .card-reveal .row-wind{stroke:var(--hot)}
.hero .card-reveal [fill="#fff"]{fill:var(--hot)}
.hero .card-reveal .tower,.hero .card-reveal .nacelle,.hero .card-reveal .spin-fast path,.hero .card-reveal .build circle{fill:#222222;stroke:var(--hot)}

/* ===== solutions head + "Have a question" row (wireframe structure) ===== */
.s-q{margin:12px 0 0}
.talk3{display:flex;align-items:center;gap:20px;max-width:900px;margin:clamp(40px,5vw,64px) auto 0;padding:12px 12px 12px 12px;border-radius:99999px;background:#fff}
.talk3 .av{flex:none;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:400 9px/1 var(--mono)}
.talk3 p{flex:1;margin:0}
@media (max-width:720px){.talk3{flex-wrap:wrap;border-radius:var(--r);padding:16px}.talk3 .btn{width:100%}}

/* ===== Why founders (calm: no lines, grey/white tiles) ===== */
.path{padding:var(--sec-t) var(--gut) var(--sec-b);background:var(--grey)}
.wl-head .eyebrow{display:block;text-align:center}
.wl .wl-say{font-family:var(--sans);font-weight:400;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.wl-say.dim .c{color:rgba(11,11,11,.16)}
.wl-say.dim .c.on{color:var(--ink)}
.wl-i{border:0!important;box-shadow:none!important;border-radius:var(--r);background:#fff}
.wl-ghost{display:none!important}
.wl-card{display:flex;flex-direction:column;padding:clamp(18px,1.6vw,26px)}
.wl-k{font:400 12px/1 var(--mono);text-transform:uppercase;color:var(--fg-3)}
.wl-k::before{content:none!important}
.wl-n{display:block;margin-top:14px;font:400 clamp(44px,4.4vw,72px)/1 var(--sans);letter-spacing:-.045em}
.wl-l{margin:8px 0 0;font-size:16px;line-height:1.35;color:var(--fg-2)}
.wl-q{margin:14px 0 0;font-size:clamp(17px,1.4vw,22px);line-height:1.3;letter-spacing:-.01em}
.wl-f{margin-top:18px;padding-top:0;border:0!important}
.wl-f span{display:block;font:400 12px/1.3 var(--mono);text-transform:uppercase}
.wl-f small{display:block;margin-top:4px;font-size:14px;color:var(--fg-3)}
.wl-logo{display:grid;place-items:center;aspect-ratio:1}

.wl-photo{display:grid;place-items:center;aspect-ratio:1;background:#e6e6e6}
.ph{color:var(--fg-3);font-size:11px;text-align:center;padding:10px}

/* ===== Team reel (wireframe: arrows, portraits with short stories between) ===== */
.team{padding:var(--sec-t) 0 var(--sec-b);background:#fff}
.reel-nav{display:flex;justify-content:space-between;padding:0 var(--gut)}
.reel-btn{position:relative;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--grey);color:var(--ink);cursor:pointer;transition:background-color .2s ease}
.reel-btn:hover{background:var(--hot)}
.reel-btn svg{position:absolute;inset:0;margin:auto;width:22px;height:22px}
.reel-btn .tb{display:none}
.reel-btn.off{opacity:.35}
.reel{display:flex;align-items:center;gap:clamp(24px,4vw,64px);margin:24px 0 0;padding:0 var(--gut);list-style:none;overflow-x:auto;scrollbar-width:none;cursor:grab;user-select:none}
.reel::-webkit-scrollbar{display:none}
.reel.dragging{cursor:grabbing}
.reel-ph{position:relative;flex:none;width:clamp(220px,24vw,360px);aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--grey)}
.reel-img{position:absolute;inset:0;display:grid;place-items:center}
.reel-cap{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border-radius:6px;background:#fff}
.reel-cap b{display:block;font-weight:400;font-size:20px;letter-spacing:-.02em}
.reel-cap span{display:block;margin-top:2px;font:400 12px/1.3 var(--mono);text-transform:uppercase;color:var(--fg-3)}
.reel-tx{flex:none;width:clamp(220px,22vw,320px)}
.reel-tx p{margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.35;color:var(--fg-3)}
.reel-tx b{font-weight:400;color:var(--ink)}
.reel-cur{position:fixed;z-index:60;left:0;top:0;padding:6px 12px;border-radius:99999px;background:var(--hot);color:var(--ink);font:400 11px/1 var(--mono);text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .2s}
.reel-cur.on{opacity:1}
@media (hover:none){.reel-cur{display:none}}

/* ===== Final CTA (wireframe: headline, sub, Ivan card, email) ===== */
.final{position:relative;overflow:hidden;padding:var(--sec-t) var(--gut) var(--sec-b);text-align:center;background:var(--grey)}
.final>*:not(.final-bg){position:relative;z-index:1}
.final-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.final .gust{fill:none;stroke:var(--hot);stroke-dasharray:160 1400;animation:finalgust 8s linear infinite}
@keyframes finalgust{from{stroke-dashoffset:1560}to{stroke-dashoffset:0}}
.final .h2{max-width:14em;margin:0 auto;text-wrap:balance}
.final-sub{max-width:28em;margin:20px auto 0;color:var(--fg-2)}




.mail{margin-top:16px}


.mail-addr{color:var(--ink)}
.mail-copy{position:relative;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}
.mail-copy svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;transition:opacity .2s}
.mail-copy .mc-done{opacity:0}.mail-copy.done{background:var(--hot);color:var(--ink)}.mail-copy.done .mc-copy{opacity:0}.mail-copy.done .mc-done{opacity:1}
.mail-msg{position:absolute;left:0;right:0;top:calc(100% + 8px);font:400 11px/1 var(--mono);text-transform:uppercase;color:var(--fg-3)}
@media (max-width:720px){.book{flex-wrap:wrap;border-radius:var(--r);padding:16px}.book .btn{width:100%}.mail-pill{border-radius:var(--r)}}

/* ===== One-pager dialogs (wireframe structure, calm) ===== */
body:has(dialog[open]){overflow:hidden}
.op{width:min(1100px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:12px;background:#fff;color:var(--ink)}
.op::backdrop{background:rgba(11,11,11,.6);backdrop-filter:blur(4px)}
.op-in{position:relative;overflow-y:auto;max-height:calc(100dvh - 48px);padding:clamp(28px,4vw,56px)}
.op-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--grey);font-size:24px;cursor:pointer}
.op-close:hover{background:var(--hot)}
.op-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-right:48px}
.op-top h3{margin:0;font-size:clamp(28px,24.29px + .952vw,38px);font-weight:400;line-height:1.1;letter-spacing:-.03em}
.op-lead{margin:16px 0 0;font-size:18px;line-height:1.4;color:var(--fg-2)}
.op-ctas{margin-top:24px}
.op-btn{display:inline-flex;align-items:center;gap:12px;height:55px;padding:0 28px 0 8px;border-radius:99999px;background:var(--hot);color:var(--ink);font-size:20px;letter-spacing:-.01em}
.op-btn .avatar{width:39px;height:39px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:400 7px/1 var(--mono)}
.op-btn small{display:block;font:400 11px/1 var(--mono);text-transform:uppercase;opacity:.7}
.op-btn:hover{background:var(--ink);color:#fff}
.checks{margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:18px}
.checks li::before{content:"";flex:none;width:20px;height:20px;border-radius:4px;background:var(--hot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.op-vis{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-top:40px}
.vis-main{display:grid;place-items:center;min-height:300px;padding:24px;border-radius:var(--r);background:var(--grey)}
.vis-main svg{width:100%;max-width:520px;height:auto}
.vis-side{display:grid;gap:16px}
.vis-stat{display:flex;flex-direction:column;justify-content:center;padding:24px;border-radius:var(--r);background:var(--hot)}
.vis-stat b{font-weight:400;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.04em}
.vis-stat span{margin-top:8px;font:400 12px/1.3 var(--mono);text-transform:uppercase}
.vis-facts{padding:16px 24px;border-radius:var(--r);background:var(--grey)}
.fact{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:16px}
.fact span{font:400 12px/1.6 var(--mono);text-transform:uppercase;color:var(--fg-3)}
.fact b{font-weight:400;text-align:right}
.op-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
.op-how:not(:has(>:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
.how-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--grey);color:var(--hot)}
.how-icon svg{width:22px;height:22px}
.op-how h4{margin:16px 0 0;font-weight:400;font-size:20px;letter-spacing:-.01em}
.op-how p{margin:6px 0 0;font-size:16px;line-height:1.4;color:var(--fg-2)}
.op-quote{margin-top:40px;padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--grey);text-align:center}
.op-quote-logo{width:120px;height:36px;margin:0 auto 20px;display:grid;place-items:center;border-radius:6px;background:#fff;font:400 10px/1 var(--mono);text-transform:uppercase;color:var(--fg-3)}
.op-quote blockquote{max-width:30em;margin:0 auto;font-size:clamp(20px,1.9vw,26px);line-height:1.3;letter-spacing:-.01em}
.op-quote cite{display:block;margin-top:16px;font-style:normal;font-size:15px;color:var(--fg-3)}
.op-quote cite b{font-weight:500;color:var(--ink)}
.op-end{padding-top:40px;text-align:center}
.op-end h4{margin:0 0 20px;font-weight:400;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em}
@media (max-width:900px){.op-top,.op-vis{grid-template-columns:1fr;padding-right:0}.op-how,.op-how:not(:has(>:nth-child(4))){grid-template-columns:1fr 1fr}}
@media (max-width:560px){.op-how,.op-how:not(:has(>:nth-child(4))){grid-template-columns:1fr}}

/* hero choice cards taller */
.hero .card{min-height:clamp(280px,34vh,360px)}

/* process: intro card sits inside the figure panel, top (wireframe) */
.stage{display:flex;flex-direction:column;padding:clamp(12px,1.2vw,16px)}
.stage .pp-intro{flex:none;padding:16px 20px 18px;border-radius:6px;background:#fff}
.stage .pp-intro p{margin:10px 0 0;font-size:16px;line-height:1.4}
.stage .story-scene{flex:1;min-height:0}

@media (max-width:900px){.stage .pp-intro p{display:none}.stage .pp-intro{padding:12px 14px}}

.stage .pp-intro{order:0}.stage .story-scene{order:1}

/* hero background line work toned down (the LED windmills on the canvas are unaffected) */
.hero .hero-poster{opacity:.45}

/* process title card as in the wireframe: sans caps title, connected step dots, quiet copy */
.stage .pp-intro{padding:0;border-radius:4px}
.stage .pp-intro .pp-t{padding:14px 20px}
.stage .pp-intro .eyebrow{margin:0;font:500 20px/1.2 var(--sans);text-transform:uppercase;letter-spacing:0}
.stage .pp-intro p{margin:0;padding:0 20px 16px;font-size:16px;line-height:1.45;color:rgba(11,11,11,.6)}
.stage .pc-dots{gap:0!important;align-items:center}
.stage .pc-dots i{position:relative;width:12px;height:12px;border:1px solid rgba(11,11,11,.25)!important;border-radius:50%;background:#fff}
.stage .pc-dots i+i{margin-left:10px}
.stage .pc-dots i+i::before{content:"";position:absolute;top:50%;right:100%;width:10px;margin-right:1px;border-top:1px solid rgba(11,11,11,.25)}
.story[data-step="1"] .stage .pc-dots i:nth-child(1),.story[data-step="2"] .stage .pc-dots i:nth-child(2),.story[data-step="3"] .stage .pc-dots i:nth-child(3),.story[data-step="4"] .stage .pc-dots i:nth-child(4){background:var(--hot);border-color:var(--hot)!important}
@media (max-width:900px){.stage .pp-intro .eyebrow{font-size:16px}.stage .pp-intro .pp-t{padding:10px 14px}}

/* solution cards: readability first */

/* solutions title card: same component as "Our process" (wireframe) */
.s-head.pp-intro{width:min(100%,460px);padding:0;border-radius:4px;background:#fff}
.s-head .pp-t{justify-content:space-between;padding:14px 20px}
.s-head .eyebrow{margin:0;font:500 20px/1.2 var(--sans);text-transform:uppercase;letter-spacing:0}
.s-head p{margin:0;padding:0 20px 16px;font-size:16px;line-height:1.45;font-weight:400;color:rgba(11,11,11,.6)}
.s-head .pc-dots{gap:0!important;align-items:center}
.s-head .pc-dots i{position:relative;width:12px;height:12px;border:1px solid rgba(11,11,11,.25)!important;border-radius:50%;background:#fff}
.s-head .pc-dots i+i{margin-left:10px}
.s-head .pc-dots i+i::before{content:"";position:absolute;top:50%;right:100%;width:10px;margin-right:1px;border-top:1px solid rgba(11,11,11,.25)}

/* offers as one container (wireframe): two sprint columns on top, Integrated team as a grey row at the bottom */

/* real photos from the wireframe folder */
.reel-ph img.reel-img{width:100%;height:100%;object-fit:cover}
.wl-logo{padding:16%}
.wl-lg{display:block;width:100%;height:auto;max-height:70%;object-fit:contain}
.wl-photo{overflow:hidden;position:relative}
.wl-ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ivan's photo in every avatar */
.av,.avatar,.btn .av,.nav-cta .avatar,.op-btn .avatar,.talk3 .av,.book .avatar{background:#ddd url("/landing/assets/img/ivan-av.jpg") center/cover no-repeat!important;color:transparent!important;font-size:0!important}

@media (min-width:1200px){.path .wl-in{height:calc(var(--wl0) + 8 * var(--wls) + 40vh + 26cqw)}}
.path{overflow:clip}

@media (min-width:1200px){.path .wl-in{height:calc(var(--wl0) + 9 * var(--wls) + 40vh + 26cqw)}}

.reel-ph img.reel-img{object-position:50% 100%}

.reel-ph{background:#fff}

/* team photos: light grey hairline */
.reel-ph{border:1px solid #e3e3e3}

/* ===== Footer: black like the hero, "zade" as an orange LED dot matrix ===== */
.ft{background:#0b0b0b;color:#fff;padding-top:clamp(56px,7vw,96px);overflow:hidden}






.ft-word{display:block;width:100%;height:clamp(140px,24vw,380px);margin-top:clamp(40px,5vw,80px)}


@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr}.ft-say{grid-column:1/-1}.ft-say .btn{width:100%}}

/* ===== Final CTA + footer = one black closing block ===== */
.final{background:#0b0b0b;color:#fff;padding-bottom:clamp(64px,8vw,112px)}
.final .h2{color:#fff}
.final-sub{color:rgba(255,255,255,.72)!important}
.final .gust{stroke:var(--hot);stroke-opacity:.55!important;stroke-width:1.6}




.final .mail-addr{color:#fff}
.final .mail-copy{background:#fff;color:var(--ink)}
.ft{padding-top:0}

@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr}}

/* final: white capsules on black */



.final .mail-addr{color:var(--ink)}
.final .mail-copy{background:var(--ink);color:#fff}
.final .mail-msg{color:rgba(255,255,255,.6)}

/* final: two capsules side by side; email as the sanity.io "npm create" capsule (outline, mono, copy icon) */




.final .mail-addr{font:400 clamp(18px,1.6vw,22px)/1 var(--mono);color:#fff!important;text-transform:none}
.final .mail-addr:hover{color:var(--hot)!important}
.final .mail-copy{width:28px;height:28px;border-radius:0;background:none!important;color:#fff!important}
.final .mail-copy svg{width:22px;height:22px}
.final .mail-copy:hover{color:var(--hot)!important}
.final .mail-copy.done{color:var(--hot)!important}

@media (max-width:720px){.final-row{flex-direction:column}.final .mail-pill{height:60px;width:100%;justify-content:center}}

/* email capsule = sanity.io "npm create sanity@latest": 55px, 8px 32px, mono 24px, 1px white border; hover inverts */
.mail-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:55px;padding:8px 32px;border:1px solid #fff;border-radius:99999px;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.mail-btn .mail-addr{font:400 clamp(18px,1.67vw,24px)/1 var(--mono)}
.mail-btn svg{flex:none;width:24px;height:24px}
.mail-btn .mc-done{display:none}
.mail-btn.done .mc-copy{display:none}.mail-btn.done .mc-done{display:block}
.mail-btn:hover,.mail-btn:focus-visible{background:#fff;color:var(--ink)}
.mail-btn .mail-msg{position:absolute;left:0;right:0;top:calc(100% + 8px);font:400 11px/1 var(--mono);text-transform:uppercase;color:rgba(255,255,255,.6)}

@media (max-width:720px){.mail-btn{width:100%;justify-content:center}}

.final .final-h{max-width:none}
.final .final-h .h-line{white-space:nowrap}

/* two-line CTA (wireframe): label + small mono sub */
.btn--2l{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:55px;height:auto;padding:9px 32px}
.btn--2l .cta-sub{font:400 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;opacity:.75}

.final .gust{stroke:#8a8a8a!important;stroke-opacity:.5!important}

/* final: Ivan as a byline, then two equal buttons in one row (no nested capsules) */







@media (max-width:720px){.final-who{flex-direction:column;text-align:center}.final-row{flex-direction:column;width:100%}.final-row .btn--2l{width:100%;align-items:center}}

/* final CTA: Ivan inside the button */


.btn--2l .av{width:48px;height:48px;margin:0}
.b2-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px}

/* final CTA: bigger, Ivan's line back inside the button */





.cta-sub2{font:400 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;opacity:.85}
.cta-sub2 b{font-weight:500}

@media (max-width:720px){.final-row .btn--2l.btn--face{width:100%;justify-content:flex-start}.final-row .mail-btn{height:64px;min-height:64px}}



@media (max-width:720px){.final-row .b2-t .roll{font-size:20px;white-space:nowrap}.cta-sub2{font-size:13px;white-space:normal}.final-row .btn--2l.btn--face{padding:10px 20px 10px 10px}.final-row .btn--2l .av{width:52px;height:52px}.final-row .mail-btn{width:100%}}

/* final CTA: no ring on the photo; hover turns the button white */




/* partner logo tiles: fixed padding so the logo always has room */
.path .wl-logo{display:grid!important;place-items:center;padding:14% 12%!important}
.path .wl-logo .wl-lg{width:100%!important;max-width:100%;height:auto!important;max-height:none!important}

.path .wl-logo .wl-lg{width:80%!important}

.path .wl-logo{display:flex!important;align-items:center;justify-content:center}
.path .wl-logo .wl-lg{flex:0 0 78%;width:78%!important}

.path .wl-logo{padding:20px!important}

/* why-us cards: readable on top of the sentence */
.path .wl-card{padding:clamp(20px,1.8vw,28px)!important;box-shadow:0 12px 32px rgba(11,11,11,.08)!important}
.path .wl-k{font-size:13px;color:#4a4a4a}
.path .wl-q{margin-top:14px;font-size:clamp(19px,1.5vw,24px);line-height:1.35;color:var(--ink)}
.path .wl-l{font-size:17px;color:#333}
.path .wl-f small{font-size:15px;color:#4a4a4a}
.path .wl-f span{color:var(--ink)}
.path .wl-logo,.path .wl-photo{box-shadow:0 12px 32px rgba(11,11,11,.08)!important}

/* why-us typography = wireframe values (measured) */
.path .wl-card{padding:19px!important}
.path .wl-k{font-size:11px;letter-spacing:.07em;color:rgba(11,11,11,.6)}
.path .wl-n{margin-top:12px;font-size:56px;line-height:1;letter-spacing:-.05em}
.path .wl-l{font-size:14px;line-height:1.35;color:rgba(11,11,11,.6)}
.path .wl-f span{font-size:11px;letter-spacing:.07em}
.path .wl-f small{font-size:14px;color:rgba(11,11,11,.6)}
.path .wl-q{margin-top:12px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.path .wl-head .eyebrow{font-size:12px;letter-spacing:.07em;color:rgba(11,11,11,.6)}
@media (min-width:1200px){.path .wl-say{font-size:4cqw;line-height:1.08}}

.path .wl-card .wl-n{font-size:56px!important;letter-spacing:-.05em!important}

/* more air between the hero and the process block */
#process{padding-top:clamp(40px,5vw,72px)}

/* more air under the hero cards; the ground band from the wireframe stays invisible now that the horizon sits higher */
.hero{padding-bottom:clamp(40px,5vw,72px)!important}
.hero .hero-bg::before{border-top:0!important;background:none!important}

/* side gutters as in the wireframe (--pad: 6.5vw), shared by every block so the edges stay aligned */
:root{--gut:clamp(20px,6.5vw,124px)}

/* why-us, Analogue pattern on the light theme: the wireframe sentence is pinned in the middle of the screen,
   cards of different heights scroll over it in two staggered columns and blur what is under them */

/* columns sit close to the middle, as on Analogue, so the cards cross the sentence */

/* why-us tiles stay opaque white: the frosted backdrop blur froze scrolling (frames up to 350ms) */
.wl .wl-i.wl-card,.wl .wl-i.wl-logo{background:#fff!important}

/* hero cards, variant 2 (V7 partner cards): calm resting state with the description always shown,
   dot + label, two-tone heading, white pill. Variant 1 keeps the reveal-on-hover cards. */

body.hc-2 .hero .card{padding:clamp(24px,2.4vw,36px)!important;border-radius:4px;background:#2a2a2a!important;transition:background .3s ease}
body.hc-2 .hero .card:hover,body.hc-2 .hero .card:focus-visible{background:#313131!important}
body.hc-2 .hero .card .bar{padding:0;justify-content:flex-start}
body.hc-2 .hero .card .bar .mono{display:inline-flex;align-items:center;gap:10px;font:400 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.86)}
body.hc-2 .hero .card .bar .mono::before{content:"";width:6px;height:6px;border:3px solid rgba(255,255,255,.35);border-radius:50%;background:#fff;box-sizing:content-box}
body.hc-2 .hero .card .bar .cell{display:none}
body.hc-2 .hero .card .body{display:flex!important;flex-direction:column;align-items:flex-start;padding:0!important;margin-top:clamp(24px,2.4vw,36px)}
body.hc-2 .hero .card .card-face,body.hc-2 .hero .card .card-reveal{grid-area:auto;opacity:1!important;transform:none!important}
body.hc-2 .hero .card .card-face .h3{display:block;max-width:12em;font-size:clamp(32px,3.3vw,52px)!important;line-height:1.04;letter-spacing:-.03em;color:#fff;text-align:left}
body.hc-2 .hero .card .hc-a{display:block;color:rgba(255,255,255,.5)}
body.hc-2 .hero .card .card-reveal{display:block!important;padding:0!important;margin-top:clamp(32px,4vw,64px)}
body.hc-2 .hero .card .card-reveal .anim{display:none!important}
body.hc-2 .hero .card .card-reveal p{max-width:30em;font-size:16px!important;line-height:1.5;color:rgba(255,255,255,.64);text-align:left}

body.hc-2 .hero .cards{gap:8px}

body.hc-2 .hero .card{display:flex!important;flex-direction:column}
body.hc-2 .hero .card .body{flex:1}
body.hc-2 .hero .card .card-reveal{margin-bottom:clamp(24px,2.8vw,40px)}

@media (max-width:900px){body.hc-2 .hero .cards{grid-auto-rows:auto}body.hc-2 .hero .card{min-height:0!important;height:auto!important}}

/* hero cards v2, revised: no pill (the whole card is the link), the ↗ square from variant 1,
   description hidden at rest and revealed on hover together with a lighter card and an orange arrow */
body.hc-2 .hero .card .bar{justify-content:space-between;align-items:flex-start}
body.hc-2 .hero .card .bar .cell{display:grid!important;transition:background .25s ease,color .25s ease}
body.hc-2 .hero .card:hover .bar .cell,body.hc-2 .hero .card:focus-visible .bar .cell{background:var(--hot)!important;color:#0b0b0b!important}

body.hc-2 .hero .card .card-reveal{margin:auto 0 0!important;padding-top:clamp(24px,3vw,48px)!important;opacity:0!important;transform:translateY(10px)!important;transition:opacity .4s ease,transform .4s ease}
body.hc-2 .hero .card:hover .card-reveal,body.hc-2 .hero .card:focus-visible .card-reveal{opacity:1!important;transform:none!important}
@media (hover:none){body.hc-2 .hero .card .card-reveal{opacity:1!important;transform:none!important}}

/* hero cards v2, final: heading sits at the bottom; on hover it gives way to the description and the visual (as in v1) */
body.hc-2 .hero .card .body{display:grid!important;flex:1;align-items:end;margin-top:0}
body.hc-2 .hero .card .card-face,body.hc-2 .hero .card .card-reveal{grid-area:1/1!important;align-self:end}
body.hc-2 .hero .card .card-face{transition:opacity .4s ease,transform .4s ease}
body.hc-2 .hero .card:hover .card-face,body.hc-2 .hero .card:focus-visible .card-face{opacity:0!important;transform:translateY(-10px)!important}
body.hc-2 .hero .card .card-reveal{display:flex!important;flex-direction:row;align-items:center;gap:clamp(20px,2.4vw,36px);margin:0!important;padding:0!important}
body.hc-2 .hero .card .card-reveal .anim{display:block!important;flex:0 0 auto;width:clamp(140px,14vw,220px);height:auto}
body.hc-2 .hero .card .card-reveal p{font-size:18px!important;color:rgba(255,255,255,.8)}
body.hc-2 .hero .card{min-height:clamp(260px,24vw,340px)}
@media (hover:none){
  body.hc-2 .hero .card .body{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:16px}
  body.hc-2 .hero .card .card-reveal{flex-direction:column;align-items:flex-start;gap:12px}
  body.hc-2 .hero .card .card-reveal .anim{display:none!important}
  body.hc-2 .hero .card .card-reveal p{font-size:16px!important;color:rgba(255,255,255,.64)}
}

/* v2 cards a step darker */
body.hc-2 .hero .card{background:#222!important}
body.hc-2 .hero .card:hover,body.hc-2 .hero .card:focus-visible{background:#2a2a2a!important}

/* hero cards v3 (Base "Get funded" cards): heading top left, an empty field for the visual, a footer bar under a line
   with the mono question and a plain arrow. On hover the heading gives way to the description and the visual fills the field. */

/* v3 uses the v2 greys */

/* v3 visual smaller, centred in the field */

/* v3 cards a bit shorter */

/* process v2 (list + divider + visual, after the "integrated campaigns" ref): orange intro top left, the four steps as a
   big grey list with the current one in ink and a square bullet, a hairline divider whose orange segment sits level
   with the current step, the scene on the right */

/* the orange segment follows the current step row exactly */

/* solutions v2 (V7 "Before / With V7"): dot label + heading + description in the open, then a big panel
   (ink for the first sprint, orange for the second) holding the four "You get" items as 2x2 tiles,
   outcome and price under the panel. Integrated team stays a grey row. */

/* sv-2: panels start level in both columns; "You get" readable on the panels */

/* sv-2: both sprints and the integrated team sit inside one white container, like v1 */

/* sv-2: two separate white cards instead of one container; integrated team its own grey card below */

/* sv-2 as in the wireframe: one white box, the two sprints joined and split by a hairline, integrated team joined underneath in grey */

/* sv-2 tiles: text fits in two lines (wider tiles, tighter padding) */

/* "You get" on the orange panel in full white */

/* sv-2: hairline between the outcome and the price */

/* sv-2: outcome line on one line */

/* sv-2: each sprint card fits the screen height (below the header) */

/* sv-2: more air inside the "You get" tiles */

/* sv-2: even more air in the tiles where they sit 2x2 */

/* sv-2: taller "You get" panels (more air above and below the tiles) */

/* sv-2: integrated team in the same language as the sprints: heading and description, the two "You get" items
   as white tiles on the grey row, price on the right */

/* ---- block heads as on Sanity (structure, accents and copy from the wireframe) ----
   flat on the section (no white title card), H2 48/51.6 -0.035em in sentence case, lead 24/28.8 at 60% ink,
   the wireframe's step dots kept next to the title as its accent. Solutions: split head, title left, lead right.
   Case: the sentence is the H2. Final: 72px statement. */
.s-head.pp-intro,.stage .pp-intro{background:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
.s-head.pp-intro .pp-t,.stage .pp-intro .pp-t{display:flex;align-items:center;justify-content:flex-start;gap:20px;padding:0!important}
.s-head.pp-intro .eyebrow,.stage .pp-intro .eyebrow{margin:0!important;font:400 clamp(34px,3.4vw,48px)/1.075 var(--sans)!important;letter-spacing:-.035em!important;text-transform:none!important;color:var(--ink)!important}
.s-head.pp-intro p,.stage .pp-intro p{margin:0!important;padding:0!important;max-width:26em;font-size:clamp(19px,1.7vw,24px)!important;line-height:1.2!important;letter-spacing:-.01em;color:rgba(11,11,11,.6)!important}
.s-head.pp-intro .pc-dots,.stage .pp-intro .pc-dots{flex:0 0 auto;margin-top:.15em}
/* solutions: split head, title + dots left half, lead right half on the title's first line */
.solutions .s-head.pp-intro{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);align-items:start;max-width:none!important;width:auto!important;margin:0 0 clamp(40px,5vw,72px)!important}
.solutions .s-head.pp-intro p{padding-top:.5em!important}
/* process: head stacked at the top of the stage (the column is half width), lead under the title */
.stage .pp-intro{display:flex!important;flex-direction:column;gap:14px;margin:0 0 8px!important}
.stage .pp-intro p{display:block!important}
@media (max-width:900px){.solutions .s-head.pp-intro{grid-template-columns:1fr;row-gap:14px}.solutions .s-head.pp-intro p{padding-top:0!important}}
/* case: the wireframe sentence is the block H2 */
.case .c-head,.case h2.h3.c-head{max-width:15em;font-size:clamp(34px,3.4vw,48px)!important;line-height:1.075!important;letter-spacing:-.035em!important}
/* final: Sanity closing statement size */
.final .final-h{font-size:clamp(44px,5vw,72px)!important;line-height:1!important;letter-spacing:-.04em!important}

/* solutions head: lead under the title, not beside it */
.solutions .s-head.pp-intro{grid-template-columns:1fr!important;row-gap:14px!important}
.solutions .s-head.pp-intro p{padding-top:0!important}

/* process head on tablets/phones: compact, so the pinned scene keeps its room */
@media (max-width:900px){
.stage .pp-intro{gap:6px!important}
.stage .pp-intro .eyebrow{font-size:28px!important}
.stage .pp-intro p{font-size:15px!important;line-height:1.35!important}
.process .story-pin{grid-template-rows:minmax(0,58%) minmax(0,1fr)!important}

}

/* ================= Sanity type scale and gutters (2026-10-14) =================
   Gutters: header and hero sit 24px from the edge (Sanity full-bleed); every other block lives in a centred
   1248px container (x96 at 1440, x336 at 1920), with 24px as the minimum.
   Type: 112 / 72 / 48 / 38 / 24 / 18 / 15, mono 12–13. Why-us tile labels keep the wireframe values. */
:root{--gut:max(24px,calc((100vw - 1248px) / 2))}
.top .wrap,.top .nav{padding-inline:24px!important}
.hero.wrap,.hero{padding-inline:24px!important}
/* 112: hero statement */
.hero h1,.hero .h1{font-size:clamp(44px,7.2vw,112px)!important;line-height:1!important;letter-spacing:-.04em!important}
/* 72: closing statement (already) ; 48: block heads (already) */
/* 38: sub-blocks and card titles */
body.hc-2 .hero .card .card-face .h3{font-size:clamp(28px,2.65vw,38px)!important;line-height:1.1!important;letter-spacing:-.03em!important}

/* 24: card titles, names, leads */

.reel-cap b{font-size:24px!important;letter-spacing:-.01em!important}
.reel-tx p{font-size:clamp(18px,1.7vw,24px)!important;line-height:1.2!important}
/* 18: body */
.hero .sub{font-size:18px!important;line-height:1.3!important}
/* 15: card body and small text */

.ft a,.ft li a{font-size:15px!important}

.reel-cap span{font-size:13px!important}

/* hero background line work darker (quieter on the black) */
.hero .hero-poster{opacity:.24!important}

/* final CTA on phones: the 24px label did not fit the pill */
@media (max-width:600px){.final .final-row .cta-txt,.final .final-row .roll span,.final .book .cta-txt{font-size:18px!important}}

/* What we believe: scene styles ported as-is from the updated wireframe (dark) */
.story-scene svg{width:100%;height:100%;display:block;overflow:visible}
.story-scene .w{fill:#fff;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.story-scene .ln{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round}
.story-scene .thin{stroke-width:.6;stroke-opacity:.55}
.story-scene .gh{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-dasharray:5 5;stroke-linejoin:round}
.story-scene .dots{stroke-dasharray:1 7}
.story-scene .faint{stroke-opacity:.4}
.story-scene .ns{vector-effect:non-scaling-stroke}
.story-scene .acc{fill:var(--accent);stroke:var(--ink);stroke-width:1.1}
.story-scene .q{font:700 46px var(--disp);fill:var(--ink)}
.story-scene .blade{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%;animation:sway-soft 3.2s ease-in-out infinite}
.story[data-step="2"] .story-scene .blade{animation:sway-hard .9s ease-in-out infinite}
.story-scene .gust{stroke-width:1.6;stroke-dasharray:120 590;animation:gustfast 1.3s linear infinite}
.story-scene .ghost-rotor{animation:spin 16s linear infinite}
.story[data-step="2"] .story-scene .ghost-rotor{animation:rock 2.6s ease-in-out infinite}
.story-scene .cups{animation:spin 3s linear infinite}
.story-scene .cell{fill:#fff;stroke:var(--ink);stroke-width:1}
.story[data-step="3"] .story-scene .cell.on{animation:cellfill .3s ease both}
.story[data-step="3"] .story-scene .cell.on.best{animation-name:cellbest}
.story-scene .pin{opacity:0}
.story[data-step="3"] .story-scene .pin{animation:pindrop .5s cubic-bezier(.3,1.4,.5,1) 1.6s both}
.story-scene .ring{fill:none;stroke:var(--accent);stroke-width:1.6;transform-box:fill-box;transform-origin:center;opacity:0}
.story[data-step="3"] .story-scene .ring{animation:ringpulse 2s ease-out 1.8s infinite}
.story-scene .mill-tower{transform-box:fill-box;transform-origin:50% 100%}
.story[data-step="4"] .story-scene .mill-tower{animation:riseonce .7s cubic-bezier(.5,0,.2,1) both}
.story[data-step="4"] .story-scene .mill-part{animation:fadein .3s ease .65s both}
.story[data-step="4"] .story-scene .mill-rotor{animation:growonce .6s cubic-bezier(.3,1.4,.5,1) .75s both}
.story-scene .mill-spin{animation:spin 3s linear infinite}
.story-scene .flow{stroke-dasharray:40 20;animation:drift 1.3s linear infinite}
.story-scene .flow.f2{stroke-opacity:.6;animation-duration:1.6s}
.story-scene .flow.f3{stroke-opacity:.35;animation-duration:2s}
.story-scene .signal{stroke-dasharray:1 6;animation:drift 1.4s linear infinite}
.story-scene .abar{transform-box:fill-box;transform-origin:50% 100%}
.story[data-step="4"] .story-scene .abar{animation:riseonce .5s ease both}
.story-scene .w{fill:var(--card);stroke:var(--fg)}
.story-scene .slab .w{fill:#1a1f2d}
.story-scene .cell{fill:var(--card)}
.story-scene .q{font-weight:400;font-size:56px}
.story-scene .blade{stroke-opacity:.7}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.story-scene svg *{animation:none!important}
.story-scene .cell.on{fill:var(--fg)}
.story-scene .cell.on.best{fill:var(--accent)}
.story-scene .pin{opacity:1}
}
.story-scene .slab .w{fill:#eceef0}
.story .story-scene svg *{vector-effect:non-scaling-stroke}
.story .story-scene .w,.story .story-scene .slab .w,.story .story-scene .cell,.story .story-scene .acc{fill:var(--wf);stroke:var(--ink);stroke-width:1}
.story .story-scene .ln,.story .story-scene .gh,.story .story-scene .ring{fill:none;stroke:var(--ink);stroke-width:1;stroke-opacity:1;stroke-linecap:butt}
.story .story-scene .thin{stroke-opacity:.5}
.story .story-scene .gd{stroke-opacity:.34}
.story .story-scene .gd.mj{stroke-opacity:.45}
.story .story-scene .gh{stroke-dasharray:4 4}
.story .story-scene .gr{stroke-dasharray:none;stroke-opacity:.32}
.story .story-scene .faint{stroke-opacity:.4}
.story .story-scene .dots{stroke-dasharray:2 6}
.story .story-scene .q{fill:none;stroke:var(--ink);stroke-width:1}
.story .story-scene .wfp{fill:none;stroke:var(--ink);stroke-width:.8;vector-effect:none}
.story .story-scene .cell.on{fill:url(#wfh)}
.story .story-scene .cell.on.best{fill:url(#wfx)}
.story .story-scene .grass{display:none}
.story .story-scene .L{transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.story .story-scene .gust{stroke-dasharray:120 590;animation:gustfast 6s linear infinite}
.story[data-step] .story-scene .ghost-rotor{animation:spin 32s linear infinite}
.story .story-scene .cups{animation-name:spin;animation-timing-function:linear;animation-iteration-count:infinite}
.story[data-step="3"] .story-scene .cell.on,.story[data-step="3"] .story-scene .cell.on.best{animation:wfcell .7s cubic-bezier(.4,0,.2,1) both}
.story[data-step="3"] .story-scene .pin{animation:wfpin 1s cubic-bezier(.4,0,.2,1) 1.9s both}
.story .story-scene .ring{stroke-dasharray:4 6;opacity:0}
.story[data-step="3"] .story-scene .ring{animation:fadein 1s cubic-bezier(.4,0,.2,1) 2.4s both,drift 9s linear infinite}
.story[data-step="4"] .story-scene .mill-tower{animation:riseonce 1.4s cubic-bezier(.4,0,.2,1) both}
.story[data-step="4"] .story-scene .mill-part{animation:fadein .6s cubic-bezier(.4,0,.2,1) 1.3s both}
.story[data-step="4"] .story-scene .mill-rotor{animation:growonce 1.1s cubic-bezier(.4,0,.2,1) 1.5s both}
.story .story-scene .mill-spin{animation:spin 10s linear infinite}
.story .story-scene .flow{stroke-dasharray:40 20;animation:drift 4s linear infinite}
.story .story-scene .flow.f2{stroke-opacity:.6;animation-duration:5s}
.story .story-scene .flow.f3{stroke-opacity:.35;animation-duration:6s}
.story .story-scene .signal{stroke-dasharray:2 4;animation:drift 5s linear infinite}
.story[data-step="4"] .story-scene .abar{animation:riseonce 1s cubic-bezier(.4,0,.2,1) both}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.story .story-scene .ring,.story .story-scene .pin{opacity:1}
}
.story .story-scene .L *{animation-play-state:paused}
.story[data-step="1"] .story-scene [data-on~="1"] *,.story[data-step="2"] .story-scene [data-on~="2"] *,.story[data-step="3"] .story-scene [data-on~="3"] *,.story[data-step="4"] .story-scene [data-on~="4"] *{animation-play-state:running}
.story .story-scene .bot-b{animation:botbob 5s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .bot-z .bot-b{animation-delay:-2.5s}
.story .story-scene .bot-sh{transform-box:fill-box;transform-origin:center;animation:botsh 5s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .bot-z .bot-sh{animation-delay:-2.5s}
.story .story-scene .mer{animation:botmer 6s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .eyes{transition:transform 1s cubic-bezier(.4,0,.2,1)}
.story .story-scene .eye{stroke-opacity:1;transform-box:fill-box;transform-origin:center;animation:botblink 6s linear infinite}
.story[data-step="1"] .story-scene .bot-f .eyes{transform:translate(2.5px,-3px)}
.story[data-step="2"] .story-scene .bot-f .eyes{transform:translate(3.5px,-1.5px)}
.story[data-step="3"] .story-scene .bot-f .eyes{transform:translate(3.5px,1px)}
.story[data-step="4"] .story-scene .bot-f .eyes{transform:translate(3.5px,-1px)}
.story[data-step="3"] .story-scene .bot-z .eyes{transform:translate(2.5px,-2px)}
.story[data-step="4"] .story-scene .bot-z .eyes{transform:translate(3.5px,-1.5px)}
.story .story-scene .orbit{stroke-dasharray:3 3;animation:drift 8s linear infinite}
.story .story-scene .pad{animation:botbob 5s cubic-bezier(.45,0,.55,1) -1.2s infinite alternate}
.story .story-scene .pkt{offset-path:path('M390.5 387.2 L342 409.6');offset-rotate:0deg;animation:pkt 3.2s linear infinite}
.story .story-scene .cell{fill:none;stroke:var(--ink);stroke-width:1;stroke-opacity:.4}
.story .story-scene .cell.on,.story .story-scene .cell.on.best{fill:none;stroke-opacity:1}
.story .story-scene .gem{animation:botbob 4.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .pos-f,.story .story-scene .pos-z{transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.story[data-step="2"] .story-scene .pos-f{transform:translate(30px,14px)}
.story[data-step="3"] .story-scene .pos-f{transform:translate(52px,6px)}
.story[data-step="4"] .story-scene .pos-f{transform:translate(120px,20px)}
.story[data-step="3"] .story-scene .pos-z{animation:zwalk 11s cubic-bezier(.45,0,.55,1) infinite}
.story .story-scene .ant{transform-origin:0 -11px;animation:antsway 3.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.story[data-step="2"] .story-scene .bot-f .eyes{animation:eyes2 7s cubic-bezier(.4,0,.2,1) infinite}
.story[data-step="3"] .story-scene .bot-f .eyes{animation:eyes3 9s cubic-bezier(.4,0,.2,1) infinite}
.story[data-step="1"] .story-scene .L .dots{animation:drift8 1.8s linear infinite}
.story[data-step="2"] .story-scene .L .dots{animation:drift8 3.2s linear infinite}
.story[data-step="2"] .story-scene .L[data-on="1 2"]>*{animation:wfbreath 3.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .q{transform-box:fill-box;transform-origin:center;animation:qfloat 4.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.story[data-step="4"] .story-scene .bot-z .pad{animation:botbob 2.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .gv{opacity:0}
.story .story-scene .gv-a{opacity:1}
.story[data-step="1"] .story-scene .L .gv{animation:gvcycle 18s linear infinite backwards}
.story[data-step="1"] .story-scene .L .gv-b{animation-delay:4.5s}
.story[data-step="1"] .story-scene .L .gv-c{animation-delay:9s}
.story[data-step="1"] .story-scene .L .gv-d{animation-delay:13.5s}
.story[data-step="2"] .story-scene .L .gv:not(.gv-a){animation:none;opacity:0}
.story .story-scene .vx{transform-origin:262.4px 200px;animation:botmer 6s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .pump-rotor{animation:spin 18s linear infinite}
.story .story-scene .as{opacity:0}
.story .story-scene .as-1{opacity:1}
.story[data-step="2"] .story-scene .as{animation:ascycle 12s linear infinite backwards}
.story[data-step="2"] .story-scene .as-2{animation-delay:4s}
.story[data-step="2"] .story-scene .as-3{animation-delay:8s}
.story .story-scene .gust2{stroke-dasharray:60 300;animation:gust360 5s linear infinite}
.story .story-scene .needle{transform:rotate(45deg)}
.story[data-step="2"] .story-scene .needle{animation:needle 12s cubic-bezier(.4,0,.2,1) infinite}
.story[data-step="3"] .story-scene .pos-z{animation:zwalk16 16s cubic-bezier(.45,0,.55,1) infinite}
.story[data-step="3"] .story-scene .cell.on.m2{animation:rd2 16s linear infinite both}
.story[data-step="3"] .story-scene .cell.on.m1{animation:rd1 16s linear infinite both}
.story[data-step="3"] .story-scene .cell.on.m3{animation:rd3 16s linear infinite both}
.story .story-scene .scan{opacity:0;stroke-dasharray:3 3}
.story[data-step="3"] .story-scene .sc2{animation:scan2 16s linear infinite}
.story[data-step="3"] .story-scene .sc1{animation:scan1 16s linear infinite}
.story[data-step="3"] .story-scene .sc3{animation:scan3 16s linear infinite}
.story[data-step="3"] .story-scene .pin{animation:pinloop 16s cubic-bezier(.4,0,.2,1) infinite}
.story[data-step="3"] .story-scene .ring{animation:ringloop 16s linear infinite,drift 9s linear infinite}
.story .story-scene .tile{fill:url(#wfh);stroke:none;opacity:0}
.story[data-step="4"] .story-scene .tile{animation:tileloop 12s linear infinite backwards}
.story[data-step="4"] .story-scene .abar{animation:barloop 12s cubic-bezier(.4,0,.2,1) infinite backwards}
.story[data-step="4"] .story-scene .bot-f .bot-b{animation-duration:2.6s}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.story .story-scene .tile{opacity:.4}
}
.story .story-scene .w,.story .story-scene .slab .w,.story .story-scene .ln,.story .story-scene .gh,.story .story-scene .ring,.story .story-scene .q,.story .story-scene .cell,.story .story-scene .acc{stroke-width:.85}
.story .story-scene .piles .gd,.story .story-scene .mill-tower .gd,.story .story-scene .gv-a>.gr,.story .story-scene .bot-b>ellipse[cy="-6"],.story .story-scene .bot-b>ellipse[cy="6"]{display:none}
.story .story-scene .sgrid .gd,.story .story-scene .sgrid .gd.mj{stroke-opacity:.22}
.story .story-scene .sec{stroke-opacity:.6;stroke-dasharray:none}
.story .story-scene .tip{fill:var(--ink);stroke:none}
.story .story-scene .tip-g{fill-opacity:.45}
.story .story-scene .gh{stroke-dasharray:3 3}
.story .story-scene .gr{stroke-dasharray:none}
.story .story-scene .slab .w.f-t,.story .story-scene .w.f-t{fill:var(--f-t)}
.story .story-scene .slab .w.f-l,.story .story-scene .w.f-l{fill:var(--f-l)}
.story .story-scene .slab .w.f-r,.story .story-scene .w.f-r{fill:var(--f-r)}
.story .story-scene .piles .w{fill:#d4d6d8}
.story .story-scene .abar .w.f-t{fill:var(--f-acc-t)}
.story .story-scene .abar .w.f-l{fill:var(--f-acc-l)}
.story .story-scene .abar .w.f-r{fill:var(--f-acc-r)}
.story .story-scene .mill-tower .w,.story .story-scene .mill-spin .w,.story .story-scene .mill-rotor~circle.w,.story .story-scene .cups .w,.story .story-scene .gem .w,.story .story-scene .bot .w,.story .story-scene .pad .w,.story .story-scene .pkt{fill:#fff}
.story .story-scene .shade{fill:#e4e6e8;stroke:none}
.story .story-scene .bot-sh{fill:rgba(0,0,0,.12);stroke:none}
.story .story-scene .tile{fill:#9c9ca6}
.story .story-scene .sgrid .gd,.story .story-scene .sgrid .gd.mj{stroke-opacity:.16}
.story .story-scene .eye{fill:var(--ink)}
.story .story-scene .mill-tower path.gd{display:inline;stroke-opacity:.3}
.story .story-scene .gv-a>path.gr{display:inline;stroke-opacity:.28}
.story .story-scene .lamp{fill:var(--ink);stroke:none;animation:hpblink 2.8s ease-in-out infinite}
.story .story-scene .gv .gf{fill:rgba(255,255,255,.82)}
.story .story-scene .gv .gf.f-l{fill:rgba(207,207,211,.85)}
.story .story-scene .gv .gf.f-r{fill:rgba(178,178,184,.85)}
.story .story-scene .pshade{fill:#a6a6ad;stroke:none}
.story .story-scene .dial{fill:#fff}
.story .story-scene .q{fill:var(--ink);stroke:none}
.story .story-scene .cell,.story .story-scene .cell.on,.story .story-scene .cell.on.best{stroke-width:3.2;stroke-linecap:butt}
.story .story-scene .cell{stroke:#bfbfc6;stroke-opacity:1}
.story .story-scene .cell.on,.story .story-scene .cell.on.best{stroke:var(--ink)}
.story .story-scene .ring{stroke-width:1.2}
.story .story-scene .L *{animation-play-state:paused!important}
.story[data-step="1"] .story-scene [data-on~="1"] *,.story[data-step="2"] .story-scene [data-on~="2"] *,.story[data-step="3"] .story-scene [data-on~="3"] *,.story[data-step="4"] .story-scene [data-on~="4"] *{animation-play-state:running!important}

.story .story-scene .gv{will-change:opacity}
.story[data-step="2"] .story-scene .gv:not(.gv-a) *{animation-play-state:paused!important}
.story .story-stage .story-scene .w,.story .story-stage .story-scene .cell,.story .story-stage .story-scene .acc{fill:#161616}
.story .story-stage .story-scene .slab .w.f-t,.story .story-stage .story-scene .w.f-t{fill:var(--f-t)}
.story .story-stage .story-scene .slab .w.f-l,.story .story-stage .story-scene .w.f-l{fill:var(--f-l)}
.story .story-stage .story-scene .slab .w.f-r,.story .story-stage .story-scene .w.f-r{fill:var(--f-r)}
.story .story-stage .story-scene .abar .w.f-t{fill:var(--f-acc-t)}
.story .story-stage .story-scene .abar .w.f-l{fill:var(--f-acc-l)}
.story .story-stage .story-scene .abar .w.f-r{fill:var(--f-acc-r)}
.story .story-stage .story-scene .piles .w{fill:#1e1e1e}
.story .story-stage .story-scene .pshade{fill:#0e0e0e}
.story .story-stage .story-scene .mill-tower .w,.story .story-stage .story-scene .mill-spin .w,.story .story-stage .story-scene .mill-rotor~circle.w,.story .story-stage .story-scene .cups .w,.story .story-stage .story-scene .gem .w,.story .story-stage .story-scene .bot .w,.story .story-stage .story-scene .pad .w,.story .story-stage .story-scene .pkt,.story .story-stage .story-scene .dial{fill:#161616}
.story .story-stage .story-scene .shade{fill:#050505}
.story .story-stage .story-scene .bot-sh{fill:rgba(255,255,255,.14)}
.story .story-stage .story-scene .gv .gf{fill:rgba(255,255,255,.07)}
.story .story-stage .story-scene .gv .gf.f-l{fill:rgba(255,255,255,.12)}
.story .story-stage .story-scene .gv .gf.f-r{fill:rgba(255,255,255,.03)}
.story .story-stage .story-scene .tile{fill:#fff}
.story .story-stage .story-scene .cell{fill:none;stroke:#4a4a4a}
.story .story-stage .story-scene .cell.on,.story .story-stage .story-scene .cell.on.best{fill:none;stroke:var(--ink)}
.story .story-stage .story-scene .eye,.story .story-stage .story-scene .tip,.story .story-stage .story-scene .lamp,.story .story-stage .story-scene .q{fill:var(--ink)}
.story[data-step="5"] .story-scene [data-on~="5"]{opacity:1}
.story[data-step="5"] .story-scene [data-on~="5"] *{animation-play-state:running!important}
.story[data-step="5"] .story-scene .pos-f{transform:translate(120px,20px)}
.story .story-scene .qx-mill .ghost-rotor{animation:spin 26s linear infinite}
.story .story-scene .qx-run{animation:qxgallop .55s cubic-bezier(.45,0,.55,1) infinite alternate}
.story .story-scene .qx-legs{transform-box:fill-box;transform-origin:50% 0;animation:qxlegs .55s linear infinite alternate}
.story .story-scene .qx{animation:qxcharge 5s cubic-bezier(.45,0,.55,1) infinite alternate}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.story .story-scene .qx,.story .story-scene .qx-run,.story .story-scene .qx-legs{animation:none}
}
.story .story-scene .tile{display:none}
.story[data-step="4"] .story-scene .pos-f{transform:translate(120px,20px)}
.story[data-step="4"] .story-scene .bot-z{display:none}
.story .story-scene .gv-b,.story .story-scene .gv-c,.story .story-scene .gv-d{display:none}
.story[data-step="1"] .story-scene .L .gv{animation:none;opacity:1}
.story .story-scene .gv-a{opacity:1}
.story .story-scene .bp{fill:#1d1d1d}
.story .story-scene .bp-ink{stroke:#fff;stroke-width:1.2}
.story .story-scene .flag-limp{fill:#2a2a2a}
.story .story-scene .flag-fly{fill:#fff;transform-box:fill-box;transform-origin:0 50%;animation:flagfly 1.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.story[data-step="2"] .story-scene .mill-tower{animation:riseonce 1.2s cubic-bezier(.4,0,.2,1) both}
.story[data-step="2"] .story-scene .mill-part{animation:fadein .5s ease 1.1s both}
.story[data-step="2"] .story-scene .mill-rotor{animation:growonce 1s cubic-bezier(.4,0,.2,1) 1.3s both}
.story[data-step="2"] .story-scene .mill-spin{animation:stall 4.5s cubic-bezier(.4,0,.2,1) 2.4s infinite}
.story[data-step="4"] .story-scene .mill-tower,.story[data-step="4"] .story-scene .mill-part,.story[data-step="4"] .story-scene .mill-rotor{animation:none}
.story .story-scene .btn-cap{fill:#fff;stroke:none}
.story[data-step="2"] .story-scene .btn-cap{animation:btnpress 4.5s ease 2.4s infinite}
.story .story-scene .bcell{stroke:#333;stroke-width:2.4;stroke-linecap:butt;fill:none}
.story[data-step="4"] .story-scene .bcell{stroke:#fff;animation:bcharge 3.2s steps(1) infinite}
.story[data-step="4"] .story-scene .bc2{animation-delay:.4s}
.story[data-step="4"] .story-scene .bc3{animation-delay:.8s}
.story[data-step="4"] .story-scene .bc4{animation-delay:1.2s}
.story .story-scene .cable{stroke-dasharray:2 3}
.story[data-step="4"] .story-scene .cable{stroke-opacity:.8;animation:drift 3s linear infinite}
.story .story-scene .rd{font:500 8px/1 var(--mono);letter-spacing:.08em;fill:rgba(255,255,255,.75);stroke:none}
.story[data-step="2"] .story-scene .rd0{animation:rdblink 1.6s steps(1) infinite}
.story[data-step="4"] .story-scene .rd0{display:none}
.story .story-scene .wind3{stroke:#fff;stroke-opacity:.55;stroke-width:1;stroke-dasharray:14 22;animation:drift 2.2s linear infinite}
.story[data-step="3"] .story-scene .rd2{animation:fadein .6s ease 2.6s both}
.story .story-scene .qx{animation:qxcharge2 6s cubic-bezier(.45,0,.55,1) infinite}
.story .story-scene .qx-mill{animation:qxdissolve 6s linear infinite}
.story .story-scene .qx-mill .gh{animation:qxlines 6s linear infinite}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.story .story-scene .flag-fly,.story .story-scene .wind3,.story .story-scene .qx,.story .story-scene .qx-mill,.story .story-scene .qx-mill .gh,.story .story-scene .bcell,.story .story-scene .rd{animation:none}
}
.story .story-scene.gl-on > svg{display:none}
.story .story-scene.gl-on{position:relative;aspect-ratio:52 / 59;width:100%}
.story .story-scene.gl-on canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
@media (min-width:901px){.story .story-stage .story-scene.gl-on{flex:1 1 auto;width:100%;max-width:none;max-height:none;aspect-ratio:auto;min-height:0;margin:clamp(16px,3vh,32px) 0 0}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{stroke-dashoffset:-60}}
@keyframes sway-soft{0%,100%{transform:rotate(4deg)}50%{transform:rotate(14deg)}}
@keyframes sway-hard{0%,100%{transform:rotate(26deg)}50%{transform:rotate(58deg)}}
@keyframes gustfast{from{stroke-dashoffset:710}to{stroke-dashoffset:0}}
@keyframes rock{0%,100%{transform:rotate(-5deg)}40%{transform:rotate(9deg)}70%{transform:rotate(2deg)}}
@keyframes cellfill{from{fill:#fff}to{fill:var(--ink)}}
@keyframes cellbest{from{fill:#fff}to{fill:var(--accent)}}
@keyframes pindrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes ringpulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes riseonce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes growonce{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes cellfill{from{fill:var(--card)}to{fill:var(--fg)}}
@keyframes cellbest{from{fill:var(--card)}to{fill:var(--accent)}}
@keyframes wfcell{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes wfpin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes botbob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes botsh{from{transform:scale(1)}to{transform:scale(.82)}}
@keyframes botmer{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
@keyframes botblink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.12)}}
@keyframes pkt{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes wfcell{from{opacity:0}to{opacity:1}}
@keyframes zwalk{0%,12%{transform:translate(14px,6px)}42%,58%{transform:translate(76px,-4px)}88%,100%{transform:translate(14px,6px)}}
@keyframes antsway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes eyes2{0%,38%{transform:translate(3.5px,-1.5px)}50%,88%{transform:translate(1.2px,-3.2px)}100%{transform:translate(3.5px,-1.5px)}}
@keyframes eyes3{0%,25%{transform:translate(3.5px,1px)}35%,60%{transform:translate(3px,-2.5px)}70%,90%{transform:translate(3.8px,0)}100%{transform:translate(3.5px,1px)}}
@keyframes drift8{to{stroke-dashoffset:-8}}
@keyframes wfbreath{from{opacity:1}to{opacity:.5}}
@keyframes qfloat{from{transform:translateY(2px) rotate(-5deg)}to{transform:translateY(-4px) rotate(6deg)}}
@keyframes gvcycle{0%{opacity:0}4%,21%{opacity:1}25%,100%{opacity:0}}
@keyframes ascycle{0%{opacity:0}5%,28%{opacity:1}33.3%,100%{opacity:0}}
@keyframes gust360{from{stroke-dashoffset:360}to{stroke-dashoffset:0}}
@keyframes needle{0%,26%{transform:rotate(45deg)}33.3%,59%{transform:rotate(135deg)}66.6%,93%{transform:rotate(360deg)}100%{transform:rotate(405deg)}}
@keyframes zwalk16{0%{transform:translate(0,0)}8%,24%{transform:translate(-10px,-4px)}34%,50%{transform:translate(57px,-80px)}62%,92%{transform:translate(111px,-4px)}100%{transform:translate(0,0)}}
@keyframes rd2{0%,10%{opacity:0}14%,94%{opacity:1}100%{opacity:0}}
@keyframes rd1{0%,36%{opacity:0}40%,94%{opacity:1}100%{opacity:0}}
@keyframes rd3{0%,64%{opacity:0}68%,94%{opacity:1}100%{opacity:0}}
@keyframes scan2{0%,8%{opacity:0;transform:translateY(0)}10%{opacity:1;transform:translateY(0)}21%{opacity:1;transform:translateY(-74px)}23%,100%{opacity:0;transform:translateY(-74px)}}
@keyframes scan1{0%,34%{opacity:0;transform:translateY(0)}36%{opacity:1;transform:translateY(0)}47%{opacity:1;transform:translateY(-74px)}49%,100%{opacity:0;transform:translateY(-74px)}}
@keyframes scan3{0%,62%{opacity:0;transform:translateY(0)}64%{opacity:1;transform:translateY(0)}75%{opacity:1;transform:translateY(-74px)}77%,100%{opacity:0;transform:translateY(-74px)}}
@keyframes pinloop{0%,76%{opacity:0;transform:translateY(-14px)}82%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes ringloop{0%,78%{opacity:0}84%,94%{opacity:1}100%{opacity:0}}
@keyframes tileloop{0%{opacity:0}5%,78%{opacity:.4}86%,100%{opacity:0}}
@keyframes barloop{0%{transform:scaleY(.12)}14%,80%{transform:scaleY(1)}92%,100%{transform:scaleY(.12)}}
@keyframes hpblink{0%,55%,100%{opacity:1}70%,85%{opacity:.15}}
@keyframes qxgallop{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes qxlegs{from{transform:scaleX(1)}to{transform:scaleX(.82)}}
@keyframes qxcharge{from{translate:0 0}to{translate:14px -7px}}
@keyframes flagfly{from{transform:skewY(-4deg) scaleX(1)}to{transform:skewY(5deg) scaleX(.9)}}
@keyframes stall{0%,12%{transform:rotate(0)}48%{transform:rotate(330deg)}60%,100%{transform:rotate(360deg)}}
@keyframes btnpress{0%,6%{opacity:1;transform:none}9%{opacity:.35;transform:translateY(1px)}14%,100%{opacity:1;transform:none}}
@keyframes bcharge{0%{stroke:#333}10%,90%{stroke:#fff}}
@keyframes rdblink{50%{opacity:.35}}
@keyframes qxcharge2{0%{translate:0 0}55%{translate:20px -10px}62%,78%{translate:20px -10px}100%{translate:0 0}}
@keyframes qxdissolve{0%,52%{opacity:1}68%,86%{opacity:0}100%{opacity:1}}
@keyframes qxlines{0%,52%{stroke-dashoffset:0}68%{stroke-dashoffset:-40}100%{stroke-dashoffset:-40}}

/* What we believe: dark band like the wireframe, Sanity head, flat stage (no grey panel) */
.process.believe{background:#0b0b0b!important;color:#fff}
.believe .stage{background:none!important;border-radius:0!important}
.believe .stage .pp-intro .eyebrow{color:#fff!important}
.believe .stage .pc-dots i{background:#0b0b0b!important;border-color:rgba(255,255,255,.35)!important}
.believe .stage .pc-dots i+i::before{border-top-color:rgba(255,255,255,.35)!important}
.believe .story[data-step="1"] .pc-dots i:nth-child(1),.believe .story[data-step="2"] .pc-dots i:nth-child(2),.believe .story[data-step="3"] .pc-dots i:nth-child(3),.believe .story[data-step="4"] .pc-dots i:nth-child(4){background:var(--hot)!important;border-color:var(--hot)!important}
/* steps: mono word label above each statement; current in orange, passed in white, coming ones blurred */
.believe .sl{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;text-align:left}
.believe .sl-no{display:block!important;width:auto!important;height:auto!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;font:400 12px/1.2 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:rgba(255,255,255,.5)!important}
.believe .sl[aria-current="step"] .sl-no{color:rgba(255,255,255,.85)!important}
.believe .sl-t .c{color:rgba(255,255,255,.22)!important}
.believe .sl-t .c.on{color:#fff!important}
.believe .sl[aria-current="step"]:not(.past) .sl-t .c.on{color:var(--hot)!important}
.believe .sl{transition:filter .5s ease,opacity .5s ease}
.believe .sl:not([aria-current="step"]):not(.past){filter:blur(4px);opacity:.55}
.believe .sl-o{display:block;font:400 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.believe .sl-o s{color:rgba(255,255,255,.35)}
.believe .sl-o-ar{margin:0 .4em;color:var(--hot)}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.believe .sl{transition:none}}

.believe .stage.story-stage{border:0!important}

/* scene variables: dark values from the wireframe (dark solids, light outlines) */
.believe .story{--accent:#fff;--fg:#fff;--card:#161616}
.believe .story .story-stage .story-scene{--wf:#161616;--ink:#eef0f2;--f-t:#2a2a2a;--f-l:#1a1a1a;--f-r:#101010;--f-acc-t:#ffffff;--f-acc-l:#dee0e2;--f-acc-r:#b9bbbd;--disp:var(--sans)}

/* believe on phones: smaller scene row so the last step fits under it */
@media (max-width:900px){.believe .story-pin{grid-template-rows:minmax(0,44%) minmax(0,1fr)!important}.believe .steps{gap:12px!important}.believe .sl-t{font-size:clamp(17px,4.6vw,24px)!important}}

@media (max-width:900px) and (max-height:760px){.believe .story-pin{grid-template-rows:minmax(0,38%) minmax(0,1fr)!important}}

/* ================= structure pass against the updated wireframe (2026-10-14) ================= */
/* integrated team: the wireframe's tag label instead of a big heading */

/* "have a question" button: two lines, like the wireframe */

/* case: hairline under the three columns, author at the bottom right */
.case3 .c3-from{grid-column:1 / -1!important;justify-content:flex-end;margin-top:clamp(8px,1vw,16px);padding-top:clamp(16px,1.6vw,24px);border-top:1px solid rgba(11,11,11,.1)}
/* fund row: quiet line with a text link */
.fund2{display:flex!important;align-items:center;justify-content:space-between;gap:24px}
.fund2 .f2-copy{margin:0;max-width:46em;font-size:18px;line-height:1.4;color:rgba(11,11,11,.6)}
.fund2 .f2-copy b{font-weight:400;color:var(--ink)}
.fund2 .f2-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-size:18px;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.fund2 .f2-link span{transition:transform .25s ease}
.fund2 .f2-link:hover{color:var(--hot)}.fund2 .f2-link:hover span{transform:translateX(4px)}
@media (max-width:720px){.fund2{flex-direction:column;align-items:flex-start}}
/* final: one capsule (photo, line, button) and a mail line under it */
.final .book3{position:relative;z-index:1;display:inline-flex;align-items:center;gap:16px;margin-top:clamp(28px,3vw,44px);padding:8px 8px 8px 8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#161616}
.final .book3 .av{flex:0 0 56px;width:56px;height:56px;border-radius:50%}
.final .book3 p{margin:0;font-size:16px;line-height:1.3;color:rgba(255,255,255,.75);text-align:left}
.final .book3 p b{font-weight:400;color:#fff}
.final .book3 .b3-btn{margin-left:8px}
.final .book3 .b3-btn .cta-sub2{display:block;margin-top:2px;font:400 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.final .mail3{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.final .mail3 p{margin:0;font-size:15px;color:rgba(255,255,255,.6)}
.final .mail3 a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.final .mail3 a:hover{border-color:#fff}
.final .mail-round{position:relative;display:grid!important;place-items:center;width:40px!important;height:40px!important;min-width:0!important;padding:0!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:50%!important;background:none!important;color:#fff!important;cursor:pointer}
.final .mail-round:hover{background:#fff!important;color:#0b0b0b!important}
.final .mail-round .mail-addr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.final .mail-round svg{grid-area:1/1;width:16px;height:16px}
.final .mail-round .mail-msg{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);font:400 12px/1 var(--mono);color:rgba(255,255,255,.7);white-space:nowrap}
@media (max-width:600px){.final .book3{flex-wrap:wrap;justify-content:center;border-radius:24px;padding:16px}.final .book3 p{text-align:center}.final .book3 .b3-btn{margin-left:0}}
/* the gusts stay off the CTA */
.final .final-bg{-webkit-mask-image:radial-gradient(ellipse 34% 30% at 50% 74%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 34% 30% at 50% 74%,transparent 55%,#000 100%)}
/* footer: one quiet line, nothing competing with the CTA */
.ft.ft-line{padding:0!important;background:#0b0b0b;border-top:1px solid rgba(255,255,255,.08)}
.ft-line .fl-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:22px;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ft-line nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft-line a{font-size:12px!important;color:rgba(255,255,255,.65);text-decoration:none}
.ft-line a:hover{color:#fff}
/* why-us: a third less empty scroll between the tiles */



.final .mail-round{flex:0 0 40px!important;aspect-ratio:1}

/* ================= Solutions as Sanity pricing (2026-10-14) =================
   centred head, three equal plan columns split by hairlines with dotted texture beside them,
   rows aligned across columns (subgrid): name / question / description / price / CTA / you get / outcome.
   Integrated team is the third plan (like Sanity's Enterprise column). Copy from the wireframe. */
.solutions{background:#fff!important}
.solutions .s-head.pp-intro{justify-items:center;text-align:center;margin-bottom:clamp(40px,4.4vw,64px)!important}
.solutions .s-head.pp-intro .pp-t{justify-content:center}
.solutions .s-head.pp-intro p{margin-inline:auto!important}
.plans{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);border-block:1px solid #e3e3e3}
.plans::before{content:"";position:absolute;z-index:-1;top:-1px;bottom:-1px;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));background:radial-gradient(rgba(11,11,11,.22) .9px,transparent 1.2px) 0 0/8px 8px}
.solutions{position:relative;isolation:isolate}
.plan{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0;padding:clamp(24px,2.4vw,36px) clamp(20px,2.2vw,32px) clamp(28px,2.6vw,40px);border-left:1px solid #e3e3e3;background:#fff;cursor:pointer;transition:background .25s ease}
.plan:last-child{border-right:1px solid #e3e3e3}

.plan[data-open]:hover{background:#fafafa}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pl-name{font:400 24px/1.1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.plan .oc-open{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:6px;background:#f4f4f4;cursor:pointer;transition:background .25s ease}
.plan .oc-open svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.6}
.plan:hover .oc-open{background:var(--hot)}
.pl-q{margin:clamp(16px,1.6vw,22px) 0 0;font:400 18px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.pl-desc{margin:8px 0 0;font-size:15px;line-height:1.4;color:rgba(11,11,11,.6)}
.pl-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:clamp(24px,2.4vw,36px)}
.pl-price b{font:400 clamp(36px,3.4vw,48px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.pl-price span{font:400 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.6)}
.pl-cta{display:flex;align-items:center;justify-content:center;height:44px;margin-top:20px;border-radius:999px;font:400 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);transition:background .25s ease,color .25s ease}
.pl-cta .roll span+span{display:none}



.pl-k{display:block;font:400 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.6)}
.pl-get{margin-top:clamp(28px,2.8vw,40px)}
.pl-get ul{margin:12px 0 0;padding:0;list-style:none}
.pl-get li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:15px;line-height:1.35;color:var(--ink)}
.pl-get .ic{flex:0 0 16px;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--hot);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pl-out{margin-top:clamp(20px,2vw,28px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid #e3e3e3}
.pl-out p{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
@media (max-width:900px){
  .plans{grid-template-columns:1fr;grid-template-rows:none;border-bottom:0}
  .plan{grid-row:auto;display:block;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3}
  .plans::before{display:none}
  .plan .pl-desc:empty{display:none}
}

/* "have a question" capsule on the now white solutions band */
.solutions .talk3{background:#f4f4f4!important;margin-top:clamp(32px,4vw,56px)!important}



/* Solutions, wireframe structure in Sanity pricing dress: two sprint columns (no buttons),
   big question headings, price at the bottom; integrated team as a full-width row underneath */
.plans{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(6,auto) auto!important}
.plan{grid-row:span 6!important}
.plan:nth-child(2){border-right:1px solid #e3e3e3}
.pl-q{margin-top:clamp(20px,2vw,28px)!important;max-width:14em;font:400 clamp(28px,2.65vw,38px)/1.1 var(--sans)!important;letter-spacing:-.03em!important}
.pl-desc{margin-top:12px!important;max-width:34em}
.plan .pl-price{justify-content:space-between;align-items:baseline;margin-top:clamp(20px,2vw,28px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid #e3e3e3}
.plan .pl-price span{order:-1}
.plan-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:clamp(24px,3vw,56px);align-items:start;padding:clamp(24px,2.6vw,40px) clamp(20px,2.2vw,32px);border:1px solid #e3e3e3;border-bottom:0;background:#f4f4f4}
.plan-row .pr-desc{margin:12px 0 0;max-width:26em;font-size:18px;line-height:1.35;color:var(--ink)}
.plan-row .pl-get{margin:0}
.plan-row .pr-price{flex-direction:column;align-items:flex-end;gap:8px;margin:0}
@media (max-width:900px){
  .plans{grid-template-columns:1fr!important;grid-template-rows:none!important}
  .plan{grid-row:auto!important}
  .plan-row{grid-template-columns:1fr;border-bottom:1px solid #e3e3e3}
  .plan-row .pr-price{align-items:flex-start}
}

/* dotted texture runs a little past the columns at the top and bottom, as on sanity.io/pricing */
.plans::before{top:-40px!important;bottom:-40px!important}

/* the head dots follow the hovered sprint: first dot = Problem Validation, second = Solution Validation */
.solutions .s-head .pc-dots i{transition:background .25s ease,border-color .25s ease}
.solutions:has(.plan:nth-child(1):hover) .s-head .pc-dots i:nth-child(1),.solutions:has(.plan:nth-child(2):hover) .s-head .pc-dots i:nth-child(2){background:var(--hot)!important;border-color:var(--hot)!important}

/* "have a question": the last row of the pricing frame, quiet like Sanity's contact rows —
   Ivan (collage portrait, as in the team reel), the question with a mono caption, an orange mono pill */
.plan-ask{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:18px clamp(20px,2.2vw,32px);border:1px solid #e3e3e3;border-bottom:0;background:#fff}
.plan-ask .pa-av{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover}
.plan-ask .pa-q{flex:1;margin:0;font-size:18px;line-height:1.3;color:var(--ink)}
.plan-ask .pa-k{display:block;margin-top:4px;font:400 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.6)}
.plan-ask .pa-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;background:var(--hot);color:var(--ink);font:400 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease}
.plan-ask .pa-btn span{transition:transform .25s ease}
.plan-ask .pa-btn:hover{background:#0b0b0b;color:#fff}.plan-ask .pa-btn:hover span{transform:translateX(3px)}
.plans{border-bottom:1px solid #e3e3e3}
@media (max-width:600px){.plan-ask{flex-wrap:wrap}.plan-ask .pa-q{flex-basis:calc(100% - 72px)}.plan-ask .pa-btn{width:100%;justify-content:center}}

/* "have a question" stands on its own under the solutions block, centred (wireframe position),
   as a quiet outline capsule: Ivan, the question with a mono caption, an orange mono pill */
.ask-wrap{display:flex;justify-content:center;margin-top:clamp(72px,7vw,104px)}
.plan-ask.ask-pill{display:inline-flex;width:auto;max-width:100%;gap:16px;padding:8px 8px 8px 8px;border:1px solid #e3e3e3!important;border-radius:999px;background:#fff}
.plan-ask.ask-pill .pa-av{flex-basis:48px;width:48px;height:48px}
.plan-ask.ask-pill .pa-q{flex:0 1 auto;font-size:16px;padding-right:12px}
@media (max-width:600px){.plan-ask.ask-pill{border-radius:24px;padding:14px}}

/* ask capsule: bigger and clearly visible (grey ground, Sanity xl pill) */
.plan-ask.ask-pill{gap:20px;padding:10px 10px 10px 10px;border:0!important;background:#f4f4f4}
.plan-ask.ask-pill .pa-av{flex-basis:72px;width:72px;height:72px}
.plan-ask.ask-pill .pa-q{font-size:clamp(18px,1.7vw,24px);line-height:1.2;padding-right:24px}
.plan-ask.ask-pill .pa-k{margin-top:6px;font-size:13px}
.plan-ask.ask-pill .pa-btn{height:60px;padding:0 32px;font-size:14px}
@media (max-width:600px){.plan-ask.ask-pill{padding:16px}.plan-ask.ask-pill .pa-av{flex-basis:56px;width:56px;height:56px}.plan-ask.ask-pill .pa-q{padding-right:0}}

/* ask capsule: hairline outline with a very light fill */
.plan-ask.ask-pill{border:1px solid #e3e3e3!important;background:#fafafa}

/* Case in the same Sanity frame language as Solutions: hairline frame on white, no grey panel.
   Wireframe order kept: logo / Finna / quote, hairline, author bottom right. */
.case3{grid-template-columns:clamp(140px,14vw,200px) minmax(0,1fr)!important;grid-template-areas:"logo name" "logo quote" "from from";gap:0!important;padding:0!important;border:1px solid #e3e3e3;border-radius:0!important;background:#fff!important}
.case3 .c3-logo{grid-area:logo;display:grid;place-items:center;width:auto!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;padding:24px;border-right:1px solid #e3e3e3;border-radius:0!important;background:#fff!important}
.case3 .c3-logo svg{width:100%;max-width:140px;height:auto}
.case3 .c3-name{grid-area:name;padding:clamp(24px,2.6vw,36px) clamp(24px,3vw,48px) 0;font:400 12px/1.2 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.6)!important}
.case3 .c3-quote{grid-area:quote;max-width:24em!important;padding:14px clamp(24px,3vw,48px) clamp(28px,3vw,44px)}
.case3 .c3-from{grid-area:from;margin:0!important;padding:16px clamp(24px,3vw,48px)!important;border-top:1px solid #e3e3e3!important}
.case .fund2{margin-top:16px;padding:clamp(20px,2.2vw,28px) clamp(24px,3vw,48px)!important;border:1px solid #e3e3e3;border-radius:0!important;background:#fff!important}
@media (max-width:720px){
  .case3{grid-template-columns:1fr!important;grid-template-areas:"logo" "name" "quote" "from"}
  .case3 .c3-logo{justify-items:start;border-right:0;border-bottom:1px solid #e3e3e3}
}

/* case: a black-and-white photo with the client logo laid over it in white, like Sanity's customer stories */
.case3{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)!important}
.case3 .c3-media{position:relative;min-height:clamp(280px,26vw,380px);padding:0!important;overflow:hidden;background:#0b0b0b!important;place-items:end start!important}
.case3 .c3-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;filter:grayscale(1) contrast(1.08) brightness(.82)}
.case3 .c3-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,0) 45%,rgba(11,11,11,.55) 100%)}
.case3 .c3-media svg{position:relative;z-index:1;width:clamp(110px,10vw,150px)!important;max-width:none;margin:0 0 clamp(20px,2vw,28px) clamp(20px,2vw,28px);color:#fff}
.case3 .c3-quote{align-self:start}
@media (max-width:720px){.case3 .c3-media{min-height:240px}}

@media (max-width:720px){.case3{grid-template-columns:1fr!important}}

.case3 .c3-media .c3-lg{position:relative;z-index:1;width:clamp(110px,10vw,150px);height:auto;margin:0 0 clamp(20px,2vw,28px) clamp(20px,2vw,28px)}

/* case: Finna brand card (logo on its gradient) instead of a photo */
.case3 .c3-brand{background:#dfe9fb!important}
.case3 .c3-brand .c3-photo{filter:none;object-position:50% 50%}
.case3 .c3-brand::after{display:none}

/* Finna brand card: the card's soft blue gradient drawn in CSS, the logo (blue, transparent) centred with room around it */
.case3 .c3-brand{place-items:center!important;background:radial-gradient(90% 70% at 70% 8%,#f2f6fe 0%,rgba(242,246,254,0) 60%),linear-gradient(180deg,#dee8fd 0%,#c8dafb 20%,#b8d2f5 48%,#c2dbef 70%,#dfeef1 100%)!important}
.case3 .c3-brand .c3-blogo{position:relative;width:min(64%,300px);height:auto;margin:0}

/* brand card smaller: a near-square cell, as client logos are on Sanity, not a third of the frame */
.case3{grid-template-columns:clamp(200px,20vw,280px) minmax(0,1fr)!important}
.case3 .c3-media{min-height:clamp(200px,20vw,280px)!important}
.case3 .c3-brand .c3-blogo{width:min(70%,180px)}
@media (max-width:720px){.case3{grid-template-columns:1fr!important}.case3 .c3-media{min-height:180px!important}}

/* ================= Case as Sanity's "Loved by" block (2026-10-14) =================
   full-bleed dark band over a black-and-white photo, 72px statement top left, client logo in white,
   quote with a hairline on its left and the author in mono, dotted plaques at the edges (Sanity texture),
   the fund line as a quiet hairline row at the bottom */

/* case keeps the wireframe structure in the dark Sanity dress:
   heading / card (logo · Finna · quote, hairline, FROM author right) / fund row with a link */


/* case (light, wireframe structure): Sanity texture around the frame — a dotted field behind it
   that runs past it top and bottom, and dotted plaques at the edges of the band */
.case{position:relative;isolation:isolate}
.case .wrap{position:relative}
.case3{position:relative}
.case3::before{content:"";position:absolute;z-index:-1;top:-40px;bottom:-40px;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));background:radial-gradient(rgba(11,11,11,.22) .9px,transparent 1.2px) 0 0/8px 8px}
.case .fund2{position:relative;margin-top:56px}


/* keep the dotted field clear of the heading */
.case .case3{margin-top:clamp(64px,6vw,88px)!important}

/* centre the word "finna" (not word + mark) in the brand cell: word spans 0-290 of 405px, so shift by 14.2% */
.case3 .c3-brand .c3-blogo{transform:translateX(8%)}


/* why-us in the Sanity dress (wireframe structure, tiles and letter fill unchanged):
   square tiles with a hairline instead of rounded shadow cards, black-and-white photos (as Sanity's
   customer photos and our team collage), the pinned sentence at the 48px block size */
.path .wl-i{border:1px solid #e3e3e3!important;border-radius:0!important;box-shadow:none!important}
.path .wl-photo{border-color:transparent!important}
.path .wl-photo .wl-ph-img{filter:grayscale(1) contrast(1.05)}
.path .wl-k{display:flex;align-items:center;gap:8px}
.path .wl-k::before{content:""!important;display:block!important;width:6px;height:6px;background:var(--hot)}
@media (min-width:1200px){.path .wl-say{font-size:clamp(40px,3.4vw,48px)!important;line-height:1.075!important;letter-spacing:-.035em!important}}


/* why-us on white: its last sentence ("Now, meet the people…") reads as the head of the team block below, one surface */
.path{background:#fff!important}
.team{padding-top:clamp(24px,3vw,48px)!important}


/* brand card keeps its own square, it does not stretch to the row height */
.case3 .c3-brand{align-self:start!important;aspect-ratio:1!important;min-height:0!important;height:auto!important;border-right:0!important;border-bottom:1px solid #e3e3e3}
.case3 .c3-name,.case3 .c3-quote{border-left:1px solid #e3e3e3}
@media (max-width:720px){.case3 .c3-brand{aspect-ratio:16/9!important;border-bottom:1px solid #e3e3e3}.case3 .c3-name,.case3 .c3-quote{border-left:0}}


/* why-us cards: more air inside */
.path .wl-card{padding:clamp(24px,2.2vw,32px)!important}
.path .wl-card .wl-q{margin-top:20px!important}
.path .wl-card .wl-n{margin-top:20px!important}
.path .wl-card .wl-f{margin-top:24px!important}




/* why-us stat cards in Sanity's proof-strip style (wireframe order kept: label / number / line / footer):
   the number sits on a dotted plaque like Sanity's "-97%", captions in mono caps, footer under a hairline */
.path .wl-card .wl-n{display:block;align-self:stretch;margin-top:20px!important;padding:8px 12px 10px;font-size:clamp(48px,4vw,64px)!important;line-height:1!important;letter-spacing:-.04em!important;background:radial-gradient(rgba(11,11,11,.18) .9px,transparent 1.2px) 0 0/5px 5px}
.path .wl-card .wl-l{margin-top:12px!important;font:400 12px/1.4 var(--mono)!important;letter-spacing:.06em!important;text-transform:uppercase;color:rgba(11,11,11,.6)!important}
.path .wl-card .wl-f{margin-top:24px!important;padding-top:16px!important;border-top:1px solid #e3e3e3!important;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.path .wl-card .wl-f span{font:400 12px/1.3 var(--mono)!important;letter-spacing:.06em!important;color:var(--ink)}
.path .wl-card .wl-f small{margin:0!important;font-size:14px!important;color:rgba(11,11,11,.6)!important;text-align:right}


/* why-us desktop = wireframe placement and scroll: photos are absolutely placed tiles like the rest (a later rule had put them back in flow) */
@media (min-width:1200px){.path .wl-in > .wl-photo{position:absolute!important}}



/* team: plain black-and-white photos with their own background (as Sanity customer photos) */
.reel-ph img.reel-img{filter:grayscale(1) contrast(1.05);object-position:50% 30%}


.reel-ph,.reel-ph .reel-cap{border-radius:0!important}


/* hero cards: label and description at the wireframe sizes (label mono 14 caps, description 21px white) */
body.hc-2 .hero .card .bar .mono{font:400 14px/1.3 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:rgba(255,255,255,.82)!important}
body.hc-2 .hero .card .card-reveal p{font-size:21px!important;line-height:1.38!important;letter-spacing:-.01em!important;color:#fff!important;max-width:24em}
@media (hover:none){body.hc-2 .hero .card .card-reveal p{font-size:18px!important;color:rgba(255,255,255,.82)!important}}


/* hero card visual a bit bigger */
body.hc-2 .hero .card .card-reveal .anim{width:clamp(180px,17vw,270px)!important}


/* hero cards a little shorter */
body.hc-2 .hero .card{min-height:clamp(220px,20vw,290px)!important}


/* Finna card image as supplied, inset with padding (does not touch the cell edges) */
.case3 .c3-card{background:#fff!important;padding:clamp(16px,1.6vw,24px)!important;place-items:center!important}
.case3 .c3-card .c3-cardimg{display:block;width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain}
@media (max-width:720px){.case3 .c3-card{aspect-ratio:auto!important;height:260px}}


.case3 .c3-card{position:relative}
.case3 .c3-card .c3-cardimg{position:absolute;inset:clamp(16px,1.6vw,24px);width:calc(100% - 2 * clamp(16px,1.6vw,24px));height:calc(100% - 2 * clamp(16px,1.6vw,24px));max-width:none;max-height:none;object-fit:contain}


@media (max-width:720px){.case3 .c3-card{aspect-ratio:auto!important;height:260px!important}}


/* Finna cell: one clean divider. The cell runs the full height of the row with a single line on its right;
   no bottom line (the author row already has one); the card image keeps a fixed size, inset and centred */
.case3 .c3-card{align-self:stretch!important;aspect-ratio:auto!important;height:auto!important;min-height:0!important;border-bottom:0!important;border-right:1px solid #e3e3e3!important;display:grid!important;place-items:center!important}
.case3 .c3-name,.case3 .c3-quote{border-left:0!important}
.case3 .c3-card .c3-cardimg{position:static!important;inset:auto!important;width:auto!important;height:clamp(150px,13vw,190px)!important;max-width:100%!important;object-fit:contain}
@media (max-width:720px){.case3 .c3-card{height:auto!important;padding:20px!important;border-right:0!important;border-bottom:1px solid #e3e3e3!important}.case3 .c3-card .c3-cardimg{height:200px!important}}


/* the line above the author is inset, it does not run to the frame edges */
.case3 .c3-from{margin:0 clamp(24px,3vw,48px)!important;padding:16px 0!important}


/* the vertical divider runs to the bottom of the frame: the logo cell spans all rows, the author row sits under the quote only */
@media (min-width:721px){.case3{grid-template-areas:"logo name" "logo quote" "from from"!important}}


/* Finna card shown square: cropped to the centre with rounded corners */
.case3 .c3-card .c3-cardimg{aspect-ratio:1!important;width:clamp(150px,13vw,190px)!important;height:auto!important;object-fit:cover!important;object-position:50% 50%;border-radius:clamp(14px,1.2vw,18px)}
@media (max-width:720px){.case3 .c3-card .c3-cardimg{width:200px!important;height:auto!important}}


/* author line runs from the divider to the right edge of the frame; text keeps its inset */
.case3 .c3-from{margin:0!important;padding:16px clamp(24px,3vw,48px)!important}


/* Finna square smaller */
.case3 .c3-card .c3-cardimg{width:clamp(96px,8vw,120px)!important;border-radius:12px}
@media (max-width:720px){.case3 .c3-card .c3-cardimg{width:120px!important}}


.case3 .c3-card .c3-cardimg{width:clamp(116px,9.5vw,140px)!important}
@media (max-width:720px){.case3 .c3-card .c3-cardimg{width:136px!important}}


/* final CTA, wireframe structure in the site's language:
   pixel wind (dotted LED streams like the hero) converging on the CTA, a bigger capsule, a clear mail line */
.final .final-bg .px{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:0 9;animation:pxflow 8s linear infinite}
.final .final-bg .px-o{stroke:var(--hot)}
@keyframes pxflow{to{stroke-dashoffset:-90}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.final .final-bg .px{animation:none}}
.final .book3{gap:20px!important;padding:10px!important;margin-top:clamp(36px,4vw,56px)!important;background:#161616!important;border-color:rgba(255,255,255,.16)!important}
.final .book3 .av{flex:0 0 72px!important;width:72px!important;height:72px!important}
.final .book3 p{font-size:clamp(17px,1.5vw,20px)!important;padding-right:12px}
.final .book3 .b3-btn{height:60px!important;padding:0 30px!important;font-size:15px!important}
.final .mail3{margin-top:28px!important}
.final .mail3 p{font-size:16px!important}
.final .mail-round{background:#fff!important;color:#0b0b0b!important;border-color:#fff!important}
.final .mail-round:hover{background:var(--hot)!important;border-color:var(--hot)!important}
@media (max-width:600px){.final .book3 .av{flex-basis:56px!important;width:56px!important;height:56px!important}.final .book3 .b3-btn{width:100%;justify-content:center}}


.final .mail-round{flex:0 0 40px!important;width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;align-self:center!important;box-sizing:border-box}
.final .book3 .b3-btn{justify-content:center!important;text-align:center}
.final .book3 .b3-btn .b2-t{align-items:center;text-align:center}


/* final: the wireframe pixel wind (canvas) replaces the svg streams */
.final .final-bg{display:none!important}
.final canvas.final-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.final > :not(canvas):not(svg){position:relative;z-index:1}


/* final: room for the wind as in the wireframe (copy sits on a taller dark field) */
.final{padding-top:clamp(96px,10vw,144px)!important;padding-bottom:clamp(96px,10vw,144px)!important}


/* final = the wireframe's final block, measured: 56px headline, one-line 18px sub (640px),
   a translucent capsule (white .1, no border) 114px tall with an 86px photo, 18px white line, 52px sentence-case button,
   48px white copy circle */
.final .final-h{font-size:clamp(40px,3.9vw,56px)!important;line-height:1!important;letter-spacing:-.04em!important}
.final .final-sub{max-width:640px!important;font-size:18px!important;line-height:1.5!important;color:rgba(255,255,255,.66)!important}
.final .book3{gap:20px!important;padding:14px 14px!important;margin-top:clamp(40px,4.4vw,72px)!important;background:rgba(255,255,255,.1)!important;border:0!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.final .book3 .av{flex:0 0 86px!important;width:86px!important;height:86px!important}
.final .book3 p{font-size:18px!important;line-height:1.5!important;color:#fff!important;padding-right:16px}
.final .book3 .b3-btn{height:52px!important;padding:0 24px!important;margin-right:16px}
.final .book3 .b3-btn .roll span{font:400 16px/1.2 var(--sans)!important;letter-spacing:0!important;text-transform:none!important}
.final .mail3{margin-top:32px!important}
.final .mail3 p{font-size:16px!important;color:rgba(255,255,255,.62)!important}
.final .mail-round{flex-basis:48px!important;width:48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;border:0!important}
@media (max-width:600px){.final .book3 .av{flex-basis:64px!important;width:64px!important;height:64px!important}.final .book3 .b3-btn{margin-right:0}}


/* the headline box hugs the text (it was 1248px wide), so the quiet zone of the wind is as small as in the wireframe */
.final .final-h{width:fit-content!important;max-width:100%;margin-left:auto!important;margin-right:auto!important}


/* hero headline a little smaller */
.hero h1,.hero .h1{font-size:clamp(40px,6.4vw,96px)!important}


/* hero card description larger; the visual gives way on narrower cards so the text keeps its width */
body.hc-2 .hero .card .card-reveal p{font-size:clamp(20px,1.7vw,24px)!important;line-height:1.3!important;flex:1;min-width:0}
body.hc-2 .hero .card .card-reveal .anim{width:min(40%,270px)!important;flex:0 1 auto}


/* case dot field lighter */
.case3::before{background:radial-gradient(rgba(11,11,11,.12) .9px,transparent 1.2px) 0 0/8px 8px!important}


/* Solutions dot field as light as the case one */
.plans::before{background:radial-gradient(rgba(11,11,11,.12) .9px,transparent 1.2px) 0 0/8px 8px!important}
/* hairline between the black hero and the black "What we believe" */
.process.believe{border-top:1px solid rgba(255,255,255,.1)}
/* team photos already greyscale with an even background (/landing/assets/img/team-bw) */
.reel-ph img.reel-img{filter:none!important;object-position:50% 50%!important}


/* typed on arrival (wireframe): the "have a question" line and the line next to Ivan in the final type in,
   letter by letter, with a blinking orange caret */
.tw .tw-w{display:inline-block;white-space:pre}
.tw .tw-c{visibility:hidden;position:relative}
.tw .tw-c.on{visibility:visible}
.tw .tw-c.cur::after{content:"";visibility:visible;position:absolute;left:100%;top:.1em;bottom:.04em;width:2px;margin-left:1px;background:var(--hot);animation:twblink .9s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
/* believe steps: lighter blur, layer promoted (a 4px blur on large type stalled frames) */
.believe .sl{will-change:filter,opacity}
.believe .sl:not([aria-current="step"]):not(.past){filter:blur(3px)!important}


/* header and hero on the same grid as every other block (1248px container), nav links centred */
.top .wrap,.top .nav{padding-inline:var(--gut)!important}
.hero.wrap,.hero{padding-inline:var(--gut)!important}
.top .nav{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
.top .nav .logo{justify-self:start}
.top .nav .nav-links{justify-self:center;margin:0!important}
.top .nav > .btn{justify-self:end}



.top .nav > .btn{grid-column:3}
.top .nav .nav-links{grid-column:2}


/* team arrows (wireframe): on hover the arrow shrinks away and a turbine spins in its place */
.reel-btn svg{transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.reel-btn .tb{display:block!important;width:36px;height:36px;opacity:0;transform:scale(.3)}
.reel-btn .tb g{animation:reelspin 2.6s linear infinite;animation-play-state:paused;transform-origin:0 0}
.reel-btn.prev .tb g{animation-direction:reverse}
.reel-btn:hover .ar{opacity:0;transform:scale(.3)}
.reel-btn:hover .tb{opacity:1;transform:none}
.reel-btn:hover .tb g{animation-play-state:running}
@keyframes reelspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.reel-btn .tb g{animation:none}}


/* hero cards 16px shorter */
body.hc-2 .hero .card{min-height:clamp(204px,calc(20vw - 16px),274px)!important}


/* real Zade wordmark (/landing/assets/Logo *.svg), inherits the header text colour */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo .logo-svg{display:block;width:auto;height:22px;fill:currentColor}
@media (max-width:600px){.logo .logo-svg{height:19px}}

/* scene readouts ("ENERGY OUTPUT") readable: bigger, brighter */
.believe .story .story-scene .rd{font-size:12px!important;letter-spacing:.06em!important;fill:#fff!important}


/* readouts stay steady white (the wireframe blinked "ENERGY OUTPUT: 0" on step 2) */
.believe .story .story-scene .rd{animation:none!important;opacity:1}
.believe .story[data-step="2"] .story-scene .rd0{animation:none!important;opacity:1!important}


/* Solutions text hierarchy: one clear lead per column.
   1 sprint name = small mono label (orange square), 2 question = the heading, 3 description = grey body,
   4 "You get" list = readable body, 5 outcome = emphasised result, 6 price. */
.pl-name{display:inline-flex;align-items:center;gap:10px;font:400 12px/1.2 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase;color:rgba(11,11,11,.7)!important}
.pl-name::before{content:"";width:8px;height:8px;background:var(--hot)}
.pl-q{margin-top:clamp(16px,1.6vw,22px)!important}
.pl-desc{font-size:16px!important;line-height:1.45!important;color:rgba(11,11,11,.6)!important}
.pl-get{margin-top:clamp(28px,2.6vw,36px)!important}
.pl-get li{font-size:16px!important;line-height:1.35!important;padding:6px 0!important}
.pl-out p{margin-top:10px!important;font-size:17px!important;max-width:none!important;text-wrap:wrap!important;line-height:1.35!important;letter-spacing:-.01em;color:var(--ink)!important}
.plan-row .pl-name{margin-bottom:12px}


/* Solutions sub-heads as on Sanity ("Content Releases"): sentence-case sans title in ink, grey body under it */
.plans .pl-get .pl-k,.plans .pl-out .pl-k{font:400 22px/1.2 var(--sans)!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important}
.plans .pl-get ul{margin-top:12px!important}
.plans .pl-out p{margin-top:8px!important;font-size:17px!important;line-height:1.4!important;color:rgba(11,11,11,.6)!important}


/* nav CTA with the wireframe sub line: Talk to Ivan / 15-minute call */
.top .nav-cta2{height:46px!important;padding:0 18px 0 10px!important;gap:14px}
.top .nav-cta2 .av{width:34px!important;height:34px!important;flex:0 0 34px}
.top .nav-cta2 .b2-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.top .nav-cta2 .cta-sub2{display:block;margin-top:2px;font:400 10px/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
@media (max-width:720px){.top .nav-cta2 .cta-sub2{display:none}.top .nav-cta2{height:38px!important}.top .nav-cta2 .av{width:28px!important;height:28px!important;flex-basis:28px}}

/* believe head: step dots before the title */
.believe .stage .pp-intro .pp-t .pc-dots{order:-1;margin-top:0!important}
.believe .stage .pp-intro .pp-t{gap:24px!important}


/* solutions head: step dots before the title too */
.solutions .s-head .pp-t .pc-dots{order:-1;margin-top:0!important}
.solutions .s-head .pp-t{gap:24px!important}


/* why-us eyebrow: one orange square before it, like the other labels */
.path .wl .wl-head .eyebrow{display:inline-flex!important;align-items:center;gap:10px;width:auto!important}
.path .wl .wl-head .eyebrow::before{content:""!important;display:block!important;width:8px;height:8px;background:var(--hot)}
.path .wl .wl-head{text-align:center}


/* block labels as Sanity's "MEDIA LIBRARY 101": mono caps in ink, with their markers in front */
.s-head.pp-intro .eyebrow,.stage .pp-intro .eyebrow,.path .wl .wl-head .eyebrow{font:400 clamp(16px,1.4vw,20px)/1.2 var(--mono)!important;letter-spacing:.02em!important;text-transform:uppercase!important}
.s-head.pp-intro .eyebrow,.path .wl .wl-head .eyebrow{color:var(--ink)!important}
.believe .stage .pp-intro .eyebrow{color:#fff!important}
.s-head.pp-intro .pp-t,.stage .pp-intro .pp-t,.believe .stage .pp-intro .pp-t{gap:16px!important}
.path .wl .wl-head .eyebrow{gap:12px}


/* case heading belongs to the block: lead size, closer to the card */
.case .c-head,.case h2.h3.c-head{font-size:clamp(22px,1.9vw,28px)!important;line-height:1.2!important;letter-spacing:-.02em!important;max-width:24em!important}
.case .case3{margin-top:48px!important}
.case3::before{top:-28px!important;bottom:-28px!important}


/* less space under the ask capsule */
#offering.solutions{padding-bottom:clamp(40px,4vw,56px)!important}


/* case heading on one line where it fits */
.case .c-head,.case h2.h3.c-head{max-width:none!important;text-wrap:wrap!important}
.case .c-head .h-line{display:inline!important}


/* Solutions background, Intercom-style halftone: small square dots, dense at the sides and fading out
   towards the middle (where the columns are), small square corner markers */
.plans::before{
  background:
    linear-gradient(#0b0b0b,#0b0b0b) 0 0/6px 6px no-repeat,
    linear-gradient(#0b0b0b,#0b0b0b) 100% 0/6px 6px no-repeat,
    linear-gradient(#0b0b0b,#0b0b0b) 0 100%/6px 6px no-repeat,
    linear-gradient(#0b0b0b,#0b0b0b) 100% 100%/6px 6px no-repeat,
    conic-gradient(from 90deg at 1.6px 1.6px,rgba(11,11,11,.38) 25%,transparent 0) 0 0/6px 6px!important;
  -webkit-mask-image:radial-gradient(ellipse 62% 75% at 50% 50%,transparent 55%,#000 100%),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100%,6px 6px;
  -webkit-mask-position:0 0,0 0;
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-image:radial-gradient(ellipse 62% 75% at 50% 50%,transparent 55%,#000 100%);
}


/* halftone, softer: two dot layers (fine + coarse) fading out from the outer edges, corner markers */
.plans::before{
  background:
    linear-gradient(#0b0b0b,#0b0b0b) 0 0/5px 5px no-repeat,
    linear-gradient(#0b0b0b,#0b0b0b) 100% 0/5px 5px no-repeat,
    linear-gradient(#0b0b0b,#0b0b0b) 0 100%/5px 5px no-repeat,
    linear-gradient(#0b0b0b,#0b0b0b) 100% 100%/5px 5px no-repeat,
    conic-gradient(from 90deg at 1.4px 1.4px,rgba(11,11,11,.26) 25%,transparent 0) 0 0/7px 7px!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.55) calc(var(--gut) * .45),transparent calc(var(--gut) + 8px),transparent calc(100% - var(--gut) - 8px),rgba(0,0,0,.55) calc(100% - var(--gut) * .45),#000 100%)!important;
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.55) calc(var(--gut) * .45),transparent calc(var(--gut) + 8px),transparent calc(100% - var(--gut) - 8px),rgba(0,0,0,.55) calc(100% - var(--gut) * .45),#000 100%)!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
}
/* ask capsule belongs to Solutions: closer to the table, more room before the case */
.ask-wrap{margin-top:clamp(40px,4vw,56px)!important}
#offering.solutions{padding-bottom:clamp(72px,8vw,120px)!important}


/* Solutions background = Intercom's pattern: ragged rectangular dot patches peeking out from under the frame
   (/landing/assets/img/halftone.svg, centred on the 1248 frame), small light-grey squares at the frame corners */
.plans::before{
  top:0!important;bottom:-120px!important;left:50%!important;right:auto!important;width:2560px!important;transform:translateX(-50%);
  background:url("/landing/assets/img/halftone.svg") 50% 0/2560px auto no-repeat!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.plans::after{content:"";position:absolute;inset:10px;pointer-events:none;z-index:2;
  background:
    linear-gradient(#d6d3cc,#d6d3cc) 0 0/7px 7px no-repeat,
    linear-gradient(#d6d3cc,#d6d3cc) 100% 0/7px 7px no-repeat,
    linear-gradient(#d6d3cc,#d6d3cc) 0 100%/7px 7px no-repeat,
    linear-gradient(#d6d3cc,#d6d3cc) 100% 100%/7px 7px no-repeat}
.solutions{overflow-x:clip}


/* case: same Intercom dot patches and corner squares as Solutions; no top padding (it follows the ask capsule) */
.case{padding-top:0!important;overflow-x:clip}
.case3::before{top:-40px!important;bottom:-40px!important;left:50%!important;right:auto!important;width:2560px!important;transform:translateX(-50%);
  background:url("/landing/assets/img/halftone.svg") 50% -620px/2560px auto no-repeat!important}
.case3::after{content:"";position:absolute;inset:10px;pointer-events:none;z-index:2;
  background:
    linear-gradient(#d6d3cc,#d6d3cc) 0 0/7px 7px no-repeat,
    linear-gradient(#d6d3cc,#d6d3cc) 100% 0/7px 7px no-repeat,
    linear-gradient(#d6d3cc,#d6d3cc) 0 100%/7px 7px no-repeat,
    linear-gradient(#d6d3cc,#d6d3cc) 100% 100%/7px 7px no-repeat}


#offering.solutions{padding-bottom:clamp(48px,5vw,72px)!important}


/* highlighted phrases in the quote: orange marker block behind the words */
.c3-quote mark.hl{background:var(--hot);color:#0b0b0b;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* step markers and the hero card bullet as squares instead of circles */
.pc-dots i{border-radius:0!important}
body.hc-2 .hero .card .bar .mono::before{border-radius:0!important}

/* why-us layout from the updated wireframe (2026-10-14, diff against the previous wireframe) */
@media (min-width:1200px){.wl-in > .wl-usf{top:calc(var(--wl0) + 4.75 * var(--wls));left:auto;right:2cqw}}
@media (max-width:1199px){.wl-in > .wl-usf{order:8;align-self:flex-start}}
body .wl-k::before{content:none;display:none}
@media (min-width:1200px){body .wl-in > .wl-photo:nth-child(14){top:calc(var(--wl0) + 1.6 * var(--wls));left:auto;right:3cqw}}
@media (min-width:1200px){body .wl-in > :nth-child(13){left:6cqw;right:auto}}
@media (max-width:1199px){body .wl-in > :nth-child(14){align-self:flex-end}}
@media (max-width:1199px){body .wl-in > :nth-child(13){align-self:flex-start}}
@media (min-width:1200px){body .wl-in > .wl-logo{width:14cqw;aspect-ratio:1}}
@media (min-width:1200px){body .wl-in > :nth-child(7){top:calc(var(--wl0) + 4.35 * var(--wls));left:7cqw;right:auto}}
@media (min-width:1200px){body .wl-in > .wl-usf{top:calc(var(--wl0) + 4.8 * var(--wls));left:auto;right:6cqw}}
@media (min-width:1200px){body .wl-in > :nth-child(8){top:calc(var(--wl0) + 5.25 * var(--wls));left:auto;right:23cqw}}
@media (max-width:1199px){body .wl-in > .wl-logo{width:min(48%,240px)}}
body .wl .wl-logo .wl-lg-pnp{width:78%;max-height:70%}
body .wl .wl-usf .wl-lg{width:78%;max-height:70%}
body .wl .wl-logo .wl-lg-ten:not(.wl-usf *){width:90%;max-height:80%}
@media (min-width:1200px){body .wl-in{--wl0:72vh;--wlg:130vh;height:calc(var(--wl0) + 8 * var(--wls) + 80vh + 2 * var(--wlg))}}
@media (min-width:1200px){body .wl-in > :nth-child(6),body .wl-in > :nth-child(7),body .wl-in > :nth-child(8),
    body .wl-in > :nth-child(15),body .wl-in > :nth-child(16),body .wl-in > .wl-usf{margin-top:var(--wlg)}}
@media (min-width:1200px){body .wl-in > :nth-child(17),body .wl-in > :nth-child(9){margin-top:calc(2 * var(--wlg) + 20vh)}}
@media (max-width:1199px){body .wl-in > :nth-child(10){margin-top:55vh}}
@media (max-width:1199px){body .wl-in > :nth-child(6),body .wl-in > :nth-child(17){margin-top:115vh}}
@media (min-width:1200px){body .wl-in > .wl-prod{top:calc(var(--wl0) + 1.25 * var(--wls));left:9cqw;right:auto}}
@media (max-width:1199px){body .wl-in > .wl-prod{order:2;align-self:flex-start}}
@media (min-width:1200px){body .wl-in > .wl-trust{top:calc(var(--wl0) + 3.6 * var(--wls));margin-top:var(--wlg);left:8cqw;right:auto;width:26cqw}}
@media (max-width:1199px){body .wl-in > .wl-trust{order:6;align-self:flex-start}}
body .wl-trust .wl-q b{font-weight:500;color:var(--fg)}
.wl-end{display:block;width:1px;height:1px;pointer-events:none}
@media (min-width:1200px){body .wl-in{--wlg:115vh;--wlend:calc(var(--wl0) + 7.1 * var(--wls) + var(--wlg) + 21cqw + 110vh);height:var(--wlend)}}
@media (min-width:1200px){body .wl-in > :nth-child(9){top:calc(var(--wl0) + 3.3 * var(--wls));margin-top:0;left:auto;right:4cqw}}
@media (min-width:1200px){body .wl-in > :nth-child(17){top:calc(var(--wl0) + 7.1 * var(--wls));margin-top:var(--wlg);left:6cqw;right:auto}}
@media (min-width:1200px){.wl-end{position:absolute;left:0;top:var(--wlend);margin:0}}
@media (max-width:1199px){body .wl-in{padding-bottom:0}}
@media (max-width:1199px){body .wl-in > :nth-child(9){order:5;align-self:flex-end;margin-top:20vh}}
@media (max-width:1199px){body .wl-in > :nth-child(17){order:10;align-self:flex-start;margin-top:20vh}}
@media (max-width:1199px){.wl-end{position:relative;order:13;margin-top:110vh;height:0}}
@media (min-width:1200px){body .wl .wl-in{--g1:var(--wl0);--g2:calc(var(--wl0) + 252vh);--wlend:calc(var(--g2) + 242vh);height:var(--wlend)}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(10){top:calc(var(--g1) + 0vh);margin-top:0;left:3cqw;right:auto;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(11){top:calc(var(--g1) + 18vh);margin-top:0;left:auto;right:3cqw;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > .wl-prod{top:calc(var(--g1) + 46vh);margin-top:0;left:12cqw;right:auto;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(14){top:calc(var(--g1) + 58vh);margin-top:0;left:auto;right:12cqw;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(13){top:calc(var(--g1) + 82vh);margin-top:0;left:3cqw;right:auto;width:28cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(9){top:calc(var(--g1) + 104vh);margin-top:0;left:auto;right:3cqw;width:28cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(12){top:calc(var(--g1) + 124vh);margin-top:0;left:12cqw;right:auto;width:28cqw}}
@media (min-width:1200px){body .wl .wl-in > .wl-trust{top:calc(var(--g2) + 0vh);margin-top:0;left:3cqw;right:auto;width:28cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(6){top:calc(var(--g2) + 14vh);margin-top:0;left:auto;right:3cqw;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(7){top:calc(var(--g2) + 49vh);margin-top:0;left:auto;right:5cqw;width:13cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(8){top:calc(var(--g2) + 56vh);margin-top:0;left:5cqw;right:auto;width:13cqw}}
@media (min-width:1200px){body .wl .wl-in > .wl-usf{top:calc(var(--g2) + 74vh);margin-top:0;left:auto;right:7cqw;width:13cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(15){top:calc(var(--g2) + 30vh);margin-top:0;left:3cqw;right:auto;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(16){top:calc(var(--g2) + 82vh);margin-top:0;left:3cqw;right:auto;width:28cqw}}
@media (min-width:1200px){body .wl .wl-in > :nth-child(17){top:calc(var(--g2) + 102vh);margin-top:0;left:auto;right:12cqw;width:22cqw}}
@media (min-width:1200px){body .wl .wl-in > .wl-end{top:var(--wlend)}}
body .wl-say.dim{align-items:start}
@media (max-width:1199px){body .wl-in > :nth-child(15){order:6;align-self:flex-start}}


/* why-us on black (variant 2, toggled by body.wd-2): dark tiles with a light hairline, white type, white logos */
body.wd-2 .path{background:#0b0b0b!important;color:#fff}
body.wd-2 .path .wl .wl-head .eyebrow{color:#fff!important}
body.wd-2 .path .wl-say.dim .c,body.wd-2 .path .wl .wl-say.dim .c{color:rgba(255,255,255,.16)!important}
body.wd-2 .path .wl-say.dim .c.on,body.wd-2 .path .wl .wl-say.dim .c.on,body.wd-2 .path .wl .wl-say{color:#fff!important}
body.wd-2 .path .wl-i{background:#161616!important;border-color:rgba(255,255,255,.12)!important;color:#fff}
body.wd-2 .path .wl-k,body.wd-2 .path .wl-card .wl-l,body.wd-2 .path .wl-f small{color:rgba(255,255,255,.6)!important}
body.wd-2 .path .wl-q,body.wd-2 .path .wl-n,body.wd-2 .path .wl-f span,body.wd-2 .path .wl-trust .wl-q b{color:#fff!important}
body.wd-2 .path .wl-card .wl-n{background:radial-gradient(rgba(255,255,255,.22) .9px,transparent 1.2px) 0 0/5px 5px!important}
body.wd-2 .path .wl-card .wl-f{border-top-color:rgba(255,255,255,.12)!important}
body.wd-2 .path .wl-logo .wl-lg{filter:invert(1) brightness(1.6)}

body.wd-2 .path .wl-photo{border-color:transparent!important}


/* review-only switch for the why-us variant (remove after the choice) */
.vsw2{position:fixed;z-index:100;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:#161616;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.vsw2 span{margin:0 8px 0 10px;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#b9b9b9}
.vsw2 button{height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:#fff;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.vsw2 button[aria-pressed="true"]{background:var(--hot);color:#0b0b0b}

/* no corner squares on the Solutions frame */
.plans::after{content:none!important;display:none!important}


/* number plaques in why-us use the Intercom patch pattern instead of a uniform dot grid */
.path .wl-card .wl-n{background:url("/landing/assets/img/halftone-n-dark.svg?v=2") 0 0/480px 96px no-repeat!important}
body.wd-2 .path .wl-card .wl-n{background:url("/landing/assets/img/halftone-n-light.svg?v=2") 0 0/480px 96px no-repeat!important}


/* ask capsule bigger */
.plan-ask.ask-pill{gap:24px;padding:12px!important}
.plan-ask.ask-pill .pa-av{flex-basis:88px!important;width:88px!important;height:88px!important}
.plan-ask.ask-pill .pa-q{font-size:clamp(20px,1.9vw,28px)!important;padding-right:32px}
.plan-ask.ask-pill .pa-k{font-size:14px!important;margin-top:8px}
.plan-ask.ask-pill .pa-btn{height:72px!important;padding:0 40px!important;font-size:16px!important}
@media (max-width:600px){.plan-ask.ask-pill .pa-av{flex-basis:60px!important;width:60px!important;height:60px!important}.plan-ask.ask-pill .pa-btn{height:56px!important}}


/* final capsule: "15-minute call" under the line (as in the ask capsule), the button just says Talk to Ivan */
.final .book3 p .b3-k{display:block;margin-top:6px;font:400 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.final .book3 .b3-btn{height:60px!important;padding:0 30px!important}

/* final button in mono caps, like the other Talk to Ivan buttons */
.final .book3 .b3-btn .roll span{font:400 15px/1 var(--mono)!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.final .book3 .b3-btn{align-items:center!important}


/* nav CTA in Plex Mono Medium */
.top .nav-cta2 .roll span,.top .nav-cta2 .cta-sub2{font-weight:500!important}


/* all buttons: Plex Mono Medium */
.btn,.btn *,.pa-btn,.pl-cta,.cd-link,.op-btn,.op-btn *,.mail-btn,.reel-btn,.f2-link,.final .book3 .b3-btn .roll span{font-weight:500!important}


/* why-us: keep a gap between stacked tiles on shorter screens (the wireframe offsets are in vh only) */
@media (min-width:1200px){
  body .wl .wl-in > :nth-child(7){top:max(calc(var(--g2) + 49vh),calc(var(--g2) + 14vh + 360px))!important}
  body .wl .wl-in > :nth-child(8){top:max(calc(var(--g2) + 56vh),calc(var(--g2) + 30vh + 280px))!important}
  body .wl .wl-in > :nth-child(16){top:max(calc(var(--g2) + 82vh),calc(var(--g2) + 30vh + 520px))!important}
  body .wl .wl-in > .wl-usf{top:max(calc(var(--g2) + 74vh),calc(var(--g2) + 14vh + 600px))!important}
}


@media (min-width:1200px){body .wl .wl-in > :nth-child(17){top:max(calc(var(--g2) + 102vh),calc(var(--g2) + 14vh + 640px + 13cqw))!important}}


/* team captions appear on hover (photo first), always shown on touch screens */
@media (hover:hover){
  .reel-ph .reel-cap{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}
  .reel-ph:hover .reel-cap,.reel-ph:focus-within .reel-cap{opacity:1;transform:none}
}
/* USF logo bigger in its tile */
body .wl .wl-usf .wl-lg{width:92%!important;max-height:none!important}


/* Finna wordmark as an LED dot matrix (same effect as the old footer "zade"), no background card */
.case3 .c3-led{padding:clamp(16px,2vw,28px)!important}
.case3 .c3-led .finna-led{display:block;width:100%;height:auto;aspect-ratio:var(--fw-ar,4.6)}

/* hero LED: brand orange with the wireframe violet shimmering through (second colour) */
.hero .hero-bg{--fx-a:255,85,0!important;--fx-b:96,84,255!important;--fx-hi:255,85,0!important}


/* pixel cursor (as on the Zade next build): an orange pixel "+" with a soft pixel halo follows the pointer.
   Mouse/trackpad only; the system arrow is kept for text fields and while dragging the team reel. */
.pxcur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;color:var(--hot);transform:translate(-100px,-100px);transition:opacity .2s ease;opacity:0}
.pxcur .pxcur-svg{display:block;transform:translate(-50%,-50%) scale(var(--pxs,1));transition:transform .2s ease}
.pxcur.on{opacity:1}
.pxcur.hot{--pxs:1.5}
@media (hover:hover) and (pointer:fine){
  html.has-pxcur,html.has-pxcur a,html.has-pxcur button,html.has-pxcur [data-open],html.has-pxcur .plan{cursor:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.pxcur .pxcur-svg{transition:none}}

.pxcur .pxcur-svg{width:22px;height:22px;shape-rendering:crispEdges}


/* pixel cursor trail canvas */
.pxtrail{position:fixed;inset:0;width:100vw;height:100vh;z-index:9998;pointer-events:none}

/* more air around the ask capsule: above (from the table) and below (to the case) */
.ask-wrap{margin-top:clamp(64px,7vw,104px)!important}
#offering.solutions{padding-bottom:clamp(80px,9vw,128px)!important}


.pxcur{display:none!important}

/* final: pixel bands at the top and bottom edges (next build), blown sideways by the wind; replaces the flow-field wind */
.final canvas.final-fx{display:none!important}
.final canvas.final-bands{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}

/* block labels 14px (mono caps) */
.s-head.pp-intro .eyebrow,.stage .pp-intro .eyebrow,.path .wl .wl-head .eyebrow{font-size:14px!important}


/* why-us hands over to the team like the wireframe: the last sentence sits ~40px above the team arrows */
.path{padding-bottom:24px!important}
.team{padding-top:0!important}


/* photos closer to the arrows */
.team .reel{margin-top:8px!important}


/* dark why-us: when the last sentence ("Now, meet the people…") takes over, the band turns white so it hands over to the team */
body.wd-2 .path{transition:background-color .6s ease,color .6s ease}
body.wd-2 .path.to-light{background:#fff!important;color:var(--ink)}
body.wd-2 .path.to-light .wl .wl-head .eyebrow{color:var(--ink)!important}
body.wd-2 .path.to-light .wl-say.dim .c,body.wd-2 .path.to-light .wl .wl-say.dim .c{color:rgba(11,11,11,.16)!important}
body.wd-2 .path.to-light .wl-say.dim .c.on,body.wd-2 .path.to-light .wl .wl-say.dim .c.on,body.wd-2 .path.to-light .wl .wl-say{color:var(--ink)!important}
body.wd-2 .path .wl-say .c{transition:color .6s ease}

/* team captions as in the wireframe: no white plate — white text on a dark gradient at the bottom of the photo, centred, fading in on hover */
.reel-ph .reel-cap{left:0!important;right:0!important;bottom:0!important;width:auto!important;margin:0!important;padding:56px 16px 22px!important;border-radius:0!important;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65))!important;color:#fff!important;text-align:center}
.reel-ph .reel-cap b{display:block;font-size:clamp(20px,1.8vw,24px)!important;font-weight:400;line-height:1.1;letter-spacing:-.02em;color:#fff!important}
.reel-ph .reel-cap span{display:block;margin-top:6px;font:400 12px/1.3 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)!important}


/* why-us photos: tinted in the team palette instead of black and white (duotone over the greyscale image) */
.path .wl-photo{position:relative;isolation:isolate}
.path .wl-photo .wl-ph-img{filter:grayscale(1) contrast(1.08) brightness(1.05)!important}
.path .wl-photo::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:color;background:var(--tint,#764a6e)}
.path .wl-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:var(--tint,#764a6e);opacity:.55}
.path .wl-in > .wl-photo:nth-of-type(3n+1){--tint:#1f5565}
.path .wl-in > .wl-photo:nth-of-type(3n+2){--tint:#3a62b0}
.path .wl-in > .wl-photo:nth-of-type(3n){--tint:#764a6e}


/* softer tints */
.path .wl-photo::after{opacity:.62}
.path .wl-photo::before{opacity:.28}
.path .wl-in > .wl-photo:nth-of-type(3n+2){--tint:#4a6aa0}
.path .wl-in > .wl-photo:nth-of-type(3n){--tint:#6e5468}


/* why-us photos: original colour, only a light tint of the team palette on top */
.path .wl-photo .wl-ph-img{filter:saturate(.92) contrast(1.03)!important}
.path .wl-photo::after{mix-blend-mode:soft-light!important;opacity:.35!important}
.path .wl-photo::before{display:none!important}


/* a bit more tint on the why-us photos */
.path .wl-photo::after{opacity:.6!important}
.path .wl-photo::before{display:block!important;mix-blend-mode:color!important;opacity:.18!important}


/* ================= sprint one-pagers in the site style (2026-10-15) =================
   wireframe structure; Sanity/our dress: square frame, mono labels with orange squares, hairlines,
   Intercom dot patches, 38px heads, the ask capsule at the end */
dialog.op{border-radius:0!important;border:1px solid #e3e3e3!important;box-shadow:0 30px 80px rgba(0,0,0,.35)!important;background:#fff!important}
dialog.op::backdrop{background:rgba(11,11,11,.72)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.op .op-in{padding:clamp(32px,3.4vw,52px)!important}
.op .op-close{width:40px!important;height:40px!important;border-radius:0!important;border:1px solid #e3e3e3!important;background:#fff!important;color:var(--ink)!important;font-size:20px!important;transition:background .2s ease,color .2s ease}
.op .op-close:hover{background:var(--hot)!important;border-color:var(--hot)!important}
/* top: head + lead + CTA | checklist */
.op .op-top h3{font:400 clamp(28px,2.65vw,38px)/1.1 var(--sans)!important;letter-spacing:-.03em!important;color:var(--ink)!important;max-width:15em}
.op .op-lead{font-size:18px!important;line-height:1.4!important;color:rgba(11,11,11,.6)!important;max-width:30em}
.op .op-ctas .op-btn{height:52px!important;padding:0 20px 0 6px!important;border-radius:999px!important;background:var(--hot)!important;border-color:var(--hot)!important;color:#0b0b0b!important}
.op .op-ctas .op-btn .cta-txt{font:500 13px/1.1 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.op .op-ctas .op-btn .cta-sub{display:block;margin-top:3px;font:500 10px/1 var(--mono)!important;letter-spacing:.06em;opacity:.75}
.op .op-ctas .op-btn:hover{background:#0b0b0b!important;border-color:#0b0b0b!important;color:#fff!important}
.op .op-ctas .avatar,.op .op-face .avatar{background:#ddd url("/landing/assets/img/ivan-av.jpg") center/cover no-repeat!important;color:transparent!important;font-size:0!important}
.op .checks{border-left:1px solid #e3e3e3;padding-left:clamp(20px,2.4vw,36px)!important}
.op .checks li{display:flex;align-items:flex-start;gap:12px;padding:10px 0!important;border-bottom:1px solid #f0f0f0;font-size:16px!important;line-height:1.35;color:var(--ink)!important}
.op .checks li:last-child{border-bottom:0}
.op .checks li::before{content:""!important;flex:0 0 8px;width:8px!important;height:8px!important;margin-top:6px;border:0!important;border-radius:0!important;background:var(--hot)!important;-webkit-mask:none!important;mask:none!important}
/* visual + facts: hairline frames, dot patches */
.op .op-vis{gap:12px!important}
.op .vis-main{border:1px solid #e3e3e3!important;border-radius:0!important;background:url("/landing/assets/img/halftone-n-dark.svg?v=2") 0 100%/480px 96px repeat-x,#fafafa!important}
.op .vis-stat,.op .vis-facts{border:1px solid #e3e3e3!important;border-radius:0!important;background:#fff!important}
.op .vis-stat{background:url("/landing/assets/img/halftone-n-dark.svg?v=2") 0 0/480px 96px no-repeat,#fff!important}
.op .vis-stat b{font:400 clamp(40px,3.6vw,56px)/1 var(--sans)!important;letter-spacing:-.04em!important;color:var(--ink)!important}
.op .vis-stat span,.op .fact span{font:400 12px/1.3 var(--mono)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:rgba(11,11,11,.6)!important}
.op .fact{border-color:#f0f0f0!important}
.op .fact b{font-size:16px!important;font-weight:400!important;color:var(--ink)!important}
/* how it works: four steps with mono numbers, icons in orange */
.op .op-how{counter-reset:how;border-top:1px solid #e3e3e3;padding-top:clamp(24px,2.6vw,36px)!important}
.op .op-how > div{counter-increment:how}
.op .how-icon{width:40px!important;height:40px!important;border:1px solid #e3e3e3!important;border-radius:0!important;background:#fff!important;color:var(--hot)!important}
.op .op-how h4{font:400 22px/1.2 var(--sans)!important;letter-spacing:-.01em;color:var(--ink)!important}
.op .op-how h4::before{content:counter(how,decimal-leading-zero) " ";display:block;margin-bottom:8px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:rgba(11,11,11,.5)}
.op .op-how p{font-size:15px!important;line-height:1.45!important;color:rgba(11,11,11,.6)!important}
/* quote: like the case, hairline frame with dot patches behind */
.op .op-quote{position:relative;border:1px solid #e3e3e3!important;border-radius:0!important;background:#fff!important;padding:clamp(28px,3vw,44px)!important;overflow:hidden}
.op .op-quote::before{content:"";position:absolute;inset:0;z-index:0;background:url("/landing/assets/img/halftone-n-dark.svg?v=2") 100% 0/480px 96px no-repeat;opacity:.8;pointer-events:none}
.op .op-quote > *{position:relative;z-index:1}
.op .op-quote-logo{border:1px solid #e3e3e3!important;border-radius:0!important;background:#fff!important;font:400 11px/1 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase}
.op .op-quote blockquote{font:400 clamp(20px,1.8vw,26px)/1.3 var(--sans)!important;letter-spacing:-.01em!important;color:var(--ink)!important}
.op .op-quote cite{font:400 12px/1.3 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.6)!important}
.op .op-quote cite b{font-weight:500;color:var(--ink)}
/* end: the ask capsule (same as under Solutions) */
.op .op-end{display:flex;justify-content:center;padding-top:clamp(28px,3vw,44px)!important;border-top:0!important}
.op .op-ask{display:inline-flex!important}


/* one-pager fixes: round avatar in the end capsule, bigger chart, dot patches kept off the text */
.op .op-ask .pa-av{border-radius:50%!important;object-fit:cover}
.op .vis-main{display:grid!important;place-items:center;padding:clamp(20px,2.4vw,36px)!important;background:#fafafa!important}
.op .vis-main svg{width:100%!important;max-width:520px!important;height:auto!important}
.op .vis-stat{background:url("/landing/assets/img/halftone-n-dark.svg?v=2") 100% 0/480px 96px no-repeat,#fff!important}
.op .vis-stat span{position:relative;display:inline-block;background:#fff;padding-right:8px}


.op .vis-main{display:flex!important;align-items:center;justify-content:center}
.op .vis-main svg{flex:1 1 auto;display:block;margin:auto}
.op .op-ask .pa-q{text-align:left!important}


/* no step numbers in the one-pagers */
.op .op-how h4::before{content:none!important;display:none!important}


/* real client logo in the one-pager quote */
.op .op-quote-logo.op-logo-img{width:auto!important;height:auto!important;padding:0!important;border:0!important;background:none!important;margin-left:auto!important;margin-right:auto!important}
.op .op-quote-logo.op-logo-img img{display:block;height:28px;width:auto}

/* one-pager end capsule: line fits on one line */
.op .op-ask .pa-q{font-size:clamp(16px,1.35vw,20px)!important;padding-right:20px!important;white-space:nowrap}
.op .op-ask .pa-q .pa-k{white-space:normal}
@media (max-width:760px){.op .op-ask .pa-q{white-space:normal}}


/* one-pager: slightly rounded corners */
dialog.op{border-radius:12px!important;overflow:hidden}


/* facts: label and value centred on one line, list centred in its frame */
.op .fact{align-items:center!important}
.op .fact span{line-height:1!important}
.op .vis-facts{display:flex!important;flex-direction:column;justify-content:center}


/* stat caption in sentence case, sans */
.op .vis-stat span{font:400 15px/1.35 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:rgba(11,11,11,.6)!important}


/* hero heading in the wireframe weight and tracking */
.hero h1,.hero .h1{font-weight:500!important;letter-spacing:-.045em!important;line-height:1.02!important}
/* hero cards: whole heading white, no square marker, wireframe expand icon */
body.hc-2 .hero .card .hc-a{color:#fff!important}
body.hc-2 .hero .card .bar .mono::before{content:none!important;display:none!important}
body.hc-2 .hero .card .bar .cell{width:44px!important;height:44px!important;border-radius:3px!important;background:#fff!important;color:#0b0b0b!important;display:grid!important;place-items:center}
body.hc-2 .hero .card .bar .cell .xp{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;transition:transform .3s ease}
body.hc-2 .hero .card:hover .bar .cell .xp{transform:scale(1.15)}

/* hero LED in the wireframe colours: violet blue with cyan shimmer and pale highlights */
.hero .hero-bg{--fx-a:96,84,255!important;--fx-b:92,190,255!important;--fx-hi:214,236,255!important}


.hero .hero-bg{--fx-ink:255,255,255!important}


/* What we believe: steps on the left, the scene on the right (desktop) */
@media (min-width:901px){
  .believe .story-pin > .pp-left{order:2}
  .believe .story-pin > .steps{order:1}
}
/* steps already read: grey, not white */
.believe .sl.past .sl-t .c.on{color:rgba(255,255,255,.4)!important}
.believe .sl.past .sl-no{color:rgba(255,255,255,.35)!important}


/* keep the "What we believe" head top left, over the steps; scene spans the right column */
@media (min-width:901px){
  .believe .story-pin{grid-template-rows:auto minmax(0,1fr)!important}
  .believe .story-pin > .pp-left,.believe .story-pin .stage{display:contents!important}
  .believe .story-pin .pp-intro{grid-column:1;grid-row:1;align-self:start}
  .believe .story-pin > .steps{grid-column:1;grid-row:2;align-self:center}
  .believe .story-pin .story-scene{grid-column:2;grid-row:1 / span 2;align-self:stretch;min-height:0}
}


/* soft dark halo right behind the hero copy only (turbines elsewhere stay bright) */
.hero .hero-copy{position:relative;isolation:isolate}
.hero .hero-copy::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:110%;height:130%;transform:translate(-50%,-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,11,11,.82) 0%,rgba(11,11,11,.6) 45%,rgba(11,11,11,0) 100%);pointer-events:none}


.hero .hero-copy::before{width:min(1000px,96%)!important;height:150%!important;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,11,11,.95) 0%,rgba(11,11,11,.85) 50%,rgba(11,11,11,0) 100%)!important}


.hero .hero-copy::before{width:115%!important;height:120%!important;background:radial-gradient(closest-side,rgba(11,11,11,.92) 0%,rgba(11,11,11,.88) 62%,rgba(11,11,11,0) 100%)!important}


/* believe head: label first, step squares after it */
.believe .stage .pp-intro .pp-t .pc-dots{order:2!important}


/* solutions lead bigger */
.solutions .s-head.pp-intro p{font-size:clamp(26px,2.4vw,34px)!important;line-height:1.15!important;letter-spacing:-.02em!important;max-width:none!important}


/* believe: step squares in the top right corner of the block, level with the label */
@media (min-width:901px){.believe .story-pin .pp-intro .pc-dots{position:absolute!important;right:var(--gut);top:calc(var(--bpad,27px) + 2px);margin:0!important}
.believe .story-pin{--bpad:clamp(16px,3vh,32px)}}

/* What we believe · wireframe (4): scene left, statements right on a dot patch */
.believe .sl-no,.believe .steps .sl .sl-o{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.believe .story-hint{margin:clamp(10px,2vh,20px) 0 0;font:400 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center;max-width:100%;transition:opacity .3s ease}
.believe .story-hint.swap{opacity:0}
.believe .story-hint s{color:rgba(255,255,255,.4)}
.believe .story-hint .sl-o-ar{color:var(--hot);margin:0 .5em}
.believe .stage .pp-intro .pp-t .pc-dots{order:2!important;position:static!important;margin:0!important}
.believe .stage .pc-dots i{width:16px!important;height:16px!important;border-radius:0!important}
.believe .story[data-step="1"] .pc-dots i:nth-child(1),.believe .story[data-step="2"] .pc-dots i:nth-child(2),.believe .story[data-step="3"] .pc-dots i:nth-child(3),.believe .story[data-step="4"] .pc-dots i:nth-child(4){background:#fff!important;border-color:#fff!important}
.believe .stage .pp-intro .pp-t{display:flex!important;align-items:center;justify-content:space-between;gap:16px!important;background:#0b0b0b;padding:clamp(16px,2.2vh,24px) clamp(18px,2vw,32px)}
.believe .stage .pp-intro .eyebrow{font:400 clamp(14px,1.1vw,17px)/1 var(--mono)!important;letter-spacing:.06em!important;text-transform:uppercase;margin:0!important}
.believe .sl-t{font-weight:400!important;line-height:1.08!important;letter-spacing:-.03em!important}
.believe .sl .sl-t,.believe .sl .sl-o{filter:none!important;opacity:1!important}
.believe .sl .sl-t .c{color:rgba(255,255,255,.16)}
.believe .sl.past .sl-t .c.on{color:rgba(255,255,255,.72)!important}
.believe .sl:not(.past):not([aria-current="step"]) .sl-t{opacity:0!important}
.believe .steps li{position:relative;z-index:0;background:transparent!important;border:0!important;padding:clamp(16px,2.6vh,30px) clamp(18px,2vw,32px)!important;margin:0!important}
.believe .steps li::before{content:"";position:absolute;inset:0;z-index:-1;background:#0b0b0b;pointer-events:none}
.believe .steps li:has(> .sl:not(.past):not([aria-current="step"]))::before{background:transparent}
@media (min-width:901px){
  .believe .story-pin{--pin-pt:clamp(24px,4.4vh,56px);--pin-pb:clamp(20px,4vh,56px);padding-top:var(--pin-pt)!important;padding-bottom:var(--pin-pb)!important;grid-template-rows:auto minmax(0,1fr) auto!important;column-gap:0!important}
  .believe .story-pin::before{content:"";grid-column:2;grid-row:1 / -1;align-self:stretch;margin-top:calc(-1 * var(--pin-pt));margin-bottom:calc(-1 * var(--pin-pb));margin-right:calc(-1 * var(--gut));pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.2) 1px,transparent 1.3px);background-size:8px 8px;background-position:center}
  .believe .story-pin .pp-intro{grid-column:2!important;grid-row:1!important;position:relative;z-index:1;justify-self:stretch;align-self:start;margin:clamp(8px,1vw,14px) clamp(8px,1vw,14px) clamp(28px,5vh,56px)!important;padding:0!important}
  .believe .story-pin .story-scene{grid-column:1!important;grid-row:1 / span 2!important;align-self:stretch;min-height:0;margin:0!important}
  .believe .story-pin .story-hint{grid-column:1;grid-row:3;justify-self:center;align-self:end}
  .believe .story-pin > .steps{grid-column:2!important;grid-row:2 / span 2!important;position:relative;z-index:1;align-self:start;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px)!important;padding:0 clamp(8px,1vw,14px)!important;margin:0!important}
}
body .top.stuck.on-dark{background:rgba(18,18,20,.45);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom-color:rgba(255,255,255,.12);color:#fff}
.top.stuck.on-dark .nav-links a{color:rgba(255,255,255,.7)}
.top.stuck.on-dark .nav-links a:hover{color:#fff}
.top.stuck.on-dark .nav-links a::before{background:rgba(255,255,255,.18)}

.believe .stage .pp-intro .pp-t{padding:clamp(16px,2.2vh,24px) clamp(18px,2vw,32px)!important}

@media (max-width:900px){.believe .story-hint{order:5;margin:8px 0 0!important}}

/* header on light bands · wireframe (4): frosted white glass, soft hairline */
.top{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
body .top.stuck{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:transparent}
.top.stuck::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,11,0),rgba(11,11,11,.1) 12%,rgba(11,11,11,.1) 88%,rgba(11,11,11,0))}
body .top.stuck.on-dark{border-bottom-color:transparent}
.top.stuck.on-dark::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14) 12%,rgba(255,255,255,.14) 88%,rgba(255,255,255,0))}

/* believe · wireframe (4) rhythm: snap per step, no row gap, air between scene and dot column */
.believe .story{position:relative}
.believe .snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
@media (min-width:901px){.believe .story-pin{row-gap:0!important;column-gap:clamp(32px,5vw,60px)!important}}

/* solutions · wireframe (4): plan names on black tags, arrow lists, smaller price */
.plans .pl-name{display:inline-flex!important;align-items:center;height:30px;padding:0 10px;border-radius:4px;background:#111;color:#fff!important;font:400 12px/1.3 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase}
.plans .pl-name::before{display:none!important}
.plans .pl-get li .ic{display:none!important}
.plans .pl-get li{display:flex!important;align-items:baseline;gap:12px!important}
.plans .pl-get li::before{content:"\2192";flex:0 0 auto;color:#111;font:400 16px/1 var(--sans)}
.plans .pl-price b{font-size:clamp(26px,2.67vw,38px)!important;letter-spacing:-.03em!important}
.plans .oc-open svg.xp{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

/* solutions · wireframe (4): mono caps subheads, hairlines between list items */
.plans .pl-k{display:block;font:400 12px/1.3 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase;color:rgba(0,0,0,.6)!important;margin:0 0 4px!important}
.plans .pl-get ul{margin:0!important;gap:0!important}
.plans .pl-get li{padding:12px 0!important;line-height:24px!important;margin:0!important}
.plans .pl-get li + li{border-top:0!important}

.plans .pl-get .pl-k,.plans .pl-out .pl-k{font:400 12px/1.3 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:rgba(0,0,0,.6)!important;margin:0 0 8px!important}

/* integrated team: price label level with "You get" */
.plans .plan-row .pl-get,.plans .plan-row .pl-price{margin-top:clamp(24px,2.6vw,40px)!important}
/* ask capsule under solutions: smaller */
.ask-wrap .plan-ask.ask-pill{gap:18px!important;padding:8px!important}
.ask-wrap .plan-ask.ask-pill .pa-av{flex-basis:60px!important;width:60px!important;height:60px!important}
.ask-wrap .plan-ask.ask-pill .pa-q{font-size:clamp(17px,1.35vw,20px)!important;padding-right:20px}
.ask-wrap .plan-ask.ask-pill .pa-k{font-size:12px!important;margin-top:5px}
.ask-wrap .plan-ask.ask-pill .pa-btn{height:52px!important;padding:0 28px!important;font-size:14px!important}

/* solutions: one outer frame with softly rounded corners */
.plans{border:1px solid #e3e3e3!important;border-radius:10px;overflow:hidden}
.plans > .plan:first-child{border-left:0!important}
.plans > .plan:nth-child(2){border-right:0!important}
.plans > .plan-row{border-left:0!important;border-right:0!important}

/* outcome: no rule above, text as dark as the list */
.plans .pl-out{border-top:0!important;padding-top:0!important;margin-top:clamp(24px,2.4vw,32px)!important}
.plans .pl-out p{color:var(--ink)!important;font-size:16px!important;line-height:24px!important}

/* header on light · wireframe (4) exact: 62% white frost, saturate, even 8% hairline */
body .top.stuck:not(.on-dark){background:rgba(255,255,255,.62)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.top.stuck:not(.on-dark)::after{background:rgba(11,11,11,.08)!important}

/* case: own dot composition, two patches leaving the card at opposite corners */
.case3::before{top:-64px!important;bottom:-64px!important;left:-120px!important;right:-120px!important;width:auto!important;transform:none!important;
  background:url("/landing/assets/img/halftone-case-a.svg") right 0 top 0/520px 240px no-repeat,url("/landing/assets/img/halftone-case-b.svg") left 0 bottom 0/600px 260px no-repeat!important}

/* brand orange = Sanity's --color-brand: #ff560a, P3 where the screen can show it */
:root{--hot:#ff560a}
@supports (color:color(display-p3 1 1 1)){:root{--hot:color(display-p3 1 .3333 0)}}

/* plans: round the corners without clipping, so the dot patches behind still show */
.plans{overflow:visible!important}
.plans > .plan:first-child{border-top-left-radius:9px}
.plans > .plan:nth-child(2){border-top-right-radius:9px}
.plans > .plan-row{border-bottom-left-radius:9px;border-bottom-right-radius:9px}

/* case: same soft 10px corners as the solutions frame */
.case3,.fund2{border-radius:10px!important}
.case3 > .c3-logo{border-top-left-radius:9px}

.case .fund2,.case .case3{border-radius:10px!important}

/* case quote: key words marked with a line of brand dots (option E) */
.case mark.hl,.c3-quote mark.hl{background:radial-gradient(circle,var(--hot) 1.1px,transparent 1.5px) 0 100%/5px 5px repeat-x!important;color:inherit!important;padding:0 0 7px!important;box-shadow:none!important;border-radius:0!important}

.case mark.hl,.c3-quote mark.hl{padding:0!important;background-position:0 100%!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* dark why-us, top edge: arrives white (continuing the case) and turns black once it pins, mirroring the white hand-over at the bottom */
body.wd-2 .path.pre-light{background:#fff!important;color:var(--ink)}
body.wd-2 .path.pre-light .wl .wl-head .eyebrow{color:var(--ink)!important}
body.wd-2 .path.pre-light .wl-say.dim .c,body.wd-2 .path.pre-light .wl .wl-say.dim .c{color:rgba(11,11,11,.16)!important}
body.wd-2 .path.pre-light .wl-say.dim .c.on,body.wd-2 .path.pre-light .wl .wl-say.dim .c.on,body.wd-2 .path.pre-light .wl .wl-say{color:var(--ink)!important}

.case .case3 > .c3-logo{border-radius:9px 0 0 0!important}

/* why-us photos: a barely-there pixel grid (4px cells, 1px seams at 82%) masked into the image */
.path .wl-photo .wl-ph-img{
  -webkit-mask-image:linear-gradient(90deg,#000 3px,rgba(0,0,0,.82) 3px),linear-gradient(#000 3px,rgba(0,0,0,.82) 3px);
  -webkit-mask-size:4px 4px;-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 3px,rgba(0,0,0,.82) 3px),linear-gradient(#000 3px,rgba(0,0,0,.82) 3px);
  mask-size:4px 4px;mask-composite:intersect}

/* why-us photos: a barely-there pixel grid (4px cells, 1px seams at 82%) masked into the image */
.path .wl-photo .wl-ph-img{
  -webkit-mask-image:linear-gradient(90deg,#000 3px,rgba(0,0,0,.93) 3px),linear-gradient(#000 3px,rgba(0,0,0,.93) 3px);
  -webkit-mask-size:4px 4px;-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 3px,rgba(0,0,0,.93) 3px),linear-gradient(#000 3px,rgba(0,0,0,.93) 3px);
  mask-size:4px 4px;mask-composite:intersect}

/* why-us: the same soft 10px corners on cards, logo tiles and photos */
.path .wl-i.wl-card,.path .wl-i.wl-logo{border-radius:10px!important}
.path .wl-i.wl-photo{border-radius:10px!important;overflow:hidden!important}

/* why-us photos: no pixel grid; light white dot patches on top, the same language as the team photos */
.path .wl-photo .wl-ph-img{-webkit-mask-image:none!important;mask-image:none!important}
.path .wl-photo .wl-px{position:absolute;inset:0;z-index:2;pointer-events:none;background:url("/landing/assets/img/halftone-photo.svg") 0 0/100% 100% no-repeat;opacity:.32}
.path .wl-photo:nth-of-type(even) .wl-px{transform:scaleX(-1)}

/* why-us logos (Plug and Play, Tenity): pulled toward the centre so they slide slightly over the headline */
@media (min-width:1200px){
  body .wl .wl-in > :nth-child(7){right:15cqw!important;left:auto!important}
  body .wl .wl-in > :nth-child(8){left:15cqw!important;right:auto!important}
}

/* solutions head: lead in black, no square marks before the label */
#offering .s-head p{color:var(--ink)!important}
#offering .s-head .pc-dots{display:none!important}

/* solutions head like the why-us head: one orange square before the label, lead at the same size as the why-us headline */
#offering .s-head .eyebrow{display:inline-flex!important;align-items:center;gap:12px}
#offering .s-head .eyebrow::before{content:"";display:block;flex:0 0 8px;width:8px;height:8px;background:var(--hot)}
#offering .s-head p{font-size:clamp(28px,3.34vw,48px)!important;line-height:1.08!important;letter-spacing:-.035em!important}

@media (min-width:1200px){.team{margin-top:clamp(-64px,calc(-16px - 3.333vw),-40px)!important;position:relative;z-index:1}}

.mail-btn .mc-copy,.mail-btn .mc-done{width:24px!important;height:24px!important;stroke-width:1.4}

/* button hover = zade-hero-next: the button lightens and gets a soft glow in its own colour (no colour swap, no text roll) */
:root{--hot-hi:#ff7d3d;--hot-glow:color-mix(in srgb,var(--hot) 35%,transparent)}
@supports (color:color(display-p3 1 1 1)){:root{--hot-hi:color(display-p3 1 .5 .22)}}
.btn--brand,.pa-btn,.mail-btn{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,gap .2s ease!important}
body .btn--brand:hover,body .top .btn--brand:hover,body .top:not(.stuck) .btn--brand:hover,body .plan-ask .pa-btn:hover,body .pa-btn:hover{background:var(--hot-hi)!important;border-color:var(--hot-hi)!important;color:var(--ink)!important;box-shadow:0 8px 22px var(--hot-glow)!important}
body .btn--brand:hover .av,body .btn--brand.btn--face:hover .av{background:#ddd url("/landing/assets/img/ivan-av.jpg") center/cover no-repeat!important;color:transparent!important}
/* keep the label still */
@media (hover:hover){body .btn:hover .roll>span:first-child{transform:none!important}body .btn:hover .roll>span+span{transform:translateY(110%)!important}}
/* round copy button: soft brand tint, like the reference's mail copy */
body .mail-btn:hover,body .mail-btn:focus-visible{background:color-mix(in srgb,var(--hot) 24%,#fff)!important;color:var(--ink)!important}

body .final .mail-round:hover,body .final .mail-round:focus-visible{background:color-mix(in srgb,var(--hot) 24%,#fff)!important;border-color:transparent!important;color:var(--ink)!important;box-shadow:0 8px 22px var(--hot-glow)!important}

body .op .op-close,body dialog .op-close{border-radius:6px!important;display:grid!important;place-items:center;padding:0!important;line-height:1}

body .op .op-top ul.checks{border-left:0!important}

/* modal outcomes: orange check marks instead of squares */
body .op ul.checks li::before{width:16px!important;height:16px!important;flex:0 0 16px;margin:3px 0 0!important;border:0!important;border-radius:0!important;background:var(--hot)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important}

/* modal visual: two equal halves, chart centred in its box both ways */
body .op .op-vis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch}
body .op .op-vis .vis-main{display:flex!important;align-items:center!important;justify-content:center!important}
body .op .op-vis .vis-main > svg{margin:auto!important;display:block}

/* modal boxes: the same soft 10px corners as the page */
body .op .vis-main,body .op .vis-stat,body .op .vis-facts,body .op .op-quote{border-radius:10px!important;overflow:hidden}

body .op .vis-side{grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important}

body .op .op-lead{text-wrap:balance}

/* modal top: same two columns as the visual row, so the outcomes list lines up with the stat card */
body .op .op-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:12px!important}
body .op .op-top ul.checks{padding-left:0!important;margin-left:0!important}

body .op .op-top{padding-right:0!important}

/* modal outcomes: the orange check sits in a light grey circle */
body .op ul.checks li::before{width:24px!important;height:24px!important;flex:0 0 24px!important;margin:-1px 0 0!important;border-radius:50%!important;
  -webkit-mask:none!important;mask:none!important;
  background:#f7f7f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ff560a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat!important}

/* modal step icons: light grey fill, softly rounded, no border */
body .op .how-icon{background:#f7f7f7!important;border-color:transparent!important;border-radius:8px!important}

body .op ul.checks li::before{border-radius:6px!important}

/* modals: more air between blocks */
body .op .op-vis{margin-top:clamp(40px,4.6vw,64px)!important}
body .op .op-how{margin-top:clamp(40px,4.6vw,64px)!important;padding-top:clamp(36px,4vw,56px)!important}
body .op .op-quote{margin-top:clamp(48px,5vw,72px)!important}
body .op .op-end{padding-top:clamp(48px,5vw,72px)!important}

/* modal ask capsule: a little smaller */
body .op .plan-ask.ask-pill.op-ask{gap:20px!important;padding:10px!important}
body .op .plan-ask.ask-pill.op-ask .pa-av{flex-basis:68px!important;width:68px!important;height:68px!important}
body .op .plan-ask.ask-pill.op-ask .pa-q{font-size:clamp(16px,1.3vw,18px)!important;padding-right:24px}
body .op .plan-ask.ask-pill.op-ask .pa-k{font-size:12px!important;margin-top:6px}
body .op .plan-ask.ask-pill.op-ask .pa-btn{height:58px!important;padding:0 32px!important;font-size:15px!important}

/* modal quotes: key words marked with the same line of brand dots as the case quote */
body .op mark.hl{background:radial-gradient(circle,var(--hot) 1.1px,transparent 1.5px) 0 100%/5px 5px repeat-x!important;color:inherit!important;padding:0!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* modal quotes: own dot composition, two patches growing out of opposite corners, the centre left clean for the quote */
body .op .op-quote::before{background:url("/landing/assets/img/halftone-case-a.svg") right 0 top 0/360px 166px no-repeat,url("/landing/assets/img/halftone-case-b.svg") left 0 bottom 0/400px 173px no-repeat!important;opacity:1!important}
body .op .op-quote > *{position:relative;z-index:1}

/* stat card: one dot patch growing out of the bottom-right corner, the number stays on clean white */
body .op .vis-stat{background:url("/landing/assets/img/halftone-case-a-br.svg") right 0 bottom 0/340px 157px no-repeat,#fff!important}
body .op .vis-stat{background-image:url("/landing/assets/img/halftone-case-a-br.svg")!important;background-position:right 0 bottom 0!important}

/* modal steps: no rule above, the gap alone separates them from the visual row */
body .op .op-how{border-top:0!important;padding-top:0!important;margin-top:clamp(48px,5vw,72px)!important}

body .op .op-top ul.checks li{padding:16px 0!important}

body .reel-cur{background:var(--ink)!important;color:#fff!important}

/* hero: 12px from "As a founder I want to:" to the cards (8px grid gap + 4px) */
body .hero .cards-lab{margin-bottom:4px!important}

/* expand icons a size up */
body .hero .cell svg.xp{width:24px!important;height:24px!important}
body .hero .cell svg.xp path{stroke-width:1.5px!important}
body .plans .oc-open svg.xp{width:20px!important;height:20px!important}
body .plans .oc-open svg.xp path{stroke-width:1.4px!important}



/* what we believe 3D scene: the canvas replaces the SVG once WebGL is up */
.believe .story-scene.gl-on{position:relative}
.believe .story-scene.gl-on > svg{display:none!important}
.believe .story-scene.gl-on canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
@media (max-width:900px){.believe .story-scene.gl-on{min-height:0}}





/* solutions expand button = hero card button: 44px, 3px corners, 24px icon; on hover it turns orange and only the icon grows */
body .plans .oc-open{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:3px!important;transition:background-color .25s ease,color .25s ease!important}
body .plans .oc-open svg.xp{width:24px!important;height:24px!important;transition:transform .25s ease}
body .plans .oc-open svg.xp path{stroke-width:1.5px!important}
body .plans .plan:hover .oc-open,body .plans .plan-row:hover .oc-open,body .plans .oc-open:focus-visible{background:var(--hot)!important;color:#0b0b0b!important}
body .plans .plan:hover .oc-open svg.xp,body .plans .plan-row:hover .oc-open svg.xp{transform:scale(1.15)}

/* modal lead: 16px so the Problem Validation line sits on two lines */
body .op .op-lead{font-size:16px!important;line-height:1.5!important;max-width:none!important}

/* modal titles a step smaller */
body .op .op-top h3{font-size:clamp(30px,2.7vw,38px)!important;line-height:1.12!important}

/* modal titles fill the column width (no balancing), like the lead under them */
body .op .op-top h3{max-width:none!important;text-wrap:wrap!important}

/* hero headline a step smaller */
body .hero h1,body .hero .h1{font-size:clamp(36px,5.6vw,84px)!important}

/* modal top: 16px of air on the right of the title column */
body .op .op-top > div:first-child{padding-right:16px!important;box-sizing:border-box}

/* solutions: 130px from the dark band to "Our solutions" */
body #offering.solutions{padding-top:130px!important}
@media (max-width:720px){body #offering.solutions{padding-top:88px!important}}

/* modal lead: the first sentence carries the promise */
body .op .op-lead b{font-weight:600;color:inherit}

/* final: rounded top corners and a slide-up as it comes into view (driven by --fp, 0 → 1) */
.final{--fp:1;border-radius:clamp(20px,2.4vw,36px) clamp(20px,2.4vw,36px) 0 0;z-index:1;
  transform:translateY(calc((1 - var(--fp)) * 140px)) scale(calc(.96 + .04 * var(--fp)));transform-origin:50% 0;will-change:transform}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.final{transform:none}}

/* team photos: the same soft 10px corners as the rest of the site */
body .reel .reel-ph{border-radius:10px!important;overflow:hidden!important}
body .reel .reel-ph .reel-cap{border-radius:0 0 10px 10px!important}

/* ===== responsive pass 2026-10-15 ===== */
/* hero: the two cards stay side by side on tablets */
@media (min-width:600px) and (max-width:900px){body.hc-2 .hero .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* why-us below 1200 (column layout): the headline pins under the header on a band-coloured fade,
   so the tiles slide underneath it instead of covering the words */
@media (max-width:1199px){
  body .path{--wl-band:#0b0b0b}
  body.wd-2 .path.pre-light,body.wd-2 .path.to-light{--wl-band:#fff}
  body .wl-in > .wl-head{top:calc(var(--nav-h) + 8px)!important;z-index:3!important;padding:16px 0 56px!important;margin:0 calc(-1 * var(--gut))!important;padding-inline:var(--gut)!important;
    background:linear-gradient(var(--wl-band) 0,var(--wl-band) calc(100% - 56px),transparent 100%);transition:background .6s ease}
  body .wl-in > .wl-i{z-index:1!important}
}
/* final: on phones the copy button sits under the address instead of drifting to the edge */
@media (max-width:520px){.final .mail3{flex-direction:column!important;gap:12px!important;text-align:center}}

/* modals on phones and small tablets: everything in one column */
@media (max-width:760px){
  body .op .op-top,body .op .op-vis{grid-template-columns:minmax(0,1fr)!important;row-gap:24px!important}
  body .op .op-top > div:first-child{padding-right:0!important}
  body .op .op-top h3{font-size:clamp(28px,8vw,34px)!important}
  body .op .op-vis .vis-main{min-height:260px;padding:20px!important}
  body .op .vis-side{grid-template-rows:auto auto!important}
  body .op .vis-facts .fact{gap:16px}
  body .op .op-how{grid-template-columns:minmax(0,1fr)!important}
}

/* ask capsule on phones: proper inner padding and rhythm */
@media (max-width:600px){
  body .ask-wrap .plan-ask.ask-pill,body .op .plan-ask.ask-pill.op-ask{padding:20px!important;gap:16px!important;border-radius:20px!important}
  body .ask-wrap .plan-ask.ask-pill .pa-av,body .op .plan-ask.ask-pill.op-ask .pa-av{flex-basis:56px!important;width:56px!important;height:56px!important}
  body .ask-wrap .plan-ask.ask-pill .pa-q,body .op .plan-ask.ask-pill.op-ask .pa-q{padding-right:0!important}
  body .ask-wrap .plan-ask.ask-pill .pa-btn,body .op .plan-ask.ask-pill.op-ask .pa-btn{height:52px!important;margin-top:4px}
}

/* case on phones: smaller Finna wordmark, centred in its cell */
@media (max-width:600px){body .case3 .c3-led{justify-items:center;padding:28px 24px!important}body .case3 .c3-led .finna-led{width:min(180px,60%)!important}}
@media (min-width:601px) and (max-width:900px){body .case3 .c3-led{justify-items:center;padding:32px 24px!important}body .case3 .c3-led .finna-led{width:min(240px,100%)!important}}

/* why-us headline: sentences never overlap — the old one fades out fast, the new one comes in after it */
body .wl-say.dim .wl-s{transition:opacity .18s ease,transform .18s ease!important}
body .wl-say.dim .wl-s.show{transition:opacity .35s ease .2s,transform .35s ease .2s!important}

/* why-us on phones: tighter rhythm between the tiles */
@media (max-width:720px){
  body .wl-in > .wl-i{margin-top:9vh!important}
  body .wl-in > :nth-child(10){margin-top:38vh!important}
  body .wl-in > :nth-child(6),body .wl-in > :nth-child(17){margin-top:28vh!important}
  body .wl-in{padding-bottom:8vh!important}
}

@media (max-width:720px){body .wl-in > .wl-photo{width:min(66%,280px)!important}}

/* why-us below 1200: like desktop, the tiles (logos, cards, photos) slide over the pinned headline; no backdrop behind it */
@media (max-width:1199px){
  body .wl-in > .wl-head{z-index:0!important;background:none!important;padding:0!important;margin:0!important}
  body .wl-in > .wl-i{z-index:2!important}
}

/* phones: 48px from "Now, meet the people…" to the team arrows */
@media (max-width:720px){body .team{margin-top:-100px!important;position:relative;z-index:1}}

/* hero cards on phones: compact */
@media (max-width:600px){
  body.hc-2 .hero .card{min-height:0!important;height:auto!important;padding:18px!important;gap:28px!important}
  body.hc-2 .hero .card .h3{font-size:24px!important;line-height:1.1!important}
  body.hc-2 .hero .card .bar .mono{font-size:12px!important}
  body.hc-2 .hero .card .bar .cell{width:36px!important;height:36px!important}
  body.hc-2 .hero .card .bar .cell svg.xp{width:20px!important;height:20px!important}
}

@media (max-width:600px){
  body.hc-2 .hero .cards .card .card-face .h3{font-size:24px!important;line-height:1.1!important}
  body.hc-2 .hero .cards .card .body{min-height:0!important;margin-top:0!important}
  body.hc-2 .hero .cards .card .card-reveal{display:none!important}
  body.hc-2 .hero .cards .card .card-face{opacity:1!important;transform:none!important;position:static!important}
}

/* solutions lead stays visible on phones */
body #offering .s-head p{display:block!important;text-align:center}

@media (max-width:600px){body #offering .plans .pl-q{font-size:24px!important;line-height:1.12!important}}

@media (max-width:600px){body .plans .oc-open{width:36px!important;height:36px!important;flex-basis:36px!important}body .plans .oc-open svg.xp{width:20px!important;height:20px!important}}

@media (max-width:600px){body .plans .pl-get li{padding:6px 0!important;line-height:22px!important}}

/* touch screens have no hover: show what desktop reveals on hover */
@media (hover:none){
  body .reel-ph .reel-cap{opacity:1!important;transform:none!important}
}

/* integrated team on phones: tighter vertical rhythm */
@media (max-width:600px){
  body .plans .plan-row{row-gap:20px!important;gap:20px!important}
  body .plans .plan-row .pl-get,body .plans .plan-row .pl-price{margin-top:0!important}
  body .plans .plan-row .pr-desc{margin-top:14px!important}
  body .plans .plan-row .pl-price{padding-top:0!important}
}

/* touch: a tap must not leave the expand button stuck in its hover state — it stays grey */
@media (hover:none){body .plans .plan .oc-open,body .plans .plan:hover .oc-open,body .plans .plan-row:hover .oc-open{background:#f4f4f4!important;color:var(--ink)!important}body .plans .plan:hover .oc-open svg.xp{transform:none!important}}

/* phones (by width, so it also holds with a mouse in a narrow window): Solutions cards do not react to hover — white card, grey button */
@media (max-width:600px){
  body .plans .plan:hover,body .plans .plan:focus-within{background:#fff!important}
  body .plans .plan .oc-open,body .plans .plan:hover .oc-open,body .plans .plan-row:hover .oc-open{background:#f4f4f4!important;color:var(--ink)!important}
  body .plans .plan:hover .oc-open svg.xp,body .plans .plan-row:hover .oc-open svg.xp{transform:none!important}
}

@media (max-width:600px){body .ask-wrap{margin-top:40px!important}body #offering.solutions{padding-bottom:56px!important}}

@media (max-width:1199px){body .case .case3{margin-top:16px!important}}

@media (max-width:600px){body .case .case3 .c3-quote{font-size:23px!important;line-height:1.22!important}body .case .case3 .c3-from .h4{font-size:18px!important}}

/* why-us cards on phones: a size down */
@media (max-width:720px){
  body .wl-in > .wl-card{width:min(68%,260px)!important;padding:16px 18px!important}
  body .wl-in > .wl-card .wl-k{font-size:11px!important}
  body .wl-in > .wl-card .wl-q,body .wl-in > .wl-card .wl-l{font-size:15px!important;line-height:1.35!important;margin-top:10px!important}
  body .wl-in > .wl-card .wl-n{font-size:40px!important;margin-top:10px!important}
}

/* mobile menu: burger button + full-screen panel */
.burger{display:none}
.mnav{position:fixed;inset:0;z-index:24;background:#0b0b0b;color:#fff;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mnav.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.mnav-in{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:calc(var(--nav-h) + 32px) var(--gut) 32px}
.mnav-links{list-style:none;margin:0;padding:0}
.mnav-links li{border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.mnav.on .mnav-links li{opacity:1;transform:none}
.mnav.on .mnav-links li:nth-child(2){transition-delay:.05s}.mnav.on .mnav-links li:nth-child(3){transition-delay:.1s}.mnav.on .mnav-links li:nth-child(4){transition-delay:.15s}
.mnav-links a{display:flex;align-items:baseline;gap:16px;padding:18px 0;color:#fff;text-decoration:none;font:400 32px/1.1 var(--sans);letter-spacing:-.03em}
.mnav-links a .mono{font:400 12px/1 var(--mono);letter-spacing:.07em;color:var(--hot)}
.mnav-links a:active{color:var(--hot)}
.mnav-foot{display:flex;flex-direction:column;gap:20px}
.mnav-cta{display:flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border-radius:999px;background:var(--hot);color:#0b0b0b;text-decoration:none}
.mnav-cta img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.mnav-cta b{display:block;font:500 15px/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mnav-cta small{display:block;margin-top:4px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;opacity:.7}
.mnav-ar{margin-left:auto;font-size:20px}
.mnav-mail{font:400 14px/1 var(--mono);letter-spacing:.04em;color:rgba(255,255,255,.7);text-align:center}
@media (max-width:720px){
  .top .nav{grid-template-columns:1fr auto auto!important;column-gap:8px}
  .burger{display:grid;place-content:center;gap:6px;width:46px;height:46px;padding:0;border:0;border-radius:999px;background:rgba(11,11,11,.06);color:inherit;cursor:pointer;grid-column:3}
  .top:not(.stuck) .burger,.top.on-dark .burger,html.mnav-open .burger{background:rgba(255,255,255,.12)}
  .burger i{display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .3s ease}
  html.mnav-open .burger i:first-child{transform:translateY(3.8px) rotate(45deg)}
  html.mnav-open .burger i:last-child{transform:translateY(-3.8px) rotate(-45deg)}
  .top .nav > .btn{grid-column:2}
  html.mnav-open .top{background:#0b0b0b!important;color:#fff!important;border-bottom-color:rgba(255,255,255,.12)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.mnav-open .top .logo{color:#fff}
  html.mnav-open,html.mnav-open body{overflow:hidden}
}

/* menu open: header is solid black whatever band is under it (beats the frosted .stuck states) */
html.mnav-open body .top,html.mnav-open body .top.stuck,html.mnav-open body .top.stuck:not(.on-dark),html.mnav-open body .top.stuck.on-dark{background:#0b0b0b!important;color:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:rgba(255,255,255,.12)!important}
html.mnav-open body .top.stuck::after{background:rgba(255,255,255,.12)!important}
html.mnav-open body .top .logo{color:#fff!important}

/* what we believe on phones/tablets: scene on top, then ONE statement at a time in a fixed slot, centred under the scene */
@media (max-width:900px){
  body .believe .story-pin > .steps{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;margin:0!important;padding:0!important;gap:0!important}
  body .believe .story-pin > .steps li{grid-area:1 / 1!important;padding:0 8px!important;margin:0!important;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
  body .believe .story-pin > .steps li::before,body .believe .story-pin > .steps li::after{display:none!important}
  body .believe .story-pin > .steps li:has(> .sl[aria-current="step"]){opacity:1;transform:none;pointer-events:auto}
  body .believe .steps .sl{justify-items:center;text-align:center}
  body .believe .steps .sl .sl-t{font-size:clamp(24px,6.6vw,32px)!important;line-height:1.15!important;text-align:center;text-wrap:balance}
  body .believe .steps .sl .sl-t .c{color:rgba(255,255,255,.18)}
  body .believe .steps .sl .sl-t .c.on{color:#ff560a!important}
  body .believe .story-hint{margin:8px 0 20px!important}
  body .believe .pp-intro{margin-bottom:0!important}
}

/* bigger scene, and the whole stack sits in the middle of the screen */
@media (max-width:900px){
  body .believe .story-pin{display:flex!important;flex-direction:column;justify-content:center;gap:0}
  body .believe .story-pin > .pp-left,body .believe .story-pin .stage{display:contents!important}
  body .believe .story-pin .pp-intro{order:0}
  body .believe .story-pin .story-scene{order:1;height:min(46svh,420px)!important;min-height:0!important;flex:0 0 auto;margin:12px 0 0!important}
  body .believe .story-pin .story-hint{order:2}
  body .believe .story-pin > .steps{order:3;min-height:5.2em}
}

@media (max-width:900px){body .believe .stage .pp-intro .pp-t{padding-left:0!important;padding-right:0!important}body .believe .story-pin .pp-intro{margin-left:0!important;margin-right:0!important;align-self:stretch}}

/* hero on tablets/small laptops: no full-screen stretch, the cards follow the copy at a fixed distance */
@media (min-width:601px) and (max-width:1199px){body .hero{min-height:0!important}body .hero .cards{margin-top:clamp(40px,5vw,64px)!important}}

/* hero below 1200: compact — cards 40px under the intro line, no extra top padding, smaller cards on tablets */
@media (max-width:1199px){
  body .hero{min-height:0!important}
  body .hero .cards{margin-top:40px!important;padding-top:0!important}
}
@media (min-width:601px) and (max-width:1199px){
  body.hc-2 .hero .cards .card{min-height:clamp(170px,22vw,210px)!important;padding:22px!important}
  body.hc-2 .hero .cards .card .card-face .h3{font-size:clamp(24px,3vw,28px)!important;line-height:1.1!important}
  body.hc-2 .hero .cards .card .bar .cell{width:40px!important;height:40px!important}
}

/* solutions on tablets (stacked layout): same tight rhythm as on phones */
@media (min-width:601px) and (max-width:1023px){
  body .plans .pl-get li{padding:6px 0!important;line-height:22px!important}
  body .plans .plan-row{row-gap:22px!important;gap:22px!important}
  body .plans .plan-row .pl-get,body .plans .plan-row .pl-price{margin-top:0!important}
  body .plans .plan-row .pl-price{padding-top:0!important}
}

/* hero cards on tablets: the hover description overlays the card instead of adding height; smaller expand button */
@media (min-width:601px) and (max-width:1199px){
  body.hc-2 .hero .cards .card .body{position:relative;min-height:0!important}
  body.hc-2 .hero .cards .card .card-reveal{position:absolute!important;left:0;right:0;bottom:0}
  body.hc-2 .hero .cards .card{min-height:170px!important}
  body.hc-2 .hero .cards .card .bar .cell{width:36px!important;height:36px!important}
  body.hc-2 .hero .cards .card .bar .cell svg.xp{width:20px!important;height:20px!important}
}

body .final .final-bg .px-o{stroke:#7a6cff!important}

/* final variant B canvas + review switch */
.final canvas.final-b{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;z-index:0}
body.fin-b .final canvas.final-b{display:block}
body.fin-b .final canvas.final-bands{display:none!important}
.vsw3{position:fixed;z-index:100;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:#161616;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.vsw3 span{margin:0 8px 0 10px;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#b9b9b9}
.vsw3 button{height:32px;min-width:40px;padding:0 14px;border:0;border-radius:999px;background:none;color:#fff;font:400 12px/1 var(--mono);letter-spacing:.06em;cursor:pointer}
.vsw3 button[aria-pressed="true"]{background:var(--hot);color:#0b0b0b}

.final canvas.final-c{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;z-index:0}
body.fin-c .final canvas.final-c{display:block}
body.fin-c .final canvas.final-bands,body.fin-c .final canvas.final-b{display:none!important}


/* key words in quotes (case + modals): a line of violet pixel squares under the words (option G) */


/* touch screens: card headline sits bottom-left */
@media (hover:none),(max-width:1199px){body.hc-2 .hero .cards .card .card-face{align-self:flex-start!important;justify-self:start!important;text-align:left!important;margin-right:auto!important}}


/* believe on phones/tablets: content starts near the top of the pinned screen, not centred */
@media (max-width:900px){body .believe .story-pin{justify-content:flex-start!important;padding-top:24px!important}}


@media (hover:none),(max-width:1199px){body.hc-2 .hero .cards .card{display:flex!important;flex-direction:column!important}body.hc-2 .hero .cards .card .body{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}body.hc-2 .hero .cards .card .card-face{margin-top:auto!important}}


/* believe on phones/tablets: the pinned screen is only as tall as its content, so no empty band before Solutions */
@media (max-width:900px){body .believe .story-pin{height:auto!important;min-height:0!important;padding-bottom:48px!important}}


/* touch screens: hero cards show only their headline (the hover description never overlays it) */
@media (hover:none){body.hc-2 .hero .cards .card .card-reveal{display:none!important}body.hc-2 .hero .cards .card .card-face{opacity:1!important;transform:none!important}}


/* hero cards 601–1199 on hover: the description fits the body area under the label — smaller text, small animation, never over the label */
@media (min-width:601px) and (max-width:1199px){
  body.hc-2 .hero .cards .card .card-reveal{top:auto!important;bottom:0!important;display:flex!important;flex-direction:row!important;align-items:flex-end!important;gap:16px!important;padding:0!important}
  body.hc-2 .hero .cards .card .card-reveal .anim{flex:0 0 30%!important;width:30%!important;max-width:140px;height:auto!important}
  body.hc-2 .hero .cards .card .card-reveal p{flex:1 1 auto;margin:0!important;font-size:clamp(14px,1.5vw,17px)!important;line-height:1.35!important;max-width:none!important}
}


/* modal title never runs under the close button */
body .op .op-top h3{padding-right:52px!important}
@media (max-width:760px){body .op .op-top h3{font-size:clamp(24px,7vw,30px)!important}}


html.mnav-open .vsw3{display:none!important}


/* modal "Talk to Ivan" on phones: full width */
@media (max-width:480px){body .op .op-ctas{display:block!important;width:100%}body .op .op-ctas .op-btn.op-face{display:inline-flex!important;width:auto!important;height:56px!important;justify-content:flex-start}}


/* Problem Validation visual: a test field (light iso, like the believe scene) — four assumptions as small turbines,
   the wind of real users blows across, three catch it and turn, one stays still; marks land one by one, then GO */
.pv2{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
.pv2-top{fill:#f3f3f3}.pv2-l{fill:url(#pv2h);stroke:#0b0b0b;stroke-width:1}.pv2-r{fill:#e6e6e6;stroke:#0b0b0b;stroke-width:1}
.pv2-g{stroke:#d6d6d6;stroke-width:1}.pv2-edge{fill:none;stroke:#0b0b0b;stroke-width:1.2;stroke-linejoin:round}
.pv2-foot{fill:#dcdcdc}.pv2-mast{fill:#fff;stroke:#0b0b0b;stroke-width:1.1;stroke-linejoin:round}
.pv2-bl{fill:#fff;stroke:#0b0b0b;stroke-width:1.1;stroke-linejoin:round}.pv2-hub{fill:#0b0b0b}
.pv2-no .pv2-mast,.pv2-no .pv2-bl{stroke:#9a9a9a}.pv2-no .pv2-hub{fill:#9a9a9a}
.pv2-rot{animation:pv2-spin 1.6s linear infinite}
.pv2-still{animation:pv2-wob 4s ease-in-out infinite}
@keyframes pv2-spin{to{transform:rotate(360deg)}}
@keyframes pv2-wob{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-6deg)}}
.pv2-wind{fill:none;stroke:#0b0b0b;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:14 10 4 10 26 200;opacity:.45;animation:pv2-wind 3.2s linear infinite}
@keyframes pv2-wind{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
.pv2-lab,.pv2-cap,.pv2-chip text{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;fill:rgba(11,11,11,.6)}
.pv2-box{fill:#fff;stroke:#0b0b0b;stroke-width:1.3}.pv2-tick{fill:none;stroke:#0b0b0b;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv2-no .pv2-box{stroke:#9a9a9a}.pv2-no .pv2-tick{stroke:#9a9a9a}
.pv2-mark{opacity:0;animation:pv2-mark 8s ease infinite both}
@keyframes pv2-mark{0%,8%{opacity:0}14%,88%{opacity:1}96%,100%{opacity:0}}
.pv2-rule{stroke:#d6d6d6;stroke-width:1;stroke-dasharray:4 5}
.pv2-chip rect{fill:#fff;stroke:#0b0b0b;stroke-width:1.2}
.pv2-go rect{animation:pv2-go 8s ease infinite}.pv2-go text{animation:pv2-got 8s ease infinite}
@keyframes pv2-go{0%,62%{fill:#fff;stroke:#0b0b0b}68%,90%{fill:var(--hot);stroke:var(--hot)}96%,100%{fill:#fff;stroke:#0b0b0b}}
@keyframes pv2-got{0%,62%{fill:rgba(11,11,11,.6)}68%,90%{fill:#0b0b0b}96%,100%{fill:rgba(11,11,11,.6)}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.pv2 *{animation:none!important}.pv2-mark{opacity:1}}


/* Solution Validation visual: the MVP turbine is assembled on the test field, starts turning in real wind,
   its cable feeds a meter whose bars rise, and the outline of a bigger turbine appears — build, measure, learn (9s loop) */
.sv2{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
.sv2-tower{transform-box:fill-box;transform-origin:50% 100%;animation:sv2-tower 9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes sv2-tower{0%{transform:scaleY(0)}14%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.sv2-head{opacity:0;animation:sv2-head 9s ease infinite}
@keyframes sv2-head{0%,14%{opacity:0;transform:translateY(-6px)}22%,94%{opacity:1;transform:none}100%{opacity:0}}
.sv2-rot{animation:pv2-spin 1.4s linear infinite}
.sv2-wind{animation:pv2-wind 3.2s linear infinite,sv2-windin 9s ease infinite}
@keyframes sv2-windin{0%,24%{opacity:0}32%,92%{opacity:.45}100%{opacity:0}}
.sv2-cable{fill:none;stroke:#0b0b0b;stroke-width:1.2;stroke-dasharray:3 4;opacity:0;animation:sv2-cable 9s ease infinite,sv2-flow 1s linear infinite}
@keyframes sv2-cable{0%,34%{opacity:0}40%,94%{opacity:.8}100%{opacity:0}}
@keyframes sv2-flow{to{stroke-dashoffset:-14}}
.sv2-bar{fill:#0b0b0b;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:sv2-bar 9s cubic-bezier(.3,1.4,.5,1) infinite}
.sv2-bar.sv2-hot{fill:var(--hot)}.sv2-ghl{opacity:0;animation:sv2-ghost 9s ease infinite}
@keyframes sv2-bar{0%,42%{transform:scaleY(0)}50%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.sv2-ghost path,.sv2-ghost circle{fill:none;stroke:#0b0b0b;stroke-width:1.1;stroke-dasharray:4 5}
.sv2-ghost{opacity:0;animation:sv2-ghost 9s ease infinite}
@keyframes sv2-ghost{0%,66%{opacity:0}76%,94%{opacity:.55}100%{opacity:0}}
.sv2-chip rect{fill:#fff;stroke:#0b0b0b;stroke-width:1.2}.sv2-chip text{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;fill:rgba(11,11,11,.6)}
.sv2-c0 rect{animation:sv2-c0 9s ease infinite}.sv2-c1 rect{animation:sv2-c1 9s ease infinite}.sv2-c2 rect{animation:sv2-c2 9s ease infinite}
.sv2-c0 text{animation:sv2-t0 9s ease infinite}.sv2-c1 text{animation:sv2-t1 9s ease infinite}.sv2-c2 text{animation:sv2-t2 9s ease infinite}
@keyframes sv2-c0{0%,30%{fill:var(--hot);stroke:var(--hot)}34%,100%{fill:#fff;stroke:#0b0b0b}}
@keyframes sv2-c1{0%,34%{fill:#fff;stroke:#0b0b0b}38%,62%{fill:var(--hot);stroke:var(--hot)}66%,100%{fill:#fff;stroke:#0b0b0b}}
@keyframes sv2-c2{0%,66%{fill:#fff;stroke:#0b0b0b}70%,94%{fill:var(--hot);stroke:var(--hot)}98%,100%{fill:#fff;stroke:#0b0b0b}}
@keyframes sv2-t0{0%,30%{fill:#0b0b0b}34%,100%{fill:rgba(11,11,11,.6)}}
@keyframes sv2-t1{0%,34%{fill:rgba(11,11,11,.6)}38%,62%{fill:#0b0b0b}66%,100%{fill:rgba(11,11,11,.6)}}
@keyframes sv2-t2{0%,66%{fill:rgba(11,11,11,.6)}70%,94%{fill:#0b0b0b}98%,100%{fill:rgba(11,11,11,.6)}}
.sv2-arrow{fill:none;stroke:#0b0b0b;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.sv2 *{animation:none!important}.sv2-head,.sv2-ghost{opacity:1}.sv2-bar{transform:none}.sv2-cable{opacity:.8}}


/* modal visuals: shaded light-iso volumes (tapered cylinder towers, boxed nacelles, slab on legs) */
.i3-top{fill:#f4f4f4}.i3-l{fill:#dedede;stroke:#0b0b0b;stroke-width:.9;stroke-linejoin:round}.i3-r{fill:#c9c9c9;stroke:#0b0b0b;stroke-width:.9;stroke-linejoin:round}
.i3-edge,.i3-edge2{fill:#f4f4f4;stroke:#0b0b0b;stroke-width:1;stroke-linejoin:round}.i3-edge{fill:none}
.i3-g{stroke:#d8d8d8;stroke-width:1}
.i3-leg{stroke:#0b0b0b;stroke-width:.8}
.i3-disc{fill:#cfcfcf;stroke:#0b0b0b;stroke-width:.8}.i3-disctop{fill:#efefef;stroke:#0b0b0b;stroke-width:.8}
.i3-tower{stroke:#0b0b0b;stroke-width:.9;stroke-linejoin:round}
.i3-nac{fill:#f2f2f2;stroke:#0b0b0b;stroke-width:.9;stroke-linejoin:round}.i3-nacs{fill:#bdbdbd;stroke:#0b0b0b;stroke-width:.9;stroke-linejoin:round}
.i3-bl{stroke:#0b0b0b;stroke-width:.9;stroke-linejoin:round}.i3-hub{fill:#0b0b0b}
.i3-grey{opacity:.42}

/* modal 3D: canvas fills the visual box above the chip row; the SVG keeps only its chip row */
body .op .vis-main.gl-on{position:relative}
body .op .vis-main.gl-on canvas.vis3d{position:absolute;left:0;right:0;top:0;bottom:44px;width:100%!important;height:calc(100% - 44px)!important;display:block;border-radius:10px 10px 0 0}
body .op .vis-main.gl-on svg > *:not(.pv2-rule):not(.pv2-cap):not(.pv2-chip):not(.sv2-chip){visibility:hidden}
body .op .vis-main.gl-on svg{align-self:flex-end;margin-top:auto!important}


/* hero cards: the 3D hover scene replaces the line animation, in a box tall enough for the iso field */
body.hc-2 .hero .card.gl3d .card-reveal .anim{display:none!important}
body.hc-2 .hero .card .anim3d{display:block;flex:0 0 auto;width:clamp(150px,36%,250px);aspect-ratio:3/2;position:relative}
body.hc-2 .hero .card .anim3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
@media (min-width:601px) and (max-width:1199px){body.hc-2 .hero .cards .card .card-reveal .anim3d{width:34%!important;max-width:160px}}


/* solutions on phones/tablets: dot patches peek out from behind the plans — top-right and bottom-left, like the case */
@media (max-width:900px){
  body .plans::before{display:block!important;content:""!important;position:absolute;z-index:-1;pointer-events:none;
    top:-56px!important;bottom:-20px!important;left:calc(-1 * var(--gut))!important;right:calc(-1 * var(--gut))!important;width:auto!important;transform:none!important;
    background:url("/landing/assets/img/halftone-case-a.svg") right 0 top 0/300px 138px no-repeat,url("/landing/assets/img/halftone-case-b.svg") left 0 bottom 0/320px 139px no-repeat!important;opacity:1!important}
  body .plans{position:relative;isolation:isolate}
}


/* stacked plans (one column): a single hairline between parts, no doubled edges */
@media (max-width:1023px){
  body .plans > .plan:first-child{border:0!important;border-bottom:1px solid #e3e3e3!important}
  body .plans > .plan:nth-child(2){border:0!important}
  body .plans > .plan-row{border:0!important;border-top:1px solid #e3e3e3!important}
  body .plans > .plan:first-child{border-radius:9px 9px 0 0}
}


/* why-us below 1200: the headline pins in the middle of the screen, like desktop (tiles pass over it) */
@media (max-width:1199px){body .wl-in > .wl-head{top:calc(50vh - 80px + var(--nav-h) / 2)!important;top:calc(50svh - 80px + var(--nav-h) / 2)!important}}


/* why-us headline never stretches into one long line: a measure of ~14em, centred */
body .wl-head .wl-say{max-width:min(100%,14.5em)!important;margin-left:auto!important;margin-right:auto!important}


/* final headline scales fluidly like the other headings: 30px on phones → 56px on desktop */
body .final .final-h{font-size:clamp(30px,calc(20px + 2.5vw),56px)!important;line-height:1.04!important}


/* final: smaller top padding on phones/tablets */
@media (max-width:1199px){body .final{padding-top:clamp(56px,7vw,80px)!important}}


/* final: smaller bottom padding on phones/tablets */
@media (max-width:1199px){body .final{padding-bottom:clamp(48px,7vw,72px)!important}}


/* nav: always "Talk to Ivan" */
body .nav .btn .more{display:inline!important}


/* hero: always full viewport height; cards sit at the bottom */
@media (max-width:1199px){body .hero{min-height:100vh!important;min-height:100svh!important}body .hero .cards{margin-top:auto!important}body .hero .hero-copy{margin-bottom:clamp(40px,5vw,64px)!important}}


/* final: softer top corners */
body .final{border-radius:clamp(12px,1.4vw,20px) clamp(12px,1.4vw,20px) 0 0!important}


/* modal close: bigger cross */
body .op .op-close{font-size:30px!important;line-height:1!important;font-weight:300!important}


/* team reel: bigger photos on phones/tablets */
@media (max-width:767px){body .reel .reel-ph{width:min(74vw,340px)!important}}
@media (min-width:768px) and (max-width:1199px){body .reel .reel-ph{width:360px!important}}


/* hero cards on tablet: keep the desktop proportion (~2.28:1) */
@media (min-width:601px) and (max-width:1199px){body.hc-2 .hero .cards{grid-auto-rows:auto!important}body.hc-2 .hero .card{height:auto!important;min-height:170px!important;aspect-ratio:2.28/1!important}}


/* hero on tablets: fill the full-height screen — larger headline on tall screens, taller cards in portrait, copy centred in the space above the cards */
@media (min-width:601px) and (max-width:1199px){
  body .hero h1,body .hero .h1{font-size:clamp(36px,max(5.6vw,min(7.6vw,6.4vh)),88px)!important}
  body .hero .hero-copy{margin-top:auto!important;margin-bottom:auto!important;padding-bottom:clamp(40px,5vw,64px)!important}
  body .hero .cards{margin-top:0!important}
}
@media (min-width:601px) and (max-width:1199px) and (orientation:portrait){
  body.hc-2 .hero .card{aspect-ratio:1.75/1!important}
}


/* modal close: sticks to the top-right corner while the modal scrolls */
body .op .op-close{position:sticky!important;top:calc(20px - clamp(32px,3.4vw,52px))!important;right:auto!important;z-index:5!important;margin:calc(20px - clamp(32px,3.4vw,52px)) calc(20px - clamp(32px,3.4vw,52px)) calc(clamp(32px,3.4vw,52px) - 60px) auto!important}


/* hero headline on phones: grows with the screen instead of sitting at 36px, meets the tablet size at 601px */
@media (max-width:600px){body .hero h1,body .hero .h1{font-size:clamp(38px,calc(20px + 4.4vw),48px)!important}}
/* solutions title on tablets: smooth up to the desktop size */
@media (min-width:601px) and (max-width:1199px){body #offering .s-head > p:first-of-type{font-size:clamp(28px,calc(14px + 2.17vw),40px)!important}}


/* hero on tablets: cards take up spare height (up to ~1.15:1 per card), remaining space centres the copy */
@media (min-width:601px) and (max-width:1199px){
  body .hero .cards{flex:1 1 auto!important;grid-template-rows:auto minmax(0,1fr)!important;max-height:min(50svh,calc(29px + (100vw - 64px) / 2 / 1.15))!important}
  body.hc-2 .hero .cards .card{aspect-ratio:auto!important;min-height:max(220px,calc((100vw - 64px) / 2 / 2.28))!important;height:auto!important}
}


/* hero on tablets: cards no taller than ~1.6:1, spare height goes to a bigger headline */
@media (min-width:601px) and (max-width:1199px){
  body .hero h1,body .hero .h1{font-size:clamp(36px,max(5.6vw,min(8.2vw,6.9vh)),88px)!important}
  body .hero .cards{max-height:min(46svh,max(250px,calc(29px + (100vw - 64px) / 2 / 1.8)))!important}
}


/* hero cards 601–1199 on hover: description at the desktop size */
@media (min-width:601px) and (max-width:1199px){body.hc-2 .hero .cards .card .card-reveal p{font-size:clamp(14px,calc(2vw + 2px),max(20px,1.7vw))!important;line-height:1.3!important}}


/* hero on phones: spare height splits evenly above and below the copy */
@media (max-width:600px){body .hero .hero-copy{margin-top:auto!important;margin-bottom:auto!important;padding-bottom:clamp(32px,8vw,40px)!important}body .hero .cards{margin-top:0!important}}


/* modal ask on phones: laid out like the footer CTA — centred photo and text, full-width button */
@media (max-width:600px){
  body .op .plan-ask.ask-pill.op-ask{flex-wrap:wrap!important;justify-content:center!important;text-align:center!important}
  body .op .plan-ask.ask-pill.op-ask .pa-av{margin:0 auto!important}
  body .op .plan-ask.ask-pill.op-ask .pa-q{flex:1 1 100%!important;text-align:center!important}
  body .op .plan-ask.ask-pill.op-ask .pa-k{display:block;text-align:center!important}
  body .op .plan-ask.ask-pill.op-ask .pa-btn{flex:1 1 100%!important;width:100%!important;margin-left:0!important;justify-content:center!important}
}


/* modal ask on phones: text size as in the footer CTA */
@media (max-width:600px){body .op .plan-ask.ask-pill.op-ask .pa-q{font-size:18px!important;line-height:1.5!important}body .op .plan-ask.ask-pill.op-ask .pa-k{font-size:13px!important}}


/* solutions ask on phones: same layout as the modal/footer CTA — centred photo and text, full-width button */
@media (max-width:600px){
  body .ask-wrap .plan-ask.ask-pill{flex-wrap:wrap!important;justify-content:center!important;text-align:center!important}
  body .ask-wrap .plan-ask.ask-pill .pa-av{margin:0 auto!important}
  body .ask-wrap .plan-ask.ask-pill .pa-q{flex:1 1 100%!important;text-align:center!important;font-size:18px!important;line-height:1.5!important}
  body .ask-wrap .plan-ask.ask-pill .pa-k{display:block;text-align:center!important;font-size:13px!important}
  body .ask-wrap .plan-ask.ask-pill .pa-btn{flex:1 1 100%!important;width:100%!important;margin-left:0!important;justify-content:center!important}
}


/* believe on phones/tablets: pinned block fills the screen under the nav; scene + text sit centred below the label */
@media (max-width:900px){
  body .believe .story-pin{min-height:calc(100svh - var(--nav-h,67px))!important}
  body .believe .story-pin .story-scene{margin-top:auto!important}
  body .believe .story-pin > .steps{margin-bottom:auto!important}
}


/* believe on phones/tablets: the scene grows into spare height, steps take only the height of the tallest step */
@media (max-width:900px){
  body .believe .story-pin .story-scene{flex:1 1 auto!important;height:auto!important;min-height:min(30svh,280px)!important;max-height:62svh!important;margin-top:12px!important}
  body .believe .story-pin > .steps{min-height:0!important;margin-bottom:0!important;margin-top:auto!important}
}


@media (max-width:900px){
  body .believe .story-pin > .steps{margin-top:0!important}
  body .believe .story-pin .story-scene > svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
}


/* no scroll snapping on phones/tablets — it caught the scroll between the hero and What we believe */
@media (max-width:1199px){html{scroll-snap-type:none!important}body .believe .snap{scroll-snap-align:none!important}}


/* believe on tablets: more air under the step text, block still fills the screen */
@media (max-width:900px){body .believe .story-pin{padding-bottom:clamp(48px,9vw,80px)!important}}


/* believe on phones/tablets: scene height follows its width (no empty band inside it), the group stays centred */
@media (max-width:900px){
  body .believe .story-pin .story-scene{max-height:min(62svh,calc(100vw * 1.05))!important;margin-top:auto!important}
  body .believe .story-pin > .steps{margin-bottom:auto!important}
}


/* believe on phones: scene box as tall as the scene needs, no empty band above/below it */
@media (max-width:600px){body .believe .story-pin .story-scene{max-height:min(62svh,calc((100vw - 48px) * .98))!important}}


/* modal on phones: 32px between the quote and the ask, same as the modal padding */
@media (max-width:600px){body .op .op-end{padding-top:32px!important}}


/* modal on phones: 48px from the last check item text to the visual (the item already has 16px bottom padding) */
@media (max-width:600px){body .op .op-vis{margin-top:32px!important}}


/* modal on phones: equal 16px between the visual, stat and facts boxes */
@media (max-width:600px){body .op .op-vis{row-gap:16px!important;gap:16px!important}body .op .vis-side{row-gap:16px!important;gap:16px!important}}


/* solutions plans on phones: clearer rhythm — groups separated, labels sit close to their content */
@media (max-width:600px){
  body .plans .plan{padding:28px 24px 32px!important}
  body .plans .plan .pl-q{margin-top:24px!important}
  body .plans .plan .pl-desc{margin-top:12px!important}
  body .plans .plan .pl-get{margin-top:32px!important}
  body .plans .plan .pl-get .pl-k,body .plans .plan .pl-out .pl-k{display:block;margin-bottom:14px!important}
  body .plans .plan .pl-get ul{margin-top:0!important}
  body .plans .plan .pl-out{margin-top:32px!important}
  body .plans .plan .pl-out p{margin-top:0!important}
  body .plans .plan .pl-price{margin-top:32px!important;padding-top:24px!important}
}


/* solutions "Integrated team" row on phones: same rhythm as the plan cards above */
@media (max-width:600px){
  body .plans .plan-row{padding:28px 24px 32px!important;row-gap:0!important}
  body .plans .plan-row .pl-name{margin-bottom:0!important}
  body .plans .plan-row .pr-desc{margin-top:24px!important}
  body .plans .plan-row .pl-get{margin-top:32px!important}
  body .plans .plan-row .pl-get .pl-k,body .plans .plan-row .pr-price span{display:block;margin-bottom:14px!important}
  body .plans .plan-row .pl-get ul{margin-top:0!important}
  body .plans .plan-row .pr-price{margin-top:32px!important}
}


/* plans on phones: optically equal — 16px from every label to its content, 32px between every group (list items carry their own padding) */
@media (max-width:600px){
  body .plans .plan .pl-get .pl-k,body .plans .plan-row .pl-get .pl-k{margin-bottom:9px!important}
  body .plans .plan .pl-out{margin-top:27px!important}
  body .plans .plan-row .pr-price{margin-top:27px!important}
  body .plans .plan-row .pr-price span{margin-bottom:13px!important}
}


/* "Integrated team" price on phones: one row like the plan cards — label left, value right, hairline above */
@media (max-width:600px){
  body .plans .plan-row .pr-price{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:baseline!important;width:100%;border-top:1px solid #e3e3e3!important;padding-top:24px!important}
  body .plans .plan-row .pr-price span{margin-bottom:0!important}
}


/* hero cards: 16px between cards (was 8) */
body .hero .cards{column-gap:16px!important}body .hero .cards .card + .card{margin-top:0}
@media (max-width:600px){body .hero .cards{row-gap:12px!important}body .hero .cards .cards-lab{margin-bottom:-4px!important}}


/* hero: "where it blows." on a solid violet block (#6054ff, same as the quote highlights) */
.hero .h1 .h1-hl{position:relative;display:inline-block;white-space:nowrap;padding:0 .1em .02em;margin:0 -.02em;color:#fff}
.hero .h1 .h1-hl .h-word{position:relative;z-index:1}
.hero .h1 .h1-hl::before{content:"";position:absolute;inset:.08em 0 .02em;background:#6054ff;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out) .75s}
.hero .h1.in .h1-hl::before,html:not(.js) .hero .h1 .h1-hl::before{transform:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.hero .h1 .h1-hl::before{transition:none;transform:none}}


/* believe on phones/tablets: step statement centred, in two balanced lines */
@media (max-width:900px){body .believe .steps .sl .sl-t{display:block;max-width:17em!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;text-wrap:balance}body .believe .steps .sl{align-items:center!important;text-align:center!important}}


/* key words in quotes (case + modals): the same soft violet block as the hero highlight, instead of the pixel underline */


/* solutions plan titles on phones: bigger, fluid */
@media (max-width:600px){body #offering .plans .plan .pl-q{font-size:clamp(26px,calc(6px + 5.6vw),30px)!important;line-height:1.12!important}}


/* logo on phones: same size as on desktop */
@media (max-width:600px){body .logo .logo-svg{height:22px!important}}


/* mobile menu CTA: hugs its content, centred above the email (not stretched) */
body .mnav-foot .mnav-cta{align-self:center!important;width:auto!important;max-width:100%;gap:16px}body .mnav-foot .mnav-cta .mnav-ar{margin-left:16px!important}


/* plans on tablet/desktop: tighter list (12px between items) */
@media (min-width:601px){body .plans .pl-get ul li{padding-top:6px!important;padding-bottom:6px!important}body .plans .pl-get ul{margin-top:-5px!important}}


/* hero wind farm on tablets: sits a little lower, closer to the cards */
@media (min-width:721px){body .hero-bg.fx svg.hero-poster,body .hero-bg svg.hero-poster{transform:translateY(var(--farm-shift,0px))!important}}


/* hero wind farm on desktop: a little lower too */



/* why-us tile labels: no square marker, label in brand orange */
body .path .wl-k::before{content:none!important;display:none!important}body .path .wl-k,body.wd-2 .path .wl-k{color:var(--hot)!important;gap:0!important}


/* final on phones: email line + copy button stay in one row like on desktop */
@media (max-width:520px){
  body .final .mail3{flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:10px!important;text-align:left}
  body .final .mail3 p{font-size:16px!important;white-space:nowrap;flex:none}
  body .final .mail3 .mail-round{flex:none;width:40px!important;height:40px!important}
}
/* final on phones/tablets: more air top and bottom */
@media (max-width:1199px){body .final{padding-top:clamp(80px,12vw,104px)!important;padding-bottom:clamp(72px,11vw,96px)!important}}


/* final on narrow phones (line no longer fits): "Drop us a message at" on top, the email + copy button together on the line below */
@media (max-width:420px){
  body .final .mail3{flex-wrap:wrap!important;row-gap:6px!important;column-gap:12px!important}
  body .final .mail3 p{display:contents}
  body .final .mail3 .m3-t{flex:0 0 100%;text-align:center}
}


/* highlights (hero + quotes): a block of violet pixel squares instead of a flat fill */
:root{--pix-hl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect x='0.8' y='0.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.45'/%3E%3Crect x='6.8' y='0.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.4'/%3E%3Crect x='12.8' y='0.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='18.8' y='0.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.32'/%3E%3Crect x='24.8' y='0.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.45'/%3E%3Crect x='30.8' y='0.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='0.8' y='6.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.5'/%3E%3Crect x='6.8' y='6.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.55'/%3E%3Crect x='12.8' y='6.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.4'/%3E%3Crect x='18.8' y='6.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.5'/%3E%3Crect x='24.8' y='6.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.32'/%3E%3Crect x='30.8' y='6.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='0.8' y='12.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.55'/%3E%3Crect x='6.8' y='12.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.25'/%3E%3Crect x='12.8' y='12.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.32'/%3E%3Crect x='18.8' y='12.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.32'/%3E%3Crect x='24.8' y='12.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.4'/%3E%3Crect x='30.8' y='12.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.5'/%3E%3Crect x='0.8' y='18.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.32'/%3E%3Crect x='6.8' y='18.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.45'/%3E%3Crect x='12.8' y='18.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.5'/%3E%3Crect x='18.8' y='18.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='24.8' y='18.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.45'/%3E%3Crect x='30.8' y='18.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.25'/%3E%3Crect x='0.8' y='24.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='6.8' y='24.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.32'/%3E%3Crect x='12.8' y='24.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.5'/%3E%3Crect x='18.8' y='24.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='24.8' y='24.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.25'/%3E%3Crect x='30.8' y='24.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.32'/%3E%3Crect x='0.8' y='30.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.32'/%3E%3Crect x='6.8' y='30.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.4'/%3E%3Crect x='12.8' y='30.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.32'/%3E%3Crect x='18.8' y='30.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.45'/%3E%3Crect x='24.8' y='30.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.32'/%3E%3Crect x='30.8' y='30.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.45'/%3E%3C/svg%3E")}
.hero .h1 .h1-hl::before{background:var(--pix-hl) 0 0/36px 36px repeat!important;image-rendering:pixelated}


body .case mark.hl,body .c3-quote mark.hl,body .op mark.hl{background:var(--pix-hl) 0 0/36px 36px repeat,#0b0b0b!important;color:#fff!important;padding:0 .1em .02em!important;margin:0 -.02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}


/* one hover for every button: orange buttons light up with the orange glow (never turn black);
   small icon buttons (close, arrows, copy, expand) turn brand orange */
@media (hover:hover){
  body .top .nav .btn:hover,body .op .op-ctas .op-btn:hover,body .op .op-btn.op-face:hover,body .mnav-cta:hover,body .pl-cta--brand:hover,body .final .book3 .b3-btn:hover,body .btn--white:hover,body .btn--outline:hover{background:var(--hot-hi)!important;border-color:var(--hot-hi)!important;color:var(--ink)!important;box-shadow:0 8px 22px var(--hot-glow)!important}
  body .op .op-btn.op-face:hover *,body .op .op-ctas .op-btn:hover *{color:var(--ink)!important}
  body .op .op-close:hover,body .reel-btn:hover,body .case .c3-arr:not(:disabled):hover,body .final .mail-round:hover,body .plans .plan:hover .oc-open,body .plans .plan-row:hover .oc-open,body .plans .oc-open:hover,body .hero .card:hover .cell{background:var(--hot)!important;border-color:var(--hot)!important;color:var(--ink)!important;box-shadow:none!important}
}


/* highlights: pixels gather at the bottom and thin out upwards (lighter than a full block) */
:root{--pix-fade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect x='24.8' y='6.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.22'/%3E%3Crect x='12.8' y='12.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.28'/%3E%3Crect x='18.8' y='18.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.29'/%3E%3Crect x='54.8' y='18.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.30'/%3E%3Crect x='12.8' y='24.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.38'/%3E%3Crect x='12.8' y='30.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.37'/%3E%3Crect x='42.8' y='30.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.41'/%3E%3Crect x='54.8' y='30.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.42'/%3E%3Crect x='60.8' y='30.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.39'/%3E%3Crect x='0.8' y='36.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.46'/%3E%3Crect x='6.8' y='36.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.45'/%3E%3Crect x='12.8' y='36.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.40'/%3E%3Crect x='24.8' y='36.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.43'/%3E%3Crect x='30.8' y='36.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.47'/%3E%3Crect x='42.8' y='36.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.45'/%3E%3Crect x='60.8' y='36.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.40'/%3E%3Crect x='66.8' y='36.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.43'/%3E%3Crect x='0.8' y='42.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.49'/%3E%3Crect x='18.8' y='42.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.46'/%3E%3Crect x='24.8' y='42.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.46'/%3E%3Crect x='30.8' y='42.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.52'/%3E%3Crect x='42.8' y='42.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.47'/%3E%3Crect x='48.8' y='42.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.45'/%3E%3Crect x='54.8' y='42.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.44'/%3E%3Crect x='0.8' y='48.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.56'/%3E%3Crect x='6.8' y='48.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.51'/%3E%3Crect x='24.8' y='48.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.54'/%3E%3Crect x='48.8' y='48.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.53'/%3E%3Crect x='60.8' y='48.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.56'/%3E%3Crect x='66.8' y='48.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.56'/%3E%3Crect x='0.8' y='54.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.59'/%3E%3Crect x='6.8' y='54.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.52'/%3E%3Crect x='12.8' y='54.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.53'/%3E%3Crect x='18.8' y='54.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.59'/%3E%3Crect x='24.8' y='54.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.53'/%3E%3Crect x='30.8' y='54.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.59'/%3E%3Crect x='36.8' y='54.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.54'/%3E%3Crect x='42.8' y='54.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.55'/%3E%3Crect x='48.8' y='54.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.54'/%3E%3Crect x='54.8' y='54.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.50'/%3E%3Crect x='60.8' y='54.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.51'/%3E%3Crect x='66.8' y='54.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.60'/%3E%3Crect x='0.8' y='60.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.63'/%3E%3Crect x='6.8' y='60.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.65'/%3E%3Crect x='12.8' y='60.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.58'/%3E%3Crect x='18.8' y='60.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.62'/%3E%3Crect x='24.8' y='60.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.53'/%3E%3Crect x='36.8' y='60.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.64'/%3E%3Crect x='42.8' y='60.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.55'/%3E%3Crect x='48.8' y='60.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.58'/%3E%3Crect x='54.8' y='60.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.61'/%3E%3Crect x='60.8' y='60.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.62'/%3E%3Crect x='66.8' y='60.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.58'/%3E%3Crect x='0.8' y='66.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.68'/%3E%3Crect x='6.8' y='66.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.61'/%3E%3Crect x='12.8' y='66.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.60'/%3E%3Crect x='18.8' y='66.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.61'/%3E%3Crect x='24.8' y='66.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.61'/%3E%3Crect x='30.8' y='66.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.67'/%3E%3Crect x='36.8' y='66.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.63'/%3E%3Crect x='42.8' y='66.8' width='4.4' height='4.4' fill='%237a6eff' fill-opacity='0.64'/%3E%3Crect x='48.8' y='66.8' width='4.4' height='4.4' fill='%2356aafc' fill-opacity='0.65'/%3E%3Crect x='54.8' y='66.8' width='4.4' height='4.4' fill='%239678ff' fill-opacity='0.65'/%3E%3Crect x='60.8' y='66.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.64'/%3E%3Crect x='66.8' y='66.8' width='4.4' height='4.4' fill='%236054ff' fill-opacity='0.61'/%3E%3C/svg%3E");--pix-fade-q:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Crect x='10.7' y='0.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.37'/%3E%3Crect x='10.7' y='5.7' width='3.6' height='3.6' fill='%237a6eff' fill-opacity='0.44'/%3E%3Crect x='35.7' y='5.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.48'/%3E%3Crect x='45.7' y='5.7' width='3.6' height='3.6' fill='%239678ff' fill-opacity='0.45'/%3E%3Crect x='5.7' y='10.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.56'/%3E%3Crect x='10.7' y='10.7' width='3.6' height='3.6' fill='%239678ff' fill-opacity='0.61'/%3E%3Crect x='15.7' y='10.7' width='3.6' height='3.6' fill='%239678ff' fill-opacity='0.57'/%3E%3Crect x='20.7' y='10.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.55'/%3E%3Crect x='30.7' y='10.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.59'/%3E%3Crect x='40.7' y='10.7' width='3.6' height='3.6' fill='%2356aafc' fill-opacity='0.61'/%3E%3Crect x='45.7' y='10.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.54'/%3E%3Crect x='55.7' y='10.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.58'/%3E%3Crect x='0.7' y='15.7' width='3.6' height='3.6' fill='%239678ff' fill-opacity='0.68'/%3E%3Crect x='5.7' y='15.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.72'/%3E%3Crect x='10.7' y='15.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.65'/%3E%3Crect x='15.7' y='15.7' width='3.6' height='3.6' fill='%2356aafc' fill-opacity='0.63'/%3E%3Crect x='20.7' y='15.7' width='3.6' height='3.6' fill='%237a6eff' fill-opacity='0.70'/%3E%3Crect x='25.7' y='15.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.72'/%3E%3Crect x='30.7' y='15.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.64'/%3E%3Crect x='35.7' y='15.7' width='3.6' height='3.6' fill='%237a6eff' fill-opacity='0.74'/%3E%3Crect x='40.7' y='15.7' width='3.6' height='3.6' fill='%2356aafc' fill-opacity='0.63'/%3E%3Crect x='45.7' y='15.7' width='3.6' height='3.6' fill='%236054ff' fill-opacity='0.69'/%3E%3Crect x='50.7' y='15.7' width='3.6' height='3.6' fill='%2356aafc' fill-opacity='0.64'/%3E%3Crect x='55.7' y='15.7' width='3.6' height='3.6' fill='%2356aafc' fill-opacity='0.74'/%3E%3C/svg%3E")}
.hero .h1 .h1-hl::before{background:var(--pix-fade-q) 0 100%/1.36em .45em repeat-x!important}
body .case mark.hl,body .c3-quote mark.hl,body .op mark.hl{background:var(--pix-fade-q) 0 100%/45px 15px repeat-x!important;color:inherit!important;padding:0 .08em .06em!important}


/* hero highlight on phones: the longer phrase wraps, so the pixel underline sits on the text itself and follows each line */
@media (max-width:520px){.hero .h1 .h1-hl{display:inline!important;white-space:normal!important;padding:0 0 .06em!important;margin:0!important;background:var(--pix-fade-q) 0 100%/1.36em .45em repeat-x;-webkit-box-decoration-break:clone;box-decoration-break:clone}.hero .h1 .h1-hl::before{display:none!important}}


/* glass hover: the button lights up from the inside — a soft white glow fills it from the centre,
   a glossy highlight along the top edge and a thin bright rim, like lit glass */
@media (hover:hover){
  body .top .nav .btn,body .op .op-ctas .op-btn,body .op .op-btn.op-face,body .mnav-cta,body .pl-cta--brand,body .final .book3 .b3-btn,body .btn--brand,body .pa-btn,
  body .op .op-close,body .reel-btn,body .case .c3-arr,body .final .mail-round,body .plans .oc-open,body .hero .card .cell{transition:background-color .35s ease,box-shadow .35s ease,background-image .35s ease,color .2s ease!important}
  body .top .nav .btn:hover,body .op .op-ctas .op-btn:hover,body .op .op-btn.op-face:hover,body .mnav-cta:hover,body .pl-cta--brand:hover,body .final .book3 .b3-btn:hover,body .btn--brand:hover,body .pa-btn:hover,body .plan-ask .pa-btn:hover{
    background-color:var(--hot)!important;
    background-image:radial-gradient(120% 140% at 50% 50%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 48%)!important;
    box-shadow:inset 0 0 18px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.22),0 8px 26px var(--hot-glow)!important;
    border-color:transparent!important;color:var(--ink)!important}
  body .op .op-close:hover,body .reel-btn:hover,body .case .c3-arr:not(:disabled):hover,body .final .mail-round:hover,body .plans .plan:hover .oc-open,body .plans .plan-row:hover .oc-open,body .plans .oc-open:hover,body .hero .card:hover .cell{
    background-color:var(--hot)!important;
    background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%)!important;
    box-shadow:inset 0 0 12px rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(255,255,255,.2)!important;border-color:transparent!important;color:var(--ink)!important}
}


/* plans side by side (901–1023): divider between the two cards like on desktop, no bottom line under the first */
@media (min-width:901px) and (max-width:1023px){body .plans .plan:first-child{border-bottom:0!important;border-radius:9px 0 0 0!important}body .plans .plan + .plan{border-left:1px solid #e3e3e3!important}}


/* glass hover on clickable cards too: the card glows softly from inside with a thin light rim, and its expand icon lights up like the buttons */
@media (hover:hover){
  body.hc-2 .hero .cards .card,body .plans .plan[data-open]{transition:box-shadow .4s ease,background-image .4s ease!important}
  body.hc-2 .hero .cards .card:hover{background-image:radial-gradient(90% 120% at 50% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 48px rgba(255,255,255,.05)!important}
  body .plans .plan[data-open]:hover{background-image:radial-gradient(90% 90% at 50% 0%,rgba(11,11,11,.045),rgba(11,11,11,0) 70%)!important;box-shadow:none!important}
  body.hc-2 .hero .cards .card:hover .bar .cell,body .hero .card:hover .bar .cell{background-color:var(--hot)!important;background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%)!important;box-shadow:inset 0 0 12px rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(255,255,255,.2)!important;color:var(--ink)!important}
}


/* What we believe: prev / next step buttons beside the step squares */
.believe .pp-t{display:flex;align-items:center;gap:16px}
.believe .pp-t .pc-dots{margin-left:0!important;order:3}.believe .pp-t .st-nav{margin-left:auto;order:2}.believe .pp-t .eyebrow{white-space:nowrap}
.st-nav{display:inline-flex;gap:8px}
.st-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background-color .35s ease,box-shadow .35s ease,background-image .35s ease,color .2s ease,opacity .2s ease}
.st-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-btn:disabled{opacity:.3;cursor:default}
@media (hover:hover){.st-btn:not(:disabled):hover{background-color:var(--hot);border-color:transparent;color:var(--ink);background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%);box-shadow:inset 0 0 12px rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.7)}}
@media (max-width:600px){.st-btn{width:36px;height:36px}}


/* What we believe on narrow screens: title left + progress squares in the right corner, step buttons on their own row under the title */
@media (max-width:600px){body .believe .pp-t{flex-wrap:wrap!important;row-gap:14px!important}body .believe .pp-t .pc-dots{order:2!important;margin-left:auto!important}body .believe .pp-t .st-nav{order:3!important;flex:0 0 100%;margin-left:0!important}}

/* Safari: the area behind the toolbars and the overscroll bounce takes the canvas colour; keep it dark like the hero and footer */
html{background:#0b0b0b}
/* hero headline: fixed line breaks in every browser (Firefox balanced the first sentence differently); phones still wrap freely */
@media (min-width:980px){.hero .h1 .h-line{text-wrap:nowrap;white-space:nowrap}}
@media (max-width:600px){.hero .h1 .h1-a{display:inline}.hero .h1 .h1-a2::before{content:' '}.hero .h1 .h1-a2+.h1-b{display:block}}
/* hero lab: clay wind farm (dark) as the hero background — preview only */
.hero-bg.clay > :not(.hero-clay){display:none!important}
.hero-bg.clay canvas.hero-clay{display:block!important;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:#0b0b0b}
.hero-bg.clay::after{content:"";position:absolute;inset:0 0 auto 0;height:48%;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,11,.9) 0%,rgba(11,11,11,.6) 50%,rgba(11,11,11,0) 100%)}
/* hero lab switcher (preview only) */
.hero-sw{position:fixed;z-index:9999;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(22,22,26,.9);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.4);font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.hero-sw span{padding:0 8px 0 10px;color:#9a9ca3}
.hero-sw button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#fff;background:transparent;border:0;border-radius:999px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.hero-sw button:hover{background:rgba(255,255,255,.08)}
.hero-sw button[aria-pressed="true"]{background:#6054ff}
@media (max-width:480px){.hero-sw span{display:none}.hero-sw button{padding:9px 10px}}
/* hero lab C: scroll track — the hero sticks for ~2.6 screens while the scene plays */
.hero-track{position:relative;height:360vh;height:360svh}
.hero-track > .hero.v-scroll{position:sticky;top:0}
.hero.intro [data-anim],.hero.intro .hero-copy::before{visibility:hidden}
.hero.v-scroll [data-anim]{transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1),visibility 0s}
.hero.v-scroll .hero-bg.clay::after{opacity:0;transition:opacity .6s ease}
.hero.v-scroll:not(.intro) .hero-bg.clay::after{opacity:1}
.hero-story{position:absolute;z-index:2;left:0;right:0;top:calc(var(--nav, 64px) + 6vh);display:grid;place-items:center;pointer-events:none;padding-inline:24px}
.hero-story span{grid-area:1/1;font:500 clamp(32px,4.2vw,64px)/1.05 Geist,system-ui,sans-serif;letter-spacing:-.04em;color:#fff;text-align:center;text-wrap:balance;opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hero-story span.on{opacity:1;transform:none}
.hero:not(.intro) .hero-story{display:none}
/* hero lab B story: the turbine stays at the end, the headline is not shown */
.hero.v-noh1 .h1{display:none!important}
.hero.v-noh1 .hero-copy::before,.hero.v-noh1 .hero-bg.clay::after{display:none!important}
/* hero lab C/B story end: sub sits near the top so the scene fills the screen */
.hero.v-noh1:not(.intro) .hero-copy{margin-top:0!important}
.hero.v-noh1 .hero-copy::before{display:none!important}
/* hero lab C (one turbine): huge story words behind the turbine; the fg layer sits over the copy, under the cards */
.hero canvas.hero-fg{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;background:transparent}
.hero.v-big .hero-copy{position:relative;z-index:1}
.hero.v-big .cards,.hero.v-big .cards-lab{position:relative;z-index:3}
.hero.v-big .hero-story{z-index:1;top:calc(var(--nav, 64px) + 4vh)}
.hero.v-big .hero-story span{font-size:clamp(56px,11vw,190px);line-height:.92;letter-spacing:-.055em;max-width:12ch}
.hero.v-big .hero-copy::before,.hero.v-big .hero-bg.clay::after{display:none!important}
/* C end state: the sub line is the only copy, set large and centred where the headline was */
.hero.v-big.v-noh1:not(.intro) .hero-copy{margin-top:0!important}
.hero.v-big .hero-copy .sub,.hero.v-noh1 .hero-copy .sub{font-size:clamp(44px,7.8vw,140px)!important;line-height:.95!important;letter-spacing:-.05em!important;font-weight:500!important;max-width:16ch;margin-inline:auto;color:#fff!important}
/* C end state: the sub line is set exactly like the story captions */
.hero.v-big .hero-copy .sub{font-size:clamp(44px,7.8vw,140px)!important;line-height:.95!important;letter-spacing:-.05em!important;max-width:16ch!important}
/* C: the ground fades to the page black behind the cards so their edges read */
.hero.v-big .hero-bg.clay::before{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.7) 55%,rgba(11,11,11,.92) 100%)}
/* B story: the step captions are set like the end line */
.hero.v-noh1:not(.v-big) .hero-story span{font-size:clamp(44px,7.8vw,140px);line-height:.95;letter-spacing:-.05em;max-width:14ch}
/* partners banner: expand button top-right (→ cal.com), partner tiles on the right; one tile at a time lifts and lights up */
.case .fund2{flex-wrap:wrap;justify-content:flex-start!important;gap:20px clamp(40px,6vw,96px);padding-right:clamp(24px,3vw,48px)!important}
.case .fund2 .f2-copy{flex:0 1 auto;max-width:36em!important}
@media (min-width:1100px){.case .fund2 .f2-copy b{white-space:nowrap}}
.case .fund2 .f2-copy b{display:block}
.fund2 .f2-x{cursor:pointer;font:inherit;position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(24px,3vw,48px);z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:3px;background:#f4f4f4;color:var(--ink);transition:background-color .3s var(--ease-io),color .3s var(--ease-io),border-color .3s var(--ease-io)}
.fund2 .f2-x .xp{width:24px!important;height:24px!important;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.fund2 .f2-x:hover .xp{transform:scale(1.15)}
@media (max-width:600px){.fund2 .f2-x{width:36px;height:36px}}
.fund2 .f2-x:hover,.fund2 .f2-x:focus-visible{background:var(--hot);border-color:var(--hot);color:var(--ink)}
/* row variant: two lines of three tiles; the active one gets a pulsing pixel outline in brand purple */
/* row variant, as on concourse's data card: the tiles ride a flat ring seen edge-on (all of them keep moving, the far side smaller and dimmer) and, one after another, blink; the pixel outline rides the blink */
.fund2 .f2-logos{position:relative;display:block;width:420px;height:88px;flex:0 0 auto;margin:0 56px 0 0;padding:0;list-style:none}

.fund2 .f2-tile .f2-c{display:contents;font-style:normal}
.fund2 .f2-tile{position:relative;display:grid;place-items:center;width:56px;height:56px;padding:4px;border-radius:12px;background:#f4f4f4;color:rgba(11,11,11,.42);font:500 7.5px/1.2 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;text-align:center;transition:transform .5s var(--ease-out),background-color .4s ease,color .4s ease,box-shadow .5s ease}
.fund2 .f2-tile::after{content:"";position:absolute;inset:-5px;border-radius:16px;border:2px dotted #6054ff;opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .5s var(--ease-out)}




@keyframes f2-px-wave{0%,30%{opacity:0}34%,54%{opacity:1}58%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fund2 .f2-tile,.fund2 .f2-tile .f2-c,.fund2 .f2-tile::after{animation:none!important}}
@keyframes f2-px{0%,100%{opacity:1}50%{opacity:.35}}
.fund2 .f2-tile.on{background:#fff;color:var(--ink);transform:translateY(-3px) scale(1.05);box-shadow:0 0 0 1px #eee,0 10px 22px rgba(11,11,11,.1)}
.fund2 .f2-tile.on::after{opacity:1;transform:none}
@media (max-width:900px){.case .fund2{gap:18px}.case .fund2 .f2-copy{flex:0 0 auto;padding-right:40px}.fund2 .f2-logos{margin-right:0}}
@media (max-width:480px){.fund2 .f2-logos{width:100%}}
/* logos: all in colour, the same optical size (wordmarks fill the width, square badges are scaled down) */
.fund2 .f2-tile img{display:block;width:88%;height:54%;object-fit:contain}
.fund2 .f2-tile img[src*="aceon"]{width:66%;height:66%;border-radius:8px}
.fund2 .f2-tile img[src*="usf"]{width:92%}
.fund2 .f2-tile img[src*="tenity"]{width:88%}
.fund2 .f2-tile img[src*="ihub"]{width:54%;height:54%}
.fund2 .f2-tile img[src*="brinc"]{width:78%}
/* short viewports (laptops at 720–780px): the hero still fits one screen */
@media (max-height:800px) and (min-width:700px){
  .hero.v-scroll{padding-top:calc(var(--nav) + 24px)!important;padding-bottom:24px!important}
  .hero.v-scroll .cards{padding-top:28px!important}
  body.hc-2 .hero.v-scroll .cards .card{min-height:0!important;height:auto!important}
  body.hc-2 .hero.v-scroll .cards .card .body{min-height:120px!important}
  .hero.v-noh1 .hero-copy .sub{font-size:clamp(36px,5.2vw,72px)!important}
  .hero.v-noh1:not(.v-big) .hero-story span{font-size:clamp(36px,5.2vw,72px)}
}
/* partners one-pager: blocks keep the other one-pagers' rhythm */
.op #op-partners .op-marquee-k,#op-partners .op-marquee-k{margin-top:0}
/* a divider sets the logo strip apart from the intro, like the one above "how it works" in the other one-pagers */
#op-partners .op-marquee-wrap:not(.v-b){margin-top:clamp(36px,3.5vw,52.75px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid #e3e3e3}
#op-partners .op-vis{margin-top:clamp(36px,3.5vw,52.75px)}
body #op-partners .vis-side{display:grid;grid-template-rows:auto 1fr;gap:12px;align-content:stretch}
#op-partners .op-nums{gap:12px}
#op-partners .op-nums{margin-bottom:0}
body #op-partners .op-team{margin-top:0;display:flex;flex-direction:column;justify-content:center}
/* partners one-pager: grey logo marquee as on rogo.com/customers (monochrome marks, slow endless scroll, soft fade at both edges) */
.op .op-marquee-k br{display:none}
.op .op-marquee-wrap.v-b .op-marquee-k br{display:inline}
.op .op-marquee-k{margin:0 0 20px;text-align:center;font-size:14px;line-height:1.4;color:rgba(11,11,11,.6)}
.op .op-marquee{display:flex;overflow:hidden;margin:0;padding:8px 0;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0),#000 22%,#000 78%,rgba(0,0,0,0));mask-image:linear-gradient(to right,rgba(0,0,0,0),#000 22%,#000 78%,rgba(0,0,0,0))}
.op .op-marquee-track{display:flex;flex:none;align-items:center;gap:56px;margin:0;padding:0 28px;list-style:none;animation:op-marquee 30s linear infinite}
.op .op-marquee-track li{flex:none;display:grid;place-items:center;height:32px}
.op .op-marquee-track img{height:28px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) brightness(.72) contrast(.9) opacity(.5)}
.op .op-marquee-track img[src*="aceon"]{height:34px;border-radius:6px}
.op .op-marquee-track img[src*="usf"]{height:24px}
.op .op-marquee:hover .op-marquee-track{animation-play-state:paused}
@keyframes op-marquee{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.op .op-marquee-track{animation:none}}
/* portrait card: the 3:4 photo shows whole, the left column stretches to match */
body .op .op-vis-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch}
.op .op-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.op .op-nums .vis-stat b{font-size:clamp(36px,4vw,56px);line-height:1;letter-spacing:-.04em}
.op .op-nums .vis-stat.alt{background:#6054ff;color:#fff}
/* the team row: pick a person, the photo and description on the right follow (after the "Built with the people who ran this industry" reference) */
.op .op-team{margin-top:16px;padding:16px 24px;border:1px solid #e3e3e3;border-radius:var(--r);background:#fff}
.op .op-team-k{margin:0 0 18px;text-align:left;font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,11,.55)}
.op .op-team-row{display:flex;gap:16px;justify-content:center}
.op .op-team-row button{flex:none;width:92px;height:92px;padding:0;border:0;border-radius:50%;overflow:hidden;background:#e6e6e6;cursor:pointer;opacity:.55;transform:scale(.92);transition:opacity .3s ease,transform .4s var(--ease-out),box-shadow .3s ease}
.op .op-team-row button img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.15);transform-origin:50% 30%}
.op .op-team-row button:hover{opacity:.85}
.op .op-team-row button[aria-selected="true"]{opacity:1;transform:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hot)}
body .op .op-photo.vis-main{position:relative;margin:0;padding:0;overflow:hidden;min-height:400px;aspect-ratio:auto;background-color:var(--bg,#e9e9e9)!important;transition:background-color .35s ease}
/* the modal portraits are the "fit" stickers: the cut-out outline closes inside the frame */
.op .op-photo img{position:absolute;left:50%;bottom:0;width:auto;height:108%;transform:translateX(-50%);object-fit:contain;transition:opacity .35s ease;z-index:1}
.op .op-photo.swap img{opacity:0}
.op .op-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 24px 20px;color:#fff;background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.85))}
.op .op-photo figcaption{padding-right:120px;text-align:left;z-index:2}
.op .op-photo-nav{position:absolute;right:20px;bottom:20px;z-index:3}
.op .op-photo-nav .st-btn{width:44px;height:44px}
.op .op-photo-nav .st-btn svg{width:20px!important;height:20px!important;margin:0!important}
.op .op-photo figcaption b{display:block;font-size:22px;font-weight:500;letter-spacing:-.02em}
.op .op-photo figcaption span{display:block;margin-top:4px;font:400 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.op .op-photo figcaption p{margin:10px 0 0;max-width:36em;font-size:14px;line-height:1.45;color:rgba(255,255,255,.9)}
@media (max-width:760px){.op .op-logos{grid-template-columns:repeat(3,56px)}body .op .op-vis-p{grid-template-columns:minmax(0,1fr)!important}.op .op-nums{grid-template-columns:1fr}.op .op-team-row{flex-wrap:wrap}.op .op-team-row button{width:60px;height:60px}body .op .op-photo.vis-main{min-height:0;aspect-ratio:3/4}}
/* B → C hero: a longer scroll track for both stories, and the C canvas stacked over B for the crossfade */
.hero-track--bc .hero.intro .hero-story{z-index:3}   /* B → C: the opening captions sit over the close-up turbine */
/* B → C: the header stays out of the way during the opening story and slides in with the headline */
body:has(.hero-track--bc) .top{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease,background-color .35s ease,border-color .35s ease,color .35s ease}
body:has(.hero-track--bc .hero.intro) .top{transform:translateY(-110%);opacity:0}
/* the two cards ride up one after the other once the headline lands */
.hero-track--bc .hero.v-scroll .cards .card{opacity:0;transform:translateY(56px);transition:opacity .7s ease .15s,transform 1.1s cubic-bezier(.2,.8,.2,1) .15s}
.hero-track--bc .hero.v-scroll .cards .card + .card{transition-delay:.3s}
.hero-track--bc .hero.v-scroll:not(.intro) .cards .card{opacity:1;transform:none}
.hero-track--bc .hero.v-scroll .cards-lab{opacity:0;transition:opacity .6s ease .1s}
.hero-track--bc .hero.v-scroll:not(.intro) .cards-lab{opacity:1}
/* captions sit in the middle of the screen while the story plays */
.hero-track--bc .hero .hero-story{top:0!important;bottom:0;align-content:center}
/* B → C: the closing headline, much larger (sized by both width and height so the cards still fit below) */
body .hero-track--bc .hero .hero-copy .sub{font-size:clamp(44px,min(9.6vw,13.5vh),180px)!important;line-height:.94!important;letter-spacing:-.055em!important;max-width:15ch!important;margin-inline:auto!important}
.hero-track.hero-track--bc{height:700vh;height:700svh}
.hero-bg.clay canvas.hero-clay-c{z-index:1;background:transparent}
/* founders banner: title set like the plan cards' question, the card hovers like a plan card, the whole card opens the one-pager */
.case .fund2 .f2-copy b{font:400 clamp(28px,2.65vw,38px)/1.1 var(--sans)!important;letter-spacing:-.03em!important;color:var(--ink);margin-bottom:12px}
.case .fund2 .f2-copy{font-size:16px!important;line-height:1.45!important;color:rgba(11,11,11,.6)!important}
.case .fund2[data-open]{cursor:pointer;transition:box-shadow .4s ease,background-image .4s ease!important}
.case .fund2[data-open]:hover{background-image:radial-gradient(90% 90% at 50% 0%,rgba(11,11,11,.045),rgba(11,11,11,0) 70%)!important}
.case .fund2[data-open]:hover .f2-x,.case .fund2[data-open]:focus-visible .f2-x{background:var(--hot);color:#0b0b0b}
.case .fund2[data-open]:hover .f2-x .xp{transform:scale(1.15)}
@media (hover:none){.case .fund2[data-open]:hover .f2-x{background:#f4f4f4;color:var(--ink)}}
/* ── hover: one system for every button ──
   Fill turns brand orange, type goes ink, and there is a single soft top gloss (lit from above) with a hairline highlight.
   No outer drop glow and no stacked inner glows: the big pills and the small square/round icon buttons all read the same. */
@media (hover:hover){
  body .top .nav .btn:hover,body .op .op-ctas .op-btn:hover,body .op .op-btn.op-face:hover,body .mnav-cta:hover,body .pl-cta--brand:hover,body .final .book3 .b3-btn:hover,body .btn--brand:hover,body .pa-btn:hover,body .plan-ask .pa-btn:hover,body .btn--white:hover,body .btn--outline:hover,
  body .op .op-close:hover,body .reel-btn:hover,body .case .c3-arr:not(:disabled):hover,body .final .mail-round:hover,body .plans .plan:hover .oc-open,body .plans .plan-row:hover .oc-open,body .plans .oc-open:hover,body .hero .card:hover .cell,body.hc-2 .hero .cards .card:hover .bar .cell,body .hero .card:hover .bar .cell,
  body .st-btn:not(:disabled):hover,body .case .fund2[data-open]:hover .f2-x,body .case .fund2[data-open]:focus-visible .f2-x{
    background-color:var(--hot)!important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
    border-color:transparent!important;color:var(--ink)!important}
  body .op .op-btn.op-face:hover *,body .op .op-ctas .op-btn:hover *{color:var(--ink)!important}
  /* clickable cards: only a faint light from the top, and a hairline rim on the dark hero cards */
  body .plans .plan[data-open]:hover,body .case .fund2[data-open]:hover{background-image:linear-gradient(180deg,rgba(11,11,11,.035),rgba(11,11,11,0) 60%)!important;box-shadow:none!important}
  body.hc-2 .hero .cards .card:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
}
/* logo strip, variant B (?logos=b): label on the left, the marquee runs beside it */
.op .op-marquee-wrap.v-b{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px;margin-top:clamp(36px,3.5vw,52.75px);padding:24px 0;border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3}
.op .op-marquee-wrap.v-b .op-marquee-k{margin:0;padding-right:32px;border-right:1px solid var(--hot);text-align:left;font:400 17px/1.3 var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ink);white-space:nowrap}
.op .op-marquee-wrap.v-b .op-marquee{margin:0!important;padding:0}
.op .op-marquee-wrap.v-b .op-marquee-track{gap:48px;padding:0 24px}
@media (max-width:760px){.op .op-marquee-wrap.v-b{grid-template-columns:1fr;gap:12px}.op .op-marquee-wrap.v-b .op-marquee-k{white-space:normal}}
/* partners one-pager: the photo card is a placeholder until the real programme photo arrives; the team row is a plain list */
body .op .op-photo.op-photo-ph{display:grid!important;place-items:center;background-color:#f4f4f4!important;background-image:radial-gradient(rgba(11,11,11,.12) 1px,transparent 1px)!important;background-size:12px 12px!important}



.op .op-photo-ph figcaption{background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.08));color:var(--ink)}
.op .op-photo-ph figcaption span{color:rgba(11,11,11,.6)}
.op .op-team-row .op-team-p{flex:none;width:92px;height:92px;border-radius:50%;overflow:hidden;background:#e6e6e6}
.op .op-team-row .op-team-p img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.15);transform-origin:50% 30%}
@media (max-width:760px){.op .op-team-row .op-team-p{width:60px;height:60px}}
/* partners one-pager: a small gallery of the team at forums and workshops (placeholders until the photos arrive);
   each slide has a caption: title, event + year, one line about what happened */
body .op .op-gallery{display:block!important;padding:0!important}
.op .op-gal-track{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.op .op-gal-item{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s ease}
.op .op-gal-item.is-on{opacity:1}

.op .op-gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 24px 22px;padding-right:120px;color:var(--ink);background:linear-gradient(180deg,rgba(244,244,244,0),rgba(244,244,244,.96) 40%)}
.op .op-gal-item figcaption b{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em}
.op .op-gal-item figcaption span{display:block;margin-top:4px;font:400 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.55)}
.op .op-gal-item figcaption p{margin:0;max-width:34em;font-size:15px;line-height:1.45;color:rgba(11,11,11,.7)}
.op .op-gallery .op-photo-nav .st-btn{border-color:rgba(11,11,11,.14);background:#fff;color:var(--ink)}
.op .op-gal-dots{position:absolute;top:16px;right:20px;display:flex;gap:6px;margin:0;padding:0;list-style:none}
.op .op-gal-dots li{width:6px;height:6px;border-radius:50%;background:rgba(11,11,11,.18)}
.op .op-gal-dots li.is-on{background:var(--hot)}
@media (max-width:760px){.op .op-gal-item figcaption{padding-right:24px;padding-bottom:72px}.op .op-gal-item .op-ph-mark{margin-bottom:140px}}
/* gallery with real photos: full-bleed image, white caption on a dark gradient */
body .op .op-photo .op-gal-item > img{position:absolute;inset:0;left:0;bottom:auto;width:100%;height:100%;transform:none;object-fit:cover;object-position:50% 40%}
body .op .op-photo.op-gallery{background-image:none!important;background-color:#e9e9e9!important}
.op .op-gal-item figcaption{color:#fff;background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.85) 45%)}
.op .op-gal-item figcaption span{color:rgba(255,255,255,.8)}
.op .op-gal-item figcaption p{color:rgba(255,255,255,.9)}
.op .op-gal-dots li{background:rgba(255,255,255,.5)}
.op .op-gal-dots li.is-on{background:#fff}
.op .op-gallery .op-photo-nav .st-btn{border-color:rgba(255,255,255,.3);background:rgba(11,11,11,.35);color:#fff}
/* partners one-pager: three support formats; three partnership offers before the CTA */
#op-partners .op-how-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,3.5vw,52.75px)}
#op-partners .op-offers{margin-top:clamp(48px,5vw,72px)}
#op-partners .op-offers-k{margin:clamp(8px,1vw,16px) 0 clamp(24px,2.6vw,36px);text-align:center;font:400 clamp(26px,2.7vw,35.1px)/1.12 var(--sans);letter-spacing:-.03em;text-transform:none;text-wrap:balance;color:var(--ink)}
#op-partners .op-offers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#op-partners .op-offer{margin:0;padding:24px;border:1px solid #e3e3e3;border-radius:10px;background:#fff}


#op-partners .op-offer h4{margin:16px 0 0;font:400 20px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
#op-partners .op-offer p{margin:8px 0 0;font-size:15px;line-height:1.45;color:rgba(11,11,11,.6)}
@media (max-width:900px){#op-partners .op-how-3{grid-template-columns:1fr 1fr}#op-partners .op-offers-grid{grid-template-columns:1fr}}
@media (max-width:600px){#op-partners .op-how-3{grid-template-columns:1fr}}
/* partners one-pager: one gap between every block (the .op-vis rhythm of the other one-pagers) */
body #op-partners .op-marquee-wrap,body #op-partners .op-how-3,body #op-partners .op-vis,body #op-partners .op-quote,body #op-partners .op-offers{margin-top:clamp(40px,4.6vw,64px)!important}
body #op-partners .op-how-3{padding-top:0!important;border-top:0!important}
body #op-partners .op-end{padding-top:clamp(40px,4.6vw,64px)!important}
@media (max-width:600px){body #op-partners .op-marquee-wrap,body #op-partners .op-how-3,body #op-partners .op-vis,body #op-partners .op-quote,body #op-partners .op-offers{margin-top:32px!important}}
/* offering cards, Stripe-style: illustration on top, mono label, title, text, link */
#op-partners .op-offer{padding:0;overflow:hidden;display:flex;flex-direction:column}
#op-partners .op-offer > p{flex:1 1 auto}
#op-partners .op-offer-vis{aspect-ratio:2/1;display:grid;place-items:center;padding:12px 16px 0;background:#f7f7f7;background-image:radial-gradient(rgba(11,11,11,.1) 1px,transparent 1px);background-size:12px 12px;border-bottom:1px solid #e3e3e3}
#op-partners .op-offer-vis svg{width:100%;height:auto;display:block}
#op-partners .op-offer-vis{position:relative}
#op-partners .op-offer-vis canvas.op-offer-3d{position:absolute;inset:0;width:100%;height:100%;display:none}
#op-partners.of3d .op-offer-vis canvas.op-offer-3d{display:block}
#op-partners.of3d .op-offer-vis svg{visibility:hidden}
#op-partners .op-offer-vis .pv2-lab{font:400 9px var(--mono);fill:#0b0b0b}
#op-partners .op-offer > .op-offer-tag,#op-partners .op-offer > h4,#op-partners .op-offer > p,#op-partners .op-offer > .op-offer-link{margin-left:24px;margin-right:24px}


#op-partners .op-offer > h4{margin-top:20px}
#op-partners .op-offer-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:14px;margin-bottom:24px;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .25s ease}
#op-partners .op-offer-link span{transition:transform .25s ease}
#op-partners .op-offer-link:hover{color:var(--hot)}#op-partners .op-offer-link:hover span{transform:translateX(4px)}

/* every button's hover: flat brand orange, no top gradient and no inner hairline (one look with the liquid-glass brand buttons) */
@media (hover:hover){html body .top .nav .btn:hover,html body .op .op-ctas .op-btn:hover,html body .op .op-btn.op-face:hover,html body .mnav-cta:hover,html body .pl-cta--brand:hover,html body .final .book3 .b3-btn:hover,html body .btn--brand:hover,html body .pa-btn:hover,html body .plan-ask .pa-btn:hover,html body .btn--white:hover,html body .btn--outline:hover,html body .op .op-close:hover,html body .reel-btn:hover,html body .final .mail-round:hover,html body .plans .plan:hover .oc-open,html body .plans .plan-row:hover .oc-open,html body .plans .oc-open:hover,html body .hero .card:hover .cell,html body.hc-2 .hero .cards .card:hover .bar .cell,html body .hero .card:hover .bar .cell,html body .st-btn:not(:disabled):hover,html body .case .fund2[data-open]:hover .f2-x,html body .case .fund2[data-open]:focus-visible .f2-x{background-image:none!important;box-shadow:none!important}}
/* brand buttons ("Talk to Ivan" everywhere): liquid glass in the brand orange (lab/button-hovers.html #3, Apple iOS 26 style).
   Orange glass with a soft highlight, a slow sheen crossing it every few seconds; on hover it swells with a spring, the highlight slides up, the photo grows a touch and the orange glow deepens.
   The fill stays the solid brand orange (no see-through, a thin highlight) so the colour never turns muddy. */
html body .top .nav-cta2.btn--brand,html body .top:not(.stuck) .nav-cta2.btn--brand,html body .top.stuck .nav-cta2.btn--brand,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand,html body .mnav-cta,html body .pa-btn,html body .plan-ask .pa-btn,html body .final .book3 .b3-btn,html body .op .op-btn.op-face,html body .op .op-ctas .op-btn.op-face{position:relative;isolation:isolate;
  background:var(--hot)!important;background-image:none!important;border:1px solid var(--hot)!important;color:var(--ink)!important;
  box-shadow:0 4px 12px rgba(255,86,10,.14)!important;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .5s cubic-bezier(.5,0,.2,1),background-color .3s ease!important}
html body .top .nav-cta2.btn--brand::before,html body .top:not(.stuck) .nav-cta2.btn--brand::before,html body .top.stuck .nav-cta2.btn--brand::before,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand::before,html body .mnav-cta::before,html body .pa-btn::before,html body .plan-ask .pa-btn::before,html body .final .book3 .b3-btn::before,html body .op .op-btn.op-face::before,html body .op .op-ctas .op-btn.op-face::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:none;opacity:0;pointer-events:none;z-index:-1;
  transform-origin:50% 0;transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .4s ease}
html body .top .nav-cta2.btn--brand .av{background:#ddd url("/landing/assets/img/ivan-av.jpg") center/cover no-repeat!important;color:transparent!important}
html body .top .nav-cta2.btn--brand .av,html body .top:not(.stuck) .nav-cta2.btn--brand .av,html body .top.stuck .nav-cta2.btn--brand .av,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand .av,html body .mnav-cta .av,html body .pa-btn .av,html body .plan-ask .pa-btn .av,html body .final .book3 .b3-btn .av,html body .op .op-btn.op-face .av,html body .op .op-ctas .op-btn.op-face .av,html body .top .nav-cta2.btn--brand .avatar,html body .top:not(.stuck) .nav-cta2.btn--brand .avatar,html body .top.stuck .nav-cta2.btn--brand .avatar,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand .avatar,html body .mnav-cta .avatar,html body .pa-btn .avatar,html body .plan-ask .pa-btn .avatar,html body .final .book3 .b3-btn .avatar,html body .op .op-btn.op-face .avatar,html body .op .op-ctas .op-btn.op-face .avatar,html body .top .nav-cta2.btn--brand > img,html body .top:not(.stuck) .nav-cta2.btn--brand > img,html body .top.stuck .nav-cta2.btn--brand > img,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand > img,html body .mnav-cta > img,html body .pa-btn > img,html body .plan-ask .pa-btn > img,html body .final .book3 .b3-btn > img,html body .op .op-btn.op-face > img,html body .op .op-ctas .op-btn.op-face > img{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
@media (hover:hover){
  html body .top .nav-cta2.btn--brand:hover,html body .top:not(.stuck) .nav-cta2.btn--brand:hover,html body .top.stuck .nav-cta2.btn--brand:hover,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand:hover,html body .mnav-cta:hover,html body .pa-btn:hover,html body .plan-ask .pa-btn:hover,html body .final .book3 .b3-btn:hover,html body .op .op-btn.op-face:hover,html body .op .op-ctas .op-btn.op-face:hover{transform:scale(1.06);
    background:var(--hot)!important;background-image:none!important;border-color:var(--hot)!important;color:var(--ink)!important;
    box-shadow:0 6px 16px rgba(255,86,10,.25)!important}
  html body .mnav-cta:hover{transform:scale(1.03)}
  html body .top .nav-cta2.btn--brand:hover::before,html body .top:not(.stuck) .nav-cta2.btn--brand:hover::before,html body .top.stuck .nav-cta2.btn--brand:hover::before,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand:hover::before,html body .mnav-cta:hover::before,html body .pa-btn:hover::before,html body .plan-ask .pa-btn:hover::before,html body .final .book3 .b3-btn:hover::before,html body .op .op-btn.op-face:hover::before,html body .op .op-ctas .op-btn.op-face:hover::before{opacity:0}
  html body .top .nav-cta2.btn--brand:hover .av,html body .top:not(.stuck) .nav-cta2.btn--brand:hover .av,html body .top.stuck .nav-cta2.btn--brand:hover .av,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand:hover .av,html body .mnav-cta:hover .av,html body .pa-btn:hover .av,html body .plan-ask .pa-btn:hover .av,html body .final .book3 .b3-btn:hover .av,html body .op .op-btn.op-face:hover .av,html body .op .op-ctas .op-btn.op-face:hover .av,html body .top .nav-cta2.btn--brand:hover .avatar,html body .top:not(.stuck) .nav-cta2.btn--brand:hover .avatar,html body .top.stuck .nav-cta2.btn--brand:hover .avatar,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand:hover .avatar,html body .mnav-cta:hover .avatar,html body .pa-btn:hover .avatar,html body .plan-ask .pa-btn:hover .avatar,html body .final .book3 .b3-btn:hover .avatar,html body .op .op-btn.op-face:hover .avatar,html body .op .op-ctas .op-btn.op-face:hover .avatar,html body .top .nav-cta2.btn--brand:hover > img,html body .top:not(.stuck) .nav-cta2.btn--brand:hover > img,html body .top.stuck .nav-cta2.btn--brand:hover > img,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand:hover > img,html body .mnav-cta:hover > img,html body .pa-btn:hover > img,html body .plan-ask .pa-btn:hover > img,html body .final .book3 .b3-btn:hover > img,html body .op .op-btn.op-face:hover > img,html body .op .op-ctas .op-btn.op-face:hover > img{transform:scale(1.1)}
}
/* idle sheen (lab/glass-effects.html #9): every few seconds a slow highlight crosses the button, left to right */
html body .top .nav-cta2.btn--brand::after,html body .top:not(.stuck) .nav-cta2.btn--brand::after,html body .top.stuck .nav-cta2.btn--brand::after,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand::after,html body .mnav-cta::after,html body .pa-btn::after,html body .plan-ask .pa-btn::after,html body .final .book3 .b3-btn::after,html body .op .op-btn.op-face::after,html body .op .op-ctas .op-btn.op-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 58%) 100% 0/300% 100% no-repeat;animation:btn-sheen 4.5s cubic-bezier(.5,0,.2,1) infinite}
@keyframes btn-sheen{0%,62%{background-position:100% 0}100%{background-position:0% 0}}
@media (prefers-reduced-motion:reduce){html body .top .nav-cta2.btn--brand::after,html body .top:not(.stuck) .nav-cta2.btn--brand::after,html body .top.stuck .nav-cta2.btn--brand::after,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand::after,html body .mnav-cta::after,html body .pa-btn::after,html body .plan-ask .pa-btn::after,html body .final .book3 .b3-btn::after,html body .op .op-btn.op-face::after,html body .op .op-ctas .op-btn.op-face::after{animation:none!important;opacity:0}html body .top .nav-cta2.btn--brand,html body .top:not(.stuck) .nav-cta2.btn--brand,html body .top.stuck .nav-cta2.btn--brand,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand,html body .mnav-cta,html body .pa-btn,html body .plan-ask .pa-btn,html body .final .book3 .b3-btn,html body .op .op-btn.op-face,html body .op .op-ctas .op-btn.op-face,html body .top .nav-cta2.btn--brand::before,html body .top:not(.stuck) .nav-cta2.btn--brand::before,html body .top.stuck .nav-cta2.btn--brand::before,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand::before,html body .mnav-cta::before,html body .pa-btn::before,html body .plan-ask .pa-btn::before,html body .final .book3 .b3-btn::before,html body .op .op-btn.op-face::before,html body .op .op-ctas .op-btn.op-face::before{transition:none!important;animation:none!important}html body .top .nav-cta2.btn--brand:hover,html body .top:not(.stuck) .nav-cta2.btn--brand:hover,html body .top.stuck .nav-cta2.btn--brand:hover,html body .top.stuck:not(.on-dark) .nav-cta2.btn--brand:hover,html body .mnav-cta:hover,html body .pa-btn:hover,html body .plan-ask .pa-btn:hover,html body .final .book3 .b3-btn:hover,html body .op .op-btn.op-face:hover,html body .op .op-ctas .op-btn.op-face:hover{transform:none!important}}

/* hero card expand buttons (the white squares): same treatment as the brand buttons — flat brand colour (no inner line, no top gradient), a spring swell on hover
   and the idle sheen (faint orange on white at rest, white once the square turns orange) */
html body .hero .card .cell{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.3,1.4,.5,1),background-color .35s ease,box-shadow .35s ease!important}
html body .hero .card .cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(100deg,rgba(255,86,10,0) 40%,rgba(255,86,10,.22) 50%,rgba(255,86,10,0) 60%) 100% 0/300% 100% no-repeat;animation:btn-sheen 4.5s cubic-bezier(.5,0,.2,1) infinite}
html body .hero .card .cell::before{content:none!important}
@media (hover:hover){
  html body .hero .card:hover .cell,html body .hero .card:focus-visible .cell,html body.hc-2 .hero .cards .card:hover .bar .cell,html body.hc-2 .hero .cards .card:focus-visible .bar .cell{transform:scale(1.08);background-color:var(--hot)!important;background-image:none!important;
    box-shadow:0 4px 12px rgba(255,86,10,.25)!important}
  html body .hero .card:hover .cell::after,html body .hero .card:focus-visible .cell::after{background-image:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60%)}
}
@media (prefers-reduced-motion:reduce){html body .hero .card .cell::after{animation:none!important;opacity:0}html body .hero .card .cell{transition:none!important}}

/* plan cards' square open buttons: same as the hero card squares — spring swell and the idle sheen */
html body .plans .oc-open{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.3,1.4,.5,1),background-color .35s ease,box-shadow .35s ease!important}
html body .plans .oc-open::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(100deg,rgba(255,86,10,0) 40%,rgba(255,86,10,.22) 50%,rgba(255,86,10,0) 60%) 100% 0/300% 100% no-repeat;animation:btn-sheen 4.5s cubic-bezier(.5,0,.2,1) infinite}
@media (hover:hover){
  html body .plans .plan:hover .oc-open,html body .plans .plan-row:hover .oc-open,html body .plans .oc-open:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(255,86,10,.25)!important}
  html body .plans .plan:hover .oc-open::after,html body .plans .plan-row:hover .oc-open::after,html body .plans .oc-open:hover::after{background-image:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60%)}
}
@media (prefers-reduced-motion:reduce){html body .plans .oc-open::after{animation:none!important;opacity:0}html body .plans .oc-open{transition:none!important}}

/* partners modal: "Trusted by…" and "Partnership offering" read like the page's section labels (■ orange square + mono caps, as "Why founders build it with us") */
html body #op-partners .op-marquee-wrap .op-marquee-k,html body #op-partners .op-marquee-wrap.v-b .op-marquee-k,html body #op-partners .op-offers-k{
  display:block!important;text-align:center!important;width:auto;padding:0!important;border:0!important;white-space:normal!important;
  font:400 14px/16.8px var(--mono)!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:var(--ink)!important;text-wrap:balance}
html body #op-partners .op-marquee-wrap .op-marquee-k br{display:none!important}
html body #op-partners .op-offers-k::before{content:"";display:inline-block;width:8px;height:8px;margin:0 12px 0 0;vertical-align:.12em;background:var(--hot)}
html body #op-partners .op-marquee-wrap .op-marquee-k,html body #op-partners .op-marquee-wrap.v-b .op-marquee-k{margin:0 0 20px!important;font:400 12px/1.4 var(--mono)!important;letter-spacing:.06em!important;color:rgba(11,11,11,.7)!important}
html body #op-partners .op-offers-k{margin:0 0 24px!important}

/* partners banner, "stars" variant (after Sanity's All-stars block): copy on top (open button in the corner), then a mono label over all six logos in one row.
   The grid sits on the site's pixel halftone (2 px squares on a 6 px grid, loose clusters) mixed with shades of the brand orange and violet;
   the white cells leave patterned rules between them. Logos are black, in colour on hover. */
.case .fund2.starsv{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(24px,2.6vw,36px)}
.case .fund2.starsv .f2-copy{max-width:34em;padding-right:56px}
.case .fund2.starsv .f2-stars{grid-column:1;grid-row:auto;margin:0}
.case .fund2.starsv .f2-k{margin:0 0 12px 2px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.7)}
.case .fund2.starsv .f2-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;width:auto;height:auto;margin:0;padding:9px;
  background:url("/landing/assets/img/halftone-brand-tile.svg?v=10") 0 0/96px 96px repeat}
.case .fund2.starsv .f2-tile{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;margin:0;width:auto;height:clamp(76px,7vw,100px);border-radius:10px;padding:0 12%;
  background:#f5f5f5;box-shadow:0 1px 2px rgba(11,11,11,.03),0 4px 10px rgba(11,11,11,.03)!important;border:0;box-sizing:border-box;display:grid;place-items:center}
.case .fund2.starsv .f2-tile::after{display:none}
.case .fund2.starsv .f2-tile .f2-c{position:absolute;inset:0;display:flex!important;align-items:center;justify-content:center;width:auto;height:auto;padding:0 12%;box-sizing:border-box}
.case .fund2.starsv .f2-tile .f2-c img{flex:0 0 auto;margin:0}
.case .fund2.starsv .f2-tile img{width:100%;height:42%;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.88;transition:filter .35s ease,opacity .35s ease}
.case .fund2.starsv .f2-tile img[src*="aceon"]{width:auto;height:54%;border-radius:4px;filter:grayscale(1) contrast(1.15)}
.case .fund2.starsv .f2-tile img[src*="ihub"]{height:54%}
.case .fund2.starsv .f2-tile img[src*="usf"]{height:46%}
@media (hover:hover){.case .fund2.starsv .f2-tile:hover img{filter:none;opacity:1}}
@media (max-width:900px){.case .fund2.starsv .f2-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.case .fund2.starsv .f2-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* partners banner, stars grid: the pixel field fades out in loose squares at its edges (like the quote underline), not a straight cut; the tiles stay whole */
.case .fund2.starsv .f2-logos{background:none!important}
.case .fund2.starsv .f2-logos::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/landing/assets/img/halftone-brand-tile.svg?v=10") 0 0/96px 96px repeat;
  -webkit-mask:linear-gradient(#000,#000) center/calc(100% - 20px) calc(100% - 20px) no-repeat,url("/landing/assets/img/halftone-edge-mask.svg?v=2") 0 0/96px 96px repeat;
          mask:linear-gradient(#000,#000) center/calc(100% - 20px) calc(100% - 20px) no-repeat,url("/landing/assets/img/halftone-edge-mask.svg?v=2") 0 0/96px 96px repeat;}
.case .fund2.starsv .f2-tile{z-index:1;background:#fff!important}
.case .fund2.starsv .f2-logos::before{opacity:.6}
/* the field reaches past the grid: solid under the tiles, then loose squares thinning out (mask built by script to the grid's size) */
.case .fund2.starsv .f2-logos::before{top:0;left:var(--f2l,-24px);right:var(--f2r,-24px);bottom:var(--f2b,-24px);background-position:0 0;-webkit-mask:var(--f2m,none) 0 0/100% 100% no-repeat;mask:var(--f2m,none) 0 0/100% 100% no-repeat}


/* partners banner, stars grid: a soft violet container instead of the pixel field (as in the integrations card reference); white tiles with hairline borders */
.case .fund2.starsv .f2-logos::before{display:none!important}
.case .fund2.starsv .f2-logos{padding:12px!important;gap:10px!important;border-radius:12px;background:url("/landing/assets/img/halftone-grey-tile.svg?v=1") 0 0/96px 96px repeat,linear-gradient(180deg,#f6f6f6 0%,#f1f1f1 100%)!important;box-shadow:inset 0 0 0 1px #e3e3e3}
.case .fund2.starsv .f2-tile{background:#fff!important;border:1px solid #e6e6e6!important;border-radius:8px!important;box-shadow:0 1px 2px rgba(11,11,11,.04)!important}

/* partners modal, logos variant B: the label sits in two lines next to the strip */
html body #op-partners .op-marquee-wrap.v-b .op-marquee-k br{display:inline!important}
html body #op-partners .op-marquee-wrap.v-b .op-marquee-k{white-space:nowrap!important;text-align:left!important;align-self:center!important;margin:0!important}

/* partners: placeholder wordmark for IdeasLab sit at the same optical size as the other logos */
.fund2 .f2-tile img[src*="ideaslab"]{width:80%}
.case .fund2.starsv .f2-tile img[src*="brinc"]{height:40%}
/* partners modal gallery: short captions set large, like a story card title (rogo.com customers) */
body .op .op-gal-item figcaption{padding:clamp(28px,3vw,40px) 128px clamp(24px,2.6vw,32px) clamp(24px,2.6vw,32px)!important;background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.72) 60%)!important}
body .op .op-gal-item figcaption p{max-width:12em!important;font:400 clamp(24px,2.4vw,34px)/1.1 var(--sans)!important;letter-spacing:-.03em!important;color:#fff!important;text-wrap:balance}
@media (max-width:760px){body .op .op-gal-item figcaption{padding-right:24px!important;padding-bottom:84px!important}}

/* partners modal gallery, rogo.com card: photo on top down to a hairline, a light panel below with the caption set large, round grey arrows at the bottom left */
body .op .op-photo.op-gallery{background-color:#f4f4f4!important;border:1px solid #e3e3e3!important}
body .op .op-photo .op-gal-item > img{height:58%!important;bottom:auto!important}
body .op .op-gal-item figcaption{top:58%!important;bottom:0!important;display:flex;align-items:flex-start;padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,32px) 0!important;background:#f4f4f4!important;border-top:1px solid #e3e3e3;color:var(--ink)!important}
body .op .op-gal-item figcaption p{max-width:14em!important;font:400 clamp(22px,2.2vw,30px)/1.12 var(--sans)!important;letter-spacing:-.03em!important;color:var(--ink)!important}
body .op .op-gallery .op-photo-nav{left:clamp(20px,2.4vw,32px);right:auto;bottom:clamp(20px,2.2vw,28px);display:flex;gap:8px}
body .op .op-gallery .op-photo-nav .st-btn{width:44px;height:44px;border-radius:50%;border:0!important;background:#e6e6e6!important;color:var(--ink)!important;box-shadow:none!important}
body .op .op-gal-dots{top:16px;right:16px}
@media (max-width:760px){body .op .op-gal-item figcaption{padding-bottom:84px!important}}

@media (hover:hover){body .op .op-gallery .op-photo-nav .st-btn:hover{background-color:var(--hot)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;color:var(--ink)!important}}
body .op .op-gallery .op-photo-nav .st-btn{transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}

/* partners modal, team + photo block: nothing in the left column may run under the photo. Avatars shrink with the column, stat captions wrap,
   and below 900 px the photo moves under the cards */
body #op-partners .vis-side,body #op-partners .op-nums,body #op-partners .op-team{min-width:0}
body #op-partners .op-nums .vis-stat{min-width:0;overflow:hidden}
body #op-partners .op-nums .vis-stat span{display:block!important;max-width:100%;overflow-wrap:anywhere}
body #op-partners .op-team-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,92px));gap:clamp(8px,1.2vw,16px)!important;justify-content:start}
body #op-partners .op-team-row .op-team-p{width:100%!important;height:auto!important;aspect-ratio:1/1}
@media (max-width:900px){
  body .op .op-vis-p{grid-template-columns:minmax(0,1fr)!important}
  body #op-partners .op-photo.op-gallery{min-height:0!important;height:auto!important;aspect-ratio:4/3.4}
}
@media (max-width:600px){body #op-partners .op-photo.op-gallery{aspect-ratio:4/5}}

/* partners gallery: the caption panel is only as tall as a two-line caption plus the arrows; the photo takes the rest */
body #op-partners .op-gallery{--cap:clamp(150px,38%,176px)}
body #op-partners .op-photo .op-gal-item > img{height:calc(100% - var(--cap))!important}
body #op-partners .op-gal-item figcaption{top:calc(100% - var(--cap))!important}
@media (max-width:900px){body #op-partners .op-photo.op-gallery{aspect-ratio:2/1;width:100%!important;max-width:none!important;max-height:none!important}}
@media (max-width:600px){body #op-partners .op-photo.op-gallery{aspect-ratio:1/1.12}body #op-partners .op-gal-item figcaption{padding-bottom:0!important}}

/* partnership offering, one column on tablets: each card turns sideways (illustration left, text right) so it stays a normal card height */
@media (min-width:601px) and (max-width:900px){
  #op-partners .op-offer{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start}
  #op-partners .op-offer > .op-offer-vis{grid-column:1;grid-row:1 / -1;aspect-ratio:auto;height:100%;min-height:200px;border-bottom:0;border-right:1px solid #e3e3e3;padding:12px}
  #op-partners .op-offer > h4,#op-partners .op-offer > p,#op-partners .op-offer > .op-offer-link{grid-column:2}
  #op-partners .op-offer > h4{margin-top:24px}
  #op-partners .op-offer > .op-offer-link{align-self:end;justify-self:start}
}

/* PV / SV modal visuals in the offer cards' clay style: the dotted light card ground, no island */
body .op .vis-main.clay3d{background:#f7f7f7!important;background-image:radial-gradient(rgba(11,11,11,.1) 1px,transparent 1px)!important;background-size:12px 12px!important}

body .op .vis-main.clay3d canvas.vis3d{bottom:64px!important;height:calc(100% - 64px)!important}

@media (min-width:601px) and (max-width:900px){body #op-partners .op-team-row{grid-template-columns:repeat(4,minmax(0,72px))!important;gap:12px!important}}

/* PV clay scene runs a 10 s loop (the founder scores four turbines, GO after the fourth) */
body #op-pv .vis-main.clay3d .pv2-go rect{animation:pv2-go10 10s ease infinite}body #op-pv .vis-main.clay3d .pv2-go text{animation:pv2-got10 10s ease infinite}
@keyframes pv2-go10{0%,78%{fill:#fff;stroke:#0b0b0b}82%,90%{fill:var(--hot);stroke:var(--hot)}95%,100%{fill:#fff;stroke:#0b0b0b}}
@keyframes pv2-got10{0%,78%{fill:rgba(11,11,11,.6)}82%,90%{fill:#0b0b0b}95%,100%{fill:rgba(11,11,11,.6)}}


/* partners gallery, rogo.com proportions: photo the top half, the caption panel the bottom half; smaller round arrows */
body #op-partners .op-gallery{--cap:50%}
body #op-partners .op-gal-item figcaption{padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) 0!important}
body #op-partners .op-gal-item figcaption p{font-size:clamp(20px,1.9vw,26px)!important;line-height:1.15!important}
body #op-partners .op-gallery .op-photo-nav{left:clamp(22px,2.4vw,30px)!important;bottom:clamp(22px,2.4vw,30px)!important;gap:6px!important}
body #op-partners .op-gallery .op-photo-nav .st-btn{width:40px!important;height:40px!important}
body #op-partners .op-gallery .op-photo-nav .st-btn svg{width:18px!important;height:18px!important}
@media (max-width:600px){body #op-partners .op-gallery{--cap:max(46%,168px)}}

/* partners stats: number and caption start at the same line in both cards, whatever the caption length */
body #op-partners .op-nums .vis-stat{justify-content:flex-start!important;padding-top:clamp(24px,2.6vw,36px)!important}

/* language switcher: EN / DE / FR, last item of the nav links (a hairline before it); in the mobile menu under the e-mail */

.lang-sw{display:flex;gap:2px}
.lang-sw .lang-a{display:flex;align-items:center;height:35px;padding:0 8px;border-radius:999px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:inherit;opacity:.5;text-decoration:none;transition:opacity .2s ease,background-color .2s ease}
.lang-sw .lang-a:hover{opacity:1;background:rgba(11,11,11,.06)}
.lang-sw .lang-a[aria-current="true"]{opacity:1}

.lang-sw--m{gap:6px}.lang-sw--m .lang-a{height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.18);font-size:13px;color:#fff}
.lang-sw--m .lang-a[aria-current="true"]{background:#fff;color:#0b0b0b;border-color:#fff}

/* nav links stay on one line in every language */
.nav-links a{white-space:nowrap}

/* What we believe, desktop: on short screens the step titles scale with the window height, so four steps always fit the pinned stage (also for longer DE / FR copy) */
@media (min-width:901px){body .believe .story-pin .sl-t{font-size:min(clamp(22px,13px + 1.7vw,36px),3.9vh)!important;font-size:min(clamp(22px,13px + 1.7vw,36px),3.9svh)!important}}

/* hero final line: as big as the screen allows (set by script: the largest size at which the hero still fits the window, three lines at most) */
body .hero-track--bc .hero .hero-copy .sub{font-size:var(--sub-fs,clamp(44px,min(9.6vw,13.5vh),180px))!important;max-width:88%!important;margin-inline:auto!important;text-wrap:balance}   /* 88 %: the line never runs edge to edge; long copy (FR, DE) goes to three lines */

/* the preview variant bar is empty now (hero, logos and founders variants all decided): hide it */
.hero-sw:empty{display:none!important}

@media (max-width:699px){body .hero-track--bc .hero .hero-copy .sub{max-width:100%!important}}

/* translations keep the English size; a wider measure keeps them to fewer lines, and the line never touches the cards */
@media (min-width:700px){html:not([lang="en"]) body .hero-track--bc .hero .hero-copy .sub{max-width:96%!important}}
body .hero-track--bc .hero .hero-copy .sub{margin-bottom:20px!important}
@media (min-width:700px){html body .hero-track--bc .hero[data-measuring] .hero-copy .sub{max-width:88%!important}}   /* measure at the English width */

/* ?og=1: a clean final hero frame for the social share image (1200×630): logo only, no nav, no cards, no lab UI */
html.og-shot .top{transform:none!important;opacity:1!important}
html.og-shot .nav-links,html.og-shot .nav-cta2,html.og-shot .burger,html.og-shot .hero .cards,html.og-shot .hero .cards-lab,html.og-shot .hero-sw{display:none!important}
html.og-shot ::-webkit-scrollbar{display:none}




/* share image: optical centring of the headline (glyphs sit low in their line boxes) */
html.og-shot .hero-copy{position:absolute!important;left:0;right:0;top:50%;margin:0!important;transform:translateY(calc(-50% + 12px))!important}   /* centred between the header and the bottom edge */
html.og-shot .hero-copy .sub{margin-top:0!important;margin-bottom:0!important}

/* share image: no hairline under the header band */
html.og-shot body .top,html.og-shot body .top.stuck,html.og-shot body .top.stuck.on-dark{border-bottom:0!important;border-bottom-color:transparent!important;box-shadow:none!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.og-shot body .top::before,html.og-shot body .top::after{display:none!important}

/* "Talk to Ivan" buttons: the label stays on one line (a script shrinks it a little when a translation is too long) */
.plan-ask .pa-btn{white-space:nowrap}

/* share image: bring the scene a little closer so the turbine reads as large as on the site, the headline keeps the site's size */
html.og-shot .hero-bg,html.og-shot .hero-fg{transform:scale(1.25)!important;transform-origin:46% 84%!important}

/* phones: long translations must not push things off screen */
@media (max-width:760px){html body #op-partners .op-marquee-wrap.v-b .op-marquee-k{white-space:normal!important}html body #op-partners .op-marquee-wrap.v-b .op-marquee-k br{display:none!important}}
@media (max-width:400px){html[lang="de"] .top .nav-cta2 .av{display:none!important}html[lang="de"] .top .nav-cta2{padding-left:14px!important;padding-right:14px!important}html[lang="de"] .top .nav-cta2 .roll,html[lang="de"] .top .nav-cta2 .roll span{font-size:12px!important;letter-spacing:.02em!important}}

/* typography rule: never a single word (or sign) alone on the last line. Running text re-flows "pretty", headings balance */
:where(p,li,blockquote,figcaption,dd,small,label,td,th,.sl-t,.op-lead,.card-reveal p){text-wrap:pretty}
:where(h1,h2,h3,h4,h5,.h1,.h3){text-wrap:balance}

/* partners modal: when the logo strip drops under its label (phones), the label centres over it */
@media (max-width:760px){html body #op-partners .op-marquee-wrap.v-b .op-marquee-k{text-align:center!important;margin-inline:auto!important}}

/* partners modal, phones: more air between the photo card and the "Partnership offering" label */
@media (max-width:600px){body #op-partners .op-offers{margin-top:48px!important}}

/* mobile menu: the language switcher sits right under the menu links */
.mnav-in{justify-content:flex-start!important}.mnav-in > .lang-sw--m{margin:24px 0 0}.mnav-in > .mnav-foot{margin-top:auto!important}

/* floating video card, bottom right, in the hero cards' language: dark card, mono label + white expand square (orange on hover), the clip, the title */
.fv{position:fixed;right:24px;bottom:24px;z-index:40;width:248px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.fv.on{opacity:1;transform:none;pointer-events:auto}
.fv-open{display:block;width:100%;margin:0;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#1b1b1b;box-shadow:0 16px 40px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18);text-align:left;cursor:pointer;color:#fff;font:inherit;transition:background-color .25s ease}
.fv-open:hover{background:#222}

.fv-k{font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.fv-cell{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:3px;background:#fff;color:var(--ink);transition:background-color .2s ease,box-shadow .2s ease}
.fv-cell svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.fv-open:hover .fv-cell{background-color:var(--hot);background-image:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}}
.fv-media{display:block;margin-top:12px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0b0b0b}
.fv-loop{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.fv-cap{display:block;margin-top:12px;font:400 16px/1.2 var(--sans);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.fv-x{position:absolute;top:-12px;right:-12px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #e3e3e3;border-radius:6px;background:#fff;color:var(--ink);font:300 22px/1 var(--sans);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:background-color .2s ease}
@media (hover:hover){.fv-x:hover{background-color:var(--hot);border-color:transparent}}
@media (max-width:640px){.fv{display:none!important}}
html.og-shot .fv{display:none!important}
.fv-modal{padding:0;border:0;background:transparent;max-width:min(92vw,1100px);width:100%;overflow:visible}
.fv-modal::backdrop{background:rgba(11,11,11,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fv-modal-in{position:relative}
.fv-full{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.fv-modal-x{position:absolute;top:-16px;right:-16px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #e3e3e3;border-radius:6px;background:#fff;color:#0b0b0b;font:300 28px/1 var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media (hover:hover){.fv-modal-x:hover{background-color:var(--hot);border-color:transparent}}
.fv-full{border-radius:10px!important}
@media (max-width:600px){.fv-modal-x{top:-48px;right:0}}

/* floating video: label on top, the expand square sits at the bottom right, level with the title */
.fv-k{display:block}
.fv-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
.fv-foot .fv-cap{margin-top:0}

/* hero on phones: the sticky hero follows the visible viewport (dvh), so no empty strip shows under it when the browser bar hides; the track behind it is dark, never white */
.hero-track{background:#0b0b0b}
@supports (height:100dvh){@media (max-width:1199px){body .hero-track > .hero.v-scroll{min-height:100dvh!important}}}
/* overscroll / rubber-band areas above the hero and below the footer are dark like both ends of the page (the white body still fills the page itself) */
html{background:#0b0b0b}

/* language: a small dropdown right beside the CTA (desktop); phones keep the row in the menu */
.top .nav > .nav-end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-end > .btn{margin-left:0!important}
.nav .lang-dd{position:relative;display:flex;align-items:center}
.lang-btn{display:flex;align-items:center;gap:6px;height:35px;padding:0 10px 0 12px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent);border-radius:999px;background:transparent;color:inherit;font:400 12px/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.lang-btn:hover,.lang-dd.open .lang-btn{background:color-mix(in srgb,currentColor 8%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent)}
.lang-btn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.lang-dd.open .lang-btn svg{transform:rotate(180deg)}
.lang-btn .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav .lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:flex;flex-direction:column;gap:2px;min-width:168px;padding:6px;border-radius:10px;background:#1b1b1b;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.lang-dd.open .lang-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
.nav .lang-menu .lang-a{display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:6px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:#fff;opacity:.62;text-decoration:none}
.nav .lang-menu .lang-a:hover,.nav .lang-menu .lang-a:focus-visible{opacity:1;background:rgba(255,255,255,.08)}
.nav .lang-menu .lang-a[aria-current="true"]{opacity:1}
.nav .lang-menu .lang-a[aria-current="true"]::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:1px;background:var(--hot)}
.lang-n{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;opacity:.9}
.lang-sw--m .lang-n{display:none}
@media (max-width:720px){.nav .lang-dd{display:none}.top .nav > .nav-end{grid-column:2}}

/* modal ask on tablets (DE/FR copy is longer): when photo + question + button no longer fit, the button drops to its own full-width row */
@media (min-width:601px) and (max-width:1199px){
  body .op .plan-ask.ask-pill.op-ask{display:flex!important;flex-wrap:wrap!important;max-width:100%;box-sizing:border-box;row-gap:12px!important}
  body .op .plan-ask.ask-pill.op-ask .pa-q{flex:999 1 240px!important;min-width:0;white-space:normal!important}
  body .op .plan-ask.ask-pill.op-ask .pa-btn{flex:1 0 auto!important;justify-content:center!important}
}

/* tablets where the links, language and CTA don't fit in one row (longer DE/FR labels): the links move into the burger menu, as on phones */
html.nav-tight .top .nav{grid-template-columns:1fr auto auto!important;column-gap:8px}
html.nav-tight .top .nav .nav-links{display:none}
html.nav-tight .top .nav > .nav-end{grid-column:2}
html.nav-tight .burger{display:grid;place-content:center;gap:6px;width:46px;height:46px;padding:0;border:0;border-radius:999px;background:rgba(11,11,11,.06);color:inherit;cursor:pointer;grid-column:3}
html.nav-tight .top:not(.stuck) .burger,html.nav-tight .top.on-dark .burger,html.nav-tight.mnav-open .burger{background:rgba(255,255,255,.12)}
html.nav-tight .burger i{display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .3s ease}
html.nav-tight.mnav-open .burger i:first-child{transform:translateY(3.8px) rotate(45deg)}
html.nav-tight.mnav-open .burger i:last-child{transform:translateY(-3.8px) rotate(-45deg)}
html.nav-tight.mnav-open .top{background:#0b0b0b!important;color:#fff!important;border-bottom-color:rgba(255,255,255,.12)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.nav-tight.mnav-open .top .logo{color:#fff}
html.nav-tight.mnav-open,html.nav-tight.mnav-open body{overflow:hidden}
/* card footers (e.g. Clutch: “28 verifizierte Bewertungen · clutch.co”): wrap instead of pushing the source out of the card */
.path .wl-card .wl-f{flex-wrap:wrap;row-gap:6px}
.path .wl-card .wl-f span{min-width:0}
html.og-shot .nav .lang-dd{display:none!important}

/* floating video, Intercom-style: the chevron folds the card into a round launcher (Ivan's photo + play badge); the launcher opens it again */
.fv-open,.fv-x{transform-origin:100% 100%;transition:opacity .25s ease,transform .4s cubic-bezier(.2,.8,.2,1),background-color .25s ease}
.fv-x svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fv.min .fv-open,.fv.min .fv-x{opacity:0;transform:scale(.25);pointer-events:none}
.fv-bub{position:absolute;right:0;bottom:0;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:#1b1b1b;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.3),0 0 0 2px var(--hot);opacity:0;transform:scale(.4);pointer-events:none;transform-origin:100% 100%;transition:opacity .25s ease .1s,transform .45s cubic-bezier(.3,1.4,.5,1) .1s}
.fv-bub img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.fv-bub-p{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--hot);color:#0b0b0b;box-shadow:0 0 0 2px #fff}
.fv-bub-p svg{fill:currentColor;margin-left:1px}
.fv.min .fv-bub{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover){.fv.min .fv-bub:hover{transform:scale(1.06)}}

/* …and once the button has dropped to its own row the capsule becomes a card: soft corners, even padding (a full pill cut across the button) */
@media (min-width:601px) and (max-width:1199px){
  body .op .plan-ask.ask-pill.op-ask.wrapped{border-radius:24px!important;padding:14px 14px 14px!important}
  body .op .plan-ask.ask-pill.op-ask.wrapped .pa-btn{flex-basis:100%!important}
}

/* Intercom-style launcher: the round button always sits in the corner; open → it shows a chevron and folds the card, closed → Ivan's photo opens it */
.fv{padding-bottom:72px}
.fv-x{display:none!important}
.fv .fv-bub{opacity:1;transform:none;pointer-events:auto;transition:background-color .25s ease,transform .3s cubic-bezier(.3,1.4,.5,1)}
.fv-bub img,.fv-bub-p{transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.fv-bub-x{position:absolute;inset:0;display:grid;place-items:center;color:#0b0b0b;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.fv-bub-x svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fv:not(.min) .fv-bub{background:var(--hot);box-shadow:0 10px 28px rgba(0,0,0,.3)}
.fv:not(.min) .fv-bub img,.fv:not(.min) .fv-bub-p{opacity:0;transform:scale(.6)}
.fv:not(.min) .fv-bub-x{opacity:1;transform:none}
@media (hover:hover){.fv .fv-bub:hover{transform:scale(1.06)}}
/* video card expand: no fill, just the white icon; on hover a soft grey square like the language menu items */
.fv .fv-cell{background:transparent!important;background-image:none!important;box-shadow:none!important;color:#fff;border-radius:6px}
@media (hover:hover){.fv .fv-open:hover .fv-cell{background:rgba(255,255,255,.1)!important}}
/* section labels on two lines: the orange square lines up with the first line, not the middle of the block */
.eyebrow{align-items:flex-start!important}
.eyebrow::before{align-self:flex-start!important;margin-top:4.5px;margin-top:calc((1lh - 8px) / 2)}
/* partners gallery: the caption panel always has room for two lines of caption plus the arrows under them (on short cards the arrows sat on the text);
   captions use the panel's full width so most fit on one line */
body #op-partners .op-gallery{--cap:max(50%,188px)}
@media (max-width:600px){body #op-partners .op-gallery{--cap:max(46%,188px)}}
body #op-partners .op-gal-item figcaption p{max-width:none!important;padding-bottom:64px}
/* video widget emphasis: watching is the main action (orange expand square), folding is secondary (quiet dark round button) */
.fv .fv-cell{background:var(--hot)!important;color:#0b0b0b!important;border-radius:4px}
@media (hover:hover){.fv .fv-open:hover .fv-cell{background:var(--hot)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 60%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(255,86,10,.35)!important}}
.fv:not(.min) .fv-bub{background:#1b1b1b!important;box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.1)!important;width:48px;height:48px}
.fv:not(.min) .fv-bub-x{color:rgba(255,255,255,.75)}
@media (hover:hover){.fv:not(.min) .fv-bub:hover{background:#262626!important}.fv:not(.min) .fv-bub:hover .fv-bub-x{color:#fff}}
.fv-bub{transition:background-color .25s ease,width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.3,1.4,.5,1)!important}
.fv-bub-x svg{width:18px;height:18px}
/* fold button = the page's round arrow buttons (What we believe): hairline ring, faint lift, white chevron; solid so it reads over white sections too */
.fv:not(.min) .fv-bub{width:44px;height:44px;background:#161616!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 22px rgba(0,0,0,.22)!important}
.fv:not(.min) .fv-bub-x{color:#fff}
.fv:not(.min) .fv-bub-x svg{width:18px;height:18px;stroke-width:1.8}
@media (hover:hover){.fv:not(.min) .fv-bub:hover{transform:none;background-color:var(--hot)!important;background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%)!important;box-shadow:inset 0 0 12px rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.7)!important}
  .fv:not(.min) .fv-bub:hover .fv-bub-x{color:var(--ink)}}
/* client without a logo file (Danzee): a typeset wordmark at the same optical size as the Finna mark */
.op .op-quote-logo.op-logo-word span{display:block;font:700 34px/28px var(--sans);letter-spacing:-.055em;color:#0b0b0b;padding-bottom:2px}
/* partners gallery: photo always exactly the top half, caption panel the bottom half; the card never gets so short that the arrows reach the caption */
html body #op-partners .op-photo.op-gallery{--cap:50%!important;min-height:388px!important}
@media (max-width:900px){html body #op-partners .op-photo.op-gallery{aspect-ratio:auto!important;height:388px!important;min-height:0!important}}
@media (max-width:600px){html body #op-partners .op-photo.op-gallery{height:380px!important}}
/* Danzee wordmark: solid, like the Finna mark in Problem Validation, in brand orange (cap height ≈ the Finna mark) */
.op .op-quote-logo.op-logo-word span{color:#ff8727!important;font:800 38px/30px var(--sans)!important;letter-spacing:-.05em!important;text-transform:none!important}
/* Danzee mark (no logo file): an orange app tile with a zigzag Z, then the name; same height as the Finna mark */
.op .op-quote-logo.dz-logo{display:flex!important;align-items:center;gap:10px;width:max-content!important;margin-left:auto!important;margin-right:auto!important}
.op .op-quote-logo.dz-logo .dz-mark{width:34px!important;height:34px!important;flex:none;border-radius:50%}
.op .op-quote-logo.dz-logo .dz-mark rect{fill:#ff8727}
.op .op-quote-logo.dz-logo .dz-mark path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.op .op-quote-logo.dz-logo span{color:#0b0b0b!important;font:600 32px/34px var(--sans)!important;letter-spacing:-.04em!important;text-transform:none!important;padding:0 0 2px!important}

/* ---- case study modal (opens from the case card; same language as the one-pagers) ---- */
.case .case3[data-open]{position:relative;cursor:pointer;transition:box-shadow .4s ease,background-image .4s ease}
.case .case3[data-open]:hover{background-image:radial-gradient(90% 90% at 50% 0%,rgba(11,11,11,.045),rgba(11,11,11,0) 70%)!important}
.case3 .f2-x{cursor:pointer;font:inherit;position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:3px;background:#f4f4f4;color:var(--ink);transition:background .3s ease,color .3s ease}
.case3 .f2-x .xp{width:24px!important;height:24px!important;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.case .case3[data-open]:hover .f2-x,.case .case3[data-open]:focus-visible .f2-x{background:var(--hot);color:#0b0b0b}
.case .case3[data-open]:hover .f2-x .xp{transform:scale(1.15)}
@media (hover:none){.case .case3[data-open]:hover .f2-x{background:#f4f4f4;color:var(--ink)}}
@media (max-width:600px){.case3 .f2-x{width:36px;height:36px}}
.case3 .c3-from{padding-right:clamp(20px,2.2vw,28px)!important}



.op-case .op-lead b{color:var(--ink)}
.op-case .op-case-facts{margin:0;padding:0;border:0;display:flex;flex-direction:column;justify-content:center;align-self:center;width:100%}
.op-case .op-case-facts .fact{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #e3e3e3}
.op-case .op-case-facts .fact:last-child{border-bottom:0}
.op-case .op-case-facts .fact b{text-align:right}
.op-case .op-ph-txt,.op-case .fact b.op-ph-txt,.op-case .vis-stat b .op-ph-txt{color:var(--hot)!important;font-style:normal}



body .op.op-case .op-story.op-vis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.op-case .op-story-text{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch!important;gap:28px;text-align:left;background:#fff!important;padding:clamp(24px,3vw,40px)!important}
.op-case .op-story-text .op-k{display:block;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,11,.6)}
.op-case .op-story-text p{margin:10px 0 0;font-size:clamp(16px,1.3vw,18px);line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
body .op.op-case .op-metrics.vis-side{grid-template-rows:auto auto auto!important}
.op-case .op-metrics .vis-stat{padding:clamp(20px,2.4vw,28px)!important}

.op-case .op-offers{margin-top:clamp(40px,4.6vw,64px)}
.op-case .op-offers-k{margin:0 0 24px;text-align:center;font:400 clamp(26px,2.7vw,35px)/1.12 var(--sans);letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.op-case .op-offers-k::before{content:"";display:inline-block;width:8px;height:8px;margin:0 12px 0 0;vertical-align:.12em;background:var(--hot)}
.op-case .op-offers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.op-case .op-offer{margin:0;padding:0;border:1px solid #e3e3e3;border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.op-case .op-offer p{flex:1 1 auto;margin:20px 24px 24px;font-size:15px;line-height:1.5;color:var(--ink)}
/* ---- Finna screens: scenes ported from the Finna case page (trio stage + result devices) ---- */
:where(.op-case .fzs){--flow-1:url(/landing/assets/img/finna/a38.webp); --flow-2:url(/landing/assets/img/finna/a39.webp); --flow-3:url(/landing/assets/img/finna/a40.webp); --flow-4:url(/landing/assets/img/finna/a41.webp); --gutter:8px; --ink:#0E0E0E; --iv-1:url(/landing/assets/img/finna/a11.webp); --iv-10:url(/landing/assets/img/finna/a20.webp); --iv-11:url(/landing/assets/img/finna/a21.webp); --iv-12:url(/landing/assets/img/finna/a22.webp); --iv-13:url(/landing/assets/img/finna/a23.webp); --iv-2:url(/landing/assets/img/finna/a12.webp); --iv-3:url(/landing/assets/img/finna/a13.webp); --iv-4:url(/landing/assets/img/finna/a14.webp); --iv-5:url(/landing/assets/img/finna/a15.webp); --iv-6:url(/landing/assets/img/finna/a16.webp); --iv-7:url(/landing/assets/img/finna/a17.webp); --iv-8:url(/landing/assets/img/finna/a18.webp); --iv-9:url(/landing/assets/img/finna/a19.webp); --kv-1:url(/landing/assets/img/finna/a01.webp); --kv-10:url(/landing/assets/img/finna/a10.webp); --kv-2:url(/landing/assets/img/finna/a02.webp); --kv-3:url(/landing/assets/img/finna/a03.webp); --kv-4:url(/landing/assets/img/finna/a04.webp); --kv-5:url(/landing/assets/img/finna/a05.webp); --kv-6:url(/landing/assets/img/finna/a06.webp); --kv-7:url(/landing/assets/img/finna/a07.webp); --kv-8:url(/landing/assets/img/finna/a08.webp); --kv-9:url(/landing/assets/img/finna/a09.webp); --tk-1:url(/landing/assets/img/finna/a24.webp); --tk-2:url(/landing/assets/img/finna/a25.webp); --tk-3:url(/landing/assets/img/finna/a26.webp); --tk-4:url(/landing/assets/img/finna/a27.webp); --tk-5:url(/landing/assets/img/finna/a28.webp); --tk-6:url(/landing/assets/img/finna/a25.webp); --tk-7:url(/landing/assets/img/finna/a29.webp); --tk-8:url(/landing/assets/img/finna/a30.webp); --tour-1:url(/landing/assets/img/finna/a31.webp); --tour-2:url(/landing/assets/img/finna/a32.webp); --tour-3:url(/landing/assets/img/finna/a33.webp); --tour-4:url(/landing/assets/img/finna/a34.webp); --tour-5:url(/landing/assets/img/finna/a35.webp); --tour-6:url(/landing/assets/img/finna/a36.webp); --tour-7:url(/landing/assets/img/finna/a37.webp);}
@keyframes markDraw{to{stroke-dashoffset:0}}
@keyframes markDrop{from{scale:0} to{scale:1}}
@keyframes markRide{
  0%,100%{transform:translateY(0) rotate(0deg)}
  28%    {transform:translateY(9%) rotate(-3deg)}
  60%    {transform:translateY(2%) rotate(2deg)}
}.op-case .fzs .tri5__device{
  position:absolute; left:50%; bottom:9.54cqw;
  transform:translateX(-50%);
  width:62.316cqw;
  aspect-ratio:100 / 204.7;
  background:#0B0B0B;
  border-radius:6.356cqw;
}.op-case .fzs .tri5__screenwrap{
  position:absolute; inset:1.994cqw;
  border-radius:4.362cqw;
  overflow:hidden;
  background:#FFFFFF;
}.op-case .fzs .tri5__island{
  position:absolute; left:50%; top:4.3cqw;
  transform:translateX(-50%);
  width:18.82cqw; height:5.671cqw;
  background:#0B0B0B;
  border-radius:999px;
}
@keyframes appScroll{
  0%      {opacity:0; transform:translateY(0)}
  3%      {opacity:1; transform:translateY(0)}
  8%      {opacity:1; transform:translateY(0)}
  84%     {opacity:1; transform:translateY(-79.72%)}
  94%     {opacity:1; transform:translateY(-79.72%)}
  96.5%   {opacity:0; transform:translateY(-79.72%)}
  96.51%  {opacity:0; transform:translateY(0)}
  100%    {opacity:0; transform:translateY(0)}
}
@keyframes fillring{to{stroke-dashoffset:0}}.op-case .fzs .tour__scr--w1{background-image:var(--tour-1)}.op-case .fzs .tour__scr--w2{background-image:var(--tour-2); opacity:0}.op-case .fzs .tour__scr--w3{background-image:var(--tour-3); opacity:0}.op-case .fzs .tour__scr--tip1{background-image:var(--tour-5); opacity:0}.op-case .fzs .tour__scr--tip2{background-image:var(--tour-6); opacity:0}.op-case .fzs .tour__tap--a{left:77%; top:76.8%}.op-case .fzs .tour__tap--b{left:77%; top:80.6%}.op-case .fzs .tour__tap--c{left:77%; top:77.0%}.op-case .fzs .tour__tap--d{left:75%; top:70.5%}
@keyframes tourRoot{
  0%   {opacity:0}
  5%   {opacity:1}
  90%  {opacity:1}
  95%  {opacity:0}
  100% {opacity:0}
}
@keyframes tourS2{ 0%,13.3%{opacity:0} 18.5%,93.5%{opacity:1} 93.6%,100%{opacity:0} }
@keyframes tourS3{ 0%,24.2%{opacity:0} 29.4%,93.5%{opacity:1} 93.6%,100%{opacity:0} }
@keyframes tourS4{ 0%,35%{opacity:0} 41%,93.5%{opacity:1} 93.6%,100%{opacity:0} }
@keyframes tourS5{ 0%,41.7%{opacity:0} 47.5%,93.5%{opacity:1} 93.6%,100%{opacity:0} }
@keyframes tourS6{
  0%,54.2%     {opacity:0; transform:translateY(3%)}
  59.5%,93.5%  {opacity:1; transform:translateY(0)}
  93.6%,100%   {opacity:0; transform:translateY(3%)}
}
@keyframes tourS7{ 0%,67.5%{opacity:0} 72.5%,93.5%{opacity:1} 93.6%,100%{opacity:0} }
@keyframes tourTap{
  0%    {opacity:0; transform:translate(-50%,-50%) scale(.35)}
  2.2%  {opacity:1; transform:translate(-50%,-50%) scale(1)}
  4%    {opacity:1; transform:translate(-50%,-50%) scale(1)}
  7.5%  {opacity:0; transform:translate(-50%,-50%) scale(1.8)}
  100%  {opacity:0; transform:translate(-50%,-50%) scale(.35)}
}.op-case .fzs .flow{position:absolute; inset:0; background:#FFF; overflow:hidden}.op-case .fzs .flow__tap--a{top:38.97%}.op-case .fzs .flow__tap--b{top:45.30%}.op-case .fzs .flow__tap--c{top:69.25%}
@keyframes flowRoot{
  0%   {opacity:0}
  6%   {opacity:1}
  88%  {opacity:1}
  93%  {opacity:0}
  100% {opacity:0}
}
@keyframes flowS2{ 0%,14%{opacity:0} 20%,93%{opacity:1} 93.1%,100%{opacity:0} }
@keyframes flowS3{ 0%,27%{opacity:0} 33%,93%{opacity:1} 93.1%,100%{opacity:0} }
@keyframes flowS4{ 0%,40%{opacity:0} 46%,93%{opacity:1} 93.1%,100%{opacity:0} }
@keyframes flowScroll{
  0%, 44%      {transform:translateY(0)}
  76%, 93%     {transform:translateY(-24.93%)}
  93.1%, 100%  {transform:translateY(0)}
}
@keyframes flowTap{
  0%    {opacity:0; transform:translate(-50%,-50%) scale(.35)}
  2%    {opacity:1; transform:translate(-50%,-50%) scale(1)}
  4%    {opacity:1; transform:translate(-50%,-50%) scale(1)}
  7.5%  {opacity:0; transform:translate(-50%,-50%) scale(1.8)}
  100%  {opacity:0; transform:translate(-50%,-50%) scale(.35)}
}
@keyframes resGlow{
  0%, 29%      {opacity:1}
  35%, 94%     {opacity:0}
  100%         {opacity:1}
}.op-case .fzs .kv{position:absolute; inset:0; background:#FFF; overflow:hidden}.op-case .fzs .kv__scr--1{background-image:var(--kv-1)}.op-case .fzs .kv__scr--2{background-image:var(--kv-2); opacity:0}.op-case .fzs .kv__scr--3{background-image:var(--kv-3); opacity:0}.op-case .fzs .kv__scr--4{background-image:var(--kv-4); opacity:0}.op-case .fzs .kv__scr--5{background-image:var(--kv-5); opacity:0}.op-case .fzs .kv__scr--6{background-image:var(--kv-6); opacity:0}.op-case .fzs .kv__scr--7{background-image:var(--kv-7); opacity:0}.op-case .fzs .kv__scr--8{background-image:var(--kv-8); opacity:0}.op-case .fzs .kv__scr--9{background-image:var(--kv-9); opacity:0}.op-case .fzs .kv__scr--10{background-image:var(--kv-10); opacity:0}.op-case .fzs .kv__tap--a{left:49.8%; top:68.4%}.op-case .fzs .kv__tap--b{left:50%;   top:45%}.op-case .fzs .kv__tap--c{left:49.8%; top:51.7%}.op-case .fzs .kv__tap--d{left:50%;   top:64%}
@keyframes kvRoot{
  0%      {opacity:0}
  2.63% {opacity:1}
  92.11% {opacity:1}
  99%     {opacity:0}
  100%    {opacity:0}
}
@keyframes kvS2{ 0%,10.0%{opacity:0} 11.58%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS3{
  0%,19.47%      {opacity:0; transform:translateY(6%)}
  21.84%,99%   {opacity:1; transform:translateY(0)}
  99.1%,100% {opacity:0; transform:translateY(6%)}
}
@keyframes kvS4{ 0%,28.95%{opacity:0} 30.53%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS5{ 0%,38.42%{opacity:0} 40.0%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS6{ 0%,47.89%{opacity:0} 49.47%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS7{ 0%,54.74%{opacity:0} 56.32%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS8{ 0%,61.58%{opacity:0} 63.16%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS9{ 0%,71.05%{opacity:0} 72.63%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvS10{ 0%,80.53%{opacity:0} 82.11%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes kvTap{
  0%   {opacity:0; transform:translate(-50%,-50%) scale(.35)}
  1.2% {opacity:1; transform:translate(-50%,-50%) scale(1)}
  2.4% {opacity:1; transform:translate(-50%,-50%) scale(1)}
  4.2% {opacity:0; transform:translate(-50%,-50%) scale(1.7)}
  100% {opacity:0; transform:translate(-50%,-50%) scale(.35)}
}.op-case .fzs .iv{position:absolute; inset:0; background:#FFF; overflow:hidden}.op-case .fzs .iv__scr--1{background-image:var(--iv-1)}.op-case .fzs .iv__scr--2{background-image:var(--iv-2); opacity:0}.op-case .fzs .iv__scr--3{background-image:var(--iv-3); opacity:0}.op-case .fzs .iv__scr--4{background-image:var(--iv-4); opacity:0}.op-case .fzs .iv__scr--5{background-image:var(--iv-5); opacity:0}.op-case .fzs .iv__scr--6{background-image:var(--iv-6); opacity:0}.op-case .fzs .iv__scr--7{background-image:var(--iv-7); opacity:0}.op-case .fzs .iv__scr--8{background-image:var(--iv-8); opacity:0}.op-case .fzs .iv__scr--9{background-image:var(--iv-9); opacity:0}.op-case .fzs .iv__scr--10{background-image:var(--iv-10); opacity:0}.op-case .fzs .iv__scr--11{background-image:var(--iv-11); opacity:0}.op-case .fzs .iv__scr--12{background-image:var(--iv-12); opacity:0}.op-case .fzs .iv__tap--a{left:50%;   top:59%}.op-case .fzs .iv__tap--b{left:49.8%; top:80.7%}.op-case .fzs .iv__tap--c{left:49.8%; top:93.5%}.op-case .fzs .iv__tap--d{left:89.7%; top:37.7%}.op-case .fzs .iv__tap--i{display:none}
@keyframes ivRoot{
  0%      {opacity:0}
  1.92% {opacity:1}
  96.9% {opacity:1}
  99%     {opacity:0}
  100%    {opacity:0}
}
@keyframes ivS2{ 0%,7.27%{opacity:0} 7.31%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS3{ 0%,13.04%{opacity:0} 13.08%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS4{ 0%,21.15%{opacity:0} 22.31%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS5{
  0%,25.38%   {opacity:0; transform:translateY(3%)}
  27.5%,99%  {opacity:1; transform:translateY(0)}
  99.1%,100% {opacity:0; transform:translateY(3%)}
}
@keyframes ivS6{ 0%,32.69%{opacity:0} 33.85%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS7{ 0%,39.62%{opacity:0} 40.77%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS8{ 0%,46.54%{opacity:0} 47.69%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS9{ 0%,53.46%{opacity:0} 54.62%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS10{
  0%,57.69%   {opacity:0; transform:translateY(3%)}
  59.81%,99%  {opacity:1; transform:translateY(0)}
  99.1%,100% {opacity:0; transform:translateY(3%)}
}
@keyframes ivS11{ 0%,64.62%{opacity:0} 65.77%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS12{ 0%,70.0%{opacity:0} 71.15%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivS13{ 0%,77.31%{opacity:0} 78.46%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes ivKeys{
  0%,7.31%      {transform:translateY(100%)}
  9.42%,13.08% {transform:translateY(0)}
  15.19%,100%    {transform:translateY(100%)}
}
@keyframes ivScroll{
  0%,79.62%   {transform:translateY(0)}
  93.08%,99% {transform:translateY(-67.3%)}
  99.1%,100%   {transform:translateY(0)}
}
@keyframes ivTap{
  0%   {opacity:0; transform:translate(-50%,-50%) scale(.35)}
  0.9% {opacity:1; transform:translate(-50%,-50%) scale(1)}
  1.8% {opacity:1; transform:translate(-50%,-50%) scale(1)}
  3.1% {opacity:0; transform:translate(-50%,-50%) scale(1.7)}
  100% {opacity:0; transform:translate(-50%,-50%) scale(.35)}
}.op-case .fzs .tk{position:absolute; inset:0; background:#FFF; overflow:hidden}.op-case .fzs .tk__tap--a{left:50%;   top:40%}.op-case .fzs .tk__tap--b{left:42%;   top:92.2%}.op-case .fzs .tk__tap--c{left:87.5%; top:92.2%}.op-case .fzs .tk__tap--d{left:8.5%;  top:10.5%}.op-case .fzs .tk__key--1{left:30%; top:70%}.op-case .fzs .tk__key--2{left:62%; top:75.5%}.op-case .fzs .tk__key--3{left:45%; top:81%}
@keyframes tkRoot{
  0%      {opacity:0}
  2.581% {opacity:1}
  95.5% {opacity:1}
  99%     {opacity:0}
  100%    {opacity:0}
}
@keyframes tkS2{
  0%,13.57%      {opacity:0; transform:scale(1.012)}
  15.71%,99%   {opacity:1; transform:scale(1)}
  99.1%,100% {opacity:0; transform:scale(1.012)}
}
@keyframes tkS3{ 0%,27.07%{opacity:0} 27.14%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes tkType{
  0%, 30.968%  {clip-path:polygon(0% 0%, 100% 0%, 100% 37.20%, 7.00% 37.20%, 7.00% 40.27%, 0% 40.27%)}
  30.968%  {clip-path:polygon(0% 0%, 100% 0%, 100% 37.20%, 7.00% 37.20%, 7.00% 40.27%, 0% 40.27%)}
  33.144%  {clip-path:polygon(0% 0%, 100% 0%, 100% 37.20%, 93.00% 37.20%, 93.00% 40.27%, 0% 40.27%)}
  33.333%  {clip-path:polygon(0% 0%, 100% 0%, 100% 40.27%, 7.00% 40.27%, 7.00% 43.34%, 0% 43.34%)}
  35.51%  {clip-path:polygon(0% 0%, 100% 0%, 100% 40.27%, 93.00% 40.27%, 93.00% 43.34%, 0% 43.34%)}
  35.699%  {clip-path:polygon(0% 0%, 100% 0%, 100% 43.34%, 7.00% 43.34%, 7.00% 46.41%, 0% 46.41%)}
  37.875%  {clip-path:polygon(0% 0%, 100% 0%, 100% 43.34%, 93.00% 43.34%, 93.00% 46.41%, 0% 46.41%)}
  38.065%  {clip-path:polygon(0% 0%, 100% 0%, 100% 46.41%, 7.00% 46.41%, 7.00% 49.48%, 0% 49.48%)}
  40.241%  {clip-path:polygon(0% 0%, 100% 0%, 100% 46.41%, 93.00% 46.41%, 93.00% 49.48%, 0% 49.48%)}
  40.43%  {clip-path:polygon(0% 0%, 100% 0%, 100% 49.48%, 7.00% 49.48%, 7.00% 52.55%, 0% 52.55%)}
  42.606%  {clip-path:polygon(0% 0%, 100% 0%, 100% 49.48%, 93.00% 49.48%, 93.00% 52.55%, 0% 52.55%)}
  42.796%  {clip-path:polygon(0% 0%, 100% 0%, 100% 52.55%, 7.00% 52.55%, 7.00% 55.62%, 0% 55.62%)}
  44.972%  {clip-path:polygon(0% 0%, 100% 0%, 100% 52.55%, 93.00% 52.55%, 93.00% 55.62%, 0% 55.62%)}
  46.129%, 99% {clip-path:inset(0 0 39.9% 0)}
  99.1%, 100%  {clip-path:polygon(0% 0%, 100% 0%, 100% 37.20%, 7.00% 37.20%, 7.00% 40.27%, 0% 40.27%)}
}
@keyframes tkS5{ 0%,47.742%{opacity:0} 47.806%,99%{opacity:1} 99.1%,100%{opacity:0} }
@keyframes tkS6{
  0%,60.0%      {opacity:0; transform:scale(1.012)}
  61.935%,99%   {opacity:1; transform:scale(1)}
  99.1%,100% {opacity:0; transform:scale(1.012)}
}
@keyframes tkS7{
  0%,69.677%      {opacity:0; transform:scale(1.012)}
  71.613%,99%   {opacity:1; transform:scale(1)}
  99.1%,100% {opacity:0; transform:scale(1.012)}
}
@keyframes tkS8{
  0%,80.645%      {opacity:0; transform:scale(1.012)}
  82.581%,99%   {opacity:1; transform:scale(1)}
  99.1%,100% {opacity:0; transform:scale(1.012)}
}
@keyframes tkKeys{
  0%,24.516%      {transform:translateY(100%)}
  28.065%,47.742% {transform:translateY(0)}
  51.29%,100%    {transform:translateY(100%)}
}
@keyframes tkTap{
  0%    {opacity:0; transform:translate(-50%,-50%) scale(.35)}
  1.6%  {opacity:1; transform:translate(-50%,-50%) scale(1)}
  3.2%  {opacity:1; transform:translate(-50%,-50%) scale(1)}
  5.7%  {opacity:0; transform:translate(-50%,-50%) scale(1.7)}
  100%  {opacity:0; transform:translate(-50%,-50%) scale(.35)}
}.op-case .fzs .trio{
  position:relative;
  container-type:inline-size;
  margin-top:var(--gutter);
  aspect-ratio:1214 / 587.66;
  background:var(--ink);
  border-radius:11.902px;
  overflow:hidden;
}.op-case .fzs .trio__device{
  position:relative; flex:0 0 auto;
  container-type:inline-size;
  width:20.123cqw;                 /* 244.292 of 1214 */
  aspect-ratio:100 / 204.7;
  background:#0B0B0B;
  border-radius:2.076cqw;
  box-shadow:0 0 0 1px rgba(245,241,239,.22);
}.op-case .fzs .trio__screen{
  position:absolute; inset:3.234cqw;
  border-radius:7.08cqw;
  overflow:hidden;
  background:#FFFFFF;
}.op-case .fzs .trio__island{
  position:absolute; left:50%; top:7cqw;
  transform:translateX(-50%);
  width:30.5cqw; height:9.17cqw;
  background:#0B0B0B;
  border-radius:999px;
}
@keyframes drift1{
    0%,100% { transform: rotate(-.9deg) scale(1.04) }
    33%     { transform: rotate(.9deg) scale(1.06) }
    66%     { transform: rotate(-.3deg) scale(1.045) }
  }
@keyframes drift3{
    0%,100% { transform: rotate(-1.7deg) scale(1.05) }
    50%     { transform: rotate(1.7deg) scale(1.075) }
  }
@keyframes drop{
    0%   { transform: translateY(-18px) }
    50%  { transform: translateY(5px) }
    66%  { transform: translateY(-6px) }
    82%  { transform: translateY(2px) }
    100% { transform: translateY(-18px) }
  }
@keyframes fr-move{0.00%{offset-distance:0.00%}2.79%{offset-distance:0.00%}16.74%{offset-distance:22.05%}32.56%{offset-distance:22.05%}45.58%{offset-distance:47.09%}61.40%{offset-distance:47.09%}73.49%{offset-distance:85.60%}89.30%{offset-distance:85.60%}95.81%{offset-distance:100.00%}100.00%{offset-distance:100.00%}}
@keyframes fr-fade{0%{opacity:0}2.5%{opacity:1}95%{opacity:1}99%,100%{opacity:0}}
@keyframes fr-pulse{0%{transform:scale(1);fill:#0B0B0B}15.81%{transform:scale(1);fill:#0B0B0B}18.84%{transform:scale(1.4);fill:#FF1207}30.23%{transform:scale(1.4);fill:#FF1207}32.09%{transform:scale(1);fill:#0B0B0B}44.65%{transform:scale(1);fill:#0B0B0B}47.67%{transform:scale(1.4);fill:#FF1207}59.07%{transform:scale(1.4);fill:#FF1207}60.93%{transform:scale(1);fill:#0B0B0B}72.56%{transform:scale(1);fill:#0B0B0B}75.58%{transform:scale(1.4);fill:#FF1207}86.98%{transform:scale(1.4);fill:#FF1207}88.84%{transform:scale(1);fill:#0B0B0B}100%{transform:scale(1);fill:#0B0B0B}}
@keyframes fr-dr1{0%,18.37%{stroke-dashoffset:20.2}20.23%,30.00%{stroke-dashoffset:0}31.40%,100%{stroke-dashoffset:20.2}}
@keyframes fr-pp1{0%,19.77%{opacity:0;transform:scale(.94)}21.40%,29.30%{opacity:1;transform:scale(1)}30.70%,100%{opacity:0;transform:scale(.94)}}
@keyframes fr-dr2{0%,47.21%{stroke-dashoffset:19.7}49.07%,58.84%{stroke-dashoffset:0}60.23%,100%{stroke-dashoffset:19.7}}
@keyframes fr-pp2{0%,48.60%{opacity:0;transform:scale(.94)}50.23%,58.14%{opacity:1;transform:scale(1)}59.53%,100%{opacity:0;transform:scale(.94)}}
@keyframes fr-dr3{0%,75.12%{stroke-dashoffset:19.9}76.98%,86.74%{stroke-dashoffset:0}88.14%,100%{stroke-dashoffset:19.9}}
@keyframes fr-pp3{0%,76.51%{opacity:0;transform:scale(.94)}78.14%,86.05%{opacity:1;transform:scale(1)}87.44%,100%{opacity:0;transform:scale(.94)}}
@keyframes cr-float{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-9px) rotate(1.1deg)}}
@keyframes cr-sh1{0%,0.00%{fill:#FFFFFF}3.19%,22.34%{fill:#0E0E0E}25.53%,100%{fill:#FFFFFF}}
@keyframes cr-tx1{0%,0.00%{fill:#0E0E0E}3.19%,22.34%{fill:#FFFFFF}25.53%,100%{fill:#0E0E0E}}
@keyframes cr-sh2{0%,25.53%{fill:#FFFFFF}29.79%,54.26%{fill:#0E0E0E}58.51%,100%{fill:#FFFFFF}}
@keyframes cr-tx2{0%,25.53%{fill:#0E0E0E}29.79%,54.26%{fill:#FFFFFF}58.51%,100%{fill:#0E0E0E}}
@keyframes cr-sh3{0%,58.51%{fill:#FFFFFF}62.77%,95.74%{fill:#0E0E0E}0.00%,100%{fill:#FFFFFF}}
@keyframes cr-tx3{0%,58.51%{fill:#0E0E0E}62.77%,95.74%{fill:#FFFFFF}0.00%,100%{fill:#0E0E0E}}
.op-case .fzs:not(.op-shots--2){margin-top:clamp(40px,4.6vw,64px)}
@media (max-width:600px){.op-case .fzs:not(.op-shots--2){margin-top:32px}}
.op-case .fzs .trio{margin-top:0;border-radius:12px;background:linear-gradient(180deg,#f6f6f6 0%,#f1f1f1 100%)!important;box-shadow:inset 0 0 0 1px #e3e3e3;isolation:isolate}
.op-case .fzs .fz-tone{position:absolute;inset:0;z-index:0;pointer-events:none;background:#f4f4f2;-webkit-mask-image:url("/landing/assets/img/halftone-map.svg");mask-image:url("/landing/assets/img/halftone-map.svg");-webkit-mask-size:620px 422px;mask-size:620px 422px;-webkit-mask-repeat:repeat;mask-repeat:repeat;animation:fzTone 110s linear infinite}
@keyframes fzTone{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:-620px -422px;mask-position:-620px -422px}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .fz-tone{animation:none}}
.op-case .fzs .fz-rule{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:0;background:rgba(255,255,255,.9)}

.op-case .fzs .trio__device{box-shadow:0 0 0 1px rgba(11,11,11,.08),0 1.6cqw 3.2cqw rgba(11,11,11,.18)!important}
/* scene timelines from the Finna case page: run while the case modal is open */
@media (prefers-reduced-motion:no-preference){.op-case.play .fzs .tri5__appscroll{animation:appScroll 20s linear infinite}}
@media (prefers-reduced-motion:no-preference){.op-case.play .fzs .tour{animation:tourRoot 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__scr--w2{animation:tourS2 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__scr--w3{animation:tourS3 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__scr--page{animation:tourS4 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__scr--tip1{animation:tourS5 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__scr--tip2{animation:tourS6 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__scr--fund{animation:tourS7 12s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tour__tap{animation:tourTap 12s ease-out infinite}.op-case.play .fzs .tour__tap--a{animation-delay:1s}.op-case.play .fzs .tour__tap--b{animation-delay:2.3s}.op-case.play .fzs .tour__tap--c{animation-delay:3.6s}.op-case.play .fzs .tour__tap--d{animation-delay:5.9s}.op-case.play .fzs .tour__tap--e{animation-delay:7.5s}}
@media (prefers-reduced-motion:no-preference){.op-case.play .fzs .flow{animation:flowRoot 10s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .flow__scr--modal{animation:flowS2 10s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .flow__scr--picked{animation:flowS3 10s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .flow__cmp{animation:flowS4 10s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .flow__pane{animation:flowScroll 10s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .flow__tap{animation:flowTap 10s ease-out infinite}.op-case.play .fzs .flow__tap--a{animation-delay:.9s}.op-case.play .fzs .flow__tap--b{animation-delay:2.2s}.op-case.play .fzs .flow__tap--c{animation-delay:3.5s}}
@media (prefers-reduced-motion:no-preference){.op-case.play .fzs .kv{animation:kvRoot 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--2{animation:kvS2 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--3{animation:kvS3 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--4{animation:kvS4 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--5{animation:kvS5 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--6{animation:kvS6 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--7{animation:kvS7 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--8{animation:kvS8 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--9{animation:kvS9 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__scr--10{animation:kvS10 19.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .kv__tap{animation:kvTap 19.0s ease-out infinite}.op-case.play .fzs .kv__tap--a{animation-delay:1.0s}.op-case.play .fzs .kv__tap--b{animation-delay:2.8s}.op-case.play .fzs .kv__tap--c{animation-delay:4.6s}.op-case.play .fzs .kv__tap--d{animation-delay:6.4s}.op-case.play .fzs .kv__tap--e{animation-delay:8.2s}.op-case.play .fzs .kv__tap--f{animation-delay:12.6s}.op-case.play .fzs .kv__tap--g{animation-delay:14.4s}}
@media (prefers-reduced-motion:no-preference){.op-case.play .fzs .iv{animation:ivRoot 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--2{animation:ivS2 26.0s linear infinite}.op-case.play .fzs .iv__scr--3{animation:ivS3 26.0s linear infinite}.op-case.play .fzs .iv__scr--4{animation:ivS4 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--5{animation:ivS5 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--6{animation:ivS6 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--7{animation:ivS7 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--8{animation:ivS8 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--9{animation:ivS9 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--10{animation:ivS10 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--11{animation:ivS11 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__scr--12{animation:ivS12 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__port{animation:ivS13 26.0s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .iv__keys{animation:ivKeys 26.0s cubic-bezier(.3,.7,.2,1) infinite}.op-case.play .fzs .iv__pane{animation:ivScroll 26.0s cubic-bezier(.5,0,.2,1) infinite}.op-case.play .fzs .iv__tap{animation:ivTap 26.0s ease-out infinite}.op-case.play .fzs .iv__tap--a{animation-delay:1s}.op-case.play .fzs .iv__tap--b{animation-delay:4.6s}.op-case.play .fzs .iv__tap--c{animation-delay:7.6s}.op-case.play .fzs .iv__tap--d{animation-delay:9.4s}.op-case.play .fzs .iv__tap--e{animation-delay:11.2s}.op-case.play .fzs .iv__tap--f{animation-delay:13s}.op-case.play .fzs .iv__tap--g{animation-delay:15.9s}.op-case.play .fzs .iv__tap--h{animation-delay:19.2s}}
@media (prefers-reduced-motion:no-preference){.op-case.play .fzs .tk{animation:tkRoot 15.5s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tk__scr--ticket{animation:tkS2 15.5s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tk__scr--focus{animation:tkS3 15.5s linear infinite}.op-case.play .fzs .tk__scr--typed{
    animation:tkS3 15.5s linear infinite, tkType 15.5s linear infinite;
  }.op-case.play .fzs .tk__scr--written{animation:tkS5 15.5s linear infinite}.op-case.play .fzs .tk__scr--sent{animation:tkS6 15.5s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tk__scr--back{animation:tkS7 15.5s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tk__scr--home{animation:tkS8 15.5s cubic-bezier(.4,0,.2,1) infinite}.op-case.play .fzs .tk__keys{animation:tkKeys 15.5s cubic-bezier(.3,.7,.2,1) infinite}.op-case.play .fzs .tk__tap{animation:tkTap 15.5s ease-out infinite}.op-case.play .fzs .tk__tap--a{animation-delay:1s}.op-case.play .fzs .tk__tap--b{animation-delay:2.9s}.op-case.play .fzs .tk__key--1{animation-delay:5.1s}.op-case.play .fzs .tk__key--2{animation-delay:5.8s}.op-case.play .fzs .tk__key--3{animation-delay:6.5s}.op-case.play .fzs .tk__tap--c{animation-delay:8.4s}.op-case.play .fzs .tk__tap--d{animation-delay:9.9s}.op-case.play .fzs .tk__tap--e{animation-delay:11.6s}}

/* ---- Finna phones: presence (Volta-style) — staggered rise on open, hover tilt with a moving glare, idle float ---- */

.op-case .fzs .trio__device,.op-case .fzs .trio__device{opacity:0;translate:0 10%;transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.16,1,.3,1)}
.op-case.play .fzs .trio__device{opacity:1;translate:0 0}
.op-case.play .fzs .trio__device:nth-child(2){transition-delay:.12s}.op-case.play .fzs .trio__device:nth-child(3){transition-delay:.24s}
.op-case .fzs .fz-tilt{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .fz-tilt.is-live{transition:transform .12s linear}
.op-case .fzs .fz-glare{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .4s ease}
.op-case .fzs .fz-glare::before{content:"";position:absolute;inset:-40%;background:radial-gradient(closest-side at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.28),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 70%);mix-blend-mode:screen}
.op-case .fzs .fz-tilt.is-live .fz-glare{opacity:1}
.op-case.play .fzs .trio__device:not(.is-live){animation:fzFloat 7s ease-in-out infinite}
.op-case.play .fzs .trio__device:nth-child(2):not(.is-live){animation-delay:-2.3s}.op-case.play .fzs .trio__device:nth-child(3):not(.is-live){animation-delay:-4.6s}
@keyframes fzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .trio__device{opacity:1;translate:none;transition:none;animation:none!important}.op-case .fzs .fz-tilt{transform:none!important}.op-case .fzs .fz-glare{display:none}}
/* ---- Finna screens, redrawn: one living element per screen (Volta principle). Units: --u = 1/393 of the screen width ---- */
.op-case .fzs .trio__screen{container-type:inline-size}
.op-case .fzs .vx{--u:calc(100cqw / 393);--fb:#1F69FF;--ink:#0B1220;--mute:#6B7280;--line:#E6E9EF;--soft:#F3F5F8;--up:#0E9F6E;position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(60*var(--u)) calc(18*var(--u)) calc(20*var(--u));background:#fff;font-family:"Funnel Sans",var(--sans);color:var(--ink);text-align:left;letter-spacing:0;font-variant-numeric:tabular-nums}







/* 1 · invest: swap boxes + plain keypad */




















@keyframes vxPress{0%,60%{background:transparent}61%,75%{background:#DCE6FF;color:var(--fb)}76%,100%{background:transparent}}
/* 2 · projection: dark hero block with chart + scrubber */















@keyframes vxScrub{0%{opacity:0;offset-distance:0%}8%{opacity:1}100%{opacity:1;offset-distance:100%}}





/* shared: rows + tiles */











/* 3 · funds: gradient card stack */
















@keyframes vxSheen{to{transform:translateX(70%)}}
/* 4 · portfolio: balance block + privacy eye + allocation bars */











@keyframes vxEye{50%{transform:scale(.82);background:#DCE6FF}}
.op-case .fzs .vx-rows2{list-style:none;margin:calc(14*var(--u)) 0 0;padding:0}
.op-case .fzs .vx-rows2 li{display:grid;grid-template-columns:1fr auto;row-gap:calc(8*var(--u));padding:calc(11*var(--u)) 0;font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:var(--ink)}
.op-case .fzs .vx-rows2 li b{font-weight:600}
.op-case .fzs .vx-rows2 li i{grid-column:1/-1;display:block;height:calc(6*var(--u));border-radius:9px;background:var(--soft);overflow:hidden}
.op-case .fzs .vx-rows2 li i::before{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--fb);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1) .9s}
.op-case .fzs .vx-rows2 li:nth-child(2) i::before{background:#8FB4FF;transition-delay:1.05s}.op-case .fzs .vx-rows2 li:nth-child(3) i::before{background:#CFE0FF;transition-delay:1.2s}
.op-case .fzs .vx.is-on .vx-rows2 li i::before{transform:scaleX(1)}
/* 5 · identity: scan on an ambient gradient + step list */


@keyframes vxBlob{to{transform:rotate(25deg) scale(1.1)}}





















@keyframes vxRing{0%,100%{box-shadow:0 0 0 0 rgba(31,105,255,.4)}50%{box-shadow:0 0 0 calc(6*var(--u)) rgba(31,105,255,0)}}






@keyframes vxBeam{0%{top:0;opacity:0}6%{opacity:1}50%{top:calc(100% - 44*var(--u));opacity:1}94%{top:0;opacity:1}100%{top:0;opacity:0}}
@keyframes vxCorner{0%,80%{border-color:var(--fb)}92%,100%{border-color:var(--up)}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .vx *{transition:none!important;animation:none!important}.op-case .fzs .vx-line,.op-case .fzs .vx-spark path,.op-case .fzs .vx-mini path{stroke-dashoffset:0}.op-case .fzs .vx-area{opacity:1}.op-case .fzs .vx-scrub{opacity:1;offset-distance:100%}.op-case .fzs .vx-ul{left:calc(50% + 2*var(--u))}.op-case .fzs .vx-fc{transform:none;opacity:1}.op-case .fzs .vx-bal b{filter:none}.op-case .fzs .vx-rows2 li i::before{transform:none}.op-case .fzs .vx-ok{transform:none;opacity:1}.op-case .fzs .vx-ok svg{stroke-dashoffset:0}.op-case .fzs .vx-swapbtn{transform:rotate(180deg)}.op-case .fzs .vx-box-blue{transform:none}.op-case .fzs .vx-steps li.now i{background:var(--up);border-color:var(--up)}.op-case .fzs .vx-steps li.now i svg{opacity:1}}
/* projection screen: volta-style sheet */
.op-case .fzs .vx.vx-vt{--u:calc(100cqw / 393);--fb:#1F69FF;--ink:#0B1220;--mute:#6B7280;--line:rgba(11,18,32,.12);--sheet:#E4EAF1;--up:#0E9F6E;position:absolute;inset:0;display:flex;flex-direction:column;padding:0;background:var(--fb);font-family:"Funnel Sans",var(--sans);color:var(--ink);text-align:left;letter-spacing:0;font-variant-numeric:tabular-nums}
/* volta-style kit: blue sky with logo + status bar, a light sheet with a handle, text tabs, caps label + hero number, visual, big dark button */
.op-case .fzs .vt-sky{position:relative;flex:0 0 calc(190*var(--u));display:grid;place-items:center;color:#fff}
.op-case .fzs .vt-time{position:absolute;left:calc(30*var(--u));top:calc(18*var(--u));font:600 calc(15*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .vt-sig{position:absolute;right:calc(26*var(--u));top:calc(18*var(--u));width:calc(60*var(--u));height:calc(14*var(--u))}

.op-case .fzs .vt-sheet{position:relative;flex:1;display:flex;flex-direction:column;margin-top:calc(-2*var(--u));padding:calc(26*var(--u)) calc(22*var(--u)) calc(22*var(--u));border-radius:calc(30*var(--u)) calc(30*var(--u)) 0 0;background:var(--sheet)}
.op-case .fzs .vt-handle{position:absolute;left:50%;top:calc(12*var(--u));width:calc(40*var(--u));height:calc(4*var(--u));margin-left:calc(-20*var(--u));border-radius:9px;background:var(--ink)}
.op-case .fzs .vt-tabs{display:flex;gap:calc(18*var(--u));margin-top:calc(14*var(--u));padding-bottom:calc(14*var(--u));border-bottom:1px solid var(--line);font:500 calc(19*var(--u))/1 "Funnel Sans",var(--sans);color:var(--mute);letter-spacing:-.01em}
.op-case .fzs .vt-tabs span{transition:color .35s}
.op-case .fzs .vt-tabs span.on{color:var(--ink)}
.op-case .fzs .vt-tabs span.will{transition-delay:.9s}.op-case .fzs .vt-tabs span.was{transition-delay:.9s}
.op-case .fzs .vx-vt.is-on .vt-tabs span.will{color:var(--ink)}.op-case .fzs .vx-vt.is-on .vt-tabs span.was{color:var(--mute)}








/* chart (projection + portfolio) */


.op-case .fzs .vt-a1{fill:#C8D1D9;transition-delay:.2s}.op-case .fzs .vt-a2{fill:var(--fb);transition-delay:.5s}




/* invest: chips + keypad on the sheet */







@keyframes vtPress{0%,60%{background:transparent}61%,75%{background:#fff;color:var(--fb)}76%,100%{background:transparent}}
/* funds + portfolio: bars */












/* portfolio: privacy reveal */


/* identity: scan card + steps */
























@keyframes vtRing{0%,100%{box-shadow:0 0 0 0 rgba(31,105,255,.4)}50%{box-shadow:0 0 0 calc(6*var(--u)) rgba(31,105,255,0)}}




@keyframes vtBeam{0%{top:0;opacity:0}6%{opacity:1}50%{top:calc(100% - 44*var(--u));opacity:1}94%{top:0;opacity:1}100%{top:0;opacity:0}}
@keyframes vtCorner{0%,80%{border-color:var(--fb)}92%,100%{border-color:var(--up)}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .vx-vt *{transition:none!important;animation:none!important}.op-case .fzs .vt-area{transform:none}.op-case .fzs .vt-arr{opacity:1}.op-case .fzs .vx-vt.vt-port .vt-hero{filter:none}.op-case .fzs .vt-bars li i::before{transform:none}.op-case .fzs .vt-ok{transform:none;opacity:1}.op-case .fzs .vt-ok svg{stroke-dashoffset:0}.op-case .fzs .vt-steps li.now i{background:var(--up);border-color:var(--up)}.op-case .fzs .vt-steps li.now i svg{opacity:1}.op-case .fzs .vt-tabs span.will{color:var(--ink)}.op-case .fzs .vt-tabs span.was{color:var(--mute)}}
/* activity screen: short sky, stacked direction cards (volta-style) */
.op-case .fzs .vx-act .vt-sky{flex-basis:calc(74*var(--u))}
.op-case .fzs .vx-act .vt-tabs{margin-top:calc(30*var(--u));font-size:calc(22*var(--u))}
.op-case .fzs .vx-act .vt-sheet{padding-bottom:0;overflow:hidden}

.op-case .fzs .vt-list{list-style:none;margin:calc(24*var(--u)) 0 0;padding:0;display:grid;gap:calc(13*var(--u))}
.op-case .fzs .vt-list li{display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--u));height:calc(89*var(--u));padding:calc(13*var(--u)) calc(15*var(--u));border-radius:calc(13*var(--u));box-sizing:border-box;background:var(--fb);color:#fff;transform:translateY(calc(40*var(--u)));opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.op-case .fzs .vt-list li:nth-child(even){flex-direction:row-reverse;background:#3DD9A7;color:var(--ink);text-align:right}
.op-case .fzs .vt-list li span{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.op-case .fzs .vt-list li em{font:400 calc(15*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal}
.op-case .fzs .vt-list li b{font:400 calc(38*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.02em}
.op-case .fzs .vt-ar{flex:0 0 auto;width:calc(50*var(--u));height:calc(50*var(--u));fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;align-self:flex-end}
.op-case .fzs .vt-list li:nth-child(even) .vt-ar{align-self:flex-start}
.op-case .fzs .vx-vt.is-on .vt-list li{transform:none;opacity:1}
.op-case .fzs .vx-vt.is-on .vt-list li:nth-child(2){transition-delay:.08s}.op-case .fzs .vx-vt.is-on .vt-list li:nth-child(3){transition-delay:.16s}.op-case .fzs .vx-vt.is-on .vt-list li:nth-child(4){transition-delay:.24s}.op-case .fzs .vx-vt.is-on .vt-list li:nth-child(5){transition-delay:.32s}.op-case .fzs .vx-vt.is-on .vt-list li:nth-child(6){transition-delay:.4s}
.op-case .fzs .vx-vt.is-on .vt-list li:first-child .vt-ar{animation:vtNudge 1.1s ease-in-out 1.2s 2}
@keyframes vtNudge{50%{transform:translate(calc(3*var(--u)),calc(-3*var(--u)))}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .vt-list li{transform:none;opacity:1}}
/* invest screen: charging-style gauge */





@keyframes vtDot{50%{opacity:.35}}














@media (prefers-reduced-motion:reduce){.op-case .fzs .vt-fill{width:79%;transition:none}.op-case .fzs .vt-dot{animation:none}}
/* invest screen: upsell sheet over the funds list (light) */
.op-case .fzs .vx.vx-gk{--u:calc(100cqw / 393);position:absolute;inset:0;display:block;padding:0;background:#fff;font-family:"Funnel Sans",var(--sans);color:#0B1220;overflow:hidden;font-variant-numeric:tabular-nums}
.op-case .fzs .gk-app{padding:0 calc(22*var(--u))}
.op-case .fzs .gk-status{display:flex;justify-content:space-between;align-items:center;height:calc(58*var(--u));padding:0 calc(10*var(--u));font:600 calc(16*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .gk-sig{width:calc(62*var(--u));height:calc(14*var(--u))}

.op-case .fzs .gk-av{width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;background:linear-gradient(135deg,#DCE6FF,#8FB4FF)}

.op-case .fzs .gk-search{display:flex;align-items:center;gap:calc(10*var(--u));margin-top:calc(20*var(--u));height:calc(48*var(--u));padding:0 calc(16*var(--u));border-radius:calc(16*var(--u));background:#F3F5F8;font:500 calc(16*var(--u))/1 "Funnel Sans",var(--sans);color:#9AA1AE}
.op-case .fzs .gk-search svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:#9AA1AE;stroke-width:2.2;stroke-linecap:round}
.op-case .fzs .gk-row{display:flex;align-items:center;gap:calc(14*var(--u));padding:calc(14*var(--u)) calc(4*var(--u));font:400 calc(14*var(--u))/1.3 "Funnel Sans",var(--sans)}
.op-case .fzs .gk-row-card{margin-top:calc(14*var(--u));padding:calc(14*var(--u));border-radius:calc(18*var(--u));box-shadow:inset 0 0 0 1.5px #E6E9EF}
.op-case .fzs .gk-row span{flex:1;display:flex;flex-direction:column;gap:calc(3*var(--u))}
.op-case .fzs .gk-row b{font:600 calc(16*var(--u))/1.2 "Funnel Sans",var(--sans)}.op-case .fzs .gk-row em{font-style:normal;color:#6B7280}
.op-case .fzs .gk-row u{text-decoration:none;font-size:calc(22*var(--u));color:#9AA1AE}.op-case .fzs .gk-row small{align-self:flex-start;font-size:calc(13*var(--u));color:#9AA1AE}
.op-case .fzs .gk-ic{width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%;flex:0 0 auto}
.op-case .fzs .gk-ic.c0{background:#EEF1F5}.op-case .fzs .gk-ic.c1{background:linear-gradient(135deg,#1F69FF,#8A5CFF)}.op-case .fzs .gk-ic.c2{background:linear-gradient(135deg,#3DD9A7,#8FB4FF)}
.op-case .fzs .gk-dim{position:absolute;inset:0;background:rgba(11,18,32,.22);opacity:0;transition:opacity .6s ease}
.op-case .fzs .gk-sheet{position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));padding:calc(196*var(--u)) calc(24*var(--u)) calc(22*var(--u));border-radius:calc(40*var(--u));background:#fff;box-shadow:0 calc(-6*var(--u)) calc(30*var(--u)) rgba(11,18,32,.12);transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1) .2s}
.op-case .fzs .vx-gk.is-on .gk-dim{opacity:1}
.op-case .fzs .vx-gk.is-on .gk-sheet{transform:none}
.op-case .fzs .gk-blobs{position:absolute;left:calc(14*var(--u));top:calc(-56*var(--u));width:calc(340*var(--u));height:calc(240*var(--u));pointer-events:none}
.op-case .fzs .gk-b{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--s)*var(--u));height:calc(var(--s)*var(--u));rotate:var(--r);scale:0;transition:scale .55s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.75s + var(--i)*.07s)}
.op-case .fzs .vx-gk.is-on .gk-b{scale:1}
.op-case .fzs .gk-f{position:absolute;inset:0;display:grid;place-items:center;background:var(--c);animation:gkBob 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.45s)}
.op-case .fzs .gk-b.sq .gk-f{border-radius:28%}.op-case .fzs .gk-b.ci .gk-f{border-radius:50%}
.op-case .fzs .gk-b.cl .gk-f{border-radius:46% 54% 42% 58% / 52% 44% 56% 48%}
.op-case .fzs .gk-b.bl .gk-f{border-radius:58% 42% 48% 52% / 62% 58% 42% 38%}
@keyframes gkBob{0%,100%{translate:0 0}50%{translate:0 calc(-6*var(--u))}}
.op-case .fzs .gk-eyes{display:flex;gap:18%;width:44%;justify-content:center;rotate:calc(var(--r)*-1)}
.op-case .fzs .gk-eyes b{display:block;width:22%;aspect-ratio:1/1.6;border-radius:50%;background:#fff}
.op-case .fzs .gk-eyes.o b{aspect-ratio:1;width:18%}

.op-case .fzs .gk-b:nth-child(odd) .gk-eyes b{animation:gkBlink 4.6s steps(1) infinite;animation-delay:calc(var(--i)*.6s)}
@keyframes gkBlink{0%,94%{transform:none}95%,98%{transform:scaleY(.15)}}
.op-case .fzs .gk-brand{position:relative;display:flex;align-items:center;gap:calc(8*var(--u));margin:0;font:600 calc(16*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .gk-mark{width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;background:#1F69FF;-webkit-mask:url("/landing/assets/img/finna-mark-white.png") center/62% no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:url("/landing/assets/img/finna-mark-white.png") center/62% no-repeat exclude,linear-gradient(#000,#000)}
.op-case .fzs .gk-h{margin:calc(14*var(--u)) 0 0;font:600 calc(30*var(--u))/1.1 "Funnel Sans",var(--sans);letter-spacing:-.02em;color:#0B1220}
.op-case .fzs .gk-desc{margin:calc(12*var(--u)) 0 0;font:400 calc(16*var(--u))/1.4 "Funnel Sans",var(--sans);color:#5B6270}
.op-case .fzs .gk-btn{display:grid;place-items:center;margin-top:calc(24*var(--u));height:calc(58*var(--u));border-radius:99px;background:#0B1220;color:#fff;font:600 calc(18*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .gk-fine{margin:calc(14*var(--u)) calc(6*var(--u)) 0;text-align:center;font:400 calc(11.5*var(--u))/1.45 "Funnel Sans",var(--sans);color:#9AA1AE}
.op-case .fzs .gk-fine u{color:#6B7280}
@media (prefers-reduced-motion:reduce){.op-case .fzs .gk-sheet{transform:none;transition:none}.op-case .fzs .gk-dim{opacity:1;transition:none}.op-case .fzs .gk-b{scale:1;transition:none}.op-case .fzs .gk-f,.op-case .fzs .gk-eyes b{animation:none}}
/* blob pile driven by a tiny physics sim (see "gk physics" script) */
.op-case .fzs .gk-blobs.gk-sim .gk-b{left:0;top:0;scale:1;rotate:none;transition:none;will-change:transform}
.op-case .fzs .gk-blobs.gk-sim .gk-f{animation:none}
.op-case .fzs .gk-blobs.gk-sim .gk-eyes{rotate:none;transition:translate .25s ease}
/* tokens: what you can invest in, plus two pills */
.op-case .fzs .gk-g{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;rotate:calc(var(--r)*-1)}
.op-case .fzs .gk-blobs.gk-sim .gk-g{rotate:none}
.op-case .fzs .gk-b.gk-pill{width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.op-case .fzs .gk-pill .gk-f{border-radius:99px;font:700 calc(19*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.01em;white-space:nowrap}
.op-case .fzs .gk-p-dark .gk-f{background:#0B1220;color:#fff}
.op-case .fzs .gk-p-light .gk-f{background:#fff;color:#1F69FF;box-shadow:inset 0 0 0 calc(2*var(--u)) #1F69FF}
/* background app: avatar + fund icons */
.op-case .fzs .gk-av{display:block;overflow:hidden;background:none}
.op-case .fzs .gk-av img{display:block;width:100%;height:100%;object-fit:cover}
.op-case .fzs .gk-ic{display:grid;place-items:center}
.op-case .fzs .gk-ic svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-case .fzs .gk-ic.c1{background:#1F69FF}.op-case .fzs .gk-ic.c2{background:#3DD9A7}
.op-case .fzs .gk-ic.c0{background:#EEF3FF}
.op-case .fzs .gk-mark.gk-mark-ic{width:calc(30*var(--u));height:calc(30*var(--u))}
/* projection: growth chip + scenario figures fill the space above the chart */






/* portfolio screen: holdings as ticker pills, one expands into a live card and scrubs through the day */
.op-case .fzs .vx.vx-pf{--u:calc(100cqw / 393);position:absolute;inset:0;display:flex;flex-direction:column;padding:0 calc(20*var(--u)) calc(22*var(--u));background:#F5F6F8;font-family:"Funnel Sans",var(--sans);color:#0B1220;overflow:hidden;font-variant-numeric:tabular-nums}
.op-case .fzs .vx-pf .gk-status{margin:0 calc(-10*var(--u))}





.op-case .fzs .pf-cap2{margin-top:calc(20*var(--u))}












.op-case .fzs .pf-d.up,.op-case .fzs .pf-chg.up{color:#0E9F6E}.op-case .fzs .pf-d.dn,.op-case .fzs .pf-chg.dn{color:#E5484D}












.op-case .fzs .pf-big{display:block;margin-top:calc(2*var(--u));font:600 calc(32*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.03em}
.op-case .fzs .pf-chg{display:block;margin-top:calc(7*var(--u));font:600 calc(13*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .pf-when{display:block;margin-top:calc(5*var(--u));font:500 calc(12*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;color:#9AA1AE}

.op-case .fzs .pf-open{stroke:#C9CED6;stroke-width:1;stroke-dasharray:2 3}

.op-case .fzs .pf-rest{stroke:#D3D8DF}.op-case .fzs .pf-done{stroke:#0E9F6E}.op-case .fzs .pf-area{fill:url(#pfArea)}

.op-case .fzs .pf-scrub{stroke:#0B1220;stroke-opacity:.25;stroke-width:1;vector-effect:non-scaling-stroke}
.op-case .fzs .pf-dot{fill:#fff;stroke:#0E9F6E;stroke-width:2.5;vector-effect:non-scaling-stroke}






/* funding flow (Plasma pattern): hub sheet → bank transfer (full height) → back → debit card → back */
.op-case .fzs .vx.vx-am3{--u:calc(100cqw / 393);position:absolute;inset:0;display:block;padding:0;background:#F5F6F8;font-family:"Funnel Sans",var(--sans);color:#0B1220;overflow:hidden}
.op-case .fzs .vx-am3 .gk-status{padding:0 calc(32*var(--u))}
.op-case .fzs .am3-app{padding:0 calc(22*var(--u));text-align:center}
.op-case .fzs .am3-top{display:flex;margin-top:calc(4*var(--u))}
.op-case .fzs .am3-cap{display:block;margin-top:calc(10*var(--u));font:500 calc(15*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;color:#6B7280}
.op-case .fzs .am3-zero{display:block;margin-top:calc(10*var(--u));font:600 calc(46*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.035em}
.op-case .fzs .am3-dim{position:absolute;inset:0;background:rgba(11,18,32,.22);opacity:0;transition:opacity .5s ease}
.op-case .fzs .vx-am3.is-on .am3-dim{opacity:1}
.op-case .fzs .vx-am3[data-st="b"] .am3-dim{background:rgba(11,18,32,.32)}
.op-case .fzs .am3-sheet{position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));top:calc(100% - 560*var(--u));border-radius:calc(40*var(--u));background:#FAFAFA;box-shadow:0 calc(-6*var(--u)) calc(30*var(--u)) rgba(11,18,32,.12);overflow:hidden;transform:translateY(110%);
  transition:transform .85s cubic-bezier(.2,.8,.2,1) .15s,top .6s cubic-bezier(.3,.7,.2,1),left .6s cubic-bezier(.3,.7,.2,1),right .6s cubic-bezier(.3,.7,.2,1),bottom .6s cubic-bezier(.3,.7,.2,1),border-radius .6s ease}
.op-case .fzs .vx-am3.is-on .am3-sheet{transform:none}
.op-case .fzs .vx-am3[data-st="b"] .am3-sheet{top:calc(62*var(--u))}
.op-case .fzs .vx-am3[data-st="c"] .am3-sheet{top:calc(100% - 520*var(--u))}
.op-case .fzs .am3-grab{position:absolute;top:calc(9*var(--u));left:50%;width:calc(40*var(--u));height:calc(5*var(--u));margin-left:calc(-20*var(--u));border-radius:9px;background:#D1D4D9;z-index:2}
.op-case .fzs .am3-l{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:calc(22*var(--u)) calc(20*var(--u)) calc(22*var(--u));text-align:center;opacity:0;visibility:hidden;transform:translateY(calc(10*var(--u)));transition:opacity .3s ease,transform .45s ease,visibility 0s linear .3s}
.op-case .fzs .vx-am3[data-st="a"] .l-a,.op-case .fzs .vx-am3[data-st="b"] .l-b,.op-case .fzs .vx-am3[data-st="c"] .l-c{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .22s,transform .5s ease .22s,visibility 0s}
.op-case .fzs .am3-l.l-b{padding-bottom:calc(30*var(--u))}
.op-case .fzs .am3-nav{align-self:stretch;display:flex;justify-content:space-between;align-items:center;min-height:calc(40*var(--u))}
.op-case .fzs .am3-nav > i{width:calc(40*var(--u))}
.op-case .fzs .am3-btn{width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(11,18,32,.08);transition:transform .15s ease,background .15s ease}
.op-case .fzs .am3-btn.press{transform:scale(.88);background:#EEF0F3}
.op-case .fzs .am3-btn svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:#0B1220;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-case .fzs .am3-ttl{font:500 calc(16*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .am3-ring{position:relative;width:calc(300*var(--u));height:calc(104*var(--u));margin-top:calc(12*var(--u));perspective:calc(700*var(--u));flex:0 0 auto}
.op-case .fzs .am3-ring.r-b,.op-case .fzs .am3-ring.r-c{margin-top:calc(26*var(--u));height:calc(110*var(--u))}
.op-case .fzs .am3-rot{position:absolute;inset:0;transform-style:preserve-3d;animation:am3Spin 9s linear infinite}
.op-case .fzs .r-b .am3-rot{animation-duration:7s}.op-case .fzs .r-c .am3-rot{animation-duration:6s}
@keyframes am3Spin{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
.op-case .fzs .am3-coin{position:absolute;left:50%;top:50%;width:calc(var(--cs)*var(--u));height:calc(var(--cs)*var(--u));margin:calc(var(--cs)*var(--u)*-.5) 0 0 calc(var(--cs)*var(--u)*-.5);transform-style:preserve-3d;transform:rotateY(var(--a)) translateZ(calc(var(--R)*var(--u)))}
.op-case .fzs .am3-f{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 46%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.18),rgba(0,0,0,0) 55%),var(--c);box-shadow:inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.35);backface-visibility:hidden}
.op-case .fzs .am3-b{transform:rotateY(180deg)}
.op-case .fzs .am3-f svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-case .fzs .am3-h{margin:calc(20*var(--u)) 0 0;font:600 calc(25*var(--u))/1.15 "Funnel Sans",var(--sans);letter-spacing:-.02em}
.op-case .fzs .l-b .am3-h,.op-case .fzs .l-c .am3-h{margin-top:calc(28*var(--u))}
.op-case .fzs .am3-desc{margin:calc(8*var(--u)) calc(14*var(--u)) 0;font:400 calc(15*var(--u))/1.4 "Funnel Sans",var(--sans);color:#6B7280}
.op-case .fzs .am3-opt{align-self:stretch;display:flex;align-items:center;gap:calc(12*var(--u));margin-top:calc(12*var(--u));padding:calc(15*var(--u)) calc(16*var(--u));border-radius:calc(20*var(--u));background:#fff;box-shadow:inset 0 0 0 1px #ECEEF1;text-align:left;transition:transform .15s ease,background .15s ease}
.op-case .fzs .am3-opt.o1{margin-top:calc(20*var(--u))}
.op-case .fzs .am3-opt.press{transform:scale(.97);background:#F1F3F6}
.op-case .fzs .am3-txt{flex:1;display:flex;flex-direction:column;gap:calc(4*var(--u))}
.op-case .fzs .am3-txt b{font:600 calc(16*var(--u))/1.2 "Funnel Sans",var(--sans)}.op-case .fzs .am3-txt em{font:400 calc(13*var(--u))/1.2 "Funnel Sans",var(--sans);font-style:normal;color:#6B7280}
.op-case .fzs .am3-opt u{text-decoration:none;font-size:calc(24*var(--u));color:#9AA1AE}
.op-case .fzs .am3-minis{display:flex;margin-top:calc(6*var(--u))}
.op-case .fzs .am3-minis i{width:calc(24*var(--u));height:calc(24*var(--u));margin-right:calc(-6*var(--u));border-radius:50%;display:grid;place-items:center;background:var(--c);box-shadow:0 0 0 calc(2*var(--u)) #fff}
.op-case .fzs .am3-minis svg{width:56%;height:56%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.op-case .fzs .am3-card{align-self:stretch;margin-top:calc(24*var(--u));border-radius:calc(20*var(--u));background:#fff;box-shadow:inset 0 0 0 1px #ECEEF1;text-align:left}
.op-case .fzs .am3-step{display:flex;gap:calc(14*var(--u));padding:calc(16*var(--u)) calc(18*var(--u))}
.op-case .fzs .am3-step + .am3-step{border-top:1px solid #ECEEF1}
.op-case .fzs .am3-step i{flex:0 0 auto;width:calc(18*var(--u));height:calc(18*var(--u));margin-top:calc(1*var(--u));border-radius:50%;display:grid;place-items:center;background:#3B3F46;color:#fff;font:600 calc(11*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal}
.op-case .fzs .am3-step span{display:flex;flex-direction:column;gap:calc(4*var(--u))}
.op-case .fzs .am3-step b{font:500 calc(16*var(--u))/1.25 "Funnel Sans",var(--sans)}.op-case .fzs .am3-step em{font:400 calc(14*var(--u))/1.35 "Funnel Sans",var(--sans);font-style:normal;color:#6B7280}
.op-case .fzs .am3-note{margin:auto 0 0;padding-top:calc(16*var(--u));font:400 calc(14*var(--u))/1.3 "Funnel Sans",var(--sans);color:#7B818C}
.op-case .fzs .am3-go{align-self:stretch;display:grid;place-items:center;margin-top:calc(14*var(--u));height:calc(58*var(--u));border-radius:99px;background:linear-gradient(180deg,#3A3D43,#16181C);color:#fff;font:500 calc(17*var(--u))/1 "Funnel Sans",var(--sans);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.op-case .fzs .l-c .am3-go{margin-top:auto}
.op-case .fzs .am3-dots{display:flex;gap:calc(6*var(--u));margin-top:calc(20*var(--u))}
.op-case .fzs .am3-dots i{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#D1D4D9}.op-case .fzs .am3-dots i.on{background:#0B1220}
@media (prefers-reduced-motion:reduce){.op-case .fzs .am3-sheet{transform:none;transition:none}.op-case .fzs .am3-dim{opacity:1}.op-case .fzs .am3-rot{animation:none;transform:rotateY(-12deg)}}
/* coins with thickness; hub ring turns like a rolodex (faces run along the ring) */
.op-case .fzs .am3-f{transform:translateZ(calc(3*var(--u)))}
.op-case .fzs .am3-b{transform:rotateY(180deg) translateZ(calc(3*var(--u)))}
.op-case .fzs .am3-e{position:absolute;inset:0;border-radius:50%;background:var(--c);filter:brightness(.78);transform:translateZ(calc(var(--z)*1.2*var(--u)))}
.op-case .fzs .r-a .am3-coin{transform:rotateY(var(--a)) translateZ(calc(var(--R)*var(--u))) rotateY(90deg)}
.op-case .fzs .r-a .am3-rot{animation-duration:14s}
.op-case .fzs .am3-ring.r-a{height:calc(118*var(--u));margin-top:calc(14*var(--u));perspective:calc(560*var(--u))}
.op-case .fzs .am3-l.l-a{padding-bottom:calc(34*var(--u))}
.op-case .op-shots--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.op-case .fzs .op-shot3{position:relative;container-type:inline-size;margin:0;aspect-ratio:386/532;border-radius:16px;background:linear-gradient(180deg,#fbfbfb 0%,#f9f9f9 100%);box-shadow:inset 0 0 0 1px #f0f0f0;overflow:hidden;isolation:isolate;perspective:1200px}
.op-case .fzs .op-shot3 .trio__device{position:absolute;left:50%;top:50%;width:58cqw;translate:-50% -50%;z-index:1;border-radius:9cqw;box-shadow:0 0 0 1px rgba(11,11,11,.06),0 2cqw 4cqw rgba(11,11,11,.16)!important}
.op-case .fzs .op-shot3 .trio__screen{inset:3.4cqw;border-radius:12.5cqw}
.op-case .fzs .op-shot3 .trio__island{top:6cqw;width:29cqw;height:8.6cqw}
.op-case .fzs .op-shot3 .trio__device{opacity:0;transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.16,1,.3,1);translate:-50% -44%}
.op-case.play .fzs .op-shot3 .trio__device{opacity:1;translate:-50% -50%}
.op-case.play .fzs .op-shot3:nth-child(2) .trio__device{transition-delay:.12s}.op-case.play .fzs .op-shot3:nth-child(3) .trio__device{transition-delay:.24s}
.op-case.play .fzs .op-shot3 .trio__device:not(.is-live){animation:fzFloat3 7s ease-in-out infinite}
.op-case.play .fzs .op-shot3:nth-child(2) .trio__device:not(.is-live){animation-delay:-2.3s}.op-case.play .fzs .op-shot3:nth-child(3) .trio__device:not(.is-live){animation-delay:-4.6s}
@keyframes fzFloat3{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
.op-case .fzs .op-shot3:nth-child(2) .fz-tone{animation-delay:-37s}.op-case .fzs .op-shot3:nth-child(3) .fz-tone{animation-delay:-74s}
@media (max-width:900px){.op-case .op-shots--3{gap:8px}}
@media (max-width:600px){.op-case .op-shots--3{grid-template-columns:1fr}.op-case .fzs .op-shot3{aspect-ratio:386/520}.op-case .fzs .op-shot3 .trio__device{width:56cqw}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .op-shot3 .trio__device{opacity:1;translate:-50% -50%;transition:none;animation:none!important}}

/* second row: two wider containers, same phone proportion */
.op-case .op-shots--2 .op-shot3{aspect-ratio:386/430}
.op-case .op-shots--2 .op-shot3 .trio__device{width:47cqw;border-radius:7.3cqw}
@media (max-width:600px){.op-case .op-shots--2 .op-shot3{aspect-ratio:386/480}.op-case .op-shots--2 .op-shot3 .trio__device{width:52cqw;border-radius:8cqw}}
.op-case .op-shots--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(40px,4.6vw,64px)}
@media (max-width:600px){.op-case .op-shots--2{grid-template-columns:1fr}}
.op-case .op-reach2{margin-top:0!important}
.op-case .op-reach1{margin-bottom:0!important}

/* case-reach:start */
.op-case .t2-fly{offset-rotate:0deg;offset-distance:0%;opacity:0}
.op.play .t2-fly{animation:t2Fly 2.4s linear infinite}
@keyframes t2Fly{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.op-case .t2-fly{opacity:1;offset-distance:100%;animation:none!important}}

/* finna: pins drop, the crowd answers, the phone switches on */
.op-case .rc-pin{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(-26px)}
.op.play .rc-pin{animation:rcDrop .5s cubic-bezier(.3,1.4,.5,1) forwards}
.op.play .rc-pin.p1{animation-delay:.5s}.op.play .rc-pin.p2{animation-delay:.6s}.op.play .rc-pin.p3{animation-delay:.7s}.op.play .rc-pin.p4{animation-delay:.8s}.op.play .rc-pin.p5{animation-delay:.9s}.op.play .rc-pin.p6{animation-delay:1s}.op.play .rc-pin.p7{animation-delay:1.1s}
@keyframes rcDrop{to{opacity:1;transform:none}}
.op-case .rc-man .rc-body,.op-case .rc-man .rc-head{fill:#FFFFFF;stroke:#A6A6A6;stroke-width:1.2;transition:fill .3s ease,stroke .3s ease}
.op.play .rc-man.rc-yes .rc-body,.op.play .rc-man.rc-yes .rc-head{fill:#1F69FF;stroke:#1650C7;transition-delay:var(--d)}
.op-case .rc-chip{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(8px) scale(.85);transition:opacity .4s ease 3.4s,transform .5s cubic-bezier(.3,1.4,.5,1) 3.4s}
.op.play .rc-chip{opacity:1;transform:none}
.op-case .rc-chip.rc-c1{transition-delay:1.3s,1.3s}
.op-case .rc-scr,.op-case .rc-mark{opacity:0;transition:opacity .5s ease 3.6s}
.op.play .rc-scr,.op.play .rc-mark{opacity:1}
.op-case .rc-go{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.3)}
.op.play .rc-go{animation:rcGo .6s cubic-bezier(.3,1.4,.5,1) 4.1s forwards}
@keyframes rcGo{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.op-case .rc-pin,.op-case .rc-go{opacity:1;transform:none;animation:none!important}.op-case .rc-chip,.op-case .rc-scr,.op-case .rc-mark{opacity:1;transform:none;transition:none}.op-case .rc-man.rc-yes .rc-body,.op-case .rc-man.rc-yes .rc-head{fill:#1F69FF;stroke:#1650C7;transition:none}}

/* danzee: Danzee palette — the crowd answers in the app's colours */
#op-case-danzee .rc-man .rc-body,#op-case-danzee .rc-man .rc-head{fill:#FFFFFF;stroke:#A6A6A6;stroke-width:1.2}
.op.play#op-case-danzee .rc-man.rc-yes .rc-body,.op.play#op-case-danzee .rc-man.rc-yes .rc-head{fill:var(--c);stroke:#A6A6A6}
@media (prefers-reduced-motion:reduce){#op-case-danzee .rc-man.rc-yes .rc-body,#op-case-danzee .rc-man.rc-yes .rc-head{fill:var(--c);stroke:#A6A6A6}}

/* meld: the crowd answers in Meld red */
.op.play#op-case-meld .rc-man.rc-yes .rc-body,.op.play#op-case-meld .rc-man.rc-yes .rc-head{fill:#F05C5E;stroke:#C94446}
@media (prefers-reduced-motion:reduce){#op-case-meld .rc-man.rc-yes .rc-body,#op-case-meld .rc-man.rc-yes .rc-head{fill:#F05C5E;stroke:#C94446}}
/* case-reach:end */
.op-case .t2-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.op-case .t2-art{display:block;width:100%;height:auto;overflow:visible}
.op-case .t2-list{list-style:none;margin:0;padding:0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.op-case .t2-list li{display:flex;align-items:flex-start;justify-content:center;opacity:.35;transition:opacity .8s ease}
.op-case .t2-list p{margin:0;max-width:300px;font-size:15px;line-height:1.5;color:var(--ink)}
.op-case .t2-tile,.op-case .t2-icon{transform-box:fill-box;transform-origin:50% 62%}
.op-case .t2-lit-tile{opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.op-case .t2-grey{transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.op-case .t2-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.op-case .t2-track{animation:t2Run 1.1s linear infinite}
.op-case .t2-lit{transition:stroke-dashoffset .75s cubic-bezier(.4,0,.2,1)}
.op-case .t2-head{opacity:0;transition:opacity .5s ease}
/* sequence after the dialog opens */
.op.play .t2-l1{opacity:1;transition-delay:.3s}.op.play .t2-g1{opacity:0;transition-delay:.3s}
.op.play .t2-lit1{stroke-dashoffset:0;transition-delay:1s}.op.play .t2-head1{opacity:1;transition-delay:1.6s}
.op.play .t2-l2{opacity:1;transition-delay:1.7s}.op.play .t2-g2{opacity:0;transition-delay:1.7s}
.op.play .t2-lit2{stroke-dashoffset:0;transition-delay:2.4s}.op.play .t2-head2{opacity:1;transition-delay:3s}
.op.play .t2-l3{opacity:1;transition-delay:3.1s}.op.play .t2-g3{opacity:0;transition-delay:3.1s}
.op.play .t2-glow{animation:t2GlowIn 1.4s ease-out 3.1s forwards,t2GlowPulse 3s cubic-bezier(.45,0,.55,1) 4.5s infinite}
.op.play .t2-l1,.op.play .t2-i1{animation:t2Pop 1.6s cubic-bezier(.45,0,.55,1) .3s}
.op.play .t2-l2,.op.play .t2-i2{animation:t2Pop 1.6s cubic-bezier(.45,0,.55,1) 1.7s}
.op.play .t2-l3,.op.play .t2-i3{animation:t2Pop 1.6s cubic-bezier(.45,0,.55,1) 3.1s,t2Pulse 3s cubic-bezier(.45,0,.55,1) 4.7s infinite}
.op.play .t2-list li:nth-child(1){opacity:1;transition-delay:.3s}.op.play .t2-list li:nth-child(2){opacity:1;transition-delay:1.7s}.op.play .t2-list li:nth-child(3){opacity:1;transition-delay:3.1s}
@keyframes t2Run{from{stroke-dashoffset:0}to{stroke-dashoffset:-7}}
@keyframes t2Pop{50%{transform:scale(1.06)}}
@keyframes t2Pulse{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.065) translateY(-2px)}}
@keyframes t2GlowIn{from{opacity:0;transform:scale(.9)}to{opacity:.45;transform:scale(.95)}}
@keyframes t2GlowPulse{0%,100%{opacity:.45;transform:scale(.95)}50%{opacity:.9;transform:scale(1.06)}}
@media (max-width:600px){.op-case .t2-list{grid-template-columns:minmax(0,1fr);gap:12px;padding:0}.op-case .t2-list li{justify-content:flex-start}.op-case .t2-list p{max-width:none}}
@media (prefers-reduced-motion:reduce){.op-case .t2-track,.op.play .t2-head,.op.play .t2-glow,.op.play .t2-tile,.op.play .t2-icon{animation:none!important}.op.play .t2-glow{opacity:.45}.op.play .t2-list li{opacity:1}}
.op-case .op-offer-vis{position:relative;aspect-ratio:1.4/1;display:grid;place-items:center;padding:24px;background:#fff;border-bottom:1px solid #e3e3e3;overflow:hidden}
.op-case .op-offer-vis::before{content:"";position:absolute;inset:0;z-index:0;background:url("/landing/assets/img/halftone-n-brand.svg?v=1") 100% 0/480px 96px no-repeat;opacity:.7;pointer-events:none}
.op-case .mini{position:relative;z-index:1;width:min(100%,250px);padding:14px;border-radius:12px;background:#fff;box-shadow:0 18px 40px -18px rgba(11,11,11,.35),0 0 0 1px #ececea;font-family:var(--sans);color:var(--ink)}
/* 1 · assumptions get picked one by one */








/* 2 · progress fills, then the histogram grows */










/* 3 · the insight card with the decision gauge */













@keyframes mxRow{0%,8%{opacity:0;transform:translateY(6px)}14%,100%{opacity:1;transform:none}}
@keyframes mxRowOn{0%,8%{opacity:0;transform:translateY(6px);border-color:#ececea;color:#55554f}14%,24%{opacity:1;transform:none;border-color:#ececea;color:#55554f}30%,92%{opacity:1;transform:none;border-color:var(--ink);color:var(--ink)}100%{opacity:1;border-color:#ececea;color:#55554f}}
@keyframes mxTick{0%,24%{transform:scale(0)}30%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxGrowX{0%,5%{transform:scaleX(0)}30%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes mxGrowY{0%,20%{transform:scaleY(0)}32%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes mxFade{0%,38%{opacity:0}46%,92%{opacity:1}100%{opacity:0}}
@keyframes mxPin{0%,6%{left:12%}34%,92%{left:88%}100%{left:12%}}
@keyframes mxPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.op-case .mx-opt,.op-case .mx-opt.on b,.op-case .mx-prog i b,.op-case .mx-bars i,.op-case .mx-mark,.op-case .mx-gz s,.op-case .mx-ins-h em s{animation:none!important}}

@media (max-width:900px){.op-case .op-shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.op-case .op-offers-grid{grid-template-columns:1fr}body .op.op-case .op-story.op-vis{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:600px){.op-case .op-shots{grid-template-columns:1fr}.op-case .op-shots,.op-case .op-offers{margin-top:32px}}


/* success stories: a horizontal rail of quote cards with arrows next to the heading (swipe on touch) */
.case .c-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.case .c-headrow .c-head{margin:0}
.case .c3-nav{display:flex;align-items:center;gap:8px;flex:none}
.case .c3-count{margin-right:8px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:rgba(11,11,11,.5)}
.case .c3-count b{font-weight:400;color:var(--ink)}
.case .c3-arr{position:relative;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--grey);color:var(--ink);cursor:pointer;transition:background-color .2s ease,opacity .25s ease}
.case .c3-arr svg{position:absolute;inset:0;margin:auto;width:22px;height:22px;transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.case .c3-arr .tb{width:36px;height:36px;opacity:0;transform:scale(.3)}
.case .c3-arr .tb g{animation:reelspin 2.6s linear infinite;animation-play-state:paused;transform-origin:0 0}
.case .c3-prev .tb g{animation-direction:reverse}
.case .c3-arr:not(:disabled):hover,.case .c3-arr:not(:disabled):focus-visible{background:var(--hot);color:var(--ink)}
.case .c3-arr:not(:disabled):hover .ar,.case .c3-arr:not(:disabled):focus-visible .ar{opacity:0;transform:scale(.3)}
.case .c3-arr:not(:disabled):hover .tb,.case .c3-arr:not(:disabled):focus-visible .tb{opacity:1;transform:none}
.case .c3-arr:not(:disabled):hover .tb g,.case .c3-arr:not(:disabled):focus-visible .tb g{animation-play-state:running}
.case .c3-arr:disabled{opacity:.35;cursor:default}
.case .c3-rail{position:relative;margin-top:clamp(64px,6vw,88px)}
.case .c3-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
.case .c3-track::-webkit-scrollbar{display:none}
.case .c3-track > .case3{flex:0 0 100%;margin-top:0!important;scroll-snap-align:start}
.case .c3-track > .case3::before{display:none}
@media (max-width:720px){.case .c-headrow{flex-direction:column;align-items:flex-start;gap:16px}.case .c3-nav{align-self:flex-end}}
@media (prefers-reduced-motion:reduce){.case .c3-track{scroll-behavior:auto}}

/* Danzee case: screen placeholders until the real screens arrive */





/* Danzee screens — rebuilt 1:1 from the Figma frames (get_design_context), Figma px × --s */
.op-case .fzs .trio__screen:has(.z2){container-type:size}
.op-case .fzs .vx.z2{position:absolute;inset:0;display:block;padding:0;background:#eaeaea;overflow:hidden;font-family:"Inter Tight","Inter",system-ui,sans-serif;color:#000;text-align:left;letter-spacing:0}
.op-case .fzs .z-fit{--s:min(calc(100cqw / 402),calc(100cqh / 874));position:absolute;left:50%;top:0;width:calc(402*var(--s));height:calc(874*var(--s));transform:translateX(-50%);background:#eaeaea;overflow:hidden}
.op-case .fzs .z2 img{display:block;max-width:none}
/* status bar */
.op-case .fzs .z-sb{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;width:calc(402*var(--s));height:calc(54*var(--s));padding-top:calc(21*var(--s));box-sizing:border-box}
.op-case .fzs .z-time{flex:1;padding-right:calc(58*var(--s));text-align:center;font:590 calc(17*var(--s))/calc(22*var(--s)) -apple-system,"SF Pro Text",system-ui,sans-serif;color:#131312}
.op-case .fzs .z-isl{width:calc(124*var(--s));height:calc(10*var(--s))}
.op-case .fzs .z-lv{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:calc(7*var(--s));padding-right:calc(16*var(--s))}
.op-case .fzs .z-lv .c{width:calc(19.2*var(--s));height:calc(12.226*var(--s))}.op-case .fzs .z-lv .w{width:calc(17.142*var(--s));height:calc(12.328*var(--s))}.op-case .fzs .z-lv .b{width:calc(27.328*var(--s));height:calc(13*var(--s))}
/* home */
.op-case .fzs .z-hcol{position:absolute;left:calc(8*var(--s));right:calc(8*var(--s));top:0;bottom:calc(311*var(--s));display:flex;flex-direction:column;gap:calc(16*var(--s))}
.op-case .fzs .z-hhd{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(64*var(--s)) calc(12*var(--s)) 0}
.op-case .fzs .z-hhd p{margin:0;display:flex;flex-direction:column}
.op-case .fzs .z-hhd b{font:700 calc(48*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;color:#000}.op-case .fzs .z-hhd b + b{color:#a19fa2}
.op-case .fzs .z-av{width:calc(40*var(--s));height:calc(40*var(--s));margin-top:calc(4*var(--s));border-radius:50%;background:#dbdbdb;display:grid;place-items:center}
.op-case .fzs .z-av img{width:calc(20*var(--s));height:calc(20*var(--s))}
.op-case .fzs .z-streak{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:calc(20*var(--s)) calc(16*var(--s)) calc(24*var(--s));border-radius:calc(16*var(--s));background:#d5d0cd}
.op-case .fzs .z-hsk{display:grid;place-items:center;width:calc(68*var(--s));height:calc(68*var(--s));border:calc(1.5*var(--s)) dashed rgba(0,0,0,.15);border-radius:50%;box-sizing:border-box;font:700 calc(16*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-sbot{display:flex;flex-direction:column;gap:calc(20*var(--s))}
.op-case .fzs .z-num{display:flex;flex-direction:column;gap:calc(8*var(--s))}
.op-case .fzs .z-roll{display:block;height:calc(53*var(--s));overflow:hidden;font:700 calc(48*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-roll i{display:block;font-style:normal;transition:transform .55s cubic-bezier(.6,-.35,.3,1.35) 1.6s}
.op-case .fzs .vx.is-on .z-roll i{transform:translateY(-100%)}
.op-case .fzs .z-days{display:flex;justify-content:space-between;align-items:center}
.op-case .fzs .z-days span{display:flex;align-items:center;gap:calc(6*var(--s));font:700 calc(20*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-days span img{width:calc(13.686*var(--s));height:calc(16.25*var(--s))}
.op-case .fzs .z-days em{font:600 calc(16*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;font-style:normal;color:rgba(0,0,0,.5)}
.op-case .fzs .z-dots{display:flex;flex-wrap:wrap;gap:calc(3*var(--s))}
.op-case .fzs .z-dots > i{position:relative;width:calc(12.429*var(--s));height:calc(12.429*var(--s));border-radius:50%;background:#c9c2bd;transition:background .2s ease calc(var(--n)*8ms)}
.op-case .fzs .vx.is-on .z-dots > i.d{background:#464646}.op-case .fzs .vx.is-on .z-dots > i.l{background:#b4aca6}
.op-case .fzs .z-dots > i.o{transform:scale(.3);transition:background .2s ease,transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(1.4s + (var(--n) - 168)*55ms)}
.op-case .fzs .vx.is-on .z-dots > i.o{background:#f86744;transform:none}
.op-case .fzs .z-dots > i.now{background:none!important}
.op-case .fzs .z-dots > i.now i{position:absolute;left:50%;top:50%;width:calc(14.43*var(--s));height:calc(14.43*var(--s));margin:calc(-6.79*var(--s)) 0 0 calc(-6.79*var(--s));border-radius:50%;background:#f86744}
.op-case .fzs .vx.is-on .z-dots > i.now i{animation:zPulse 1.4s ease-in-out 2.4s infinite}
@keyframes zPulse{50%{box-shadow:0 0 0 calc(5*var(--s)) rgba(248,103,68,.25)}}
.op-case .fzs .z-tiles{position:absolute;left:calc(8*var(--s));right:calc(8*var(--s));bottom:calc(8*var(--s));height:calc(287*var(--s));display:flex;gap:calc(4*var(--s))}
.op-case .fzs .z-tile{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:calc(20*var(--s)) calc(16*var(--s)) calc(24*var(--s));border-radius:calc(16*var(--s));background:#f56f51;transition:scale .15s ease}
.op-case .fzs .z-tile.t2{background:#282828;color:#fff}
.op-case .fzs .z-tile.press{scale:.97}
.op-case .fzs .z-tt2{display:flex;justify-content:space-between;align-items:flex-start}
.op-case .fzs .z-tt2 img{width:calc(40*var(--s));height:calc(40*var(--s))}
.op-case .fzs .z-dash60{display:grid;place-items:center;width:calc(60*var(--s));height:calc(60*var(--s));border:calc(1.5*var(--s)) dashed rgba(0,0,0,.2);border-radius:50%;box-sizing:border-box;font:700 calc(30*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .t2 .z-dash60{border-color:rgba(255,255,255,.2)}
.op-case .fzs .z-tb{display:flex;flex-direction:column;gap:calc(12*var(--s))}.op-case .fzs .t2 .z-tb{gap:calc(8*var(--s))}
.op-case .fzs .z-tb b{font:700 calc(32*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-tb em{font:600 calc(16*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;font-style:normal;color:rgba(0,0,0,.5)}.op-case .fzs .t2 .z-tb em{color:rgba(255,255,255,.5)}
.op-case .fzs .z-xp{position:absolute;inset:0;z-index:5;clip-path:inset(var(--t,560px) var(--r,200px) var(--b,8px) var(--l,8px) round calc(16*var(--s)));visibility:hidden;opacity:0;transition:clip-path .5s cubic-bezier(.5,0,.2,1),opacity .3s ease,visibility 0s linear .5s}
.op-case .fzs .z-home.xp .z-xp{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round 0);transition:clip-path .5s cubic-bezier(.5,0,.2,1),opacity .28s ease,visibility 0s}
.op-case .fzs .z-xp .z-lib{opacity:0;transition:opacity .25s ease}
.op-case .fzs .z-home.xp .z-xp .z-lib{opacity:1;transition:none}
.op-case .fzs .z-xp::before{content:"";position:absolute;inset:0;background:#f56f51}
/* practice library */
.op-case .fzs .z-lib{position:absolute;inset:0;background:#eaeaea}
.op-case .fzs .z-lhd{position:absolute;left:calc(8*var(--s));right:calc(8*var(--s));top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(60*var(--s)) calc(12*var(--s)) 0}
.op-case .fzs .z-lhd b{font:700 calc(36*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;white-space:nowrap}
.op-case .fzs .z-lhd img{width:calc(24*var(--s));height:calc(24*var(--s));margin-top:calc(8*var(--s))}
.op-case .fzs .z-lstack{position:absolute;left:0;bottom:0;width:calc(402*var(--s));height:calc(746*var(--s))}
.op-case .fzs .z-bands{position:absolute;left:0;top:0;width:100%;height:calc(585*var(--s));display:flex;flex-direction:column}
.op-case .fzs .z-band{display:flex;align-items:center;gap:calc(12*var(--s));margin-bottom:calc(-35*var(--s));padding:calc(16*var(--s)) calc(16*var(--s)) calc(54*var(--s));border-radius:calc(12*var(--s)) calc(12*var(--s)) 0 0;background:var(--bg);box-sizing:border-box}
.op-case .fzs .z-band:last-child{margin-bottom:0}
.op-case .fzs .z-band b{font:700 calc(24*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;white-space:nowrap}
.op-case .fzs .z-band.dk b{display:flex;align-items:center;height:calc(44*var(--s));width:calc(244*var(--s));color:#fff}
.op-case .fzs .z-capi{width:calc(46*var(--s));height:calc(46*var(--s))}
.op-case .fzs .z-dash{position:relative;flex:none;width:calc(46*var(--s));height:calc(46*var(--s));border:calc(1.157*var(--s)) dashed rgba(0,0,0,.15);border-radius:50%;box-sizing:border-box}
.op-case .fzs .z-dash img{position:absolute;left:50%;top:50%;width:calc(25*var(--s));height:calc(25*var(--s));transform:translate(-50%,-50%)}
.op-case .fzs .z-wcard{position:absolute;left:0;right:0;bottom:0;height:calc(266*var(--s));border-radius:calc(12*var(--s));background:#f56f51;overflow:hidden}
.op-case .fzs .z-wtop{position:absolute;left:calc(16*var(--s));top:calc(24*var(--s));width:calc(370*var(--s));display:flex;align-items:center;gap:calc(12.5*var(--s))}
.op-case .fzs .z-dash-l{border-width:calc(1.189*var(--s))}.op-case .fzs .z-dash-l img{width:calc(25.674*var(--s));height:calc(25.674*var(--s));margin:calc(.94*var(--s)) 0 0 calc(.53*var(--s))}
.op-case .fzs .z-wtop b{flex:1;font:700 calc(32*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.95)}
.op-case .fzs .z-larr{width:calc(40*var(--s));height:calc(30.766*var(--s));margin:calc(8*var(--s)) 0}
.op-case .fzs .z-wbox{position:absolute;left:calc(16*var(--s));top:calc(102.77*var(--s));width:calc(370*var(--s));height:calc(100*var(--s));display:flex;justify-content:center;align-items:center;padding-right:calc(45*var(--s));box-sizing:border-box;border-radius:calc(10*var(--s));background:rgba(0,0,0,.09)}
.op-case .fzs .z-zm{font:400 calc(48.914*var(--s))/1 "Zhi Mang Xing",cursive;letter-spacing:calc(3.9131*var(--s));color:rgba(0,0,0,.9);white-space:nowrap}
.op-case .fzs .z-sty{position:absolute;left:calc(242*var(--s));top:calc(-15.77*var(--s));width:calc(74.782*var(--s));height:calc(83.768*var(--s));display:grid;place-items:center}
.op-case .fzs .z-sty img{width:calc(12.823*var(--s));height:calc(99.641*var(--s));rotate:-140.62deg;scale:1 -1;transform:skewX(-1.24deg)}
.op-case .fzs .z-due{position:absolute;left:calc(16*var(--s));top:calc(218.77*var(--s));font:600 calc(16*var(--s))/1 "Inter Tight","Inter",system-ui,sans-serif;font-style:normal;letter-spacing:-.01em;color:rgba(0,0,0,.5)}
/* library motion (departure-board: rows roll in one after another, the open card last) */



@keyframes zWrite{to{transform:skewX(-1.24deg) translateY(calc(10*var(--s)))}}
/* intro card (writing / classifiers / listening) */
.op-case .fzs .z-card{position:absolute;left:calc(8*var(--s));top:calc(56*var(--s));width:calc(386*var(--s));height:calc(720*var(--s));display:flex;flex-direction:column;gap:calc(24*var(--s));padding:calc(12*var(--s)) calc(16*var(--s)) calc(16*var(--s));box-sizing:border-box;border:calc(1.212*var(--s)) solid #d6d2d0;border-radius:calc(16*var(--s));background:var(--cb);overflow:hidden}
.op-case .fzs .z-ch{display:flex;flex-direction:column;gap:calc(16*var(--s))}
.op-case .fzs .z-row{display:flex;justify-content:space-between;align-items:center}
.op-case .fzs .z-back{display:grid;place-items:center;width:calc(44*var(--s));height:calc(44*var(--s));border:1px solid rgba(0,0,0,.1);border-radius:50%;box-sizing:border-box;background:#eaeaea}
.op-case .fzs .z-back img{width:calc(24*var(--s));height:calc(24*var(--s))}
.op-case .fzs .z-pill{display:flex;align-items:center;gap:calc(7*var(--s));padding:calc(8*var(--s)) calc(13*var(--s)) calc(8*var(--s)) calc(11*var(--s));border:1px solid #ccc6c2;border-radius:calc(16*var(--s));font:600 calc(13*var(--s))/normal "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.75)}
.op-case .fzs .z-pill img{width:calc(7*var(--s));height:calc(7*var(--s))}
.op-case .fzs .z-tt{display:flex;flex-direction:column;gap:calc(8*var(--s))}
.op-case .fzs .z-tt b{font:700 calc(36*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-tt em{font:600 calc(18*var(--s))/1.1 "Inter",system-ui,sans-serif;font-style:normal;letter-spacing:-.02em;color:rgba(0,0,0,.55);white-space:pre}
.op-case .fzs .z-tab{position:relative;flex:1;border-radius:calc(16*var(--s));overflow:hidden}
.op-case .fzs .z-tbody{position:absolute;left:calc(-.21*var(--s));top:calc(-.21*var(--s));width:calc(351.369*var(--s));height:calc(539*var(--s));border-radius:calc(16*var(--s));background:var(--tb)}
.op-case .fzs .z-cam{position:absolute;left:50%;top:calc(3*var(--s));width:calc(9.794*var(--s));height:calc(9.45*var(--s));transform:translateX(-50%)}
.op-case .fzs .z-tscr{position:absolute;left:calc(30*var(--s));top:calc(34*var(--s));width:calc(291*var(--s));height:calc(517*var(--s));border-radius:calc(14.691*var(--s)) calc(14.691*var(--s)) 0 0;background:rgba(0,0,0,.09)}
.op-case .fzs .z-zl{position:absolute;left:calc(30.61*var(--s));font:400 calc(59.745*var(--s))/1 "Zhi Mang Xing",cursive;letter-spacing:calc(4.7796*var(--s));white-space:nowrap;color:rgba(0,0,0,.9)}
.op-case .fzs .z-zl.l1{top:calc(40.4*var(--s));color:#000}.op-case .fzs .z-zl.l2{top:calc(106.12*var(--s))}.op-case .fzs .z-zl.l3{top:calc(184.87*var(--s))}
.op-case .fzs .z-wsty{position:absolute;left:calc(117.65*var(--s));top:calc(34.65*var(--s));width:calc(196.544*var(--s));height:calc(225.045*var(--s));display:grid;place-items:center}
.op-case .fzs .z-wsty img{width:calc(34.005*var(--s));height:calc(265.242*var(--s));transform:rotate(40deg)}
.op-case .fzs .z-btn{position:absolute;left:calc(8*var(--s));top:calc(784*var(--s));width:calc(386*var(--s));height:calc(80*var(--s));display:flex;justify-content:center;align-items:center;gap:calc(12*var(--s));border-radius:calc(10*var(--s));background:#000;transition:scale .15s ease,opacity .35s ease}
.op-case .fzs .z-btn b{font:700 calc(18*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;color:#eaeaea;white-space:nowrap}
.op-case .fzs .z-btn img{width:calc(20*var(--s));height:calc(15.383*var(--s))}
.op-case .fzs .z-btn.press{scale:.97}
/* flow plumbing: intro (a) → colour flood → next screen (b) */
.op-case .fzs .z-a,.op-case .fzs .z-b{position:absolute;inset:0;background:#eaeaea}
/* NYC Music OS transition: a ring flashes on the tapped button, then a wave grows from the tap point —
   a band of the card colour leads, and the next screen is already revealed inside it (no flat colour flash) */
.op-case .fzs .z-b{visibility:hidden;z-index:7;opacity:0;clip-path:inset(var(--t,30%) var(--r,6%) var(--b,14%) var(--l,6%) round calc(16*var(--s)))}
.op-case .fzs .z-flow.flood .z-b{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round 0);transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .28s ease}
.op-case .fzs .z-flow.next .z-b{visibility:visible;opacity:1;clip-path:none}.op-case .fzs .z-flow.next .z-a{visibility:hidden}
.op-case .fzs .z-flood{position:absolute;inset:0;z-index:6;background:var(--fc);clip-path:circle(0px at var(--cx,50%) var(--cy,92%));visibility:hidden}
.op-case .fzs .z-flow.flood .z-flood{visibility:visible;clip-path:circle(var(--R,140%) at var(--cx,50%) var(--cy,92%));transition:clip-path .5s cubic-bezier(.5,0,.2,1)}
.op-case .fzs .z-flow.next .z-flood{visibility:hidden}
.op-case .fzs .z-btn::after{content:"";position:absolute;inset:calc(-5*var(--s));border-radius:calc(15*var(--s));box-shadow:0 0 0 calc(3*var(--s)) #fff,0 0 0 calc(4*var(--s)) rgba(0,0,0,.08);opacity:0;pointer-events:none}
.op-case .fzs .z-btn.ring::after{animation:zRing .55s cubic-bezier(.3,.7,.2,1)}
@keyframes zRing{0%{opacity:0;scale:.97}25%{opacity:1}100%{opacity:0;scale:1.05}}
/* writing — trace */
.op-case .fzs .z-tw{position:absolute;left:calc(8*var(--s));top:calc(54*var(--s));width:calc(386*var(--s));height:calc(812*var(--s));display:flex;flex-direction:column;gap:calc(8*var(--s))}
.op-case .fzs .z-panel{position:relative;flex:1;border-radius:calc(16*var(--s));background:#dbdbdb;overflow:hidden}
.op-case .fzs .z-sheet{position:absolute;inset:0;background:#dbdbdb}
.op-case .fzs .z-gsq{position:absolute;left:calc(12*var(--s));top:calc(119*var(--s));width:calc(362*var(--s));height:calc(362*var(--s));border:calc(1.714*var(--s)) solid rgba(0,0,0,.38);box-sizing:border-box}
.op-case .fzs .z-gh{position:absolute;left:calc(14.14*var(--s));top:calc(299.3*var(--s));width:calc(359.858*var(--s));height:calc(1.4*var(--s))}
.op-case .fzs .z-gv{position:absolute;left:calc(193.37*var(--s));top:calc(119*var(--s));width:calc(1.4*var(--s));height:calc(362*var(--s))}
.op-case .fzs .z-glyph{position:absolute;left:18.05%;right:18.22%;top:24.83%;bottom:24.73%}
.op-case .fzs .z-glyph img{position:absolute;left:-.1%;top:-.63%;width:100.52%;height:100.78%}
.op-case .fzs .z-ink{clip-path:inset(0 0 100% 0)}
.op-case .fzs .z-flow.go .z-ink{animation:zInk 2.6s linear .3s forwards}
@keyframes zInk{0%{clip-path:inset(0 0 100% 0)}25%,33%{clip-path:inset(0 0 79% 0)}58%,67%{clip-path:inset(0 0 41% 0)}92%,100%{clip-path:inset(0 0 0 0)}}
.op-case .fzs .z-next{transform:translateX(100%);top:calc(5*var(--s));bottom:auto;height:calc(590*var(--s))}
/* page turn 豆 → 陈: one continuous slide (was a peek, a stop, then a second slide) — the next sheet glides in while the current one drifts out slower (parallax) */
.op-case .fzs .z-flow.turn .z-next{transform:none;transition:transform .75s cubic-bezier(.65,0,.25,1)}
.op-case .fzs .z-flow.turn .z-cur{transform:translateX(calc(-300*var(--s)));transition:transform .75s cubic-bezier(.65,0,.25,1)}

.op-case .fzs .z-ngrid{position:absolute;left:calc(12*var(--s));top:calc(114*var(--s));width:calc(362*var(--s));height:calc(362*var(--s))}
.op-case .fzs .z-nglyph{position:absolute;left:18.13%;right:18.13%;top:28.85%;bottom:28.98%}
.op-case .fzs .z-nglyph img{position:absolute;left:-.11%;top:-.87%;width:100.52%;height:101.18%}
.op-case .fzs .z-edge{position:absolute;left:0;top:0;width:calc(1.2*var(--s));height:calc(600*var(--s));background:rgba(255,255,255,.7)}
.op-case .fzs .z-pback{position:absolute;left:calc(16*var(--s));top:calc(12*var(--s));z-index:2}
.op-case .fzs .z-seg{position:absolute;left:calc(272*var(--s));top:calc(12*var(--s));z-index:2;display:flex;gap:calc(6*var(--s));padding:calc(4*var(--s));border:1px solid rgba(0,0,0,.1);border-radius:calc(100*var(--s))}
.op-case .fzs .z-seg > span{position:relative;display:grid;place-items:center;width:calc(44*var(--s));height:calc(44*var(--s));border-radius:calc(22*var(--s));background:#eaeaea}
.op-case .fzs .z-seg b{font:500 calc(21.758*var(--s))/normal "Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;color:rgba(0,0,0,.85)}
.op-case .fzs .z-gbtn{position:relative;width:calc(22*var(--s));height:calc(22*var(--s))}
.op-case .fzs .z-gbtn i:nth-child(1){position:absolute;inset:0;border:calc(1.925*var(--s)) solid rgba(0,0,0,.85);box-sizing:border-box}
.op-case .fzs .z-gbtn i:nth-child(2){position:absolute;left:calc(10.04*var(--s));top:0;width:calc(1.925*var(--s));height:calc(22*var(--s));background:rgba(0,0,0,.85)}
.op-case .fzs .z-gbtn i:nth-child(3){position:absolute;left:0;top:calc(10.04*var(--s));width:calc(22*var(--s));height:calc(1.925*var(--s));background:rgba(0,0,0,.85)}
.op-case .fzs .z-wbot{display:flex;flex-direction:column;gap:calc(12*var(--s))}
.op-case .fzs .z-crow{display:flex;align-items:center;gap:calc(20*var(--s));padding:calc(20*var(--s)) calc(16*var(--s));border-radius:calc(12*var(--s));background:#dbdbdb}
.op-case .fzs .z-crow > b{font:700 calc(26*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;white-space:nowrap}
.op-case .fzs .z-chips{display:flex;align-items:center;gap:calc(6*var(--s))}
.op-case .fzs .z-c72{position:relative;display:grid;place-items:center;width:calc(72*var(--s));height:calc(72*var(--s));border:calc(2.499*var(--s)) dashed rgba(0,0,0,.15);border-radius:50%;box-sizing:border-box;transition:border-color .3s ease}
.op-case .fzs .z-c56{display:grid;place-items:center;width:calc(56*var(--s));height:calc(56*var(--s));border-radius:50%;background:#f76743;font:500 calc(25.455*var(--s))/1.1 "Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif}
.op-case .fzs .z-cring{position:absolute;left:calc(-6.75*var(--s));top:calc(-6.75*var(--s));width:calc(100% + 13.5*var(--s));height:calc(100% + 13.5*var(--s));opacity:0;transition:opacity .35s ease}
.op-case .fzs .z-c48{display:grid;place-items:center;width:calc(48*var(--s));height:calc(48*var(--s));border-radius:50%;background:#ccc6c2;font:500 calc(21.818*var(--s))/1.1 "Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;color:#646464}
.op-case .fzs .z-wbot .z-btn{position:relative;left:auto;top:auto;width:100%;opacity:.5;gap:calc(16*var(--s))}
.op-case .fzs .z-flow.done .z-cont{opacity:1}
.op-case .fzs .z-flow.done .z-cring{opacity:1}.op-case .fzs .z-flow.done .z-c72{border-color:transparent}
/* classifiers — intro pieces + quiz */
.op-case .fzs .z-pbot{position:absolute;left:calc(70*var(--s));top:calc(277*var(--s));width:calc(212*var(--s));height:calc(154*var(--s))}
.op-case .fzs .z-pbot img{position:absolute;left:-5.07%;top:-5.03%;width:110.14%;height:113.96%}
.op-case .fzs .z-ptop{position:absolute;left:calc(70*var(--s));top:calc(107*var(--s));width:calc(212*var(--s));height:calc(172.5*var(--s));transform:translateY(calc(-40*var(--s)));transition:transform .55s cubic-bezier(.3,1.4,.5,1) .5s}
.op-case .fzs .z-cls.is-on .z-ptop{transform:none}
.op-case .fzs .z-ptop img{position:absolute;left:-5.07%;top:-4.49%;width:110.14%;height:112.46%}
.op-case .fzs .z-ptop b{position:absolute;left:calc(68*var(--s));top:calc(29*var(--s));font:500 calc(76*var(--s))/normal "Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;color:#000}
.op-case .fzs .z-q{position:absolute;left:0;top:calc(56*var(--s));width:calc(402*var(--s));height:calc(718*var(--s));display:flex;flex-direction:column;align-items:center;gap:calc(16*var(--s));padding:0 calc(8*var(--s));box-sizing:border-box}
.op-case .fzs .z-wcd{display:flex;flex-direction:column;width:calc(386*var(--s));height:calc(482*var(--s));border-radius:calc(16*var(--s));overflow:hidden}
.op-case .fzs .z-wtopq{position:relative;flex:1;border:1px solid rgba(0,0,0,.05);border-radius:calc(16*var(--s)) calc(16*var(--s)) 0 0;background:#e6e6e6;overflow:hidden}
.op-case .fzs .z-dotbg{position:absolute;left:calc(-4*var(--s));top:calc(50% - 4.24*var(--s));width:calc(509.306*var(--s));height:calc(563.085*var(--s));transform:translateY(-50%);-webkit-mask:url("/landing/assets/img/danzee/c-mask.svg") 0 calc(135.782*var(--s))/calc(392*var(--s)) calc(555*var(--s)) no-repeat;mask:url("/landing/assets/img/danzee/c-mask.svg") 0 calc(135.782*var(--s))/calc(392*var(--s)) calc(555*var(--s)) no-repeat}
.op-case .fzs .z-dotbg i{display:block;width:100%;height:100%;background:linear-gradient(rgba(34,29,23,.1),rgba(34,29,23,.15) 50%,rgba(34,29,23,.07) 86.9%,rgba(34,29,23,.1));-webkit-mask:radial-gradient(circle at calc(.96*var(--s)) calc(.95*var(--s)),#000 calc(.92*var(--s)),transparent calc(1.06*var(--s))) 0 0/calc(7.688*var(--s)) calc(7.58*var(--s));mask:radial-gradient(circle at calc(.96*var(--s)) calc(.95*var(--s)),#000 calc(.92*var(--s)),transparent calc(1.06*var(--s))) 0 0/calc(7.688*var(--s)) calc(7.58*var(--s))}/* was a 3.3 MB SVG of 5025 gradient-filled dots — one gradient + a dot mask renders the same and keeps the flood/quiz motion smooth */
.op-case .fzs .z-word{position:absolute;left:50%;top:calc(50% - 60*var(--s));width:calc(272*var(--s));transform:translateX(-50%);text-align:center;font:500 calc(136*var(--s))/1 "Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;color:#0a0a0a}


.op-case .fzs .z-qback{position:absolute;left:calc(15*var(--s));top:calc(11*var(--s))}
.op-case .fzs .z-wbq{display:flex;flex-direction:column;align-items:center;gap:calc(24*var(--s));padding:calc(28*var(--s)) calc(8*var(--s));border-radius:0 0 calc(8*var(--s)) calc(8*var(--s));background:#dbdbdb}
.op-case .fzs .z-wbq p{margin:0;width:calc(338*var(--s));text-align:center;font:700 calc(20*var(--s))/1.35 "Inter Tight","Inter",system-ui,sans-serif}





.op-case .fzs .z-keys{display:flex;flex-direction:column;gap:calc(4*var(--s));width:100%}
.op-case .fzs .z-krow{display:flex;gap:calc(4*var(--s))}
.op-case .fzs .z-key{flex:1;display:flex;align-items:center}
.op-case .fzs .z-kc{position:relative;flex:1;height:calc(108*var(--s));margin-right:-1px;border-radius:calc(10*var(--s));background:#dbdbdb;transition:background .25s ease,scale .15s ease;z-index:2}
.op-case .fzs .z-kr{position:absolute;left:50%;top:50%;width:calc(72*var(--s));height:calc(72*var(--s));transform:translate(-50%,-50%);display:grid;place-items:center;border:2px solid rgba(0,0,0,.15);border-radius:50%;box-sizing:border-box;font:700 calc(26*var(--s))/1.2 "Inter Tight","Inter",system-ui,sans-serif}


.op-case .fzs .z-flow.p1 .k1 .z-kc,.op-case .fzs .z-flow.p2 .k2 .z-kc{background:#b8acfe}
.op-case .fzs .z-kc.press{scale:.96}
.op-case .fzs .z-qbtns{position:absolute;left:calc(8*var(--s));bottom:calc(12*var(--s));width:calc(386*var(--s));display:flex;gap:calc(8*var(--s))}
.op-case .fzs .z-idk{flex:1;display:grid;place-items:center;height:calc(80*var(--s));border:1px solid rgba(0,0,0,.25);border-radius:calc(10*var(--s));background:#eaeaea;box-sizing:border-box;font:700 calc(18*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-qbtns .z-btn{position:relative;left:auto;top:auto;flex:1;width:auto;gap:calc(16*var(--s));opacity:.5}
.op-case .fzs .z-flow.p1 .z-chk{opacity:1}
/* listening — intro record + listen & repeat */
.op-case .fzs .z-side i{position:absolute}
.op-case .fzs .z-side .hb{top:calc(267.18*var(--s));width:calc(174.222*var(--s));height:calc(5.227*var(--s));background:rgba(0,0,0,.16)}
.op-case .fzs .z-side .vt{top:calc(252.37*var(--s));width:calc(5.227*var(--s));height:calc(30.489*var(--s));background:rgba(0,0,0,.3)}
.op-case .fzs .z-side .tl{top:calc(234.94*var(--s));width:calc(5.227*var(--s));height:calc(65.333*var(--s));background:rgba(0,0,0,.5)}
.op-case .fzs .z-rec{position:absolute;left:calc(73.32*var(--s));top:calc(171.79*var(--s));width:calc(196*var(--s));height:calc(196*var(--s))}
.op-case .fzs .z-rec img{position:absolute}
.op-case .fzs .z-tick{inset:0;width:100%;height:100%}
.op-case .fzs .z-disc{left:calc(15.25*var(--s));top:calc(15.24*var(--s));width:calc(165.511*var(--s));height:calc(165.511*var(--s))}
.op-case .fzs .z-groove{left:calc(39.2*var(--s));top:calc(39.2*var(--s));width:calc(117.6*var(--s));height:calc(117.6*var(--s))}
.op-case .fzs .z-ctr{left:calc(74.05*var(--s));top:calc(74.04*var(--s));width:calc(47.911*var(--s));height:calc(47.911*var(--s))}
.op-case .fzs .z-lis.is-on .z-rec{animation:zSpin 3.2s linear infinite}
@keyframes zSpin{to{transform:rotate(360deg)}}
.op-case .fzs .z-needle{position:absolute;left:calc(206.17*var(--s));top:calc(191.39*var(--s));width:calc(30.489*var(--s));height:calc(30.489*var(--s))}
.op-case .fzs .z-needle img{position:absolute;left:-24.29%;top:-24.29%;width:148.58%;height:148.58%}
.op-case .fzs .z-lw{position:absolute;left:calc(8*var(--s));top:calc(54*var(--s));width:calc(386*var(--s));height:calc(812*var(--s))}
.op-case .fzs .z-grid,.op-case .fzs .z-eqc{background:radial-gradient(circle at calc(4.82*var(--s)) calc(4.82*var(--s)),var(--dc,#d4d4d4) calc(4.75*var(--s)),transparent calc(4.95*var(--s))) 0 0/calc(18.467*var(--s)) calc(19*var(--s))}
.op-case .fzs .z-grid{position:absolute;left:0;top:0;width:calc(406.27*var(--s));height:calc(551*var(--s))}
.op-case .fzs .z-eq{position:absolute;left:0;top:0;width:calc(406.27*var(--s));height:calc(551*var(--s))}
.op-case .fzs .z-eqc{--dc:#000;position:absolute;left:calc(var(--c)*18.467*var(--s));bottom:0;width:calc(18.467*var(--s));height:calc(var(--h)*19*var(--s));background-position:0 0;clip-path:inset(100% 0 0 0);transition:clip-path .4s ease}
.op-case .fzs .z-flow.play .z-eqc{clip-path:inset(0 0 0 0);animation:zEq 1.1s steps(3) calc(var(--d)*-130ms) infinite alternate}
@keyframes zEq{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(34% 0 0 0)}}
.op-case .fzs .z-lback{position:absolute;left:calc(16*var(--s));top:calc(12*var(--s))}
.op-case .fzs .z-lp{position:absolute;left:calc(73*var(--s));top:calc(160*var(--s));width:calc(240*var(--s));height:calc(240*var(--s));display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:calc(16*var(--s)) calc(12*var(--s)) calc(20*var(--s));box-sizing:border-box;border:1px solid rgba(0,0,0,.05);border-radius:calc(16*var(--s));background:#dbdbdb}
.op-case .fzs .z-lp b{font:700 calc(22*var(--s))/1.2 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.8);white-space:nowrap}
.op-case .fzs .z-pbtn{position:absolute;left:50%;top:calc(50% - 14*var(--s));width:calc(112*var(--s));height:calc(112*var(--s));transform:translate(-50%,-50%)}
.op-case .fzs .z-pbtn img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s ease}
.op-case .fzs .z-pbtn .pa{opacity:0}
.op-case .fzs .z-flow.play .z-pbtn .pa{opacity:1}.op-case .fzs .z-flow.play .z-pbtn .pl{opacity:0}
.op-case .fzs .z-tap{position:absolute;left:calc(100*var(--s));top:calc(533*var(--s));width:calc(185*var(--s));display:flex;flex-direction:column;align-items:center;gap:calc(16*var(--s))}
.op-case .fzs .z-tapc{display:block;width:calc(196*var(--s));height:calc(196*var(--s));flex:none;border-radius:50%;transition:box-shadow .3s ease}
.op-case .fzs .z-tapc>.idle{width:100%;height:100%}
.op-case .fzs .z-tapc{position:relative}.op-case .fzs .z-tapc .idle{transition:opacity .35s ease}.op-case .fzs .z-recb{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}.op-case .fzs .z-recb img{position:absolute;display:block;max-width:none}.op-case .fzs .z-flow.rep .z-recb{opacity:1}.op-case .fzs .z-flow.rep .z-tapc .idle{opacity:0}.op-case .fzs .z-recb .lv{opacity:.72}.op-case .fzs .z-flow.rep .z-recb .lv{animation:zLvl .5s ease-in-out infinite alternate}.op-case .fzs .z-flow.rep .z-recb .rt{animation:zRot 4s linear infinite}@keyframes zLvl{from{opacity:.72}to{opacity:.38}}@keyframes zRot{to{transform:rotate(360deg)}}.op-case .fzs .z-tapt{display:grid;justify-items:center}.op-case .fzs .z-tapt b{grid-area:1/1;display:flex;align-items:center;gap:calc(8*var(--s));transition:opacity .3s ease}.op-case .fzs .z-tapt .t2{opacity:0}.op-case .fzs .z-flow.rep .z-tapt .t1{opacity:0}.op-case .fzs .z-flow.rep .z-tapt .t2{opacity:1}.op-case .fzs .z-tapt .t2 img{width:calc(22.6*var(--s));height:calc(6*var(--s))}
@keyframes zPulse2{50%{box-shadow:0 0 0 calc(8*var(--s)) rgba(0,0,0,.06)}}
.op-case .fzs .z-tap b{font:600 calc(20*var(--s))/calc(19.5*var(--s)) "Inter Tight","Inter",system-ui,sans-serif;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.op-case .fzs .z2 *{transition:none!important;animation:none!important}.op-case .fzs .z-ink{clip-path:none}.op-case .fzs .z-libs .z-band,.op-case .fzs .z-libs .z-wcard{transform:none;opacity:1}.op-case .fzs .z-ans span{transform:none}.op-case .fzs .z-ptop{transform:none}}

/* home → practice library: the arrow nudges, the tile is tapped, grows into the library, rows roll in like a departure board */
.op-case .fzs .z-home.is-on .t1 .z-tt2 img{animation:zNudge .5s ease-in-out 2s 2 alternate}
@keyframes zNudge{to{transform:translate(calc(4*var(--s)),calc(-4*var(--s)))}}
.op-case .fzs .z-xp .z-band,.op-case .fzs .z-xp .z-wcard{transform:translateY(calc(28*var(--s)));opacity:1}
.op-case .fzs .z-home.xp .z-xp .z-band,.op-case .fzs .z-home.xp .z-xp .z-wcard{transform:none;opacity:1;transition:transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*35ms)}
.op-case .fzs .z-home.xp .z-xp .z-sty img{animation:zWrite .5s ease-in-out 3.1s 4 alternate}

/* Danzee · Free Response (2653:6783 → 7311 → 8113): answer types itself, Analyze, the feedback sheet slides up, corrections mark in */
.op-case .fzs .z-disp{position:absolute;left:50%;top:calc(76.21*var(--s));width:calc(291*var(--s));height:calc(140*var(--s));transform:translateX(-50%);border-radius:calc(8*var(--s));background:#0a0a0a;opacity:.9;overflow:hidden}
.op-case .fzs .z-disp p{position:absolute;left:calc(26*var(--s));margin:0;font:500 calc(22*var(--s))/normal "Noto Sans SC","Noto Sans","PingFang SC",sans-serif;color:rgba(234,234,234,.95);white-space:nowrap}
.op-case .fzs .z-disp .d1{top:calc(34*var(--s))}.op-case .fzs .z-disp .d2{top:calc(68*var(--s))}
.op-case .fzs .z-fcur{position:absolute;left:calc(188*var(--s));top:calc(71*var(--s));width:calc(2.8*var(--s));height:calc(24*var(--s));border-radius:calc(1.4*var(--s));background:#f56f51;animation:zBlink 1s steps(1) infinite}
@keyframes zBlink{50%{opacity:0}}
.op-case .fzs .z-dl{position:absolute;left:calc(26*var(--s));top:calc(105.5*var(--s));width:calc(240*var(--s));height:calc(1*var(--s))}
.op-case .fzs .z-mic{position:absolute;left:calc(62*var(--s));top:calc(250*var(--s));width:calc(226*var(--s));height:calc(226*var(--s))}
.op-case .fzs .z-fr .z-a,.op-case .fzs .z-frb{background:#e6e6e6}
.op-case .fzs .z-frb,.op-case .fzs .z-fb{background-image:radial-gradient(circle at calc(0.945*var(--s)) calc(0.945*var(--s)),rgba(150,150,150,.4) calc(0.9*var(--s)),transparent calc(1.05*var(--s)));background-size:calc(7.57*var(--s)) calc(7.57*var(--s))}
.op-case .fzs .z-frc,.op-case .fzs .z-fbc{position:absolute;left:calc(8*var(--s));top:calc(54*var(--s));width:calc(386*var(--s));height:calc(720*var(--s));border-radius:calc(16*var(--s));background:#dbdbdb;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.op-case .fzs .z-frback{position:absolute;left:calc(16*var(--s));top:calc(12*var(--s))}
.op-case .fzs .z-frcol{position:absolute;left:0;top:calc(68*var(--s));width:calc(386*var(--s));height:calc(652*var(--s));display:flex;flex-direction:column;align-items:center;gap:calc(32*var(--s));padding:0 calc(12*var(--s)) calc(32*var(--s));box-sizing:border-box}
.op-case .fzs .z-bub{width:calc(362*var(--s));border:1px solid rgba(0,0,0,.05);border-radius:calc(14*var(--s));background:#f7f7f7 repeating-linear-gradient(180deg,rgba(0,0,0,.01) 0 calc(1*var(--s)),transparent calc(1*var(--s)) calc(3.015*var(--s)));box-sizing:border-box;overflow:hidden}
.op-case .fzs .z-frcol > .z-bub{flex:none;height:calc(173*var(--s))}
.op-case .fzs .z-bubt{display:flex;flex-direction:column;justify-content:flex-end;gap:calc(20*var(--s));height:100%;padding:calc(20*var(--s)) calc(16*var(--s)) calc(20*var(--s)) calc(18*var(--s));box-sizing:border-box}
.op-case .fzs .z-qcn{margin:0;font:500 calc(32*var(--s))/1.4 "Noto Sans SC","Noto Sans","PingFang SC",sans-serif;color:#000}
.op-case .fzs .z-st{display:flex;align-items:center;gap:calc(10*var(--s));height:calc(24*var(--s))}
.op-case .fzs .z-st b{font:600 calc(16*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.55)}
.op-case .fzs .z-chv{display:grid;place-items:center;width:calc(24*var(--s));height:calc(24*var(--s));border:calc(1.167*var(--s)) solid rgba(0,0,0,.1);border-radius:50%;box-sizing:border-box}
.op-case .fzs .z-chv img{width:calc(16*var(--s));height:calc(16*var(--s))}
.op-case .fzs .z-answ{flex:1;display:flex;flex-direction:column;gap:calc(16*var(--s));width:100%;min-height:0}
.op-case .fzs .z-ansb{position:relative;flex:1;display:flex;align-items:center;padding:0 calc(12*var(--s));overflow:hidden}
.op-case .fzs .z-typed{position:relative;display:block;width:100%;height:calc(124*var(--s));margin:0;overflow:hidden;font:500 calc(20*var(--s))/1.5 "Noto Sans SC","Noto Sans","PingFang SC",sans-serif;color:#0a0a0a}
.op-case .fzs .z-typed:empty::before{content:"Type your answer or…";font:500 calc(20*var(--s))/1.5 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.45)}
.op-case .fzs .z-fade{position:absolute;left:0;top:0;width:calc(384*var(--s));height:calc(37*var(--s));object-fit:cover;pointer-events:none}
.op-case .fzs .z-hl{width:100%;height:calc(1*var(--s))}
.op-case .fzs .z-frtap{display:flex;flex-direction:column;align-items:center;gap:calc(16*var(--s));width:calc(185*var(--s))}
.op-case .fzs .z-frtap img{width:calc(210*var(--s));height:calc(210*var(--s));flex:none}
.op-case .fzs .z-frtap b{font:600 calc(18*var(--s))/calc(19.5*var(--s)) "Inter Tight","Inter",system-ui,sans-serif;white-space:nowrap}
.op-case .fzs .z-ana{top:calc(786*var(--s));gap:calc(12*var(--s));opacity:.5}
.op-case .fzs .z-ana .z-wv{width:calc(45.213*var(--s));height:calc(16*var(--s))}
.op-case .fzs .z-fr.typed .z-ana{opacity:1}
.op-case .fzs .z-fr.typing .z-ana .z-wv,.op-case .fzs .z-fr.typed .z-ana .z-wv{animation:zWave .5s ease-in-out infinite alternate}
@keyframes zWave{to{transform:scaleY(.6)}}
.op-case .fzs .z-fb{position:absolute;inset:0;z-index:4;background-color:#e6e6e6;transform:translateY(100%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .z-fr.fb .z-fb{transform:none}
.op-case .fzs .z-fbback{position:absolute;left:calc(12*var(--s));top:calc(12*var(--s))}
.op-case .fzs .z-fbcol{position:absolute;left:0;top:calc(68*var(--s));width:calc(386*var(--s));display:flex;flex-direction:column;align-items:center;gap:calc(24*var(--s));padding:0 calc(12*var(--s));box-sizing:border-box}
.op-case .fzs .z-fbt{width:calc(352*var(--s));padding-top:calc(3*var(--s));display:flex;flex-direction:column;gap:calc(8*var(--s))}
.op-case .fzs .z-fbt b{font:700 calc(36*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif}
.op-case .fzs .z-fbt em{font:600 calc(18*var(--s))/1.4 "Inter",system-ui,sans-serif;font-style:normal;letter-spacing:-.02em;color:rgba(0,0,0,.55)}
.op-case .fzs .z-bq{height:calc(148*var(--s));background-color:#f7f7f7;border-radius:calc(16*var(--s))}
.op-case .fzs .z-br{border-radius:calc(16*var(--s));margin-top:calc(-16*var(--s))}
.op-case .fzs .z-bq .z-bubt,.op-case .fzs .z-br .z-bubt{gap:calc(16*var(--s))}
.op-case .fzs .z-lbl{font:600 calc(18*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.55)}
.op-case .fzs .z-q26{margin:0;font:500 calc(26*var(--s))/1.4 "Noto Sans SC","Noto Sans","PingFang SC",sans-serif;letter-spacing:-.01em;color:#000}
/* corrections never reflow the text (final Figma layout from the start): the strike draws across, then the fix fades in, underline draws */
.op-case .fzs .z-resp s,.op-case .fzs .z-resp u{text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat}
.op-case .fzs .z-resp s{color:#000;background-image:linear-gradient(currentColor,currentColor);background-position:0 55%;background-size:0 calc(1.6*var(--s));transition:color .5s ease .15s,background-size .45s cubic-bezier(.65,0,.25,1)}
.op-case .fzs .z-resp u{color:rgba(243,72,54,0);background-image:linear-gradient(#f34836,#f34836);background-position:0 100%;background-size:0 calc(1.6*var(--s));transition:color .5s ease,background-size .5s cubic-bezier(.65,0,.25,1) .25s}
.op-case .fzs .z-fr.fix1 .z-resp .x1,.op-case .fzs .z-fr.fix2 .z-resp .x2{color:rgba(0,0,0,.35);background-size:100% calc(1.6*var(--s))}
.op-case .fzs .z-fr.fix1 .z-resp .f1,.op-case .fzs .z-fr.fix2 .z-resp .f2{color:#f34836;background-size:100% calc(1.6*var(--s));transition-delay:.3s,.5s}
.op-case .fzs .z-nextm{top:calc(786*var(--s))}
@media (prefers-reduced-motion:reduce){.op-case .fzs .z-fb{transform:none}.op-case .fzs .z-resp u{color:#f34836}}
/* home → library: once the stack lands it riffles (each band lifts in turn), then the Writing card writes 疑是地 and its arrow nudges */.op-case .fzs .z-home.xp .z-xp .z-band{animation:zRiffle .55s cubic-bezier(.3,.7,.2,1) calc(2.1s + var(--i)*110ms) both}.op-case .fzs .z-home.xp .z-xp .z-wcard{animation:zRiffle .55s cubic-bezier(.3,.7,.2,1) calc(2.1s + 6*110ms) both}@keyframes zRiffle{0%,100%{translate:0 0}40%{translate:0 calc(-14*var(--s))}}.op-case .fzs .z-home.xp .z-xp .z-zm{clip-path:inset(0 100% 0 0);animation:zReveal 2s cubic-bezier(.45,0,.55,1) 3.1s forwards}.op-case .fzs .z-xp .z-zm{clip-path:inset(0 100% 0 0)}@keyframes zReveal{to{clip-path:inset(0 0 0 0)}}.op-case .fzs .z-home.xp .z-xp .z-larr{animation:zArrN .9s ease-in-out 5.2s infinite}@keyframes zArrN{0%,100%{translate:0 0}50%{translate:calc(8*var(--s)) 0}}@media (prefers-reduced-motion:reduce){.op-case .fzs .z-xp .z-zm{clip-path:none}}
/* writing intro: the stylus writes the three lines in turn (ink reveals behind the tip) */.op-case .fzs .z-write.is-on .z-zl{clip-path:inset(0 100% 0 0)}.op-case .fzs .z-write.is-on .z-zl.l1{animation:zReveal .88s linear .3s forwards}.op-case .fzs .z-write.is-on .z-zl.l2{animation:zReveal .86s linear 1.43s forwards}.op-case .fzs .z-write.is-on .z-zl.l3{animation:zReveal .47s linear 2.51s forwards}.op-case .fzs .z-write.is-on .z-wsty{animation:zPen 3.1s both}@keyframes zPen{0%,9.7%{translate:calc(-91*var(--s)) calc(-163*var(--s));animation-timing-function:linear}38%{translate:calc(154*var(--s)) calc(-163*var(--s));animation-timing-function:cubic-bezier(.45,0,.35,1)}46%{translate:calc(-91*var(--s)) calc(-98*var(--s));animation-timing-function:linear}74%{translate:calc(154*var(--s)) calc(-98*var(--s));animation-timing-function:cubic-bezier(.45,0,.35,1)}81%{translate:calc(-91*var(--s)) calc(-14*var(--s));animation-timing-function:linear}96%{translate:calc(0*var(--s)) calc(-14*var(--s));animation-timing-function:cubic-bezier(.3,0,.2,1)}100%{translate:calc(8*var(--s)) calc(4*var(--s))}}@media (prefers-reduced-motion:reduce){.op-case .fzs .z-write.is-on .z-zl{clip-path:none;animation:none}.op-case .fzs .z-write.is-on .z-wsty{animation:none}}
/* Listening: Figma fades the dot field into the page (#EAEAEA) at the top and towards the record button */.op-case .fzs .z-lfade{position:absolute;left:0;pointer-events:none}.op-case .fzs .z-lfade.top{top:0;width:calc(382*var(--s));height:calc(79*var(--s));background:linear-gradient(#eaeaea,rgba(234,234,234,0))}.op-case .fzs .z-lfade.bot{top:calc(271*var(--s));width:calc(384*var(--s));height:calc(290*var(--s));background:linear-gradient(rgba(234,234,234,0),#eaeaea)}/* Classifiers: puzzle pieces carry the Figma drop shadow (0 3 9, 12%) */.op-case .fzs .z-pbot img,.op-case .fzs .z-ptop img{filter:drop-shadow(0 calc(3*var(--s)) calc(9*var(--s)) rgba(0,0,0,.12))}
/* Danzee mockups: the screen corner must stay inside the 8pt-inset, 10pt-radius bottom buttons of the Figma frames (r ≤ 10 + 3.41·8 ≈ 37pt of 402) */#op-case-danzee .fzs .op-shot3 .trio__screen,#op-case-finna .fzs .op-shot3 .trio__screen{inset:2.2cqw;border-radius:7cqw}#op-case-danzee .fzs .op-shot3 .trio__device,#op-case-finna .fzs .op-shot3 .trio__device{border-radius:5.34cqw;background:#0e0e10;box-shadow:inset 0 0 0 1px #4a4a4e,inset 0 0 0 2px #0e0e10,0 0 0 .5px rgba(11,11,11,.3),0 1.2cqw 2.4cqw rgba(11,11,11,.12),0 3.5cqw 7cqw rgba(11,11,11,.1)!important}#op-case-danzee .op-shots--2 .op-shot3 .trio__device,#op-case-finna .op-shots--2 .op-shot3 .trio__device{border-radius:4.78cqw}/* thinner bezel (2.2% of the phone instead of 3.4%) with a light metal rim; radii stay concentric (device = screen + bezel) */
.op-case .fzs .z-flood,.op-case .fzs .z-xp,.op-case .fzs .z-fb,.op-case .fzs .z-sheet,.op-case .fzs .z-wsty,.op-case .fzs .z-recb .rt{will-change:transform,clip-path}
/* Free Response typing: text sits in a sliding inner block — new lines glide up instead of jumping, each character fades in */.op-case .fzs .z-tin{position:absolute;left:0;right:0;top:0;transition:transform .45s cubic-bezier(.3,.7,.2,1)}.op-case .fzs .z-tin i{font-style:normal;animation:zCh .28s ease-out both}@keyframes zCh{from{opacity:0;filter:blur(calc(2*var(--s)))}to{opacity:1;filter:none}}
/* loop boundary: the screen content dissolves into the screen colour, resets unseen, then fades back in — no snap back to the first frame */.op-case .fzs .trio__screen:has(.z2){background:#eaeaea}.op-case .fzs .vx.z2 > .z-fit{transition:opacity .45s cubic-bezier(.4,0,.2,1)}
/* motion blur, only where things move fast (like the spinning reels in NYC Music OS): trailing copies on the spinning disc and the record rotor, directional blur at the peak of the page turn and the feedback sheet */.op-case .fzs .z-rec .zg1{transform:rotate(-7deg);opacity:.32}.op-case .fzs .z-rec .zg2{transform:rotate(-15deg);opacity:.14}.op-case .fzs .z-rec .z-tick.zg1{transform:rotate(-2.5deg);opacity:.45}.op-case .fzs .z-recb .rt.rg{opacity:.28;transform:rotate(-9deg)}.op-case .fzs .z-flow.rep .z-recb .rt.rg{animation:zRotG 4s linear infinite}@keyframes zRotG{from{transform:rotate(-9deg)}to{transform:rotate(351deg)}}.op-case .fzs .z-flow.mbx .z-sheet{filter:url(#zMbX)}
/* Writing: the orange tick ring around 豆 fills clockwise as each stroke is written (same timing as the 豆 ink reveal) */@property --rp{syntax:"<percentage>";inherits:false;initial-value:0%}.op-case .fzs .z-cring{-webkit-mask:conic-gradient(#000 var(--rp),transparent 0);mask:conic-gradient(#000 var(--rp),transparent 0)}.op-case .fzs .z-flow.go .z-cring{opacity:1;transition:opacity .2s ease;animation:zFillR 2.6s linear .3s both}@keyframes zFillR{0%{--rp:0%}25%,33%{--rp:33.4%}58%,67%{--rp:66.7%}92%,100%{--rp:100%}}@media (prefers-reduced-motion:reduce){.op-case .fzs .z-cring{-webkit-mask:none;mask:none}}
/* feedback sheet: one smooth glide (no blur toggling), its blocks drift up a touch behind it */.op-case .fzs .z-fb .z-fbcol > *{transform:translateY(calc(24*var(--s)));opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease}.op-case .fzs .z-fr.fb .z-fb .z-fbcol > *{transform:none;opacity:1}.op-case .fzs .z-fr.fb .z-fb .z-fbcol > :nth-child(1){transition-delay:.12s}.op-case .fzs .z-fr.fb .z-fb .z-fbcol > :nth-child(2){transition-delay:.2s}.op-case .fzs .z-fr.fb .z-fb .z-fbcol > :nth-child(3){transition-delay:.28s}
/* loop end like NYC Music OS: tap “back” (white ring), the wave rolls back into the start button and uncovers the first screen — the loop then simply continues */.op-case .fzs .z-flow.pre .z-b{opacity:1;clip-path:inset(0 0 0 0 round 0);transition:none}.op-case .fzs .z-flow.pre .z-flood{visibility:visible;clip-path:circle(var(--R,140%) at var(--cx,50%) var(--cy,92%));transition:none}.op-case .fzs .z-flow.pre .z-a{visibility:visible}.op-case .fzs .z-flow.pre.back .z-b{opacity:0;clip-path:inset(var(--t,30%) var(--r,6%) var(--b,14%) var(--l,6%) round calc(16*var(--s)));transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .35s ease .18s}.op-case .fzs .z-flow.pre.back .z-flood{clip-path:circle(0px at var(--cx,50%) var(--cy,92%));transition:clip-path .5s cubic-bezier(.5,0,.2,1) .08s}.op-case .fzs .zring-tap{animation:zTapRing .55s cubic-bezier(.3,.7,.2,1)}@keyframes zTapRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 0 0 0 rgba(0,0,0,0);scale:1}25%{box-shadow:0 0 0 calc(4*var(--s)) #fff,0 0 0 calc(5*var(--s)) rgba(0,0,0,.1);scale:.92}100%{box-shadow:0 0 0 calc(11*var(--s)) rgba(255,255,255,0),0 0 0 calc(12*var(--s)) rgba(0,0,0,0);scale:1}}
/* no colour band: the next screen alone opens (and rolls back) as a circle from the tapped button */.op-case .fzs .z2 .z-flood{display:none}
/* Home: library folds back into the tile with everything still in place (removing .xp at once snapped the bands, ink and arrow back first) */.op-case .fzs .z-home.xp.xpo .z-xp{opacity:0;clip-path:inset(var(--t,560px) var(--r,200px) var(--b,8px) var(--l,8px) round calc(16*var(--s)));transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .35s ease .18s}
/* Home ↔ library is a shared-element morph: the library is visible inside the growing/shrinking tile the whole time (its orange Writing card sits where the tile is) — no empty orange first */
/* card → next screen is the same shared-element morph as Home → library: the tapped card grows into the screen with the content already inside, which settles a touch; at the end it folds back into the card */.op-case .fzs .z-flow .z-b > :not(.z-sb):not(.z-fb){transform:translateY(calc(26*var(--s)))}.op-case .fzs .z-flow.flood .z-b > :not(.z-sb):not(.z-fb),.op-case .fzs .z-flow.next .z-b > :not(.z-sb):not(.z-fb){transform:none;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s ease,scale .15s ease}.op-case .fzs .z-flow.pre .z-b > :not(.z-sb):not(.z-fb){transform:none}
/* morph ends/starts on the real Practice Library tile: the library cross-fades with the tile while the window shrinks into it (and the reverse on open) */
/* page turn 豆 → 陈: the word label rolls over and the active chip moves to 陈 together with the sheet */.op-case .fzs .z-clbl{display:inline-grid;flex:none;overflow:hidden;padding-right:calc(2*var(--s))}.op-case .fzs .z-clbl i{grid-area:1/1;font-style:normal;transition:transform .6s cubic-bezier(.65,0,.25,1) .1s,opacity .45s ease .1s}.op-case .fzs .z-clbl .n{transform:translateY(100%);opacity:0}.op-case .fzs .z-flow.turn .z-clbl .o{transform:translateY(-100%);opacity:0}.op-case .fzs .z-flow.turn .z-clbl .n{transform:none;opacity:1}.op-case .fzs .z-c72,.op-case .fzs .z-c56,.op-case .fzs .z-chips .z-c48{transition:width .6s cubic-bezier(.65,0,.25,1) .1s,height .6s cubic-bezier(.65,0,.25,1) .1s,margin .6s cubic-bezier(.65,0,.25,1) .1s,background-color .45s ease .15s,color .45s ease .15s,border-color .35s ease .1s,outline-color .45s ease .2s,font-size .6s cubic-bezier(.65,0,.25,1) .1s}.op-case .fzs .z-chips .z-c72 + .z-c48{outline:calc(2.5*var(--s)) dashed transparent;outline-offset:calc(5.5*var(--s))}.op-case .fzs .z-flow.turn .z-c72{width:calc(48*var(--s));height:calc(48*var(--s));border-color:transparent}.op-case .fzs .z-flow.turn .z-c56{width:calc(48*var(--s));height:calc(48*var(--s));background:#ccc6c2;color:#646464;font-size:calc(21.818*var(--s))}.op-case .fzs .z-flow.turn .z-cring{opacity:0;transition:opacity .3s ease}.op-case .fzs .z-flow.turn .z-chips .z-c72 + .z-c48{width:calc(56*var(--s));height:calc(56*var(--s));margin:0 calc(8*var(--s));background:#f76743;color:#000;font-size:calc(25.455*var(--s));outline-color:rgba(0,0,0,.15)}
/* card ↔ screen morph cross-fades with the real card on the first screen (opening and closing), like Home ↔ library — no quiz left squeezed into the card shape */
/* first screens rest in their start state when not playing (pen at the line start, ink hidden) and can reset instantly while covered */.op-case .fzs .z-write .z-zl{clip-path:inset(0 100% 0 0)}.op-case .fzs .z-write .z-wsty{translate:calc(-91*var(--s)) calc(-163*var(--s))}.op-case .fzs .z2.zr .z-a,.op-case .fzs .z2.zr .z-a *,.op-case .fzs .z-home.zr .z-hcol,.op-case .fzs .z-home.zr .z-hcol *{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.op-case .fzs .z-write .z-zl{clip-path:none}.op-case .fzs .z-write .z-wsty{translate:none}}
/* mobile: each scene sits right above its own line of copy (the wide 3-tile art is split per tile) */.op-case .t2-mvis{display:none}@media (max-width:600px){.op-case .t2-vis{display:none}.op-case .t2-list{gap:28px}.op-case .t2-list li{flex-direction:column;align-items:stretch}.op-case .t2-mvis{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 4px;overflow:hidden}}

/* Finna onboarding (after recent.design "Finance App Onboarding"): painterly Finna-blue backdrop, glass lenses that magnify it and breathe, mark, frosted panel */



















/* ripple of glass lenses (as in the reference): rings keep opening from one point low-left, each magnifying the painting; smaller rings always on top */

/* the mark is a spinner that turns on its own (like the reference), and the glass ripples open from it */

/* app-style token (like the fund tokens on the Funds sheet): Finna-blue squircle with the white mark, bobbing on its own */

/* Finna portfolio "TV" (after recent.design "Pixel Face Portfolio App"): an LED dot-matrix widget flips channels — knob press, spring wobble, static, new pixel icon */
.op-case .fzs .vx.vx-tv{--u:calc(100cqw / 393);position:absolute;inset:0;display:flex;flex-direction:column;padding:0 calc(20*var(--u)) calc(22*var(--u));background:#F5F6F8;font-family:"Funnel Sans",var(--sans);color:#0B1220;overflow:hidden;font-variant-numeric:tabular-nums}




.op-case .fzs .vx-tv .tv-box{position:relative;display:grid;grid-template-columns:1fr calc(46*var(--u));grid-template-rows:auto auto;gap:calc(12*var(--u)) calc(10*var(--u));padding:calc(14*var(--u));border-radius:calc(26*var(--u));background:#0B1220;box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(11,18,32,.22);transform-origin:50% 120%}
.op-case .fzs .vx-tv .tv-box.wob{animation:tvWob .9s cubic-bezier(.3,.7,.2,1)}
@keyframes tvWob{0%{rotate:0deg}18%{rotate:-4deg}40%{rotate:2.6deg}60%{rotate:-1.4deg}80%{rotate:.6deg}100%{rotate:0deg}}

.op-case .fzs .vx-tv .tv-cv{display:block;width:100%;height:100%}
.op-case .fzs .vx-tv .tv-ch{position:absolute;right:calc(10*var(--u));top:calc(9*var(--u));font:600 calc(11*var(--u))/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;color:rgba(143,180,255,.7)}


.op-case .fzs .vx-tv .tv-knob{width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;background:radial-gradient(circle at 35% 30%,#3A4560,#1B2335);box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgba(255,255,255,.12);transition:scale .15s ease}
.op-case .fzs .vx-tv .tv-knob::after{content:"";display:block;width:calc(2.5*var(--u));height:calc(9*var(--u));margin:calc(3*var(--u)) auto 0;border-radius:2px;background:#8FB4FF;transform-origin:50% calc(10*var(--u));rotate:var(--a,0deg);transition:rotate .4s cubic-bezier(.3,1.4,.5,1)}
.op-case .fzs .vx-tv .tv-knob.press{scale:.86}

.op-case .fzs .vx-tv .tv-lbl{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;padding:0 calc(4*var(--u)) calc(2*var(--u));color:#fff}
.op-case .fzs .vx-tv .tv-lbl b{font:600 calc(18*var(--u))/1 "Funnel Sans",var(--sans);transition:opacity .2s ease}
.op-case .fzs .vx-tv .tv-lbl em{font:500 calc(13*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;color:rgba(255,255,255,.55)}

.op-case .fzs .vx-tv .tv-row{display:flex;align-items:center;gap:calc(12*var(--u));height:calc(52*var(--u));padding:0 calc(16*var(--u));border-radius:calc(16*var(--u));background:#fff;box-shadow:0 0 0 calc(1*var(--u)) #E6E9EF;transition:box-shadow .35s ease,translate .35s ease}
.op-case .fzs .vx-tv .tv-row i{width:calc(12*var(--u));height:calc(12*var(--u));border-radius:calc(4*var(--u));background:var(--c)}
.op-case .fzs .vx-tv .tv-row b{flex:1;font:600 calc(16*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .vx-tv .tv-row em{font:600 calc(15*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;color:#0E9F6E}
.op-case .fzs .vx-tv .tv-row.on{box-shadow:0 0 0 calc(2*var(--u)) #1F69FF,0 calc(8*var(--u)) calc(18*var(--u)) rgba(31,105,255,.15);translate:calc(4*var(--u)) 0}
/* Bank transfer / Debit card = Plasma steps 2–3, measured from the video (1u = 1/393 screen): 8 coins, front ≈96u, sides ≈82u, back ≈70u; nearly flat orbit leaning ~6° down to the right; on entry the ring is spun fast (one slot ≈0.2s) and coasts down to a slow drift (one slot ≈1s); coins swing out of the edge-on rolodex; only back coins blur; Debit card weaves up/down */@property --sp{syntax:"<angle>";inherits:true;initial-value:0deg}@property --fc{syntax:"<angle>";inherits:true;initial-value:76deg}.op-case .fzs .am3-ring.r-b,.op-case .fzs .am3-ring.r-c{--R:110!important;--cs:76!important;perspective:calc(760*var(--u));height:calc(120*var(--u))!important}.op-case .fzs .r-b .am3-rot,.op-case .fzs .r-c .am3-rot{transform:rotateZ(6deg) rotateX(-4deg) rotateY(var(--sp))}.op-case .fzs .r-c .am3-rot{transform:rotateZ(8deg) rotateX(-5deg) rotateY(var(--sp))}.op-case .fzs .vx-am3[data-st="b"] .r-b .am3-rot,.op-case .fzs .vx-am3[data-st="c"] .r-c .am3-rot{animation:am3Spin2 8s forwards}@keyframes am3Spin2{0%{--sp:0deg;animation-timing-function:cubic-bezier(.4,0,1,1)}6%{--sp:70deg;animation-timing-function:linear}26%{--sp:430deg;animation-timing-function:cubic-bezier(0,0,.4,1)}34%{--sp:490deg;animation-timing-function:linear}100%{--sp:730deg}}.op-case .fzs .r-c .am3-coin:nth-child(odd){--dy:calc(-9*var(--u))}.op-case .fzs .r-c .am3-coin:nth-child(even){--dy:calc(8*var(--u))}.op-case .fzs .r-b,.op-case .fzs .r-c{--fc:76deg}.op-case .fzs .vx-am3[data-st="b"] .r-b,.op-case .fzs .vx-am3[data-st="c"] .r-c{--fc:0deg;transition:--fc .7s cubic-bezier(.3,.7,.2,1) .05s}.op-case .fzs .r-b .am3-coin,.op-case .fzs .r-c .am3-coin{transform:translateY(var(--dy,0px)) rotateY(var(--a)) translateZ(calc(var(--R)*var(--u))) rotateY(calc(-1*(var(--a) + var(--sp)))) rotateX(4deg) rotateY(calc(sin(var(--a) + var(--sp)) * -24deg)) rotateY(var(--fc))}.op-case .fzs .r-b .am3-e,.op-case .fzs .r-c .am3-e{display:block}.op-case .fzs .r-b .am3-fb,.op-case .fzs .r-c .am3-fb{filter:blur(calc(1.6*var(--u)));opacity:clamp(0,calc((.2 - cos(var(--a) + var(--sp))) * 1.6),1)}@media (prefers-reduced-motion:reduce){.op-case .fzs .r-b .am3-rot,.op-case .fzs .r-c .am3-rot{animation:none!important}.op-case .fzs .r-b,.op-case .fzs .r-c{--fc:0deg}}
/* carousel coins carry real Tech Secondaries portfolio logos (Simple Icons, CC0) in their brand colours; one Finna coin */.op-case .fzs .am3-f .am3-logo{width:48%;height:48%;fill:#fff;stroke:none}.op-case .fzs .am3-fin::after{content:"";width:46%;height:46%;background:url("/landing/assets/img/finna-mark-white.png") center/contain no-repeat}
/* spacing measured on the reference: back button → coins ≈164u, coins → title ≈96u */.op-case .fzs .am3-ring.r-b{margin-top:calc(84*var(--u))!important;margin-bottom:calc(8*var(--u))!important}.op-case .fzs .am3-ring.r-c{margin-top:calc(60*var(--u))!important;margin-bottom:calc(8*var(--u))!important}
/* phones stay still in both cases (no float, no cursor tilt) — only the screens inside animate */.op-case.play .fzs .op-shot3 .trio__device{animation:none!important}.op-case .fzs .trio__device.fz-tilt{transform:none!important}.op-case .fzs .fz-glare{display:none!important}
/* Activity in the light style of the other Finna screens: no blue sky — soft grey app background, white sheet, dark status bar */.op-case .fzs .vx.vx-act{background:#EEF0F3}.op-case .fzs .vx-act .vt-sky{color:#0B1220}.op-case .fzs .vx-act .vt-sig{fill:#0B1220}.op-case .fzs .vx-act .vt-sig rect[fill="none"]{stroke:#0B1220}.op-case .fzs .vx-act .vt-sheet{background:#fff;box-shadow:0 calc(-2*var(--u)) calc(14*var(--u)) rgba(11,18,32,.06)}.op-case .fzs .vx-act .vt-handle{background:#D1D5DB}
/* Activity sheet sits like the Funds sheet on the first screen: inset from the sides and bottom, rounded all round, the app behind it blurred and dimmed */
.op-case .fzs .vx.vx-act{background:#EEF0F3;overflow:hidden}
.op-case .fzs .vx-act::before{content:"";position:absolute;inset:calc(-20*var(--u));background:radial-gradient(calc(46*var(--u)) calc(46*var(--u)) at 14% 12%,#C9A68F 0 60%,transparent 62%),linear-gradient(#DADDE3,#DADDE3) 50% calc(100*var(--u))/88% calc(46*var(--u)) no-repeat,radial-gradient(calc(40*var(--u)) calc(40*var(--u)) at 14% 26%,#1F69FF 0 60%,transparent 62%),linear-gradient(#E3E6EB,#E3E6EB) 50% calc(176*var(--u))/88% calc(70*var(--u)) no-repeat,linear-gradient(#E3E6EB,#E3E6EB) 50% calc(262*var(--u))/88% calc(70*var(--u)) no-repeat,#F3F4F6;filter:blur(calc(7*var(--u)))}
.op-case .fzs .vx-act::after{content:"";position:absolute;inset:0;background:rgba(11,18,32,.2)}
.op-case .fzs .vx-act .vt-sky,.op-case .fzs .vx-act .vt-sheet{position:relative;z-index:1}
.op-case .fzs .vx-act .vt-sheet{margin:0 calc(10*var(--u)) calc(10*var(--u));border-radius:calc(40*var(--u));box-shadow:0 calc(-6*var(--u)) calc(30*var(--u)) rgba(11,18,32,.12)}

/* Activity: tap a card → it grows into the transaction details (shared-element morph), details play in, then it folds back */
.op-case .fzs .vx-act .vt-sheet{position:relative}
.op-case .fzs .act-xp{position:absolute;inset:0;z-index:3;background:#fff;clip-path:inset(var(--t,30%) var(--r,4%) var(--b,60%) var(--l,4%) round calc(13*var(--u)));visibility:hidden;opacity:0;transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .3s ease,visibility 0s linear .55s}
.op-case .fzs .vx-act.ax .act-xp{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round calc(40*var(--u)));transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .2s ease,visibility 0s}
.op-case .fzs .vx-act.ax.axo .act-xp{opacity:0;clip-path:inset(var(--t,30%) var(--r,4%) var(--b,60%) var(--l,4%) round calc(13*var(--u)));transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .3s ease .2s}
.op-case .fzs .vt-list li{transition:transform .5s ease,opacity .5s ease,scale .15s ease}
.op-case .fzs .vt-list li.press{scale:.96}
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@media (prefers-reduced-motion:reduce){.op-case .fzs .act-xp{display:none}}


/* details card after Volta's station sheet: coloured status band, light sheet with handle, big light title, pill tags, black action + square button, numbered grey rows with a split action segment and a corner status dot */
.op-case .fzs .act-xp{background:var(--fb);display:flex;flex-direction:column}
.op-case .fzs .ax-hd{display:flex;align-items:center;gap:calc(10*var(--u));height:calc(58*var(--u));padding:0 calc(18*var(--u));color:#fff;flex:none}
.op-case .fzs .ax-back{display:grid;place-items:center;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:rgba(255,255,255,.18)}
.op-case .fzs .ax-back svg{width:calc(16*var(--u));height:calc(16*var(--u));fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.op-case .fzs .ax-hd em{font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;opacity:.9}
.op-case .fzs .ax-body{flex:1;display:flex;flex-direction:column;padding:calc(10*var(--u)) calc(18*var(--u)) 0;border-radius:calc(28*var(--u)) calc(28*var(--u)) 0 0;background:#EEF1F4;translate:0 calc(60*var(--u));transition:translate .55s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .vx-act.ax .ax-body{translate:0 0;transition-delay:.18s}
.op-case .fzs .ax-body > *{opacity:0;translate:0 calc(12*var(--u));transition:opacity .4s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .vx-act.ax .ax-body > *{opacity:1;translate:0 0}
.op-case .fzs .vx-act.ax .ax-body > :nth-child(1){transition-delay:.3s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(2){transition-delay:.38s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(3){transition-delay:.46s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(4){transition-delay:.54s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(5){transition-delay:.62s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(6){transition-delay:.66s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(7){transition-delay:.9s}.op-case .fzs .vx-act.ax .ax-body > :nth-child(8){transition-delay:.94s}
.op-case .fzs .ax-handle{align-self:center;width:calc(36*var(--u));height:calc(4*var(--u));border-radius:99px;background:#0B1220}
.op-case .fzs .ax-t{margin:calc(22*var(--u)) 0 0;font:400 calc(40*var(--u))/1.04 "Funnel Sans",var(--sans);letter-spacing:-.025em;color:#0B1220}
.op-case .fzs .ax-tags{display:flex;gap:calc(6*var(--u));margin-top:calc(14*var(--u))}
.op-case .fzs .ax-tag{display:inline-flex;align-items:center;height:calc(26*var(--u));padding:0 calc(10*var(--u));border-radius:calc(6*var(--u));font:500 calc(13.5*var(--u))/1 "Funnel Sans",var(--sans);color:#0B1220}
.op-case .fzs .ax-tag.blue{background:#8FC8FF}.op-case .fzs .ax-tag.dark{background:#0B1220;color:#fff}
.op-case .fzs .ax-tag.sm{height:calc(22*var(--u));margin-left:auto;font-size:calc(11.5*var(--u))}
.op-case .fzs .ax-acts{display:flex;gap:calc(8*var(--u));margin-top:calc(18*var(--u));padding-bottom:calc(18*var(--u));box-shadow:0 1px 0 #D5DBE1}
.op-case .fzs .ax-dl{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));height:calc(52*var(--u));border-radius:99px;background:#0B1220;color:#fff;font:600 calc(16*var(--u))/1 "Funnel Sans",var(--sans);transition:scale .15s ease}
.op-case .fzs .ax-dl svg,.op-case .fzs .ax-sq svg{width:calc(19*var(--u));height:calc(19*var(--u));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-case .fzs .ax-dl.press{scale:.96}
.op-case .fzs .ax-sq{display:grid;place-items:center;width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%;background:#E0E5EA;color:#0B1220}
.op-case .fzs .ax-k{display:flex;align-items:center;gap:calc(6*var(--u));margin:calc(20*var(--u)) 0 0;font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:#3A4250}
.op-case .fzs .ax-q{width:calc(15*var(--u));height:calc(15*var(--u));fill:none;stroke:#3A4250;stroke-width:1.8;stroke-linecap:round}
.op-case .fzs .ax-rows{list-style:none;margin:calc(10*var(--u)) 0 0;padding:0;display:grid;gap:calc(6*var(--u))}
.op-case .fzs .ax-rows li{position:relative;display:flex;align-items:center;height:calc(58*var(--u));border-radius:calc(6*var(--u));background:#E0E5EA;opacity:0;translate:0 calc(10*var(--u));transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .vx-act.ax .ax-rows li{opacity:1;translate:0 0;transition-delay:calc(.7s + var(--k)*.1s)}
.op-case .fzs .ax-dot{position:absolute;left:calc(-3*var(--u));top:calc(-3*var(--u));width:calc(10*var(--u));height:calc(10*var(--u));border-radius:50%;background:#3DD9A7;scale:0;transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
.op-case .fzs .vx-act.ax .ax-dot{scale:1;transition-delay:calc(1s + var(--k)*.35s)}
.op-case .fzs .ax-rows b{width:calc(70*var(--u));padding-left:calc(12*var(--u));box-sizing:border-box;font:400 calc(32*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.02em;color:#0B1220;box-shadow:inset calc(-1.5*var(--u)) 0 0 #0B1220}
.op-case .fzs .ax-rows span{flex:1;text-align:center;font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:#0B1220}
.op-case .fzs .ax-rows em{position:relative;align-self:stretch;width:calc(96*var(--u));border-radius:calc(6*var(--u));background:#0B1220;color:#fff;font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;overflow:hidden}
.op-case .fzs .ax-rows s{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;transition:translate .45s cubic-bezier(.5,0,.2,1)}
.op-case .fzs .ax-rows .r3 em{background:#C9D0D7;color:#7B8592;transition:background .4s ease,color .4s ease}
.op-case .fzs .ax-rows .r3 s + s{translate:0 100%}
.op-case .fzs .vx-act.ax .ax-rows .r3 em{background:#3DD9A7;color:#0B1220;transition-delay:1.9s}
.op-case .fzs .vx-act.ax .ax-rows .r3 s{translate:0 -100%;transition-delay:1.9s}.op-case .fzs .vx-act.ax .ax-rows .r3 s + s{translate:0 0}
.op-case .fzs .ax-tags .dark{scale:.6;opacity:0;transition:scale .4s cubic-bezier(.3,1.6,.5,1),opacity .3s ease}
.op-case .fzs .vx-act.ax .ax-tags .dark{scale:1;opacity:1;transition-delay:2.1s}
.op-case .fzs .ax-tbl{list-style:none;margin:calc(4*var(--u)) 0 0;padding:0}
.op-case .fzs .ax-tbl li{display:flex;justify-content:space-between;align-items:center;height:calc(46*var(--u));font:400 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:#5B6472;box-shadow:0 1px 0 #D5DBE1}
.op-case .fzs .ax-tbl li:last-child{box-shadow:none}
.op-case .fzs .ax-tbl b{font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:#0B1220}

/* Finna onboarding after Volta's welcome screen: flat sky-blue field, black mark up top, a black "growth" silhouette that fans open like blinds and folds back, two stacked blocks at the bottom (light text block + dark CTA) */
@property --of{syntax:"<number>";inherits:false;initial-value:0}
.op-case .fzs .vx.vx-ob{--u:calc(100cqw / 393);--sky:#1F69FF;position:absolute;inset:0;overflow:hidden;background:var(--sky);font-family:"Funnel Sans",var(--sans);color:#0B1220;isolation:isolate}
.op-case .fzs .vx-ob .ob-sb{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;height:calc(54*var(--u));padding:calc(6*var(--u)) calc(34*var(--u)) 0;font:600 calc(16*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .vx-ob .ob-sb svg{width:calc(62*var(--u));height:calc(14*var(--u))}




@keyframes obFan{0%,16%{--of:0}36%{--of:1}48%{--of:.94}70%,100%{--of:0}}
.op-case .fzs .vx-ob .ob-panel{position:absolute;z-index:2;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(90*var(--u));padding:calc(24*var(--u)) calc(26*var(--u));border-radius:calc(18*var(--u));background:#DDE4EE;text-align:center}
.op-case .fzs .vx-ob .ob-panel p{margin:0;font:400 calc(16*var(--u))/1.4 "Funnel Sans",var(--sans);color:#0B1220}
.op-case .fzs .vx-ob .ob-btn{position:absolute;z-index:2;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));height:calc(72*var(--u));border-radius:calc(18*var(--u)) calc(18*var(--u)) calc(30*var(--u)) calc(30*var(--u));background:#0B1220;color:#fff;text-align:center;font:600 calc(18*var(--u))/calc(72*var(--u)) "Funnel Sans",var(--sans)}
@media (prefers-reduced-motion:reduce){.op-case .fzs .vx-ob .ob-fan i{animation:none}}

/* consistency pass across the Finna screens: sheets 40, cards 20, rows 16, primary CTA = 58 black pill 600/18, handles 40×4, round icon buttons 40 */

.op-case .fzs .vx-ob .ob-sb{position:absolute;z-index:3}
.op-case .fzs .vx-ob .ob-sb{color:#fff}.op-case .fzs .vx-ob .ob-sb svg{filter:invert(1)}
.op-case .fzs .vx-ob .ob-panel{left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));padding:calc(26*var(--u)) calc(18*var(--u)) calc(18*var(--u));border-radius:calc(40*var(--u));background:#fff;box-shadow:0 calc(-6*var(--u)) calc(30*var(--u)) rgba(11,18,32,.12)}
.op-case .fzs .vx-ob .ob-panel p{padding:0 calc(8*var(--u));color:#3A4250}
.op-case .fzs .vx-ob .ob-btn{position:static;display:grid;place-items:center;margin-top:calc(22*var(--u));height:calc(58*var(--u));border-radius:99px;font:600 calc(18*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .am3-go{flex:none;background:#0B1220;box-shadow:none;font:600 calc(18*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .ax-dl{height:calc(58*var(--u));font:600 calc(18*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .ax-sq{width:calc(58*var(--u));height:calc(58*var(--u))}
.op-case .fzs .ax-body{border-radius:calc(40*var(--u)) calc(40*var(--u)) 0 0}
.op-case .fzs .ax-handle{width:calc(40*var(--u));background:#D1D5DB}
.op-case .fzs .ax-back{width:calc(40*var(--u));height:calc(40*var(--u))}
.op-case .fzs .ax-rows li,.op-case .fzs .ax-rows em{border-radius:calc(16*var(--u))}
.op-case .fzs .ax-dot{left:calc(-2*var(--u));top:calc(-2*var(--u))}
.op-case .fzs .vt-list li{border-radius:calc(16*var(--u))}
.op-case .fzs .vx-tv .tv-box{border-radius:calc(20*var(--u))}
.op-case .fzs .am3-grab{height:calc(4*var(--u))}

/* colour pass: every panel is white like the other Finna sheets; greys = Finna soft #F3F5F8 / line #E6E9EF / mute #6B7280; tags in Finna blue tint */
.op-case .fzs .ax-body{background:#fff}
.op-case .fzs .ax-rows li{background:#F3F5F8}
.op-case .fzs .ax-sq{background:#F3F5F8}
.op-case .fzs .ax-rows .r3 em{background:#E6E9EF;color:#9CA3AF}
.op-case .fzs .ax-acts{box-shadow:0 1px 0 #E6E9EF}
.op-case .fzs .ax-tbl li{box-shadow:0 1px 0 #E6E9EF;color:#6B7280}
.op-case .fzs .ax-tbl li:last-child{box-shadow:none}
.op-case .fzs .ax-k{color:#6B7280}.op-case .fzs .ax-q{stroke:#6B7280}
.op-case .fzs .ax-tag.blue{background:#EEF3FF;color:#1F69FF}
.op-case .fzs .am3-sheet{background:#fff}
.op-case .fzs .vx-ob .ob-panel p{color:#6B7280}

/* body copy = the first screen's description (.gk-desc): 400 16/1.4, #5B6270, left aligned, same sheet padding 24 */
.op-case .fzs .vx-ob .ob-panel{padding:calc(24*var(--u)) calc(24*var(--u)) calc(22*var(--u));text-align:left}
.op-case .fzs .vx-ob .ob-panel p{padding:0;font:400 calc(16*var(--u))/1.4 "Funnel Sans",var(--sans);color:#5B6270}
.op-case .fzs .am3-desc{font:400 calc(16*var(--u))/1.4 "Funnel Sans",var(--sans);color:#5B6270}

/* screen titles = the first screen's .gk-h: 600 30/1.1, -.02em */
.op-case .fzs .ax-t,.op-case .fzs .am3-h{font:600 calc(30*var(--u))/1.1 "Funnel Sans",var(--sans);letter-spacing:-.02em}

/* onboarding mark-fan (Volta's fanning silhouette, made of the Finna mark): the two strokes of the mark split into slats that fan open like blinds (top stroke up, lower stroke down) and fold back into the mark */

.op-case .fzs .vx-ob .ob-mk{position:absolute;inset:0;z-index:1}
.op-case .fzs .vx-ob .ob-bar{position:absolute;height:calc(50.4*var(--u))}
.op-case .fzs .vx-ob .ob-bar i{position:absolute;inset:0;border-radius:99px;background:#0B1220;transform-origin:calc(25.2*var(--u)) 50%;transform:rotate(calc(-17.4deg + var(--d) * var(--of)));border-radius:calc((1 - var(--of)) * 99px + var(--of) * 3px);clip-path:polygon(0 calc(var(--of) * 42%),100% calc(var(--of) * var(--p1,14%)),100% calc(100% - var(--of) * var(--p1,14%)),0 calc(100% - var(--of) * 42%));animation:obFan 4.6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i)*.03s)}
.op-case .fzs .vx-ob .ob-dot{position:absolute;width:calc(47.6*var(--u));height:calc(47.6*var(--u));border-radius:50%;background:#0B1220;animation:obDot 4.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes obDot{0%,18%,70%,100%{scale:1}38%,48%{scale:.82}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .vx-ob .ob-bar i,.op-case .fzs .vx-ob .ob-dot{animation:none}}
.op-case .fzs .vx-ob .ob-bar.b2 i{--p1:24%}

/* mark → bar chart: the strokes of the Finna mark split, slide out and stand up as rising columns (lower stroke = first, shorter bars), the dot lands on the tallest one as the data point; then everything folds back into the mark */
.op-case .fzs .vx-ob .ob-bar i{--th:calc(50.4 * (1 - .56 * var(--of)));left:0;top:50%;bottom:auto;right:auto;width:calc((var(--W) + (var(--w1) - var(--W)) * var(--of)) * var(--u));height:calc(var(--th) * var(--u));margin-top:calc(var(--th) * -.5 * var(--u));border-radius:99px;clip-path:none;transform-origin:calc(var(--th) * .5 * var(--u)) 50%;transform:translate(calc(var(--tx) * var(--of) * var(--u)),calc(var(--ty) * var(--of) * var(--u))) rotate(calc(-17.4deg - 72.6deg * var(--of)));animation:obBars 5.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--j) * .045s)}
.op-case .fzs .vx-ob .ob-dot{transform:translate(calc(var(--tx) * var(--of) * var(--u)),calc(var(--ty) * var(--of) * var(--u)));animation:obBars 5.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:.5s}
.op-case .fzs .vx-ob .ob-dot{--of:0}
@keyframes obBars{0%,14%{--of:0}36%,62%{--of:1}84%,100%{--of:0}}

/* two-step choreography: (A) the strokes break into short pills that slide out to their slots on the baseline, (B) each pill stands up and grows into its column; the dot rides up onto the tallest one; reverse to fold back */
@property --pa{syntax:"<number>";inherits:false;initial-value:0}
@property --pb{syntax:"<number>";inherits:false;initial-value:0}
.op-case .fzs .vx-ob .ob-bar i{--th:calc(50.4 * (1 - .56 * var(--pa)));width:calc((var(--W) + (var(--th) + 4 - var(--W)) * var(--pa) + (var(--w1) - var(--th) - 4) * var(--pb)) * var(--u));transform:translate(calc(var(--tx) * var(--pa) * var(--u)),calc(var(--ty) * var(--pa) * var(--u))) rotate(calc(-17.4deg - 72.6deg * var(--pb)));animation:obA 5.6s cubic-bezier(.45,0,.55,1) infinite,obB 5.6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--j) * .03s),calc(var(--j) * .05s)}
.op-case .fzs .vx-ob .ob-dot{transform:translate(calc(var(--tx) * var(--pb) * var(--u)),calc(var(--ty) * var(--pb) * var(--u)));animation:obB 5.6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:.6s}
@keyframes obA{0%,12%{--pa:0}28%,74%{--pa:1}90%,100%{--pa:0}}
@keyframes obB{0%,26%{--pb:0}42%,60%{--pb:1}76%,100%{--pb:0}}

/* top Finna row on one 10 s clock (Funds sheet, onboarding mark→chart, Activity tap): all start when the row scrolls in, all settle back by ~9 s, restart together */
.op-case .fzs .vx-ob .ob-bar i{animation-duration:10s,10s;animation-play-state:paused}
.op-case .fzs .vx-ob .ob-dot{animation-duration:10s;animation-play-state:paused}
.op-case .fzs .vx-ob:not(.go) .ob-bar i,.op-case .fzs .vx-ob:not(.go) .ob-dot{animation-name:none}
.op-case .fzs .vx-ob.go .ob-bar i,.op-case .fzs .vx-ob.go .ob-dot{animation-play-state:running}
@keyframes obA{0%,3%{--pa:0}12%,70%{--pa:1}79%,100%{--pa:0}}
@keyframes obB{0%,11%{--pb:0}20%,61%{--pb:1}70%,100%{--pb:0}}
.op-case .fzs .gk-ic.c3{background:#FF8A3D}.op-case .fzs .gk-ic.c4{background:#0B1220}.op-case .fzs .gk-ic.c5{background:#8A5CFF}.op-case .fzs .gk-ic.c6{background:#FFB547}.op-case .fzs .gk-row-card{border-radius:calc(16*var(--u))}

/* portfolio screen in the family style: brand-blue field like the onboarding, the LED matrix drawn straight on it in white (no black TV), holdings in the shared white bottom sheet (10 inset, radius 40, title 30/600, soft rows 16, black 58 pill) */
.op-case .fzs .vx.vx-tv{display:block;padding:0;background:#1F69FF;color:#fff}
.op-case .fzs .vx-tv .gk-status{color:#fff}.op-case .fzs .vx-tv .gk-sig{filter:invert(1)}




.op-case .fzs .vx-tv .tv-box{display:block;margin:calc(6*var(--u)) calc(24*var(--u)) 0;padding:0;border-radius:0;background:none;box-shadow:none}

.op-case .fzs .vx-tv .tv-ch{right:calc(-34*var(--u));top:calc(4*var(--u));color:rgba(255,255,255,.7)}

.op-case .fzs .vx-tv .tv-lbl{justify-content:center;gap:calc(10*var(--u));margin-top:calc(4*var(--u));padding:0;color:#fff}
.op-case .fzs .vx-tv .tv-lbl em{color:rgba(255,255,255,.7)}



.op-case .fzs .vx-tv .tv-row{background:#F3F5F8;box-shadow:none}
.op-case .fzs .vx-tv .tv-row.on{background:#fff;box-shadow:0 0 0 calc(2*var(--u)) #1F69FF,0 calc(8*var(--u)) calc(18*var(--u)) rgba(31,105,255,.15);translate:0 0}


/* fund detail (Tech Secondaries) in the family style: light app bg, round nav buttons, target return 40/600, a line chart that draws then switches 1Y→5Y, white bottom sheet (10 inset, r40) with title 30/600, desc 16/1.4, tags, the real portfolio companies as coins, black 58 pill */
.op-case .fzs .vx.vx-fd{--u:calc(100cqw / 393);position:absolute;inset:0;display:block;padding:0;background:#F5F6F8;font-family:"Funnel Sans",var(--sans);color:#0B1220;overflow:hidden;text-align:left;font-variant-numeric:tabular-nums}
.op-case .fzs .vx-fd .gk-status{padding:0 calc(32*var(--u))}
.op-case .fzs .fd-nav{display:flex;justify-content:space-between;padding:calc(6*var(--u)) calc(20*var(--u)) 0}








.op-case .fzs .vx-fd.c1 .l1{stroke-dashoffset:0}.op-case .fzs .vx-fd.c1 .a1{opacity:1;transition-delay:.8s}.op-case .fzs .vx-fd.c1 .d1{opacity:1;scale:1;transition-delay:1.3s}
.op-case .fzs .vx-fd.c5 .l1,.op-case .fzs .vx-fd.c5 .a1,.op-case .fzs .vx-fd.c5 .d1{opacity:0;transition-delay:0s}
.op-case .fzs .vx-fd.c5 .l5{stroke-dashoffset:0}.op-case .fzs .vx-fd.c5 .a5{opacity:1;transition-delay:.8s}.op-case .fzs .vx-fd.c5 .d5{opacity:1;scale:1;transition-delay:1.3s}
.op-case .fzs .fd-chips{display:flex;gap:calc(6*var(--u));padding:calc(14*var(--u)) calc(24*var(--u)) 0}
.op-case .fzs .fd-chips span{display:grid;place-items:center;height:calc(30*var(--u));padding:0 calc(12*var(--u));border-radius:99px;font:600 calc(13*var(--u))/1 "Funnel Sans",var(--sans);color:#6B7280;transition:background .3s ease,color .3s ease,scale .15s ease}
.op-case .fzs .fd-chips span.on{background:#0B1220;color:#fff}
.op-case .fzs .fd-chips span.press{scale:.9}
.op-case .fzs .fd-sheet{position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));padding:calc(24*var(--u)) calc(24*var(--u)) calc(18*var(--u));border-radius:calc(40*var(--u));background:#fff;box-shadow:0 calc(-6*var(--u)) calc(30*var(--u)) rgba(11,18,32,.12)}
.op-case .fzs .fd-h{margin:0;font:600 calc(30*var(--u))/1.1 "Funnel Sans",var(--sans);letter-spacing:-.02em}
.op-case .fzs .fd-desc{margin:calc(10*var(--u)) 0 0;font:400 calc(16*var(--u))/1.4 "Funnel Sans",var(--sans);color:#5B6270}
.op-case .fzs .fd-tags{display:flex;gap:calc(6*var(--u));margin-top:calc(14*var(--u))}
.op-case .fzs .fd-tags span{display:inline-flex;align-items:center;height:calc(26*var(--u));padding:0 calc(10*var(--u));border-radius:calc(8*var(--u));background:#F3F5F8;font:500 calc(13*var(--u))/1 "Funnel Sans",var(--sans);color:#3A4250}
.op-case .fzs .fd-tags .blue{background:#EEF3FF;color:#1F69FF}
.op-case .fzs .fd-k{margin:calc(18*var(--u)) 0 0;font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:#6B7280}
.op-case .fzs .fd-coins{display:flex;align-items:center;margin-top:calc(10*var(--u))}
.op-case .fzs .fd-coins i{display:grid;place-items:center;width:calc(48*var(--u));height:calc(48*var(--u));margin-right:calc(-8*var(--u));border-radius:50%;background:var(--c);box-shadow:0 0 0 calc(3*var(--u)) #fff;scale:0;transition:scale .45s cubic-bezier(.3,1.6,.5,1)}
.op-case .fzs .fd-logo{width:48%;height:48%;fill:#fff}
.op-case .fzs .fd-coins span{display:grid;place-items:center;width:calc(48*var(--u));height:calc(48*var(--u));border-radius:50%;background:#F3F5F8;box-shadow:0 0 0 calc(3*var(--u)) #fff;font:600 calc(14*var(--u))/1 "Funnel Sans",var(--sans);color:#3A4250;scale:0;transition:scale .45s cubic-bezier(.3,1.6,.5,1)}
.op-case .fzs .vx-fd.go .fd-coins i{scale:1;transition-delay:calc(.9s + var(--k)*.09s)}
.op-case .fzs .vx-fd.go .fd-coins span{scale:1;transition-delay:1.4s}
.op-case .fzs .fd-go{display:grid;place-items:center;margin-top:calc(20*var(--u));height:calc(58*var(--u));border-radius:99px;background:#0B1220;color:#fff;font:600 calc(18*var(--u))/1 "Funnel Sans",var(--sans);transition:scale .15s ease}
.op-case .fzs .fd-go.press{scale:.96}
@media (prefers-reduced-motion:reduce){.op-case .fzs .fd-line{stroke-dashoffset:0}.op-case .fzs .l5,.op-case .fzs .a5,.op-case .fzs .d5{display:none}.op-case .fzs .fd-coins i,.op-case .fzs .fd-coins span{scale:1}}

/* Funds = the same app shell as Activity: soft grey blurred app behind, dark status bar, white panel (10 inset, r40) with handle + Funds | Activity tabs; the promo sheet still slides up over it */
.op-case .fzs .vx.vx-gk{background:#EEF0F3;overflow:hidden;padding:0}
.op-case .fzs .vx-gk::before{content:"";position:absolute;inset:calc(-20*var(--u));background:radial-gradient(calc(46*var(--u)) calc(46*var(--u)) at 14% 12%,#C9A68F 0 60%,transparent 62%),linear-gradient(#DADDE3,#DADDE3) 50% calc(100*var(--u))/88% calc(46*var(--u)) no-repeat,radial-gradient(calc(40*var(--u)) calc(40*var(--u)) at 14% 26%,#1F69FF 0 60%,transparent 62%),linear-gradient(#E3E6EB,#E3E6EB) 50% calc(176*var(--u))/88% calc(70*var(--u)) no-repeat,linear-gradient(#E3E6EB,#E3E6EB) 50% calc(262*var(--u))/88% calc(70*var(--u)) no-repeat,#F3F4F6;filter:blur(calc(7*var(--u)))}
.op-case .fzs .vx-gk::after{content:"";position:absolute;inset:0;background:rgba(11,18,32,.2)}
.op-case .fzs .vx-gk > .gk-status{position:relative;z-index:1;height:calc(58*var(--u));padding:0 calc(32*var(--u))}
.op-case .fzs .vx-gk .gk-app{position:absolute;z-index:1;top:calc(74*var(--u));left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));padding:calc(26*var(--u)) calc(22*var(--u)) 0;border-radius:calc(40*var(--u));background:#fff;box-shadow:0 calc(-6*var(--u)) calc(30*var(--u)) rgba(11,18,32,.12);overflow:hidden}
.op-case .fzs .vx-gk .vt-handle{background:#D1D5DB}
.op-case .fzs .vx-gk .vt-tabs{margin-top:calc(30*var(--u));font-size:calc(22*var(--u))}
.op-case .fzs .vx-gk .gk-dim{z-index:2}.op-case .fzs .vx-gk .gk-sheet{z-index:3}

/* fund rows as cards in the family style: soft grey blocks r16, icon, name + label, the return set large on the right like the Activity amounts */
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card){margin-top:calc(8*var(--u));padding:calc(12*var(--u)) calc(16*var(--u)) calc(12*var(--u)) calc(12*var(--u));border-radius:calc(16*var(--u));background:#F3F5F8;gap:calc(12*var(--u))}
.op-case .fzs .vx-gk .gk-row-card + .gk-row{margin-top:calc(14*var(--u))}
.op-case .fzs .vx-gk .gk-row .gk-ic{width:calc(44*var(--u));height:calc(44*var(--u))}
.op-case .fzs .vx-gk .gk-row em{font-size:calc(13*var(--u))}
.op-case .fzs .vx-gk .gk-row strong{font:400 calc(26*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.02em;color:#0E9F6E}
.op-case .fzs .vx-gk .gk-row-card{background:#EEF3FF;box-shadow:none}
.op-case .fzs .vx-gk .gk-row-card .gk-ic.c0{background:#fff}

/* fund rows after Volta's charger rows: large return on the left, thin divider, fund name, a full-height dark "Invest" segment on the right, the fund colour as a status dot on the corner */
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card){position:relative;height:calc(58*var(--u));margin-top:calc(6*var(--u));padding:0;gap:0;align-items:stretch;border-radius:calc(16*var(--u));background:#F3F5F8;overflow:visible}
.op-case .fzs .vx-gk .gk-row-card + .gk-row{margin-top:calc(14*var(--u))}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) .gk-ic{position:absolute;left:calc(-2*var(--u));top:calc(-2*var(--u));width:calc(10*var(--u));height:calc(10*var(--u))}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) .gk-ic svg{display:none}
.op-case .fzs .vx-gk .gk-row strong{order:-1;display:flex;align-items:center;width:calc(104*var(--u));padding-left:calc(14*var(--u));box-sizing:border-box;font:400 calc(26*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.02em;color:#0B1220;box-shadow:inset calc(-1.5*var(--u)) 0 0 #0B1220;margin:calc(14*var(--u)) 0;line-height:calc(30*var(--u))}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) > span{flex:1;justify-content:center;align-items:center;text-align:center}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) > span b{font:500 calc(14*var(--u))/1.2 "Funnel Sans",var(--sans)}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) > span em{display:none}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card)::after{content:"Invest";display:grid;place-items:center;width:calc(78*var(--u));border-radius:calc(16*var(--u));background:#0B1220;color:#fff;font:500 calc(14*var(--u))/1 "Funnel Sans",var(--sans)}

/* fund cards (not info rows): name small on top, the return big below like the Activity amounts, a mini trend line in the fund colour, the corner status dot and the dark Invest segment */
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card){height:calc(78*var(--u));margin-top:calc(8*var(--u))}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) > span{flex:0 0 auto;width:calc(132*var(--u));flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;padding:calc(13*var(--u)) 0 calc(12*var(--u)) calc(14*var(--u));box-sizing:border-box}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) > span em{display:block;font:500 calc(13*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;color:#6B7280;white-space:nowrap}
.op-case .fzs .vx-gk .gk-row:not(.gk-row-card) > span strong{order:0;display:block;width:auto;margin:0;padding:0;box-shadow:none;font:400 calc(30*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.02em;color:#0B1220}



/* fund cards in the style of the Add-money options: white card r20 with hairline, name 16/600, return + one-liner, mini icon stack, chevron */
.op-case .fzs .vx-gk .gk-fund{margin-top:calc(10*var(--u));padding:calc(14*var(--u)) calc(16*var(--u))}
.op-case .fzs .vx-gk .gk-row-card + .gk-fund{margin-top:calc(14*var(--u))}
.op-case .fzs .vx-gk .gk-fund em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-case .fzs .vx-gk .gk-fund em strong{font-weight:600;color:#0E9F6E}
.op-case .fzs .vx-gk .gk-fund .gk-logo{width:56%;height:56%;fill:#fff;stroke:none}
.op-case .fzs .vx-gk .gk-fund .am3-txt{min-width:0}

/* fund chart in the screens' own language: rounded pill columns (like the onboarding bar chart) in Finna-blue tint, the latest one solid brand blue; they grow in, then regrow when 5Y is picked */





@media (prefers-reduced-motion:reduce){.op-case .fzs .fd-bars i{height:var(--a);transition:none}}

/* fund header after Volta's charging screen: small two-line caption on top, one big rounded "tank" that fills with the return (like the charge level) with the % set huge in its corner, a one-line stats strip under it */
.op-case .fzs .vx-fd .fd-cap{display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--u));padding:calc(14*var(--u)) calc(24*var(--u)) 0;text-align:center}
.op-case .fzs .vx-fd .fd-cap b{display:flex;align-items:center;gap:calc(6*var(--u));font:500 calc(15*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .vx-fd .fd-cap b i{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#3DD9A7}
.op-case .fzs .vx-fd .fd-cap em{font:500 calc(10.5*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;letter-spacing:.06em;color:#6B7280}
.op-case .fzs .vx-fd .fd-tank{position:relative;height:calc(258*var(--u));margin:calc(16*var(--u)) calc(18*var(--u)) 0;border-radius:calc(20*var(--u));background:#DCE6FF;overflow:hidden}
.op-case .fzs .vx-fd .fd-fill{position:absolute;left:0;right:0;bottom:0;height:8%;background:#1F69FF;transition:height 1.4s cubic-bezier(.5,0,.2,1)}
.op-case .fzs .vx-fd.c1 .fd-fill{height:46%}
.op-case .fzs .vx-fd.c5 .fd-fill{height:88%}
.op-case .fzs .vx-fd .fd-num{position:absolute;right:calc(16*var(--u));bottom:calc(12*var(--u));display:flex;align-items:flex-start;font:400 calc(64*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.03em;color:#fff}
.op-case .fzs .vx-fd .fd-num small{margin-top:calc(6*var(--u));font-size:calc(22*var(--u))}
.op-case .fzs .vx-fd .fd-chips{position:absolute;z-index:1;left:calc(12*var(--u));top:calc(12*var(--u));padding:0;gap:calc(4*var(--u))}
.op-case .fzs .vx-fd .fd-chips span{height:calc(28*var(--u));background:rgba(255,255,255,.7);color:#0B1220}
.op-case .fzs .vx-fd .fd-chips span.on{background:#0B1220;color:#fff}



/* fund header text = the shared label style (like "Your portfolio" / "Target return" elsewhere): 15/500 mute, left aligned; stats moved into the sheet tags */
.op-case .fzs .vx-fd .fd-cap{display:block;padding:calc(18*var(--u)) calc(24*var(--u)) 0;text-align:left}
.op-case .fzs .vx-fd .fd-cap em{font:500 calc(15*var(--u))/1 "Funnel Sans",var(--sans);font-style:normal;letter-spacing:0;color:#6B7280}
.op-case .fzs .vx-fd .fd-tank{margin-top:calc(12*var(--u));height:calc(244*var(--u))}

/* fund header = the portfolio header pattern used elsewhere: label 15/500, amount 40/600, green pill */
.op-case .fzs .vx-fd .fd-cap{display:flex;flex-direction:column;align-items:flex-start;padding:calc(10*var(--u)) calc(24*var(--u)) 0}
.op-case .fzs .vx-fd .fd-cap b{margin-top:calc(8*var(--u));font:600 calc(40*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.02em;color:#0B1220}
.op-case .fzs .vx-fd .fd-up{margin-top:calc(10*var(--u));padding:calc(5*var(--u)) calc(10*var(--u));border-radius:99px;background:#E3F7EF;color:#0E9F6E;font:600 calc(13*var(--u))/1 "Funnel Sans",var(--sans)}
.op-case .fzs .vx-fd .fd-tank{margin-top:calc(16*var(--u));height:calc(176*var(--u))}
.op-case .fzs .vx-fd .fd-num{font-size:calc(56*var(--u))}
/* smoother fades in the Activity details */
.op-case .fzs .vx-act.ax .act-xp{transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .35s ease,visibility 0s}
.op-case .fzs .ax-rows li{transition:opacity .5s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .vx-fd .fd-cap{align-items:center;text-align:center}
/* tank taller, tucks ~40u under the bottom sheet; the number sits above the overlap */.op-case .fzs .vx-fd .fd-tank{height:calc(280*var(--u))}.op-case .fzs .vx-fd .fd-num{bottom:calc(54*var(--u))}.op-case .fzs .vx-fd .fd-sheet{z-index:2}
/* amount = the Portfolio "$0.00" on the Invest screen */.op-case .fzs .vx-fd .fd-cap b{margin-top:calc(10*var(--u));font:600 calc(46*var(--u))/1 "Funnel Sans",var(--sans);letter-spacing:-.035em}
/* growth pill: white like the nav buttons so it stands off the grey */.op-case .fzs .vx-fd .fd-up{background:#fff;color:#0E9F6E;box-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(11,18,32,.08)}
/* step copy: a black lead, the rest in grey (like the case intro) so it scans */.op-case .t2-list p{color:#6B6B6B;font-size:16px;line-height:1.5}.op-case .t2-list p b{font-weight:600;color:var(--ink)}
/* more air around "How we reach this" in the case modals */.op-case .op-reach1{margin-top:clamp(64px,7vw,104px)!important;margin-bottom:0!important}.op-case .op-reach2{margin-bottom:clamp(64px,7vw,104px)!important}.op-case .op-offers-k{margin-bottom:clamp(32px,3.6vw,52px)}@media (max-width:600px){.op-case .op-reach1{margin-top:56px!important}.op-case .op-reach2{margin-bottom:56px!important}}
/* step copy after Ferndesk "How it works": small number, short bold title, grey body */.op-case .t2-list li{flex-direction:column;align-items:flex-start;justify-content:flex-start}.op-case .t2-list .t2-n{font:500 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:#9A9A9A}.op-case .t2-list .t2-h{margin:12px 0 0;font:600 18px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}.op-case .t2-list p{margin-top:8px;font-size:15px;line-height:1.5;color:#6B6B6B;max-width:300px}
/* each step's visual sits in its own card (Ferndesk "How it works"): number in the card corner, text below; no connector arrows across the cards */
.op-case .t2-vis{position:relative;padding:28px 0 20px}
.op-case .t2-cards{position:absolute;inset:0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;pointer-events:none}
.op-case .t2-cards i{position:relative;border-radius:16px;background:#FAFAFA;box-shadow:inset 0 0 0 1px #ECECEC}
.op-case .t2-cards span{position:absolute;right:14px;top:12px;font:500 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:#9A9A9A}
.op-case .t2-vis .t2-art{position:relative}
.op-case .t2-art .t2-track,.op-case .t2-art .t2-pin,.op-case .t2-art .t2-fly{display:none}
.op-case .t2-list .t2-n{display:none}.op-case .t2-list .t2-h{margin-top:4px}
.op-case .t2-grid{gap:20px}
@media (max-width:600px){.op-case .t2-mvis{max-width:none;margin:0 0 4px;border-radius:16px;background:#FAFAFA;box-shadow:inset 0 0 0 1px #ECECEC;padding:max(5%,16px) max(10%,calc((100% - 320px) / 2)) max(3%,10px);box-sizing:border-box}.op-case .t2-list li{align-items:stretch}}
/* connectors between the step cards: a clean round chip centred on the gap, with an arrow that nudges forward */
.op-case .t2-cards i:not(:last-child)::after{content:"";position:absolute;z-index:1;top:50%;right:-26px;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F56F51' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") 50% 50%/14px 14px no-repeat;box-shadow:0 0 0 1px #ECECEC,0 2px 6px rgba(11,11,11,.06);animation:t2Nudge 2.4s cubic-bezier(.5,0,.2,1) infinite}
@keyframes t2Nudge{0%,55%,100%{background-position:50% 50%}75%{background-position:calc(50% + 3px) 50%}}
@media (prefers-reduced-motion:reduce){.op-case .t2-cards i::after{animation:none}}
/* facts column a bit narrower, kept to the right edge */.op-case .op-case-facts{width:86%;max-width:none;margin-left:auto;justify-self:end}@media (max-width:900px){.op-case .op-case-facts{max-width:none;margin-left:0;justify-self:stretch;width:100%}}
/* case titles may run a little into the gutter (facts column is narrower now) so the Danzee title sits on 3 lines */@media (min-width:901px){.op-case .op-top h3{padding-right:0!important;margin-right:-72px;text-wrap:balance}}
@media (min-width:901px){.op-case .op-top > .op-case-facts{align-self:start}}
@media (min-width:601px) and (max-width:900px){.op-case .t2-list{padding:0 12px;gap:12px}.op-case .t2-cards{inset:0 12px;gap:12px}.op-case .t2-cards i:not(:last-child)::after{right:-20px;width:28px}.op-case .t2-list .t2-h{font-size:16px}.op-case .t2-list p{font-size:14px}}
/* Meld case: screens are exported straight from the Figma prototype */#op-case-meld .rc-man.rc-yes .rc-body,#op-case-meld .rc-man.rc-yes .rc-head{}

/* Meld home, rebuilt 1:1 from the Figma frame (390×844) — splash: the big logo shrinks into the FAB while the home lands; then the balance cards swipe Overview → MELD → Bitcoin, the dots and the chart tint follow */
.op-case .fzs .vx.ml-home{--u:calc(100cqw / 390);--mr:#E51B44;position:absolute;inset:0;padding:0;overflow:hidden;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif;color:#30333C;text-align:left;letter-spacing:0}
.ml-home > *{position:absolute}
.ml-home .mh-hd{left:0;right:0;top:calc(47*var(--u));height:calc(44*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24*var(--u))}
.ml-home .mh-av{width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;overflow:hidden;background:#D9D9D9}.ml-home .mh-av img{width:100%;height:100%;object-fit:cover}
.ml-home .mh-chat{width:calc(24*var(--u));height:calc(24*var(--u));margin-right:calc(12*var(--u))}
.ml-home .mh-tile{left:calc(22*var(--u));width:calc(165*var(--u));height:calc(64*var(--u));box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(12*var(--u)) calc(8*var(--u)) 0 calc(20*var(--u));border-radius:calc(12*var(--u));background:#fff;box-shadow:0 0 calc(8*var(--u)) rgba(182,182,182,.25)}
.ml-home .mh-tile.t1{top:calc(116*var(--u))}.ml-home .mh-tile.t2{top:calc(192*var(--u))}.ml-home .mh-tile.t3{top:calc(268*var(--u))}
.ml-home .mh-tile b,.ml-home .mh-nt b{font:700 calc(14*var(--u))/calc(13*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#9E9FA9;white-space:nowrap}
.ml-home .mh-tile img{width:calc(20*var(--u));height:calc(20*var(--u));margin-top:calc(-4*var(--u))}
.ml-home .mh-neo{left:calc(201*var(--u));top:calc(113*var(--u));width:calc(165*var(--u));height:calc(219*var(--u));border-radius:calc(12*var(--u));background:var(--mr);overflow:hidden}
.ml-home .mh-nt{position:absolute;left:calc(20*var(--u));right:calc(20*var(--u));top:calc(12*var(--u));display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.ml-home .mh-nt b{color:rgba(255,255,255,.6)}.ml-home .mh-nt img{width:calc(16*var(--u));height:calc(16*var(--u))}
.ml-home .mh-cat{position:absolute;left:calc(1.9*var(--u));top:calc(42*var(--u));width:calc(212*var(--u));height:calc(201.7*var(--u));object-fit:cover;max-width:none}
.ml-home .mh-neo p{position:absolute;z-index:2;left:calc(20*var(--u));top:calc(134*var(--u));width:calc(125*var(--u));margin:0;font:700 calc(17*var(--u))/calc(20*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em;color:#F5F5F5}
.ml-home .mh-btn{top:calc(344*var(--u));width:calc(165*var(--u));height:calc(60*var(--u));box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(8*var(--u)) calc(8*var(--u)) 0 calc(20*var(--u));border-radius:calc(8*var(--u));color:#fff}
.ml-home .mh-btn b{font:700 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;text-transform:uppercase}
.ml-home .mh-btn img{width:calc(20*var(--u));height:calc(20*var(--u));margin-top:calc(-2*var(--u))}
.ml-home .mh-btn.rcv{left:calc(24*var(--u));background:#000}.ml-home .mh-btn.snd{left:calc(201*var(--u));background:var(--mr)}
.ml-home .mh-chart{left:0;top:calc(418*var(--u));width:calc(390*var(--u));height:calc(426*var(--u))}
.ml-home .mh-ts{display:flex;justify-content:space-between;align-items:center;height:calc(32*var(--u));padding:0 calc(24*var(--u))}
.ml-home .mh-ts i{width:calc(32*var(--u));text-align:center;font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;color:#C2C2C2}
.ml-home .mh-ts i.on{color:var(--mr)}.ml-home .mh-ts i.mx{font-weight:500;color:#444657}
.ml-home .mh-fill{position:absolute;left:0;top:calc(44*var(--u));width:100%;height:calc(382*var(--u));background:#525255;-webkit-mask:url("/landing/assets/img/meld/home/chart.svg") 0 0/100% 100% no-repeat;mask:url("/landing/assets/img/meld/home/chart.svg") 0 0/100% 100% no-repeat;transition:background-color .6s ease}
.ml-home .mh-cards{left:calc(24*var(--u));top:calc(568*var(--u));width:calc(366*var(--u));height:calc(156*var(--u));overflow:visible}
.ml-home .mh-track{display:flex;gap:calc(12*var(--u));transition:transform .7s cubic-bezier(.65,0,.25,1)}
.ml-home .mh-card{flex:0 0 calc(342*var(--u));height:calc(156*var(--u));box-sizing:border-box;display:flex;flex-direction:column;padding:calc(16*var(--u)) calc(20*var(--u));border-radius:calc(12*var(--u));color:#fff}
.ml-home .mh-card.k0{background:#000}.ml-home .mh-card.k1{background:var(--mr)}.ml-home .mh-card.k2{background:#F7931A}
.ml-home .mh-ct{display:flex;justify-content:space-between;align-items:center}
.ml-home .mh-ct b{font:700 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#F5F5F5}
.ml-home .mh-badge{display:flex;align-items:center;gap:calc(2*var(--u));height:calc(20*var(--u));padding:0 calc(8*var(--u));border-radius:calc(16*var(--u));background:rgba(0,0,0,.25);font:700 calc(10*var(--u))/calc(13*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#30BB5B}
.ml-home .mh-badge img{width:calc(8*var(--u));height:calc(8.5*var(--u))}
.ml-home .mh-card em{margin-top:calc(4*var(--u));font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ml-home .mh-card strong{margin-top:calc(4*var(--u));font:600 calc(32*var(--u))/calc(38*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:-.01em}
.ml-home .mh-card strong small{font-size:calc(20.64*var(--u))}
.ml-home .mh-foot{margin-top:auto;font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:rgba(255,255,255,.6)}
.ml-home .mh-dots{left:calc(161*var(--u));top:calc(736*var(--u));display:flex;gap:calc(4*var(--u))}
.ml-home .mh-dots i{width:calc(4*var(--u));height:calc(4*var(--u));border-radius:99px;background:#C2C2C2;transition:width .5s cubic-bezier(.65,0,.25,1),background .5s ease}
.ml-home .mh-dots i:first-child{width:calc(12*var(--u));background:#30333C}
.ml-home.c1 .mh-dots i:first-child,.ml-home.c2 .mh-dots i:first-child{width:calc(4*var(--u));background:#C2C2C2}
.ml-home.c1 .mh-dots i:nth-child(2),.ml-home.c2 .mh-dots i:nth-child(3){width:calc(12*var(--u));background:#30333C}
.ml-home.c1 .mh-track{transform:translateX(calc(-354*var(--u)))}.ml-home.c2 .mh-track{transform:translateX(calc(-708*var(--u)))}
.ml-home.c1 .mh-fill{background:var(--mr)}.ml-home.c2 .mh-fill{background:#F7931A}
.ml-home .mh-fab{left:calc(163*var(--u));top:calc(752*var(--u));width:calc(64*var(--u));height:calc(64*var(--u));border-radius:50%;box-shadow:0 0 calc(34*var(--u)) rgba(0,0,0,.4);z-index:5;transition:transform .9s cubic-bezier(.65,0,.25,1),box-shadow .9s ease}
.ml-home .mh-fab img{width:100%;height:100%;display:block;border-radius:50%}
.ml-home .mh-home{left:calc(128*var(--u));bottom:calc(8*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:99px;background:#000}
/* splash: before .in the logo sits big in the middle and the home is hidden */
.ml-home:not(.in) .mh-fab{transform:translateY(calc(-362*var(--u))) scale(1.9);box-shadow:none}
.ml-home .mh-hd,.ml-home .mh-tile,.ml-home .mh-neo,.ml-home .mh-btn,.ml-home .mh-chart,.ml-home .mh-cards,.ml-home .mh-dots{transition:opacity .55s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.ml-home:not(.in) .mh-hd,.ml-home:not(.in) .mh-tile,.ml-home:not(.in) .mh-neo,.ml-home:not(.in) .mh-btn,.ml-home:not(.in) .mh-dots{opacity:0;translate:0 calc(14*var(--u));transition-duration:.35s,.35s;transition-delay:0s}
.ml-home:not(.in) .mh-chart{opacity:0;translate:0 calc(60*var(--u))}
.ml-home:not(.in) .mh-cards{opacity:0;translate:calc(60*var(--u)) 0}
.ml-home.in .mh-hd{transition-delay:.45s}.ml-home.in .mh-tile.t1{transition-delay:.5s}.ml-home.in .mh-neo{transition-delay:.55s}.ml-home.in .mh-tile.t2{transition-delay:.58s}.ml-home.in .mh-tile.t3{transition-delay:.66s}.ml-home.in .mh-btn{transition-delay:.72s}.ml-home.in .mh-chart{transition-delay:.6s}.ml-home.in .mh-cards{transition-delay:.78s}.ml-home.in .mh-dots{transition-delay:.9s}
@media (prefers-reduced-motion:reduce){.ml-home *{transition:none!important}}

/* Meld · Overview details, rebuilt from the Figma frames (390×844): FIAT list → tab notch slides to TRANSACTIONS (chart draws in, the white sheet rises with the history and scrolls) → CRYPTO → back */
.op-case .fzs .vx.ml-ov{--u:calc(100cqw / 390);--mr:#E51B44;position:absolute;inset:0;padding:0;overflow:hidden;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif;color:#30333C;text-align:left;letter-spacing:0}
.ml-ov > *{position:absolute}
.ml-ov .mo-hd{left:0;right:0;top:calc(47*var(--u));height:calc(48*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24*var(--u))}
.ml-ov .mo-hd img{width:calc(24*var(--u));height:calc(24*var(--u))}
.ml-ov .mo-hd b{font:700 calc(16*var(--u))/calc(20*var(--u)) "Inter Tight","Geist",system-ui,sans-serif}
.ml-ov .mo-cards{left:calc(24*var(--u));top:calc(115*var(--u));width:calc(366*var(--u));height:calc(156*var(--u))}
.ml-ov .mo-card{position:absolute;left:0;top:0;width:calc(342*var(--u));height:calc(156*var(--u));border-radius:calc(12*var(--u));background:#000;color:#fff}
.ml-ov .mo-card.nx{left:calc(354*var(--u));background:var(--mr)}
.ml-ov .mo-ct,.ml-ov .mo-card em,.ml-ov .mo-card strong{position:absolute;left:calc(20*var(--u))}
.ml-ov .mo-ct{top:calc(16*var(--u));display:flex;height:calc(16*var(--u))}.ml-ov .mo-ct b{font:700 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#F5F5F5}
.ml-ov .mo-card em{top:calc(36*var(--u));font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ml-ov .mo-card strong{top:calc(56*var(--u));font:600 calc(32*var(--u))/calc(38*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:-.01em}.ml-ov .mo-card strong small{font-size:calc(20.64*var(--u))}
.ml-ov .mo-tabs{position:absolute;left:0;top:calc(116*var(--u));width:calc(342*var(--u));height:calc(40*var(--u))}
.ml-ov .mo-notch{position:absolute;left:calc(-12*var(--u));top:0;width:calc(137*var(--u));height:calc(40*var(--u));transform:translateX(0);transition:transform .55s cubic-bezier(.65,0,.25,1)}
.ml-ov .mo-tabs i{position:absolute;top:0;width:calc(114*var(--u));height:calc(40*var(--u));display:grid;place-items:center;font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;text-transform:uppercase;color:rgba(255,255,255,.6);transition:color .35s ease}
.ml-ov .mo-tabs .t0{left:0}.ml-ov .mo-tabs .t1{left:calc(114*var(--u))}.ml-ov .mo-tabs .t2{left:calc(228*var(--u))}
.ml-ov .mo-tabs .t0{color:#30333C}
.ml-ov.s1 .mo-notch{transform:translateX(calc(114*var(--u)))}.ml-ov.s2 .mo-notch{transform:translateX(calc(228*var(--u)))}
.ml-ov.s1 .mo-tabs .t0,.ml-ov.s2 .mo-tabs .t0{color:rgba(255,255,255,.6)}
.ml-ov.s1 .mo-tabs .t1,.ml-ov.s2 .mo-tabs .t2{color:#30333C;transition-delay:.2s}
.ml-ov .mo-dots{left:calc(161*var(--u));top:calc(287*var(--u));display:flex;gap:calc(4*var(--u))}
.ml-ov .mo-dots i{width:calc(4*var(--u));height:calc(4*var(--u));border-radius:99px;background:#C2C2C2}.ml-ov .mo-dots i:first-child{width:calc(12*var(--u));background:#30333C}
.ml-ov .mo-list{left:calc(24*var(--u));top:calc(299*var(--u));width:calc(342*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.ml-ov .mo-row{display:flex;align-items:center;gap:calc(12*var(--u));height:calc(68*var(--u));box-sizing:border-box;padding:0 calc(20*var(--u));border-radius:calc(12*var(--u));background:#fff;box-shadow:0 0 calc(8*var(--u)) rgba(182,182,182,.25);opacity:0;translate:0 calc(16*var(--u));transition:opacity .4s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
.ml-ov .mo-row img{width:calc(32*var(--u));height:calc(32*var(--u))}.ml-ov .mo-row img.ch{width:calc(24*var(--u));height:calc(24*var(--u));margin-left:auto}
.ml-ov .mo-row b{font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em}
.ml-ov.s0 .l-fiat .mo-row,.ml-ov.s2 .l-crypto .mo-row{opacity:1;translate:0 0}
.ml-ov.s0 .l-fiat .mo-row:nth-child(2),.ml-ov.s2 .l-crypto .mo-row:nth-child(2){transition-delay:.06s}.ml-ov.s0 .l-fiat .mo-row:nth-child(3){transition-delay:.12s}.ml-ov.s0 .l-fiat .mo-row:nth-child(4){transition-delay:.18s}.ml-ov.s0 .l-fiat .mo-row:nth-child(5){transition-delay:.24s}
.ml-ov .mo-tr{left:0;top:0;width:100%;height:100%;pointer-events:none}
.ml-ov .mo-date{position:absolute;left:calc(24*var(--u));top:calc(307*var(--u));margin:0;font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;text-transform:uppercase;opacity:0;transition:opacity .4s ease}
.ml-ov .mo-chart{position:absolute;left:0;top:calc(343*var(--u));width:calc(390*var(--u));height:calc(192*var(--u));clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.5,0,.2,1)}
.ml-ov .mo-chart .cv{position:absolute;inset:0;width:100%;height:100%}
.ml-ov .mo-chart .ln{position:absolute;left:0;top:calc(23.5*var(--u));width:100%;height:calc(1.5*var(--u));mix-blend-mode:multiply}
.ml-ov .mo-chart .dt{position:absolute;left:calc(249*var(--u));top:calc(4*var(--u));width:calc(12*var(--u));height:calc(12*var(--u));scale:0;transition:scale .4s cubic-bezier(.3,1.6,.5,1)}
.ml-ov .mo-sheet{position:absolute;left:0;top:calc(454*var(--u));width:calc(390*var(--u));height:calc(448*var(--u));border-radius:calc(32*var(--u)) calc(32*var(--u)) 0 0;background:#fff;box-shadow:0 calc(4*var(--u)) calc(30*var(--u)) rgba(0,0,0,.5);translate:0 100%;transition:translate .7s cubic-bezier(.2,.8,.2,1)}
.ml-ov .mo-txs{position:absolute;left:0;top:calc(381*var(--u));width:calc(390*var(--u));height:calc(463*var(--u));overflow:hidden}
.ml-ov .mo-scroll{transition:transform 1.4s cubic-bezier(.5,0,.2,1)}
.ml-ov .mo-tx{display:flex;align-items:center;gap:calc(8*var(--u));height:calc(70*var(--u));box-sizing:border-box;padding:calc(24*var(--u)) calc(24*var(--u)) calc(12*var(--u));opacity:0;translate:0 calc(24*var(--u));transition:opacity .4s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
.ml-ov .mo-ic{position:relative;flex:0 0 calc(37*var(--u));height:calc(34*var(--u))}
.ml-ov .mo-ic img{position:absolute;left:0;top:calc(2*var(--u));width:calc(32*var(--u));height:calc(32*var(--u))}
.ml-ov .mo-ic img.k{left:calc(21.9*var(--u));top:calc(2.3*var(--u));width:calc(13.4*var(--u));height:calc(13.4*var(--u))}
.ml-ov .mo-ti{flex:1;display:flex;flex-direction:column;gap:calc(2*var(--u))}
.ml-ov .mo-ti b,.ml-ov .mo-ti em{display:flex;justify-content:space-between;white-space:nowrap}
.ml-ov .mo-ti b{font:700 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em;color:#3F4150}
.ml-ov .mo-ti b i{font-style:normal}
.ml-ov .mo-ti em{height:calc(13*var(--u));align-items:center;font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;text-transform:uppercase;color:#9E9FA9}
.ml-ov .mo-ti em i{font-style:normal}
.ml-ov .mo-tx.w .mo-ti b{color:#fff}.ml-ov .mo-tx.w .mo-ti em{color:rgba(255,255,255,.6)}
.ml-ov.s1 .mo-date{opacity:1;transition-delay:.3s}
.ml-ov.s1 .mo-chart{clip-path:inset(0 0 0 0);transition-delay:.25s}
.ml-ov.s1 .mo-chart .dt{scale:1;transition-delay:1.1s}
.ml-ov.s1 .mo-sheet{translate:0 0;transition-delay:.35s}
.ml-ov.s1 .mo-tx{opacity:1;translate:0 0}
.ml-ov.s1 .mo-tx:nth-child(1){transition-delay:.6s}.ml-ov.s1 .mo-tx:nth-child(2){transition-delay:.68s}.ml-ov.s1 .mo-tx:nth-child(3){transition-delay:.76s}.ml-ov.s1 .mo-tx:nth-child(4){transition-delay:.84s}.ml-ov.s1 .mo-tx:nth-child(5){transition-delay:.92s}.ml-ov.s1 .mo-tx:nth-child(n+6){transition-delay:1s}
.ml-ov.s1.sc .mo-scroll{transform:translateY(calc(-140*var(--u)))}
.ml-ov .mo-fab{left:calc(163*var(--u));top:calc(752*var(--u));z-index:5}.ml-ov .mo-fab{width:calc(64*var(--u));height:calc(64*var(--u));border-radius:50%;box-shadow:0 0 calc(34*var(--u)) rgba(0,0,0,.4)}.ml-ov .mo-fab img{width:100%;height:100%;display:block;border-radius:50%}.ml-ov .mh-home{left:calc(128*var(--u));bottom:calc(8*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:99px;background:#000;z-index:6}
@media (prefers-reduced-motion:reduce){.ml-ov *{transition:none!important}}

/* Meld · quick actions, from the Figma frame: tap the FAB → a frosted veil + pink glow rise over the home, the five actions fly out of the FAB on an arc, the logo turns into ×; then it closes again */
.op-case .fzs .vx.ml-act{--u:calc(100cqw / 390);position:absolute;inset:0;padding:0;overflow:hidden;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif}
.ml-act > *{position:absolute}

.ml-act .ma-veil{inset:0;background:linear-gradient(180deg,rgba(245,245,245,.98) 0,rgba(245,245,245,.98) 40%,rgba(245,245,245,.72) 100%);opacity:0;transition:opacity .45s ease}
.ml-act .ma-blob{left:calc(-68*var(--u));top:calc(475*var(--u));width:calc(527*var(--u));height:calc(499*var(--u));border-radius:50%;background:radial-gradient(closest-side,rgba(237,95,124,.92) 0,rgba(237,95,124,.7) 45%,rgba(237,95,124,0) 100%);filter:blur(calc(30*var(--u)));opacity:0;transform:translateY(calc(160*var(--u))) scale(.5);transform-origin:50% 100%;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ml-act .ma-hd{left:calc(24*var(--u));right:calc(36*var(--u));top:calc(49*var(--u));height:calc(40*var(--u));display:flex;align-items:center;justify-content:space-between;opacity:0;transition:opacity .4s ease}
.ml-act .ma-hd span{width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;overflow:hidden}.ml-act .ma-hd span img{width:100%;height:100%;object-fit:cover}
.ml-act .ma-hd .c{width:calc(24*var(--u));height:calc(24*var(--u))}



.ml-act .ma-fab{left:calc(163*var(--u));top:calc(752*var(--u));width:calc(64*var(--u));height:calc(64*var(--u));z-index:4;transition:transform .15s ease}
.ml-act .ma-fab img{position:absolute;display:block}
.ml-act .ma-fab .lg{inset:0;width:100%;height:100%;border-radius:50%;box-shadow:0 0 calc(34*var(--u)) rgba(0,0,0,.4);transition:opacity .3s ease,transform .45s cubic-bezier(.5,0,.2,1)}
.ml-act .ma-fab .x{left:-53.13%;top:-53.13%;width:206.25%;height:206.25%;max-width:none;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.ml-act .ma-fab.press{transform:scale(.9)}
.ml-act .ma-home{left:calc(128*var(--u));bottom:calc(8*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:99px;background:#000;z-index:5}
.ml-act.open .ma-veil{opacity:1}
.ml-act.open .ma-blob{opacity:1;transform:none;transition-delay:.05s}
.ml-act.open .ma-hd{opacity:1}


.ml-act.open .ma-fab .lg{opacity:0;transform:rotate(90deg) scale(.6)}
.ml-act.open .ma-fab .x{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ml-act *{transition:none!important}}

/* Meld · send receipt, from the Figma frame + the "Receipt Printer" reference: a dark printer strip reports the status, the receipt is printed out from under it in short jerks, then Send is tapped and the receipt tears away */
.op-case .fzs .vx.ml-rc{--u:calc(100cqw / 390);position:absolute;inset:0;padding:0;overflow:hidden;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif;color:#30333C;text-align:left;letter-spacing:0}
.ml-rc > *{position:absolute}
.ml-rc .mr-sb{left:0;right:0;top:0;height:calc(47*var(--u));display:flex;align-items:center;justify-content:space-between;padding:calc(4*var(--u)) calc(26*var(--u)) 0 calc(38*var(--u));font:600 calc(17*var(--u))/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#000}
.ml-rc .mr-sb img{width:calc(77*var(--u));height:calc(13*var(--u))}
.ml-rc .mr-hd{left:0;right:0;top:calc(47*var(--u));height:calc(48*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24*var(--u))}
.ml-rc .mr-hd img{width:calc(24*var(--u));height:calc(24*var(--u))}.ml-rc .mr-hd b{font:700 calc(16*var(--u))/calc(20*var(--u)) "Inter Tight","Geist",system-ui,sans-serif}






@keyframes mrSpin{to{rotate:360deg}}
.ml-rc[data-s="0"] .s0,.ml-rc[data-s="1"] .s1,.ml-rc[data-s="2"] .s2,.ml-rc[data-s="3"] .s2{opacity:1;translate:0 0}



@keyframes mrPrint{0%{transform:translateY(-101%)}8%{transform:translateY(-92%)}14%{transform:translateY(-91%)}24%{transform:translateY(-78%)}30%{transform:translateY(-77%)}40%{transform:translateY(-63%)}46%{transform:translateY(-62%)}56%{transform:translateY(-47%)}62%{transform:translateY(-46%)}72%{transform:translateY(-30%)}78%{transform:translateY(-29%)}88%{transform:translateY(-12%)}94%{transform:translateY(-11%)}100%{transform:translateY(0)}}









.ml-rc .mr-l4{display:block;width:calc(308*var(--u));height:1px;margin:0 calc(20*var(--u));background:#fff}











.ml-rc .mr-home{left:calc(128*var(--u));bottom:calc(8*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:99px;background:#000}
@media (prefers-reduced-motion:reduce){.ml-rc *{animation:none!important;transition:none!important}.ml-rc .mr-paper{transform:none}}


/* Meld · Send: type the amount on the decimal pad → Confirm → keypad drops, the send form builds in, fee/time resolve */
.op-case .fzs .vx.ml-snd{--u:calc(100cqw / 390);position:absolute;inset:0;padding:0;overflow:hidden;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif;color:#30333C;text-align:left;letter-spacing:0}
.ml-snd .ms-in{position:absolute;inset:0;transition:opacity .35s ease}
.ml-snd.out .ms-in{opacity:0}
.ml-snd.nt *,.ml-snd.nt{transition:none!important}
.ml-snd .ms-in > *{position:absolute}
.ml-snd .ms-sb{left:0;right:0;top:0;height:calc(47*var(--u));display:flex;align-items:center;justify-content:space-between;padding:calc(4*var(--u)) calc(26*var(--u)) 0 calc(38*var(--u));box-sizing:border-box;font:600 calc(17*var(--u))/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#000}
.ml-snd .ms-sb img{width:calc(77*var(--u));height:calc(13*var(--u))}
.ml-snd .ms-hd{left:0;right:0;top:calc(47*var(--u));height:calc(48*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24*var(--u));box-sizing:border-box}
.ml-snd .ms-hd img{width:calc(24*var(--u));height:calc(24*var(--u))}
.ml-snd .ms-hd b{position:relative;display:grid;font:700 calc(16*var(--u))/calc(20*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;text-align:center}
.ml-snd .ms-hd b span{grid-area:1/1;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ml-snd .ms-hd .t1{opacity:0;transform:translateY(calc(8*var(--u)))}
.ml-snd[data-s="1"] .ms-hd .t0,.ml-snd[data-s="2"] .ms-hd .t0{opacity:0;transform:translateY(calc(-8*var(--u)))}
.ml-snd[data-s="1"] .ms-hd .t1,.ml-snd[data-s="2"] .ms-hd .t1{opacity:1;transform:none}
.ml-snd .ms-chips{left:calc(24*var(--u));top:calc(119*var(--u));width:calc(342*var(--u));display:flex;gap:calc(16*var(--u));transition:opacity .3s ease,transform .45s ease}
.ml-snd .ms-chips span{flex:1;padding:calc(8*var(--u)) 0;border-radius:calc(4*var(--u));background:#fff;font:700 calc(12*var(--u))/calc(14*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;text-align:center;color:#30333C}
.ml-snd .ms-chips .on{background:#E51B44;color:#fff}
.ml-snd .ms-cards{left:calc(-330*var(--u));top:calc(119*var(--u));display:flex;gap:calc(12*var(--u));opacity:0;transform:translateX(calc(120*var(--u)));transition:opacity .35s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ml-snd .mc{width:calc(342*var(--u));height:calc(66*var(--u));box-sizing:border-box;padding:calc(16*var(--u));border-radius:calc(12*var(--u));display:flex;flex-direction:column;gap:calc(2*var(--u));color:#fff;flex:none}
.ml-snd .mc.k{background:#000}.ml-snd .mc.r{background:#E51B44}.ml-snd .mc.o{background:#F7931A}
.ml-snd .mc > b{font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em}
.ml-snd .mc span{display:flex;justify-content:space-between;align-items:baseline}
.ml-snd .mc small{font:500 calc(12*var(--u))/calc(12*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:rgba(255,255,255,.6)}
.ml-snd .mc em{font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal}.ml-snd .mc em i{font-size:calc(10.32*var(--u));font-style:normal}
.ml-snd .ms-bal{left:calc(24*var(--u));top:calc(229*var(--u));width:calc(342*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(12*var(--u))}
.ml-snd .ms-bal p{margin:0;display:flex;align-items:center;gap:calc(9*var(--u));font:600 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#808080}
.ml-snd .ms-bal p img{width:calc(16*var(--u));height:calc(16*var(--u))}
.ml-snd .ms-amt{font:600 calc(32*var(--u))/calc(40*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#112222;white-space:nowrap}
.ml-snd .ms-usd{margin-top:calc(-12*var(--u));font:600 calc(32*var(--u))/calc(40*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#9E9FA9;white-space:nowrap}
.ml-snd .ms-bal .v small{font-size:.645em;vertical-align:.4em}
.ml-snd .ms-bal .v.e{color:#C9CAD0}
.ml-snd .cr{display:inline-block;width:calc(2*var(--u));height:calc(30*var(--u));margin:0 calc(1*var(--u)) 0 calc(2*var(--u));vertical-align:calc(-4*var(--u));background:#E51B44;animation:msCr 1s steps(1) infinite}
@keyframes msCr{50%{opacity:0}}
.ml-snd[data-s="1"] .cr,.ml-snd[data-s="2"] .cr{display:none}
.ml-snd .ms-f{left:calc(24*var(--u));width:calc(342*var(--u));opacity:0;transform:translateY(calc(28*var(--u)));transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ml-snd .ms-addr{top:calc(387*var(--u));height:calc(68*var(--u));box-sizing:border-box;display:flex;align-items:center;gap:calc(12*var(--u));padding:0 calc(20*var(--u));border-radius:calc(12*var(--u));background:#fff;box-shadow:0 0 calc(4*var(--u)) rgba(182,182,182,.25)}
.ml-snd .ms-addr .ms-av{display:grid;place-items:center;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:#3F4150}
.ml-snd .ms-addr .ms-av img{width:calc(14.22*var(--u));height:calc(14.22*var(--u))}
.ml-snd .ms-addr b{flex:1;font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em}
.ml-snd .pl{width:calc(24*var(--u));height:calc(24*var(--u));padding:calc(5*var(--u));box-sizing:border-box;flex:none}
.ml-snd .ms-two{top:calc(467*var(--u));display:flex;gap:calc(12*var(--u))}
.ml-snd .ms-two div{flex:1;display:flex;align-items:center;justify-content:space-between;padding:calc(20*var(--u));border-radius:calc(12*var(--u));background:#fff;box-shadow:0 0 calc(4*var(--u)) rgba(182,182,182,.25)}
.ml-snd .ms-two b,.ml-snd .ms-box span{font:700 calc(14*var(--u))/calc(13*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#9E9FA9}
.ml-snd .ms-box{top:calc(543*var(--u));box-sizing:border-box;padding:calc(12*var(--u)) calc(20*var(--u));border-radius:calc(12*var(--u));background:#fff;box-shadow:0 0 calc(4*var(--u)) rgba(182,182,182,.25)}
.ml-snd .ms-box > div{display:flex;align-items:center;justify-content:space-between;padding:calc(8*var(--u)) 0}
.ml-snd .ms-box span{display:flex;align-items:center;gap:calc(8*var(--u));letter-spacing:.03em;line-height:calc(12*var(--u))}
.ml-snd .ms-box span img{width:calc(18*var(--u));height:calc(18*var(--u));margin:calc(3*var(--u))}.ml-snd .ms-box > div + div span img{width:calc(15*var(--u));height:calc(17*var(--u));margin:calc(3.5*var(--u)) calc(4.5*var(--u))}
.ml-snd .ms-box em{position:relative;display:grid;place-items:center end;min-width:calc(60*var(--u));height:calc(12*var(--u));font-style:normal}
.ml-snd .ms-box em > *{grid-area:1/1}
.ml-snd .ms-box em b{font:500 calc(11*var(--u))/calc(12*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#30333C;opacity:0;transform:translateY(calc(4*var(--u)));transition:opacity .3s ease,transform .4s ease}
.ml-snd .sp{width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;border:calc(1.6*var(--u)) solid #E1E2E6;border-top-color:#E51B44;animation:msSp .8s linear infinite;transition:opacity .2s ease}
@keyframes msSp{to{transform:rotate(1turn)}}
.ml-snd[data-s="2"] .ms-box em b{opacity:1;transform:none}
.ml-snd[data-s="2"] .ms-box .sp{opacity:0}
.ml-snd[data-s="2"] .ms-box > div + div em b{transition-delay:.25s}
.ml-snd[data-s="2"] .ms-box > div + div .sp{transition-delay:.25s}
.ml-snd .ms-cta{left:calc(24*var(--u));top:calc(472*var(--u));width:calc(342*var(--u));height:calc(60*var(--u));box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(12*var(--u)) calc(8*var(--u)) 0 calc(12*var(--u));border-radius:calc(12*var(--u));background:#E51B44;color:#fff;opacity:.2;transition:opacity .3s ease,transform .7s cubic-bezier(.3,0,.2,1),scale .15s ease}
.ml-snd .ms-cta b{font:700 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;text-transform:uppercase}.ml-snd .ms-cta img{width:calc(14.93*var(--u));height:calc(11.43*var(--u));margin:calc(4.3*var(--u)) calc(2.5*var(--u))}
.ml-snd .ms-cta.ok{opacity:1}
.ml-snd .ms-cta.press{scale:.97}
.ml-snd[data-s="1"] .ms-cta,.ml-snd[data-s="2"] .ms-cta{opacity:.2;transform:translateY(calc(270*var(--u)))}
.ml-snd .ms-home{left:calc(128*var(--u));bottom:calc(8*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:99px;background:#000}
.ml-snd .ms-kb{left:0;right:0;top:calc(552*var(--u));height:calc(292*var(--u));background:rgba(197,201,208,.96);transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ml-snd .ms-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8*var(--u)) calc(6*var(--u));padding:calc(4*var(--u)) calc(6*var(--u))}
.ml-snd .k{position:relative;height:calc(47*var(--u));border-radius:calc(5*var(--u));background:#fff;box-shadow:0 calc(1*var(--u)) 0 rgba(0,0,0,.3);color:#000;text-align:center;transition:background .12s ease}
.ml-snd .k.f{background:none;box-shadow:none;display:grid;place-items:center}
.ml-snd .k b{position:absolute;left:0;right:0;top:calc(3*var(--u));font:400 calc(24*var(--u))/calc(28*var(--u)) -apple-system,"SF Pro Text",system-ui,sans-serif}
.ml-snd .k b.z{top:calc(9*var(--u))}
.ml-snd .k.f b{position:static;font-size:calc(28*var(--u));line-height:1;margin-top:calc(-10*var(--u))}
.ml-snd .k small{position:absolute;left:0;right:0;bottom:calc(4*var(--u));font:800 calc(10*var(--u))/calc(12*var(--u)) -apple-system,"SF Pro Text",system-ui,sans-serif;letter-spacing:.12em}
.ml-snd .k.f img{width:calc(23*var(--u));height:calc(17*var(--u))}
.ml-snd .k.p{background:#ABB0BA}
.ml-snd .k.f.p{background:rgba(255,255,255,.5)}
.ml-snd .ms-kb > i{position:absolute;left:31.6%;right:31.6%;bottom:calc(8*var(--u));height:calc(5*var(--u));border-radius:calc(5*var(--u));background:#111}
.ml-snd[data-s="1"] .ms-kb,.ml-snd[data-s="2"] .ms-kb{transform:translateY(calc(300*var(--u)))}
.ml-snd[data-s="1"] .ms-chips,.ml-snd[data-s="2"] .ms-chips{opacity:0;transform:translateY(calc(-10*var(--u)))}
.ml-snd[data-s="1"] .ms-cards,.ml-snd[data-s="2"] .ms-cards{opacity:1;transform:none;transition-delay:.1s}
.ml-snd[data-s="1"] .ms-f,.ml-snd[data-s="2"] .ms-f{opacity:1;transform:none}
.ml-snd[data-s="1"] .ms-addr{transition-delay:.2s}.ml-snd[data-s="1"] .ms-two{transition-delay:.28s}.ml-snd[data-s="1"] .ms-box{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.ml-snd .cr,.ml-snd .sp{animation:none}}

/* case facts: top-aligned in the column, row rhythm as in the other modals (8px rows) */
.op-case .op-top > .op-case-facts{margin-top:0!important;align-self:start}
.op-case .op-case-facts .fact{padding:16px 0}
/* label column + value 16px after it, left-aligned (table-like) */
.op-case .op-case-facts{display:grid;grid-template-columns:max-content 1fr}
.op-case .op-case-facts .fact{grid-column:1/-1;display:grid;grid-template-columns:subgrid;column-gap:16px;justify-content:start}
.op-case .op-case-facts .fact b{text-align:left}


/* challenge / outcome copy: larger, reads as a statement */
.op-case .vis-main p{font-size:clamp(18px,1.55vw,22px);line-height:1.4}

/* facts column laid out like the Problem Validation modal list: full right column, from the top, 16px rows */
.op-case .op-top > .op-case-facts{width:100%;margin-left:0;justify-self:stretch}
@media (min-width:901px){.op-case .op-top > .op-case-facts{width:calc(100% - 64px);max-width:420px;justify-self:start;margin-left:64px}}

/* mobile: once the modal is scrolled, a white bar sits behind the sticky close button so text never runs under it */
@media (max-width:600px){
  body dialog.op::before{content:"";position:absolute;left:0;right:0;top:0;height:76px;z-index:4;pointer-events:none;background:linear-gradient(#fff 0,#fff 78%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .2s ease}
  body dialog.op.op-scrolled::before{opacity:1}
}


/* Meld motion pass: tap ring (same idea as Danzee's), balance count-ups, chart draws in, Send action floods into the Send screen */
@keyframes mTapRing{0%{box-shadow:0 0 0 0 rgba(229,27,68,0);scale:1}25%{box-shadow:0 0 0 calc(4*var(--u)) rgba(229,27,68,.3);scale:.94}100%{box-shadow:0 0 0 calc(16*var(--u)) rgba(229,27,68,0);scale:1}}
.op-case .fzs .vx .mring{animation:mTapRing .6s cubic-bezier(.3,.7,.2,1)}
.ml-act .ma-fab.mring,.ml-act .ma-b img.mring,.ml-snd .ms-hd img.mring{border-radius:50%}
.ml-ov .mo-tabs i.mring{border-radius:calc(8*var(--u))}
.ml-home .mh-fill{clip-path:inset(0 100% 0 0);transition:background-color .6s ease,clip-path 1.5s cubic-bezier(.4,0,.2,1)}
.ml-home.in .mh-fill{clip-path:inset(0 0 0 0);transition-delay:0s,.75s}
.ml-home.rd .mh-fill{clip-path:inset(0 100% 0 0)!important;transition:none!important}

.ml-act .ma-sx{inset:0;z-index:6;clip-path:circle(0 at calc(128*var(--u)) calc(692*var(--u)));visibility:hidden;transition:clip-path .65s cubic-bezier(.65,0,.25,1),visibility 0s linear .65s}
.ml-act.sx .ma-sx{clip-path:circle(calc(1000*var(--u)) at calc(128*var(--u)) calc(692*var(--u)));visibility:visible;transition:clip-path .7s cubic-bezier(.65,0,.25,1),visibility 0s}
.ml-act .ma-sx .ms-in{opacity:0;transform:translateY(calc(14*var(--u)));transition:opacity .25s ease,transform .5s ease}
.ml-act.sx .ma-sx .ms-in{opacity:1;transform:none;transition:opacity .35s ease .3s,transform .6s cubic-bezier(.2,.8,.2,1) .3s}
@media (prefers-reduced-motion:reduce){.ml-home .mh-fill{clip-path:none}.op-case .fzs .vx .mring{animation:none}}
.op-case .op-offers-k::before{display:none!important}
/* Finna investment sheet: calmer radii */
.op-case .fzs .vx-act .vt-sheet{border-radius:calc(30*var(--u))}
.op-case .fzs .ax-body{border-radius:calc(26*var(--u)) calc(26*var(--u)) 0 0}
.op-case .fzs .ax-rows li,.op-case .fzs .ax-rows em{border-radius:calc(10*var(--u))}
/* Finna screens: one radius scale - sheets 30, cards 16, rows 12, tiles 14 */
#op-case-finna .fzs .gk-app,#op-case-finna .fzs .gk-sheet,#op-case-finna .fzs .ob-panel,#op-case-finna .fzs .fd-sheet,#op-case-finna .fzs .am3-sheet,#op-case-finna .fzs .vx-act .vt-sheet{border-radius:calc(30*var(--u))}
#op-case-finna .fzs .ax-body{border-radius:calc(26*var(--u)) calc(26*var(--u)) 0 0}
#op-case-finna .fzs .am3-opt,#op-case-finna .fzs .am3-card,#op-case-finna .fzs .fd-tank{border-radius:calc(16*var(--u))}
#op-case-finna .fzs .gk-row,#op-case-finna .fzs .gk-search,#op-case-finna .fzs .vt-list li,#op-case-finna .fzs .ax-rows li,#op-case-finna .fzs .ax-rows em{border-radius:calc(12*var(--u))}
#op-case-finna .fzs .gk-b{border-radius:calc(14*var(--u))}
#op-case-finna .fzs .act-xp{clip-path:inset(var(--t,30%) var(--r,4%) var(--b,60%) var(--l,4%) round calc(12*var(--u)))}
#op-case-finna .fzs .vx-act.ax .act-xp{clip-path:inset(0 0 0 0 round calc(30*var(--u)))}
#op-case-finna .fzs .vx-act.ax.axo .act-xp{clip-path:inset(var(--t,30%) var(--r,4%) var(--b,60%) var(--l,4%) round calc(12*var(--u)))}
/* Finna Activity: Danzee arrows, all in the top-right corner */
#op-case-finna .fzs .vt-list li:nth-child(n){flex-direction:row;text-align:left}
#op-case-finna .fzs .vt-list li .vt-ar,#op-case-finna .fzs .vt-list li:nth-child(even) .vt-ar{align-self:flex-start;fill:currentColor;stroke:none;width:calc(40*var(--u));height:calc(40*var(--u));margin:calc(-2*var(--u)) calc(-4*var(--u)) 0 0}
/* Case "How we reach this": each visual appears in turn, once the block is in view */
.op-case .t2-icon{opacity:0;transition:opacity .7s ease}
.op-case.play .t2-icon{opacity:1}
.op-case.play .t2-i1{transition-delay:.3s}
.op-case.play .t2-i2{transition-delay:1.7s}
.op-case.play .t2-i3{transition-delay:3.1s}
@media (prefers-reduced-motion:reduce){.op-case .t2-icon{opacity:1;transition:none}}
/* Case reach: dotted path from platform to platform instead of the round arrow buttons */
.op-case .t2-cards i:not(:last-child)::after{display:none}
.op-case .t2-art .t2-dots{fill:none;stroke:#A6A6A6;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:0 10;animation:t2Dots .45s linear infinite}
@keyframes t2Dots{to{stroke-dashoffset:-10}}
@media (prefers-reduced-motion:reduce){.op-case .t2-art .t2-dots{animation:none}}
.op-case .t2-art .t2-ar{fill:#0B0B0B;offset-rotate:0deg;offset-distance:0%;opacity:0;animation:t2Fly 1.6s linear infinite}
@media (prefers-reduced-motion:reduce){.op-case .t2-art .t2-ar{animation:none;opacity:1;offset-distance:100%}}
/* Finna coins: flat, no volume (no highlight, rim, thickness or blurred back) */
#op-case-finna .fzs .am3-f{background:var(--c);box-shadow:none}
#op-case-finna .fzs .am3-e,#op-case-finna .fzs .r-b .am3-e,#op-case-finna .fzs .r-c .am3-e{display:none}
#op-case-finna .fzs .r-b .am3-fb,#op-case-finna .fzs .r-c .am3-fb{filter:none}
/* Finna fund tank: % reads blue on the pale tank, turns white once the fill rises behind it */
.op-case .fzs .vx-fd .fd-num{color:#1F69FF;transition:color .35s ease .6s}
.op-case .fzs .vx-fd.c1 .fd-num,.op-case .fzs .vx-fd.c5 .fd-num{color:#fff}
/* reach block held in its start state until in view */
.op-case .t2-grid.rw *{animation:none!important;transition:none!important}
.op-case .t2-grid.rw .t2-lit-tile,.op-case .t2-grid.rw .t2-icon,.op-case .t2-grid.rw .t2-head,.op-case .t2-grid.rw .t2-glow,.op-case .t2-grid.rw .rc-scr,.op-case .t2-grid.rw .rc-mark,.op-case .t2-grid.rw .t2-list li{opacity:0!important}
.op-case .t2-grid.rw .t2-grey{opacity:1!important}
.op-case .t2-grid.rw .rc-chip{opacity:0!important;transform:translateY(8px) scale(.85)!important}
.op-case .t2-grid.rw .rc-man .rc-body,.op-case .t2-grid.rw .rc-man .rc-head{fill:#FFFFFF!important;stroke:#A6A6A6!important}
/* Danzee home → Writing card: the stylus fades in at the line start, then glides along as the characters are written */
.op-case .fzs .z-xp .z-sty{opacity:0}
.op-case .fzs .z-home.xp .z-xp .z-sty{opacity:1;transition:opacity .35s ease 2.7s;animation:zPenX 2s cubic-bezier(.45,0,.55,1) 3.1s both}
@keyframes zPenX{from{translate:calc(-158*var(--s)) 0}to{translate:0 0}}
@media (prefers-reduced-motion:reduce){.op-case .fzs .z-xp .z-sty{opacity:1;animation:none}}
/* Danzee home: softer fold-back of the library into its tile */
/* close = container transform: library content fades out, the tile's own content fades in while the window shrinks onto the tile, then hands off */
.op-case .fzs .z-home.xp.xpo .z-xp{transition:clip-path .65s cubic-bezier(.4,0,.2,1),opacity .01s linear .66s}
.op-case .fzs .z-home.xp.xpo .z-xp .z-lib{opacity:0;transition:opacity .3s ease .3s}
.op-case .fzs .z-xp .z-ghost{position:absolute;top:var(--t);left:var(--l);right:var(--r);bottom:var(--b);z-index:6;opacity:0;pointer-events:none;transition:none}
.op-case .fzs .z-home.xp.xpo .z-xp .z-ghost{opacity:1;transition:opacity .3s ease .3s}
/* Danzee classifiers: Figma 2580:15065 / 15118 / 15175 — drag classifiers into the answer slot */
.op-case .fzs .z-cls .z-drop{position:relative;width:calc(306*var(--s));height:calc(66*var(--s));display:grid;place-items:center;border:2px dashed rgba(0,0,0,.15);border-radius:calc(16*var(--s));box-sizing:border-box;overflow:hidden;transition:background .25s ease,border-color .25s ease}
.op-case .fzs .z-cls .z-drop>span{grid-area:1/1}
.op-case .fzs .z-cls .z-dh{font:600 calc(16*var(--s))/1.1 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(0,0,0,.4);transition:opacity .2s ease}
.op-case .fzs .z-cls .z-dr{font:600 calc(16*var(--s))/normal "Inter",system-ui,sans-serif;color:rgba(0,0,0,.85);opacity:0;transition:opacity .2s ease}
.op-case .fzs .z-cls .z-chips{display:flex;gap:calc(10*var(--s));align-items:center;transition:opacity .2s ease}
.op-case .fzs .z-cls .z-chips b{display:grid;place-items:center;width:calc(65*var(--s));height:calc(58*var(--s));border-radius:calc(12*var(--s));background:#b8acfe;font:500 calc(26*var(--s))/1 "Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;color:#000;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.op-case .fzs .z-cls .z-chips .c2{display:none}
.op-case .fzs .z-cls.ov1 .z-drop,.op-case .fzs .z-cls.ov2 .z-drop{background:rgba(184,172,254,.35);border-color:rgba(115,97,229,.9)}
.op-case .fzs .z-cls.ov1 .z-dh,.op-case .fzs .z-cls.ov2 .z-dh,.op-case .fzs .z-cls.p1 .z-dh{opacity:0}
.op-case .fzs .z-cls.ov1 .z-dr.r1,.op-case .fzs .z-cls.ov2 .z-dr.r2{opacity:1}
.op-case .fzs .z-cls.ov2 .z-chips{opacity:0}
.op-case .fzs .z-cls.p1 .z-chips .c1,.op-case .fzs .z-cls.p2 .z-chips .c2{transform:none}
.op-case .fzs .z-cls.p2 .z-chips .c2,.op-case .fzs .z-cls.ov2 .z-chips .c2{display:grid}
.op-case .fzs .z-cls.p2 .z-chips{opacity:1}
/* keys: no info buttons; source key dims while its copy is carried; landed key turns purple */
.op-case .fzs .z-cls .z-kc{margin-right:0}
.op-case .fzs .z-cls .z-kr{transition:opacity .2s ease}
.op-case .fzs .z-cls.dg1:not(.p1) .k1 .z-kr,.op-case .fzs .z-cls.dg2:not(.p2) .k3 .z-kr{opacity:.35}
.op-case .fzs .z-cls.p2 .k2 .z-kc{background:#dbdbdb}
.op-case .fzs .z-cls.p1 .k1 .z-kc,.op-case .fzs .z-cls.p2 .k3 .z-kc{background:#b8acfe}
.op-case .fzs .z-cls .z-drag{position:absolute;left:calc(8*var(--s));top:calc(498*var(--s));width:calc(191*var(--s));height:calc(108*var(--s));z-index:5;border-radius:calc(10*var(--s));background:#dbdbdb;opacity:0;pointer-events:none;filter:drop-shadow(0 calc(16*var(--s)) calc(14*var(--s)) rgba(0,0,0,.28));transition:opacity .15s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.op-case .fzs .z-cls .z-drag.d2{top:calc(610*var(--s))}
.op-case .fzs .z-cls.dg1 .z-drag.d1,.op-case .fzs .z-cls.dg2 .z-drag.d2{opacity:1;transform:rotate(-3deg) scale(1.04)}
.op-case .fzs .z-cls.mv1 .z-drag.d1{transform:translate(calc(97.5*var(--s)),calc(-131*var(--s))) rotate(-3deg) scale(1.04);transition:opacity .15s ease,transform .75s cubic-bezier(.4,0,.2,1)}
.op-case .fzs .z-cls.mv2 .z-drag.d2{transform:translate(calc(97.5*var(--s)),calc(-243*var(--s))) rotate(-3deg) scale(1.04);transition:opacity .15s ease,transform .75s cubic-bezier(.4,0,.2,1)}
.op-case .fzs .z-cls.p1 .z-drag.d1{opacity:0;transform:translate(calc(97.5*var(--s)),calc(-131*var(--s))) scale(.45);transition:opacity .2s ease .05s,transform .25s ease}
.op-case .fzs .z-cls.p2 .z-drag.d2{opacity:0;transform:translate(calc(135*var(--s)),calc(-243*var(--s))) scale(.45);transition:opacity .2s ease .05s,transform .25s ease}
@media (prefers-reduced-motion:reduce){.op-case .fzs .z-cls .z-drag{display:none}}
/* Meld: phone stage in #DBDBDB (Danzee card grey), halftone a touch darker so it still reads */
#op-case-meld .fzs .op-shot3{background:#DBDBDB;box-shadow:inset 0 0 0 1px #D2D2D2}
#op-case-meld .fzs .fz-tone{background:#D0D0D0}
#op-case-meld .fzs .fz-rule{background:rgba(255,255,255,.35)}
/* Meld receipt — after recent.design "Receipt Printer": dark printer card on top, the paper receipt feeds smoothly down out of its slot */
.op-case .fzs .vx.ml-rc{background:#E4E4E4}
.ml-rc .rp-pr{left:calc(14*var(--u));top:calc(104*var(--u));width:calc(362*var(--u));box-sizing:border-box;padding:calc(12*var(--u)) calc(12*var(--u)) calc(26*var(--u));border-radius:calc(26*var(--u));background:linear-gradient(180deg,#34322F,#2A2826);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 calc(18*var(--u)) calc(30*var(--u)) rgba(0,0,0,.22);z-index:3}
.ml-rc .rp-top{display:flex;justify-content:space-between;align-items:center;margin:0 calc(2*var(--u)) calc(10*var(--u))}
.ml-rc .rp-sq{display:grid;place-items:center;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:calc(7*var(--u));background:#4A4744}
.ml-rc .rp-sq img{width:calc(18*var(--u));height:calc(18*var(--u))}
.ml-rc .rp-pill{padding:calc(7*var(--u)) calc(12*var(--u));border-radius:99px;background:#45423F;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font:600 calc(12*var(--u))/1 "Inter Tight","Inter",system-ui,sans-serif;color:#E9E7E4}
.ml-rc .rp-in{padding:calc(16*var(--u)) calc(16*var(--u)) calc(14*var(--u));border-radius:calc(16*var(--u));background:#1D1C1B}
.ml-rc .rp-hd{display:flex;justify-content:space-between;align-items:flex-start}
.ml-rc .rp-hd b{display:block;font:600 calc(16*var(--u))/1.2 "Inter Tight","Inter",system-ui,sans-serif;color:#fff}
.ml-rc .rp-hd span{display:block;margin-top:calc(3*var(--u));font:400 calc(13*var(--u))/1.2 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(255,255,255,.62)}
.ml-rc .rp-t{text-align:right}
.ml-rc .rp-t b{font-size:calc(21*var(--u));margin-top:calc(2*var(--u))}
.ml-rc .rp-t b small{font-size:calc(11*var(--u));color:rgba(255,255,255,.6)}
.ml-rc .rp-st{position:relative;height:calc(18*var(--u));margin-top:calc(16*var(--u))}
.ml-rc .rp-st span{position:absolute;inset:0;display:flex;align-items:center;gap:calc(9*var(--u));font:500 calc(13*var(--u))/1 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(255,255,255,.88);opacity:0;transition:opacity .3s ease}
.ml-rc[data-s="0"] .rp-st .s0,.ml-rc[data-s="1"] .rp-st .s1,.ml-rc[data-s="2"] .rp-st .s2,.ml-rc[data-s="3"] .rp-st .s2{opacity:1}
.ml-rc .rp-st .sp{width:calc(13*var(--u));height:calc(13*var(--u));border-radius:50%;border:calc(1.8*var(--u)) solid rgba(255,255,255,.25);border-top-color:#fff;animation:mrSpin .8s linear infinite}
.ml-rc .rp-st .ok{position:relative;width:calc(15*var(--u));height:calc(15*var(--u));border-radius:50%;background:#30BB5B}
.ml-rc .rp-st .ok::after{content:"";position:absolute;left:32%;top:22%;width:22%;height:40%;border:solid #fff;border-width:0 calc(1.8*var(--u)) calc(1.8*var(--u)) 0;transform:rotate(45deg)}
.ml-rc .rp-slot{position:absolute;left:calc(16*var(--u));right:calc(16*var(--u));bottom:calc(10*var(--u));height:calc(7*var(--u));border-radius:99px;background:#0E0E0D;box-shadow:inset 0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.8)}
.ml-rc .rp-out{left:calc(36*var(--u));top:calc(279*var(--u));width:calc(318*var(--u));height:calc(540*var(--u));box-sizing:border-box;overflow:hidden;z-index:4;padding:0 calc(14*var(--u)) calc(20*var(--u))}
.ml-rc .rp-paper{position:relative;box-sizing:border-box;padding:calc(22*var(--u)) calc(20*var(--u)) calc(30*var(--u));background:#FCFCFB;color:#1A1A1A;box-shadow:0 calc(10*var(--u)) calc(18*var(--u)) rgba(0,0,0,.12);transform:translateY(-101%);-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - calc(7*var(--u))) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(9*var(--u)) calc(7*var(--u)) repeat-x;mask:linear-gradient(#000,#000) top/100% calc(100% - calc(7*var(--u))) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(9*var(--u)) calc(7*var(--u)) repeat-x}
.ml-rc[data-s="1"] .rp-paper,.ml-rc[data-s="2"] .rp-paper{transform:none;transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
.ml-rc[data-s="3"] .rp-paper{transform:none;opacity:0;transition:opacity .5s ease}
.ml-rc .rp-logo{display:grid;place-items:center;width:calc(38*var(--u));height:calc(38*var(--u));margin:0 auto;border-radius:calc(6*var(--u));background:#2A2826}
.ml-rc .rp-logo img{width:calc(24*var(--u));height:calc(24*var(--u))}
.ml-rc .rp-paper hr{margin:calc(16*var(--u)) 0;border:0;border-top:1px dashed rgba(0,0,0,.18)}
.ml-rc .rp-r{display:flex;justify-content:space-between;align-items:baseline;font:400 calc(10.5*var(--u))/1.7 "JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.02em;color:#6B6B6B}
.ml-rc .rp-r b{font-weight:700;color:#1A1A1A;letter-spacing:.08em}
.ml-rc .rp-r.big b:last-child{letter-spacing:.02em}
.ml-rc .rp-r.sub{margin-top:calc(2*var(--u))}
.ml-rc .rp-r.tot{align-items:center;margin-top:calc(10*var(--u))}
.ml-rc .rp-r.tot b{font-size:calc(11*var(--u));letter-spacing:.12em}
.ml-rc .rp-r.tot strong{font:700 calc(18*var(--u))/1 "JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;color:#1A1A1A}
.ml-rc .rp-r.tot small{font-size:calc(10*var(--u));color:#6B6B6B}
.ml-rc .rp-r.sm{font-size:calc(9.5*var(--u))}
.ml-rc .rp-bc{display:block;width:calc(150*var(--u));height:calc(32*var(--u));margin:calc(18*var(--u)) auto 0}
.ml-rc .rp-id{margin:calc(5*var(--u)) 0 0;text-align:center;font:400 calc(8.5*var(--u))/1 "JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.18em;color:#8A8A8A}
@media (prefers-reduced-motion:reduce){.ml-rc .rp-paper{transform:none!important;opacity:1!important}}
/* Meld charts: soft feathered left→right reveal (no hard clip edge) + a fading shade under the line */
@property --rv{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --cc{syntax:"<color>";inherits:false;initial-value:#525255}
.ml-home .mh-fill{--rv:0%;--cc:#525255;clip-path:none!important;background:linear-gradient(180deg,var(--cc) 0%,color-mix(in srgb,var(--cc) 55%,transparent) 30%,color-mix(in srgb,var(--cc) 12%,transparent) 75%,transparent 100%);-webkit-mask:url("/landing/assets/img/meld/home/chart.svg") 0 0/100% 100% no-repeat,linear-gradient(90deg,#000 calc(var(--rv) - 16%),transparent var(--rv));-webkit-mask-composite:source-in;mask:url("/landing/assets/img/meld/home/chart.svg") 0 0/100% 100% no-repeat intersect,linear-gradient(90deg,#000 calc(var(--rv) - 16%),transparent var(--rv));transition:--cc .6s ease,--rv 1.8s cubic-bezier(.4,0,.2,1)}
.ml-home.in .mh-fill{--rv:116%;transition-delay:0s,.75s}
.ml-home.c1 .mh-fill{--cc:#E51B44}
.ml-home.c2 .mh-fill{--cc:#F7931A}
.ml-home.rd .mh-fill{--rv:0%!important;transition:none!important}

.ml-ov .mo-chart{--rv:0%;clip-path:none!important;-webkit-mask:linear-gradient(90deg,#000 calc(var(--rv) - 16%),transparent var(--rv));mask:linear-gradient(90deg,#000 calc(var(--rv) - 16%),transparent var(--rv));transition:--rv 1.6s cubic-bezier(.4,0,.2,1)}
.ml-ov.s1 .mo-chart{--rv:116%;transition-delay:.25s}
.ml-ov .mo-chart .cv{-webkit-mask:linear-gradient(180deg,#000 18%,rgba(0,0,0,.45) 55%,transparent 100%);mask:linear-gradient(180deg,#000 18%,rgba(0,0,0,.45) 55%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.ml-home .mh-fill,.ml-ov .mo-chart{--rv:116%!important;transition:none!important}}
/* Meld home finale (container transform, GPU-only): a full-screen sheet clips open from the neobank card; mascot and headline scale from their card positions; folds back before the loop */
.ml-home .mh-cat{transform-origin:50% 90%;animation:mhBob 3.2s ease-in-out infinite}
@keyframes mhBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(calc(-4*var(--u))) rotate(1.5deg)}}
.ml-home .mh-ov{position:absolute;inset:0;z-index:20;background:#E51B44;overflow:hidden;visibility:hidden;clip-path:inset(calc(113*var(--u)) calc(24*var(--u)) calc(512*var(--u)) calc(201*var(--u)) round calc(12*var(--u)));will-change:clip-path;transition:clip-path .7s cubic-bezier(.32,.72,0,1),visibility 0s linear .7s}
.ml-home.nx .mh-ov{visibility:visible;clip-path:inset(0 0 0 0 round 0);transition:clip-path .7s cubic-bezier(.32,.72,0,1),visibility 0s}
.ml-home .mh-ov>*{position:absolute;transform-origin:0 0;will-change:transform;transition:transform .7s cubic-bezier(.32,.72,0,1)}
.ml-home .mh-ot{left:calc(24*var(--u));top:calc(64*var(--u));font:700 calc(14*var(--u))/calc(13*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6);transform:translate(calc(197*var(--u)),calc(61*var(--u)))}
.ml-home .mh-oc{left:calc(-10*var(--u));top:calc(110*var(--u));width:calc(410*var(--u));height:calc(390*var(--u));transform:translate(calc(212.9*var(--u)),calc(45*var(--u))) scale(.5171)}
.ml-home .mh-oc img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 90%;animation:mhBob 3.2s ease-in-out infinite}
.ml-home.nx .mh-oc img{animation:mhJoy 1.1s cubic-bezier(.5,0,.2,1) .55s 2 alternate,mhBob 3.2s ease-in-out 2.75s infinite}
@keyframes mhJoy{0%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(calc(-18*var(--u))) rotate(-5deg) scale(1.04,.97)}70%{transform:translateY(calc(-6*var(--u))) rotate(4deg) scale(.98,1.03)}100%{transform:translateY(0) rotate(0) scale(1)}}
.ml-home .mh-op{left:calc(24*var(--u));top:calc(486*var(--u));width:calc(265*var(--u));margin:0;font:700 calc(36*var(--u))/calc(42*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em;color:#F5F5F5;transform:translate(calc(197*var(--u)),calc(-239*var(--u))) scale(.4722)}
.ml-home.nx .mh-ov>*{transform:none}
.ml-home .mh-nx{left:calc(24*var(--u));right:calc(24*var(--u));top:calc(626*var(--u));opacity:0;transform:translateY(calc(16*var(--u)))!important;transition:opacity .2s ease,transform .3s ease!important}
.ml-home.nx .mh-nx{opacity:1;transform:none!important;transition:opacity .45s ease .4s,transform .6s cubic-bezier(.2,.8,.2,1) .4s!important}
.ml-home .mh-nx em{display:block;font:500 calc(15*var(--u))/1.35 "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;color:rgba(255,255,255,.75)}
.ml-home .mh-ncta{display:grid;place-items:center;height:calc(56*var(--u));margin-top:calc(28*var(--u));border-radius:calc(12*var(--u));background:#fff;font:700 calc(14*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#E51B44}
.ml-home .mh-home{z-index:30;transition:background-color .4s ease}
.ml-home.nx .mh-home{background:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){.ml-home .mh-cat,.ml-home .mh-oc img{animation:none!important}}
/* Meld neobank finale v2: longer stay, mascot performs (drop → hop → look around → wave → breathe), perk chips pop around it, CTA tapped; home card has a soft shine */
.ml-home .mh-neo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:mhShine 4.5s ease-in-out 1.6s infinite}
@keyframes mhShine{0%,70%{background-position:-150% 0}100%{background-position:250% 0}}
.ml-home.nx .mh-oc img{animation:mhShow 4s cubic-bezier(.5,0,.2,1) .5s 1 both,mhBob 3.2s ease-in-out 4.5s infinite}
@keyframes mhShow{
0%{transform:translateY(0) rotate(0) scale(1)}
8%{transform:translateY(calc(-28*var(--u))) rotate(-4deg) scale(.96,1.05)}
15%{transform:translateY(0) rotate(0) scale(1.06,.93)}
21%{transform:translateY(calc(-16*var(--u))) rotate(3deg) scale(.98,1.03)}
28%{transform:translateY(0) rotate(0) scale(1.03,.97)}
34%{transform:translateY(0) rotate(0) scale(1)}
44%{transform:translateX(calc(-10*var(--u))) rotate(-6deg)}
54%{transform:translateX(calc(10*var(--u))) rotate(6deg)}
62%{transform:translateX(0) rotate(0)}
68%{transform:rotate(-9deg)}
74%{transform:rotate(7deg)}
80%{transform:rotate(-7deg)}
86%{transform:rotate(4deg)}
92%,100%{transform:translateY(0) rotate(0) scale(1)}}
.ml-home .mh-pk{z-index:3;padding:calc(8*var(--u)) calc(12*var(--u));border-radius:99px;background:#fff;box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(120,0,20,.25);font:700 calc(12*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em;color:#E51B44;white-space:nowrap;opacity:0;transform:scale(.4)!important;transition:opacity .2s ease,transform .25s ease!important}
.ml-home .mh-pk.k1{left:calc(22*var(--u));top:calc(150*var(--u));transform-origin:100% 100%}
.ml-home .mh-pk.k2{left:calc(222*var(--u));top:calc(250*var(--u));transform-origin:0 100%}
.ml-home .mh-pk.k3{left:calc(34*var(--u));top:calc(420*var(--u));transform-origin:100% 0}
.ml-home.nx .mh-pk{opacity:1;transform:none!important;animation:mhFloat 2.8s ease-in-out infinite}
.ml-home.nx .mh-pk.k1{transition:opacity .3s ease 1.9s,transform .5s cubic-bezier(.3,1.6,.5,1) 1.9s!important;animation-delay:2.4s}
.ml-home.nx .mh-pk.k2{transition:opacity .3s ease 2.25s,transform .5s cubic-bezier(.3,1.6,.5,1) 2.25s!important;animation-delay:2.9s}
.ml-home.nx .mh-pk.k3{transition:opacity .3s ease 2.6s,transform .5s cubic-bezier(.3,1.6,.5,1) 2.6s!important;animation-delay:3.3s}
@keyframes mhFloat{0%,100%{translate:0 0}50%{translate:0 calc(-5*var(--u))}}
.ml-home .mh-ncta{transition:scale .15s ease}
.ml-home .mh-ncta.press{scale:.96}
@media (prefers-reduced-motion:reduce){.ml-home .mh-neo::after,.ml-home .mh-pk{animation:none!important}}
/* Meld overview: FIAT rows carry live data (balance, fanned cards, payment ring, vault progress, cashback); CRYPTO is a real asset list with sparklines */
.ml-ov .mo-v{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:calc(4*var(--u));opacity:0;translate:calc(8*var(--u)) 0;transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1)}
.ml-ov.s0 .mo-v{opacity:1;translate:0 0}
.ml-ov.s0 .mo-row:nth-child(1) .mo-v{transition-delay:.35s}.ml-ov.s0 .mo-row:nth-child(2) .mo-v{transition-delay:.45s}.ml-ov.s0 .mo-row:nth-child(3) .mo-v{transition-delay:.55s}.ml-ov.s0 .mo-row:nth-child(4) .mo-v{transition-delay:.65s}.ml-ov.s0 .mo-row:nth-child(5) .mo-v{transition-delay:.75s}
.ml-ov .mo-v b{font:600 calc(14*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:0;color:#30333C}
.ml-ov .mo-v b small{font-size:calc(10*var(--u))}
.ml-ov .mo-v em{font:500 calc(11*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;color:#9E9FA9}
.ml-ov .mo-v .mo-cb{color:#30BB5B}
.ml-ov .mo-cd{position:relative;width:calc(56*var(--u));height:calc(26*var(--u))}
.ml-ov .mo-cd i{position:absolute;left:calc(13*var(--u));top:calc(2*var(--u));width:calc(30*var(--u));height:calc(21*var(--u));border-radius:calc(4*var(--u));box-shadow:0 calc(2*var(--u)) calc(5*var(--u)) rgba(0,0,0,.18);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.ml-ov .mo-cd i:nth-child(1){background:#C9CAD2}.ml-ov .mo-cd i:nth-child(2){background:#E51B44}.ml-ov .mo-cd i:nth-child(3){background:#111;background-image:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%)}
.ml-ov.s0 .mo-cd i:nth-child(1){transform:translateX(calc(-11*var(--u))) rotate(-12deg);transition-delay:.7s}
.ml-ov.s0 .mo-cd i:nth-child(3){transform:translateX(calc(11*var(--u))) rotate(10deg);transition-delay:.7s}
.ml-ov .mo-rg{width:calc(18*var(--u));height:calc(18*var(--u));rotate:-90deg}
.ml-ov .mo-rg circle{fill:none;stroke:#E8E8EC;stroke-width:3}
.ml-ov .mo-rg .f{stroke:#E51B44;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1)}
.ml-ov.s0 .mo-rg .f{stroke-dasharray:72 100;transition-delay:.8s}
.ml-ov .mo-row:nth-child(3) .mo-v{flex-direction:row;align-items:center;gap:calc(6*var(--u))}
.ml-ov .mo-bar{display:block;width:calc(64*var(--u));height:calc(6*var(--u));border-radius:99px;background:#ECECF0;overflow:hidden}
.ml-ov .mo-bar i{display:block;width:62%;height:100%;border-radius:inherit;background:#E51B44;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.ml-ov.s0 .mo-bar i{transform:none;transition-delay:.9s}
.ml-ov .l-fiat .mo-row b,.ml-ov .l-crypto .mo-cn b{white-space:nowrap}
/* crypto */
.ml-ov .mo-row.cr{gap:calc(10*var(--u));padding:0 calc(16*var(--u))}
.ml-ov .mo-cn{display:flex;flex-direction:column;gap:calc(5*var(--u));min-width:calc(78*var(--u))}
.ml-ov .mo-cn b{font:600 calc(14*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif}
.ml-ov .mo-cn em,.ml-ov .mo-cv em{font:500 calc(11*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;color:#9E9FA9}
.ml-ov .mo-sp{flex:1;height:calc(24*var(--u));overflow:visible}
.ml-ov .mo-sp path{fill:none;stroke:#30BB5B;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:0 100;transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1)}
.ml-ov .cr.dn .mo-sp path{stroke:#E51B44}.ml-ov .cr.fl .mo-sp path{stroke:#9E9FA9}
.ml-ov.s2 .mo-sp path{stroke-dasharray:100 100}
.ml-ov.s2 .l-crypto .mo-row:nth-child(1) .mo-sp path{transition-delay:.3s}.ml-ov.s2 .l-crypto .mo-row:nth-child(2) .mo-sp path{transition-delay:.4s}.ml-ov.s2 .l-crypto .mo-row:nth-child(3) .mo-sp path{transition-delay:.5s}.ml-ov.s2 .l-crypto .mo-row:nth-child(4) .mo-sp path{transition-delay:.6s}
.ml-ov .mo-cv{display:flex;flex-direction:column;align-items:flex-end;gap:calc(5*var(--u));min-width:calc(74*var(--u))}
.ml-ov .mo-cv b{font:600 calc(14*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif}
.ml-ov .mo-cv b small{font-size:calc(10*var(--u))}
.ml-ov .cr.up .mo-cv em{color:#30BB5B}.ml-ov .cr.dn .mo-cv em{color:#E51B44}
.ml-ov.s2 .l-crypto .mo-row:nth-child(3){transition-delay:.12s}.ml-ov.s2 .l-crypto .mo-row:nth-child(4){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.ml-ov .mo-v{opacity:1;translate:none}.ml-ov .mo-sp path{stroke-dasharray:100 100}.ml-ov .mo-bar i{transform:none}}
/* Overview tab notch: overhang 2u below the card so no black hairline shows under the active tab */
.ml-ov .mo-notch{top:calc(3*var(--u));height:calc(41*var(--u))}
/* Overview: when a tab is left, sparklines / ring / bar / fanned cards stay drawn while their rows fade out, then reset unseen */
.ml-ov .mo-sp path{transition:stroke-dasharray 0s linear .7s}
.ml-ov.s2 .mo-sp path{transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1)}
.ml-ov .mo-rg .f{transition:stroke-dasharray 0s linear .7s}
.ml-ov.s0 .mo-rg .f{transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1) .8s}
.ml-ov .mo-bar i{transition:transform 0s linear .7s}
.ml-ov.s0 .mo-bar i{transition:transform 1.1s cubic-bezier(.4,0,.2,1) .9s}
.ml-ov .mo-cd i{transition:transform 0s linear .7s}
.ml-ov.s0 .mo-cd i{transition:transform .6s cubic-bezier(.3,1.4,.5,1) .7s}
.ml-ov .mo-v{transition:opacity .3s ease,translate 0s linear .7s}
.ml-ov.s0 .mo-v{transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1)}
/* Overview transactions chart: on leaving the tab it fades out whole (no reverse wipe), then resets unseen */
.ml-ov .mo-chart{opacity:0;transition:opacity .35s ease,--rv 0s linear .6s}
.ml-ov.s1 .mo-chart{opacity:1;transition:opacity 0s,--rv 1.6s cubic-bezier(.4,0,.2,1) .25s}
.ml-ov .mo-chart .dt{transition:scale 0s linear .6s}
.ml-ov.s1 .mo-chart .dt{transition:scale .4s cubic-bezier(.3,1.6,.5,1) 1.1s}
/* Meld quick actions v2 — after Bevel's FAB menu (60fps.design #1955): new Cards screen behind; FAB → ×, background blurs, a 3×3 action panel pops out of the FAB with the mascot "Ask Meld" in the centre */

.ml-act .ma-bg2{inset:0;transition:filter .5s ease,scale .5s ease}
.ml-act.open .ma-bg2{filter:blur(calc(10*var(--u)));scale:.97}
.ml-act .ma-veil{background:rgba(20,20,24,.32)}
.ml-act .ma-blob{display:none}
.ml-act .ma-hd{display:none}
/* cards screen */
.ml-crd{position:absolute;inset:0;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif;color:#30333C}
.ml-crd>*{position:absolute}
.ml-crd .cd-sb{left:0;right:0;top:0;height:calc(47*var(--u));display:flex;align-items:center;justify-content:space-between;padding:calc(4*var(--u)) calc(26*var(--u)) 0 calc(38*var(--u));box-sizing:border-box;font:600 calc(17*var(--u))/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#000}
.ml-crd .cd-sb img{width:calc(77*var(--u));height:calc(13*var(--u))}






























/* action panel */
.ml-act .ma-grid{left:calc(16*var(--u));top:calc(410*var(--u));width:calc(358*var(--u));box-sizing:border-box;padding:calc(12*var(--u));display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8*var(--u));border-radius:calc(28*var(--u));background:rgba(255,255,255,.92);box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) rgba(0,0,0,.18);z-index:3;transform-origin:50% 115%;opacity:0;transform:translateY(calc(24*var(--u))) scale(.72);transition:opacity .22s ease,transform .3s cubic-bezier(.5,0,.75,0)}
.ml-act.open .ma-grid{opacity:1;transform:none;transition:opacity .25s ease,transform .5s cubic-bezier(.3,1.4,.5,1)}
.ml-act .ma-g{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8*var(--u));height:calc(96*var(--u));border-radius:calc(18*var(--u));background:#F4F4F6;opacity:0;transform:scale(.7);transition:opacity .15s ease,transform .2s ease}
.ml-act.open .ma-g{opacity:1;transform:none;transition:opacity .25s ease calc(.12s + var(--k)*.035s),transform .45s cubic-bezier(.3,1.4,.5,1) calc(.12s + var(--k)*.035s)}
.ml-act .ma-g b{font:700 calc(13*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;color:#30333C;white-space:nowrap}
.ml-act .gi{display:grid;place-items:center;width:calc(42*var(--u));height:calc(42*var(--u));border-radius:50%;background:#E51B44}
.ml-act .gi svg{width:calc(20*var(--u));height:calc(20*var(--u))}
.ml-act .gi.im{background:none}
.ml-act .gi.im img{width:100%;height:100%}
.ml-act .ma-g.ai{background:linear-gradient(160deg,#FF6A84,#E51B44);}
.ml-act .ma-g.ai b{color:#fff}
.ml-act .gm{display:block;width:calc(54*var(--u));height:calc(50*var(--u));overflow:visible}
.ml-act .gm img{width:100%;height:100%;object-fit:cover;transform-origin:50% 90%;scale:1.3;translate:0 calc(-4*var(--u))}
.ml-act.open .gm img{animation:mhJoy .9s cubic-bezier(.5,0,.2,1) .55s 2 alternate,mhBob 3.2s ease-in-out 2.4s infinite}
.ml-act .ma-g.ai::before{content:"";position:absolute;inset:calc(-3*var(--u));border-radius:calc(21*var(--u));border:calc(2*var(--u)) solid rgba(229,27,68,.45);opacity:0}
.ml-act .ma-g{position:relative}
.ml-act.open .ma-g.ai::before{animation:maPulse 1.8s ease-out .8s infinite}
@keyframes maPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
.ml-act .ma-sx{clip-path:circle(0 at calc(82*var(--u)) calc(458*var(--u)))}
.ml-act.sx .ma-sx{clip-path:circle(calc(1000*var(--u)) at calc(82*var(--u)) calc(458*var(--u)))}
@media (prefers-reduced-motion:reduce){.ml-act .gm img,.ml-act .ma-g.ai::before,.ml-crd .cd-card.rd::after{animation:none!important}}
/* quick actions: tapping "Ask Meld" — tile presses, mascot does a big happy jump + wave, a little speech bubble pops */
.ml-act .ma-g{transition-property:opacity,transform,scale}
.ml-act .ma-g.press{scale:.94}
.ml-act.ask .gm img{animation:mhShow 2.6s cubic-bezier(.5,0,.2,1) 0s 1 both,mhBob 3.2s ease-in-out 2.6s infinite}
.ml-act .ma-g.ai::after{content:"Hi! How can I help?";position:absolute;left:50%;bottom:calc(100% + calc(8*var(--u)));padding:calc(7*var(--u)) calc(10*var(--u));border-radius:calc(12*var(--u)) calc(12*var(--u)) calc(12*var(--u)) calc(3*var(--u));background:#1B1C21;color:#fff;font:600 calc(11*var(--u))/1 "Inter Tight",system-ui,sans-serif;white-space:nowrap;opacity:0;transform:translate(-20%,calc(6*var(--u))) scale(.7);transform-origin:0 100%;transition:opacity .2s ease,transform .25s ease;pointer-events:none;z-index:5}
.ml-act.ask .ma-g.ai::after{opacity:1;transform:translate(-20%,0) scale(1);transition:opacity .25s ease .35s,transform .45s cubic-bezier(.3,1.4,.5,1) .35s}
/* Meld Receive (Figma 43:13080): cards slide in, QR prints with a scan line, address copied → toast, then an incoming payment lands and the MELD balance ticks up; 12 s loop */
.op-case .fzs .vx.ml-rv{--u:calc(100cqw / 390);position:absolute;inset:0;overflow:hidden;background:#F5F5F5;font-family:"Inter Tight","Geist",system-ui,sans-serif;color:#30333C}
.ml-rv>*{position:absolute}
.ml-rv .rv-sb{left:0;right:0;top:0;height:calc(47*var(--u));display:flex;align-items:center;justify-content:space-between;padding:calc(4*var(--u)) calc(26*var(--u)) 0 calc(38*var(--u));box-sizing:border-box;font:600 calc(17*var(--u))/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#000}
.ml-rv .rv-sb img{width:calc(77*var(--u));height:calc(13*var(--u))}
.ml-rv .rv-hd{left:0;right:0;top:calc(47*var(--u));height:calc(48*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24*var(--u))}
.ml-rv .rv-hd img{width:calc(24*var(--u));height:calc(24*var(--u))}
.ml-rv .rv-hd b{font:700 calc(16*var(--u))/calc(20*var(--u)) "Inter Tight","Geist",system-ui,sans-serif}
.ml-rv .rv-cards{left:calc(-330*var(--u));top:calc(119*var(--u));display:flex;gap:calc(12*var(--u));transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.ml-rv .rv-c{width:calc(342*var(--u));height:calc(66*var(--u));box-sizing:border-box;padding:calc(16*var(--u));border-radius:calc(12*var(--u));color:#fff;display:flex;flex-direction:column;gap:calc(4*var(--u))}
.ml-rv .rv-c.k{background:#000}.ml-rv .rv-c.r{background:#E51B44}.ml-rv .rv-c.o{background:#F7931A}
.ml-rv .rv-c b{font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em}
.ml-rv .rv-c span{display:flex;justify-content:space-between;align-items:baseline}
.ml-rv .rv-c small{font:500 calc(12*var(--u))/calc(12*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:rgba(255,255,255,.6)}
.ml-rv .rv-c em{font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal}
.ml-rv .rv-c em i{font-style:normal;font-size:calc(10.3*var(--u))}
.ml-rv .rv-qc{left:calc(24*var(--u));top:calc(209*var(--u));width:calc(342*var(--u));box-sizing:border-box;padding-bottom:calc(24*var(--u));border-radius:calc(12*var(--u));background:#fff;display:flex;flex-direction:column;align-items:center;gap:calc(24*var(--u));transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s,opacity .45s ease .1s}
.ml-rv .rv-net{align-self:stretch;display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(16*var(--u));border-bottom:1px solid rgba(48,51,60,.1)}
.ml-rv .rv-ni{display:grid;place-items:center;width:calc(24*var(--u));height:calc(24*var(--u));border-radius:50%;background:#3F4150}
.ml-rv .rv-ni img{width:calc(14*var(--u));height:calc(14*var(--u))}
.ml-rv .rv-net b{font:500 calc(11*var(--u))/calc(12*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.ml-rv .rv-net .ch{margin-left:auto;width:calc(9*var(--u));height:calc(14*var(--u));margin-right:calc(7*var(--u))}
.ml-rv .rv-qr{position:relative;width:calc(150*var(--u));height:calc(150*var(--u));background:#30333C;overflow:hidden}
.ml-rv .rv-qr .q{display:block;width:100%;height:100%;clip-path:inset(0 0 100% 0)}

.ml-rv .rv-tk{position:absolute;left:calc(59*var(--u));top:calc(59*var(--u));display:grid;place-items:center;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:#3F4150;box-shadow:0 0 0 calc(3*var(--u)) #30333C;scale:0}
.ml-rv .rv-tk img{width:calc(18*var(--u));height:calc(18*var(--u))}
.ml-rv .rv-ad{align-self:stretch;display:flex;align-items:center;justify-content:space-between;margin:calc(-16*var(--u)) calc(12*var(--u)) 0;padding:calc(16*var(--u));font:400 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif}



.ml-rv .rv-toast{left:50%;top:calc(56*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(10*var(--u)) calc(16*var(--u));border-radius:99px;background:#1B1C21;color:#fff;font:600 calc(13*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;white-space:nowrap;z-index:5;opacity:0;transform:translate(-50%,calc(-40*var(--u))) scale(.9);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.ml-rv .rv-toast i{position:relative;width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;background:#30BB5B}
.ml-rv .rv-toast i::after{content:"";position:absolute;left:35%;top:22%;width:22%;height:42%;border:solid #fff;border-width:0 calc(1.8*var(--u)) calc(1.8*var(--u)) 0;transform:rotate(45deg)}
.ml-rv .rv-in{left:calc(12*var(--u));right:calc(12*var(--u));top:calc(52*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));padding:calc(14*var(--u)) calc(16*var(--u));border-radius:calc(20*var(--u));background:rgba(255,255,255,.96);box-shadow:0 calc(12*var(--u)) calc(30*var(--u)) rgba(0,0,0,.16);z-index:5;opacity:0;transform:translateY(calc(-120*var(--u)));transition:opacity .3s ease,transform .6s cubic-bezier(.3,1.4,.5,1)}
.ml-rv .rv-ii{display:grid;place-items:center;width:calc(40*var(--u));height:calc(40*var(--u));border-radius:calc(10*var(--u));background:#E51B44}
.ml-rv .rv-ii img{width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%}
.ml-rv .rv-in b{display:block;font:700 calc(14*var(--u))/1.2 "Inter Tight","Geist",system-ui,sans-serif}
.ml-rv .rv-in em{display:block;margin-top:calc(3*var(--u));font:500 calc(11*var(--u))/1.2 "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;color:#9E9FA9}
.ml-rv .rv-in strong{margin-left:auto;font:700 calc(15*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;color:#30BB5B;white-space:nowrap}
.ml-rv .rv-in strong small{font-size:calc(10*var(--u))}
.ml-rv .rv-home{left:calc(128*var(--u));bottom:calc(8*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:99px;background:#000}
/* states */
.ml-rv:not(.in) .rv-cards{opacity:0;transform:translateX(calc(120*var(--u)))}
.ml-rv:not(.in) .rv-qc{opacity:0;transform:translateY(calc(40*var(--u)))}
.ml-rv.in .rv-qr .q{clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.45,0,.55,1) .6s}

@keyframes rvScan{0%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0;transform:translateY(calc(147*var(--u)))}}
.ml-rv.in .rv-tk{scale:1;transition:scale .5s cubic-bezier(.3,1.6,.5,1) 1.9s}
.ml-rv.cp .rv-toast{opacity:1;transform:translate(-50%,0)}
.ml-rv.rx .rv-in{opacity:1;transform:none}
.ml-rv.rx .rv-c.r{animation:rvGlow 1s ease .3s 1}
@keyframes rvGlow{0%,100%{box-shadow:0 0 0 0 rgba(48,187,91,0)}40%{box-shadow:0 0 0 calc(4*var(--u)) rgba(48,187,91,.55)}}
@media (prefers-reduced-motion:reduce){.ml-rv .rv-qr .q{clip-path:none}.ml-rv .rv-tk{scale:1}.ml-rv .rv-scan{display:none}}
.ml-rv .rv-c em small{font:600 calc(10.3*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;color:#fff}
/* Receive QR, after "3D QR Code" (Enzo Manuel Mangano, recent.design): modules assemble from the centre, the code tilts into isometric 3D, its modules rise as voxels in a wave, then it settles flat again */
.ml-rv .rv-qr{overflow:visible;background:none;perspective:calc(600*var(--u))}
.ml-rv .rv-q3{position:absolute;inset:0;transform-style:preserve-3d}
.ml-rv .rv-qp{position:absolute;inset:0;background:#30333C;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,0,.2,1),box-shadow .9s ease}
.ml-rv .rv-qp i{position:absolute;left:calc(var(--x)*7.1429*var(--u));top:calc(var(--y)*7.1429*var(--u));width:calc(7.392857142857143*var(--u));height:calc(7.392857142857143*var(--u));background:#EDEEF0;transform:translateZ(0) scale(0);transition:transform .45s cubic-bezier(.3,1.4,.5,1),background-color .4s ease}
.ml-rv.in .rv-qp i{transform:translateZ(0) scale(1);transition-delay:calc(.5s + var(--d)*.045s)}
.ml-rv.t3 .rv-qp{transform:translateY(calc(-6*var(--u))) rotateX(56deg) rotateZ(-45deg) scale(.82);box-shadow:calc(10*var(--u)) calc(10*var(--u)) calc(22*var(--u)) rgba(0,0,0,.25)}
.ml-rv.t3 .rv-tk{scale:0;transition:scale .25s ease}
.ml-rv.vx3 .rv-qp i{transform:translateZ(calc(var(--h)*var(--u))) scale(1);background:#FFD3DC;box-shadow:0 0 0 calc(0.4*var(--u)) rgba(229,27,68,.35);transition:transform .7s cubic-bezier(.3,1.4,.5,1) calc(var(--d)*.05s),background-color .5s ease calc(var(--d)*.05s)}
.ml-rv.vx3 .rv-qp i:nth-child(3n){background:#E51B44}
.ml-rv.t3:not(.vx3) .rv-qp i{transition:transform .55s cubic-bezier(.5,0,.2,1) calc((14 - var(--d))*.03s),background-color .4s ease}
.ml-rv:not(.in) .rv-qp i{transition:none}
.ml-rv.in .rv-tk{transition:scale .5s cubic-bezier(.3,1.6,.5,1) 1.4s}
.ml-rv.in:not(.t3) .rv-tk{scale:1}
@media (prefers-reduced-motion:reduce){.ml-rv .rv-qp i{transform:none!important}}
.ml-rv .rv-qp i{transform-style:preserve-3d}
.ml-rv .rv-qp i::after{content:"";position:absolute;inset:0;background:rgba(10,10,14,.55);transform:translateZ(calc(var(--h)*var(--u)*-1));opacity:0;transition:opacity .3s ease}
.ml-rv.vx3 .rv-qp i::after{opacity:1;transition:opacity .4s ease calc(var(--d)*.05s)}
/* Receive v2: fills the screen — bigger QR (250), Copy / Share buttons, network note; modules overlap so no seams show */
.ml-rv .rv-qc{top:calc(201*var(--u));gap:calc(20*var(--u));padding-bottom:calc(20*var(--u))}
.ml-rv .rv-qr{width:calc(250*var(--u));height:calc(250*var(--u));margin-top:calc(4*var(--u))}
.ml-rv .rv-qp{border-radius:calc(6*var(--u))}
.ml-rv .rv-qp i{left:calc(var(--x)*11.9048*var(--u));top:calc(var(--y)*11.9048*var(--u));width:calc(12.8*var(--u));height:calc(12.8*var(--u));margin:calc(-0.45*var(--u)) 0 0 calc(-0.45*var(--u))}
.ml-rv .rv-tk{left:calc(103.0*var(--u));top:calc(103.0*var(--u));width:calc(44*var(--u));height:calc(44*var(--u));box-shadow:0 0 0 calc(5*var(--u)) #30333C}
.ml-rv .rv-tk img{width:calc(24*var(--u));height:calc(24*var(--u))}
.ml-rv .rv-ad{margin:calc(-4*var(--u)) calc(12*var(--u)) 0;padding:0 calc(16*var(--u));justify-content:center;text-align:center;font-size:calc(14*var(--u));color:#30333C}

.ml-rv .rv-btns{align-self:stretch;display:flex;gap:calc(10*var(--u));margin:0 calc(20*var(--u))}
.ml-rv .rv-btns span{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));height:calc(52*var(--u));border-radius:calc(12*var(--u));font:700 calc(14*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em;transition:scale .15s ease}
.ml-rv .rv-btns svg{width:calc(18*var(--u));height:calc(18*var(--u))}
.ml-rv .rv-cpb{background:#E51B44;color:#fff}
.ml-rv .rv-sh{background:#F5F5F5;color:#30333C}
.ml-rv .rv-cpb.press{scale:.95}
.ml-rv .rv-note{left:calc(24*var(--u));right:calc(24*var(--u));top:calc(700*var(--u));margin:0;display:flex;gap:calc(10*var(--u));align-items:flex-start;padding:calc(14*var(--u)) calc(16*var(--u));border-radius:calc(12*var(--u));background:rgba(229,27,68,.06);font:500 calc(12.5*var(--u))/1.4 "Inter Tight","Geist",system-ui,sans-serif;color:#5B5E68;transition:opacity .5s ease .3s}
.ml-rv .rv-note b{font-weight:700;color:#30333C}
.ml-rv .rv-note i{flex:0 0 auto;display:grid;place-items:center;width:calc(18*var(--u));height:calc(18*var(--u));border-radius:50%;background:#E51B44;color:#fff;font:700 calc(11*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;font-style:normal}
.ml-rv:not(.in) .rv-note{opacity:0}


/* ===== ColdSend case v3 — after interfere.com: white app, icon rail with pastel tiles, breadcrumb, key/value detail + dotted chart on the left, activity timeline on the right (--w = 1/960 of the window) ===== */
#op-case-coldsend .cs-row .op-shot3{aspect-ratio:386/300;background:#FFFFFF;box-shadow:inset 0 0 0 1px #ECECEC}
#op-case-coldsend .cs-row .op-shot3::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#FBE4EC 0%,#F6E9F1 35%,#EEF0FA 70%,#E9F0FD 100%)}
#op-case-coldsend .cs-row .fz-tone{background:#F3DEE8;opacity:.6}
#op-case-coldsend .cs-row .fz-rule{background:rgba(255,255,255,.6)}
#op-case-coldsend .cs-win{position:absolute;left:50%;top:50%;z-index:1;width:88cqw;aspect-ratio:960/668;translate:-50% -46%;border-radius:2.2cqw;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1.2cqw 2.6cqw rgba(40,30,60,.10),0 5cqw 10cqw rgba(40,30,60,.10);opacity:0;transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.16,1,.3,1)}
#op-case-coldsend.play .cs-win{opacity:1;translate:-50% -50%}
#op-case-coldsend.play .cs-row .op-shot3:nth-child(2) .cs-win{transition-delay:.12s}
#op-case-coldsend .cs-bar{position:relative;display:flex;align-items:center;gap:.9cqw;height:4.2cqw;padding:0 2cqw;background:#FAFAFA;border-bottom:1px solid #ECECEC}
#op-case-coldsend .cs-bar>i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#E3E3E3}
#op-case-coldsend .cs-url{position:absolute;left:50%;translate:-50% 0;display:flex;align-items:center;gap:.7cqw;height:2.6cqw;padding:0 2.2cqw;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #E8E8E8;font:500 1.4cqw/1 "Inter","Inter Tight","Geist",system-ui,sans-serif;color:rgba(0,0,0,.5);white-space:nowrap}
#op-case-coldsend .cs-url svg{width:1.3cqw;height:1.3cqw}
#op-case-coldsend .cs-scr{position:relative;container-type:inline-size;--w:calc(100cqw/960);height:calc(100% - 4.2cqw);display:flex;background:#fff;font-family:"Inter","Inter Tight","Geist",system-ui,sans-serif;color:rgba(0,0,0,.875);overflow:hidden;letter-spacing:-.005em}
#op-case-coldsend .if-app svg{display:block}
#op-case-coldsend .if-app code{font:500 .96em/1 "Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;letter-spacing:-.01em}
#op-case-coldsend .if-app h5{margin:calc(8*var(--w)) 0 0;font:550 calc(22*var(--w))/1.2 "Inter","Inter Tight","Geist",system-ui,sans-serif;letter-spacing:-.02em;color:rgba(0,0,0,.9)}
/* rail */
#op-case-coldsend .if-rail{flex:0 0 calc(46*var(--w));display:flex;flex-direction:column;align-items:center;gap:calc(7*var(--w));padding:calc(12*var(--w)) 0;background:#FBFBFB;border-right:1px solid #EEEEEE}
#op-case-coldsend .if-brand{width:calc(22*var(--w));height:calc(22*var(--w));margin-bottom:calc(8*var(--w))}
#op-case-coldsend .if-ri{display:grid;place-items:center;width:calc(24*var(--w));height:calc(24*var(--w));border-radius:calc(6*var(--w));color:rgba(0,0,0,.5);background:#F0F0F0}
#op-case-coldsend .if-ri svg{width:calc(13*var(--w));height:calc(13*var(--w))}
#op-case-coldsend .if-ri.g{background:transparent}
#op-case-coldsend .if-ri.gr{background:#DDF3E4;color:#2E9E5B}#op-case-coldsend .if-ri.ye{background:#FDF0C4;color:#C98A00}#op-case-coldsend .if-ri.pu{background:#E6DEFB;color:#6B4FD6}
#op-case-coldsend .if-ri.bl{background:#DCEAFE;color:#2F6FE8}#op-case-coldsend .if-ri.pi{background:#FBE0EA;color:#D6457E}#op-case-coldsend .if-ri.gy{background:#EDEDED;color:rgba(0,0,0,.55)}
#op-case-coldsend .if-ri.on{box-shadow:0 0 0 calc(2*var(--w)) #fff,0 0 0 calc(3*var(--w)) #2F6FE8}
#op-case-coldsend .if-sep{width:calc(18*var(--w));height:1px;background:#E3E3E3;margin:calc(4*var(--w)) 0}
#op-case-coldsend .if-help{margin-top:auto}
/* body */

































/* chart */









/* tabs + timeline */





#op-case-coldsend .if-ev{position:relative;display:grid;grid-template-columns:calc(12*var(--w)) 1fr;gap:calc(10*var(--w));opacity:0;translate:0 calc(8*var(--w));transition:opacity .35s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .if-ev.in{opacity:1;translate:0 0}











#op-case-coldsend .if-ch2{display:flex;align-items:center;gap:calc(6*var(--w));padding:calc(7*var(--w)) calc(10*var(--w));background:#F5F5F5;font:500 calc(11*var(--w))/1 "Inter","Inter Tight","Geist",system-ui,sans-serif;color:rgba(0,0,0,.8)}
#op-case-coldsend .if-ch2 svg{width:calc(12*var(--w));height:calc(12*var(--w));color:rgba(0,0,0,.5)}
#op-case-coldsend .if-ch2 span{margin-left:auto;font:500 calc(9.5*var(--w))/1 "Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;color:rgba(0,0,0,.4)}
#op-case-coldsend .if-ln{display:grid;grid-template-columns:calc(14*var(--w)) calc(42*var(--w)) 1fr calc(14*var(--w));align-items:center;gap:calc(8*var(--w));padding:calc(4*var(--w)) calc(10*var(--w));font:400 calc(10.5*var(--w))/1.4 "Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;color:rgba(0,0,0,.75);opacity:.35;transition:opacity .3s ease,background-color .3s ease}
#op-case-coldsend .if-ln s{text-decoration:none;color:rgba(0,0,0,.3)}
#op-case-coldsend .if-ln b{font-weight:600;color:rgba(0,0,0,.55);font-family:"Inter","Inter Tight","Geist",system-ui,sans-serif}
#op-case-coldsend .if-ln code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#op-case-coldsend .if-ln .ok{display:grid;place-items:center;width:calc(14*var(--w));height:calc(14*var(--w));border-radius:50%;background:#DDF3E4;color:#2E9E5B;scale:0;transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .if-ln .ok svg{width:calc(9*var(--w));height:calc(9*var(--w))}
#op-case-coldsend .if-ln.in{opacity:1;background:#F3FBF6}
#op-case-coldsend .if-ln.in .ok{scale:1}
/* chips, buttons */
#op-case-coldsend .if-chip{display:inline-flex;align-items:center;gap:calc(6*var(--w));padding:calc(5*var(--w)) calc(9*var(--w));margin:0 calc(6*var(--w)) 0 0;border-radius:calc(7*var(--w));box-shadow:inset 0 0 0 1px #E4E4E4;background:#fff;font:500 calc(11*var(--w))/1 "Inter","Inter Tight","Geist",system-ui,sans-serif;color:rgba(0,0,0,.85);white-space:nowrap}
#op-case-coldsend .if-chip svg{width:calc(12*var(--w));height:calc(12*var(--w));color:rgba(0,0,0,.55)}
#op-case-coldsend .if-chip.dk{background:rgba(0,0,0,.92);color:#fff;box-shadow:none}#op-case-coldsend .if-chip.dk svg{color:#fff}
#op-case-coldsend .if-dot{width:calc(7*var(--w));height:calc(7*var(--w));border-radius:50%;flex:0 0 auto}
#op-case-coldsend .if-dot.g{background:#2E9E5B}#op-case-coldsend .if-dot.a{background:#E8A800}#op-case-coldsend .if-dot.r{background:#E5484D}
#op-case-coldsend .sp{display:inline-block;width:calc(11*var(--w));height:calc(11*var(--w));border-radius:50%;border:calc(1.6*var(--w)) solid rgba(0,0,0,.18);border-top-color:rgba(0,0,0,.7);animation:csSpin .8s linear infinite;flex:0 0 auto}
@keyframes csSpin{to{rotate:360deg}}






/* A specifics */


/* B specifics */















#op-case-coldsend .if-ln2{display:inline-flex;align-items:center;gap:calc(7*var(--w));font:400 calc(11.5*var(--w))/1.3 "Inter","Inter Tight","Geist",system-ui,sans-serif;color:rgba(0,0,0,.6)}
#op-case-coldsend .if-ln2 s,#op-case-coldsend .if-ln2 u{text-decoration:none;display:inline-flex;align-items:center;gap:calc(6*var(--w))}
#op-case-coldsend .if-ln2 s{display:none;color:rgba(0,0,0,.85)}
#op-case-coldsend .if-ev.ok .if-ln2 .sp,#op-case-coldsend .if-ev.ok .if-ln2 u{display:none}#op-case-coldsend .if-ev.ok .if-ln2 s{display:inline-flex}
#op-case-coldsend .cs-b .cs-pr{opacity:.4}#op-case-coldsend .cs-b.rdy .cs-pr{opacity:1}



/* C specifics */










@keyframes csBlink{50%{opacity:0}}


















#op-case-coldsend .cs-c .cs-pr{opacity:.4}#op-case-coldsend .cs-c.rdy .cs-pr{opacity:1}
/* D specifics */












#op-case-coldsend .if-chip.st{margin:0}
#op-case-coldsend .if-chip.st u,#op-case-coldsend .if-chip.st s{text-decoration:none}
#op-case-coldsend .if-chip.st.wu .if-dot,#op-case-coldsend .if-chip.st.wu s{display:none}
#op-case-coldsend .if-chip.st.ok .sp,#op-case-coldsend .if-chip.st.ok u{display:none}
#op-case-coldsend .cs-new{display:none}
#op-case-coldsend .cs-d.nw .cs-new{display:flex;animation:csRow .55s cubic-bezier(.3,1.4,.5,1) both;background:#F5F8FF}
@keyframes csRow{from{opacity:0;translate:0 calc(-14*var(--w))}to{opacity:1;translate:0 0}}

@keyframes csFlash{0%{background:#EDF8F1}100%{background:transparent}}
#op-case-coldsend .cs-qlogo,#op-case-coldsend .op-quote-logo.cs-qlogo span{color:#111!important}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .sp,#op-case-coldsend .if-in.typing .cr{animation:none}#op-case-coldsend .if-ev,#op-case-coldsend .if-li,#op-case-coldsend .if-ci{opacity:1;translate:none}#op-case-coldsend .a-ch path{clip-path:none}}

/* ===== ColdSend v3.1: grey stage like the other cases; showpieces — iridescent status pill, paper plane, delivery route card, live inbox vs spam ===== */
#op-case-coldsend .cs-row .op-shot3{background:linear-gradient(180deg,#fbfbfb 0%,#f9f9f9 100%);box-shadow:inset 0 0 0 1px #f0f0f0}
#op-case-coldsend .cs-row .op-shot3::before{display:none}
#op-case-coldsend .cs-row .fz-tone{background:#f4f4f2;opacity:1}
#op-case-coldsend .cs-row .fz-rule{background:rgba(255,255,255,.9)}
#op-case-coldsend .cs-win{box-shadow:0 0 0 1px rgba(0,0,0,.07),0 1.2cqw 2.6cqw rgba(0,0,0,.08),0 5cqw 10cqw rgba(0,0,0,.08)}
/* iridescent status pill (after "Agent Status Component") */
@property --ipa{syntax:"<angle>";inherits:false;initial-value:0deg}



@keyframes ipSpin{to{--ipa:360deg}}




#op-case-coldsend .if-ipm{font:500 calc(10.5*var(--w))/1 "Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;font-style:normal;color:rgba(0,0,0,.45);font-variant-numeric:tabular-nums}

/* paper plane (after "Paper Plane Email Send") */













@keyframes plFly{0%{opacity:0;offset-distance:0%;scale:.6}10%{opacity:1;scale:1}38%{offset-distance:0%}88%{offset-distance:100%;opacity:1;scale:1}100%{offset-distance:100%;opacity:0;scale:.5}}
@keyframes plFold{0%,22%{transform:none;opacity:1}36%{transform:rotateX(70deg) scaleX(.3);opacity:0}100%{transform:rotateX(70deg) scaleX(.3);opacity:0}}
@keyframes plFlap{0%,12%{transform:rotateX(0)}22%{transform:rotateX(-160deg)}100%{transform:rotateX(-160deg)}}
@keyframes plShow{0%,30%{opacity:0;scale:.4;rotate:-20deg}40%{opacity:1;scale:1;rotate:0deg}100%{opacity:1}}
@keyframes plTrail{0%,38%{stroke-dashoffset:100;stroke-dasharray:0 100;opacity:0}40%{opacity:1}88%{stroke-dasharray:100 100;opacity:1}100%{stroke-dasharray:100 100;opacity:0}}

/* route card (C) */






#op-case-coldsend .if-chip.st2 u,#op-case-coldsend .if-chip.st2 s{text-decoration:none;display:inline-flex;align-items:center;gap:calc(6*var(--w))}
#op-case-coldsend .if-chip.st2 s{display:none}#op-case-coldsend .if-chip.st2 b{font-weight:600;font-variant-numeric:tabular-nums}
#op-case-coldsend .cs-c.done .if-chip.st2 .sp,#op-case-coldsend .cs-c.done .if-chip.st2 u{display:none}#op-case-coldsend .cs-c.done .if-chip.st2 s{display:inline-flex}










@keyframes rtDot{0%{opacity:0;transform:translateX(5%)}4%{opacity:1}96%{opacity:1}100%{opacity:0;transform:translateX(95%)}}
#op-case-coldsend .if-nd{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(7*var(--w));text-align:center}




#op-case-coldsend .if-nd b{margin-top:calc(6*var(--w));font:500 calc(12*var(--w))/1 "Inter","Inter Tight","Geist",system-ui,sans-serif}
#op-case-coldsend .if-nd code{font-size:calc(9.5*var(--w));color:rgba(0,0,0,.5)}
#op-case-coldsend .if-nd em{font:400 calc(10*var(--w))/1 "Inter","Inter Tight","Geist",system-ui,sans-serif;font-style:normal;color:rgba(0,0,0,.4);transition:color .3s ease}


#op-case-coldsend .if-nd.lit em{color:#2E9E5B}
#op-case-coldsend .if-nd.lit::after{content:"";position:absolute;left:50%;top:calc(19*var(--w));width:calc(38*var(--w));height:calc(38*var(--w));translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(46,158,91,.5);animation:ndPulse 1.1s ease-out 1}
@keyframes ndPulse{from{scale:1;opacity:1}to{scale:2.2;opacity:0}}
#op-case-coldsend .if-rlog{margin-top:auto;border:1px solid #EAEAEA;border-radius:calc(8*var(--w));overflow:hidden;background:#FCFCFC}
#op-case-coldsend .if-rlog .if-ln{grid-template-columns:calc(14*var(--w)) calc(44*var(--w)) 1fr calc(14*var(--w))}
/* D: inbox vs spam */








#op-case-coldsend .if-mcol{display:flex;flex-direction:column;border:1px solid #EAEAEA;border-radius:calc(8*var(--w));overflow:hidden;background:#FCFCFC}




#op-case-coldsend .if-mlist{display:flex;flex-direction:column;gap:calc(4*var(--w));padding:calc(6*var(--w));overflow:hidden}
#op-case-coldsend .if-m{display:grid;grid-template-columns:calc(14*var(--w)) 1fr auto;align-items:center;gap:calc(6*var(--w));padding:calc(5*var(--w)) calc(6*var(--w));border-radius:calc(6*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #ECECEC;animation:mDrop .55s cubic-bezier(.3,1.4,.5,1) both}
#op-case-coldsend .if-m i{width:calc(14*var(--w));height:calc(14*var(--w));border-radius:50%;background:var(--c,#D9D9D9)}
#op-case-coldsend .if-m span{display:flex;flex-direction:column;gap:calc(3*var(--w))}
#op-case-coldsend .if-m span::before,#op-case-coldsend .if-m span::after{content:"";display:block;height:calc(4*var(--w));border-radius:99px;background:#E6E6E6}
#op-case-coldsend .if-m span::before{width:62%}#op-case-coldsend .if-m span::after{width:40%}
#op-case-coldsend .if-m em{font:500 calc(8.5*var(--w))/1 "Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;font-style:normal;color:rgba(0,0,0,.4)}
#op-case-coldsend .if-mcol.spm .if-m{opacity:.75}
@keyframes mDrop{from{opacity:0;translate:0 calc(-14*var(--w));scale:.96}to{opacity:1;translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .if-ipill::before,#op-case-coldsend .if-ipill::after,#op-case-coldsend .if-plane,#op-case-coldsend .if-env,#op-case-coldsend .if-pl,#op-case-coldsend .if-rdot,#op-case-coldsend .if-m{animation:none!important}#op-case-coldsend .if-trail{display:none}}

#op-case-coldsend .if-nd{gap:calc(9*var(--w))}


#op-case-coldsend .if-nd b{font-size:calc(13*var(--w))}
#op-case-coldsend .if-nd code{font-size:calc(10*var(--w))}
#op-case-coldsend .if-nd.lit::after{top:calc(26*var(--w));width:calc(52*var(--w));height:calc(52*var(--w))}




#op-case-coldsend .cs-qlogo{display:flex;align-items:center;justify-content:center;gap:10px;font:800 28px/1 "Inter Tight","Geist",system-ui,sans-serif;color:#111}
#op-case-coldsend .cs-qlogo svg{width:40px;height:40px;flex:0 0 auto}

/* ColdSend stage bg — Figma Zade Visuals 2652:164642 (#F3F3F4, stroke #EAECF1) */
#op-case-coldsend .cs-row .op-shot3{background:#f3f3f4;box-shadow:inset 0 0 0 1px #eaecf1}
#op-case-coldsend .cs-row .fz-tone{background:#f3f3f4;opacity:1}

/* ColdSend v4 — cropped "half-in" windows like interfere.com + calmer type */
#op-case-coldsend .cs-row .op-shot3{overflow:hidden}
#op-case-coldsend .cs-win,#op-case-coldsend .if-card{left:var(--cx,7cqw);top:var(--cy,9cqw);width:var(--cw,158cqw);aspect-ratio:960/640;translate:0 4cqw;border-radius:2.4cqw 0 0 0;box-shadow:0 0 0 1px #e6e7ea,0 1cqw 3cqw rgba(20,24,40,.06);-webkit-mask:linear-gradient(180deg,#000 55%,transparent 92%);mask:linear-gradient(180deg,#000 55%,transparent 92%)}
#op-case-coldsend.play .cs-win,#op-case-coldsend.play .if-card{translate:0 0}
#op-case-coldsend .cs-bar{display:none}
#op-case-coldsend .cs-scr{height:100%;letter-spacing:-.006em;font-family:"Inter","Inter Tight",system-ui,sans-serif}
/* type: Inter 400/500, grey hierarchy, no tracked caps / mono meta */
#op-case-coldsend .if-app h5,#op-case-coldsend .if-stat>b,#op-case-coldsend .if-mbh b{font-weight:500;letter-spacing:-.015em}

#op-case-coldsend .if-id,#op-case-coldsend .if-ipm,#op-case-coldsend .if-ch2 span,#op-case-coldsend .if-m em{font-family:"Inter","Inter Tight",system-ui,sans-serif;font-weight:400;font-variant-numeric:tabular-nums}


#op-case-coldsend .if-r,#op-case-coldsend .if-et,#op-case-coldsend .if-eb,#op-case-coldsend .if-desc,#op-case-coldsend .if-li,#op-case-coldsend .if-ln2{font-size:calc(13*var(--w))}



/* ColdSend stage: faded placeholder cards behind the window (Figma 2652:164643) */
#op-case-coldsend .cs-row .op-shot3::before{display:block;content:"";position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22616%22%20height%3D%22508%22%20viewBox%3D%220%200%20616%20508%22%20opacity%3D%22.6%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%22303%22%20height%3D%22245%22%20rx%3D%2214%22%20fill%3D%22%23F6F6F7%22%20stroke%3D%22%23E5E7EB%22/%3E%3Crect%20x%3D%22312.5%22%20y%3D%220.5%22%20width%3D%22303%22%20height%3D%22245%22%20rx%3D%2214%22%20fill%3D%22%23F6F6F7%22%20stroke%3D%22%23E5E7EB%22/%3E%3Crect%20x%3D%22-151.5%22%20y%3D%22254.5%22%20width%3D%22303%22%20height%3D%22245%22%20rx%3D%2214%22%20fill%3D%22%23F6F6F7%22%20stroke%3D%22%23E5E7EB%22/%3E%3Crect%20x%3D%22160.5%22%20y%3D%22254.5%22%20width%3D%22303%22%20height%3D%22245%22%20rx%3D%2214%22%20fill%3D%22%23F6F6F7%22%20stroke%3D%22%23E5E7EB%22/%3E%3Crect%20x%3D%22472.5%22%20y%3D%22254.5%22%20width%3D%22303%22%20height%3D%22245%22%20rx%3D%2214%22%20fill%3D%22%23F6F6F7%22%20stroke%3D%22%23E5E7EB%22/%3E%3C/svg%3E") -14cqw -12cqw/62cqw auto repeat}
#op-case-coldsend .cs-row .fz-tone{display:none}

/* ColdSend brand blue (Figma Brand/Blue/600 #1F78F5, 50 #EEF8FF) + tighter crop */
#op-case-coldsend{--csb:#1F78F5;--csb50:#EEF8FF}
#op-case-coldsend .cs-row .fz-rule{display:none}
#op-case-coldsend .cs-win,#op-case-coldsend .if-card{--cw:176cqw}
#op-case-coldsend .if-brand circle{fill:var(--csb)}
#op-case-coldsend .if-btn,#op-case-coldsend .if-chip.dk,#op-case-coldsend .if-steps .on,#op-case-coldsend .cs-b.st3 .if-steps .b-s3,#op-case-coldsend .if-av.add{background:linear-gradient(180deg,#428EFF,#1A75FF);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#op-case-coldsend .if-ri.on{background:var(--csb50);color:var(--csb);box-shadow:0 0 0 calc(1*var(--w)) rgba(31,120,245,.35)}
#op-case-coldsend .if-ri.gr,#op-case-coldsend .if-ri.ye,#op-case-coldsend .if-ri.pu,#op-case-coldsend .if-ri.bl,#op-case-coldsend .if-ri.pi,#op-case-coldsend .if-ri.gy{background:transparent;color:rgba(0,0,0,.45)}
#op-case-coldsend .if-ri.on{background:var(--csb50);color:var(--csb)}


#op-case-coldsend .if-nd.lit em{color:var(--csb)}
#op-case-coldsend .if-nd.lit::after{border-color:rgba(31,120,245,.5)}


/* ColdSend: back to the animated halftone squares used in other cases, tinted for the #F3F3F4 stage */
#op-case-coldsend .cs-row .op-shot3::before{display:none}
#op-case-coldsend .cs-row .fz-tone{display:block;background:#E3E5EA;opacity:1}
#op-case-coldsend .cs-row .fz-rule{display:block;background:rgba(255,255,255,.9)}

/* ColdSend v4.1 — visible bottom fade, route card fits 4 nodes, blue track, no mono */
#op-case-coldsend .cs-win,#op-case-coldsend .if-card{-webkit-mask:linear-gradient(180deg,#000 38cqw,transparent 66cqw);mask:linear-gradient(180deg,#000 38cqw,transparent 66cqw)}


#op-case-coldsend .if-app code,#op-case-coldsend .if-card code,#op-case-coldsend .if-ln,#op-case-coldsend .if-in{font-family:"Inter","Inter Tight",system-ui,sans-serif;font-weight:400;letter-spacing:-.005em;font-variant-numeric:tabular-nums}

#op-case-coldsend .cs-win,#op-case-coldsend .if-card{-webkit-mask:linear-gradient(180deg,#000 48cqw,transparent 69cqw);mask:linear-gradient(180deg,#000 48cqw,transparent 69cqw)}




/* ColdSend v4.2 — no bottom fade; screen A = server health / inbox placement (Figma 2652:164730) */
#op-case-coldsend .cs-win,#op-case-coldsend .if-card{-webkit-mask:none;mask:none}
#op-case-coldsend .a4{padding:calc(26*var(--w)) calc(28*var(--w));display:flex;flex-direction:column;gap:calc(26*var(--w))}
#op-case-coldsend .a4-hd{display:flex;align-items:center;gap:calc(14*var(--w))}


#op-case-coldsend .a4-t h5{margin:0;font:500 calc(20*var(--w))/1.15 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em;color:#181B26}
#op-case-coldsend .a4-t em{display:block;margin-top:calc(5*var(--w));font:400 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989}
#op-case-coldsend .a4-pill{margin-left:calc(26*var(--w));display:inline-flex;align-items:center;gap:calc(6*var(--w));padding:calc(7*var(--w)) calc(11*var(--w));border-radius:99px;box-shadow:inset 0 0 0 1px #E5E7EB;font:500 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#3E434E}
#op-case-coldsend .a4-pill svg{width:calc(14*var(--w));height:calc(14*var(--w))}
#op-case-coldsend .a4-ch{position:relative;display:flex;align-items:flex-end;gap:calc(8*var(--w));height:calc(250*var(--w))}
#op-case-coldsend .a4-b{position:relative;flex:0 0 calc(86*var(--w));height:0;border-radius:calc(14*var(--w));background:#F1F1F2;transition:height 1.2s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
#op-case-coldsend .cs-a.on .a4-b{height:var(--hh)}
#op-case-coldsend .a4-b.hi{background:linear-gradient(180deg,#428EFF,#1A75FF);overflow:hidden}
#op-case-coldsend .a4-b.hi::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1.5px,transparent 1.5px 10px);animation:a4s 3s linear infinite}
@keyframes a4s{to{background-position:28px 0}}
#op-case-coldsend .a4-v{position:absolute;left:calc(14*var(--w));top:calc(13*var(--w));font:500 calc(16*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;letter-spacing:-.01em;color:#181B26;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s ease calc(var(--d,0s) + .3s)}
#op-case-coldsend .a4-b.hi .a4-v{color:#fff}
#op-case-coldsend .cs-a.on .a4-v{opacity:1}
#op-case-coldsend .a4-line{position:absolute;left:0;width:calc(370*var(--w));bottom:calc(250*var(--w)*.95 - 40*var(--w));height:0;border-top:1.5px dashed #181B26;transform-origin:left;scale:0 1;transition:scale .9s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .cs-a.ln .a4-line{scale:1 1}
#op-case-coldsend .a4-badge{position:absolute;left:calc(270*var(--w));bottom:calc(250*var(--w)*.95 - 62*var(--w));display:flex;flex-direction:column;gap:calc(3*var(--w));padding:calc(8*var(--w)) calc(11*var(--w));border-radius:calc(8*var(--w));background:#181B26;color:#fff;opacity:0;translate:0 calc(6*var(--w));scale:.94;transition:opacity .35s ease,translate .5s cubic-bezier(.2,.8,.2,1),scale .5s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .cs-a.ln .a4-badge{opacity:1;translate:0 0;scale:1}
#op-case-coldsend .a4-badge b{font:500 calc(13*var(--w))/1.1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .a4-badge em{font:400 calc(12*var(--w))/1.1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:rgba(255,255,255,.75)}



/* screen A: leave air under the bars so they don't run into the stage edge */
#op-case-coldsend .a4{gap:calc(24*var(--w))}
#op-case-coldsend .a4-ch{height:calc(196*var(--w))}
#op-case-coldsend .a4-line{bottom:calc(196*var(--w)*.95 - 40*var(--w))}
#op-case-coldsend .a4-badge{bottom:calc(196*var(--w)*.95 - 62*var(--w))}



/* screen A: window dissolves to the right and bottom so the stage bg shows around it */
#op-case-coldsend .cs-a .cs-win{-webkit-mask:linear-gradient(90deg,#000 72cqw,transparent 88cqw),linear-gradient(180deg,#000 52cqw,transparent 63cqw);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 72cqw,transparent 88cqw),linear-gradient(180deg,#000 52cqw,transparent 63cqw);mask-composite:intersect}
#op-case-coldsend .cs-a .a4-ch{height:calc(176*var(--w))}
#op-case-coldsend .cs-a .a4-line{bottom:calc(176*var(--w)*.95 - 40*var(--w))}
#op-case-coldsend .cs-a .a4-badge{bottom:calc(176*var(--w)*.95 - 62*var(--w))}

/* ColdSend: windows bleed past the stage; stage outline drawn on top so the edge stays visible */
#op-case-coldsend .cs-a .cs-win{-webkit-mask:none;mask:none}
#op-case-coldsend .cs-row .op-shot3::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px #EAECF1;pointer-events:none}

/* ColdSend v4.3 — screen B: plan picker (Figma "Setup new server" 2652:164671) with a cursor flow */
#op-case-coldsend .b4{position:relative;padding:calc(26*var(--w)) calc(28*var(--w));width:calc(430*var(--w))}
#op-case-coldsend .b4-hd{display:flex;align-items:flex-start;justify-content:space-between}
#op-case-coldsend .b4-hd h5{margin:0;font:500 calc(20*var(--w))/1.15 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em;color:#181B26}
#op-case-coldsend .b4-hd em{display:block;margin-top:calc(6*var(--w));font:400 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989}
#op-case-coldsend .b4-x{color:#717989}#op-case-coldsend .b4-x svg{width:calc(18*var(--w));height:calc(18*var(--w))}
#op-case-coldsend .b4-l{position:relative;display:flex;flex-direction:column;gap:calc(8*var(--w));margin:calc(20*var(--w)) 0 calc(18*var(--w))}
#op-case-coldsend .b4-o{position:relative;z-index:1;display:flex;align-items:center;gap:calc(12*var(--w));height:calc(52*var(--w));padding:0 calc(14*var(--w));border-radius:calc(11*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;transition:scale .18s ease}
#op-case-coldsend .b4-o.press{scale:.985}
#op-case-coldsend .b4-ic{display:grid;place-items:center;width:calc(26*var(--w));height:calc(26*var(--w));border-radius:calc(7*var(--w));background:#FDC33C}
#op-case-coldsend .b4-ic svg{width:calc(13*var(--w));height:calc(13*var(--w))}
#op-case-coldsend .b4-o b{flex:1;font:500 calc(14*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#181B26}
#op-case-coldsend .b4-o em{font:400 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#555B68;font-variant-numeric:tabular-nums}
#op-case-coldsend .b4-rd{position:relative;width:calc(19*var(--w));height:calc(19*var(--w));border-radius:50%;box-shadow:inset 0 0 0 1px #D9DCE2;background:#fff;transition:background-color .25s ease,box-shadow .25s ease}
#op-case-coldsend .b4-rd::after{content:"";position:absolute;inset:calc(5.5*var(--w));border-radius:50%;background:#fff;scale:0;transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .b4-o.sel .b4-rd{background:var(--csb);box-shadow:none}
#op-case-coldsend .b4-o.sel .b4-rd::after{scale:1}
#op-case-coldsend .b4-ring{position:absolute;left:0;right:0;top:0;height:calc(52*var(--w));border-radius:calc(11*var(--w));background:#fff;box-shadow:inset 0 0 0 1.5px var(--csb),0 0 0 calc(3*var(--w)) rgba(31,120,245,.14);translate:0 calc(var(--i,1)*60*var(--w));transition:translate .55s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .b4-ft{display:flex;align-items:center;justify-content:space-between}
#op-case-coldsend .b4-sum{font:400 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#717989}
#op-case-coldsend .b4-sum em{font-style:normal;color:#181B26;font-weight:500}
#op-case-coldsend .b4-sum b{font-weight:500;color:#181B26;font-variant-numeric:tabular-nums}
#op-case-coldsend .b4-btn{position:relative;display:grid;height:calc(36*var(--w));min-width:calc(150*var(--w));border-radius:calc(9*var(--w));background:linear-gradient(180deg,#428EFF,#1A75FF);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 calc(2*var(--w)) calc(6*var(--w)) rgba(31,120,245,.25);color:#fff;overflow:hidden;transition:scale .18s ease,background .4s ease}
#op-case-coldsend .b4-btn.press{scale:.96}
#op-case-coldsend .b4-btn u{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:calc(7*var(--w));text-decoration:none;font:500 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;transition:opacity .25s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .b4-btn u.ld,#op-case-coldsend .b4-btn u.ok{opacity:0;translate:0 60%}
#op-case-coldsend .b4-btn u svg{width:calc(14*var(--w));height:calc(14*var(--w))}
#op-case-coldsend .b4-btn u.ld i{width:calc(12*var(--w));height:calc(12*var(--w));border-radius:50%;border:1.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:b4sp .7s linear infinite}
@keyframes b4sp{to{rotate:360deg}}
#op-case-coldsend .cs-b.ld .b4-btn u:first-child,#op-case-coldsend .cs-b.ok .b4-btn u:first-child{opacity:0;translate:0 -60%}
#op-case-coldsend .cs-b.ld .b4-btn u.ld{opacity:1;translate:0 0}
#op-case-coldsend .cs-b.ok .b4-btn u.ld{opacity:0;translate:0 -60%}
#op-case-coldsend .cs-b.ok .b4-btn u.ok{opacity:1;translate:0 0}
#op-case-coldsend .cs-b.ok .b4-btn{background:linear-gradient(180deg,#52C43A,#46B72B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 calc(2*var(--w)) calc(6*var(--w)) rgba(70,183,43,.25)}
#op-case-coldsend .b4-cur{position:absolute;left:0;top:0;z-index:4;width:calc(20*var(--w));height:calc(20*var(--w));filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));opacity:0;transition:translate .85s cubic-bezier(.4,0,.2,1),opacity .3s ease,scale .15s ease}
#op-case-coldsend .cs-b.on .b4-cur{opacity:1}
#op-case-coldsend .b4-cur.press{scale:.82}

/* ColdSend camera zoom: the app inside the window scales toward the action (Screen Studio-style), frame stays put */
#op-case-coldsend .cs-scr.cam{transform-origin:0 0;transition:transform 1.15s cubic-bezier(.65,0,.25,1);will-change:transform}

/* ColdSend v5 — screen A as one wide Linear/Metalab-style stage: chart + live activity feed, camera follows the story */
@media (min-width:601px){
#op-case-coldsend .cs-row .cs-a{grid-column:1/-1;aspect-ratio:772/400}
#op-case-coldsend .cs-a .cs-win{--cw:112cqw;--cx:4.5cqw;--cy:6cqw}
}
#op-case-coldsend .a4w{display:flex;align-items:stretch;height:calc(100% - 40*var(--w))}
#op-case-coldsend .a4w .a4{flex:0 0 calc(452*var(--w));width:auto}
#op-case-coldsend .a4f{flex:0 0 calc(340*var(--w));border-left:1px solid #EEEEF0;padding:calc(22*var(--w)) calc(24*var(--w));display:flex;flex-direction:column}
#op-case-coldsend .a4f-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(14*var(--w))}
#op-case-coldsend .a4f-hd b{font:500 calc(14*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#181B26}
#op-case-coldsend .a4f-live{display:inline-flex;align-items:center;gap:calc(6*var(--w));font:500 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#717989}
#op-case-coldsend .a4f-live i{position:relative;width:calc(7*var(--w));height:calc(7*var(--w));border-radius:50%;background:#46B72B}
#op-case-coldsend .a4f-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#46B72B;animation:a4lv 1.6s ease-out infinite}
@keyframes a4lv{to{scale:2.8;opacity:0}}
#op-case-coldsend .a4f-l{position:relative;display:flex;flex-direction:column}
#op-case-coldsend .a4f-l::before{content:"";position:absolute;left:calc(13*var(--w));top:calc(14*var(--w));bottom:calc(14*var(--w));width:1px;background:#EEEEF0}
#op-case-coldsend .a4e{display:grid;grid-template-rows:0fr;opacity:0;translate:0 calc(-6*var(--w));transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease .1s,translate .55s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .a4e.in{grid-template-rows:1fr;opacity:1;translate:0 0}
#op-case-coldsend .a4e-in{overflow:hidden;display:flex;gap:calc(11*var(--w));padding:calc(7*var(--w)) 0}
#op-case-coldsend .a4e-ic{position:relative;z-index:1;flex:0 0 auto;display:grid;place-items:center;width:calc(27*var(--w));height:calc(27*var(--w));border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #E5E7EB;color:#555B68}
#op-case-coldsend .a4e-ic svg{width:calc(13*var(--w));height:calc(13*var(--w))}
#op-case-coldsend .a4e-ic .lt{font:600 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#3E434E}
#op-case-coldsend .a4e-ic.fl{color:#E07B00;background:#"Inter","Inter Tight",system-ui,sans-serifF5E6;box-shadow:inset 0 0 0 1px #FCE3BF}
#op-case-coldsend .a4e-ic.bl{color:var(--csb);background:var(--csb50);box-shadow:inset 0 0 0 1px #D4E6FD}
#op-case-coldsend .a4e-ic.gr{color:#2E9E5B;background:#F0FAF3;box-shadow:inset 0 0 0 1px #CFE9D8}
#op-case-coldsend .a4e-tx{flex:1;min-width:0;padding-top:calc(6*var(--w))}
#op-case-coldsend .a4e-tx p{margin:0;font:400 calc(13*var(--w))/1.35 "Inter","Inter Tight",system-ui,sans-serif;color:#555B68}
#op-case-coldsend .a4e-tx p b{font-weight:500;color:#181B26}
#op-case-coldsend .a4e-tx em{font-style:normal;color:#A0A6B1}
#op-case-coldsend .a4e-pb{display:block;height:calc(5*var(--w));margin-top:calc(8*var(--w));border-radius:99px;background:#F1F1F3;overflow:hidden}
#op-case-coldsend .a4e-pb i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#428EFF,#1A75FF);transition:width 1s cubic-bezier(.2,.8,.2,1) .25s}
#op-case-coldsend .a4e.in .a4e-pb i{width:var(--v)}
#op-case-coldsend .cs-a .cs-scr.cam{transform-origin:0 0;transition:transform 1.2s cubic-bezier(.65,0,.25,1);will-change:transform}

@media (min-width:601px){
#op-case-coldsend .cs-row .cs-d{grid-column:1/-1;aspect-ratio:772/400}
#op-case-coldsend .cs-d .cs-win{--cw:112cqw;--cx:4.5cqw;--cy:6cqw}
}

#op-case-coldsend .a4w .a4{flex-basis:calc(440*var(--w))}
#op-case-coldsend .a4f{flex-basis:calc(318*var(--w));padding:calc(22*var(--w)) calc(20*var(--w))}
#op-case-coldsend .a4-t h5,#op-case-coldsend .a4-pill,#op-case-coldsend .a4-t em{white-space:nowrap}
#op-case-coldsend .a4-hd{gap:calc(12*var(--w))}
#op-case-coldsend .a4-pill{margin-left:auto}
#op-case-coldsend .a4e-tx p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#op-case-coldsend .a4-badge b,#op-case-coldsend .a4-badge em{white-space:nowrap}

/* ColdSend v6 — one story (plan → DNS test → server health → fleet), less close-up framing, one visual language */
#op-case-coldsend .cs-b .cs-win,#op-case-coldsend .cs-c .cs-win{--cw:158cqw}
@media (min-width:601px){#op-case-coldsend .cs-a .cs-win,#op-case-coldsend .cs-d .cs-win{--cw:104cqw;--cx:5cqw;--cy:6.5cqw}}
#op-case-coldsend .c5{display:flex;flex-direction:column;width:calc(480*var(--w));padding:calc(24*var(--w)) calc(26*var(--w))}

#op-case-coldsend .c5-t h5{margin:0;font:500 calc(20*var(--w))/1.15 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em;color:#181B26}
#op-case-coldsend .c5-t em{display:block;margin-top:calc(6*var(--w));font:400 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989;white-space:nowrap}

#op-case-coldsend .c5 .if-rlog{margin-top:0}



#op-case-coldsend .c5 .if-nd.lit::after{top:calc(22*var(--w));width:calc(44*var(--w));height:calc(44*var(--w))}


/* servers list: brand tiles instead of pastel rainbow */



#op-case-coldsend .c5 .if-nd code{display:none}
#op-case-coldsend .c5 .if-nd b{font-size:calc(13*var(--w))}
#op-case-coldsend .c5 .if-nd em{font-size:calc(11.5*var(--w))}

/* ColdSend: windows sit in a laptop — dark bezel on top/left (device runs off the stage), browser bar inside */
#op-case-coldsend .cs-win{display:flex;flex-direction:column;padding:calc(.25cqw + 3px) 0 0 calc(.25cqw + 3px);background:#26272d;border-radius:calc(2cqw + 6px) 0 0 0;box-shadow:inset 0 0 0 1px #2B2B30,0 1.4cqw 4cqw rgba(16,20,36,.16)}
#op-case-coldsend .cs-win::before{content:"";position:absolute;left:calc(.25cqw + 3px);top:calc(.25cqw + 3px);right:0;bottom:0;border-radius:calc(1.7cqw + 4px) 0 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none;z-index:3}
#op-case-coldsend .cs-bar{display:flex;flex:0 0 auto;align-items:center;gap:calc(.5cqw + 3px);height:calc(2.2cqw + 12px);padding:0 calc(1.2cqw + 6px);background:#F6F6F7;border-bottom:1px solid #EAECF1;border-radius:calc(1.7cqw + 4px) 0 0 0}
#op-case-coldsend .cs-bar>i{width:calc(.6cqw + 4px);height:calc(.6cqw + 4px);border-radius:50%;background:#E0E1E5}
#op-case-coldsend .cs-bar>i:nth-child(1){background:#FF5F57}#op-case-coldsend .cs-bar>i:nth-child(2){background:#FEBC2E}#op-case-coldsend .cs-bar>i:nth-child(3){background:#28C840}
#op-case-coldsend .cs-url{display:inline-flex;align-items:center;gap:calc(.3cqw + 3px);height:calc(1.4cqw + 8px);margin-left:calc(2cqw + 8px);padding:0 calc(1cqw + 6px);border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #E5E7EB;font:400 calc(.75cqw + 5px)/1 "Inter","Inter Tight",system-ui,sans-serif;color:#717989;white-space:nowrap}
#op-case-coldsend .cs-url svg{width:calc(.7cqw + 5px);height:calc(.7cqw + 5px)}
#op-case-coldsend .cs-win>.cs-scr{flex:1 1 auto;min-height:0;height:auto}

#op-case-coldsend .cs-bar{position:relative;z-index:2}
#op-case-coldsend .cs-win::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;border-top:calc(.25cqw + 3px) solid #0E0E10;border-left:calc(.25cqw + 3px) solid #0E0E10;box-shadow:inset 0 0 0 1px #2B2B30}
#op-case-coldsend .cs-win::before{z-index:5}

/* screen A — Linear-style hero: the whole app visible inside a complete device frame */
@media (min-width:601px){
#op-case-coldsend .cs-a .cs-win{--cw:90cqw;--cx:5cqw;--cy:4.4cqw;aspect-ratio:auto;height:43cqw;border-radius:calc(1.6cqw + 6px);padding:calc(.25cqw + 3px)}
#op-case-coldsend .cs-a .cs-win::after{border:calc(.25cqw + 3px) solid #0E0E10}
#op-case-coldsend .cs-a .cs-win::before{right:calc(.25cqw + 3px);bottom:calc(.25cqw + 3px);border-radius:calc(1.3cqw + 3px)}
#op-case-coldsend .cs-a .cs-bar{border-radius:calc(1.3cqw + 3px) calc(1.3cqw + 3px) 0 0}
#op-case-coldsend .cs-a .cs-scr{border-radius:0 0 calc(1.3cqw + 3px) calc(1.3cqw + 3px)}
}
#op-case-coldsend .a4f{flex:1 1 auto}

/* ===== ColdSend v7 — real product screens (Figma 8gTiiMLu52Eeg9c5z2ufvb), Zade Visuals styling ===== */
#op-case-coldsend .s7{position:relative;font-family:"Inter","Inter Tight",system-ui,sans-serif;color:#181B26;letter-spacing:-.006em}
#op-case-coldsend .s7 svg{display:block}
#op-case-coldsend .s7-main{flex:1;min-width:0;position:relative;padding:calc(20*var(--w)) calc(28*var(--w))}
#op-case-coldsend .s7-pg{display:block;background:#F6F6F7}
/* shared atoms */
#op-case-coldsend .s7-chip{display:inline-flex;align-items:center;gap:calc(5*var(--w));height:calc(22*var(--w));padding:0 calc(8*var(--w));border-radius:calc(6*var(--w));font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;white-space:nowrap;transition:background-color .35s ease,color .35s ease}
#op-case-coldsend .s7-chip u,#op-case-coldsend .s7-chip s{text-decoration:none}
#op-case-coldsend .s7-chip s{display:none;align-items:center;gap:calc(4*var(--w))}
#op-case-coldsend .s7-chip s svg{width:calc(11*var(--w));height:calc(11*var(--w))}
#op-case-coldsend .s7-chip.ok{background:#46B72B;color:#fff}
#op-case-coldsend .s7-chip.wu{background:#F1F1F3;color:#555B68}
#op-case-coldsend .s7-chip.fail{background:#E5484D;color:#fff}
#op-case-coldsend .s7-chip.done{background:#46B72B;color:#fff}
#op-case-coldsend .s7-chip.done u,#op-case-coldsend .s7-chip.done .s7-sp{display:none}
#op-case-coldsend .s7-chip.done s{display:inline-flex}
#op-case-coldsend .s7-sp{display:block;width:calc(10*var(--w));height:calc(10*var(--w));border-radius:50%;border:1.5px solid rgba(85,91,104,.25);border-top-color:#555B68;animation:b4sp .8s linear infinite;flex:0 0 auto}
#op-case-coldsend .s7-help{display:inline-flex;align-items:center;gap:calc(6*var(--w));height:calc(28*var(--w));padding:0 calc(11*var(--w));border-radius:99px;box-shadow:inset 0 0 0 1px #E5E7EB;font:500 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#3E434E;white-space:nowrap}
#op-case-coldsend .s7-help svg{width:calc(13*var(--w));height:calc(13*var(--w))}
#op-case-coldsend .s7-back{display:grid;place-items:center;width:calc(30*var(--w));height:calc(30*var(--w));border-radius:50%;background:#F1F1F3;color:#3E434E;flex:0 0 auto}
#op-case-coldsend .s7-back svg{width:calc(15*var(--w));height:calc(15*var(--w))}
#op-case-coldsend .s7-cur{position:absolute;left:0;top:0;z-index:30;width:calc(20*var(--w));height:calc(20*var(--w));filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));opacity:0;pointer-events:none;transition:translate .8s cubic-bezier(.4,0,.2,1),opacity .3s ease,scale .15s ease}
#op-case-coldsend .cv .s7-cur{opacity:1}
#op-case-coldsend .s7-cur.press{scale:.8}
#op-case-coldsend .s7 .press{scale:.97}
#op-case-coldsend .s7-num{font-variant-numeric:tabular-nums}

/* ----- A: statistics ----- */
#op-case-coldsend .s7-hd{display:flex;align-items:center;gap:calc(12*var(--w));height:calc(44*var(--w))}
#op-case-coldsend .s7-tt b{display:block;font:600 calc(17*var(--w))/1.1 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em}
#op-case-coldsend .s7-tt em{display:block;margin-top:calc(3*var(--w));font:400 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989}
#op-case-coldsend .s7-hd .s7-help{margin-left:auto}
#op-case-coldsend .s7-tabs{position:relative;display:flex;gap:calc(22*var(--w));margin:calc(8*var(--w)) 0 calc(14*var(--w));border-bottom:1px solid #EAECF1}
#op-case-coldsend .s7-tabs span{padding:calc(10*var(--w)) calc(2*var(--w)) calc(11*var(--w));font:500 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#717989;transition:color .3s ease;white-space:nowrap}
#op-case-coldsend .s7-tabs .t0{color:#1F78F5}
#op-case-coldsend .s7a.on .s7-tabs .t0{color:#717989}
#op-case-coldsend .s7a.on .s7-tabs .t1{color:#1F78F5}
#op-case-coldsend .s7-ul{position:absolute;bottom:-1px;left:0;height:2px;width:calc(62*var(--w));background:#1F78F5;border-radius:2px;transition:translate .5s cubic-bezier(.3,1.4,.5,1),width .5s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .s7a.on .s7-ul{translate:calc(86*var(--w)) 0;width:calc(62*var(--w))}
#op-case-coldsend .s7-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(12*var(--w))}
#op-case-coldsend .s7-k,#op-case-coldsend .s7-c{position:relative;border-radius:calc(12*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #EAECF1;padding:calc(14*var(--w)) calc(16*var(--w))}
#op-case-coldsend .s7-k p,#op-case-coldsend .s7-c p{display:flex;align-items:center;justify-content:space-between;margin:0;font:500 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#555B68}
#op-case-coldsend .s7-k p svg{width:calc(15*var(--w));height:calc(15*var(--w));color:#3E434E}
#op-case-coldsend .s7-c p{justify-content:flex-start;gap:calc(7*var(--w))}
#op-case-coldsend .s7-c p i{width:calc(10*var(--w));height:calc(3*var(--w));border-radius:2px}
#op-case-coldsend .s7-k b{display:block;margin-top:calc(10*var(--w));font:600 calc(22*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.02em}
#op-case-coldsend .s7-k em{display:block;margin-top:calc(7*var(--w));font:400 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989;white-space:nowrap}
#op-case-coldsend .s7-k em s{text-decoration:none;color:#2E9E5B;font-weight:500}
#op-case-coldsend .s7-cv{display:flex;align-items:baseline;gap:calc(8*var(--w));margin-top:calc(9*var(--w))}
#op-case-coldsend .s7-cv b{font:600 calc(24*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.02em}
#op-case-coldsend .s7-cv em{font:400 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989}
#op-case-coldsend .s7-cw{position:relative;height:calc(84*var(--w));margin-top:calc(12*var(--w));background:repeating-linear-gradient(180deg,transparent 0 calc(25% - 1px),#F1F1F3 calc(25% - 1px) 25%)}
#op-case-coldsend .s7-ch{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.5,0,.2,1)}
#op-case-coldsend .s7-ch .ln{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#op-case-coldsend .s7a.on .s7-ch{clip-path:inset(0 0 0 0)}
#op-case-coldsend .s7a.on .c2 .s7-ch{transition-delay:.25s}
#op-case-coldsend .s7a.on .c3 .s7-ch{transition-delay:.5s}
#op-case-coldsend .s7a .s7-k,#op-case-coldsend .s7a .s7-c{transition:opacity .4s ease}
#op-case-coldsend .s7a:not(.on) .s7-num{color:transparent;background:#F1F1F3;border-radius:calc(5*var(--w))}
#op-case-coldsend .s7-pt{position:absolute;width:calc(10*var(--w));height:calc(10*var(--w));margin:calc(-5*var(--w)) 0 0 calc(-5*var(--w));border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--c);opacity:0;scale:.4;transition:opacity .25s ease,scale .35s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .s7-tip{position:absolute;translate:-50% calc(-100% - 12*var(--w));padding:calc(6*var(--w)) calc(9*var(--w));border-radius:calc(7*var(--w));background:#181B26;color:rgba(255,255,255,.75);font:400 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .25s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .s7-tip b{color:#fff;font-weight:600}
#op-case-coldsend .s7a.tip .s7-pt{opacity:1;scale:1}
#op-case-coldsend .s7a.tip .s7-tip{opacity:1;translate:-50% calc(-100% - 16*var(--w))}

/* ----- B: setup ----- */
#op-case-coldsend .s7-topb{display:flex;align-items:center;gap:calc(6*var(--w));height:calc(40*var(--w));padding:0 calc(20*var(--w));background:#fff;border-bottom:1px solid #EAECF1;font:500 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#181B26}
#op-case-coldsend .s7-topb svg{width:calc(15*var(--w));height:calc(15*var(--w))}
#op-case-coldsend .s7-card{position:relative;margin:calc(16*var(--w)) 0 0 calc(24*var(--w));width:calc(486*var(--w));border-radius:calc(14*var(--w));background:#fff;box-shadow:0 0 0 1px #EAECF1,0 calc(6*var(--w)) calc(20*var(--w)) rgba(20,24,40,.05)}
#op-case-coldsend .b7{padding:calc(16*var(--w)) calc(18*var(--w))}
#op-case-coldsend .b7-h{display:flex;align-items:center;gap:calc(10*var(--w))}
#op-case-coldsend .b7-h b{font:600 calc(16*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em}
#op-case-coldsend .b7-st{display:flex;align-items:flex-start;margin:calc(18*var(--w)) 0 calc(16*var(--w))}
#op-case-coldsend .b7-s{flex:0 0 calc(96*var(--w));display:flex;flex-direction:column;align-items:center;gap:calc(7*var(--w))}
#op-case-coldsend .b7-s i{display:grid;place-items:center;width:calc(28*var(--w));height:calc(28*var(--w));border-radius:50%;box-shadow:inset 0 0 0 1.5px #D9DCE2;color:#717989;background:#fff;transition:all .4s ease}
#op-case-coldsend .b7-s i svg{width:calc(14*var(--w));height:calc(14*var(--w))}
#op-case-coldsend .b7-s em{font:500 calc(11*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#717989;white-space:nowrap;transition:color .3s ease}
#op-case-coldsend .b7-s.cur i{box-shadow:inset 0 0 0 1.5px #1F78F5,0 0 0 calc(4*var(--w)) rgba(31,120,245,.14);color:#1F78F5}
#op-case-coldsend .b7-s.cur em{color:#1F78F5}
#op-case-coldsend .b7-s.done i{box-shadow:inset 0 0 0 1.5px #1F78F5;background:#1F78F5;color:#fff}
#op-case-coldsend .b7-ln{flex:1;height:1.5px;margin:calc(14*var(--w)) calc(-34*var(--w)) 0;background:#E5E7EB;position:relative;overflow:hidden}
#op-case-coldsend .b7-ln u{position:absolute;inset:0;background:#1F78F5;transform-origin:left;scale:0 1;transition:scale .8s cubic-bezier(.5,0,.2,1)}
#op-case-coldsend .b7-ln.l1 u,#op-case-coldsend .s7b.st3 .b7-ln.l2 u{scale:1 1}
#op-case-coldsend .b7-lb{margin:0 0 calc(8*var(--w));font:600 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .b7-op{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8*var(--w))}
#op-case-coldsend .b7-op span{display:flex;align-items:center;gap:calc(7*var(--w));height:calc(38*var(--w));padding:0 calc(9*var(--w));border-radius:calc(9*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;color:#3E434E;transition:box-shadow .3s ease,background-color .3s ease,scale .15s ease}
#op-case-coldsend .b7-op span svg{width:calc(15*var(--w));height:calc(15*var(--w));flex:0 0 auto}
#op-case-coldsend .b7-op span svg:last-child{width:calc(12*var(--w));height:calc(12*var(--w));margin-left:auto;color:#A0A6B1}
#op-case-coldsend .b7-op b{font:500 calc(12*var(--w))/1.1 "Inter","Inter Tight",system-ui,sans-serif;white-space:nowrap}
#op-case-coldsend .b7-op span.act{box-shadow:inset 0 0 0 1.5px #1F78F5;background:#EEF8FF;color:#1F78F5}
#op-case-coldsend .b7-sh{margin:calc(16*var(--w)) 0 calc(8*var(--w));padding-top:calc(14*var(--w));border-top:1px solid #F1F1F3}
#op-case-coldsend .b7-sh b{font:600 calc(13*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .b7-sh u{text-decoration:none;font-variant-numeric:tabular-nums}
#op-case-coldsend .b7-list{position:relative;display:flex;flex-direction:column;gap:calc(6*var(--w));min-height:calc(120*var(--w))}
#op-case-coldsend .b7-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8*var(--w));border-radius:calc(10*var(--w));box-shadow:inset 0 0 0 1px #F1F1F3;color:#717989;transition:opacity .3s ease}
#op-case-coldsend .b7-empty svg{width:calc(20*var(--w));height:calc(20*var(--w))}
#op-case-coldsend .b7-empty b{font:500 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .s7b.n1 .b7-empty{opacity:0}
#op-case-coldsend .b7-r{display:flex;align-items:center;gap:calc(10*var(--w));height:calc(36*var(--w));padding:0 calc(10*var(--w));border-radius:calc(9*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #EAECF1;opacity:0;translate:0 calc(8*var(--w));transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .b7-r.in{opacity:1;translate:0 0}
#op-case-coldsend .b7-ic{display:grid;place-items:center;width:calc(22*var(--w));height:calc(22*var(--w));border-radius:calc(6*var(--w));background:#EEF8FF;color:#1F78F5}
#op-case-coldsend .b7-ic svg{width:calc(12*var(--w));height:calc(12*var(--w))}
#op-case-coldsend .b7-r b{flex:1;font:500 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}

/* ----- C: buy a domain ----- */
#op-case-coldsend .s7c .s7-card{margin-top:calc(20*var(--w))}
#op-case-coldsend .c7{padding:0}
#op-case-coldsend .c7-h{display:flex;align-items:center;gap:calc(10*var(--w));height:calc(48*var(--w));padding:0 calc(16*var(--w));border-bottom:1px solid #F1F1F3}
#op-case-coldsend .s7-back.sm{width:calc(24*var(--w));height:calc(24*var(--w));background:none}
#op-case-coldsend .c7-h b{font:600 calc(15*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em}
#op-case-coldsend .c7-x{margin-left:auto;color:#717989}
#op-case-coldsend .c7-x svg{width:calc(15*var(--w));height:calc(15*var(--w))}
#op-case-coldsend .c7-st{display:flex;align-items:center;gap:calc(8*var(--w));padding:calc(12*var(--w)) calc(16*var(--w))}
#op-case-coldsend .c7-st span{display:inline-flex;align-items:center;gap:calc(6*var(--w));font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#A0A6B1;white-space:nowrap}
#op-case-coldsend .c7-st span i{display:grid;place-items:center;width:calc(18*var(--w));height:calc(18*var(--w));border-radius:50%;box-shadow:inset 0 0 0 1px #D9DCE2;font:600 calc(10*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal}
#op-case-coldsend .c7-st span.on{color:#1F78F5}
#op-case-coldsend .c7-st span.on i{background:#1F78F5;color:#fff;box-shadow:none}
#op-case-coldsend .c7-st .ln{flex:1;height:1px;background:#E5E7EB}
#op-case-coldsend .c7-cols{display:grid;grid-template-columns:1fr calc(186*var(--w));gap:calc(12*var(--w));padding:0 calc(16*var(--w)) calc(16*var(--w))}
#op-case-coldsend .c7-l p,#op-case-coldsend .c7-cart p{display:flex;align-items:center;justify-content:space-between;margin:0 0 calc(10*var(--w));font:600 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;height:calc(26*var(--w))}
#op-case-coldsend .c7-gen{display:inline-flex;align-items:center;gap:calc(5*var(--w));height:calc(26*var(--w));padding:0 calc(9*var(--w));border-radius:calc(7*var(--w));background:linear-gradient(180deg,#428EFF,#1A75FF);color:#fff;font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .c7-gen svg{width:calc(12*var(--w));height:calc(12*var(--w))}
#op-case-coldsend .c7-r{display:flex;gap:calc(6*var(--w));margin-bottom:calc(7*var(--w))}
#op-case-coldsend .c7-in{position:relative;flex:1;display:flex;align-items:center;height:calc(34*var(--w));padding:0 calc(10*var(--w));border-radius:calc(8*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;font:400 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#181B26;transition:box-shadow .25s ease}
#op-case-coldsend .c7-in .ph{position:absolute;left:calc(10*var(--w));font-style:normal;color:#A0A6B1;transition:opacity .15s ease}
#op-case-coldsend .c7-in u{text-decoration:none;white-space:nowrap}
#op-case-coldsend .c7-in .cr{width:1px;height:calc(14*var(--w));margin-left:1px;background:#1F78F5;opacity:0}
#op-case-coldsend .c7-r.ty .c7-in{box-shadow:inset 0 0 0 1.5px #1F78F5,0 0 0 calc(3*var(--w)) rgba(31,120,245,.12)}
#op-case-coldsend .c7-r.ty .c7-in .cr{opacity:1;animation:c7bl .9s steps(1) infinite}
@keyframes c7bl{50%{opacity:0}}
#op-case-coldsend .c7-r.has .ph{opacity:0}
#op-case-coldsend .c7-b{position:relative;display:grid;flex:0 0 calc(108*var(--w));height:calc(34*var(--w));border-radius:calc(8*var(--w));box-shadow:inset 0 0 0 1px #CFE0FB;color:#1F78F5;font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;overflow:hidden;transition:box-shadow .3s ease,background-color .3s ease,color .3s ease,scale .15s ease}
#op-case-coldsend .c7-b u{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:calc(4*var(--w));text-decoration:none;white-space:nowrap;opacity:0;translate:0 40%;transition:opacity .25s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .c7-b u svg{width:calc(12*var(--w));height:calc(12*var(--w))}
#op-case-coldsend .c7-r:not(.sb):not(.sc):not(.sd):not(.se) .c7-b .a,#op-case-coldsend .c7-r.sb .c7-b .b,#op-case-coldsend .c7-r.sc .c7-b .c,#op-case-coldsend .c7-r.sd .c7-b .d,#op-case-coldsend .c7-r.se .c7-b .e{opacity:1;translate:0 0}
#op-case-coldsend .c7-r.sc .c7-b{box-shadow:inset 0 0 0 1px #9CD98D;color:#2E9E5B}
#op-case-coldsend .c7-r.sd .c7-b{box-shadow:inset 0 0 0 1px #F5C2C3;color:#D93A3F;background:#FFF6F6}
#op-case-coldsend .c7-r.se .c7-b{background:#46B72B;box-shadow:none;color:#fff}
#op-case-coldsend .c7-r .s7-sp{border-color:rgba(31,120,245,.25);border-top-color:#1F78F5}
#op-case-coldsend .c7-cart{display:flex;flex-direction:column;padding:calc(12*var(--w));border-radius:calc(10*var(--w));box-shadow:inset 0 0 0 1px #EAECF1;background:#FCFCFD}
#op-case-coldsend .c7-cart p{margin-bottom:calc(8*var(--w));height:auto}
#op-case-coldsend .c7-cart p u{text-decoration:none;font-variant-numeric:tabular-nums}
#op-case-coldsend .c7-items{position:relative;flex:1;min-height:calc(78*var(--w));display:flex;flex-direction:column;gap:calc(6*var(--w))}
#op-case-coldsend .c7-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6*var(--w));color:#A0A6B1;font:500 calc(11*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;transition:opacity .3s ease}
#op-case-coldsend .c7-empty svg{width:calc(18*var(--w));height:calc(18*var(--w))}
#op-case-coldsend .s7c.n1 .c7-empty{opacity:0}
#op-case-coldsend .c7-it{display:flex;align-items:center;justify-content:space-between;height:calc(30*var(--w));padding:0 calc(9*var(--w));border-radius:calc(7*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #EAECF1;opacity:0;translate:calc(-14*var(--w)) 0;scale:.96;transition:opacity .35s ease,translate .5s cubic-bezier(.3,1.4,.5,1),scale .5s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .c7-it.in{opacity:1;translate:0 0;scale:1}
#op-case-coldsend .c7-it b{font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .c7-it em{font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal;color:#555B68;font-variant-numeric:tabular-nums}
#op-case-coldsend .c7-tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:calc(10*var(--w));padding-top:calc(10*var(--w));border-top:1px solid #EAECF1;font:500 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#717989}
#op-case-coldsend .c7-tot b{font:600 calc(17*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#181B26;font-variant-numeric:tabular-nums}
#op-case-coldsend .c7-go{display:grid;place-items:center;height:calc(32*var(--w));margin-top:calc(10*var(--w));border-radius:calc(8*var(--w));background:#BFD8FB;color:#fff;font:500 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;transition:background .4s ease,box-shadow .4s ease}
#op-case-coldsend .s7c.rdy .c7-go{background:linear-gradient(180deg,#428EFF,#1A75FF);box-shadow:0 calc(2*var(--w)) calc(6*var(--w)) rgba(31,120,245,.25)}

/* ----- D: servers ----- */
#op-case-coldsend .d7-h b{font:600 calc(19*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em}
#op-case-coldsend .d7-h u{text-decoration:none;font-variant-numeric:tabular-nums}
#op-case-coldsend .d7-tb{display:flex;align-items:center;gap:calc(10*var(--w));margin:calc(18*var(--w)) 0 calc(14*var(--w))}
#op-case-coldsend .d7-se{display:flex;align-items:center;gap:calc(8*var(--w));width:calc(220*var(--w));height:calc(32*var(--w));padding:0 calc(11*var(--w));border-radius:calc(8*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;font:400 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#A0A6B1}
#op-case-coldsend .d7-se svg{width:calc(14*var(--w));height:calc(14*var(--w));color:#555B68}
#op-case-coldsend .d7-fl{display:inline-flex;align-items:center;gap:calc(6*var(--w));margin-left:auto;height:calc(32*var(--w));padding:0 calc(12*var(--w));border-radius:calc(8*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;font:500 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;white-space:nowrap}
#op-case-coldsend .d7-fl svg{width:calc(12*var(--w));height:calc(12*var(--w))}
#op-case-coldsend .d7-buy{display:inline-flex;align-items:center;gap:calc(8*var(--w));height:calc(32*var(--w));padding:0 calc(14*var(--w));border-radius:calc(8*var(--w));background:linear-gradient(180deg,#428EFF,#1A75FF);box-shadow:0 calc(2*var(--w)) calc(6*var(--w)) rgba(31,120,245,.25);color:#fff;font:500 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;white-space:nowrap;transition:scale .15s ease}
#op-case-coldsend .d7-buy i{font-style:normal;font-size:calc(15*var(--w))}
#op-case-coldsend .d7-th,#op-case-coldsend .d7-r{display:grid;grid-template-columns:calc(170*var(--w)) calc(112*var(--w)) calc(196*var(--w)) calc(124*var(--w)) calc(112*var(--w)) 1fr calc(30*var(--w));align-items:center;padding:0 calc(14*var(--w))}
#op-case-coldsend .d7-th{height:calc(28*var(--w));font:500 calc(10.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#8A90A0}
#op-case-coldsend .d7-rows{display:flex;flex-direction:column;gap:calc(6*var(--w))}
#op-case-coldsend .d7-r{height:calc(44*var(--w));border-radius:calc(10*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #EAECF1;font:400 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#555B68;transition:background-color .6s ease,box-shadow .6s ease}
#op-case-coldsend .d7-r>b{font:600 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#181B26;white-space:nowrap}
#op-case-coldsend .d7-r .s7-chip{justify-self:start}
#op-case-coldsend .d7-dm,#op-case-coldsend .d7-sd{display:inline-flex;align-items:center;gap:calc(6*var(--w));white-space:nowrap}
#op-case-coldsend .d7-dm svg{width:calc(12*var(--w));height:calc(12*var(--w));color:#A0A6B1}
#op-case-coldsend .d7-sd{color:#1F78F5;font-weight:500}
#op-case-coldsend .d7-sd svg{width:calc(12*var(--w));height:calc(12*var(--w))}
#op-case-coldsend .d7-mo svg{width:calc(16*var(--w));height:calc(16*var(--w));color:#3E434E}
#op-case-coldsend .d7-r.nw{display:none;opacity:0;translate:0 calc(-10*var(--w));background:#F5F9FF;box-shadow:inset 0 0 0 1px #CFE0FB;transition:opacity .45s ease,translate .5s cubic-bezier(.2,.8,.2,1),background-color 1s ease,box-shadow 1s ease}
#op-case-coldsend .s7d.nw0 .d7-r.nw{display:grid}
#op-case-coldsend .s7d.nw1 .d7-r.nw{opacity:1;translate:0 0}
#op-case-coldsend .s7d.nw2 .d7-r.nw{background:#fff;box-shadow:inset 0 0 0 1px #EAECF1}
#op-case-coldsend .d7-st.ok u,#op-case-coldsend .d7-st.ok .s7-sp{display:none}
#op-case-coldsend .d7-st.ok s{display:inline}
#op-case-coldsend .d7-ov{position:absolute;inset:0;z-index:10;background:rgba(24,27,38,.28);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s ease}
#op-case-coldsend .d7-md{position:absolute;left:var(--mx,50%);top:var(--my,50%);z-index:11;width:calc(320*var(--w));padding:calc(22*var(--w)) calc(22*var(--w)) calc(18*var(--w));border-radius:calc(14*var(--w));background:#fff;box-shadow:0 calc(20*var(--w)) calc(50*var(--w)) rgba(20,24,40,.25);text-align:center;translate:-50% -46%;scale:.94;opacity:0;pointer-events:none;transition:opacity .3s ease,translate .5s cubic-bezier(.3,1.4,.5,1),scale .5s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .s7d.md .d7-ov{opacity:1}
#op-case-coldsend .s7d.md .d7-md{opacity:1;translate:-50% -50%;scale:1}
#op-case-coldsend .d7-ok{display:grid;place-items:center;width:calc(40*var(--w));height:calc(40*var(--w));margin:0 auto calc(12*var(--w));border-radius:50%;background:#46B72B;color:#fff;box-shadow:0 0 0 calc(6*var(--w)) rgba(70,183,43,.14)}
#op-case-coldsend .d7-ok svg{width:calc(20*var(--w));height:calc(20*var(--w));stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s ease .25s}
#op-case-coldsend .s7d.md .d7-ok svg{stroke-dashoffset:0}
#op-case-coldsend .d7-md>b{display:block;font:600 calc(16*var(--w))/1.2 "Inter","Inter Tight",system-ui,sans-serif;letter-spacing:-.015em}
#op-case-coldsend .d7-md p{margin:calc(7*var(--w)) 0 calc(16*var(--w));font:400 calc(12.5*var(--w))/1.45 "Inter","Inter Tight",system-ui,sans-serif;color:#717989}
#op-case-coldsend .d7-bt{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--w))}
#op-case-coldsend .d7-bt span{display:grid;place-items:center;height:calc(34*var(--w));border-radius:calc(8*var(--w));font:500 calc(12.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;transition:scale .15s ease}
#op-case-coldsend .d7-cl{box-shadow:inset 0 0 0 1px #CFE0FB;color:#1F78F5}
#op-case-coldsend .d7-cr{background:linear-gradient(180deg,#428EFF,#1A75FF);color:#fff}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .s7 *{transition:none!important;animation:none!important}}

#op-case-coldsend .s7-tip{translate:-82% calc(-100% - 12*var(--w))}
#op-case-coldsend .s7a.tip .s7-tip{translate:-82% calc(-100% - 16*var(--w))}
#op-case-coldsend .s7-c.c1{z-index:2}

#op-case-coldsend .c7-in .ph{font:400 calc(12*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;white-space:nowrap;top:50%;translate:0 -50%}
#op-case-coldsend .c7-it{gap:calc(8*var(--w))}
#op-case-coldsend .c7-it b{font-size:calc(11*var(--w));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#op-case-coldsend .c7-it em{flex:0 0 auto;font-size:calc(11*var(--w))}
#op-case-coldsend .s7 .s7-chip.wu.done{background:#46B72B;color:#fff}
#op-case-coldsend .s7 em{font-style:normal}

#op-case-coldsend .s7>.s7-main,#op-case-coldsend .s7>.s7-card,#op-case-coldsend .s7>.s7-topb+.s7-card{transition:opacity .55s ease}
#op-case-coldsend .s7.rs>.s7-main,#op-case-coldsend .s7.rs>.s7-card{opacity:0}

/* hero: natural 16:10 laptop screen; extra full-width Bounce rate chart fills the taller screen */
@media (min-width:601px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:772/482}
#op-case-coldsend .cs-a .cs-win{--cw:84cqw;--cx:8cqw;--cy:5cqw;height:52.5cqw}
}
#op-case-coldsend .s7-c.c4{grid-column:1/-1}
#op-case-coldsend .s7-c.c4 .s7-cw{height:calc(72*var(--w))}
#op-case-coldsend .s7a.on .c4 .s7-ch{transition-delay:.7s}

#op-case-coldsend .s7-c.c4 .s7-cw{height:calc(50*var(--w));margin-top:calc(8*var(--w))}
#op-case-coldsend .s7a .s7-main{padding-top:calc(14*var(--w))}
#op-case-coldsend .s7a .s7-tabs{margin-bottom:calc(12*var(--w))}
#op-case-coldsend .s7a .s7-grid{gap:calc(10*var(--w))}

/* ===== hero UI polish ===== */
#op-case-coldsend .s7a{background:#FAFAFB}
#op-case-coldsend .s7-rail{flex:0 0 calc(56*var(--w));display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--w));padding:calc(14*var(--w)) 0;background:#fff;border-right:1px solid #EEF0F3}
#op-case-coldsend .s7-rail .if-brand{width:calc(28*var(--w));height:calc(28*var(--w));margin-bottom:calc(10*var(--w))}
#op-case-coldsend .s7-rail .if-brand circle{fill:#1F78F5}
#op-case-coldsend .s7-rail>i{display:grid;place-items:center;width:calc(34*var(--w));height:calc(34*var(--w));border-radius:calc(9*var(--w));color:#717989}
#op-case-coldsend .s7-rail>i svg{width:calc(17*var(--w));height:calc(17*var(--w))}
#op-case-coldsend .s7-rail>i.on{background:#EEF4FF;color:#1F78F5}
#op-case-coldsend .s7-rail>i.pl{box-shadow:inset 0 0 0 1px #CFE0FB;color:#1F78F5}
#op-case-coldsend .s7-rail .sp{flex:1}
#op-case-coldsend .s7-rail .av{display:grid;place-items:center;width:calc(26*var(--w));height:calc(26*var(--w));border-radius:50%;background:#181B26;color:#fff;font:600 calc(11*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .s7-soft{display:inline-flex;align-items:center;gap:calc(6*var(--w));height:calc(22*var(--w));padding:0 calc(9*var(--w));border-radius:99px;background:#ECF8EE;color:#2E9E5B;font:500 calc(11.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .s7-soft i{width:calc(6*var(--w));height:calc(6*var(--w));border-radius:50%;background:#46B72B;box-shadow:0 0 0 calc(3*var(--w)) rgba(70,183,43,.18)}
#op-case-coldsend .s7-tabs span i{display:inline-grid;place-items:center;min-width:calc(18*var(--w));height:calc(17*var(--w));margin-left:calc(6*var(--w));padding:0 calc(4*var(--w));border-radius:99px;background:#F1F1F3;color:#717989;font:500 calc(10.5*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;font-style:normal}
#op-case-coldsend .s7a .s7-k,#op-case-coldsend .s7a .s7-c{background:#fff;box-shadow:0 0 0 1px #EEF0F3,0 1px 2px rgba(16,24,40,.04);border-radius:calc(12*var(--w))}
#op-case-coldsend .s7-k .ki{display:grid;place-items:center;width:calc(26*var(--w));height:calc(26*var(--w));border-radius:calc(7*var(--w));background:#F4F6FA;color:#555B68}
#op-case-coldsend .s7-k .ki svg{width:calc(14*var(--w));height:calc(14*var(--w))}
#op-case-coldsend .s7-k p,#op-case-coldsend .s7-c p{font-weight:500;color:#717989}
#op-case-coldsend .s7-k b{margin-top:calc(6*var(--w));font-size:calc(24*var(--w))}
#op-case-coldsend .s7-k em s{display:inline-flex;align-items:center;height:calc(18*var(--w));margin-right:calc(5*var(--w));padding:0 calc(6*var(--w));border-radius:99px;background:#ECF8EE}
#op-case-coldsend .s7-cv b span{font:inherit}
#op-case-coldsend .s7-cw{background:repeating-linear-gradient(180deg,transparent 0 calc(33.33% - 1px),#F1F2F5 calc(33.33% - 1px) 33.33%)}
#op-case-coldsend .s7-ch .ln{stroke-width:2}
#op-case-coldsend .s7-xl{display:flex;justify-content:space-between;margin-top:calc(6*var(--w));font:400 calc(10*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#A0A6B1}
#op-case-coldsend .s7-end{position:absolute;width:calc(8*var(--w));height:calc(8*var(--w));margin:calc(-4*var(--w)) 0 0 calc(-4*var(--w));border-radius:50%;background:var(--c);box-shadow:0 0 0 calc(3*var(--w)) #fff;opacity:0;transition:opacity .3s ease}
#op-case-coldsend .s7-end::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);animation:a4lv 1.8s ease-out infinite}
#op-case-coldsend .s7a.on .s7-end{opacity:1;transition-delay:1.5s}
#op-case-coldsend .s7a.on .c2 .s7-end{transition-delay:1.75s}
#op-case-coldsend .s7a.on .c3 .s7-end{transition-delay:2s}
#op-case-coldsend .s7a.on .c4 .s7-end{transition-delay:2.2s}
#op-case-coldsend .s7-c.c4 .s7-cv{align-items:center}
#op-case-coldsend .s7-good{margin-left:auto;display:inline-flex;align-items:center;height:calc(20*var(--w));padding:0 calc(8*var(--w));border-radius:99px;background:#ECF8EE;color:#2E9E5B;font:500 calc(11*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif}
#op-case-coldsend .s7-c.c4 .s7-cw{height:calc(54*var(--w))}
#op-case-coldsend .s7-lim{position:absolute;left:0;right:0;top:23.7%;border-top:1px dashed #F0A3A5;z-index:1}
#op-case-coldsend .s7-lim em{position:absolute;right:0;top:calc(-15*var(--w));font:500 calc(10*var(--w))/1 "Inter","Inter Tight",system-ui,sans-serif;color:#E5484D;font-style:normal}

/* ===== ColdSend hero h8 — floating product UI, Figma Zade Visuals 2652:164176 ===== */
#op-case-coldsend .s7,#op-case-coldsend .s7 *{font-family:"Inter",system-ui,sans-serif!important}
#op-case-coldsend .cs-row .cs-a{aspect-ratio:1008/696}
#op-case-coldsend .cs-a>.h8{position:absolute;inset:0;z-index:1;height:auto;display:block;background:transparent;overflow:hidden;--u:calc(100cqw/1008);color:#181B26;letter-spacing:-.01em}
#op-case-coldsend .h8-gh{position:absolute;border-radius:calc(12*var(--u));background:#F3F3F4;box-shadow:inset 0 0 0 1px #E5E7EB,0 calc(8*var(--u)) calc(24*var(--u)) rgba(149,157,165,.12);opacity:.6}
#op-case-coldsend .h8-wrap{position:absolute;left:calc(60*var(--u));top:calc(51*var(--u));width:calc(888*var(--u));height:calc(592*var(--u));display:flex;gap:calc(8*var(--u))}
#op-case-coldsend .h8-p{background:#fff;border-radius:calc(12*var(--u));box-shadow:inset 0 0 0 1px #F0F0F3,1px 1px 1px rgba(0,0,0,.02);opacity:0;translate:0 calc(14*var(--u));transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .h8.in .h8-p{opacity:1;translate:0 0}
#op-case-coldsend .h8.in .h8-bar{transition-delay:.06s}
#op-case-coldsend .h8.in .k1{transition-delay:.12s}
#op-case-coldsend .h8.in .k2{transition-delay:.18s}
#op-case-coldsend .h8.in .k3{transition-delay:.24s}
#op-case-coldsend .h8.in .h8-dom{transition-delay:.3s}
/* sidebar */
#op-case-coldsend .h8-side{flex:0 0 calc(52*var(--u));display:flex;flex-direction:column;align-items:center;padding:calc(12*var(--u)) 0 calc(8*var(--u))}
#op-case-coldsend .h8-side .if-brand{width:calc(28*var(--u));height:calc(28*var(--u));margin:0 0 calc(16*var(--u))}
#op-case-coldsend .h8-side .if-brand circle{fill:#1F78F5}
#op-case-coldsend .h8-nav{display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u))}
#op-case-coldsend .h8-nav.bt{margin-top:auto}
#op-case-coldsend .h8-nav i{display:grid;place-items:center;width:calc(36*var(--u));height:calc(36*var(--u));border-radius:calc(9*var(--u));color:#484F5C}
#op-case-coldsend .h8-nav i svg{width:calc(15*var(--u));height:calc(15*var(--u))}
#op-case-coldsend .h8-nav i.on{background:#EEF8FF;color:#1F78F5}
#op-case-coldsend .h8-nav i.pl{box-shadow:inset 0 0 0 .75px #56B6FF;color:#1F78F5}
#op-case-coldsend .h8-sep{width:calc(36*var(--u));height:1px;margin:calc(3*var(--u)) 0;background:#F1F1F3}
#op-case-coldsend .h8-av{display:grid;place-items:center;width:calc(24*var(--u));height:calc(24*var(--u));margin:calc(6*var(--u)) 0;border-radius:50%;background:linear-gradient(135deg,#56B6FF,#1F78F5);color:#fff;font-weight:600;font-size:calc(10*var(--u))}
/* right column */
#op-case-coldsend .h8-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(8*var(--u))}
#op-case-coldsend .h8-bar{flex:0 0 calc(52*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));padding:0 calc(16*var(--u))}
#op-case-coldsend .h8-bk{display:grid;place-items:center;width:calc(28*var(--u));height:calc(28*var(--u));border-radius:50%;background:#F1F1F3;color:#3E434E}
#op-case-coldsend .h8-bk svg{width:calc(16*var(--u));height:calc(16*var(--u))}
#op-case-coldsend .h8-bar>b{font-weight:600;font-size:calc(14*var(--u));letter-spacing:-.02em}
#op-case-coldsend .h8-st{display:inline-flex;align-items:center;height:calc(18*var(--u));margin-left:calc(-4*var(--u));padding:0 calc(6.5*var(--u));border-radius:calc(4.9*var(--u));background:#08A15C;color:#fff;font-weight:600;font-size:calc(9*var(--u))}
#op-case-coldsend .h8-st u{text-decoration:none}
#op-case-coldsend .h8-help{margin-left:auto;display:inline-flex;align-items:center;gap:calc(6*var(--u));height:calc(26*var(--u));padding:0 calc(11.5*var(--u)) 0 calc(10*var(--u));border-radius:99px;box-shadow:inset 0 0 0 .75px #E5E7EB;color:#3E434E;font-weight:600;font-size:calc(10.1*var(--u))}
#op-case-coldsend .h8-help svg{width:calc(11.5*var(--u));height:calc(11.5*var(--u))}
/* charts */
#op-case-coldsend .h8-charts{flex:0 0 calc(226*var(--u));display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8*var(--u))}
#op-case-coldsend .h8-ch{position:relative;display:flex;flex-direction:column;padding:calc(16*var(--u));overflow:hidden}
#op-case-coldsend .h8-ct{display:flex;align-items:center;justify-content:space-between}
#op-case-coldsend .h8-ct p{display:flex;align-items:center;margin:0;font-weight:500;font-size:calc(13*var(--u));color:#6E7686;letter-spacing:-.02em}
#op-case-coldsend .h8-ct p i{width:calc(13.5*var(--u));height:calc(4.3*var(--u));margin-left:calc(6*var(--u));border-radius:99px}
#op-case-coldsend .h8-dt{color:#A4A7AE}
#op-case-coldsend .h8-dt svg{width:calc(18*var(--u));height:calc(18*var(--u))}
#op-case-coldsend .h8-cv{display:flex;align-items:baseline;gap:calc(8*var(--u));margin-top:calc(6*var(--u))}
#op-case-coldsend .h8-cv b{font-weight:600;font-size:calc(24*var(--u));letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#op-case-coldsend .h8-cv em{font-style:normal;font-size:calc(12*var(--u));color:#767E8E}
#op-case-coldsend .h8-plot{position:relative;flex:1;margin-top:calc(20*var(--u));display:flex;flex-direction:column;justify-content:space-between}
#op-case-coldsend .h8-plot>i{display:block;height:1px;background:#F7F7F8}
#op-case-coldsend .h8-plot svg{position:absolute;left:0;right:0;top:calc(8*var(--u));bottom:0;width:100%;height:calc(100% - 8*var(--u));overflow:visible;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.5,0,.2,1)}
#op-case-coldsend .h8-plot .ln{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#op-case-coldsend .h8.go .h8-plot svg{clip-path:inset(0 0 0 0)}
#op-case-coldsend .h8.go .k2 .h8-plot svg{transition-delay:.2s}
#op-case-coldsend .h8.go .k3 .h8-plot svg{transition-delay:.4s}
#op-case-coldsend .h8-x{display:flex;justify-content:space-around;margin-top:calc(6*var(--u));font-size:calc(10*var(--u));color:#767E8E}
/* sending domains */
#op-case-coldsend .h8-dom{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(12*var(--u));padding:calc(16*var(--u));overflow:hidden}
#op-case-coldsend .h8-dh{display:flex;align-items:center;gap:calc(12*var(--u))}
#op-case-coldsend .h8-ic{display:grid;place-items:center;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:calc(7*var(--u));background:#EEF8FF;color:#1F78F5}
#op-case-coldsend .h8-ic svg{width:calc(16*var(--u));height:calc(16*var(--u))}
#op-case-coldsend .h8-dh b{display:block;font-weight:700;font-size:calc(13*var(--u))}
#op-case-coldsend .h8-dh em{display:block;margin-top:calc(3*var(--u));font-style:normal;font-size:calc(12*var(--u));color:#717989}
#op-case-coldsend .h8-add{margin-left:auto;display:inline-flex;align-items:center;gap:calc(6*var(--u));height:calc(28*var(--u));padding:0 calc(12*var(--u));border-radius:calc(6.8*var(--u));background:#1F78F5;color:#fff;font-weight:600;font-size:calc(11*var(--u));transition:scale .15s ease,background-color .2s ease}
#op-case-coldsend .h8-add svg{width:calc(14*var(--u));height:calc(14*var(--u))}
#op-case-coldsend .h8-add.press{scale:.95;background:#115EE4}
#op-case-coldsend .h8-rows{display:flex;flex-direction:column;gap:calc(6*var(--u))}
#op-case-coldsend .h8-r{display:grid;grid-template-columns:calc(178*var(--u)) calc(146*var(--u)) calc(122*var(--u)) calc(148*var(--u)) calc(92*var(--u)) 1fr;align-items:center;height:calc(50*var(--u));padding:0 calc(20*var(--u));border-radius:calc(10*var(--u));box-shadow:inset 0 0 0 1px #F1F1F3,0 calc(3*var(--u)) calc(10*var(--u)) rgba(100,100,111,.04);font-size:calc(12*var(--u));color:#767E8E;opacity:0;translate:0 calc(8*var(--u));transition:opacity .45s ease,translate .5s cubic-bezier(.2,.8,.2,1),background-color 1s ease,box-shadow 1s ease}
#op-case-coldsend .h8.go .h8-r{opacity:1;translate:0 0}
#op-case-coldsend .h8.go .h8-r:nth-child(2){transition-delay:.35s}
#op-case-coldsend .h8.go .h8-r:nth-child(3){transition-delay:.45s}
#op-case-coldsend .h8.go .h8-r:nth-child(4){transition-delay:.55s}
#op-case-coldsend .h8.go .h8-r:nth-child(5){transition-delay:.65s}
#op-case-coldsend .h8-dn{font-weight:700;font-size:calc(12*var(--u));color:#3E434E;white-space:nowrap}
#op-case-coldsend .h8-bd{justify-self:start;display:inline-flex;align-items:center;gap:calc(4*var(--u));height:calc(20*var(--u));padding:0 calc(6.5*var(--u));border-radius:calc(4.9*var(--u));font-weight:600;font-size:calc(10*var(--u));white-space:nowrap;transition:background-color .4s ease,box-shadow .4s ease,color .4s ease}
#op-case-coldsend .h8-bd u{text-decoration:none}
#op-case-coldsend .h8-bd.ok{background:rgba(8,161,92,.06);box-shadow:inset 0 0 0 .6px rgba(8,161,92,.17);color:#06844B}
#op-case-coldsend .h8-bd.gy{background:rgba(108,116,132,.06);box-shadow:inset 0 0 0 .6px rgba(108,116,132,.17);color:#6C7484}
#op-case-coldsend .h8-bd.rd{background:rgba(204,39,26,.05);box-shadow:inset 0 0 0 .6px rgba(204,39,26,.17);color:#CC271A}
#op-case-coldsend .h8-bd.wu{background:rgba(31,120,245,.06);box-shadow:inset 0 0 0 .6px rgba(31,120,245,.2);color:#1F78F5}
#op-case-coldsend .h8-bd.wu::before{content:"";width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;border:1.3px solid rgba(31,120,245,.25);border-top-color:#1F78F5;animation:b4sp .8s linear infinite}
#op-case-coldsend .h8-hl{display:inline-flex;align-items:center;gap:calc(3*var(--u));white-space:nowrap}
#op-case-coldsend .h8-hl b{font-weight:600;color:#3E434E;font-variant-numeric:tabular-nums}
#op-case-coldsend .h8-hl i{width:calc(5*var(--u));height:calc(5*var(--u));border-radius:1px;margin-left:calc(1*var(--u))}
#op-case-coldsend .h8-del{font-weight:600;color:#BD2418;justify-self:end}
#op-case-coldsend .h8-r.nw{display:none}
#op-case-coldsend .h8.nw0 .h8-r.nw{display:grid;opacity:0;translate:0 calc(-10*var(--u))}
#op-case-coldsend .h8.nw1 .h8-r.nw{opacity:1;translate:0 0;background:#F5F9FF;box-shadow:inset 0 0 0 1px #CFE0FB}
#op-case-coldsend .h8.nw2 .h8-r.nw{background:#fff;box-shadow:inset 0 0 0 1px #F1F1F3,0 calc(3*var(--u)) calc(10*var(--u)) rgba(100,100,111,.04)}
#op-case-coldsend .h8 .s7-cur{width:calc(18*var(--u));height:calc(18*var(--u))}
#op-case-coldsend .h8.rs .h8-wrap{opacity:0}
#op-case-coldsend .h8-wrap{transition:opacity .55s ease}
#op-case-coldsend .h8.cam{transform-origin:0 0;transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
/* phone: show the left two-thirds bigger */
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:600/560}
#op-case-coldsend .cs-a>.h8{--u:calc(100cqw/600)}
#op-case-coldsend .h8-wrap{left:calc(20*var(--u));top:calc(24*var(--u))}
}

#op-case-coldsend .h8-dh b,#op-case-coldsend .h8-dh em{line-height:1.25}
#op-case-coldsend .h8-dh em{margin-top:calc(2*var(--u))}

/* hero composition inside the laptop mockup */
#op-case-coldsend .cs-a .cs-win>.h8{position:relative;inset:auto;flex:0 0 auto;width:100%;height:auto;aspect-ratio:960/604;background:#F3F3F4;--u:calc(100cqw/960)}
#op-case-coldsend .cs-a .h8-wrap{left:calc(36*var(--u));top:calc(20*var(--u));width:calc(888*var(--u));height:calc(564*var(--u))}
@media (min-width:601px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:772/523}
#op-case-coldsend .cs-a .cs-win{height:auto}
}
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:386/300}
#op-case-coldsend .cs-a .cs-win>.h8{--u:calc(100cqw/960)}
#op-case-coldsend .cs-a .h8-wrap{left:calc(36*var(--u));top:calc(20*var(--u))}
}

/* exact Figma chart vectors (2652:164281/82, 164355/56, 164429/30) */
#op-case-coldsend .h8-gl{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.5,0,.2,1)}
#op-case-coldsend .h8.go .h8-gl{clip-path:inset(-4px 0 0 0)}
#op-case-coldsend .h8.go .k2 .h8-gl{transition-delay:.2s}
#op-case-coldsend .h8.go .k3 .h8-gl{transition-delay:.4s}
#op-case-coldsend .h8-plot .h8-gl svg{position:absolute;right:auto;bottom:auto;clip-path:none;transition:none;overflow:visible}
#op-case-coldsend .h8-gl .l path{stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-linecap:round}
#op-case-coldsend .h8-plot{margin-top:calc(20*var(--u))}

#op-case-coldsend .h8,#op-case-coldsend .h8 *{line-height:1.2}
#op-case-coldsend .h8-x{line-height:1.2}

/* ===== wow pass ===== */
#op-case-coldsend .cs-shot .cs-win{transform:perspective(1500px) rotateX(18deg) scale(.93);transform-origin:50% 100%;transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
#op-case-coldsend .cs-shot.tv .cs-win{transform:none}
/* Figma soft badges everywhere */
#op-case-coldsend .s7 .s7-chip.ok,#op-case-coldsend .s7 .s7-chip.done,#op-case-coldsend .s7 .s7-chip.wu.done{background:rgba(8,161,92,.06);box-shadow:inset 0 0 0 .6px rgba(8,161,92,.25);color:#06844B}
#op-case-coldsend .s7 .s7-chip.wu{background:rgba(108,116,132,.06);box-shadow:inset 0 0 0 .6px rgba(108,116,132,.2);color:#6C7484}
#op-case-coldsend .s7 .s7-chip.fail{background:rgba(204,39,26,.05);box-shadow:inset 0 0 0 .6px rgba(204,39,26,.2);color:#CC271A}
#op-case-coldsend .s7 .s7-chip{font-weight:600}
#op-case-coldsend .c7-r.se .c7-b{background:rgba(8,161,92,.08);box-shadow:inset 0 0 0 1px rgba(8,161,92,.3);color:#06844B}
/* fly-to-cart chip */
#op-case-coldsend .c7-fly{position:absolute;z-index:25;display:flex;align-items:center;gap:calc(10*var(--w));height:calc(30*var(--w));padding:0 calc(10*var(--w));border-radius:calc(8*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #CFE0FB,0 calc(10*var(--w)) calc(24*var(--w)) rgba(31,120,245,.28);font:500 calc(11.5*var(--w))/1 "Geist","Inter",system-ui,sans-serif;white-space:nowrap;pointer-events:none}
#op-case-coldsend .c7-fly em{font-style:normal;color:#1F78F5}
/* success ripple */
#op-case-coldsend .d7-ok{position:relative}
#op-case-coldsend .d7-ok::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(70,183,43,.5);opacity:0}
#op-case-coldsend .s7d.md .d7-ok::after{animation:d7rip 1.1s cubic-bezier(.2,.8,.2,1) .2s 2}
@keyframes d7rip{0%{opacity:.8;scale:1}100%{opacity:0;scale:2.6}}
/* chart scrub guide */
#op-case-coldsend .h8-gd{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:linear-gradient(180deg,rgba(1,129,255,0),rgba(1,129,255,.45));opacity:0;transition:opacity .25s ease;z-index:2}
#op-case-coldsend .h8-gp{position:absolute;width:calc(9*var(--u));height:calc(9*var(--u));margin:calc(-4.5*var(--u)) 0 0 calc(-4.5*var(--u));border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0181FF,0 0 0 calc(6*var(--u)) rgba(1,129,255,.15);opacity:0;transition:opacity .25s ease;z-index:3}
#op-case-coldsend .h8-tt{position:absolute;z-index:4;display:flex;gap:calc(6*var(--u));padding:calc(5*var(--u)) calc(8*var(--u));border-radius:calc(6*var(--u));background:#181B26;color:#fff;font-size:calc(10*var(--u));white-space:nowrap;translate:-50% calc(-100% - 10*var(--u));opacity:0;transition:opacity .25s ease}
#op-case-coldsend .h8-tt em{font-style:normal;color:rgba(255,255,255,.6)}
#op-case-coldsend .h8-tt b{font-weight:600}
#op-case-coldsend .h8.scrub .h8-gd,#op-case-coldsend .h8.scrub .h8-gp,#op-case-coldsend .h8.scrub .h8-tt{opacity:1}
#op-case-coldsend .h8-ch.k1{overflow:visible}

/* D: toolbar fits the visible frame; richer activation modal that morphs into the new row */
#op-case-coldsend .s7d .d7-tb{max-width:calc(790*var(--w))}
#op-case-coldsend .s7d .d7-se{width:calc(190*var(--w))}
#op-case-coldsend .d7-md{width:calc(360*var(--w));padding:0;text-align:left;overflow:hidden;transform-origin:50% 50%}
#op-case-coldsend .d7-mh{display:flex;align-items:center;gap:calc(12*var(--w));padding:calc(16*var(--w)) calc(18*var(--w));background:linear-gradient(180deg,#F3FBF5,#fff);border-bottom:1px solid #F1F1F3}
#op-case-coldsend .d7-mh .d7-ok{flex:0 0 auto;width:calc(34*var(--w));height:calc(34*var(--w));margin:0}
#op-case-coldsend .d7-mh .d7-ok svg{width:calc(16*var(--w));height:calc(16*var(--w))}
#op-case-coldsend .d7-mh b{display:block;font-weight:700;font-size:calc(14*var(--w))}
#op-case-coldsend .d7-mh em{display:block;margin-top:calc(3*var(--w));font-style:normal;font-size:calc(11.5*var(--w));color:#717989}
#op-case-coldsend .d7-plan{margin-left:auto;display:inline-flex;align-items:center;gap:calc(6*var(--w));height:calc(24*var(--w));padding:0 calc(8*var(--w)) 0 calc(4*var(--w));border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #F0E2B6;font-weight:600;font-size:calc(11*var(--w));white-space:nowrap;opacity:0;translate:calc(8*var(--w)) 0;transition:opacity .4s ease .35s,translate .5s cubic-bezier(.2,.8,.2,1) .35s}
#op-case-coldsend .d7-plan i{display:grid;place-items:center;width:calc(16*var(--w));height:calc(16*var(--w));border-radius:50%;background:#FDC33C}
#op-case-coldsend .d7-plan svg{width:calc(9*var(--w));height:calc(9*var(--w))}
#op-case-coldsend .s7d.md .d7-plan{opacity:1;translate:0 0}
#op-case-coldsend .d7-mb{padding:calc(12*var(--w)) calc(18*var(--w)) calc(4*var(--w))}
#op-case-coldsend .d7-mb label{display:block;margin:calc(6*var(--w)) 0 calc(5*var(--w));font-weight:600;font-size:calc(11*var(--w));color:#555B68}
#op-case-coldsend .d7-in{display:flex;align-items:center;height:calc(32*var(--w));padding:0 calc(10*var(--w));border-radius:calc(8*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;font-weight:500;font-size:calc(12*var(--w));transition:box-shadow .25s ease}
#op-case-coldsend .d7-in u{text-decoration:none;white-space:nowrap}
#op-case-coldsend .d7-in .cr{width:1px;height:calc(14*var(--w));margin-left:1px;background:#1F78F5;opacity:0}
#op-case-coldsend .d7-in.ty{box-shadow:inset 0 0 0 1.5px #1F78F5,0 0 0 calc(3*var(--w)) rgba(31,120,245,.12)}
#op-case-coldsend .d7-in.ty .cr{opacity:1;animation:c7bl .9s steps(1) infinite}
#op-case-coldsend .d7-rg2{display:flex;align-items:center;gap:calc(7*var(--w));height:calc(32*var(--w));padding:0 calc(10*var(--w));border-radius:calc(8*var(--w));box-shadow:inset 0 0 0 1px #E5E7EB;color:#1F78F5}
#op-case-coldsend .d7-rg2 svg{width:calc(14*var(--w));height:calc(14*var(--w))}
#op-case-coldsend .d7-rg2 b{font-weight:600;font-size:calc(12*var(--w));color:#181B26}
#op-case-coldsend .d7-rg2 em{margin-left:auto;font-style:normal;font-size:calc(11*var(--w));color:#A0A6B1}
#op-case-coldsend .d7-ft{list-style:none;margin:calc(12*var(--w)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(7*var(--w))}
#op-case-coldsend .d7-ft li{display:flex;align-items:center;gap:calc(8*var(--w));font-weight:500;font-size:calc(11.5*var(--w));color:#A0A6B1;transition:color .3s ease}
#op-case-coldsend .d7-ft li i{display:grid;place-items:center;width:calc(16*var(--w));height:calc(16*var(--w));border-radius:50%;box-shadow:inset 0 0 0 1.5px #E5E7EB;color:#fff;transition:background-color .3s ease,box-shadow .3s ease,scale .35s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .d7-ft li i svg{width:calc(9*var(--w));height:calc(9*var(--w));stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .1s}
#op-case-coldsend .d7-ft li.on{color:#3E434E}
#op-case-coldsend .d7-ft li.on i{background:#46B72B;box-shadow:none;scale:1.12}
#op-case-coldsend .d7-ft li.on i svg{stroke-dashoffset:0}
#op-case-coldsend .d7-md .d7-bt{grid-template-columns:auto 1fr;padding:calc(14*var(--w)) calc(18*var(--w)) calc(16*var(--w))}
#op-case-coldsend .d7-md .d7-cl{padding:0 calc(14*var(--w))}
#op-case-coldsend .d7-cr{position:relative;overflow:hidden}
#op-case-coldsend .d7-cr u{position:relative;z-index:1;text-decoration:none}
#op-case-coldsend .d7-pg{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.35));transform-origin:left;scale:0 1}
#op-case-coldsend .s7d.prg .d7-pg{scale:1 1;transition:scale .85s cubic-bezier(.5,0,.2,1)}
#op-case-coldsend .s7d.mg .d7-ov{opacity:0}
#op-case-coldsend .s7d.mg .d7-md>*{opacity:0;transition:opacity .2s ease}
#op-case-coldsend .s7d .d7-r.nw{transition:opacity .25s ease,translate 0s,background-color 1s ease,box-shadow 1s ease}
#op-case-coldsend .s7d.nw0 .d7-r.nw{translate:0 0}

#op-case-coldsend .d7-mh{padding:calc(12*var(--w)) calc(16*var(--w))}
#op-case-coldsend .d7-mb{padding:calc(8*var(--w)) calc(16*var(--w)) 0}
#op-case-coldsend .d7-mb label{margin:calc(5*var(--w)) 0 calc(4*var(--w))}
#op-case-coldsend .d7-in,#op-case-coldsend .d7-rg2{height:calc(30*var(--w))}
#op-case-coldsend .d7-ft{margin-top:calc(10*var(--w));gap:calc(6*var(--w))}
#op-case-coldsend .d7-md .d7-bt{padding:calc(12*var(--w)) calc(16*var(--w)) calc(14*var(--w))}

#op-case-coldsend .d7-mh>div{min-width:0}
#op-case-coldsend .d7-mh b,#op-case-coldsend .d7-mh em{white-space:nowrap;line-height:1.25}
#op-case-coldsend .d7-md{width:calc(380*var(--w))}
#op-case-coldsend .d7-md *{line-height:1.25}

/* chart: comet-traced line, area rises after */
#op-case-coldsend .h8 .h8-gl,#op-case-coldsend .h8.go .h8-gl{clip-path:none;transition:none}
#op-case-coldsend .h8-gl .a{transform-origin:50% 100%;transform:scaleY(0);opacity:0;transition:transform .9s cubic-bezier(.3,1.4,.5,1),opacity .5s ease}
#op-case-coldsend .h8-ch.dn .h8-gl .a{transform:none;opacity:1}
#op-case-coldsend .h8-hd{position:absolute;z-index:3;width:calc(7*var(--u));height:calc(7*var(--u));margin:calc(-3.5*var(--u)) 0 0 calc(-3.5*var(--u));border-radius:50%;background:#fff;box-shadow:0 0 0 calc(2*var(--u)) var(--c),0 0 calc(10*var(--u)) calc(3*var(--u)) var(--c);opacity:0;transition:opacity .3s ease,box-shadow .6s ease}
#op-case-coldsend .h8-ch.dr .h8-hd{opacity:1}
#op-case-coldsend .h8-ch.dn .h8-hd{box-shadow:0 0 0 calc(2*var(--u)) var(--c),0 0 0 0 var(--c)}
#op-case-coldsend .h8-ch.dn .h8-hd::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);opacity:.35;animation:a4lv 1.8s ease-out infinite}

/* ===== ColdSend brand insert e9 — Figma blue card + animated logo (Cloudflare-poster-like ring) ===== */



#op-case-coldsend .e9{position:absolute;inset:0;--e:calc(100cqw/772);font-family:"Geist","Inter",system-ui,sans-serif;color:#fff}
#op-case-coldsend .e9-arc{position:absolute;border-radius:50%;border:calc(14*var(--e)) solid rgba(255,255,255,.06);pointer-events:none}
#op-case-coldsend .e9-arc.a1{width:calc(560*var(--e));height:calc(560*var(--e));left:calc(-140*var(--e));top:calc(110*var(--e))}
#op-case-coldsend .e9-arc.a2{width:calc(300*var(--e));height:calc(300*var(--e));left:calc(-90*var(--e));top:calc(-180*var(--e));border-width:calc(10*var(--e))}
#op-case-coldsend .e9-arc.a3{width:calc(520*var(--e));height:calc(520*var(--e));right:calc(-60*var(--e));top:calc(-95*var(--e));border-width:1px;border-color:rgba(255,255,255,.14)}
#op-case-coldsend .e9-l{position:absolute;left:calc(48*var(--e));top:50%;translate:0 -50%;width:calc(360*var(--e))}
#op-case-coldsend .e9-pill{display:inline-flex;align-items:center;gap:calc(7*var(--e));height:calc(30*var(--e));padding:0 calc(13*var(--e));border-radius:99px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);backdrop-filter:blur(10px);font:600 calc(12*var(--e))/1 inherit;font-size:calc(12*var(--e));font-weight:600}
#op-case-coldsend .e9-pill svg{width:calc(14*var(--e));height:calc(14*var(--e))}
#op-case-coldsend .e9-l h4{margin:calc(26*var(--e)) 0 calc(24*var(--e));font-family:inherit;font-weight:600;font-size:calc(31*var(--e));line-height:1.18;letter-spacing:-.02em;color:#fff}
#op-case-coldsend .e9-btn{display:inline-flex;align-items:center;gap:calc(8*var(--e));height:calc(44*var(--e));padding:0 calc(20*var(--e)) 0 calc(24*var(--e));border-radius:calc(10*var(--e));background:#fff;color:#181B26;font-weight:700;font-size:calc(15*var(--e));box-shadow:0 calc(6*var(--e)) calc(18*var(--e)) rgba(10,40,120,.25)}
#op-case-coldsend .e9-btn svg{width:calc(18*var(--e));height:calc(18*var(--e));transition:translate .3s ease}

@keyframes e9arr{0%,60%,100%{translate:0 0}75%{translate:calc(4*var(--e)) 0}}
#op-case-coldsend .e9-r{position:absolute;right:calc(70*var(--e));top:50%;width:calc(280*var(--e));height:calc(280*var(--e));translate:0 -50%}
#op-case-coldsend .e9-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);filter:blur(calc(10*var(--e)))}

@keyframes e9glow{50%{scale:1.18;opacity:.65}}
#op-case-coldsend .e9-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#op-case-coldsend .e9-ring text{font-family:"Geist Mono","JetBrains Mono",ui-monospace,monospace;font-size:9.2px;font-weight:600;letter-spacing:.12em;fill:rgba(255,255,255,.85)}

@keyframes e9spin{to{rotate:360deg}}
#op-case-coldsend .e9-logo{position:absolute;left:50%;top:50%;width:calc(124*var(--e));height:calc(124*var(--e));translate:-50% -50%;overflow:visible;filter:drop-shadow(0 calc(10*var(--e)) calc(24*var(--e)) rgba(10,40,120,.35))}
#op-case-coldsend .e9-logo .arm{transform-box:view-box;transform-origin:20px 20px}

@keyframes e9arm{0%,30%,100%{translate:0 0}12%{translate:0 -1.6px}}
#op-case-coldsend .e9-logo .env{fill:#fff;stroke:none;opacity:0;transform-box:view-box}

@keyframes e9env{0%{opacity:0;translate:0 2px;scale:.6}8%{opacity:1}40%{opacity:0;translate:0 -16px;scale:1}100%{opacity:0;translate:0 -16px}}
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-e{aspect-ratio:386/430}
#op-case-coldsend .e9{--e:calc(100cqw/420)}
#op-case-coldsend .e9-l{left:calc(30*var(--e));top:calc(36*var(--e));translate:none;width:calc(360*var(--e))}
#op-case-coldsend .e9-r{right:auto;left:50%;top:auto;bottom:calc(-20*var(--e));translate:-50% 0;width:calc(250*var(--e));height:calc(250*var(--e))}
}

@media (max-width:600px){
#op-case-coldsend .cs-row .cs-e{aspect-ratio:386/500}
#op-case-coldsend .e9-r{bottom:calc(-34*var(--e));width:calc(230*var(--e));height:calc(230*var(--e))}
}

/* live charts */
#op-case-coldsend .h8-gl svg.a,#op-case-coldsend .h8-gl svg.l{display:none}
#op-case-coldsend .h8-gl svg.lv{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0;translate:0 calc(10*var(--u));transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .h8-ch.dr .h8-gl svg.lv{opacity:1;translate:0 0}
#op-case-coldsend .h8-gl .ll{stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
#op-case-coldsend .h8-gl{overflow:visible}
#op-case-coldsend .h8-gl svg.lv{-webkit-mask:linear-gradient(90deg,transparent 0,#000 8%);mask:linear-gradient(90deg,transparent 0,#000 8%)}

/* ===== D: blue activation card (Figma blue card style + animated ColdSend logo) replaces the white modal ===== */
#op-case-coldsend .d7-md.bl{width:calc(430*var(--w));display:grid;grid-template-columns:1fr calc(150*var(--w));align-items:center;gap:calc(4*var(--w));padding:calc(20*var(--w)) calc(18*var(--w)) calc(20*var(--w)) calc(22*var(--w));border-radius:calc(16*var(--w));background:linear-gradient(160deg,#4A93FF 0%,#1F78F5 55%,#1A6CE8 100%);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 calc(24*var(--w)) calc(60*var(--w)) rgba(16,60,160,.35);text-align:left}
#op-case-coldsend .d7-arc{position:absolute;border-radius:50%;border:calc(10*var(--w)) solid rgba(255,255,255,.07);pointer-events:none}
#op-case-coldsend .d7-arc.a1{width:calc(300*var(--w));height:calc(300*var(--w));left:calc(-90*var(--w));top:calc(90*var(--w))}
#op-case-coldsend .d7-arc.a2{width:calc(220*var(--w));height:calc(220*var(--w));right:calc(-40*var(--w));top:calc(-50*var(--w));border-width:1px;border-color:rgba(255,255,255,.18)}
#op-case-coldsend .d7-bl{position:relative;z-index:1}
#op-case-coldsend .d7-md.bl .d7-plan{margin:0;opacity:1;translate:none;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#fff}
#op-case-coldsend .d7-t{display:block;margin:calc(12*var(--w)) 0 calc(12*var(--w));font-weight:700;font-size:calc(19*var(--w));letter-spacing:-.02em;white-space:nowrap}
#op-case-coldsend .d7-md.bl .d7-in{gap:calc(8*var(--w));height:calc(30*var(--w));background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff}
#op-case-coldsend .d7-md.bl .d7-in em{font-style:normal;font-size:calc(11*var(--w));color:rgba(255,255,255,.65)}
#op-case-coldsend .d7-md.bl .d7-in .cr{background:#fff}
#op-case-coldsend .d7-md.bl .d7-in.ty{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 calc(3*var(--w)) rgba(255,255,255,.18)}
#op-case-coldsend .d7-md.bl .d7-ft li{color:rgba(255,255,255,.55)}
#op-case-coldsend .d7-md.bl .d7-ft li i{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);color:#1F78F5}
#op-case-coldsend .d7-md.bl .d7-ft li.on{color:#fff}
#op-case-coldsend .d7-md.bl .d7-ft li.on i{background:#fff;box-shadow:none}
#op-case-coldsend .d7-md.bl .d7-cr{display:inline-flex;align-items:center;gap:calc(7*var(--w));height:calc(34*var(--w));margin-top:calc(14*var(--w));padding:0 calc(14*var(--w)) 0 calc(16*var(--w));border-radius:calc(9*var(--w));background:#fff;color:#181B26;font-weight:700;font-size:calc(12.5*var(--w));box-shadow:0 calc(6*var(--w)) calc(16*var(--w)) rgba(10,40,120,.25)}
#op-case-coldsend .d7-md.bl .d7-cr svg{width:calc(15*var(--w));height:calc(15*var(--w))}
#op-case-coldsend .d7-md.bl .d7-pg{background:linear-gradient(90deg,rgba(31,120,245,0),rgba(31,120,245,.18))}
#op-case-coldsend .d7-br{position:relative;width:calc(150*var(--w));height:calc(150*var(--w))}
#op-case-coldsend .d7-glow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);filter:blur(calc(8*var(--w)))}
#op-case-coldsend .d7-br .e9-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#op-case-coldsend .d7-br .e9-ring text{font-size:11px}
#op-case-coldsend .d7-br .e9-logo{position:absolute;left:50%;top:50%;width:calc(64*var(--w));height:calc(64*var(--w));translate:-50% -50%;overflow:visible;filter:drop-shadow(0 calc(6*var(--w)) calc(14*var(--w)) rgba(10,40,120,.35))}
#op-case-coldsend .d7-br .e9-logo .arm{transform-box:view-box;transform-origin:20px 20px}
#op-case-coldsend .d7-br .e9-logo .env{fill:#fff;opacity:0;transform-box:view-box}
#op-case-coldsend .s7d.md .d7-br .e9-ring{animation:e9spin 22s linear infinite}
#op-case-coldsend .s7d.md .d7-glow{animation:e9glow 2.6s ease-in-out infinite}
#op-case-coldsend .s7d.md .d7-br .e9-logo .arm{animation:e9arm 2.2s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--i)*.12s + .3s)}
#op-case-coldsend .s7d.md .d7-br .e9-logo .env{animation:e9env 2.2s cubic-bezier(.3,.7,.2,1) infinite;animation-delay:calc(var(--i)*.12s + .4s)}
#op-case-coldsend .s7d.md .d7-br .e9-logo{animation:d7pop .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes d7pop{from{scale:.4;opacity:0}to{scale:1;opacity:1}}
/* live charts: keep Figma source vectors in layout (for sampling) but invisible */
#op-case-coldsend .h8-gl svg.a,#op-case-coldsend .h8-gl svg.l{display:block;visibility:hidden}

/* hero table: when the new domain lands, the last row folds away so only whole rows are visible */
#op-case-coldsend .h8-r:last-child{overflow:hidden;transition:opacity .45s ease,translate .5s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),margin .55s cubic-bezier(.2,.8,.2,1),background-color 1s ease,box-shadow 1s ease}
#op-case-coldsend .h8.nw0 .h8-r:last-child{height:0;margin-top:calc(-6*var(--u));opacity:0}

/* blue card → row: container morph (no squash) */
#op-case-coldsend .d7-md.bl::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:#F5F9FF;box-shadow:inset 0 0 0 1px #CFE0FB;opacity:0;pointer-events:none;transition:opacity .35s ease}
#op-case-coldsend .s7d.mg .d7-md.bl::after{opacity:1}
#op-case-coldsend .s7d.mg .d7-md.bl{box-shadow:0 calc(4*var(--w)) calc(10*var(--w)) rgba(16,60,160,.08)!important}
#op-case-coldsend .s7d.mg .d7-md>*{opacity:0;transition:opacity .18s ease}
#op-case-coldsend .s7d.mg .d7-ov{opacity:0;transition:opacity .5s ease .2s}

/* smoothness pass: state swaps pop instead of snapping; GPU-friendly camera */
@keyframes s7pop{0%{scale:.86;opacity:.35}55%{scale:1.06;opacity:1}100%{scale:1;opacity:1}}
#op-case-coldsend .pp{animation:s7pop .45s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .cs-scr.cam,#op-case-coldsend .h8.cam{will-change:transform;backface-visibility:hidden}
#op-case-coldsend .s7-cur{will-change:translate}
#op-case-coldsend .c7-it,#op-case-coldsend .b7-r,#op-case-coldsend .d7-r,#op-case-coldsend .h8-r{will-change:opacity,translate}

/* B finale: pages slide to "Add mailboxes", mailboxes pop in, step 3 done, status → Ready to send */
#op-case-coldsend .b7-pages{position:relative;overflow:hidden;margin:0 calc(-18*var(--w));padding:0 calc(18*var(--w))}
#op-case-coldsend .b7-pg{transition:translate .7s cubic-bezier(.65,0,.25,1),opacity .5s ease}
#op-case-coldsend .b7-pg2{position:absolute;left:calc(18*var(--w));right:calc(18*var(--w));top:0;translate:calc(105% + 18*var(--w)) 0;opacity:0}
#op-case-coldsend .s7b.p2 .b7-pg1{translate:calc(-105% - 18*var(--w)) 0;opacity:0}
#op-case-coldsend .s7b.p2 .b7-pg2{translate:0 0;opacity:1}
#op-case-coldsend .b7-mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(10*var(--w))}
#op-case-coldsend .b7-mh .b7-lb{margin:0}
#op-case-coldsend .b7-mh em{display:block;margin-top:calc(4*var(--w));font-style:normal;font-size:calc(11.5*var(--w));color:#717989}
#op-case-coldsend .b7-gen{display:inline-flex;align-items:center;gap:calc(6*var(--w));height:calc(28*var(--w));padding:0 calc(11*var(--w));border-radius:calc(8*var(--w));background:linear-gradient(180deg,#428EFF,#1A75FF);color:#fff;font-weight:600;font-size:calc(11.5*var(--w));box-shadow:0 calc(3*var(--w)) calc(8*var(--w)) rgba(31,120,245,.28);transition:scale .15s ease}
#op-case-coldsend .b7-gen svg{width:calc(13*var(--w));height:calc(13*var(--w))}
#op-case-coldsend .b7-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(6*var(--w))}
#op-case-coldsend .b7-mb{display:flex;align-items:center;gap:calc(8*var(--w));height:calc(34*var(--w));padding:0 calc(8*var(--w));border-radius:calc(9*var(--w));background:#fff;box-shadow:inset 0 0 0 1px #EAECF1;opacity:0;translate:0 calc(8*var(--w));scale:.94;transition:opacity .35s ease,translate .5s cubic-bezier(.3,1.4,.5,1),scale .5s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .b7-mb.in{opacity:1;translate:0 0;scale:1}
#op-case-coldsend .b7-mb i{display:grid;place-items:center;flex:0 0 auto;width:calc(22*var(--w));height:calc(22*var(--w));border-radius:50%;color:#fff;font-style:normal;font-weight:700;font-size:calc(8.5*var(--w))}
#op-case-coldsend .b7-mb b{font-weight:600;font-size:calc(11.5*var(--w));color:#181B26}
#op-case-coldsend .b7-mb em{margin-left:calc(-6*var(--w));font-style:normal;font-size:calc(11*var(--w));color:#A0A6B1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#op-case-coldsend .s7b.fin .b7-ln.l2 u{scale:1 1}
#op-case-coldsend .b7-h{position:relative}
#op-case-coldsend .b7-h .s7-chip{position:relative}
#op-case-coldsend .b7-h .s7-chip::before,#op-case-coldsend .b7-h .s7-chip::after{content:"";position:absolute;inset:calc(-4*var(--w));border-radius:inherit;box-shadow:0 0 0 2px rgba(70,183,43,.45);opacity:0;pointer-events:none}
#op-case-coldsend .s7b.burst .b7-h .s7-chip::before{animation:b7b 1s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .s7b.burst .b7-h .s7-chip::after{animation:b7b 1s cubic-bezier(.2,.8,.2,1) .18s}
@keyframes b7b{0%{opacity:.9;scale:.9}100%{opacity:0;scale:1.5}}

/* loop seam = browser "reload": blue progress bar under the URL bar, content blurs/dims, next run focuses in */
#op-case-coldsend .cs-bar{position:relative}
#op-case-coldsend .cs-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:3;background:linear-gradient(90deg,#56B6FF,#1F78F5);box-shadow:0 0 8px rgba(31,120,245,.55);transform-origin:left;scale:0 1;opacity:0}
#op-case-coldsend .cs-shot.rl .cs-bar::after{animation:csld 1.7s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes csld{0%{scale:0 1;opacity:1}55%{scale:.82 1;opacity:1}80%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
#op-case-coldsend .s7>.s7-main,#op-case-coldsend .s7>.s7-card,#op-case-coldsend .h8-wrap{transition:opacity .5s ease,filter .5s ease}
#op-case-coldsend .s7.rs>.s7-main,#op-case-coldsend .s7.rs>.s7-card,#op-case-coldsend .h8.rs .h8-wrap{opacity:.28;filter:blur(5px) saturate(.6)}

#op-case-coldsend .cs-url{display:none}

#op-case-coldsend .h8-r{height:calc(44*var(--u))}
#op-case-coldsend .h8-dom{gap:calc(12*var(--u));padding-bottom:calc(16*var(--u))}

/* C: card fills the frame (less empty space right/bottom) */
#op-case-coldsend .s7c .s7-card{width:calc(530*var(--w));margin:calc(18*var(--w)) 0 0 calc(22*var(--w))}
#op-case-coldsend .c7-cols{grid-template-columns:1fr calc(206*var(--w));gap:calc(14*var(--w))}
#op-case-coldsend .c7-r{margin-bottom:calc(9*var(--w))}
#op-case-coldsend .c7-in,#op-case-coldsend .c7-b{height:calc(40*var(--w))}
#op-case-coldsend .c7-in{font-size:calc(12.5*var(--w))}
#op-case-coldsend .c7-b{flex-basis:calc(116*var(--w))}
#op-case-coldsend .c7-items{min-height:calc(120*var(--w))}
#op-case-coldsend .c7-it{height:calc(34*var(--w))}
#op-case-coldsend .c7-go{height:calc(36*var(--w))}
#op-case-coldsend .c7-h{height:calc(52*var(--w))}
#op-case-coldsend .c7-st{padding:calc(14*var(--w)) calc(16*var(--w))}

#op-case-coldsend .b7-mb i.b7-av{display:block;width:calc(24*var(--w));height:calc(24*var(--w));background:none;border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(1.5*var(--w)) #fff,0 1px 3px rgba(20,24,40,.12)}
#op-case-coldsend .b7-mb i.b7-av svg{display:block;width:100%;height:100%}

#op-case-coldsend .cs-bar::after{display:none}

/* B: card fills the frame like C */
#op-case-coldsend .s7b .s7-card{width:calc(530*var(--w));margin:calc(16*var(--w)) 0 0 calc(22*var(--w))}

/* Dynamic-Island-style dismiss: card → pill → arcs into the new row */
#op-case-coldsend .d7-isl{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:calc(7*var(--w));color:#fff;font-weight:600;font-size:calc(11.5*var(--w));white-space:nowrap;opacity:0;transition:opacity .25s ease .22s;pointer-events:none}
#op-case-coldsend .d7-isl .s7-sp{border-color:rgba(255,255,255,.35);border-top-color:#fff}
#op-case-coldsend .s7d.isl .d7-md>*:not(.d7-isl){opacity:0;transition:opacity .16s ease}
#op-case-coldsend .s7d.isl .d7-isl{opacity:1}
#op-case-coldsend .s7d.isl .d7-md.bl{box-shadow:0 calc(10*var(--w)) calc(28*var(--w)) rgba(16,60,160,.35)}
#op-case-coldsend .s7d.isl .d7-ov{opacity:.35;transition:opacity .5s ease}
#op-case-coldsend .s7d.mg .d7-isl{opacity:0;transition:opacity .2s ease}

/* lighter frosted backdrop behind the activation card */
#op-case-coldsend .d7-ov{background:linear-gradient(180deg,rgba(240,246,255,.55),rgba(232,240,255,.5));backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1)}

/* B: fit all three domain rows inside the frame */
#op-case-coldsend .s7b .s7-topb{height:calc(34*var(--w))}
#op-case-coldsend .s7b .s7-card{margin-top:calc(12*var(--w))}
#op-case-coldsend .b7{padding:calc(14*var(--w)) calc(18*var(--w))}
#op-case-coldsend .b7-st{margin:calc(12*var(--w)) 0 calc(10*var(--w))}
#op-case-coldsend .b7-lb{margin-bottom:calc(6*var(--w))}
#op-case-coldsend .b7-op span{height:calc(34*var(--w))}
#op-case-coldsend .b7-sh{margin:calc(10*var(--w)) 0 calc(6*var(--w));padding-top:calc(10*var(--w))}
#op-case-coldsend .b7-r{height:calc(32*var(--w))}
#op-case-coldsend .b7-list{gap:calc(5*var(--w));min-height:calc(106*var(--w))}

/* hero intro: one snowflake → click → dashboard opens out of it */
#op-case-coldsend .h8-intro{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(14*var(--u));background:radial-gradient(circle at 50% 46%,#FFFFFF 0,#F3F3F4 60%);opacity:0;pointer-events:none;transition:opacity .45s ease}
#op-case-coldsend .h8-intro.on{opacity:1}
#op-case-coldsend .h8-intro.open{opacity:0;transition:opacity .55s ease .2s}
#op-case-coldsend .h8-lg{width:calc(96*var(--u));height:calc(96*var(--u));overflow:visible;scale:.2;opacity:0;filter:drop-shadow(0 calc(14*var(--u)) calc(30*var(--u)) rgba(31,120,245,.35));transition:scale .8s cubic-bezier(.3,1.6,.5,1),opacity .3s ease,rotate .8s cubic-bezier(.3,1.6,.5,1);rotate:-60deg}
#op-case-coldsend .h8-intro.on .h8-lg{scale:1;opacity:1;rotate:0deg}
#op-case-coldsend .h8-intro.on .h8-lg.press{scale:.88;transition:scale .15s ease}
#op-case-coldsend .h8-intro.open .h8-lg{scale:11;opacity:0;transition:scale .9s cubic-bezier(.5,0,.2,1),opacity .55s ease .25s}
#op-case-coldsend .h8-lg .arm{transform-box:view-box;transform-origin:20px 20px}
#op-case-coldsend .h8-intro.on .h8-lg .arm{animation:e9arm 1.8s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--i)*.1s + .5s)}
#op-case-coldsend .h8-it{font-family:"Geist","Inter",system-ui,sans-serif;font-weight:700;font-size:calc(22*var(--u));letter-spacing:-.02em;color:#181B26;opacity:0;translate:0 calc(8*var(--u));transition:opacity .4s ease .35s,translate .6s cubic-bezier(.2,.8,.2,1) .35s}
#op-case-coldsend .h8-intro.on .h8-it{opacity:1;translate:0 0}
#op-case-coldsend .h8-intro.open .h8-it{opacity:0;transition:opacity .2s ease}
#op-case-coldsend .h8-rip{position:absolute;left:50%;top:50%;width:calc(96*var(--u));height:calc(96*var(--u));margin:calc(-66*var(--u)) 0 0 calc(-48*var(--u));border-radius:50%;box-shadow:0 0 0 2px rgba(31,120,245,.35);opacity:0}
#op-case-coldsend .h8-intro.on .h8-rip{animation:h8rip 2s cubic-bezier(.3,.7,.2,1) .6s infinite}
#op-case-coldsend .h8-intro.on .h8-rip.r2{animation-delay:1.6s}
@keyframes h8rip{0%{opacity:.8;scale:1}100%{opacity:0;scale:2.4}}
#op-case-coldsend .h8-wrap{transform-origin:50% 50%;transition:opacity .55s ease,filter .55s ease,scale 1s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .h8:not(.in) .h8-wrap{scale:.9}

#op-case-coldsend .h8-lg{width:calc(130*var(--u));height:calc(130*var(--u))}
#op-case-coldsend .h8-rip{width:calc(130*var(--u));height:calc(130*var(--u));margin:calc(-85*var(--u)) 0 0 calc(-65*var(--u))}
#op-case-coldsend .h8-it{font-size:calc(26*var(--u))}

/* intro on brand blue: arcs, dot grid, rotating word ring, envelopes converging on the logo */
#op-case-coldsend .h8-intro{background:linear-gradient(160deg,#4A93FF 0%,#1F78F5 55%,#1A6CE8 100%);overflow:hidden}
#op-case-coldsend .h8-arc{position:absolute;border-radius:50%;pointer-events:none;border:calc(18*var(--u)) solid rgba(255,255,255,.06)}
#op-case-coldsend .h8-arc.a1{width:calc(760*var(--u));height:calc(760*var(--u));left:calc(-260*var(--u));top:calc(250*var(--u))}
#op-case-coldsend .h8-arc.a2{width:calc(420*var(--u));height:calc(420*var(--u));right:calc(-120*var(--u));top:calc(-170*var(--u));border-width:calc(12*var(--u))}
#op-case-coldsend .h8-arc.a3{width:calc(560*var(--u));height:calc(560*var(--u));left:50%;top:50%;margin:calc(-300*var(--u)) 0 0 calc(-280*var(--u));border-width:1px;border-color:rgba(255,255,255,.16)}
#op-case-coldsend .h8-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px);background-size:calc(22*var(--u)) calc(22*var(--u));-webkit-mask:radial-gradient(circle at 50% 46%,#000 0,transparent 62%);mask:radial-gradient(circle at 50% 46%,#000 0,transparent 62%)}
#op-case-coldsend .h8-ring{position:absolute;left:50%;top:50%;width:calc(280*var(--u));height:calc(280*var(--u));margin:calc(-160*var(--u)) 0 0 calc(-140*var(--u));overflow:visible;opacity:0;scale:.8;transition:opacity .5s ease .3s,scale .9s cubic-bezier(.2,.8,.2,1) .3s}
#op-case-coldsend .h8-ring text{font-family:"Geist Mono","JetBrains Mono",ui-monospace,monospace;font-size:9.2px;font-weight:600;letter-spacing:.12em;fill:rgba(255,255,255,.85)}
#op-case-coldsend .h8-intro.on .h8-ring{opacity:1;scale:1;animation:e9spin 24s linear infinite}
#op-case-coldsend .h8-intro.open .h8-ring{opacity:0;scale:1.6;transition:opacity .35s ease,scale .8s cubic-bezier(.6,0,.2,1)}
#op-case-coldsend .h8-it{color:#fff}
#op-case-coldsend .h8-rip{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
#op-case-coldsend .h8-lg{filter:drop-shadow(0 calc(16*var(--u)) calc(34*var(--u)) rgba(10,40,120,.4))}
#op-case-coldsend .h8-env{position:absolute;left:50%;top:46%;width:calc(16*var(--u));height:calc(11*var(--u));margin:calc(-5.5*var(--u)) 0 0 calc(-8*var(--u));border-radius:calc(2.5*var(--u));background:#fff;box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(10,40,120,.25);opacity:0}
#op-case-coldsend .h8-env::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 46%,rgba(31,120,245,.35) 48% 52%,transparent 54%),linear-gradient(to bottom left,transparent 46%,rgba(31,120,245,.35) 48% 52%,transparent 54%);background-size:100% 100%;clip-path:polygon(0 0,100% 0,50% 60%)}
#op-case-coldsend .h8-intro.on .h8-env{animation:h8env 2.2s cubic-bezier(.5,0,.2,1) infinite;animation-delay:var(--d)}
@keyframes h8env{0%{opacity:0;translate:calc(var(--x)*var(--u)) calc(var(--y)*var(--u));rotate:var(--r);scale:.8}15%{opacity:1}75%{opacity:1;scale:.9}100%{opacity:0;translate:0 0;rotate:0deg;scale:.3}}
#op-case-coldsend .h8-intro.open .h8-env{animation:none;opacity:0}

#op-case-coldsend .h8-it{margin-top:calc(64*var(--u))}
#op-case-coldsend .h8-ring{margin-top:calc(-192*var(--u))}
#op-case-coldsend .h8-rip{margin-top:calc(-117*var(--u))}
#op-case-coldsend .h8-env{top:calc(50% - 52*var(--u))}
#op-case-coldsend .h8-arc.a3{margin-top:calc(-332*var(--u))}
#op-case-coldsend .h8-dots{-webkit-mask:radial-gradient(circle at 50% 42%,#000 0,transparent 62%);mask:radial-gradient(circle at 50% 42%,#000 0,transparent 62%)}

#op-case-coldsend .h8-ring{display:none}
#op-case-coldsend .h8-it{margin-top:0}
#op-case-coldsend .h8-rip{margin-top:calc(-85*var(--u))}
#op-case-coldsend .h8-env{top:calc(50% - 20*var(--u))}
#op-case-coldsend .h8-arc.a3{margin-top:calc(-300*var(--u))}

/* ColdSend phone: taller stages, bigger UI (window bleeds right/bottom), readable text */
@media (max-width:600px){
#op-case-coldsend .cs-row .op-shot3,#op-case-coldsend .cs-row .cs-a,#op-case-coldsend .cs-row .cs-d{aspect-ratio:386/430}
#op-case-coldsend .cs-row .cs-win{--cw:200cqw;--cx:7cqw;--cy:9cqw;height:auto}
#op-case-coldsend .cs-a .cs-win{--cw:205cqw}
}

/* ColdSend phone v2: frame each screen around where its animation happens */
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:386/300}
#op-case-coldsend .cs-a .cs-win{--cw:106cqw;--cx:-3cqw;--cy:6cqw}
#op-case-coldsend .cs-row .cs-b,#op-case-coldsend .cs-row .cs-c{aspect-ratio:386/400}
#op-case-coldsend .cs-b .cs-win,#op-case-coldsend .cs-c .cs-win{--cw:168cqw;--cx:-1cqw;--cy:6cqw}
#op-case-coldsend .cs-row .cs-d{aspect-ratio:386/330}
#op-case-coldsend .cs-d .cs-win{--cw:116cqw;--cx:-2cqw;--cy:6cqw}
}



/* phone (Linear-style): laptop corner stays visible (top + left bezel), the animating component fills the width and stays readable */
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-b,#op-case-coldsend .cs-row .cs-c{aspect-ratio:386/390}
#op-case-coldsend .cs-b .cs-win,#op-case-coldsend .cs-c .cs-win{--cw:162cqw;--cx:5cqw;--cy:7cqw}
#op-case-coldsend .cs-row .cs-d{aspect-ratio:386/340}
#op-case-coldsend .cs-d .cs-win{--cw:132cqw;--cx:5cqw;--cy:7cqw}
}

/* phone: stage height hugs the component (no empty band under it) */
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-b{aspect-ratio:386/350}
#op-case-coldsend .cs-row .cs-c{aspect-ratio:386/338}
#op-case-coldsend .cs-row .cs-d{aspect-ratio:386/292}
}




/* phone hero: laptop corner like the other visuals; intro logo centred in the visible part of the screen */
@media (max-width:600px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:386/350}
#op-case-coldsend .cs-a .cs-win{--cw:162cqw;--cx:5cqw;--cy:7cqw}
#op-case-coldsend .cs-a .h8-intro{right:auto;bottom:auto;width:58%;height:84%}
#op-case-coldsend .cs-a .h8-lg{width:calc(150*var(--u));height:calc(150*var(--u))}
#op-case-coldsend .cs-a .h8-rip{width:calc(150*var(--u));height:calc(150*var(--u));margin:calc(-100*var(--u)) 0 0 calc(-75*var(--u))}
#op-case-coldsend .cs-a .h8-it{font-size:calc(30*var(--u))}
}

@media (max-width:600px){
#op-case-coldsend .cs-row .cs-a{aspect-ratio:386/430}
#op-case-coldsend .cs-a .h8-intro{height:100%}
}


/* phone: stacked screens (as before) with bigger phone mockups */
@media (max-width:600px){
.op-case .fzs:not(.cs-row) .op-shot3{aspect-ratio:386/620}
.op-case .fzs:not(.cs-row) .op-shot3 .trio__device{width:72cqw;border-radius:11cqw}
}

/* case study footer: next case + all cases */
.op-case .op-next{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(11,11,11,.08)}

.op-case .nc-k,.op-case .nc-k2{font:400 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,11,.55)}
















@media (max-width:600px){
.op-case .nc-card{min-height:240px;align-items:flex-end}
.op-case .nc-l{max-width:100%}
.op-case .nc-go{width:44px;height:44px}
}


@media (max-width:600px){.op-case .nc-l{padding-right:52px}}

/* next case = Metalab marquee + Clay brand cover */
.op-case .nc-hero{position:relative;display:grid;place-items:center;min-height:clamp(380px,46vw,560px);border-radius:24px;background:#0B0B0B;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.op-case .nc-mq{position:absolute;left:0;right:0;top:50%;translate:0 -50%;overflow:hidden;pointer-events:none;z-index:0}
.op-case .nc-track{display:flex;width:max-content;align-items:center;animation:ncmq 22s linear infinite}
.op-case .nc-track span{font:500 clamp(84px,12vw,170px)/1 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:-.045em;white-space:nowrap;color:#fff;padding:0 .18em}
.op-case .nc-track i{flex:0 0 auto;width:.2em;height:.2em;margin:0 .18em;border-radius:50%;background:#fff;font-size:clamp(84px,12vw,170px)}
@keyframes ncmq{to{transform:translateX(-50%)}}
.op-case .nc-hero:hover .nc-track{animation-duration:12s}
.op-case .nc-cover{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;width:min(64%,420px);aspect-ratio:4/5;padding:clamp(20px,2.4vw,30px);border-radius:20px;background:var(--nc);box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden;rotate:-3deg;transition:rotate .7s cubic-bezier(.3,1.4,.5,1),scale .7s cubic-bezier(.3,1.4,.5,1)}
.op-case .nc-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.op-case .nc-hero:hover .nc-cover{rotate:0deg;scale:1.04}







@media (max-width:600px){
.op-case .nc-hero{min-height:420px}
.op-case .nc-cover{width:76%}
.op-case .nc-cover .nc-go{width:40px;height:40px}
.op-case .nc-meta{padding-right:46px}
}
@media (prefers-reduced-motion:reduce){.op-case .nc-track{animation:none}}

/* next case: landscape cover that sits inside the panel */
.op-case .nc-hero{min-height:clamp(340px,36vw,460px)}
.op-case .nc-cover{width:min(58%,520px);aspect-ratio:16/10.5;rotate:-2deg;padding:clamp(18px,2vw,26px)}




@media (max-width:600px){
.op-case .nc-hero{min-height:360px}
.op-case .nc-cover{width:84%;aspect-ratio:4/3.4}
.op-case .nc-logo{width:56%}
}

/* next case: full-bleed panel to the modal edges */
.op-case .op-next{padding-bottom:0}
.op-case .nc-hero{margin:0 calc(-1*clamp(32px,3.4vw,52px)) calc(-1*clamp(32px,3.4vw,52px));border-radius:0;min-height:clamp(380px,40vw,540px)}
.op-case .nc-cover{width:min(52%,560px)}
@media (max-width:600px){.op-case .nc-cover{width:82%}}



.op-case .op-next{border-top:0;padding-top:0}

/* next case: a deck — next case on top, the other cases fanned behind; mouse tilt + glare */
.op-case .nc-hero{perspective:1400px}






.op-case .nc-cover{z-index:2;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:rotate .7s cubic-bezier(.3,1.4,.5,1),scale .7s cubic-bezier(.3,1.4,.5,1),transform .25s ease-out}
.op-case .nc-hero:hover .nc-cover{scale:1.06}
.op-case .nc-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.38),transparent 45%);opacity:0;transition:opacity .4s ease;mix-blend-mode:soft-light}
.op-case .nc-hero:hover .nc-glare{opacity:1}


.op-case .nc-cover{animation:ncfloat 5s ease-in-out infinite}
@keyframes ncfloat{50%{translate:0 -8px}}
@media (max-width:600px){.op-case .nc-back{width:82%}.op-case .nc-back.b1{translate:-53% -54%}.op-case .nc-back.b2{translate:-47% -46%}}
@media (prefers-reduced-motion:reduce){.op-case .nc-cover{animation:none}}

/* next-case logo as a white LED dot-matrix */
.op-case .nc-led{display:block;width:52%;aspect-ratio:var(--fw-ar,4.4);height:auto}
@media (max-width:600px){.op-case .nc-led{width:62%}}

/* next case: project cover (not a card) — wide brand panel, big LED logo centred, caption under it */

.op-case .nc-hero{min-height:clamp(420px,46vw,600px)}
.op-case .nc-cover{width:min(62%,680px);aspect-ratio:16/9;border-radius:10px;rotate:0deg;animation:none;justify-content:center;align-items:center;overflow:visible;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.op-case .nc-cover::before{border-radius:inherit}
.op-case .nc-hero:hover .nc-cover{scale:1.03}
.op-case .nc-led{width:68%}



.op-case .nc-hero{padding-bottom:70px}
@media (max-width:600px){.op-case .nc-cover{width:86%}.op-case .nc-led{width:74%}.op-case .nc-hero{padding-bottom:90px}}

/* next-case covers: brand wordmark + an app-associated visual on the brand colour */
.op-case .nc-cover{justify-content:flex-start;align-items:flex-start;overflow:hidden;padding:clamp(20px,2.4vw,30px)}

.op-case .nc-hero .nc-cover{overflow:visible}
.op-case .nc-cover>.nv{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.op-case .nc-wm{position:relative;z-index:2;display:block;width:34%;aspect-ratio:4.4/1;background:#fff;-webkit-mask:var(--w) left center/contain no-repeat;mask:var(--w) left center/contain no-repeat}
.op-case .nc-finna .nc-wm{width:30%}





.op-case .nv-cat{position:absolute;left:24%;bottom:-6%;width:36%;filter:drop-shadow(0 16px 26px rgba(0,0,0,.3));transform-origin:50% 100%;animation:nvbob 3.2s ease-in-out infinite}
@keyframes nvbob{50%{rotate:-4deg;translate:0 -4%}}


.op-case .nv-hz{position:absolute;left:8%;bottom:16%;font:700 clamp(40px,5vw,72px)/1 "Noto Sans SC",system-ui,sans-serif;color:rgba(255,255,255,.9);letter-spacing:.04em}
.op-case .nv-hz.h2{left:30%;bottom:auto;top:38%;font-size:clamp(22px,2.6vw,36px);color:rgba(255,255,255,.45)}
.op-case .nv-snow{position:absolute;right:16%;top:50%;width:26%;aspect-ratio:1;translate:0 -50%;filter:drop-shadow(0 16px 30px rgba(10,40,120,.4));animation:nvsnow 6s cubic-bezier(.45,0,.55,1) infinite}
.op-case .nv-snow svg{width:100%;height:100%;display:block}
@keyframes nvsnow{50%{rotate:30deg}}
.op-case .nv-ring{position:absolute;right:16%;top:50%;width:26%;aspect-ratio:1;translate:0 -50%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.5);animation:nvring 2.4s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes nvring{0%{scale:1;opacity:.8}100%{scale:2.2;opacity:0}}
.op-case .nv-env{position:absolute;width:5%;aspect-ratio:1.45;border-radius:3px;background:#fff;box-shadow:0 6px 14px rgba(10,40,120,.3);opacity:0;animation:nvenv 3s cubic-bezier(.5,0,.2,1) infinite}
.op-case .nv-env.e1{--sx:-260%;--sy:-160%;animation-delay:0s}.op-case .nv-env.e2{--sx:-360%;--sy:120%;animation-delay:.75s}.op-case .nv-env.e3{--sx:220%;--sy:-200%;animation-delay:1.5s}.op-case .nv-env.e4{--sx:240%;--sy:180%;animation-delay:2.25s}
.op-case .nv-env{right:26%;top:47%}
@keyframes nvenv{0%{opacity:0;translate:var(--sx) var(--sy);scale:1}15%{opacity:1}80%{opacity:1;scale:.8}100%{opacity:0;translate:0 0;scale:.3}}
.op-case .nc-cover::before{z-index:1}
@media (max-width:600px){.op-case .nc-wm{width:44%}.op-case .nv-ph{width:32%;right:6%}}
@media (prefers-reduced-motion:reduce){.op-case .nv-cat,.op-case .nv-disc,.op-case .nv-snow,.op-case .nv-ring,.op-case .nv-env{animation:none}}

/* no device mockups: brand objects only */






@keyframes nvbar{50%{scale:1 .82}}

@keyframes nvdot{50%{translate:0 18%}}
.op-case .nv-meld .nv-cat{left:auto;right:4%;bottom:-8%;width:52%}

/* Finna cover: the fund shapes from the app orbit a "$100" pill, hover widens + speeds the orbit */
@property --nvt{syntax:'<angle>';inherits:true;initial-value:0deg}
.op-case .nv-orb{position:absolute;right:20%;top:52%;width:0;height:0;--R:clamp(70px,9vw,120px);animation:nvorb 26s linear infinite;transition:--R .8s cubic-bezier(.3,1.4,.5,1)}
.op-case .nc-hero:hover .nv-orb{--R:clamp(84px,10.5vw,138px);animation-duration:9s}
@keyframes nvorb{to{--nvt:360deg}}
.op-case .nv-o{position:absolute;left:0;top:0;width:clamp(38px,4.6vw,58px);aspect-ratio:1;margin:calc(clamp(38px,4.6vw,58px)/-2) 0 0 calc(clamp(38px,4.6vw,58px)/-2);display:grid;place-items:center;background:var(--c);color:#fff;transform:rotate(calc(var(--a) + var(--nvt))) translateX(var(--R)) rotate(calc(-1*(var(--a) + var(--nvt))));box-shadow:0 10px 22px rgba(10,30,90,.28)}
.op-case .nv-o.ci{border-radius:50%}
.op-case .nv-o.sq{border-radius:28%}
.op-case .nv-o.cl{border-radius:50% 50% 50% 12%}
.op-case .nv-o svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.op-case .nv-100{position:absolute;left:0;top:0;translate:-50% -50%;padding:.55em 1em;border-radius:99px;background:#0B1220;color:#fff;font:700 clamp(15px,1.6vw,22px)/1 "Inter Tight","Inter",system-ui,sans-serif;white-space:nowrap;box-shadow:0 10px 24px rgba(10,30,90,.35);rotate:-6deg}
@media (max-width:600px){.op-case .nv-orb{right:24%;top:56%;--R:64px}.op-case .nv-o{width:32px;margin:-16px 0 0 -16px}}
@media (prefers-reduced-motion:reduce){.op-case .nv-orb{animation:none}}

.op-case .nv-o::after,.op-case .nv-o::before{display:none!important}
.op-case .nv-orb{--R:clamp(92px,11vw,150px);right:24%}
.op-case .nc-hero:hover .nv-orb{--R:clamp(104px,12.6vw,170px)}
.op-case .nv-o{width:clamp(50px,6vw,80px);margin:calc(clamp(50px,6vw,80px)/-2) 0 0 calc(clamp(50px,6vw,80px)/-2)}
.op-case .nv-100{font-size:clamp(18px,2vw,28px)}
@media (max-width:600px){.op-case .nv-orb{--R:72px;right:26%}.op-case .nv-o{width:38px;margin:-19px 0 0 -19px}}

/* Danzee cover: brand orange, a character written stroke by stroke in the practice grid (like the app), pinyin + tone bars */
.op-case .nv-dz .nv-disc,.op-case .nv-dz .nv-hz.h2{display:none}
.op-case .nv-grid{position:absolute;right:9%;top:50%;width:34%;aspect-ratio:1;translate:0 -50%;rotate:4deg;filter:drop-shadow(0 18px 34px rgba(120,30,10,.28));transition:rotate .8s cubic-bezier(.3,1.4,.5,1)}
.op-case .nc-hero:hover .nv-grid{rotate:0deg}
.op-case .nv-grid svg{display:block;width:100%;height:100%;overflow:visible}
.op-case .nv-hao{font:700 72px/1 "Noto Sans SC",system-ui,sans-serif;fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:nvwrite 5s cubic-bezier(.65,0,.25,1) infinite}
@keyframes nvwrite{0%{stroke-dashoffset:420;fill-opacity:0}55%{stroke-dashoffset:0;fill-opacity:0}70%,88%{stroke-dashoffset:0;fill-opacity:1}100%{stroke-dashoffset:0;fill-opacity:0}}
.op-case .nv-py{position:absolute;left:50%;top:-18%;translate:-50% 0;padding:.35em .8em;border-radius:99px;background:#fff;color:#E9583A;font:700 clamp(13px,1.4vw,18px)/1 "Inter Tight","Inter",system-ui,sans-serif;box-shadow:0 8px 18px rgba(120,30,10,.25)}
.op-case .nv-tone{position:absolute;left:8%;bottom:16%;display:flex;align-items:flex-end;gap:6px;height:22%}
.op-case .nv-tone i{width:10px;border-radius:5px;background:rgba(255,255,255,.85);animation:nvtone 1.4s ease-in-out infinite}
.op-case .nv-tone i:nth-child(1){height:40%;animation-delay:0s}.op-case .nv-tone i:nth-child(2){height:75%;animation-delay:.15s}.op-case .nv-tone i:nth-child(3){height:55%;animation-delay:.3s}.op-case .nv-tone i:nth-child(4){height:95%;animation-delay:.45s}
@keyframes nvtone{50%{scale:1 .45}}
.op-case .nv-tone i{transform-origin:bottom}
.op-case .nv-dz .nv-hz{left:auto;right:46%;bottom:12%;font-size:clamp(46px,5.6vw,80px);color:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){.op-case .nv-hao{animation:none;stroke-dashoffset:0;fill-opacity:1}.op-case .nv-tone i{animation:none}}

/* ===== next case v2: A = Flow-State deck (default), B = Cloudflare row (?next=row) ===== */
.op-case .nc-row{display:none}
html.nc-b .op-case .nc-flow{display:none}
html.nc-b .op-case .nc-row{display:grid}
.op-case .nc-flow,.op-case .nc-row{margin:0 calc(-1*clamp(32px,3.4vw,52px)) calc(-1*clamp(32px,3.4vw,52px));background:#0B0B0B;color:#fff}
/* A — deck */
.op-case .nc-flow{position:relative;overflow:hidden;padding:clamp(56px,6vw,84px) 0 clamp(28px,3vw,40px);display:flex;flex-direction:column;align-items:center}
.op-case .nc-flow .nc-mq{top:44%}
.op-case .fl-deck{position:relative;z-index:1;width:min(60%,640px);aspect-ratio:16/9;touch-action:pan-y}
.op-case .fl-card{position:absolute;inset:0;display:block;text-decoration:none;color:#fff;border-radius:10px;cursor:grab;user-select:none;-webkit-user-drag:none;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .4s ease,filter .5s ease;transform:translate(calc(var(--z)*22px),calc(var(--z)*-18px)) rotate(calc(var(--z)*3.5deg)) scale(calc(1 - var(--z)*.06));z-index:calc(10 - var(--z));filter:brightness(calc(1 - var(--z)*.18))}
.op-case .fl-card.drag{transition:none;cursor:grabbing}
.op-case .fl-card .nc-cover{position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;rotate:0deg;scale:1;animation:none;pointer-events:none}
.op-case .fl-card[style*="--z:0"] .nc-cover{box-shadow:0 40px 80px rgba(0,0,0,.55)}
.op-case .nc-flow:hover .fl-card[style*="--z:1"]{transform:translate(48px,-26px) rotate(6deg) scale(.94)}
.op-case .nc-flow:hover .fl-card[style*="--z:2"]{transform:translate(90px,-44px) rotate(11deg) scale(.88)}
.op-case .fl-card img{-webkit-user-drag:none;pointer-events:none}
.op-case .fl-cap{position:relative;z-index:2;width:min(60%,640px);margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.op-case .fl-txt{display:flex;flex-direction:column;gap:6px;transition:opacity .25s ease,translate .35s ease}
.op-case .fl-txt.sw{opacity:0;translate:0 6px}
.op-case .fl-txt b{font:600 clamp(16px,1.4vw,20px)/1.2 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:-.02em}
.op-case .fl-txt em{font:400 13px/1.3 "Inter",system-ui,sans-serif;font-style:normal;color:rgba(255,255,255,.65)}
.op-case .fl-sh{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#0B0B0B;cursor:pointer;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.op-case .fl-sh:hover{transform:rotate(-12deg) scale(1.06)}
.op-case .fl-sh svg{width:20px;height:20px}

@media (max-width:600px){.op-case .fl-deck,.op-case .fl-cap{width:80%}.op-case .nc-flow:hover .fl-card[style*="--z:1"]{transform:translate(22px,-18px) rotate(3.5deg) scale(.94)}.op-case .nc-flow:hover .fl-card[style*="--z:2"]{transform:translate(44px,-36px) rotate(7deg) scale(.88)}}
/* B — Cloudflare-style row */
.op-case .nc-row{grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);padding:clamp(28px,3vw,44px)}
.op-case .cf-card{position:relative;display:flex;flex-direction:column;min-height:clamp(340px,34vw,460px);padding:clamp(18px,1.8vw,26px);border-radius:14px;background:#141416;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.op-case .cf-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 60%,transparent)}
.op-case .cf-logo{display:block;width:46%;aspect-ratio:4.4/1;background:#fff;-webkit-mask:var(--w) left center/contain no-repeat;mask:var(--w) left center/contain no-repeat}
.op-case .cf-art{position:absolute;left:0;right:0;top:22%;bottom:30%;z-index:-1;background:repeating-linear-gradient(90deg,var(--b) 0 2px,transparent 2px 9px);-webkit-mask:radial-gradient(ellipse 70% 60% at 60% 50%,#000 10%,transparent 72%);mask:radial-gradient(ellipse 70% 60% at 60% 50%,#000 10%,transparent 72%);opacity:.9;transition:opacity .4s ease;animation:cfwave 6s ease-in-out infinite}
.op-case .cf-card:nth-child(2) .cf-art{animation-delay:-2s}.op-case .cf-card:nth-child(3) .cf-art{animation-delay:-4s}
@keyframes cfwave{50%{-webkit-mask-position:30px 0;mask-position:30px 0;opacity:.6}}
.op-case .cf-card:hover .cf-art{opacity:1;animation-duration:2.4s}
.op-case .cf-t{margin-top:auto;font:500 clamp(15px,1.3vw,19px)/1.3 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:-.015em}
.op-case .cf-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:500 13px/1 "Inter",system-ui,sans-serif;color:rgba(255,255,255,.75)}
.op-case .cf-go svg{width:15px;height:15px;transition:translate .3s ease}
.op-case .cf-card:hover .cf-go{color:#fff}
.op-case .cf-card:hover .cf-go svg{translate:4px 0}
@media (max-width:760px){.op-case .nc-row{grid-template-columns:1fr}.op-case .cf-card{min-height:260px}}
@media (prefers-reduced-motion:reduce){.op-case .cf-art{animation:none}}

/* ===== simplified covers: 1 = logo + brand shapes (Instrument), 2 = one big object (default); switch with ?cover=1|2 ===== */
.op-case .nc-cover .nv,.op-case .nc-cover .nc-wm,.op-case .nc-cover .nc-glare{display:none}
.op-case .cv1,.op-case .cv2{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
html:not(.cv-1) .op-case .cv1,html.cv-1 .op-case .cv2{display:none}
/* 1 */
.op-case .cv1 .sh{position:absolute;background:rgba(255,255,255,.16);transition:translate 1s cubic-bezier(.2,.8,.2,1),rotate 1s cubic-bezier(.2,.8,.2,1)}
.op-case .cv1 .s1{left:14%;top:12%;width:34%;aspect-ratio:1;border-radius:50%}
.op-case .cv1 .s2{left:44%;top:30%;width:30%;aspect-ratio:1;border-radius:22%;rotate:14deg;background:rgba(11,11,11,.16)}
.op-case .cv1 .s3{right:10%;bottom:-6%;width:0;height:0;border-left:clamp(50px,7vw,90px) solid transparent;border-right:clamp(50px,7vw,90px) solid transparent;border-bottom:clamp(86px,12vw,156px) solid rgba(255,255,255,.22);background:none;rotate:-12deg}
.op-case .cv1-logo{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:4.4/1;translate:-50% -50%;background:#fff;-webkit-mask:var(--w) center/contain no-repeat;mask:var(--w) center/contain no-repeat}
.op-case .fl-card[style*="--z:0"]:hover .cv1 .s1,.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .s1{translate:-8% 6%}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .s2{rotate:34deg;translate:6% -6%}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .s3{translate:-6% -8%;rotate:-2deg}
/* 2 */
.op-case .cv2-logo{position:absolute;left:clamp(18px,2.2vw,28px);top:clamp(18px,2.2vw,28px);width:30%;aspect-ratio:4.4/1;background:#fff;-webkit-mask:var(--w) left center/contain no-repeat;mask:var(--w) left center/contain no-repeat}
.op-case .c2-obj{position:absolute;transition:translate 1s cubic-bezier(.2,.8,.2,1),rotate 1s cubic-bezier(.2,.8,.2,1),scale 1s cubic-bezier(.2,.8,.2,1)}
.op-case .c2-fin{right:10%;top:12%;width:30%;rotate:12deg;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
.op-case .c2-meld{right:2%;bottom:-10%;width:54%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.3))}
.op-case .c2-dz{right:10%;top:50%;width:40%;aspect-ratio:1;translate:0 -50%;rotate:4deg}
.op-case .c2-dz svg{width:100%;height:100%;display:block}
.op-case .c2-dz text{font:700 74px/1 "Noto Sans SC",system-ui,sans-serif;fill:#fff}
.op-case .c2-cs{right:12%;top:50%;width:36%;aspect-ratio:1;translate:0 -50%;filter:drop-shadow(0 20px 36px rgba(10,40,120,.4))}
.op-case .c2-cs svg{width:100%;height:100%;display:block}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .c2-fin{rotate:4deg;translate:0 -6%}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .c2-meld{rotate:-5deg;translate:0 -4%}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .c2-dz{rotate:0deg;scale:1.05}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .c2-cs{rotate:60deg}

/* cover 1: logo + a brand-derived graphic (Finna F-bars, Danzee hourglass + grid, Meld M-zigzag, ColdSend snowflake arms) */
.op-case .cv1 .b1{position:absolute;inset:0;width:100%;height:100%}
.op-case .cv1 .b1 g{transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:center}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .bars{transform:translateX(6%)}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .hg{transform:rotate(180deg)}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .zz{transform:translateX(-8%)}
.op-case .nc-flow:hover .fl-card[style*="--z:0"] .cv1 .sf{transform:rotate(60deg)}

/* review-only switcher for the next-case variants */
.op-case .op-next{position:relative}
.op-case .nc-tg{position:absolute;right:0;top:calc(-1*clamp(32px,3.4vw,52px) + 8px);z-index:5;display:flex;align-items:center;gap:4px;padding:4px;border-radius:99px;background:#F1F1F3;font:500 11px/1 "Inter",system-ui,sans-serif;color:#555B68}
.op-case .nc-tg span{padding:0 6px 0 8px}
.op-case .nc-tg button{height:24px;padding:0 10px;border:0;border-radius:99px;background:transparent;color:#181B26;font:inherit;cursor:pointer}
.op-case .nc-tg button.on{background:#0B0B0B;color:#fff}
.op-case .op-next{margin-top:clamp(56px,6vw,88px)}

.op-case .nc-tg{top:-44px}

/* row cards: brand symbol drawn with the same vertical lines + a light band sweeping across */
.op-case .cf-card .cf-art{top:17%;bottom:31%;left:14%;right:14%;background:none;-webkit-mask:none;mask:none;animation:none;opacity:1}
.op-case .cf-card[href="#case-coldsend"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='white' stroke-width='3.6' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(60 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(120 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(180 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(240 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(300 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.op-case .cf-card[href="#case-finna"]{--m:url(/landing/assets/img/nc/finna-mark-mask.png)}
.op-case .cf-card[href="#case-danzee"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M9 3H31C31 12 26 17 20 20C26 23 31 28 31 37H9C9 28 14 23 20 20C14 17 9 12 9 3Z'/%3E%3C/svg%3E")}
.op-case .cf-card[href="#case-meld"]{--m:url(/landing/assets/img/nc/meld-mark-mask.png)}
.op-case .cf-art::before,.op-case .cf-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--b) 0 2px,transparent 2px 7px);animation:cfdrift 3.2s linear infinite}
.op-case .cf-art::before{opacity:.55;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.op-case .cf-art::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--b) 55%,#fff) 0 2px,transparent 2px 7px);
  -webkit-mask:var(--m) center/contain no-repeat,linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent) -100% 0/45% 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--m) center/contain no-repeat,linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent) -100% 0/45% 100% no-repeat;mask-composite:intersect;
  animation:cfdrift 3.2s linear infinite,cfsweep 3.6s cubic-bezier(.45,0,.35,1) infinite}
.op-case .cf-card:nth-child(2) .cf-art::after{animation-delay:0s,-1.2s}.op-case .cf-card:nth-child(3) .cf-art::after{animation-delay:0s,-2.4s}
@keyframes cfdrift{to{background-position:7px 0}}
@keyframes cfsweep{0%{-webkit-mask-position:center,-100% 0;mask-position:center,-100% 0}100%{-webkit-mask-position:center,250% 0;mask-position:center,250% 0}}
.op-case .cf-card:hover .cf-art::before{opacity:.6}
.op-case .cf-card:hover .cf-art::after{animation-duration:1.6s,1.8s}
@media (prefers-reduced-motion:reduce){.op-case .cf-art::before,.op-case .cf-art::after{animation:none}}
@media (max-width:760px){.op-case .cf-card{min-height:320px}.op-case .cf-card .cf-art{top:20%;bottom:36%}}
.op-case .cf-card[href="#case-finna"] .cf-art::before,.op-case .cf-card[href="#case-finna"] .cf-art::after{inset:14%}

/* deck covers v3: brand glow on deep base + the brand symbol drawn in white lines, bleeding off the edge, light sweep */
.op-case .fl-card .nc-coldsend{--b:#2F86FF;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='white' stroke-width='3.6' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(60 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(120 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(180 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(240 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3Cg transform='rotate(300 20 20)'%3E%3Cpath d='M20 20V6M20 11.5l-4.2-3.8M20 11.5l4.2-3.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.op-case .fl-card .nc-finna{--b:#3F6BFF;--m:url(/landing/assets/img/nc/finna-mark-mask.png)}
.op-case .fl-card .nc-danzee{--b:#F56F51;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M9 3H31C31 12 26 17 20 20C26 23 31 28 31 37H9C9 28 14 23 20 20C14 17 9 12 9 3Z'/%3E%3C/svg%3E")}
.op-case .fl-card .nc-meld{--b:#E8235E;--m:url(/landing/assets/img/nc/meld-mark-mask.png)}
.op-case .fl-card .nc-cover{background:radial-gradient(60% 90% at 78% 55%,color-mix(in srgb,var(--b) 75%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--b) 55%,#0B0B0E),#0B0B0E 75%);box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
.op-case .fl-card .c2-obj{display:none}
.op-case .fl-card .cv2::before,.op-case .fl-card .cv2::after{content:"";position:absolute;right:-4%;top:-14%;width:64%;height:128%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 2px,transparent 2px 8px);animation:cfdrift 3.2s linear infinite}
.op-case .fl-card .nc-finna .cv2::before,.op-case .fl-card .nc-finna .cv2::after{right:2%;top:-2%;width:54%;height:104%}
.op-case .fl-card .cv2::before{opacity:.28;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.op-case .fl-card .cv2::after{-webkit-mask:var(--m) center/contain no-repeat,linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent) -100% 0/45% 100% no-repeat;-webkit-mask-composite:source-in;mask:var(--m) center/contain no-repeat,linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent) -100% 0/45% 100% no-repeat;mask-composite:intersect;animation:cfdrift 3.2s linear infinite,cfsweep 3.6s cubic-bezier(.45,0,.35,1) infinite}
.op-case .fl-card:hover .cv2::before{opacity:.45}
.op-case .fl-card:hover .cv2::after{animation-duration:1.6s,1.8s}
.op-case .fl-card .cv2-logo{z-index:1}
@media (prefers-reduced-motion:reduce){.op-case .fl-card .cv2::before,.op-case .fl-card .cv2::after{animation:none}}
.op-case .fl-deck,.op-case .fl-cap{width:min(46%,500px)}
.op-case .fl-card .nc-finna .cv2::before,.op-case .fl-card .nc-finna .cv2::after{top:8%;height:84%}
@media (max-width:900px){.op-case .fl-deck,.op-case .fl-cap{width:62%}}@media (max-width:600px){.op-case .fl-deck,.op-case .fl-cap{width:80%}}
.op-case .fl-card .nc-cover{background:radial-gradient(55% 80% at 80% 45%,rgba(255,255,255,.22),transparent 70%),var(--nc);box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.2)}
.op-case .fl-card .cv2::before{opacity:.38}
.op-case .fl-card:hover .cv2::before{opacity:.55}
/* deck covers v4: same language as the Row cards — neutral dark card, brand only in the line symbol */
.op-case .fl-card .nc-cover{background:#141416;box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
.op-case .fl-card .cv2::before{background:repeating-linear-gradient(90deg,var(--b) 0 2px,transparent 2px 8px);opacity:.55}
.op-case .fl-card .cv2::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--b) 55%,#fff) 0 2px,transparent 2px 8px)}
.op-case .fl-card:hover .cv2::before{opacity:.75}
.op-case .fl-card:hover .nc-cover{box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--b) 55%,transparent)}
.op-case .fl-card .cv2::before,.op-case .fl-card .cv2::after{right:4%;top:6%;width:52%;height:88%}
.op-case .fl-card .nc-finna .cv2::before,.op-case .fl-card .nc-finna .cv2::after{right:8%;top:16%;width:44%;height:68%}
/* motifs instead of logos: what each product is about */
.op-case .cf-card[href="#case-coldsend"],.op-case .fl-card .nc-coldsend{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='white'%3E%3Cpath d='M7 9H33Q35 9 34 10.5L21.2 20.6Q20 21.5 18.8 20.6L6 10.5Q5 9 7 9Z'/%3E%3Cpath d='M4 13.2 18.2 24.4Q20 25.8 21.8 24.4L36 13.2V29Q36 31 34 31H6Q4 31 4 29Z'/%3E%3C/g%3E%3C/svg%3E")}
.op-case .cf-card[href="#case-finna"],.op-case .fl-card .nc-finna{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='white'%3E%3Crect x='4' y='26' width='5' height='10' rx='2.5'/%3E%3Crect x='11.5' y='20' width='5' height='16' rx='2.5'/%3E%3Crect x='19' y='23' width='5' height='13' rx='2.5'/%3E%3Crect x='26.5' y='13' width='5' height='23' rx='2.5'/%3E%3Crect x='34' y='5' width='5' height='31' rx='2.5'/%3E%3C/g%3E%3C/svg%3E")}
.op-case .cf-card[href="#case-danzee"],.op-case .fl-card .nc-danzee{--m:url(/landing/assets/img/nc/danzee-hao-mask.png)}
.op-case .cf-card[href="#case-meld"],.op-case .fl-card .nc-meld{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='white'%3E%3Cpath d='M8 6.5 27 3.2Q30 2.8 30.5 5.5L31 9H9Z'/%3E%3Cpath fill-rule='evenodd' d='M7 10H33Q36 10 36 13V17H27Q23 17 23 22Q23 27 27 27H36V31Q36 34 33 34H7Q4 34 4 31V13Q4 10 7 10ZM27 19.5H37V24.5H27Q25.5 24.5 25.5 22Q25.5 19.5 27 19.5Z'/%3E%3Ccircle cx='28.5' cy='22' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
.op-case .cf-card[href="#case-finna"] .cf-art::before,.op-case .cf-card[href="#case-finna"] .cf-art::after{inset:0}
.op-case .fl-card .nc-finna .cv2::before,.op-case .fl-card .nc-finna .cv2::after{right:4%;top:6%;width:52%;height:88%}

/* success stories, variant A: one big quote, client logos underneath act as tabs (autoplay with progress) */
.case .c3-nav{display:none!important}
.case .c3-track{display:grid!important;overflow:visible!important}
.case .c3-track > .case3{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s,translate .6s cubic-bezier(.2,.8,.2,1);translate:0 10px}
.case .c3-track > .case3.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .5s ease .1s,visibility 0s,translate .6s cubic-bezier(.2,.8,.2,1) .1s}
.case .case3{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "quote" "from"!important}
.case .case3 .c3-logo{display:none!important}
.case .case3 .c3-quote{max-width:21em!important;font-size:clamp(30px,3.3vw,48px)!important;line-height:1.12!important}
.case .c3-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:-1px;border:1px solid #e3e3e3;border-top:0}
.case .c3-tab{position:relative;height:clamp(64px,6vw,84px);border:0;border-left:1px solid #e3e3e3;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .3s ease}
.case .c3-tab:first-child{border-left:0}
.case .c3-tab:hover{background:rgba(11,11,11,.025)}
.case .c3-tl{display:block;width:min(58%,124px);height:26px;background:rgba(11,11,11,.3);-webkit-mask:var(--w) center/contain no-repeat;mask:var(--w) center/contain no-repeat;transition:background .3s ease}
.case .c3-tab:hover .c3-tl{background:rgba(11,11,11,.6)}
.case .c3-tab[aria-selected="true"] .c3-tl{background:#0B0B0B}
.case .c3-pr{position:absolute;left:0;right:0;top:-1px;height:2px;background:#0B0B0B;transform:scaleX(0);transform-origin:left}
.case .c3-tab[aria-selected="true"] .c3-pr{transform:scaleX(var(--tp,0))}
@media (max-width:600px){.case .c3-tab{height:56px}.case .c3-tl{width:72%;height:18px}}
@media (prefers-reduced-motion:reduce){.case .c3-track > .case3{transition:none}}
.case .c3-track > .case3{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.case .c3-tabs{border-radius:0 0 10px 10px;overflow:hidden}
.case .c3-pr{top:0}
@media (max-width:600px){.case .c3-tl{width:80%;height:20px}}

/* partners: the logo grid becomes a slow moving strip (duplicated set, seamless loop, fades at the edges, pauses on hover) */
.case .fund2.starsv .f2-vp{padding:12px;border-radius:12px;background:url("/landing/assets/img/halftone-grey-tile.svg?v=1") 0 0/96px 96px repeat,linear-gradient(180deg,#f6f6f6 0%,#f1f1f1 100%);box-shadow:inset 0 0 0 1px #e3e3e3}
.case .fund2.starsv .f2-in{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.case .fund2.starsv .f2-tile,.case .fund2.starsv .f2-tile .f2-c{padding:0 22px!important}
.case .fund2.starsv .f2-logos{display:flex!important;flex-wrap:nowrap;width:max-content!important;gap:0!important;padding:4px 0!important;background:none!important;box-shadow:none!important;border-radius:0;animation:f2strip 34s linear infinite}
.case .fund2.starsv .f2-tile{flex:0 0 auto;width:clamp(150px,13vw,190px)!important;height:clamp(68px,5.6vw,84px)!important;margin-right:10px!important}
.case .fund2.starsv:hover .f2-logos{animation-play-state:paused}
@keyframes f2strip{to{transform:translateX(-50%)}}
@media (max-width:600px){.case .fund2.starsv .f2-tile{width:130px!important;height:60px!important}.case .fund2.starsv .f2-logos{animation-duration:26s}}
@media (prefers-reduced-motion:reduce){.case .fund2.starsv .f2-logos{animation:none}.case .fund2.starsv .f2-in{overflow-x:auto}}

/* tabs switch: the card frame stays put, only its content fades in (no jumping box) */
.case .c3-track > .case3,.case .c3-track > .case3.on{opacity:1!important;visibility:visible!important;translate:none!important;transition:none!important;z-index:0}
.case .c3-track > .case3.on{z-index:1}
.case .c3-track > .case3 > *{opacity:0;visibility:hidden;translate:0 8px;transition:opacity .35s ease,translate .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.case .c3-track > .case3.on > *{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s ease .05s,translate .6s cubic-bezier(.2,.8,.2,1) .05s,visibility 0s}
.case .c3-tab:focus{outline:none}
.case .c3-tab:focus-visible{outline:2px solid #0B0B0B;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.case .c3-track > .case3 > *{transition:none!important;translate:none!important}}

.case .c3-rail{margin-top:clamp(32px,3.2vw,48px)}

/* tabs sit above the quote card; logos optically matched in size */
.case .c3-tabs{margin-top:clamp(32px,3.2vw,48px);border:1px solid #e3e3e3!important;border-bottom:0!important;border-radius:10px 10px 0 0!important}
.case .c3-rail{margin-top:0!important}
.case .c3-track > .case3{border-radius:0 0 10px 10px!important}
.case .c3-pr{top:auto!important;bottom:0}
.case .c3-tab{height:clamp(56px,4.6vw,68px)}
.case .c3-tl{--s:1;width:calc(var(--lw) * var(--s))!important;height:calc(var(--lh) * var(--s))!important;-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important}
.case .c3-tl-fi{--lw:62px;--lh:14.4px}
.case .c3-tl-dz{--lw:83px;--lh:17.6px}
.case .c3-tl-ml{--lw:83px;--lh:19px}
.case .c3-tl-cs{--lw:96px;--lh:21.4px}
@media (max-width:600px){.case .c3-tab{height:48px}.case .c3-tl{--s:.72}}

/* tabs like the reference: grey inactive tabs with a bottom rule, active tab white and merged with the card, progress on top */
.case .c3-tabs{overflow:hidden}
.case .c3-tab{justify-items:start;padding:0 clamp(18px,2.2vw,32px);background:#f6f6f6;box-shadow:inset 0 -1px 0 #e3e3e3;transition:background .3s ease,box-shadow .3s ease}
.case .c3-tab:hover{background:#f1f1f1}
.case .c3-tab[aria-selected="true"]{background:#fff;box-shadow:none}
.case .c3-pr{top:0!important;bottom:auto!important}
.case .c3-track > .case3{border-top:0!important}
@media (max-width:600px){.case .c3-tab{justify-items:center;padding:0 6px}}

/* taller story card, laid out like the reference: logo top-left, quote low in the middle, author bottom-left */
.case .c3-track > .case3{grid-template-rows:auto 1fr auto!important;min-height:clamp(440px,40vw,600px)}
.case .case3 .c3-name{font-size:0!important;line-height:0!important;padding-top:clamp(28px,3vw,44px)!important}
.case .case3 .c3-name::before{content:"";display:block;width:calc(var(--lw) * 1.25);height:calc(var(--lh) * 1.25);background:#0B0B0B;-webkit-mask:var(--w) 0 50%/100% 100% no-repeat;mask:var(--w) 0 50%/100% 100% no-repeat}
.case .case3{--w:url(/landing/assets/img/finna-word.png);--lw:62px;--lh:14.4px}
.case .case3-dz{--w:url(/landing/assets/img/danzee-word.webp);--lw:83px;--lh:17.6px}
.case .case3-ml{--w:url(/landing/assets/img/meld-word.png);--lw:83px;--lh:19px}
.case .case3-cs{--w:url(/landing/assets/img/coldsend-word.png);--lw:96px;--lh:21.4px}
.case .case3 .c3-quote{align-self:end!important;padding-bottom:clamp(36px,4vw,64px)!important}
.case .case3 .c3-from{justify-content:flex-start!important;border-top:0!important;padding-top:0!important;padding-bottom:clamp(28px,3vw,44px)!important}
@media (max-width:600px){.case .c3-track > .case3{min-height:400px}.case .case3 .c3-name::before{width:calc(var(--lw) * 1.05);height:calc(var(--lh) * 1.05)}}

.case .case3 .c3-name{display:none!important}

/* story card: picture with "See the story" bottom-right (same line-art language as the Next case covers) */
.case .c3-track > .case3{grid-template-columns:minmax(0,1fr) clamp(280px,34vw,520px)!important;grid-template-areas:"name name" "quote shot" "from shot"!important}
.case .c3-shot{grid-area:shot;align-self:end;position:relative;display:block;aspect-ratio:16/9;margin:0 clamp(24px,3vw,48px) clamp(28px,3vw,44px) 0;border-radius:8px;overflow:hidden;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);isolation:isolate}
.case .c3-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--b) 55%,#141416) 130%);z-index:1;pointer-events:none}
.case .c3-sart{position:absolute;right:8%;top:12%;width:46%;height:76%}
.case .c3-sart::before,.case .c3-sart::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--b) 0 2px,transparent 2px 7px);animation:cfdrift 3.2s linear infinite}
.case .c3-sart::before{opacity:.55;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.case .c3-sart::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--b) 55%,#fff) 0 2px,transparent 2px 7px);-webkit-mask:var(--m) center/contain no-repeat,linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent) -100% 0/45% 100% no-repeat;-webkit-mask-composite:source-in;mask:var(--m) center/contain no-repeat,linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent) -100% 0/45% 100% no-repeat;mask-composite:intersect;animation:cfdrift 3.2s linear infinite,cfsweep 3.6s cubic-bezier(.4,0,.2,1) infinite}
.case .c3-scap{position:absolute;left:clamp(16px,1.6vw,24px);bottom:clamp(14px,1.4vw,20px);z-index:2;display:grid;gap:2px;font-size:clamp(15px,1.15vw,18px);line-height:1.25;color:#fff}
.case .c3-sn{color:rgba(255,255,255,.6)}
.case .c3-sgo{position:absolute;right:clamp(14px,1.4vw,20px);bottom:clamp(14px,1.4vw,20px);z-index:2;width:30px;height:30px;border-radius:50%;background:#fff;color:#0B0B0B;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.case .case3:hover .c3-sgo{transform:rotate(45deg)}
.case .case3:hover .c3-sart::after{animation-duration:1.6s,1.8s}
.case .c3-shot-finna{--b:#3F6BFF;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='white'%3E%3Crect x='4' y='26' width='5' height='10' rx='2.5'/%3E%3Crect x='11.5' y='20' width='5' height='16' rx='2.5'/%3E%3Crect x='19' y='23' width='5' height='13' rx='2.5'/%3E%3Crect x='26.5' y='13' width='5' height='23' rx='2.5'/%3E%3Crect x='34' y='5' width='5' height='31' rx='2.5'/%3E%3C/g%3E%3C/svg%3E")}
.case .c3-shot-danzee{--b:#F56F51;--m:url(/landing/assets/img/nc/danzee-hao-mask.png)}
.case .c3-shot-meld{--b:#E8235E;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='white'%3E%3Cpath d='M8 6.5 27 3.2Q30 2.8 30.5 5.5L31 9H9Z'/%3E%3Cpath fill-rule='evenodd' d='M7 10H33Q36 10 36 13V17H27Q23 17 23 22Q23 27 27 27H36V31Q36 34 33 34H7Q4 34 4 31V13Q4 10 7 10ZM27 19.5H37V24.5H27Q25.5 24.5 25.5 22Q25.5 19.5 27 19.5Z'/%3E%3Ccircle cx='28.5' cy='22' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
.case .c3-shot-coldsend{--b:#2F86FF;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='white'%3E%3Cpath d='M7 9H33Q35 9 34 10.5L21.2 20.6Q20 21.5 18.8 20.6L6 10.5Q5 9 7 9Z'/%3E%3Cpath d='M4 13.2 18.2 24.4Q20 25.8 21.8 24.4L36 13.2V29Q36 31 34 31H6Q4 31 4 29Z'/%3E%3C/g%3E%3C/svg%3E")}
@media (max-width:760px){.case .c3-track > .case3{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "quote" "from" "shot"!important;grid-template-rows:auto 1fr auto auto!important;min-height:0}.case .case3 .c3-quote{padding-top:clamp(56px,14vw,72px)!important;padding-bottom:24px!important}.case .c3-shot{margin:0 20px 20px}.case .case3 .c3-from{padding-bottom:20px!important}}
@media (prefers-reduced-motion:reduce){.case .c3-sart::before,.case .c3-sart::after{animation:none}}

/* coloured tabs: each client in its brand colour, the selected one turns white */
.case .c3-tab:has(.c3-tl-fi){--b:#3F6BFF}.case .c3-tab:has(.c3-tl-dz){--b:#F56F51}.case .c3-tab:has(.c3-tl-ml){--b:#E8235E}.case .c3-tab:has(.c3-tl-cs){--b:#2F86FF}
.case .c3-tab{background:var(--b);box-shadow:inset 0 -1px 0 #e3e3e3;border-left-color:rgba(255,255,255,.18)!important}
.case .c3-tab .c3-tl{background:rgba(255,255,255,.85)}
.case .c3-tab:hover{background:color-mix(in srgb,var(--b) 88%,#000)}
.case .c3-tab:hover .c3-tl{background:#fff}
.case .c3-tab[aria-selected="true"]{background:#fff;box-shadow:none}
.case .c3-tab[aria-selected="true"] .c3-tl{background:#0B0B0B}
.case .c3-tab[aria-selected="true"] + .c3-tab,.case .c3-tab[aria-selected="true"]{border-left-color:#e3e3e3!important}
.case .c3-pr{background:var(--b)!important;height:3px}

/* like the reference: quote sits in the middle of the card, author pinned to the bottom, level with the picture */
.case .case3 .c3-quote{align-self:center!important;padding-top:clamp(40px,4vw,64px)!important;padding-bottom:clamp(40px,4vw,64px)!important}
.case .case3 .c3-from{align-self:end;padding-bottom:clamp(28px,3vw,44px)!important}
.case .c3-track > .case3{grid-template-areas:"name name" "quote quote" "from shot"!important;grid-template-rows:auto 1fr auto!important}
.case .c3-shot{margin-bottom:clamp(28px,3vw,44px)}
@media (max-width:760px){.case .c3-track > .case3{grid-template-areas:"name" "quote" "from" "shot"!important;grid-template-rows:auto 1fr auto auto!important}.case .case3 .c3-quote{padding-top:clamp(56px,14vw,72px)!important;padding-bottom:28px!important}.case .c3-shot{margin:20px 20px 20px}}

.case .c3-track > .case3 > .f2-x{display:none!important}

/* only the "See the story" picture opens the case */
.case .c3-track > .case3{cursor:default!important;background-image:none!important}
.case .c3-shot{cursor:pointer;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.case .c3-shot:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18),inset 0 0 0 1px color-mix(in srgb,var(--b) 55%,transparent)}
.case .case3:hover .c3-sgo{transform:none}
.case .c3-shot:hover .c3-sgo{transform:rotate(45deg)}
.case .case3:hover .c3-sart::after{animation-duration:3.2s,3.6s}
.case .c3-shot:hover .c3-sart::after{animation-duration:1.6s,1.8s}
.case .c3-shot:focus-visible{outline:2px solid #0B0B0B;outline-offset:3px}

/* tabs: soft brand tints instead of full colour; logo carries the brand colour */
.case .c3-tab{background:color-mix(in srgb,var(--b) 9%,#fff);box-shadow:inset 0 -1px 0 #e3e3e3;border-left-color:#e3e3e3!important}
.case .c3-tab .c3-tl{background:color-mix(in srgb,var(--b) 80%,#0B0B0B)}
.case .c3-tab:hover{background:color-mix(in srgb,var(--b) 15%,#fff)}
.case .c3-tab:hover .c3-tl{background:color-mix(in srgb,var(--b) 70%,#0B0B0B)}
.case .c3-tab[aria-selected="true"]{background:#fff;box-shadow:none}
.case .c3-tab[aria-selected="true"] .c3-tl{background:#0B0B0B}

/* tabs: neutral grey, grey logos; brand colour only in the progress line (and the picture) */
.case .c3-tab{background:#f6f6f6;box-shadow:inset 0 -1px 0 #e3e3e3;border-left-color:#e3e3e3!important}
.case .c3-tab .c3-tl{background:rgba(11,11,11,.35)}
.case .c3-tab:hover{background:#f1f1f1}
.case .c3-tab:hover .c3-tl{background:rgba(11,11,11,.6)}
.case .c3-tab[aria-selected="true"]{background:#fff;box-shadow:none}
.case .c3-tab[aria-selected="true"] .c3-tl{background:#0B0B0B}

/* "See the story" picture shows the real product: brand-tinted backdrop, phone / dashboard rising from the bottom-right */
.case .c3-shot{background:radial-gradient(70% 90% at 78% 30%,color-mix(in srgb,var(--b) 70%,#fff 10%),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--b) 45%,#141416),color-mix(in srgb,var(--b) 20%,#0B0B0E))}
.case .c3-shot::after{background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.72) 100%)}
.case .c3-sp{position:absolute;z-index:0;right:9%;top:13%;width:33%;height:auto;border-radius:0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));transform:rotate(-4deg);transform-origin:50% 0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case .c3-shot-coldsend .c3-sp{right:auto;left:30%;top:16%;width:92%;transform:none}
.case .c3-shot:hover .c3-sp{transform:rotate(-2deg) translateY(-6px)}
.case .c3-shot-coldsend:hover .c3-sp{transform:translateY(-6px)}
@media (max-width:760px){.case .c3-sp{width:36%}}

/* "See the story" = full-bleed product cover (screens on brand colour), white client logo top-right */
.case .c3-shot{background:#141416}
.case .c3-sp,.case .c3-shot-coldsend .c3-sp{position:absolute;inset:0;left:0;top:0;right:auto;width:100%;height:100%;object-fit:cover;object-position:60% 40%;filter:none;transform:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.case .c3-shot:hover .c3-sp,.case .c3-shot-coldsend:hover .c3-sp{transform:scale(1.04)}
.case .c3-shot::after{background:linear-gradient(200deg,transparent 45%,rgba(8,8,10,.62) 100%)}
.case .c3-shot::before{content:"";position:absolute;z-index:2;top:clamp(12px,1.3vw,18px);right:clamp(14px,1.4vw,20px);width:calc(var(--lw) * 1.1);height:calc(var(--lh) * 1.1);background:#fff;-webkit-mask:var(--w) right center/contain no-repeat;mask:var(--w) right center/contain no-repeat;filter:drop-shadow(0 1px 6px rgba(0,0,0,.25))}
.case .c3-shot-finna{--w:url(/landing/assets/img/finna-word.png);--lw:62px;--lh:14.4px}
.case .c3-shot-danzee{--w:url(/landing/assets/img/danzee-word.webp);--lw:83px;--lh:17.6px}
.case .c3-shot-meld{--w:url(/landing/assets/img/meld-word.png);--lw:83px;--lh:19px}
.case .c3-shot-coldsend{--w:url(/landing/assets/img/coldsend-word.png);--lw:96px;--lh:21.4px}
.case .c3-scap{text-shadow:0 1px 10px rgba(0,0,0,.25)}
.case .c3-sn{color:rgba(255,255,255,.75)}

.case .c3-track > .case3{grid-template-columns:minmax(0,1fr) clamp(300px,42vw,620px)!important}
.case .c3-shot::before{right:auto;left:clamp(16px,1.6vw,24px);top:clamp(14px,1.5vw,22px);-webkit-mask-position:left center;mask-position:left center}

/* light studio covers: dark logo on the grey wall, scrim only at the bottom for the caption */
.case .c3-shot{background:#ececed;box-shadow:inset 0 0 0 1px rgba(11,11,11,.06)}
.case .c3-shot::before{background:#0B0B0B;filter:none}
.case .c3-shot::after{background:linear-gradient(180deg,transparent 52%,rgba(11,11,13,.18) 66%,rgba(11,11,13,.66) 100%)}

@media (max-width:760px){.case .c3-track > .case3{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "quote" "from" "shot"!important;grid-template-rows:auto 1fr auto auto!important;min-height:0!important}.case .c3-shot{margin:8px 20px 20px!important}}

.case .c3-shot::before{content:none!important;display:none!important}


/* ColdSend case, domain + billing tiles: inside the browser mockup the flow is a full page (a screen), not a floating modal card */
#op-case-coldsend .cs-row .s7b,#op-case-coldsend .cs-row .s7c{background:#fff!important}
#op-case-coldsend .cs-row .s7b .s7-card,#op-case-coldsend .cs-row .s7c .s7-card{width:auto!important;min-height:100%;margin:0!important;border-radius:0!important;box-shadow:none!important;background:#fff}
#op-case-coldsend .cs-row .s7b .s7-topb{background:#fff}

#op-case-coldsend .cs-row .cs-b .cs-scr,#op-case-coldsend .cs-row .cs-c .cs-scr{--w:calc(100cqw/530)!important}
#op-case-coldsend .cs-row .s7b .s7-card,#op-case-coldsend .cs-row .s7c .s7-card{width:100%!important;min-height:0}
#op-case-coldsend .cs-row .cs-b .cs-win,#op-case-coldsend .cs-row .cs-c .cs-win{--cw:98cqw!important;--cx:7cqw!important;--cy:9cqw!important}

#op-case-coldsend .cs-row .s7b .s7-topb{display:none!important}
#op-case-coldsend .cs-row .s7b .s7-card{margin-top:0!important}

/* show the whole flow: window fits inside the tile, grows with its content, no bottom fade */
#op-case-coldsend .cs-row .cs-b .cs-win,#op-case-coldsend .cs-row .cs-c .cs-win{--cw:86cqw!important;left:7cqw!important;top:50%!important;translate:0 calc(-50% + 4cqw)!important;aspect-ratio:auto!important;height:auto!important;border-radius:calc(2cqw + 6px)!important;-webkit-mask:none!important;mask:none!important}
#op-case-coldsend.play .cs-row .cs-b .cs-win,#op-case-coldsend.play .cs-row .cs-c .cs-win{translate:0 -50%!important}
#op-case-coldsend .cs-row .cs-b .cs-scr,#op-case-coldsend .cs-row .cs-c .cs-scr{height:auto!important;overflow:hidden}

/* like the servers tile: window bleeds off the right and bottom edges, the whole flow stays in view */
#op-case-coldsend .cs-row .cs-b .cs-win,#op-case-coldsend .cs-row .cs-c .cs-win{left:7cqw!important;top:9cqw!important;bottom:-6cqw!important;width:auto!important;right:-6cqw!important;height:auto!important;aspect-ratio:auto!important;translate:0 4cqw!important;border-radius:calc(2cqw + 6px) 0 0 0!important;-webkit-mask:none!important;mask:none!important}
#op-case-coldsend.play .cs-row .cs-b .cs-win,#op-case-coldsend.play .cs-row .cs-c .cs-win{translate:0 0!important}
#op-case-coldsend .cs-row .cs-b .cs-scr,#op-case-coldsend .cs-row .cs-c .cs-scr{height:100%!important;--w:calc(100cqw/600)!important;display:block!important;background:#fff!important}
#op-case-coldsend .cs-row .s7b .s7-card,#op-case-coldsend .cs-row .s7c .s7-card{width:calc(530*var(--w))!important}

/* Next case · Row, Bundl/3M-like covers: light grey studio, brand logo top-left, real product device bleeding off the right/bottom, white title on a bottom scrim */
.op-case .cf-card{background:linear-gradient(180deg,#efefef 0%,#e2e2e3 50%,#c9c9cb 100%)!important;box-shadow:none!important}
.op-case .cf-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(10,10,12,.28) 64%,rgba(10,10,12,.72) 100%)}
.op-case .cf-card .cf-logo{position:relative;z-index:2;width:52%;background:var(--b)}
.op-case .cf-card[href="#case-finna"] .cf-logo{width:44%}
.op-case .cf-card .cf-t,.op-case .cf-card .cf-go{position:relative;z-index:2}
.op-case .cf-card .cf-go{color:rgba(255,255,255,.85)}
.op-case .cf-card .cf-art{position:absolute!important;inset:auto!important;right:-12%!important;top:22%!important;width:60%!important;height:auto!important;aspect-ratio:560/1050;z-index:0;opacity:1!important;-webkit-mask:none!important;mask:none!important;animation:none!important;background:var(--dev) center top/100% auto no-repeat!important;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));transform:rotate(-6deg);transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.op-case .cf-card .cf-art::before,.op-case .cf-card .cf-art::after{content:none!important;display:none!important}
.op-case .cf-card[href="#case-finna"]{--dev:url(/landing/assets/img/nc/dev-finna.webp)}
.op-case .cf-card[href="#case-danzee"]{--dev:url(/landing/assets/img/nc/dev-danzee.webp)}
.op-case .cf-card[href="#case-meld"]{--dev:url(/landing/assets/img/nc/dev-meld.webp)}
.op-case .cf-card[href="#case-meld"] .cf-art{aspect-ratio:560/1171}
.op-case .cf-card[href="#case-coldsend"]{--dev:url(/landing/assets/img/nc/dev-coldsend.webp)}
.op-case .cf-card[href="#case-coldsend"] .cf-art{width:130%!important;right:-62%!important;top:26%!important;aspect-ratio:1300/859;transform:rotate(-4deg)}
.op-case .cf-card:hover{transform:translateY(-4px)}
.op-case .cf-card:hover .cf-art{transform:rotate(-3deg) translateY(-10px)}
.op-case .cf-card[href="#case-coldsend"]:hover .cf-art{transform:rotate(-2deg) translateY(-10px)}
@media (max-width:760px){.op-case .cf-card{min-height:380px!important}.op-case .cf-card .cf-art{width:46%!important;right:-6%!important;top:20%!important}.op-case .cf-card[href="#case-coldsend"] .cf-art{width:110%!important;right:-48%!important}}

/* Next case · Row = Bundl-like carousel: one big cover centred, neighbours peek, steps every 5s, dots */
.op-case .nc-row.is-car{display:block!important;padding:clamp(28px,3vw,44px) 0 clamp(22px,2.4vw,32px)!important;overflow:hidden;grid-template-columns:none!important}
html:not(.nc-b) .op-case .nc-row.is-car{display:none!important}
.op-case .nc-car{position:relative;overflow:visible;touch-action:pan-y}
.op-case .nc-ctrack{display:flex;width:100%;gap:clamp(10px,1.2vw,16px);will-change:transform;transition:transform .7s cubic-bezier(.45,0,.55,1)}
.op-case .nc-ctrack.nt{transition:none}
.op-case .nc-car .cf-card{flex:0 0 var(--cw,76%);min-height:0!important;aspect-ratio:1600/760;padding:clamp(18px,2vw,30px)!important;border-radius:6px!important;background:#d9d9db var(--cov) center/cover no-repeat!important;box-shadow:none!important;transform:none!important;cursor:pointer}
.op-case .nc-car .cf-card::after{background:linear-gradient(180deg,transparent 48%,rgba(10,10,12,.30) 70%,rgba(10,10,12,.72) 100%)!important;transition:opacity .5s ease}
.op-case .nc-car .cf-card .cf-art{display:none!important}
.op-case .nc-car .cf-card .cf-logo{width:clamp(110px,14vw,190px)!important}
.op-case .nc-car .cf-card .cf-t{max-width:min(30em,62%);font-size:clamp(18px,1.9vw,28px)!important;line-height:1.18!important}
.op-case .nc-car .cf-card .cf-t,.op-case .nc-car .cf-card .cf-go{opacity:0;translate:0 10px;transition:opacity .45s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.op-case .nc-car .cf-card::after{opacity:.35}
.op-case .nc-car .cf-card.act .cf-t,.op-case .nc-car .cf-card.act .cf-go{opacity:1;translate:0 0;transition-delay:.25s}
.op-case .nc-car .cf-card.act::after{opacity:1}
.op-case .nc-car .cf-card[href="#case-finna"]{--cov:url(/landing/assets/img/nc/cov-finna.webp?v=10)}
.op-case .nc-car .cf-card[href="#case-danzee"]{--cov:url(/landing/assets/img/nc/cov-danzee.webp?v=10)}
.op-case .nc-car .cf-card[href="#case-meld"]{--cov:url(/landing/assets/img/nc/cov-meld.webp?v=10)}
.op-case .nc-car .cf-card[href="#case-coldsend"]{--cov:url(/landing/assets/img/nc/cov-coldsend.webp?v=10)}
.op-case .nc-dots{display:flex;justify-content:center;gap:8px;margin-top:clamp(16px,1.8vw,22px)}
.op-case .nc-dots button{width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .4s cubic-bezier(.2,.8,.2,1),background .3s}
.op-case .nc-dots button.on{width:22px;background:#fff}
.op-case .nc-car .cf-card .cf-go{font:500 13px/1 "Inter",system-ui,sans-serif!important}
@media (max-width:760px){.op-case .nc-car .cf-card{--cw:84%;aspect-ratio:4/5;background-position:72% center!important}.op-case .nc-car .cf-card .cf-t{max-width:none}}
@media (prefers-reduced-motion:reduce){.op-case .nc-ctrack{transition:none}}

/* carousel like Bundl: white section + white covers; scrim and the story line appear on hover (always on the active card on touch) */
.op-case .nc-row.is-car{background:#fff!important;color:#0B0B0B}
.op-case .nc-car .cf-card{background-color:#fff!important;box-shadow:inset 0 0 0 1px #ececec!important}
.op-case .nc-car .cf-card::after,.op-case .nc-car .cf-card.act::after{opacity:0}
.op-case .nc-car .cf-card .cf-t,.op-case .nc-car .cf-card .cf-go,.op-case .nc-car .cf-card.act .cf-t,.op-case .nc-car .cf-card.act .cf-go{opacity:0;translate:0 12px;transition-delay:0s}
@media (hover:hover){.op-case .nc-car .cf-card:hover::after{opacity:1}.op-case .nc-car .cf-card:hover .cf-t,.op-case .nc-car .cf-card:hover .cf-go{opacity:1;translate:0 0}.op-case .nc-car .cf-card:hover .cf-go{transition-delay:.06s}}
@media (hover:none){.op-case .nc-car .cf-card.act::after{opacity:1}.op-case .nc-car .cf-card.act .cf-t,.op-case .nc-car .cf-card.act .cf-go{opacity:1;translate:0 0;transition-delay:.25s}}
.op-case .nc-dots button{background:rgba(11,11,11,.18)}
.op-case .nc-dots button.on{background:#0B0B0B}

/* 3M-like: big brand logo centred in the white left half; it fades back when the story line comes up on hover */
.op-case .nc-car .cf-card .cf-logo{position:absolute!important;left:7%;top:50%;translate:0 -50%;width:26%!important;max-width:260px;aspect-ratio:3.6/1;-webkit-mask-position:left center!important;mask-position:left center!important;transition:opacity .45s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.op-case .nc-car .cf-card[href="#case-finna"] .cf-logo{width:22%!important}
@media (hover:hover){.op-case .nc-car .cf-card:hover .cf-logo{opacity:.0;translate:0 calc(-50% - 10px)}}
.op-case .nc-car .cf-card .cf-t{max-width:min(26em,48%)!important}
@media (max-width:760px){.op-case .nc-car .cf-card .cf-logo{top:clamp(22px,6vw,30px);translate:none;width:46%!important}.op-case .nc-car .cf-card{background-position:78% center!important}.op-case .nc-car .cf-card .cf-t{max-width:none!important}}

/* carousel covers can carry a looping presentation video (plays only on the active card) */
.op-case .nc-car .cf-card .cf-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:0;transition:opacity .5s ease;pointer-events:none;border-radius:inherit}
.op-case .nc-car .cf-card .cf-vid.on{opacity:1}
@media (max-width:760px){.op-case .nc-car .cf-card .cf-vid{object-position:78% center}}

/* story card, like the reference: case headline instead of a quote, one metric at the bottom */
.case .case3 .c3-head{margin:0;font-weight:400;max-width:22em!important}
.case .case3 .c3-met{display:grid!important;justify-content:start!important;gap:clamp(6px,.6vw,10px)}
.case .c3-ml{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.6)}
.case .c3-mv{font:400 clamp(44px,5.2vw,76px)/.95 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:-.04em;color:#0B0B0B}

/* covers on Zade brand gradients: logo white (dark on the light ColdSend gradient) */
.op-case .nc-car .cf-card .cf-logo{background:#fff!important;filter:drop-shadow(0 2px 14px rgba(0,0,0,.18))}
.op-case .nc-car .cf-card[href="#case-coldsend"] .cf-logo{background:#0B0B0B!important;filter:none}
.op-case .nc-car .cf-card{box-shadow:none!important}

/* new covers carry the device on the right/centre — keep the photo framing as composed */
.case .c3-sp,.case .c3-shot-coldsend .c3-sp{object-position:50% 50%}

/* Meld mascot: a separate layer on the covers so it can move — gentle bob and a wave */
@keyframes meldcat{0%,100%{transform:translateY(0) rotate(4deg)}25%{transform:translateY(-4%) rotate(1deg)}50%{transform:translateY(-1%) rotate(7deg)}75%{transform:translateY(-5%) rotate(2deg)}}
.op-case .nc-car .cf-card[href="#case-meld"] .cf-art,.case .c3-cat{display:block!important;position:absolute!important;inset:auto!important;z-index:1!important;background:url(/landing/assets/img/meld/home/cat.webp) center bottom/contain no-repeat!important;-webkit-mask:none!important;mask:none!important;opacity:1!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.28))!important;transform-origin:50% 95%;animation:meldcat 3.6s ease-in-out infinite!important;pointer-events:none}
.op-case .nc-car .cf-card[href="#case-meld"] .cf-art{left:44.9%!important;bottom:-2.6%!important;width:24.5%!important;height:auto!important;aspect-ratio:640/525!important;top:auto!important;right:auto!important}
.op-case .nc-car .cf-card[href="#case-meld"] .cf-art::before,.op-case .nc-car .cf-card[href="#case-meld"] .cf-art::after{content:none!important}
.op-case .nc-car .cf-card[href="#case-meld"]:hover .cf-art,.case .c3-shot:hover .c3-cat{animation-duration:1.8s!important}
.case .c3-cat{left:28.2%!important;bottom:-2.8%!important;width:27.6%!important;aspect-ratio:640/525}
@media (max-width:760px){.op-case .nc-car .cf-card[href="#case-meld"] .cf-art{left:-9%!important;width:64.5%!important}}
@media (prefers-reduced-motion:reduce){.op-case .nc-car .cf-card[href="#case-meld"] .cf-art,.case .c3-cat{animation:none!important;transform:rotate(4deg)}}

/* story card proportions like the reference: taller card, picture ~35% wide (600x330), 20px from the right/bottom edges */
@media (min-width:761px){
.case .c3-track > .case3{grid-template-columns:minmax(0,1fr) 35.3%!important;min-height:clamp(480px,50vw,680px)!important}
.case .c3-shot{aspect-ratio:600/330!important;margin:0 20px 20px 0!important;width:auto}
.case .case3 .c3-from{padding-bottom:20px!important}
}

/* Meld mascot, new composition: big, standing to the right of the phone */
@keyframes meldcat{0%,100%{transform:translateY(0) rotate(-4deg)}25%{transform:translateY(-3%) rotate(-7deg)}50%{transform:translateY(-1%) rotate(-1deg)}75%{transform:translateY(-4%) rotate(-6deg)}}
.op-case .nc-car .cf-card[href="#case-meld"] .cf-art{left:67.3%!important;bottom:-3.2%!important;width:34.6%!important}
.case .c3-cat{left:45.6%!important;bottom:-3.3%!important;width:41.3%!important}
@media (max-width:760px){.op-case .nc-car .cf-card[href="#case-meld"] .cf-art{left:44%!important;width:60%!important}}

/* ===== Geex-style live case covers (shared by the Next-case carousel and the "See the story" picture) ===== */
.gx{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size;background:#222 var(--gbg) center/cover no-repeat;border-radius:inherit;font-family:"Inter Tight","Inter",system-ui,sans-serif;color:#fff;pointer-events:none}
.gx::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.16));pointer-events:none}
.gx-word{position:absolute;left:0;right:0;top:1.5cqh;text-align:center;font-weight:700;font-size:min(27cqh,19cqw);line-height:.86;letter-spacing:-.045em;color:rgba(255,255,255,.26);white-space:nowrap}
.gx-c{position:absolute;z-index:3;font:500 max(8px,1.05cqw)/1.25 ui-monospace,"SF Mono","Geist Mono",Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.gx-c b{font-weight:500;color:rgba(255,255,255,.55)}
.gx-tl{left:3.2cqw;top:4.6cqh}.gx-tr{right:3.2cqw;top:4.6cqh;text-align:right}.gx-bl{left:3.2cqw;bottom:4.2cqh}.gx-br{right:3.2cqw;bottom:4.2cqh;text-align:right}
.gx-pill{position:absolute;z-index:3;left:50%;bottom:3.4cqh;translate:-50% 0;padding:.45em 1.1em;border:1px solid rgba(255,255,255,.55);border-radius:99px;font:500 max(8px,1cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.gx-dev{position:absolute;z-index:2;filter:drop-shadow(0 3cqh 5cqh rgba(0,0,0,.35))}
.gx-phone{left:50%;top:9cqh;height:80cqh;aspect-ratio:.487;translate:-50% 0;padding:1.15cqh;border-radius:6.4cqh;background:#0b0b0c;box-shadow:0 0 0 .32cqh #cfd0d6,0 0 0 .55cqh #8e8f96}
.gx-phone .gx-scr{border-radius:5.4cqh}
.gx-isl::after{content:"";position:absolute;z-index:3;left:50%;top:3.2cqh;width:27%;height:3.1cqh;translate:-50% 0;background:#000;border-radius:99px}
.gx-lap{left:50%;top:21cqh;width:min(48cqw,112cqh);translate:-50% 0}
.gx-lid{aspect-ratio:1.55;padding:.9cqw;background:#0d0d0f;border-radius:1.8cqw 1.8cqw .5cqw .5cqw;box-shadow:0 0 0 .25cqw #c9cad0}
.gx-lid .gx-scr{border-radius:.5cqw}
.gx-base{height:1.9cqw;margin:0 -6%;background:linear-gradient(180deg,#eeeef1,#b8b9be);border-radius:0 0 1.4cqw 1.4cqw}
.gx-scr{position:relative;width:100%;height:100%;overflow:hidden;background:#f4f4f6}
.gx-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;animation:gxscr 9s infinite}
@keyframes gxscr{0%{opacity:0;transform:translateY(4%) scale(1.02)}5%{opacity:1;transform:none}31%{opacity:1;transform:none}36%{opacity:0;transform:translateY(-3%)}100%{opacity:0}}
.gx-l{position:absolute;z-index:3;left:7cqw;top:56cqh;width:min(26cqw,310px)}
.gx-r{position:absolute;z-index:3;right:7cqw;top:26cqh;width:min(22cqw,260px);text-align:center}
.gx-l>*,.gx-r>*{position:absolute;left:0;right:0;top:0;opacity:0;animation:gxitem 9s infinite}
@keyframes gxitem{0%{opacity:0;transform:translateY(14px)}6%{opacity:1;transform:none}31%{opacity:1;transform:none}36%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}
.gx-l>*:nth-child(2),.gx-r>*:nth-child(2),.gx-scr img:nth-child(2){animation-delay:3s}
.gx-l>*:nth-child(3),.gx-r>*:nth-child(3),.gx-scr img:nth-child(3){animation-delay:6s}
.gx-card{display:flex;align-items:center;gap:.9em;padding:.9em 1.1em;border-radius:1.05em;background:rgba(255,255,255,.94);box-shadow:0 1.4cqh 3.6cqh rgba(0,0,0,.18);color:#0b0b0b;font-size:max(9px,1.15cqw);width:max-content;max-width:100%}
.gx-card i{flex:0 0 auto;width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;font:600 1em/1 inherit;font-style:normal;color:#fff;background:var(--d)}
.gx-card small{display:block;font-size:.82em;color:#6e6e76;white-space:nowrap}
.gx-card strong{display:block;font-weight:600;font-size:1.55em;letter-spacing:-.02em;white-space:nowrap}
.gx-lab span{display:inline-block;padding:.45em 1em;border:1px solid rgba(255,255,255,.6);border-radius:99px;font:500 max(8px,.95cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;text-transform:uppercase}
.gx-lab em{display:block;margin-top:.7em;font:500 max(8px,.9cqw)/1.2 ui-monospace,"SF Mono",Menlo,monospace;font-style:normal;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gx-lab strong{display:block;font-weight:600;font-size:max(12px,2.1cqw);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.gx-arc{position:absolute;z-index:2;right:6cqw;top:16cqh;width:20cqw;height:46cqh;border:1px solid rgba(255,255,255,.45);border-radius:50%;clip-path:inset(0 0 0 50%)}
.gx-arc::after{content:"";position:absolute;right:-.45cqw;top:50%;width:.9cqw;height:.9cqw;border-radius:50%;background:#fff}
.gx-cat{position:absolute;z-index:3;right:5cqw;bottom:-2cqh;width:30cqw;aspect-ratio:640/525;background:url(/landing/assets/img/meld/home/cat.webp) center bottom/contain no-repeat;filter:drop-shadow(0 2cqh 3cqh rgba(0,0,0,.3));transform-origin:50% 95%;animation:meldcat 3.6s ease-in-out infinite}
@container (max-width:460px){.gx-c,.gx-pill,.gx-r,.gx-arc,.gx-l{display:none}.gx-cat{width:34cqw}.gx-phone{top:12cqh;height:96cqh}}
@media (prefers-reduced-motion:reduce){.gx-scr img,.gx-l>*,.gx-r>*{animation:none}.gx-scr img:first-child,.gx-l>*:first-child,.gx-r>*:first-child{opacity:1}.gx-cat{animation:none}}
/* hosts */
.op-case .nc-car .cf-card{background:#222!important}
.op-case .nc-car .cf-card .cf-logo{display:none!important}
.op-case .nc-car .cf-card[href="#case-meld"] .cf-art{display:none!important}
.op-case .nc-car .cf-card::after{z-index:4}
.op-case .nc-car .cf-card .cf-t,.op-case .nc-car .cf-card .cf-go{z-index:5}
.case .c3-shot .c3-sp,.case .c3-cat{display:none!important}
.case .c3-shot::after{z-index:4}.case .c3-scap,.case .c3-sgo{z-index:5}

/* Geex variants: mosaic (E-sport), side headlines (Material iOS), window row (MindEase) */
.gx-mos{position:absolute;z-index:1;left:50%;top:50%;width:150cqw;height:260cqh;translate:-50% -50%;rotate:-16deg;display:flex;gap:2.2cqw;justify-content:center}
.gx-col{display:flex;flex-direction:column;gap:2.2cqw;width:15cqw;animation:gxup 26s linear infinite}
.gx-col:nth-child(even){animation-name:gxdown;margin-top:-30cqh}
@keyframes gxup{to{transform:translateY(-50%)}}@keyframes gxdown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.gx-col img{display:block;width:100%;aspect-ratio:.487;object-fit:cover;object-position:top;border-radius:1.9cqw;box-shadow:0 0 0 .5cqw #0b0b0c,0 0 0 .7cqw #c9cad0,0 2cqh 4cqh rgba(0,0,0,.35)}
.gx-mos-v::after{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.3))}
.gx-mos-v .gx-word{z-index:2;top:auto;bottom:-3cqh;color:rgba(255,255,255,.9);mix-blend-mode:overlay}
.gx-hl{position:absolute;z-index:3;top:40cqh;font-weight:600;font-size:max(14px,3.3cqw);line-height:1.02;letter-spacing:-.03em;color:#fff}
.gx-hl.l{left:7cqw}.gx-hl.r{right:7cqw;text-align:right}
.gx-hl small{display:block;margin-top:.9em;font:500 max(8px,.95cqw)/1.35 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.gx-mat .gx-word{display:none}
.gx-mat .gx-cat{right:auto;left:57cqw;width:24cqw;bottom:-3cqh}
.gx-rowv .gx-word{top:auto;bottom:-6cqh;color:rgba(255,255,255,.45)}
.gx-row{position:absolute;z-index:2;left:0;top:24cqh;display:flex;gap:3cqw;width:max-content;animation:gxrow 30s linear infinite}
@keyframes gxrow{to{transform:translateX(-50%)}}
.gx-win{flex:0 0 auto;width:44cqw;border-radius:1.2cqw;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 3cqh 6cqh rgba(20,40,80,.25)}
.gx-win i{display:flex;gap:.45cqw;align-items:center;height:2.6cqw;padding:0 1cqw;background:#f1f2f5;border-bottom:1px solid #e3e5ea}
.gx-win i::before{content:"";width:.8cqw;height:.8cqw;border-radius:50%;background:#ff5f57;box-shadow:1.2cqw 0 0 #febc2e,2.4cqw 0 0 #28c840}
.gx-win img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover;object-position:top left}
@container (max-width:460px){.gx-hl{display:none}.gx-mat .gx-cat{left:58cqw;width:34cqw}.gx-row{top:16cqh}.gx-win{width:70cqw}}
@media (prefers-reduced-motion:reduce){.gx-col,.gx-row{animation:none}}

/* Finna, Geex "iOS Concept | Air": three phones in a row, cropped at the bottom, big word across behind them */
.gx-air .gx-word{top:6cqh;font-size:min(40cqh,30cqw);color:rgba(255,255,255,.4)}
.gx-trio{position:absolute;z-index:2;left:50%;top:34cqh;translate:-50% 0;display:flex;gap:2.4cqw;align-items:flex-start}
.gx-trio .gx-phone{position:relative;left:auto;top:auto;translate:none;height:92cqh;animation:gxfloat 6s ease-in-out infinite}
.gx-trio .gx-phone:nth-child(2){animation-delay:-2s;margin-top:-5cqh}
.gx-trio .gx-phone:nth-child(3){animation-delay:-4s}
@keyframes gxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5cqh)}}
.gx-trio .gx-phone:nth-child(2) .gx-scr img{animation-delay:-3s}.gx-trio .gx-phone:nth-child(2) .gx-scr img:nth-child(2){animation-delay:0s}.gx-trio .gx-phone:nth-child(2) .gx-scr img:nth-child(3){animation-delay:3s}
.gx-trio .gx-phone:nth-child(3) .gx-scr img{animation-delay:-6s}.gx-trio .gx-phone:nth-child(3) .gx-scr img:nth-child(2){animation-delay:-3s}.gx-trio .gx-phone:nth-child(3) .gx-scr img:nth-child(3){animation-delay:0s}
@container (max-width:460px){.gx-trio{top:18cqh}}
@media (prefers-reduced-motion:reduce){.gx-trio .gx-phone{animation:none}}

/* window row: screens are clean captures that already carry their own window chrome — show them whole, never cropped */
.gx-win{background:transparent;box-shadow:0 3cqh 6cqh rgba(20,40,80,.28);border-radius:1.2cqw 1.2cqw .6cqw .6cqw;align-self:flex-start}
.gx-win img{aspect-ratio:auto!important;height:auto;object-fit:contain}
.gx-row{align-items:flex-start;top:20cqh}

/* Danzee: a row of phones drifting sideways (MindEase style); ColdSend: EXPLORE layout with the laptop */
.gx-prow{top:14cqh;gap:2.6cqw;animation-duration:36s}
.gx-pdev{display:block;height:74cqh;width:auto;border-radius:5.2cqh;box-shadow:0 3cqh 6cqh rgba(40,15,0,.3)}
.gx-coldsend .gx-lid .gx-scr{background:#fff}
.gx-coldsend .gx-lid .gx-scr img{object-fit:contain;object-position:top center}
@container (max-width:460px){.gx-prow{top:12cqh}.gx-pdev{height:80cqh}}

/* screens: one fixed screen per phone in Finna; elsewhere a clean sequential swap (no overlap, no sliding) */
.gx-scr.gx-still img{opacity:1!important;animation:none!important;transform:none!important}
@keyframes gxscr{0%{opacity:0}3%{opacity:1}30%{opacity:1}33%{opacity:0}100%{opacity:0}}
@keyframes gxitem{0%{opacity:0;transform:translateY(10px)}4%{opacity:1;transform:none}29%{opacity:1;transform:none}32%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
.gx-air .gx-pill{display:none}

/* one device language everywhere: same frame thickness/radius, screen box follows the screen's own ratio (never cropped) */
.gx-phone{aspect-ratio:auto!important;width:auto!important;padding:1.1cqh!important;border-radius:6cqh!important;background:#0b0b0c!important;box-shadow:0 0 0 .3cqh #d4d5db,0 0 0 .55cqh #8f9097!important}
.gx-phone .gx-scr{height:100%;width:auto;aspect-ratio:var(--ar,.4865);border-radius:5cqh!important}
.gx-scr img{object-fit:fill!important}
.gx-finna{--ar:.4865}.gx-meld{--ar:.462}.gx-danzee{--ar:.4771}
.gx-prow{gap:2.6cqw}.gx-prow .gx-phone{position:relative;left:auto;top:auto;translate:none;height:76cqh;flex:0 0 auto}
.gx-lid .gx-scr{background:#fff}.gx-lid .gx-scr img{object-fit:contain!important;object-position:center top}
/* ColdSend right side: an ordered step list, current step lit in sync with the screen */
.gx-steps{position:absolute;z-index:3;right:6cqw;top:28cqh;margin:0;padding:0;list-style:none;display:grid;gap:2.4cqh;width:min(20cqw,240px)}
.gx-steps li{display:grid;grid-template-columns:auto 1fr;gap:1.1cqw;align-items:baseline;padding-left:1.1cqw;border-left:2px solid rgba(255,255,255,.28);opacity:.45;animation:gxstep 9s infinite}
.gx-steps li:nth-child(2){animation-delay:3s}.gx-steps li:nth-child(3){animation-delay:6s}
@keyframes gxstep{0%,30%{opacity:1;border-color:#fff}33%,100%{opacity:.45;border-color:rgba(255,255,255,.28)}}
.gx-steps b{font:500 max(8px,.95cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;color:rgba(255,255,255,.75)}
.gx-steps span{font-weight:600;font-size:max(11px,1.7cqw);line-height:1.05;letter-spacing:-.02em;color:#fff}
.gx-steps small{display:block;margin-top:.35em;font:500 max(8px,.85cqw)/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@container (max-width:460px){.gx-steps{display:none}}
@media (prefers-reduced-motion:reduce){.gx-steps li{animation:none}.gx-steps li:first-child{opacity:1}}

/* Danzee, Geex "MindEase": frameless rounded screens, centre one larger, side ones smaller and cropped by the edges */
.gx-mind::after{display:none}
.gx-mrow{position:absolute;left:50%;top:16cqh;translate:-50% 0;display:flex;align-items:flex-start;gap:2.8cqw;animation:gxsway 14s ease-in-out infinite alternate}
@keyframes gxsway{from{transform:translateX(-3cqw)}to{transform:translateX(3cqw)}}
.gx-me{flex:0 0 auto;border-radius:3.6cqh;overflow:hidden;box-shadow:0 2.4cqh 5cqh rgba(60,20,0,.22);margin-top:8cqh;height:82cqh}
.gx-me img{display:block;height:100%;width:auto}
.gx-me2{height:102cqh;margin-top:0;border-radius:4.4cqh}
.gx-me1,.gx-me3{height:86cqh;margin-top:6cqh}
@container (max-width:460px){.gx-mrow{top:12cqh}.gx-me2{height:110cqh}}
@media (prefers-reduced-motion:reduce){.gx-mrow{animation:none}}

/* Finna, Geex "iOS Concept | Air": light grey stage, huge black word behind, three equal phones, mesh dome below, quiet corner labels */
.gx-air2{background:#efeff0!important}
.gx-air2::after{display:none}
.gx-aw{position:absolute;z-index:0;left:50%;top:50%;translate:-50% -54%;font-weight:700;font-size:min(56cqh,33cqw);line-height:.8;letter-spacing:-.06em;color:#0b0b0b;white-space:nowrap}
.gx-air2 .gx-trio{top:15cqh;gap:7cqw;align-items:flex-start}
.gx-air2 .gx-trio .gx-phone{height:72cqh;margin-top:0!important;animation:gxfloat 7s ease-in-out infinite}
.gx-air2 .gx-trio .gx-phone:nth-child(2){animation-delay:-2.3s}.gx-air2 .gx-trio .gx-phone:nth-child(3){animation-delay:-4.6s}
.gx-dome{position:absolute;z-index:1;left:50%;bottom:-38cqh;width:58cqh;height:58cqh;translate:-50% 0;border-radius:50%;
 background:repeating-linear-gradient(55deg,transparent 0 1.6cqh,var(--dc,#F56F51) 1.6cqh 2.05cqh),repeating-linear-gradient(-55deg,transparent 0 1.6cqh,var(--dc,#F56F51) 1.6cqh 2.05cqh);
 -webkit-mask:radial-gradient(circle at 50% 40%,#000 45%,rgba(0,0,0,.35) 70%,transparent 72%);mask:radial-gradient(circle at 50% 40%,#000 45%,rgba(0,0,0,.35) 70%,transparent 72%);animation:gxdome 18s linear infinite}
@keyframes gxdome{to{rotate:360deg}}
.gx-al{position:absolute;z-index:3;font:500 max(9px,1.45cqw)/1 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:-.01em;color:#a5a5aa}
.gx-al b{font-weight:600;color:#0b0b0b}
.gx-al.tl{left:2.6cqw;top:4cqh}.gx-al.tr{right:2.6cqw;top:4cqh}.gx-al.bl{left:2.6cqw;bottom:4cqh}.gx-al.br{right:2.6cqw;bottom:4cqh}
@container (max-width:460px){.gx-al{display:none}.gx-air2 .gx-trio{gap:4cqw;top:14cqh}.gx-air2 .gx-trio .gx-phone{height:78cqh}}
@media (prefers-reduced-motion:reduce){.gx-dome,.gx-air2 .gx-trio .gx-phone{animation:none}}

/* Finna, Geex crypto wall: huge black stacked words filling the frame, rows drifting both ways, one phone in front */
.gx-wall{background:radial-gradient(80% 70% at 50% 45%,#d9d6e6,#b9b4c9 60%,#a49fb6)!important}
.gx-wall::after{display:none}
.gx-tws{position:absolute;inset:-2cqh 0;display:flex;flex-direction:column;justify-content:center;gap:0;transform:rotate(0)}
.gx-tw{display:flex;width:max-content;font-weight:800;font-size:15.5cqh;line-height:.84;letter-spacing:-.045em;color:#0b0b0b;white-space:nowrap;animation:gxtw 40s linear infinite}
.gx-tw span{padding-right:.25em}
.gx-tw.rev{animation-direction:reverse;margin-left:-30cqw}
@keyframes gxtw{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gx-wallp{left:50%;top:7cqh;height:96cqh;translate:-50% 0;z-index:2}
.gx-vl{position:absolute;z-index:3;top:6cqh;font:500 max(7px,1cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,11,.55);writing-mode:vertical-rl}
.gx-vl.b{top:auto;bottom:6cqh}.gx-vl.l{left:1.6cqw}.gx-vl.r{right:1.6cqw}
.gx-danzee{--dc:#F56F51}
@container (max-width:460px){.gx-vl{display:none}.gx-tw{font-size:14cqh}}
@media (prefers-reduced-motion:reduce){.gx-tw{animation:none}}

/* Finna, exactly like the Geex crypto cover: one word per line, centred, stacked tight, static; 3 vertical labels per side */
.gx-tws,.gx-vl{display:none}
.gx-tws2{position:absolute;z-index:0;left:0;right:0;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center}
.gx-tw2{font-weight:800;font-size:16.5cqh;line-height:.82;letter-spacing:-.035em;color:#0b0b0b;white-space:nowrap;text-transform:uppercase}
.gx-wallp{top:5cqh;height:100cqh}
.gx-vl2{position:absolute;z-index:3;font:600 max(7px,.95cqw)/1 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgba(11,11,11,.6);writing-mode:vertical-rl;translate:0 -50%}
.gx-vl2.l{left:1.2cqw}.gx-vl2.r{right:1.2cqw}
.gx-vl2.t{top:16cqh}.gx-vl2.m{top:50cqh}.gx-vl2.b{top:84cqh}
/* Danzee, exactly like Air: word bigger than the frame (cropped at the sides), silver mesh dome */
.gx-danzee .gx-aw{font-size:min(70cqh,46cqw);letter-spacing:-.07em}
.gx-danzee{--dc:#9a9aa0}
.gx-air2 .gx-dome::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 45%),radial-gradient(circle at 70% 75%,rgba(0,0,0,.18),transparent 55%)}
@container (max-width:460px){.gx-vl2{display:none}}

.gx-tw2{font-size:27cqh;line-height:.8;letter-spacing:-.04em}
@container (max-width:460px){.gx-tw2{font-size:22cqh}}

/* realistic iPhone corners: radius tied to the phone's width, small enough not to eat into the UI */
/* phone corners tied to the phone's own height (iPhone ≈ radius 6% of height), so they never eat into the UI */
.gx{--ph:80cqh}
.gx-phone{height:var(--ph)!important;padding:calc(var(--ph)*.014)!important;border-radius:calc(var(--ph)*.068)!important}
.gx-phone .gx-scr{border-radius:calc(var(--ph)*.055)!important}
.gx-trio .gx-phone{--ph:92cqh}
.gx-air2 .gx-trio .gx-phone{--ph:72cqh}
.gx-wallp{--ph:86cqh;top:7cqh!important}
@container (max-width:460px){.gx-air2 .gx-trio .gx-phone{--ph:78cqh}}

/* bigger mesh dome like the Air reference: wider than the centre phone, larger cells, sphere shading */
.gx-dome{bottom:-52cqh!important;width:100cqh!important;height:100cqh!important;
 background:repeating-linear-gradient(58deg,transparent 0 3.4cqh,var(--dc,#9a9aa0) 3.4cqh 4.1cqh),repeating-linear-gradient(-58deg,transparent 0 3.4cqh,var(--dc,#9a9aa0) 3.4cqh 4.1cqh)!important;
 -webkit-mask:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.5) 69%,transparent 71%)!important;mask:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.5) 69%,transparent 71%)!important}
.gx-danzee{--dc:#8d8d93}

/* ===== matched to the Geex videos ===== */
/* Air (Danzee): word scrolls sideways, phones whole at ~22% width, staggered rise at the end of each loop */
.gx-awm{display:flex;width:max-content;translate:0 -54%!important;left:0!important;animation:gxmq 16s linear infinite}
.gx-awm span{padding-right:.12em}
@keyframes gxmq{to{transform:translateX(-50%)}}
.gx-danzee .gx-aw{font-size:min(60cqh,40cqw)}
.gx-air2 .gx-trio{top:16cqh;gap:9cqw}
.gx-air2 .gx-trio .gx-phone{animation:gxrise 8s cubic-bezier(.4,0,.2,1) infinite!important}
.gx-air2 .gx-trio .gx-phone:nth-child(1){animation-delay:0s!important}.gx-air2 .gx-trio .gx-phone:nth-child(2){animation-delay:.18s!important}.gx-air2 .gx-trio .gx-phone:nth-child(3){animation-delay:.36s!important}
@keyframes gxrise{0%,72%{transform:translateY(0)}82%{transform:translateY(-9cqh)}90%{transform:translateY(4cqh)}100%{transform:translateY(0)}}
.gx-dome{bottom:-60cqh!important;width:62cqw!important;height:62cqw!important;max-width:120cqh;max-height:120cqh}
/* Crypto wall (Finna): tighter words, stack scrolls up, background hue cycles lilac → orange → teal */
.gx-tws2{top:0!important;translate:none!important;animation:gxwallup 28s linear infinite}
@keyframes gxwallup{to{transform:translateY(-50%)}}
.gx-tw2{font-size:min(19cqh,10.5cqw)!important;line-height:.86!important;letter-spacing:-.03em!important}
/* 2026-11-13: the Finna cover keeps its grey-lilac ground; it no longer drifts to orange and teal */
.gx-wall{animation:none}
@keyframes gxhue{0%,100%{background:radial-gradient(80% 70% at 50% 45%,#dcd8e8,#b6b1c7 60%,#9f9ab2)}33%{background:radial-gradient(80% 70% at 50% 45%,#f6c49a,#e8894a 60%,#c96424)}66%{background:radial-gradient(80% 70% at 50% 45%,#bfe0d6,#6fa89a 60%,#3f7d70)}}
/* Material (Meld): big dim word on top, "Meld —— iOS App" label at the left */
.gx-mword{position:absolute;z-index:0;left:0;right:0;top:-3cqh;text-align:center;font-weight:800;font-size:min(30cqh,15cqw);line-height:.86;letter-spacing:-.04em;color:rgba(255,255,255,.14);white-space:nowrap}
.gx-mlab{position:absolute;z-index:3;left:7cqw;top:28cqh;display:flex;align-items:center;gap:.6em;font:500 max(8px,1.05cqw)/1 "Inter Tight","Inter",system-ui,sans-serif;color:rgba(255,255,255,.85)}
.gx-mlab i{display:block;width:6cqw;height:1px;background:rgba(255,255,255,.6);position:relative}
.gx-mlab i::after{content:"";position:absolute;left:30%;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff}
@container (max-width:460px){.gx-mlab{display:none}}
@media (prefers-reduced-motion:reduce){.gx-awm,.gx-tws2,.gx-wall,.gx-air2 .gx-trio .gx-phone{animation:none!important}}

/* screen swap: crossfade (next screen fades in over the current one), never a blank frame */
@keyframes gxscr{0%{opacity:0;z-index:2}4%{opacity:1;z-index:2}33.3%{opacity:1;z-index:1}37.3%{opacity:1;z-index:1}37.4%{opacity:0}100%{opacity:0}}

/* "See the story" hover: cover gently zooms, caption lifts, arrow turns; pressed state on click */
.case .c3-shot .gx{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.case .c3-shot:hover .gx{transform:scale(1.05)}
.case .c3-shot .c3-scap{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.case .c3-shot:hover .c3-scap{transform:translateY(-3px)}
.case .c3-shot:active{transform:translateY(0) scale(.985)!important;transition-duration:.12s}
.op-case .nc-car .cf-card .gx{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.op-case .nc-car .cf-card:hover .gx{transform:scale(1.04)}}

/* floating video: the box itself never catches the pointer — only its visible controls do (it used to block hover/clicks underneath) */
.fv.on{pointer-events:none}
.fv.on .fv-open,.fv.on .fv-x{pointer-events:auto}
.fv.on.min .fv-open,.fv.on.min .fv-x{pointer-events:none}
.fv.on .fv-bub{pointer-events:auto}

/* EXPLORE right block, as in the Geex reference: caption + big caps title + outline pill, a thin arc with a dot hugging it */
.gx-steps{display:none!important}
.gx-ex{position:absolute;z-index:3;right:5cqw;top:24cqh;width:min(24cqw,280px);height:52cqh}
.gx-exarc{position:absolute;right:-1cqw;top:0;width:60%;height:100%;border:1px solid rgba(255,255,255,.5);border-left:0;border-radius:0 999px 999px 0}
.gx-exarc::after{content:"";position:absolute;right:-.5cqw;top:50%;width:1cqw;height:1cqw;translate:0 -50%;border-radius:50%;background:#fff}
.gx-ex .gx-r{position:absolute;inset:auto;left:0;right:22%;top:50%;translate:0 -50%;width:auto;height:9cqw;text-align:center}
.gx-ex .gx-lab em{display:block;margin:0 0 .5em;font:500 max(8px,.9cqw)/1.2 ui-monospace,"SF Mono",Menlo,monospace;font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gx-ex .gx-lab strong{display:block;font-weight:600;font-size:max(12px,2cqw);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.gx-ex .gx-lab span{display:inline-block;margin-top:.9em;padding:.45em 1.1em;border:1px solid rgba(255,255,255,.6);border-radius:99px;font:500 max(8px,.85cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:#fff}
@container (max-width:460px){.gx-ex{display:none}}

/* Danzee: the dome is made of 米字格 writing cells (the practice grid from the app), with 学 ("study") in the centre cell */
.gx-danzee .gx-dome{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2780%27%20height%3D%2780%27%20viewBox%3D%270%200%2080%2080%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238d8d93%27%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%2778%27%20height%3D%2778%27%20stroke-width%3D%272%27/%3E%3Cg%20stroke-width%3D%271%27%20stroke-dasharray%3D%274%204%27%3E%3Cpath%20d%3D%27M40%201V79M1%2040H79M1%201L79%2079M79%201L1%2079%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 50% 50%/11cqh 11cqh repeat!important;-webkit-mask:radial-gradient(circle at 50% 50%,#000 58%,rgba(0,0,0,.4) 68%,transparent 71%)!important;mask:radial-gradient(circle at 50% 50%,#000 58%,rgba(0,0,0,.4) 68%,transparent 71%)!important;animation:gxdome 40s linear infinite}
.gx-danzee .gx-dome::before{content:"学";position:absolute;left:50%;top:50%;translate:-50% -50%;font:400 22cqh/1 "PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;color:rgba(11,11,11,.18)}
.gx-danzee .gx-dome::after{display:none}

/* smaller corners so bottom buttons in the screens are never clipped */
.gx-phone{border-radius:calc(var(--ph)*.05)!important}
.gx-phone .gx-scr{border-radius:calc(var(--ph)*.034)!important}

/* Danzee: an ensō (one-stroke ink circle) instead of the mesh — drawn slowly, then fades, then redrawn */
.gx-danzee .gx-dome{display:none!important}
.gx-enso{position:absolute;z-index:1;left:50%;bottom:-34cqh;width:78cqh;height:78cqh;translate:-50% 0;rotate:-100deg;overflow:visible}
.gx-enso .e1{stroke-dasharray:86 100;stroke-dashoffset:86;opacity:.88;animation:gxenso 7s cubic-bezier(.6,0,.2,1) infinite}
.gx-enso .e2{stroke-dasharray:94 100;stroke-dashoffset:94;opacity:.5;animation:gxenso2 7s cubic-bezier(.6,0,.2,1) infinite}
@keyframes gxenso{0%{stroke-dashoffset:86;opacity:.88}55%{stroke-dashoffset:0;opacity:.88}85%{stroke-dashoffset:0;opacity:.88}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gxenso2{0%{stroke-dashoffset:94}60%{stroke-dashoffset:0;opacity:.5}85%{opacity:.5}100%{stroke-dashoffset:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.gx-enso .e1,.gx-enso .e2{animation:none;stroke-dashoffset:0}}

/* Danzee: no ensō */
.gx-enso{display:none!important}
/* ColdSend laptop: screens without their own window bar, laid on the app's own light background, top-aligned (whole screen visible, no side bars feel) */
.gx-coldsend .gx-lid .gx-scr{background:#f7f7f8}
.gx-coldsend .gx-lid .gx-scr img{object-fit:contain!important;object-position:center top}
/* ColdSend right block: tidy, fixed box — text centred inside a half-circle arc, never touching it */
.gx-ex{right:4cqw!important;top:50%!important;translate:0 -50%;width:44cqh!important;height:44cqh!important}
.gx-exarc{right:0!important;left:auto;width:50%!important;height:100%!important}
.gx-ex .gx-r{left:8%!important;right:22%!important;top:50%!important;height:auto!important;min-height:0}
.gx-ex .gx-lab{position:absolute;left:0;right:0;top:50%;translate:0 -50%;white-space:nowrap}
.gx-ex .gx-lab em{font-size:max(7px,.75cqw)!important}
.gx-ex .gx-lab strong{font-size:max(11px,1.6cqw)!important}
.gx-ex .gx-lab span{font-size:max(7px,.75cqw)!important}

/* ColdSend laptop: thin black bezel, screen box exactly 16:10 so the 16:10 screens fill it edge to edge */
.gx-lid{aspect-ratio:auto!important;padding:.35cqw!important;border-radius:1.2cqw 1.2cqw .35cqw .35cqw!important}
.gx-coldsend .gx-lid .gx-scr{aspect-ratio:16/10;height:auto!important;border-radius:.8cqw .8cqw 0 0!important;background:#fff}
.gx-coldsend .gx-lid .gx-scr img{object-fit:cover!important;object-position:center!important}

/* side card: compact, lower height */
.gx-card{padding:.5em .85em!important;gap:.65em!important;border-radius:.8em!important}
.gx-card i{width:1.75em!important;height:1.75em!important;font-size:.9em}
.gx-card small{font-size:.74em!important;line-height:1.2}
.gx-card strong{font-size:1.25em!important;line-height:1.1}
/* screen swap: a quick crossfade so two screens never sit half-visible on top of each other */
@keyframes gxscr{0%{opacity:0;z-index:2}1.5%{opacity:1;z-index:2}33.3%{opacity:1;z-index:1}34.9%{opacity:1;z-index:1}35%{opacity:0}100%{opacity:0}}

.gx-card{font-size:max(10px,1.4cqw)!important}
.gx-card i{font-style:normal;font-weight:600;line-height:1;font-size:.95em!important}

.gx-finna{--ar:.4771}
/* screens restart from the first one each time a card becomes active */

/* story card: lower, so tabs + card fit in one screen */
@media (min-width:761px){.case .c3-track > .case3{min-height:max(360px,min(clamp(380px,34vw,500px),calc(100svh - 240px)))!important}}

/* hover scrim: eased gradient (no visible band/line across the card) */
.op-case .nc-car .cf-card::after{background:linear-gradient(180deg,rgba(10,10,12,0) 0%,rgba(10,10,12,0) 35%,rgba(10,10,12,.04) 45%,rgba(10,10,12,.11) 54%,rgba(10,10,12,.21) 63%,rgba(10,10,12,.33) 72%,rgba(10,10,12,.46) 81%,rgba(10,10,12,.58) 90%,rgba(10,10,12,.66) 100%)!important}

/* phone & tablet, as on geex-arts.com: the cover keeps its full composition (just scaled, 4:3 on phones), title + link sit under it */
@container (max-width:460px){.gx-c,.gx-pill,.gx-r,.gx-arc,.gx-l,.gx-ex,.gx-al,.gx-vl2,.gx-hl,.gx-mlab{display:revert}}
@container (max-width:300px){.gx-c,.gx-pill,.gx-r,.gx-arc,.gx-l,.gx-ex,.gx-al,.gx-vl2,.gx-hl,.gx-mlab{display:none!important}}
@media (max-width:760px){
 .op-case .nc-car .cf-card{--cw:86%;aspect-ratio:auto!important;padding:0!important;background:transparent!important;overflow:visible!important;color:#0B0B0B}
 .op-case .nc-car .cf-card .gx{position:relative;aspect-ratio:4/3;border-radius:6px;inset:auto}
 .op-case .nc-car .cf-card::after{display:none!important}
 .op-case .nc-car .cf-card .cf-t,.op-case .nc-car .cf-card .cf-go{position:static!important;opacity:1!important;translate:none!important;color:#0B0B0B!important;max-width:none!important}
 .op-case .nc-car .cf-card .cf-t{margin-top:12px!important;font-size:17px!important;line-height:1.25!important}
 .op-case .nc-car .cf-card .cf-go{margin-top:8px;color:rgba(11,11,11,.6)!important}
 .op-case .nc-car .cf-card:not(.act) .cf-t,.op-case .nc-car .cf-card:not(.act) .cf-go{opacity:.35!important}
 .case .c3-shot{aspect-ratio:4/3!important}
}
@media (min-width:761px) and (max-width:1024px){.op-case .nc-car .cf-card{--cw:84%}}

/* Meld on small covers: label on one line, phone clears the pill, mascot clears the corner label */
.gx-mlab{white-space:nowrap}
@container (max-width:520px){
 .gx-mlab i{width:4cqw}
 .gx-meld .gx-phone{--ph:72cqh;top:8cqh!important}
 .gx-mat .gx-cat{width:19cqw!important;left:61cqw!important;bottom:-2cqh!important}
 .gx-hl{font-size:max(12px,3.6cqw)}
}

.gx-mlab{display:flex!important}
@container (max-width:300px){.gx-mlab{display:none!important}}
@container (max-width:520px){.gx-mat .gx-cat{left:65cqw!important;width:18cqw!important}}

/* small covers on phones: details are hidden, so the devices get the space */
@container (max-width:320px){
 .gx-meld .gx-phone{--ph:96cqh!important;top:8cqh!important}
 .gx-mat .gx-cat{width:24cqw!important;left:66cqw!important}
 .gx-wallp{--ph:98cqh!important;top:6cqh!important}
 .gx-air2 .gx-trio{top:10cqh!important;gap:4cqw!important}
 .gx-air2 .gx-trio .gx-phone{--ph:88cqh!important}
 .gx-lap{width:84cqw!important;top:20cqh!important}
}

@container (max-width:320px){.gx-mat .gx-cat{width:36cqw!important;left:62cqw!important;bottom:-4cqh!important}}

@container (max-width:320px){.gx-wallp{--ph:84cqh!important;top:8cqh!important}}

/* phones: devices in the same proportion to the frame as on desktop (not blown up) */
@container (max-width:320px){
 .gx-meld .gx-phone{--ph:80cqh!important;top:10cqh!important}
 .gx-air2 .gx-trio{top:15cqh!important;gap:6cqw!important}
 .gx-air2 .gx-trio .gx-phone{--ph:72cqh!important}
 .gx-lap{width:66cqw!important;top:22cqh!important}
 .gx-wallp{--ph:84cqh!important;top:8cqh!important}
}

/* carousel on phones: keep the desktop details (corner labels, side headlines, pill, label), just scaled */
@container (max-width:320px){
 .op-case .nc-car .gx .gx-c,.op-case .nc-car .gx .gx-pill,.op-case .nc-car .gx .gx-hl,.op-case .nc-car .gx .gx-al,.op-case .nc-car .gx .gx-vl2,.op-case .nc-car .gx .gx-ex,.op-case .nc-car .gx .gx-l{display:block!important}
 .op-case .nc-car .gx .gx-mlab{display:flex!important}
 .op-case .nc-car .gx .gx-c,.op-case .nc-car .gx .gx-pill,.op-case .nc-car .gx .gx-al,.op-case .nc-car .gx .gx-vl2{font-size:6px!important}
 .op-case .nc-car .gx .gx-hl{font-size:11px!important;top:42cqh}
 .op-case .nc-car .gx .gx-hl small,.op-case .nc-car .gx .gx-mlab{font-size:5.5px!important}
 .op-case .nc-car .gx-meld .gx-phone{--ph:74cqh!important;top:10cqh!important}
 .op-case .nc-car .gx-mat .gx-cat{width:22cqw!important;left:58cqw!important;bottom:-3cqh!important}
 .op-case .nc-car .gx .gx-card{font-size:6.5px!important}
 .op-case .nc-car .gx-ex .gx-lab em,.op-case .nc-car .gx-ex .gx-lab span{font-size:5px!important}
 .op-case .nc-car .gx-ex .gx-lab strong{font-size:8px!important}
}

/* Deck variant: same live covers inside the stacked cards */
.op-case .fl-card .nc-cover{position:relative;overflow:hidden;background:#222!important}
.op-case .fl-card .nc-cover>:not(.gx){display:none!important}
.op-case .fl-card .nc-cover .cv2::before,.op-case .fl-card .nc-cover .cv2::after{content:none!important}
.op-case .fl-card .nc-cover .gx{border-radius:inherit}

.op-case .fl-card .nc-cover{display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border-radius:inherit}

/* deck (3D-stacked cards): animated swaps don't paint inside the 3D stack in Chrome — show the first screen still */
.op-case .fl-card .gx-scr img{animation:none!important;opacity:0!important}
.op-case .fl-card .gx-scr img:first-child{opacity:1!important}

/* Next case carousel header, like Stripe "What's happening": two-line title left, arrow buttons right, aligned with the active card */
.op-case .nc-hd2{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 12%;margin-bottom:clamp(28px,3.4vw,48px)}
.op-case .nc-hd2 h3{margin:0;font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.08;letter-spacing:-.025em;color:#0B0B0B}
.op-case .nc-hd2 p{margin:0;font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.08;letter-spacing:-.025em;color:#8a8a90;text-wrap:balance}
.op-case .nc-hd2-a{display:flex;gap:10px;flex:0 0 auto}
.op-case .nc-arr{width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);border:0;border-radius:10px;background:#f1f1f3;color:#0B0B0B;display:grid;place-items:center;cursor:pointer;transition:background .25s ease,transform .25s ease}
.op-case .nc-arr svg{width:20px;height:20px}
.op-case .nc-arr:hover{background:#e6e6e9}
.op-case .nc-arr:active{transform:scale(.95)}
@media (max-width:760px){.op-case .nc-hd2{padding:0 7%;align-items:flex-start;flex-direction:column;gap:16px}.op-case .nc-hd2 h3,.op-case .nc-hd2 p{font-size:22px}.op-case .nc-hd2-a{display:none}}


/* layout switcher removed: the Row carousel is the only next-case layout */
.op-case .nc-tg{display:none!important}
.op-case .nc-flow{display:none!important}
.op-case .nc-row.is-car{display:block!important}

/* Discover more header in the site style: .h3 type, round grey arrow buttons that turn hot with the spinning mark on hover */
.op-case .nc-hd2 h3,.op-case .nc-hd2 p{font-size:clamp(28px,24.29px + .952vw,38px)!important;font-weight:400!important;line-height:1.1!important;letter-spacing:-.03em!important;margin:0!important;max-width:none!important}
.op-case .nc-hd2 p{color:rgba(11,11,11,.45)!important}
.op-case .nc-arr{position:relative;width:48px!important;height:48px!important;padding:0!important;border:0;border-radius:50%!important;background:var(--grey,#f2f2f2)!important;color:var(--ink,#0b0b0b);cursor:pointer;transition:background-color .35s ease!important}
.op-case .nc-arr svg{position:absolute;inset:0;margin:auto;width:22px!important;height:22px!important;transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.op-case .nc-arr .tb{width:36px!important;height:36px!important;opacity:0;transform:scale(.3)}
.op-case .nc-arr .tb g{animation:reelspin 2.6s linear infinite;animation-play-state:paused;transform-origin:0 0}
.op-case .nc-arr:hover,.op-case .nc-arr:focus-visible{background:var(--hot)!important}
.op-case .nc-arr:hover .ar,.op-case .nc-arr:focus-visible .ar{opacity:0;transform:scale(.3)}
.op-case .nc-arr:hover .tb,.op-case .nc-arr:focus-visible .tb{opacity:1;transform:none}
.op-case .nc-arr:hover .tb g{animation-play-state:running}
@media (max-width:760px){.op-case .nc-hd2 h3,.op-case .nc-hd2 p{font-size:26px!important}}

.op-case .nc-hd2{align-items:center!important}

/* lighter covers: drop the bottom corner labels and pill, keep only the title in the arc */
.gx .gx-bl,.gx .gx-br,.gx .gx-pill{display:none!important}
.gx-ex .gx-lab em,.gx-ex .gx-lab span{display:none!important}

/* Meld, Geex "Apple iOS 16 UI Kit" composition: phone in the middle, one big word each side at mid-height, swapping with the screen */
.gx-mat .gx-mword,.gx-mat .gx-mlab,.gx-mat .gx-hl,.gx-mat .gx-c,.gx-mat .gx-pill{display:none!important}
.gx-meld .gx-phone{--ph:86cqh!important;top:7cqh!important}
.gx-big{position:absolute;inset:0;z-index:1;pointer-events:none}
.gx-bw{position:absolute;inset:0;opacity:0;animation:gxbw 9s infinite}
.gx-bw:nth-child(2){animation-delay:3s}.gx-bw:nth-child(3){animation-delay:6s}
@keyframes gxbw{0%{opacity:0;transform:translateY(3%)}3%{opacity:1;transform:none}30%{opacity:1;transform:none}33%{opacity:0}100%{opacity:0}}
.gx-bw span{position:absolute;top:50%;translate:0 -55%;font-weight:500;font-size:min(16cqh,9cqw);line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.gx-bw .l{right:calc(50% + 23cqh)}
.gx-bw .r{left:calc(50% + 23cqh)}
.gx-mat .gx-cat{z-index:3}
@container (max-width:320px){.gx-meld .gx-phone{--ph:80cqh!important;top:10cqh!important}.gx-bw .l{right:calc(50% + 21cqh)}.gx-bw .r{left:calc(50% + 21cqh)}}
@media (prefers-reduced-motion:reduce){.gx-bw{animation:none}.gx-bw:first-child{opacity:1}}

@container (max-width:320px){.op-case .nc-car .gx .gx-bl,.op-case .nc-car .gx .gx-br,.op-case .nc-car .gx .gx-pill,.op-case .nc-car .gx-ex .gx-lab em,.op-case .nc-car .gx-ex .gx-lab span{display:none!important}}
@media (max-width:760px){.op-case .nc-hd2{align-items:flex-start!important;text-align:left}}

/* bigger Meld mascot (desktop + mobile), bottom-right, partly in front of the phone */
.gx-mat .gx-cat{width:30cqw!important;left:auto!important;right:6cqw!important;bottom:-4cqh!important}
@container (max-width:320px){.op-case .nc-car .gx-mat .gx-cat,.gx-mat .gx-cat{width:40cqw!important;left:auto!important;right:2cqw!important;bottom:-5cqh!important}}

/* Meld big words: bigger, like the Geex reference */
.gx-bw span{font-size:min(25cqh,12.5cqw)!important;letter-spacing:-.045em}
.gx-bw .l{right:calc(50% + 22cqh)!important}.gx-bw .r{left:calc(50% + 22cqh)!important}
@container (max-width:320px){.gx-bw span{font-size:min(16cqh,10.5cqw)!important}}

/* Meld: minimal corner info, top only */
.gx-mc{position:absolute;z-index:3;top:4.6cqh;font:500 max(8px,1.05cqw)/1.25 ui-monospace,"SF Mono","Geist Mono",Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.gx-mc b{font-weight:500;color:rgba(255,255,255,.55)}
.gx-mc.tl{left:3.2cqw}.gx-mc.tr{right:3.2cqw;text-align:right}
@container (max-width:320px){.gx-mc{font-size:6px}}

/* Meld: bigger words tucked behind phone, one-word corners */
.gx-meld .gx-big{z-index:1}.gx-meld .gx-phone{z-index:2}.gx-meld .gx-cat{z-index:4}
.gx-meld .gx-bw span{font-size:min(30cqh,13.6cqw)!important;letter-spacing:-.045em;translate:0 -54%}
.gx-meld .gx-bw .l{right:calc(50% + 9cqh)}.gx-meld .gx-bw .r{left:calc(50% + 9cqh)}
@container (max-width:320px){.gx-meld .gx-bw span{font-size:min(24cqh,13cqw)!important}.gx-meld .gx-bw .l{right:calc(50% + 10cqh)}.gx-meld .gx-bw .r{left:calc(50% + 10cqh)}}

.gx-mc.bl,.gx-mc.br{top:auto;bottom:4.6cqh}.gx-mc.bl{left:3.2cqw}.gx-mc.br{right:3.2cqw;text-align:right}.gx-mc{z-index:5}

/* ColdSend ASCII snowflake */
.gx-snow{position:absolute;z-index:0;margin:0;left:50%;top:50%;translate:-50% -50%;font:500 3cqh/1 ui-monospace,"SF Mono","Geist Mono",Menlo,monospace;letter-spacing:0;white-space:pre;color:rgba(255,255,255,.62);pointer-events:none;user-select:none}
.gx-coldsend .gx-word{z-index:1}

/* ColdSend = Blaster ref: snowflake + centred laptop + 4 corners */
.gx-csref .gx-lap{left:50%!important;top:50%!important;translate:-50% -46%!important;width:min(38cqw,86cqh)!important;z-index:2}
@container (max-width:320px){.gx-csref .gx-lap{width:62cqw!important}.gx-csref .gx-snow{font-size:2.8cqh}}

/* Geex-style corner captions */
.gx-gc{position:absolute;z-index:5;font:400 max(7px,1cqw)/1.35 ui-monospace,"SF Mono","Geist Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;display:flex;flex-direction:column}
.gx-gc em{font-style:normal;color:var(--hot-hi,#ff7d3d)}
.gx-gc.tl{left:3.2cqw;top:4.6cqh}.gx-gc.tr{right:3.2cqw;top:4.6cqh;align-items:flex-end;text-align:right}
.gx-gc.bl{left:3.2cqw;bottom:4.6cqh}.gx-gc.br{right:3.2cqw;bottom:4.6cqh;text-align:right}
@container (max-width:320px){.gx-gc{font-size:5.5px}.gx-gc.tr span:first-child{display:none}}

/* story block mini cover: captions that fit */
.case .c3-shot .gx-gc.bl,.case .c3-shot .gx-gc.br{display:none}
@container (max-width:520px){.gx-gc.tr span:first-child{display:none}}

.case .c3-shot .gx-mc.bl,.case .c3-shot .gx-mc.br{display:none}

/* Story card on tablet + mobile: one 32px inner field (Companion ref), desktop untouched */
@media (max-width:1024px){
 .case .case3 .c3-quote{padding-left:32px!important;padding-right:32px!important}
 .case .case3 .c3-from{padding-left:32px!important;padding-right:32px!important;padding-bottom:32px!important}
 .case .case3 .c3-shot{margin:0 32px 32px 0!important}
}
@media (max-width:760px){
 .case .case3 .c3-from{padding-bottom:0!important}
 .case .case3 .c3-shot{margin:40px 32px 32px!important}
}
/* ColdSend cover in 4:3 / portrait-ish frames (mobile carousel): bigger laptop */
@container (aspect-ratio < 1.6){.gx-csref .gx-lap{width:72cqw!important}}

/* Danzee: phones a bit closer together */
.gx-air2 .gx-trio{gap:3cqw!important}
@container (max-width:460px){.gx-air2 .gx-trio{gap:1.6cqw!important}}
@container (max-width:320px){.gx-air2 .gx-trio{gap:2cqw!important}}
/* Danzee motion: no bounce — centre phone holds, side phones glide in counter-phase */
@keyframes gxglide{0%,100%{transform:translateY(0)}50%{transform:translateY(-5cqh)}}
.gx-air2 .gx-trio .gx-phone{animation:gxglide 9s cubic-bezier(.45,0,.55,1) infinite!important}
.gx-air2 .gx-trio .gx-phone:nth-child(1){animation-delay:0s!important}
.gx-air2 .gx-trio .gx-phone:nth-child(2){animation:none!important}
.gx-air2 .gx-trio .gx-phone:nth-child(3){animation-delay:-4.5s!important}

/* Danzee: screens unfold from a crumpled sheet (ref: recent.design "Crumpled Paper Unfold") */
.gx-air2 .gx-trio .gx-phone{animation:none!important}
.gx-air2 .gx-scr.gx-crumh{perspective:220px;background:#ecebe7!important}
.gx-air2 .gx-scr.gx-crumh > img{opacity:0!important}
.gx-crum{position:absolute;inset:0;display:grid;transform-style:preserve-3d}
.gx-crum i{display:block;background-repeat:no-repeat;transform-origin:50% 50%;backface-visibility:visible;will-change:transform,filter;transition:transform 1.15s cubic-bezier(.16,1,.3,1),filter 1.15s ease;outline:.5px solid transparent}
.gx-crum.c i{transition:transform .6s cubic-bezier(.55,0,.8,.45),filter .6s ease}

.gx-air2 .gx-scr.gx-crumh.flat > img{opacity:1!important}
.gx-air2 .gx-scr.gx-crumh.flat{background:transparent!important}
.gx-air2 .gx-scr.gx-crumh.flat .gx-crum{visibility:hidden}

/* Danzee case screens: status bar flush with the content card edges (8/402), smaller island (same fix as the cover screenshots) */
#op-case-danzee .fzs .z-time{text-align:left!important;padding-left:calc(8*var(--s))!important;padding-right:0!important}
#op-case-danzee .fzs .z-lv{padding-right:calc(8*var(--s))!important}
#op-case-danzee .trio__island{transform:translateX(-50%) scale(.7)!important}

/* Danzee phones a little bigger, only in the story block picture */
.case .c3-shot-danzee .gx-trio{top:50%!important;translate:-50% -50%!important;scale:1.1;transform-origin:50% 50%}

/* Meld picture in the story block: calmer, lighter ground */


/* Meld mascot: more accent + character animation (breathe → squash → hop → land → happy wiggle) */
.gx-meld .gx-cat{filter:saturate(1.3) contrast(1.06) brightness(1.04) drop-shadow(0 1.2cqh 1.2cqh rgba(40,0,20,.35))!important;transform-origin:50% 96%!important;animation:gxhop 6.4s cubic-bezier(.4,0,.2,1) infinite!important;will-change:transform}

@keyframes gxhop{
 0%,40%{transform:translateY(0) scale(1,1) rotate(0)}
 20%{transform:translateY(0) scale(1.012,.988) rotate(0)}
 50%{transform:translateY(0) scale(1.08,.9) rotate(0)}
 58%{transform:translateY(-14%) scale(.95,1.07) rotate(-5deg)}
 64%{transform:translateY(-16%) scale(.98,1.02) rotate(-3deg)}
 70%{transform:translateY(0) scale(1.09,.9) rotate(0)}
 75%{transform:translateY(0) scale(.97,1.04) rotate(0)}
 80%{transform:translateY(0) scale(1,1) rotate(6deg)}
 85%{transform:translateY(0) scale(1,1) rotate(-5deg)}
 90%{transform:translateY(0) scale(1,1) rotate(3deg)}
 95%,100%{transform:translateY(0) scale(1,1) rotate(0)}}
@keyframes gxglow{0%,45%,100%{opacity:.55;transform:scale(.92)}62%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.gx-meld .gx-cat,.gx-meld .gx-cat::before{animation:none!important}}

/* Meld covers: pastel ground from Figma (Zade | Visuals 1094:13038) + dark type on it */
.gx-meld{background:
 radial-gradient(60% 75% at 50% 40%,rgba(255,255,255,.55),transparent 70%),
 radial-gradient(70% 80% at 100% 100%,rgba(196,201,212,.35),transparent 70%),
 #E8EAEE!important}
.gx-meld .gx-bw span{color:#1b1418!important}
.gx-meld .gx-mc{color:rgba(27,20,24,.72)!important}
.gx-meld .gx-cat{filter:saturate(1.3) contrast(1.06) brightness(1.04) drop-shadow(0 1.2cqh 1.2cqh rgba(120,40,70,.28))!important}

.gx-meld::after{display:none!important}

/* Meld mascot peeks out from BEHIND the phone (right side), ref: Tolan App Store shots */
.gx-meld .gx-big{z-index:1!important}.gx-meld .gx-cat{z-index:2!important}.gx-meld .gx-phone{z-index:3!important}
.gx-meld.gx-mat .gx-cat,.op-case .nc-car .gx-meld.gx-mat .gx-cat{left:calc(50% + 4cqh)!important;right:auto!important;bottom:-3cqh!important;width:30cqw!important;transform-origin:8% 95%!important;animation:gxpeek 7.5s cubic-bezier(.5,0,.2,1) infinite!important}
@container (max-width:320px){.gx-meld.gx-mat .gx-cat,.op-case .nc-car .gx-meld.gx-mat .gx-cat{width:38cqw!important;left:calc(50% + 2cqh)!important;bottom:-4cqh!important}}
@keyframes gxpeek{
 0%,12%{transform:translate(-28%,26%) rotate(-8deg)}
 22%{transform:translate(6%,-3%) rotate(7deg)}
 27%{transform:translateX(0) rotate(3deg)}
 33%{transform:translateX(0) rotate(9deg)}
 39%{transform:translateX(0) rotate(1deg)}
 45%{transform:translateX(0) rotate(8deg)}
 52%,60%{transform:translateX(0) rotate(3deg)}
 66%{transform:translate(-18%,8%) rotate(-2deg)}
 70%{transform:translate(-14%,6%) rotate(2deg)}
 80%,100%{transform:translate(-28%,26%) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.gx-meld .gx-cat{animation:none!important;transform:translateX(-10%)}}



/* Meld: two mascots stand on the cover floor next to the phone and take turns jumping out from BEHIND it (real-ish scale: ~1/3 of the phone) */
.gx-meld .gx-cat{display:none!important}
.gx-meld .gx-j{position:absolute;z-index:2;bottom:0;height:30cqh;aspect-ratio:640/525;background:url(/landing/assets/img/meld/home/cat.webp) center bottom/contain no-repeat;pointer-events:none;will-change:transform;filter:saturate(1.2) drop-shadow(0 .8cqh .8cqh rgba(30,34,45,.22))}
.gx-meld .gx-j.r{left:calc(50% + 21cqh);transform-origin:50% 100%;animation:gxjr 8s cubic-bezier(.5,0,.2,1) infinite}
.gx-meld .gx-j.l{left:calc(50% - 21cqh - 36.6cqh);height:26cqh;transform-origin:50% 100%;filter:hue-rotate(28deg) saturate(1.15) brightness(1.05) drop-shadow(0 .8cqh .8cqh rgba(120,60,40,.25));animation:gxjl 8s cubic-bezier(.5,0,.2,1) infinite;animation-delay:-4s}
@keyframes gxjr{
 0%,8%{transform:translate(-40cqh,22cqh) scale(1,1)}
 12%{transform:translate(-40cqh,22cqh) scale(1.1,.88)}
 20%{transform:translate(-20cqh,-26cqh) rotate(14deg) scale(.95,1.06)}
 28%{transform:translate(0,0) scale(1.14,.84)}
 32%{transform:translate(0,-3cqh) scale(.96,1.05)}
 36%{transform:translate(0,0) scale(1,1)}
 42%{transform:translate(0,0) rotate(6deg)}
 48%{transform:translate(0,0) rotate(-4deg)}
 54%,58%{transform:translate(0,0) rotate(0)}
 62%{transform:translate(0,0) scale(1.1,.88)}
 70%{transform:translate(-20cqh,-20cqh) rotate(-12deg) scale(.96,1.05)}
 78%,100%{transform:translate(-40cqh,22cqh) scale(1,1)}}
@keyframes gxjl{
 0%,8%{transform:translate(40cqh,22cqh) scale(-1,1)}
 12%{transform:translate(40cqh,22cqh) scale(-1.1,.88)}
 20%{transform:translate(20cqh,-24cqh) rotate(-14deg) scale(-.95,1.06)}
 28%{transform:translate(0,0) scale(-1.14,.84)}
 32%{transform:translate(0,-3cqh) scale(-.96,1.05)}
 36%{transform:translate(0,0) scale(-1,1)}
 42%{transform:translate(0,0) rotate(-6deg) scale(-1,1)}
 48%{transform:translate(0,0) rotate(4deg) scale(-1,1)}
 54%,58%{transform:translate(0,0) scale(-1,1)}
 62%{transform:translate(0,0) scale(-1.1,.88)}
 70%{transform:translate(20cqh,-18cqh) rotate(12deg) scale(-.96,1.05)}
 78%,100%{transform:translate(40cqh,22cqh) scale(-1,1)}}
@media (prefers-reduced-motion:reduce){.gx-meld .gx-j{animation:none}.gx-meld .gx-j.l{transform:scale(-1,1)}}

/* Meld: ONE mascot — peeks out right & giggles, hides, peeks out left & giggles, steps out and waves, hides */
.gx-meld .gx-j.l{display:none!important}
.gx-meld .gx-j.r{left:calc(50% - 18.3cqh)!important;transform-origin:50% 100%!important;animation:gxsolo 11s cubic-bezier(.5,0,.2,1) infinite!important}
@keyframes gxsolo{
 0%,8%{transform:translate(0,0) rotate(0)}
 14%{transform:translate(23cqh,0) rotate(12deg)}
 16%{transform:translate(23cqh,-1.6cqh) rotate(14deg) scale(1.03,.97)}
 18%{transform:translate(23cqh,0) rotate(10deg)}
 20%{transform:translate(23cqh,-1.6cqh) rotate(14deg) scale(1.03,.97)}
 22%{transform:translate(23cqh,0) rotate(10deg)}
 24%{transform:translate(23cqh,-1.2cqh) rotate(13deg)}
 27%{transform:translate(23cqh,0) rotate(11deg)}
 33%{transform:translate(0,0) rotate(0)}
 39%{transform:translate(-23cqh,0) rotate(-12deg)}
 41%{transform:translate(-23cqh,-1.6cqh) rotate(-14deg) scale(1.03,.97)}
 43%{transform:translate(-23cqh,0) rotate(-10deg)}
 45%{transform:translate(-23cqh,-1.6cqh) rotate(-14deg) scale(1.03,.97)}
 47%{transform:translate(-23cqh,0) rotate(-10deg)}
 49%{transform:translate(-23cqh,-1.2cqh) rotate(-13deg)}
 52%{transform:translate(-23cqh,0) rotate(-11deg)}
 57%{transform:translate(-38cqh,0) rotate(0) scale(1.06,.92)}
 60%{transform:translate(-38cqh,-3cqh) rotate(0) scale(.97,1.04)}
 63%{transform:translate(-38cqh,0) rotate(0)}
 67%{transform:translate(-38cqh,0) rotate(8deg)}
 71%{transform:translate(-38cqh,0) rotate(-6deg)}
 75%{transform:translate(-38cqh,0) rotate(8deg)}
 79%{transform:translate(-38cqh,0) rotate(-6deg)}
 83%{transform:translate(-38cqh,0) rotate(0)}
 90%{transform:translate(0,0) rotate(0)}
 96%,100%{transform:translate(0,0) rotate(0)}}

/* story block only: bigger Meld mascot (offsets scaled to match) */
.case .c3-shot-meld .gx-meld .gx-j.r{height:38cqh!important;left:calc(50% - 23.2cqh)!important;animation-name:gxsolo2!important}
@keyframes gxsolo2{
 0%,8%{transform:translate(0,0) rotate(0) scale(.86)}
 14%{transform:translate(29cqh,0) rotate(12deg)}
 16%{transform:translate(29cqh,-1.6cqh) rotate(14deg) scale(1.03,.97)}
 18%{transform:translate(29cqh,0) rotate(10deg)}
 20%{transform:translate(29cqh,-1.6cqh) rotate(14deg) scale(1.03,.97)}
 22%{transform:translate(29cqh,0) rotate(10deg)}
 24%{transform:translate(29cqh,-1.2cqh) rotate(13deg)}
 27%{transform:translate(29cqh,0) rotate(11deg)}
 33%{transform:translate(0,0) rotate(0) scale(.86)}
 39%{transform:translate(-29cqh,0) rotate(-12deg)}
 41%{transform:translate(-29cqh,-1.6cqh) rotate(-14deg) scale(1.03,.97)}
 43%{transform:translate(-29cqh,0) rotate(-10deg)}
 45%{transform:translate(-29cqh,-1.6cqh) rotate(-14deg) scale(1.03,.97)}
 47%{transform:translate(-29cqh,0) rotate(-10deg)}
 49%{transform:translate(-29cqh,-1.2cqh) rotate(-13deg)}
 52%{transform:translate(-29cqh,0) rotate(-11deg)}
 57%{transform:translate(-48cqh,0) rotate(0) scale(1.06,.92)}
 60%{transform:translate(-48cqh,-3cqh) rotate(0) scale(.97,1.04)}
 63%{transform:translate(-48cqh,0) rotate(0)}
 67%{transform:translate(-48cqh,0) rotate(8deg)}
 71%{transform:translate(-48cqh,0) rotate(-6deg)}
 75%{transform:translate(-48cqh,0) rotate(8deg)}
 79%{transform:translate(-48cqh,0) rotate(-6deg)}
 83%{transform:translate(-48cqh,0) rotate(0)}
 90%{transform:translate(0,0) rotate(0) scale(.86)}
 96%,100%{transform:translate(0,0) rotate(0) scale(.86)}}

/* ColdSend case hero shot: narrower side padding around the laptop window */
@media (min-width:601px){#op-case-coldsend .cs-a .cs-win{--cw:93cqw!important;--cx:3.5cqw!important;--cy:2.8cqw!important}}

/* ColdSend case shots: halftone squares as quiet as on Danzee (≈6 levels darker than the ground, not 16) */
#op-case-coldsend .cs-row .fz-tone{background:#ECEDEF!important}

/* ColdSend: the window bar travels with the screen when the camera pans/zooms (same transform, pivot at the screen's top-left = bar's bottom-left) */
#op-case-coldsend .cs-win .cs-bar{transform-origin:0 100%;transition:transform 1.2s cubic-bezier(.65,0,.25,1);position:relative;z-index:2;margin-bottom:-1px;box-shadow:none}

/* ColdSend: "Help guide" info icon in the app's green (same as the Initialized badge) */
#op-case-coldsend .h8-help svg,#op-case-coldsend .s7-help svg{color:#08A15C}

/* ColdSend half-width shots: top offset = left offset (window bleeds off right/bottom evenly) */
@media (min-width:601px){#op-case-coldsend .cs-row figure.cs-shot.cs-b .cs-win,#op-case-coldsend .cs-row figure.cs-shot.cs-c .cs-win{top:7cqw!important}}

/* ColdSend stepper: stretched edge to edge (first circle on the left edge, last on the right) + more air under the title */
#op-case-coldsend .b7-st{margin:calc(20*var(--w)) 0 calc(22*var(--w))!important}
#op-case-coldsend .b7-s.s1{flex:0 0 calc(28*var(--w));align-items:flex-start}
#op-case-coldsend .b7-s.s3{flex:0 0 calc(28*var(--w));align-items:flex-end}
#op-case-coldsend .b7-s.s1,#op-case-coldsend .b7-s.s3{min-width:0}
#op-case-coldsend .b7-s.s1 em,#op-case-coldsend .b7-s.s3 em{width:max-content;flex:none}
#op-case-coldsend .b7-ln.l1{margin-left:0;margin-right:calc(-34*var(--w))}
#op-case-coldsend .b7-ln.l2{margin-left:calc(-34*var(--w));margin-right:0}

/* ColdSend "6 senders on …" subline: own line-height instead of the inherited 24px */
#op-case-coldsend .b7-mh em{line-height:1.3}

/* ColdSend: mailbox list a bit lower under "Add mailboxes" */
#op-case-coldsend .b7-mh{margin-bottom:calc(16*var(--w))!important}

/* ColdSend "Buy a domain name": no close cross */
#op-case-coldsend .c7-x{display:none!important}

/* ColdSend "Buy a domain name": same rhythm as the setup screen — stepper ~12px under the header, ~14px above the content */
#op-case-coldsend .c7-st{padding-top:calc(20*var(--w))!important;padding-bottom:calc(24*var(--w))!important}

/* ColdSend "Buy a domain name": card fills the screen width (was a fixed width leaving a wide empty strip on the right) */
#op-case-coldsend .cs-c .s7-card.c7{width:auto!important}

/* ColdSend "Halcyon Sales UK setup": card fills the screen width too */
#op-case-coldsend .cs-b .s7-card.b7{width:auto!important}

/* ColdSend half shots: the window bleeds ~6.1% past the frame on the right, so pad the content by that much — visible right gap = left gap */
#op-case-coldsend .cs-b .s7-card.b7,#op-case-coldsend .cs-c .s7-card.c7{padding-right:var(--bleedpad)!important}

/* ColdSend half shots: roomier side padding inside the screens (~22px instead of ~14) */
#op-case-coldsend .cs-b .s7-card.b7{padding-left:calc(27*var(--w))!important}
#op-case-coldsend .cs-c .c7-h,#op-case-coldsend .cs-c .c7-st,#op-case-coldsend .cs-c .c7-cols{padding-left:calc(26*var(--w))!important;padding-right:calc(26*var(--w))!important}

/* Danzee crumple: cross-fade facets → real screenshot (no jump when the sheet becomes flat) */
.gx-air2 .gx-scr.gx-crumh > img{transition:opacity .45s ease;position:relative;z-index:1}
.gx-air2 .gx-scr.gx-crumh .gx-crum{opacity:1;visibility:visible;transition:none}
.gx-air2 .gx-scr.gx-crumh.flat .gx-crum{opacity:1;visibility:hidden;transition:visibility 0s linear .45s}
.gx-air2 .gx-scr.gx-crumh.flat{transition:background-color 0s linear .45s}

/* ColdSend cover: tablet like in the case (uniform black bezel, big radius, window bar with 3 dots) instead of a laptop */
.gx-csref .gx-base{display:none!important}
.gx-csref .gx-lid{padding:.75cqw!important;border-radius:2.6cqw!important;background:#0b0b0c!important;box-shadow:0 0 0 .22cqw #cfd0d6,0 2.4cqh 5cqh rgba(10,20,60,.28)!important}
.gx-csref .gx-lid .gx-scr{position:relative;border-radius:1.9cqw!important;overflow:hidden}
.gx-csref .gx-lid .gx-scr::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:7%;background:
 radial-gradient(circle at 3.2% 50%,#ED6A5E 0 .42cqw,transparent .45cqw),
 radial-gradient(circle at 5.6% 50%,#F5BF4F 0 .42cqw,transparent .45cqw),
 radial-gradient(circle at 8% 50%,#61C454 0 .42cqw,transparent .45cqw),#F6F6F7;border-bottom:1px solid #EAECF1}
.gx-csref .gx-lid .gx-scr img{top:7%!important;height:93%!important}

/* ColdSend cover tablet: bigger, cleaner corners, bar dots clear of the radius */
.gx-csref .gx-lap{width:min(48cqw,104cqh)!important}
@container (aspect-ratio < 1.6){.gx-csref .gx-lap{width:80cqw!important}}
.gx-csref .gx-lid{padding:.8cqw!important;border-radius:2.8cqw!important}
.gx-csref .gx-lid .gx-scr{border-radius:2cqw!important}
.gx-csref .gx-lid .gx-scr::before{height:8%!important;background:
 radial-gradient(circle at 5.4% 50%,#ED6A5E 0 .45cqw,transparent .48cqw),
 radial-gradient(circle at 8.2% 50%,#F5BF4F 0 .45cqw,transparent .48cqw),
 radial-gradient(circle at 11% 50%,#61C454 0 .45cqw,transparent .48cqw),#F6F6F7!important}
.gx-csref .gx-lid .gx-scr img{top:8%!important;height:92%!important}
/* splash: ColdSend snowflake on brand blue, then the dashboard */
.gx-csref .gx-splash{position:absolute;inset:8% 0 0;z-index:2;display:grid;place-items:center;background:radial-gradient(70% 90% at 50% 40%,#4C93FF,#1F6FE5 70%);animation:gxsplash 9s cubic-bezier(.4,0,.2,1) infinite}
.gx-csref .gx-splash i{display:grid;place-items:center;width:26%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 1cqh 3cqh rgba(10,30,90,.3);animation:gxflake 9s cubic-bezier(.3,1.4,.5,1) infinite}
.gx-csref .gx-splash svg{width:62%;height:62%}
.gx-csref .gx-splash svg > g{animation:gxspin 9s cubic-bezier(.5,0,.2,1) infinite;transform-origin:20px 20px}
@keyframes gxsplash{0%,15%{opacity:1}22%,100%{opacity:0}}
@keyframes gxflake{0%{transform:scale(.4);opacity:0}6%{transform:scale(1);opacity:1}15%{transform:scale(1)}21%,100%{transform:scale(1.25);opacity:0}}
@keyframes gxspin{0%,3%{rotate:-90deg}14%,100%{rotate:0deg}}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-splash{display:none}}

/* ColdSend cover tablet v3: larger, tighter radius, thinner bezel and outline */
.gx-csref .gx-lap{width:min(58cqw,124cqh)!important}
@container (aspect-ratio < 1.6){.gx-csref .gx-lap{width:86cqw!important}}
.gx-csref .gx-lid{padding:.45cqw!important;border-radius:1.8cqw!important;box-shadow:0 0 0 .14cqw #cfd0d6,0 2.4cqh 5cqh rgba(10,20,60,.28)!important}
.gx-csref .gx-lid .gx-scr{border-radius:1.35cqw!important}

.gx-csref .gx-lap{translate:-50% -50%!important}

/* ColdSend cover: dark keycap-ASCII field (ref: recent.design "Keycap ASCII Fish") — snowflake ⇄ envelope */
.gx-csref{background:#0A0E18 !important}
.gx-csref::after{display:none!important}
.gx-csref .gx-snow{display:none!important}
.gx-csref .gx-key{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}

/* ColdSend cover: calmer accent instead of hot orange on the captions */
.gx-csref .gx-gc em{color:#8FB4FF!important}

/* ColdSend cover: live animated dashboard inside the tablet (replaces the static screenshots) */
.gx-csref .gx-lid .gx-scr{container-type:size}
.gx-csref .gx-lid .gx-scr > img{display:none!important}
.gx-ld{position:absolute;inset:8% 0 0;z-index:1;display:grid;grid-template-columns:6.5cqw 1fr;background:#F3F4F6;font-family:"Inter","Inter Tight",system-ui,sans-serif;color:#181B26;overflow:hidden}
.gx-ld .sb{background:#fff;border-right:1px solid #EAECF1;display:flex;flex-direction:column;align-items:center;gap:2.2cqw;padding-top:2.2cqw}
.gx-ld .sb b{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#1F78F5;display:grid;place-items:center}
.gx-ld .sb b svg{width:62%;height:62%}
.gx-ld .sb i{width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:#EEF0F4}
.gx-ld .sb i.on{background:#E3EEFF;box-shadow:inset 0 0 0 1px #BFD6FF}
.gx-ld .mn{padding:2.2cqw 2.6cqw;display:grid;grid-template-rows:auto auto 1fr auto;gap:1.6cqw;min-width:0}
.gx-ld .hd{display:flex;align-items:center;gap:1.2cqw;font-weight:600;font-size:2.3cqw;letter-spacing:-.01em}
.gx-ld .chip{font-size:1.35cqw;font-weight:600;padding:.35cqw .9cqw;border-radius:.6cqw;background:#E6F6EE;color:#08A15C}
.gx-ld .live{margin-left:auto;display:flex;align-items:center;gap:.7cqw;font-size:1.4cqw;font-weight:500;color:#5B6274}
.gx-ld .live u{width:1cqw;height:1cqw;border-radius:50%;background:#08A15C;box-shadow:0 0 0 0 rgba(8,161,92,.5);animation:ldpulse 1.6s ease-out infinite}
.gx-ld .kp{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1.4cqw}
.gx-ld .k{background:#fff;border-radius:1.2cqw;padding:1.4cqw 1.6cqw;box-shadow:0 0 0 1px #EAECF1;min-width:0}
.gx-ld .k small{display:block;font-size:1.35cqw;color:#717989;margin-bottom:.6cqw}
.gx-ld .k strong{font-size:3.4cqw;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gx-ld .k em{font-style:normal;font-size:1.3cqw;color:#08A15C;margin-left:.6cqw;font-weight:600}
.gx-ld .ring{display:flex;align-items:center;gap:1.2cqw}
.gx-ld .ring svg{width:5cqw;height:5cqw;rotate:-90deg}
.gx-ld .ring circle.p{stroke-dasharray:100;stroke-dashoffset:100;animation:ldring 9s cubic-bezier(.3,0,.2,1) infinite}
.gx-ld .bar{height:.9cqw;border-radius:1cqw;background:#EEF0F4;overflow:hidden;margin-top:1.1cqw}
.gx-ld .bar u{display:block;height:100%;width:86%;background:linear-gradient(90deg,#1F78F5,#5AA0FF);transform-origin:left;animation:ldbar 9s cubic-bezier(.3,0,.2,1) infinite}
.gx-ld .ch{background:#fff;border-radius:1.2cqw;box-shadow:0 0 0 1px #EAECF1;padding:1.4cqw 1.6cqw;position:relative;min-height:0;display:grid;grid-template-rows:auto 1fr}
.gx-ld .ch small{font-size:1.35cqw;color:#717989}
.gx-ld .ch svg{width:100%;height:100%;overflow:visible}
.gx-ld .ch .ln{fill:none;stroke:#1F78F5;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:ldline 9s cubic-bezier(.4,0,.2,1) infinite;vector-effect:non-scaling-stroke}
.gx-ld .ch .ar{fill:url(#ldg);opacity:0;animation:ldarea 9s ease infinite}
.gx-ld .ch .gl line{stroke:#EEF0F4;stroke-width:1;vector-effect:non-scaling-stroke}
.gx-ld .ls{display:grid;gap:.8cqw}
.gx-ld .r{display:grid;grid-template-columns:1fr 14cqw 9.5cqw;align-items:center;gap:1.4cqw;background:#fff;border-radius:1cqw;box-shadow:0 0 0 1px #EAECF1;padding:1cqw 1.6cqw;font-size:1.5cqw;font-weight:500;opacity:0;translate:0 1cqw;animation:ldrow 9s ease infinite}
.gx-ld .r:nth-child(2){animation-delay:.15s}.gx-ld .r:nth-child(3){animation-delay:.3s}
.gx-ld .r .hb{height:.7cqw;border-radius:1cqw;background:#EEF0F4;overflow:hidden}
.gx-ld .r .hb u{display:block;height:100%;background:#08A15C;transform-origin:left;scale:0 1;animation:ldhb 9s cubic-bezier(.3,0,.2,1) infinite}
.gx-ld .r .st{justify-self:end;position:relative;font-size:1.25cqw;font-weight:600;height:2.3cqw;width:9.5cqw}
.gx-ld .r .st span{position:absolute;inset:0;display:grid;place-items:center;border-radius:.6cqw}
.gx-ld .r .st .w{background:#FFF4E0;color:#B7791F;animation:ldw 9s ease infinite}
.gx-ld .r .st .ok{background:#E6F6EE;color:#08A15C;opacity:0;animation:ldok 9s ease infinite}
.gx-ld .r:nth-child(2) .st span,.gx-ld .r:nth-child(2) .hb u{animation-delay:.6s}.gx-ld .r:nth-child(3) .st span,.gx-ld .r:nth-child(3) .hb u{animation-delay:1.2s}
.gx-ld .toast{position:absolute;right:2.4cqw;bottom:2.4cqw;display:flex;align-items:center;gap:1cqw;background:#181B26;color:#fff;font-size:1.45cqw;font-weight:500;padding:1.1cqw 1.6cqw;border-radius:1.1cqw;box-shadow:0 1cqw 3cqw rgba(10,20,50,.25);opacity:0;translate:0 2cqw;animation:ldtoast 9s cubic-bezier(.2,.8,.2,1) infinite}
.gx-ld .toast b{width:2cqw;height:2cqw;border-radius:50%;background:#08A15C;display:grid;place-items:center;font-size:1.3cqw}
.gx-ld .fly{position:absolute;width:3.2cqw;height:2.3cqw;border-radius:.4cqw;background:#fff;box-shadow:0 0 0 1px #BFD6FF,0 .6cqw 1.4cqw rgba(31,120,245,.3);left:30%;top:55%;opacity:0;animation:ldfly 9s cubic-bezier(.5,0,.2,1) infinite}
.gx-ld .fly::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 48%,#1F78F5 49% 52%,transparent 53%),linear-gradient(to bottom left,transparent 48%,#1F78F5 49% 52%,transparent 53%);background-size:100% 100%;clip-path:polygon(0 0,100% 0,50% 60%)}
@keyframes ldpulse{0%{box-shadow:0 0 0 0 rgba(8,161,92,.5)}100%{box-shadow:0 0 0 1.2cqw rgba(8,161,92,0)}}
@keyframes ldring{0%,20%{stroke-dashoffset:100}45%,92%{stroke-dashoffset:4}100%{stroke-dashoffset:4}}
@keyframes ldbar{0%,22%{scale:0 1}50%,100%{scale:1 1}}
@keyframes ldline{0%,20%{stroke-dashoffset:420}55%,100%{stroke-dashoffset:0}}
@keyframes ldarea{0%,40%{opacity:0}60%,100%{opacity:1}}
@keyframes ldrow{0%,22%{opacity:0;translate:0 1cqw}30%,100%{opacity:1;translate:0 0}}
@keyframes ldhb{0%,30%{scale:0 1}60%,100%{scale:1 1}}
@keyframes ldw{0%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes ldok{0%,58%{opacity:0;scale:.8}64%{opacity:1;scale:1.08}68%,100%{opacity:1;scale:1}}
@keyframes ldtoast{0%,70%{opacity:0;translate:0 2cqw}74%,92%{opacity:1;translate:0 0}97%,100%{opacity:0;translate:0 0}}
@keyframes ldfly{0%,62%{opacity:0;left:30%;top:62%;scale:.6}65%{opacity:1;scale:1}72%{left:84%;top:84%;opacity:1;scale:.7}74%,100%{opacity:0;left:84%;top:84%}}
@media (prefers-reduced-motion:reduce){.gx-ld *{animation:none!important;opacity:1!important;translate:none!important;scale:none!important;stroke-dashoffset:0!important}.gx-ld .r .st .w,.gx-ld .toast,.gx-ld .fly{display:none}}

/* live dashboard: fix inherited sizes, fit everything in the screen */
.gx-ld .bar{height:.9cqw!important;min-height:0!important;padding:0!important}
.gx-ld .mn{grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:1.3cqw!important;padding:1.8cqw 2.4cqw!important;min-height:0}
.gx-ld .k{padding:1.2cqw 1.5cqw!important}
.gx-ld .k strong{font-size:3cqw!important}
.gx-ld .ring svg{width:5.6cqw!important;height:5.6cqw!important}
.gx-ld .ch{overflow:hidden}
.gx-ld .ch svg{height:auto;min-height:0;align-self:stretch}
.gx-ld .r{padding:.8cqw 1.5cqw!important;font-size:1.4cqw!important}

.gx-ld .ch{display:block!important;min-height:14cqh}
.gx-ld .ch svg{position:absolute;left:1.5cqw;top:3.8cqw;width:calc(100% - 3cqw)!important;height:calc(100% - 5cqw)!important}

.gx-ld .ls .r:nth-child(3){display:none}
.gx-ld .r{grid-template-columns:1fr 12cqw 12cqw!important}
.gx-ld .r .st{width:12cqw!important}
.gx-ld .kp .k{padding:1cqw 1.4cqw!important}
.gx-ld .ch svg{top:4.4cqw!important;height:calc(100% - 5.6cqw)!important}

/* live dashboard: neutralise inherited line-heights/borders */
.gx-ld,.gx-ld *{line-height:1.2!important;box-sizing:border-box}
.gx-ld .hd{align-items:center!important}
.gx-ld .chip{display:inline-flex!important;align-items:center;height:auto!important}
.gx-ld .live{background:none!important}
.gx-ld .r .st span{display:flex!important;align-items:center;justify-content:center}
.gx-ld .toast b{display:inline-flex!important;align-items:center;justify-content:center;flex:none;color:#fff}
.gx-ld .bar,.gx-ld .bar u{border:0!important;box-shadow:none!important}

/* ColdSend cover: the case's own first screen (clean capture) instead of the drawn dashboard */
.gx-csref .gx-ld{display:none!important}
.gx-csref .gx-real{position:absolute;left:0;right:0;top:8%;bottom:0;z-index:1;width:100%;height:92%;object-fit:cover;object-position:top center;display:block!important}

.gx-csref .gx-lid .gx-scr > img.gx-real{display:block!important;opacity:1!important;animation:none!important;position:absolute!important;top:8%!important;height:92%!important;width:100%!important;object-fit:cover!important;object-position:top center!important}

/* ColdSend cover device = open foldable (ref: Dribbble "AI OS" fold): near-square, thin titanium frame, centre hinge, status bar */
.gx-csref .gx-lap{width:auto!important;height:84cqh!important;aspect-ratio:.94!important}
@container (aspect-ratio < 1.6){.gx-csref .gx-lap{height:86cqh!important;width:auto!important}}
.gx-csref .gx-lid{height:100%!important;aspect-ratio:auto!important;padding:1.1cqh!important;border-radius:5.4cqh!important;background:linear-gradient(135deg,#3A4A5E,#1B2533 45%,#2C3A4D)!important;box-shadow:0 0 0 .25cqh #8D9BAD,inset 0 0 0 .2cqh rgba(255,255,255,.18),0 3cqh 6cqh rgba(5,10,30,.45)!important;position:relative}
.gx-csref .gx-lid .gx-scr{height:100%!important;aspect-ratio:auto!important;border-radius:4.4cqh!important;background:#F3F4F6!important}
.gx-csref .gx-lid::after{content:"";position:absolute;z-index:4;left:50%;top:0;bottom:0;width:1.2cqh;translate:-50% 0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(20,30,50,.10) 46%,rgba(255,255,255,.35) 54%,rgba(0,0,0,0));pointer-events:none}
.gx-csref .gx-lap::before{content:"";position:absolute;right:-.5cqh;top:22%;width:.6cqh;height:9%;border-radius:0 .4cqh .4cqh 0;background:#2C3A4D;box-shadow:0 0 0 .1cqh #8D9BAD}
.gx-csref .gx-lid .gx-scr::before{height:7%!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 12'%3E%3Cg fill='%23181B26'%3E%3Crect x='0' y='7' width='3' height='4' rx='.6'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.6'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.6'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.6'/%3E%3Cpath d='M27 3.2c2.6 0 5 1 6.7 2.7l-1.4 1.4A7.5 7.5 0 0 0 27 5.2a7.5 7.5 0 0 0-5.3 2.1l-1.4-1.4A9.5 9.5 0 0 1 27 3.2zm0 3.6c1.6 0 3 .6 4.1 1.7L27 12.6l-4.1-4.1A5.8 5.8 0 0 1 27 6.8z'/%3E%3Crect x='38' y='2' width='13' height='8' rx='2.2' fill='none' stroke='%23181B26' stroke-width='1'/%3E%3Crect x='39.6' y='3.6' width='9.8' height='4.8' rx='1.2'/%3E%3Crect x='52' y='4.6' width='1.4' height='2.8' rx='.6'/%3E%3C/g%3E%3C/svg%3E") right 4.5% center/auto 32% no-repeat,#F3F4F6!important;border-bottom:0!important;content:"9:41   Mon Apr 26"!important;display:flex!important;align-items:center;padding-left:5%;font:600 2.2cqh/1 "Inter",system-ui,sans-serif;color:#181B26;white-space:pre}
.gx-csref .gx-lid .gx-scr > img.gx-real{top:7%!important;height:93%!important;object-position:left top!important}
.gx-csref .gx-splash{inset:7% 0 0!important}

/* ColdSend cover bg = ref (fold "AI OS"): light grid, mid-side labels, huge cropped wordmark at the bottom */
.gx-csref{background:#F4F5F7!important;background-image:linear-gradient(#E3E5EA 1px,transparent 1px),linear-gradient(90deg,#E3E5EA 1px,transparent 1px)!important;background-size:6.4cqh 6.4cqh!important;background-position:center center!important}
.gx-csref .gx-key,.gx-csref .gx-gc{display:none!important}
.gx-csref .gx-fw{position:absolute;z-index:1;left:50%;bottom:-11cqh;translate:-50% 0;font:700 40cqh/.8 "Inter Tight","Inter",system-ui,sans-serif;letter-spacing:-.06em;color:#0B0B0C;white-space:nowrap;pointer-events:none}
.gx-csref .gx-fl{position:absolute;z-index:3;top:50%;translate:0 -50%;display:flex;gap:4cqw;font:600 1.7cqw/1 "Inter",system-ui,sans-serif;white-space:nowrap}
.gx-csref .gx-fl b{color:#0B0B0C;font-weight:600}.gx-csref .gx-fl i{font-style:normal;color:#9AA0AB;font-weight:500}
.gx-csref .gx-fl.l{left:2.4cqw}.gx-csref .gx-fl.r{right:2.4cqw}
.gx-csref .gx-lap{z-index:2}
@container (max-width:460px){.gx-csref .gx-fl{display:none}}

/* ColdSend fold UI (ref "AI OS"): two scrolling card columns split by the hinge */
.gx-csref .gx-lid .gx-scr > img.gx-real{display:none!important}
.gx-fd{position:absolute;inset:7% 0 0;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:0 2.6cqw;overflow:hidden;background:#F3F4F6;font-family:"Inter Tight","Inter",system-ui,sans-serif;color:#0E1220;-webkit-mask:linear-gradient(#000 88%,transparent);mask:linear-gradient(#000 88%,transparent)}
.gx-fd,.gx-fd *{line-height:1.05!important;box-sizing:border-box}
.gx-fd .cl{overflow:hidden;min-width:0}
.gx-fd .tk{display:flex;flex-direction:column;gap:2.4cqw;animation:fdup 22s linear infinite;will-change:transform}
.gx-fd .cl.r .tk{animation-direction:reverse;animation-duration:26s}
@keyframes fdup{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 1.2cqw))}}
.gx-fd .c{border-radius:2.6cqw;padding:3cqw;position:relative;overflow:hidden;flex:none}
.gx-fd .c small{display:block;font:600 2.6cqw/1.1 "Inter",system-ui,sans-serif;opacity:.7;margin-bottom:1.6cqw}
.gx-fd .big{font-weight:700;letter-spacing:-.05em}
.gx-fd .c1{background:#0E1A33;color:#fff;height:44cqh}
.gx-fd .c1 .big{font-size:9.4cqw;margin-top:2cqw}
.gx-fd .c1 svg{position:absolute;right:2.6cqw;bottom:2.6cqw;width:10cqw;height:10cqw;animation:fdspin 12s linear infinite}
.gx-fd .c2{background:#fff;height:34cqh;box-shadow:inset 0 0 0 1px #E6E8ED}
.gx-fd .c2 .big{font-size:9cqw}
.gx-fd .c2 svg{position:absolute;left:3cqw;right:3cqw;bottom:2.4cqw;width:calc(100% - 6cqw);height:12cqh}
.gx-fd .c2 path.l{fill:none;stroke:#1F78F5;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:300;stroke-dashoffset:300;animation:fddraw 6s ease-in-out infinite}
.gx-fd .c3{background:#C8F0DA;height:30cqh}
.gx-fd .c3 .big{font-size:12cqw;color:#0A6B3E}
.gx-fd .c3 i{position:absolute;right:3cqw;top:3cqw;width:9cqw;height:9cqw;border-radius:50%;border:1.4cqw solid #fff;border-right-color:#08A15C;animation:fdspin 4s linear infinite}
.gx-fd .c4{background:#fff;height:auto;padding:0;box-shadow:inset 0 0 0 1px #E6E8ED}
.gx-fd .c4 div{display:flex;align-items:center;gap:2cqw;padding:2.4cqw 3cqw;font:700 4cqw/1 "Inter Tight",system-ui,sans-serif;letter-spacing:-.03em}
.gx-fd .c4 div b{width:4.6cqw;height:4.6cqw;border-radius:50%;background:#0E1220;color:#fff;display:grid;place-items:center;font-size:2.4cqw;flex:none}
.gx-fd .c4 div:nth-child(1){background:#FFE07A}.gx-fd .c4 div:nth-child(2){background:#DCD3FF}.gx-fd .c4 div:nth-child(3){background:#FFC8E2}.gx-fd .c4 div:nth-child(4){background:#B8D7FF}
.gx-fd .c5{background:#1F78F5;color:#fff;height:38cqh}
.gx-fd .c5 .big{font-size:10cqw}
.gx-fd .c5 .dots{position:absolute;inset:auto 3cqw 3cqw 3cqw;height:12cqh;background:radial-gradient(circle,rgba(255,255,255,.55) 32%,transparent 36%) 0 0/3cqw 3cqw;animation:fddots 3s linear infinite}
.gx-fd .c6{background:#fff;height:auto;box-shadow:inset 0 0 0 1px #E6E8ED}
.gx-fd .c6 .rw{display:flex;justify-content:space-between;align-items:center;font:600 2.7cqw/1 "Inter",system-ui,sans-serif;padding:1.5cqw 0;border-top:1px solid #EEF0F4}
.gx-fd .c6 .rw:first-of-type{border-top:0}
.gx-fd .c6 .ch{font-size:2.2cqw;padding:.9cqw 1.4cqw;border-radius:1cqw;background:#E6F6EE;color:#08A15C;animation:fdchip 6s ease infinite}
.gx-fd .c6 .rw:nth-of-type(2) .ch{animation-delay:-2s}.gx-fd .c6 .rw:nth-of-type(3) .ch{animation-delay:-4s}
.gx-fd .c7{background:#E9E1FF;height:32cqh}
.gx-fd .c7 .big{font-size:7.4cqw;color:#3B2BB8}
.gx-fd .c7 .bars{position:absolute;left:3cqw;right:3cqw;bottom:3cqw;height:12cqh;display:flex;align-items:flex-end;gap:1.2cqw}
.gx-fd .c7 .bars u{flex:1;background:#6B5BFF;border-radius:.8cqw .8cqw 0 0;transform-origin:bottom;animation:fdbar 3.2s ease-in-out infinite}
.gx-fd .c7 .bars u:nth-child(2n){animation-delay:-.8s}.gx-fd .c7 .bars u:nth-child(3n){animation-delay:-1.6s}
.gx-fd .c8{background:#0E1220;color:#fff;height:28cqh}
.gx-fd .c8 .big{font-size:8.6cqw}
.gx-fd .c8 em{font-style:normal;display:inline-block;margin-top:2cqw;font:600 2.4cqw/1 "Inter",system-ui,sans-serif;padding:1cqw 1.6cqw;border-radius:5cqw;background:#FFE07A;color:#0E1220}
@keyframes fdspin{to{rotate:360deg}}
@keyframes fddraw{0%{stroke-dashoffset:300}55%,100%{stroke-dashoffset:0}}
@keyframes fddots{to{background-position:3cqw 0}}
@keyframes fdbar{0%,100%{scale:1 .35}50%{scale:1 1}}
@keyframes fdchip{0%,40%{background:#FFF4E0;color:#B7791F}50%,100%{background:#E6F6EE;color:#08A15C}}
@media (prefers-reduced-motion:reduce){.gx-fd *{animation:none!important}.gx-fd .c2 path.l{stroke-dashoffset:0}}

/* ColdSend fold UI v2 (ref "AI OS" knobs): folder tabs stack + 3 dials + big counter */
.gx-csref .gx-fd{display:none!important}
.gx-f2{position:absolute;inset:7% 0 0;z-index:1;background:#fff;font-family:"Inter",system-ui,sans-serif;color:#0E1220;overflow:hidden;display:grid;grid-template-rows:34% 1fr 19%}
.gx-f2,.gx-f2 *{line-height:1.1!important;box-sizing:border-box}
.gx-f2 .tabs{position:relative;background:#E9EAEC}
.gx-f2 .tb{position:absolute;height:8.6cqh;display:flex;align-items:center;gap:1.6cqw;padding:0 4cqw 0 1.6cqw;border-radius:2cqw 2cqw 0 0;font-weight:600;font-size:2.5cqw;white-space:nowrap;clip-path:polygon(0 0,82% 0,100% 100%,0 100%);translate:0 -120%;opacity:0;animation:f2tab 9s cubic-bezier(.2,.8,.2,1) infinite}
.gx-f2 .tb::after{content:"";position:absolute;left:0;right:-60cqw;top:100%;height:3cqh;background:inherit}
.gx-f2 .tb b{width:4.6cqw;height:4.6cqw;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:2cqw;font-weight:600;color:#0E1220;flex:none}
.gx-f2 .tb i{font-style:normal;opacity:.5;font-weight:500}
.gx-f2 .tb.dk{background:#0E1220;color:#fff}.gx-f2 .tb.dk b{background:#2A2F3D;color:#fff}
@keyframes f2tab{0%,18%{translate:0 -120%;opacity:0}26%,90%{translate:0 0;opacity:1}96%,100%{translate:0 0;opacity:0}}
.gx-f2 .mid{position:relative;background:#F4F5F6;background-image:linear-gradient(#E3E5EA 1px,transparent 1px),linear-gradient(90deg,#E3E5EA 1px,transparent 1px);background-size:7.6cqw 7.6cqw;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;padding:0 5cqw}
.gx-f2 .dl{position:relative;width:17cqw;aspect-ratio:1;border-radius:50%;background:#0E1220;box-shadow:0 1.4cqw 2.4cqw rgba(14,18,32,.25)}
.gx-f2 .dl::before{content:"";position:absolute;left:-1cqw;top:-1cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--c)}
.gx-f2 .dl u{position:absolute;inset:0;animation:f2dial var(--d) cubic-bezier(.6,0,.2,1) infinite alternate}
.gx-f2 .dl u::before,.gx-f2 .dl u::after{content:"";position:absolute;left:50%;width:.7cqw;height:3.4cqw;margin-left:-.35cqw;border-radius:1cqw;background:#fff}
.gx-f2 .dl u::before{top:1.8cqw}.gx-f2 .dl u::after{bottom:1.8cqw}
.gx-f2 .dl em{position:absolute;top:calc(100% + 1.6cqw);left:50%;translate:-50% 0;font-style:normal;font-size:2.1cqw;font-weight:600;white-space:nowrap;color:#5B6274}
@keyframes f2dial{from{rotate:var(--a0)}to{rotate:var(--a1)}}
.gx-f2 .row{position:absolute;left:5cqw;right:5cqw;bottom:2.4cqh;display:flex;align-items:center;gap:2cqw;font-weight:700;font-size:3.4cqw;letter-spacing:-.03em}
.gx-f2 .row span{margin-left:auto;display:flex;align-items:center;gap:1cqw;font-size:2.2cqw;font-weight:600;letter-spacing:0}
.gx-f2 .row span::before{content:"";width:1.6cqw;height:1.6cqw;border-radius:50%;background:#08A15C;animation:f2blink 1.4s ease-in-out infinite}
@keyframes f2blink{50%{opacity:.25}}
.gx-f2 .bt{display:flex;align-items:center;padding:0 4cqw;gap:2cqw;border-top:1px solid #E6E8ED}
.gx-f2 .bt strong{font-weight:400;font-size:11cqw;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.gx-f2 .bt small{font-size:2.1cqw;color:#5B6274;align-self:flex-end;margin-bottom:3cqh}
.gx-f2 .bt .dt{margin-left:auto;font-size:1.9cqw;font-weight:600;line-height:1.2!important}
.gx-f2 .bt .go{width:11cqw;aspect-ratio:1;border-radius:50%;background:#0E1220;display:grid;place-items:center;margin-left:4cqw;animation:f2go 9s ease infinite}
.gx-f2 .bt .go svg{width:40%;height:40%}
@keyframes f2go{0%,70%{scale:1}74%{scale:.88}80%,100%{scale:1}}
@media (prefers-reduced-motion:reduce){.gx-f2 *{animation:none!important;opacity:1!important;translate:none!important}}

/* ColdSend cover: dark version (Geex Arts dark fold shots) */
.gx-csref{background-color:#0F1012!important;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)!important}
.gx-csref .gx-fw{color:#EDEEF0!important}
.gx-csref .gx-fl b{color:#fff!important}.gx-csref .gx-fl i{color:#6E737D!important}
.gx-csref .gx-lid{box-shadow:0 0 0 .25cqh #5B6678,inset 0 0 0 .2cqh rgba(255,255,255,.14),0 3cqh 7cqh rgba(0,0,0,.6)!important}

/* ColdSend dark cover: dot field + brand glow instead of grid cells; corner captions back */
.gx-csref{background-color:#0F1012!important;background-image:radial-gradient(48% 62% at 50% 46%,rgba(31,120,245,.32),rgba(31,120,245,0) 70%),radial-gradient(circle,rgba(255,255,255,.13) 1px,transparent 1.3px)!important;background-size:100% 100%,2.4cqh 2.4cqh!important;background-position:center,center!important}
.gx-csref .gx-gc{display:flex!important;z-index:4;color:rgba(255,255,255,.55)!important}
.gx-csref .gx-gc em{color:#8FB4FF!important}

.gx-csref .gx-fw{font-size:34cqh!important;bottom:-9cqh!important;color:#2A2D33!important}
.gx-csref .gx-gc.bl,.gx-csref .gx-gc.br{z-index:5;text-shadow:0 0 1.2cqh #0F1012,0 0 .6cqh #0F1012}

/* ColdSend: only the Zade Space / Web app labels, moved into the corners; no extra captions */
.gx-csref .gx-gc{display:none!important}
.gx-csref .gx-fl{top:auto!important;translate:none!important;font-size:1.5cqw!important;z-index:5}
.gx-csref .gx-fl.l{left:3.2cqw!important;top:4.6cqh!important}
.gx-csref .gx-fl.r{right:3.2cqw!important;top:4.6cqh!important}

/* fold: no line across the screen, only tiny hinge notches on the frame (as in the ref) */
.gx-csref .gx-lid::after{top:-.3cqh!important;bottom:auto!important;height:1.4cqh!important;width:1cqh!important;background:#0F1012!important;border-radius:0 0 .4cqh .4cqh}
.gx-csref .gx-lid::before{content:"";position:absolute;z-index:4;left:50%;bottom:-.3cqh;width:1cqh;height:1.4cqh;translate:-50% 0;background:#0F1012;border-radius:.4cqh .4cqh 0 0;pointer-events:none}

.gx-csref{background-image:radial-gradient(48% 62% at 50% 46%,rgba(31,120,245,.32),rgba(31,120,245,0) 70%)!important;background-size:100% 100%!important}

/* ColdSend corners: first word stays top, the grey one goes to the bottom corner on the same side */
.gx-csref .gx-fl{top:4.6cqh!important;bottom:4.6cqh!important;flex-direction:column!important;justify-content:space-between!important;gap:0!important}
.gx-csref .gx-fl.r{align-items:flex-end}

.gx-csref .gx-fl{flex-direction:column-reverse!important}

/* ColdSend fold: the real case dashboard, re-laid out for the square screen, with a slow camera drift */
.gx-csref .gx-f2,.gx-csref .gx-fd{display:none!important}
.gx-csref .gx-lid .gx-scr > img.gx-real{display:block!important;object-fit:cover!important;object-position:left top!important;transform-origin:30% 20%;animation:csdrift 18s ease-in-out infinite alternate!important}
@keyframes csdrift{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-2%,-3%)}100%{transform:scale(1.04) translate(-1%,-6%)}}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-lid .gx-scr > img.gx-real{animation:none!important}}
.gx-csref .gx-fw{bottom:-3cqh!important}

.gx-csref .gx-lid .gx-scr > img.gx-real{width:100%!important;height:auto!important;object-fit:fill!important;transform-origin:50% 0!important;animation:csdrift2 14s ease-in-out infinite alternate!important}
@keyframes csdrift2{0%{transform:translateY(0)}100%{transform:translateY(-5%)}}

.gx-csref .gx-lid .gx-scr > img.gx-real{animation:csfloat 10s ease-in-out infinite alternate!important}
@keyframes csfloat{0%{transform:translateY(0)}100%{transform:translateY(-2%)}}

/* ColdSend screen: staged build-up of the real dashboard after the splash */
.gx-csref .gx-lid .gx-scr > img.gx-real{display:none!important}
.gx-csref .gx-dash{position:absolute;left:0;top:7%;width:100%;aspect-ratio:1;z-index:1;animation:csfloat 10s ease-in-out infinite alternate}
.gx-csref .gx-dash .cl{position:absolute;inset:0;will-change:transform,opacity}
.gx-csref .gx-dash .cl img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;opacity:1!important;animation:none!important;transform:none!important}
.gx-csref .gx-dash .mk{position:absolute;background:#fff;transform-origin:100% 50%}
.gx-csref .gx-splash{animation-name:gxsplash2!important}
@keyframes gxsplash2{0%,15%{opacity:1}22%,92%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-dash,.gx-csref .gx-dash .cl,.gx-csref .gx-dash .mk{animation:none!important;opacity:1!important;transform:none!important}.gx-csref .gx-dash .mk{display:none}}

/* ColdSend splash: iris — blue bursts out of the sidebar logo, then closes into the snowflake */
.gx-csref .gx-splash{animation-name:gxsplash3!important;opacity:1}
@keyframes gxsplash3{
0%{clip-path:circle(150% at 50% 46%);opacity:1}
13%{clip-path:circle(150% at 50% 46%);animation-timing-function:cubic-bezier(.45,0,.55,1)}
21%{clip-path:circle(0% at 50% 46%)}
21.1%,90%{clip-path:circle(0% at 5.6% 8%);animation-timing-function:cubic-bezier(.45,0,.55,1)}
100%{clip-path:circle(150% at 5.6% 8%);opacity:1}}

/* ColdSend status bar = ref: bold time + grey date, wide side insets, solid battery */
.gx-csref .gx-lid .gx-scr::before{content:""!important;background:#F3F3F4!important}
.gx-csref .gx-sb{position:absolute;z-index:4;left:0;right:0;top:0;height:7%;display:flex;align-items:center;justify-content:space-between;padding:.4% 7% 0;font:600 1.75cqh/1 "Inter",system-ui,sans-serif;color:#111318;letter-spacing:-.01em;pointer-events:none}
.gx-csref .gx-sb span{color:#8E929B;font-weight:500;margin-left:.75em}
.gx-csref .gx-sb svg{height:.95em;width:auto;display:block}

/* ColdSend reel (ref: Calendly brand reel) — fixed centre logo, hard cuts between real scenes, then the dashboard builds */
.gx-csref .gx-splash{display:none!important}
.gx-csref .gx-reel{position:absolute;left:0;right:0;top:7%;bottom:0;z-index:2;overflow:hidden;pointer-events:none}
.gx-csref .gx-reel .rs{position:absolute;inset:0;opacity:0}
.gx-csref .gx-reel .rs img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;opacity:1!important;animation:csz 9s linear infinite!important}
@keyframes csz{0%{transform:scale(1.07)}40%,100%{transform:scale(1)}}
.gx-csref .gx-reel .lg{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;border-radius:31%;color:#fff}
.gx-csref .gx-reel .lg svg{width:60%;height:60%;display:block}
.gx-csref .gx-reel .lg.w svg{width:92%;height:92%;filter:drop-shadow(0 .4cqh 1.2cqh rgba(10,30,90,.25))}
.gx-csref .gx-reel .lg.s{background:#1F6FE5}
.gx-csref .gx-reel .lg.g{background:radial-gradient(120% 120% at 32% 18%,#DDF0FF 0,#7BB8FF 28%,#2F7DF0 62%,#1652C4 100%);box-shadow:inset 0 .5cqh .8cqh rgba(255,255,255,.75),inset 0 -1.2cqh 1.8cqh rgba(8,30,110,.45),0 1.6cqh 3.4cqh rgba(5,20,70,.45)}
.gx-csref .gx-reel .lg.g svg{filter:drop-shadow(0 .3cqh .4cqh rgba(5,30,110,.45))}
.gx-csref .gx-reel .lg.o{border:.55cqh solid #fff}
.gx-csref .gx-reel .lg.p{background:#5DB2F6;border:.7cqh solid #fff;box-shadow:0 0 0 .3cqh #A9B3BF,inset 0 .3cqh .5cqh rgba(255,255,255,.5),0 .9cqh 1.4cqh rgba(0,0,0,.28),0 .2cqh .3cqh rgba(0,0,0,.25)}
.gx-csref .gx-reel .lg.p svg{filter:drop-shadow(0 .15cqh 0 rgba(30,60,110,.35))}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-reel{display:none}}


/* ColdSend reel v2: 5 composed scenes, free centre, cards slide in */
.gx-csref .gx-reel .rs img.bg,.gx-csref .gx-reel .rs img.el{animation-name:none}
.gx-csref .gx-reel .rs.wh{background:#fff}
.gx-csref .gx-reel .el{position:absolute;display:block;height:auto!important;border-radius:3.2%;box-shadow:0 1.2cqh 2.8cqh rgba(10,25,70,.22),0 .2cqh .5cqh rgba(10,25,70,.08)}
.gx-csref .gx-reel .el.flat{box-shadow:none;border-radius:0}
.gx-csref .gx-reel .lg{width:28%}
.gx-csref .gx-reel .lg.g{background:radial-gradient(110% 110% at 30% 15%,#E6F3FF 0,#8CC2FF 22%,#3B86F5 55%,#1550C2 100%);box-shadow:inset 0 .45cqh .6cqh rgba(255,255,255,.85),inset 0 -1.4cqh 2cqh rgba(6,28,100,.5),inset .8cqh 0 1.4cqh rgba(255,255,255,.18),0 1.8cqh 3.6cqh rgba(4,16,60,.55)}

/* ColdSend mockup screen bg */
.gx-csref .gx-lid .gx-scr{background:#F3F3F4!important}

/* ColdSend reel logo = app logo (blue circle + white snowflake) */
.gx-csref .gx-reel .lg,.gx-csref .gx-reel .lg.s,.gx-csref .gx-reel .lg.g{width:24%;border-radius:50%;background:#1C7BF3;border:0;box-shadow:0 1cqh 2.4cqh rgba(28,123,243,.28)}
.gx-csref .gx-reel .lg svg{width:74%;height:74%;filter:none}

.gx-csref .gx-reel,.gx-csref .gx-dash{display:none!important}

/* ColdSend assemble in the platform UI: snowflake -> sidebar logo, chrome slides in, 3 widgets fly in */
.gx-csref .gx-asm{position:absolute;left:0;right:0;top:7%;bottom:0;z-index:2;overflow:hidden;background:#F3F3F4;pointer-events:none}
.gx-csref .gx-asm .bs{position:absolute;left:0;top:0;width:100%;aspect-ratio:1}
.gx-csref .gx-asm img{display:block!important;width:100%!important;height:auto!important;opacity:1!important;animation:none!important;position:static!important}
.gx-csref .gx-asm .sb{clip-path:inset(0 89.6% 0 0);animation:asb 9s cubic-bezier(.2,.8,.2,1) infinite}
.gx-csref .gx-asm .hd{clip-path:inset(0 0 87.6% 10.4%);animation:ash 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes asb{0%,15.00%{opacity:0;transform:translateX(-8%)}20.56%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ash{0%,16.67%{opacity:0;transform:translateY(-6%)}22.22%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
.gx-csref .gx-asm .ac{position:absolute;opacity:0;border-radius:1.8cqh;box-shadow:0 1.2cqh 2.6cqh rgba(15,30,80,.10);will-change:transform,opacity}
.gx-csref .gx-asm .ac img{border-radius:inherit}
.gx-csref .gx-asm .a0{left:11.074%;top:12.919%;width:39.430%;animation:as0 9s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes as0{0%,19.44%{opacity:0;transform:translate(-30%,10%) rotate(-5deg) scale(.88)}21.89%{opacity:1}28.33%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:scale(.97)}}
.gx-csref .gx-asm .a1{left:52.013%;top:12.919%;width:46.477%;animation:as1 9s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes as1{0%,21.11%{opacity:0;transform:translate(30%,-8%) rotate(5deg) scale(.88)}23.56%{opacity:1}30.00%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:scale(.97)}}
.gx-csref .gx-asm .a2{left:11.074%;top:46.644%;width:87.416%;animation:as2 9s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes as2{0%,22.78%{opacity:0;transform:translate(0,34%) rotate(-2deg) scale(.88)}25.22%{opacity:1}31.67%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:scale(.97)}}
.gx-csref .gx-asm .lg{position:absolute;left:38%;top:38%;width:24%;aspect-ratio:1;border-radius:50%;background:#1C7BF3;display:grid;place-items:center;box-shadow:0 1cqh 2.4cqh rgba(28,123,243,.3);transform:scale(0);animation:asl 9s infinite}
.gx-csref .gx-asm .lg svg{width:74%;height:74%;animation:asr 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes asl{0%{transform:scale(0);animation-timing-function:cubic-bezier(.3,1.6,.5,1)}6.11%{transform:scale(1)}11.67%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.25,1)}19.44%{transform:translate(-185.4%,-178.3%) scale(.175);opacity:1}21.67%,100%{transform:translate(-185.4%,-178.3%) scale(.175);opacity:0}}
@keyframes asr{0%{transform:rotate(-120deg)}8%,100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-asm *{animation:none!important;opacity:1!important}.gx-csref .gx-asm .lg,.gx-csref .gx-asm .pr{display:none}}

/* ColdSend frame 3: promo card expands to full screen */
.gx-csref .gx-asm .pr{position:absolute;inset:0;z-index:5;overflow:hidden;color:#fff;font-family:"Inter",system-ui,sans-serif;background:radial-gradient(80% 70% at 85% 10%,rgba(140,190,255,.55),transparent 60%),linear-gradient(165deg,#4A93FF 0%,#2477F5 45%,#1A62E6 100%);opacity:0;clip-path:inset(34% 30% 34% 30% round 3cqh);animation:apr 9s cubic-bezier(.65,0,.25,1) infinite}
.gx-csref .gx-asm .pr::before{content:"";position:absolute;left:-22%;top:30%;width:150%;aspect-ratio:1;border-radius:50%;border:.5cqh solid rgba(255,255,255,.16);box-shadow:0 0 0 5cqh rgba(255,255,255,.04)}
.gx-csref .gx-asm .pc{position:absolute;left:9%;right:9%;top:11%;bottom:12%;display:flex;flex-direction:column;align-items:flex-start}
.gx-csref .gx-asm .pc em{display:inline-flex;align-items:center;gap:.9cqh;font-style:normal;font-size:1.75cqh;font-weight:500;padding:.9cqh 1.7cqh;border-radius:9cqh;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .14cqh rgba(255,255,255,.32)}
.gx-csref .gx-asm .pc em svg{width:1.9cqh;height:1.9cqh}
.gx-csref .gx-asm .pc h4{margin:auto 0 0;font-size:6.1cqh;line-height:1.12;font-weight:500;letter-spacing:-.025em;color:#fff}
.gx-csref .gx-asm .pc b{display:inline-flex;align-items:center;gap:1.2cqh;margin-top:3.4cqh;padding:1.7cqh 2.8cqh;border-radius:1.3cqh;background:#fff;color:#111318;font-size:2.1cqh;font-weight:600}
.gx-csref .gx-asm .pc b svg{width:2.1cqh;height:2.1cqh}
@keyframes apr{0%,65.56%{opacity:0;clip-path:inset(34% 30% 34% 30% round 3cqh)}67.78%{opacity:1;clip-path:inset(34% 30% 34% 30% round 3cqh)}74.44%,95%{opacity:1;clip-path:inset(0 0 0 0 round 0)}99%,100%{opacity:0;clip-path:inset(0 0 0 0 round 0)}}
.gx-csref .gx-asm .pc em{animation:apc0 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes apc0{0%,71.67%{opacity:0;transform:translateY(40%)}77.22%,95%{opacity:1;transform:none}100%{opacity:1}}
.gx-csref .gx-asm .pc h4{animation:apc1 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes apc1{0%,73.33%{opacity:0;transform:translateY(40%)}78.89%,95%{opacity:1;transform:none}100%{opacity:1}}
.gx-csref .gx-asm .pc b{animation:apc2 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes apc2{0%,75.56%{opacity:0;transform:translateY(40%)}81.11%,95%{opacity:1;transform:none}100%{opacity:1}}

.gx-csref .gx-asm .st{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:1;translate:-50% 0}

/* ColdSend promo = Figma 2652:164651 (Manrope, #428EFF->#1A75FF, two arcs) */
.gx-csref .gx-asm .st{top:2%;height:93%}
.gx-csref .gx-asm .pr{container-type:size;background:linear-gradient(180deg,#428EFF 0%,#1A75FF 100%);font-family:"Manrope","Inter",system-ui,sans-serif}
.gx-csref .gx-asm .pr::before{display:none}
.gx-csref .gx-asm .pr .arc{position:absolute;pointer-events:none}
.gx-csref .gx-asm .pr .arc img{display:block!important;width:100%!important;height:100%!important}
.gx-csref .gx-asm .pr .a1{top:-30.3%;right:44.2%;bottom:61.4%;left:-9.3%}
.gx-csref .gx-asm .pr .a2{top:22.5%;right:-.25%;bottom:-40.3%;left:-10.4%}
.gx-csref .gx-asm .pr .pc{left:7.7cqw;right:7.7cqw;top:8cqh;bottom:8cqh}
.gx-csref .gx-asm .pr .pc em{gap:1.3cqw;font:600 3.2cqw/1.2 "Manrope",sans-serif;letter-spacing:.03cqw;padding:1.9cqw 2.9cqw;border-radius:11cqw;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .32cqw rgba(255,255,255,.4)}
.gx-csref .gx-asm .pr .pc em svg{width:3.85cqw;height:3.85cqw}
.gx-csref .gx-asm .pr .pc h4{width:69.2cqw;font:600 6.73cqw/1.23 "Manrope",sans-serif;letter-spacing:0}
.gx-csref .gx-asm .pr .pc b{margin-top:3.85cqw;height:10.9cqw;padding:0 5.1cqw 0 6.4cqw;gap:1.3cqw;border-radius:2.24cqw;font:700 4.17cqw/1.2 "Manrope",sans-serif;letter-spacing:-.04cqw;color:#181B26}
.gx-csref .gx-asm .pr .pc b svg{width:5.1cqw;height:5.1cqw}


/* ColdSend assemble v2: clean logo landing, sidebar margins, inner widget motion */
.gx-csref .gx-asm .st{top:3.5%;height:90%}
.gx-csref .gx-asm .sb{animation:asb2 9s cubic-bezier(.2,.8,.2,1) infinite!important}.gx-csref .gx-asm .hd{animation:ash2 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes asb2{0%,12.22%{opacity:0;transform:translateX(-6%)}17.22%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ash2{0%,14.44%{opacity:0;transform:translateY(-5%)}19.44%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
.gx-csref .gx-asm .lg{animation:asl2 9s infinite!important}
@keyframes asl2{0%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.3,1.4,.5,1)}6.67%{transform:scale(1)}10.56%{transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.2,1)}18.33%{transform:translate(-185.4%,-178.3%) scale(.1748);opacity:1}20.00%{transform:translate(-185.4%,-178.3%) scale(.1748);opacity:1}21.11%,100%{transform:translate(-185.4%,-178.3%) scale(.1748);opacity:0}}
.gx-csref .gx-asm .lg svg{animation:asr2 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes asr2{0%{transform:rotate(-120deg)}7.78%{transform:rotate(0)}10.56%{transform:rotate(0)}18.33%,100%{transform:rotate(60deg)}}
.gx-csref .gx-asm .ac .mk{position:absolute;background:#fff;pointer-events:none}
.gx-csref .gx-asm .a0 .mk{left:3%;top:29%;width:94%;height:65%;transform-origin:50% 0;animation:abar 9s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes abar{0%,27.22%{transform:scaleY(1)}37.22%,100%{transform:scaleY(0)}}
.gx-csref .gx-asm .a2 .r0{left:3.6%;width:92.8%;top:23.87%;height:16.62%;animation:arow0 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes arow0{0%,30.56%{opacity:1}35.56%,100%{opacity:0}}
.gx-csref .gx-asm .a2 .r1{left:3.6%;width:92.8%;top:41.39%;height:16.62%;animation:arow1 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes arow1{0%,32.11%{opacity:1}37.11%,100%{opacity:0}}
.gx-csref .gx-asm .a2 .r2{left:3.6%;width:92.8%;top:58.91%;height:16.62%;animation:arow2 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes arow2{0%,33.67%{opacity:1}38.67%,100%{opacity:0}}
.gx-csref .gx-asm .a2 .r3{left:3.6%;width:92.8%;top:76.44%;height:16.62%;animation:arow3 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes arow3{0%,35.22%{opacity:1}40.22%,100%{opacity:0}}
.gx-csref .gx-asm .a1 .pl{position:absolute;left:87.5%;top:34.3%;width:7%;aspect-ratio:1;margin:-3.5% 0 0 -3.5%;border-radius:50%;box-shadow:0 0 0 .25cqh rgba(28,123,243,.55);opacity:0;animation:apl 9s ease-out infinite}
@keyframes apl{0%,43.33%{opacity:0;transform:scale(.6)}44.44%{opacity:1}53.33%{opacity:0;transform:scale(2.4)}55.56%{opacity:0;transform:scale(.6)}56.67%{opacity:1}65.56%,100%{opacity:0;transform:scale(2.4)}}
.gx-csref .gx-asm .a1 .hl{position:absolute;left:6.2%;width:87.3%;height:19.6%;border-radius:1.2cqh;box-shadow:inset 0 0 0 .22cqh #1C7BF3;background:rgba(28,123,243,.04);opacity:0;animation:ahl 9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes ahl{0%,30.00%{opacity:0;top:71%}31.67%{opacity:1;top:71%}33.89%{top:71%}36.67%{top:47.8%}38.33%{top:47.8%;opacity:1}41.11%{top:24.5%;opacity:1}42.78%,100%{top:24.5%;opacity:0}}

/* ColdSend asm: beat legacy .gx-scr img height:92%!important */
.gx-csref .gx-lid .gx-scr .gx-asm img{top:auto!important;height:auto!important;inset:auto!important;position:static!important;object-fit:fill!important}
.gx-csref .gx-lid .gx-scr .gx-asm .pr .arc img{width:100%!important;height:100%!important}

/* ColdSend setup card: no default selection; animated pick lands on Premium and stays */
.gx-csref .gx-asm .a1 .hl{height:19.6%;animation:ahl2 9s cubic-bezier(.5,0,.2,1) infinite!important}
@keyframes ahl2{0%,30.00%{opacity:0;top:72.1%}31.67%{opacity:1;top:72.1%}33.89%{top:72.1%}36.67%{top:48.2%}38.33%{top:48.2%}41.11%,95%{top:24.2%;opacity:1}99%,100%{top:24.2%;opacity:0}}
.gx-csref .gx-asm .a1 .rd{position:absolute;left:87.5%;top:34%;width:5.4%;aspect-ratio:1;margin:-2.7% 0 0 -2.7%;border-radius:50%;background:radial-gradient(circle,#fff 0 27%,#1C7BF3 30%);transform:scale(0);animation:ard 9s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes ard{0%,40.22%{transform:scale(0)}43.33%,95%{transform:scale(1);opacity:1}99%,100%{transform:scale(1);opacity:0}}
.gx-csref .gx-asm .a1 .pl{top:34%}

.gx-csref .gx-asm .st{top:1%!important;height:97.5%!important}

/* ColdSend promo: GPU scale instead of clip-path for a smooth expand */
.gx-csref .gx-asm .pr{clip-path:none!important;border-radius:1.4cqh;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;animation:apr2 9s infinite!important}
@keyframes apr2{0%,65.00%{opacity:0;transform:scale(.42) translateZ(0);animation-timing-function:cubic-bezier(.3,.7,.2,1)}68.33%{opacity:1;transform:scale(.46) translateZ(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}76.11%,95%{opacity:1;transform:scale(1) translateZ(0)}99%,100%{opacity:0;transform:scale(1) translateZ(0)}}

.gx-csref .gx-asm .pr .pc em{animation:apd0 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes apd0{0%,75.56%{opacity:0;transform:translateY(30%)}82.22%,100%{opacity:1;transform:none}}
.gx-csref .gx-asm .pr .pc h4{animation:apd1 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes apd1{0%,77.22%{opacity:0;transform:translateY(30%)}83.89%,100%{opacity:1;transform:none}}
.gx-csref .gx-asm .pr .pc b{animation:apd2 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes apd2{0%,78.89%{opacity:0;transform:translateY(30%)}85.56%,100%{opacity:1;transform:none}}

/* promo: hide its top rounded corners under the status bar at full size */
.gx-csref .gx-asm .pr{inset:-1.8cqh 0 0 0!important}
.gx-csref .gx-asm .pr .pc{top:calc(8cqh + 1.8cqh)!important}

/* ColdSend promo: book-style unfold along the fold hinge (ref: iPhone Duo Transition) */
.gx-csref .gx-asm{perspective:120cqh;perspective-origin:50% 45%}
.gx-csref .gx-asm .pr.h2{clip-path:inset(0 0 0 50%)!important;animation:aph2 9s infinite!important}
.gx-csref .gx-asm .pr.h1{clip-path:inset(0 50% 0 0)!important;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation:aph1 9s infinite!important}
.gx-csref .gx-asm .pr.h1::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,60,.0),rgba(8,20,60,.45));pointer-events:none;opacity:0;animation:aphs 9s infinite}
.gx-csref .gx-asm .pr.h2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,60,.35),rgba(8,20,60,0) 60%);pointer-events:none;opacity:0;animation:aphs2 9s infinite}
@keyframes aph2{0%,64.44%{opacity:0;transform:translateX(-4%) scale(.97)}68.33%{opacity:1;transform:translateX(-2%) scale(.985);animation-timing-function:cubic-bezier(.45,0,.55,1)}77.78%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
@keyframes aph1{0%,66.67%{opacity:1;transform:translateX(-2%) rotateY(-178deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}77.78%,95%{opacity:1;transform:rotateY(0)}99%,100%{opacity:0;transform:rotateY(0)}}
@keyframes aphs{0%,71.11%{opacity:1}77.78%,100%{opacity:0}}
@keyframes aphs2{0%,66.67%{opacity:0}72.22%{opacity:1}77.78%,100%{opacity:0}}
.gx-csref .gx-asm .pr .pc em{animation:aph0t 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes aph0t{0%,77.78%{opacity:0;transform:translateY(30%)}84.44%,100%{opacity:1;transform:none}}
.gx-csref .gx-asm .pr .pc h4{animation:aph1t 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes aph1t{0%,79.44%{opacity:0;transform:translateY(30%)}86.11%,100%{opacity:1;transform:none}}
.gx-csref .gx-asm .pr .pc b{animation:aph2t 9s cubic-bezier(.2,.8,.2,1) infinite!important}
@keyframes aph2t{0%,81.11%{opacity:0;transform:translateY(30%)}87.78%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-asm .pr{display:none!important}}

/* ColdSend promo v3 (ref: brand portfolio reel): tile pops in the grid, then zooms from its corner to full screen */
.gx-csref .gx-asm .pr.h1{display:none!important}
.gx-csref .gx-asm .pr.h2{clip-path:none!important;border-radius:3.4cqh;transform-origin:var(--pox,15%) var(--poy,18%);animation:aptile 9s infinite!important}
.gx-csref .gx-asm .pr.h2::after{display:none}
.gx-csref .gx-asm .pr .pc em,.gx-csref .gx-asm .pr .pc h4,.gx-csref .gx-asm .pr .pc b{animation:none!important;opacity:1!important;transform:none!important}
@keyframes aptile{0%,61.67%{opacity:0;transform:scale(calc(var(--ps,.4)*.82));animation-timing-function:cubic-bezier(.3,1.4,.5,1)}66.11%{opacity:1;transform:scale(var(--ps,.4))}70.56%{opacity:1;transform:scale(var(--ps,.4));animation-timing-function:cubic-bezier(.65,0,.25,1)}77.78%,95%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(1)}}

/* ColdSend transitions = ref portfolio reel: outgoing screen collapses into the bottom-left corner, next screen waits underneath */
.gx-csref .gx-asm .scrn{position:absolute;inset:0;z-index:6;background:#F3F3F4;transform-origin:0 100%;will-change:transform;animation:ascr 9s infinite}
@keyframes ascr{0%,65.56%{transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.8,.45)}71.11%,100%{transform:scale(0)}}
.gx-csref .gx-asm .pr.h2{transform-origin:0 100%!important;border-radius:0!important;animation:apflip 9s infinite!important}
@keyframes apflip{0%,64.44%{opacity:0;transform:scale(1)}65.00%{opacity:1;transform:scale(1)}93.89%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.8,.45)}99.44%,100%{opacity:1;transform:scale(0)}}

/* ColdSend: remove hinge notches on the device frame */
.gx-csref .gx-lid::before,.gx-csref .gx-lid::after{display:none!important}

/* ColdSend hero shot: side gaps = bottom gap (20u) */
@media (min-width:601px){#op-case-coldsend .cs-a .h8-wrap{left:calc(20*var(--u))!important;width:calc(920*var(--u))!important}}

/* ColdSend: finer halftone squares on shots b, c, d only */
#op-case-coldsend .cs-b .fz-tone,#op-case-coldsend .cs-c .fz-tone,#op-case-coldsend .cs-d .fz-tone{-webkit-mask-size:372px 253px!important;mask-size:372px 253px!important}

/* Finna blobs: frame corners follow the shape radius */
#op-case-finna .fzs .gk-blobs .gk-b.sq{border-radius:28%}
#op-case-finna .fzs .gk-blobs .gk-b.ci{border-radius:50%}
#op-case-finna .fzs .gk-blobs .gk-b.gk-pill{border-radius:99px}

/* Finna blobs: no global .sq folded-corner on the rounded blob */
#op-case-finna .fzs .gk-blobs .gk-b.sq::after,.op-case .fzs .gk-blobs .gk-b.sq::after{display:none!important}

/* Status bars like Danzee: time + icons centred on the island, equal side insets */
#op-case-finna .fzs .gk-status{padding-top:calc(8.6*var(--u))!important}
#op-case-finna .fzs .vx-am3 .gk-status,#op-case-finna .fzs .vx-fd .gk-status,#op-case-finna .fzs .vx-gk > .gk-status{padding-left:calc(32*var(--u))!important;padding-right:calc(32*var(--u))!important}
#op-case-finna .fzs .vx-ob .ob-sb{padding:calc(12.6*var(--u)) calc(32*var(--u)) 0!important}
#op-case-finna .fzs .vx-ob .ob-sb > *{display:block;line-height:1}
#op-case-meld .ml-crd .cd-sb,#op-case-meld .ml-snd .ms-sb,#op-case-meld .ml-rv .rv-sb,#op-case-meld .ml-rc .mr-sb{padding:calc(11.2*var(--u)) calc(32*var(--u)) 0 calc(32*var(--u))!important}
#op-case-meld .ml-crd .cd-sb > *,#op-case-meld .ml-snd .ms-sb > *,#op-case-meld .ml-rv .rv-sb > *,#op-case-meld .ml-rc .mr-sb > *{display:block;line-height:1}
#op-case-finna .fzs .vx-ob .ob-sb svg{position:static!important;inset:auto!important}
#op-case-finna .fzs .am3-app > .gk-status,#op-case-finna .fzs .vx-am3 .am3-app .gk-status{padding-left:calc(10*var(--u))!important;padding-right:calc(10*var(--u))!important}

/* Meld home FAB a bit higher above the home indicator */
.ml-home .mh-fab{top:calc(738*var(--u))}

/* Meld FAB raised on every screen (home, overview, action sheet) */
#op-case-meld .ml-home .mh-fab,#op-case-meld .ml-ov .mo-fab,#op-case-meld .ml-act .ma-fab{top:calc(738*var(--u))!important}

/* Meld: softer halftone squares (closer to the figure bg like other cases) */
#op-case-meld .fzs .fz-tone{background:#D5D5D5!important}

/* Meld printer: logo on a lighter grey tile */
.ml-rc .rp-sq{background:#6B6763!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* Meld printer: lighter palette */
.ml-rc .rp-pr{background:linear-gradient(180deg,#55524E,#474440)!important}
.ml-rc .rp-in{background:#34322F!important}
.ml-rc .rp-pill{background:#625E5A!important}
.ml-rc .rp-sq{background:#7C7873!important}
.ml-rc .rp-slot{background:#22211F!important}

/* Meld receipt: logo on light grey */
.ml-rc .rp-logo{background:#E8E6E3!important}

/* Meld printer: even lighter greys */
.ml-rc .rp-pr{background:linear-gradient(180deg,#75716C,#67635F)!important}
.ml-rc .rp-in{background:#4E4B47!important}
.ml-rc .rp-pill{background:#85817C!important}
.ml-rc .rp-sq{background:#A29D97!important}
.ml-rc .rp-slot{background:#33312E!important}

/* Meld send/receipt screen: lighter background */
#op-case-meld .ml-rc{background:#F5F5F5!important}

/* Danzee story-block phones smaller on phones */
@media (max-width:600px){.case .c3-shot-danzee .gx-trio{scale:.9}}

/* Finna blobs: raise the floor so rotated squares never land on the "Finna Funds" line */
#op-case-finna .fzs .gk-blobs{height:calc(222*var(--u))!important}

/* Safari: chart row must stretch its cards (otherwise plots collapse to a line + empty gap) */
#op-case-coldsend .h8-charts{height:calc(226*var(--u));grid-template-rows:minmax(0,1fr);align-items:stretch}
#op-case-coldsend .h8-ch{height:100%;min-height:0;box-sizing:border-box}
#op-case-coldsend .h8-plot{flex:1 1 auto;min-height:calc(96*var(--u))}


/* Close button: no auto-focus ring on open (Safari/iOS); keep a ring for keyboard users */
.op-close:focus{outline:none!important}
.op-close:focus-visible{outline:none!important}



/* iOS Safari: border-radius + overflow:hidden does not clip composited (animated) children -> sharp corners.
   A mask forces a real rounded clip. */
.trio__screen,.gx .gx-scr,.gx .trio__screen{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);isolation:isolate}

/* Meld "Cards" screen restyled to the app's own system (flat tiles, uppercase grey labels, 12u radius, header like Overview details) */
.ml-crd .cd-hd{position:absolute;left:0;right:0;top:calc(47*var(--u));height:calc(48*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24*var(--u));box-sizing:border-box}
.ml-crd .cd-hd img{width:calc(24*var(--u));height:calc(24*var(--u))}
.ml-crd .cd-hd b{font:700 calc(16*var(--u))/calc(20*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#30333C}

















/* Meld: screen under the action menu = "MELD details" (MANAGE tab) from the Figma prototype */
.ml-crd .md-peek{position:absolute;top:calc(108*var(--u));width:calc(16*var(--u));height:calc(152*var(--u));border-radius:calc(12*var(--u))}
.ml-crd .md-peek.l{left:calc(-8*var(--u));background:#000}
.ml-crd .md-peek.r{right:calc(-8*var(--u));background:#F7931A}
.ml-crd .md-card{position:absolute;left:calc(24*var(--u));top:calc(108*var(--u));width:calc(342*var(--u));height:calc(152*var(--u));border-radius:calc(12*var(--u));background:#E51B44;color:#fff;overflow:hidden}
.ml-crd .md-n{position:absolute;left:calc(20*var(--u));top:calc(18*var(--u));font:700 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.02em}
.ml-crd .md-s{position:absolute;left:calc(20*var(--u));top:calc(40*var(--u));font:700 calc(12*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ml-crd .md-v{position:absolute;left:calc(20*var(--u));top:calc(60*var(--u));font:700 calc(32*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:-.01em}
.ml-crd .md-v sup{font-size:calc(18*var(--u));vertical-align:calc(10*var(--u));margin-left:calc(1*var(--u))}
.ml-crd .md-tabs{position:absolute;left:0;right:0;bottom:0;height:calc(40*var(--u));display:flex}
.ml-crd .md-tabs i{flex:1;display:grid;place-items:center;font:700 calc(12*var(--u))/1 "Inter Tight","Geist",system-ui,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.6)}
.ml-crd .md-tabs i.on{background:#F5F5F5;color:#30333C;border-radius:calc(12*var(--u)) calc(12*var(--u)) 0 0}
.ml-crd .md-dots{position:absolute;left:0;right:0;top:calc(270*var(--u));display:flex;justify-content:center;gap:calc(4*var(--u))}
.ml-crd .md-dots i{width:calc(4*var(--u));height:calc(4*var(--u));border-radius:99px;background:#C9CAD0}
.ml-crd .md-dots i.on{width:calc(16*var(--u));background:#9E9FA9}
.ml-crd .md-btn,.ml-crd .md-tile{position:absolute;width:calc(165*var(--u));box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;border-radius:calc(12*var(--u))}
.ml-crd .md-btn{top:calc(288*var(--u));height:calc(60*var(--u));padding:calc(8*var(--u)) calc(8*var(--u)) 0 calc(20*var(--u));color:#fff}
.ml-crd .md-btn.rcv{left:calc(24*var(--u));background:#000}
.ml-crd .md-btn.snd{left:calc(201*var(--u));background:#E51B44}
.ml-crd .md-btn b{font:700 calc(14*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;text-transform:uppercase;margin-top:calc(4*var(--u))}
.ml-crd .md-btn img{width:calc(20*var(--u));height:calc(20*var(--u))}
.ml-crd .md-tile{top:calc(356*var(--u));height:calc(64*var(--u));padding:calc(12*var(--u)) calc(8*var(--u)) 0 calc(20*var(--u));background:#fff;box-shadow:0 0 calc(8*var(--u)) rgba(182,182,182,.25)}
.ml-crd .md-tile.t1{left:calc(24*var(--u))}.ml-crd .md-tile.t2{left:calc(201*var(--u))}
.ml-crd .md-tile b{font:700 calc(14*var(--u))/calc(13*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#9E9FA9}
.ml-crd .md-tile img{width:calc(20*var(--u));height:calc(20*var(--u));margin-top:calc(-4*var(--u))}
.ml-crd .md-rows{position:absolute;left:calc(24*var(--u));width:calc(342*var(--u));top:calc(440*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.ml-crd .md-row{display:flex;align-items:center;gap:calc(12*var(--u));height:calc(68*var(--u));box-sizing:border-box;padding:0 calc(20*var(--u));border-radius:calc(12*var(--u));background:#fff;box-shadow:0 0 calc(8*var(--u)) rgba(182,182,182,.25)}
.ml-crd .md-row img{width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%}
.ml-crd .md-row b{flex:1;font:600 calc(16*var(--u))/calc(16*var(--u)) "Inter Tight","Geist",system-ui,sans-serif;color:#30333C}
.ml-crd .md-row img.ch{width:calc(24*var(--u));height:calc(24*var(--u));border-radius:0}

.op-case .fzs .vx.ml-crd{background:#F5F5F5!important}


/* MELD details tabs = exactly the Overview-details notch (tab.svg) */
.ml-crd .md-card{height:calc(156*var(--u))!important;overflow:visible!important}
.ml-crd .md-peek{height:calc(156*var(--u))!important}
.ml-crd .md-tabs{left:0!important;right:auto!important;bottom:auto!important;top:calc(116*var(--u))!important;width:calc(342*var(--u));height:calc(40*var(--u))!important;display:block!important}
.ml-crd .md-tabs i{position:absolute;top:0;width:calc(114*var(--u));height:calc(40*var(--u));display:grid;place-items:center;background:none!important;border-radius:0!important;margin:0!important;padding:0!important}
.ml-crd .md-tabs .t0{left:0;color:#30333C!important}.ml-crd .md-tabs .t1{left:calc(114*var(--u))}.ml-crd .md-tabs .t2{left:calc(228*var(--u))}
.ml-crd .md-notch{position:absolute;left:calc(-12*var(--u));top:calc(3*var(--u));width:calc(137*var(--u));height:calc(41*var(--u))}
.ml-crd .md-dots{top:calc(274*var(--u))!important}
.ml-crd .md-btn{top:calc(292*var(--u))!important}
.ml-crd .md-tile{top:calc(360*var(--u))!important}
.ml-crd .md-rows{top:calc(444*var(--u))!important}

/* Meld receive QR: light modules a touch greyer */
.ml-rv .rv-qp i{background:#EAEBED}
.ml-rv.vx3 .rv-qp i{background:#FFD3DC}
.ml-rv.vx3 .rv-qp i:nth-child(3n){background:#E51B44}

/* Meld printer: darker body, lighter info panel */
.ml-rc .rp-pr{background:linear-gradient(180deg,#46433F,#3A3835)!important}
.ml-rc .rp-in{background:#6C6863!important}
.ml-rc .rp-pill{background:#5C5955!important}
.ml-rc .rp-slot{background:#1F1E1C!important}

/* Meld Send: same gap under the header as Receive (24u) */
.ml-rc .rp-pr{top:calc(119*var(--u))!important}
.ml-rc .rp-out{top:calc(294*var(--u))!important}

/* Smaller dynamic island in Meld and Finna, same as Danzee (scale .7) */
#op-case-meld .trio__island,#op-case-finna .trio__island{transform:translateX(-50%) scale(.7)!important}

/* Finna activity status bar aligned like the other Finna screens (centre 33.3u, insets 32u) */
#op-case-finna .fzs .vt-time{left:calc(32*var(--u))!important;top:calc(25.3*var(--u))!important;font-size:calc(16*var(--u))!important}
#op-case-finna .fzs .vt-sig{right:calc(32*var(--u))!important;top:calc(26.3*var(--u))!important}

/* Finna 3rd screen: side insets 24u like the first screen sheet */
#op-case-finna .fzs .ax-body,#op-case-finna .fzs .ax-hd,#op-case-finna .fzs .vt-sheet{padding-left:calc(24*var(--u))!important;padding-right:calc(24*var(--u))!important}

/* Finna Investment header: iOS-like back chevron + title */
#op-case-finna .fzs .ax-hd{gap:calc(4*var(--u))!important}
#op-case-finna .fzs .ax-back{background:none!important;justify-items:start;width:calc(22*var(--u))!important;height:calc(28*var(--u))!important}
#op-case-finna .fzs .ax-back svg{width:calc(28*var(--u))!important;height:calc(28*var(--u))!important;margin-left:calc(-9*var(--u));stroke-width:2!important}
#op-case-finna .fzs .ax-hd em{font:600 calc(17*var(--u))/1 "Funnel Sans",var(--sans)!important;opacity:1!important;letter-spacing:-.01em}

/* Meld action menu: keep 14u gap above the raised FAB */
#op-case-meld .ml-act .ma-grid{top:calc(396*var(--u))!important}
#op-case-meld .ml-act .ma-sx{clip-path:circle(0 at calc(82*var(--u)) calc(444*var(--u)))!important}
#op-case-meld .ml-act.sx .ma-sx{clip-path:circle(calc(1000*var(--u)) at calc(82*var(--u)) calc(444*var(--u)))!important}

/* Meld overview: tx text turns light while above the white sheet */
#op-case-meld .ml-ov .mo-ti b,#op-case-meld .ml-ov .mo-ti em{transition:color .35s ease}

/* Meld overview: scroll by one row so two rows sit above the sheet */
#op-case-meld .ml-ov.s1.sc .mo-scroll{transform:translateY(calc(-70*var(--u)))!important}

/* Meld Send: Confirm → progress sweep → Sent ✓ */
#op-case-meld .ml-act .ma-snd .ms-cta{overflow:hidden;isolation:isolate}
#op-case-meld .ml-act .ma-snd .ms-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:0 50%;border-radius:inherit}
#op-case-meld .ml-act .ma-snd .ms-cta.ld::after{transform:scaleX(1);transition:transform .9s cubic-bezier(.4,0,.2,1)}
#op-case-meld .ml-act .ma-snd .ms-cta.dn::after{opacity:0;transition:opacity .3s ease}
#op-case-meld .ml-act .ma-snd .ms-cta img{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
#op-case-meld .ml-act .ma-snd .ms-cta.ld:not(.dn) img{transform:scale(0)}
#op-case-meld .ml-act .ma-snd .ms-cta.dn img{transform:scale(1.35)}
#op-case-meld .ml-act .ma-snd .ms-cta.dn b{animation:mSent .35s ease both}
@keyframes mSent{from{opacity:0;transform:translateY(calc(6*var(--u)))}to{opacity:1;transform:none}}

/* Meld printer: light grey body, dark text */
#op-case-meld .ml-rc .rp-pr{background:linear-gradient(180deg,#C9C9C9,#BDBDBD)!important;box-shadow:inset 0 0 0 1px rgba(11,11,11,.07),0 calc(10*var(--u)) calc(24*var(--u)) rgba(11,11,11,.12)!important}
#op-case-meld .ml-rc .rp-in{background:#E0E0E0!important}
#op-case-meld .ml-rc .rp-pill{background:#ABABAB!important;color:#30333C!important;box-shadow:none!important}
#op-case-meld .ml-rc .rp-sq{background:none!important;box-shadow:none!important}
#op-case-meld .ml-rc .rp-slot{background:#8C8C8C!important}
#op-case-meld .ml-rc .rp-hd b,#op-case-meld .ml-rc .rp-t b{color:#30333C!important}
#op-case-meld .ml-rc .rp-hd span,#op-case-meld .ml-rc .rp-t span,#op-case-meld .ml-rc .rp-t b small{color:#9E9FA9!important}
#op-case-meld .ml-rc .rp-st span{color:#30333C!important}
#op-case-meld .ml-rc .rp-st .sp{border-color:rgba(48,51,60,.2)!important;border-top-color:#30333C!important}

/* Meld home + overview: status bar like the other Meld screens */
#op-case-meld .mx-sb{position:absolute;left:0;right:0;top:0;height:calc(47*var(--u));z-index:30;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;padding:calc(11.2*var(--u)) calc(32*var(--u)) 0;font:600 calc(17*var(--u))/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#000;pointer-events:none;transition:color .4s ease}
#op-case-meld .mx-sb > *{display:block;line-height:1}
#op-case-meld .mx-sb img{width:calc(77*var(--u));height:calc(13*var(--u));transition:filter .4s ease}
#op-case-meld .ml-home.nx .mx-sb{color:#fff}
#op-case-meld .ml-home.nx .mx-sb img{filter:invert(1)}

/* Meld receipt: bigger logo without tile; readable greys (WCAG AA) */
#op-case-meld .ml-rc .rp-logo{background:none!important;width:calc(40*var(--u))!important;height:calc(40*var(--u))!important}
#op-case-meld .ml-rc .rp-logo img{width:calc(40*var(--u))!important;height:calc(40*var(--u))!important}
#op-case-meld .ml-rc .rp-id{color:#5E5E5E!important}
#op-case-meld .ml-rc .rp-r,#op-case-meld .ml-rc .rp-r.tot small{color:#595959!important}
#op-case-meld .ml-rc .rp-hd span,#op-case-meld .ml-rc .rp-t span,#op-case-meld .ml-rc .rp-t b small{color:#555761!important}
#op-case-meld .ml-rc .rp-sq img{width:calc(28*var(--u))!important;height:calc(28*var(--u))!important}

/* Meld printer polish: soft depth, highlights, dark slot (keeps #E0E0E0 card) */
#op-case-meld .ml-rc .rp-pr{background:linear-gradient(180deg,#D4D4D6 0%,#C4C4C7 55%,#B8B8BB 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.08),0 0 0 1px rgba(11,11,11,.06),0 calc(2*var(--u)) calc(4*var(--u)) rgba(11,11,11,.08),0 calc(14*var(--u)) calc(30*var(--u)) rgba(11,11,11,.14)!important}
#op-case-meld .ml-rc .rp-in{background:linear-gradient(180deg,#E6E6E7,#E0E0E0)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(0,0,0,.06),0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.06)!important}
#op-case-meld .ml-rc .rp-pill{background:rgba(255,255,255,.55)!important;color:#30333C!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 1px rgba(0,0,0,.05)!important}
#op-case-meld .ml-rc .rp-slot{background:linear-gradient(180deg,#1E1E20,#3A3A3D)!important;box-shadow:0 1px 0 rgba(255,255,255,.5)!important}
#op-case-meld .ml-rc .rp-st .ok{background:#2FB36B!important}

/* Meld receipt: separate paper from the light screen bg */
#op-case-meld .ml-rc .rp-paper{background:#fff!important}
#op-case-meld .ml-rc .rp-out{filter:drop-shadow(0 0 calc(.5*var(--u)) rgba(11,11,11,.12)) drop-shadow(0 calc(4*var(--u)) calc(10*var(--u)) rgba(11,11,11,.05))}

/* ColdSend tablet: landscape */
.gx-csref .gx-lap{height:auto!important;width:min(calc(80cqh * 1.3),86cqw)!important;aspect-ratio:1.3!important}
@container (aspect-ratio < 1.6){.gx-csref .gx-lap{height:auto!important;width:min(calc(82cqh * 1.3),88cqw)!important}}


/* ===== ColdSend case: light analytics UI (ref: Outcrowd Ramos) ===== */
#op-case-coldsend .cs-win .cs-scr *{font-family:"Inter",system-ui,sans-serif!important}
#op-case-coldsend .cs-win .cs-scr{background:#EEEEF0!important}
#op-case-coldsend .cs-win .cs-scr.s7-pg,#op-case-coldsend .cs-win .s7-pg.s7-pg{background:#EEEEF0!important}
#op-case-coldsend .cs-win :is(.h8-p,.s7-card,.b7-r,.b7-mb,.c7-it,.c7-cart,.d7-r){border-radius:calc(16*var(--u))!important}
#op-case-coldsend .cs-win :is(.h8-p,.s7-card){background:#fff!important;box-shadow:0 1px 2px rgba(16,16,20,.04)!important}
#op-case-coldsend .cs-win .h8-col{gap:calc(10*var(--u))!important}
#op-case-coldsend .cs-win .h8-charts{gap:calc(10*var(--u))!important;flex-basis:calc(250*var(--u))!important;height:calc(250*var(--u))!important;grid-template-columns:1.8fr 1fr!important;grid-template-rows:1fr 1fr!important}
#op-case-coldsend .cs-win .h8-ch.k1{grid-row:1/3;padding:calc(20*var(--u)) calc(22*var(--u))!important;overflow:visible!important}
/* black app header like Ramos */
#op-case-coldsend .cs-win .h8-bar{background:#26272d!important;border-radius:calc(14*var(--u))!important;box-shadow:none!important}
#op-case-coldsend .cs-win .h8-bar > b{color:#fff!important;font-weight:600!important}
#op-case-coldsend .cs-win .h8-bar .h8-bk{background:#202024!important;color:#fff!important}
#op-case-coldsend .cs-win .h8-tabs{margin-left:auto;display:inline-flex;gap:calc(2*var(--u));padding:calc(3*var(--u));border-radius:99px;background:#1C1C1F}
#op-case-coldsend .cs-win .h8-tabs i{font-style:normal;display:inline-flex;align-items:center;height:calc(23*var(--u));padding:0 calc(12*var(--u));border-radius:99px;font-size:calc(11*var(--u));font-weight:500;color:#9A9AA3}
#op-case-coldsend .cs-win .h8-tabs i.on{background:#fff;color:#0E0E10}
#op-case-coldsend .cs-win .h8-bar .h8-help{margin-left:calc(10*var(--u))!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important}
/* typography: big thin numbers */
#op-case-coldsend .cs-win .h8-ct p{font-size:calc(13*var(--u))!important;font-weight:500!important;color:#6B6E78!important}
#op-case-coldsend .cs-win .h8-ch.k1 .h8-cv .s7-num{font-size:calc(44*var(--u))!important;font-weight:300!important;letter-spacing:-.03em;color:#0E0E10!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-cv .s7-num,#op-case-coldsend .cs-win .h8-ch.k3 .h8-cv .s7-num{font-size:calc(26*var(--u))!important;font-weight:300!important;letter-spacing:-.02em;color:#0E0E10!important}
#op-case-coldsend .cs-win .h8-cv{align-items:center!important}
#op-case-coldsend .cs-win .h8-cv em{color:#8E919B!important}
/* delta chips */
#op-case-coldsend .cs-win .h8-dl{display:inline-flex;align-items:center;gap:calc(3*var(--u));height:calc(18*var(--u));padding:0 calc(7*var(--u)) 0 calc(3*var(--u));border-radius:99px;text-decoration:none;font-size:calc(10.5*var(--u));font-weight:600}
#op-case-coldsend .cs-win .h8-dl svg{width:calc(12*var(--u));height:calc(12*var(--u));padding:calc(2*var(--u));border-radius:50%;box-sizing:border-box;color:#fff}
#op-case-coldsend .cs-win .h8-dl.up{background:rgba(34,197,94,.12);color:#16A34A}
#op-case-coldsend .cs-win .h8-dl.up svg{background:#22C55E}
#op-case-coldsend .cs-win .h8-dl.gd{background:rgba(34,197,94,.12);color:#16A34A}
#op-case-coldsend .cs-win .h8-dl.gd svg{background:#22C55E}
#op-case-coldsend .cs-win .h8-ch.k3 .h8-dl.gd{background:rgba(255,138,43,.13);color:#E06A10}
#op-case-coldsend .cs-win .h8-ch.k3 .h8-dl.gd svg{background:#FF8A2B}
/* range pills */
#op-case-coldsend .cs-win .h8-rng{display:inline-flex;gap:calc(2*var(--u));padding:calc(3*var(--u));border-radius:99px;background:#F1F1F3}
#op-case-coldsend .cs-win .h8-rng i{font-style:normal;display:inline-flex;align-items:center;height:calc(20*var(--u));padding:0 calc(9*var(--u));border-radius:99px;font-size:calc(10*var(--u));font-weight:500;color:#7B7E88}
#op-case-coldsend .cs-win .h8-rng i.on{background:#fff;color:#0E0E10;box-shadow:0 1px 3px rgba(16,16,20,.1)}
#op-case-coldsend .cs-win .h8-ch.k1 .h8-dt{display:none}
#op-case-coldsend .cs-win .h8-ch.k1 .h8-plot > i{background:none!important;border-top:1px dashed #E4E4E8;height:0!important}
/* side cards */
#op-case-coldsend .cs-win .h8-ch.k2,#op-case-coldsend .cs-win .h8-ch.k3{padding:calc(14*var(--u)) calc(16*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-plot,#op-case-coldsend .cs-win .h8-ch.k3 .h8-plot{margin-top:calc(6*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-x,#op-case-coldsend .cs-win .h8-ch.k3 .h8-x{display:none!important}
#op-case-coldsend .cs-win .h8-ch.k3{--c:#FF8A2B}
#op-case-coldsend .cs-win .h8-ch.k3 stop{stop-color:#FF8A2B}
#op-case-coldsend .cs-win .h8-ch.k3 .h8-gl [stroke]:not([stroke="none"]){stroke:#FF8A2B}
#op-case-coldsend .cs-win .h8-ch.k3 .h8-hd{box-shadow:0 0 0 1.6px #FF8A2B,0 0 0 5px rgba(255,138,43,.18)!important}
/* floating frosted KPI (Ramos-style), pops in after the chart draws */
#op-case-coldsend .cs-win .h8-fk{position:absolute;z-index:6;right:calc(-14*var(--u));bottom:calc(46*var(--u));display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(10*var(--u)) calc(14*var(--u)) calc(10*var(--u)) calc(10*var(--u));border-radius:calc(14*var(--u));background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(16,16,20,.05),0 calc(14*var(--u)) calc(30*var(--u)) rgba(16,16,20,.14);opacity:0;transform:translateY(calc(10*var(--u))) scale(.94);transition:opacity .5s ease,transform .7s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .cs-win .h8.go .h8-fk{opacity:1;transform:none;transition-delay:1.5s}
#op-case-coldsend .cs-win .h8-fk .ic{display:grid;place-items:center;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:#22C55E;box-shadow:0 calc(4*var(--u)) calc(12*var(--u)) rgba(34,197,94,.45)}
#op-case-coldsend .cs-win .h8-fk .ic svg{width:calc(15*var(--u));height:calc(15*var(--u))}
#op-case-coldsend .cs-win .h8-fk .tx{display:flex;flex-direction:column;gap:calc(2*var(--u))}
#op-case-coldsend .cs-win .h8-fk em{font-style:normal;font-size:calc(9.5*var(--u));color:#8E919B}
#op-case-coldsend .cs-win .h8-fk b{font-size:calc(18*var(--u));font-weight:400;color:#0E0E10;letter-spacing:-.02em}
/* domains list rows */
#op-case-coldsend .cs-win .h8-r{background:#F6F6F7!important;box-shadow:none!important;border-radius:calc(12*var(--u))!important}

/* ===== ColdSend dashboard content v3: Ramos-style bars, segmented inbox, mini bars ===== */
#op-case-coldsend .cs-win .h8-ch .h8-plot,#op-case-coldsend .cs-win .h8-ch .h8-x{display:none!important}
#op-case-coldsend .cs-win .h8-ch{display:flex!important;flex-direction:column}
/* hero bars */
#op-case-coldsend .cs-win .h8-bx{flex:1;display:flex;flex-direction:column;margin-top:calc(10*var(--u));min-height:0}
#op-case-coldsend .cs-win .h8-lgd{display:flex;gap:calc(12*var(--u));font-size:calc(10*var(--u));color:#8E919B}
#op-case-coldsend .cs-win .h8-lgd span{display:inline-flex;align-items:center;gap:calc(5*var(--u))}
#op-case-coldsend .cs-win .h8-lgd i{width:calc(8*var(--u));height:calc(8*var(--u));border-radius:calc(2.5*var(--u))}
#op-case-coldsend .cs-win .h8-lgd i.a{background:#1F78F5} #op-case-coldsend .cs-win .h8-lgd i.b{background:#E7E8EC}
#op-case-coldsend .cs-win .h8-bc{position:relative;flex:1;display:grid;grid-template-columns:repeat(14,1fr);gap:calc(5*var(--u));align-items:end;margin-top:calc(8*var(--u))}
#op-case-coldsend .cs-win .h8-bc > i{position:relative;height:calc(var(--l) * 1%);border-radius:calc(7*var(--u)) calc(7*var(--u)) calc(3*var(--u)) calc(3*var(--u));background:#EEEFF2}
#op-case-coldsend .cs-win .h8-bc > i s{position:absolute;left:0;right:0;bottom:0;height:calc(var(--s) / var(--l) * 100%);border-radius:inherit;background:linear-gradient(180deg,#5BA0FF,#1F78F5);transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--k) * 45ms + .3s)}
#op-case-coldsend .cs-win .h8.go .h8-bc > i s{transform:none}
#op-case-coldsend .cs-win .h8-bc > i:not(.on) s{background:linear-gradient(180deg,#9CC4FF,#5E9CF8)}
#op-case-coldsend .cs-win .h8-bc > i em{position:absolute;left:50%;bottom:calc(100% + 5*var(--u));translate:-50% 0;font-style:normal;font-size:calc(9.5*var(--u));font-weight:600;color:#0E0E10;opacity:0;transition:opacity .4s ease calc(var(--k) * 45ms + 1s)}
#op-case-coldsend .cs-win .h8-bc > i em::after{content:"";position:absolute;left:50%;top:calc(100% + 3*var(--u));width:1px;height:calc(400*var(--u));background:linear-gradient(#D7D8DE,transparent 40%);opacity:.0}
#op-case-coldsend .cs-win .h8.go .h8-bc > i em{opacity:1}
#op-case-coldsend .cs-win .h8-bc > i.on::before{content:"";position:absolute;left:50%;bottom:0;top:calc(-200*var(--u));width:1px;background:linear-gradient(180deg,rgba(255,91,46,0),#FF5B2E 70%);opacity:0;transition:opacity .4s ease 1.4s}
#op-case-coldsend .cs-win .h8.go .h8-bc > i.on::before{opacity:.6}
#op-case-coldsend .cs-win .h8-btt{position:absolute;left:calc(9.5 / 14 * 100%);bottom:calc(92% + 10*var(--u));translate:-30% 0;display:flex;flex-direction:column;gap:calc(1*var(--u));padding:calc(6*var(--u)) calc(9*var(--u));border-radius:calc(9*var(--u));background:#26272d;color:#fff;opacity:0;transform:translateY(calc(6*var(--u)));transition:opacity .4s ease 1.5s,transform .6s cubic-bezier(.3,1.6,.5,1) 1.5s;white-space:nowrap}
#op-case-coldsend .cs-win .h8.go .h8-btt{opacity:1;transform:none}
#op-case-coldsend .cs-win .h8-btt em{font-style:normal;font-size:calc(8.5*var(--u));color:rgba(255,255,255,.6)!important}
#op-case-coldsend .cs-win .h8-btt b{font-size:calc(11*var(--u));font-weight:600;color:#fff!important}
#op-case-coldsend .cs-win .h8-bl{display:grid;grid-template-columns:repeat(14,1fr);gap:calc(5*var(--u));margin-top:calc(6*var(--u));font-size:calc(9*var(--u));color:#9A9DA6;white-space:nowrap}
#op-case-coldsend .cs-win .h8-bl span{text-align:left}
#op-case-coldsend .cs-win .h8-fk{bottom:auto!important;top:calc(70*var(--u));right:calc(-16*var(--u))!important}
#op-case-coldsend .cs-win .h8-fk .ic{background:#1F78F5!important;box-shadow:0 calc(4*var(--u)) calc(12*var(--u)) rgba(31,120,245,.45)!important}
#op-case-coldsend .cs-win .h8-fk b small{font-size:calc(10*var(--u));font-weight:600;color:#16A34A;margin-left:calc(2*var(--u))}
/* inbox placement */
#op-case-coldsend .cs-win .h8-pc{font-size:calc(16*var(--u));font-weight:300;color:#0E0E10;margin-left:calc(-6*var(--u))}
#op-case-coldsend .cs-win .h8-seg{margin-top:auto;display:flex;flex-direction:column;gap:calc(8*var(--u))}
#op-case-coldsend .cs-win .h8-sb{display:flex;gap:calc(3*var(--u));height:calc(8*var(--u))}
#op-case-coldsend .cs-win .h8-sb i{flex:var(--w) 0 0;min-width:calc(6*var(--u));border-radius:99px;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .5s}
#op-case-coldsend .cs-win .h8.go .h8-sb i{transform:none}
#op-case-coldsend .cs-win .h8-sb i.y{transition-delay:.8s} #op-case-coldsend .cs-win .h8-sb i.r{transition-delay:.95s}
#op-case-coldsend .cs-win :is(.h8-sb,.h8-sl) i.g{background:#22C55E} #op-case-coldsend .cs-win :is(.h8-sb,.h8-sl) i.y{background:#FACC15} #op-case-coldsend .cs-win :is(.h8-sb,.h8-sl) i.r{background:#F04438}
#op-case-coldsend .cs-win .h8-sl{display:flex;justify-content:space-between;font-size:calc(9.5*var(--u));color:#8E919B}
#op-case-coldsend .cs-win .h8-sl span{display:inline-flex;align-items:center;gap:calc(4*var(--u))}
#op-case-coldsend .cs-win .h8-sl i{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%}
#op-case-coldsend .cs-win .h8-sl b{color:#0E0E10!important;font-weight:600}
/* bounces mini bars */
#op-case-coldsend .cs-win .h8-mb7{margin-top:auto;display:grid;grid-template-columns:repeat(7,1fr);gap:calc(5*var(--u));align-items:end;height:calc(48*var(--u))}
#op-case-coldsend .cs-win .h8-mb7 i{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
#op-case-coldsend .cs-win .h8-mb7 s{display:block;height:calc(var(--h) * .34%);border-radius:calc(4*var(--u));background:#FFE2CC;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--k) * 50ms + .5s)}
#op-case-coldsend .cs-win .h8-mb7 i.on s{background:#FF8A2B}
#op-case-coldsend .cs-win .h8.go .h8-mb7 s{transform:none}
#op-case-coldsend .cs-win .h8-mb7 em{font-style:normal;text-align:center;font-size:calc(8.5*var(--u));color:#A0A3AC!important;margin-top:calc(3*var(--u))}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-dt,#op-case-coldsend .cs-win .h8-ch.k3 .h8-dt{display:none}
/* domains table: health bar, no red delete */
#op-case-coldsend .cs-win .h8-hl{display:inline-flex!important;align-items:center;gap:calc(6*var(--u))}
#op-case-coldsend .cs-win .h8-hl i{order:-1;position:relative;width:calc(46*var(--u))!important;height:calc(5*var(--u))!important;border-radius:99px!important;background:#ECEDF0!important;overflow:hidden;margin:0!important}
#op-case-coldsend .cs-win .h8-hl i::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 1%);border-radius:inherit;background:var(--hc,#22C55E)}
 #op-case-coldsend .cs-win .h8-del{font-size:0!important;color:#A0A3AC!important}
#op-case-coldsend .cs-win .h8-del::before{content:"•••";font-size:calc(10*var(--u));letter-spacing:.1em}

/* ColdSend v3 motion + nav (Ramos): tilt-in, staggered cards, floating dark rail */
#op-case-coldsend .cs-win .h8-intro{display:none!important}
#op-case-coldsend .cs-win .h8-wrap{transform-origin:50% 0;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .6s ease,scale 1.4s cubic-bezier(.16,1,.3,1)}
#op-case-coldsend .cs-win .h8:not(.in) .h8-wrap{transform:perspective(calc(1600*var(--u))) rotateX(20deg) rotateZ(-2.5deg) translateY(6%);opacity:0}
#op-case-coldsend .cs-win .h8 .h8-p{transition:opacity .55s ease,translate .9s cubic-bezier(.16,1,.3,1)!important}
#op-case-coldsend .cs-win .h8:not(.in) .h8-p{opacity:0;translate:0 calc(16*var(--u))}
#op-case-coldsend .cs-win .h8.in .h8-side{transition-delay:.25s!important} #op-case-coldsend .cs-win .h8.in .h8-bar{transition-delay:.35s!important} #op-case-coldsend .cs-win .h8.in .k1{transition-delay:.45s!important} #op-case-coldsend .cs-win .h8.in .k2{transition-delay:.55s!important} #op-case-coldsend .cs-win .h8.in .k3{transition-delay:.65s!important} #op-case-coldsend .cs-win .h8.in .h8-dom{transition-delay:.75s!important}
#op-case-coldsend .cs-win .h8-btt{transition:opacity .4s ease 1.5s,transform .6s cubic-bezier(.3,1.6,.5,1) 1.5s,left .45s cubic-bezier(.3,.7,.2,1)!important}
#op-case-coldsend .cs-win .h8-bc > i s{transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--k) * 45ms + .3s),background .3s ease!important}
#op-case-coldsend .cs-win .h8-bc > i.on::before{transition:opacity .3s ease!important}
/* side rail: floating black pill like the Ramos top bar */
#op-case-coldsend .cs-win .h8-side{background:#26272d!important;border-radius:calc(16*var(--u))!important;box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(16,16,20,.12)!important}
#op-case-coldsend .cs-win .h8-side .if-brand circle{fill:#fff}
#op-case-coldsend .cs-win .h8-side .if-brand g{stroke:#0E0E10}
#op-case-coldsend .cs-win .h8-nav i{color:#7E7F88!important;border-radius:50%!important;width:calc(34*var(--u))!important;height:calc(34*var(--u))!important}
#op-case-coldsend .cs-win .h8-nav i.on{background:#fff!important;color:#0E0E10!important}
#op-case-coldsend .cs-win .h8-nav i.pl{background:#1F78F5!important;color:#fff!important;box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) rgba(31,120,245,.45)!important}
#op-case-coldsend .cs-win .h8-nav .h8-sep{background:rgba(255,255,255,.1)!important}
#op-case-coldsend .cs-win .h8-av{background:linear-gradient(135deg,#FFB547,#FF8A2B)!important;box-shadow:0 0 0 2px #0E0E10,0 0 0 3px rgba(255,255,255,.2)}
/* browser chrome bar: lighter, Ramos-like */
#op-case-coldsend .cs-win .cs-bar{background:#F7F7F8!important}
#op-case-coldsend .cs-win .cs-url{background:#EDEDF0!important;box-shadow:none!important;color:#8E919B!important;border-radius:99px!important}

/* fit: nothing clipped */
#op-case-coldsend .cs-win .h8-charts{flex-basis:calc(224*var(--u))!important;height:calc(224*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2,#op-case-coldsend .cs-win .h8-ch.k3{padding:calc(12*var(--u)) calc(14*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-cv .s7-num,#op-case-coldsend .cs-win .h8-ch.k3 .h8-cv .s7-num{font-size:calc(22*var(--u))!important;line-height:1!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-cv,#op-case-coldsend .cs-win .h8-ch.k3 .h8-cv{margin-top:calc(4*var(--u))!important}
#op-case-coldsend .cs-win .h8-mb7{height:calc(32*var(--u))!important;gap:calc(4*var(--u))!important}
#op-case-coldsend .cs-win .h8-mb7 s{height:calc(var(--h) * .22%)!important}
#op-case-coldsend .cs-win .h8-mb7 em{font-size:calc(7.5*var(--u))!important;margin-top:calc(2*var(--u))!important;line-height:1}
#op-case-coldsend .cs-win .h8-ch.k1 .h8-cv .s7-num{font-size:calc(40*var(--u))!important}
#op-case-coldsend .cs-win .h8-bc > i em::after{display:none!important}

#op-case-coldsend .cs-win .h8-bc > i.on::before{top:calc(-24*var(--u))!important}
#op-case-coldsend .cs-win .h8-bc > i.on em{opacity:0!important}
#op-case-coldsend .cs-win .h8-btt{bottom:auto!important;top:calc(-30*var(--u))!important;translate:-50% 0!important}
#op-case-coldsend .cs-win .h8-fk{top:calc(50*var(--u))!important;right:calc(22*var(--u))!important}
#op-case-coldsend .cs-win .h8-mb7 s{height:calc(var(--h) * .7%)!important}
#op-case-coldsend .cs-win .h8-mb7 i{justify-content:flex-end}
@media (max-width:600px){#op-case-coldsend .cs-row .cs-a{aspect-ratio:386/300!important}#op-case-coldsend .cs-a .cs-win{--cw:92cqw!important;--cx:4cqw!important;--cy:8.5cqw!important}}
@media (min-width:601px){#op-case-coldsend .cs-a .cs-win{--cw:84cqw!important;--cx:8cqw!important;--cy:5.45cqw!important}}

/* ColdSend v4 (ref: UXBoost AI): hatched ghosts, filled status pills, chunky segments, dashed icon ring */
#op-case-coldsend .cs-win .h8-bc > i{background:repeating-linear-gradient(135deg,#E6E7EB 0 calc(2*var(--u)),#F4F4F6 calc(2*var(--u)) calc(5*var(--u)))!important}
#op-case-coldsend .cs-win .h8-lgd i.b{background:repeating-linear-gradient(135deg,#E6E7EB 0 calc(2*var(--u)),#F4F4F6 calc(2*var(--u)) calc(5*var(--u)))!important}
#op-case-coldsend .cs-win .h8-mb7 s{background:repeating-linear-gradient(135deg,#E6E7EB 0 calc(2*var(--u)),#F4F4F6 calc(2*var(--u)) calc(5*var(--u)))!important}
#op-case-coldsend .cs-win .h8-mb7 i.on s{background:#FF8A2B!important}
#op-case-coldsend .cs-win .h8-mb7 i:nth-child(2) s,#op-case-coldsend .cs-win .h8-mb7 i:nth-child(3) s{background:#FFC58F!important}
/* inbox placement: chunky pills */
#op-case-coldsend .cs-win .h8-sb{height:calc(14*var(--u))!important;gap:calc(4*var(--u))!important}
#op-case-coldsend .cs-win .h8-sb i.g{background:#10B96A!important}
#op-case-coldsend .cs-win .h8-sb i.y{background:#FF8A2B!important}
#op-case-coldsend .cs-win .h8-sb i.r{background:repeating-linear-gradient(135deg,#E6E7EB 0 calc(2*var(--u)),#F4F4F6 calc(2*var(--u)) calc(5*var(--u)))!important}
#op-case-coldsend .cs-win .h8-sl i.g{background:#10B96A!important} #op-case-coldsend .cs-win .h8-sl i.y{background:#FF8A2B!important} #op-case-coldsend .cs-win .h8-sl i.r{background:#C9CBD1!important}
#op-case-coldsend .cs-win .h8-dl.up,#op-case-coldsend .cs-win .h8-dl.gd{color:#0E9F5C} #op-case-coldsend .cs-win .h8-dl.up svg,#op-case-coldsend .cs-win .h8-dl.gd svg{background:#10B96A}
/* status: filled pills like GOOD / WARNING */
#op-case-coldsend .cs-win .h8-bd{border-radius:99px!important;padding:0 calc(9*var(--u))!important;box-shadow:none!important;font-weight:600!important;letter-spacing:.01em}
#op-case-coldsend .cs-win .h8-bd.ok{background:#10B96A!important;color:#fff!important}
#op-case-coldsend .cs-win .h8-bd.gy{background:#FF8A2B!important;color:#fff!important}
#op-case-coldsend .cs-win .h8-bd.rd{background:#F04438!important;color:#fff!important}
#op-case-coldsend .cs-win .h8-bd.wu{background:#E8F1FE!important;color:#1F78F5!important}
#op-case-coldsend .cs-win .h8-hl i::after{background:var(--hc,#10B96A)!important}
/* header: light, black active pill */
#op-case-coldsend .cs-win .h8-bar{background:#fff!important;box-shadow:0 1px 2px rgba(16,16,20,.04)!important}
#op-case-coldsend .cs-win .h8-bar > b{color:#0E0E10!important}
#op-case-coldsend .cs-win .h8-bar .h8-bk{background:#F1F1F3!important;color:#0E0E10!important}
#op-case-coldsend .cs-win .h8-bar .h8-st{background:#10B96A!important;border-radius:99px!important}
#op-case-coldsend .cs-win .h8-tabs{background:#F1F1F3!important}
#op-case-coldsend .cs-win .h8-tabs i{color:#6B6E78!important}
#op-case-coldsend .cs-win .h8-tabs i.on{background:#26272d!important;color:#fff!important;box-shadow:none!important}
#op-case-coldsend .cs-win .h8-bar .h8-help{color:#0E0E10!important;box-shadow:inset 0 0 0 1px #E4E5E9!important}
/* floating card: dashed ring icon, green */
#op-case-coldsend .cs-win .h8-fk .ic{background:#10B96A!important;box-shadow:0 0 0 calc(3*var(--u)) #fff,0 0 0 calc(4*var(--u)) rgba(16,185,106,.35)!important;position:relative}
#op-case-coldsend .cs-win .h8-fk .ic::after{content:"";position:absolute;inset:calc(-7*var(--u));border-radius:50%;border:1px dashed rgba(16,185,106,.55);animation:fkspin 9s linear infinite}
@keyframes fkspin{to{transform:rotate(360deg)}}
#op-case-coldsend .cs-win .h8-nav i.pl{background:#10B96A!important;box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) rgba(16,185,106,.45)!important}
#op-case-coldsend .cs-win .h8.rs .h8-wrap{filter:none!important;opacity:0!important;transition:opacity .45s ease!important}
#op-case-coldsend .cs-win .h8-rng{display:none!important}
#op-case-coldsend .cs-win .h8-fk{top:calc(14*var(--u))!important;right:calc(16*var(--u))!important}

/* buttons: Ramos / UXBoost pills */
#op-case-coldsend .cs-win .h8-add{height:calc(32*var(--u))!important;padding:0 calc(5*var(--u)) 0 calc(14*var(--u))!important;gap:calc(10*var(--u))!important;border-radius:99px!important;background:#26272d!important;color:#fff!important;font-weight:600!important;box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(16,16,20,.18)!important;transition:scale .15s ease,background .2s ease!important}
#op-case-coldsend .cs-win .h8-add svg{width:calc(22*var(--u))!important;height:calc(22*var(--u))!important;padding:calc(5*var(--u));box-sizing:border-box;border-radius:50%;background:#10B96A;color:#fff}
#op-case-coldsend .cs-win .h8-add.press{scale:.94!important;background:#26262A!important}
#op-case-coldsend .cs-win .h8-bar .h8-help{height:calc(28*var(--u))!important;padding:0 calc(12*var(--u)) 0 calc(5*var(--u))!important;gap:calc(7*var(--u))!important;background:#F1F1F3!important;box-shadow:none!important;font-weight:500}
#op-case-coldsend .cs-win .h8-bar .h8-help svg{width:calc(18*var(--u))!important;height:calc(18*var(--u))!important;padding:calc(3*var(--u));box-sizing:border-box;border-radius:50%;background:#fff;color:#10B96A!important}
#op-case-coldsend .cs-win .h8-bar .h8-bk{width:calc(30*var(--u))!important;height:calc(30*var(--u))!important;background:#F1F1F3!important;box-shadow:inset 0 0 0 1px #E6E7EB}
#op-case-coldsend .cs-win .h8-dh .h8-ic{border-radius:50%!important;background:#EAF7F0!important;color:#10B96A!important}
#op-case-coldsend .cs-win .h8-bc > i.nb em{opacity:0!important;transition:opacity .2s ease!important}

#op-case-coldsend .cs-win .h8-ct p{gap:calc(8*var(--u))}
#op-case-coldsend .cs-win .h8-ti{display:grid;place-items:center;flex:none;width:calc(24*var(--u));height:calc(24*var(--u));border-radius:50%}
#op-case-coldsend .cs-win .h8-ti svg{width:calc(12*var(--u));height:calc(12*var(--u))}
#op-case-coldsend .cs-win .h8-ti.b{background:#1F78F5;box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(31,120,245,.35)}
#op-case-coldsend .cs-win .h8-ti.g{background:#10B96A;box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(16,185,106,.35)}
#op-case-coldsend .cs-win .h8-ti.o{background:#FF8A2B;box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(255,138,43,.35)}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-ti,#op-case-coldsend .cs-win .h8-ch.k3 .h8-ti{width:calc(20*var(--u));height:calc(20*var(--u))}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-ti svg,#op-case-coldsend .cs-win .h8-ch.k3 .h8-ti svg{width:calc(10*var(--u));height:calc(10*var(--u))}

/* blue is the lead accent; green/orange only for status meaning */
#op-case-coldsend .cs-win .h8-nav i.pl{background:#1F78F5!important;box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) rgba(31,120,245,.45)!important}
#op-case-coldsend .cs-win .h8-add{background:#1F78F5!important;box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(31,120,245,.35)!important}
#op-case-coldsend .cs-win .h8-add svg{background:#fff!important;color:#1F78F5!important}
#op-case-coldsend .cs-win .h8-add.press{background:#115EE4!important}
#op-case-coldsend .cs-win .h8-fk .ic{background:#1F78F5!important;box-shadow:0 0 0 calc(3*var(--u)) #fff,0 0 0 calc(4*var(--u)) rgba(31,120,245,.35)!important}
#op-case-coldsend .cs-win .h8-fk .ic::after{border-color:rgba(31,120,245,.5)!important}
#op-case-coldsend .cs-win .h8-fk b small{color:#1F78F5!important}
#op-case-coldsend .cs-win .h8-dh .h8-ic{background:#E8F1FE!important;color:#1F78F5!important}
#op-case-coldsend .cs-win .h8-bar .h8-help svg{color:#1F78F5!important}
#op-case-coldsend .cs-win .h8-tabs i.on{background:#1F78F5!important;color:#fff!important}
#op-case-coldsend .cs-win .h8-dl.up{background:#E8F1FE!important;color:#1F78F5!important}
#op-case-coldsend .cs-win .h8-dl.up svg{background:#1F78F5!important}

#op-case-coldsend .cs-win .h8-bd.ok{background:#E7F7EF!important;color:#0E9F5C!important}
#op-case-coldsend .cs-win .h8-bd.gy{background:#FFF1E5!important;color:#E06A10!important}
#op-case-coldsend .cs-win .h8-bd.rd{background:#FDECEB!important;color:#D92D20!important}
#op-case-coldsend .cs-win .h8-hl i::after{background:var(--hc,#1F78F5)!important}
#op-case-coldsend .cs-win .h8-bar .h8-st{background:#E8F1FE!important;color:#1F78F5!important}

/* ===== consistency pass: spacing 16, radius 16, gaps 10, icon sizes, control heights ===== */
#op-case-coldsend .cs-win .h8-wrap{gap:calc(10*var(--u))!important}
#op-case-coldsend .cs-win :is(.h8-ch.k1,.h8-ch.k2,.h8-ch.k3,.h8-dom){padding:calc(16*var(--u))!important}
#op-case-coldsend .cs-win .h8-bar{padding:0 calc(16*var(--u)) 0 calc(10*var(--u))!important;border-radius:calc(16*var(--u))!important}
#op-case-coldsend .cs-win .h8-side{border-radius:calc(16*var(--u))!important;padding:calc(12*var(--u)) 0!important}
#op-case-coldsend .cs-win .h8-fk{border-radius:calc(16*var(--u))!important}
/* icon circles */
#op-case-coldsend .cs-win .h8-ti,#op-case-coldsend .cs-win .h8-ch.k2 .h8-ti,#op-case-coldsend .cs-win .h8-ch.k3 .h8-ti,#op-case-coldsend .cs-win .h8-dh .h8-ic{width:calc(24*var(--u))!important;height:calc(24*var(--u))!important;flex:none}
#op-case-coldsend .cs-win .h8-ti svg,#op-case-coldsend .cs-win .h8-ch.k2 .h8-ti svg,#op-case-coldsend .cs-win .h8-ch.k3 .h8-ti svg,#op-case-coldsend .cs-win .h8-dh .h8-ic svg{width:calc(12*var(--u))!important;height:calc(12*var(--u))!important}
#op-case-coldsend .cs-win .h8-dh .h8-ic{background:#1F78F5!important;color:#fff!important;box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(31,120,245,.35)}
#op-case-coldsend .cs-win .h8-fk .ic{width:calc(28*var(--u))!important;height:calc(28*var(--u))!important}
#op-case-coldsend .cs-win .h8-nav i,#op-case-coldsend .cs-win .h8-nav i.pl{width:calc(32*var(--u))!important;height:calc(32*var(--u))!important}
#op-case-coldsend .cs-win .h8-nav i svg{width:calc(15*var(--u))!important;height:calc(15*var(--u))!important}
#op-case-coldsend .cs-win .h8-side .if-brand{width:calc(28*var(--u))!important;height:calc(28*var(--u))!important}
#op-case-coldsend .cs-win .h8-av{width:calc(26*var(--u))!important;height:calc(26*var(--u))!important}
/* controls: 30 tall */
#op-case-coldsend .cs-win .h8-bar .h8-bk{width:calc(30*var(--u))!important;height:calc(30*var(--u))!important}
#op-case-coldsend .cs-win .h8-bar .h8-help{height:calc(30*var(--u))!important;padding:0 calc(12*var(--u)) 0 calc(6*var(--u))!important}
#op-case-coldsend .cs-win .h8-bar .h8-help svg{width:calc(18*var(--u))!important;height:calc(18*var(--u))!important}
#op-case-coldsend .cs-win .h8-tabs{height:calc(30*var(--u));box-sizing:border-box;padding:calc(3*var(--u))!important}
#op-case-coldsend .cs-win .h8-tabs i{height:calc(24*var(--u))!important}
#op-case-coldsend .cs-win .h8-add{height:calc(30*var(--u))!important;padding:0 calc(5*var(--u)) 0 calc(14*var(--u))!important}
#op-case-coldsend .cs-win .h8-add svg{width:calc(20*var(--u))!important;height:calc(20*var(--u))!important;padding:calc(4.5*var(--u))!important}
/* chips: 20 tall */
#op-case-coldsend .cs-win .h8-bd,#op-case-coldsend .cs-win .h8-bar .h8-st{height:calc(20*var(--u))!important;padding:0 calc(9*var(--u))!important;border-radius:99px!important;font-size:calc(10.5*var(--u))!important;margin-left:0!important}
#op-case-coldsend .cs-win .h8-bar > b{margin:0 calc(8*var(--u)) 0 calc(10*var(--u))}
#op-case-coldsend .cs-win .h8-dl{height:calc(20*var(--u))!important}
/* rows aligned with card padding */
#op-case-coldsend .cs-win .h8-r{padding:0 calc(16*var(--u))!important}
#op-case-coldsend .cs-win .h8-mb7{height:calc(28*var(--u))!important}

/* fit after consistency pass */
#op-case-coldsend .cs-win .h8-ch.k2,#op-case-coldsend .cs-win .h8-ch.k3{padding:calc(13*var(--u)) calc(16*var(--u))!important}
#op-case-coldsend .cs-win .h8-dom{padding:calc(14*var(--u)) calc(16*var(--u))!important}
#op-case-coldsend .cs-win .h8-rows{gap:calc(6*var(--u))!important}
#op-case-coldsend .cs-win .h8-charts{flex-basis:calc(208*var(--u))!important;height:calc(208*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-cv .s7-num,#op-case-coldsend .cs-win .h8-ch.k3 .h8-cv .s7-num{font-size:calc(20*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-ct p,#op-case-coldsend .cs-win .h8-ch.k3 .h8-ct p{font-size:calc(12*var(--u))!important}
#op-case-coldsend .cs-win .h8-sb{height:calc(11*var(--u))!important}
#op-case-coldsend .cs-win .h8-seg{gap:calc(6*var(--u))!important}
#op-case-coldsend .cs-win .h8-ch.k2 .h8-cv,#op-case-coldsend .cs-win .h8-ch.k3 .h8-cv{margin-top:calc(2*var(--u))!important}
#op-case-coldsend .cs-win .h8-rows{gap:calc(5*var(--u))!important}
#op-case-coldsend .cs-win .h8-dom{overflow:hidden!important}

/* ===== ColdSend dashboard — Ramos layout ===== */
#op-case-coldsend .cs-win.cs-win .cs-scr.h8{background:#fff!important}
#op-case-coldsend .cs-win.cs-win .h8-side{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-col{gap:0!important}
/* black app bar */
#op-case-coldsend .cs-win.cs-win .h8-bar{background:#26272d!important;box-shadow:none!important;border-radius:calc(14*var(--u))!important;height:calc(46*var(--u))!important;flex:0 0 calc(46*var(--u))!important;padding:0 calc(8*var(--u)) 0 calc(16*var(--u))!important;display:flex!important;align-items:center}
#op-case-coldsend .cs-win.cs-win .h8-bar > :is(.h8-bk,b,.h8-st,.h8-help){display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-brand{display:inline-flex;align-items:center;gap:calc(6*var(--u));color:#fff;font-size:calc(15*var(--u));font-weight:700;letter-spacing:-.01em}
#op-case-coldsend .cs-win.cs-win .h8-brand svg{width:calc(18*var(--u));height:calc(18*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-srch{position:absolute;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:calc(8*var(--u));width:calc(250*var(--u));height:calc(30*var(--u));box-sizing:border-box;padding:0 calc(12*var(--u));border-radius:calc(9*var(--u));background:#232326;color:#8B8C94;font-size:calc(11*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-srch svg{width:calc(12*var(--u));height:calc(12*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-usr{margin-left:auto;display:inline-flex;align-items:center;gap:calc(7*var(--u));height:calc(30*var(--u));padding:0 calc(10*var(--u)) 0 calc(4*var(--u));border-radius:calc(9*var(--u));background:#232326;color:#fff;font-size:calc(11*var(--u));font-weight:500}
#op-case-coldsend .cs-win.cs-win .h8-usr i{display:grid;place-items:center;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:calc(7*var(--u));background:linear-gradient(135deg,#FFB547,#FF8A2B);font-style:normal;font-size:calc(10*var(--u));font-weight:700;color:#fff}
#op-case-coldsend .cs-win.cs-win .h8-usr svg{width:calc(13*var(--u));height:calc(13*var(--u));margin-left:calc(4*var(--u));color:#B9BAC2}
/* hero: no card, huge thin number, full-bleed bars */
#op-case-coldsend .cs-win.cs-win .h8-charts{position:relative;display:block!important;flex:1 1 0!important;height:auto!important;min-height:0}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1{position:absolute!important;inset:0;background:none!important;box-shadow:none!important;border-radius:0!important;padding:calc(18*var(--u)) calc(6*var(--u)) 0!important;overflow:visible!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-ti{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-ct p{font-size:calc(12*var(--u))!important;color:#8E919B!important;font-weight:400!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-cv{margin-top:calc(2*var(--u))!important;align-items:flex-start!important;gap:calc(8*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-cv .s7-num{font-size:calc(60*var(--u))!important;font-weight:300!important;line-height:1!important;letter-spacing:-.04em!important;color:#0E0E10!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-cv em{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-dl{margin-top:calc(8*var(--u));background:none!important;color:#10B96A!important;padding:0!important;height:auto!important;font-size:calc(10*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k1 .h8-dl svg{background:#10B96A!important;width:calc(14*var(--u))!important;height:calc(14*var(--u))!important;padding:calc(3*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-rng{display:inline-flex!important;gap:calc(5*var(--u));padding:0!important;background:none!important}
#op-case-coldsend .cs-win.cs-win .h8-rng i{display:inline-flex;align-items:center;gap:calc(5*var(--u));height:calc(28*var(--u))!important;padding:0 calc(11*var(--u))!important;border-radius:calc(9*var(--u))!important;background:#F3F3F5!important;box-shadow:none!important;color:#3C3E46!important;font-size:calc(10.5*var(--u))!important;font-weight:500!important;font-style:normal}
#op-case-coldsend .cs-win.cs-win .h8-rng svg{width:calc(11*var(--u));height:calc(11*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-lgd,#op-case-coldsend .cs-win.cs-win .h8-bl{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-bx{margin:calc(4*var(--u)) calc(-26*var(--u)) 0!important;padding-top:calc(34*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-bc{gap:calc(3*var(--u))!important;margin-top:0!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i{background:#F3F3F5!important;border-radius:calc(12*var(--u)) calc(12*var(--u)) 0 0!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i s{background:#1F78F5!important;border-radius:calc(12*var(--u)) calc(12*var(--u)) 0 0!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i:not(.on) s{background:#1F78F5!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i.on s{background:#0B5BD8!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i em{bottom:calc(100% + 16*var(--u))!important;font-size:calc(10*var(--u))!important;font-weight:500!important;color:#3C3E46!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i em::after{display:block!important;content:"";position:absolute;left:50%;top:calc(100% + 2*var(--u));width:1px;height:calc(12*var(--u))!important;background:#E3E4E8!important;opacity:1!important}
#op-case-coldsend .cs-win.cs-win .h8-bc > i.on::before{top:calc(-20*var(--u))!important;background:linear-gradient(180deg,rgba(255,91,46,0),#FF5B2E)!important}
#op-case-coldsend .cs-win.cs-win .h8-btt{top:calc(-34*var(--u))!important;border-radius:calc(9*var(--u))!important}
/* frosted KPI stack over the bars */
#op-case-coldsend .cs-win.cs-win .h8-ch.k2,#op-case-coldsend .cs-win.cs-win .h8-ch.k3{position:absolute!important;z-index:5;right:calc(4*var(--u));width:calc(196*var(--u));box-sizing:border-box;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:calc(12*var(--u)) calc(16*var(--u)) calc(8*var(--u))!important;overflow:hidden!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k2{top:calc(58*var(--u));height:calc(70*var(--u));border-radius:calc(16*var(--u)) calc(16*var(--u)) 0 0!important;box-shadow:0 0 0 1px rgba(16,16,20,.04),0 calc(-2*var(--u)) calc(20*var(--u)) rgba(16,16,20,.06)!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k3{top:calc(128*var(--u));height:calc(66*var(--u));border-radius:0!important;box-shadow:0 0 0 1px rgba(16,16,20,.04)!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k3::before{content:"";position:absolute;left:calc(16*var(--u));right:calc(16*var(--u));top:0;height:1px;background:rgba(16,16,20,.08)}
#op-case-coldsend .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) :is(.h8-ti,.h8-seg,.h8-mb7,.h8-cv em,.h8-dt){display:none!important}
#op-case-coldsend .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) .h8-ct p{font-size:calc(10.5*var(--u))!important;color:#8E919B!important;font-weight:400!important}
#op-case-coldsend .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) .h8-cv{margin-top:calc(3*var(--u))!important;align-items:center!important;gap:calc(6*var(--u))!important}
#op-case-coldsend .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) .h8-cv .s7-num{font-size:calc(26*var(--u))!important;font-weight:400!important;letter-spacing:-.02em;color:#0E0E10!important;line-height:1.1!important}
#op-case-coldsend .cs-win.cs-win .h8-pc{font-size:calc(16*var(--u))!important;margin-left:calc(-4*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-fk{top:calc(194*var(--u))!important;right:calc(4*var(--u))!important;width:calc(196*var(--u));height:calc(48*var(--u));box-sizing:border-box;border-radius:0 0 calc(16*var(--u)) calc(16*var(--u))!important;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(16,16,20,.04),0 calc(14*var(--u)) calc(26*var(--u)) rgba(31,120,245,.22)!important;padding:0 calc(12*var(--u))!important;z-index:5}
#op-case-coldsend .cs-win.cs-win .h8-fk .ic{width:calc(26*var(--u))!important;height:calc(26*var(--u))!important;border-radius:calc(8*var(--u))!important;box-shadow:none!important}
#op-case-coldsend .cs-win.cs-win .h8-fk .ic::after{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-fk .tx{flex-direction:row!important;align-items:center;justify-content:space-between;flex:1;gap:calc(6*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-fk em{font-size:calc(11*var(--u))!important;color:#3C3E46!important}
#op-case-coldsend .cs-win.cs-win .h8-fk b{font-size:calc(13*var(--u))!important;font-weight:600!important}
/* grey data panel overlapping the bars */
#op-case-coldsend .cs-win.cs-win .h8-dom{position:relative;z-index:6;flex:none!important;margin:0 calc(-20*var(--u)) calc(-20*var(--u))!important;padding:calc(16*var(--u)) calc(26*var(--u)) calc(22*var(--u))!important;border-radius:calc(22*var(--u)) calc(22*var(--u)) 0 0!important;background:#F3F3F5!important;box-shadow:none!important;overflow:hidden!important}
#op-case-coldsend .cs-win.cs-win .h8-dh{margin-bottom:calc(4*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-ic,#op-case-coldsend .cs-win.cs-win .h8-dh em{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-dh b{font-size:calc(19*var(--u))!important;font-weight:500!important;letter-spacing:-.01em;color:#0E0E10!important}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-tabs{margin:0 auto!important;background:#E7E7EA!important;height:calc(34*var(--u))!important;padding:0!important;border-radius:calc(12*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-tabs i{height:calc(34*var(--u))!important;padding:0 calc(16*var(--u))!important;border-radius:calc(12*var(--u))!important;color:#3C3E46!important;font-size:calc(10.5*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-tabs i.on{background:#fff!important;color:#0E0E10!important;box-shadow:none!important}
#op-case-coldsend .cs-win.cs-win .h8-add{margin-left:0!important;border-radius:calc(10*var(--u))!important;height:calc(34*var(--u))!important;padding:0 calc(8*var(--u)) 0 calc(14*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-add svg{background:rgba(255,255,255,.2)!important;color:#fff!important;border-radius:calc(7*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-r{background:#fff!important;border-radius:calc(14*var(--u))!important;box-shadow:none!important}
#op-case-coldsend .cs-win.cs-win .h8.nw1 .h8-r.nw{background:#EEF5FF!important}
#op-case-coldsend .cs-win.cs-win .h8.nw2 .h8-r.nw{background:#fff!important}

#op-case-coldsend .cs-win.cs-win .h8-ch.k2,#op-case-coldsend .cs-win.cs-win .h8-ch.k3{padding:calc(9*var(--u)) calc(16*var(--u)) calc(6*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k2{top:calc(50*var(--u))!important;height:calc(60*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k3{top:calc(110*var(--u))!important;height:calc(58*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-fk{top:calc(168*var(--u))!important;height:calc(40*var(--u))!important}
#op-case-coldsend .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) .h8-cv .s7-num{font-size:calc(23*var(--u))!important}
#op-case-coldsend .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) .h8-cv{margin-top:calc(1*var(--u))!important}
#op-case-coldsend .cs-a .cs-win.cs-win .cs-bar{display:none!important}
#op-case-coldsend .cs-a .cs-win.cs-win .cs-scr{height:100%!important;border-radius:inherit}

/* perf: cheaper glass, isolated layout, sibling selectors instead of :has */
#op-case-coldsend .cs-win.cs-win .h8-bd.gy ~ .h8-hl{--hc:#FF8A2B}
#op-case-coldsend .cs-win.cs-win .h8-bd.rd ~ .h8-hl{--hc:#F04438}
#op-case-coldsend .cs-win.cs-win .h8-ch.k2,#op-case-coldsend .cs-win.cs-win .h8-ch.k3,#op-case-coldsend .cs-win.cs-win .h8-fk{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.88)!important}
#op-case-coldsend .cs-win.cs-win .h8-dom{contain:layout paint}
#op-case-coldsend .cs-win.cs-win .h8-charts{contain:layout}
#op-case-coldsend .cs-win.cs-win .h8-r{contain:layout paint}
#op-case-coldsend .cs-win.cs-win .h8-wrap{will-change:transform,opacity}
#op-case-coldsend .cs-win.cs-win .h8-bc > i s{will-change:transform}
#op-case-coldsend .cs-win.cs-win .h8-btt{will-change:left,opacity}
#op-case-coldsend .cs-win.cs-win .h8.nw1 .h8-r.nw,#op-case-coldsend .cs-win.cs-win .h8.nw2 .h8-r.nw{background:#fff!important;box-shadow:none!important}

#op-case-coldsend .cs-win.cs-win .h8-ch.k2{box-shadow:0 calc(-2*var(--u)) calc(18*var(--u)) rgba(16,16,20,.06)!important}
#op-case-coldsend .cs-win.cs-win .h8-ch.k3{box-shadow:none!important}
#op-case-coldsend .cs-win.cs-win .h8-fk{box-shadow:0 calc(14*var(--u)) calc(26*var(--u)) rgba(31,120,245,.2)!important}

/* ===== ColdSend screen 2 (setup wizard) — Ramos style ===== */
#op-case-coldsend :is(.cs-b,.cs-c,.cs-d) .cs-win.cs-win .cs-bar{display:none!important}
#op-case-coldsend :is(.cs-b,.cs-c,.cs-d) .cs-win.cs-win .cs-scr{height:100%!important;border-radius:inherit}
#op-case-coldsend .cs-b .cs-win.cs-win .cs-scr,#op-case-coldsend .cs-b .cs-win.cs-win .s7-pg{background:#fff!important}
#op-case-coldsend .cs-b .cs-win.cs-win .s7-card.b7{background:none!important;box-shadow:none!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-h b{font-size:calc(24*var(--w))!important;font-weight:400!important;letter-spacing:-.03em!important;color:#0E0E10!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-h .s7-chip{height:calc(22*var(--w));padding:0 calc(10*var(--w));border-radius:99px!important;background:#EAF2FE!important;box-shadow:none!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-h .s7-chip :is(u,s){color:#1F78F5!important;filter:none!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-s i{box-shadow:none!important;background:#F3F3F5!important;color:#8E919B!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-s.cur i{background:#fff!important;box-shadow:inset 0 0 0 2px #1F78F5,0 0 0 calc(5*var(--w)) rgba(31,120,245,.12)!important;color:#1F78F5!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-s.done i{background:#1F78F5!important;color:#fff!important;box-shadow:0 calc(4*var(--w)) calc(10*var(--w)) rgba(31,120,245,.35)!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-s em{color:#8E919B!important;font-weight:500!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-s.cur em,#op-case-coldsend .cs-b .cs-win.cs-win .b7-s.done em{color:#0E0E10!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-ln{height:calc(3*var(--w))!important;border-radius:99px;background:#EDEDF0!important;margin-top:calc(13*var(--w))!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-ln u{border-radius:99px}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-lb{font-weight:600!important;color:#0E0E10!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-op span{background:#F3F3F5!important;box-shadow:none!important;border-radius:calc(12*var(--w))!important;color:#3C3E46!important;transition:background .3s ease,color .3s ease}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-op span.act{background:#1F78F5!important;color:#fff!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(31,120,245,.3)!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-op span.act :is(b,svg){color:#fff!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-sh{border-top:0!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-sh b{font-weight:500!important;font-size:calc(14*var(--w))!important;color:#0E0E10!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-list{background:#F3F3F5;border-radius:calc(16*var(--w));padding:calc(7*var(--w));box-sizing:border-box}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-empty{box-shadow:none!important;background:none!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-r{background:#fff!important;box-shadow:none!important;border-radius:calc(11*var(--w))!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-ic{border-radius:50%!important;background:#1F78F5!important;color:#fff!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-r .s7-chip{border-radius:99px!important;background:#E7F7EF!important;box-shadow:none!important;padding:0 calc(8*var(--w))}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-r .s7-chip :is(u,s){color:#0E9F5C!important;filter:none!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-mgrid{background:#F3F3F5;border-radius:calc(16*var(--w));padding:calc(7*var(--w))}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-mb{background:#fff!important;box-shadow:none!important;border-radius:calc(11*var(--w))!important}
#op-case-coldsend .cs-b .cs-win.cs-win .b7-gen{background:#1F78F5!important;border-radius:99px!important;box-shadow:0 calc(5*var(--w)) calc(12*var(--w)) rgba(31,120,245,.3)!important;color:#fff!important}

/* ===== ColdSend screen 3 (buy a domain) — Ramos style ===== */
#op-case-coldsend .cs-c .cs-win.cs-win .cs-scr,#op-case-coldsend .cs-c .cs-win.cs-win .s7-pg{background:#fff!important}
#op-case-coldsend .cs-c .cs-win.cs-win .s7-card.c7{background:none!important;box-shadow:none!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-h{border-bottom:0!important;height:calc(56*var(--w))!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-h b{font-size:calc(24*var(--w))!important;font-weight:400!important;letter-spacing:-.03em!important;color:#0E0E10!important}
#op-case-coldsend .cs-c .cs-win.cs-win .s7-back.sm{width:calc(28*var(--w))!important;height:calc(28*var(--w))!important;background:#F3F3F5!important;border-radius:50%}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-st{padding-top:calc(8*var(--w))!important;padding-bottom:calc(18*var(--w))!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-st span{color:#8E919B!important;font-weight:500!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-st span i{width:calc(22*var(--w))!important;height:calc(22*var(--w))!important;background:#F3F3F5!important;box-shadow:none!important;color:#8E919B!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-st span.on{color:#0E0E10!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-st span.on i{background:#1F78F5!important;color:#fff!important;box-shadow:0 calc(4*var(--w)) calc(10*var(--w)) rgba(31,120,245,.35)!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-st .ln{height:calc(3*var(--w))!important;border-radius:99px;background:#EDEDF0!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-l p b,#op-case-coldsend .cs-c .cs-win.cs-win .c7-cart p b{font-weight:500!important;font-size:calc(14*var(--w))!important;color:#0E0E10!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-gen{background:#1F78F5!important;border-radius:99px!important;height:calc(28*var(--w))!important;padding:0 calc(12*var(--w))!important;box-shadow:0 calc(5*var(--w)) calc(12*var(--w)) rgba(31,120,245,.3)!important;color:#fff!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-in{background:#F3F3F5!important;box-shadow:none!important;border-radius:calc(12*var(--w))!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-r.ty .c7-in{background:#fff!important;box-shadow:inset 0 0 0 1.5px #1F78F5,0 0 0 calc(4*var(--w)) rgba(31,120,245,.12)!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-b{border-radius:calc(12*var(--w))!important;background:#fff!important;box-shadow:inset 0 0 0 1.5px #E3E4E8!important;color:#0E0E10!important;font-weight:600!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-r.sc .c7-b{background:#E7F7EF!important;box-shadow:none!important;color:#0E9F5C!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-r.sd .c7-b{background:#FDECEB!important;box-shadow:none!important;color:#D92D20!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-r.se .c7-b{background:#E7F7EF!important;box-shadow:none!important;color:#0E9F5C!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-cart{background:#F3F3F5!important;box-shadow:none!important;border-radius:calc(16*var(--w))!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-it{background:#fff!important;box-shadow:none!important;border-radius:calc(11*var(--w))!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-tot{border-top-color:#E3E4E8!important;align-items:center!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-tot b{font-size:calc(24*var(--w))!important;font-weight:300!important;letter-spacing:-.03em;color:#0E0E10!important}
#op-case-coldsend .cs-c .cs-win.cs-win .c7-go{border-radius:99px!important;background:#C9DCFB!important;font-weight:600!important}
#op-case-coldsend .cs-c .cs-win.cs-win .s7c.rdy .c7-go{background:#1F78F5!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(31,120,245,.35)!important}

/* ===== ColdSend screen 4 (servers) — Ramos style ===== */
#op-case-coldsend .cs-d .cs-win.cs-win .cs-scr{background:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .if-rail{background:#26272d!important;border:0!important;box-shadow:none!important;margin:calc(14*var(--w)) 0 calc(14*var(--w)) calc(14*var(--w));border-radius:calc(16*var(--w));flex-basis:calc(48*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .if-rail .if-brand circle{fill:#fff} #op-case-coldsend .cs-d .cs-win.cs-win .if-rail .if-brand g{stroke:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .if-rail .if-ri{background:none!important;box-shadow:none!important;color:#7E7F88!important;border-radius:50%!important}
#op-case-coldsend .cs-d .cs-win.cs-win .if-rail .if-ri:last-of-type{background:#fff!important;color:#0E0E10!important}
#op-case-coldsend .cs-d .cs-win.cs-win .if-rail .if-sep{background:rgba(255,255,255,.12)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h b{font-size:calc(34*var(--w))!important;font-weight:300!important;letter-spacing:-.03em!important;color:#0E0E10!important}
#op-case-coldsend .cs-d .cs-win.cs-win :is(.d7-se,.d7-fl,.s7-help){background:#F3F3F5!important;box-shadow:none!important;border-radius:calc(10*var(--w))!important;color:#3C3E46!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-buy{background:#1F78F5!important;border-radius:calc(10*var(--w))!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(31,120,245,.32)!important;font-weight:600}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-th{color:#8E919B!important;text-transform:none!important;letter-spacing:0!important;font-size:calc(11.5*var(--w))!important;padding-left:calc(8*var(--w));padding-right:calc(8*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{background:#F3F3F5;border-radius:calc(18*var(--w));padding:calc(8*var(--w));gap:calc(6*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r{background:#fff!important;box-shadow:none!important;border-radius:calc(12*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r:first-of-type,#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.on{background:#fff!important;box-shadow:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r .s7-chip{border-radius:99px!important;box-shadow:none!important;padding:0 calc(9*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r .s7-chip.ok{background:#E7F7EF!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md{border-radius:calc(22*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-ov{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(14,14,16,.32)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rg{white-space:nowrap}

/* ===== ColdSend feature tile 2: setup in three steps (Ramos-style composition) ===== */
#op-case-coldsend .cs-b .cs-win{display:none!important}
#op-case-coldsend .cs-b .rb{--q:calc(100cqw/400);position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;background:#1F78F5;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:calc(44*var(--q)) calc(44*var(--q));background-position:calc(-10*var(--q)) calc(-14*var(--q));font-family:"Geist","Inter",system-ui,sans-serif;color:#0E0E10}
#op-case-coldsend .cs-b .rb *{box-sizing:border-box}
#op-case-coldsend .cs-b .rb :is(i,em,u,s){font-style:normal;text-decoration:none}
#op-case-coldsend .cs-b .rb svg{display:block}





















#op-case-coldsend .cs-b .rb.go .s1 i{animation:rbDone .5s cubic-bezier(.3,1.4,.5,1) .7s forwards}
#op-case-coldsend .cs-b .rb.go .s2 i{animation:rbDone .5s cubic-bezier(.3,1.4,.5,1) 2s forwards}
#op-case-coldsend .cs-b .rb.go .s3 i{animation:rbDone .5s cubic-bezier(.3,1.4,.5,1) 4.1s forwards}
#op-case-coldsend .cs-b .rb.go .s1 em{animation:rbInk .3s ease .7s forwards} #op-case-coldsend .cs-b .rb.go .s2 em{animation:rbInk .3s ease 2s forwards} #op-case-coldsend .cs-b .rb.go .s3 em{animation:rbInk .3s ease 4.1s forwards}
#op-case-coldsend .cs-b .rb.go .l1 u{animation:rbLine .9s cubic-bezier(.5,0,.2,1) 1.1s forwards}
#op-case-coldsend .cs-b .rb.go .l2 u{animation:rbLine .9s cubic-bezier(.5,0,.2,1) 3.2s forwards}







#op-case-coldsend .cs-b .rb.go .r1{animation:rbRow .55s cubic-bezier(.16,1,.3,1) 2.2s forwards} #op-case-coldsend .cs-b .rb.go .r2{animation:rbRow .55s cubic-bezier(.16,1,.3,1) 2.45s forwards} #op-case-coldsend .cs-b .rb.go .r3{animation:rbRow .55s cubic-bezier(.16,1,.3,1) 2.7s forwards}
#op-case-coldsend .cs-b .rb.go .r1 span{animation:rbPop .45s cubic-bezier(.3,1.6,.5,1) 2.8s forwards} #op-case-coldsend .cs-b .rb.go .r2 span{animation:rbPop .45s cubic-bezier(.3,1.6,.5,1) 3.05s forwards} #op-case-coldsend .cs-b .rb.go .r3 span{animation:rbPop .45s cubic-bezier(.3,1.6,.5,1) 3.3s forwards}
/* floating cards */


#op-case-coldsend .cs-b .rb.go .rb-f1{animation:rbPop .7s cubic-bezier(.3,1.6,.5,1) .75s forwards}
#op-case-coldsend .cs-b .rb.go .rb-f3{animation:rbPop .7s cubic-bezier(.3,1.6,.5,1) 1s forwards}
#op-case-coldsend .cs-b .rb.go .rb-f2{animation:rbPop .7s cubic-bezier(.3,1.6,.5,1) 4.2s forwards}
#op-case-coldsend .cs-b .rb-f1{left:calc(14*var(--q));top:calc(16*var(--q));display:flex;align-items:center;gap:calc(8*var(--q));padding:calc(7*var(--q)) calc(13*var(--q)) calc(7*var(--q)) calc(7*var(--q))}
#op-case-coldsend .cs-b .rb-f1 .ic{display:grid;place-items:center;width:calc(28*var(--q));height:calc(28*var(--q));border-radius:50%;background:#26272d;color:#fff}
#op-case-coldsend .cs-b .rb-f1 .ic svg{width:calc(13*var(--q));height:calc(13*var(--q))}
#op-case-coldsend .cs-b .rb-f1 b{display:block;margin-top:calc(1*var(--q));font-size:calc(11.5*var(--q));font-weight:600;letter-spacing:-.01em}
#op-case-coldsend .cs-b .rb-f3{right:calc(16*var(--q));top:calc(28*var(--q));width:calc(100*var(--q));padding:calc(11*var(--q)) calc(13*var(--q)) calc(12*var(--q))}
#op-case-coldsend .cs-b .rb-f3 b{display:block;margin-top:calc(2*var(--q));font-size:calc(30*var(--q));font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}



#op-case-coldsend .cs-b .rb-f2{right:calc(16*var(--q));bottom:calc(20*var(--q));width:calc(118*var(--q));padding:calc(12*var(--q)) calc(13*var(--q)) calc(13*var(--q))}
#op-case-coldsend .cs-b .rb-f2 b{display:flex;align-items:baseline;gap:calc(2*var(--q));margin-top:calc(1*var(--q));font-size:calc(38*var(--q));font-weight:300;letter-spacing:-.04em;line-height:1}
#op-case-coldsend .cs-b .rb-f2 b small{font-size:calc(14*var(--q));color:#B4B6BE;letter-spacing:0}




   
@keyframes rbPop{to{opacity:1;transform:none}}
@keyframes rbRow{to{opacity:1;transform:none}}
@keyframes rbFade{to{opacity:1}}
@keyframes rbHide{to{opacity:0}}
@keyframes rbLine{to{transform:scaleX(1)}}
@keyframes rbInk{to{color:#0E0E10}}
@keyframes rbDone{0%{transform:scale(.8)}100%{transform:none;background:#1F78F5;color:#fff;box-shadow:0 calc(4*var(--q)) calc(10*var(--q)) rgba(31,120,245,.4)}}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .cs-b .rb *{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}}





#op-case-coldsend .cs-b .rb-f1{top:calc(12*var(--q))}



/* tile 2 layout pass: 20q outer margin, aligned edges, deliberate overlaps */




#op-case-coldsend .cs-b .rb .rb-f1{left:calc(20*var(--q));top:calc(20*var(--q))}
#op-case-coldsend .cs-b .rb .rb-f3{right:calc(20*var(--q));top:calc(20*var(--q));width:calc(112*var(--q))}
#op-case-coldsend .cs-b .rb .rb-f2{right:calc(20*var(--q));bottom:calc(22*var(--q));width:calc(112*var(--q))}
#op-case-coldsend .cs-b .rb .rb-f1 .tx{display:flex;flex-direction:column;gap:calc(2*var(--q))}

#op-case-coldsend .cs-b .rb .rb-f1 b{margin-top:0}

/* ===== ColdSend feature tile 2 v2: bento of three cards (wide + two) ===== */
#op-case-coldsend .cs-b .rc{--q:calc(100cqw/400);position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;background:#1F78F5;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:calc(44*var(--q)) calc(44*var(--q));background-position:calc(-10*var(--q)) calc(-14*var(--q));font-family:"Geist","Inter",system-ui,sans-serif;color:#0E0E10}
#op-case-coldsend .cs-b .rc *{box-sizing:border-box}
#op-case-coldsend .cs-b .rc :is(i,em,u,s){font-style:normal;text-decoration:none}
#op-case-coldsend .cs-b .rc svg{display:block}
#op-case-coldsend .cs-b .rc p{margin:0}
#op-case-coldsend .cs-b .rc-in{position:absolute;left:0;top:50%;width:calc(400*var(--q));height:calc(311*var(--q));translate:0 -50%;transition:opacity .5s ease}
#op-case-coldsend .cs-b .rc.out .rc-in{opacity:0}


 



/* top card */


#op-case-coldsend .cs-b .rc-st{position:relative;display:inline-grid;align-items:center;justify-items:center;height:calc(20*var(--q));padding:0 calc(9*var(--q));border-radius:99px;background:#EAF2FE;color:#1F78F5;font-size:calc(9.5*var(--q));font-weight:600;white-space:nowrap}
#op-case-coldsend .cs-b .rc-st u{grid-area:1/1;display:inline-flex;align-items:center;gap:calc(3*var(--q))}
#op-case-coldsend .cs-b .rc-st svg{width:calc(10*var(--q));height:calc(10*var(--q))}
#op-case-coldsend .cs-b .rc-st .b{opacity:0;position:relative;color:#0E9F5C}
#op-case-coldsend .cs-b .rc-st i{position:absolute;inset:0;border-radius:inherit;background:#E7F7EF;opacity:0}
#op-case-coldsend .cs-b .rc.go .rc-st i{animation:rbFade .4s ease 5s forwards}
#op-case-coldsend .cs-b .rc.go .rc-st .a{animation:rbHide .3s ease 5s forwards}
#op-case-coldsend .cs-b .rc.go .rc-st .b{animation:rbFade .4s ease 5.1s forwards}





  



#op-case-coldsend .cs-b .rc.go .c1 u{animation:rcRise 1s cubic-bezier(.2,.8,.2,1) .7s forwards}
#op-case-coldsend .cs-b .rc.go .c2 u{animation:rcRise 1.1s cubic-bezier(.2,.8,.2,1) 2s forwards}
#op-case-coldsend .cs-b .rc.go .c3 u{animation:rcRise 1.2s cubic-bezier(.2,.8,.2,1) 3.6s forwards}
/* shared small label row */




/* setup time */
#op-case-coldsend .cs-b .rc-t{display:block;margin-top:calc(-4*var(--q));font-size:calc(30*var(--q));font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}




/* mailboxes (dark card) */








     
@keyframes rcRise{to{transform:none}}
@keyframes rcArc{to{stroke-dashoffset:16}}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .cs-b .rc *{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}}



@keyframes rcArc{to{stroke-dashoffset:22}}



/* ===== ColdSend feature tile 2 v3: one big card + two small pop-out cards (Ramos "Sales statistic") ===== */



#op-case-coldsend .cs-b .rc .ic{display:grid;place-items:center;flex:none;width:calc(28*var(--q));height:calc(28*var(--q));border-radius:50%;color:#fff}
#op-case-coldsend .cs-b .rc .ic svg{width:calc(13*var(--q));height:calc(13*var(--q))}
#op-case-coldsend .cs-b .rc .ic.b{background:#1F78F5;box-shadow:0 calc(5*var(--q)) calc(10*var(--q)) rgba(31,120,245,.4)}
#op-case-coldsend .cs-b .rc .ic.y{background:#FFC83D;box-shadow:0 calc(5*var(--q)) calc(10*var(--q)) rgba(255,200,61,.5)}
#op-case-coldsend .cs-b .rc .ic.g{background:#3CCB8A;box-shadow:0 calc(5*var(--q)) calc(10*var(--q)) rgba(60,203,138,.45)}



#op-case-coldsend .cs-b .rc .rd-kpis em,#op-case-coldsend .cs-b .rc .rd-f1 em{display:block;font-size:calc(8.5*var(--q));color:#8E919B;white-space:nowrap;line-height:1.1}
#op-case-coldsend .cs-b .rc .rd-kpis b,#op-case-coldsend .cs-b .rc .rd-f1 b{display:block;margin-top:calc(2*var(--q));font-size:calc(15*var(--q));font-weight:400;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}

#op-case-coldsend .cs-b .rc.go .k1{animation:rbRow .5s cubic-bezier(.16,1,.3,1) .8s forwards} #op-case-coldsend .cs-b .rc.go .k2{animation:rbRow .5s cubic-bezier(.16,1,.3,1) .95s forwards}





  















#op-case-coldsend .cs-b .rc .rd-f1{left:calc(28*var(--q));top:calc(71*var(--q));width:calc(122*var(--q));height:calc(50*var(--q));display:flex;align-items:center;gap:calc(9*var(--q));padding:0 calc(11*var(--q));border-radius:calc(14*var(--q));background:#fff;box-shadow:0 calc(10*var(--q)) calc(26*var(--q)) rgba(6,40,110,.22)}
#op-case-coldsend .cs-b .rc .rd-f1 .ic{width:calc(32*var(--q));height:calc(32*var(--q))}
#op-case-coldsend .cs-b .rc .rd-f1 b{font-size:calc(18*var(--q));font-weight:500}
#op-case-coldsend .cs-b .rc .rd-f1 em{font-size:calc(9.5*var(--q))}
#op-case-coldsend .cs-b .rc .rd-f2{right:calc(20*var(--q));bottom:calc(22*var(--q));width:calc(104*var(--q));height:calc(98*var(--q));padding:calc(13*var(--q)) calc(14*var(--q));border-radius:calc(16*var(--q));background:#F6F6F7;box-shadow:0 calc(14*var(--q)) calc(30*var(--q)) rgba(6,40,110,.26)}
#op-case-coldsend .cs-b .rc .rd-f2 b{display:block;font-size:calc(12.5*var(--q));font-weight:500;line-height:1}
#op-case-coldsend .cs-b .rc .rd-f2 em{position:absolute;left:calc(14*var(--q));bottom:calc(42*var(--q));font-size:calc(9.5*var(--q));color:#8E919B;line-height:1}
#op-case-coldsend .cs-b .rc .rd-f2 strong{position:absolute;left:calc(14*var(--q));bottom:calc(13*var(--q));font-size:calc(24*var(--q));font-weight:400;letter-spacing:-.03em;line-height:1}
#op-case-coldsend .cs-b .rc .rd-f2 strong small{font-size:calc(10*var(--q));color:#8E919B;letter-spacing:0;margin-left:calc(2*var(--q))}
#op-case-coldsend .cs-b .rc.go .rd-f1{animation:rbPop .7s cubic-bezier(.3,1.6,.5,1) .55s forwards}
#op-case-coldsend .cs-b .rc.go .rd-f2{animation:rbPop .7s cubic-bezier(.3,1.6,.5,1) 4.1s forwards}
@keyframes rcRiseY{to{transform:none}}



/* tile 2 v3b: own take — status pill, step chips, hatched ramp bars, dark pop-out */


#op-case-coldsend .cs-b .rc .ic.dk{background:#26272d;box-shadow:0 calc(5*var(--q)) calc(10*var(--q)) rgba(14,14,16,.3)}






#op-case-coldsend .cs-b .rc.go .s1{animation:rdChip .4s ease 1.1s forwards} #op-case-coldsend .cs-b .rc.go .s2{animation:rdChip .4s ease 1.9s forwards} #op-case-coldsend .cs-b .rc.go .s3{animation:rdChip .4s ease 2.7s forwards}
#op-case-coldsend .cs-b .rc.go .s1 > i{animation:rdDot .45s cubic-bezier(.3,1.6,.5,1) 1.1s forwards} #op-case-coldsend .cs-b .rc.go .s2 > i{animation:rdDot .45s cubic-bezier(.3,1.6,.5,1) 1.9s forwards} #op-case-coldsend .cs-b .rc.go .s3 > i{animation:rdDot .45s cubic-bezier(.3,1.6,.5,1) 2.7s forwards}
@keyframes rdChip{to{background:#EAF2FE}}
@keyframes rdDot{0%{transform:scale(.6)}100%{transform:none;background:#1F78F5}}
#op-case-coldsend .cs-b .rc .rd-chart2{margin-top:calc(11*var(--q))}
#op-case-coldsend .cs-b .rc .rd-chart2 .cl{display:flex;align-items:baseline;gap:calc(6*var(--q))}
#op-case-coldsend .cs-b .rc .rd-chart2 .cl em{font-size:calc(9.5*var(--q));font-weight:600;color:#0E0E10}
#op-case-coldsend .cs-b .rc .rd-chart2 .cl span{font-size:calc(8*var(--q));color:#9A9DA6}
#op-case-coldsend .cs-b .rc .rd-chart2 .bars{display:flex;align-items:flex-end;gap:calc(5*var(--q));height:calc(62*var(--q));margin-top:calc(7*var(--q));width:calc(190*var(--q))}
#op-case-coldsend .cs-b .rc .rd-chart2 .bars > i{position:relative;flex:1;height:100%;border-radius:calc(6*var(--q));background:repeating-linear-gradient(135deg,#E9EAEE 0 calc(1.6*var(--q)),#F6F6F8 calc(1.6*var(--q)) calc(4.5*var(--q)))}
#op-case-coldsend .cs-b .rc .rd-chart2 .bars s{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * 1%);border-radius:calc(6*var(--q));background:linear-gradient(180deg,#6FA9FF,#1F78F5);transform-origin:50% 100%;transform:scaleY(0)}
#op-case-coldsend .cs-b .rc .rd-chart2 .bars .on s{background:#0B4FC2}
#op-case-coldsend .cs-b .rc .rd-chart2 .bars em{position:absolute;left:50%;top:calc(100% + 5*var(--q));translate:-50% 0;font-size:calc(7.5*var(--q));color:#9A9DA6;white-space:nowrap;line-height:1}
#op-case-coldsend .cs-b .rc.go .rd-chart2 .bars s{animation:rcRiseY .8s cubic-bezier(.16,1,.3,1) calc(3.1s + var(--k) * .09s) forwards}
#op-case-coldsend .cs-b .rc .rd-f2{background:#26272d!important;color:#fff}
#op-case-coldsend .cs-b .rc .rd-f2 em,#op-case-coldsend .cs-b .rc .rd-f2 strong small{color:rgba(255,255,255,.55)!important}
#op-case-coldsend .cs-b .rc .rd-chart2 .bars{height:calc(52*var(--q))}
#op-case-coldsend .cs-b .rc .rd-chart2{margin-top:calc(10*var(--q))}
#op-case-coldsend .cs-row .cs-c{order:1}
#op-case-coldsend .cs-row .cs-b{order:2}
#op-case-coldsend .cs-row .cs-d{order:3}

/* ===== ColdSend feature tile 3: buy a domain — window off the left edge, side panel in focus ===== */
#op-case-coldsend .cs-c .cs-win{display:none!important}
#op-case-coldsend .cs-c .re{--q:calc(100cqw/400);position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;background:#E4E6EE;font-family:"Geist","Inter",system-ui,sans-serif;color:#0E0E10}
#op-case-coldsend .cs-c .re *{box-sizing:border-box}
#op-case-coldsend .cs-c .re :is(i,em,u,s){font-style:normal;text-decoration:none}
#op-case-coldsend .cs-c .re svg{display:block}
#op-case-coldsend .cs-c .re-in{position:absolute;left:0;top:50%;width:calc(400*var(--q));height:calc(311*var(--q));translate:0 -50%;transition:opacity .5s ease}
#op-case-coldsend .cs-c .re.out .re-in{opacity:0}
#op-case-coldsend .cs-c .re-win{position:absolute;left:calc(-12*var(--q));top:calc(34*var(--q));width:calc(350*var(--q));height:calc(243*var(--q));border-radius:0 calc(20*var(--q)) calc(20*var(--q)) 0;background:#fff;box-shadow:0 0 0 calc(4*var(--q)) rgba(255,255,255,.55),0 calc(18*var(--q)) calc(40*var(--q)) rgba(30,40,80,.18);overflow:hidden;opacity:0;transform:translateX(calc(-36*var(--q)))}
#op-case-coldsend .cs-c .re.go .re-win{opacity:1;transform:none;transition:opacity .6s ease,transform 1s cubic-bezier(.16,1,.3,1)}
/* dimmed page underneath */
#op-case-coldsend .cs-c .re-un{position:absolute;inset:0;padding:calc(18*var(--q)) calc(20*var(--q)) 0 calc(30*var(--q));filter:blur(calc(1.6*var(--q)))}
#op-case-coldsend .cs-c .re-un > b{display:block;font-size:calc(15*var(--q));font-weight:500;letter-spacing:-.02em}




#op-case-coldsend .cs-c .re-un .rw{display:flex;gap:calc(6*var(--q));margin-bottom:calc(7*var(--q));width:calc(150*var(--q))}
#op-case-coldsend .cs-c .re-un .rw span{flex:1;height:calc(26*var(--q));border-radius:calc(9*var(--q));background:#F0F0F3}
#op-case-coldsend .cs-c .re-un .rw em{flex:0 0 calc(46*var(--q));height:calc(26*var(--q));border-radius:calc(9*var(--q));box-shadow:inset 0 0 0 1.5px #E3E4E8}
#op-case-coldsend .cs-c .re-dim{position:absolute;inset:0;background:rgba(20,24,40,.0);transition:background .6s ease .4s}
#op-case-coldsend .cs-c .re.go .re-dim{background:rgba(20,24,40,.34)}
/* side panel */
#op-case-coldsend .cs-c .re-dr{position:absolute;right:calc(6*var(--q));top:calc(6*var(--q));bottom:calc(6*var(--q));width:calc(184*var(--q));padding:calc(10*var(--q)) calc(12*var(--q));border-radius:calc(15*var(--q));background:#fff;box-shadow:0 calc(10*var(--q)) calc(30*var(--q)) rgba(14,14,16,.22);display:flex;flex-direction:column;opacity:0;transform:translateX(calc(40*var(--q)))}
#op-case-coldsend .cs-c .re.go .re-dr{opacity:1;transform:none;transition:opacity .5s ease .5s,transform .9s cubic-bezier(.16,1,.3,1) .5s}
#op-case-coldsend .cs-c .re-dr .tp{display:flex;justify-content:space-between;align-items:center;color:#3C3E46}
#op-case-coldsend .cs-c .re-dr .tp svg{width:calc(11*var(--q));height:calc(11*var(--q))}
#op-case-coldsend .cs-c .re-dr .tp .r{display:flex;gap:calc(7*var(--q))}
#op-case-coldsend .cs-c .re-dr .ttl{display:block;margin:calc(9*var(--q)) 0 calc(8*var(--q));font-size:calc(14*var(--q));font-weight:600;letter-spacing:-.02em;line-height:1}
#op-case-coldsend .cs-c .re-dr .pr{display:flex;align-items:center;height:calc(17*var(--q));font-size:calc(8.5*var(--q));opacity:0;transform:translateY(calc(6*var(--q)))}
#op-case-coldsend .cs-c .re-dr .pr em{display:flex;align-items:center;gap:calc(4*var(--q));flex:0 0 calc(62*var(--q));color:#8E919B}
#op-case-coldsend .cs-c .re-dr .pr em svg{width:calc(9*var(--q));height:calc(9*var(--q))}
#op-case-coldsend .cs-c .re-dr .pr b{font-weight:600}
#op-case-coldsend .cs-c .re-dr .pr span{color:#3C3E46;white-space:nowrap}
#op-case-coldsend .cs-c .re-dr .chip{display:inline-flex;align-items:center;gap:calc(3*var(--q));height:calc(14*var(--q));padding:0 calc(6*var(--q));border-radius:99px;background:#E7F7EF;color:#0E9F5C!important;font-weight:600;font-size:calc(8*var(--q))}
#op-case-coldsend .cs-c .re-dr .chip svg{width:calc(8*var(--q));height:calc(8*var(--q))}
#op-case-coldsend .cs-c .re-dr .pg{flex:1;height:calc(4*var(--q));border-radius:99px;background:#EDEDF0;overflow:hidden}
#op-case-coldsend .cs-c .re-dr .pg u{display:block;height:100%;border-radius:inherit;background:#1F78F5;transform-origin:0 50%;transform:scaleX(0)}
#op-case-coldsend .cs-c .re-dr .pr small{margin-left:calc(6*var(--q));font-size:calc(8*var(--q));color:#8E919B}
#op-case-coldsend .cs-c .re.go .p1{animation:rbRow .45s cubic-bezier(.16,1,.3,1) 1s forwards} #op-case-coldsend .cs-c .re.go .p2{animation:rbRow .45s cubic-bezier(.16,1,.3,1) 1.1s forwards} #op-case-coldsend .cs-c .re.go .p3{animation:rbRow .45s cubic-bezier(.16,1,.3,1) 1.2s forwards}
#op-case-coldsend .cs-c .re.go .pg u{animation:rbLine 1.3s cubic-bezier(.4,0,.2,1) 1.5s forwards}
#op-case-coldsend .cs-c .re-dr .ct{display:flex;align-items:center;gap:calc(5*var(--q));margin-top:calc(9*var(--q));padding-top:calc(9*var(--q));border-top:1px solid #EEEEF1;font-size:calc(9.5*var(--q));font-weight:600}
#op-case-coldsend .cs-c .re-dr .ct i{display:grid;place-items:center;min-width:calc(14*var(--q));height:calc(14*var(--q));border-radius:calc(5*var(--q));background:#EAF2FE;color:#1F78F5;font-size:calc(8*var(--q));font-weight:700}
#op-case-coldsend .cs-c .re-dr .it{display:flex;align-items:center;gap:calc(6*var(--q));height:calc(23*var(--q));margin-top:calc(5*var(--q));padding:0 calc(8*var(--q)) 0 calc(5*var(--q));border-radius:calc(9*var(--q));background:#F3F3F5;font-size:calc(9*var(--q));opacity:0;transform:translateY(calc(8*var(--q))) scale(.96)}
#op-case-coldsend .cs-c .re-dr .it i{display:grid;place-items:center;flex:none;width:calc(15*var(--q));height:calc(15*var(--q));border-radius:50%;background:#1F78F5;color:#fff}
#op-case-coldsend .cs-c .re-dr .it i svg{width:calc(8*var(--q));height:calc(8*var(--q))}
#op-case-coldsend .cs-c .re-dr .it b{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#op-case-coldsend .cs-c .re-dr .it span{color:#3C3E46;font-variant-numeric:tabular-nums}
#op-case-coldsend .cs-c .re.go .i1{animation:rbPop .5s cubic-bezier(.3,1.6,.5,1) 2.7s forwards} #op-case-coldsend .cs-c .re.go .i2{animation:rbPop .5s cubic-bezier(.3,1.6,.5,1) 3.8s forwards}
#op-case-coldsend .cs-c .re-dr .tt{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;font-size:calc(9*var(--q));color:#8E919B}
#op-case-coldsend .cs-c .re-dr .tt b{font-size:calc(19*var(--q));font-weight:300;letter-spacing:-.03em;color:#0E0E10;font-variant-numeric:tabular-nums;line-height:1}
#op-case-coldsend .cs-c .re-dr .re-btn{position:relative;display:grid;place-items:center;height:calc(26*var(--q));margin-top:calc(7*var(--q));border-radius:99px;background:#C9DCFB;color:#fff;font-size:calc(9.5*var(--q));font-weight:600;overflow:hidden}
#op-case-coldsend .cs-c .re-dr .re-btn u{grid-area:1/1;display:inline-flex;align-items:center;gap:calc(4*var(--q))}
#op-case-coldsend .cs-c .re-dr .re-btn svg{width:calc(10*var(--q));height:calc(10*var(--q))}
#op-case-coldsend .cs-c .re-dr .re-btn .b{opacity:0}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn{animation:reBtn 1.9s ease 4.5s forwards}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn .a{animation:rbHide .25s ease 6s forwards}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn .b{animation:rbFade .3s ease 6.1s forwards}
@keyframes reBtn{0%{background:#C9DCFB}20%,70%{background:#1F78F5;box-shadow:0 calc(6*var(--q)) calc(14*var(--q)) rgba(31,120,245,.35);transform:none}76%{transform:scale(.95)}84%,100%{background:#10B96A;box-shadow:0 calc(6*var(--q)) calc(14*var(--q)) rgba(16,185,106,.35);transform:none}}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .cs-c .re *{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}}
#op-case-coldsend .cs-c .re-win{top:calc(23*var(--q));height:calc(265*var(--q))}
#op-case-coldsend .cs-c .re-dr > *{flex:none}
#op-case-coldsend .cs-c .re-dr .ttl{margin:calc(8*var(--q)) 0 calc(6*var(--q))}
#op-case-coldsend .cs-c .re-dr .pr{height:calc(15.5*var(--q))}
#op-case-coldsend .cs-c .re-dr .ct{margin-top:calc(7*var(--q));padding-top:calc(7*var(--q))}
#op-case-coldsend .cs-c .re-dr .it{height:calc(21*var(--q));margin-top:calc(4*var(--q))}
#op-case-coldsend .cs-c .re-dr .tt{margin-top:auto;padding-top:calc(4*var(--q))}
#op-case-coldsend .cs-c .re-dr .tt b{font-size:calc(17*var(--q))}
#op-case-coldsend .cs-c .re-dr .re-btn{height:calc(24*var(--q));margin-top:calc(6*var(--q))}
#op-case-coldsend .cs-c .re-dr .ct i{font-style:normal;line-height:1}

/* taller tiles for the two feature compositions */
#op-case-coldsend .cs-row .cs-b,#op-case-coldsend .cs-row .cs-c{aspect-ratio:400/350!important}
#op-case-coldsend .cs-c .re-in{height:calc(350*var(--q))}
#op-case-coldsend .cs-c .re-win{top:calc(28*var(--q))!important;height:calc(294*var(--q))!important}
#op-case-coldsend .cs-c .re-un{padding-top:calc(22*var(--q))}
#op-case-coldsend .cs-c .re-un .rw span,#op-case-coldsend .cs-c .re-un .rw em{height:calc(30*var(--q))}
#op-case-coldsend .cs-c .re-dr{padding:calc(13*var(--q)) calc(14*var(--q)) calc(14*var(--q))}
#op-case-coldsend .cs-c .re-dr .ttl{margin:calc(11*var(--q)) 0 calc(9*var(--q));font-size:calc(15*var(--q))}
#op-case-coldsend .cs-c .re-dr .pr{height:calc(19*var(--q));font-size:calc(9*var(--q))}
#op-case-coldsend .cs-c .re-dr .ct{margin-top:calc(10*var(--q));padding-top:calc(11*var(--q));font-size:calc(10*var(--q))}
#op-case-coldsend .cs-c .re-dr .it{height:calc(25*var(--q));margin-top:calc(6*var(--q));font-size:calc(9.5*var(--q))}
#op-case-coldsend .cs-c .re-dr .tt b{font-size:calc(21*var(--q))}
#op-case-coldsend .cs-c .re-dr .re-btn{height:calc(29*var(--q));margin-top:calc(9*var(--q));font-size:calc(10*var(--q))}
#op-case-coldsend .cs-c .re-dr .pr{height:calc(17*var(--q))}
#op-case-coldsend .cs-c .re-dr .it{height:calc(23*var(--q));margin-top:calc(5*var(--q))}
#op-case-coldsend .cs-c .re-dr .re-btn{height:calc(27*var(--q));margin-top:calc(7*var(--q))}
#op-case-coldsend .cs-c .re-dr .ct{margin-top:calc(8*var(--q));padding-top:calc(9*var(--q))}
#op-case-coldsend .cs-c .re-dr .ttl{margin:calc(9*var(--q)) 0 calc(7*var(--q))}
#op-case-coldsend .cs-c .re-win{top:calc(26*var(--q))!important;height:calc(298*var(--q))!important}
#op-case-coldsend .cs-c .re-dr .it{font-size:calc(8.8*var(--q));gap:calc(5*var(--q));padding:0 calc(7*var(--q)) 0 calc(4*var(--q))}
#op-case-coldsend .cs-c .re-dr{padding-left:calc(12*var(--q));padding-right:calc(12*var(--q))}
#op-case-coldsend .cs-c .re-dr .tt b{font-size:calc(17*var(--q))!important;font-weight:400}

/* tile 3 underlay echoes the main dashboard: black app bar, thin title, grey data panel */
#op-case-coldsend .cs-c .re-un{padding:calc(8*var(--q)) calc(8*var(--q)) 0 calc(20*var(--q))!important;filter:blur(calc(1.1*var(--q)))!important}
#op-case-coldsend .cs-c .re-un .bar{display:flex;align-items:center;height:calc(27*var(--q));padding:0 calc(6*var(--q)) 0 calc(10*var(--q));border-radius:calc(10*var(--q));background:#26272d}
#op-case-coldsend .cs-c .re-un .br{display:inline-flex;align-items:center;gap:calc(4*var(--q));color:#fff;font-size:calc(10*var(--q));font-weight:700;letter-spacing:-.01em}
#op-case-coldsend .cs-c .re-un .br svg{width:calc(11*var(--q));height:calc(11*var(--q))}
#op-case-coldsend .cs-c .re-un .sr{display:block;margin-left:calc(46*var(--q));width:calc(120*var(--q));height:calc(17*var(--q));border-radius:calc(6*var(--q));background:#232326}
#op-case-coldsend .cs-c .re-un .us{display:block;margin-left:auto;width:calc(54*var(--q));height:calc(17*var(--q));border-radius:calc(6*var(--q));background:#232326}
#op-case-coldsend .cs-c .re-un .lb{display:block;margin:calc(12*var(--q)) 0 0 calc(4*var(--q));font-size:calc(8*var(--q));color:#8E919B;line-height:1}
#op-case-coldsend .cs-c .re-un .tl{display:block;margin:calc(3*var(--q)) 0 0 calc(4*var(--q));font-size:calc(22*var(--q));font-weight:300;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}

#op-case-coldsend .cs-c .re-un .rw{margin-left:calc(4*var(--q));margin-bottom:calc(6*var(--q))!important}
#op-case-coldsend .cs-c .re-un .rw span,#op-case-coldsend .cs-c .re-un .rw em{height:calc(24*var(--q))!important}
#op-case-coldsend .cs-c .re-un .pn{position:absolute;left:0;right:0;bottom:0;height:calc(74*var(--q));padding:calc(12*var(--q)) calc(24*var(--q));border-radius:calc(16*var(--q)) calc(16*var(--q)) 0 0;background:#F3F3F5}
#op-case-coldsend .cs-c .re-un .pn b{display:block;font-size:calc(11*var(--q));font-weight:500;margin-bottom:calc(8*var(--q))}
#op-case-coldsend .cs-c .re-un .pn i{display:block;width:calc(150*var(--q));height:calc(18*var(--q));margin-bottom:calc(4*var(--q));border-radius:calc(8*var(--q));background:#fff}
#op-case-coldsend .cs-c .re.go .re-dim{background:rgba(20,24,40,.28)!important}
#op-case-coldsend .cs-c .re-un .lb{display:flex!important;align-items:center;gap:calc(4*var(--q));white-space:nowrap}
#op-case-coldsend .cs-c .re-un .lb svg{width:calc(9*var(--q));height:calc(9*var(--q));padding:calc(1*var(--q));box-sizing:content-box;border-radius:50%;background:#F1F1F3;color:#0E0E10}
#op-case-coldsend .cs-c .re-un .lb u{color:#C4C6CE}

/* ===== ColdSend screen 4 v2: whole window in the device like screen 1, black top bar ===== */
@media (min-width:601px){#op-case-coldsend .cs-d .cs-win{--cw:84cqw!important;--cx:8cqw!important;--cy:5.4cqw!important}}
#op-case-coldsend .cs-d .cs-win.cs-win .cs-scr{--u:var(--w)}
#op-case-coldsend .cs-d .cs-win.cs-win .if-rail{display:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .s7-main{padding:calc(20*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bar{position:relative;margin-bottom:calc(18*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h,#op-case-coldsend .cs-d .cs-win.cs-win .d7-tb,#op-case-coldsend .cs-d .cs-win.cs-win .d7-th{padding-left:calc(6*var(--w));padding-right:calc(6*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h b{font-size:calc(40*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d .d7-tb,#op-case-coldsend .cs-d .cs-win.cs-win .d7-tb{max-width:none!important;margin:calc(14*var(--w)) 0 calc(12*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{margin:0 calc(-20*var(--w)) calc(-20*var(--w));padding:calc(12*var(--w)) calc(20*var(--w)) calc(20*var(--w))!important;border-radius:calc(22*var(--w)) calc(22*var(--w)) 0 0!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-th{margin-top:calc(4*var(--w))}

#op-case-coldsend .cs-d .cs-win.cs-win .d7-bar{opacity:1!important;translate:none!important;flex:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .s7-main{display:flex!important;flex-direction:column;height:100%;box-sizing:border-box}
#op-case-coldsend .cs-d .cs-win.cs-win .s7-main > *{flex:none}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{flex:1 1 auto!important}
@media (min-width:601px){#op-case-coldsend .cs-row .cs-d{aspect-ratio:830/540!important}#op-case-coldsend .cs-d .cs-win{--cy:4.4cqw!important}}
@media (min-width:601px){#op-case-coldsend .cs-d .cs-win.cs-win{border-radius:calc(1.6cqw + 6px)!important;padding:calc(.25cqw + 3px)!important}}
@media (min-width:601px){#op-case-coldsend .cs-d .cs-win.cs-win .cs-scr{transform:none!important}}

/* ===== servers screen enrichments: KPI row, health column, bottom cards ===== */
#op-case-coldsend .cs-d .cs-win.cs-win .h8-usr i{line-height:1!important;font-style:normal}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h{display:flex;align-items:center;justify-content:space-between}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k{display:flex;gap:calc(22*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k{display:flex;align-items:center;gap:calc(9*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i{display:grid;place-items:center;width:calc(34*var(--w));height:calc(34*var(--w));border-radius:50%;color:#fff}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i svg{width:calc(15*var(--w));height:calc(15*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.g{background:#3CCB8A;box-shadow:0 calc(6*var(--w)) calc(12*var(--w)) rgba(60,203,138,.4)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.b{background:#1F78F5;box-shadow:0 calc(6*var(--w)) calc(12*var(--w)) rgba(31,120,245,.4)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.d{background:#26272d;box-shadow:0 calc(6*var(--w)) calc(12*var(--w)) rgba(14,14,16,.28)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k em{display:block;font-style:normal;font-size:calc(10.5*var(--w));color:#8E919B!important;line-height:1.1}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b{display:block;margin-top:calc(2*var(--w));font-size:calc(19*var(--w))!important;font-weight:400!important;letter-spacing:-.02em!important;line-height:1;color:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b small{font-size:calc(11*var(--w));color:#B4B6BE;font-weight:400}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-th,#op-case-coldsend .cs-d .cs-win.cs-win .d7-r{grid-template-columns:calc(160*var(--w)) calc(104*var(--w)) calc(180*var(--w)) calc(118*var(--w)) calc(104*var(--w)) calc(104*var(--w)) 1fr calc(30*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl{display:flex;align-items:center;gap:calc(7*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i{position:relative;flex:0 0 calc(54*var(--w));height:calc(5*var(--w));border-radius:99px;background:#ECEDF0;overflow:hidden}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 1%);border-radius:inherit;background:#1F78F5}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl.y i::after{background:#FF8A2B} #op-case-coldsend .cs-d .cs-win.cs-win .d7-hl.r i::after{background:#F04438}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl b{font-size:calc(11.5*var(--w));font-weight:600;color:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{display:flex!important;flex-direction:column}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2{display:flex;gap:calc(8*var(--w));margin-top:auto;padding-top:calc(10*var(--w));height:calc(112*var(--w));flex:none}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 > div{border-radius:calc(16*var(--w));padding:calc(14*var(--w)) calc(16*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 em{display:block;font-style:normal;font-size:calc(10.5*var(--w));line-height:1.1}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c1{flex:1.7;display:flex;justify-content:space-between;gap:calc(16*var(--w));background:#fff}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c1 em{color:#8E919B!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c1 b{display:block;margin-top:calc(6*var(--w));font-size:calc(34*var(--w));font-weight:300;letter-spacing:-.03em;line-height:1;color:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c1 u{display:inline-flex;align-items:center;gap:calc(3*var(--w));margin-top:calc(8*var(--w));height:calc(18*var(--w));padding:0 calc(7*var(--w));border-radius:99px;background:#E7F7EF;color:#0E9F5C;text-decoration:none;font-size:calc(10*var(--w));font-weight:600}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c1 u svg{width:calc(10*var(--w));height:calc(10*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .bars{display:flex;align-items:flex-end;gap:calc(6*var(--w));width:calc(250*var(--w));height:100%}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .bars i{position:relative;flex:1;height:100%;border-radius:calc(8*var(--w));background:repeating-linear-gradient(135deg,#E9EAEE 0 calc(1.6*var(--w)),#F6F6F8 calc(1.6*var(--w)) calc(4.5*var(--w)))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .bars s{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * 1%);border-radius:calc(8*var(--w));background:linear-gradient(180deg,#6FA9FF,#1F78F5)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .bars .on s{background:#0B4FC2}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2{flex:1;position:relative;background:#26272d;color:#fff}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 em{color:rgba(255,255,255,.55)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 b{display:block;margin-top:calc(6*var(--w));font-size:calc(30*var(--w));font-weight:300;letter-spacing:-.03em;line-height:1;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 b small{font-size:calc(11*var(--w));color:rgba(255,255,255,.55);letter-spacing:0}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 .pg{display:block;height:calc(5*var(--w));margin-top:calc(12*var(--w));border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 .pg u{display:block;width:80%;height:100%;border-radius:inherit;background:#1F78F5}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 .up{position:absolute;right:calc(12*var(--w));top:calc(11*var(--w));display:inline-flex;align-items:center;gap:calc(4*var(--w));height:calc(22*var(--w));padding:0 calc(9*var(--w));border-radius:99px;background:#fff;color:#0E0E10;font-size:calc(10*var(--w));font-weight:600}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 .up svg{width:calc(9*var(--w));height:calc(9*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bt2 .c2 .pg u{width:40%!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.nw{background:#fff!important;box-shadow:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r{flex:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{overflow:hidden}

/* servers header: breathing room like the reference */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-bar{margin-bottom:calc(26*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h{min-height:calc(46*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h > b{line-height:1!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k{gap:calc(30*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k{gap:calc(11*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i{width:calc(38*var(--w))!important;height:calc(38*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b{margin-top:calc(4*var(--w))!important;font-size:calc(20*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d .d7-tb,#op-case-coldsend .cs-d .cs-win.cs-win .d7-tb{margin:calc(24*var(--w)) 0 calc(18*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-th{margin-top:0!important;height:calc(34*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{padding-top:calc(14*var(--w))!important}

/* app nav in the black bar */
#op-case-coldsend .cs-win.cs-win .h8-nv{display:flex;gap:calc(2*var(--u));margin-left:calc(26*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-nv i{display:inline-flex;align-items:center;height:calc(30*var(--u));padding:0 calc(12*var(--u));border-radius:calc(9*var(--u));font-style:normal;font-size:calc(11*var(--u));font-weight:500;line-height:1;color:#9A9BA3;white-space:nowrap}
#op-case-coldsend .cs-win.cs-win .h8-nv i.on{background:#fff;color:#0E0E10}
#op-case-coldsend .cs-win.cs-win .h8-srch{position:static!important;translate:none!important;margin-left:auto;width:calc(170*var(--u))!important}
#op-case-coldsend .cs-win.cs-win .h8-usr{margin-left:calc(8*var(--u))!important}
#op-case-coldsend .cs-c .re-un .nv{display:flex;gap:calc(3*var(--q));margin-left:calc(14*var(--q))}
#op-case-coldsend .cs-c .re-un .nv i{display:block;width:calc(30*var(--q));height:calc(17*var(--q));border-radius:calc(6*var(--q));background:#232326}
#op-case-coldsend .cs-c .re-un .nv i.on{background:#fff}
#op-case-coldsend .cs-c .re-un .sr{margin-left:calc(12*var(--q))!important;width:calc(60*var(--q))!important}
#op-case-coldsend .cs-win.cs-win .h8-srch{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-usr{margin-left:auto!important}
#op-case-coldsend .cs-c .re-un .sr{display:none!important}
#op-case-coldsend .cs-win.cs-win .h8-bar{position:relative}
#op-case-coldsend .cs-win.cs-win .h8-nv{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0!important}
#op-case-coldsend .cs-c .re-un .nv{margin-left:calc(34*var(--q))!important}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-tabs i{gap:calc(5*var(--u))}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-tabs i u{display:inline-grid;place-items:center;min-width:calc(15*var(--u));height:calc(15*var(--u));padding:0 calc(3*var(--u));border-radius:99px;background:rgba(14,14,16,.07);color:#6B6E78;font-size:calc(8.5*var(--u));font-weight:600;text-decoration:none;line-height:1}
#op-case-coldsend .cs-win.cs-win .h8-dh .h8-tabs i.on u{background:#1F78F5;color:#fff}
#op-case-coldsend .cs-win.cs-win .h8-find{margin:0 calc(10*var(--u)) 0 auto;display:inline-flex;align-items:center;gap:calc(8*var(--u));width:calc(220*var(--u));height:calc(34*var(--u));box-sizing:border-box;padding:0 calc(12*var(--u));border-radius:calc(10*var(--u));background:#E7E7EA;color:#8E919B;font-size:calc(10.5*var(--u));font-weight:500;white-space:nowrap}
#op-case-coldsend .cs-win.cs-win .h8-find svg{width:calc(12*var(--u));height:calc(12*var(--u));flex:none}
#op-case-coldsend .cs-win.cs-win .h8-dh{position:relative}
#op-case-coldsend .cs-win.cs-win .h8-find{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0!important}
#op-case-coldsend .cs-win.cs-win .h8-add{margin-left:auto!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h > b{font-size:calc(32*var(--w))!important;font-weight:500!important;letter-spacing:-.02em!important}
#op-case-coldsend .cs-c .re-un .tl{font-size:calc(19*var(--q))!important;font-weight:500!important;letter-spacing:-.02em!important}

/* ===== tile 3 v2: Domains page first, click "Buy a domain", then the modal panel ===== */
#op-case-coldsend .cs-c .re-un{padding:calc(8*var(--q)) calc(10*var(--q)) 0 calc(20*var(--q))!important;filter:blur(0px)!important;transition:filter .6s ease 2s}
#op-case-coldsend .cs-c .re.go .re-un{filter:blur(calc(1.3*var(--q)))!important}
#op-case-coldsend .cs-c .re-un .pt{display:flex;align-items:center;justify-content:space-between;margin:calc(13*var(--q)) calc(2*var(--q)) 0 calc(4*var(--q))}
#op-case-coldsend .cs-c .re-un .pt b{display:block;font-size:calc(19*var(--q));font-weight:500;letter-spacing:-.02em;line-height:1}
#op-case-coldsend .cs-c .re-un .pt em{display:block;margin-top:calc(4*var(--q));font-size:calc(8.5*var(--q));color:#8E919B;line-height:1}
#op-case-coldsend .cs-c .re-un .buy{display:inline-flex;align-items:center;gap:calc(6*var(--q));height:calc(26*var(--q));padding:0 calc(5*var(--q)) 0 calc(11*var(--q));border-radius:calc(9*var(--q));background:#1F78F5;color:#fff;font-size:calc(9.5*var(--q));font-weight:600;white-space:nowrap;box-shadow:0 calc(5*var(--q)) calc(12*var(--q)) rgba(31,120,245,.32)}
#op-case-coldsend .cs-c .re-un .buy i{display:grid;place-items:center;width:calc(16*var(--q));height:calc(16*var(--q));border-radius:calc(6*var(--q));background:rgba(255,255,255,.2);font-size:calc(11*var(--q));line-height:1}
#op-case-coldsend .cs-c .re.go .re-un .buy{animation:reTap .5s ease 1.8s}
@keyframes reTap{35%{transform:scale(.92);background:#115EE4}100%{transform:none}}
#op-case-coldsend .cs-c .re-un .hd,#op-case-coldsend .cs-c .re-un .dl .d{display:grid;grid-template-columns:calc(16*var(--q)) 1fr calc(60*var(--q)) calc(46*var(--q)) calc(16*var(--q));align-items:center;column-gap:calc(8*var(--q))}
#op-case-coldsend .cs-c .re-un .hd{margin:calc(12*var(--q)) calc(10*var(--q)) calc(5*var(--q)) calc(12*var(--q));font-size:calc(8*var(--q));color:#8E919B}
#op-case-coldsend .cs-c .re-un .hd span:first-child{grid-column:1/3}
#op-case-coldsend .cs-c .re-un .dl{margin:0 calc(-10*var(--q)) 0 calc(-20*var(--q));padding:calc(8*var(--q)) calc(10*var(--q)) calc(20*var(--q)) calc(20*var(--q));border-radius:calc(16*var(--q)) calc(16*var(--q)) 0 0;background:#F3F3F5;display:flex;flex-direction:column;gap:calc(4*var(--q));height:100%}
#op-case-coldsend .cs-c .re-un .dl .d{height:calc(27*var(--q));padding:0 calc(10*var(--q)) 0 calc(8*var(--q));border-radius:calc(10*var(--q));background:#fff;font-size:calc(9*var(--q))}
#op-case-coldsend .cs-c .re-un .dl .d > i{display:grid;place-items:center;width:calc(16*var(--q));height:calc(16*var(--q));border-radius:50%;background:#EAF2FE;color:#1F78F5}
#op-case-coldsend .cs-c .re-un .dl .d > i svg{width:calc(9*var(--q));height:calc(9*var(--q))}
#op-case-coldsend .cs-c .re-un .dl b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#op-case-coldsend .cs-c .re-un .dl span{justify-self:start;display:inline-flex;align-items:center;height:calc(15*var(--q));padding:0 calc(6*var(--q));border-radius:99px;font-size:calc(8*var(--q));font-weight:600;white-space:nowrap}
#op-case-coldsend .cs-c .re-un .dl .ok{background:#E7F7EF;color:#0E9F5C} #op-case-coldsend .cs-c .re-un .dl .wu{background:#FFF1E5;color:#E06A10} #op-case-coldsend .cs-c .re-un .dl .rd{background:#FDECEB;color:#D92D20}
#op-case-coldsend .cs-c .re-un .dl u{position:relative;display:block;height:calc(4*var(--q));border-radius:99px;background:#ECEDF0;overflow:hidden}
#op-case-coldsend .cs-c .re-un .dl u::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 1%);border-radius:inherit;background:#1F78F5}
#op-case-coldsend .cs-c .re-un .dl u.y::after{background:#FF8A2B} #op-case-coldsend .cs-c .re-un .dl u.r::after{background:#F04438}
#op-case-coldsend .cs-c .re-un .dl em{font-style:normal;font-size:calc(8.5*var(--q));font-weight:600;text-align:right}
/* cursor */
#op-case-coldsend .cs-c .re-cur{position:absolute;z-index:3;left:calc(150*var(--q));top:calc(190*var(--q));width:calc(15*var(--q));height:calc(15*var(--q));opacity:0;pointer-events:none}
#op-case-coldsend .cs-c .re-cur svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
#op-case-coldsend .cs-c .re.go .re-cur{animation:reCur 2.5s cubic-bezier(.5,0,.2,1) .5s forwards}
@keyframes reCur{0%{opacity:0;transform:none}15%{opacity:1;transform:none}52%{opacity:1;transform:translate(calc(134*var(--q)),calc(-117*var(--q)))}56%{transform:translate(calc(134*var(--q)),calc(-117*var(--q))) scale(.86)}62%{opacity:1;transform:translate(calc(134*var(--q)),calc(-117*var(--q)))}80%,100%{opacity:0;transform:translate(calc(134*var(--q)),calc(-117*var(--q)))}}
/* modal enters after the click */
#op-case-coldsend .cs-c .re-dim{transition:background .6s ease 2s!important}
#op-case-coldsend .cs-c .re.go .re-dr{transition:opacity .5s ease 2.1s,transform .9s cubic-bezier(.16,1,.3,1) 2.1s!important}
#op-case-coldsend .cs-c .re.go .p1{animation-delay:2.6s!important} #op-case-coldsend .cs-c .re.go .p2{animation-delay:2.7s!important} #op-case-coldsend .cs-c .re.go .p3{animation-delay:2.8s!important}
#op-case-coldsend .cs-c .re.go .pg u{animation-delay:3.1s!important}
#op-case-coldsend .cs-c .re.go .i1{animation-delay:4.3s!important} #op-case-coldsend .cs-c .re.go .i2{animation-delay:5.4s!important}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn{animation-delay:5.9s!important}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn .a{animation-delay:7.4s!important} #op-case-coldsend .cs-c .re.go .re-dr .re-btn .b{animation-delay:7.5s!important}
#op-case-coldsend .cs-c .re-un{transition:none!important}
#op-case-coldsend .cs-c .re.go .re-un{transition:filter .6s ease 2s!important}
#op-case-coldsend .cs-c .re-dim{transition:none!important}
#op-case-coldsend .cs-c .re.go .re-dim{transition:background .6s ease 2s!important}

/* ===== tile 3 v3: full Domains page at dashboard scale, only its right half is in view ===== */
#op-case-coldsend .cs-c .re-un{inset:0 0 0 auto!important;left:auto!important;width:calc(620*var(--q));padding:calc(8*var(--q)) calc(10*var(--q)) 0 calc(10*var(--q))!important}
#op-case-coldsend .cs-c .re-un .bar{position:relative;justify-content:space-between;padding:0 calc(6*var(--q)) 0 calc(12*var(--q))!important}
#op-case-coldsend .cs-c .re-un .nvt{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;gap:calc(2*var(--q))}
#op-case-coldsend .cs-c .re-un .nvt i{display:inline-flex;align-items:center;height:calc(19*var(--q));padding:0 calc(9*var(--q));border-radius:calc(6*var(--q));font-size:calc(8*var(--q));font-weight:500;color:#9A9BA3;white-space:nowrap}
#op-case-coldsend .cs-c .re-un .nvt i.on{background:#fff;color:#0E0E10}
#op-case-coldsend .cs-c .re-un .ust{display:inline-flex;align-items:center;gap:calc(5*var(--q));height:calc(19*var(--q));padding:0 calc(8*var(--q)) 0 calc(3*var(--q));border-radius:calc(6*var(--q));background:#232326;color:#fff;font-size:calc(8*var(--q));font-weight:500;white-space:nowrap}
#op-case-coldsend .cs-c .re-un .ust i{display:grid;place-items:center;width:calc(14*var(--q));height:calc(14*var(--q));border-radius:calc(4.5*var(--q));background:linear-gradient(135deg,#FFB547,#FF8A2B);font-size:calc(7*var(--q));font-weight:700;line-height:1}
#op-case-coldsend .cs-c .re-un .pt{margin:calc(14*var(--q)) calc(2*var(--q)) 0 calc(6*var(--q))!important;gap:calc(8*var(--q))}
#op-case-coldsend .cs-c .re-un .pt > span:first-child{margin-right:auto}
#op-case-coldsend .cs-c .re-un .sf{display:inline-flex;align-items:center;gap:calc(6*var(--q));width:calc(132*var(--q));height:calc(26*var(--q));padding:0 calc(9*var(--q));border-radius:calc(9*var(--q));background:#F3F3F5;color:#8E919B;font-size:calc(8.5*var(--q));white-space:nowrap}
#op-case-coldsend .cs-c .re-un .sf svg{width:calc(10*var(--q));height:calc(10*var(--q));flex:none}
#op-case-coldsend .cs-c .re-un .hd,#op-case-coldsend .cs-c .re-un .dl .d{grid-template-columns:calc(16*var(--q)) minmax(0,1.5fr) minmax(0,1.1fr) calc(62*var(--q)) calc(62*var(--q)) calc(70*var(--q)) calc(48*var(--q)) calc(18*var(--q))!important}
#op-case-coldsend .cs-c .re-un .hd{margin:calc(14*var(--q)) calc(10*var(--q)) calc(6*var(--q)) calc(8*var(--q))!important}
#op-case-coldsend .cs-c .re-un .hd span:first-child{grid-column:1/3}
#op-case-coldsend .cs-c .re-un .dl{margin:0 calc(-10*var(--q))!important;padding:calc(8*var(--q)) calc(10*var(--q)) calc(20*var(--q))!important}
#op-case-coldsend .cs-c .re-un .dl .d{height:calc(28*var(--q))!important}
#op-case-coldsend .cs-c .re-un .dl .d > span{justify-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#op-case-coldsend .cs-c .re-un .dl .sv,#op-case-coldsend .cs-c .re-un .dl .mb,#op-case-coldsend .cs-c .re-un .dl .ex{display:block!important;height:auto!important;padding:0!important;border-radius:0!important;background:none!important;font-size:calc(8.5*var(--q))!important;font-weight:400!important;color:#6B6E78}
#op-case-coldsend .cs-c .re-un .dl .hl{display:flex!important;align-items:center;gap:calc(5*var(--q));width:100%;height:auto!important;padding:0!important;background:none!important;overflow:visible!important}
#op-case-coldsend .cs-c .re-un .dl .hl u{flex:1}
#op-case-coldsend .cs-c .re-un .dl .hl em{flex:none;color:#0E0E10}
#op-case-coldsend .cs-c .re-un .dl .mo{display:block!important;height:auto!important;padding:0!important;background:none!important;font-size:calc(7*var(--q))!important;letter-spacing:.08em;color:#A0A3AC}

/* ===== ColdSend feature tile 2 v4: one board, wide columns card + two cards (bento) ===== */
#op-case-coldsend .cs-b .rc-in{height:calc(350*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf{position:absolute;left:calc(26*var(--q));top:calc(22*var(--q));width:calc(348*var(--q));height:calc(306*var(--q));padding:calc(10*var(--q));border-radius:calc(26*var(--q));background:#EDEEF2;box-shadow:0 calc(20*var(--q)) calc(44*var(--q)) rgba(6,40,110,.3);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:calc(156*var(--q)) 1fr;gap:calc(8*var(--q));opacity:0;transform:translateY(calc(24*var(--q))) scale(.96)}
#op-case-coldsend .cs-b .rc.go .rf{opacity:1;transform:none;transition:opacity .6s ease,transform 1s cubic-bezier(.16,1,.3,1)}
#op-case-coldsend .cs-b .rc .rf-c{position:relative;border-radius:calc(18*var(--q));background:#fff;padding:calc(12*var(--q)) calc(13*var(--q));overflow:hidden;opacity:0;transform:translateY(calc(12*var(--q)))}
#op-case-coldsend .cs-b .rc.go .rf-c{opacity:1;transform:none;transition:opacity .5s ease .25s,transform .8s cubic-bezier(.16,1,.3,1) .25s}
#op-case-coldsend .cs-b .rc.go .rf-time{transition-delay:.37s} #op-case-coldsend .cs-b .rc.go .rf-ins{transition-delay:.49s}
#op-case-coldsend .cs-b .rc .rf-top{grid-column:1/3}
#op-case-coldsend .cs-b .rc .rf-h,#op-case-coldsend .cs-b .rc .rf-l{display:flex;align-items:center;gap:calc(6*var(--q))}
#op-case-coldsend .cs-b .rc .rf-h em,#op-case-coldsend .cs-b .rc .rf-l em{margin-right:auto;display:inline-flex;align-items:center;gap:calc(5*var(--q));font-size:calc(10.5*var(--q));color:#6B6E78;white-space:nowrap}
#op-case-coldsend .cs-b .rc .rf-l em svg{width:calc(11*var(--q));height:calc(11*var(--q))}
#op-case-coldsend .cs-b .rc .rf-btn{display:grid;place-items:center;flex:none;width:calc(24*var(--q));height:calc(24*var(--q));border-radius:50%;background:#F1F1F4;color:#0E0E10}
#op-case-coldsend .cs-b .rc .rf-btn svg{width:calc(11*var(--q));height:calc(11*var(--q))}
#op-case-coldsend .cs-b .rc .rf-h .rc-st{height:calc(24*var(--q));padding:0 calc(11*var(--q));background:#F1F1F4;color:#0E0E10}
#op-case-coldsend .cs-b .rc .rf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(5*var(--q));margin-top:calc(10*var(--q))}
#op-case-coldsend .cs-b .rc .rf-cols .col > i{position:relative;display:block;height:calc(84*var(--q));border-radius:calc(11*var(--q));background:repeating-linear-gradient(135deg,#E6E7EC 0 calc(1.6*var(--q)),#F4F4F7 calc(1.6*var(--q)) calc(4.6*var(--q)));overflow:hidden}
#op-case-coldsend .cs-b .rc .rf-cols .col u{position:absolute;left:0;right:0;bottom:0;height:max(calc(var(--h) * 1%),calc(22*var(--q)));border-radius:calc(11*var(--q));padding:calc(7*var(--q)) calc(9*var(--q));color:#fff;transform:translateY(102%)}
#op-case-coldsend .cs-b .rc .rf-cols .c1 u{background:#FF8A2B} #op-case-coldsend .cs-b .rc .rf-cols .c2 u{background:#FFC83D;color:#0E0E10} #op-case-coldsend .cs-b .rc .rf-cols .c3 u{background:#26272d} #op-case-coldsend .cs-b .rc .rf-cols .c4 u{background:#1F78F5}
#op-case-coldsend .cs-b .rc .rf-cols .col u b{font-size:calc(11.5*var(--q));font-weight:500;letter-spacing:-.01em;line-height:1}
#op-case-coldsend .cs-b .rc .rf-cols .col span{display:block;margin-top:calc(6*var(--q));text-align:center;font-size:calc(9*var(--q));color:#6B6E78;line-height:1}
#op-case-coldsend .cs-b .rc.go .rf-cols .c1 u{animation:rcRise .9s cubic-bezier(.2,.8,.2,1) 1s forwards} #op-case-coldsend .cs-b .rc.go .rf-cols .c2 u{animation:rcRise .9s cubic-bezier(.2,.8,.2,1) 1.6s forwards} #op-case-coldsend .cs-b .rc.go .rf-cols .c3 u{animation:rcRise .9s cubic-bezier(.2,.8,.2,1) 2.4s forwards} #op-case-coldsend .cs-b .rc.go .rf-cols .c4 u{animation:rcRise 1.1s cubic-bezier(.2,.8,.2,1) 3.4s forwards}
#op-case-coldsend .cs-b .rc .rf-time > b{display:flex;align-items:baseline;gap:calc(5*var(--q));margin-top:calc(2*var(--q));font-size:calc(26*var(--q));font-weight:400;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
#op-case-coldsend .cs-b .rc .rf-time > b small{font-size:calc(11*var(--q));color:#A0A3AC;letter-spacing:0}
#op-case-coldsend .cs-b .rc .rf-arc{position:absolute;left:50%;bottom:calc(-6*var(--q));width:calc(150*var(--q));height:calc(58*var(--q));translate:-50% 0}
#op-case-coldsend .cs-b .rc .rf-arc .p{stroke-dasharray:100;stroke-dashoffset:100}
#op-case-coldsend .cs-b .rc.go .rf-arc .p{animation:rcArc 4s cubic-bezier(.4,0,.2,1) 1s forwards}
#op-case-coldsend .cs-b .rc .rf-time p{position:absolute;left:0;right:0;bottom:calc(8*var(--q));margin:0;text-align:center;font-size:calc(8.5*var(--q));color:#8E919B}
#op-case-coldsend .cs-b .rc .rf-ins{background:#26272d;color:#fff}
#op-case-coldsend .cs-b .rc .rf-ins .rf-l em{color:#fff;font-weight:500}
#op-case-coldsend .cs-b .rc .rf-ins .rf-btn{background:rgba(255,255,255,.12);color:#fff}
#op-case-coldsend .cs-b .rc .rf-ins p{margin:calc(9*var(--q)) 0 0;font-size:calc(10*var(--q));line-height:1.4;color:rgba(255,255,255,.6)}
#op-case-coldsend .cs-b .rc .rf-ins p b{color:#fff;font-weight:600}
#op-case-coldsend .cs-b .rc .rf-av{position:absolute;left:calc(11*var(--q));right:calc(11*var(--q));bottom:calc(11*var(--q));display:flex;justify-content:space-between;padding:calc(4*var(--q));border-radius:99px;background:rgba(255,255,255,.1)}
#op-case-coldsend .cs-b .rc .rf-av i{display:grid;place-items:center;width:calc(20*var(--q));height:calc(20*var(--q));border-radius:50%;background:var(--c);color:#fff;font-size:calc(8.5*var(--q));font-weight:700;opacity:0;transform:scale(.4)}
#op-case-coldsend .cs-b .rc .rf-av i.m{background:#fff;color:#0E0E10;font-size:calc(8*var(--q))}
#op-case-coldsend .cs-b .rc.go .rf-av i{animation:rbPop .4s cubic-bezier(.3,1.6,.5,1) forwards}
#op-case-coldsend .cs-b .rc.go .rf-av i:nth-child(1){animation-delay:4.4s} #op-case-coldsend .cs-b .rc.go .rf-av i:nth-child(2){animation-delay:4.5s} #op-case-coldsend .cs-b .rc.go .rf-av i:nth-child(3){animation-delay:4.6s} #op-case-coldsend .cs-b .rc.go .rf-av i:nth-child(4){animation-delay:4.7s} #op-case-coldsend .cs-b .rc.go .rf-av i:nth-child(5){animation-delay:4.8s} #op-case-coldsend .cs-b .rc.go .rf-av i:nth-child(6){animation-delay:4.9s}

/* tile 3: same grey dotted background and dark device frame as the other screens */
#op-case-coldsend .cs-c .re{background:none!important}
#op-case-coldsend .cs-c .re-win{box-shadow:inset 0 0 0 1px #2B2B30,0 calc(12*var(--q)) calc(34*var(--q)) rgba(16,20,36,.16)!important;background:#26272d!important;padding:calc(5*var(--q)) calc(5*var(--q)) calc(5*var(--q)) 0;border-radius:0 calc(22*var(--q)) calc(22*var(--q)) 0!important}
#op-case-coldsend .cs-c .re-win::before{content:"";position:absolute;inset:calc(5*var(--q)) calc(5*var(--q)) calc(5*var(--q)) 0;border-radius:0 calc(17*var(--q)) calc(17*var(--q)) 0;background:#fff}
#op-case-coldsend .cs-c .re-un{inset:calc(5*var(--q)) calc(5*var(--q)) calc(5*var(--q)) auto!important;border-radius:0 calc(17*var(--q)) calc(17*var(--q)) 0;overflow:hidden}
#op-case-coldsend .cs-c .re-dim{inset:calc(5*var(--q)) calc(5*var(--q)) calc(5*var(--q)) 0!important;border-radius:0 calc(17*var(--q)) calc(17*var(--q)) 0}
#op-case-coldsend .cs-c .re-dr{right:calc(11*var(--q))!important;top:calc(11*var(--q))!important;bottom:calc(11*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-time p{display:none}
#op-case-coldsend .cs-b .rc .rf-arc{bottom:calc(-14*var(--q));height:calc(62*var(--q));width:calc(160*var(--q))}
#op-case-coldsend .cs-b .rc .rf-cols .col u{height:max(calc(var(--h) * 1%),calc(26*var(--q)))!important;padding:calc(8*var(--q)) calc(9*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-arc{bottom:calc(4*var(--q))!important;height:calc(52*var(--q))!important;width:calc(134*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-ins p{margin-top:calc(8*var(--q))!important}
#op-case-coldsend .cs-c .re-un .bar{height:calc(30*var(--q))!important;min-height:0!important;flex:none!important;box-sizing:border-box;border-radius:calc(10*var(--q))!important}
#op-case-coldsend .cs-c .re-un .nvt i,#op-case-coldsend .cs-c .re-un .ust{height:calc(20*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col u{height:max(calc(var(--h) * 1%),calc(32*var(--q)))!important}

/* bento v4 proportions per reference: thicker board frame, taller columns, squarer bottom cards */
#op-case-coldsend .cs-b .rc .rf{left:calc(20*var(--q))!important;top:calc(17*var(--q))!important;width:calc(360*var(--q))!important;height:calc(316*var(--q))!important;padding:calc(15*var(--q))!important;border-radius:calc(30*var(--q))!important;gap:calc(10*var(--q))!important;grid-template-rows:calc(152*var(--q)) 1fr!important}
#op-case-coldsend .cs-b .rc .rf-c{border-radius:calc(20*var(--q))!important;padding:calc(13*var(--q)) calc(14*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-h{height:calc(26*var(--q))}
#op-case-coldsend .cs-b .rc .rf-btn{width:calc(26*var(--q))!important;height:calc(26*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-h .rc-st{height:calc(26*var(--q))!important;padding:0 calc(12*var(--q))!important;font-size:calc(10*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols{margin-top:calc(9*var(--q))!important;gap:calc(6*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col > i{height:calc(74*var(--q))!important;border-radius:calc(12*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col u{display:flex;align-items:flex-start;border-radius:calc(12*var(--q))!important;padding:calc(9*var(--q)) calc(10*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col u b{font-size:calc(12.5*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col span{margin-top:calc(7*var(--q))!important;font-size:calc(9.5*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-time > b{margin-top:calc(1*var(--q))!important;font-size:calc(30*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-time > b small{font-size:calc(12*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-arc{bottom:calc(-2*var(--q))!important;height:calc(50*var(--q))!important;width:calc(130*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-arc .kn{opacity:0}
#op-case-coldsend .cs-b .rc.go .rf-arc .kn{animation:rbFade .3s ease 4.9s forwards}
#op-case-coldsend .cs-b .rc .rf-ins p{margin-top:calc(9*var(--q))!important;font-size:calc(10.5*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-av{left:calc(12*var(--q))!important;right:calc(12*var(--q))!important;bottom:calc(12*var(--q))!important}

/* tile 2: grey dotted background like the other screens; dark board so it stands out */
#op-case-coldsend .cs-b .rc{background:none!important;background-image:none!important}
#op-case-coldsend .cs-b .rc .rf{background:#26272d!important;box-shadow:inset 0 0 0 1px #2B2B30,0 calc(12*var(--q)) calc(34*var(--q)) rgba(16,20,36,.16)!important}

/* tile 2: no board container, cards sit directly on the dotted background */
#op-case-coldsend .cs-b .rc .rf{background:none!important;box-shadow:none!important;padding:0!important;left:calc(24*var(--q))!important;top:calc(22*var(--q))!important;width:calc(352*var(--q))!important;height:calc(306*var(--q))!important;border-radius:0!important}
#op-case-coldsend .cs-b .rc .rf-c{box-shadow:0 0 0 1px rgba(16,20,36,.05),0 calc(10*var(--q)) calc(28*var(--q)) rgba(16,20,36,.10)}

/* servers KPI row v2: three tidy stat chips */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k{gap:calc(8*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k{gap:calc(10*var(--w))!important;height:calc(48*var(--w));padding:0 calc(16*var(--w)) 0 calc(8*var(--w));border-radius:calc(14*var(--w));background:#F3F3F5}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i{width:calc(32*var(--w))!important;height:calc(32*var(--w))!important;box-shadow:none!important;border-radius:calc(10*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i svg{width:calc(14*var(--w))!important;height:calc(14*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.g{background:#E3F6EC!important;color:#0E9F5C!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.b{background:#1F78F5!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.d{background:#26272d!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k em{font-size:calc(10*var(--w))!important;color:#8E919B!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b{margin-top:calc(3*var(--w))!important;font-size:calc(17*var(--w))!important;font-weight:500!important;letter-spacing:-.02em!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b small{font-size:calc(10.5*var(--w))!important;font-weight:400!important;color:#A0A3AC!important;margin-left:calc(1*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h{min-height:calc(48*var(--w))!important}
#op-case-coldsend .cs-c .re-dr .tt b{font-size:calc(15*var(--q))!important;font-weight:600!important;letter-spacing:-.02em!important}

/* servers KPI row v3 (Ramos "Sales statistic"): round vivid icons with glow, first stat popped as a white card */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k{gap:calc(26*var(--w))!important;align-items:center}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k{gap:calc(11*var(--w))!important;height:auto!important;padding:0!important;border-radius:0!important;background:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k:first-child{height:calc(54*var(--w))!important;padding:0 calc(18*var(--w)) 0 calc(11*var(--w))!important;border-radius:calc(16*var(--w))!important;background:#fff!important;box-shadow:0 0 0 1px rgba(16,20,36,.05),0 calc(10*var(--w)) calc(26*var(--w)) rgba(16,20,36,.12)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i{width:calc(36*var(--w))!important;height:calc(36*var(--w))!important;border-radius:50%!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i svg{width:calc(15*var(--w))!important;height:calc(15*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.g{background:#1F78F5!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(31,120,245,.45)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.b{background:#FFC83D!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(255,200,61,.55)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.d{background:#3CCB8A!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(60,203,138,.5)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k em{font-size:calc(10.5*var(--w))!important;color:#8E919B!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b{margin-top:calc(4*var(--w))!important;font-size:calc(19*var(--w))!important;font-weight:500!important;letter-spacing:-.02em!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b small{font-size:calc(11*var(--w))!important;color:#A0A3AC!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-h{min-height:calc(54*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.g,#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.b,#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.d{color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.b{color:#0E0E10!important}


/* servers KPI row v4 (ref stat tiles): grey rounded tile, colour rounded-square icon, label over value */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k{gap:calc(8*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k,#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k:first-child{gap:calc(11*var(--w))!important;height:calc(54*var(--w))!important;padding:0 calc(20*var(--w)) 0 calc(6*var(--w))!important;border-radius:calc(16*var(--w))!important;background:#F5F5F6!important;box-shadow:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i{width:calc(42*var(--w))!important;height:calc(42*var(--w))!important;border-radius:calc(12*var(--w))!important;box-shadow:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i svg{width:calc(17*var(--w))!important;height:calc(17*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.g{background:#1F78F5!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.b{background:#FFC83D!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i.d{background:#5CC489!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k em{font-size:calc(10.5*var(--w))!important;color:#8E919B!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b{margin-top:calc(4*var(--w))!important;font-size:calc(15*var(--w))!important;font-weight:500!important;letter-spacing:0!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b small{font-size:calc(11*var(--w))!important;color:#A0A3AC!important}

/* servers KPI v5: smaller */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k,#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k:first-child{gap:calc(9*var(--w))!important;height:calc(46*var(--w))!important;padding:0 calc(16*var(--w)) 0 calc(6*var(--w))!important;border-radius:calc(14*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i{width:calc(34*var(--w))!important;height:calc(34*var(--w))!important;border-radius:calc(10*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k i svg{width:calc(14*var(--w))!important;height:calc(14*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k em{font-size:calc(9.5*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b{margin-top:calc(3*var(--w))!important;font-size:calc(13.5*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k b small{font-size:calc(10*var(--w))!important}
/* buy-server modal: light platform style */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl{width:calc(440*var(--w));grid-template-columns:1fr calc(160*var(--w))!important;align-items:stretch!important;gap:calc(10*var(--w))!important;padding:calc(10*var(--w))!important;background:#fff!important;color:#0E0E10!important;box-shadow:0 0 0 1px rgba(14,14,16,.06),0 calc(24*var(--w)) calc(60*var(--w)) rgba(14,14,16,.22)!important;font-family:"Inter",system-ui,sans-serif!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl *{font-family:inherit}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-arc,#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-glow{display:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-bl{padding:calc(12*var(--w)) calc(6*var(--w)) calc(12*var(--w)) calc(12*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-plan{height:calc(26*var(--w));padding:0 calc(10*var(--w)) 0 calc(5*var(--w));background:#F5F5F6!important;box-shadow:none!important;color:#0E0E10!important;font-weight:500;font-size:calc(11*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-plan i{width:calc(17*var(--w));height:calc(17*var(--w));background:#FFC83D}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-t{margin:calc(14*var(--w)) 0 calc(14*var(--w));font-weight:500;font-size:calc(22*var(--w));letter-spacing:-.025em;color:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-in{height:calc(34*var(--w))!important;padding:0 calc(12*var(--w));border-radius:calc(10*var(--w));background:#F5F5F6!important;box-shadow:none!important;color:#0E0E10!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-in em{color:#8E919B!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-in .cr{background:#1F78F5!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-in.ty{box-shadow:inset 0 0 0 1.5px #1F78F5,0 0 0 calc(3*var(--w)) rgba(31,120,245,.14)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-ft{margin-top:calc(13*var(--w));gap:calc(8*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-ft li{color:#A0A3AC!important;font-size:calc(11.5*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-ft li i{box-shadow:inset 0 0 0 1.5px #DADBE0!important;color:#fff!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-ft li.on{color:#0E0E10!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-ft li.on i{background:#1F78F5!important;box-shadow:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-cr{height:calc(36*var(--w))!important;margin-top:calc(16*var(--w))!important;padding:0 calc(14*var(--w)) 0 calc(16*var(--w))!important;border-radius:calc(10*var(--w))!important;background:#1F78F5!important;color:#fff!important;font-weight:600!important;font-size:calc(12.5*var(--w))!important;box-shadow:0 calc(6*var(--w)) calc(14*var(--w)) rgba(31,120,245,.32)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pg{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br{width:auto;height:auto;min-height:calc(150*var(--w));border-radius:calc(14*var(--w));background:#F5F5F6}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-ring{inset:auto;left:50%;top:50%;width:calc(136*var(--w));height:calc(136*var(--w));margin:calc(-68*var(--w)) 0 0 calc(-68*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-ring text{fill:#A0A3AC}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-logo{width:calc(58*var(--w));height:calc(58*var(--w));filter:drop-shadow(0 calc(6*var(--w)) calc(12*var(--w)) rgba(31,120,245,.3))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-logo circle{fill:#1F78F5}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-logo g{stroke:#fff}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-logo .env{fill:#1F78F5;stroke:none}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:#26272d;opacity:0;pointer-events:none;transition:opacity .22s ease}
#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .isl .d7-md.bl::before,#op-case-coldsend .cs-d .cs-win.cs-win .s7d.isl .d7-md.bl::before{opacity:1}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.isl .d7-md.bl{box-shadow:0 calc(10*var(--w)) calc(28*var(--w)) rgba(14,14,16,.28)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl::after{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(14,14,16,.06)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.mg .d7-md.bl{box-shadow:0 calc(4*var(--w)) calc(10*var(--w)) rgba(14,14,16,.06)!important}

@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url(/landing/assets/fonts/satoshi-variable.ttf) format('truetype')}
#op-case-coldsend .cs-shot.cs-shot.cs-shot *:not(text):not(textPath){font-family:"Inter",system-ui,sans-serif!important}
#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .h8-brand,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .h8-cv>b.s7-num,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .h8-pc,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .h8-fk .tx b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .h8-dh b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .h8-it,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .rf-cols b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .rc-t,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .re-un .bar .br,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .re-un .pt b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .re-dr .ttl,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .re-dr .tt b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .re-dr .tt b span,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .d7-h>b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .d7-h>b u,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .d7-k b,#op-case-coldsend .cs-shot.cs-shot.cs-shot.cs-shot .d7-t{font-family:"Satoshi","Inter",system-ui,sans-serif!important}
/* island: turn black only once the modal has shrunk */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl::before{transition:none}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.isl .d7-md.bl::before{transition:opacity .2s ease .3s}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.isl .d7-isl{transition:opacity .2s ease .45s!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-isl b{font-weight:600!important}

/* segmented health bars */
@property --hp{syntax:"<percentage>";inherits:true;initial-value:0%}

#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{position:relative!important;flex:none!important;display:block;width:calc(60*var(--u))!important;height:calc(11*var(--u))!important;margin:0 calc(-2*var(--u)) 0 0!important;border-radius:0!important;overflow:visible!important;--hp:0%;background:linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#DDDFE5 var(--hp) 100%)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(3*var(--u)),transparent calc(3*var(--u)) calc(5*var(--u)));mask:repeating-linear-gradient(90deg,#000 0 calc(3*var(--u)),transparent calc(3*var(--u)) calc(5*var(--u)));transition:--hp 1.1s cubic-bezier(.2,.8,.2,1) .35s}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i::after{display:none!important}
#op-case-coldsend .cs-a.tv .cs-win.cs-win .h8-hl i{--hp:calc(var(--v)*1%)}
@supports (width:round(nearest,1px,1px)){#op-case-coldsend .cs-a.tv .cs-win.cs-win .h8-hl i{--hp:round(nearest,calc(var(--v)*1%),8.3334%)}}

#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i{position:relative!important;flex:none!important;display:block;width:calc(60*var(--w))!important;height:calc(11*var(--w))!important;margin:0 calc(-2*var(--w)) 0 0!important;border-radius:0!important;overflow:visible!important;--hp:0%;background:linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#DDDFE5 var(--hp) 100%)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(3*var(--w)),transparent calc(3*var(--w)) calc(5*var(--w)));mask:repeating-linear-gradient(90deg,#000 0 calc(3*var(--w)),transparent calc(3*var(--w)) calc(5*var(--w)));transition:--hp 1.1s cubic-bezier(.2,.8,.2,1) .35s}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i::after{display:none!important}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-hl i{--hp:calc(var(--v)*1%)}
@supports (width:round(nearest,1px,1px)){#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-hl i{--hp:round(nearest,calc(var(--v)*1%),8.3334%)}}

#op-case-coldsend .cs-c .re-un .dl .hl u{position:relative!important;flex:none!important;display:block;width:calc(60*var(--q))!important;height:calc(11*var(--q))!important;margin:0 calc(-2*var(--q)) 0 0!important;border-radius:0!important;overflow:visible!important;--hp:0%;background:linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#DDDFE5 var(--hp) 100%)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(3*var(--q)),transparent calc(3*var(--q)) calc(5*var(--q)));mask:repeating-linear-gradient(90deg,#000 0 calc(3*var(--q)),transparent calc(3*var(--q)) calc(5*var(--q)));transition:--hp 1.1s cubic-bezier(.2,.8,.2,1) .35s}
#op-case-coldsend .cs-c .re-un .dl .hl u::after{display:none!important}
#op-case-coldsend .cs-c.tv .re-un .dl .hl u{--hp:calc(var(--v)*1%)}
@supports (width:round(nearest,1px,1px)){#op-case-coldsend .cs-c.tv .re-un .dl .hl u{--hp:round(nearest,calc(var(--v)*1%),8.3334%)}}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{--hcol:var(--hc,#1F78F5)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl.y i,#op-case-coldsend .cs-c .re-un .dl .hl u.y{--hcol:#FF8A2B}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl.r i,#op-case-coldsend .cs-c .re-un .dl .hl u.r{--hcol:#F04438}

#op-case-coldsend .cs-c .re-un .dl .hl u.g,#op-case-coldsend .cs-c .re-un .dl .hl u.y,#op-case-coldsend .cs-c .re-un .dl .hl u.r,#op-case-coldsend .cs-c .re-un .dl .hl u{width:calc(48*var(--q))!important;height:calc(10*var(--q))!important;margin-right:calc(-1.5*var(--q))!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(2.5*var(--q)),transparent calc(2.5*var(--q)) calc(4*var(--q)));mask:repeating-linear-gradient(90deg,#000 0 calc(2.5*var(--q)),transparent calc(2.5*var(--q)) calc(4*var(--q)))}

#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{width:calc(48*var(--u))!important;height:calc(10*var(--u))!important;margin-right:calc(-1.5*var(--u))!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(2.5*var(--u)),transparent calc(2.5*var(--u)) calc(4*var(--u)));mask:repeating-linear-gradient(90deg,#000 0 calc(2.5*var(--u)),transparent calc(2.5*var(--u)) calc(4*var(--u)))}

#op-case-coldsend .cs-a .cs-win.cs-win .h8-r{grid-template-columns:calc(178*var(--u)) calc(140*var(--u)) calc(108*var(--u)) calc(176*var(--u)) calc(92*var(--u)) 1fr!important}

/* health bars v2: rounded, filled, striped inside */
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{height:calc(8*var(--u))!important;margin-right:0!important;border-radius:99px!important;overflow:hidden!important;-webkit-mask:none!important;mask:none!important;background:repeating-linear-gradient(90deg,transparent 0 calc(2.8*var(--u)),rgba(255,255,255,.55) calc(2.8*var(--u)) calc(4.0*var(--u))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#E4E6EB var(--hp) 100%)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i{height:calc(8*var(--w))!important;margin-right:0!important;border-radius:99px!important;overflow:hidden!important;-webkit-mask:none!important;mask:none!important;background:repeating-linear-gradient(90deg,transparent 0 calc(3.6*var(--w)),rgba(255,255,255,.55) calc(3.6*var(--w)) calc(5.0*var(--w))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#E4E6EB var(--hp) 100%)!important}
#op-case-coldsend .cs-c .re-un .dl .hl u.g,#op-case-coldsend .cs-c .re-un .dl .hl u.y,#op-case-coldsend .cs-c .re-un .dl .hl u.r,#op-case-coldsend .cs-c .re-un .dl .hl u{height:calc(8*var(--q))!important;margin-right:0!important;border-radius:99px!important;overflow:hidden!important;-webkit-mask:none!important;mask:none!important;background:repeating-linear-gradient(90deg,transparent 0 calc(2.8*var(--q)),rgba(255,255,255,.55) calc(2.8*var(--q)) calc(4.0*var(--q))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#E4E6EB var(--hp) 100%)!important}

#op-case-coldsend .cs-a .cs-win.cs-win .h8-ch.k1 .h8-cv>b.s7-num{font-weight:500!important;letter-spacing:-.03em!important}

/* health bars v3: slanted white stripes */
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{background:repeating-linear-gradient(115deg,transparent 0 calc(2.6*var(--u)),rgba(255,255,255,.6) calc(2.6*var(--u)) calc(3.8*var(--u))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#E4E6EB var(--hp) 100%)!important;background-size:var(--hp) 100%,100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i{background:repeating-linear-gradient(115deg,transparent 0 calc(3.2*var(--w)),rgba(255,255,255,.6) calc(3.2*var(--w)) calc(4.6*var(--w))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#E4E6EB var(--hp) 100%)!important;background-size:var(--hp) 100%,100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-c .re-un .dl .hl u.g,#op-case-coldsend .cs-c .re-un .dl .hl u.y,#op-case-coldsend .cs-c .re-un .dl .hl u.r,#op-case-coldsend .cs-c .re-un .dl .hl u{background:repeating-linear-gradient(115deg,transparent 0 calc(2.6*var(--q)),rgba(255,255,255,.6) calc(2.6*var(--q)) calc(3.8*var(--q))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),#E4E6EB var(--hp) 100%)!important;background-size:var(--hp) 100%,100% 100%!important;background-repeat:no-repeat!important}

/* ===== ColdSend UI consistency pass ===== */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-buy i{display:grid;place-items:center;width:calc(18*var(--w));height:calc(18*var(--w));margin-right:calc(-5*var(--w));border-radius:calc(6*var(--w));background:rgba(255,255,255,.2);font-size:calc(13*var(--w));line-height:1}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-r b.h8-dn,#op-case-coldsend .cs-d .cs-win.cs-win .d7-r>b,#op-case-coldsend .cs-c .re-un .dl .d>b{font-weight:600!important;color:#0E0E10!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-r,#op-case-coldsend .cs-d .cs-win.cs-win .d7-r{color:#6B6F7B!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-find,#op-case-coldsend .cs-d .cs-win.cs-win .d7-se{font-weight:400!important;color:#8E919B!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-mo{color:#A0A3AC!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl{font-size:0!important;gap:calc(8*var(--u))!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl b{font-size:calc(12*var(--u))!important;font-weight:600!important;color:#0E0E10!important}

/* spacing pass */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-mo,#op-case-coldsend .cs-d .cs-win.cs-win .d7-mo svg{color:#A0A3AC!important;stroke:#A0A3AC!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-bl{align-self:center;padding:calc(12*var(--w)) calc(8*var(--w)) calc(12*var(--w)) calc(16*var(--w))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col > i{height:calc(71*var(--q))!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-dom{padding-top:calc(20*var(--u))!important}

/* servers scene v2: rows cascade in, new server provisions live, KPIs tick */
@keyframes d7in{from{opacity:0;translate:0 calc(14*var(--w))}to{opacity:1;translate:0 0}}
@keyframes d7kp{0%{scale:1}35%{scale:1.07;box-shadow:0 0 0 calc(3*var(--w)) rgba(31,120,245,.16)}100%{scale:1}}
@keyframes d7lit{0%{box-shadow:0 0 0 calc(2*var(--w)) rgba(31,120,245,.55),0 calc(8*var(--w)) calc(22*var(--w)) rgba(31,120,245,.18)}100%{box-shadow:0 0 0 calc(2*var(--w)) rgba(31,120,245,0),0 0 0 rgba(31,120,245,0)}}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r:not(.nw){animation:d7in .6s cubic-bezier(.2,.8,.2,1) backwards}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r1{animation-delay:0.22s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r2{animation-delay:0.29s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r3{animation-delay:0.36s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r4{animation-delay:0.43s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r5{animation-delay:0.50s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r6{animation-delay:0.57s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-r.r7{animation-delay:0.64s}

#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-k .k{animation:d7in .55s cubic-bezier(.2,.8,.2,1) backwards}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-k .k:nth-child(2){animation-delay:.08s}
#op-case-coldsend .cs-d.tv .cs-win.cs-win .d7-k .k:nth-child(3){animation-delay:.16s}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k.kp{animation:d7kp .6s cubic-bezier(.3,1.4,.5,1)!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.nw.lit{animation:d7lit 1.6s ease-out both}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.nw .d7-ip,#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.nw .d7-hl b{font-variant-numeric:tabular-nums}

#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i,#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i.g,#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i.b,#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i.d,#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k:first-child i{box-shadow:none!important;filter:none!important}
#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i::before,#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i::after{display:none!important}

#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .d7-k .k i svg{width:calc(18*var(--w))!important;height:calc(18*var(--w))!important}

/* buy-server modal v3: grows from the button, plan → name → live provisioning log */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-grow{position:absolute;inset:0;z-index:5;border-radius:inherit;background:#1F78F5;opacity:0;pointer-events:none}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-buy{transition:opacity .2s ease}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.md .d7-buy{opacity:0}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-t{margin:0 0 calc(14*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(6*var(--w));margin-bottom:calc(8*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl .p{display:flex;flex-direction:column;justify-content:center;gap:calc(4*var(--w));height:calc(44*var(--w));padding:0 calc(10*var(--w));border-radius:calc(10*var(--w));background:#F5F5F6;box-shadow:inset 0 0 0 1.5px transparent;transition:background-color .25s ease,box-shadow .25s ease,scale .2s ease}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl .p em{font-style:normal;font-size:calc(9.5*var(--w));color:#8E919B;line-height:1}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl .p b{font-size:calc(13*var(--w));font-weight:600;color:#0E0E10;line-height:1;letter-spacing:-.01em}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl .p.on{background:#fff;box-shadow:inset 0 0 0 1.5px #1F78F5,0 calc(4*var(--w)) calc(12*var(--w)) rgba(31,120,245,.16)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl .p.on em{color:#1F78F5}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-pl .p.press{scale:.95}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-rgn{margin-top:calc(8*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-rgn svg{width:calc(13*var(--w));height:calc(13*var(--w));margin-left:auto;color:#8E919B}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-cr{margin-top:calc(14*var(--w))!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br{overflow:hidden}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-ring{transition:opacity .3s ease}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-br .e9-logo{transition:top .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.lg .d7-md.bl .d7-br .e9-ring{opacity:0}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.lg .d7-md.bl .d7-br .e9-logo{top:calc(46*var(--w));width:calc(40*var(--w));height:calc(40*var(--w))}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg{position:absolute;left:calc(14*var(--w));right:calc(14*var(--w));top:calc(86*var(--w));bottom:calc(14*var(--w));display:flex;flex-direction:column;gap:calc(11*var(--w));opacity:0;translate:0 calc(8*var(--w));transition:opacity .3s ease,translate .4s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .cs-d .cs-win.cs-win .s7d.lg .d7-md.bl .d7-lg{opacity:1;translate:0 0;transition-delay:.15s}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l{display:flex;align-items:center;gap:calc(7*var(--w));font-size:calc(9.5*var(--w));font-weight:500;color:#A0A3AC;white-space:nowrap;transition:color .25s ease}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l u{text-decoration:none}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l i{display:grid;place-items:center;flex:none;width:calc(14*var(--w));height:calc(14*var(--w));border-radius:50%;border:1.5px solid #DADBE0;color:#fff;transition:background-color .25s ease,border-color .25s ease,scale .35s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l i svg{width:calc(8*var(--w));height:calc(8*var(--w));opacity:0;transition:opacity .2s ease}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l.on{color:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l.on i{border-color:#DADBE0;border-top-color:#1F78F5;animation:e9spin .7s linear infinite}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l.ok{color:#0E0E10}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l.ok i{background:#1F78F5;border-color:#1F78F5;scale:1.1}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lg .l.ok i svg{opacity:1}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lp{margin-top:auto;display:grid;grid-template-columns:1fr auto;row-gap:calc(6*var(--w));align-items:baseline;--hp:0%;transition:--hp .42s cubic-bezier(.3,.7,.2,1)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lp em{font-style:normal;font-size:calc(9*var(--w));color:#8E919B}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lp b{font-family:"Satoshi","Inter",system-ui,sans-serif!important;font-size:calc(11*var(--w));font-weight:600;color:#0E0E10;font-variant-numeric:tabular-nums}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lp i{grid-column:1/-1;height:calc(8*var(--w));border-radius:99px;background:repeating-linear-gradient(115deg,transparent 0 calc(3.2*var(--w)),rgba(255,255,255,.6) calc(3.2*var(--w)) calc(4.6*var(--w))),linear-gradient(90deg,#1F78F5 0 var(--hp),#E1E3E8 var(--hp) 100%);background-size:var(--hp) 100%,100% 100%;background-repeat:no-repeat}

/* servers scene v3: fix a failed server before buying a new one */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r{transition:box-shadow .3s ease,scale .3s cubic-bezier(.2,.8,.2,1)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.hv{box-shadow:0 0 0 1.5px rgba(240,68,56,.35),0 calc(8*var(--w)) calc(20*var(--w)) rgba(14,14,16,.08)!important;scale:1.006;z-index:2;position:relative}
@keyframes d7fx{0%{box-shadow:0 0 0 calc(2*var(--w)) rgba(16,185,106,.5)}100%{box-shadow:0 0 0 calc(2*var(--w)) rgba(16,185,106,0)}}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-r.fx{animation:d7fx 1.4s ease-out}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-st.fail .s7-sp{display:none}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-tip{position:absolute;z-index:9;display:flex;align-items:center;gap:calc(10*var(--w));margin:calc(6*var(--w)) 0 0 calc(-4*var(--w));padding:calc(5*var(--w)) calc(5*var(--w)) calc(5*var(--w)) calc(12*var(--w));border-radius:calc(12*var(--w));background:#26272d;color:rgba(255,255,255,.7);font-size:calc(10.5*var(--w));white-space:nowrap;box-shadow:0 calc(10*var(--w)) calc(26*var(--w)) rgba(14,14,16,.28);opacity:0;translate:0 calc(-6*var(--w));scale:.94;transform-origin:calc(20*var(--w)) 0;pointer-events:none;transition:opacity .25s ease,translate .35s cubic-bezier(.3,1.4,.5,1),scale .35s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-tip.on{opacity:1;translate:0 0;scale:1}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-tip em{font-style:normal}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-tip b{display:inline-flex;align-items:center;gap:calc(5*var(--w));height:calc(24*var(--w));padding:0 calc(10*var(--w)) 0 calc(8*var(--w));border-radius:calc(8*var(--w));background:#1F78F5;color:#fff;font-weight:600;font-size:calc(10.5*var(--w));transition:scale .15s ease}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-tip b.press{scale:.94}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-tip svg{width:calc(11*var(--w));height:calc(11*var(--w))}

/* domains drawer v2: search → check → add, twice; striped DNS bar */
@keyframes rePg{to{width:100%}}
@keyframes rePp{0%{scale:.8}55%{scale:1.1}100%{scale:1}}
#op-case-coldsend .cs-c .re-dr .ttl{min-height:calc(15*var(--q))}
#op-case-coldsend .cs-c .re-dr .ttl.ty::after{content:"";display:inline-block;width:1.5px;height:calc(13*var(--q));margin-left:calc(1.5*var(--q));vertical-align:calc(-1.5*var(--q));background:#1F78F5;animation:c7bl .9s steps(1) infinite}
#op-case-coldsend .cs-c .re-dr .chip{transition:background-color .25s ease,color .25s ease}
#op-case-coldsend .cs-c .re-dr .chip.ck{background:#F1F1F4!important;color:#8E919B!important}
#op-case-coldsend .cs-c .re-dr .chip.ck svg{display:none}
#op-case-coldsend .cs-c .re-dr .chip.pp{animation:rePp .4s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .cs-c .re-dr .re-cn.bp{animation:rePp .4s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .cs-c .re-dr .pg{height:calc(6*var(--q))!important;background:#E4E6EB!important}
#op-case-coldsend .cs-c .re-dr .pg u{transform:none!important;width:0;background:repeating-linear-gradient(115deg,transparent 0 calc(2.6*var(--q)),rgba(255,255,255,.6) calc(2.6*var(--q)) calc(3.8*var(--q))),#1F78F5!important}
#op-case-coldsend .cs-c .re.go .re-dr .pg u{animation-name:rePg!important}
#op-case-coldsend .cs-c .re.go .i2{animation-delay:5.7s!important}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn{animation-delay:6.2s!important}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn .a{animation-delay:7.7s!important}
#op-case-coldsend .cs-c .re.go .re-dr .re-btn .b{animation-delay:7.8s!important}

#op-case-coldsend .cs-c .re .re-dr .tt{padding-top:calc(13*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .pr{height:calc(15.5*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .ct{margin-top:calc(7*var(--q))!important;padding-top:calc(8*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .it{height:calc(22*var(--q))!important}

/* taller feature tiles (400x384) so the drawer and cards can breathe */
#op-case-coldsend .cs-row .cs-b.cs-b,#op-case-coldsend .cs-row .cs-c.cs-c{aspect-ratio:400/384!important}
#op-case-coldsend .cs-c .re .re-in{height:calc(384*var(--q))!important}
#op-case-coldsend .cs-c .re .re-win{height:calc(332*var(--q))!important}
#op-case-coldsend .cs-b .rc .rc-in{height:calc(384*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf.rf{height:calc(340*var(--q))!important;grid-template-rows:calc(166*var(--q)) 1fr!important}
#op-case-coldsend .cs-b .rc .rf-cols .col > i{height:calc(84*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr{padding:calc(15*var(--q)) calc(14*var(--q)) calc(14*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .ttl{margin:calc(10*var(--q)) 0 calc(8*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .pr{height:calc(17*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .ct{margin-top:calc(9*var(--q))!important;padding-top:calc(10*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .it{height:calc(24*var(--q))!important;margin-top:calc(6*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .tt{padding-top:calc(16*var(--q))!important}
#op-case-coldsend .cs-c .re .re-dr .re-btn{height:calc(29*var(--q))!important;margin-top:calc(10*var(--q))!important}

/* setup tile v5: roomier cards, steps tied to one timeline */
#op-case-coldsend .cs-b .rc .rf.rf{grid-template-rows:calc(172*var(--q)) 1fr!important}
#op-case-coldsend .cs-b .rc .rf-c{padding:calc(16*var(--q)) calc(16*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols{margin-top:calc(10*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-cols .col > i{height:calc(82*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-av{left:calc(14*var(--q))!important;right:calc(14*var(--q))!important;bottom:calc(14*var(--q))!important}
#op-case-coldsend .cs-b .rc .rf-arc{bottom:calc(6*var(--q))!important}
@keyframes rfBp{0%{scale:1}40%{scale:1.35}100%{scale:1}}
@keyframes rfBst{0%{box-shadow:0 0 0 0 rgba(16,185,106,.45)}100%{box-shadow:0 0 0 calc(10*var(--q)) rgba(16,185,106,0)}}
@keyframes rfSh{0%{translate:-120% 0}100%{translate:220% 0}}
@keyframes rfKn{0%,100%{stroke-width:3}50%{stroke-width:5}}
#op-case-coldsend .cs-b .rc .rc-d,#op-case-coldsend .cs-b .rc .rc-n{display:inline-block;font-variant-numeric:tabular-nums}
#op-case-coldsend .cs-b .rc .rc-d.bp,#op-case-coldsend .cs-b .rc .rc-n.bp{animation:rfBp .35s cubic-bezier(.3,1.4,.5,1)}
#op-case-coldsend .cs-b .rc.go .rf-arc .p{animation:none!important}
#op-case-coldsend .cs-b .rc .rf-arc .kn,#op-case-coldsend .cs-b .rc.go .rf-arc .kn{opacity:1!important;animation:none!important}
#op-case-coldsend .cs-b .rc.rdy .rf-arc .kn{animation:rfKn 1.6s ease-in-out infinite!important}
#op-case-coldsend .cs-b .rc .rf-cols .col span{transition:color .3s ease,font-weight .3s ease}
#op-case-coldsend .cs-b .rc .rf-cols .col.lit span{color:#0E0E10;font-weight:600}
#op-case-coldsend .cs-b .rc .rf-cols .col > i::after{content:"";position:absolute;inset:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);translate:-120% 0;pointer-events:none}
#op-case-coldsend .cs-b .rc.rdy .rf-cols .col > i::after{animation:rfSh 1.1s ease-out both}
#op-case-coldsend .cs-b .rc.rdy .rf-cols .c2 > i::after{animation-delay:.12s}
#op-case-coldsend .cs-b .rc.rdy .rf-cols .c3 > i::after{animation-delay:.24s}
#op-case-coldsend .cs-b .rc.rdy .rf-cols .c4 > i::after{animation-delay:.36s}
#op-case-coldsend .cs-b .rc.go .rf-cols .c2 u{animation-delay:1.7s!important}
#op-case-coldsend .cs-b .rc.go .rf-cols .c3 u{animation-delay:2.5s!important}
#op-case-coldsend .cs-b .rc.go .rf-cols .c4 u{animation-delay:3.5s!important}
#op-case-coldsend .cs-b .rc.go .rf-av i{animation:none!important}
#op-case-coldsend .cs-b .rc .rf-av i{transition:opacity .25s ease,transform .4s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .cs-b .rc .rf-av i.in{opacity:1!important;transform:none!important}
#op-case-coldsend .cs-b .rc.go .rc-st i,#op-case-coldsend .cs-b .rc.go .rc-st .a,#op-case-coldsend .cs-b .rc.go .rc-st .b{animation:none!important}
#op-case-coldsend .cs-b .rc .rc-st i,#op-case-coldsend .cs-b .rc .rc-st .a,#op-case-coldsend .cs-b .rc .rc-st .b{transition:opacity .3s ease}
#op-case-coldsend .cs-b .rc .rc-st .a{display:inline-flex;align-items:center;gap:calc(6*var(--q))}
#op-case-coldsend .cs-b .rc .rc-st .a::before{content:"";width:calc(9*var(--q));height:calc(9*var(--q));border-radius:50%;border:1.5px solid #C9CBD2;border-top-color:#1F78F5;animation:e9spin .8s linear infinite}
#op-case-coldsend .cs-b .rc.rdy .rc-st i{opacity:1}
#op-case-coldsend .cs-b .rc.rdy .rc-st .a{opacity:0}
#op-case-coldsend .cs-b .rc.rdy .rc-st .b{opacity:1}
#op-case-coldsend .cs-b .rc .rc-st.bst{animation:rfBst .9s ease-out}

#op-case-coldsend .cs-b .rc .rf-time > b .rc-t{font-weight:500!important;letter-spacing:-.03em}

#op-case-coldsend .cs-b .rc .rf-av i{display:flex!important;align-items:center;justify-content:center;font-style:normal;line-height:1!important;text-align:center;letter-spacing:0;padding:0}

/* dashboard pass: solid KPI stack, range switch morphs the bars, new row health fills on verify */
#op-case-coldsend .cs-a .cs-win.cs-win .h8-ch.k2,#op-case-coldsend .cs-a .cs-win.cs-win .h8-ch.k3,#op-case-coldsend .cs-a .cs-win.cs-win .h8-fk{background:rgba(255,255,255,.88)!important}


#op-case-coldsend .cs-a .cs-win.cs-win :is(.h8-ch.k2,.h8-ch.k3) .h8-cv .s7-num.s7-num{font-weight:500!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-bc > i s{transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--k) * 45ms + .3s),background .3s ease,height .7s cubic-bezier(.3,1.4,.5,1) calc(var(--k) * 30ms)!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-rng i{transition:scale .15s ease,background-color .3s ease,color .3s ease}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-rng i.press{scale:.94}
#op-case-coldsend .cs-a .cs-win.cs-win .h8-rng i.sw{background:#26272d!important;color:#fff!important}
#op-case-coldsend .cs-a .cs-win.cs-win .h8:not(.nw2) .h8-r.nw .h8-hl{--v:0!important}

#op-case-coldsend .cs-a .cs-win.cs-win.cs-win .h8-bc > i{background:repeating-linear-gradient(135deg,#E6E7EC 0 calc(1.6*var(--u)),#F4F4F7 calc(1.6*var(--u)) calc(4.6*var(--u)))!important}

/* progress bars v4: hatched grey track, striped colour fill */
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{background:repeating-linear-gradient(115deg,transparent 0 calc(2.6*var(--u)),rgba(255,255,255,.6) calc(2.6*var(--u)) calc(3.8*var(--u))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--u)),#EEEFF2 calc(1*var(--u)) calc(3*var(--u)))!important;background-size:var(--hp) 100%,100% 100%,100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i{background:repeating-linear-gradient(115deg,transparent 0 calc(3.2*var(--w)),rgba(255,255,255,.6) calc(3.2*var(--w)) calc(4.6*var(--w))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--w)),#EEEFF2 calc(1*var(--w)) calc(3*var(--w)))!important;background-size:var(--hp) 100%,100% 100%,100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-c .re-un .dl .hl u.g,#op-case-coldsend .cs-c .re-un .dl .hl u.y,#op-case-coldsend .cs-c .re-un .dl .hl u.r,#op-case-coldsend .cs-c .re-un .dl .hl u{background:repeating-linear-gradient(115deg,transparent 0 calc(2.6*var(--q)),rgba(255,255,255,.6) calc(2.6*var(--q)) calc(3.8*var(--q))),linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--q)),#EEEFF2 calc(1*var(--q)) calc(3*var(--q)))!important;background-size:var(--hp) 100%,100% 100%,100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lp i{background:repeating-linear-gradient(115deg,transparent 0 calc(3.2*var(--w)),rgba(255,255,255,.6) calc(3.2*var(--w)) calc(4.6*var(--w))),linear-gradient(90deg,#1F78F5 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--w)),#EEEFF2 calc(1*var(--w)) calc(3*var(--w)))!important;background-size:var(--hp) 100%,100% 100%,100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-c .re .re-dr .pg{background:repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--q)),#EEEFF2 calc(1*var(--q)) calc(3*var(--q)))!important}

/* progress bars v5: solid colour fill, hatched grey track */
#op-case-coldsend .cs-a .cs-win.cs-win .h8-hl i{background:linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--u)),#EEEFF2 calc(1*var(--u)) calc(3*var(--u)))!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-hl i{background:linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--w)),#EEEFF2 calc(1*var(--w)) calc(3*var(--w)))!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-c .re-un .dl .hl u.g,#op-case-coldsend .cs-c .re-un .dl .hl u.y,#op-case-coldsend .cs-c .re-un .dl .hl u.r,#op-case-coldsend .cs-c .re-un .dl .hl u{background:linear-gradient(90deg,var(--hcol,#1F78F5) 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--q)),#EEEFF2 calc(1*var(--q)) calc(3*var(--q)))!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-md.bl .d7-lp i{background:linear-gradient(90deg,#1F78F5 0 var(--hp),transparent var(--hp) 100%),repeating-linear-gradient(135deg,#D3D5DC 0 calc(1*var(--w)),#EEEFF2 calc(1*var(--w)) calc(3*var(--w)))!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-c .re .re-dr .pg u{background:#1F78F5!important}

/* workspace avatar: Halcyon logo mark instead of an initial */
#op-case-coldsend .cs-shot.cs-shot .cs-win.cs-win .h8-usr > i,#op-case-coldsend .cs-c.cs-c .re-un .bar .ust > i{font-size:0!important;color:transparent!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M6.3 13.2a5.7 5.7 0 0 1 11.4 0z' fill='%230E0E10'/%3E%3Crect x='4.8' y='15.2' width='14.4' height='2.3' rx='1.15' fill='%230E0E10'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;box-shadow:none!important}

#op-case-coldsend .cs-a .cs-win.cs-win.cs-win .h8-find{font-size:calc(11*var(--u))!important}
#op-case-coldsend .cs-a .cs-win.cs-win.cs-win .h8-find svg{width:calc(13*var(--u))!important;height:calc(13*var(--u))!important}

#op-case-coldsend .cs-c .re.re .re-dr .pr{height:calc(20*var(--q))!important}
#op-case-coldsend .cs-c .re.re .re-dr .tt{padding-top:calc(12*var(--q))!important}

#op-case-coldsend .cs-c .re.re .re-dr .pr{height:calc(19.5*var(--q))!important}
#op-case-coldsend .cs-c .re.re .re-dr .ttl{margin:calc(8*var(--q)) 0 calc(7*var(--q))!important}
#op-case-coldsend .cs-c .re.re .re-dr .ct{margin-top:calc(8*var(--q))!important;padding-top:calc(9*var(--q))!important}
#op-case-coldsend .cs-c .re.re .re-dr .it{height:calc(23*var(--q))!important;margin-top:calc(5*var(--q))!important}
#op-case-coldsend .cs-c .re.re .re-dr .tt{padding-top:calc(16*var(--q))!important}
#op-case-coldsend .cs-c .re.re .re-dr .re-btn{margin-top:calc(9*var(--q))!important}

/* mailbox avatars: logo marks instead of initials */
#op-case-coldsend .cs-b .rc.rc .rf-av i:not(.m){font-size:0!important;color:transparent!important;background-color:#fff!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
#op-case-coldsend .cs-b .rc.rc .rf-av i:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3 13.2a5.7 5.7 0 0 1 11.4 0z' fill='%230E0E10'/%3E%3Crect x='4.8' y='15.2' width='14.4' height='2.3' rx='1.15' fill='%230E0E10'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc .rf-av i:nth-child(2){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9.4' cy='12' r='4.3' fill='none' stroke='%230E0E10' stroke-width='2.2'/%3E%3Ccircle cx='14.6' cy='12' r='4.3' fill='none' stroke='%230E0E10' stroke-width='2.2'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc .rf-av i:nth-child(3){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='5.2' height='5.2' rx='1.6' fill='%230E0E10'/%3E%3Crect x='12.8' y='6' width='5.2' height='5.2' rx='2.6' fill='%230E0E10'/%3E%3Crect x='6' y='12.8' width='5.2' height='5.2' rx='2.6' fill='%230E0E10'/%3E%3Crect x='12.8' y='12.8' width='5.2' height='5.2' rx='1.6' fill='%230E0E10'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc .rf-av i:nth-child(4){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.2 18 17H6z' fill='none' stroke='%230E0E10' stroke-width='2.3' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13.6' r='1.5' fill='%230E0E10'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc .rf-av i:nth-child(5){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%230E0E10' transform='rotate(-35 12 12)'%3E%3Crect x='5.5' y='7' width='13' height='2.6' rx='1.3'/%3E%3Crect x='5.5' y='10.7' width='13' height='2.6' rx='1.3'/%3E%3Crect x='5.5' y='14.4' width='8' height='2.6' rx='1.3'/%3E%3C/g%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc .rf-av i.m{background:rgba(255,255,255,.16)!important;color:#fff!important}

/* mailbox logo marks in colour */
#op-case-coldsend .cs-b .rc.rc.rc .rf-av i:nth-child(1){background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3 13.2a5.7 5.7 0 0 1 11.4 0z' fill='%230E0E10'/%3E%3Crect x='4.8' y='15.2' width='14.4' height='2.3' rx='1.15' fill='%230E0E10'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc.rc .rf-av i:nth-child(2){background-color:#1F78F5!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9.4' cy='12' r='4.3' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Ccircle cx='14.6' cy='12' r='4.3' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc.rc .rf-av i:nth-child(3){background-color:#FFC83D!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='5.2' height='5.2' rx='1.6' fill='%230E0E10'/%3E%3Crect x='12.8' y='6' width='5.2' height='5.2' rx='2.6' fill='%230E0E10'/%3E%3Crect x='6' y='12.8' width='5.2' height='5.2' rx='2.6' fill='%230E0E10'/%3E%3Crect x='12.8' y='12.8' width='5.2' height='5.2' rx='1.6' fill='%230E0E10'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc.rc .rf-av i:nth-child(4){background-color:#10B96A!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.2 18 17H6z' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13.6' r='1.5' fill='%23fff'/%3E%3C/svg%3E")!important}
#op-case-coldsend .cs-b .rc.rc.rc .rf-av i:nth-child(5){background-color:#7C6CF2!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff' transform='rotate(-35 12 12)'%3E%3Crect x='5.5' y='7' width='13' height='2.6' rx='1.3'/%3E%3Crect x='5.5' y='10.7' width='13' height='2.6' rx='1.3'/%3E%3Crect x='5.5' y='14.4' width='8' height='2.6' rx='1.3'/%3E%3C/g%3E%3C/svg%3E")!important}

/* mobile pass: drawer rows keep their scale; servers shows the full window in the device like the dashboard */
@media (max-width:600px){
#op-case-coldsend .cs-c .re.re .re-dr .ct,#op-case-coldsend .cs-c .re.re .re-dr .tt,#op-case-coldsend .cs-c .re.re .re-dr .tp{line-height:1.3!important}
#op-case-coldsend .cs-a .cs-win.cs-win,#op-case-coldsend .cs-d .cs-win.cs-win{aspect-ratio:auto!important;height:auto!important;border-radius:calc(1.6cqw + 6px)!important;padding:calc(.25cqw + 3px)!important}
#op-case-coldsend .cs-a .cs-win.cs-win::after{border:calc(.25cqw + 3px) solid #0E0E10!important}
#op-case-coldsend .cs-a .cs-win.cs-win::before{right:calc(.25cqw + 3px)!important;bottom:calc(.25cqw + 3px)!important;border-radius:calc(1.3cqw + 3px)!important}
#op-case-coldsend .cs-a .cs-win.cs-win .cs-bar{border-radius:calc(1.3cqw + 3px) calc(1.3cqw + 3px) 0 0!important}
#op-case-coldsend .cs-a .cs-win.cs-win .cs-scr{border-radius:0 0 calc(1.3cqw + 3px) calc(1.3cqw + 3px)!important}
#op-case-coldsend .cs-row .cs-d.cs-d{aspect-ratio:386/292!important}
#op-case-coldsend .cs-d .cs-win.cs-win{--cw:92cqw!important;--cx:4cqw!important;--cy:6.5cqw!important}
}@media (min-width:481px) and (max-width:600px){
#op-case-coldsend .cs-d .cs-win.cs-win .cs-scr{transform:none!important}
}
@media (max-width:480px){
#op-case-coldsend .cs-row .cs-a.cs-a,#op-case-coldsend .cs-row .cs-d.cs-d{aspect-ratio:386/400!important}
#op-case-coldsend .cs-a .cs-win.cs-win,#op-case-coldsend .cs-d .cs-win.cs-win{--cw:176cqw!important;--cx:6cqw!important;--cy:7cqw!important;border-radius:calc(3cqw + 6px)!important;padding:calc(.5cqw + 3px)!important}
#op-case-coldsend .cs-a .cs-win.cs-win .cs-scr,#op-case-coldsend .cs-d .cs-win.cs-win .cs-scr{transition:transform 1s cubic-bezier(.65,0,.25,1)!important}
}


/* ===== ColdSend cover v2: tablet shows the new light dashboard, two floating cards ===== */
.gx-csref .gx-asm{display:none!important}
.gx-csref .gx-nu{position:absolute;left:0;right:0;top:7%;bottom:0;z-index:2;overflow:hidden;background:#fff;container-type:inline-size;pointer-events:none;font-family:"Inter",system-ui,sans-serif;color:#0E0E10}
.gx-nu .nu{--n:calc(100cqw/480);position:absolute;inset:0;display:flex;flex-direction:column;line-height:1}
.gx-nu .nb{display:flex;align-items:center;flex:none;height:calc(26*var(--n));margin:calc(8*var(--n)) calc(8*var(--n)) 0;padding:0 calc(5*var(--n)) 0 calc(10*var(--n));border-radius:calc(10*var(--n));background:#26272d;color:#fff}
.gx-nu .nb b{display:flex;align-items:center;gap:calc(4*var(--n));font:600 calc(8.5*var(--n))/1 "Satoshi","Inter",sans-serif;letter-spacing:-.01em}
.gx-nu .nb b svg{width:calc(9*var(--n));height:calc(9*var(--n))}
.gx-nu .nb span{display:flex;gap:calc(2*var(--n));margin:0 auto;font-size:calc(6*var(--n));color:rgba(255,255,255,.6)}
.gx-nu .nb span i{font-style:normal;display:grid;place-items:center;height:calc(16*var(--n));padding:0 calc(7*var(--n));border-radius:calc(6*var(--n))}
.gx-nu .nb span i.on{background:#fff;color:#0E0E10;font-weight:600}
.gx-nu .nb u{display:flex;align-items:center;gap:calc(4*var(--n));height:calc(17*var(--n));padding:0 calc(7*var(--n)) 0 calc(3*var(--n));border-radius:calc(6*var(--n));background:rgba(255,255,255,.12);text-decoration:none;font-size:calc(6*var(--n));font-weight:500}
.gx-nu .nb u i{width:calc(11*var(--n));height:calc(11*var(--n));border-radius:calc(3.5*var(--n));background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3 13.2a5.7 5.7 0 0 1 11.4 0z' fill='%230E0E10'/%3E%3Crect x='4.8' y='15.2' width='14.4' height='2.3' rx='1.15' fill='%230E0E10'/%3E%3C/svg%3E") center/100% no-repeat}
.gx-nu .nh{position:relative;flex:none;padding:calc(12*var(--n)) calc(18*var(--n)) 0}
.gx-nu .nh em{display:block;font-style:normal;font-size:calc(6.5*var(--n));color:#8E919B}
.gx-nu .nh strong{display:inline-block;margin-top:calc(5*var(--n));font:500 calc(36*var(--n))/1 "Satoshi","Inter",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gx-nu .nh small{display:inline-flex;align-items:center;gap:calc(2*var(--n));margin-left:calc(5*var(--n));vertical-align:top;margin-top:calc(8*var(--n));font-size:calc(6*var(--n));font-weight:600;color:#10B96A}
.gx-nu .nh small::before{content:"";width:calc(7*var(--n));height:calc(7*var(--n));border-radius:50%;background:#10B96A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/70% no-repeat}
.gx-nu .nk{position:absolute;z-index:3;right:calc(14*var(--n));top:calc(44*var(--n));width:calc(104*var(--n));border-radius:calc(9*var(--n));background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(16,16,20,.05),0 calc(6*var(--n)) calc(16*var(--n)) rgba(16,16,20,.1);padding:calc(7*var(--n)) calc(9*var(--n))}
.gx-nu .nk div+div{margin-top:calc(6*var(--n));padding-top:calc(6*var(--n));border-top:1px solid #EEEEF1}
.gx-nu .nk em{display:block;font-style:normal;font-size:calc(5.5*var(--n));color:#8E919B}
.gx-nu .nk b{display:flex;align-items:center;gap:calc(4*var(--n));margin-top:calc(3*var(--n));font:500 calc(14*var(--n))/1 "Satoshi","Inter",sans-serif;letter-spacing:-.02em}
.gx-nu .nk b i{font:600 calc(5.5*var(--n))/1 "Inter",sans-serif;font-style:normal;height:calc(10*var(--n));display:inline-grid;place-items:center;padding:0 calc(4*var(--n));border-radius:99px;background:#E8F1FE;color:#1F78F5;letter-spacing:0}
.gx-nu .nk b i.o{background:rgba(255,138,43,.14);color:#E06A10}
.gx-nu .nc{flex:1;min-height:0;display:flex;align-items:flex-end;gap:calc(2*var(--n));margin-top:calc(10*var(--n))}
.gx-nu .nc i{position:relative;flex:1;height:calc(var(--l)*1%);border-radius:calc(6*var(--n)) calc(6*var(--n)) 0 0;background:repeating-linear-gradient(135deg,#E6E7EC 0 calc(1*var(--n)),#F4F4F7 calc(1*var(--n)) calc(3*var(--n)))}
.gx-nu .nc i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--s)/var(--l)*100%);border-radius:inherit;background:#1F78F5;transform-origin:50% 100%;animation:nuBar 9s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--k)*50ms)}
.gx-nu .nc i.on::after{background:#0B5BD8}
.gx-nu .nc i.on::before{content:"742 sent";position:absolute;z-index:2;left:50%;bottom:calc(100% + calc(4*var(--n)));translate:-50% 0;padding:calc(4*var(--n)) calc(5*var(--n));border-radius:calc(5*var(--n));background:#26272d;color:#fff;font-size:calc(5.5*var(--n));font-weight:600;white-space:nowrap;animation:nuTip 9s ease infinite}
.gx-nu .np{flex:none;padding:calc(11*var(--n)) calc(18*var(--n)) 0;height:calc(118*var(--n));border-radius:calc(13*var(--n)) calc(13*var(--n)) 0 0;background:#F3F3F5;position:relative;z-index:2}
.gx-nu .np h5{display:flex;align-items:center;justify-content:space-between;margin:0 0 calc(8*var(--n));font:500 calc(10.5*var(--n))/1 "Satoshi","Inter",sans-serif;letter-spacing:-.01em}
.gx-nu .np h5 u{display:inline-flex;align-items:center;gap:calc(4*var(--n));height:calc(17*var(--n));padding:0 calc(5*var(--n)) 0 calc(8*var(--n));border-radius:calc(6*var(--n));background:#1F78F5;color:#fff;text-decoration:none;font:600 calc(6*var(--n))/1 "Inter",sans-serif;letter-spacing:0;box-shadow:0 calc(3*var(--n)) calc(8*var(--n)) rgba(31,120,245,.32)}
.gx-nu .np h5 u::after{content:"+";display:grid;place-items:center;width:calc(10*var(--n));height:calc(10*var(--n));border-radius:calc(3.5*var(--n));background:rgba(255,255,255,.2);font-size:calc(8*var(--n))}
.gx-nu .nr{display:grid;grid-template-columns:1.5fr 1fr 1.2fr auto;align-items:center;height:calc(25*var(--n));margin-bottom:calc(4*var(--n));padding:0 calc(9*var(--n));border-radius:calc(7*var(--n));background:#fff;font-size:calc(6.5*var(--n));color:#6B6F7B;animation:nuRow 9s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--k)*90ms)}
.gx-nu .nr b{font-weight:600;color:#0E0E10}
.gx-nu .nr s{justify-self:start;text-decoration:none;display:inline-grid;place-items:center;height:calc(12*var(--n));padding:0 calc(6*var(--n));border-radius:99px;background:#E7F7EF;color:#0E9F5C;font-size:calc(5.5*var(--n));font-weight:600}
.gx-nu .nr s.w{background:rgba(255,138,43,.13);color:#E06A10}
.gx-nu .nr u{display:block;width:calc(34*var(--n));height:calc(5*var(--n));border-radius:99px;background:linear-gradient(90deg,var(--c,#1F78F5) 0 var(--v),transparent var(--v)),repeating-linear-gradient(135deg,#D3D5DC 0 .calc(8*var(--n)),#EEEFF2 .calc(8*var(--n)) calc(2.4*var(--n)))}
.gx-nu .nr em{font-style:normal;font-weight:600;color:#0E0E10;width:calc(12*var(--n));text-align:right}
@keyframes nuBar{0%,4%{transform:scaleY(0)}16%,92%{transform:none}100%{transform:scaleY(0)}}
@keyframes nuTip{0%,22%{opacity:0;translate:-50% 3px}28%,90%{opacity:1;translate:-50% 0}100%{opacity:0}}
@keyframes nuRow{0%,10%{opacity:0;translate:0 8px}20%,93%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
/* floating cards on the tablet edges */
.gx-csref .gx-nf{position:absolute;z-index:5;display:flex;align-items:center;gap:1.8cqh;padding:1.9cqh 3cqh 1.9cqh 1.9cqh;border-radius:3.2cqh;font-family:"Inter",system-ui,sans-serif;line-height:1;white-space:nowrap;pointer-events:none;animation:nuFl 6s ease-in-out infinite}
.gx-csref .gx-nf i{display:grid;place-items:center;flex:none;width:6.4cqh;height:6.4cqh;border-radius:2cqh;background:#1F78F5;color:#fff}
.gx-csref .gx-nf i svg{width:3.2cqh;height:3.2cqh}
.gx-csref .gx-nf em{display:block;font-style:normal;font-size:2.1cqh;color:#8E919B}
.gx-csref .gx-nf b{display:block;margin-top:.9cqh;font:500 4.2cqh/1 "Satoshi","Inter",sans-serif;letter-spacing:-.02em}
.gx-csref .gx-nf.a{left:-10cqh;bottom:13cqh;background:#fff;color:#0E0E10;box-shadow:0 0 0 1px rgba(16,16,20,.05),0 3cqh 7cqh rgba(0,0,0,.45)}
.gx-csref .gx-nf.b{right:-9cqh;top:17cqh;background:#26272d;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 3cqh 7cqh rgba(0,0,0,.5);animation-delay:-3s}
.gx-csref .gx-nf.b i{background:#10B96A}
.gx-csref .gx-nf.b b{font:600 2.7cqh/1 "Inter",sans-serif;letter-spacing:0;margin-top:0}
.gx-csref .gx-nf.b em{margin-top:1cqh;color:rgba(255,255,255,.55)}
@keyframes nuFl{0%,100%{translate:0 0}50%{translate:0 -1.2cqh}}
@container (max-width:420px){.gx-csref .gx-nf{display:none}}
@media (prefers-reduced-motion:reduce){.gx-nu *,.gx-nu *::before,.gx-nu *::after,.gx-csref .gx-nf{animation:none!important}}

.gx-nu .nk{display:none}
.gx-csref .gx-nf.a{left:auto;bottom:auto;right:-10cqh;top:19cqh}
.gx-csref .gx-nf.b{right:auto;left:-11cqh;top:47cqh}

/* ColdSend cover: light (silver) device frame */
.gx-csref .gx-lap .gx-lid{background:linear-gradient(135deg,#FFFFFF,#DCDFE5 45%,#F1F2F5)!important;box-shadow:0 0 0 .25cqh #C4C8D0,inset 0 0 0 .2cqh rgba(255,255,255,.9),0 3cqh 7cqh rgba(0,0,0,.55)!important}
.gx-csref .gx-lap::before{background:#DCDFE5!important;box-shadow:0 0 0 .1cqh #C4C8D0!important}

/* ColdSend cover: light frame made readable — thicker silver bezel with a defined edge around the screen */
.gx-csref .gx-lap .gx-lid{padding:1.9cqh!important;background:linear-gradient(135deg,#F2F3F5 0%,#C3C8D1 38%,#E4E6EA 62%,#B4BAC4 100%)!important;box-shadow:0 0 0 .3cqh #9AA1AD,inset 0 0 0 .25cqh rgba(255,255,255,.85),0 3cqh 7cqh rgba(0,0,0,.6)!important}
.gx-csref .gx-lap .gx-lid .gx-scr{box-shadow:0 0 0 .28cqh #8B929E!important}

/* ColdSend cover: wider tablet, thinner and greyer frame */
.gx-csref .gx-lap{width:min(calc(80cqh * 1.6),90cqw)!important;aspect-ratio:1.6!important}
.gx-csref .gx-lap .gx-lid{padding:1.05cqh!important;background:linear-gradient(135deg,#C6CAD1 0%,#A4AAB4 40%,#BEC3CB 65%,#989EA9 100%)!important;box-shadow:0 0 0 .15cqh #7F8692,inset 0 0 0 .15cqh rgba(255,255,255,.45),0 3cqh 7cqh rgba(0,0,0,.6)!important}
.gx-csref .gx-lap .gx-lid .gx-scr{box-shadow:0 0 0 .15cqh #7F8692!important}
.gx-csref .gx-nf.a{right:-9cqh}
.gx-csref .gx-nf.b{left:-9cqh}

/* ColdSend cover: no device status bar */
.gx-csref .gx-lid .gx-scr .gx-sb{display:none!important}
.gx-csref .gx-lid .gx-scr::before{display:none!important}
.gx-csref .gx-lid .gx-scr .gx-nu{top:0!important}

/* ColdSend cover: "Ready to send" card white like the other one, clear of the panel title */
.gx-csref .gx-nf.b{background:#fff!important;color:#0E0E10!important;box-shadow:0 0 0 1px rgba(16,16,20,.05),0 3cqh 7cqh rgba(0,0,0,.45)!important;top:38cqh!important}
.gx-csref .gx-nf.b em{color:#8E919B!important}

/* ===== ColdSend cover v3: fuller rows + one 10 s story (bars, cursor adds a domain, cards pop out, shallow tilt) ===== */
.gx-nu .nr{grid-template-columns:1.6fr 1.05fr .9fr calc(40*var(--n)) calc(13*var(--n)) calc(12*var(--n))!important;column-gap:calc(5*var(--n));animation-duration:10s!important}
.gx-nu .nr span{font-size:calc(6*var(--n));color:#8E919B;white-space:nowrap}
.gx-nu .nr u{width:100%!important;background:linear-gradient(90deg,var(--c,#1F78F5) 0 var(--v),transparent var(--v)),repeating-linear-gradient(135deg,#D3D5DC 0 calc(0.8*var(--n)),#EEEFF2 calc(0.8*var(--n)) calc(2.4*var(--n)))!important}
.gx-nu .nr i{font-style:normal;text-align:right;font-size:calc(6*var(--n));letter-spacing:.5px;color:#A0A3AC}
.gx-nu .nr s{position:relative;white-space:nowrap}
.gx-nu .nr s q{quotes:none;position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:#E8F1FE;color:#1F78F5;animation:nuVer 10s linear infinite}
.gx-nu .nr.nw{overflow:hidden;animation:nuNew 10s cubic-bezier(.2,.8,.2,1) infinite!important;animation-delay:0s!important}
.gx-nu .nr.nw u,.gx-nu .nr.nw em{animation:nuRdy 10s linear infinite}
.gx-nu .nc i::after,.gx-nu .nc i.on::before{animation-duration:10s!important}
.gx-nu .nh strong{animation:nuNum 10s cubic-bezier(.2,.8,.2,1) infinite}
.gx-nu .np h5 u{animation:nuBtn 10s ease infinite}
.gx-nu .ncur{position:absolute;z-index:6;right:calc(34*var(--n));bottom:calc(86*var(--n));width:calc(11*var(--n));height:calc(11*var(--n));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L10 19z' fill='%23181B26' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:nuCur 10s cubic-bezier(.5,0,.2,1) infinite}
@keyframes nuNum{0%,5%{opacity:0;translate:0 10px}14%,93%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@keyframes nuCur{0%,29%{opacity:0;translate:calc(-160*var(--n)) calc(70*var(--n));scale:1}33%{opacity:1;translate:calc(-160*var(--n)) calc(70*var(--n))}43%{translate:0 0;scale:1}44.5%{scale:.8}46%{scale:1}56%{opacity:1;translate:0 0}62%,100%{opacity:0;translate:calc(14*var(--n)) calc(26*var(--n))}}
@keyframes nuBtn{0%,43%{scale:1}44.5%{scale:.93}46.5%,100%{scale:1}}
@keyframes nuNew{0%,46%{height:0;margin-bottom:0;opacity:0}55%,93%{height:calc(25*var(--n));margin-bottom:calc(4*var(--n));opacity:1}100%{height:calc(25*var(--n));margin-bottom:calc(4*var(--n));opacity:0}}
@keyframes nuVer{0%,66%{opacity:1}68.5%,100%{opacity:0}}
@keyframes nuRdy{0%,66%{opacity:.2}70%,100%{opacity:1}}
.gx-csref .gx-nf.a{animation:nuFl 6s ease-in-out infinite,nuPopA 10s cubic-bezier(.3,1.4,.5,1) infinite!important}
.gx-csref .gx-nf.b{animation:nuFl 6s ease-in-out -3s infinite,nuPopB 10s cubic-bezier(.3,1.4,.5,1) infinite!important}
@keyframes nuPopA{0%,19%{opacity:0;transform:translate(-7cqh,4cqh) scale(.5)}25%{opacity:1;transform:scale(1.05)}28%,93%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes nuPopB{0%,68%{opacity:0;transform:translate(9cqh,12cqh) scale(.5)}74%{opacity:1;transform:scale(1.05)}77%,93%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.gx-csref .gx-lap .gx-lid{animation:nuTilt 20s ease-in-out infinite}
@keyframes nuTilt{0%,100%{transform:perspective(260cqh) rotateX(2deg) rotateY(-4deg)}50%{transform:perspective(260cqh) rotateX(1deg) rotateY(4deg)}}
@media (prefers-reduced-motion:reduce){.gx-csref .gx-lap .gx-lid,.gx-csref .gx-nf.a,.gx-csref .gx-nf.b{animation:none!important}.gx-nu .ncur,.gx-nu .nr s q{display:none}}

/* ColdSend cover floating cards: proportions of the reference stat tiles (big rounded-square icon, label over value) */
.gx-csref .gx-nf{gap:2cqh!important;padding:1.1cqh 3.6cqh 1.1cqh 1.1cqh!important;border-radius:3cqh!important}
.gx-csref .gx-nf i{width:7.6cqh!important;height:7.6cqh!important;border-radius:2.2cqh!important}
.gx-csref .gx-nf i svg{width:3.3cqh!important;height:3.3cqh!important}
.gx-csref .gx-nf em{margin:0!important;font-size:1.95cqh!important;color:#8E919B!important}
.gx-csref .gx-nf b,.gx-csref .gx-nf.b b{margin-top:.85cqh!important;font:500 2.9cqh/1 "Satoshi","Inter",sans-serif!important;letter-spacing:-.01em!important;color:#0E0E10}
.gx-csref .gx-nf.a i{background:#1F78F5!important}
.gx-csref .gx-nf.b i{background:#5CC489!important}

/* ColdSend cover: no "add sending domain" sequence — button static, no cursor, top row behaves like the others */
.gx-nu .ncur,.gx-nu .nr s q{display:none!important}
.gx-nu .np h5 u{animation:none!important}
.gx-nu .nr.nw{overflow:visible;animation:nuRow 10s cubic-bezier(.2,.8,.2,1) infinite!important;animation-delay:0s!important}
.gx-nu .nr.nw u,.gx-nu .nr.nw em{animation:none!important}
@keyframes nuPopB{0%,36%{opacity:0;transform:translate(9cqh,12cqh) scale(.5)}42%{opacity:1;transform:scale(1.05)}45%,93%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* ColdSend cover: larger background word so it reads on both sides of the wider tablet */
.gx-csref .gx-fw{font-size:46cqh!important;bottom:-5cqh!important}

/* ===== motion polish 1: modals ease in instead of popping; ColdSend servers loop fades out fully before it resets ===== */
@keyframes opFadeIn{from{opacity:0;scale:.985}to{opacity:1;scale:1}}
@keyframes opBackIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
dialog.op[open]{animation:opFadeIn .28s cubic-bezier(.2,.8,.2,1) both}
dialog.op[open]::backdrop{animation:opBackIn .28s ease both}
}
#op-case-coldsend .cs-d .s7>.s7-main{transition:opacity .45s ease}
#op-case-coldsend .cs-d .s7.rs>.s7-main{opacity:0!important;filter:none!important}

/* motion polish 2: hero copy fades out before it is hidden (visibility waited for nothing, so the text popped off) */
.hero.v-scroll.intro [data-anim]{transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1),visibility 0s linear .8s}

/* ===== motion polish 3: ColdSend sync fixes ===== */
/* setup tile: status label hands over (old fades out first, then the new one) instead of two texts overlapping */
#op-case-coldsend .cs-b .rc .rc-st .a{transition:opacity .16s ease!important}
#op-case-coldsend .cs-b .rc.rdy .rc-st .b{transition:opacity .26s ease .18s!important}
#op-case-coldsend .cs-b .rc.rdy .rc-st i{transition:opacity .3s ease .1s!important}
#op-case-coldsend .cs-b .rc:not(.rdy) .rc-st .b,#op-case-coldsend .cs-b .rc:not(.rdy) .rc-st i{transition:none!important}
/* domains tile: a cart item lands on the same tick as its counter and total */
#op-case-coldsend .cs-c .re.go .re-dr .it{animation:none!important;transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
#op-case-coldsend .cs-c .re .re-dr .it.in{opacity:1!important;transform:none!important}
#op-case-coldsend .cs-c .re:not(.go) .re-dr .it{transition:none}
/* cover in the "Discover more" carousel: the story plays from its start when the card becomes the active one */
.nc-car .cf-card:not(.act) .gx-csref .gx-nu *,.nc-car .cf-card:not(.act) .gx-csref .gx-nu *::before,.nc-car .cf-card:not(.act) .gx-csref .gx-nu *::after{animation:none!important}
.nc-car .cf-card:not(.act) .gx-csref .gx-nf.a{animation:nuFl 6s ease-in-out infinite!important}
.nc-car .cf-card:not(.act) .gx-csref .gx-nf.b{animation:nuFl 6s ease-in-out -3s infinite!important}

/* motion polish 4: CSS animations hold while their block is off screen (resume from the same frame, so nothing restarts or jumps) */
.mo-off,.mo-off *,.mo-off *::before,.mo-off *::after{animation-play-state:paused!important}

/* ===== motion language: every easing on the site now resolves to one of these ten curves =====
   out .2,.8,.2,1 (default entrances) · out-soft .3,.7,.2,1 · out-long .16,1,.3,1 (large reveals)
   inout .4,0,.2,1 (state changes) · inout-mid .5,0,.2,1 · inout-strong .65,0,.25,1 (camera, big moves) · inout-sym .45,0,.55,1 (loops)
   back .3,1.4,.5,1 (pops) · back-strong .3,1.6,.5,1 (small badges) · in .55,0,.8,.45 (exits) */
:root{--e-out:cubic-bezier(.2,.8,.2,1);--e-out-soft:cubic-bezier(.3,.7,.2,1);--e-out-long:cubic-bezier(.16,1,.3,1);--e-inout:cubic-bezier(.4,0,.2,1);--e-inout-mid:cubic-bezier(.5,0,.2,1);--e-inout-strong:cubic-bezier(.65,0,.25,1);--e-inout-sym:cubic-bezier(.45,0,.55,1);--e-back:cubic-bezier(.3,1.4,.5,1);--e-back-strong:cubic-bezier(.3,1.6,.5,1);--e-in:cubic-bezier(.55,0,.8,.45)}

/* reduced motion: the servers table and KPI tiles appear without the cascade */
@media (prefers-reduced-motion:reduce){#op-case-coldsend .cs-d .d7-r,#op-case-coldsend .cs-d .d7-k .k,#op-case-coldsend .cs-b .rc-st .a::before{animation:none!important}}

/* covers: screens cross-fade into each other (the old swap faded one out completely before the next appeared, leaving an empty beat) */
@keyframes gxscr{0%{opacity:0}6%{opacity:1}33.34%{opacity:1}39.34%{opacity:0}100%{opacity:0}}

/* Meld printer: light neutral body one step darker than the screen, white info card (reads as a device, not a grey slab) */
#op-case-meld .ml-rc.ml-rc .rp-pr{background:linear-gradient(180deg,#EBEBED 0%,#E1E1E4 55%,#D8D8DC 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.05),0 0 0 1px rgba(11,11,11,.07),0 calc(2*var(--u)) calc(4*var(--u)) rgba(11,11,11,.06),0 calc(14*var(--u)) calc(30*var(--u)) rgba(11,11,11,.12)!important}
#op-case-meld .ml-rc.ml-rc .rp-in{background:#fff!important;box-shadow:0 0 0 1px rgba(11,11,11,.05),0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.05)!important}
#op-case-meld .ml-rc.ml-rc .rp-pill{background:#fff!important;color:#30333C!important;box-shadow:0 0 0 1px rgba(11,11,11,.06)!important}
#op-case-meld .ml-rc.ml-rc .rp-slot{background:linear-gradient(180deg,#26262A,#3C3C40)!important;box-shadow:0 1px 0 rgba(255,255,255,.7)!important}
/* status line: the old label fades out before the next one fades in, so two texts never overlap */
#op-case-meld .ml-rc.ml-rc .rp-st span{transition:opacity .12s ease!important}
#op-case-meld .ml-rc.ml-rc[data-s="0"] .rp-st .s0,#op-case-meld .ml-rc.ml-rc[data-s="1"] .rp-st .s1,#op-case-meld .ml-rc.ml-rc[data-s="2"] .rp-st .s2,#op-case-meld .ml-rc.ml-rc[data-s="3"] .rp-st .s2{transition:opacity .25s ease .14s!important}

/* Meld status check: tick centred in its circle */
#op-case-meld .ml-rc.ml-rc .rp-st .ok{flex:none}
#op-case-meld .ml-rc.ml-rc .rp-st .ok::after{left:50%!important;top:46%!important;width:26%!important;height:50%!important;box-sizing:border-box;transform:translate(-50%,-50%) rotate(45deg)!important;transform-origin:50% 50%}

/* ColdSend device frame: slightly tighter corners (dashboard + servers; the phone crop keeps its own) */
@media (min-width:481px){
#op-case-coldsend .cs-a .cs-win.cs-win.cs-win,#op-case-coldsend .cs-d .cs-win.cs-win.cs-win{border-radius:calc(1.1cqw + 5px)!important}
#op-case-coldsend .cs-a .cs-win.cs-win.cs-win::before{border-radius:calc(.85cqw + 2px)!important}
#op-case-coldsend .cs-a .cs-win.cs-win.cs-win .cs-bar{border-radius:calc(.85cqw + 2px) calc(.85cqw + 2px) 0 0!important}
#op-case-coldsend .cs-a .cs-win.cs-win.cs-win .cs-scr{border-radius:0 0 calc(.85cqw + 2px) calc(.85cqw + 2px)!important}
#op-case-coldsend .cs-d .cs-win.cs-win.cs-win .cs-scr{border-radius:calc(.85cqw + 2px)!important}
}

/* domains tile: same tighter frame corners as the other two mock-ups */
#op-case-coldsend .cs-c .re .re-win{border-radius:0 calc(15*var(--q)) calc(15*var(--q)) 0!important}
#op-case-coldsend .cs-c .re .re-win::before,#op-case-coldsend .cs-c .re .re-un{border-radius:0 calc(11*var(--q)) calc(11*var(--q)) 0!important}

#op-case-coldsend .cs-c .re .re-dim{border-radius:0 calc(11*var(--q)) calc(11*var(--q)) 0!important}

/* ColdSend cover tablet: tighter corners to match the mock-ups inside the case */
.gx-csref .gx-lap .gx-lid{border-radius:3.1cqh!important}
.gx-csref .gx-lap .gx-lid .gx-scr,.gx-csref .gx-lap .gx-lid .gx-scr .gx-nu{border-radius:2.05cqh!important}

/* trial: haze glow behind the final block (?hz=1) */
.final canvas.final-hz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .9s var(--e-out,ease)}
.final canvas.final-hz.on{opacity:1}
.f2-vp.hz{position:relative;overflow:hidden;background-image:none!important;background-color:#0b0b0b!important;box-shadow:none!important}
.f2-vp canvas.f2-hz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .9s var(--e-out,ease)}
.f2-vp canvas.f2-hz.on{opacity:1}
/* more room for the glow: the strip is taller in the gradient variant, the logos stay centred in it */
.case .fund2 .f2-vp.hz{padding:31px 12px!important}
/* softer tiles: a faint lilac white with a shadow under them, so they rest on the light instead of being cut out of it */
.case .fund2 .f2-vp.hz .f2-tile{background:#f6f4ff!important;border-color:rgba(255,255,255,.7)!important;box-shadow:0 10px 22px rgba(8,6,36,.38),0 2px 5px rgba(8,6,36,.22)!important}
/* the strip is the card's own bottom edge, not an inset: it runs to the card's sides and takes its bottom corners */
.case .fund2 .f2-vp.hz{margin:0 calc(-1 * clamp(24px,3vw,48px) - 1px) calc(-1 * clamp(20px,2.2vw,28px) - 1px)!important;border-radius:0 0 10px 10px!important}
@media (max-width:600px){.case .fund2 .f2-vp.hz{padding:23px 12px!important}}
/* tiles in the gradient variants are not interactive: no hover state, no pointer, no click-through to the card */
.case .fund2 .f2-vp.hz,.case .fund2 .f2-vp.hz .f2-tile{cursor:default!important}
.case .fund2 .f2-vp.hz .f2-tile{pointer-events:none}
.case .fund2 .f2-vp.hz .f2-tile img{filter:grayscale(1) brightness(0)!important;opacity:.88!important}
.case .fund2 .f2-vp.hz .f2-tile img[src*="aceon"]{filter:grayscale(1) contrast(1.15)!important}
.f2-vp.hz>.f2-in{position:relative;z-index:1;margin-left:-12px;margin-right:-12px;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.3) .7%,rgba(0,0,0,.66) 1.7%,rgba(0,0,0,.92) 3%,#000 4.4%,#000 95.6%,rgba(0,0,0,.92) 97%,rgba(0,0,0,.66) 98.3%,rgba(0,0,0,.3) 99.3%,rgba(0,0,0,0) 100%)!important;mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.3) .7%,rgba(0,0,0,.66) 1.7%,rgba(0,0,0,.92) 3%,#000 4.4%,#000 95.6%,rgba(0,0,0,.92) 97%,rgba(0,0,0,.66) 98.3%,rgba(0,0,0,.3) 99.3%,rgba(0,0,0,0) 100%)!important}
/* trial: review switch between the original background and the gradient one */
.hz-sw{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(11,11,11,.12)}
.hz-sw button{appearance:none;border:0;margin:0;cursor:pointer;height:26px;padding:0 11px;border-radius:999px;background:none;color:#555;font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s}
.hz-sw button[aria-pressed="true"]{background:#0b0b0b;color:#fff}
.hz-sw button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.hz-sw--dk{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hz-sw--dk button{color:rgba(255,255,255,.72)}
.hz-sw--dk button[aria-pressed="true"]{background:#fff;color:#0b0b0b}
.final>.hz-sw{position:absolute!important;top:88px;right:24px}
@media (max-width:600px){.final>.hz-sw{top:20px;right:50%;transform:translateX(50%)}.hz-host>.hz-sw{top:-11px}}
.hz-host{position:relative}
.hz-host>.hz-sw{top:-9px;right:0}
.final canvas.final-hz{display:none}
.final canvas.final-wind{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
body.fin-h .final canvas.final-wind{display:block}
body.fin-h .final canvas.final-hz{display:block}
body.fin-h.fin-g .final canvas.final-hz{display:none}
.final canvas.final-gs,.final canvas.final-gp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
body.fin-h.fin-g .final canvas.final-gs,body.fin-h.fin-g .final canvas.final-gp{display:block}
.f2-vp canvas.f2-hz{display:none}
.f2-vp.hz canvas.f2-hz{display:block}
body.fin-h .final .book3{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)),rgba(11,11,14,.36)!important;-webkit-backdrop-filter:blur(26px) saturate(1.25)!important;backdrop-filter:blur(26px) saturate(1.25)!important;box-shadow:none!important}
body.fin-h .final .mail3 .m3-t{color:#fff!important;text-shadow:0 1px 10px rgba(20,10,80,.45)}
body.fin-h .final .mail3 a{text-shadow:0 1px 10px rgba(20,10,80,.45)}
body.fin-h .final .book3 .b3-k{color:rgba(255,255,255,.72)!important}
body.fin-h .final canvas.final-bands,body.fin-h .final canvas.final-b,body.fin-h .final canvas.final-c,body.fin-h .final canvas.final-fx{display:none!important}

/* ColdSend servers: the new row's cells arrive one after another once the row has landed */
@keyframes d7cin{from{opacity:0;translate:0 calc(5*var(--w))}to{opacity:1;translate:0 0}}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:not(.d7-st){animation:d7cin .5s cubic-bezier(.2,.8,.2,1) both}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(1){animation-delay:.04s}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(3){animation-delay:.10s}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(4){animation-delay:.15s}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(5){animation-delay:.20s}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(6){animation-delay:.25s}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(7){animation-delay:.30s}
#op-case-coldsend .s7d.nw1 .d7-r.nw>*:nth-child(8){animation-delay:.35s}
#op-case-coldsend .s7d .d7-r.nw{transition:opacity .34s ease,translate 0s,background-color 1s ease,box-shadow 1s ease}
@media (prefers-reduced-motion:reduce){#op-case-coldsend .s7d.nw1 .d7-r.nw>*{animation:none!important}}

/* ColdSend servers: the list dissolves into the panel at the bottom edge, like a list that scrolls on */
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{position:relative}
#op-case-coldsend .cs-d .cs-win.cs-win .d7-rows::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(23*var(--w));background:linear-gradient(180deg,rgba(243,243,245,0),rgba(243,243,245,.86) 62%,#f3f3f5);pointer-events:none;z-index:3}

/* story scene: the closer framings crop the island, so the picture dissolves at its edges instead of ending on a hard line */


/* hero story captions: centred in the frame at the designer's request (2026-11-13; before that they sat in the lower third),
   and lifted off the scene by a soft shadow */
.hero-track--bc .hero .hero-story{align-content:center!important;padding-bottom:0}
.hero-track--bc .hero .hero-story span{color:#fff;text-shadow:0 2px 26px rgba(8,8,18,.6),0 0 2px rgba(8,8,18,.35)}

/* hero card scenes: they ease in with the reveal */
@media (hover:hover) and (pointer:fine){
  body.hc-2 .hero .card .anim3d{opacity:0;transform:translateY(8px) scale(.97);transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .28s cubic-bezier(.23,1,.32,1)}
  body.hc-2 .hero .card:hover .anim3d,body.hc-2 .hero .card:focus-visible .anim3d{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){body.hc-2 .hero .card .anim3d{transform:none!important;transition:opacity .2s ease!important}}

/* story on phones and tablets: a small "scroll" cue at the foot of the pinned block, since the copy changes as you scroll;
   it goes away on the last step */
.st-hint{display:none}
@media (max-width:900px){
  .st-hint{display:inline-flex;flex-direction:column;align-items:center;gap:8px;position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;pointer-events:none;transition:opacity .3s cubic-bezier(.23,1,.32,1)}
  .st-hint b{font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
  .st-hint i{position:relative;display:block;width:1px;height:26px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));overflow:visible}
  .st-hint i::after{content:"";position:absolute;left:-1px;top:0;width:3px;height:8px;border-radius:2px;background:var(--hot);animation:stHint 1.7s cubic-bezier(.77,0,.175,1) infinite}
  .story[data-step="4"] .st-hint{opacity:0}
}
@keyframes stHint{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@media (prefers-reduced-motion:reduce){.st-hint i::after{animation:none;top:9px}}

/* PV scene polish: the pass counter beside VERDICT, REFRAME flickers when assumption 02 misses */
.pv2-cnt{font:500 9px "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;fill:#6054ff;opacity:0}
body #op-pv .vis-main.clay3d .pv2-cnt,body #op-sv .vis-main.clay3d .pv2-cnt{opacity:1;visibility:visible!important}
body #op-pv .vis-main.clay3d .pv2-rf rect{animation:pv2-rf10 10s ease infinite}
@keyframes pv2-rf10{0%,34.5%{fill:#fff}36.5%,41%{fill:#e3e3ea}46%,100%{fill:#fff}}
@media (prefers-reduced-motion:reduce){body #op-pv .vis-main.clay3d .pv2-rf rect{animation:none}}


.op-quote[hidden]{display:none!important}

/* the whole case card opens its case study, not only the cover */
#case .c3-track > .case3{cursor:pointer!important}

/* floating video card, 2026-11-12: the orange square keeps the "expand" corners (the user's choice over a play triangle);
   the duration sits on the clip instead of a label row, and the card is a little narrower and shorter */
.fv{width:216px}
.fv .fv-open{padding:10px 10px 12px}
.fv .fv-media{position:relative;margin-top:0}
.fv-dur{position:absolute;right:6px;bottom:6px;padding:3px 6px 3px;border-radius:4px;background:rgba(11,11,11,.72);color:#fff;font:400 10px/1 var(--mono);letter-spacing:.06em}
.fv .fv-foot{margin-top:10px;gap:10px;align-items:center}
.fv .fv-cap{font-size:15px}


/* perf 2026-11-13: the "Discover more" carousel at the foot of a case study kept animating its covers while scrolled out of view,
   and the browser kept repainting them (the other source of dropped frames in Meld). Off screen, its animations are paused. */
.nc-car.off-view *,.nc-car.off-view *::before,.nc-car.off-view *::after{animation-play-state:paused!important}


/* mobile review 2026-11-13 */
/* 1 · the scroll cue sat at the foot of the pinned block, so on shorter phones it ended up right under the copy. It now follows the copy
   as the last item of the column, always the same distance below it. */
@media (max-width:900px){
  .story-pin > .st-hint{position:static;left:auto;bottom:auto;transform:none;order:99;align-self:center;margin:22px 0 0}
}
/* 2 · "Supporting early-stage founders?" card: on iPhones its top border did not paint between the corners. The same hairline is drawn once more
   as its own layer (identical colour and place, so nothing changes where the border already shows). */
.fund2{position:relative}
.fund2::after{content:"";position:absolute;left:9px;right:9px;top:-1px;height:1px;background:#e3e3e3;pointer-events:none}

/* 4 · "Discover more" on phones: only the cover opens the next case; the title and the "Read …" line under it no longer do
   (a swipe that starts on the text used to open a case by accident) */
@media (max-width:600px){
  dialog.op .nc-car .cf-card{pointer-events:none}
  dialog.op .nc-car .cf-card .gx,dialog.op .nc-car .cf-card .cf-art,dialog.op .nc-car .cf-card .cf-logo{pointer-events:auto}
}

/* tablets, 2026-11-13: on touch screens two older rules made both layers of a hero card visible at once (the title and the hover description),
   and since they share one grid cell they printed over each other — in portrait and in landscape. There is no hover on touch, so only the title
   shows there, as on phones; the description is what the card opens. */
@media (hover:none){
  html body.hc-2 .hero .cards .card .card-reveal,
  html body.hc-2 .hero .cards .card:hover .card-reveal,
  html body.hc-2 .hero .cards .card:focus-visible .card-reveal{opacity:0!important;visibility:hidden!important}
  html body.hc-2 .hero .cards .card .card-face,
  html body.hc-2 .hero .cards .card:hover .card-face,
  html body.hc-2 .hero .cards .card:focus-visible .card-face{opacity:1!important;transform:none!important}
}

/* hero cards, 2026-11-13: on iPad Safari the top row of a card shrank to its content, so the expand button sat right after the label and ran into it.
   A card is a <button>, and Safari does not stretch a button's children the way Chrome does — so the row's width is stated outright and the
   button is pinned to the right edge. */
body.hc-2 .hero .cards .card .bar{width:100%!important;align-self:stretch!important;box-sizing:border-box;justify-content:space-between!important;gap:12px}
body.hc-2 .hero .cards .card .bar .mono{flex:1 1 auto;min-width:0;text-align:left}
body.hc-2 .hero .cards .card .bar .cell{flex:0 0 auto!important;margin-left:auto!important}
body.hc-2 .hero .cards .card .body{width:100%!important;align-self:stretch!important;box-sizing:border-box}

/* hero: the turbine drawn above the copy is not masked — the cut above the cards (added 2026-11-13 for tablets) was removed the same day at the designer's request */

/* partners gallery, 2026-11-13: the photo takes the card, the caption is one compact row under it (title left, "1 / 4" and the arrows right).
   Before, the caption panel was the lower half of the card and stood almost empty, and the photo was cut across the faces. */
html body #op-partners .op-photo.op-gallery.op-gallery{--cap:84px!important}
body #op-partners .op-gal-item figcaption{display:flex!important;align-items:center!important;padding:0 calc(22px + 150px) 0 22px!important;box-sizing:border-box}
body #op-partners .op-gal-item figcaption p{margin:0!important;padding:0!important;max-width:none!important;font-size:clamp(16px,1.45vw,19px)!important;line-height:1.2!important;letter-spacing:-.01em;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body #op-partners .op-gallery .op-photo-nav{left:auto!important;right:22px!important;bottom:22px!important;gap:6px!important;align-items:center}
body #op-partners .op-gallery .op-gal-n{margin-right:8px;font:400 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:rgba(11,11,11,.6);white-space:nowrap}
body #op-partners .op-gallery .op-gal-dots{display:none!important}
body #op-partners .op-gal-item img{object-fit:cover!important;background:#111}
body #op-partners .op-gal-item:nth-child(1) img{object-position:50% 30%!important}
body #op-partners .op-gal-item:nth-child(2) img{object-position:50% 50%!important}
body #op-partners .op-gal-item:nth-child(3) img{object-position:50% 40%!important}
body #op-partners .op-gal-item:nth-child(4) img{object-position:50% 40%!important}
@media (max-width:600px){
  /* phones: the title gets the full width (two lines if needed) and the counter + arrows sit on their own row under it; the card is as tall
     as a 16:10 photo plus that caption, so the photos are not cropped to a square */
  html body #op-partners .op-photo.op-gallery.op-gallery{--cap:116px!important;height:calc((100vw - 98px) / 1.6 + 116px)!important}
  body #op-partners .op-gal-item figcaption{align-items:flex-start!important;padding:14px 16px 0!important}
  body #op-partners .op-gallery .op-photo-nav{right:16px!important;bottom:14px!important}
  body #op-partners .op-gal-item figcaption p{font-size:16px!important}
}

/* partners gallery, usability pass 2026-11-13: 44 px arrows (a comfortable touch target), and the photo can be swiped — horizontal drags belong to the
   gallery, vertical ones still scroll the modal */
body #op-partners .op-gallery .op-photo-nav .st-btn{width:44px!important;height:44px!important}
body #op-partners .op-gallery .op-photo-nav{gap:8px!important;bottom:20px!important}
body #op-partners .op-gal-item figcaption{padding-right:calc(22px + 164px)!important}
body #op-partners .op-gallery .op-gal-track{touch-action:pan-y;-webkit-user-select:none;user-select:none}
body #op-partners .op-gallery .op-gal-item img{-webkit-user-drag:none}
@media (max-width:600px){
  body #op-partners .op-gallery .op-photo-nav{bottom:12px!important}
  body #op-partners .op-gal-item figcaption{padding-right:16px!important}
}

/* partners gallery, third pass 2026-11-13: the counter is a small mono line above the title (one caption block, arrows alone on the right),
   and the photo itself turns the page — left half back, right half on — with a round arrow that shows on hover */
body #op-partners .op-gallery .op-gal-n{position:absolute;left:22px;bottom:52px;z-index:3;margin:0;font:400 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;color:rgba(11,11,11,.6);font-variant-numeric:tabular-nums;pointer-events:none}
body #op-partners .op-gal-item figcaption{align-items:flex-start!important;padding:40px 140px 0 22px!important}
body #op-partners .op-gallery .op-gal-zone{position:absolute;top:0;bottom:var(--cap,84px);width:50%;z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
body #op-partners .op-gallery .op-gal-zone.zp{left:0}
body #op-partners .op-gallery .op-gal-zone.zn{right:0}
body #op-partners .op-gallery .op-gal-zone::after{content:"";position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:rgba(255,255,255,.92) center/18px 18px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transform:scale(.95);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
body #op-partners .op-gallery .op-gal-zone.zp::after{left:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5l-7 7 7 7'/%3E%3C/svg%3E")}
body #op-partners .op-gallery .op-gal-zone.zn::after{right:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5l7 7-7 7'/%3E%3C/svg%3E")}
@media (hover:hover) and (pointer:fine){body #op-partners .op-gallery .op-gal-zone:hover::after{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body #op-partners .op-gallery .op-gal-zone::after{transition:opacity .2s ease;transform:none}}
@media (max-width:600px){
  /* phones: title on its own row, then the counter (left) and the arrows (right) on one line */
  body #op-partners .op-gal-item figcaption{padding:14px 16px 0!important}
  body #op-partners .op-gallery .op-gal-n{left:16px;bottom:29px}
}

/* partners gallery, fourth pass 2026-11-13: no click zones on the photo and no "01 / 04"; in the counter's place sit progress segments —
   one short bar per photo, the current one dark. Colour only changes, nothing moves. */
body #op-partners .op-gallery .op-gal-zone{display:none!important}
body #op-partners .op-gallery .op-gal-n{display:flex;gap:4px;left:22px;bottom:56px;font-size:0;line-height:0;letter-spacing:0}
body #op-partners .op-gallery .op-gal-n i{display:block;width:20px;height:2px;border-radius:1px;background:rgba(11,11,11,.16);transition:background-color .2s cubic-bezier(.23,1,.32,1)}
body #op-partners .op-gallery .op-gal-n i.on{background:#0b0b0b}
@media (max-width:600px){body #op-partners .op-gallery .op-gal-n{left:16px;bottom:34px}}

/* partners gallery, fifth pass 2026-11-13: segments read at a glance (3px, darker rest state); on phones the caption loses its empty band —
   the segments + arrows row sits 12px under a one-line title. If any title wraps to two lines at this width (narrow phones, longer DE titles) a script sets .cap2 and the taller caption stays. */
body #op-partners .op-gallery .op-gal-n{bottom:55px}
body #op-partners .op-gallery .op-gal-n i{height:3px;border-radius:1.5px;background:rgba(11,11,11,.24)}
@media (max-width:600px){body #op-partners .op-gallery .op-gal-n{bottom:33px}}
@media (max-width:600px){html body #op-partners .op-photo.op-gallery.op-gallery:not(.cap2){--cap:102px!important;height:calc((100vw - 98px) / 1.6 + 102px)!important}}

/* partners gallery, sixth pass 2026-11-13: the photo title is set like the offer-card titles below it (20/24, -0.2px).
   Phone captions grow to fit: 107px for a one-line title, 131px when any title takes two lines (.cap2). */
html body #op-partners .op-gallery .op-gal-item figcaption p{font-size:20px!important;line-height:24px!important;letter-spacing:-.2px!important;font-weight:400!important}
@media (max-width:600px){
  html body #op-partners .op-photo.op-gallery.op-gallery:not(.cap2){--cap:107px!important;height:calc((100vw - 98px) / 1.6 + 107px)!important}
  html body #op-partners .op-photo.op-gallery.op-gallery.cap2{--cap:131px!important;height:calc((100vw - 98px) / 1.6 + 131px)!important}
}

/* partners gallery title: balanced lines (no single word left alone); on wide screens a title that still takes two lines (longer DE)
   gets a taller caption and the segments move up with it */
html body #op-partners .op-gallery .op-gal-item figcaption p{text-wrap:balance}
@media (min-width:601px){
  body #op-partners .op-gal-item figcaption{padding-right:128px!important}
  html body #op-partners .op-photo.op-gallery.op-gallery.cap2{--cap:108px!important}
  body #op-partners .op-gallery.cap2 .op-gal-n{bottom:79px}
}

/* partners gallery, seventh pass 2026-11-13: the caption breathes like the team card beside it — 24px at the sides, 28px above the
   segments and under the title; the arrows sit centred in the bar. Phones: 24px sides, 20px top and bottom. */
@media (min-width:601px){
  html body #op-partners .op-photo.op-gallery.op-gallery{--cap:96px!important}
  html body #op-partners .op-photo.op-gallery.op-gallery.cap2{--cap:120px!important}
  html body #op-partners .op-gal-item figcaption{padding:43px 128px 0 24px!important}
  html body #op-partners .op-gallery .op-gal-n{left:24px;bottom:65px}
  html body #op-partners .op-gallery.cap2 .op-gal-n{bottom:89px}
  html body #op-partners .op-gallery .op-photo-nav{right:24px!important;bottom:26px!important}
  html body #op-partners .op-gallery.cap2 .op-photo-nav{bottom:38px!important}
}
@media (max-width:600px){
  html body #op-partners .op-photo.op-gallery.op-gallery:not(.cap2){--cap:120px!important;height:calc((100vw - 98px) / 1.6 + 120px)!important}
  html body #op-partners .op-photo.op-gallery.op-gallery.cap2{--cap:144px!important;height:calc((100vw - 98px) / 1.6 + 144px)!important}
  html body #op-partners .op-gal-item figcaption{padding:20px 24px 0!important}
  html body #op-partners .op-gallery .op-gal-n{left:24px;bottom:41px}
  html body #op-partners .op-gallery .op-photo-nav{right:24px!important;bottom:20px!important}
}

/* ColdSend dashboard, 2026-11-13: the floating stats panel is solid white (the bars and their labels no longer show through it),
   and the top bar is a soft graphite instead of near-black */
html body #op-case-coldsend .cs-a .cs-win.cs-win .h8-ch.k2,html body #op-case-coldsend .cs-a .cs-win.cs-win .h8-ch.k3,html body #op-case-coldsend .cs-a .cs-win.cs-win .h8-fk,html body #op-case-coldsend .cs-win.cs-win .h8-ch.k2,html body #op-case-coldsend .cs-win.cs-win .h8-ch.k3,html body #op-case-coldsend .cs-win.cs-win .h8-fk{background:#fff!important}
html body #op-case-coldsend .cs-win.cs-win .h8-bar{background:#26272d!important}
html body #op-case-coldsend .cs-win.cs-win .h8-bar .h8-usr{background:#3a3b42!important}

/* ColdSend "buy a domain" screen, proportions 2026-11-13:
   the drawer keeps its size but everything inside it is drawn 10% smaller, so it has room to breathe;
   in the table the health bars are shorter and thinner and each row card is taller with wider side padding */
html body #op-case-coldsend .cs-c .re.re.re .re-dr > *{--q:calc(100cqw / 400 * .9)}
html body #op-case-coldsend .cs-c .re.re.re .re-un .dl{gap:calc(4*var(--q))!important;padding-top:calc(6*var(--q))!important}
html body #op-case-coldsend .cs-c .re.re.re .re-un .pt,html body #op-case-coldsend .cs-c .re.re.re .re-un .hd{margin-top:calc(10*var(--q))!important}
html body #op-case-coldsend .cs-c .re.re.re .re-un .dl .d{height:calc(29.5*var(--q))!important;padding:0 calc(13*var(--q)) 0 calc(11*var(--q))!important}
html body #op-case-coldsend .cs-c .re.re.re .re-un .dl .hl u,html body #op-case-coldsend .cs-c .re.re.re .re-un .dl .hl u.g,html body #op-case-coldsend .cs-c .re.re.re .re-un .dl .hl u.y,html body #op-case-coldsend .cs-c .re.re.re .re-un .dl .hl u.r{width:calc(36*var(--q))!important;height:calc(5.5*var(--q))!important}

/* ColdSend dashboard shot 2026-11-13: the browser window sat 18px high in its frame (5.45cqw above, 9.04cqw below);
   it now sits in the middle of the card. Phones keep their own zoomed framing. */
@media (min-width:601px){html body #op-case-coldsend .cs-a .cs-win{top:7.22cqw!important}}

/* ColdSend "Servers" screen, 2026-11-13: a little more air — stat tiles, toolbar margins and row height all grew by about half
   of the first attempt, which the designer found too loose (the list still fades out at the card's edge) */
html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-k{gap:calc(10*var(--w))!important}
html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k,html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-k .k:first-child{height:calc(53*var(--w))!important;padding:0 calc(22*var(--w)) 0 calc(7*var(--w))!important;gap:calc(12*var(--w))!important}
html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-h{min-height:calc(56*var(--w))!important}
html body #op-case-coldsend .cs-d .cs-win.cs-win .s7d .d7-tb,html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-tb{margin:calc(27*var(--w)) 0 calc(20*var(--w))!important}
html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-rows{padding-top:calc(15*var(--w))!important;gap:calc(7*var(--w))!important}
html body #op-case-coldsend .cs-d .cs-win.cs-win .d7-r{height:calc(46*var(--w))!important}

/* ColdSend "Servers": while the New server dialog is open the blue button does not vanish any more — it just reads as
   disabled at half opacity, so the toolbar keeps its shape and the button stops fighting "Create server".
   It is back at full strength as soon as the dialog starts flying into the list. */
html body #op-case-coldsend .cs-d .cs-win.cs-win .s7d.md .d7-buy{opacity:.5!important;transition:opacity .35s ease}
html body #op-case-coldsend .cs-d .cs-win.cs-win .s7d.md.mg .d7-buy{opacity:1!important}



/* the pixel cursor as a popover (while a dialog is open): a bare full-screen layer, none of the popover's default box */
.pxtrail:popover-open{position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none;overflow:visible;pointer-events:none}
.pxtrail::backdrop{display:none}

/* modal close button, 2026-11-13: it is no longer a sticky child of the scrolling panel — a script lifts it out to sit directly on the
   dialog, which does not scroll. Phones could miss the first tap on it: a sticky element inside a touch-scrolled box keeps a stale hit
   area until the scroll settles, and a tap during momentum only stops the scroll. On touch screens the tap area is also 8px larger
   on every side than the button looks. */
html body dialog.op > .op-close{position:absolute!important;top:20px!important;right:20px!important;margin:0!important;z-index:6!important}
@media (hover:none){html body dialog.op > .op-close::after{content:"";position:absolute;inset:-8px}}