/* finance-hub: generated from TM's approved mockup (web-layout-finance-hub) by deploy/tools/web_feature_page.py - change the
   mockup or the tool, not this file. Shared rules (dark mode, the film button): assets/features/feature-pages.css */
.ofp{--ink:#1A1A1C;--ink2:#4A4F55;--ink3:#7A8087;--mag:#BC08B0;--plum:#8F2C88;--soft:#F8E6F7;--sec:#F4F5F8;--line:#E3E6EB;--dark:#13171E;--noteBg:#FFF7D6;--noteInk:#6B5300;--f:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:light}
.ofp *{box-sizing:border-box}
.ofp,.ofp{overflow-x:clip}
.ofp{background:var(--card,#fff);color:var(--ink);margin:0;font-size:16px;line-height:1.6}
.ofp a{color:inherit;text-decoration:none}
.ofp .fp-wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.ofp h1,.ofp h2,.ofp h3{text-wrap:balance;letter-spacing:-.01em;margin:0}
.ofp p{margin:0 0 12px;color:var(--ink2)}
.ofp .fp-kick{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--magText,var(--mag));margin:0 0 10px}
.ofp .fp-btn{display:inline-block;background:var(--mag);color:#fff;font-weight:600;padding:12px 22px;border-radius:10px}
.ofp .fp-ticks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:14px;color:#E9DDF0}
.ofp .fp-ticks span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#E59BE0;margin-right:8px;vertical-align:middle}
.ofp .fp-hero{position:relative;color:#fff;padding-block:84px 80px;background-color:#2A0E2E;background-image:linear-gradient(90deg,rgba(42,14,46,.86) 0%,rgba(42,14,46,.68) 34%,rgba(42,14,46,.25) 52%,rgba(42,14,46,0) 64%),var(--img);background-size:100% 100%,cover;background-position:0 0,right center;background-repeat:no-repeat}
.ofp .fp-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:end}
.ofp .fp-crumb{font-size:13.5px;color:#E9DDF0;margin-bottom:14px}
.ofp .fp-crumb a{color:#fff;opacity:.85}
.ofp .fp-crumb i{font-style:normal;margin:0 8px;opacity:.6}
.ofp .fp-hero h1{font-size:50px;line-height:1.08;color:#fff}
.ofp .fp-hero .fp-lead{font-size:21px;line-height:1.45;color:#fff;font-weight:500;margin:16px 0 14px;max-width:34ch}
.ofp .fp-hero p{color:#E3DCE8;max-width:56ch}
.ofp .fp-hero .fp-illus{width:100%;height:auto;display:block;transform:translateY(28px)}
.ofp .fp-hero .fp-copy{max-width:600px}
.ofp .fp-flow{background:var(--sec);padding-block:80px}
.ofp .fp-flow .fp-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:end;margin-bottom:36px}
.ofp .fp-flow h2{font-size:34px;line-height:1.15}
.ofp .fp-flow .fp-head p{font-size:18.5px;line-height:1.55;color:var(--ink);margin:0}
.ofp .fp-flow figure{margin:0;background:var(--card,#fff);border-radius:24px;padding:28px;box-shadow:0 0 0 1px var(--line)}
.ofp .fp-flow img{display:block;width:100%;height:auto}
.ofp .fp-flow .fp-m{display:none;max-width:360px;margin:0 auto}
.ofp .fp-inside{padding-block:84px}
.ofp .fp-secthead{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.ofp .fp-secthead h2{font-size:34px;line-height:1.15}
.ofp .fp-secthead p{margin:6px 0 0}
.ofp .fp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ofp .fp-grid.fp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ofp .fp-card{display:flex;flex-direction:column;background:var(--card,#fff);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.ofp .fp-card:hover,.ofp .fp-card:focus-visible{box-shadow:0 0 0 2px var(--mag),0 14px 30px rgba(42,14,46,.10);transform:translateY(-2px);outline:none}
.ofp .fp-card .fp-pic{background:var(--soft);padding:18px 18px 10px}
.ofp .fp-card .fp-pic img{display:block;width:100%;height:auto}
.ofp .fp-card .fp-pic.fp-scene{padding:0;background:#EEE9F6}
.ofp .fp-card .fp-pic.fp-scene img{aspect-ratio:16/9;object-fit:cover}
.ofp .fp-card .fp-txt{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.ofp .fp-card h3{font-size:20px;line-height:1.25}
.ofp .fp-card p{margin:0;font-size:15px}
.ofp .fp-card .fp-go{margin-top:auto;padding-top:10px;font-weight:600;color:var(--magText,var(--mag));font-size:14.5px}
.ofp .fp-card .fp-go:after{content:' →'}
.ofp .fp-g2 .fp-card{flex-direction:row}
.ofp .fp-g2 .fp-card .fp-pic{flex:0 0 52%;display:grid;align-items:center;padding:18px}
.ofp .fp-g2 .fp-card .fp-txt{justify-content:center}
.ofp .fp-sg{background:var(--soft);padding-block:72px}
.ofp .fp-sg h2{font-size:30px}
.ofp .fp-sg .fp-sub{margin:6px 0 26px}
.ofp .fp-sg .fp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ofp .fp-sg .fp-item{background:var(--card,#fff);border-radius:18px;padding:24px;display:grid;gap:10px;align-content:start}
.ofp .fp-sg .fp-item b{font-size:17px}
.ofp .fp-sg .fp-item p{margin:0;font-size:15px}
.ofp .fp-hex{width:48px;height:48px}
.ofp .fp-vid{padding-block:76px}
.ofp .fp-vid .fp-vhead{text-align:center;max-width:720px;margin:0 auto 28px}
.ofp .fp-vid h2{font-size:30px}
.ofp .fp-vid .fp-vhead p{margin:8px 0 0}
.ofp .fp-vrow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:24px;max-width:1000px;margin:0 auto}
.ofp .fp-vrow.fp-one{max-width:820px}
.ofp .fp-vplayer{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--sec);box-shadow:0 0 0 1px var(--line)}
.ofp .fp-vplayer img,.ofp .fp-vplayer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ofp .fp-vplayer video{object-fit:contain;background:var(--dark)}
.ofp .fp-vcover{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer}
.ofp .fp-vplayer.fp-on .fp-vcover{display:none}
.ofp .fp-vplay{position:absolute;left:50%;top:76%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:var(--mag);display:grid;place-items:center}
.ofp .fp-vlen{position:absolute;right:12px;bottom:12px;background:rgba(19,23,30,.82);color:#fff;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:6px}
.ofp .fp-vcap{margin:10px 0 0;text-align:center;font-size:14.5px}
.ofp .fp-others{background:var(--sec);padding-block:64px}
.ofp .fp-others h2{font-size:24px;margin-bottom:22px}
.ofp .fp-orow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ofp .fp-ocard{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--card,#fff);border-radius:16px;padding:14px 18px 14px 10px;box-shadow:0 0 0 1px var(--line)}
.ofp .fp-ocard:hover,.ofp .fp-ocard:focus-visible{box-shadow:0 0 0 2px var(--mag);outline:none}
.ofp .fp-ocard img{width:96px;height:auto;display:block}
.ofp .fp-ocard b{display:block;font-size:17px}
.ofp .fp-ocard small{color:var(--ink2);font-size:13.5px;line-height:1.4;display:block}
.ofp .fp-cta{background:var(--dark) url('/assets/images/features/finance-hub/hex-band-dark.svg') center/cover no-repeat;color:#fff;text-align:center;padding-block:84px}
.ofp .fp-cta h2{color:#fff;font-size:36px}
.ofp .fp-cta p{color:#C9CDD3;max-width:62ch;margin:14px auto}
.ofp .fp-cta .fp-ticks{justify-content:center;color:#C9CDD3}
@media (max-width:1100px){.ofp .fp-hero h1{font-size:42px}
.ofp .fp-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,360px)}}
@media (max-width:1279px){.ofp .fp-hero{background-image:linear-gradient(90deg,rgba(42,14,46,.88) 0%,rgba(42,14,46,.7) 40%,rgba(42,14,46,.3) 62%,rgba(42,14,46,.05) 80%),var(--img-t)}}
@media (max-width:960px){.ofp .fp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ofp .fp-g2 .fp-card{flex-direction:column}
.ofp .fp-g2 .fp-card .fp-pic{flex:none}
.ofp .fp-flow .fp-head{grid-template-columns:1fr;gap:12px}
.ofp .fp-orow{grid-template-columns:1fr}
.ofp .fp-sg .fp-row{grid-template-columns:1fr}}
@media (max-width:860px){.ofp .fp-wrap{padding-inline:16px}
.ofp .fp-hero{padding-block:250px 48px;background-image:linear-gradient(180deg,rgba(42,14,46,0) 0,rgba(42,14,46,0) 140px,rgba(42,14,46,.92) 280px,#2A0E2E 330px),var(--img-m);background-size:100% 100%,100% auto;background-position:0 0,center top}
.ofp .fp-hero-in{grid-template-columns:1fr;gap:20px}
.ofp .fp-hero h1{font-size:34px}
.ofp .fp-hero .fp-lead{font-size:18.5px}
.ofp .fp-hero .fp-illus{transform:none;max-width:340px}
.ofp .fp-flow,.ofp .fp-inside,.ofp .fp-vid,.ofp .fp-sg{padding-block:52px}
.ofp .fp-flow figure{padding:14px;border-radius:18px}
.ofp .fp-flow .fp-w{display:none}
.ofp .fp-flow .fp-m{display:block}
.ofp .fp-flow h2,.ofp .fp-secthead h2{font-size:26px}
.ofp .fp-secthead{display:block}
.ofp .fp-vrow{grid-template-columns:1fr}
.ofp .fp-cta h2{font-size:28px}
.ofp .fp-cta{padding-block:60px}}
@media (max-width:600px){.ofp .fp-grid,.ofp .fp-grid.fp-g2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ofp .fp-card{transition:none}
.ofp .fp-card:hover{transform:none}}