/* Scoped visual refinements for Cards and the Spend illustration. */
.ox-page-cards .ox-cards-product-film{position:relative;overflow:hidden;isolation:isolate;border-radius:10px;background:#101115;aspect-ratio:8/5;box-shadow:0 18px 45px #10172214}
.ox-cards-product-film video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36.5% center}
.ox-cards-product-caption{position:absolute;inset:auto 0 0;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:35px 18px 16px;background:linear-gradient(transparent,#080a0ed9);color:#f0e7e3}
.ox-cards-product-caption>span{font-size:12px;line-height:1.5;text-transform:uppercase;letter-spacing:.08em}
.ox-cards-product-caption button{font:400 12px/1.4 var(--sans);padding:7px 11px;min-width:61px;background:#0e1016b3;color:#fafaf8;border:1px solid #b4bac36b;border-radius:20px}
.ox-cards-product-caption button:hover{background:#303541}
.ox-page-crypto .ox-hub-purchase,.ox-page-crypto .ox-hub-card-label{display:none}
.ox-page-crypto .ox-module[data-state="0"] .ox-hub-purchase,.ox-page-crypto .ox-module[data-state="0"] .ox-hub-card-label{display:block}
.ox-page-crypto .ox-module[data-state="0"] [data-hub-endpoint="eur"],.ox-page-crypto .ox-module[data-state="0"] [data-hub-label="eur"],.ox-page-crypto .ox-module[data-state="0"] .ox-hub-account-label{display:none}
.ox-page-crypto .ox-module[data-state="0"] [data-hub-endpoint]:not([data-hub-endpoint="eur"]),.ox-page-crypto .ox-module[data-state="0"] [data-hub-label]:not([data-hub-label="eur"]){opacity:.5}
@media(max-width:540px){.ox-cards-product-caption{padding:28px 14px 13px;gap:8px}.ox-cards-product-caption>span{font-size:12px;letter-spacing:.04em}.ox-cards-product-film{border-radius:7px}}

/* Crypto hub: technical-diagram treatment. Lanes stay quiet; the lane in use lights up rose gold. */
.ox-page-crypto .ox-hub-grid{opacity:.16}
.ox-page-crypto .ox-hub-lanes path{stroke:#9aa8ba;stroke-opacity:.22;stroke-width:1;transition:stroke .5s ease,stroke-opacity .5s ease}
.ox-page-crypto .ox-hub-nodes circle{fill:#9aa8ba;fill-opacity:.35;stroke:none}
.ox-page-crypto .ox-module[data-state="0"] [data-lane="eur"],
.ox-page-crypto .ox-module[data-state="1"] [data-lane="btc"],
.ox-page-crypto .ox-module[data-state="3"] [data-lane="usdc"],
.ox-page-crypto .ox-module[data-state="4"] [data-lane="usdt"],
.ox-page-crypto .ox-module[data-state="4"] [data-lane="eur"]{stroke:#d4a0a0;stroke-opacity:.85;stroke-width:1.2}
.ox-page-crypto .ox-crypto-hub use{filter:drop-shadow(0 6px 8px rgba(4,7,12,.55))}
@media (prefers-reduced-motion:reduce){.ox-page-crypto .ox-hub-lanes path{transition:none}}

/* Hold: coins drop gently into the account one after another, then float. Restarts each time the step is shown. */
.ox-page-crypto .ox-hold-coin{animation:ox-hold-drop .75s cubic-bezier(.22,1,.36,1) calc(var(--i)*.12s) both}
.ox-page-crypto .ox-hold-float{animation:ox-hold-float 3.4s ease-in-out calc(.9s + var(--i)*.45s) infinite}
@keyframes ox-hold-drop{0%{transform:translateY(-18px);opacity:0}65%{transform:translateY(1.5px);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes ox-hold-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@media (prefers-reduced-motion:reduce){.ox-page-crypto .ox-hold-coin,.ox-page-crypto .ox-hold-float{animation:none}}
/* Crypto hub: each step's moving parts fade in when the step changes. */
.ox-page-crypto .ox-hub-state,.ox-page-crypto .ox-hub-purchase{animation:ox-hub-state-in .45s cubic-bezier(.22,1,.36,1) both}
@keyframes ox-hub-state-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ox-page-crypto .ox-hub-state,.ox-page-crypto .ox-hub-purchase{animation:none}}
/* Mobile: the diagram scales down, so its labels need a larger size in SVG units to stay readable. */
@media (max-width:760px){
  .ox-page-crypto .ox-hub-labels{font-size:15px;letter-spacing:.08em}
  .ox-page-crypto .ox-crypto-hub text:not(.ox-hub-labels text){font-size:14px;letter-spacing:.06em}
}

/* Crypto hero: on wide screens the cover-fit film blows the coins up past the header. Show the whole
   16:9 film in a smaller box on the right instead (no transform or mask on the video, which blurs it in
   Chrome), and feather the box edges into a matching dark ground with an inset shadow above it. */
@media(min-width:801px){
  .ox-cinematic-crypto{background:#0a0f13}
  .ox-cinematic-crypto>img,.ox-cinematic-crypto>video,.ox-cinematic-crypto::before{inset:auto;right:2%;top:calc(50% + 44px);width:80%;height:auto;aspect-ratio:16/9;margin-top:-22.5%}
  .ox-cinematic-crypto::before{content:"";position:absolute;z-index:1;pointer-events:none;box-shadow:inset 0 0 70px 50px #0a0f13}
  .ox-cinematic-crypto::after{z-index:2}
}

/* cards page: ways to pay, and the card that feeds the account */
.ox-page-cards .ox-cw{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:34px}
.ox-cw-item{--e:cubic-bezier(.22,1,.36,1);position:relative;display:flex;flex-direction:column;gap:13px;padding:10px 10px 15px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e1e4e9,0 1px 2px #1017220a;transition:box-shadow .9s var(--e)}
.ox-cw-item:hover{box-shadow:0 0 0 1px #d8bcae,0 18px 40px -18px #3a2a2240}
.ox-cw-item>span{font-size:13.5px;line-height:1.35;color:#17212e;font-weight:500;padding:0 5px}
.ox-cw-art{--mx:50%;--my:40%;--rx:0deg;--ry:0deg;position:relative;aspect-ratio:13/10;border-radius:8px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#faf8f6,#ebe6e2 75%);perspective:520px}
.ox-cw-light{position:absolute;inset:0;background:radial-gradient(180px circle at var(--mx) var(--my),#ffffffd9,#fff0 60%);opacity:0;transition:opacity .9s var(--e);pointer-events:none}
.ox-cw-item:hover .ox-cw-light{opacity:1}
.ox-cw-art svg{position:relative;display:block;width:100%;height:100%;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform 1.1s var(--e)}
.ox-cw-dev{filter:drop-shadow(0 6px 10px #1a20290f)}
.ox-cw-card{transform-box:fill-box;transform-origin:center;transition:transform 1s var(--e)}
.ox-cw-card .ox-cw-shadow{filter:drop-shadow(0 6px 8px #0b0d1240);transition:filter 1s var(--e)}
.ox-cw-item:hover .ox-cw-shadow{filter:drop-shadow(0 12px 14px #0b0d1252)}
.ox-cw-sheen{transform:skewX(-20deg);transition:transform 1.3s var(--e)}
.ox-cw-item:hover .ox-cw-sheen{transform:skewX(-20deg) translateX(130px)}
.ox-cw-ok{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .7s var(--e)}
.ox-cw-item:hover .ox-cw-ok{stroke-dashoffset:0;transition-delay:.45s}
.ox-cw--pos:hover .ox-cw-card{transform:translate(9px,-8px) rotate(-4deg)}
.ox-cw--web:hover .ox-cw-card{transform:translate(4px,-3px)}
.ox-cw--web .ox-cw-btn{transition:fill .6s var(--e)}.ox-cw--web:hover .ox-cw-btn{fill:#a77d6b;transition-delay:.3s}
.ox-cw--wallet:hover .ox-cw-card{transform:translateY(-5px)}
.ox-cw-waves path{opacity:.18;transition:opacity .6s var(--e)}
.ox-cw--wallet:hover .ox-cw-waves path{opacity:1}
.ox-cw--wallet:hover .ox-cw-waves path:nth-child(1){transition-delay:.35s}.ox-cw--wallet:hover .ox-cw-waves path:nth-child(2){transition-delay:.5s}.ox-cw--wallet:hover .ox-cw-waves path:nth-child(3){transition-delay:.65s}
@media(max-width:800px){.ox-page-cards .ox-cw{gap:8px}.ox-cw-item{padding:8px 8px 11px;gap:9px}.ox-cw-item>span{font-size:12px;padding:0 2px}}
@media(max-width:520px){.ox-page-cards .ox-cw{grid-template-columns:1fr}.ox-cw-item{flex-direction:row;align-items:center;padding:8px}.ox-cw-art{width:96px;flex:none}}


@media(prefers-reduced-motion:reduce){.ox-cw-art,.ox-cw-art *{transition:none!important}}

/* virtual card reads as glass, clearly not metal */

/* ledger with readable sample transactions */

/* cards hero scroll lift */
.ox-hs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .35s}
.ox-cinematic-cards.is-lifting>.ox-hs-video{opacity:1}
.ox-cinematic-cards::after{opacity:var(--hs-shade,1)}
.ox-hs-stage{display:contents}
@media(min-width:801px){
.ox-hero-film.ox-hero-scrub{display:block;height:230vh;min-height:0;padding:0;overflow:visible}
.ox-hero-scrub>.ox-hs-stage{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;height:100vh;min-height:680px;padding:165px 0 100px;overflow:hidden;isolation:isolate}
.ox-hero-scrub .ox-hero-copy{will-change:opacity,transform}
}
@media(max-width:800px){.ox-cinematic-cards.is-lifting::after{opacity:.35;transition:opacity 1.2s}}

/* cards hero scroll lift: phone crop */
@media(max-width:800px){.ox-cinematic-cards>.ox-hs-video{object-position:center}}

/* cards hero scroll lift: intro stays on top until the scroll starts */
.ox-cinematic-cards:not(.is-lifting)>.ox-hs-video{opacity:0}

/* cards hero scroll lift: keeps the disclosure readable over the footage */
@media(min-width:801px){.ox-cinematic-cards::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;background:linear-gradient(transparent,#080c12e6 72%);opacity:calc(1 - var(--hs-shade,1));pointer-events:none}}

/* cards hero seam: the film ends on the site's near-black */
@media(min-width:801px){.ox-cinematic-cards::before{height:42%;background:linear-gradient(transparent,#080a0ecc 58%,#080a0e)}.ox-hero-cards:not(.ox-hero-scrub) .ox-cinematic-cards::before{opacity:1}}
@media(max-width:800px){.ox-cinematic-cards::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:2;background:linear-gradient(transparent,#080a0e);pointer-events:none}.ox-hero-cards.ox-hero-cards{background:#080a0e}}

/* cards: the section after the hero shares its near-black, then the page alternates light and dark */
.ox-hero-cards+.ox-page-section{margin-top:-1px;color:#f3f4f7;background:#080a0e}
.ox-hero-cards+.ox-page-section .ox-page-eyebrow{color:#c6a89c}
.ox-hero-cards+.ox-page-section h2{color:#f3f4f7}
.ox-hero-cards+.ox-page-section .ox-section-content p{color:#d0d6e0}
.ox-hero-cards+.ox-page-section .ox-cw-item{background:#ffffff0a;box-shadow:0 0 0 1px #ffffff1f}
.ox-hero-cards+.ox-page-section .ox-cw-item:hover{box-shadow:0 0 0 1px #c6a89c80,0 18px 40px -18px #00000080}
.ox-hero-cards+.ox-page-section .ox-cw-item>span{color:#f3f4f7}
.ox-hero-cards~.ox-layout-statement{color:#191d28;background:#f0f1f3!important}
.ox-hero-cards~.ox-layout-statement .ox-page-eyebrow{color:#656f7f}
.ox-hero-cards~.ox-layout-statement h2{color:#191d28}
.ox-hero-cards~.ox-layout-statement .ox-section-editorial>*>p:not(.ox-page-eyebrow),.ox-hero-cards~.ox-layout-statement .ox-section-content p{color:#555e70}
.ox-hero-cards~.ox-layout-standard{color:#f3f4f7;background:#141a24!important}
.ox-hero-cards~.ox-layout-standard .ox-page-eyebrow{color:#c6a89c}
.ox-hero-cards~.ox-layout-standard h2{color:#f3f4f7}
.ox-hero-cards~.ox-layout-standard details{background:#ffffff0a;border-color:#ffffff1f;box-shadow:none}
.ox-hero-cards~.ox-layout-standard summary{color:#f3f4f7}
.ox-hero-cards~.ox-layout-standard summary span{color:#e7cbbd;background:#ffffff14}
.ox-hero-cards~.ox-layout-standard details p{color:#d0d6e0}

/* cards: the three ways to pay, relit for the near-black section they now sit on */
.ox-hero-cards+.ox-page-section .ox-cw-art{background:radial-gradient(120% 90% at 50% 0%,#232833,#0f1218 78%)}
.ox-hero-cards+.ox-page-section .ox-cw-light{background:radial-gradient(180px circle at var(--mx) var(--my),#ffffff1f,#fff0 60%)}
.ox-hero-cards+.ox-page-section .ox-cw-art linearGradient[id$=d] stop:nth-child(1){stop-color:#343a46}
.ox-hero-cards+.ox-page-section .ox-cw-art linearGradient[id$=d] stop:nth-child(2){stop-color:#1a1e27}
.ox-hero-cards+.ox-page-section .ox-cw-dev{stroke:#ffffff29;stroke-width:.8;filter:drop-shadow(0 8px 14px #00000080)}
.ox-hero-cards+.ox-page-section .ox-cw-art [fill="#141922"]{fill:#0a0c11}
.ox-hero-cards+.ox-page-section .ox-cw-art [fill="#d3d8df"]{fill:#59616e}
.ox-hero-cards+.ox-page-section .ox-cw-art [fill="#e3e6eb"]{fill:#4a515e}
.ox-hero-cards+.ox-page-section .ox-cw-art [stroke="#e1e4e9"]{stroke:#ffffff1f}
.ox-hero-cards+.ox-page-section .ox-cw-art [fill="#c9ced6"]{fill:#59616e}
.ox-hero-cards+.ox-page-section .ox-cw-art [fill="#9ba4b1"]{fill:#3d4450}
.ox-hero-cards+.ox-page-section .ox-cw-card .ox-cw-shadow{filter:drop-shadow(0 6px 8px #000000a6)}
.ox-hero-cards+.ox-page-section .ox-cw-item:hover .ox-cw-shadow{filter:drop-shadow(0 12px 14px #000000bf)}
.ox-hero-cards+.ox-page-section .ox-cw--web:hover .ox-cw-btn{fill:#a77d6b}

/* cards page: statement mirrors the section above, film left and copy right */
.ox-hero-cards~.ox-layout-statement .ox-section-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(40px,6vw,88px);row-gap:0;align-items:start}
.ox-hero-cards~.ox-layout-statement .ox-cards-flow{grid-column:1;grid-row:1/3;align-self:center;position:relative;overflow:hidden;isolation:isolate;border-radius:10px;background:#080a0e;aspect-ratio:8/5;box-shadow:0 18px 45px #10172214}
.ox-hero-cards~.ox-layout-statement .ox-cards-flow video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ox-hero-cards~.ox-layout-statement .ox-section-heading{grid-column:2;grid-row:1;align-self:end}
.ox-hero-cards~.ox-layout-statement .ox-section-content{grid-column:2;grid-row:2;align-self:start;margin-top:24px}
.ox-hero-cards~.ox-layout-statement .ox-editorial-rows:empty{display:none}
@media(max-width:800px){.ox-hero-cards~.ox-layout-statement .ox-section-editorial{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.ox-hero-cards~.ox-layout-statement .ox-section-heading,.ox-hero-cards~.ox-layout-statement .ox-section-content,.ox-hero-cards~.ox-layout-statement .ox-cards-flow{grid-column:1;grid-row:auto}.ox-hero-cards~.ox-layout-statement .ox-cards-flow{margin-top:36px}}