/* fpg-* scopes this page so nothing collides with the Power theme's pwr-* chrome, the same way
iwp-* scopes the blog system. Self-contained on purpose: /product does not load the homepage
Tailwind bundle, and importing it would mean recompiling that bundle for every new class. */
/* Full-bleed inside a centred container. The Power theme wraps module content in .page-center with
max-width:calc(100% - 80px) inside a 1200px row, so a dark hero rendered normally is a dark BOX in
the middle of the page rather than a band across it. This breaks each banded section out to the
viewport edge without touching the theme. The inner .fpg-w restores the reading width. */
.fpg-hero,.fpg-sec-alt,.fpg-cta{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.fpg{--b:#00468E;--bl:#33A7E6;--bd:#002347;--tx:#333333;--tx2:#424242;--bg:#F5F5F5;--bgt:#F2F7FF;
font-family:'Rubik',sans-serif;color:var(--tx);line-height:1.6}
.fpg *{box-sizing:border-box}
/* Defend against the host theme. Measured on the HubSpot render 2026-08-14: the PWR Sec Text module
sets text-align:center on its content, so every heading, paragraph and button row inherited it and
the whole page came out centred. The theme also strips backgrounds from anchors, which left the
primary CTA as bare dark text on a dark hero. Neither is visible when the page is opened as a
local file, which is exactly why a page has to be checked where it will actually live. */
.fpg,.fpg h1,.fpg h2,.fpg h3,.fpg p,.fpg div,.fpg li{text-align:left}
.fpg-cta,.fpg-cta h2,.fpg-cta p{text-align:center}
.fpg a.fpg-btn{text-decoration:none!important}
.fpg a.fpg-btn-1{background:var(--b)!important;color:#fff!important;border:1px solid transparent}
.fpg a.fpg-btn-1:hover{background:var(--bd)!important;color:#fff!important}
.fpg a.fpg-btn-2{background:transparent!important;color:var(--b)!important;border:1px solid var(--b)}
.fpg-hero a.fpg-btn-1{background:var(--bl)!important;color:#00243F!important}
.fpg-hero a.fpg-btn-1:hover{background:#5CBBEE!important;color:#00243F!important}
.fpg-hero a.fpg-btn-2{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.34)}
.fpg-cta a.fpg-btn-1{background:#fff!important;color:var(--b)!important}
.fpg-cta a.fpg-btn-2{background:transparent!important;color:#fff!important;border-color:#fff}
.fpg img{max-width:100%;height:auto;display:block}
.fpg-w{max-width:1140px;margin:0 auto;padding:0 24px}
.fpg h1,.fpg h2,.fpg h3{color:var(--bd);font-weight:700;line-height:1.2;margin:0 0 16px}
.fpg h1{font-size:44px;letter-spacing:-.5px}
.fpg h2{font-size:32px}
.fpg h3{font-size:20px}
.fpg p{margin:0 0 16px}
.fpg-lead{font-size:19px;color:var(--tx2)}
/* placeholder: every one of these is a slot, not a design element. Replace with the real asset.
Sized as a screen rather than a strip: 16:9, so whatever ships into it reads as a frame from the
product and not as a thumbnail beside the copy. */
.fpg-ph{background:repeating-linear-gradient(45deg,#EAF1FA,#EAF1FA 12px,#F2F7FF 12px,#F2F7FF 24px);
border:1px dashed #9FC2E4;border-radius:14px;display:flex;align-items:center;justify-content:center;
text-align:center;color:#4A6B8A;font-size:13px;padding:24px;aspect-ratio:16/9;min-height:260px}
.fpg-ph span{max-width:340px}
.fpg-ph b{display:block;color:var(--b);font-size:14px;margin-bottom:6px}
/* Dark hero. #002347 is the brand's Blue Dark, not an invented near-black, and the two radial
washes are the only gradient on the page: 21st.dev's contrast comes from a dark ground and one
restrained accent, not from glow. No neon, no outer glow, per the anti-pattern list. */
.fpg-hero{position:relative;overflow:hidden;padding:96px 0 88px;isolation:isolate;
background:
radial-gradient(900px 420px at 78% 18%, rgba(51,167,230,.20), transparent 62%),
radial-gradient(700px 380px at 10% 92%, rgba(0,70,142,.42), transparent 66%),
#002347}
/* Two soft light sources drifting behind everything, blurred far enough that they read as depth
rather than as shapes. filter:blur on a fixed pseudo-element, so it is rasterised once and never
costs a repaint; the drift is transform only. This is where the "glass" gets something to refract,
because a frosted panel over a flat colour just looks grey. */
.fpg-hero::before{content:'';position:absolute;z-index:-1;inset:-20%;
background:
radial-gradient(38% 42% at 22% 30%, rgba(51,167,230,.55), transparent 70%),
radial-gradient(34% 40% at 78% 72%, rgba(0,110,190,.45), transparent 72%),
radial-gradient(26% 30% at 62% 12%, rgba(120,200,255,.28), transparent 70%);
filter:blur(70px);opacity:.85;animation:fpg-drift 22s ease-in-out infinite alternate}
@keyframes fpg-drift{
from{transform:translate3d(-2%,-1%,0) scale(1)}
to{transform:translate3d(3%,2%,0) scale(1.06)}
}
/* A very fine grain over the whole band. Without it a large blurred gradient banding is visible on
8-bit displays, which is the thing that makes a dark hero look cheap. */
.fpg-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* one hairline of light along the bottom edge, so the section ends deliberately */
/* the closing hairline, on its own element now that ::after carries the grain */
.fpg-hero>.fpg-w:last-child::after{content:none}
.fpg-hero-edge{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;
background:linear-gradient(90deg,transparent,rgba(51,167,230,.55),transparent)}
.fpg-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1}
.fpg-hero h1{color:#fff;font-size:clamp(32px,4.4vw,56px);letter-spacing:-1px}
.fpg-hero .fpg-lead{color:#C7DCEF;font-size:clamp(17px,1.4vw,20px);max-width:56ch}
.fpg-eyebrow{color:var(--bl);font-weight:500;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;margin-bottom:16px;display:inline-flex;align-items:center;gap:8px}
.fpg-eyebrow::before{content:'';width:22px;height:1px;background:var(--bl)}
.fpg-hero .fpg-btn-1{background:var(--bl);color:#00243F!important}
.fpg-hero .fpg-btn-1:hover{background:#5CBBEE;color:#00243F!important}
.fpg-hero .fpg-btn-2{border-color:rgba(255,255,255,.34);color:#fff!important}
.fpg-hero .fpg-btn-2:hover{background:rgba(255,255,255,.08);border-color:#fff}
.fpg-hero .fpg-ph{border:1px solid rgba(255,255,255,.18);color:#BBD6EE;border-radius:16px;
background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
box-shadow:0 24px 60px -24px rgba(0,10,25,.6), inset 0 1px 0 rgba(255,255,255,.28)}
/* Frosted glass needs a lit top edge or it reads as a flat translucent rectangle. */
.fpg-hero .fpg-ph::before{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%)}
.fpg-hero .fpg-ph{position:relative;overflow:hidden}
@supports not (backdrop-filter: blur(1px)){
.fpg-hero .fpg-ph{background:rgba(14,50,88,.72)}
}
.fpg-hero .fpg-ph b{color:var(--bl)}
.fpg-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.fpg-btn{display:inline-block;padding:14px 26px;border-radius:8px;text-decoration:none;font-weight:500;font-size:16px;min-height:44px}
.fpg-btn-1{background:var(--b);color:#fff!important}
.fpg-btn-1:hover{background:var(--bd);color:#fff!important}
.fpg-btn-2{background:transparent;color:var(--b)!important;border:1px solid var(--b)}
.fpg-btn-2:hover{background:var(--bgt)}
.fpg-sec{padding:64px 0}
.fpg-sec-alt{background:var(--bg)}
.fpg-intro{max-width:760px}
.fpg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
/* Three-up variant. As a class, not an inline style: an inline grid-template-columns beats the
media query below and forced 143px of horizontal scroll at 390px on the analytics page. */
.fpg-steps-3{grid-template-columns:repeat(3,1fr)}
.fpg-step-n{width:34px;height:34px;border-radius:50%;background:var(--b);color:#fff;display:flex;
align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:14px}
.fpg-step h3{font-size:17px;margin-bottom:8px}
.fpg-step p{font-size:15px;color:var(--tx2);margin:0}
/* Two columns, and the screen is TALL rather than wide: copy on one side, a full-height frame on
the other. The previous version read the brief as horizontal and ran each media slot edge to edge
as a 666px band, which pushed the copy away from the thing it describes. Vertical keeps them side
by side and still gives the asset most of the screen. */
.fpg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);
align-items:center;margin-bottom:clamp(56px,8vh,96px)}
.fpg-split:last-child{margin-bottom:0}
.fpg-split > div:not(.fpg-split-media){max-width:52ch}
.fpg-split.rev .fpg-split-media{order:-1}
.fpg-split-media.fpg-ph{min-height:0;aspect-ratio:auto;height:min(84vh,780px)}
/* A step card sits three or four to a row, so its screen is a 16:9 tile rather than a tall frame.
min-height:0 and min-width:0 are load-bearing. A grid track defaults to min-width:auto, so the
260px floor on .fpg-ph resolved through aspect-ratio to a 462px minimum width per card and blew
four of the five pages 735px past the viewport. The aspect ratio alone sets the height here. */
.fpg-steps > *{min-width:0}
.fpg-step .fpg-ph{margin-bottom:16px;min-height:0}
.fpg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.fpg-stat{background:#fff;border:1px solid #E2EAF3;border-radius:10px;padding:28px 24px}
.fpg-stat-n{font-size:40px;font-weight:700;color:var(--b);line-height:1;margin-bottom:10px}
.fpg-stat p{font-size:15px;color:var(--tx2);margin:0}
.fpg-attr{font-size:13px;color:#5A6B7D;margin-top:20px}
.fpg-quote{background:var(--bd);color:#fff;border-radius:12px;padding:44px}
.fpg-quote blockquote{margin:0;font-size:21px;line-height:1.5;color:#fff}
.fpg-quote cite{display:block;margin-top:20px;font-style:normal;font-size:15px;color:#BBD3EA}
.fpg-faq{max-width:820px}
.fpg-faq details{border-bottom:1px solid #DDE5EE;padding:18px 0}
.fpg-faq summary{cursor:pointer;font-weight:500;font-size:17px;color:var(--bd);list-style:none;
display:flex;justify-content:space-between;gap:16px;min-height:28px}
.fpg-faq summary::-webkit-details-marker{display:none}
.fpg-faq summary::after{content:'+';color:var(--b);font-size:22px;line-height:1}
.fpg-faq details[open] summary::after{content:'–'}
.fpg-faq details p{margin:14px 0 0;color:var(--tx2)}
.fpg-sib{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.fpg-sib a{display:block;background:#fff;border:1px solid #E2EAF3;border-radius:10px;padding:20px;
text-decoration:none;color:var(--bd)!important;font-weight:500;min-height:44px}
.fpg-sib a:hover{border-color:var(--bl)}
.fpg-sib span{display:block;font-size:14px;color:var(--tx2);font-weight:400;margin-top:6px}
.fpg-cta{background:var(--b);color:#fff;padding:56px 0;text-align:center}
.fpg-cta h2{color:#fff}
.fpg-cta p{color:#D6E6F5;max-width:600px;margin:0 auto 8px}
.fpg-cta .fpg-btns{justify-content:center}
.fpg-cta .fpg-btn-1{background:#fff;color:var(--b)!important}
.fpg-cta .fpg-btn-2{border-color:#fff;color:#fff!important}
.fpg-comp{margin-top:28px;font-size:13px;color:#C3DAF0}
/* ---------------------------------------------------------------- motion
Two timings, and both are borrowed rather than invented.
Motion's own documented defaults, read from packages/motion-dom/src/animation/types.ts in
motiondivision/motion: duration 0.3s, bounce 0.25. That is an INTERACTION spring, so it drives
the press and hover states here, expressed as a cubic-bezier with a small overshoot.
A scroll reveal wants the opposite: slower and settled, because it is establishing a scene rather
than acknowledging a tap. 0.62s on cubic-bezier(.16,1,.3,1), no overshoot, so five blocks
cascading do not read as jitter.
Only transform and opacity are animated, so every reveal stays on the compositor.
Everything below is opt-in through .fpg-anim and is switched off entirely for anyone who asked
their OS for less motion. That is not politeness, it is the difference between cinematic and
unusable for a reader with vestibular sensitivity. */
.fpg-anim{opacity:0;transform:translate3d(0,18px,0);
transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
will-change:opacity,transform}
.fpg-in{opacity:1;transform:none}
/* Staggered orchestration: a list that mounts all at once reads as a page load, a cascade reads as
choreography. 70ms is enough to perceive order without making the reader wait. */
.fpg-anim[data-d="1"]{transition-delay:.07s}
.fpg-anim[data-d="2"]{transition-delay:.14s}
.fpg-anim[data-d="3"]{transition-delay:.21s}
.fpg-anim[data-d="4"]{transition-delay:.28s}
.fpg-hero .fpg-anim{transform:translate3d(0,26px,0)}
/* Tactile push, no glow. */
.fpg-btn{transition:transform .3s cubic-bezier(.34,1.26,.64,1),background .2s ease,border-color .2s ease}
.fpg-btn:active{transform:translateY(1px)}
.fpg-stat,.fpg-sib a{transition:transform .3s cubic-bezier(.34,1.26,.64,1),border-color .3s ease}
.fpg-stat:hover,.fpg-sib a:hover{transform:translateY(-3px)}
.fpg-faq details summary{transition:color .2s ease}
.fpg-faq details[open] summary{color:var(--b)}
@media (prefers-reduced-motion: reduce){
/* The drifting hero light was still animating: a slow ambient loop is exactly the kind of motion
someone with vestibular sensitivity turns this setting on for. It holds its position instead. */
.fpg-hero::before{animation:none!important}
.fpg-anim{opacity:1!important;transform:none!important;transition:none!important}
.fpg-btn,.fpg-stat,.fpg-sib a{transition:none!important}
.fpg-stat:hover,.fpg-sib a:hover,.fpg-btn:active{transform:none!important}
}
/* ---------------------------------------------------------------- card carousel
Rebuilt to match the Tylko section the user pointed at, measured in their browser rather than
guessed (the site 403s every automated fetch, so the specs below come from a live DOM read):
card aspect-[253/336] portrait, border-radius 24px, overflow hidden
gap 16px, basis calc(75% - 16px) on mobile, roughly 30% on desktop
content absolutely positioned over a full-bleed image, flex column
eyebrow uppercase, 18px, weight 600
heading 28px, weight 600, white
action white pill, radius 24px, padding 12px 24px, bottom right with 24px margins
motion Swiper: a transform-driven track inside overflow:hidden, drag to move, no CSS snap
Theirs runs on Swiper; this is the same behaviour in about 60 lines of vanilla, because the page
must not pull a library into a HubSpot module. Font and palette are ours, per the brand SoT. */
/* The clipping viewport is full-bleed on BOTH sides, and the track carries a left pad equal to the
container gutter. At rest the first card therefore still begins on the content margin, exactly as
before, but a card scrolled past it keeps travelling into the full window width instead of being
chopped off at the gutter. The earlier version clipped the left edge at the content column, so
cards vanished at a hard vertical line partway across the page.
The mask replaces that hard line with a fade. It is confined to the overhang: the opaque stop
lands on the gutter, so nothing is faded until it has scrolled past the first card's position. */
.fpg-carousel{position:relative}
.fpg-vp{overflow:hidden;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
--gut:max(24px, calc(50vw - 570px + 24px));
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),
#000 calc(100% - 76px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),
#000 calc(100% - 76px),transparent 100%)}
.fpg-vp .fpg-track{padding-left:var(--gut)}
.fpg-track{display:flex;gap:16px;will-change:transform;
transition:transform .62s cubic-bezier(.16,1,.3,1);cursor:grab;touch-action:pan-y}
.fpg-track.fpg-drag{transition:none;cursor:grabbing}
.fpg-slide{position:relative;flex:0 0 clamp(300px,30vw,470px);aspect-ratio:253/336;
border-radius:24px;overflow:hidden;background:var(--bd)}
.fpg-slide .fpg-ph{position:absolute;inset:0;border:0;border-radius:0;min-height:0;
background:repeating-linear-gradient(45deg,#0b3358,#0b3358 14px,#0e3d68 14px,#0e3d68 28px);color:#8FB6D8}
.fpg-slide-body{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:32px}
.fpg-slide-eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:#fff;opacity:.85;margin-bottom:12px}
.fpg-slide h3{font-size:28px;line-height:1.25;font-weight:700;color:#fff;margin:0}
.fpg-slide p{font-size:15px;color:rgba(255,255,255,.82);margin:10px 0 0;max-width:32ch}
.fpg-slide-cta{margin-top:auto;align-self:flex-end;background:#fff;color:var(--bd);
border-radius:24px;padding:12px 24px;font-size:15px;font-weight:500;text-decoration:none;
display:inline-block;min-height:44px;line-height:20px;
transition:transform .3s cubic-bezier(.34,1.26,.64,1),background .2s ease}
.fpg-slide-cta:hover{background:#EAF3FB;transform:translateY(-2px);color:var(--bd)!important}
/* a scrim so white type survives whatever photograph lands behind it */
.fpg-slide::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,20,40,.55),rgba(0,20,40,.05) 46%,rgba(0,20,40,.42))}
.fpg-slide-body{z-index:2}
/* Rail header and arrows. These were removed with the first rail implementation and the buttons
fell back to the browser default, which the render showed as two tiny grey boxes. */
.fpg-rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.fpg-rail-nav{display:flex;gap:8px;flex:0 0 auto}
.fpg-rail-btn{width:48px;height:48px;border-radius:50%;border:1px solid #C9D8E8;background:#fff;
color:var(--b);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:transform .3s cubic-bezier(.34,1.26,.64,1),border-color .2s ease,opacity .2s ease}
.fpg-rail-btn:hover{border-color:var(--bl);transform:translateY(-2px)}
.fpg-rail-btn[disabled]{opacity:.3;cursor:default;transform:none}
/* The placeholder sits behind the card copy, so its own label has to stay out of the text column:
pinned to the bottom, dimmed, and small. It disappears the moment a real image lands. */
.fpg-slide .fpg-ph{align-items:flex-end;justify-content:center;padding:0 0 14px}
.fpg-slide .fpg-ph span{max-width:none;font-size:11px;opacity:.5}
.fpg-slide .fpg-ph b{display:inline;font-size:11px;margin:0}
/* ---------------------------------------------------------------- scroll stage
A sticky frame whose content advances as the reader scrolls the steps beside it, so the product
is shown moving through a session rather than described in four boxes.
Driven by IntersectionObserver, not by CSS scroll-driven animations: animation-timeline is still
"limited availability" on MDN and not Baseline, so it cannot be the mechanism on a page that has
to work everywhere. The 3D is plain perspective plus transform, which every browser has had for
a decade and which stays on the compositor. */
.fpg-stage{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start}
.fpg-stage-steps{display:flex;flex-direction:column;gap:8px;padding:12vh 0}
.fpg-step-card{padding:22px 24px;border-left:2px solid #DDE6F0;opacity:.4;
transition:opacity .5s cubic-bezier(.16,1,.3,1),border-color .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
transform:translateX(0)}
.fpg-step-card.on{opacity:1;border-left-color:var(--bl);transform:translateX(6px)}
.fpg-step-card h3{font-size:20px;margin-bottom:8px}
.fpg-step-card p{font-size:15px;color:var(--tx2);margin:0}
.fpg-step-card .n{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;
color:var(--bl);margin-bottom:10px}
.fpg-stage-frame{position:sticky;top:10vh;perspective:1400px}
/* browser chrome, so the placeholder reads as product rather than as an empty box */
.fpg-frame{border-radius:14px;overflow:hidden;background:#0B1B2E;
box-shadow:0 30px 70px -30px rgba(0,35,71,.55),0 0 0 1px rgba(0,35,71,.08);
transform-style:preserve-3d;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.fpg-frame-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#12283F}
.fpg-frame-bar i{width:10px;height:10px;border-radius:50%;background:#31465E;display:block}
.fpg-frame-bar span{margin-left:10px;font-size:11px;color:#7E9BB8;font-style:normal}
.fpg-frame-body{position:relative;aspect-ratio:16/10;background:#0B1B2E}
.fpg-shot{position:absolute;inset:0;opacity:0;transform:translate3d(0,14px,-40px) rotateX(4deg);
transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.fpg-shot.on{opacity:1;transform:none}
.fpg-shot .fpg-ph{position:absolute;inset:0;border:0;border-radius:0;min-height:0;
background:repeating-linear-gradient(45deg,#0e2438,#0e2438 14px,#122b42 14px,#122b42 28px);color:#8FB6D8}
.fpg-progress{height:2px;background:#DDE6F0;border-radius:2px;overflow:hidden;margin-top:18px}
.fpg-progress i{display:block;height:100%;width:25%;background:var(--bl);border-radius:2px;
transition:transform .6s cubic-bezier(.16,1,.3,1);transform-origin:left}
@media (prefers-reduced-motion: reduce){
.fpg-frame,.fpg-shot,.fpg-step-card,.fpg-progress i{transition:none!important}
.fpg-shot{transform:none!important}
}
@media(max-width:900px){
.fpg-stage{grid-template-columns:1fr;gap:24px}
.fpg-stage-frame{position:sticky;top:64px;order:-1;perspective:none}
.fpg-stage-steps{padding:0}
.fpg-frame{transform:none!important}
.fpg-step-card{opacity:1;border-left-color:#DDE6F0}
.fpg-step-card.on{transform:none}
}
@media(max-width:768px){
/* On a phone the overhang is the whole gutter, so the fade would eat the card itself. Keep a
short one on the right only, where the next card genuinely continues off-screen. */
.fpg-vp{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%)}
.fpg-slide{flex:0 0 calc(75% - 16px)}
.fpg-vp{margin-right:calc(50% - 50vw)}
.fpg-slide-body{padding:22px}
.fpg-slide h3{font-size:22px}
.fpg-rail-nav{display:none}
.fpg-rail-head{flex-direction:column;align-items:flex-start;gap:16px}
.fpg-rail-nav{display:none} /* a thumb is the control on a phone; two 44px buttons are clutter */
}
@media(max-width:768px){
.fpg h1{font-size:30px}
.fpg h2{font-size:24px}
.fpg-hero{padding:56px 0 48px}
.fpg-sec{padding:44px 0}
.fpg-hero-grid{grid-template-columns:1fr;gap:28px}
/* The theme already gutters twice on a phone: .pwr-sec-txt takes 20px a side and .page-center
another 20. Our own 24 made it 64, which left a 262px column inside a 390px screen. Zeroed
here so the content gets the 310px the theme intends. The full-bleed rail is unaffected: it
escapes the wrapper by its own negative margins. */
.fpg-w{padding-left:0;padding-right:0}
/* .fpg-hero, .fpg-sec-alt and .fpg-cta bleed to 100vw so their tint reaches the edge, and they
were relying on .fpg-w's padding for their inner gutter. Zeroing it above left their copy flush
against the screen edge while every other section kept a 40px margin. Put it back only there. */
.fpg-hero > .fpg-w,.fpg-sec-alt > .fpg-w,.fpg-cta > .fpg-w{padding-left:40px;padding-right:40px}
.fpg-sec-alt > .fpg-w.fpg-carousel{padding-left:40px;padding-right:40px}
.fpg-split{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
.fpg-split.rev .fpg-split-media{order:0}
.fpg-split > div:not(.fpg-split-media){max-width:none}
/* A phone has one column, so a tall frame beside the copy becomes a tall frame above it and eats
the screen. Portrait, but capped. */
.fpg-split-media.fpg-ph{height:min(58vh,440px)}
.fpg-ph{min-height:200px}
.fpg-steps,.fpg-steps-3,.fpg-stats,.fpg-sib{grid-template-columns:1fr}
.fpg-quote{padding:28px}
.fpg-quote blockquote{font-size:18px}
.fpg-btn{width:100%;text-align:center}
}
/* ---------- hero: one scroll-bound film, above the sequence ---------- */
/* Opened on its own, this fragment inherits the browser's default 8px body margin, which reads as
a white frame around the dark hero. Scoped with :has so it only fires when the module IS the
document; on a host page .rph is not the body's first child and the rule never applies, so no
global margin is touched. A 100vw full-bleed was rejected: it overflows by the scrollbar width
on systems with classic scrollbars, which would be a real bug on the live page. */
body:has(> .rph){margin:0}
.rph{--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--mut:#636262;
--gut:max(24px,calc((100vw - 1192px) / 2));
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative}
.rph *{box-sizing:border-box}
.rph,.rph *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rph-scroller{position:relative;height:340vh}
.rph-pin{position:sticky;top:0;height:100vh;overflow:hidden;
background:var(--nv) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%221920%22 height=%221080%22 viewBox=%220 0 1920 1080%22%3E%3Cdefs%3E%3ClinearGradient id=%22linear-gradient%22 x1=%220.5%22 y1=%221.014%22 x2=%220.893%22 y2=%22-0.145%22 gradientUnits=%22objectBoundingBox%22%3E%3Cstop offset=%220%22 stop-color=%22%23052347%22/%3E%3Cstop offset=%220.179%22 stop-color=%22%23052347%22/%3E%3Cstop offset=%220.299%22 stop-color=%22%2305254a%22/%3E%3Cstop offset=%220.345%22 stop-color=%22%2305254a%22/%3E%3Cstop offset=%220.575%22 stop-color=%22%23072e5e%22/%3E%3Cstop offset=%221%22 stop-color=%22%230c468e%22/%3E%3C/linearGradient%3E%3CclipPath id=%22clip-path%22%3E%3Crect id=%22Rectangle_27003%22 data-name=%22Rectangle 27003%22 width=%221920%22 height=%22902%22 transform=%22translate(8447 -8816)%22 fill=%22%23fff%22/%3E%3C/clipPath%3E%3ClinearGradient id=%22linear-gradient-2%22 x1=%220.082%22 y1=%220.5%22 x2=%220.97%22 y2=%220.481%22 gradientUnits=%22objectBoundingBox%22%3E%3Cstop offset=%220%22 stop-color=%22%231e73ee%22/%3E%3Cstop offset=%221%22 stop-color=%22%2300468e%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id=%22Group_58468%22 data-name=%22Group 58468%22 transform=%22translate(-11120 7017)%22%3E%3Cg id=%22Group_58467%22 data-name=%22Group 58467%22%3E%3Cg id=%22Group_58466%22 data-name=%22Group 58466%22%3E%3Crect id=%22Rectangle_26998%22 data-name=%22Rectangle 26998%22 width=%221920%22 height=%221080%22 transform=%22translate(11120 -7017)%22 fill=%22url(%23linear-gradient)%22/%3E%3Cpath id=%22Rectangle_26998_-_Outline%22 data-name=%22Rectangle 26998 - Outline%22 d=%22M1,1V1079H1919V1H1M0,0H1920V1080H0Z%22 transform=%22translate(11120 -7017)%22 fill=%22none%22/%3E%3Cg id=%22Mask_Group_1845%22 data-name=%22Mask Group 1845%22 transform=%22translate(2673 1799)%22 clip-path=%22url(%23clip-path)%22 style=%22isolation: isolate%22%3E%3Cg id=%22Group_58465%22 data-name=%22Group 58465%22 transform=%22translate(10127.81 5548.396) rotate(-155)%22%3E%3Cpath id=%22Subtraction_202%22 data-name=%22Subtraction 202%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 12365.271)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_203%22 data-name=%22Subtraction 203%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 12788.23)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_204%22 data-name=%22Subtraction 204%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 13265.096)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_205%22 data-name=%22Subtraction 205%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 13741.961)%22 opacity=%220.669%22 fill=%22url(%23linear-gradient-2)%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 100% 0%/cover no-repeat}
/* site header, so the hero reads as a page rather than a floating module */
/* The box opens upward as the reader scrolls, so bright film slides under the header while the
header is still partly visible. A navy scrim keeps the chrome readable through that window. It
rides with the header, so it leaves when the header leaves. */
.rph-top{display:none}
.rph-nav{position:absolute;left:0;right:0;top:0;height:72px;z-index:6;
padding:0 var(--gut);display:flex;align-items:center;gap:34px;
will-change:opacity,transform}
.rph-nav .brand{display:flex;align-items:center;text-decoration:none}
/* the lockup from docs/sot/drive-pulled/assets/retorio-logo-transparent.svg, in its own colours.
Nothing here may set a fill: the asset is the authority for how the mark is coloured. */
.rph-nav .brand svg{height:24px;width:auto;display:block}
.rph-nav nav{display:flex;gap:26px}
.rph-nav nav a{font-size:14.5px;font-weight:400;color:var(--nv);text-decoration:none}
.rph-nav .rt{margin-left:auto;display:flex;align-items:center;gap:20px}
.rph-nav .li{font-size:14.5px;color:var(--nv);text-decoration:none}
.rph-nav .cta{font-size:14.5px;font-weight:500;color:#fff;background:var(--nv);text-decoration:none;
padding:10px 18px;border-radius:8px}
.rph-nav a:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:4px}
/* No band. The copy sits straight on the film, which is a bright studio wall where it lands,
so navy stays readable. The harness measures the film under every line rather than assuming it. */
.rph-band{position:absolute;left:0;right:0;bottom:0;height:360px;z-index:5;background:none;
pointer-events:none;will-change:opacity,transform}
/* The copy sits in the bright part of the frame. Below roughly 90px from the bottom the film is
the subject's dark clothing, where navy stops being readable, so the block stops short of it. */
.rph-band .in{position:absolute;left:0;right:0;bottom:79px;padding:0 var(--gut);
display:flex;align-items:flex-end;gap:32px}
.rph-copy{flex:1 1 auto;max-width:900px;text-align:left}
/* Homepage light-section variant, measured off / : "Rooted in Science" is plain navy text at
16px/1.3 regular in sentence case with NO plate. Only the dark sections get the ::before plate.
Colour left as the module had it. */
.rph-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:400;
line-height:1.3;letter-spacing:normal;text-transform:none;color:var(--nv);margin:0 0 12px}
.rph-copy .eyebrow::before{content:"";width:26px;height:2px;background:var(--cy);flex:none}
.rph-copy h1 .hl{color:var(--cy)}
.rph-copy h1{margin:0 0 12px;max-width:40ch;font-size:clamp(28px,3.1vw,44px);line-height:1.12;
font-weight:600;color:var(--nv);text-wrap:balance}
.rph-copy .sub{margin:0;max-width:56ch;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(0,35,71,.78)}
/* The customer strip from the home page. Those files ship filled white for the navy band there,
so they are inlined and painted with currentColor instead, which is the only way to recolour an
SVG the page does not own. Widths are set per logo from the viewBox so one height does not make
the wide wordmarks tower over the narrow ones. */
.rph-refs{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px;color:var(--nv)}
.rph-refs .lab{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:rgba(0,35,71,.62)}
.rph-refs ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.rph-refs li{flex:0 0 auto;height:22px;opacity:.82}
.rph-refs svg{display:block;width:100%;height:100%}
/* The film is the hero's background: full bleed from the start, edge to edge, with the header
scrim and the copy band over it. No box, so nothing opens. */
.rph-stage{position:absolute;inset:0}
/* The layer runs 200px past the bottom of the pin, which clips it. The film is slid up to put
the subject's head in the readable window, and without that overhang the slide exposed the
pin's navy under the film: 7px at 900 tall, 38px at 720, and a whole band once a stale
measurement made the slide larger. */
.rph-zoom{position:absolute;top:0;left:0;right:0;height:calc(100% + 200px);
will-change:transform;transform:scale(1)}
.rph-film,.rph-poster,.rph-seq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rph-film{opacity:0;transition:opacity .35s linear}
.rph-film.ready{opacity:1}
.rph-seq{display:none}
.rph.seq .rph-seq{display:block}
.rph.seq .rph-film{display:none}
@media (max-width:780px){
/* One runway for both modes. 100vh here left the mp4 path with no scroll to scrub,
so a narrow non-touch window showed a frozen hero. */
.rph-scroller{height:280vh}
.rph-pin{height:100vh}
.rph-nav{height:60px;padding:0 18px;gap:0}
.rph-nav nav,.rph-nav .li{display:none}
.rph-nav .cta{padding:9px 14px;font-size:13.5px}
/* Same structure as the desktop hero: the film is the background, the scrim keeps the logo and
the CTA readable, and the copy sits on solid navy at the bottom. Only the sizes change. The
pill is dropped because it is 354px wide and a 375px screen has no room for it. */
.rph-band{height:322px}
.rph-band .in{bottom:80px;display:block}
.rph-copy{max-width:none}
/* 28px leaves "it." alone on a fourth line at 375px. 26px balances to three. */
.rph-copy h1{font-size:26px}
.rph-copy .sub{max-width:none}
/* Measured: the readable band of this film on a 375px screen is about 190px tall and the copy
alone is 204px. A logo strip below it pushes the headline onto the subject's shadowed collar,
where navy falls to 2.0. The strip is dropped here rather than made unreadable. */
.rph-refs{display:none}
.rph.seq .rph-scroller{height:280vh}
.rph.seq .rph-pin{height:100vh}
}
@media (prefers-reduced-motion:reduce){ .rph-film{display:none} }
.fpg body:has(> .rph){margin:0!important}
.fpg .rph{position:relative!important}
.fpg .rph-scroller{height:340vh!important;position:relative!important}
.fpg .rph-pin{height:100vh!important;background:var(--nv) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%221920%22 height=%221080%22 viewBox=%220 0 1920 1080%22%3E%3Cdefs%3E%3ClinearGradient id=%22linear-gradient%22 x1=%220.5%22 y1=%221.014%22 x2=%220.893%22 y2=%22-0.145%22 gradientUnits=%22objectBoundingBox%22%3E%3Cstop offset=%220%22 stop-color=%22%23052347%22/%3E%3Cstop offset=%220.179%22 stop-color=%22%23052347%22/%3E%3Cstop offset=%220.299%22 stop-color=%22%2305254a%22/%3E%3Cstop offset=%220.345%22 stop-color=%22%2305254a%22/%3E%3Cstop offset=%220.575%22 stop-color=%22%23072e5e%22/%3E%3Cstop offset=%221%22 stop-color=%22%230c468e%22/%3E%3C/linearGradient%3E%3CclipPath id=%22clip-path%22%3E%3Crect id=%22Rectangle_27003%22 data-name=%22Rectangle 27003%22 width=%221920%22 height=%22902%22 transform=%22translate(8447 -8816)%22 fill=%22%23fff%22/%3E%3C/clipPath%3E%3ClinearGradient id=%22linear-gradient-2%22 x1=%220.082%22 y1=%220.5%22 x2=%220.97%22 y2=%220.481%22 gradientUnits=%22objectBoundingBox%22%3E%3Cstop offset=%220%22 stop-color=%22%231e73ee%22/%3E%3Cstop offset=%221%22 stop-color=%22%2300468e%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id=%22Group_58468%22 data-name=%22Group 58468%22 transform=%22translate(-11120 7017)%22%3E%3Cg id=%22Group_58467%22 data-name=%22Group 58467%22%3E%3Cg id=%22Group_58466%22 data-name=%22Group 58466%22%3E%3Crect id=%22Rectangle_26998%22 data-name=%22Rectangle 26998%22 width=%221920%22 height=%221080%22 transform=%22translate(11120 -7017)%22 fill=%22url(%23linear-gradient)%22/%3E%3Cpath id=%22Rectangle_26998_-_Outline%22 data-name=%22Rectangle 26998 - Outline%22 d=%22M1,1V1079H1919V1H1M0,0H1920V1080H0Z%22 transform=%22translate(11120 -7017)%22 fill=%22none%22/%3E%3Cg id=%22Mask_Group_1845%22 data-name=%22Mask Group 1845%22 transform=%22translate(2673 1799)%22 clip-path=%22url(%23clip-path)%22 style=%22isolation: isolate%22%3E%3Cg id=%22Group_58465%22 data-name=%22Group 58465%22 transform=%22translate(10127.81 5548.396) rotate(-155)%22%3E%3Cpath id=%22Subtraction_202%22 data-name=%22Subtraction 202%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 12365.271)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_203%22 data-name=%22Subtraction 203%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 12788.23)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_204%22 data-name=%22Subtraction 204%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 13265.096)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_205%22 data-name=%22Subtraction 205%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 13741.961)%22 opacity=%220.669%22 fill=%22url(%23linear-gradient-2)%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 100% 0%/cover no-repeat!important;position:sticky!important;top:0!important;overflow:hidden!important}
.fpg .rph-top{display:none!important}
.fpg .rph-nav{height:72px!important;padding:0 var(--gut)!important;position:absolute!important;left:0!important;top:0!important;right:0!important;z-index:6!important;display:flex!important}
.fpg .rph-nav .brand{text-decoration:none!important;display:flex!important}
.fpg .rph-nav .brand svg{width:auto!important;height:24px!important;display:block!important}
.fpg .rph-nav nav{display:flex!important}
.fpg .rph-nav nav a{font-size:14.5px!important;font-weight:400!important;color:var(--nv)!important;text-decoration:none!important}
.fpg .rph-nav .rt{margin-left:auto!important;display:flex!important}
.fpg .rph-nav .li{font-size:14.5px!important;color:var(--nv)!important;text-decoration:none!important}
.fpg .rph-nav .cta{font-size:14.5px!important;font-weight:500!important;color:#fff!important;text-decoration:none!important;padding:10px 18px!important;background:var(--nv)!important;border-radius:8px!important}
.fpg .rph-nav a:focus-visible{border-radius:4px!important}
.fpg .rph-band{height:360px!important;background:none!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:5!important}
.fpg .rph-band .in{padding:0 var(--gut)!important;position:absolute!important;left:0!important;right:0!important;bottom:79px!important;display:flex!important}
.fpg .rph-copy{text-align:left!important;max-width:900px!important}
.fpg .rph-copy .eyebrow{font-size:16px!important;line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important;font-weight:400!important;color:var(--nv)!important;margin:0 0 12px!important;display:inline-flex!important}
.fpg .rph-copy .eyebrow::before{width:26px!important;height:2px!important;background:var(--cy)!important;content:""!important}
.fpg .rph-copy h1 .hl{color:var(--cy)!important}
.fpg .rph-copy h1{font-size:clamp(28px,3.1vw,44px)!important;line-height:1.12!important;font-weight:600!important;color:var(--nv)!important;margin:0 0 12px!important;max-width:40ch!important}
.fpg .rph-copy .sub{font-size:clamp(15px,1.15vw,17px)!important;line-height:1.6!important;color:rgba(0,35,71,.78)!important;margin:0!important;max-width:56ch!important}
.fpg .rph-refs{color:var(--nv)!important;display:flex!important}
.fpg .rph-refs .lab{font-size:11.5px!important;letter-spacing:.14em!important;text-transform:uppercase!important;font-weight:600!important;color:rgba(0,35,71,.62)!important}
.fpg .rph-refs ul{margin:0!important;padding:0!important;list-style:none!important;display:flex!important}
.fpg .rph-refs li{height:22px!important}
.fpg .rph-refs svg{width:100%!important;height:100%!important;display:block!important}
.fpg .rph-stage{position:absolute!important;inset:0!important}
.fpg .rph-zoom{height:calc(100% + 200px)!important;position:absolute!important;left:0!important;top:0!important;right:0!important}
.fpg .rph-film,.fpg .rph-poster,.fpg .rph-seq{width:100%!important;height:100%!important;position:absolute!important;display:block!important;inset:0!important}
.fpg .rph-seq{display:none!important}
.fpg .rph.seq .rph-seq{display:block!important}
.fpg .rph.seq .rph-film{display:none!important}
@media (max-width:780px){.fpg .rph-scroller{height:280vh!important}}
@media (max-width:780px){.fpg .rph-pin{height:100vh!important}}
@media (max-width:780px){.fpg .rph-nav{height:60px!important;padding:0 18px!important}}
@media (max-width:780px){.fpg .rph-nav nav,.fpg .rph-nav .li{display:none!important}}
@media (max-width:780px){.fpg .rph-nav .cta{font-size:13.5px!important;padding:9px 14px!important}}
@media (max-width:780px){.fpg .rph-band{height:322px!important}}
@media (max-width:780px){.fpg .rph-band .in{bottom:80px!important;display:block!important}}
@media (max-width:780px){.fpg .rph-copy{max-width:none!important}}
@media (max-width:780px){.fpg .rph-copy h1{font-size:26px!important}}
@media (max-width:780px){.fpg .rph-copy .sub{max-width:none!important}}
@media (max-width:780px){.fpg .rph-refs{display:none!important}}
@media (max-width:780px){.fpg .rph.seq .rph-scroller{height:280vh!important}}
@media (max-width:780px){.fpg .rph.seq .rph-pin{height:100vh!important}}
@media (prefers-reduced-motion:reduce){.fpg .rph-film{display:none!important}}
/* The theme header on these pages is transparent, its links are pure white and its logo file is
literally named "Logo for Dark Background": the page was built assuming a dark hero. The film
opens on a white studio frame, so every one of those measured contrast 1.00, invisible.
A scrim over the picture was tried first and rejected on sight: it left a visible grey band
across the top of the film, which reads as dirt rather than as design. The header is NOT sticky
(position:static, measured) and its own height is 0, so it only ever sits over the film's white
opening frame and never meets the navy part deeper in the scroll. That makes recolouring it for
a light background correct for its whole visible life, and leaves the film running clean to the
top edge. */
.fpg-vhero-page header a,
.fpg-vhero-page header a:visited{color:#002347!important}
.fpg-vhero-page header svg{fill:#002347!important;color:#002347!important}
.fpg-vhero-page header svg path{fill:currentColor!important}
/* The logo is an ![]()
of the white-on-dark lockup, so it cannot be recoloured. content:url swaps
it for the light-background lockup from the Drive source of truth. */
.fpg-vhero-page header img[src*="Dark%20Background"],
.fpg-vhero-page header img[src*="Dark Background"]{
content:url("https://www.retorio.com/hubfs/retorio-modules/retorio-logo-transparent.svg")}
/* The eyebrow becomes the site's section pill, the same lockup the homepage uses above its own
section headings: a navy plate with the wordmark in a light gradient, sentence case, no dash. */
.fpg .rph-copy .eyebrow{display:inline-block;padding:4px 13px;border-radius:8px;margin:0 0 18px;
background-image:linear-gradient(to right,#071938,#00468E);gap:0}
.fpg .rph-copy .eyebrow::before{content:none!important;display:none!important}
.fpg .rph-copy .eyebrow i{font-style:normal;font-size:16px;line-height:1.3;font-weight:400;
letter-spacing:normal;text-transform:none;
background-image:linear-gradient(135deg,#4EBDEF,#E4EFFE);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* The primary button gets the lit ring from the closing block: a conic gradient travelling round
the border box while the padding box stays flat navy. Same recipe, same palette. */
@property --rph-ang{syntax:"";initial-value:0deg;inherits:false}
@property --rph-off{syntax:"";initial-value:0deg;inherits:false}
@property --rph-pct{syntax:"";initial-value:6%;inherits:false}
.fpg .rph-copy .fpg-btn-1{--rph-shine:#fff;
position:relative;isolation:isolate;overflow:hidden;
color:#fff!important;border:1px solid transparent!important;border-radius:12px!important;
background:linear-gradient(#002347,#002347) padding-box,
conic-gradient(from calc(var(--rph-ang) - var(--rph-off)),
rgba(51,167,230,0), #33A7E6 var(--rph-pct), var(--rph-shine) calc(var(--rph-pct) * 2),
#33A7E6 calc(var(--rph-pct) * 3),
rgba(51,167,230,0) calc(var(--rph-pct) * 4)) border-box!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fpg .rph-copy .fpg-btn-1::after{content:"";position:absolute;left:50%;top:50%;width:100%;
aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;
background:linear-gradient(-50deg,rgba(51,167,230,0),#33A7E6,rgba(51,167,230,0));
-webkit-mask-image:radial-gradient(circle at bottom,rgba(0,35,71,0) 40%,rgba(0,35,71,1));
mask-image:radial-gradient(circle at bottom,rgba(0,35,71,0) 40%,rgba(0,35,71,1));opacity:.55}
.fpg .rph-copy .fpg-btn-1:focus-visible{outline:3px solid #33A7E6;outline-offset:4px}
.fpg .rph-copy .fpg-btn-1:is(:hover,:focus-visible){--rph-pct:22%;--rph-off:95deg}
@keyframes rph-ang{to{--rph-ang:360deg}}
@keyframes rph-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:no-preference){
.fpg .rph-copy .fpg-btn-1{transition:transform .25s cubic-bezier(0,0,.5,1);
animation:rph-ang 9s linear infinite}
.fpg .rph-copy .fpg-btn-1::after{animation:rph-spin 9s linear infinite}
.fpg .rph-copy .fpg-btn-1:hover{transform:translateY(-2px)}}
/* The page's own buttons are authored white-on-navy for the dark sections. Over the white opening
frame the secondary button was white text inside a white border. */
.fpg .rph-copy .fpg-btns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.fpg .rph-copy .fpg-btn{display:inline-block;padding:14px 26px;border-radius:10px;
font-size:16px;font-weight:500;text-decoration:none;border:1px solid transparent}
/* the primary button's paint is the ring rule above; no flat fill after it */
.fpg .rph-copy .fpg-btn-2{background:transparent!important;color:#002347!important;
border-color:rgba(0,35,71,.34)}
.rhl{--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--mut:#636262;
--ggut:max(64px,calc((100vw - 1192px) / 2));
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--nv);padding:96px 0 104px}
.rhl *,.rhl *::before,.rhl *::after{box-sizing:border-box}
.rhl,.rhl *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rhl-head{display:flex;align-items:baseline;gap:24px;padding:0 var(--ggut);margin:0 0 34px}
.rhl-head h2{margin:0;font-size:31px;line-height:1.2;font-weight:600;color:#fff}
.rhl-head .more{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
font-size:15px;font-weight:500;color:#fff;text-decoration:none;white-space:nowrap}
.rhl-head .more svg{width:14px;height:14px;flex:none}
.rhl-head .more:focus-visible{outline:2px solid var(--cy);outline-offset:4px;border-radius:4px}
/* A native scroll-snap row. Nothing advances on its own: no timer, no scroll listener, and the
dots are driven by an IntersectionObserver rooted on the track. */
.rhl-track{display:flex;gap:20px;list-style:none;margin:0;padding:0 var(--ggut);
overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--ggut);
overscroll-behavior-x:contain;scroll-behavior:smooth;scrollbar-width:none}
.rhl-track::-webkit-scrollbar{display:none}
.rhl-track:focus-visible{outline:2px solid var(--cy);outline-offset:6px;border-radius:8px}
.rhl-card{flex:0 0 calc(100vw - 2 * var(--ggut));max-width:1192px;scroll-snap-align:start}
.rhl-card:last-child{scroll-snap-align:start end}
.rhl-well{position:relative;aspect-ratio:2/1;border-radius:20px;overflow:hidden;
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
display:flex;align-items:center;justify-content:center}
.rhl-well img{width:100%;height:100%;object-fit:cover;display:block}
.rhl-well .ph{font-size:14px;color:rgba(255,255,255,.42);letter-spacing:.04em}
.rhl-cap{margin:28px 0 0;padding:0 16px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.72);
max-width:56ch}
.rhl-cap b{color:#fff;font-weight:600}
.rhl-nav{display:flex;align-items:center;gap:16px;padding:0 var(--ggut);margin:34px 0 0}
.rhl-dots{display:flex;gap:9px;list-style:none;margin:0;padding:0}
.rhl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.28)}
.rhl-dots button[aria-current="true"]{background:#fff}
.rhl-dots button:focus-visible{outline:2px solid var(--cy);outline-offset:4px}
.rhl-pad{margin-left:auto;display:flex;gap:10px}
.rhl-pad button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;
cursor:pointer}
.rhl-pad button[disabled]{opacity:.35;cursor:default}
.rhl-pad button:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.rhl-pad svg{width:17px;height:17px}
@media (max-width:780px){
.rhl{--ggut:18px;padding:56px 0 64px}
.rhl-head{flex-wrap:wrap;gap:10px;margin-bottom:24px}
.rhl-head h2{font-size:25px}
.rhl-head .more{margin-left:0}
.rhl-well{aspect-ratio:4/3}
.rhl-cap{margin-top:20px;padding:0 4px;font-size:15.5px}
.rhl-nav{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){ .rhl-track{scroll-behavior:auto} }
.rpg{--rpgmove:.32s ease;--rpgfade:.24s ease;
--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--ink:#333333;--mut:#636262;
--g2:rgba(0,35,71,.12);--g3:rgba(0,35,71,.34);
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;
background:
linear-gradient(#002347 0,rgba(0,35,71,0) 120px,rgba(0,35,71,0) calc(100% - 120px),#002347 100%),
radial-gradient(72% 56% at 24% 26%,rgba(51,167,230,.18) 0%,rgba(51,167,230,0) 62%),
radial-gradient(60% 54% at 92% 88%,rgba(0,70,142,.55) 0%,rgba(0,70,142,0) 64%),
linear-gradient(#002347,#002347);
box-sizing:border-box}
.rpg *,.rpg *::before,.rpg *::after{box-sizing:border-box}
.rpg,.rpg *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rpg-scroller{position:relative;height:150vh}
.rpg-pin{position:sticky;top:0;height:100vh;display:grid;
grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:0;align-items:center;
max-width:1240px;margin:0 auto;padding:0 24px}
.rpg-rail{align-self:center;padding-right:44px}
.rpg-rail h2{font-size:31px;line-height:1.2;font-weight:600;color:#fff;margin:0 0 10px;text-wrap:balance}
.rpg-rail .lede{font-size:16px;line-height:1.65;color:rgba(255,255,255,.74);margin:0 0 26px;max-width:40ch}
.rpg-steps{position:relative;padding-left:20px;margin-bottom:20px}
.rpg-steps::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.2)}
.rpg-steps::after{content:"";position:absolute;left:0;top:6px;height:calc(100% - 12px);width:1px;
background:var(--cy);transform:scaleY(var(--pp,0));transform-origin:top;transition:transform var(--rpgmove)}
.rpg-srow{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rpg-srow:focus-visible{outline:2px solid var(--cy);outline-offset:4px;border-radius:8px}
.rpg-srow{display:flex;align-items:center;gap:12px;height:38px;opacity:.55;
transition:opacity .24s ease}
.rpg-srow i{flex:0 0 24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
font-style:normal;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.rpg-srow b{font-size:15px;font-weight:500;color:#fff}
.rpg-srow.on{opacity:1}
.rpg-srow.on i{background:var(--cy);color:var(--nv)}
.rpg-desc{position:relative;min-height:112px;max-width:40ch}
.rpg-desc p{position:absolute;inset:0;margin:0;font-size:15.5px;line-height:1.7;
color:rgba(255,255,255,.74);opacity:0;transition:opacity var(--rpgfade)}
/* ---------- the laptop ----------
An admin builds coaching on a laptop, inside the management panel, so this frame carries the
left navigation rail that a rep never sees. 16:10, canvas 100cqw by 62.5cqw. */
.rpg-stage{align-self:center;position:relative;display:flex;justify-content:center;align-items:center}
.rpg-shell{position:relative;width:min(100%,980px);height:auto;aspect-ratio:16/10;margin:0 auto;
padding:1.1%;border-radius:1.8%/2.9%;
background:linear-gradient(147deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 8%,
rgba(255,255,255,0) 24%,rgba(255,255,255,0) 70%,rgba(255,255,255,.09) 89%,rgba(255,255,255,.28) 100%),var(--nv);
box-shadow:0 1px 2px rgba(0,35,71,.22),0 18px 38px -12px rgba(0,35,71,.38),
0 48px 88px -34px rgba(0,35,71,.34)}
.rpg-shell::after{content:"";position:absolute;inset:.7% .55%;border-radius:1.4%/2.2%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;z-index:9}
.rpg-screen{--fs-title:1.7cqw;--fs-lead:1.25cqw;--fs-body:1.1cqw;--fs-meta:.95cqw;--fs-micro:.8cqw;
position:relative;width:100%;height:100%;container-type:inline-size;background:#fff;
border-radius:1.1%/1.8%;overflow:hidden}
.rpg-a{position:absolute;will-change:transform,opacity;
transition:transform var(--rpgmove),opacity var(--rpgfade)}
.rpg-nav{position:absolute;left:0;top:0;bottom:0;width:11.5cqw;background:var(--nv);z-index:7;
padding:1.5cqw 1cqw;display:flex;flex-direction:column;gap:.25cqw}
.rpg-nav .mk{display:flex;align-items:center;gap:.5cqw;margin-bottom:1.6cqw;padding-left:.4cqw}
.rpg-nav .mk svg{width:1.9cqw;flex:0 0 1.9cqw}
.rpg-nav .mk svg path{fill:#fff}
.rpg-nav .mk span{font-size:1.15cqw;font-weight:500;color:#fff}
.rpg-nav u{font-size:.62cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.42);text-decoration:none;padding:.7cqw .4cqw .25cqw}
.rpg-nav a{display:flex;align-items:center;gap:.6cqw;font-size:.8cqw;color:rgba(255,255,255,.72);
text-decoration:none;padding:.5cqw .4cqw;border-radius:.4cqw;white-space:nowrap}
.rpg-nav a i{width:.9cqw;height:.9cqw;border-radius:.2cqw;background:rgba(255,255,255,.34);flex:0 0 .9cqw}
.rpg-nav a.on{background:rgba(255,255,255,.12);color:#fff}
.rpg-nav a.on i{background:var(--cy)}
.rpg-top{position:absolute;left:11.5cqw;right:0;top:0;height:3.9cqw;background:#fff;z-index:6;
border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 2cqw;gap:1cqw}
.rpg-top b{font-size:var(--fs-lead);font-weight:500;color:var(--bl)}
.rpg-top .rt{margin-left:auto;display:flex;align-items:center;gap:1cqw}
.rpg-top .rt s{width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--g2);display:block}
.rpg-top .rt u{width:2cqw;height:2cqw;border-radius:50%;background:var(--tint);color:var(--bl);
font-size:.75cqw;font-weight:600;text-decoration:none;display:flex;align-items:center;justify-content:center}
.rpg-back{left:14cqw;top:5.4cqw;font-size:var(--fs-meta);color:var(--bl);font-weight:500;z-index:5}
.rpg-t{left:31cqw;top:14.6cqw;width:53cqw;font-size:var(--fs-title);font-weight:600;color:var(--nv);z-index:4}
.rpg-t s{display:block;text-decoration:none;font-size:var(--fs-meta);font-weight:400;color:var(--mut);margin-top:.7cqw}
/* the five-step builder, drawn once and advanced per beat */
.rpg-steps5{left:31cqw;top:8.6cqw;width:53cqw;height:4.6cqw;z-index:4}
.rpg-steps5 s{position:absolute;top:1.5cqw;height:.14cqw;background:var(--line);display:block}
.rpg-steps5 em{position:absolute;top:.75cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;
background:#fff;border:1px solid var(--g2);color:var(--mut);font-style:normal;font-size:.7cqw;
font-weight:600;display:flex;align-items:center;justify-content:center;
transition:background .3s,border-color .3s,color .3s}
.rpg-steps5 em.on{background:var(--bl);border-color:var(--bl);color:#fff}
.rpg-steps5 em.ok{background:var(--bl);border-color:var(--bl);color:#fff}
.rpg-steps5 b{position:absolute;top:2.9cqw;font-size:var(--fs-micro);font-weight:500;color:var(--mut);
transform:translateX(-50%);white-space:nowrap}
.rpg-steps5 b.on{color:var(--nv)}
.rpg-bottom{left:11.5cqw;right:0;bottom:0;height:7cqw;background:#fff;border-top:1px solid var(--line);
display:flex;align-items:center;z-index:6}
.rpg-bottom .bk{position:absolute;left:19.5cqw;font-size:var(--fs-meta);font-weight:500;color:var(--bl);
border:1px solid var(--line);border-radius:.5cqw;padding:.7cqw 1.6cqw}
.rpg-bottom .go{position:absolute;left:61.5cqw;font-size:var(--fs-meta);font-weight:500;color:#fff;
background:var(--bl);border-radius:.5cqw;padding:.75cqw 1.8cqw;white-space:nowrap}
.rpg-veil{left:0;right:0;top:0;bottom:0;background:rgba(0,35,71,.5);z-index:10}
.rpg-modal{border-radius:.9cqw;background:#fff;z-index:11;
box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)}
.rpg-modal h4{margin:0;font-size:var(--fs-lead);font-weight:600;color:var(--nv)}
.rpg-modal p{margin:.7cqw 0 0;font-size:var(--fs-body);line-height:1.5;color:var(--mut)}
/* step 1, the route */
.rpg-route{left:27cqw;top:12cqw;width:57cqw;height:35cqw;padding:2.4cqw}
.rpg-route h4{margin-bottom:1.8cqw}
.rpg-route .row{display:flex;gap:1.6cqw}
.rpg-route .c{flex:1 1 0;border:1px solid var(--line);border-radius:.8cqw;padding:1.4cqw;min-height:23cqw;
display:flex;flex-direction:column}
.rpg-route .c.on{border-color:var(--bl);background:var(--tint);box-shadow:0 .5cqw 1.6cqw rgba(0,35,71,.12)}
.rpg-route .c .chip{align-self:flex-start;font-size:var(--fs-micro);font-weight:600;color:#fff;
background:var(--bl);border-radius:2cqw;padding:.3cqw 1cqw;margin-bottom:1cqw}
.rpg-route .c b{font-size:var(--fs-body);font-weight:600;color:var(--nv);display:block;margin-bottom:.6cqw}
.rpg-route .c span{font-size:var(--fs-micro);line-height:1.5;color:var(--mut)}
.rpg-route .c .art{height:8.4cqw;border-radius:.6cqw;background:var(--tint);margin-bottom:1.2cqw}
.rpg-route .c .art{overflow:hidden}
.rpg-route .c .art img{width:100%;height:100%;object-fit:contain;display:block}
.rpg-route .c.on .art{background:#dceaff}
/* step 2, the goals */
.rpg-stages{left:31cqw;top:22.5cqw;width:53cqw;display:flex;gap:.8cqw;z-index:4}
.rpg-stages b{font-size:var(--fs-meta);font-weight:500;color:var(--mut);border:1px solid var(--line);
border-radius:2cqw;padding:.55cqw 1.6cqw}
.rpg-stages b.on{background:var(--nv);border-color:var(--nv);color:#fff}
.rpg-quota{left:31cqw;top:27.5cqw;width:53cqw;font-size:var(--fs-micro);color:var(--mut);z-index:4}
.rpg-ghead{left:31cqw;top:31cqw;width:53cqw;display:flex;font-size:var(--fs-micro);font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
border-bottom:1px solid var(--line);padding-bottom:.6cqw;z-index:4}
.rpg-ghead u{text-decoration:none}
.rpg-ghead u:first-child{flex:1 1 auto}
.rpg-ghead u:nth-child(2){width:8cqw}
.rpg-ghead u:nth-child(3){width:12cqw}
.rpg-grow{left:31cqw;top:33.6cqw;width:53cqw;display:flex;align-items:center;font-size:var(--fs-body);
color:var(--nv);padding:1cqw 0;border-bottom:1px solid var(--line);z-index:4}
.rpg-grow i{flex:1 1 auto;font-style:normal}
.rpg-grow s{width:8cqw;text-decoration:none;color:var(--mut);font-size:var(--fs-meta)}
.rpg-grow em{width:12cqw;font-style:normal;color:var(--bl);font-size:var(--fs-meta);font-weight:500}
/* step 3, who they meet */
.rpg-people{left:31cqw;top:22cqw;width:53cqw;display:flex;gap:1.4cqw;z-index:4}
.rpg-people .c{flex:1 1 0;border:1px solid var(--line);border-radius:.8cqw;overflow:hidden;background:#fff}
.rpg-people .c.on{border-color:var(--bl);box-shadow:0 .5cqw 1.6cqw rgba(0,35,71,.12)}
/* One backdrop for the counterpart cards and the session cards. The box is square because the
sources are 420x408: the old 1.73 landscape box cut every head at the hair line. The photo is
OPAQUE and the backdrop is strictly behind it. It used to be multiplied onto the backdrop, which
let the grey take the tint but also made every backdrop shape show THROUGH the figure: a stroked
ring at r41 from cx79 ran straight across all three faces, since heads span 24-76% of the width.
Blending is the only way a backdrop can reach the figure, so blending is off and the backdrop is
only seen behind the card. Keying the studio grey out to get real alpha was rejected: corner std
is 25-40 and the curly hair reaches the frame edge, so a matte would eat hair and leave a halo. */
.rpg-people .c .ph,.rpg-cards .c .ph{position:relative;overflow:hidden;height:auto;aspect-ratio:1/1;
background:radial-gradient(62% 56% at 88% 10%,rgba(0,70,142,.135),rgba(0,70,142,0) 72%),
radial-gradient(46% 42% at 4% 99%,rgba(51,167,230,.17),rgba(51,167,230,0) 72%),
linear-gradient(165deg,#F4F8FF 0%,#DCE9FB 100%)}
.rpg-people .c .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
display:block}
.rpg-people .c .m{padding:1cqw}
.rpg-people .c b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--nv)}
.rpg-people .c span{display:block;font-size:var(--fs-micro);color:var(--mut);margin-top:.3cqw}
.rpg-people .c .tag{display:inline-block;margin-top:.7cqw;font-size:var(--fs-micro);color:var(--bl);
background:var(--tint);border-radius:2cqw;padding:.25cqw .8cqw}
.rpg-who{left:31cqw;top:48.6cqw;width:53cqw;font-size:var(--fs-meta);color:var(--nv);z-index:4;
border:1px solid var(--line);border-radius:.6cqw;padding:.9cqw 1.2cqw;background:var(--tint)}
.rpg-who b{font-weight:600}
/* steps 4 and 5, the seven sub-steps */
.rpg-steps7{left:31cqw;top:19.6cqw;width:53cqw;height:4.4cqw;z-index:4}
.rpg-steps7 s{position:absolute;top:1.2cqw;height:.12cqw;background:var(--line);display:block}
.rpg-steps7 em{position:absolute;top:.55cqw;width:1.3cqw;height:1.3cqw;border-radius:50%;background:#fff;
border:1px solid var(--g2);color:var(--mut);font-style:normal;font-size:.62cqw;font-weight:600;
display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,color .3s}
.rpg-steps7 em.on,.rpg-steps7 em.ok{background:var(--bl);border-color:var(--bl);color:#fff}
.rpg-steps7 b{position:absolute;top:2.3cqw;font-size:.66cqw;color:var(--mut);transform:translateX(-50%);
white-space:nowrap}
.rpg-steps7 b.on{color:var(--nv);font-weight:500}
.rpg-brief{left:31cqw;top:26cqw;width:53cqw;z-index:4}
.rpg-brief label{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--nv);margin-bottom:.45cqw}
.rpg-brief .box{border:1px solid var(--g2);border-radius:.5cqw;padding:.9cqw 1cqw;height:6cqw;
font-size:var(--fs-meta);color:var(--nv);line-height:1.5;overflow:hidden}
.rpg-gen{left:31cqw;width:53cqw;z-index:4}
.rpg-gen .hd{display:flex;align-items:center;gap:1cqw;margin-bottom:.45cqw}
.rpg-gen label{font-size:var(--fs-micro);font-weight:600;color:var(--nv)}
.rpg-gen .tone{margin-left:auto;display:flex;gap:.4cqw}
.rpg-gen .tone s{text-decoration:none;font-size:.7cqw;color:var(--mut);border:1px solid var(--line);
border-radius:2cqw;padding:.2cqw .8cqw}
.rpg-gen .tone s.on{background:var(--nv);border-color:var(--nv);color:#fff}
.rpg-gen .box{border:1px solid var(--g2);border-radius:.5cqw;padding:.85cqw 1cqw;
font-size:var(--fs-meta);color:var(--nv);line-height:1.5;height:5.6cqw;overflow:hidden}
.rpg-g1{top:34.5cqw}
.rpg-g2{top:43cqw}
.rpg-sg1{top:26cqw}
.rpg-sg2{top:34.5cqw}
.rpg-sg3{top:43cqw}
.rpg-gen .box{position:relative}
.rpg-spark{position:absolute;right:.8cqw;bottom:.6cqw;font-size:.66cqw;color:var(--bl);font-weight:600;
letter-spacing:.08em}
.rpg-name{left:42cqw;top:20cqw;width:28cqw;padding:2cqw}
.rpg-name .box{margin-top:1.2cqw;border:1px solid var(--g2);border-radius:.5cqw;padding:.8cqw 1cqw;
font-size:var(--fs-meta);color:var(--nv)}
.rpg-name .act{margin-top:1.6cqw;display:flex;justify-content:center}
.rpg-name .act b{font-size:var(--fs-meta);color:#fff;background:var(--bl);border-radius:.5cqw;
padding:.65cqw 2cqw;font-weight:500}
.rpg-cards{left:31cqw;top:22cqw;width:53cqw;display:flex;gap:1.4cqw;z-index:4}
.rpg-cards .c{flex:1 1 0;border:1px solid var(--line);border-radius:.8cqw;overflow:hidden;background:#fff}
.rpg-cards .c .ph svg{position:absolute;left:50%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);
fill:none;stroke:var(--bl);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rpg-cards .c .ph svg .f{fill:#fff}
.rpg-cards .c .badge{position:absolute;right:.7cqw;top:.7cqw;font-size:.68cqw;font-weight:600;
border-radius:2cqw;padding:.22cqw .8cqw;background:#F6C544;color:#5a4200}
.rpg-cards .c.new .badge{background:#1B7A34;color:#fff}
.rpg-cards .c .m{padding:1cqw}
.rpg-cards .c .kind{display:inline-block;font-size:.68cqw;color:var(--bl);background:var(--tint);
border-radius:2cqw;padding:.2cqw .7cqw;margin-bottom:.5cqw}
.rpg-cards .c b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--nv)}
/* ---------- per actor state table ----------
Six beats. The chrome (nav, top bar) is not an actor: it never moves. */
.rpg-back{--o1:1;--o2:1;--o3:1;--o4:1;--o5:1;--o6:0}
.rpg-steps5{--o1:1;--o2:1;--o3:1;--o4:1;--o5:1;--o6:0}
.rpg-t2{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rpg-t3{--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0}
.rpg-t4{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0}
.rpg-t5{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0}
.rpg-t6{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1}
.rpg-bottom{--o1:0;--o2:1;--o3:1;--o4:1;--o5:1;--o6:0}
.rpg-stages{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rpg-quota{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rpg-ghead{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rpg-grow{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0;--s1:translateY(2cqw)}
.rpg-people{--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s2:translateY(3cqw)}
.rpg-who{--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s2:translateY(3cqw)}
.rpg-steps7{--o1:0;--o2:0;--o3:0;--o4:1;--o5:1;--o6:0}
.rpg-brief{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0}
.rpg-g1{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0;--s3:translateY(2.5cqw)}
.rpg-g2{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0;--s3:translateY(3.5cqw)}
.rpg-sg1{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0;--s4:translateY(2cqw)}
.rpg-sg2{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0;--s4:translateY(2.6cqw)}
.rpg-sg3{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0;--s4:translateY(3.2cqw)}
.rpg-cards{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1;--s5:translateY(3cqw)}
.rpg-veil{--o1:1;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0}
.rpg-route{--o1:1;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0;--s2:translateY(-2cqw)}
.rpg-name{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0}
@media (max-width:780px){
.rpg{padding:0}
.rpg-stage{display:block}
.rpg-rail{padding:0 18px}
.rpg-rail h2{font-size:25px}
.rpg-scroller{height:auto}
.rpg-pin{position:static;height:auto;display:block;max-width:none;padding:0}
.rpg-steps,.rpg-desc{display:none}
.rpg-mstep{margin:0 0 40px}
.rpg-mstep .mh{display:flex;align-items:center;gap:12px;margin:0 18px 8px}
.rpg-mstep .mh i{flex:0 0 26px;height:26px;border-radius:50%;background:var(--cy);color:var(--nv);
font-style:normal;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.rpg-mstep .mh b{font-size:18px;font-weight:600;color:#fff}
.rpg-mstep > p{margin:0 18px 14px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.74)}
.rpg-mwrap{position:relative;overflow:hidden;background:#fff}
.rpg-mwrap .rpg-shell{width:100%;height:auto;aspect-ratio:16/10;margin:0;padding:0;background:none;
border-radius:0;box-shadow:none;transform-origin:0 0}
.rpg-mwrap .rpg-shell::after{display:none}
/* No type override here. The boxes are sized in cqw and the text is not, so lifting one and not
the other is what made the copy run out of its own field. The crop does the magnifying
instead: a tighter crop raises every cqw, text and box together. */
.rpg-mwrap .rpg-screen{width:100%;height:100%;border-radius:0}
/* the content column is narrowed for the still, so a tight crop can show a whole field
instead of cutting its sentences in half */
.rpg-mwrap .rpg-t,.rpg-mwrap .rpg-brief,.rpg-mwrap .rpg-gen,.rpg-mwrap .rpg-stages,
.rpg-mwrap .rpg-quota,.rpg-mwrap .rpg-ghead,.rpg-mwrap .rpg-grow,.rpg-mwrap .rpg-people,
.rpg-mwrap .rpg-who,.rpg-mwrap .rpg-cards,.rpg-mwrap .rpg-steps7{width:41cqw}
.rpg-mwrap .rpg-gen .box{height:auto;min-height:5.6cqw}
.rpg-mwrap .rpg-brief .box{height:auto;min-height:6cqw}
/* the square portrait box scales with the narrowed column, so the phone's cards end 3cqw higher
than the desktop's and the group strip follows them: 2.6cqw under the cards on both */
.rpg-mwrap .rpg-who{top:45.2cqw}
.rpg-a{animation:none!important}
}
.fpg .rpa,.fpg .rpg,.fpg .rpp,.fpg .rps,.fpg .rpm{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important;max-width:100vw!important}.fpg .rpa>*,.fpg .rpg>*,.fpg .rpp>*,.fpg .rps>*,.fpg .rpm>*{max-width:1240px;margin-left:auto;margin-right:auto}
/* ---------- hero: one scroll-bound film, above the sequence ---------- */
/* Opened on its own, this fragment inherits the browser's default 8px body margin, which reads as
a white frame around the dark hero. Scoped with :has so it only fires when the module IS the
document; on a host page .rph is not the body's first child and the rule never applies, so no
global margin is touched. A 100vw full-bleed was rejected: it overflows by the scrollbar width
on systems with classic scrollbars, which would be a real bug on the live page. */
body:has(> .rph){margin:0}
.rph{--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--mut:#636262;
--gut:max(24px,calc((100vw - 1192px) / 2));
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative}
.rph *{box-sizing:border-box}
.rph,.rph *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rph-scroller{position:relative;height:340vh}
.rph-pin{position:sticky;top:0;height:100vh;overflow:hidden;
background:var(--nv) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%221920%22 height=%221080%22 viewBox=%220 0 1920 1080%22%3E%3Cdefs%3E%3ClinearGradient id=%22linear-gradient%22 x1=%220.5%22 y1=%221.014%22 x2=%220.893%22 y2=%22-0.145%22 gradientUnits=%22objectBoundingBox%22%3E%3Cstop offset=%220%22 stop-color=%22%23052347%22/%3E%3Cstop offset=%220.179%22 stop-color=%22%23052347%22/%3E%3Cstop offset=%220.299%22 stop-color=%22%2305254a%22/%3E%3Cstop offset=%220.345%22 stop-color=%22%2305254a%22/%3E%3Cstop offset=%220.575%22 stop-color=%22%23072e5e%22/%3E%3Cstop offset=%221%22 stop-color=%22%230c468e%22/%3E%3C/linearGradient%3E%3CclipPath id=%22clip-path%22%3E%3Crect id=%22Rectangle_27003%22 data-name=%22Rectangle 27003%22 width=%221920%22 height=%22902%22 transform=%22translate(8447 -8816)%22 fill=%22%23fff%22/%3E%3C/clipPath%3E%3ClinearGradient id=%22linear-gradient-2%22 x1=%220.082%22 y1=%220.5%22 x2=%220.97%22 y2=%220.481%22 gradientUnits=%22objectBoundingBox%22%3E%3Cstop offset=%220%22 stop-color=%22%231e73ee%22/%3E%3Cstop offset=%221%22 stop-color=%22%2300468e%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id=%22Group_58468%22 data-name=%22Group 58468%22 transform=%22translate(-11120 7017)%22%3E%3Cg id=%22Group_58467%22 data-name=%22Group 58467%22%3E%3Cg id=%22Group_58466%22 data-name=%22Group 58466%22%3E%3Crect id=%22Rectangle_26998%22 data-name=%22Rectangle 26998%22 width=%221920%22 height=%221080%22 transform=%22translate(11120 -7017)%22 fill=%22url(%23linear-gradient)%22/%3E%3Cpath id=%22Rectangle_26998_-_Outline%22 data-name=%22Rectangle 26998 - Outline%22 d=%22M1,1V1079H1919V1H1M0,0H1920V1080H0Z%22 transform=%22translate(11120 -7017)%22 fill=%22none%22/%3E%3Cg id=%22Mask_Group_1845%22 data-name=%22Mask Group 1845%22 transform=%22translate(2673 1799)%22 clip-path=%22url(%23clip-path)%22 style=%22isolation: isolate%22%3E%3Cg id=%22Group_58465%22 data-name=%22Group 58465%22 transform=%22translate(10127.81 5548.396) rotate(-155)%22%3E%3Cpath id=%22Subtraction_202%22 data-name=%22Subtraction 202%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 12365.271)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_203%22 data-name=%22Subtraction 203%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 12788.23)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_204%22 data-name=%22Subtraction 204%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 13265.096)%22 fill=%22%2300132b%22 opacity=%220.16%22/%3E%3Cpath id=%22Subtraction_205%22 data-name=%22Subtraction 205%22 d=%22M163.339,699.188h0l-159.717,0c-1.234-2.213-2.451-4.413-3.618-6.539,7.2-13.792,20.257-37.1,41.567-69.8,20.738-31.828,44.086-64.55,69.4-97.257,30.149-38.961,62.507-77.108,96.175-113.383A1590.13,1590.13,0,0,1,329.044,294.029C429.607,206.651,536.2,137.54,645.848,88.616c30.838-13.759,62.343-26.088,93.642-36.645a1011.144,1011.144,0,0,1,99.156-27.928,967.166,967.166,0,0,1,428.663,0,1011.087,1011.087,0,0,1,99.157,27.928c31.3,10.556,62.8,22.885,93.642,36.645,109.653,48.924,216.243,118.035,316.807,205.414a1590.088,1590.088,0,0,1,121.907,118.178c33.667,36.271,66.026,74.419,96.177,113.383,25.305,32.7,48.654,65.422,69.4,97.257,11.765,18.056,28.528,44.822,41.569,69.8-1.2,2.189-2.419,4.388-3.618,6.537h-159.7c1.221-1.788,2.518-3.7,3.853-5.68-10.646-17.306-24.906-37.933-41.24-59.648-19.5-25.92-41.229-52.486-64.591-78.96-27.283-30.916-56.329-61.152-86.33-89.868C1720,432.16,1684.18,401.081,1647.88,372.656c-86.268-67.553-176.051-120.929-266.856-158.646-25.4-10.551-51.236-20-76.776-28.1-26.632-8.437-53.682-15.627-80.4-21.37a830.467,830.467,0,0,0-83.818-13.592,797.458,797.458,0,0,0-174.076,0,830.435,830.435,0,0,0-83.819,13.592c-26.717,5.742-53.767,12.932-80.4,21.37-25.544,8.093-51.375,17.546-76.776,28.1C634.154,251.73,544.37,305.107,458.1,372.659c-36.3,28.427-72.121,59.506-106.459,92.373-30.005,28.719-59.051,58.955-86.331,89.868-23.36,26.47-45.091,53.036-64.59,78.959-16.333,21.714-30.593,42.339-41.237,59.645,1.224,1.817,2.52,3.729,3.852,5.68Z%22 transform=%22translate(4781.977 13741.961)%22 opacity=%220.669%22 fill=%22url(%23linear-gradient-2)%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 100% 0%/cover no-repeat}
/* site header, so the hero reads as a page rather than a floating module */
/* The box opens upward as the reader scrolls, so bright film slides under the header while the
header is still partly visible. A navy scrim keeps the chrome readable through that window. It
rides with the header, so it leaves when the header leaves. */
.rph-top{display:none}
.rph-nav{position:absolute;left:0;right:0;top:0;height:72px;z-index:6;
padding:0 var(--gut);display:flex;align-items:center;gap:34px;
will-change:opacity,transform}
.rph-nav .brand{display:flex;align-items:center;text-decoration:none}
/* the lockup from docs/sot/drive-pulled/assets/retorio-logo-transparent.svg, in its own colours.
Nothing here may set a fill: the asset is the authority for how the mark is coloured. */
.rph-nav .brand svg{height:24px;width:auto;display:block}
.rph-nav nav{display:flex;gap:26px}
.rph-nav nav a{font-size:14.5px;font-weight:400;color:var(--nv);text-decoration:none}
.rph-nav .rt{margin-left:auto;display:flex;align-items:center;gap:20px}
.rph-nav .li{font-size:14.5px;color:var(--nv);text-decoration:none}
.rph-nav .cta{font-size:14.5px;font-weight:500;color:#fff;background:var(--nv);text-decoration:none;
padding:10px 18px;border-radius:8px}
.rph-nav a:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:4px}
/* No band. The copy sits straight on the film, which is a bright studio wall where it lands,
so navy stays readable. The harness measures the film under every line rather than assuming it. */
.rph-band{position:absolute;left:0;right:0;bottom:0;height:360px;z-index:5;background:none;
pointer-events:none;will-change:opacity,transform}
/* The copy sits in the bright part of the frame. Below roughly 90px from the bottom the film is
the subject's dark clothing, where navy stops being readable, so the block stops short of it. */
.rph-band .in{position:absolute;left:0;right:0;bottom:79px;padding:0 var(--gut);
display:flex;align-items:flex-end;gap:32px}
.rph-copy{flex:1 1 auto;max-width:900px;text-align:left}
/* Homepage light-section variant, measured off / : "Rooted in Science" is plain navy text at
16px/1.3 regular in sentence case with NO plate. Only the dark sections get the ::before plate.
Colour left as the module had it. */
.rph-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:400;
line-height:1.3;letter-spacing:normal;text-transform:none;color:var(--nv);margin:0 0 12px}
.rph-copy .eyebrow::before{content:"";width:26px;height:2px;background:var(--cy);flex:none}
.rph-copy h1 .hl{color:var(--cy)}
.rph-copy h1{margin:0 0 12px;max-width:40ch;font-size:clamp(28px,3.1vw,44px);line-height:1.12;
font-weight:600;color:var(--nv);text-wrap:balance}
.rph-copy .sub{margin:0;max-width:56ch;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(0,35,71,.78)}
/* The customer strip from the home page. Those files ship filled white for the navy band there,
so they are inlined and painted with currentColor instead, which is the only way to recolour an
SVG the page does not own. Widths are set per logo from the viewBox so one height does not make
the wide wordmarks tower over the narrow ones. */
.rph-refs{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px;color:var(--nv)}
.rph-refs .lab{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:rgba(0,35,71,.62)}
.rph-refs ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.rph-refs li{flex:0 0 auto;height:22px;opacity:.82}
.rph-refs svg{display:block;width:100%;height:100%}
/* The film is the hero's background: full bleed from the start, edge to edge, with the header
scrim and the copy band over it. No box, so nothing opens. */
.rph-stage{position:absolute;inset:0}
/* The layer runs 200px past the bottom of the pin, which clips it. The film is slid up to put
the subject's head in the readable window, and without that overhang the slide exposed the
pin's navy under the film: 7px at 900 tall, 38px at 720, and a whole band once a stale
measurement made the slide larger. */
.rph-zoom{position:absolute;top:0;left:0;right:0;height:calc(100% + 200px);
will-change:transform;transform:scale(1)}
.rph-film,.rph-poster,.rph-seq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rph-film{opacity:0;transition:opacity .35s linear}
.rph-film.ready{opacity:1}
.rph-seq{display:none}
.rph.seq .rph-seq{display:block}
.rph.seq .rph-film{display:none}
@media (max-width:780px){
/* One runway for both modes. 100vh here left the mp4 path with no scroll to scrub,
so a narrow non-touch window showed a frozen hero. */
.rph-scroller{height:280vh}
.rph-pin{height:100vh}
.rph-nav{height:60px;padding:0 18px;gap:0}
.rph-nav nav,.rph-nav .li{display:none}
.rph-nav .cta{padding:9px 14px;font-size:13.5px}
/* Same structure as the desktop hero: the film is the background, the scrim keeps the logo and
the CTA readable, and the copy sits on solid navy at the bottom. Only the sizes change. The
pill is dropped because it is 354px wide and a 375px screen has no room for it. */
.rph-band{height:322px}
.rph-band .in{bottom:80px;display:block}
.rph-copy{max-width:none}
/* 28px leaves "it." alone on a fourth line at 375px. 26px balances to three. */
.rph-copy h1{font-size:26px}
.rph-copy .sub{max-width:none}
/* Measured: the readable band of this film on a 375px screen is about 190px tall and the copy
alone is 204px. A logo strip below it pushes the headline onto the subject's shadowed collar,
where navy falls to 2.0. The strip is dropped here rather than made unreadable. */
.rph-refs{display:none}
.rph.seq .rph-scroller{height:280vh}
.rph.seq .rph-pin{height:100vh}
}
@media (prefers-reduced-motion:reduce){ .rph-film{display:none} }
.rps{
/* One scroll gesture, one step. The six states come from the --s1..--s6 tables below; the move
between them is a transition, so nothing advances unless the reader scrolls. */
--rpsmove:.32s ease;--rpsfade:.24s ease;
--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--ink:#333333;--mut:#636262;
--g1:rgba(0,35,71,.06);--g2:rgba(0,35,71,.12);--g3:rgba(0,35,71,.34);--g4:rgba(0,35,71,.55);
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;
/* The home page states its ground as 135deg #00468E to #33A7E6. Behind a full section of white
text that is far too bright, so the same two hues are used at depth: a cyan bloom where the
phone sits, a blue one under the rail, over a navy that never lifts above #00468E. */
background:
linear-gradient(#002347 0,rgba(0,35,71,0) 120px,rgba(0,35,71,0) calc(100% - 120px),#002347 100%),
radial-gradient(76% 58% at 76% 30%,rgba(51,167,230,.22) 0%,rgba(51,167,230,0) 62%),
radial-gradient(64% 56% at 6% 92%,rgba(0,70,142,.60) 0%,rgba(0,70,142,0) 64%),
linear-gradient(135deg,rgba(0,70,142,0) 0%,rgba(0,70,142,.45) 50%,rgba(0,70,142,0) 100%),
linear-gradient(#002347,#002347);
box-sizing:border-box}
.rps *,.rps *::before,.rps *::after{box-sizing:border-box}
.rps,.rps *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* One gesture, one step, whatever the size of the gesture. That cannot be read off scroll
position, because a flick crosses any number of thresholds at once, so while the section is
pinned the wheel is taken over and each gesture is counted rather than measured. The runway is
only what the pin needs to engage and to let go. */
.rps-scroller{position:relative;height:150vh}
.rps-pin{position:sticky;top:0;height:100vh;display:grid;
grid-template-columns:minmax(300px,1fr) minmax(0,1fr);gap:48px;align-items:center;
max-width:1240px;margin:0 auto;padding:0 24px}
.rps-sents{position:absolute;inset:0;pointer-events:none}
.rps-sent{height:70vh}
/* ---------- left rail ---------- */
.rps-rail{align-self:center}
.rps-rail h2{font-size:31px;line-height:1.2;font-weight:600;color:#fff;margin:0 0 10px;text-wrap:balance}
.rps-rail .lede{font-size:16px;line-height:1.65;color:rgba(255,255,255,.74);margin:0 0 26px;max-width:40ch}
.rps-steps{position:relative;padding-left:20px;margin-bottom:20px}
.rps-steps::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.2)}
.rps-steps::after{content:"";position:absolute;left:0;top:6px;height:calc(100% - 12px);width:1px;
background:var(--cy);transform:scaleY(var(--pp,0));transform-origin:top;
transition:transform var(--rpsmove)}
.rps-srow{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rps-srow:focus-visible{outline:2px solid var(--cy);outline-offset:4px;border-radius:8px}
.rps-srow{display:flex;align-items:center;gap:12px;height:38px;opacity:.55;
transition:opacity .24s ease}
.rps-srow i{flex:0 0 24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
font-style:normal;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.rps-srow b{font-size:15px;font-weight:500;color:#fff}
.rps-srow.on{opacity:1}
.rps-srow.on i{background:var(--cy);color:var(--nv)}
.rps-desc{position:relative;min-height:108px;max-width:40ch}
.rps-desc p{position:absolute;inset:0;margin:0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.74);opacity:0;
transition:opacity var(--rpsfade)}
.rps-desc p:nth-child(1){--o1:1;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-desc p:nth-child(2){--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-desc p:nth-child(3){--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0}
.rps-desc p:nth-child(4){--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0}
.rps-desc p:nth-child(5){--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0}
.rps-desc p:nth-child(6){--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1}
/* ---------- shell ----------
MAIN x 3..59 SIDE x 62..97 header 0..7.2 crumb 8.6..12 tabs 12.6..17.2 content 19..67 */
.rps-stage{align-self:center;position:relative;display:flex;justify-content:center;align-items:center}
.rps-stage::before,.rps-stage::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;
pointer-events:none}
.rps-stage::before{width:470px;height:470px;background:rgba(255,255,255,.04);
transform:translate(calc(-50% - 40px),calc(-50% - 40px))}
.rps-stage::after{display:none}
/* Device frame. A single percentage radius on a 9:19 box gives elliptical corners (25px across,
52px down), which is what made the old frame read as a stretched rectangle. Percentages here are
paired so both radii resolve to the same number of pixels: 11.5% of the width equals 5.45% of the
height at this aspect. The metal is the brand navy with white at low alpha for the rim light. */
.rps-shell{position:relative;height:min(78vh,740px);width:auto;max-width:100%;aspect-ratio:9/19;
/* padding percentages resolve against the CONTAINING block's width, not the device's, so a
percentage bezel tracked the column instead of the phone. Tie it to the device height, which is
what sets the device's size: bezel = 2.4% of width = 1.137% of height. */
margin:0 auto;padding:min(0.887vh,8.4px);border-radius:11.5%/5.45%;
background:linear-gradient(147deg,
rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 8%,rgba(255,255,255,0) 24%,
rgba(255,255,255,0) 70%,rgba(255,255,255,.09) 89%,rgba(255,255,255,.28) 100%),var(--nv);
box-shadow:0 1px 2px rgba(0,35,71,.22),0 18px 38px -12px rgba(0,35,71,.38),
0 48px 88px -34px rgba(0,35,71,.34)}
/* inset percentages resolve against width horizontally and height vertically, so a single
value puts the rim twice as far from the top as from the side on a 9:19 box */
.rps-shell::after{content:"";position:absolute;inset:min(0.522vh,4.95px);border-radius:10.4%/4.85%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;z-index:8}
/* Six steps, and nothing between them. Before this the screen carried 21 sizes with six of them
inside a 0.8cqw band, which reads as drift rather than hierarchy. */
.rps-screen{--fs-hero:12.4cqw;--fs-title:5cqw;--fs-lead:4cqw;--fs-body:3.5cqw;--fs-meta:2.9cqw;
--fs-micro:2.5cqw;
position:relative;width:100%;height:100%;container-type:inline-size;
background:#fff;border-radius:9.5%/4.4%;overflow:hidden}
.rps-stat{position:absolute;left:0;right:0;top:0;height:11cqw;display:flex;align-items:center;
padding:0 6cqw;font-size:var(--fs-meta);font-weight:500;color:var(--nv);z-index:9}
.rps-stat .sig{margin-left:auto;display:flex;align-items:flex-end;gap:.9cqw}
.rps-stat .sig s{width:1.1cqw;background:var(--nv);display:block;border-radius:.3cqw}
.rps-stat .sig s:nth-child(1){height:1.6cqw}
.rps-stat .sig s:nth-child(2){height:2.4cqw}
.rps-stat .sig s:nth-child(3){height:3.2cqw}
.rps-stat .bat{width:6cqw;height:3cqw;border:1px solid var(--g3);border-radius:.8cqw;margin-left:1.4cqw;
position:relative}
.rps-stat .bat i{position:absolute;left:.5cqw;top:.5cqw;bottom:.5cqw;width:60%;background:var(--nv);
border-radius:.4cqw;display:block}
.rps-home{position:absolute;left:32cqw;bottom:1.6cqw;width:36cqw;height:1.2cqw;border-radius:1cqw;
background:var(--g2);z-index:9}
.rps-a{position:absolute;will-change:transform,opacity;
transition:transform var(--rpsmove),opacity var(--rpsfade)}
.rps-hdr{left:0;right:0;top:11cqw;height:14cqw;display:flex;align-items:center;gap:2.4cqw;
padding:0 6cqw;border-bottom:1px solid var(--line);background:#fff;z-index:6}
.rps-hdr svg{width:7cqw;flex:0 0 7cqw}
.rps-hdr .wm{font-size:var(--fs-lead);font-weight:500;color:var(--nv)}
.rps-hdr .rt{margin-left:auto;display:flex;align-items:center;gap:2.6cqw}
.rps-hdr .rt s{width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--g2);display:block}
.rps-hdr .rt u{width:6.4cqw;height:6.4cqw;border-radius:50%;background:var(--tint);color:var(--bl);
font-size:var(--fs-meta);font-weight:600;text-decoration:none;display:flex;align-items:center;justify-content:center}
.rps-crumb{left:6cqw;top:27cqw;height:7cqw;display:flex;align-items:center;font-size:var(--fs-meta);color:var(--bl);z-index:5}
.rps-crumb b{color:var(--nv);font-weight:600}
.rps-tabs{left:6cqw;top:100cqw;height:8cqw;display:flex;align-items:center;gap:7cqw;z-index:5}
.rps-tabs span{font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;color:var(--mut);text-transform:uppercase}
.rps-tabs span.on{color:var(--bl)}
.rps-ink{left:6cqw;top:107.6cqw;height:.6cqw;width:20cqw;background:var(--bl);border-radius:1cqw;
transform-origin:0 50%;z-index:5}
/* beat 1 */
.rps-pills{left:6cqw;top:29cqw;display:flex;gap:2cqw;z-index:4}
.rps-pills b{font-size:var(--fs-meta);font-weight:400;padding:1.5cqw 3cqw;border-radius:4cqw;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.rps-pills b.on{background:var(--bl);color:#fff;border-color:var(--bl)}
.rps-card{left:6cqw;top:41cqw;width:88cqw;height:80cqw;border:1.5px solid var(--bl);border-radius:3cqw;
background:#fff;padding:4cqw;z-index:4}
.rps-card .top{display:flex;gap:3.4cqw;align-items:flex-start;margin-bottom:3cqw}
.rps-card h4{margin:0 0 1.6cqw;font-size:var(--fs-title);font-weight:600;color:var(--nv);line-height:1.22}
.rps-card .tag{display:inline-block;font-size:var(--fs-meta);padding:.9cqw 2.4cqw;border-radius:4cqw;background:var(--tint);color:var(--bl)}
.rps-card p{margin:0 0 3.4cqw;font-size:var(--fs-body);line-height:1.5;color:var(--mut)}
.rps-card .go{display:block;text-align:center;background:var(--bl);color:#fff;font-size:var(--fs-meta);font-weight:500;
letter-spacing:.06em;padding:3cqw;border-radius:2cqw}
.rps-gh{width:88cqw;height:78cqw;border:1px solid var(--line);border-radius:3cqw;padding:4cqw;z-index:3}
.rps-gh s{display:block;background:var(--g1);border-radius:1cqw}
.rps-gh .th{width:20cqw;height:26cqw;border-radius:1.6cqw;margin-bottom:3cqw}
.rps-gh .l1{height:3.4cqw;width:60%;margin-bottom:1.8cqw}
.rps-gh .l2{height:2.8cqw;width:34%;margin-bottom:3.4cqw}
.rps-gh .l3{height:2.2cqw;width:92%;margin-bottom:1.6cqw}
.rps-gh .l4{height:2.2cqw;width:86%;margin-bottom:3.4cqw}
.rps-gh .btn{height:8cqw;width:100%;border-radius:2cqw}
.rps-ghA{left:6cqw;top:126cqw}.rps-ghB{left:6cqw;top:209cqw}
/* video group, base is beat 2 */
.rps-vid{left:0;top:11cqw;width:100cqw;height:134cqw;overflow:hidden;
background:var(--nv);transform-origin:0 0;z-index:4}
.rps-vid img,.rps-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rps-vid video{opacity:0;transition:opacity var(--rpsfade);
--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-vname{left:4cqw;top:15cqw;font-size:var(--fs-meta);color:rgba(255,255,255,.92);z-index:5;
background:rgba(0,35,71,.55);padding:1.2cqw 2.4cqw;border-radius:1.4cqw}
.rps-pip{left:66cqw;top:15cqw;width:30cqw;height:22.5cqw;border-radius:1.8cqw;overflow:hidden;
background:linear-gradient(150deg,var(--bl),var(--nv));border:1px solid rgba(255,255,255,.3);
transform-origin:0 0;z-index:5}
.rps-pip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rps-pip u{position:absolute;left:2cqw;top:1.4cqw;font-size:var(--fs-micro);color:rgba(255,255,255,.88);text-decoration:none}
.rps-sub{left:4cqw;top:104cqw;width:92cqw;background:rgba(0,35,71,.78);border-radius:2cqw;
padding:3cqw 3.4cqw;font-size:var(--fs-lead);line-height:1.4;color:#fff;z-index:5}
.rps-disc{left:4cqw;top:133cqw;width:92cqw;text-align:center;font-size:var(--fs-micro);color:rgba(255,255,255,.82);z-index:5}
.rps-ctl{left:0;top:149cqw;width:100cqw;height:12cqw;display:flex;align-items:center;
justify-content:center;gap:8cqw;z-index:5}
.rps-ctl s{width:9cqw;height:9cqw;border-radius:50%;background:var(--g2);display:block}
.rps-ctl s.end{background:var(--nv)}
.rps-scrub{left:6cqw;top:139cqw;width:88cqw;height:1.2cqw;border-radius:1cqw;
background:rgba(255,255,255,.45);transform-origin:0 0;z-index:5}
.rps-knob{left:5.4cqw;top:138.1cqw;width:3cqw;height:3cqw;border-radius:50%;background:#fff;
transform-origin:0 0;z-index:6}
.rps-tbadge{left:12cqw;top:78cqw;font-size:var(--fs-meta);color:#fff;background:rgba(0,35,71,.78);
padding:.9cqw 2.2cqw;border-radius:1.2cqw;z-index:6}
/* bottom sheet, beat 2 */
.rps-side{left:0;top:166cqw;width:100cqw;height:56cqw;border-top:1px solid var(--line);
border-radius:5cqw 5cqw 0 0;background:#fff;transform-origin:0 0;z-index:3}
.rps-tasks{left:6cqw;top:171cqw;width:88cqw;z-index:5}
.rps-tasks h5{margin:0 0 1cqw;font-size:var(--fs-body);font-weight:500;color:var(--nv)}
.rps-tasks .t{display:flex;gap:2.4cqw;font-size:var(--fs-body);line-height:1.4;color:var(--ink);margin-bottom:3cqw}
.rps-tasks .t s{flex:0 0 3.4cqw;height:3.4cqw;margin-top:.5cqw;border-radius:50%;border:1px solid var(--g2);display:block}
.rps-tasks .t.done s{background:var(--bl);border-color:var(--bl)}
.rps-tasks .t.done{color:var(--g3)}
/* dock, beats 3 to 6 */
.rps-att{left:47cqw;top:60cqw;width:50cqw;display:flex;align-items:center;gap:2cqw;
border:1px solid var(--line);border-radius:2cqw;padding:2.2cqw 2.6cqw;z-index:5;background:#fff}
.rps-att b{font-size:var(--fs-meta);font-weight:500;color:var(--nv)}
.rps-att span{font-size:var(--fs-meta);color:var(--mut)}
.rps-att em{margin-left:auto;font-style:normal;font-size:var(--fs-meta);font-weight:500;padding:.7cqw 2cqw;
border-radius:4cqw;background:rgba(0,35,71,.07);color:var(--g4)}
.rps-att.best em{background:var(--cy);color:var(--nv)}
.rps-ov{left:47cqw;top:36cqw;width:50cqw;z-index:5}
.rps-ov b{display:block;font-size:var(--fs-hero);font-weight:600;color:var(--nv);line-height:1.1;padding-bottom:.5cqw}
.rps-ov span{display:block;font-size:var(--fs-meta);letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin-top:.6cqw}
/* beats 3 and 6 */
.rps-say{left:6cqw;top:112cqw;width:88cqw;z-index:5}
.rps-say .who{display:block;font-size:var(--fs-meta);font-weight:600;color:var(--bl);margin-bottom:1.6cqw}
.rps-say p{margin:0;font-size:var(--fs-lead);line-height:1.45;color:var(--ink)}
.rps-bar{left:6cqw;width:88cqw;height:6cqw;z-index:5;white-space:nowrap}
.rps-bar .lb{display:inline-block;font-size:var(--fs-body);font-weight:500;color:var(--nv);width:41cqw;vertical-align:middle}
.rps-bar .pct{display:inline-block;font-size:var(--fs-meta);font-weight:600;padding:.7cqw 1.6cqw;border-radius:4cqw;
vertical-align:middle;width:13cqw;text-align:center}
.rps-tr{position:relative;display:inline-block;width:31cqw;height:2.2cqw;border-radius:2cqw;
background:var(--tint);vertical-align:middle;margin-left:2cqw;isolation:isolate}
.rps-fl{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:2cqw;transform-origin:left;
transform:scaleX(0);z-index:1;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rps-fl.hi{background:var(--cy)}.rps-fl.mid{background:var(--bl)}.rps-fl.lo{background:var(--g3)}
.rps-tk{position:absolute;top:-.8cqw;width:1px;height:3.8cqw;background:var(--g2);z-index:2}
.rps-hilite{left:2cqw;top:130cqw;width:96cqw;height:9cqw;border-radius:2cqw;background:var(--tint);z-index:4}
/* beat 4 */
/* Deep dive, built from the captured product screens in docs/design-reference/product-ui/role-play.
The score strip is a real tab strip there: a percentage chip in the band colour, an uppercase
label, and, on the selected card only, a track with the 50 and 75 benchmark ticks. The three band
colours are Material entries the app uses, not brand tokens, and they are reproduced rather than
corrected because the point of this screen is that it is the product. */
.rps-dd{left:6cqw;top:112cqw;width:88cqw;display:flex;background:var(--tint);border-radius:2cqw;
overflow:hidden;z-index:5}
.rps-dd em{font-style:normal;flex:1 1 0;min-width:0;padding:2.2cqw 2cqw 2.4cqw;border-right:1px solid var(--line)}
.rps-dd em:last-child{border-right:0}
.rps-dd em b{display:inline-block;font-size:var(--fs-meta);font-weight:600;padding:.5cqw 1.6cqw;border-radius:4cqw}
.rps-dd em i{display:block;margin-top:1.4cqw;font-style:normal;font-size:var(--fs-micro);font-weight:600;
letter-spacing:.03em;text-transform:uppercase;color:var(--mut);line-height:1.25}
.rps-dd em.on{background:#fff;box-shadow:0 .6cqw 2cqw rgba(0,35,71,.13)}
.rps-dd em.on i{color:#1565C0}
.rps-dd .tk{position:relative;display:block;margin-top:1.6cqw;height:1.5cqw;border-radius:2cqw;background:var(--tint)}
.rps-dd .tk s{position:absolute;left:0;top:0;bottom:0;border-radius:2cqw;background:#F5A623;display:block}
.rps-dd .tk u{position:absolute;top:-.5cqw;bottom:-.5cqw;width:.4cqw;background:var(--g3);display:block}
.rps-band-hi{background:#C8E6C9;color:#1B5E20}
.rps-band-mid{background:#FFE0B2;color:#BF360C}
.rps-band-lo{background:#FFCDD2;color:#B71C1C}
.rps-def{left:6cqw;top:140cqw;width:88cqw;font-size:var(--fs-lead);line-height:1.45;color:var(--ink);z-index:5}
.rps-subs{left:6cqw;top:156cqw;width:88cqw;z-index:5}
.rps-subs em{font-style:normal;display:flex;align-items:center;gap:2cqw;border:1px solid var(--line);
border-radius:2cqw;padding:1.8cqw 2.4cqw;margin-bottom:1.2cqw}
.rps-subs em.on{border-color:var(--bl);background:var(--tint)}
.rps-subs em i{font-style:normal;font-size:var(--fs-body);font-weight:500;color:var(--nv)}
.rps-subs em u{margin-left:auto;text-decoration:none;font-size:var(--fs-meta);padding:.7cqw 1.8cqw;border-radius:4cqw;
background:#FFE0B2;color:#BF360C;white-space:nowrap}
.rps-subs em u.low{background:#FFCDD2;color:#B71C1C}
.rps-adv{left:6cqw;top:190cqw;width:88cqw;border:1px solid var(--line);border-radius:2cqw;
padding:2.6cqw 10cqw 2.6cqw 3cqw;z-index:5}
.rps-adv time{display:inline-flex;align-items:center;gap:1.4cqw;font-size:var(--fs-body);font-weight:600;color:var(--nv);margin-right:1.6cqw;vertical-align:baseline}
.rps-adv time s{width:2cqw;height:2cqw;border-radius:50%;background:#B71C1C;display:block}
.rps-adv p{display:inline;margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--mut)}
.rps-adv .jump{position:absolute;right:2.4cqw;top:2.4cqw;width:6cqw;height:6cqw;border-radius:1.4cqw;
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
font-size:var(--fs-body);color:var(--bl);line-height:1}
/* Session replay. The product puts the rep in a corner of the avatar's frame; side by side is the
reading of it that survives a phone-width screen, with the same paused scrub and the same
transcript column underneath. */
.rps-split{left:6cqw;top:112cqw;width:88cqw;height:29cqw;display:flex;gap:2cqw;z-index:5}
.rps-split figure{position:relative;flex:1 1 0;margin:0;border-radius:2cqw;overflow:hidden;background:var(--nv)}
.rps-split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rps-split figure:last-child img{object-position:50% 12%}
.rps-split figcaption{position:absolute;left:1.4cqw;bottom:1.2cqw;font-size:var(--fs-micro);color:#fff;
background:rgba(0,35,71,.6);border-radius:1cqw;padding:.5cqw 1.4cqw}
.rps-play{left:6cqw;top:144cqw;width:88cqw;height:6cqw;display:flex;align-items:center;gap:2.4cqw;z-index:5}
.rps-play s{flex:0 0 5cqw;height:5cqw;border-radius:50%;background:var(--bl);display:flex;
align-items:center;justify-content:center}
.rps-play s::after{content:"";border-left:1.6cqw solid #fff;border-top:1cqw solid transparent;
border-bottom:1cqw solid transparent;margin-left:.4cqw}
.rps-play b{font-size:var(--fs-meta);font-weight:500;color:var(--mut)}
.rps-play span{position:relative;flex:1;height:1.2cqw;border-radius:2cqw;background:var(--tint)}
.rps-play span i{position:absolute;left:0;top:0;bottom:0;width:48%;border-radius:2cqw;background:var(--bl);display:block}
.rps-tx{left:6cqw;top:153cqw;width:88cqw;display:flex;flex-direction:column;z-index:5}
.rps-tx p{margin:0 0 1.6cqw;max-width:72cqw;font-size:var(--fs-body);line-height:1.42;border-radius:3cqw;
padding:2cqw 2.8cqw;position:relative}
.rps-tx p.them{background:var(--tint);color:var(--ink);border-bottom-left-radius:.8cqw}
.rps-tx p.you{background:var(--bl);color:#fff;align-self:flex-end;border-bottom-right-radius:.8cqw}
.rps-tx time{display:block;margin-top:1cqw;font-size:var(--fs-micro);text-align:right;opacity:.72}
/* beat 5 */
/* ---------- timelines ---------- */
/* ---------- per actor state table ---------- */
/* Screen is 100cqw wide by about 222cqw tall. From beat 3 the top of the screen becomes a dock that
never moves again, and only the subject pane below the tabs changes. That is the single-column
equivalent of v1 locking the camera to the MAIN column. */
.rps-hdr{--o1:1;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1}
.rps-crumb{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1}
.rps-tabs{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1}
.rps-ink{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1}
.rps-pills{--o1:1;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0;--s1:none;--s2:translateY(-4cqw)}
.rps-card{--o1:1;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0;--s1:none;--s2:scale(1.04)}
.rps-gh{--o1:1;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0;--s1:none;--s2:translateY(6cqw)}
.rps-vid{--o1:1;--o2:1;--o3:1;--o4:1;--o5:1;--o6:1;
--s1:translate(10cqw,34cqw) scale(.22);--s2:none;
--s3:translate(3cqw,26cqw) scale(.4);--s4:translate(3cqw,26cqw) scale(.4);
--s5:translate(3cqw,26cqw) scale(.4);--s6:translate(3cqw,26cqw) scale(.4)}
.rps-vname{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-sub{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-disc{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-ctl{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-pip{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-scrub{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1;
--s3:translate(-3cqw,-54cqw) scale(.4545,1);--s4:translate(-3cqw,-54cqw) scale(.4545,1);
--s5:translate(-3cqw,-54cqw) scale(.4545,1);--s6:translate(-3cqw,-54cqw) scale(.4545,1)}
.rps-knob{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1;
--s3:translate(-2.4cqw,-53.7cqw);--s4:translate(-2.4cqw,-53.7cqw);
--s5:translate(6.8cqw,-53.7cqw);--s6:translate(-2.4cqw,-53.7cqw)}
.rps-tbadge{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-side{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0;--s2:none;--s3:translateY(58cqw)}
.rps-tasks{--o1:0;--o2:1;--o3:0;--o4:0;--o5:0;--o6:0;--s2:none;--s3:translateY(58cqw)}
.rps-att.a1{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:1;--s6:translateY(10cqw)}
.rps-att.a2{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1;--s5:translateY(-6cqw);--s6:none}
.rps-ov.v1{--o1:0;--o2:0;--o3:1;--o4:1;--o5:1;--o6:0}
.rps-ov.v2{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1}
.rps-say.y1{--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0}
.rps-say.y2{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1}
.rps-hilite{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:0}
.rps-dd{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0;--s3:translateY(4cqw);--s4:none}
.rps-split{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0;--s4:translateY(4cqw);--s5:none}
.rps-play{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0;--s4:translateY(4cqw);--s5:none}
.rps-tx{--o1:0;--o2:0;--o3:0;--o4:0;--o5:1;--o6:0;--s4:translateY(6cqw);--s5:none}
.rps-def{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0;--s3:translateY(4cqw);--s4:none}
.rps-subs{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0;--s3:translateY(4cqw);--s4:none}
.rps-adv{--o1:0;--o2:0;--o3:0;--o4:1;--o5:0;--o6:0;--s3:translateY(4cqw);--s4:none}
.rps-b1{top:132cqw;--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s4:translateY(-22cqw)}
.rps-b2{top:146cqw;--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s4:translateY(-29cqw)}
.rps-b3{top:160cqw;--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s4:translateY(-36cqw)}
.rps-b4{top:174cqw;--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s4:translateY(-43cqw)}
.rps-b5{top:188cqw;--o1:0;--o2:0;--o3:1;--o4:0;--o5:0;--o6:0;--s4:translateY(-50cqw)}
.rps-c1{top:132cqw}.rps-c2{top:146cqw}.rps-c3{top:160cqw}.rps-c4{top:174cqw}.rps-c5{top:188cqw}
.rps-bar.a2{--o1:0;--o2:0;--o3:0;--o4:0;--o5:0;--o6:1}
@media (max-width:780px){
.rps{padding:0}
.rps-stage{display:block}
.rps-stage::before,.rps-stage::after{display:none}
.rps-rail{padding:0 18px}
.rps-rail h2{font-size:25px}
.rps-scroller{height:auto}
.rps-pin{position:static;height:auto;display:block;max-width:none;padding:0}
.rps-sents,.rps-steps,.rps-desc{display:none}
.rps-mstep{margin:0 0 40px}
.rps-mstep .mh{display:flex;align-items:center;gap:12px;margin:0 18px 8px}
.rps-mstep .mh i{flex:0 0 26px;height:26px;border-radius:50%;background:var(--cy);color:var(--nv);font-style:normal;
font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.rps-mstep .mh b{font-size:18px;font-weight:600;color:#fff}
/* Direct child only. Unscoped, this rule reaches every paragraph inside the cloned shell and
overrides the card, coach, advice and fix copy to 15px with an 18px side margin. */
.rps-mstep > p{margin:0 18px 14px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.74)}
.rps-mwrap{position:relative;overflow:hidden;background:#fff}
.rps-mwrap .rps-shell{width:390px;height:auto;aspect-ratio:auto;margin:0;padding:0;background:none;
border-radius:0;box-shadow:none;transform-origin:0 0}
.rps-mwrap .rps-shell::after{display:none}
.rps-mwrap .rps-screen{width:390px;height:846px;border-radius:0}
.rps-mwrap .rps-stat,.rps-mwrap .rps-home{display:none}
.rps-a,.rps-fl,.rps-desc p{animation:none !important}
}
@media (prefers-reduced-motion:reduce){
.rps-a,.rps-fl,.rps-steps::after,.rps-desc p{animation:none !important}
}
.fpg .rps{color:#fff!important}
.fpg .rps-scroller{height:150vh!important;position:relative!important}
.fpg .rps-pin{margin:0 auto!important;height:100vh!important;max-width:1240px!important;padding:0 24px!important;position:sticky!important;top:0!important;display:grid!important}
.fpg .rps-sents{position:absolute!important;inset:0!important}
.fpg .rps-sent{height:70vh!important}
.fpg .rps-rail h2{font-size:31px!important;line-height:1.2!important;font-weight:600!important;color:#fff!important;margin:0 0 10px!important}
.fpg .rps-rail .lede{font-size:16px!important;line-height:1.65!important;color:rgba(255,255,255,.74)!important;margin:0 0 26px!important;max-width:40ch!important}
.fpg .rps-steps{margin-bottom:20px!important;position:relative!important}
.fpg .rps-steps::before{width:1px!important;background:rgba(255,255,255,.2)!important;position:absolute!important;left:0!important;top:6px!important;bottom:6px!important;content:""!important}
.fpg .rps-steps::after{width:1px!important;height:calc(100% - 12px)!important;background:var(--cy)!important;position:absolute!important;left:0!important;top:6px!important;content:""!important}
.fpg .rps-srow:focus-visible{border-radius:8px!important}
.fpg .rps-srow{height:38px!important;display:flex!important}
.fpg .rps-srow i{font-size:11px!important;font-weight:600!important;color:#fff!important;height:24px!important;background:rgba(255,255,255,.14)!important;border-radius:50%!important;display:flex!important}
.fpg .rps-srow b{font-size:15px!important;font-weight:500!important;color:#fff!important}
.fpg .rps-srow.on i{color:var(--nv)!important;background:var(--cy)!important}
.fpg .rps-desc{max-width:40ch!important;min-height:108px!important;position:relative!important}
.fpg .rps-desc p{font-size:15.5px!important;line-height:1.7!important;color:rgba(255,255,255,.74)!important;margin:0!important;position:absolute!important;inset:0!important}
.fpg .rps-stage{position:relative!important;display:flex!important}
.fpg .rps-stage::before,.fpg .rps-stage::after{border-radius:50%!important;position:absolute!important;left:50%!important;top:50%!important;content:""!important}
.fpg .rps-stage::before{width:470px!important;height:470px!important;background:rgba(255,255,255,.04)!important}
.fpg .rps-stage::after{display:none!important}
.fpg .rps-shell{width:auto!important;height:min(78vh,740px)!important;max-width:100%!important;padding:min(0.887vh,8.4px)!important;background:linear-gradient(147deg,
rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 8%,rgba(255,255,255,0) 24%,
rgba(255,255,255,0) 70%,rgba(255,255,255,.09) 89%,rgba(255,255,255,.28) 100%),var(--nv)!important;border-radius:11.5%/5.45%!important;box-shadow:0 1px 2px rgba(0,35,71,.22),0 18px 38px -12px rgba(0,35,71,.38),
0 48px 88px -34px rgba(0,35,71,.34)!important;position:relative!important;aspect-ratio:9/19!important}
.fpg .rps-shell::after{border-radius:10.4%/4.85%!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important;position:absolute!important;z-index:8!important;inset:min(0.522vh,4.95px)!important;content:""!important}
.fpg .rps-screen{width:100%!important;height:100%!important;background:#fff!important;border-radius:9.5%/4.4%!important;position:relative!important;overflow:hidden!important;container-type:inline-size!important}
.fpg .rps-stat{font-size:var(--fs-meta)!important;font-weight:500!important;color:var(--nv)!important;height:11cqw!important;padding:0 6cqw!important;position:absolute!important;left:0!important;top:0!important;right:0!important;z-index:9!important;display:flex!important}
.fpg .rps-stat .sig{margin-left:auto!important;display:flex!important}
.fpg .rps-stat .sig s{width:1.1cqw!important;background:var(--nv)!important;border-radius:.3cqw!important;display:block!important}
.fpg .rps-stat .sig s:nth-child(1){height:1.6cqw!important}
.fpg .rps-stat .sig s:nth-child(2){height:2.4cqw!important}
.fpg .rps-stat .sig s:nth-child(3){height:3.2cqw!important}
.fpg .rps-stat .bat{margin-left:1.4cqw!important;width:6cqw!important;height:3cqw!important;border-radius:.8cqw!important;border:1px solid var(--g3)!important;position:relative!important}
.fpg .rps-stat .bat i{width:60%!important;background:var(--nv)!important;border-radius:.4cqw!important;position:absolute!important;left:.5cqw!important;top:.5cqw!important;bottom:.5cqw!important;display:block!important}
.fpg .rps-home{width:36cqw!important;height:1.2cqw!important;background:var(--g2)!important;border-radius:1cqw!important;position:absolute!important;left:32cqw!important;bottom:1.6cqw!important;z-index:9!important}
.fpg .rps-a{position:absolute!important}
.fpg .rps-hdr{height:14cqw!important;padding:0 6cqw!important;background:#fff!important;left:0!important;top:11cqw!important;right:0!important;z-index:6!important;display:flex!important}
.fpg .rps-hdr svg{width:7cqw!important}
.fpg .rps-hdr .wm{font-size:var(--fs-lead)!important;font-weight:500!important;color:var(--nv)!important}
.fpg .rps-hdr .rt{margin-left:auto!important;display:flex!important}
.fpg .rps-hdr .rt s{width:3.4cqw!important;height:3.4cqw!important;background:var(--g2)!important;border-radius:50%!important;display:block!important}
.fpg .rps-hdr .rt u{font-size:var(--fs-meta)!important;font-weight:600!important;color:var(--bl)!important;text-decoration:none!important;width:6.4cqw!important;height:6.4cqw!important;background:var(--tint)!important;border-radius:50%!important;display:flex!important}
.fpg .rps-crumb{font-size:var(--fs-meta)!important;color:var(--bl)!important;height:7cqw!important;left:6cqw!important;top:27cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-crumb b{font-weight:600!important;color:var(--nv)!important}
.fpg .rps-tabs{height:8cqw!important;left:6cqw!important;top:100cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-tabs span{font-size:var(--fs-meta)!important;letter-spacing:.04em!important;text-transform:uppercase!important;font-weight:500!important;color:var(--mut)!important}
.fpg .rps-tabs span.on{color:var(--bl)!important}
.fpg .rps-ink{width:20cqw!important;height:.6cqw!important;background:var(--bl)!important;border-radius:1cqw!important;left:6cqw!important;top:107.6cqw!important;z-index:5!important}
.fpg .rps-pills{left:6cqw!important;top:29cqw!important;z-index:4!important;display:flex!important}
.fpg .rps-pills b{font-size:var(--fs-meta)!important;font-weight:400!important;color:var(--mut)!important;padding:1.5cqw 3cqw!important;border-radius:4cqw!important;border:1px solid var(--line)!important}
.fpg .rps-pills b.on{color:#fff!important;background:var(--bl)!important}
.fpg .rps-card{width:88cqw!important;height:80cqw!important;padding:4cqw!important;background:#fff!important;border-radius:3cqw!important;border:1.5px solid var(--bl)!important;left:6cqw!important;top:41cqw!important;z-index:4!important}
.fpg .rps-card .top{margin-bottom:3cqw!important;display:flex!important}
.fpg .rps-card h4{font-size:var(--fs-title)!important;line-height:1.22!important;font-weight:600!important;color:var(--nv)!important;margin:0 0 1.6cqw!important}
.fpg .rps-card .tag{font-size:var(--fs-meta)!important;color:var(--bl)!important;padding:.9cqw 2.4cqw!important;background:var(--tint)!important;border-radius:4cqw!important;display:inline-block!important}
.fpg .rps-card p{font-size:var(--fs-body)!important;line-height:1.5!important;color:var(--mut)!important;margin:0 0 3.4cqw!important}
.fpg .rps-card .go{font-size:var(--fs-meta)!important;letter-spacing:.06em!important;text-align:center!important;font-weight:500!important;color:#fff!important;padding:3cqw!important;background:var(--bl)!important;border-radius:2cqw!important;display:block!important}
.fpg .rps-gh{width:88cqw!important;height:78cqw!important;padding:4cqw!important;border-radius:3cqw!important;border:1px solid var(--line)!important;z-index:3!important}
.fpg .rps-gh s{background:var(--g1)!important;border-radius:1cqw!important;display:block!important}
.fpg .rps-gh .th{margin-bottom:3cqw!important;width:20cqw!important;height:26cqw!important;border-radius:1.6cqw!important}
.fpg .rps-gh .l1{margin-bottom:1.8cqw!important;width:60%!important;height:3.4cqw!important}
.fpg .rps-gh .l2{margin-bottom:3.4cqw!important;width:34%!important;height:2.8cqw!important}
.fpg .rps-gh .l3{margin-bottom:1.6cqw!important;width:92%!important;height:2.2cqw!important}
.fpg .rps-gh .l4{margin-bottom:3.4cqw!important;width:86%!important;height:2.2cqw!important}
.fpg .rps-gh .btn{width:100%!important;height:8cqw!important;border-radius:2cqw!important}
.fpg .rps-ghA{left:6cqw!important;top:126cqw!important}
.fpg .rps-ghB{left:6cqw!important;top:209cqw!important}
.fpg .rps-vid{width:100cqw!important;height:134cqw!important;background:var(--nv)!important;left:0!important;top:11cqw!important;z-index:4!important;overflow:hidden!important}
.fpg .rps-vid img,.fpg .rps-vid video{width:100%!important;height:100%!important;position:absolute!important;display:block!important;inset:0!important}
.fpg .rps-vname{font-size:var(--fs-meta)!important;color:rgba(255,255,255,.92)!important;padding:1.2cqw 2.4cqw!important;background:rgba(0,35,71,.55)!important;border-radius:1.4cqw!important;left:4cqw!important;top:15cqw!important;z-index:5!important}
.fpg .rps-pip{width:30cqw!important;height:22.5cqw!important;background:linear-gradient(150deg,var(--bl),var(--nv))!important;border-radius:1.8cqw!important;border:1px solid rgba(255,255,255,.3)!important;left:66cqw!important;top:15cqw!important;z-index:5!important;overflow:hidden!important}
.fpg .rps-pip video{width:100%!important;height:100%!important;position:absolute!important;display:block!important;inset:0!important}
.fpg .rps-pip u{font-size:var(--fs-micro)!important;color:rgba(255,255,255,.88)!important;text-decoration:none!important;position:absolute!important;left:2cqw!important;top:1.4cqw!important}
.fpg .rps-sub{font-size:var(--fs-lead)!important;line-height:1.4!important;color:#fff!important;width:92cqw!important;padding:3cqw 3.4cqw!important;background:rgba(0,35,71,.78)!important;border-radius:2cqw!important;left:4cqw!important;top:104cqw!important;z-index:5!important}
.fpg .rps-disc{font-size:var(--fs-micro)!important;text-align:center!important;color:rgba(255,255,255,.82)!important;width:92cqw!important;left:4cqw!important;top:133cqw!important;z-index:5!important}
.fpg .rps-ctl{width:100cqw!important;height:12cqw!important;left:0!important;top:149cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-ctl s{width:9cqw!important;height:9cqw!important;background:var(--g2)!important;border-radius:50%!important;display:block!important}
.fpg .rps-ctl s.end{background:var(--nv)!important}
.fpg .rps-scrub{width:88cqw!important;height:1.2cqw!important;background:rgba(255,255,255,.45)!important;border-radius:1cqw!important;left:6cqw!important;top:139cqw!important;z-index:5!important}
.fpg .rps-knob{width:3cqw!important;height:3cqw!important;background:#fff!important;border-radius:50%!important;left:5.4cqw!important;top:138.1cqw!important;z-index:6!important}
.fpg .rps-tbadge{font-size:var(--fs-meta)!important;color:#fff!important;padding:.9cqw 2.2cqw!important;background:rgba(0,35,71,.78)!important;border-radius:1.2cqw!important;left:12cqw!important;top:78cqw!important;z-index:6!important}
.fpg .rps-side{width:100cqw!important;height:56cqw!important;background:#fff!important;border-radius:5cqw 5cqw 0 0!important;left:0!important;top:166cqw!important;z-index:3!important}
.fpg .rps-tasks{width:88cqw!important;left:6cqw!important;top:171cqw!important;z-index:5!important}
.fpg .rps-tasks h5{font-size:var(--fs-body)!important;font-weight:500!important;color:var(--nv)!important;margin:0 0 1cqw!important}
.fpg .rps-tasks .t{font-size:var(--fs-body)!important;line-height:1.4!important;color:var(--ink)!important;margin-bottom:3cqw!important;display:flex!important}
.fpg .rps-tasks .t s{margin-top:.5cqw!important;height:3.4cqw!important;border-radius:50%!important;border:1px solid var(--g2)!important;display:block!important}
.fpg .rps-tasks .t.done s{background:var(--bl)!important}
.fpg .rps-tasks .t.done{color:var(--g3)!important}
.fpg .rps-att{width:50cqw!important;padding:2.2cqw 2.6cqw!important;background:#fff!important;border-radius:2cqw!important;border:1px solid var(--line)!important;left:47cqw!important;top:60cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-att b{font-size:var(--fs-meta)!important;font-weight:500!important;color:var(--nv)!important}
.fpg .rps-att span{font-size:var(--fs-meta)!important;color:var(--mut)!important}
.fpg .rps-att em{font-size:var(--fs-meta)!important;font-weight:500!important;color:var(--g4)!important;margin-left:auto!important;padding:.7cqw 2cqw!important;background:rgba(0,35,71,.07)!important;border-radius:4cqw!important}
.fpg .rps-att.best em{color:var(--nv)!important;background:var(--cy)!important}
.fpg .rps-ov{width:50cqw!important;left:47cqw!important;top:36cqw!important;z-index:5!important}
.fpg .rps-ov b{font-size:var(--fs-hero)!important;line-height:1.1!important;font-weight:600!important;color:var(--nv)!important;display:block!important}
.fpg .rps-ov span{font-size:var(--fs-meta)!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:var(--mut)!important;margin-top:.6cqw!important;display:block!important}
.fpg .rps-say{width:88cqw!important;left:6cqw!important;top:112cqw!important;z-index:5!important}
.fpg .rps-say .who{font-size:var(--fs-meta)!important;font-weight:600!important;color:var(--bl)!important;margin-bottom:1.6cqw!important;display:block!important}
.fpg .rps-say p{font-size:var(--fs-lead)!important;line-height:1.45!important;color:var(--ink)!important;margin:0!important}
.fpg .rps-bar{width:88cqw!important;height:6cqw!important;left:6cqw!important;z-index:5!important}
.fpg .rps-bar .lb{font-size:var(--fs-body)!important;font-weight:500!important;color:var(--nv)!important;width:41cqw!important;display:inline-block!important}
.fpg .rps-bar .pct{font-size:var(--fs-meta)!important;text-align:center!important;font-weight:600!important;width:13cqw!important;padding:.7cqw 1.6cqw!important;border-radius:4cqw!important;display:inline-block!important}
.fpg .rps-tr{margin-left:2cqw!important;width:31cqw!important;height:2.2cqw!important;background:var(--tint)!important;border-radius:2cqw!important;position:relative!important;display:inline-block!important}
.fpg .rps-fl{width:100%!important;height:100%!important;border-radius:2cqw!important;position:absolute!important;left:0!important;top:0!important;z-index:1!important}
.fpg .rps-fl.hi{background:var(--cy)!important}
.fpg .rps-fl.mid{background:var(--bl)!important}
.fpg .rps-fl.lo{background:var(--g3)!important}
.fpg .rps-tk{width:1px!important;height:3.8cqw!important;background:var(--g2)!important;position:absolute!important;top:-.8cqw!important;z-index:2!important}
.fpg .rps-hilite{width:96cqw!important;height:9cqw!important;background:var(--tint)!important;border-radius:2cqw!important;left:2cqw!important;top:130cqw!important;z-index:4!important}
.fpg .rps-dd{width:88cqw!important;background:var(--tint)!important;border-radius:2cqw!important;left:6cqw!important;top:112cqw!important;z-index:5!important;display:flex!important;overflow:hidden!important}
.fpg .rps-dd em{padding:2.2cqw 2cqw 2.4cqw!important}
.fpg .rps-dd em b{font-size:var(--fs-meta)!important;font-weight:600!important;padding:.5cqw 1.6cqw!important;border-radius:4cqw!important;display:inline-block!important}
.fpg .rps-dd em i{font-size:var(--fs-micro)!important;line-height:1.25!important;letter-spacing:.03em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--mut)!important;margin-top:1.4cqw!important;display:block!important}
.fpg .rps-dd em.on{background:#fff!important;box-shadow:0 .6cqw 2cqw rgba(0,35,71,.13)!important}
.fpg .rps-dd em.on i{color:#1565C0!important}
.fpg .rps-dd .tk{margin-top:1.6cqw!important;height:1.5cqw!important;background:var(--tint)!important;border-radius:2cqw!important;position:relative!important;display:block!important}
.fpg .rps-dd .tk s{background:#F5A623!important;border-radius:2cqw!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;display:block!important}
.fpg .rps-dd .tk u{width:.4cqw!important;background:var(--g3)!important;position:absolute!important;top:-.5cqw!important;bottom:-.5cqw!important;display:block!important}
.fpg .rps-band-hi{color:#1B5E20!important;background:#C8E6C9!important}
.fpg .rps-band-mid{color:#BF360C!important;background:#FFE0B2!important}
.fpg .rps-band-lo{color:#B71C1C!important;background:#FFCDD2!important}
.fpg .rps-def{font-size:var(--fs-lead)!important;line-height:1.45!important;color:var(--ink)!important;width:88cqw!important;left:6cqw!important;top:140cqw!important;z-index:5!important}
.fpg .rps-subs{width:88cqw!important;left:6cqw!important;top:156cqw!important;z-index:5!important}
.fpg .rps-subs em{margin-bottom:1.2cqw!important;padding:1.8cqw 2.4cqw!important;border-radius:2cqw!important;border:1px solid var(--line)!important;display:flex!important}
.fpg .rps-subs em.on{background:var(--tint)!important}
.fpg .rps-subs em i{font-size:var(--fs-body)!important;font-weight:500!important;color:var(--nv)!important}
.fpg .rps-subs em u{font-size:var(--fs-meta)!important;color:#BF360C!important;text-decoration:none!important;margin-left:auto!important;padding:.7cqw 1.8cqw!important;background:#FFE0B2!important;border-radius:4cqw!important}
.fpg .rps-subs em u.low{color:#B71C1C!important;background:#FFCDD2!important}
.fpg .rps-adv{width:88cqw!important;padding:2.6cqw 10cqw 2.6cqw 3cqw!important;border-radius:2cqw!important;border:1px solid var(--line)!important;left:6cqw!important;top:190cqw!important;z-index:5!important}
.fpg .rps-adv time{font-size:var(--fs-body)!important;font-weight:600!important;color:var(--nv)!important;margin-right:1.6cqw!important;display:inline-flex!important}
.fpg .rps-adv time s{width:2cqw!important;height:2cqw!important;background:#B71C1C!important;border-radius:50%!important;display:block!important}
.fpg .rps-adv p{font-size:var(--fs-body)!important;line-height:1.5!important;color:var(--mut)!important;margin:0!important;display:inline!important}
.fpg .rps-adv .jump{font-size:var(--fs-body)!important;line-height:1!important;color:var(--bl)!important;width:6cqw!important;height:6cqw!important;border-radius:1.4cqw!important;border:1px solid var(--line)!important;position:absolute!important;top:2.4cqw!important;right:2.4cqw!important;display:flex!important}
.fpg .rps-split{width:88cqw!important;height:29cqw!important;left:6cqw!important;top:112cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-split figure{margin:0!important;background:var(--nv)!important;border-radius:2cqw!important;position:relative!important;overflow:hidden!important}
.fpg .rps-split img{width:100%!important;height:100%!important;position:absolute!important;display:block!important;inset:0!important}
.fpg .rps-split figcaption{font-size:var(--fs-micro)!important;color:#fff!important;padding:.5cqw 1.4cqw!important;background:rgba(0,35,71,.6)!important;border-radius:1cqw!important;position:absolute!important;left:1.4cqw!important;bottom:1.2cqw!important}
.fpg .rps-play{width:88cqw!important;height:6cqw!important;left:6cqw!important;top:144cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-play s{height:5cqw!important;background:var(--bl)!important;border-radius:50%!important;display:flex!important}
.fpg .rps-play s::after{margin-left:.4cqw!important;content:""!important}
.fpg .rps-play b{font-size:var(--fs-meta)!important;font-weight:500!important;color:var(--mut)!important}
.fpg .rps-play span{height:1.2cqw!important;background:var(--tint)!important;border-radius:2cqw!important;position:relative!important}
.fpg .rps-play span i{width:48%!important;background:var(--bl)!important;border-radius:2cqw!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;display:block!important}
.fpg .rps-tx{width:88cqw!important;left:6cqw!important;top:153cqw!important;z-index:5!important;display:flex!important}
.fpg .rps-tx p{font-size:var(--fs-body)!important;line-height:1.42!important;margin:0 0 1.6cqw!important;max-width:72cqw!important;padding:2cqw 2.8cqw!important;border-radius:3cqw!important;position:relative!important}
.fpg .rps-tx p.them{color:var(--ink)!important;background:var(--tint)!important}
.fpg .rps-tx p.you{color:#fff!important;background:var(--bl)!important}
.fpg .rps-tx time{font-size:var(--fs-micro)!important;text-align:right!important;margin-top:1cqw!important;display:block!important}
.fpg .rps-b1{top:132cqw!important}
.fpg .rps-b2{top:146cqw!important}
.fpg .rps-b3{top:160cqw!important}
.fpg .rps-b4{top:174cqw!important}
.fpg .rps-b5{top:188cqw!important}
.fpg .rps-c1{top:132cqw!important}
.fpg .rps-c2{top:146cqw!important}
.fpg .rps-c3{top:160cqw!important}
.fpg .rps-c4{top:174cqw!important}
.fpg .rps-c5{top:188cqw!important}
@media (max-width:780px){.fpg .rps{padding:0!important}}
@media (max-width:780px){.fpg .rps-stage{display:block!important}}
@media (max-width:780px){.fpg .rps-stage::before,.fpg .rps-stage::after{display:none!important}}
@media (max-width:780px){.fpg .rps-rail{padding:0 18px!important}}
@media (max-width:780px){.fpg .rps-rail h2{font-size:25px!important}}
@media (max-width:780px){.fpg .rps-scroller{height:auto!important}}
@media (max-width:780px){.fpg .rps-pin{height:auto!important;max-width:none!important;padding:0!important;position:static!important;display:block!important}}
@media (max-width:780px){.fpg .rps-sents,.fpg .rps-steps,.fpg .rps-desc{display:none!important}}
@media (max-width:780px){.fpg .rps-mstep{margin:0 0 40px!important}}
@media (max-width:780px){.fpg .rps-mstep .mh{margin:0 18px 8px!important;display:flex!important}}
@media (max-width:780px){.fpg .rps-mstep .mh i{font-size:12px!important;font-weight:600!important;color:var(--nv)!important;height:26px!important;background:var(--cy)!important;border-radius:50%!important;display:flex!important}}
@media (max-width:780px){.fpg .rps-mstep .mh b{font-size:18px!important;font-weight:600!important;color:#fff!important}}
@media (max-width:780px){.fpg .rps-mstep > p{font-size:15px!important;line-height:1.65!important;color:rgba(255,255,255,.74)!important;margin:0 18px 14px!important}}
@media (max-width:780px){.fpg .rps-mwrap{background:#fff!important;position:relative!important;overflow:hidden!important}}
@media (max-width:780px){.fpg .rps-mwrap .rps-shell{margin:0!important;width:390px!important;height:auto!important;padding:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;aspect-ratio:auto!important}}
@media (max-width:780px){.fpg .rps-mwrap .rps-shell::after{display:none!important}}
@media (max-width:780px){.fpg .rps-mwrap .rps-screen{width:390px!important;height:846px!important;border-radius:0!important}}
@media (max-width:780px){.fpg .rps-mwrap .rps-stat,.fpg .rps-mwrap .rps-home{display:none!important}}
/* The page draws a 22px rule as ::before on every li inside .fpg, sets li{position:relative}
and colours bare a, b, i, s and u. Inside this mockup those tags are geometry, not prose. */
.fpg .rps li::before{content:none!important;display:none!important}
.fpg .rps b,.fpg .rps i,.fpg .rps s,.fpg .rps u,.fpg .rps em{
text-decoration:none!important;font-style:normal!important}
.fpk{--fpk-lead:var(--bd,#002347);--fpk-body:#5A6B80;--fpk-line:#DCE5EF;--fpk-surface:#FFFFFF;
--fpk-blue:var(--b,#00468E);--fpk-cy:var(--bl,#33A7E6);
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.fpk *,.fpk *::before,.fpk *::after{box-sizing:border-box}
/* The plate is the element's own background and the gradient text sits on an inner span. The
homepage draws this with a ::before at z-index:-1, which works on its dark sections and does not
here: on a light section the negative layer paints behind the section's own background and the
plate vanishes, leaving pale text on grey. */
.fpk-badge{display:inline-block;padding:4px 13px;border-radius:8px;margin:0 0 18px;
background-image:linear-gradient(to right,#071938,#00468E)}
.fpk-badge i{font-style:normal;font-size:16px;line-height:1.3;font-weight:400;
background-image:linear-gradient(135deg,#4EBDEF,#E4EFFE);
-webkit-background-clip:text;background-clip:text;color:transparent}
.fpk h2.fpk-h{margin:0 0 14px;font-size:clamp(27px,2.4vw,36px);line-height:1.18;font-weight:600;
color:var(--fpk-lead);max-width:22ch;text-wrap:balance}
.fpk p.fpk-lede{margin:0 0 42px;max-width:56ch;font-size:17px;line-height:1.6;color:var(--fpk-body)}
.fpk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;
list-style:none}
.fpk-card{margin:0;padding:26px;list-style:none;background:var(--fpk-surface);
border:1px solid var(--fpk-line);border-radius:14px;display:flex;flex-direction:column}
.fpk-card::before{content:none!important;display:none!important}
/* Fixed, not flex:1. With flex:1 the demo absorbed whatever the caption did not use, so a card
whose sentence ran a line shorter pushed its heading 23px below the two beside it. */
.fpk-demo{flex:none;height:156px;display:flex;align-items:center;justify-content:center}
.fpk-cap{margin-top:22px}
.fpk-card h3{margin:0;font-size:17px;line-height:1.35;font-weight:500;color:var(--fpk-lead)}
.fpk-card p{margin:6px 0 0;font-size:15px;line-height:1.5;font-weight:400;color:var(--fpk-body)}
.fpk-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 40px;margin:52px 0 0;
padding:0;list-style:none}
.fpk-list li{margin:0;padding:0;list-style:none;display:flex;gap:16px;align-items:flex-start}
.fpk-list li::before{content:none!important;display:none!important}
.fpk-tick{flex:none;width:19px;height:19px;margin-top:3px;color:var(--fpk-blue)}
.fpk-tick svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.fpk-list b{display:block;margin:0 0 4px;font-size:16px;line-height:1.35;font-weight:500;
color:var(--fpk-lead)}
.fpk-list span{display:block;font-size:14.5px;line-height:1.55;color:var(--fpk-body)}
@media (max-width:900px){
.fpk-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.fpk-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 30px}}
@media (max-width:600px){
.fpk-card{padding:22px}.fpk-card h3{font-size:16px}.fpk-card p{font-size:14.5px}
.fpk p.fpk-lede{font-size:16px;margin-bottom:34px}
.fpk-list{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}}
.fpk-quad{position:relative;width:150px;height:150px;border-radius:10px;background:#F4F8FF;
border:1px solid var(--fpk-line)}
.fpk-quad i{position:absolute;background:var(--fpk-line)}
.fpk-quad i.h{left:0;right:0;top:50%;height:1px}
.fpk-quad i.v{top:0;bottom:0;left:50%;width:1px}
.fpk-quad u{position:absolute;right:0;top:0;width:50%;height:50%;border-radius:0 9px 0 0;
background:rgba(51,167,230,.13)}
.fpk-dot{position:absolute;width:13px;height:13px;margin:-6.5px;border-radius:50%;
background:var(--fpk-blue);box-shadow:0 0 0 5px rgba(0,70,142,.14);
animation:fpk-travel 4.2s cubic-bezier(.16,1,.3,1) infinite}
@keyframes fpk-travel{0%,12%{left:26%;top:76%}50%,62%{left:74%;top:24%}92%,100%{left:26%;top:76%}}
.fpk-ch{width:100%;max-width:196px;display:grid;gap:15px}
.fpk-ch div{display:flex;align-items:center;gap:11px}
.fpk-ch em{font-style:normal;flex:none;width:58px;font-size:11px;color:#8496A9;font-weight:500}
.fpk-ch s{flex:1;display:flex;gap:3px;align-items:center;height:22px;text-decoration:none}
.fpk-ch s i{display:block;flex:1;border-radius:2px;background:var(--fpk-cy);height:30%;
transform-origin:50% 50%;animation:fpk-wave 1.4s ease-in-out infinite}
.fpk-ch div:nth-child(2) s i{background:var(--fpk-blue)}
.fpk-ch div:nth-child(3) s i{background:#8FB6DC}
.fpk-ch s i:nth-child(2){animation-delay:.12s}.fpk-ch s i:nth-child(3){animation-delay:.24s}
.fpk-ch s i:nth-child(4){animation-delay:.36s}.fpk-ch s i:nth-child(5){animation-delay:.48s}
.fpk-ch s i:nth-child(6){animation-delay:.6s}.fpk-ch s i:nth-child(7){animation-delay:.72s}
.fpk-ch div:nth-child(2) s i{animation-duration:1.7s}
.fpk-ch div:nth-child(3) s i{animation-duration:2.1s}
@keyframes fpk-wave{0%,100%{height:26%}50%{height:100%}}
.fpk-rows{width:100%;max-width:190px;display:grid;gap:13px}
.fpk-rows div{display:grid;gap:6px}
.fpk-rows em{font-style:normal;font-size:11.5px;color:#8496A9;font-weight:500}
.fpk-rows span{display:block;height:7px;border-radius:4px;background:#E8EEF6;overflow:hidden}
.fpk-rows span i{display:block;height:100%;border-radius:4px;background:var(--fpk-cy);
transform-origin:0 50%;animation:fpk-fill 4.2s cubic-bezier(.16,1,.3,1) infinite}
.fpk-rows div:nth-child(1) i{width:84%}
.fpk-rows div:nth-child(2) i{width:66%;animation-delay:.14s;background:var(--fpk-blue)}
.fpk-rows div:nth-child(3) i{width:91%;animation-delay:.28s}
.fpk-rows div:nth-child(4) i{width:57%;animation-delay:.42s;background:var(--fpk-blue)}
@keyframes fpk-fill{0%,4%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
/* paused rather than removed, so each demo still reads as a finished still */
.fpk-dot,.fpk-bars b,.fpk-rows i,.fpk-steps u,.fpk-steps s::after,.fpk-lines s::after,
.fpk-chips b,.fpk-persona div,.fpk-ch s i,.fpk-convo div{animation:none}
.fpk-dot{left:74%;top:24%}}
.fpg .fpk-badge{margin:0 0 18px!important;padding:4px 13px!important;background-image:linear-gradient(to right,#071938,#00468E)!important;border-radius:8px!important;display:inline-block!important}
.fpg .fpk-badge i{font-size:16px!important;line-height:1.3!important;font-weight:400!important;color:transparent!important;background-image:linear-gradient(135deg,#4EBDEF,#E4EFFE)!important;background-clip:text!important;-webkit-background-clip:text!important}
.fpg .fpk h2.fpk-h{font-size:clamp(27px,2.4vw,36px)!important;line-height:1.18!important;font-weight:600!important;color:var(--fpk-lead)!important;margin:0 0 14px!important;max-width:22ch!important}
.fpg .fpk p.fpk-lede{font-size:17px!important;line-height:1.6!important;color:var(--fpk-body)!important;margin:0 0 42px!important;max-width:56ch!important}
.fpg .fpk-grid{margin:0!important;padding:0!important;list-style:none!important;display:grid!important}
.fpg .fpk-card{margin:0!important;padding:26px!important;background:var(--fpk-surface)!important;border-radius:14px!important;border:1px solid var(--fpk-line)!important;list-style:none!important;display:flex!important}
.fpg .fpk-card::before{display:none!important;content:none!important}
.fpg .fpk-demo{height:156px!important;display:flex!important}
.fpg .fpk-cap{margin-top:22px!important}
.fpg .fpk-card h3{font-size:17px!important;line-height:1.35!important;font-weight:500!important;color:var(--fpk-lead)!important;margin:0!important}
.fpg .fpk-card p{font-size:15px!important;line-height:1.5!important;font-weight:400!important;color:var(--fpk-body)!important;margin:6px 0 0!important}
.fpg .fpk-list{margin:52px 0 0!important;padding:0!important;list-style:none!important;display:grid!important}
.fpg .fpk-list li{margin:0!important;padding:0!important;list-style:none!important;display:flex!important}
.fpg .fpk-list li::before{display:none!important;content:none!important}
.fpg .fpk-tick{color:var(--fpk-blue)!important;margin-top:3px!important;width:19px!important;height:19px!important}
.fpg .fpk-tick svg{width:100%!important;height:100%!important;display:block!important}
.fpg .fpk-list b{font-size:16px!important;line-height:1.35!important;font-weight:500!important;color:var(--fpk-lead)!important;margin:0 0 4px!important;display:block!important}
.fpg .fpk-list span{font-size:14.5px!important;line-height:1.55!important;color:var(--fpk-body)!important;display:block!important}
@media (max-width:600px){.fpg .fpk-card{padding:22px!important}}
@media (max-width:600px){.fpg .fpk-card h3{font-size:16px!important}}
@media (max-width:600px){.fpg .fpk-card p{font-size:14.5px!important}}
@media (max-width:600px){.fpg .fpk p.fpk-lede{font-size:16px!important;margin-bottom:34px!important}}
@media (max-width:600px){.fpg .fpk-list{margin-top:40px!important}}
.fpg .fpk-quad{width:150px!important;height:150px!important;background:#F4F8FF!important;border-radius:10px!important;border:1px solid var(--fpk-line)!important;position:relative!important}
.fpg .fpk-quad i{background:var(--fpk-line)!important;position:absolute!important}
.fpg .fpk-quad i.h{height:1px!important;left:0!important;top:50%!important;right:0!important}
.fpg .fpk-quad i.v{width:1px!important;left:50%!important;top:0!important;bottom:0!important}
.fpg .fpk-quad u{width:50%!important;height:50%!important;background:rgba(51,167,230,.13)!important;border-radius:0 9px 0 0!important;position:absolute!important;top:0!important;right:0!important}
.fpg .fpk-dot{margin:-6.5px!important;width:13px!important;height:13px!important;background:var(--fpk-blue)!important;border-radius:50%!important;box-shadow:0 0 0 5px rgba(0,70,142,.14)!important;position:absolute!important}
.fpg .fpk-ch{width:100%!important;max-width:196px!important;display:grid!important}
.fpg .fpk-ch div{display:flex!important}
.fpg .fpk-ch em{font-size:11px!important;font-weight:500!important;color:#8496A9!important;width:58px!important}
.fpg .fpk-ch s{text-decoration:none!important;height:22px!important;display:flex!important}
.fpg .fpk-ch s i{height:30%!important;background:var(--fpk-cy)!important;border-radius:2px!important;display:block!important}
.fpg .fpk-ch div:nth-child(2) s i{background:var(--fpk-blue)!important}
.fpg .fpk-ch div:nth-child(3) s i{background:#8FB6DC!important}
.fpg .fpk-rows{width:100%!important;max-width:190px!important;display:grid!important}
.fpg .fpk-rows div{display:grid!important}
.fpg .fpk-rows em{font-size:11.5px!important;font-weight:500!important;color:#8496A9!important}
.fpg .fpk-rows span{height:7px!important;background:#E8EEF6!important;border-radius:4px!important;display:block!important;overflow:hidden!important}
.fpg .fpk-rows span i{height:100%!important;background:var(--fpk-cy)!important;border-radius:4px!important;display:block!important}
.fpg .fpk-rows div:nth-child(1) i{width:84%!important}
.fpg .fpk-rows div:nth-child(2) i{width:66%!important;background:var(--fpk-blue)!important}
.fpg .fpk-rows div:nth-child(3) i{width:91%!important}
.fpg .fpk-rows div:nth-child(4) i{width:57%!important;background:var(--fpk-blue)!important}
@media (prefers-reduced-motion:reduce){.fpg .fpk-dot{left:74%!important;top:24%!important}}
/* The page draws a 22px rule as ::before on every li inside .fpg and colours bare
b, i, s, u. Here those tags are geometry and markers we supply ourselves. */
.fpg .fpk-card::before,.fpg .fpk-list li::before{content:none!important;display:none!important}
.fpg .fpk-bars b,.fpg .fpk-bars s,.fpg .fpk-quad i,.fpg .fpk-quad u,.fpg .fpk-rows i,
.fpg .fpk-steps u,.fpg .fpk-steps s,.fpg .fpk-lines s,.fpg .fpk-persona u,
.fpg .fpk-persona s,.fpg .fpk-ch s,.fpg .fpk-ch s i,.fpg .fpk-convo s{
font-size:0!important;text-decoration:none!important}
.fpg .fpk-badge i{color:transparent!important;font-style:normal!important}
.rpc{position:relative;box-sizing:border-box;overflow:hidden;min-height:110vh;min-height:110svh;display:flex;align-items:center;--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--mut:#636262;
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;
background:
linear-gradient(#002347 0,rgba(0,35,71,0) 120px,rgba(0,35,71,0) calc(100% - 120px),#002347 100%),
radial-gradient(70% 60% at 50% 0%,rgba(51,167,230,.20) 0%,rgba(51,167,230,0) 64%),
linear-gradient(135deg,rgba(0,70,142,0) 0%,rgba(0,70,142,.45) 50%,rgba(0,70,142,0) 100%),
linear-gradient(#002347,#002347);
/* The navy bleeds one pixel into the white section on each side. The seam itself is clean at
dpr 1, but this section starts at a fractional document offset (8957.89px measured), so at
dpr 2 the boundary lands on a half pixel and a white hairline shows. The negative margins are
paid back in padding, so nothing moves. */
margin:-1px 0;padding:113px 0 121px}
.rpc *,.rpc *::before,.rpc *::after{box-sizing:border-box}
.rpc,.rpc *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rpc-in{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 24px;text-align:center}
/* A corridor of product cards rushing out of the vanishing point. Perspective does the work that
looks like two animations at once: as a card's z grows it gets bigger and its screen x sweeps
outward, because the projection scales position and size by the same factor. Depth is authored
as apparent size, geometrically, so consecutive cards keep a constant size ratio and the ribbon
stays solid at both ends. Every length is cqw, a share of the container width, so it keeps its
proportions at any size. Adapted from a React component; here it is plain CSS with the keyframes
traced once at build time, so it needs no JavaScript. */
.rpc-stream{position:absolute;inset:0;overflow:hidden;container-type:inline-size;
perspective:30cqw;perspective-origin:50% 52%;pointer-events:none;z-index:0}
.rpc-rails{position:absolute;inset:0;transform-style:preserve-3d;list-style:none;margin:0;padding:0}
.rpc-card{position:absolute;left:50%;top:52%;width:14.5cqw;height:18.508cqw;
margin-left:-7.25cqw;margin-top:-9.254cqw;border-radius:.4cqw;overflow:hidden;
backface-visibility:hidden;animation-duration:60s;animation-timing-function:linear;
animation-iteration-count:infinite;box-shadow:0 1cqw 3cqw rgba(0,35,71,.45)}
@media (min-width:601px) and (max-width:1024px){
/* Between the phone rule and a wide desktop the card fell back to the 14.5cqw desktop value in a
narrow container, so a tablet showed the smallest card of any screen: measured 111x142 at 768px
against 156x199 at 390px and 209x267 at 1440px. Ratio 1.2764 is the source image's own. */
.rpc-card{width:26cqw;height:33.187cqw;margin-left:-13cqw;margin-top:-16.594cqw}
}
/* The box carries the source card's own 720x919, so cover has nothing to crop and the
portrait keeps its proportions. Faces read because the cards are small enough to fit
on screen whole, not because anything was reframed. */
.rpc-card img{width:100%;height:100%;object-fit:cover;display:block}
/* Cards leave by dissolving into the edge of the frame, not by fading on a clock. An opacity
animation was tried first and rejected on sight: because it is timed, a card spends a long
stretch semi-transparent while it is still in the middle of the frame, which reads as sheet
plastic rather than depth. A mask is positional, so a card is fully opaque everywhere it is
meant to be seen and only erodes in the last stretch before it exits. This is the same
technique an edge-faded marquee uses.
The band is tighter on a phone because the corridor is flattened there and a card has NOT
cleared the frame when its loop restarts: measured, its inner edge sits at 31.4cqw against a
50cqw half-container, so the mask has to finish it off before the reset. */
.rpc-stream{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
/* the copy has to stay readable over moving pictures, so the middle is held down */
.rpc-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(48% 46% at 50% 50%,rgba(0,35,71,.93) 0%,rgba(0,35,71,.78) 52%,rgba(0,35,71,0) 100%),
linear-gradient(180deg,rgba(0,35,71,.85) 0%,rgba(0,35,71,.18) 26%,rgba(0,35,71,.18) 74%,rgba(0,35,71,.9) 100%)}
@media (prefers-reduced-motion:reduce){
/* paused, not disabled: every card is already dropped mid-flight by its negative delay, so it
freezes as a finished still instead of collapsing onto the axis */
.rpc-card{animation-play-state:paused}
}
/* The section-title pill from the live homepage, measured off /:
.pwr-sec__title-intro is gradient TEXT (135deg #4EBDEF to #E4EFFE, background-clip:text) sitting
on a navy plate drawn by its ::before (to right, #071938 to #00468E), radius 8px, inset -4.8px
vertical and -13.2px horizontal, Rubik 16px/1.3 regular, sentence case, 15px above the heading.
Sentence case is the homepage's own: "Multimodal behavioral feedback", not shouted. */
/* No z-index here on purpose. Setting z-index:0 makes this element a stacking context, and then
its own ::before at z-index:-1 paints AFTER the element's background instead of behind it. The
background here IS the text, clipped with background-clip:text, so the plate covered the glyphs
and the pill rendered as an empty navy rectangle. Verified on the live preview: plate visible,
text absent, and both correct again once the z-index came off. */
.rpc .eyebrow{position:relative;display:inline-block;
font-size:16px;font-weight:400;line-height:1.3;letter-spacing:normal;text-transform:none;
background-image:linear-gradient(135deg,#4EBDEF,#E4EFFE);
-webkit-background-clip:text;background-clip:text;color:transparent;
margin:0 0 15px}
.rpc .eyebrow::before{content:"";position:absolute;inset:-4.8px -13.2px;border-radius:8px;
background-image:linear-gradient(to right,#071938,#00468E);z-index:-1}
.rpc h2{margin:0 0 20px;font-size:clamp(32px,4vw,52px);line-height:1.1;font-weight:600;color:#fff;
text-wrap:balance}
.rpc p{margin:0 auto 36px;max-width:46ch;font-size:clamp(16px,1.3vw,18px);line-height:1.6;
color:rgba(255,255,255,.78)}
/* A lit ring travelling round the border, drawn by rotating a conic gradient in the border-box
while the padding-box stays flat navy. Adapted from a React component: the web font and the
transitions on custom properties are dropped, the first because the module must stay
self-contained and the second because only transform, opacity and colour may be transitioned
here. The palette is ours, not the original's black and blue. */
@property --rpc-ang{syntax:"";initial-value:0deg;inherits:false}
@property --rpc-off{syntax:"";initial-value:0deg;inherits:false}
@property --rpc-pct{syntax:"";initial-value:6%;inherits:false}
.rpc .go{--rpc-shine:#fff;
position:relative;isolation:isolate;overflow:hidden;display:inline-block;
text-decoration:none;color:#fff;font-size:16px;font-weight:500;line-height:1.2;
padding:16px 34px;border:1px solid transparent;border-radius:12px;
background:linear-gradient(var(--nv),var(--nv)) padding-box,
conic-gradient(from calc(var(--rpc-ang) - var(--rpc-off)),
rgba(51,167,230,0),
var(--cy) var(--rpc-pct),
var(--rpc-shine) calc(var(--rpc-pct) * 2),
var(--cy) calc(var(--rpc-pct) * 3),
rgba(51,167,230,0) calc(var(--rpc-pct) * 4)) border-box;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rpc .go::after{content:"";position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;
translate:-50% -50%;z-index:-1;pointer-events:none;
background:linear-gradient(-50deg,rgba(51,167,230,0),var(--cy),rgba(51,167,230,0));
-webkit-mask-image:radial-gradient(circle at bottom,rgba(0,35,71,0) 40%,rgba(0,35,71,1));
mask-image:radial-gradient(circle at bottom,rgba(0,35,71,0) 40%,rgba(0,35,71,1));
opacity:.55}
.rpc .go:focus-visible{outline:3px solid var(--cy);outline-offset:4px}
.rpc .go:is(:hover,:focus-visible){--rpc-pct:22%;--rpc-off:95deg}
@keyframes rpc-ang{to{--rpc-ang:360deg}}
@keyframes rpc-spin{to{rotate:360deg}}
@keyframes rpc-r{0.00%{transform:translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg)}4.17%{transform:translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg)}8.33%{transform:translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg)}12.50%{transform:translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg)}16.67%{transform:translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg)}20.83%{transform:translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg)}25.00%{transform:translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg)}29.17%{transform:translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg)}33.33%{transform:translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg)}37.50%{transform:translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg)}41.67%{transform:translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg)}45.83%{transform:translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg)}50.00%{transform:translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg)}54.17%{transform:translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg)}58.33%{transform:translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg)}62.50%{transform:translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg)}66.67%{transform:translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg)}70.83%{transform:translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg)}75.00%{transform:translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg)}79.17%{transform:translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg)}83.33%{transform:translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg)}87.50%{transform:translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg)}91.67%{transform:translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg)}95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg)}100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg)}}
@keyframes rpc-l{0.00%{transform:translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg)}4.17%{transform:translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg)}8.33%{transform:translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg)}12.50%{transform:translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg)}16.67%{transform:translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg)}20.83%{transform:translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg)}25.00%{transform:translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg)}29.17%{transform:translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg)}33.33%{transform:translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg)}37.50%{transform:translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg)}41.67%{transform:translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg)}45.83%{transform:translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg)}50.00%{transform:translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg)}54.17%{transform:translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg)}58.33%{transform:translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg)}62.50%{transform:translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg)}66.67%{transform:translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg)}70.83%{transform:translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg)}75.00%{transform:translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg)}79.17%{transform:translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg)}83.33%{transform:translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg)}87.50%{transform:translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg)}91.67%{transform:translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg)}95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg)}100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg)}}
@media (prefers-reduced-motion:no-preference){
.rpc .go{transition:transform .25s cubic-bezier(0,0,.5,1);animation:rpc-ang 9s linear infinite}
.rpc .go::after{animation:rpc-spin 9s linear infinite}
.rpc .go:hover{transform:translateY(-2px)}
}
@media (max-width:600px){
.rpc{padding:72px 0 76px}
/* A phone is too narrow for the corridor's spread: cards reach the edge before their faces
are readable. Flattening the perspective keeps them nearer the middle for longer. */
.rpc-stream{perspective:58cqw}
.rpc-stream{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%,#000 74%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 26%,#000 74%,transparent 100%)}
.rpc-card{width:40cqw;height:51.056cqw;margin-left:-20.0cqw;margin-top:-25.528cqw}
.rpc p{color:rgba(255,255,255,.92)}
.rpc-veil{background:
radial-gradient(64% 46% at 50% 50%,rgba(0,35,71,.93) 0%,rgba(0,35,71,.84) 58%,rgba(0,35,71,0) 100%),
linear-gradient(180deg,rgba(0,35,71,.88) 0%,rgba(0,35,71,.28) 24%,rgba(0,35,71,.28) 76%,rgba(0,35,71,.92) 100%)}
.rpc-in{padding:0 18px}
.rpc .go{display:block}
}
/* HubSpot product page: break the band out of the theme's centred container, the same way
.fpg-hero, .fpg-sec-alt and .fpg-cta already do on this page. */
.rpc{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important}
.rpc-comp{position:relative;z-index:2;margin:26px auto 0;max-width:640px;
font-size:13px;line-height:1.6;color:rgba(255,255,255,.62)}
/* The module centres the closing by putting text-align:center on .rpc-in and letting it inherit.
The page wrapper sets text-align:left directly on h2, p and div, which breaks that inheritance,
so the heading, the lede and the compliance line came back left-aligned at 390px while the
eyebrow, which the theme does not name, stayed centred. Restore the module's intent on the
elements it actually applies to. */
.fpg .rpc-in h2,.fpg .rpc-in p,.fpg .rpc-comp,.fpg .rpc .eyebrow{text-align:center!important}
.fpg .rpc{color:#fff!important;min-height:110vh!important;min-height:110svh!important;padding:113px 0 121px!important;background:
linear-gradient(#002347 0,rgba(0,35,71,0) 120px,rgba(0,35,71,0) calc(100% - 120px),#002347 100%),
radial-gradient(70% 60% at 50% 0%,rgba(51,167,230,.20) 0%,rgba(51,167,230,0) 64%),
linear-gradient(135deg,rgba(0,70,142,0) 0%,rgba(0,70,142,.45) 50%,rgba(0,70,142,0) 100%),
linear-gradient(#002347,#002347)!important;position:relative!important;display:flex!important;overflow:hidden!important}
.fpg .rpc-in{text-align:center!important;max-width:820px!important;padding:0 24px!important;position:relative!important;z-index:2!important}
.fpg .rpc-stream{position:absolute!important;z-index:0!important;overflow:hidden!important;perspective:30cqw!important;perspective-origin:50% 52%!important;container-type:inline-size!important;inset:0!important}
.fpg .rpc-rails{padding:0!important;list-style:none!important;position:absolute!important;transform-style:preserve-3d!important;inset:0!important}
.fpg .rpc-card{margin-left:-7.25cqw!important;margin-top:-9.254cqw!important;width:14.5cqw!important;height:18.508cqw!important;border-radius:.4cqw!important;box-shadow:0 1cqw 3cqw rgba(0,35,71,.45)!important;position:absolute!important;left:50%!important;top:52%!important;overflow:hidden!important;backface-visibility:hidden!important}
@media (min-width:601px) and (max-width:1024px){.fpg .rpc-card{margin-left:-13cqw!important;margin-top:-16.594cqw!important;width:26cqw!important;height:33.187cqw!important}}
.fpg .rpc-card img{width:100%!important;height:100%!important;display:block!important}
.fpg .rpc-veil{background:
radial-gradient(48% 46% at 50% 50%,rgba(0,35,71,.93) 0%,rgba(0,35,71,.78) 52%,rgba(0,35,71,0) 100%),
linear-gradient(180deg,rgba(0,35,71,.85) 0%,rgba(0,35,71,.18) 26%,rgba(0,35,71,.18) 74%,rgba(0,35,71,.9) 100%)!important;position:absolute!important;z-index:1!important;inset:0!important}
.fpg .rpc .eyebrow{font-size:16px!important;line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important;font-weight:400!important;color:transparent!important;background-image:linear-gradient(135deg,#4EBDEF,#E4EFFE)!important;position:relative!important;display:inline-block!important;background-clip:text!important;-webkit-background-clip:text!important}
.fpg .rpc .eyebrow::before{background-image:linear-gradient(to right,#071938,#00468E)!important;border-radius:8px!important;position:absolute!important;z-index:-1!important;inset:-4.8px -13.2px!important;content:""!important}
.fpg .rpc h2{font-size:clamp(32px,4vw,52px)!important;line-height:1.1!important;font-weight:600!important;color:#fff!important}
.fpg .rpc p{font-size:clamp(16px,1.3vw,18px)!important;line-height:1.6!important;color:rgba(255,255,255,.78)!important;max-width:46ch!important}
.fpg .rpc .go{font-size:16px!important;line-height:1.2!important;font-weight:500!important;color:#fff!important;text-decoration:none!important;padding:16px 34px!important;background:linear-gradient(var(--nv),var(--nv)) padding-box,
conic-gradient(from calc(var(--rpc-ang) - var(--rpc-off)),
rgba(51,167,230,0),
var(--cy) var(--rpc-pct),
var(--rpc-shine) calc(var(--rpc-pct) * 2),
var(--cy) calc(var(--rpc-pct) * 3),
rgba(51,167,230,0) calc(var(--rpc-pct) * 4)) border-box!important;border-radius:12px!important;border:1px solid transparent!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;position:relative!important;display:inline-block!important;overflow:hidden!important}
.fpg .rpc .go::after{width:100%!important;background:linear-gradient(-50deg,rgba(51,167,230,0),var(--cy),rgba(51,167,230,0))!important;position:absolute!important;left:50%!important;top:50%!important;z-index:-1!important;aspect-ratio:1!important;content:""!important}
@media (max-width:600px){.fpg .rpc{padding:72px 0 76px!important}}
@media (max-width:600px){.fpg .rpc-stream{perspective:58cqw!important}}
@media (max-width:600px){.fpg .rpc-card{margin-left:-20.0cqw!important;margin-top:-25.528cqw!important;width:40cqw!important;height:51.056cqw!important}}
@media (max-width:600px){.fpg .rpc p{color:rgba(255,255,255,.92)!important}}
@media (max-width:600px){.fpg .rpc-veil{background:
radial-gradient(64% 46% at 50% 50%,rgba(0,35,71,.93) 0%,rgba(0,35,71,.84) 58%,rgba(0,35,71,0) 100%),
linear-gradient(180deg,rgba(0,35,71,.88) 0%,rgba(0,35,71,.28) 24%,rgba(0,35,71,.28) 76%,rgba(0,35,71,.92) 100%)!important}}
@media (max-width:600px){.fpg .rpc-in{padding:0 18px!important}}
@media (max-width:600px){.fpg .rpc .go{display:block!important}}
/* dnd_area row 0 paints a navy SVG (Group 5864522.svg, cover) behind the whole wrapper,
so transparent .fpg-sec sections sit on a dark ground while the fpg palette is authored
for a light one. Light text is scoped to those sections only: .fpg-sec-alt, .fpg-stat and
.fpg-split-media.fpg-ph paint their own light backgrounds and keep the dark palette. */
.fpg-sec:not(.fpg-sec-alt)>.fpg-w>h2,
.fpg-sec:not(.fpg-sec-alt) .fpg-intro h2,
.fpg-sec:not(.fpg-sec-alt) .fpg-faq h2,
.fpg-sec:not(.fpg-sec-alt) .fpg-faq details>summary,
.fpg-sec:not(.fpg-sec-alt) .fpg-split>div:not(.fpg-split-media)>h3{color:#fff}
.fpg-sec:not(.fpg-sec-alt) .fpg-intro>p,
.fpg-sec:not(.fpg-sec-alt) .fpg-faq details>p,
.fpg-sec:not(.fpg-sec-alt) .fpg-split>div:not(.fpg-split-media)>p{color:#D6E6F5}
.fpg-sec:not(.fpg-sec-alt) p.fpg-attr{color:#B9D3E9}
.fpg-shot .fpg-ph b,.fpg-slide .fpg-ph b{color:#D6E6F5}
/* WCAG AA on small text: cyan #33a7e6 reads 2.47 on the #f5f5f5 alt sections and the amber,
slate and playback labels sat between 1.3 and 4.4. Values below are the palette the page
already uses, darkened to clear 4.5 at 10-16px. */
.fpg-step-card>.n{color:#00468e}
.fpg a.fpg-inline-link{color:#00468e!important}
.fpg-hero .fpg-ph b{color:#D6E6F5}
#mmf-root .metric-score.score-amber{color:#92400e!important}
#mmf-root .mmf-count-pill{color:#475569!important}
#mmf-root .video-playback-time{color:#1e293b!important}
/* A placeholder was the second column of these splits. With it gone the copy would sit in half the
width beside a hole, so the surviving column takes the full width. :has is how the rule knows a
split still holds an image; a split that does not gets collapsed. */
.fpg .fpg-hero-grid:not(:has(img)):not(:has(video)),
.fpg .fpg-split:not(:has(img)):not(:has(video)){grid-template-columns:minmax(0,1fr)!important}
.rpb{--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tint:#F2F7FF;--line:#e4effe;--ink:#333333;--mut:#636262;
font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--tint);padding:96px 0 104px}
.rpb *,.rpb *::before,.rpb *::after{box-sizing:border-box}
.rpb,.rpb *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rpb-in{max-width:1240px;margin:0 auto;padding:0 24px}
.rpb h2{margin:0 0 10px;max-width:22ch;font-size:31px;line-height:1.2;font-weight:600;color:var(--nv);text-wrap:balance}
.rpb .lede{margin:0 0 34px;max-width:48ch;font-size:16px;line-height:1.65;color:var(--mut)}
.rpb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;align-items:stretch;
list-style:none;margin:0;padding:0}
.rpb-c{--cpad:30px;position:relative;display:flex;flex-direction:column;background:#fff;border:0;
border-radius:28px;padding:var(--cpad);overflow:hidden}
.rpb-c:nth-child(1){grid-column:1/span 3}
.rpb-c:nth-child(2){grid-column:4/span 3}
.rpb-c:nth-child(3){grid-column:1/span 2}
.rpb-c:nth-child(4){grid-column:3/span 2}
.rpb-c:nth-child(5){grid-column:5/span 2}
.rpb-c .lab{font-size:15px;font-weight:400;color:var(--mut);margin:0 0 6px}
.rpb-c h3{margin:0 0 12px;font-size:25px;line-height:1.16;font-weight:600;color:var(--nv);text-wrap:balance}
.rpb-c p{margin:0 0 26px;font-size:15.5px;line-height:1.6;color:var(--mut)}
.rpb-c p:last-of-type{margin-bottom:22px}
.rpb-well{margin-top:auto;padding-top:0;border:1px solid var(--line);border-radius:12px;background:var(--tint);overflow:hidden}
.rpb-well img{display:block;width:100%;height:100%;object-fit:cover}
.rpb-w1{aspect-ratio:1876/823}
.rpb-w2{aspect-ratio:1876/823;background:#fff;container-type:inline-size}
.rpb-globe{position:relative;width:100%;height:100%;display:flex;align-items:center;
justify-content:center;background:#fff;overflow:hidden}
/* The sphere is wider than the panel and sits below its floor, so only the top of it is in
frame. A globe you cannot see the bottom of reads as a big one. 72cqw across with the centre
40cqw under the floor leaves 32 of 72 in view, a little under half. */
.rpb-orb{position:absolute;left:50%;bottom:-40cqw;transform:translateX(-50%);
width:72cqw;height:72cqw;border-radius:50%;overflow:hidden;
background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#EFF6FE 38%,#DCEAFB 72%,#C6DCF6 100%);
box-shadow:0 0 0 1px rgba(0,70,142,.10),0 2.2cqw 4cqw -1.6cqw rgba(0,35,71,.22),
inset -2.4cqw -1.4cqw 4cqw rgba(0,35,71,.10),inset 1.6cqw 1.2cqw 3cqw rgba(255,255,255,.9)}
/* The land layer is one tile repeated on x and slid by exactly one tile width, so the sphere
turns without a seam. The graticule is a second tile on the same cycle. */
.rpb-orb i{position:absolute;inset:0;display:block;background-repeat:repeat-x;
background-size:50% 100%;animation:rpbSpin 34s linear infinite}
.rpb-orb i.land{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='%2300468E' fill-opacity='.20'%3E%3Cpath d='M18 52c14-9 33-6 40 4s-4 20 4 29c9 10 2 24-12 25s-26-9-30-22 -12-30-2-36z'/%3E%3Cpath d='M74 118c10-4 17 4 16 14s-6 26-15 30-16-5-14-17 3-23 13-27z'/%3E%3Cpath d='M112 44c18-8 44-4 52 8s-6 21 2 30-9 21-24 18-30-14-32-28 -7-24 2-28z'/%3E%3Cpath d='M160 116c12-2 22 8 19 19s-14 20-24 17-13-15-9-24 6-11 14-12z'/%3E%3Cpath d='M42 152c9-3 18 3 17 11s-9 14-18 12-10-9-7-16 4-6 8-7z'/%3E%3C/g%3E%3C/svg%3E")}
.rpb-orb i.grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2300468E' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 0v200M50 0v200M100 0v200M150 0v200'/%3E%3C/g%3E%3C/svg%3E")}
.rpb-orb u{position:absolute;inset:0;display:block;text-decoration:none;pointer-events:none;
background:repeating-linear-gradient(to bottom,rgba(0,70,142,.11) 0 1px,rgba(0,70,142,0) 1px 14.28%)}
@keyframes rpbSpin{from{background-position-x:0}to{background-position-x:-100%}}
.rpb-orb .rpb-gl{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%;
opacity:0;transition:opacity .9s ease;z-index:2}
/* The CSS sphere is the fallback for no WebGL and for a blocked CDN. Once cobe paints it is not a
backdrop, it is a second sphere showing past the canvas edge, so it is removed outright. */
.rpb-orb.live{background:none;box-shadow:none}
.rpb-orb.live i,.rpb-orb.live u{display:none}
/* cobe paints the land as darkened baseColor, so on a white sphere the dots come out near black.
A navy plate in lighten mode lifts every dark pixel to navy and leaves the white alone. */
.rpb-orb.live::after{content:"";position:absolute;inset:10.4%;border-radius:50%;background:var(--nv);
mix-blend-mode:lighten;z-index:2;pointer-events:none}
.rpb-arcs{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.rpb-arcs .ln{stroke:#00468E;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.rpb-arcs .l0{stroke-width:2.6}.rpb-arcs .l1{stroke-width:1.7}.rpb-arcs .l2{stroke-width:1.3}
.rpb-arcs .hd,.rpb-arcs .tg{fill:#00468E;opacity:0}
.rpb-arcs .rg{fill:none;stroke:#00468E;stroke-width:1.4;opacity:0}
.rpb-tag{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 1.7cqw));padding:.36cqw .8cqw;
border-radius:.3cqw;background:var(--nv);color:#fff;font-size:1.15cqw;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity .45s ease}
.rpb-tag.dst{background:#00468E}
.rpb-tag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:1.4cqw;
background:inherit;opacity:.85}
@media (max-width:640px){.rpb-tag{font-size:2cqw;transform:translate(-50%,calc(-100% - 2.4cqw))}
.rpb-tag::after{height:2cqw}}
.rpb-wires{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.rpb-wires g:first-child path{stroke-dasharray:5 7;animation:rpbFlow 2.8s linear infinite}
@keyframes rpbFlow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){.rpb-wires g:first-child path{animation:none;stroke-dasharray:none}}
.rpb-pins{position:absolute;inset:0;z-index:4}
.rpb-pin{position:absolute;display:flex;align-items:center;gap:.85cqw;padding:.6cqw 1.25cqw .6cqw .6cqw;
border-radius:10cqw;background:#fff;box-shadow:0 .3cqw 1.1cqw rgba(0,35,71,.16);
border:1px solid rgba(0,70,142,.10);white-space:nowrap}
.rpb-pin img{width:4.3cqw;height:4.3cqw;border-radius:50%;object-fit:cover;object-position:center top;
background:#EAF2FC;flex:0 0 auto}
.rpb-pin b{font-size:2.1cqw;font-weight:600;color:var(--nv);line-height:1.1}
.rpb-pin s{text-decoration:none;font-size:1.75cqw;color:var(--mut);line-height:1.1}
.rpb-pin .tx{display:flex;flex-direction:column;gap:.15cqw}
.rpb-p1{left:1.5%;top:26%}.rpb-p2{left:0%;top:56%}.rpb-p3{left:0%;top:82%}
.rpb-p4{right:1.5%;top:23%}.rpb-p5{right:0%;top:53%}.rpb-p6{right:0%;top:80%}
.rpb-gcap{position:absolute;left:50%;top:4%;transform:translateX(-50%);font-size:2.05cqw;
color:var(--mut);letter-spacing:.02em;white-space:nowrap}
.rpb-gcap b{color:var(--nv);font-weight:600}
@media (prefers-reduced-motion:reduce){.rpb-orb i{animation:none}}
@media (max-width:640px){.rpb-pin s{display:none}.rpb-pin b{font-size:max(3.2cqw,10.5px)}
.rpb-pin img{width:max(6.4cqw,20px);height:max(6.4cqw,20px)}.rpb-gcap{font-size:max(3cqw,10.5px)}}
/* Under about 340px of panel the city tags fall below 7px and stop being type, so they go and
the arcs and rings carry the story on their own. Strokes step up so they still register. */
@container (max-width:340px){.rpb-tag{display:none}
.rpb-p2,.rpb-p5{top:49%}.rpb-p3,.rpb-p6{top:auto;bottom:4%}
.rpb-arcs .l0{stroke-width:4}.rpb-arcs .l1{stroke-width:2.6}.rpb-arcs .l2{stroke-width:2}
.rpb-arcs .rg{stroke-width:2.2}}
.rpb-w4{margin-top:auto;display:flex;align-items:center;justify-content:center;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.rpb-w4 img{display:block;width:100%;max-width:300px;height:auto;object-fit:contain}
.rpb-draw{margin-top:auto;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.rpb-draw .hd{display:flex;gap:10px;margin:0 0 12px 0;padding-left:38%}
.rpb-draw .hd span{flex:1;font-size:12px;font-weight:500;color:var(--mut)}
.rpb-draw .rw{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.rpb-draw .rw i{flex:0 0 38%;font-style:normal;font-size:12px;font-weight:500;color:var(--nv)}
.rpb-draw .tr{position:relative;flex:1;height:8px;border-radius:6px;background:#fff;border:1px solid var(--line)}
.rpb-draw .tr b{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--bl);display:block}
.rpb-draw .tr.b b{background:var(--cy)}
@media (hover:hover) and (pointer:fine){
.rpb-well img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rpb-c:hover .rpb-well img{transform:scale(1.03)}
}
.rpb-cta{--r:28px;--bm:200%;background:var(--nv);isolation:isolate;
box-shadow:0 0 0 1px rgba(51,167,230,.22),0 18px 40px -28px rgba(0,35,71,0)}
.rpb-cta::before{content:"";position:absolute;left:50%;top:50%;width:var(--bm);aspect-ratio:1;z-index:0;
transform:translate(-50%,-50%) rotate(94deg);pointer-events:none;
background:conic-gradient(from 0deg,rgba(51,167,230,0) 0 64%,rgba(51,167,230,.55) 79%,rgba(255,255,255,.95) 85%,rgba(51,167,230,.55) 91%,rgba(51,167,230,0) 100%)}
.rpb-cta .fx{position:absolute;inset:2px;z-index:0;border-radius:calc(var(--r) - 2px);overflow:hidden;pointer-events:none;
background:radial-gradient(120% 90% at 0% 100%,rgba(0,70,142,.5) 0%,rgba(0,70,142,0) 60%),var(--nv);
-webkit-mask-image:radial-gradient(farthest-side,rgba(0,35,71,1) 86%,rgba(0,35,71,.78) 100%);
mask-image:radial-gradient(farthest-side,rgba(0,35,71,1) 86%,rgba(0,35,71,.78) 100%)}
.rpb-cta .fx::before{content:"";position:absolute;width:340px;height:340px;right:-150px;top:-170px;border-radius:50%;
background:radial-gradient(closest-side,rgba(51,167,230,.42) 0%,rgba(51,167,230,.13) 45%,rgba(51,167,230,0) 100%);
transform:translate3d(0,0,0)}
.rpb-cta .fx::after{content:"";position:absolute;inset:0;
background:radial-gradient(circle,rgba(51,167,230,.28) 0.8px,rgba(51,167,230,0) 1.4px) 0 0/22px 22px;
-webkit-mask-image:linear-gradient(90deg,rgba(0,35,71,0) 34%,rgba(0,35,71,1) 58%),linear-gradient(180deg,rgba(0,35,71,1) 30%,rgba(0,35,71,0) 62%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,rgba(0,35,71,0) 34%,rgba(0,35,71,1) 58%),linear-gradient(180deg,rgba(0,35,71,1) 30%,rgba(0,35,71,0) 62%);
mask-composite:intersect}
.rpb-cta .lab,.rpb-cta h3,.rpb-cta p,.rpb-cta .go{position:relative;z-index:1}
.rpb-cta .lab{display:flex;align-items:center;gap:8px;color:#fff}
.rpb-cta .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cy);
box-shadow:0 0 0 3px rgba(51,167,230,.22)}
.rpb-cta h3{color:#fff}
.rpb-cta p{color:rgba(255,255,255,.86)}
.rpb-cta .go{margin-top:auto;padding-top:22px}
.rpb-cta .go span{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--nv);font-size:15px;font-weight:500;
padding:12px 18px 12px 20px;border-radius:8px;box-shadow:0 8px 24px -12px rgba(51,167,230,.6)}
.rpb-cta .go svg{display:block;width:16px;height:16px;flex:none}
.rpb-cta a{position:absolute;inset:0;border-radius:var(--r);text-decoration:none;color:#fff;z-index:2}
.rpb-cta a:focus-visible{outline:3px solid var(--cy);outline-offset:-7px;border-radius:calc(var(--r) - 4px)}
@media (hover:hover) and (pointer:fine){
.rpb-cta{transition:transform .3s cubic-bezier(0,0,.5,1),box-shadow .3s linear}
.rpb-cta:hover{transform:translateY(-4px);
box-shadow:0 0 0 1px rgba(51,167,230,.45),0 24px 48px -24px rgba(0,35,71,.45)}
.rpb-cta .go svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rpb-cta:hover .go svg{transform:translateX(4px)}
}
@keyframes rpb-beam{from{transform:translate(-50%,-50%) rotate(94deg)}to{transform:translate(-50%,-50%) rotate(454deg)}}
@keyframes rpb-orb{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-40px,110px,0) scale(1.08)}100%{transform:translate3d(0,230px,0) scale(.96)}}
@keyframes rpb-dot{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:no-preference){
.rpb-cta::before{animation:rpb-beam 9s linear infinite;will-change:transform}
.rpb-cta .fx::before{animation:rpb-orb 14s ease-in-out infinite alternate;will-change:transform}
.rpb-cta .lab::before{animation:rpb-dot 2.6s ease-in-out infinite}
}
@media (max-width:1099px){.rpb-cta{--bm:125%}}
@media (max-width:600px){.rpb-cta{--r:18px;--bm:200%}}
@media (prefers-reduced-motion:reduce){
.rpb-cta,.rpb-cta:hover{transform:none;transition:none}
.rpb-cta::before,.rpb-cta .fx::before,.rpb-cta .lab::before{animation:none}
.rpb-cta .go svg{transition:none}
}
@keyframes rpb-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
.rpb-c{animation:rpb-in linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
.rpb-c:nth-child(2){animation-range:entry 6% entry 41%}
.rpb-c:nth-child(3){animation-range:entry 12% entry 47%}
.rpb-c:nth-child(4){animation-range:entry 18% entry 53%}
.rpb-c:nth-child(5){animation-range:entry 24% entry 59%}
}
.rpb-pre{opacity:0;transform:translateY(24px)}
.rpb-on{opacity:1;transform:none;transition:opacity .6s linear,transform .6s cubic-bezier(.22,1,.36,1);
transition-delay:calc(var(--i,0) * 80ms)}
@media (max-width:1099px){
.rpb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rpb-c:nth-child(1),.rpb-c:nth-child(2),.rpb-c:nth-child(3),.rpb-c:nth-child(4){grid-column:auto}
.rpb-c:nth-child(5){grid-column:1/-1}
}
@media (max-width:600px){
.rpb{padding:56px 0 64px}
.rpb-in{padding:0 18px}
.rpb h2{font-size:25px}
.rpb-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.rpb-c{--cpad:22px;grid-column:auto !important;border-radius:18px}
.rpb-c h3{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
.rpb-c{animation:none !important;opacity:1 !important;transform:none !important;transition:none !important}
.rpb-c:hover .rpb-well img{transform:none}
}
/* HubSpot product page, two things the theme does that the module never had to survive.
1. Power wraps module content in a centred container, so a banded section renders as a box
unless it is broken out to the viewport edge.
2. The page wrapper carries `.fpg,.fpg h1,.fpg h2,.fpg h3,.fpg p,.fpg div,.fpg li{text-align:left}`.
`.fpg div` at (0,1,1) beats a single-class rule, which is how the rpc closing first rendered
left-aligned inside a correctly centred box. Two classes clear it. Measured, not assumed. */
.rpb{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important}
.fpg .rpb-in>h2,.fpg .rpb-in>p{text-align:center}
.fpg .rpb{padding:96px 0 104px!important;background:var(--tint)!important}
.fpg .rpb-in{margin:0 auto!important;max-width:1240px!important;padding:0 24px!important}
.fpg .rpb h2{font-size:31px!important;line-height:1.2!important;font-weight:600!important;color:var(--nv)!important;margin:0 0 10px!important;max-width:22ch!important}
.fpg .rpb .lede{font-size:16px!important;line-height:1.65!important;color:var(--mut)!important;margin:0 0 34px!important;max-width:48ch!important}
.fpg .rpb-grid{margin:0!important;padding:0!important;list-style:none!important;display:grid!important}
.fpg .rpb-c{padding:var(--cpad)!important;background:#fff!important;border-radius:28px!important;border:0!important;position:relative!important;display:flex!important;overflow:hidden!important}
.fpg .rpb-c .lab{font-size:15px!important;font-weight:400!important;color:var(--mut)!important;margin:0 0 6px!important}
.fpg .rpb-c h3{font-size:25px!important;line-height:1.16!important;font-weight:600!important;color:var(--nv)!important;margin:0 0 12px!important}
.fpg .rpb-c p{font-size:15.5px!important;line-height:1.6!important;color:var(--mut)!important;margin:0 0 26px!important}
.fpg .rpb-c p:last-of-type{margin-bottom:22px!important}
.fpg .rpb-well{margin-top:auto!important;background:var(--tint)!important;border-radius:12px!important;border:1px solid var(--line)!important;overflow:hidden!important}
.fpg .rpb-well img{width:100%!important;height:100%!important;display:block!important}
.fpg .rpb-w1{aspect-ratio:1876/823!important}
.fpg .rpb-w2{background:#fff!important;container-type:inline-size!important;aspect-ratio:1876/823!important}
.fpg .rpb-globe{width:100%!important;height:100%!important;background:#fff!important;position:relative!important;display:flex!important;overflow:hidden!important}
.fpg .rpb-orb{width:72cqw!important;height:72cqw!important;background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#EFF6FE 38%,#DCEAFB 72%,#C6DCF6 100%)!important;border-radius:50%!important;box-shadow:0 0 0 1px rgba(0,70,142,.10),0 2.2cqw 4cqw -1.6cqw rgba(0,35,71,.22),
inset -2.4cqw -1.4cqw 4cqw rgba(0,35,71,.10),inset 1.6cqw 1.2cqw 3cqw rgba(255,255,255,.9)!important;position:absolute!important;left:50%!important;bottom:-40cqw!important;overflow:hidden!important}
.fpg .rpb-orb i{position:absolute!important;display:block!important;inset:0!important}
.fpg .rpb-orb i.land{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='%2300468E' fill-opacity='.20'%3E%3Cpath d='M18 52c14-9 33-6 40 4s-4 20 4 29c9 10 2 24-12 25s-26-9-30-22 -12-30-2-36z'/%3E%3Cpath d='M74 118c10-4 17 4 16 14s-6 26-15 30-16-5-14-17 3-23 13-27z'/%3E%3Cpath d='M112 44c18-8 44-4 52 8s-6 21 2 30-9 21-24 18-30-14-32-28 -7-24 2-28z'/%3E%3Cpath d='M160 116c12-2 22 8 19 19s-14 20-24 17-13-15-9-24 6-11 14-12z'/%3E%3Cpath d='M42 152c9-3 18 3 17 11s-9 14-18 12-10-9-7-16 4-6 8-7z'/%3E%3C/g%3E%3C/svg%3E")!important}
.fpg .rpb-orb i.grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2300468E' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 0v200M50 0v200M100 0v200M150 0v200'/%3E%3C/g%3E%3C/svg%3E")!important}
.fpg .rpb-orb u{text-decoration:none!important;background:repeating-linear-gradient(to bottom,rgba(0,70,142,.11) 0 1px,rgba(0,70,142,0) 1px 14.28%)!important;position:absolute!important;display:block!important;inset:0!important}
.fpg .rpb-orb .rpb-gl{width:100%!important;height:100%!important;border-radius:50%!important;position:absolute!important;z-index:2!important;display:block!important;inset:0!important}
.fpg .rpb-orb.live{background:none!important;box-shadow:none!important}
.fpg .rpb-orb.live i,.fpg .rpb-orb.live u{display:none!important}
.fpg .rpb-orb.live::after{background:var(--nv)!important;border-radius:50%!important;position:absolute!important;z-index:2!important;inset:10.4%!important;content:""!important}
.fpg .rpb-arcs{width:100%!important;height:100%!important;position:absolute!important;z-index:3!important;inset:0!important}
.fpg .rpb-tag{font-size:1.15cqw!important;letter-spacing:.1em!important;text-transform:uppercase!important;font-weight:600!important;color:#fff!important;padding:.36cqw .8cqw!important;background:var(--nv)!important;border-radius:.3cqw!important;position:absolute!important;z-index:4!important}
.fpg .rpb-tag.dst{background:#00468E!important}
.fpg .rpb-tag::after{width:1px!important;height:1.4cqw!important;background:inherit!important;position:absolute!important;left:50%!important;top:100%!important;content:""!important}
@media (max-width:640px){.fpg .rpb-tag{font-size:2cqw!important}}
@media (max-width:640px){.fpg .rpb-tag::after{height:2cqw!important}}
.fpg .rpb-wires{width:100%!important;height:100%!important;position:absolute!important;z-index:3!important;inset:0!important}
.fpg .rpb-pins{position:absolute!important;z-index:4!important;inset:0!important}
.fpg .rpb-pin{padding:.6cqw 1.25cqw .6cqw .6cqw!important;background:#fff!important;border-radius:10cqw!important;border:1px solid rgba(0,70,142,.10)!important;box-shadow:0 .3cqw 1.1cqw rgba(0,35,71,.16)!important;position:absolute!important;display:flex!important}
.fpg .rpb-pin img{width:4.3cqw!important;height:4.3cqw!important;background:#EAF2FC!important;border-radius:50%!important}
.fpg .rpb-pin b{font-size:2.1cqw!important;line-height:1.1!important;font-weight:600!important;color:var(--nv)!important}
.fpg .rpb-pin s{font-size:1.75cqw!important;line-height:1.1!important;color:var(--mut)!important;text-decoration:none!important}
.fpg .rpb-pin .tx{display:flex!important}
.fpg .rpb-p1{left:1.5%!important;top:26%!important}
.fpg .rpb-p2{left:0%!important;top:56%!important}
.fpg .rpb-p3{left:0%!important;top:82%!important}
.fpg .rpb-p4{top:23%!important;right:1.5%!important}
.fpg .rpb-p5{top:53%!important;right:0%!important}
.fpg .rpb-p6{top:80%!important;right:0%!important}
.fpg .rpb-gcap{font-size:2.05cqw!important;letter-spacing:.02em!important;color:var(--mut)!important;position:absolute!important;left:50%!important;top:4%!important}
.fpg .rpb-gcap b{font-weight:600!important;color:var(--nv)!important}
@media (max-width:640px){.fpg .rpb-pin s{display:none!important}}
@media (max-width:640px){.fpg .rpb-pin b{font-size:max(3.2cqw,10.5px)!important}}
@media (max-width:640px){.fpg .rpb-pin img{width:max(6.4cqw,20px)!important;height:max(6.4cqw,20px)!important}}
@media (max-width:640px){.fpg .rpb-gcap{font-size:max(3cqw,10.5px)!important}}
.fpg .rpb-w4{margin-top:auto!important;padding:22px!important;background:var(--tint)!important;border-radius:12px!important;border:1px solid var(--line)!important;display:flex!important}
.fpg .rpb-w4 img{width:100%!important;height:auto!important;max-width:300px!important;display:block!important}
.fpg .rpb-draw{margin-top:auto!important;padding:18px!important;background:var(--tint)!important;border-radius:12px!important;border:1px solid var(--line)!important}
.fpg .rpb-draw .hd{margin:0 0 12px 0!important;display:flex!important}
.fpg .rpb-draw .hd span{font-size:12px!important;font-weight:500!important;color:var(--mut)!important}
.fpg .rpb-draw .rw{margin-bottom:11px!important;display:flex!important}
.fpg .rpb-draw .rw i{font-size:12px!important;font-weight:500!important;color:var(--nv)!important}
.fpg .rpb-draw .tr{height:8px!important;background:#fff!important;border-radius:6px!important;border:1px solid var(--line)!important;position:relative!important}
.fpg .rpb-draw .tr b{background:var(--bl)!important;border-radius:6px!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;display:block!important}
.fpg .rpb-draw .tr.b b{background:var(--cy)!important}
.fpg .rpb-cta{background:var(--nv)!important;box-shadow:0 0 0 1px rgba(51,167,230,.22),0 18px 40px -28px rgba(0,35,71,0)!important}
.fpg .rpb-cta::before{width:var(--bm)!important;background:conic-gradient(from 0deg,rgba(51,167,230,0) 0 64%,rgba(51,167,230,.55) 79%,rgba(255,255,255,.95) 85%,rgba(51,167,230,.55) 91%,rgba(51,167,230,0) 100%)!important;position:absolute!important;left:50%!important;top:50%!important;z-index:0!important;aspect-ratio:1!important;content:""!important}
.fpg .rpb-cta .fx{background:radial-gradient(120% 90% at 0% 100%,rgba(0,70,142,.5) 0%,rgba(0,70,142,0) 60%),var(--nv)!important;border-radius:calc(var(--r) - 2px)!important;position:absolute!important;z-index:0!important;overflow:hidden!important;inset:2px!important}
.fpg .rpb-cta .fx::before{width:340px!important;height:340px!important;background:radial-gradient(closest-side,rgba(51,167,230,.42) 0%,rgba(51,167,230,.13) 45%,rgba(51,167,230,0) 100%)!important;border-radius:50%!important;position:absolute!important;top:-170px!important;right:-150px!important;content:""!important}
.fpg .rpb-cta .fx::after{background:radial-gradient(circle,rgba(51,167,230,.28) 0.8px,rgba(51,167,230,0) 1.4px) 0 0/22px 22px!important;position:absolute!important;inset:0!important;content:""!important}
.fpg .rpb-cta .lab,.fpg .rpb-cta h3,.fpg .rpb-cta p,.fpg .rpb-cta .go{position:relative!important;z-index:1!important}
.fpg .rpb-cta .lab{color:#fff!important;display:flex!important}
.fpg .rpb-cta .lab::before{width:7px!important;height:7px!important;background:var(--cy)!important;border-radius:50%!important;box-shadow:0 0 0 3px rgba(51,167,230,.22)!important;content:""!important}
.fpg .rpb-cta h3{color:#fff!important}
.fpg .rpb-cta p{color:rgba(255,255,255,.86)!important}
.fpg .rpb-cta .go{margin-top:auto!important}
.fpg .rpb-cta .go span{font-size:15px!important;font-weight:500!important;color:var(--nv)!important;padding:12px 18px 12px 20px!important;background:#fff!important;border-radius:8px!important;box-shadow:0 8px 24px -12px rgba(51,167,230,.6)!important;display:inline-flex!important}
.fpg .rpb-cta .go svg{width:16px!important;height:16px!important;display:block!important}
.fpg .rpb-cta a{color:#fff!important;text-decoration:none!important;border-radius:var(--r)!important;position:absolute!important;z-index:2!important;inset:0!important}
.fpg .rpb-cta a:focus-visible{border-radius:calc(var(--r) - 4px)!important}
@media (hover:hover) and (pointer:fine){.fpg .rpb-cta:hover{box-shadow:0 0 0 1px rgba(51,167,230,.45),0 24px 48px -24px rgba(0,35,71,.45)!important}}
@media (max-width:600px){.fpg .rpb{padding:56px 0 64px!important}}
@media (max-width:600px){.fpg .rpb-in{padding:0 18px!important}}
@media (max-width:600px){.fpg .rpb h2{font-size:25px!important}}
@media (max-width:600px){.fpg .rpb-c{border-radius:18px!important}}
@media (max-width:600px){.fpg .rpb-c h3{font-size:20px!important}}
.fpg `.
`.fpg div` at (0,.fpg 1,.fpg 1) beats a single-class rule,.fpg which is how the rpc closing first rendered
left-aligned inside a correctly centred box. Two classes clear it. Measured,.fpg not assumed. */
.rpb{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important}
.fpg .fpg .rpb-in>h2,.fpg .fpg .rpb-in>p{text-align:center!important}
/* data-patch="2026-09-22-b" */
/* measured 2026-09-22 at 1710px on /product/analytics */
/* theme: li+li gets margin-top 8px, which put card 2 8px below card 1 in the same grid row */
.fpg .rpb-grid>li{margin:0!important}
/* the page's eight content headings sit at x=309 off a 1140 column; the bento was at 259 off 1240 */
.fpg .rpb-in{max-width:1140px!important}
/* #F2F7FF directly under the page's #F5F5F5 alt band reads as a seam, so it takes the page's tint */
.fpg .rpb{background:#F5F5F5!important}
/* patch:bento */
/* measured 2026-09-22 at 1710px on /product/analytics */
/* theme: li+li gets margin-top 8px, which put card 2 8px below card 1 in the same grid row */
.fpg .rpb-grid>li{margin:0!important}
/* the page's eight content headings sit at x=309 off a 1140 column; the bento was at 259 off 1240 */
.fpg .rpb-in{max-width:1140px!important}
/* #F2F7FF directly under the page's #F5F5F5 alt band reads as a seam, so it takes the page's tint */
.fpg .rpb{background:#F5F5F5!important}
/* patch:gutter */
/* One gutter per breakpoint. Measured on 2026-09-22 across twelve widths: the theme insets a
normal section by 20px below 600 and by 40px from 600 to 767, and the blocks that break out of
that inset each re-added a different amount, so the page had four left edges on a phone:
plain .fpg-sec inset 20, .fpg-w padding 0 -> 20
.fpg-sec-alt bleeds to 0, padding 40 -> 40
rpa/rpb/rpc/rails bleed to 0, padding 18 -> 18
.rph hero inset 20, .in padding 24 -> 44
The bleeding blocks now re-add exactly the inset of their band, so every left edge in the page
lands on the same number at any width. One fixed value cannot do this: 20 is correct below 600
and 20 too little above it, which is how the first attempt made tablets worse. */
@media (max-width:599px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .fpg-hero>.fpg-w,.fpg .fpg-cta>.fpg-w,
.fpg .rpa-in,.fpg .rpb-in,.fpg .rpc-in,
.fpg .rpg-rail,.fpg .rpp-rail,.fpg .rps-rail,
.fpg .rph .in{padding-left:20px!important;padding-right:20px!important}
}
@media (min-width:600px) and (max-width:767px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .fpg-hero>.fpg-w,.fpg .fpg-cta>.fpg-w,
.fpg .rpa-in,.fpg .rpb-in,.fpg .rpc-in,
.fpg .rpg-rail,.fpg .rpp-rail,.fpg .rps-rail,
.fpg .rph .in{padding-left:40px!important;padding-right:40px!important}
}
/* patch:herobleed */
/* The hero film is the first thing a phone shows and it was sitting in a 20px box, so the page
opened with a white margin down both sides of the video. It breaks out by exactly the inset,
the same way the alt bands do. Negative margin rather than 100vw: vw counts a scrollbar and
would put the page into horizontal scroll on a desktop that has one. */
@media (max-width:599px){
.fpg .rph{margin-left:-20px!important;margin-right:-20px!important;
width:auto!important;max-width:none!important}
}
@media (min-width:600px) and (max-width:767px){
.fpg .rph{margin-left:-40px!important;margin-right:-40px!important;
width:auto!important;max-width:none!important}
}
/* patch:rpcwidth */
/* Measured at 700px: .rpc-in takes a width of its own (668 of 700) and centres, so it starts 16px
in and the 40px gutter padding lands its content at 56 while the rest of the page is at 40. It
is the only inner wrapper that does this; rpa-in and rpb-in fill their section. Below 768 it
fills too, and the padding alone makes the gutter. */
@media (max-width:767px){
.fpg .rpc-in{width:100%!important;max-width:none!important;
margin-left:0!important;margin-right:0!important}
}
/* patch:gutter2 */
/* The first gutter block stopped at 767, but the theme's own mobile rules run to 768 inclusive,
so 768 exactly was left with alt bands at 20 against plain sections at 40. And above 768 the
bleeding blocks put back 24px against a page edge of 64, then centred on a 1192 or 1240 column
against the page's 1140: on desktop the hero and every mockup heading sat 50px left of every
other heading. One formula now, the page's own edge, for every block that bleeds. */
@media (min-width:600px) and (max-width:768px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .fpg-hero>.fpg-w,.fpg .fpg-cta>.fpg-w,
.fpg .rpa-in,.fpg .rpb-in,.fpg .rpc-in,
.fpg .rpg-rail,.fpg .rpp-rail,.fpg .rps-rail,
.fpg .rph .in{padding-left:40px!important;padding-right:40px!important}
}
@media (min-width:769px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .rpa-in,.fpg .rpb-in{
max-width:none!important;margin-left:0!important;margin-right:0!important;
padding-left:max(64px,calc((100% - 1092px) / 2))!important;padding-right:max(64px,calc((100% - 1092px) / 2))!important}
.fpg .rph .in{padding-left:max(64px,calc((100% - 1092px) / 2))!important;padding-right:max(64px,calc((100% - 1092px) / 2))!important}
.fpg .rpg-pin,.fpg .rpp-pin,.fpg .rps-pin{
max-width:none!important;margin-left:0!important;margin-right:0!important;
padding-left:max(64px,calc((100% - 1092px) / 2))!important;padding-right:max(64px,calc((100% - 1092px) / 2))!important}
}
/* patch:herobleed2 */
/* The theme's 40px inset runs to 1279, not 767, so on a tablet and a small laptop the hero film
still opened inside a white frame. Same break-out as below 768, same reason for no vw. */
@media (min-width:768px) and (max-width:1279px){
.fpg .rph{margin-left:-40px!important;margin-right:-40px!important;
width:auto!important;max-width:none!important}
}
/* patch:nobullet */
/* The theme draws a 22x2px cyan bar at left:-42px on every li inside a rich-text module
(.hs_cos_wrapper_type_rich_text ul li::before). Every card, dot, tab and rail step in these
modules is an li, so it put stray dashes beside the use-case cards and under the slider dots.
The feature kit had its own reset; this is the general one, by prefix, so a module added later
under the same naming is covered without anyone remembering. No module here uses li::before
or li::after for anything of its own (checked 2026-09-22). */
.fpg section[class^="rp"] li::before,.fpg section[class^="rp"] li::after,
.fpg section[class^="rh"] li::before,.fpg section[class^="rh"] li::after,
.fpg .mmf-root li::before{content:none!important;display:none!important}
/* rhl:guard */
.fpg .rhl{padding:96px 0 104px!important;background:var(--nv)!important}
.fpg .rhl-head{margin:0 0 34px!important;padding:0 var(--ggut)!important;display:flex!important}
.fpg .rhl-head h2{font-size:31px!important;line-height:1.2!important;font-weight:600!important;color:#fff!important;margin:0!important}
.fpg .rhl-head .more{font-size:15px!important;font-weight:500!important;color:#fff!important;text-decoration:none!important;margin-left:auto!important;display:inline-flex!important}
.fpg .rhl-head .more svg{width:14px!important;height:14px!important}
.fpg .rhl-head .more:focus-visible{border-radius:4px!important}
.fpg .rhl-track{margin:0!important;padding:0 var(--ggut)!important;list-style:none!important;display:flex!important}
.fpg .rhl-track::-webkit-scrollbar{display:none!important}
.fpg .rhl-track:focus-visible{border-radius:8px!important}
.fpg .rhl-card{max-width:1192px!important}
.fpg .rhl-well{background:rgba(255,255,255,.05)!important;border-radius:20px!important;border:1px solid rgba(255,255,255,.14)!important;position:relative!important;display:flex!important;overflow:hidden!important;aspect-ratio:2/1!important}
.fpg .rhl-well img{width:100%!important;height:100%!important;display:block!important}
.fpg .rhl-well .ph{font-size:14px!important;letter-spacing:.04em!important;color:rgba(255,255,255,.42)!important}
.fpg .rhl-cap{font-size:17px!important;line-height:1.5!important;color:rgba(255,255,255,.72)!important;margin:28px 0 0!important;max-width:56ch!important;padding:0 16px!important}
.fpg .rhl-cap b{font-weight:600!important;color:#fff!important}
.fpg .rhl-nav{margin:34px 0 0!important;padding:0 var(--ggut)!important;display:flex!important}
.fpg .rhl-dots{margin:0!important;padding:0!important;list-style:none!important;display:flex!important}
.fpg .rhl-dots button{width:8px!important;height:8px!important;padding:0!important;background:rgba(255,255,255,.28)!important;border-radius:50%!important;border:0!important}
.fpg .rhl-dots button[aria-current="true"]{background:#fff!important}
.fpg .rhl-pad{margin-left:auto!important;display:flex!important}
.fpg .rhl-pad button{color:#fff!important;width:44px!important;height:44px!important;background:rgba(255,255,255,.08)!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.18)!important;display:flex!important}
.fpg .rhl-pad svg{width:17px!important;height:17px!important}
@media (max-width:780px){.fpg .rhl{padding:56px 0 64px!important}}
@media (max-width:780px){.fpg .rhl-head{margin-bottom:24px!important}}
@media (max-width:780px){.fpg .rhl-head h2{font-size:25px!important}}
@media (max-width:780px){.fpg .rhl-head .more{margin-left:0!important}}
@media (max-width:780px){.fpg .rhl-well{aspect-ratio:4/3!important}}
@media (max-width:780px){.fpg .rhl-cap{font-size:15.5px!important;margin-top:20px!important;padding:0 4px!important}}
@media (max-width:780px){.fpg .rhl-nav{margin-top:24px!important}}
/* rhl:fit */
/* joins the page's one-gutter contract (reference-product-page-gutters): the module's own
--ggut centred on a 1192 column and fell to 18px on phones */
.fpg .rhl{--ggut:max(64px,calc((100% - 1092px) / 2))!important}
@media (max-width:599px){.fpg .rhl{--ggut:20px!important;margin-left:-20px!important;
margin-right:-20px!important;width:auto!important;max-width:none!important}}
@media (min-width:600px) and (max-width:768px){.fpg .rhl{--ggut:40px!important}}
@media (min-width:600px) and (max-width:1279px){.fpg .rhl{margin-left:-40px!important;
margin-right:-40px!important;width:auto!important;max-width:none!important}}
/* a card is the column, measured in the track's content box rather than 100vw, which counts a
scrollbar; the next card still shows in the right gutter */
.fpg .rhl-card{flex:0 0 100%!important;max-width:none!important}
/* the theme's li+li margin would drop cards 2 to 4 and dots 2 to 4 by 8px */
.fpg .rhl-track>li,.fpg .rhl-dots>li{margin:0!important}
/* an empty well is a slot, not a broken image */
.fpg .rhl-well:empty{background:rgba(255,255,255,.06)!important}
/* patch:gutter3 */
/* Corrects gutter2, herobleed2 and the slider's fit layer, which all assumed the theme's 40px inset
ran to 1279. Measured at one-pixel steps on 2026-09-23: it ends at 1200 inclusive and is 0 at
1201. From 1201 to 1279 the hero and the slider were bleeding -40px past the screen edge, 40px of
horizontal scroll, and from 1201 to 1219 the 64px floor put every bleeding block about 10px right
of the plain sections. The two bands are now separate and neither guesses the other's edge. */
@media (min-width:769px) and (max-width:1200px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .rpa-in,.fpg .rpb-in,.fpg .rph .in,
.fpg .rpg-pin,.fpg .rpp-pin,.fpg .rps-pin{padding-left:64px!important;padding-right:64px!important}
.fpg .rhl{--ggut:64px!important}
}
@media (min-width:1201px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .rpa-in,.fpg .rpb-in,.fpg .rph .in,
.fpg .rpg-pin,.fpg .rpp-pin,.fpg .rps-pin{
padding-left:calc((100% - 1092px) / 2)!important;padding-right:calc((100% - 1092px) / 2)!important}
.fpg .rhl{--ggut:calc((100% - 1092px) / 2)!important}
.fpg .rph,.fpg .rhl{margin-left:0!important;margin-right:0!important}
}
/* patch:gutter4 */
/* The 20-to-40 switch is at 576, not 600: measured one pixel at a time on 2026-09-23, the theme
inset is 20 up to 575 and 40 from 576. Between 576 and 599 every bleeding block, the hero and the
slider were still on the 20 band while plain sections had moved to 40. Restated here for 576 to
768 so it wins over the older 599 edge in the sheet. */
@media (min-width:576px) and (max-width:768px){
.fpg .fpg-sec-alt>.fpg-w,.fpg .fpg-hero>.fpg-w,.fpg .fpg-cta>.fpg-w,
.fpg .rpa-in,.fpg .rpb-in,.fpg .rpc-in,
.fpg .rpg-rail,.fpg .rpp-rail,.fpg .rps-rail,
.fpg .rph .in{padding-left:40px!important;padding-right:40px!important}
.fpg .rhl{--ggut:40px!important}
.fpg .rph,.fpg .rhl{margin-left:-40px!important;margin-right:-40px!important;
width:auto!important;max-width:none!important}
}
/* The page leaves its mobile layout at 769 and the pinned mockups leave theirs at 781. In those
twelve pixels the mockup is still stacked, so its text is in the rail and not the pin: padding
the pin as well put the role-play heading at 82 against a page edge of 64. */
@media (min-width:769px) and (max-width:780px){
.fpg .rpg-pin,.fpg .rpp-pin,.fpg .rps-pin{padding-left:0!important;padding-right:0!important}
.fpg .rpg-rail,.fpg .rpp-rail,.fpg .rps-rail{padding-left:64px!important;padding-right:64px!important}
}
/* patch:fpx */
.fxk{--nv:#002347;--bl:#00468E;--cy:#33A7E6;--ln:#DCE5EF;--tx:#5A6B80;--mu:#7A8DA3;--tint:#F4F8FF;
--okb:#DDF3E4;--okt:#1E7A43;--ptb:#FDEBD3;--ptt:#9A5409;--imb:#FBE0DE;--imt:#B3261E;
position:relative;width:100%;max-width:248px;font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:11px;line-height:1.3;color:var(--tx);text-align:left}
.fxk *{box-sizing:border-box}
.fx-cap{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.fx-pill{display:inline-block;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:600;line-height:1.35;white-space:nowrap}
.fx-pill.ok{background:var(--okb);color:var(--okt)}.fx-pill.pt{background:var(--ptb);color:var(--ptt)}
.fx-pill.im{background:var(--imb);color:var(--imt)}
.fxk .sw{display:grid}.fxk .sw>span{grid-area:1/1;transition:opacity .3s}.fxk .sw>.n{opacity:0}
@keyframes fx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes fx-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fx-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fx-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Warmth and Competence. Hover: a dot travels first try to best try and the gain is named */
.fx-quad{display:grid;grid-template-columns:14px 1fr;grid-template-rows:1fr 14px;gap:3px;height:150px}
.fx-quad .yl{grid-row:1;grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
font-size:10px;font-weight:600;color:var(--nv)}
.fx-quad .xl{grid-row:2;grid-column:2;text-align:center;font-size:10px;font-weight:600;color:var(--nv)}
.fx-quad .pl{grid-row:1;grid-column:2;position:relative;border:1px solid var(--ln);border-radius:8px;
background:linear-gradient(var(--ln),var(--ln)) 50% 0/1px 100% no-repeat,
linear-gradient(var(--ln),var(--ln)) 0 50%/100% 1px no-repeat,var(--tint)}
.fx-quad .tr{position:absolute;right:0;top:0;width:50%;height:50%;border-radius:0 7px 0 0;background:rgba(51,167,230,.14);transition:background-color .4s}
.fx-quad .q{position:absolute;font-size:9px;line-height:1.15;color:var(--mu);max-width:46%}
.fx-quad .q1{left:6px;top:5px}.fx-quad .q2{right:6px;top:5px;text-align:right;color:var(--nv);font-weight:600}
.fx-quad .q3{left:6px;bottom:5px}.fx-quad .q4{right:6px;bottom:5px;text-align:right}
.fx-quad .path{position:absolute;left:32%;top:36%;width:40%;height:33%;
background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--bl) 50%,transparent calc(50% + 1px));opacity:.55}
.fx-quad .a,.fx-quad .b{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%}
.fx-quad .a{left:32%;top:69%;border:2px solid var(--bl);background:#fff}
.fx-quad .b{left:72%;top:36%;background:var(--bl);box-shadow:0 0 0 4px rgba(0,70,142,.16)}
.fx-quad .b::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--bl);opacity:0}
.fx-quad .m{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--cy);opacity:0}
.fx-quad .d{position:absolute;left:35%;top:39%;padding:1px 5px;border-radius:6px;background:#fff;border:1px solid var(--ln);
font-size:9.5px;font-weight:600;color:var(--bl);opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s}
.fx-quad-leg{display:flex;gap:12px;justify-content:center;margin-top:5px;font-size:9.5px;color:var(--tx)}
.fx-quad-leg span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:50%;
vertical-align:-1px;border:2px solid var(--bl);background:#fff}
.fx-quad-leg span+span::before{background:var(--bl)}
.fpg-in .fx-quad .path{animation:fx-fade .5s .5s backwards}
.fpg-in .fx-quad .b{animation:fx-pop .5s .3s backwards}
@keyframes fx-go{0%{left:32%;top:69%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:72%;top:36%;opacity:0}}
@keyframes fx-ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
/* First try against best try. Hover: the distance between them lights up as +32 */
.fx-fb{position:relative;height:150px;padding:0 44px 18px 22px}
.fx-fb .plot{position:relative;height:100%;border-bottom:1px solid var(--ln)}
.fx-fb .t{position:absolute;left:0;right:-44px;height:0;border-top:1px dashed #B8C8D9;transition:border-color .3s}
.fx-fb .t span{position:absolute;right:0;top:-7px;font-size:9px;color:var(--mu);background:#fff;padding-left:3px;transition:color .3s}
.fx-fb .t75{bottom:75%}.fx-fb .t50{bottom:50%}
.fx-fb .col{position:absolute;bottom:0;width:36%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.fx-fb .c1{left:6%}.fx-fb .c2{left:56%}
.fx-fb .bar{position:relative;overflow:hidden;width:62%;border-radius:4px 4px 0 0;transform-origin:50% 100%}
.fx-fb .c1 .bar{height:46%;background:#A9C3DD}.fx-fb .c2 .bar{height:78%;background:var(--bl)}
.fx-fb .gain{position:absolute;left:0;right:0;top:0;height:41%;display:flex;align-items:center;justify-content:center;
background:var(--cy);color:#fff;font-size:10px;font-weight:600;opacity:0;transition:opacity .35s}
.fx-fb .lv{position:absolute;left:24%;width:50%;bottom:46%;height:0;border-top:1.5px dashed var(--bl);opacity:0;
transform-origin:0 50%;transform:scaleX(0);transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.fx-fb .v{font-size:12px;font-weight:600;color:var(--nv);margin-bottom:3px}
.fx-fb .n{position:absolute;bottom:-17px;font-size:9.5px;color:var(--tx);white-space:nowrap}
.fpg-in .fx-fb .bar{animation:fx-rise .9s cubic-bezier(.16,1,.3,1) backwards}
.fpg-in .fx-fb .c2 .bar{animation-delay:.25s}
.fpg-in .fx-fb .v{animation:fx-fade .4s .8s backwards}
/* Four skills in their two groups. Hover: the best try replaces the first */
.fx-sk{display:grid;gap:5px}
.fx-sk .g{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-top:2px}
.fx-sk .r{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:3px;align-items:center}
.fx-sk .nm{font-size:10.5px;color:var(--nv)}
.fx-sk .vl{font-size:10.5px;font-weight:600;color:var(--nv);justify-items:end}
.fx-sk .tk{grid-column:1/-1;position:relative;height:6px;border-radius:3px;background:#E8EEF6}
.fx-sk .tk::after{content:"";position:absolute;left:75%;top:-2px;bottom:-2px;width:1.5px;background:var(--nv);opacity:.5}
.fx-sk .f{display:block;height:100%;border-radius:3px;transform-origin:0 50%;transition:width 1s cubic-bezier(.16,1,.3,1)}
.fx-sk .w .f{background:var(--cy)}.fx-sk .c .f{background:var(--bl)}
.fx-sk .r1 .f{width:71%}.fx-sk .r2 .f{width:66%}.fx-sk .r3 .f{width:34%}.fx-sk .r4 .f{width:51%}
.fpg-in .fx-sk .f{animation:fx-grow 1s cubic-bezier(.16,1,.3,1) backwards}
.fpg-in .fx-sk .r2 .f{animation-delay:.1s}.fpg-in .fx-sk .r3 .f{animation-delay:.2s}.fpg-in .fx-sk .r4 .f{animation-delay:.3s}
.fx-sk .key{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--mu);margin-top:3px}
.fx-sk .key::before{content:"";flex:none;width:1.5px;height:9px;background:var(--nv);opacity:.5}
.fx-sk .key .n{color:var(--okt);font-weight:600}
/* One skill opened into its sub-skills. Hover: first try becomes best try, statuses flip to Mastered */
.fx-sub{display:grid;gap:7px}
.fx-sub .hd{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:600;color:var(--nv)}
.fx-sub .hd .tg{display:inline-grid;margin-left:6px;font-size:9.5px;font-weight:500;color:var(--mu)}
.fx-sub .hd .vx{font-size:10.5px;justify-items:end}
.fx-sub .tk{position:relative;height:6px;border-radius:3px;background:#E8EEF6}
.fx-sub .tk::after{content:"";position:absolute;left:75%;top:-2px;bottom:-2px;width:1.5px;background:var(--nv);opacity:.5}
.fx-sub .tk span{display:block;width:34%;height:100%;border-radius:3px;background:var(--bl);transform-origin:0 50%;
transition:width 1s cubic-bezier(.16,1,.3,1)}
.fx-sub .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;
border:1px solid var(--ln);border-radius:8px;background:#fff;font-size:10.5px;color:var(--nv)}
.fx-sub .row .sw{justify-items:end}
.fpg-in .fx-sub .tk span{animation:fx-grow .9s cubic-bezier(.16,1,.3,1) backwards}
.fpg-in .fx-sub .row{animation:fx-in .45s backwards}
.fpg-in .fx-sub .s1{animation-delay:.35s}.fpg-in .fx-sub .s2{animation-delay:.5s}.fpg-in .fx-sub .s3{animation-delay:.65s}
/* Words, voice and face. Hover: the recording plays, a playhead reads it, one finding appears */
.fx-ch{position:relative;display:grid;gap:9px}
.fx-ch .r{display:grid;grid-template-columns:48px 1fr;column-gap:8px;align-items:center}
.fx-ch .k{font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--nv)}
.fx-ch .d{grid-column:2;font-size:9.5px;color:var(--mu);margin-top:1px}
.fx-ch .wv{grid-column:2;grid-row:1;display:flex;gap:3px;align-items:center;height:18px}
.fx-ch .wv span{flex:1;height:100%;border-radius:2px;background:var(--cy);animation:fx-wave 1.5s ease-in-out infinite paused}
.fx-ch .r2 .wv span{background:var(--bl);animation-duration:1.8s}
.fx-ch .r3 .wv span{background:#7FA9D6;animation-duration:2.2s}
.fx-ch .wv span:nth-child(1){animation-delay:-.2s}.fx-ch .wv span:nth-child(2){animation-delay:-.5s}
.fx-ch .wv span:nth-child(3){animation-delay:-.9s}.fx-ch .wv span:nth-child(4){animation-delay:-.3s}
.fx-ch .wv span:nth-child(5){animation-delay:-1.1s}.fx-ch .wv span:nth-child(6){animation-delay:-.7s}
.fx-ch .wv span:nth-child(7){animation-delay:-.1s}.fx-ch .wv span:nth-child(8){animation-delay:-1.3s}
@keyframes fx-wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.fx-ch .phw{position:absolute;left:56px;right:0;top:0;height:111px;pointer-events:none}
.fx-ch .ph{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--nv);opacity:0}
@keyframes fx-scan{0%{left:0;opacity:0}8%{opacity:.8}92%{opacity:.8}100%{left:100%;opacity:0}}
.fx-ch .nt{display:flex;gap:6px;align-items:center;padding:5px 8px;border-radius:8px;background:var(--tint);
font-size:9.5px;line-height:1.35;color:var(--nv);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.fx-ch .nt .ts{font-weight:600;color:var(--bl)}
/* The session wizard. Hover: the User step is ticked and the session moves on to Simulation */
.fx-st{display:grid;gap:6px}
.fx-st .s{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--nv);transition:color .3s}
.fx-st .c{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--bl);color:#fff;
font-size:10px;font-weight:600;transition:background-color .3s,color .3s,box-shadow .3s}
.fx-st .c span{grid-area:1/1;transition:opacity .25s}.fx-st .c .n{opacity:0}
.fx-st .s4 .c{background:#fff;color:var(--bl);box-shadow:inset 0 0 0 1.6px var(--bl)}
.fx-st .s4 .l{font-weight:600}
.fx-st .s5{color:var(--mu)}
.fx-st .s5 .c{background:#fff;color:var(--mu);box-shadow:inset 0 0 0 1.4px var(--ln)}
.fx-st .rd{margin-top:2px;font-size:10px;font-weight:600;color:var(--okt);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.fpg-in .fx-st .s{animation:fx-in .35s backwards}
.fpg-in .fx-st .s2{animation-delay:.12s}.fpg-in .fx-st .s3{animation-delay:.24s}
.fpg-in .fx-st .s4{animation-delay:.36s}.fpg-in .fx-st .s5{animation-delay:.48s}
/* One paragraph in, three written fields out. Hover: the AI writes them again, field by field */
.fx-fd{display:grid;gap:5px}
.fx-fd .in{padding:6px 8px;border-radius:8px;background:var(--tint);border:1px dashed #B8C8D9;font-size:10.5px;color:var(--nv);
transition:border-color .3s,background-color .3s}
.fx-fd .f{position:relative;overflow:hidden;padding:5px 8px;border:1px solid var(--ln);border-radius:8px;background:#fff}
.fx-fd .f::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;
background:linear-gradient(100deg,transparent 20%,rgba(51,167,230,.28) 50%,transparent 80%);transform:translateX(-110%)}
.fx-fd .f .l{display:block;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.fx-fd .f .v{display:block;font-size:10.5px;color:var(--nv);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-fd .ai{position:absolute;top:5px;right:7px;padding:0 5px;border-radius:5px;background:var(--bl);color:#fff;
font-size:8.5px;font-weight:600;line-height:14px;opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s}
@keyframes fx-sweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.fpg-in .fx-fd .f{animation:fx-in .45s backwards}
.fpg-in .fx-fd .f1{animation-delay:.35s}.fpg-in .fx-fd .f2{animation-delay:.55s}.fpg-in .fx-fd .f3{animation-delay:.75s}
/* A suggested goal. Hover: a click on the chip fills the description and pairs the skill */
.fx-sg{position:relative;display:grid;gap:8px}
.fx-sg .chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-sg .chip{position:relative;padding:4px 9px;border-radius:999px;border:1px solid var(--ln);background:#fff;font-size:10.5px;color:var(--tx)}
.fx-sg .chip.on{border:1px solid var(--bl);background:var(--bl);color:#fff}
.fx-sg .chip.on::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:2px solid var(--cy);opacity:0}
.fx-sg .out{padding:7px 9px;border:1px solid var(--ln);border-radius:8px;background:#fff}
.fx-sg .out .l{display:block;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mu);margin-bottom:2px}
.fx-sg .out .g{display:block;font-size:10.5px;color:var(--nv)}
.fx-sg .out .tag{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:6px;background:var(--tint);font-size:9.5px;color:var(--bl);
transition:transform .3s,background-color .3s}
.fx-sg .cur{position:absolute;width:12px;height:16px;opacity:0;pointer-events:none;z-index:2;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)) drop-shadow(0 0 1px #fff)}
.fx-sg .cur span{display:block;width:100%;height:100%;background:var(--nv);
clip-path:polygon(0 0,0 78%,24% 60%,40% 96%,56% 89%,40% 55%,72% 55%)}
@keyframes fx-cur{0%{left:88%;top:92%;opacity:0}15%{opacity:1}45%{left:50px;top:28px;transform:none}
52%{left:50px;top:28px;transform:scale(.8)}60%{left:50px;top:28px;transform:none}85%{left:50px;top:28px;opacity:1}100%{left:50px;top:28px;opacity:0}}
@keyframes fx-rip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
.fpg-in .fx-sg .out{animation:fx-in .5s .5s backwards}
/* The persona library. Hover: the pick moves to another counterpart */
.fx-lib{position:relative;display:grid;gap:6px}
.fx-lib .p{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;height:46px;padding:0 26px 0 6px;
border:1px solid var(--ln);border-radius:9px;background:#fff}
.fx-lib .av{width:30px;height:30px;border-radius:50%;background-color:#DCE5EF;background-position:center;background-size:cover;background-repeat:no-repeat}
.fx-lib .nm{display:block;font-size:11px;font-weight:600;color:var(--nv)}
.fx-lib .tr{display:block;font-size:9.5px;line-height:1.25;color:var(--mu)}
.fx-lib .at{transition:color .3s}
.fx-lib .sel{position:absolute;left:0;right:0;top:52px;height:46px;border-radius:9px;pointer-events:none;
box-shadow:inset 0 0 0 1.5px var(--bl),0 0 0 3px rgba(0,70,142,.12);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.fx-lib .ck{position:absolute;right:7px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--bl);color:#fff;
font-size:10px;display:flex;align-items:center;justify-content:center}
.fpg-in .fx-lib .p{animation:fx-in .4s backwards}
.fpg-in .fx-lib .p2{animation-delay:.12s}.fpg-in .fx-lib .p3{animation-delay:.24s}
.fpg-in .fx-lib .sel{animation:fx-fade .4s .6s backwards}
/* Attitude and personality set the difficulty. Hover: a friendlier counterpart, an easier conversation */
.fx-dl{display:grid;gap:10px}
.fx-dl .seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ln);border-radius:8px;overflow:hidden;margin-top:4px;background:#fff}
.fx-dl .th{position:absolute;top:0;bottom:0;left:0;width:33.34%;background:var(--bl);transform:translateX(200%);
transition:transform .5s cubic-bezier(.16,1,.3,1)}
.fx-dl .seg .o{position:relative;z-index:1;padding:5px 0;text-align:center;font-size:10.5px;color:var(--tx);transition:color .3s}
.fx-dl .seg .o+.o{border-left:1px solid var(--ln)}
.fx-dl .seg .ng{color:#fff;font-weight:500}
.fx-dl .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.fx-dl .chip{padding:3px 8px;border-radius:999px;border:1px solid var(--ln);background:#fff;font-size:10px;color:var(--tx);
transition:background-color .3s,border-color .3s,color .3s}
.fx-dl .chip.ih{border:1px solid var(--bl);background:var(--bl);color:#fff}
.fx-dl .df{display:grid;grid-template-columns:1fr auto;row-gap:4px;align-items:center}
.fx-dl .lv{font-size:10px;font-weight:600;justify-items:end}
.fx-dl .lv .o{color:var(--imt)}.fx-dl .lv .n{color:var(--okt)}
.fx-dl .mt{grid-column:1/-1;height:6px;border-radius:3px;background:#E8EEF6}
.fx-dl .mt span{display:block;height:100%;width:88%;border-radius:3px;background:var(--imt);
transition:width .7s cubic-bezier(.16,1,.3,1),background-color .5s}
/* The opening line. Hover: it is written again, from the goal, the persona and the session details */
.fx-op{display:grid;gap:8px}
.fx-op .who{display:flex;align-items:center;gap:8px}
.fx-op .av{width:30px;height:30px;border-radius:50%;background-color:#DCE5EF;background-position:center;background-size:cover;background-repeat:no-repeat;flex:none}
.fx-op .who span span{display:block}
.fx-op .nm{font-size:11px;font-weight:600;color:var(--nv)}
.fx-op .rl{font-size:9.5px;color:var(--mu)}
.fx-op .q{padding:8px 10px;border-radius:12px 12px 12px 4px;background:#EDF3FA;font-size:11px;line-height:1.4;color:var(--nv)}
.fx-op .q .qt{display:block}
.fx-op .src{font-size:9.5px;color:var(--mu)}
.fx-op .src .n{display:flex;gap:4px;align-items:center}
.fx-op .src .t{padding:1px 6px;border-radius:999px;background:var(--tint);color:var(--bl);font-weight:500;opacity:.35;
transition:opacity .3s,background-color .3s}
.fpg-in .fx-op .q{animation:fx-type 1.4s .3s steps(28,end) backwards}
.fpg-in .fx-op .src{animation:fx-fade .4s 1.6s backwards}
/* A real exchange. Hover: the conversation carries on and the counterpart answers */
.fx-cv{display:grid;gap:6px}
.fx-cv .m{position:relative;max-width:86%;max-height:70px;overflow:hidden;padding:6px 9px;border-radius:11px;font-size:10.5px;line-height:1.35;
transition:max-height .45s ease,opacity .35s,padding .45s,margin .45s}
.fx-cv .m .lb{display:block;font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1px;opacity:.75}
.fx-cv .them{justify-self:start;background:#EDF3FA;color:var(--nv);border-bottom-left-radius:4px}
.fx-cv .you{justify-self:end;background:var(--bl);color:#fff;border-bottom-right-radius:4px}
.fx-cv .m4{max-height:0;padding:0 9px;margin-top:-6px;opacity:0}
.fx-cv .m4 .tx{display:block;opacity:0;transition:opacity .3s}
.fx-cv .m4 .dt{position:absolute;left:9px;bottom:9px;display:flex;gap:3px;opacity:0}
.fx-cv .m4 .dt span{display:block;width:5px;height:5px;border-radius:50%;background:var(--mu);animation:fx-dot 1s infinite}
.fx-cv .m4 .dt span:nth-child(2){animation-delay:.15s}.fx-cv .m4 .dt span:nth-child(3){animation-delay:.3s}
@keyframes fx-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fx-dots{0%{opacity:0}10%,85%{opacity:1}100%{opacity:0}}
.fpg-in .fx-cv .m1,.fpg-in .fx-cv .m2,.fpg-in .fx-cv .m3{animation:fx-in .45s backwards}
.fpg-in .fx-cv .m2{animation-delay:.7s}.fpg-in .fx-cv .m3{animation-delay:1.4s}
@media (prefers-reduced-motion:reduce){.fxk *,.fxk *::before,.fxk *::after{animation:none!important;transition:none!important}}
/* Three focus points, then the line to say. Hover: what the rep said fades, the better line appears */
/* the slot is 156px (.fpk-demo), so the three points and the line block are sized to fit it exactly */
.fx-fc{display:grid;gap:4px;height:150px}
.fx-fc .p{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:7px;align-items:center;padding:3px 7px;border:1px solid var(--ln);border-radius:7px;background:#fff;font-size:10px;line-height:1.25;color:var(--nv);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-fc .p .n{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--bl);color:#fff;font-size:9px;font-weight:600;line-height:1}
.fx-fc .ln{display:grid;gap:1px;margin-top:2px;padding:5px 8px;border-radius:7px;background:var(--tint)}
.fx-fc .ln .l{font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.fx-fc .ln .q{font-size:10px;line-height:1.3;color:var(--nv);transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-fc .ln .l2,.fx-fc .ln .q2{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.fx-fc .ln .q2{color:var(--bl);font-weight:500}
.fpg-in .fx-fc .p{animation:fx-in .45s backwards}
.fpg-in .fx-fc .p2{animation-delay:.2s}.fpg-in .fx-fc .p3{animation-delay:.4s}
.fpg-in .fx-fc .ln{animation:fx-in .45s .6s backwards}
/* Organization, Cohorts, Individual. Hover: the tab switches and the cohort rows replace the seat cells */
.fx-vw{display:grid;gap:8px}
.fx-vw .tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ln);padding-bottom:6px}
.fx-vw .tb{font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);text-align:center;transition:color .3s}
.fx-vw .t1{color:var(--nv);font-weight:600}
.fx-vw .ul{position:absolute;left:0;bottom:-1px;width:33.333%;height:2px;background:var(--bl);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.fx-vw .panes{display:grid}
.fx-vw .pane{grid-area:1/1;transition:opacity .35s,transform .35s}
.fx-vw .pb{opacity:0;transform:translateY(4px)}
.fx-vw .cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-vw .cell{padding:7px 8px;border:1px solid var(--ln);border-radius:8px;background:#fff}
.fx-vw .cell .l{display:block;font-size:9px;color:var(--mu)}
.fx-vw .cell .v{display:block;font-size:14px;font-weight:600;line-height:1.2;color:var(--nv)}
.fx-vw .cell .u{font-size:9px;font-weight:400;color:var(--mu)}
.fx-vw .hd,.fx-vw .row{display:grid;grid-template-columns:minmax(0,1fr) 30px 30px;column-gap:6px;align-items:center}
.fx-vw .hd{padding:0 8px 3px;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.fx-vw .hd span,.fx-vw .row .a,.fx-vw .row .b{text-align:right}
.fx-vw .hd span:first-child{text-align:left}
.fx-vw .row{padding:5px 8px;margin-bottom:4px;border:1px solid var(--ln);border-radius:8px;background:#fff;font-size:10px;color:var(--nv);white-space:nowrap}
.fx-vw .row .c{overflow:hidden;text-overflow:ellipsis}
.fx-vw .row .a{color:var(--mu)}.fx-vw .row .b{font-weight:600}
.fpg-in .fx-vw .cell{animation:fx-in .45s .2s backwards}.fpg-in .fx-vw .cell:nth-child(2){animation-delay:.35s}
@media (hover:hover){
.fpk-card:hover .fx-quad .tr{background:rgba(51,167,230,.3)}
.fpk-card:hover .fx-quad .d{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .5s)}
.fpk-card:hover .fx-quad .m{animation:fx-go 1.6s calc(var(--fxd, 0s) + .1s) ease-in-out infinite}
.fpk-card:hover .fx-quad .b::after{animation:fx-ring 1.6s calc(var(--fxd, 0s) + .1s) ease-out infinite}
.fpk-card:hover .fx-fb .lv{opacity:1;transform:scaleX(1);transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-fb .gain{opacity:1;transition-delay:calc(var(--fxd, 0s) + .35s)}
.fpk-card:hover .fx-fb .t75{border-top-color:var(--okt)}
.fpk-card:hover .fx-fb .t75 span{color:var(--okt)}
.fpk-card:hover .fx-sk .r3 .f{width:84%;transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-sk .r4 .f{width:68%;transition-delay:calc(var(--fxd, 0s) + .25s)}
.fpk-card:hover .fx-sk .sw>.o{opacity:0}
.fpk-card:hover .fx-sk .sw>.n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpk-card:hover .fx-sub .tk span{width:84%;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-sub .sw>.o{opacity:0}
.fpk-card:hover .fx-sub .sw>.n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpk-card:hover .fx-sub .s1 .sw>span{transition-delay:calc(var(--fxd, 0s) + .35s)}
.fpk-card:hover .fx-sub .s2 .sw>span{transition-delay:calc(var(--fxd, 0s) + .5s)}
.fpk-card:hover .fx-sub .s3 .sw>span{transition-delay:calc(var(--fxd, 0s) + .65s)}
.fpk-card:hover .fx-ch .wv span{animation-play-state:running}
.fpk-card:hover .fx-ch .ph{animation:fx-scan 2.2s calc(var(--fxd, 0s) + 0s) linear infinite}
.fpk-card:hover .fx-ch .nt{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .6s)}
.fpk-card:hover .fx-st .s4 .c{background:var(--bl);color:#fff;box-shadow:inset 0 0 0 0 var(--bl);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-st .s4 .c .o{opacity:0;transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-st .s4 .c .n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-st .s4 .l{font-weight:400}
.fpk-card:hover .fx-st .s5{color:var(--nv);transition-delay:calc(var(--fxd, 0s) + .4s)}
.fpk-card:hover .fx-st .s5 .l{font-weight:600}
.fpk-card:hover .fx-st .s5 .c{background:#fff;color:var(--bl);box-shadow:inset 0 0 0 1.6px var(--bl);transition-delay:calc(var(--fxd, 0s) + .4s)}
.fpk-card:hover .fx-st .rd{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .75s)}
.fpk-card:hover .fx-fd .in{border:1px solid var(--cy);background:#EAF5FC}
.fpk-card:hover .fx-fd .f::after{animation:fx-sweep .8s calc(var(--fxd, 0s) + .2s) ease-out both}
.fpk-card:hover .fx-fd .f2::after{animation-delay:calc(var(--fxd, 0s) + .45s)}
.fpk-card:hover .fx-fd .f3::after{animation-delay:calc(var(--fxd, 0s) + .7s)}
.fpk-card:hover .fx-fd .ai{opacity:1;transform:none}
.fpk-card:hover .fx-fd .f1 .ai{transition-delay:calc(var(--fxd, 0s) + .6s)}
.fpk-card:hover .fx-fd .f2 .ai{transition-delay:calc(var(--fxd, 0s) + .85s)}
.fpk-card:hover .fx-fd .f3 .ai{transition-delay:calc(var(--fxd, 0s) + 1.1s)}
.fpk-card:hover .fx-sg .cur{animation:fx-cur 1.9s calc(var(--fxd, 0s) + 0s) ease-in-out both}
.fpk-card:hover .fx-sg .chip.on::after{animation:fx-rip .6s calc(var(--fxd, 0s) + .95s) ease-out both}
.fpk-card:hover .fx-sg .out .g{animation:fx-type .9s calc(var(--fxd, 0s) + 1.05s) ease-out both}
.fpk-card:hover .fx-sg .out .tag{transform:scale(1.06);background:#DDEFFB;transition-delay:calc(var(--fxd, 0s) + 1.8s)}
.fpk-card:hover .fx-lib .sel{transform:translateY(52px);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-lib .p3 .at{color:var(--imt);transition-delay:calc(var(--fxd, 0s) + .5s)}
.fpk-card:hover .fx-dl .th{transform:none;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-dl .seg .ng{color:var(--tx);font-weight:400}
.fpk-card:hover .fx-dl .seg .ps{color:#fff;font-weight:500;transition-delay:calc(var(--fxd, 0s) + .2s)}
.fpk-card:hover .fx-dl .chip.ih{border:1px solid var(--ln);background:#fff;color:var(--tx);transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpk-card:hover .fx-dl .chip.pa{border:1px solid var(--bl);background:var(--bl);color:#fff;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpk-card:hover .fx-dl .mt span{width:30%;background:var(--okt);transition-delay:calc(var(--fxd, 0s) + .45s)}
.fpk-card:hover .fx-dl .sw>.o{opacity:0;transition-delay:calc(var(--fxd, 0s) + .45s)}
.fpk-card:hover .fx-dl .sw>.n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .45s)}
.fpk-card:hover .fx-op .q .qt{animation:fx-type 1.3s calc(var(--fxd, 0s) + .05s) steps(30,end) both}
.fpk-card:hover .fx-op .sw>.o{opacity:0}
.fpk-card:hover .fx-op .sw>.n{opacity:1}
.fpk-card:hover .fx-op .src .t{opacity:1;background:#DDEFFB}
.fpk-card:hover .fx-op .src .t1{transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpk-card:hover .fx-op .src .t2{transition-delay:calc(var(--fxd, 0s) + .6s)}
.fpk-card:hover .fx-op .src .t3{transition-delay:calc(var(--fxd, 0s) + .9s)}
.fpk-card:hover .fx-cv .m1{max-height:0;padding:0 9px;margin-bottom:-6px;opacity:0;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-cv .m4{max-height:70px;padding:6px 9px;margin-top:0;opacity:1;transition-delay:calc(var(--fxd, 0s) + .35s)}
.fpk-card:hover .fx-cv .m4 .dt{animation:fx-dots 1.3s calc(var(--fxd, 0s) + .5s) both}
.fpk-card:hover .fx-cv .m4 .tx{opacity:1;transition-delay:calc(var(--fxd, 0s) + 1.7s)}
.fpk-card:hover .fx-fc .ln .q{color:var(--mu);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-fc .ln .l2,.fpk-card:hover .fx-fc .ln .q2{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpk-card:hover .fx-vw .ul{transform:translateX(100%);transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-vw .t1{color:var(--mu);font-weight:500;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-vw .t2{color:var(--nv);font-weight:600;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpk-card:hover .fx-vw .pa{opacity:0;transform:translateY(-4px);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpk-card:hover .fx-vw .pb{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .2s)}
}
@media (hover:none){
.fpg-in .fxk{--fxd:1.8s}
.fpg-in .fx-quad .tr{background:rgba(51,167,230,.3)}
.fpg-in .fx-quad .d{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .5s)}
.fpg-in .fx-quad .m{animation:fx-go 1.6s calc(var(--fxd, 0s) + .1s) ease-in-out infinite}
.fpg-in .fx-quad .b::after{animation:fx-ring 1.6s calc(var(--fxd, 0s) + .1s) ease-out infinite}
.fpg-in .fx-fb .lv{opacity:1;transform:scaleX(1);transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-fb .gain{opacity:1;transition-delay:calc(var(--fxd, 0s) + .35s)}
.fpg-in .fx-fb .t75{border-top-color:var(--okt)}
.fpg-in .fx-fb .t75 span{color:var(--okt)}
.fpg-in .fx-sk .r3 .f{width:84%;transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-sk .r4 .f{width:68%;transition-delay:calc(var(--fxd, 0s) + .25s)}
.fpg-in .fx-sk .sw>.o{opacity:0}
.fpg-in .fx-sk .sw>.n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpg-in .fx-sub .tk span{width:84%;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-sub .sw>.o{opacity:0}
.fpg-in .fx-sub .sw>.n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpg-in .fx-sub .s1 .sw>span{transition-delay:calc(var(--fxd, 0s) + .35s)}
.fpg-in .fx-sub .s2 .sw>span{transition-delay:calc(var(--fxd, 0s) + .5s)}
.fpg-in .fx-sub .s3 .sw>span{transition-delay:calc(var(--fxd, 0s) + .65s)}
.fpg-in .fx-ch .wv span{animation-play-state:running}
.fpg-in .fx-ch .ph{animation:fx-scan 2.2s calc(var(--fxd, 0s) + 0s) linear infinite}
.fpg-in .fx-ch .nt{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .6s)}
.fpg-in .fx-st .s4 .c{background:var(--bl);color:#fff;box-shadow:inset 0 0 0 0 var(--bl);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-st .s4 .c .o{opacity:0;transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-st .s4 .c .n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-st .s4 .l{font-weight:400}
.fpg-in .fx-st .s5{color:var(--nv);transition-delay:calc(var(--fxd, 0s) + .4s)}
.fpg-in .fx-st .s5 .l{font-weight:600}
.fpg-in .fx-st .s5 .c{background:#fff;color:var(--bl);box-shadow:inset 0 0 0 1.6px var(--bl);transition-delay:calc(var(--fxd, 0s) + .4s)}
.fpg-in .fx-st .rd{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .75s)}
.fpg-in .fx-fd .in{border:1px solid var(--cy);background:#EAF5FC}
.fpg-in .fx-fd .f::after{animation:fx-sweep .8s calc(var(--fxd, 0s) + .2s) ease-out both}
.fpg-in .fx-fd .f2::after{animation-delay:calc(var(--fxd, 0s) + .45s)}
.fpg-in .fx-fd .f3::after{animation-delay:calc(var(--fxd, 0s) + .7s)}
.fpg-in .fx-fd .ai{opacity:1;transform:none}
.fpg-in .fx-fd .f1 .ai{transition-delay:calc(var(--fxd, 0s) + .6s)}
.fpg-in .fx-fd .f2 .ai{transition-delay:calc(var(--fxd, 0s) + .85s)}
.fpg-in .fx-fd .f3 .ai{transition-delay:calc(var(--fxd, 0s) + 1.1s)}
.fpg-in .fx-sg .cur{animation:fx-cur 1.9s calc(var(--fxd, 0s) + 0s) ease-in-out both}
.fpg-in .fx-sg .chip.on::after{animation:fx-rip .6s calc(var(--fxd, 0s) + .95s) ease-out both}
.fpg-in .fx-sg .out .g{animation:fx-type .9s calc(var(--fxd, 0s) + 1.05s) ease-out both}
.fpg-in .fx-sg .out .tag{transform:scale(1.06);background:#DDEFFB;transition-delay:calc(var(--fxd, 0s) + 1.8s)}
.fpg-in .fx-lib .sel{transform:translateY(52px);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-lib .p3 .at{color:var(--imt);transition-delay:calc(var(--fxd, 0s) + .5s)}
.fpg-in .fx-dl .th{transform:none;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-dl .seg .ng{color:var(--tx);font-weight:400}
.fpg-in .fx-dl .seg .ps{color:#fff;font-weight:500;transition-delay:calc(var(--fxd, 0s) + .2s)}
.fpg-in .fx-dl .chip.ih{border:1px solid var(--ln);background:#fff;color:var(--tx);transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpg-in .fx-dl .chip.pa{border:1px solid var(--bl);background:var(--bl);color:#fff;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpg-in .fx-dl .mt span{width:30%;background:var(--okt);transition-delay:calc(var(--fxd, 0s) + .45s)}
.fpg-in .fx-dl .sw>.o{opacity:0;transition-delay:calc(var(--fxd, 0s) + .45s)}
.fpg-in .fx-dl .sw>.n{opacity:1;transition-delay:calc(var(--fxd, 0s) + .45s)}
.fpg-in .fx-op .q .qt{animation:fx-type 1.3s calc(var(--fxd, 0s) + .05s) steps(30,end) both}
.fpg-in .fx-op .sw>.o{opacity:0}
.fpg-in .fx-op .sw>.n{opacity:1}
.fpg-in .fx-op .src .t{opacity:1;background:#DDEFFB}
.fpg-in .fx-op .src .t1{transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpg-in .fx-op .src .t2{transition-delay:calc(var(--fxd, 0s) + .6s)}
.fpg-in .fx-op .src .t3{transition-delay:calc(var(--fxd, 0s) + .9s)}
.fpg-in .fx-cv .m1{max-height:0;padding:0 9px;margin-bottom:-6px;opacity:0;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-cv .m4{max-height:70px;padding:6px 9px;margin-top:0;opacity:1;transition-delay:calc(var(--fxd, 0s) + .35s)}
.fpg-in .fx-cv .m4 .dt{animation:fx-dots 1.3s calc(var(--fxd, 0s) + .5s) both}
.fpg-in .fx-cv .m4 .tx{opacity:1;transition-delay:calc(var(--fxd, 0s) + 1.7s)}
.fpg-in .fx-fc .ln .q{color:var(--mu);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-fc .ln .l2,.fpg-in .fx-fc .ln .q2{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .3s)}
.fpg-in .fx-vw .ul{transform:translateX(100%);transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-vw .t1{color:var(--mu);font-weight:500;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-vw .t2{color:var(--nv);font-weight:600;transition-delay:calc(var(--fxd, 0s) + 0s)}
.fpg-in .fx-vw .pa{opacity:0;transform:translateY(-4px);transition-delay:calc(var(--fxd, 0s) + .1s)}
.fpg-in .fx-vw .pb{opacity:1;transform:none;transition-delay:calc(var(--fxd, 0s) + .2s)}
}
.fpg .fpg-sec.fpg-sec-white{background:#fff!important}
.fpg .fpk-card{transition:border-color .3s,box-shadow .3s}
@media (hover:hover){.fpg .fpk-card:hover{border-color:#B8C8D9!important;box-shadow:0 12px 32px rgba(0,35,71,.08)!important}}
.fpg .fxk{font-size:11px!important;line-height:1.3!important;text-align:left!important;color:var(--tx)!important;width:100%!important;max-width:248px!important;position:relative!important}
.fpg .fx-cap{font-size:10px!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--mu)!important;display:block!important}
.fpg .fx-pill{font-size:9.5px!important;line-height:1.35!important;font-weight:600!important;padding:2px 7px!important;border-radius:999px!important;display:inline-block!important}
.fpg .fx-pill.ok{color:var(--okt)!important;background:var(--okb)!important}
.fpg .fx-pill.pt{color:var(--ptt)!important;background:var(--ptb)!important}
.fpg .fx-pill.im{color:var(--imt)!important;background:var(--imb)!important}
.fpg .fxk .sw{display:grid!important}
.fpg .fx-quad{height:150px!important;display:grid!important}
.fpg .fx-quad .yl{font-size:10px!important;text-align:center!important;font-weight:600!important;color:var(--nv)!important}
.fpg .fx-quad .xl{font-size:10px!important;text-align:center!important;font-weight:600!important;color:var(--nv)!important}
.fpg .fx-quad .pl{background:linear-gradient(var(--ln),var(--ln)) 50% 0/1px 100% no-repeat,
linear-gradient(var(--ln),var(--ln)) 0 50%/100% 1px no-repeat,var(--tint)!important;border-radius:8px!important;border:1px solid var(--ln)!important;position:relative!important}
.fpg .fx-quad .tr{width:50%!important;height:50%!important;background:rgba(51,167,230,.14)!important;border-radius:0 7px 0 0!important;position:absolute!important;top:0!important;right:0!important}
.fpg .fx-quad .q{font-size:9px!important;line-height:1.15!important;color:var(--mu)!important;max-width:46%!important;position:absolute!important}
.fpg .fx-quad .q1{left:6px!important;top:5px!important}
.fpg .fx-quad .q2{text-align:right!important;font-weight:600!important;color:var(--nv)!important;top:5px!important;right:6px!important}
.fpg .fx-quad .q3{left:6px!important;bottom:5px!important}
.fpg .fx-quad .q4{text-align:right!important;right:6px!important;bottom:5px!important}
.fpg .fx-quad .path{width:40%!important;height:33%!important;background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--bl) 50%,transparent calc(50% + 1px))!important;position:absolute!important;left:32%!important;top:36%!important}
.fpg .fx-quad .a,.fpg .fx-quad .b{margin:-6px!important;width:12px!important;height:12px!important;border-radius:50%!important;position:absolute!important}
.fpg .fx-quad .a{background:#fff!important;border:2px solid var(--bl)!important;left:32%!important;top:69%!important}
.fpg .fx-quad .b{background:var(--bl)!important;box-shadow:0 0 0 4px rgba(0,70,142,.16)!important;left:72%!important;top:36%!important}
.fpg .fx-quad .b::after{border-radius:50%!important;border:2px solid var(--bl)!important;position:absolute!important;inset:-5px!important;content:""!important}
.fpg .fx-quad .m{margin:-4px!important;width:8px!important;height:8px!important;background:var(--cy)!important;border-radius:50%!important;position:absolute!important}
.fpg .fx-quad .d{font-size:9.5px!important;font-weight:600!important;color:var(--bl)!important;padding:1px 5px!important;background:#fff!important;border-radius:6px!important;border:1px solid var(--ln)!important;position:absolute!important;left:35%!important;top:39%!important}
.fpg .fx-quad-leg{font-size:9.5px!important;color:var(--tx)!important;margin-top:5px!important;display:flex!important}
.fpg .fx-quad-leg span::before{margin-right:4px!important;width:8px!important;height:8px!important;background:#fff!important;border-radius:50%!important;border:2px solid var(--bl)!important;display:inline-block!important;content:""!important}
.fpg .fx-quad-leg span+span::before{background:var(--bl)!important}
.fpg .fx-fb{height:150px!important;padding:0 44px 18px 22px!important;position:relative!important}
.fpg .fx-fb .plot{height:100%!important;position:relative!important}
.fpg .fx-fb .t{height:0!important;position:absolute!important;left:0!important;right:-44px!important}
.fpg .fx-fb .t span{font-size:9px!important;color:var(--mu)!important;background:#fff!important;position:absolute!important;top:-7px!important;right:0!important}
.fpg .fx-fb .t75{bottom:75%!important}
.fpg .fx-fb .t50{bottom:50%!important}
.fpg .fx-fb .col{width:36%!important;height:100%!important;position:absolute!important;bottom:0!important;display:flex!important}
.fpg .fx-fb .c1{left:6%!important}
.fpg .fx-fb .c2{left:56%!important}
.fpg .fx-fb .bar{width:62%!important;border-radius:4px 4px 0 0!important;position:relative!important;overflow:hidden!important}
.fpg .fx-fb .c1 .bar{height:46%!important;background:#A9C3DD!important}
.fpg .fx-fb .c2 .bar{height:78%!important;background:var(--bl)!important}
.fpg .fx-fb .gain{font-size:10px!important;font-weight:600!important;color:#fff!important;height:41%!important;background:var(--cy)!important;position:absolute!important;left:0!important;top:0!important;right:0!important;display:flex!important}
.fpg .fx-fb .lv{width:50%!important;height:0!important;position:absolute!important;left:24%!important;bottom:46%!important}
.fpg .fx-fb .v{font-size:12px!important;font-weight:600!important;color:var(--nv)!important;margin-bottom:3px!important}
.fpg .fx-fb .n{font-size:9.5px!important;color:var(--tx)!important;position:absolute!important;bottom:-17px!important}
.fpg .fx-sk{display:grid!important}
.fpg .fx-sk .g{font-size:9.5px!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--mu)!important;margin-top:2px!important}
.fpg .fx-sk .r{display:grid!important}
.fpg .fx-sk .nm{font-size:10.5px!important;color:var(--nv)!important}
.fpg .fx-sk .vl{font-size:10.5px!important;font-weight:600!important;color:var(--nv)!important}
.fpg .fx-sk .tk{height:6px!important;background:#E8EEF6!important;border-radius:3px!important;position:relative!important}
.fpg .fx-sk .tk::after{width:1.5px!important;background:var(--nv)!important;position:absolute!important;left:75%!important;top:-2px!important;bottom:-2px!important;content:""!important}
.fpg .fx-sk .f{height:100%!important;border-radius:3px!important;display:block!important}
.fpg .fx-sk .w .f{background:var(--cy)!important}
.fpg .fx-sk .c .f{background:var(--bl)!important}
.fpg .fx-sk .r1 .f{width:71%!important}
.fpg .fx-sk .r2 .f{width:66%!important}
.fpg .fx-sk .r3 .f{width:34%!important}
.fpg .fx-sk .r4 .f{width:51%!important}
.fpg .fx-sk .key{font-size:9px!important;color:var(--mu)!important;margin-top:3px!important;display:flex!important}
.fpg .fx-sk .key::before{width:1.5px!important;height:9px!important;background:var(--nv)!important;content:""!important}
.fpg .fx-sk .key .n{font-weight:600!important;color:var(--okt)!important}
.fpg .fx-sub{display:grid!important}
.fpg .fx-sub .hd{font-size:11px!important;font-weight:600!important;color:var(--nv)!important;display:flex!important}
.fpg .fx-sub .hd .tg{font-size:9.5px!important;font-weight:500!important;color:var(--mu)!important;margin-left:6px!important;display:inline-grid!important}
.fpg .fx-sub .hd .vx{font-size:10.5px!important}
.fpg .fx-sub .tk{height:6px!important;background:#E8EEF6!important;border-radius:3px!important;position:relative!important}
.fpg .fx-sub .tk::after{width:1.5px!important;background:var(--nv)!important;position:absolute!important;left:75%!important;top:-2px!important;bottom:-2px!important;content:""!important}
.fpg .fx-sub .tk span{width:34%!important;height:100%!important;background:var(--bl)!important;border-radius:3px!important;display:block!important}
.fpg .fx-sub .row{font-size:10.5px!important;color:var(--nv)!important;padding:6px 8px!important;background:#fff!important;border-radius:8px!important;border:1px solid var(--ln)!important;display:flex!important}
.fpg .fx-ch{position:relative!important;display:grid!important}
.fpg .fx-ch .r{display:grid!important}
.fpg .fx-ch .k{font-size:10px!important;letter-spacing:.05em!important;font-weight:600!important;color:var(--nv)!important}
.fpg .fx-ch .d{font-size:9.5px!important;color:var(--mu)!important;margin-top:1px!important}
.fpg .fx-ch .wv{height:18px!important;display:flex!important}
.fpg .fx-ch .wv span{height:100%!important;background:var(--cy)!important;border-radius:2px!important}
.fpg .fx-ch .r2 .wv span{background:var(--bl)!important}
.fpg .fx-ch .r3 .wv span{background:#7FA9D6!important}
.fpg .fx-ch .phw{height:111px!important;position:absolute!important;left:56px!important;top:0!important;right:0!important}
.fpg .fx-ch .ph{width:1.5px!important;background:var(--nv)!important;position:absolute!important;top:-2px!important;bottom:-2px!important}
.fpg .fx-ch .nt{font-size:9.5px!important;line-height:1.35!important;color:var(--nv)!important;padding:5px 8px!important;background:var(--tint)!important;border-radius:8px!important;display:flex!important}
.fpg .fx-ch .nt .ts{font-weight:600!important;color:var(--bl)!important}
.fpg .fx-st{display:grid!important}
.fpg .fx-st .s{font-size:11px!important;color:var(--nv)!important;display:flex!important}
.fpg .fx-st .c{font-size:10px!important;font-weight:600!important;color:#fff!important;width:18px!important;height:18px!important;background:var(--bl)!important;border-radius:50%!important;display:grid!important}
.fpg .fx-st .s4 .c{color:var(--bl)!important;background:#fff!important;box-shadow:inset 0 0 0 1.6px var(--bl)!important}
.fpg .fx-st .s4 .l{font-weight:600!important}
.fpg .fx-st .s5{color:var(--mu)!important}
.fpg .fx-st .s5 .c{color:var(--mu)!important;background:#fff!important;box-shadow:inset 0 0 0 1.4px var(--ln)!important}
.fpg .fx-st .rd{font-size:10px!important;font-weight:600!important;color:var(--okt)!important;margin-top:2px!important}
.fpg .fx-fd{display:grid!important}
.fpg .fx-fd .in{font-size:10.5px!important;color:var(--nv)!important;padding:6px 8px!important;background:var(--tint)!important;border-radius:8px!important;border:1px dashed #B8C8D9!important}
.fpg .fx-fd .f{padding:5px 8px!important;background:#fff!important;border-radius:8px!important;border:1px solid var(--ln)!important;position:relative!important;overflow:hidden!important}
.fpg .fx-fd .f::after{width:100%!important;background:linear-gradient(100deg,transparent 20%,rgba(51,167,230,.28) 50%,transparent 80%)!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;content:""!important}
.fpg .fx-fd .f .l{font-size:9px!important;letter-spacing:.05em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--mu)!important;display:block!important}
.fpg .fx-fd .f .v{font-size:10.5px!important;color:var(--nv)!important;display:block!important;overflow:hidden!important}
.fpg .fx-fd .ai{font-size:8.5px!important;line-height:14px!important;font-weight:600!important;color:#fff!important;padding:0 5px!important;background:var(--bl)!important;border-radius:5px!important;position:absolute!important;top:5px!important;right:7px!important}
.fpg .fx-sg{position:relative!important;display:grid!important}
.fpg .fx-sg .chips{display:flex!important}
.fpg .fx-sg .chip{font-size:10.5px!important;color:var(--tx)!important;padding:4px 9px!important;background:#fff!important;border-radius:999px!important;border:1px solid var(--ln)!important;position:relative!important}
.fpg .fx-sg .chip.on{color:#fff!important;background:var(--bl)!important;border:1px solid var(--bl)!important}
.fpg .fx-sg .chip.on::after{border-radius:999px!important;border:2px solid var(--cy)!important;position:absolute!important;inset:-1px!important;content:""!important}
.fpg .fx-sg .out{padding:7px 9px!important;background:#fff!important;border-radius:8px!important;border:1px solid var(--ln)!important}
.fpg .fx-sg .out .l{font-size:9px!important;letter-spacing:.05em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--mu)!important;margin-bottom:2px!important;display:block!important}
.fpg .fx-sg .out .g{font-size:10.5px!important;color:var(--nv)!important;display:block!important}
.fpg .fx-sg .out .tag{font-size:9.5px!important;color:var(--bl)!important;margin-top:5px!important;padding:2px 7px!important;background:var(--tint)!important;border-radius:6px!important;display:inline-block!important}
.fpg .fx-sg .cur{width:12px!important;height:16px!important;position:absolute!important;z-index:2!important}
.fpg .fx-sg .cur span{width:100%!important;height:100%!important;background:var(--nv)!important;display:block!important}
.fpg .fx-lib{position:relative!important;display:grid!important}
.fpg .fx-lib .p{height:46px!important;padding:0 26px 0 6px!important;background:#fff!important;border-radius:9px!important;border:1px solid var(--ln)!important;display:grid!important}
.fpg .fx-lib .av{width:30px!important;height:30px!important;border-radius:50%!important}
.fpg .fx-lib .nm{font-size:11px!important;font-weight:600!important;color:var(--nv)!important;display:block!important}
.fpg .fx-lib .tr{font-size:9.5px!important;line-height:1.25!important;color:var(--mu)!important;display:block!important}
.fpg .fx-lib .sel{height:46px!important;border-radius:9px!important;box-shadow:inset 0 0 0 1.5px var(--bl),0 0 0 3px rgba(0,70,142,.12)!important;position:absolute!important;left:0!important;top:52px!important;right:0!important}
.fpg .fx-lib .ck{font-size:10px!important;color:#fff!important;width:16px!important;height:16px!important;background:var(--bl)!important;border-radius:50%!important;position:absolute!important;top:15px!important;right:7px!important;display:flex!important}
.fpg .fx-dl{display:grid!important}
.fpg .fx-dl .seg{margin-top:4px!important;background:#fff!important;border-radius:8px!important;border:1px solid var(--ln)!important;position:relative!important;display:grid!important;overflow:hidden!important}
.fpg .fx-dl .th{width:33.34%!important;background:var(--bl)!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important}
.fpg .fx-dl .seg .o{font-size:10.5px!important;text-align:center!important;color:var(--tx)!important;padding:5px 0!important;position:relative!important;z-index:1!important}
.fpg .fx-dl .seg .ng{font-weight:500!important;color:#fff!important}
.fpg .fx-dl .chips{margin-top:4px!important;display:flex!important}
.fpg .fx-dl .chip{font-size:10px!important;color:var(--tx)!important;padding:3px 8px!important;background:#fff!important;border-radius:999px!important;border:1px solid var(--ln)!important}
.fpg .fx-dl .chip.ih{color:#fff!important;background:var(--bl)!important;border:1px solid var(--bl)!important}
.fpg .fx-dl .df{display:grid!important}
.fpg .fx-dl .lv{font-size:10px!important;font-weight:600!important}
.fpg .fx-dl .lv .o{color:var(--imt)!important}
.fpg .fx-dl .lv .n{color:var(--okt)!important}
.fpg .fx-dl .mt{height:6px!important;background:#E8EEF6!important;border-radius:3px!important}
.fpg .fx-dl .mt span{width:88%!important;height:100%!important;background:var(--imt)!important;border-radius:3px!important;display:block!important}
.fpg .fx-op{display:grid!important}
.fpg .fx-op .who{display:flex!important}
.fpg .fx-op .av{width:30px!important;height:30px!important;border-radius:50%!important}
.fpg .fx-op .who span span{display:block!important}
.fpg .fx-op .nm{font-size:11px!important;font-weight:600!important;color:var(--nv)!important}
.fpg .fx-op .rl{font-size:9.5px!important;color:var(--mu)!important}
.fpg .fx-op .q{font-size:11px!important;line-height:1.4!important;color:var(--nv)!important;padding:8px 10px!important;background:#EDF3FA!important;border-radius:12px 12px 12px 4px!important}
.fpg .fx-op .q .qt{display:block!important}
.fpg .fx-op .src{font-size:9.5px!important;color:var(--mu)!important}
.fpg .fx-op .src .n{display:flex!important}
.fpg .fx-op .src .t{font-weight:500!important;color:var(--bl)!important;padding:1px 6px!important;background:var(--tint)!important;border-radius:999px!important}
.fpg .fx-cv{display:grid!important}
.fpg .fx-cv .m{font-size:10.5px!important;line-height:1.35!important;max-width:86%!important;padding:6px 9px!important;border-radius:11px!important;position:relative!important;overflow:hidden!important}
.fpg .fx-cv .m .lb{font-size:8.5px!important;letter-spacing:.05em!important;text-transform:uppercase!important;font-weight:600!important;margin-bottom:1px!important;display:block!important}
.fpg .fx-cv .them{color:var(--nv)!important;background:#EDF3FA!important}
.fpg .fx-cv .you{color:#fff!important;background:var(--bl)!important}
.fpg .fx-cv .m4{margin-top:-6px!important;padding:0 9px!important}
.fpg .fx-cv .m4 .tx{display:block!important}
.fpg .fx-cv .m4 .dt{position:absolute!important;left:9px!important;bottom:9px!important;display:flex!important}
.fpg .fx-cv .m4 .dt span{width:5px!important;height:5px!important;background:var(--mu)!important;border-radius:50%!important;display:block!important}
.fpg .fx-fc{height:150px!important;display:grid!important}
.fpg .fx-fc .p{font-size:10px!important;line-height:1.25!important;color:var(--nv)!important;padding:3px 7px!important;background:#fff!important;border-radius:7px!important;border:1px solid var(--ln)!important;display:grid!important;overflow:hidden!important}
.fpg .fx-fc .p .n{font-size:9px!important;line-height:1!important;font-weight:600!important;color:#fff!important;width:16px!important;height:16px!important;background:var(--bl)!important;border-radius:50%!important;display:grid!important}
.fpg .fx-fc .ln{margin-top:2px!important;padding:5px 8px!important;background:var(--tint)!important;border-radius:7px!important;display:grid!important}
.fpg .fx-fc .ln .l{font-size:8.5px!important;letter-spacing:.05em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--mu)!important}
.fpg .fx-fc .ln .q{font-size:10px!important;line-height:1.3!important;color:var(--nv)!important;overflow:hidden!important}
.fpg .fx-fc .ln .q2{font-weight:500!important;color:var(--bl)!important}
.fpg .fx-vw{display:grid!important}
.fpg .fx-vw .tabs{position:relative!important;display:grid!important}
.fpg .fx-vw .tb{font-size:9.5px!important;letter-spacing:.06em!important;text-transform:uppercase!important;text-align:center!important;font-weight:500!important;color:var(--mu)!important}
.fpg .fx-vw .t1{font-weight:600!important;color:var(--nv)!important}
.fpg .fx-vw .ul{width:33.333%!important;height:2px!important;background:var(--bl)!important;position:absolute!important;left:0!important;bottom:-1px!important}
.fpg .fx-vw .panes{display:grid!important}
.fpg .fx-vw .cells{display:grid!important}
.fpg .fx-vw .cell{padding:7px 8px!important;background:#fff!important;border-radius:8px!important;border:1px solid var(--ln)!important}
.fpg .fx-vw .cell .l{font-size:9px!important;color:var(--mu)!important;display:block!important}
.fpg .fx-vw .cell .v{font-size:14px!important;line-height:1.2!important;font-weight:600!important;color:var(--nv)!important;display:block!important}
.fpg .fx-vw .cell .u{font-size:9px!important;font-weight:400!important;color:var(--mu)!important}
.fpg .fx-vw .hd,.fpg .fx-vw .row{display:grid!important}
.fpg .fx-vw .hd{font-size:8.5px!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:var(--mu)!important;padding:0 8px 3px!important}
.fpg .fx-vw .hd span,.fpg .fx-vw .row .a,.fpg .fx-vw .row .b{text-align:right!important}
.fpg .fx-vw .hd span:first-child{text-align:left!important}
.fpg .fx-vw .row{font-size:10px!important;color:var(--nv)!important;margin-bottom:4px!important;padding:5px 8px!important;background:#fff!important;border-radius:8px!important;border:1px solid var(--ln)!important}
.fpg .fx-vw .row .c{overflow:hidden!important}
.fpg .fx-vw .row .a{color:var(--mu)!important}
.fpg .fx-vw .row .b{font-weight:600!important}
@media (hover:hover){.fpg .fpk-card:hover .fx-quad .tr{background:rgba(51,167,230,.3)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-fb .t75 span{color:var(--okt)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-sk .r3 .f{width:84%!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-sk .r4 .f{width:68%!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-sub .tk span{width:84%!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-st .s4 .c{color:#fff!important;background:var(--bl)!important;box-shadow:inset 0 0 0 0 var(--bl)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-st .s4 .l{font-weight:400!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-st .s5{color:var(--nv)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-st .s5 .l{font-weight:600!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-st .s5 .c{color:var(--bl)!important;background:#fff!important;box-shadow:inset 0 0 0 1.6px var(--bl)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-fd .in{background:#EAF5FC!important;border:1px solid var(--cy)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-sg .out .tag{background:#DDEFFB!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-lib .p3 .at{color:var(--imt)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-dl .seg .ng{font-weight:400!important;color:var(--tx)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-dl .seg .ps{font-weight:500!important;color:#fff!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-dl .chip.ih{color:var(--tx)!important;background:#fff!important;border:1px solid var(--ln)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-dl .chip.pa{color:#fff!important;background:var(--bl)!important;border:1px solid var(--bl)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-dl .mt span{width:30%!important;background:var(--okt)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-op .src .t{background:#DDEFFB!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-cv .m1{margin-bottom:-6px!important;padding:0 9px!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-cv .m4{margin-top:0!important;padding:6px 9px!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-fc .ln .q{color:var(--mu)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-vw .t1{font-weight:500!important;color:var(--mu)!important}}
@media (hover:hover){.fpg .fpk-card:hover .fx-vw .t2{font-weight:600!important;color:var(--nv)!important}}
@media (hover:none){.fpg .fpg-in .fx-quad .tr{background:rgba(51,167,230,.3)!important}}
@media (hover:none){.fpg .fpg-in .fx-fb .t75 span{color:var(--okt)!important}}
@media (hover:none){.fpg .fpg-in .fx-sk .r3 .f{width:84%!important}}
@media (hover:none){.fpg .fpg-in .fx-sk .r4 .f{width:68%!important}}
@media (hover:none){.fpg .fpg-in .fx-sub .tk span{width:84%!important}}
@media (hover:none){.fpg .fpg-in .fx-st .s4 .c{color:#fff!important;background:var(--bl)!important;box-shadow:inset 0 0 0 0 var(--bl)!important}}
@media (hover:none){.fpg .fpg-in .fx-st .s4 .l{font-weight:400!important}}
@media (hover:none){.fpg .fpg-in .fx-st .s5{color:var(--nv)!important}}
@media (hover:none){.fpg .fpg-in .fx-st .s5 .l{font-weight:600!important}}
@media (hover:none){.fpg .fpg-in .fx-st .s5 .c{color:var(--bl)!important;background:#fff!important;box-shadow:inset 0 0 0 1.6px var(--bl)!important}}
@media (hover:none){.fpg .fpg-in .fx-fd .in{background:#EAF5FC!important;border:1px solid var(--cy)!important}}
@media (hover:none){.fpg .fpg-in .fx-sg .out .tag{background:#DDEFFB!important}}
@media (hover:none){.fpg .fpg-in .fx-lib .p3 .at{color:var(--imt)!important}}
@media (hover:none){.fpg .fpg-in .fx-dl .seg .ng{font-weight:400!important;color:var(--tx)!important}}
@media (hover:none){.fpg .fpg-in .fx-dl .seg .ps{font-weight:500!important;color:#fff!important}}
@media (hover:none){.fpg .fpg-in .fx-dl .chip.ih{color:var(--tx)!important;background:#fff!important;border:1px solid var(--ln)!important}}
@media (hover:none){.fpg .fpg-in .fx-dl .chip.pa{color:#fff!important;background:var(--bl)!important;border:1px solid var(--bl)!important}}
@media (hover:none){.fpg .fpg-in .fx-dl .mt span{width:30%!important;background:var(--okt)!important}}
@media (hover:none){.fpg .fpg-in .fx-op .src .t{background:#DDEFFB!important}}
@media (hover:none){.fpg .fpg-in .fx-cv .m1{margin-bottom:-6px!important;padding:0 9px!important}}
@media (hover:none){.fpg .fpg-in .fx-cv .m4{margin-top:0!important;padding:6px 9px!important}}
@media (hover:none){.fpg .fpg-in .fx-fc .ln .q{color:var(--mu)!important}}
@media (hover:none){.fpg .fpg-in .fx-vw .t1{font-weight:500!important;color:var(--mu)!important}}
@media (hover:none){.fpg .fpg-in .fx-vw .t2{font-weight:600!important;color:var(--nv)!important}}
/* patch:pfc */
.pfc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:32px}
@media (max-width:1100px){.pfc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:780px){.pfc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pfc-c{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;border:1px solid #DCE5EF;
border-radius:14px;background:#fff;color:#002347;text-decoration:none;overflow:hidden;
transition:transform .35s cubic-bezier(.34,1.26,.64,1),border-color .3s,box-shadow .3s}
.pfc-n{display:block;margin-top:12px;font-size:17px;font-weight:500;line-height:1.3;color:#002347}
.pfc-s{display:block;font-size:14px;line-height:1.45;font-weight:400;color:#5A6B80}
.pfc-a{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:500;color:#00468E}
.pfc-a span{display:block;transition:transform .3s ease}
.pfc-g{position:relative;display:block;width:60px;height:42px;border-radius:10px;background:#EEF4FB;overflow:hidden}
.pfc-g span{position:absolute;display:block}
@media (max-width:480px){
.pfc{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:24px}
.pfc-c{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:12px 16px 12px 12px}
.pfc-g{grid-row:1/3;width:52px;height:40px}
.pfc-n{margin-top:0;font-size:15.5px}
.pfc-s{font-size:13px}
.pfc-a{grid-column:3;grid-row:1/3;margin:0;padding:0;font-size:0}
.pfc-a span{font-size:18px}
}
.g-rp span{height:11px;border-radius:6px;animation:none 2.4s ease-in-out infinite}
.g-rp span:nth-child(1){left:7px;top:8px;width:26px;background:#B9CBE0}
.g-rp span:nth-child(2){right:7px;bottom:8px;width:30px;background:#00468E;animation-delay:1.2s}
@keyframes pfc-turn{0%,100%{opacity:.3;transform:scale(.85)}25%,60%{opacity:1;transform:none}}
.g-gc span{left:8px;width:44px;height:5px;border-radius:3px;background:#33A7E6;transform-origin:0 50%;transform:scaleX(.75);animation:none 2.6s cubic-bezier(.16,1,.3,1) infinite}
.g-gc span:nth-child(1){top:9px}.g-gc span:nth-child(2){top:18px;animation-delay:.2s;background:#00468E;transform:scaleX(.55)}
.g-gc span:nth-child(3){top:27px;animation-delay:.4s;transform:scaleX(.85)}
.g-gc span:nth-child(4){left:40px;top:6px;width:1.5px;height:30px;border-radius:0;background:#002347;opacity:.45;transform:none;animation:none}
@keyframes pfc-reach{0%{transform:scaleX(.3)}55%,85%{transform:scaleX(.8)}100%{transform:scaleX(.3)}}
.g-mm span{bottom:21px;width:5px;height:14px;margin-bottom:-7px;border-radius:2px;background:#33A7E6;animation:none 1.4s ease-in-out infinite}
.g-mm span:nth-child(-n+5){top:5px;bottom:auto;margin:0}
.g-mm span:nth-child(n+11){top:auto;bottom:5px;margin:0;background:#7FA9D6}
.g-mm span:nth-child(n+6):nth-child(-n+10){background:#00468E}
.g-mm span:nth-child(5n+1){left:9px}.g-mm span:nth-child(5n+2){left:18px;animation-delay:-.3s}
.g-mm span:nth-child(5n+3){left:27px;animation-delay:-.6s}.g-mm span:nth-child(5n+4){left:36px;animation-delay:-.9s}
.g-mm span:nth-child(5n){left:45px;animation-delay:-1.1s}
.g-mm span:nth-child(5n+1){transform:scaleY(.5)}.g-mm span:nth-child(5n+2){transform:scaleY(.9)}.g-mm span:nth-child(5n+3){transform:scaleY(.6)}
.g-mm span:nth-child(5n+4){transform:scaleY(1)}.g-mm span:nth-child(5n){transform:scaleY(.7)}
.g-mm span:nth-child(-n+5){height:9px}.g-mm span:nth-child(n+11){height:9px}
@keyframes pfc-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.g-pg span:nth-child(1){left:9px;top:9px;width:24px;height:24px;border-radius:50%;background:#00468E}
.g-pg span:nth-child(2){left:5px;top:5px;width:32px;height:32px;border-radius:50%;border:2px solid #33A7E6;opacity:.55;animation:none 2.4s ease-out infinite}
.g-pg span:nth-child(3),.g-pg span:nth-child(4){left:38px;width:16px;height:7px;border-radius:4px;background:#B9CBE0;animation:none 2.4s ease-in-out infinite}
.g-pg span:nth-child(3){top:12px}.g-pg span:nth-child(4){top:23px;background:#33A7E6;animation-delay:.6s}
@keyframes pfc-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes pfc-trait{0%,100%{opacity:0;transform:translateX(-6px)}30%,70%{opacity:1;transform:none}}
.g-sg span{left:9px;height:5px;border-radius:3px}
.g-sg span:nth-child(-n+3){width:42px;background:#DCE5EF}
.g-sg span:nth-child(n+4){background:#00468E;transform-origin:0 50%;animation:none 3s ease-in-out infinite}
.g-sg span:nth-child(1),.g-sg span:nth-child(4){top:10px}.g-sg span:nth-child(2),.g-sg span:nth-child(5){top:19px}
.g-sg span:nth-child(3),.g-sg span:nth-child(6){top:28px}
.g-sg span:nth-child(4){width:42px}.g-sg span:nth-child(5){width:34px;animation-delay:.35s}
.g-sg span:nth-child(6){width:24px;animation-delay:.7s;background:#33A7E6}
@keyframes pfc-write{0%,8%{transform:scaleX(0)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.g-an span{bottom:7px;width:8px;height:28px;border-radius:2px 2px 0 0;background:#00468E;transform-origin:50% 100%;animation:none 2.8s cubic-bezier(.16,1,.3,1) infinite}
.g-an span:nth-child(1){left:9px;background:#A9C3DD}.g-an span:nth-child(2){left:20px;animation-delay:.15s;background:#7FA9D6}
.g-an span:nth-child(3){left:31px;animation-delay:.3s}.g-an span:nth-child(4){left:42px;animation-delay:.45s;background:#33A7E6}
@keyframes pfc-rise{0%{transform:scaleY(.2)}45%,85%{transform:scaleY(var(--h,.8))}100%{transform:scaleY(.2)}}
.g-an span{transform:scaleY(var(--h,.8))}
.g-an span:nth-child(1){--h:.45}.g-an span:nth-child(2){--h:.6}.g-an span:nth-child(3){--h:.75}.g-an span:nth-child(4){--h:1}
/* the pictures hold still until the card is hovered; a touch screen has no hover, so there they run */
@media (hover:none){
.g-rp span{animation-name:pfc-turn}.g-gc span:not(:nth-child(4)){animation-name:pfc-reach}.g-mm span{animation-name:pfc-wave}
.g-pg span:nth-child(2){animation-name:pfc-ring}.g-pg span:nth-child(3),.g-pg span:nth-child(4){animation-name:pfc-trait}
.g-sg span:nth-child(n+4){animation-name:pfc-write}.g-an span{animation-name:pfc-rise}
}
@media (hover:hover){
.pfc-c:hover{transform:translateY(-4px);border-color:#33A7E6;box-shadow:0 14px 34px rgba(0,35,71,.10)}
.pfc-c:hover .pfc-a span{transform:translateX(4px)}
.pfc-c:hover .g-rp span{animation-name:pfc-turn}.pfc-c:hover .g-gc span:not(:nth-child(4)){animation-name:pfc-reach}
.pfc-c:hover .g-mm span{animation-name:pfc-wave}.pfc-c:hover .g-pg span:nth-child(2){animation-name:pfc-ring}
.pfc-c:hover .g-pg span:nth-child(3),.pfc-c:hover .g-pg span:nth-child(4){animation-name:pfc-trait}
.pfc-c:hover .g-sg span:nth-child(n+4){animation-name:pfc-write}.pfc-c:hover .g-an span{animation-name:pfc-rise}
}
.pfc-c:focus-visible{outline:2px solid #33A7E6;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pfc *,.pfc-c{animation:none!important;transition:none!important}}
.fpg .pfc{margin-top:32px!important;display:grid!important}
.fpg .pfc-c{color:#002347!important;text-decoration:none!important;padding:20px 20px 18px!important;background:#fff!important;border-radius:14px!important;border:1px solid #DCE5EF!important;position:relative!important;display:flex!important;overflow:hidden!important}
.fpg .pfc-n{font-size:17px!important;line-height:1.3!important;font-weight:500!important;color:#002347!important;margin-top:12px!important;display:block!important}
.fpg .pfc-s{font-size:14px!important;line-height:1.45!important;font-weight:400!important;color:#5A6B80!important;display:block!important}
.fpg .pfc-a{font-size:13.5px!important;font-weight:500!important;color:#00468E!important;margin-top:auto!important;display:flex!important}
.fpg .pfc-a span{display:block!important}
.fpg .pfc-g{width:60px!important;height:42px!important;background:#EEF4FB!important;border-radius:10px!important;position:relative!important;display:block!important;overflow:hidden!important}
.fpg .pfc-g span{position:absolute!important;display:block!important}
@media (max-width:480px){.fpg .pfc{margin-top:24px!important}}
@media (max-width:480px){.fpg .pfc-c{padding:12px 16px 12px 12px!important;display:grid!important}}
@media (max-width:480px){.fpg .pfc-g{width:52px!important;height:40px!important}}
@media (max-width:480px){.fpg .pfc-n{font-size:15.5px!important;margin-top:0!important}}
@media (max-width:480px){.fpg .pfc-s{font-size:13px!important}}
@media (max-width:480px){.fpg .pfc-a{font-size:0!important;margin:0!important;padding:0!important}}
@media (max-width:480px){.fpg .pfc-a span{font-size:18px!important}}
@media (hover:hover){.fpg .pfc-c:hover{box-shadow:0 14px 34px rgba(0,35,71,.10)!important}}
.fpg .g-rp span{height:11px!important;border-radius:6px!important}
.fpg .g-rp span:nth-child(1){width:26px!important;background:#B9CBE0!important;left:7px!important;top:8px!important}
.fpg .g-rp span:nth-child(2){width:30px!important;background:#00468E!important;right:7px!important;bottom:8px!important}
.fpg .g-gc span{width:44px!important;height:5px!important;background:#33A7E6!important;border-radius:3px!important;left:8px!important}
.fpg .g-gc span:nth-child(1){top:9px!important}
.fpg .g-gc span:nth-child(2){background:#00468E!important;top:18px!important}
.fpg .g-gc span:nth-child(3){top:27px!important}
.fpg .g-gc span:nth-child(4){width:1.5px!important;height:30px!important;background:#002347!important;border-radius:0!important;left:40px!important;top:6px!important}
.fpg .g-mm span{margin-bottom:-7px!important;width:5px!important;height:14px!important;background:#33A7E6!important;border-radius:2px!important;bottom:21px!important}
.fpg .g-mm span:nth-child(-n+5){margin:0!important;top:5px!important;bottom:auto!important}
.fpg .g-mm span:nth-child(n+11){margin:0!important;background:#7FA9D6!important;top:auto!important;bottom:5px!important}
.fpg .g-mm span:nth-child(n+6):nth-child(-n+10){background:#00468E!important}
.fpg .g-mm span:nth-child(5n+1){left:9px!important}
.fpg .g-mm span:nth-child(5n+2){left:18px!important}
.fpg .g-mm span:nth-child(5n+3){left:27px!important}
.fpg .g-mm span:nth-child(5n+4){left:36px!important}
.fpg .g-mm span:nth-child(5n){left:45px!important}
.fpg .g-mm span:nth-child(-n+5){height:9px!important}
.fpg .g-mm span:nth-child(n+11){height:9px!important}
.fpg .g-pg span:nth-child(1){width:24px!important;height:24px!important;background:#00468E!important;border-radius:50%!important;left:9px!important;top:9px!important}
.fpg .g-pg span:nth-child(2){width:32px!important;height:32px!important;border-radius:50%!important;border:2px solid #33A7E6!important;left:5px!important;top:5px!important}
.fpg .g-pg span:nth-child(3),.fpg .g-pg span:nth-child(4){width:16px!important;height:7px!important;background:#B9CBE0!important;border-radius:4px!important;left:38px!important}
.fpg .g-pg span:nth-child(3){top:12px!important}
.fpg .g-pg span:nth-child(4){background:#33A7E6!important;top:23px!important}
.fpg .g-sg span{height:5px!important;border-radius:3px!important;left:9px!important}
.fpg .g-sg span:nth-child(-n+3){width:42px!important;background:#DCE5EF!important}
.fpg .g-sg span:nth-child(n+4){background:#00468E!important}
.fpg .g-sg span:nth-child(1),.fpg .g-sg span:nth-child(4){top:10px!important}
.fpg .g-sg span:nth-child(2),.fpg .g-sg span:nth-child(5){top:19px!important}
.fpg .g-sg span:nth-child(3),.fpg .g-sg span:nth-child(6){top:28px!important}
.fpg .g-sg span:nth-child(4){width:42px!important}
.fpg .g-sg span:nth-child(5){width:34px!important}
.fpg .g-sg span:nth-child(6){width:24px!important;background:#33A7E6!important}
.fpg .g-an span{width:8px!important;height:28px!important;background:#00468E!important;border-radius:2px 2px 0 0!important;bottom:7px!important}
.fpg .g-an span:nth-child(1){background:#A9C3DD!important;left:9px!important}
.fpg .g-an span:nth-child(2){background:#7FA9D6!important;left:20px!important}
.fpg .g-an span:nth-child(3){left:31px!important}
.fpg .g-an span:nth-child(4){background:#33A7E6!important;left:42px!important}
/* patch:fpkm */
.fpk-more{position:relative}
.fpk-more .fpk-lw{position:relative}
.fpk-more.fpk-js .fpk-list{overflow:hidden;transition:max-height .6s cubic-bezier(.16,1,.3,1)}
.fpk-more.fpk-js:not(.open) .fpk-lw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;
background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 55%,#fff 100%)}
.fpk-more-btn{display:none;align-items:center;gap:10px;margin:18px 0 0;padding:13px 22px;border:1px solid #00468E;border-radius:10px;
background:#fff;color:#00468E;font-family:inherit;font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;
transition:background-color .25s,color .25s,transform .25s}
.fpk-more.fpk-js .fpk-more-btn{display:inline-flex}
.fpk-more-btn .cv{display:block;width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform .3s}
.fpk-more.open .fpk-more-btn .cv{transform:rotate(-135deg);margin-top:4px}
@media (hover:hover){.fpk-more-btn:hover{background:#00468E;color:#fff}}
.fpk-more-btn:focus-visible{outline:2px solid #33A7E6;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fpk-more .fpk-list,.fpk-more-btn,.fpk-more-btn .cv{transition:none!important}}
.fpg .fpk-more{position:relative!important}
.fpg .fpk-more .fpk-lw{position:relative!important}
.fpg .fpk-more.fpk-js .fpk-list{overflow:hidden!important}
.fpg .fpk-more.fpk-js:not(.open) .fpk-lw::after{height:140px!important;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 55%,#fff 100%)!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;content:""!important}
.fpg .fpk-more-btn{font-size:15px!important;line-height:1.2!important;font-weight:500!important;color:#00468E!important;margin:18px 0 0!important;padding:13px 22px!important;background:#fff!important;border-radius:10px!important;border:1px solid #00468E!important;display:none!important}
.fpg .fpk-more.fpk-js .fpk-more-btn{display:inline-flex!important}
.fpg .fpk-more-btn .cv{margin-top:-4px!important;width:8px!important;height:8px!important;display:block!important}
.fpg .fpk-more.open .fpk-more-btn .cv{margin-top:4px!important}
@media (hover:hover){.fpg .fpk-more-btn:hover{color:#fff!important;background:#00468E!important}}
/* patch:fpkm end */
/* patch:wide1200 */
/* Owner's call 2026-09-29: use the header width. From 1201 every content edge is the header edge,
the plain sections included, so the page still has one left edge and the mockups gain 108px.
The pinned mockups get a narrower rail (340) and the rest of the row, about 860 at 1440. */
@media (min-width:1201px){
.fpg .fpg-w,.fpg .fpg-sec-alt>.fpg-w,.fpg .rpa-in,.fpg .rpb-in,.fpg .rph .in,
.fpg .rpg-pin,.fpg .rpp-pin,.fpg .rps-pin,.fpg .rpc-in{
max-width:none!important;margin-left:0!important;margin-right:0!important;
padding-left:max(64px,calc((100% - 1200px) / 2))!important;padding-right:max(64px,calc((100% - 1200px) / 2))!important}
.fpg .rhl{--ggut:max(64px,calc((100% - 1200px) / 2))!important}
.fpg .rpg-pin,.fpg .rpp-pin{grid-template-columns:340px minmax(0,1fr)!important;column-gap:0!important}
.fpg .rpg-stage,.fpg .rpp-stage{width:100%!important;max-width:none!important}
.fpg .rpg-shell,.fpg .rpp-shell{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:16/10!important}
.fpg .rpa-shell,.fpg .fpg-live-shell{width:100%!important;max-width:none!important}
}
/* patch:wide1200b */
/* wide1200 moved the pin edge to the header edge, but the rails kept a 44px left inset from the
1092 layout, so each rail heading sat 20 to 44px right of the page edge (check:gutters, 1280+). */
@media (min-width:1201px){
.fpg .rpg-rail,.fpg .rpp-rail,.fpg .rps-rail{padding-left:0!important}
}
/* patch:wide1200c */
/* The rail offset was the scroller, not the rail: .rpg-scroller and its siblings stop at 1240 and
centre, so the pin's percentage padding resolved against 1240 and fell to the 64 floor. Measured
2026-09-29: pin 1240 wide at left 100, rail at 164 against a page edge of 120. */
@media (min-width:1201px){
.fpg .rpg-scroller,.fpg .rpp-scroller,.fpg .rps-scroller{max-width:none!important;width:100%%!important;
margin-left:0!important;margin-right:0!important}
}
.fpg .rph-copy{--rph-light:2026-09-29b}
.fpg .rph-copy .eyebrow{background-image:none!important;background-color:rgba(242,247,255,.86)!important;
box-shadow:inset 0 0 0 1px rgba(0,70,142,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fpg .rph-copy .eyebrow i{background-image:linear-gradient(135deg,#00468E,#33A7E6)!important}
.fpg section.rpc{--rpc-center:2026-09-29;justify-content:center!important}
.fpg .rpc .rpc-in{margin-left:auto!important;margin-right:auto!important}
.fpg .fpg-sec.fpg-sec-white{--fpk-bleed:2026-09-29}
@media (max-width:575px){
.fpg .fpg-sec.fpg-sec-white{margin-left:-20px!important;margin-right:-20px!important;width:auto!important;max-width:none!important}
.fpg .fpg-sec.fpg-sec-white>.fpg-w{padding-left:20px!important;padding-right:20px!important}
}
@media (min-width:576px) and (max-width:768px){
.fpg .fpg-sec.fpg-sec-white{margin-left:-40px!important;margin-right:-40px!important;width:auto!important;max-width:none!important}
.fpg .fpg-sec.fpg-sec-white>.fpg-w{padding-left:40px!important;padding-right:40px!important}
}
@media (min-width:769px) and (max-width:1200px){
.fpg .fpg-sec.fpg-sec-white{margin-left:-40px!important;margin-right:-40px!important;width:auto!important;max-width:none!important}
.fpg .fpg-sec.fpg-sec-white>.fpg-w{max-width:none!important;margin-left:0!important;margin-right:0!important;
padding-left:64px!important;padding-right:64px!important}
}
/* patch:fpki */
.fpk-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-top:-7px;border-radius:10px;
background:linear-gradient(135deg,rgba(0,70,142,.11),rgba(51,167,230,.05));border:1px solid rgba(0,70,142,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 12px rgba(0,35,71,.07);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fpk-ico svg{display:block;width:20px;height:20px;fill:url(#fpkg)}
.fpk-gdef{position:absolute;width:0;height:0;overflow:hidden}
.fpg .fpk-ico{width:36px!important;height:36px!important;margin:-7px 0 0!important;padding:0!important;border-radius:10px!important;display:grid!important;
background:linear-gradient(135deg,rgba(0,70,142,.11),rgba(51,167,230,.05))!important;border:1px solid rgba(0,70,142,.14)!important}
.fpg .fpk-ico svg{width:20px!important;height:20px!important;display:block!important}
.fpg .fpk-list li{gap:14px!important}
/* patch:fpki end */
/* patch:acx */
.fpg .fpg-sec.fpg-sec-white.acx-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#FBFBFD 0%,#F5F5F7 100%)!important;padding-top:104px!important;padding-bottom:104px!important}
.acx-sec::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(ellipse 52% 40% at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 100%)}
.acx-sec>.fpg-w{position:relative;z-index:1}
.acx{--nv:#002347;--bl:#00468E;--cy:#33A7E6;--tn:#F2F7FF;font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#002347;text-align:left}
.acx-head{display:block;max-width:760px;margin:0 auto 60px;text-align:center}
.acx .fpk-badge{margin:0 auto 22px!important}
.acx h2.acx-h{margin:0 0 18px;font-size:46px;line-height:1.08;letter-spacing:-.02em;font-weight:600;color:#002347;text-align:center;text-wrap:balance}
.acx h2.acx-h .acx-hl{display:inline;color:#00468E;background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 58%),linear-gradient(90deg,#00468E 0%,#1673B8 50%,#33A7E6 100%);background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:110% 0,0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:acx-shine 10s ease-in-out 1.5s infinite}
@keyframes acx-shine{0%{background-position:110% 0,0 0}28%{background-position:-10% 0,0 0}100%{background-position:-10% 0,0 0}}
.acx .acx-lede{display:block;margin:0 auto;max-width:56ch;font-size:17px;line-height:1.6;font-weight:400;color:#00468E;text-align:center;text-wrap:balance}
.acx-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 204px 272px 204px minmax(0,1.15fr);align-items:stretch;padding:0 0 92px}
.acx-col{position:relative;display:flex;flex-direction:column;min-width:0}
.acx-sp,.acx-leg{display:block;flex:1 1 0;min-height:0;position:relative}
.acx-leg::before{content:"";position:absolute;left:50%;top:0;bottom:-56px;width:0;border-left:1.5px dashed #00468E;margin-left:-.75px}
.acx-c1 .acx-leg::after{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4.75px;border-top:1.5px solid #00468E;border-left:1.5px solid #00468E;transform:rotate(45deg)}
.acx-tag{display:block;margin:0 0 10px 4px;font-size:14px;line-height:1.3;font-weight:500;color:#00468E;text-align:left}
.acx-box{display:block;background:#FFFFFF;color:#002347;border-radius:18px;padding:28px 26px;border:1px solid rgba(0,35,71,.10);box-shadow:0 1px 2px rgba(0,35,71,.06),0 12px 32px rgba(0,35,71,.07);text-align:left}
.acx-ic{display:block;width:26px;height:26px;color:#00468E;margin:0 0 18px}
.acx-t{display:block;margin:0 0 8px;font-size:20px;line-height:1.25;font-weight:600;color:#002347;text-align:left}
.acx-d{display:block;margin:0;font-size:15px;line-height:1.5;font-weight:400;color:#00468E;text-align:left}
.acx-hub{justify-content:center;align-items:center}
.acx-hub .acx-tag{margin:0 0 10px;text-align:center}
.acx-core{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;border-radius:50%;padding:36px;text-align:center;color:#FFFFFF;
background:linear-gradient(150deg,#002347 0%,#00468E 100%);border:1px solid rgba(51,167,230,.6);box-shadow:0 0 0 7px rgba(51,167,230,.12),0 18px 44px rgba(0,35,71,.24)}
.acx-logo{display:block;width:112px;height:24px;margin:0 0 16px}
.acx-core{position:relative;overflow:hidden;isolation:isolate;border:0;background:radial-gradient(circle at 50% 50%,#0B5CA8 0%,#00468E 40%,#33A7E6 78%,#7CCBF4 100%);box-shadow:0 0 0 8px rgba(51,167,230,.10),0 0 60px rgba(51,167,230,.30),0 18px 40px rgba(0,35,71,.14)}
.acx-core.orb-live{background:#1C6FB8}
.acx-orbgl{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;z-index:0;display:block;opacity:1}
.acx-core>.acx-logo,.acx-core>.acx-t,.acx-core>.acx-d{position:relative;z-index:2}
.acx-core .acx-t{margin:0 0 8px;color:#FFFFFF;text-align:center}
.acx-core .acx-d{max-width:190px;color:#FFFFFF;text-align:center;text-wrap:balance}
.acx-feat{display:grid;gap:6px;margin:18px 0 0}
.acx-fi{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:#F2F7FF;border:1px solid #F2F7FF;color:#002347;font-size:14px;line-height:1.3;font-weight:500;text-decoration:none;text-align:left;transition:border-color .25s,background-color .25s}
.acx-fi .acx-fic{display:block;flex:none;width:18px;height:18px;color:#00468E}
.acx-fn{display:block;flex:1 1 auto;min-width:0;color:#002347}
.acx-go{display:block;flex:none;color:#00468E;font-size:14px;line-height:1;transition:transform .25s}
a.acx-fi:hover{border-color:#33A7E6;background:#FFFFFF}
a.acx-fi:hover .acx-go{transform:translateX(2px)}
a.acx-fi:focus-visible,.acx-btn:focus-visible{outline:2px solid #33A7E6;outline-offset:2px}
.acx-here{display:none}
.acx-fi.is-here{background:rgba(51,167,230,.12);border:1px solid #33A7E6;box-shadow:none}
.acx-fi.is-here .acx-here{display:block;margin:2px 0 0;font-size:10.5px;line-height:1.2;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#00468E}
.acx-fi.is-here .acx-go{display:none}
.acx-arrs{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:34px 14px 0}
.acx-arr{display:flex;flex-direction:column;gap:9px}
.acx-lbl{display:block;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:#002347;text-align:left}
.acx-back .acx-lbl{text-align:right}
.acx-track{position:relative;display:block;height:10px}
.acx-ln{position:absolute;left:0;right:0;top:4px;height:1.5px;background:#00468E;transform:scaleX(0);transition:transform .7s cubic-bezier(.3,.7,.2,1) .3s}
.acx-fwd .acx-ln{transform-origin:left center}.acx-back .acx-ln{transform-origin:right center}
.acx-arr:nth-child(2) .acx-ln{transition-delay:.5s}
.acx-a2 .acx-arr:nth-child(1) .acx-ln{transition-delay:.7s}.acx-a2 .acx-arr:nth-child(2) .acx-ln{transition-delay:.9s}
.acx-hd{position:absolute;top:1px;width:8px;height:8px;border-top:1.5px solid #00468E;border-right:1.5px solid #00468E;opacity:0;transition:opacity .3s 1s}
.acx-fwd .acx-hd{right:1px;transform:rotate(45deg)}.acx-back .acx-hd{left:1px;transform:rotate(-135deg)}
.acx-run{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.acx-dot{position:absolute;left:-4px;top:1px;width:8px;height:8px;border-radius:50%;background:#33A7E6;box-shadow:0 0 0 4px rgba(51,167,230,.22);opacity:0}
.acx-flow.fpg-in .acx-ln{transform:scaleX(1)}
.acx-flow.fpg-in .acx-hd{opacity:1}
.acx-flow.fpg-in .acx-fwd .acx-run{animation:acx-f 10s linear infinite}
.acx-flow.fpg-in .acx-back .acx-run{animation:acx-b 10s linear infinite}
.acx-flow.fpg-in .acx-fwd .acx-run .acx-dot,.acx-flow.fpg-in .acx-back .acx-run .acx-dot,.acx-flow.fpg-in .acx-ret .acx-dot{animation:acx-o 10s linear infinite}
.acx-flow.fpg-in .acx-ret .acx-run{animation:acx-b 10s linear infinite}
.acx-a1 .acx-fwd .acx-run,.acx-a1 .acx-fwd .acx-dot{animation-delay:1.6s!important}
.acx-a2 .acx-fwd .acx-run,.acx-a2 .acx-fwd .acx-dot{animation-delay:3.6s!important}
.acx-ret .acx-run,.acx-ret .acx-dot{animation-delay:5.6s!important}
.acx-a2 .acx-back .acx-run,.acx-a2 .acx-back .acx-dot{animation-delay:7.6s!important}
.acx-a1 .acx-back .acx-run,.acx-a1 .acx-back .acx-dot{animation-delay:9.6s!important}
@keyframes acx-f{0%{transform:translateX(0)}16%,100%{transform:translateX(100%)}}
@keyframes acx-b{0%{transform:translateX(100%)}16%,100%{transform:translateX(0)}}
@keyframes acx-o{0%{opacity:0}2%,14%{opacity:1}16%,100%{opacity:0}}
.acx-ldot{position:absolute;left:50%;width:8px;height:8px;margin:-4px 0 0 -4.75px;border-radius:50%;background:#33A7E6;box-shadow:0 0 0 4px rgba(51,167,230,.22);opacity:0;pointer-events:none}
.acx-flow.fpg-in .acx-c3 .acx-ldot{animation:acx-dn 10s linear 5s infinite}
.acx-flow.fpg-in .acx-c1 .acx-ldot{animation:acx-up 10s linear 7.2s infinite}
@keyframes acx-dn{0%{top:0;opacity:0}1%{opacity:1}6%{top:calc(100% + 56px);opacity:1}6.5%,100%{top:calc(100% + 56px);opacity:0}}
@keyframes acx-up{0%{top:calc(100% + 56px);opacity:0}1%{opacity:1}6%{top:0;opacity:1}6.5%,100%{top:0;opacity:0}}
.acx-ret{position:absolute;left:calc((100% - 680px) / 4.3);right:calc((100% - 680px) * 1.15 / 4.3);bottom:36px;height:0;border-top:1.5px dashed #00468E;opacity:0;transition:opacity .8s 1.2s}
.acx-flow.fpg-in .acx-ret{opacity:1}
.acx-ret .acx-run{top:-5.5px;height:10px}
.acx-rt{position:absolute;left:0;right:0;top:14px;display:block;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#002347;text-align:center}
.acx-retm{display:none}
.acx-cta{display:block;margin:40px 0 0;text-align:center}
.acx-btn{display:inline-block;padding:15px 26px;border-radius:12px;background:#00468E;color:#FFFFFF;font-size:15.5px;line-height:1.2;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .3s,box-shadow .3s}
.acx-btn:hover{color:#FFFFFF;transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,35,71,.22)}
.acx-btn.is-here{display:none}
.acx-cta:has(.acx-btn.is-here){display:none}
@media (max-width:1199px){
.fpg .fpg-sec.fpg-sec-white.acx-sec{padding-top:88px!important;padding-bottom:88px!important}
.acx h2.acx-h{font-size:40px}
.acx-head{margin-bottom:48px}
.acx-flow{grid-template-columns:minmax(0,1fr) 150px 236px 150px minmax(0,1.15fr)}
.acx-ret{left:calc((100% - 536px) / 4.3);right:calc((100% - 536px) * 1.15 / 4.3)}
.acx-arrs{padding:34px 10px 0}
.acx-core{padding:30px}
.acx-box{padding:24px 20px}
}
@media (max-width:1099px){
.acx-flow{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;padding:0}
.acx-sp,.acx-leg,.acx-ret{display:none}
.acx-hub .acx-core{width:260px;max-width:100%}
.acx-arrs{flex-direction:row;justify-content:center;gap:28px;padding:18px 0}
.acx-arr{flex-direction:row;align-items:center;gap:10px;flex:1 1 0;min-width:0}
.acx-fwd{justify-content:flex-end}
.acx-back{flex-direction:row-reverse;justify-content:flex-end}
.acx-lbl{max-width:130px}
.acx-fwd .acx-lbl{text-align:right}.acx-back .acx-lbl{text-align:left}
.acx-track{width:10px;height:56px;flex:none}
.acx-ln{left:4px;right:auto;top:0;bottom:0;width:1.5px;height:auto;transform:scaleY(0)}
.acx-fwd .acx-ln{transform-origin:center top}.acx-back .acx-ln{transform-origin:center bottom}
.acx-flow.fpg-in .acx-ln{transform:scaleY(1)}
.acx-hd{left:1px;right:auto}
.acx-fwd .acx-hd{top:auto;bottom:1px;transform:rotate(135deg)}
.acx-back .acx-hd{top:1px;transform:rotate(-45deg)}
.acx-dot{left:1px;top:-4px}
.acx-flow.fpg-in .acx-fwd .acx-run{animation-name:acx-fv}
.acx-flow.fpg-in .acx-back .acx-run{animation-name:acx-bv}
.acx-retm{display:block;max-width:560px;margin:16px auto 0;padding:14px 12px;border:1.5px dashed #00468E;border-radius:14px;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;letter-spacing:.03em;text-transform:uppercase;color:#002347;text-align:center}
.acx-cta{margin-top:32px}
}
@keyframes acx-fv{0%{transform:translateY(0)}16%,100%{transform:translateY(100%)}}
@keyframes acx-bv{0%{transform:translateY(100%)}16%,100%{transform:translateY(0)}}
@media (max-width:780px){
.fpg .fpg-sec.fpg-sec-white.acx-sec{padding-top:64px!important;padding-bottom:64px!important}
.acx h2.acx-h{font-size:32px}
.acx .acx-lede{font-size:16px}
.acx-head{margin-bottom:36px}
.acx-box{padding:22px 20px}
.acx-btn{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
.acx h2.acx-h .acx-hl{animation:none}
.acx-ln{transition:none!important;transform:none!important}
.acx-hd{transition:none!important;opacity:1!important}
.acx-ret{transition:none!important;opacity:1!important}
.acx-run,.acx-dot,.acx-ldot{display:none}
.acx-fi,.acx-go,.acx-btn{transition:none}
}
@media (scripting:none){.acx-flow.fpg-anim{opacity:1!important;transform:none!important}.acx-ln{transform:none!important}.acx-hd,.acx-ret{opacity:1!important}}
/* FAQ ("Frequently asked questions", was "Questions buyers ask us" until 2026-09-30), owner request 2026-09-29: centred column, a faint ring decoration and
a gentle gradient. Lives in the connector layer on purpose, so a --refresh of the connector cannot
drop it. The .fpg wrapper puts text-align:left on h2/div/p at (0,1,1), hence the !important. */
.fpg section.fpg-sec:has(> .fpg-w > .fpg-faq){position:relative;overflow:hidden;
background-image:linear-gradient(180deg,rgba(51,167,230,0) 0%,rgba(51,167,230,.08) 14%,rgba(51,167,230,0) 45%,rgba(0,70,142,.22) 72%,rgba(0,70,142,0) 100%)}
/* the gradient used to end at rgba(0,70,142,.22), one tone bluer than the flat #002347 band under the FAQ; it now fades back to the page navy (owner 2026-09-30) */
.fpg section.fpg-sec:has(> .fpg-w > .fpg-faq)::before{content:"";position:absolute;left:50%;top:-40px;width:1400px;height:700px;margin-left:-700px;pointer-events:none;
-webkit-mask-image:linear-gradient(transparent 0,transparent 44px,#000 140px);mask-image:linear-gradient(transparent 0,transparent 44px,#000 140px);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700'%3E%3Cg fill='none' stroke='%2333A7E6'%3E%3Ccircle cx='700' cy='200' r='160' stroke-opacity='.14'/%3E%3Ccircle cx='700' cy='200' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='700' cy='200' r='460' stroke-opacity='.07'/%3E%3Cpath d='M40 620A760 760 0 0 1 1360 620' stroke-opacity='.06'/%3E%3C/g%3E%3Cg fill='%2333A7E6' fill-opacity='.5'%3E%3Ccircle cx='400' cy='120' r='2.5'/%3E%3Ccircle cx='1000' cy='120' r='2.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 0/1400px 700px}
.fpg section.fpg-sec:has(> .fpg-w > .fpg-faq)>.fpg-w{position:relative}
.fpg .fpg-faq{max-width:820px!important;margin:0 auto!important}
.fpg .fpg-faq h2{text-align:center!important}
/* the +/- toggles in the logo blue (owner 2026-09-29); the module turned the open question dark blue,
which is unreadable on the navy ground, so the text stays white in every state */
.fpg .fpg-faq summary::after,.fpg .fpg-faq summary:hover::after,.fpg .fpg-faq details[open] summary::after{color:#33A7E6!important}
.fpg .fpg-faq summary,.fpg .fpg-faq summary:hover,.fpg .fpg-faq details[open] summary{color:#fff!important}
/* closing line + button under the list (owner 2026-09-30, like the homepage FAQ, in the family style) */
.fpg .fpg-faq .fpg-faq-more{display:block!important;margin:36px auto 0!important;padding:28px 0 0!important;border-top:1px solid rgba(255,255,255,.14)!important;text-align:center!important}
.fpg .fpg-faq .fpg-faq-more-t{display:block!important;margin:0 0 16px!important;font-size:17px!important;line-height:1.5!important;color:rgba(255,255,255,.82)!important;text-align:center!important}
.fpg .fpg-faq .fpg-faq-more-a{display:inline-block!important;padding:13px 24px!important;border-radius:12px!important;border:1px solid rgba(51,167,230,.7)!important;background:rgba(51,167,230,.1)!important;color:#7CCBF4!important;font-size:15px!important;line-height:1.2!important;font-weight:500!important;text-decoration:none!important;transition:background-color .3s,border-color .3s,transform .3s}
.fpg .fpg-faq .fpg-faq-more-a:hover{background:rgba(51,167,230,.22)!important;border-color:#33A7E6!important;transform:translateY(-1px)}
.fpg .fpg-faq .fpg-faq-more-a:focus-visible{outline:2px solid #33A7E6;outline-offset:3px}
.fpg .fpg .fpg-sec.fpg-sec-white.acx-sec{background:linear-gradient(180deg,#FBFBFD 0%,#F5F5F7 100%)!important;position:relative!important;overflow:hidden!important}
.fpg .acx-sec::before{width:100%!important;height:100%!important;background:radial-gradient(ellipse 52% 40% at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 100%)!important;position:absolute!important;left:0!important;top:0!important;content:""!important}
.fpg .acx-sec>.fpg-w{position:relative!important;z-index:1!important}
.fpg .acx{text-align:left!important;color:#002347!important}
.fpg .acx-head{text-align:center!important;margin:0 auto 60px!important;max-width:760px!important;display:block!important}
.fpg .acx .fpk-badge{margin:0 auto 22px!important}
.fpg .acx h2.acx-h{font-size:46px!important;line-height:1.08!important;letter-spacing:-.02em!important;text-align:center!important;font-weight:600!important;color:#002347!important;margin:0 0 18px!important}
.fpg .acx h2.acx-h .acx-hl{color:#00468E!important;background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 58%),linear-gradient(90deg,#00468E 0%,#1673B8 50%,#33A7E6 100%)!important;display:inline!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
.fpg .acx .acx-lede{font-size:17px!important;line-height:1.6!important;text-align:center!important;font-weight:400!important;color:#00468E!important;margin:0 auto!important;max-width:56ch!important;display:block!important}
.fpg .acx-flow{padding:0 0 92px!important;position:relative!important;display:grid!important}
.fpg .acx-col{position:relative!important;display:flex!important}
.fpg .acx-sp,.fpg .acx-leg{min-height:0!important;position:relative!important;display:block!important}
.fpg .acx-leg::before{margin-left:-.75px!important;width:0!important;position:absolute!important;left:50%!important;top:0!important;bottom:-56px!important;content:""!important}
.fpg .acx-c1 .acx-leg::after{margin-left:-4.75px!important;width:8px!important;height:8px!important;position:absolute!important;left:50%!important;top:0!important;content:""!important}
.fpg .acx-tag{font-size:14px!important;line-height:1.3!important;text-align:left!important;font-weight:500!important;color:#00468E!important;margin:0 0 10px 4px!important;display:block!important}
.fpg .acx-box{text-align:left!important;color:#002347!important;padding:28px 26px!important;background:#FFFFFF!important;border-radius:18px!important;border:1px solid rgba(0,35,71,.10)!important;box-shadow:0 1px 2px rgba(0,35,71,.06),0 12px 32px rgba(0,35,71,.07)!important;display:block!important}
.fpg .acx-ic{color:#00468E!important;margin:0 0 18px!important;width:26px!important;height:26px!important;display:block!important}
.fpg .acx-t{font-size:20px!important;line-height:1.25!important;text-align:left!important;font-weight:600!important;color:#002347!important;margin:0 0 8px!important;display:block!important}
.fpg .acx-d{font-size:15px!important;line-height:1.5!important;text-align:left!important;font-weight:400!important;color:#00468E!important;margin:0!important;display:block!important}
.fpg .acx-hub .acx-tag{text-align:center!important;margin:0 0 10px!important}
.fpg .acx-core{text-align:center!important;color:#FFFFFF!important;width:100%!important;padding:36px!important;background:linear-gradient(150deg,#002347 0%,#00468E 100%)!important;border-radius:50%!important;border:1px solid rgba(51,167,230,.6)!important;box-shadow:0 0 0 7px rgba(51,167,230,.12),0 18px 44px rgba(0,35,71,.24)!important;display:flex!important;aspect-ratio:1/1!important}
.fpg .acx-logo{margin:0 0 16px!important;width:112px!important;height:24px!important;display:block!important}
.fpg .acx-core{background:radial-gradient(circle at 50% 50%,#0B5CA8 0%,#00468E 40%,#33A7E6 78%,#7CCBF4 100%)!important;border:0!important;box-shadow:0 0 0 8px rgba(51,167,230,.10),0 0 60px rgba(51,167,230,.30),0 18px 40px rgba(0,35,71,.14)!important;position:relative!important;overflow:hidden!important}
.fpg .acx-core.orb-live{background:#1C6FB8!important}
.fpg .acx-orbgl{width:100%!important;height:100%!important;border-radius:50%!important;position:absolute!important;left:0!important;top:0!important;z-index:0!important;display:block!important}
.fpg .acx-core>.acx-logo,.fpg .acx-core>.acx-t,.fpg .acx-core>.acx-d{position:relative!important;z-index:2!important}
.fpg .acx-core .acx-t{text-align:center!important;color:#FFFFFF!important;margin:0 0 8px!important}
.fpg .acx-core .acx-d{text-align:center!important;color:#FFFFFF!important;max-width:190px!important}
.fpg .acx-feat{margin:18px 0 0!important;display:grid!important}
.fpg .acx-fi{font-size:14px!important;line-height:1.3!important;text-align:left!important;font-weight:500!important;color:#002347!important;text-decoration:none!important;padding:8px 12px!important;background:#F2F7FF!important;border-radius:10px!important;border:1px solid #F2F7FF!important;position:relative!important;display:flex!important}
.fpg .acx-fi .acx-fic{color:#00468E!important;width:18px!important;height:18px!important;display:block!important}
.fpg .acx-fn{color:#002347!important;display:block!important}
.fpg .acx-go{font-size:14px!important;line-height:1!important;color:#00468E!important;display:block!important}
.fpg a.acx-fi:hover{background:#FFFFFF!important}
.fpg .acx-here{display:none!important}
.fpg .acx-fi.is-here{background:rgba(51,167,230,.12)!important;border:1px solid #33A7E6!important;box-shadow:none!important}
.fpg .acx-fi.is-here .acx-here{font-size:10.5px!important;line-height:1.2!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:600!important;color:#00468E!important;margin:2px 0 0!important;display:block!important}
.fpg .acx-fi.is-here .acx-go{display:none!important}
.fpg .acx-arrs{padding:34px 14px 0!important;display:flex!important}
.fpg .acx-arr{display:flex!important}
.fpg .acx-lbl{font-size:11px!important;line-height:1.4!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-align:left!important;font-weight:400!important;color:#002347!important;display:block!important}
.fpg .acx-back .acx-lbl{text-align:right!important}
.fpg .acx-track{height:10px!important;position:relative!important;display:block!important}
.fpg .acx-ln{height:1.5px!important;background:#00468E!important;position:absolute!important;left:0!important;top:4px!important;right:0!important}
.fpg .acx-hd{width:8px!important;height:8px!important;position:absolute!important;top:1px!important}
.fpg .acx-fwd .acx-hd{right:1px!important}
.fpg .acx-back .acx-hd{left:1px!important}
.fpg .acx-run{width:100%!important;height:100%!important;position:absolute!important;left:0!important;top:0!important}
.fpg .acx-dot{width:8px!important;height:8px!important;background:#33A7E6!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(51,167,230,.22)!important;position:absolute!important;left:-4px!important;top:1px!important}
.fpg .acx-ldot{margin:-4px 0 0 -4.75px!important;width:8px!important;height:8px!important;background:#33A7E6!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(51,167,230,.22)!important;position:absolute!important;left:50%!important}
.fpg .acx-ret{height:0!important;position:absolute!important;left:calc((100% - 680px) / 4.3)!important;right:calc((100% - 680px) * 1.15 / 4.3)!important;bottom:36px!important}
.fpg .acx-ret .acx-run{height:10px!important;top:-5.5px!important}
.fpg .acx-rt{font-size:11px!important;line-height:1.4!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-align:center!important;color:#002347!important;position:absolute!important;left:0!important;top:14px!important;right:0!important;display:block!important}
.fpg .acx-retm{display:none!important}
.fpg .acx-cta{text-align:center!important;margin:40px 0 0!important;display:block!important}
.fpg .acx-btn{font-size:15.5px!important;line-height:1.2!important;font-weight:500!important;color:#FFFFFF!important;text-decoration:none!important;padding:15px 26px!important;background:#00468E!important;border-radius:12px!important;display:inline-block!important}
.fpg .acx-btn:hover{color:#FFFFFF!important;box-shadow:0 10px 26px rgba(0,35,71,.22)!important}
.fpg .acx-btn.is-here{display:none!important}
.fpg .acx-cta:has(.acx-btn.is-here){display:none!important}
@media (max-width:1199px){.fpg .acx h2.acx-h{font-size:40px!important}}
@media (max-width:1199px){.fpg .acx-head{margin-bottom:48px!important}}
@media (max-width:1199px){.fpg .acx-ret{left:calc((100% - 536px) / 4.3)!important;right:calc((100% - 536px) * 1.15 / 4.3)!important}}
@media (max-width:1199px){.fpg .acx-arrs{padding:34px 10px 0!important}}
@media (max-width:1199px){.fpg .acx-core{padding:30px!important}}
@media (max-width:1199px){.fpg .acx-box{padding:24px 20px!important}}
@media (max-width:1099px){.fpg .acx-flow{margin:0 auto!important;max-width:560px!important;padding:0!important}}
@media (max-width:1099px){.fpg .acx-sp,.fpg .acx-leg,.fpg .acx-ret{display:none!important}}
@media (max-width:1099px){.fpg .acx-hub .acx-core{width:260px!important;max-width:100%!important}}
@media (max-width:1099px){.fpg .acx-arrs{padding:18px 0!important}}
@media (max-width:1099px){.fpg .acx-lbl{max-width:130px!important}}
@media (max-width:1099px){.fpg .acx-fwd .acx-lbl{text-align:right!important}}
@media (max-width:1099px){.fpg .acx-back .acx-lbl{text-align:left!important}}
@media (max-width:1099px){.fpg .acx-track{width:10px!important;height:56px!important}}
@media (max-width:1099px){.fpg .acx-ln{width:1.5px!important;height:auto!important;left:4px!important;top:0!important;right:auto!important;bottom:0!important}}
@media (max-width:1099px){.fpg .acx-hd{left:1px!important;right:auto!important}}
@media (max-width:1099px){.fpg .acx-fwd .acx-hd{top:auto!important;bottom:1px!important}}
@media (max-width:1099px){.fpg .acx-back .acx-hd{top:1px!important}}
@media (max-width:1099px){.fpg .acx-dot{left:1px!important;top:-4px!important}}
@media (max-width:1099px){.fpg .acx-retm{font-size:11px!important;line-height:1.5!important;letter-spacing:.03em!important;text-transform:uppercase!important;text-align:center!important;color:#002347!important;margin:16px auto 0!important;max-width:560px!important;padding:14px 12px!important;border-radius:14px!important;border:1.5px dashed #00468E!important;display:block!important}}
@media (max-width:1099px){.fpg .acx-cta{margin-top:32px!important}}
@media (max-width:780px){.fpg .acx h2.acx-h{font-size:32px!important}}
@media (max-width:780px){.fpg .acx .acx-lede{font-size:16px!important}}
@media (max-width:780px){.fpg .acx-head{margin-bottom:36px!important}}
@media (max-width:780px){.fpg .acx-box{padding:22px 20px!important}}
@media (prefers-reduced-motion:reduce){.fpg .acx-run,.fpg .acx-dot,.fpg .acx-ldot{display:none!important}}
/* "The rest of the platform" as one row of equal cards (owner 2026-09-30, "one row, equal cards"; the
2026-09-29 bento is gone). From 1200px six cards across the content width, equal width and height:
glyph, name, one line, Explore, with the link pinned to the bottom so the heights match even when
"Multimodal behavioral feedback" wraps. The agentic card comes first in the family blue; the coach's
own page shows six white feature cards. Below 1200px the row scrolls sideways with scroll-snap, cards
260px wide with the next card peeking, inside the content box so the page itself never scrolls. */
/* the cards section sits on white (fpg-sec-white), but the family rule .fpg-sec:not(.fpg-sec-alt)>.fpg-w>h2
paints section headings white for the dark default, so "The rest of the platform" was white on white
(measured 2026-09-30: rgb(255,255,255) on #fff) */
.fpg .fpg-sec.fpg-sec-white:has(> .fpg-w > .pfc)>.fpg-w>h2{color:#002347!important}
/* hero buttons: .rph-band carries pointer-events:none and .rph-copy inherited it, so "Book a demo" and
"See pricing" could not be clicked (elementFromPoint returned img#rphSeq, 2026-09-30). The hero script
hides .rph-copy with visibility when it fades out, so re-enabling it never blocks the film. */
.fpg .rph .rph-copy{pointer-events:auto!important}
.fpg .rph .rph-copy::before{pointer-events:none!important}
/* proof tile in the rpb grid, "Trusted by" line, pricing + references under the closing button
(scripts/product-proof-and-seo.py, owner decisions 2026-09-30) */
.fpg .rpb-proof .rpb-qt{display:block!important;margin:0 0 12px!important;font-size:19px!important;line-height:1.45!important;font-weight:500!important;font-style:normal!important;color:#002347!important;text-wrap:pretty}
.fpg .rpb-proof .rpb-qa{display:block!important;margin:0 0 12px!important;font-size:13px!important;line-height:1.45!important;color:#4A5D73!important}
.fpg .rpb-proof .rpb-cs{display:inline-flex!important;gap:6px!important;margin:0 0 18px!important;font-size:14px!important;font-weight:500!important;color:#00468E!important;text-decoration:none!important}
.fpg .rpb-proof .rpb-cs:hover{text-decoration:underline!important}
.fpg .rpb-proof .rpb-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;align-items:stretch!important}
.fpg .rpb-proof .rpb-st{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;padding:14px 12px!important;border-radius:12px!important;background:#F2F7FF!important;border:1px solid rgba(0,70,142,.10)!important}
.fpg .rpb-proof .rpb-st b{display:block!important;font-size:26px!important;line-height:1.1!important;font-weight:600!important;color:#00468E!important}
.fpg .rpb-proof .rpb-st span{display:block!important;margin:6px 0 0!important;font-size:13px!important;line-height:1.35!important;color:#002347!important}
.fpg .rpb-proof .rpb-fn{display:block!important;margin:10px 0 0!important;font-size:12px!important;line-height:1.4!important;color:#4A5D73!important}
.fpg .rpb .rpb-trust{display:block!important;margin:28px 0 0!important;font-size:14px!important;line-height:1.5!important;font-weight:500!important;color:#4A5D73!important;text-align:center!important}
.fpg .rpc .rpc-more{display:block!important;margin:16px 0 0!important;font-size:15px!important;line-height:1.5!important;color:rgba(255,255,255,.72)!important;text-align:center!important}
.fpg .rpc .rpc-more a{color:#7CCBF4!important;font-weight:500!important;text-decoration:none!important}
.fpg .rpc .rpc-more a:hover{text-decoration:underline!important}
/* rpb globe panel (owner 2026-09-30): no caption, 1.3x globe placed higher, chips clear of the sphere,
wires per breakpoint; source outputs/modules/_hubspot-bento-rpb.html */
.fpg .rpb-gcap{display:none!important}
@media (min-width:641px){
.fpg .rpb-orb{width:93.25cqw!important;height:93.25cqw!important;bottom:-50cqw!important}
.fpg .rpb-p1,.fpg .rpb-p4{top:4.5%!important;bottom:auto!important}
.fpg .rpb-p2,.fpg .rpb-p5{top:24%!important;bottom:auto!important}
.fpg .rpb-p3,.fpg .rpb-p6{top:43.5%!important;bottom:auto!important}
}
@media (max-width:640px){
.fpg .rpb-p1,.fpg .rpb-p4{top:2%!important;bottom:auto!important}
.fpg .rpb-p2,.fpg .rpb-p5{top:23%!important;bottom:auto!important}
.fpg .rpb-p3,.fpg .rpb-p6{top:44%!important;bottom:auto!important}
}
.fpg .rpb-wires.rpb-wm{display:none!important}
/* session-generator builder mock: stock photos in the session cards (2026-09-30) */
.fpg .rpg-cards .c .ph .ph-img{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block!important;margin:0!important;border-radius:0!important}
.fpg .rpg-cards .c .ph .badge{z-index:1!important;box-shadow:0 1px 3px rgba(0,35,71,.25)!important}
/* glass treatment over the session-card photos (2026-09-30) */
.fpg .rpg-cards .c .ph .ph-fx{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(to top,rgba(0,35,71,.62) 0%,rgba(0,35,71,.28) 22%,rgba(0,35,71,0) 40%)!important}
.fpg .rpg-cards .c .ph .ph-ring{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;display:block!important;overflow:visible!important;transform:none!important}
.fpg .rpg-cards .c .ph .ph-chip{position:absolute!important;left:6%!important;bottom:6%!important;display:inline-flex!important;align-items:center!important;gap:.3cqw!important;max-width:88%!important;padding:.28cqw .65cqw .28cqw .45cqw!important;border-radius:2cqw!important;
background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.38)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
color:#fff!important;font-size:.66cqw!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;box-shadow:0 1px 6px rgba(0,35,71,.18)!important}
.fpg .rpg-cards .c .ph .ph-chip svg{width:.8cqw!important;height:.8cqw!important;flex:none!important;color:#fff!important;position:static!important;transform:none!important;left:auto!important;top:auto!important}
.fpg .rpg-cards .c .ph .badge{z-index:2!important}
@media (max-width:780px){.fpg .rpg-cards .c .ph{aspect-ratio:16/10!important}}
.fpg .rpg-cards .c .ph .ph-chip svg path{fill:#fff!important;stroke:none!important}
@media (max-width:640px){.fpg .rpb-wires.rpb-wd{display:none!important}.fpg .rpb-wires.rpb-wm{display:block!important}}
@media (min-width:601px) and (max-width:1199px){.fpg .rpb-proof .rpb-st b{font-size:21px!important}.fpg .rpb-proof .rpb-st{padding:12px 10px!important}.fpg .rpb-proof .rpb-st span{font-size:12.5px!important}}
@media (max-width:600px){.fpg .rpb-proof .rpb-qt{font-size:17px!important}.fpg .rpb-proof .rpb-stats{grid-template-columns:minmax(0,1fr)!important;gap:8px!important;height:auto!important}
.fpg .rpb-proof .rpb-st{flex-direction:row!important;align-items:baseline!important;justify-content:flex-start!important;gap:12px!important;padding:12px 14px!important}
.fpg .rpb-proof .rpb-st b{flex:none!important;font-size:22px!important}.fpg .rpb-proof .rpb-st span{margin:0!important}}
/* the first mockup band (section.rpa inside a plain fpg-sec) bleeds, but its outer section stayed inset by the
theme below 1201px, so its bottom padding showed the navy wrapper as 20/40px side notches once the navy
slider below it was removed (2026-09-30). Same bleed as fpg-sec-white, same content edge. */
@media (max-width:575px){.fpg>section.fpg-sec:has(>.fpg-w>section.rpa){margin-left:-20px!important;margin-right:-20px!important;width:auto!important;max-width:none!important}
.fpg>section.fpg-sec:has(>.fpg-w>section.rpa)>.fpg-w{padding-left:20px!important;padding-right:20px!important}}
@media (min-width:576px) and (max-width:768px){.fpg>section.fpg-sec:has(>.fpg-w>section.rpa){margin-left:-40px!important;margin-right:-40px!important;width:auto!important;max-width:none!important}
.fpg>section.fpg-sec:has(>.fpg-w>section.rpa)>.fpg-w{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:769px) and (max-width:1200px){.fpg>section.fpg-sec:has(>.fpg-w>section.rpa){margin-left:-40px!important;margin-right:-40px!important;width:auto!important;max-width:none!important}
.fpg>section.fpg-sec:has(>.fpg-w>section.rpa)>.fpg-w{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:64px!important;padding-right:64px!important}}
.fpg .pfc.pfc-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:none;gap:14px;margin-top:32px;align-items:stretch}
.fpg .pfc.pfc-row .pfc-c{grid-area:auto!important;display:flex!important;flex-direction:column;align-items:flex-start;text-align:left!important;gap:0;min-height:0;padding:20px 16px 18px!important;border-radius:14px!important;
background:#fff!important;border:1px solid #DCE5EF!important;color:#002347!important}
.fpg .pfc.pfc-row .pfc-g{width:60px!important;height:42px!important;margin:0 0 16px!important;zoom:1;order:0;align-self:flex-start}
.fpg .pfc.pfc-row .pfc-n{order:1;display:block;margin:0 0 6px!important;font-size:16px!important;line-height:1.3!important;font-weight:600!important;color:#002347!important}
.fpg .pfc.pfc-row .pfc-s{order:2;display:block;margin:0 0 18px;font-size:13.5px!important;line-height:1.45!important;color:#4A5D73!important}
.fpg .pfc.pfc-row .pfc-a{order:3;margin-top:auto!important;display:inline-flex;align-items:center;gap:6px;font-size:14px!important;font-weight:500!important;color:#00468E!important}
.fpg .pfc.pfc-row .pfc-c.pfc-ag{background:linear-gradient(165deg,#00468E,#00264F)!important;border-color:rgba(51,167,230,.55)!important;color:#fff!important}
.fpg .pfc.pfc-row .pfc-ag .pfc-n{color:#fff!important}
.fpg .pfc.pfc-row .pfc-ag .pfc-s{color:rgba(255,255,255,.84)!important}
.fpg .pfc.pfc-row .pfc-ag .pfc-a{color:#7CCBF4!important}
.fpg .pfc.pfc-row .pfc-ag .pfc-g{background:rgba(255,255,255,.12)!important}
.fpg .pfc.pfc-row .pfc-ag .g-ag span:nth-child(1){background:#fff}
.fpg .pfc.pfc-row .pfc-ag .g-ag span:nth-child(3){background:#7CCBF4}
@media (max-width:1199px){
.fpg .pfc.pfc-row{display:flex!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:12px;padding:2px 2px 14px;margin-top:28px;
-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,35,71,.25) transparent}
.fpg .pfc.pfc-row .pfc-c{flex:0 0 260px;width:260px;scroll-snap-align:start}
}
@media (max-width:480px){
.fpg .pfc.pfc-row .pfc-c{flex-basis:248px;width:248px;grid-template-columns:none}
.fpg .pfc.pfc-row .pfc-g{grid-row:auto}
}
.g-ag span:nth-child(1){left:23px;top:14px;width:14px;height:14px;border-radius:50%;background:#00468E}
.g-ag span:nth-child(2){left:18px;top:9px;width:24px;height:24px;border-radius:50%;border:2px solid #33A7E6;opacity:.55;animation:none 2.4s ease-out infinite}
.g-ag span:nth-child(3),.g-ag span:nth-child(4),.g-ag span:nth-child(5){width:6px;height:6px;border-radius:50%;animation:none 2.4s ease-in-out infinite}
.g-ag span:nth-child(3){left:8px;top:8px;background:#B9CBE0}
.g-ag span:nth-child(4){left:46px;top:9px;background:#33A7E6;animation-delay:.4s}
.g-ag span:nth-child(5){left:27px;top:32px;background:#7FA9D6;animation-delay:.8s}
@media (hover:hover){
.pfc-c:hover .g-ag span:nth-child(2){animation-name:pfc-ring}
.pfc-c:hover .g-ag span:nth-child(n+3){animation-name:pfc-trait}
}
.fpg .acx{--acx:2026-09-29}
/* patch:acx end */
.fpg ul.fpk-list.fpk-list{--fpk-ico-fix:2026-09-29;padding-top:8px!important;margin-top:44px!important}
.fpg .fpk-list span.fpk-ico{display:grid!important;place-items:center!important}
.fpg .fpk-list span.fpk-ico.fpk-ico{--fpk-ico-flat:2026-09-29;box-shadow:none!important}
/* patch:ent 2026-09-30 */
/* F (2026-09-30): the deep-dive score strip on the phone mock no longer clips its tiles */
.fpg .rps-dd{overflow:visible!important;padding:1cqw!important;gap:.8cqw!important;border-radius:2.6cqw!important;align-items:stretch!important}
.fpg .rps-dd em{display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:2cqw 1.8cqw 2.2cqw!important;border-right:0!important;border-radius:1.8cqw!important}
.fpg .rps-dd em.on{background:#fff!important;box-shadow:0 .4cqw 1.4cqw rgba(0,35,71,.12),0 0 0 1px rgba(21,101,192,.22)!important}
.fpg .rps-dd em i{letter-spacing:.02em!important;line-height:1.25!important}
.fpg .rps-dd .tk{align-self:stretch!important}
/* D (2026-09-30): the Analytics and Sign-off panels in the rpb bottom row share one top and bottom edge */
@media (min-width:601px){.fpg .rpb-c .rpb-draw,.fpg .rpb-c .rpb-w4{height:160px!important;box-sizing:border-box!important;margin-top:auto!important}}
/* M1: the slider's four image wells are empty until the images exist (product-add-usecases.py).
Hidden, and the card becomes a bordered text panel: two per view from 781, one on a phone.
The slider script steps by one card width, so the count per view is free to change here. */
.fpg .rhl-well{display:none!important}
.fpg .rhl-card{display:flex!important;flex-direction:column!important;justify-content:center!important;
box-sizing:border-box!important;min-height:236px!important;padding:36px 40px!important;
border:1px solid rgba(255,255,255,.14)!important;border-radius:20px!important;
background:rgba(255,255,255,.05)!important}
.fpg .rhl-cap{margin:0!important;padding:0!important;font-size:19px!important;line-height:1.55!important;
max-width:52ch!important;color:rgba(255,255,255,.72)!important}
.fpg .rhl-cap b{display:block!important;margin-bottom:8px!important;font-size:22px!important;
line-height:1.3!important;color:#fff!important}
@media (min-width:781px){.fpg .rhl-card{flex:0 0 calc(50% - 10px)!important}}
@media (max-width:780px){
.fpg .rhl-card{min-height:0!important;padding:26px 24px!important;border-radius:16px!important}
.fpg .rhl-cap{font-size:16px!important}.fpg .rhl-cap b{font-size:18px!important}
}
/* M2: four tiles, 2x2. The module's own rows were 3+3 and 2+2+2 with the demo tile fifth. */
@media (min-width:1100px){
.fpg .rpb-c:nth-child(3){grid-column:1/span 3!important}
.fpg .rpb-c:nth-child(4){grid-column:4/span 3!important}
}
/* N3: the two ghost cards under the first scenario are real cards now, laid out like .rps-card. */
.fpg .rps-gx{background:#fff!important;overflow:hidden!important}
.fpg .rps-gx .top{display:flex!important;gap:3.4cqw!important;align-items:flex-start!important;margin:0 0 3cqw!important}
.fpg .rps-gx .th{display:block!important;flex:0 0 20cqw!important;width:20cqw!important;height:26cqw!important;
border-radius:1.6cqw!important;object-fit:cover!important;background:var(--g1)!important;margin:0!important}
.fpg .rps-gx .t{display:block!important;margin:0 0 1.6cqw!important;font-size:var(--fs-title)!important;
font-weight:600!important;line-height:1.22!important;color:var(--nv)!important}
.fpg .rps-gx .g{display:inline-block!important;font-style:normal!important;font-size:var(--fs-meta)!important;
padding:.9cqw 2.4cqw!important;border-radius:4cqw!important;background:var(--tint)!important;color:var(--bl)!important}
.fpg .rps-gx .d{display:block!important;font-style:normal!important;margin:0 0 3.4cqw!important;
font-size:var(--fs-body)!important;line-height:1.5!important;color:var(--mut)!important}
.fpg .rps-gx .btn{display:block!important;height:auto!important;text-align:center!important;
background:var(--bl)!important;color:#fff!important;font-size:var(--fs-meta)!important;font-weight:500!important;
letter-spacing:.06em!important;padding:3cqw!important;border-radius:2cqw!important;text-transform:uppercase!important}
/* patch:ent end */
.fpg .rps-side.rps-side{--no-c-borders:2026-09-30;border-top:0!important}
/* patch:faqx */
.fpg section.fpg-sec .fpg-faq > .fpg-faq-more{border-top:0!important;margin-top:44px!important;padding-top:0!important}
.fpg .fpg-faq.faqx{--fx-cy:#33A7E6;--fx-cy2:#7CCBF4;--fx-out:cubic-bezier(.22,1,.36,1);--fx-io:cubic-bezier(.65,0,.35,1);--fx-px:20px}
.fpg .fpg-faq.faqx details{position:relative;isolation:isolate;padding:0!important;margin:0!important;border:0!important;border-bottom:0!important}
.fpg .fpg-faq.faqx details::before{content:"";position:absolute;inset:6px 0 7px;border-radius:14px;background:linear-gradient(180deg,rgba(51,167,230,.105) 0%,rgba(51,167,230,.05) 100%);box-shadow:inset 0 0 0 1px rgba(124,203,244,.15),0 18px 40px -24px rgba(0,10,30,.55);opacity:0;transition:opacity .32s ease;pointer-events:none;z-index:-1}
.fpg .fpg-faq.faqx details::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;opacity:.17;transition:opacity .35s ease;pointer-events:none}
.fpg .fpg-faq.faqx details[open]:not(.faqx-closing)::before{opacity:1}
.fpg .fpg-faq.faqx details[open]:not(.faqx-closing)::after{opacity:.3}
.fpg .fpg-faq.faqx details > summary{position:relative;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;min-height:0!important;margin:0!important;padding:19px var(--fx-px)!important;list-style:none!important;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.fpg .fpg-faq.faqx details > summary::after{content:none!important;display:none!important}
.fpg .fpg-faq.faqx details > summary::-webkit-details-marker{display:none}
.fpg .fpg-faq.faqx .faqx-q{flex:1 1 auto;min-width:0;transform:translate3d(0,0,0);transition:transform .45s var(--fx-out)}
.fpg .fpg-faq.faqx .faqx-sh{position:absolute;inset:6px 0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:-1}
.fpg .fpg-faq.faqx .faqx-sh i{position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(100deg,rgba(124,203,244,0) 0%,rgba(124,203,244,.09) 42%,rgba(255,255,255,.075) 50%,rgba(124,203,244,.09) 58%,rgba(124,203,244,0) 100%);transform:translate3d(-105%,0,0)}
.fpg .fpg-faq.faqx details[open]:not(.faqx-closing) > summary .faqx-sh{background:transparent}
.fpg .fpg-faq.faqx .faqx-ic{position:relative;flex:none;width:28px;height:28px;margin:0;border-radius:50%}
.fpg .fpg-faq.faqx .faqx-ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(51,167,230,.07);box-shadow:inset 0 0 0 1px rgba(51,167,230,.36)}
.fpg .fpg-faq.faqx .faqx-ic::after{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(closest-side,rgba(51,167,230,.42),rgba(51,167,230,0));opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .55s var(--fx-out)}
.fpg .fpg-faq.faqx .faqx-ic i{position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--fx-cy);transform:rotate(0);transition:transform .5s var(--fx-io)}
.fpg .fpg-faq.faqx .faqx-ic i + i{transform:rotate(90deg)}
.fpg .fpg-faq.faqx details[open]:not(.faqx-closing) .faqx-ic i{transform:rotate(180deg)}
.fpg .fpg-faq.faqx details > summary:focus,.fpg .fpg-faq.faqx details > summary:focus-visible{outline:none!important;box-shadow:none!important}
.fpg .fpg-faq.faqx details > summary:focus-visible .faqx-sh{opacity:1;box-shadow:inset 0 0 0 2px var(--fx-cy)}
.fpg .fpg-faq.faqx details > :not(summary){box-sizing:content-box;max-width:66ch;margin:0!important;padding:0 68px 27px var(--fx-px)!important;font-size:16px!important;line-height:1.65!important;opacity:0;transform:translate3d(0,8px,0);transition:opacity .16s ease,transform .2s ease}
.fpg .fpg-faq.faqx details[open]:not(.faqx-closing):not(.faqx-pre) > :not(summary){opacity:1;transform:none;transition:opacity .38s ease .1s,transform .55s var(--fx-out) .08s}
.fpg .fpg-faq.faqx details.faqx-pre > :not(summary){transition:none!important}
@starting-style{.fpg .fpg-faq.faqx details[open] > :not(summary){opacity:0;transform:translate3d(0,8px,0)}}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
.fpg .fpg-faq.faqx[data-faqx="css"] details{interpolate-size:allow-keywords}
.fpg .fpg-faq.faqx[data-faqx="css"] details::details-content{block-size:0;overflow:clip;transition:block-size .36s var(--fx-io) .05s,content-visibility .36s allow-discrete .05s}
.fpg .fpg-faq.faqx[data-faqx="css"] details[open]::details-content{block-size:auto;transition:block-size .46s var(--fx-out),content-visibility .46s allow-discrete}
}
@media (hover:hover) and (pointer:fine){
.fpg .fpg-faq.faqx details > summary:hover .faqx-sh{opacity:1}
.fpg .fpg-faq.faqx details > summary:hover .faqx-sh i{transform:translate3d(300%,0,0);transition:transform 1.1s var(--fx-out)}
.fpg .fpg-faq.faqx details > summary:hover .faqx-q{transform:translate3d(2px,0,0)}
.fpg .fpg-faq.faqx details > summary:hover .faqx-ic::after{opacity:1;transform:scale(1)}
.fpg .fpg-faq.faqx details:has(> summary:hover)::after{opacity:.34}
}
.fpg .fpg-faq.faqx.faqx-rv details,.fpg .fpg-faq.faqx.faqx-rv > .fpg-faq-more{opacity:0;transform:translate3d(0,12px,0)}
.fpg .fpg-faq.faqx.faqx-rv.faqx-in details,.fpg .fpg-faq.faqx.faqx-rv.faqx-in > .fpg-faq-more{opacity:1;transform:none;transition:opacity .6s ease calc(var(--fx-i,0) * 65ms + 140ms),transform .8s var(--fx-out) calc(var(--fx-i,0) * 65ms + 140ms)}
@media (max-width:600px){
.fpg .fpg-faq.faqx{--fx-px:16px}
.fpg .fpg-faq.faqx details > summary{gap:14px!important}
.fpg .fpg-faq.faqx details > :not(summary){padding-right:16px!important}
}
@media (prefers-reduced-motion:reduce){
.fpg .fpg-faq.faqx details,.fpg .fpg-faq.faqx details::before,.fpg .fpg-faq.faqx details::after,.fpg .fpg-faq.faqx details > :not(summary),.fpg .fpg-faq.faqx .faqx-q,.fpg .fpg-faq.faqx .faqx-sh,.fpg .fpg-faq.faqx .faqx-sh i,.fpg .fpg-faq.faqx .faqx-ic::after,.fpg .fpg-faq.faqx .faqx-ic i,.fpg .fpg-faq.faqx > .fpg-faq-more{transition:none!important;animation:none!important}
.fpg .fpg-faq.faqx .faqx-sh i{display:none}
.fpg .fpg-faq.faqx[data-faqx="css"] details::details-content{transition:none!important}
.fpg .fpg-faq.faqx details > summary:hover .faqx-q{transform:none}
}
html.faqx-kf .pwr-focus-highlight{opacity:0!important}
/* end:faqx */
/* patch:h1-accent-aa */
.fpg .rph .fpg-h1-accent{--h1-accent-aa:2026-09-30;color:#1C7EC2!important}
/* end:h1-accent-aa */
/* patch:pcr */
.fpg .pcr-sec .pcr-nav{display:flex;gap:10px;flex:none}
.fpg .pcr-sec .pcr-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,opacity .25s}
.fpg .pcr-sec .pcr-nav button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.fpg .pcr-sec .pcr-nav button:disabled{opacity:.3;cursor:default}
.fpg .pcr-sec .pcr-nav svg{width:18px;height:18px}
.fpg .pcr-sec .pcr-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;--g:max(24px,calc((100vw - 1152px)/2));padding:6px var(--g) 18px;scroll-padding-left:var(--g)}
.fpg .pcr-sec .pcr-rail::-webkit-scrollbar{display:none}
.fpg .pcr-sec .pc{flex:0 0 344px;height:548px;scroll-snap-align:start;display:flex;flex-direction:column;padding:12px;border-radius:30px;text-decoration:none;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(124,203,244,.2);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s}
.fpg .pcr-sec .pc:hover{transform:translateY(-6px);border-color:rgba(124,203,244,.5);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.fpg .pcr-sec .pc[hidden]{display:none}
.fpg .pcr-sec .pc-shot{position:relative;height:336px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#0E3170 0%,#002347 100%);border:1px solid rgba(255,255,255,.12)}
.fpg .pcr-sec .pc-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)}
.fpg .pcr-sec .pc-foot{display:flex;flex-direction:column;flex:1;padding:24px 14px 10px}
.fpg .pcr-sec .pc-t{margin:0 0 8px;font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.005em}
.fpg .pcr-sec .pc-s{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.72)}
.fpg .pcr-sec .pc-step{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#7CCBF4}
.fpg .pcr-sec .pc-step i{flex:1;height:1px;background:linear-gradient(90deg,rgba(124,203,244,.6),rgba(124,203,244,.15))}
.fpg .pcr-sec .pc-go{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .3s,border-color .3s,transform .3s}
.fpg .pcr-sec .pc-go svg{width:16px;height:16px}
.fpg .pcr-sec .pc:hover .pc-go{background:#fff;border-color:#fff;color:#002347;transform:translateX(2px)}
.fpg .pcr-sec .pc-ag{background:linear-gradient(180deg,rgba(51,167,230,.22),rgba(51,167,230,.05));border-color:rgba(124,203,244,.45)}
.fpg .pcr-sec .pc-ag .pc-shot{background:linear-gradient(180deg,#0E3170 0%,#002347 100%)}
.fpg .pcr-sec .ui{position:absolute;background:#fff;color:#002347;border-radius:14px;box-shadow:0 18px 40px rgba(0,22,52,.35),0 2px 6px rgba(0,22,52,.18)}
.fpg .pcr-sec .ui-sm{font-size:11px;line-height:1.35}
.fpg .pcr-sec .ck{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;border:1.5px solid #33A7E6;color:#1C7EC2;background:#fff}
.fpg .pcr-sec .ck svg{width:10px;height:10px}
.fpg .pcr-sec .ck.on{background:#1C7EC2;border-color:#1C7EC2;color:#fff}
.fpg .pcr-sec .sg{left:22px;right:22px;top:24px;bottom:-14px;overflow:hidden}
.fpg .pcr-sec .sg-h{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#00264F;color:#fff;font-size:14px;font-weight:500;border-radius:14px 14px 0 0}
.fpg .pcr-sec .sg-h svg{width:16px;height:16px;color:#7CCBF4}
.fpg .pcr-sec .sg .sg-ol{list-style:none;margin:0;padding:14px 16px 0;position:relative}
.fpg .pcr-sec .sg .sg-ol::before{content:"";position:absolute;left:24.5px;top:24px;bottom:12px;width:2px;background:#DCEBFA}
.fpg .pcr-sec .sg .sg-ol::after{content:"";position:absolute;left:24.5px;top:24px;width:2px;height:58%;background:#1C7EC2;transform-origin:top;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.fpg .pcr-sec .pc:hover .sg .sg-ol::after{height:88%}
.fpg .pcr-sec .sg .sg-li{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px;font-weight:500}
.fpg .pcr-sec .sg .sg-li small{display:block;margin:4px 0 0;font-size:10px;font-weight:400;color:#7A8CA3}
.fpg .pcr-sec .sg .chip{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:3px 8px;border-radius:99px;border:1px solid #DCE6F2;font-size:9.5px;font-weight:400;color:#7A8CA3}
.fpg .pcr-sec .sg .chip b{color:#33A7E6;font-weight:500}
.fpg .pcr-sec .sg .sg-li:nth-child(n+4) .ck{transition:background .3s .5s,border-color .3s .5s,color .3s .5s}
.fpg .pcr-sec .pc:hover .sg .sg-li:nth-child(4) .ck,.fpg .pcr-sec .pc:hover .sg .sg-li:nth-child(5) .ck{background:#1C7EC2;border-color:#1C7EC2;color:#fff}
.fpg .pcr-sec .pg-grid{left:16px;top:18px;width:150px;padding:10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 30px rgba(0,22,52,.3)}
.fpg .pcr-sec .pg-grid .pg-lab{margin:0 0 8px 2px;font-size:11.5px;font-weight:500;color:#fff}
.fpg .pcr-sec .pg-grid .pg-ims{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.fpg .pcr-sec .pg-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .3s}
.fpg .pcr-sec .pg-grid img.sel{outline-color:#33A7E6}
.fpg .pcr-sec .pg-cur{position:absolute;left:138px;top:84px;z-index:2;width:22px;height:22px;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fpg .pcr-sec .pc:hover .pg-cur{transform:translate(-6px,-4px)}
.fpg .pcr-sec .pg-card{right:14px;bottom:-12px;width:158px;padding:9px 9px 11px}
.fpg .pcr-sec .pg-card img{width:100%;height:104px;object-fit:cover;object-position:50% 25%;border-radius:9px;display:block}
.fpg .pcr-sec .pg-card h4{margin:9px 2px 7px;font-size:11.5px;font-weight:500}
.fpg .pcr-sec .pg-card dl{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0}
.fpg .pcr-sec .pg-card dl div{padding:5px 7px;border-radius:7px;background:#F2F7FF}
.fpg .pcr-sec .pg-card dt{font-size:8.5px;color:#7A8CA3}
.fpg .pcr-sec .pg-card dd{margin:1px 0 0;font-size:10.5px;font-weight:500}
.fpg .pcr-sec .rp-vid{position:absolute;left:14px;right:14px;top:14px;height:178px;border-radius:14px;overflow:hidden;box-shadow:0 14px 30px rgba(0,22,52,.35)}
.fpg .pcr-sec .rp-vid>.rp-ph{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fpg .pcr-sec .pc:hover .rp-vid>.rp-ph{transform:scale(1.07)}
.fpg .pcr-sec .rp-score{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:99px;background:#E7F7EE;color:#11713F;font-size:10px;font-weight:500}
.fpg .pcr-sec .rp-toast{position:absolute;right:10px;top:10px;width:132px;display:flex;gap:7px;align-items:flex-start;padding:7px 8px;border-radius:10px;background:#fff;font-size:9.5px;line-height:1.3;color:#002347;box-shadow:0 8px 18px rgba(0,22,52,.25);opacity:.92;transform:translateY(0);transition:transform .5s,opacity .5s}
.fpg .pcr-sec .rp-toast span{width:16px;height:16px;flex:none;border-radius:50%;background:#FFF1D6;display:grid;place-items:center;font-size:10px}
.fpg .pcr-sec .rp-pip{position:absolute;right:10px;bottom:10px;width:54px;height:62px;border-radius:9px;object-fit:cover;object-position:50% 20%;border:2px solid rgba(255,255,255,.85)}
.fpg .pcr-sec .rp-rec{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;background:rgba(0,22,52,.55);color:#fff;font-size:9.5px}
.fpg .pcr-sec .rp-rec b{width:6px;height:6px;border-radius:50%;background:#FF5A5A;animation:pcr-rec 1.6s infinite}
@keyframes pcr-rec{50%{opacity:.25}}
.fpg .pcr-sec .rp-ins{position:absolute;left:14px;right:14px;bottom:-12px;top:204px;padding:12px;border-radius:14px;background:#0A2D55;border:1px solid rgba(255,255,255,.14)}
.fpg .pcr-sec .rp-tabs{display:flex;gap:6px;margin-bottom:9px}
.fpg .pcr-sec .rp-tabs span{padding:4px 10px;border-radius:99px;font-size:10px;color:#fff;border:1px solid rgba(255,255,255,.35)}
.fpg .pcr-sec .rp-tabs span:first-child{background:#fff;color:#1C7EC2;border-color:#fff}
.fpg .pcr-sec .rp-row{display:flex;align-items:center;gap:7px;padding:6px 8px;margin-bottom:5px;border-radius:8px;font-size:10px;color:rgba(255,255,255,.88);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:border-color .4s,background .4s}
.fpg .pcr-sec .rp-row .ck{width:14px;height:14px;border-color:rgba(255,255,255,.55);background:transparent;color:#fff}
.fpg .pcr-sec .rp-row.on{border-color:#3FBF7F;background:rgba(63,191,127,.12)}
.fpg .pcr-sec .rp-row.on .ck{background:#3FBF7F;border-color:#3FBF7F}
.fpg .pcr-sec .pc:hover .rp-row:nth-child(3){border-color:#3FBF7F;background:rgba(63,191,127,.12);transition-delay:.35s}
.fpg .pcr-sec .pc:hover .rp-row:nth-child(3) .ck{background:#3FBF7F;border-color:#3FBF7F;transition:background .3s .35s}
.fpg .pcr-sec .mm{left:18px;right:18px;top:20px;bottom:-14px;padding:14px}
.fpg .pcr-sec .mm-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;font-weight:500}
.fpg .pcr-sec .mm-h span{font-size:9.5px;font-weight:400;color:#7A8CA3}
.fpg .pcr-sec .mm-ch{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #EEF3F9}
.fpg .pcr-sec .mm-ch>b{font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#1C7EC2}
.fpg .pcr-sec .mm-tx{font-size:10.5px;line-height:1.4;color:#4A5D73}
.fpg .pcr-sec .mm-tx mark{background:#E4F2FC;color:#00468E;border-radius:3px;padding:0 2px}
.fpg .pcr-sec .mm-wave{display:flex;align-items:center;gap:2.5px;height:30px}
.fpg .pcr-sec .mm-wave i{flex:1;border-radius:2px;background:#7CCBF4;height:var(--h);transform-origin:center;animation:pcr-wv 1.6s ease-in-out infinite;animation-play-state:paused;animation-delay:var(--d)}
.fpg .pcr-sec .mm-wave i.hi{background:#1C7EC2}
.fpg .pcr-sec .pc:hover .mm-wave i{animation-play-state:running}
@keyframes pcr-wv{50%{transform:scaleY(.45)}}
.fpg .pcr-sec .mm-face{display:flex;align-items:center;gap:10px}
.fpg .pcr-sec .mm-face figure{position:relative;margin:0;width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none}
.fpg .pcr-sec .mm-face img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.fpg .pcr-sec .mm-face svg{position:absolute;inset:0}
.fpg .pcr-sec .mm-tags{display:flex;flex-wrap:wrap;gap:4px}
.fpg .pcr-sec .mm-tags span{padding:3px 7px;border-radius:99px;background:#F2F7FF;font-size:9.5px;color:#00468E}
.fpg .pcr-sec .mm-wc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;padding-top:9px;border-top:1px solid #EEF3F9}
.fpg .pcr-sec .mm-wc div{font-size:9.5px;color:#7A8CA3}
.fpg .pcr-sec .mm-wc div b{float:right;color:#002347;font-weight:500}
.fpg .pcr-sec .mm-bar{height:5px;margin-top:5px;border-radius:9px;background:#EEF3F9;overflow:hidden}
.fpg .pcr-sec .mm-bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#33A7E6,#1C7EC2);transform:scaleX(.55);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.fpg .pcr-sec .pc:hover .mm-bar i{transform:scaleX(1)}
.fpg .pcr-sec .gc{left:22px;right:22px;top:22px;bottom:-14px;overflow:hidden}
.fpg .pcr-sec .gc-tabs{display:flex;padding:0 16px;border-bottom:1px solid #EEF3F9}
.fpg .pcr-sec .gc-tabs span{flex:1;text-align:center;padding:12px 0 10px;font-size:10px;font-weight:500;letter-spacing:.08em;color:#7A8CA3}
.fpg .pcr-sec .gc-tabs span:first-child{color:#1C7EC2;box-shadow:inset 0 -2px 0 #1C7EC2}
.fpg .pcr-sec .gc-b{padding:10px 14px}
.fpg .pcr-sec .gc-who{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:12px;font-weight:500}
.fpg .pcr-sec .orb{width:28px;height:28px;flex:none;border-radius:50%;background:#0E3170;display:grid;place-items:center}
.fpg .pcr-sec .orb svg{width:19px;height:auto;display:block;fill:#33A7E6}
.fpg .pcr-sec .gc-msg{padding:9px 10px;border-radius:10px;background:#F2F7FF;font-size:10.5px;line-height:1.45;color:#2A3F57}
.fpg .pcr-sec .gc-msg ul{margin:6px 0 0;padding:0 0 0 13px}
.fpg .pcr-sec .gc-msg li{margin:0 0 3px}
.fpg .pcr-sec .gc-msg b{font-weight:500;color:#002347}
.fpg .pcr-sec .gc-try{margin-top:8px;padding:9px 10px;border-radius:10px;border:1px solid #BFE3F7;background:#fff;font-size:10.5px;line-height:1.4;color:#002347;transform:translateY(10px);opacity:.55;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.fpg .pcr-sec .gc-try small{display:block;margin-bottom:3px;font-size:8.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#1C7EC2}
.fpg .pcr-sec .pc:hover .gc-try{transform:none;opacity:1}
.fpg .pcr-sec .an1{left:16px;top:20px;width:190px;height:200px;padding:11px}
.fpg .pcr-sec .an2{right:16px;top:20px;width:112px;height:200px;padding:11px}
.fpg .pcr-sec .an3{left:16px;right:16px;top:232px;bottom:-14px;padding:11px}
.fpg .pcr-sec .an-t{margin:0 0 2px;font-size:10.5px;font-weight:500}
.fpg .pcr-sec .an-st{margin:0 0 8px;font-size:8.5px;color:#7A8CA3}
.fpg .pcr-sec .an-bars{display:flex;align-items:flex-end;gap:7px;height:128px;padding-bottom:2px;border-bottom:1px solid #EEF3F9}
.fpg .pcr-sec .an-bars i{flex:1;display:flex;flex-direction:column-reverse;height:100%}
.fpg .pcr-sec .an-bars b{display:block;width:100%;border-radius:3px 3px 0 0;transform:scaleY(.4);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fpg .pcr-sec .an-bars b:first-child{background:#00468E;height:var(--a)}
.fpg .pcr-sec .an-bars b:last-child{background:#9BD4F5;height:var(--b);border-radius:3px 3px 0 0}
.fpg .pcr-sec .an-bars b:first-child{border-radius:0}
.fpg .pcr-sec .pc:hover .an-bars b{transform:scaleY(1)}
.fpg .pcr-sec .an-bars i:nth-child(2) b{transition-delay:.05s}
.fpg .pcr-sec .an-bars i:nth-child(3) b{transition-delay:.1s}
.fpg .pcr-sec .an-bars i:nth-child(4) b{transition-delay:.15s}
.fpg .pcr-sec .an-bars i:nth-child(5) b{transition-delay:.2s}
.fpg .pcr-sec .an-bars i:nth-child(6) b{transition-delay:.25s}
.fpg .pcr-sec .an-bars i:nth-child(7) b{transition-delay:.3s}
.fpg .pcr-sec .an-big{margin:6px 0 2px;font-size:26px;font-weight:500;color:#00468E}
.fpg .pcr-sec .an-big+div{margin:0;font-size:8.5px;color:#7A8CA3}
.fpg .pcr-sec .an-line path{stroke-dasharray:400;stroke-dashoffset:240;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)}
.fpg .pcr-sec .pc:hover .an-line path{stroke-dashoffset:0}
.fpg .pcr-sec .ag-q{position:absolute;right:18px;top:26px;max-width:220px;padding:10px 12px;border-radius:14px 14px 4px 14px;background:#fff;color:#002347;font-size:11.5px;line-height:1.4;box-shadow:0 12px 26px rgba(0,22,52,.3)}
.fpg .pcr-sec .ag-a{left:18px;right:18px;top:104px;bottom:-14px;padding:14px}
.fpg .pcr-sec .ag-who{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:500}
.fpg .pcr-sec .ag-who small{font-weight:400;color:#7A8CA3}
.fpg .pcr-sec .ag-li{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #EEF3F9;font-size:11px}
.fpg .pcr-sec .ag-li>span:not(.ck){flex:1}
.fpg .pcr-sec .ag-li em{font-style:normal;font-size:9.5px;color:#7A8CA3}
.fpg .pcr-sec .ag-li .ck{width:16px;height:16px}
.fpg .pcr-sec .ag-li .ck.ld{border-color:#DCEBFA;border-top-color:#1C7EC2;animation:none}
@keyframes pcr-spin{to{transform:rotate(360deg)}}
.fpg .pcr-sec .ag-glow{position:absolute;left:50%;top:-30%;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,rgba(124,203,244,.55),rgba(124,203,244,0) 65%);filter:blur(6px);transition:transform 1s}
.fpg .pcr-sec .pc:hover .ag-glow{transform:scale(1.15)}
.fpg .pcr-sec .ag-ok{display:flex;gap:8px;margin-top:12px}
.fpg .pcr-sec .ag-ok span{flex:1;text-align:center;padding:8px 0;border-radius:9px;font-size:11px;font-weight:500;border:1px solid #DCE6F2;color:#00468E}
.fpg .pcr-sec .ag-ok span:nth-child(2){background:#00468E;border-color:#00468E;color:#fff}
.fpg .pcr-sec .pg-new{position:absolute;left:16px;top:212px;width:116px;padding:10px;border-radius:14px;border:1px dashed rgba(255,255,255,.45);color:#fff;font-size:11px;line-height:1.35}
.fpg .pcr-sec .pg-new b{display:block;font-size:18px;font-weight:400;color:#7CCBF4;margin-bottom:2px}
.fpg .pcr-sec .mm-mo{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 9px;border-radius:9px;border:1px solid #BFE3F7;font-size:10px;line-height:1.35;color:#2A3F57}
.fpg .pcr-sec .mm-mo b{flex:none;padding:2px 6px;border-radius:5px;background:#E4F2FC;color:#00468E;font-weight:500}
@media (max-width:780px){.fpg .pcr-sec .pcr-nav{display:none}
.fpg .pcr-sec .pcr-rail{gap:14px;--g:16px}
.fpg .pcr-sec .pc{flex-basis:300px;height:512px}
.fpg .pcr-sec .pc-shot{height:312px}
.fpg .pcr-sec .pc-t{font-size:22px}}
.fpg .fpg-sec.fpg-sec-white.pcr-sec{background:radial-gradient(70% 60% at 6% 0%,rgba(28,126,194,.42),rgba(28,126,194,0) 70%),radial-gradient(50% 55% at 100% 35%,rgba(12,72,140,.32),rgba(12,72,140,0) 72%)!important;padding:88px 0 40px!important;overflow:clip!important}
.fpg .pcr-sec .pcr-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 36px}
.fpg .pcr-sec .pcr-top h2{margin:0!important;color:#fff!important;font-size:34.56px!important;font-weight:600!important;line-height:1.18!important}
@media (max-width:1100px){.fpg .pcr-sec .pcr-top h2{font-size:27px!important}}
.fpg .pcr-sec .pcr-top h2 em{font-style:normal;color:#7CCBF4}
.fpg .pcr-sec .pcr-rail{padding:6px calc(50vw - 50%) 18px 0;margin:0 calc(50% - 50vw) 0 0;scroll-padding-left:0}
.fpg .pcr-sec .pc-t,.fpg .pcr-sec .pc-s{display:block}
.fpg .pcr-sec .pc-t{color:#fff}
.fpg .pcr-sec img{max-width:none}
@media (max-width:780px){.fpg .fpg-sec.fpg-sec-white.pcr-sec{padding:64px 0 60px!important}.fpg .pcr-sec .pcr-nav{display:none}.fpg .pcr-sec .pcr-top{margin-bottom:24px}.fpg .pcr-sec .pcr-rail{gap:14px}.fpg .pcr-sec .ag-ok{display:none}}
.fpg .pcr-sec .pg-cur{transform:translate(-46px,52px)!important;transition:transform .7s cubic-bezier(.2,.7,.2,1)!important}
.fpg .pcr-sec .pc:hover .pg-cur{transform:translate(0,0)!important;animation:pcr-click .35s .72s ease-out}
@keyframes pcr-click{50%{scale:.82}}
.fpg .pcr-sec .pg-grid img.sel{outline-color:transparent;transition:outline-color .25s .8s}
.fpg .pcr-sec .pc:hover .pg-grid img.sel{outline-color:#33A7E6}
.fpg .pcr-sec .pg-card{transform:translateY(18px);transition:transform .7s .85s cubic-bezier(.2,.7,.2,1),box-shadow .7s .85s}
.fpg .pcr-sec .pc:hover .pg-card{transform:none;box-shadow:0 24px 50px rgba(0,22,52,.5),0 2px 6px rgba(0,22,52,.18)}
.fpg .pcr-sec .an1{width:168px!important}
.fpg .pcr-sec .an-bars b{transform:none!important}
.fpg .pcr-sec .an-bars i{transform-origin:50% 100%}
.fpg .pcr-sec .pc:hover .an-bars i{animation:pcr-grow .9s cubic-bezier(.2,.7,.2,1) both}
.fpg .pcr-sec .pc:hover .an-bars i:nth-child(2){animation-delay:.06s}
.fpg .pcr-sec .pc:hover .an-bars i:nth-child(3){animation-delay:.12s}
.fpg .pcr-sec .pc:hover .an-bars i:nth-child(4){animation-delay:.18s}
.fpg .pcr-sec .pc:hover .an-bars i:nth-child(5){animation-delay:.24s}
.fpg .pcr-sec .pc:hover .an-bars i:nth-child(6){animation-delay:.3s}
.fpg .pcr-sec .pc:hover .an-bars i:nth-child(7){animation-delay:.36s}
.fpg .pcr-sec .an-line path{stroke-dashoffset:0}
.fpg .pcr-sec .pc:hover .an-line path{animation:pcr-draw 1.3s .2s cubic-bezier(.2,.7,.2,1) both}
.fpg .pcr-sec .pc:hover .an-big{animation:pcr-in .6s .1s both}
.fpg .pcr-sec .pc:hover .ag-q{animation:pcr-in .5s both}
.fpg .pcr-sec .pc:hover .ag-li{animation:pcr-in .45s both}
.fpg .pcr-sec .pc:hover .ag-li:nth-of-type(2){animation-delay:.15s}
.fpg .pcr-sec .pc:hover .ag-li:nth-of-type(3){animation-delay:.3s}
.fpg .pcr-sec .pc:hover .ag-li:nth-of-type(4){animation-delay:.45s}
.fpg .pcr-sec .pc:hover .ag-li:nth-of-type(5){animation-delay:.6s}
.fpg .pcr-sec .ck.ld svg{opacity:0;transition:opacity .3s}
.fpg .pcr-sec .pc:hover .ck.ld{animation:pcr-spin .55s linear 2!important;background:#1C7EC2!important;border-color:#1C7EC2!important;color:#fff!important;transition:background .3s 1.1s,border-color .3s 1.1s}
.fpg .pcr-sec .pc:hover .ck.ld svg{opacity:1;transition-delay:1.1s}
.fpg .pcr-sec .pc:hover .ag-who .ag-d{color:#1B8A3F}
@keyframes pcr-grow{from{transform:scaleY(.1)}to{transform:none}}
@keyframes pcr-draw{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
@keyframes pcr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pcr-pulse{0%{box-shadow:0 0 0 0 rgba(51,167,230,.65)}100%{box-shadow:0 0 0 14px rgba(51,167,230,0)}}
.fpg .pcr-sec .ag-who .ag-d{display:none}
.fpg .pcr-sec .pc:hover .ag-who .ag-w{animation:pcr-out 0s 1.1s forwards}
.fpg .pcr-sec .pc:hover .ag-who .ag-d{display:inline;opacity:0;animation:pcr-show .3s 1.1s forwards}
@keyframes pcr-out{to{display:none;opacity:0}}
@keyframes pcr-show{to{opacity:1}}
.fpg .pcr-sec .ag-ok{position:relative}
.fpg .pcr-sec .ag-done{position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 11px;border-radius:9px;background:#E7F7EE;border:1px solid #9FDDB7;opacity:0;pointer-events:none}
.fpg .pcr-sec .ag-done i{width:20px;height:20px;flex:none;border-radius:50%;background:#1B8A3F;color:#fff;display:grid;place-items:center}
.fpg .pcr-sec .ag-done i svg{width:11px;height:11px}
.fpg .pcr-sec .ag-done b{display:block;font-size:11.5px;font-weight:600;line-height:1.2;color:#11713F}
.fpg .pcr-sec .ag-done em{display:block;font-style:normal;font-size:9.5px;line-height:1.3;color:#3C6E52}
.fpg .pcr-sec .pc:hover .ag-ok>span:first-child{animation:pcr-fade .3s 2.1s forwards}
.fpg .pcr-sec .pc:hover .ag-ok>span:nth-child(2){animation:pcr-pulse 1.1s 1.4s ease-out,pcr-fade .3s 2.1s forwards}
.fpg .pcr-sec .pc:hover .ag-done{animation:pcr-in .45s 2.25s both}
@keyframes pcr-fade{to{opacity:0}}
.fpg .pcr-sec .gc-pts{margin:6px 0 0}
.fpg .pcr-sec .gc-pt{position:relative;padding:0 0 0 14px;margin:0 0 4px}
.fpg .pcr-sec .gc-pt::before{content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%;background:#1C7EC2}
.fpg .pcr-sec .gc-pt b{background:linear-gradient(#DCEBFA,#DCEBFA) no-repeat 0 100%/100% 100%;border-radius:3px;padding:0 2px}
.fpg .pcr-sec .pc:hover .gc-pt{animation:pcr-in .45s both}
.fpg .pcr-sec .pc:hover .gc-pt:nth-child(2){animation-delay:.25s}
.fpg .pcr-sec .pc:hover .gc-pt:nth-child(3){animation-delay:.5s}
.fpg .pcr-sec .pc:hover .gc-pt b{animation:pcr-mark .6s both}
.fpg .pcr-sec .pc:hover .gc-pt:nth-child(1) b{animation-delay:.3s}
.fpg .pcr-sec .pc:hover .gc-pt:nth-child(2) b{animation-delay:.55s}
.fpg .pcr-sec .pc:hover .gc-pt:nth-child(3) b{animation-delay:.8s}
.fpg .pcr-sec .gc-try{transform:none!important;opacity:1!important}
.fpg .pcr-sec .pc:hover .gc-try{animation:pcr-in .5s 1s both,pcr-pulse 1.1s 1.5s ease-out}
.fpg .pcr-sec .gc-go{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:4px 9px;border-radius:99px;background:#00468E;color:#fff;font-size:9.5px;font-weight:500;opacity:0}
.fpg .pcr-sec .pc:hover .gc-go{animation:pcr-show .3s 1.5s forwards}
@keyframes pcr-mark{from{background-size:0% 100%}to{background-size:100% 100%}}
.fpg .pcr-sec .pg-grid{left:20px!important;top:20px!important;width:132px!important;padding:9px!important}
.fpg .pcr-sec .pg-grid .pg-lab{font-size:10.5px!important;white-space:nowrap;margin:0 0 7px 1px!important}
.fpg .pcr-sec .pg-grid .pg-ims{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
.fpg .pcr-sec .pg-cur{left:100px!important;top:62px!important}
.fpg .pcr-sec .pg-new{left:20px!important;top:186px!important;width:132px!important}
.fpg .pcr-sec .pg-card{right:16px!important;width:146px!important}
.fpg .pcr-sec .pg-grid{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.fpg .fpg .pcr-sec .pcr-nav{display:flex!important}
.fpg .fpg .pcr-sec .pcr-nav button{color:#fff!important;width:48px!important;height:48px!important;background:rgba(255,255,255,.06)!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.28)!important;display:grid!important}
.fpg .fpg .pcr-sec .pcr-nav button:hover{background:rgba(255,255,255,.14)!important}
.fpg .fpg .pcr-sec .pcr-nav svg{width:18px!important;height:18px!important}
.fpg .fpg .pcr-sec .pcr-rail{padding:6px var(--g) 18px!important;display:flex!important}
.fpg .fpg .pcr-sec .pcr-rail::-webkit-scrollbar{display:none!important}
.fpg .fpg .pcr-sec .pc{color:#fff!important;text-decoration:none!important;height:548px!important;padding:12px!important;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025))!important;border-radius:30px!important;border:1px solid rgba(124,203,244,.2)!important;display:flex!important}
.fpg .fpg .pcr-sec .pc:hover{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important}
.fpg .fpg .pcr-sec .pc[hidden]{display:none!important}
.fpg .fpg .pcr-sec .pc-shot{height:336px!important;background:linear-gradient(180deg,#0E3170 0%,#002347 100%)!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.12)!important;position:relative!important;overflow:hidden!important}
.fpg .fpg .pcr-sec .pc-shot::after{background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)!important;position:absolute!important;inset:0!important;content:""!important}
.fpg .fpg .pcr-sec .pc-foot{padding:24px 14px 10px!important;display:flex!important}
.fpg .fpg .pcr-sec .pc-t{font-size:25px!important;line-height:1.2!important;letter-spacing:-.005em!important;font-weight:500!important;margin:0 0 8px!important}
.fpg .fpg .pcr-sec .pc-s{font-size:15px!important;line-height:1.45!important;color:rgba(255,255,255,.72)!important;margin:0!important}
.fpg .fpg .pcr-sec .pc-step{font-size:13px!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:500!important;color:#7CCBF4!important;margin-top:auto!important;display:flex!important}
.fpg .fpg .pcr-sec .pc-step i{height:1px!important;background:linear-gradient(90deg,rgba(124,203,244,.6),rgba(124,203,244,.15))!important}
.fpg .fpg .pcr-sec .pc-go{color:#fff!important;width:38px!important;height:38px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.3)!important;display:grid!important}
.fpg .fpg .pcr-sec .pc-go svg{width:16px!important;height:16px!important}
.fpg .fpg .pcr-sec .pc:hover .pc-go{color:#002347!important;background:#fff!important}
.fpg .fpg .pcr-sec .pc-ag{background:linear-gradient(180deg,rgba(51,167,230,.22),rgba(51,167,230,.05))!important}
.fpg .fpg .pcr-sec .pc-ag .pc-shot{background:linear-gradient(180deg,#0E3170 0%,#002347 100%)!important}
.fpg .fpg .pcr-sec .ui{color:#002347!important;background:#fff!important;border-radius:14px!important;box-shadow:0 18px 40px rgba(0,22,52,.35),0 2px 6px rgba(0,22,52,.18)!important;position:absolute!important}
.fpg .fpg .pcr-sec .ui-sm{font-size:11px!important;line-height:1.35!important}
.fpg .fpg .pcr-sec .ck{color:#1C7EC2!important;width:18px!important;height:18px!important;background:#fff!important;border-radius:50%!important;border:1.5px solid #33A7E6!important;display:grid!important}
.fpg .fpg .pcr-sec .ck svg{width:10px!important;height:10px!important}
.fpg .fpg .pcr-sec .ck.on{color:#fff!important;background:#1C7EC2!important}
.fpg .fpg .pcr-sec .sg{left:22px!important;top:24px!important;right:22px!important;bottom:-14px!important;overflow:hidden!important}
.fpg .fpg .pcr-sec .sg-h{font-size:14px!important;font-weight:500!important;color:#fff!important;padding:13px 16px!important;background:#00264F!important;border-radius:14px 14px 0 0!important;display:flex!important}
.fpg .fpg .pcr-sec .sg-h svg{color:#7CCBF4!important;width:16px!important;height:16px!important}
.fpg .fpg .pcr-sec .sg .sg-ol{margin:0!important;padding:14px 16px 0!important;list-style:none!important;position:relative!important}
.fpg .fpg .pcr-sec .sg .sg-ol::before{width:2px!important;background:#DCEBFA!important;position:absolute!important;left:24.5px!important;top:24px!important;bottom:12px!important;content:""!important}
.fpg .fpg .pcr-sec .sg .sg-ol::after{width:2px!important;height:58%!important;background:#1C7EC2!important;position:absolute!important;left:24.5px!important;top:24px!important;content:""!important}
.fpg .fpg .pcr-sec .pc:hover .sg .sg-ol::after{height:88%!important}
.fpg .fpg .pcr-sec .sg .sg-li{font-size:12.5px!important;font-weight:500!important;padding:7px 0!important;position:relative!important;z-index:1!important;display:flex!important}
.fpg .fpg .pcr-sec .sg .sg-li small{font-size:10px!important;font-weight:400!important;color:#7A8CA3!important;margin:4px 0 0!important;display:block!important}
.fpg .fpg .pcr-sec .sg .chip{font-size:9.5px!important;font-weight:400!important;color:#7A8CA3!important;margin-top:5px!important;padding:3px 8px!important;border-radius:99px!important;border:1px solid #DCE6F2!important;display:inline-flex!important}
.fpg .fpg .pcr-sec .sg .chip b{font-weight:500!important;color:#33A7E6!important}
.fpg .fpg .pcr-sec .pc:hover .sg .sg-li:nth-child(4) .ck,.fpg .fpg .pcr-sec .pc:hover .sg .sg-li:nth-child(5) .ck{color:#fff!important;background:#1C7EC2!important}
.fpg .fpg .pcr-sec .pg-grid{width:150px!important;padding:10px!important;background:rgba(255,255,255,.18)!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 14px 30px rgba(0,22,52,.3)!important;left:16px!important;top:18px!important}
.fpg .fpg .pcr-sec .pg-grid .pg-lab{font-size:11.5px!important;font-weight:500!important;color:#fff!important;margin:0 0 8px 2px!important}
.fpg .fpg .pcr-sec .pg-grid .pg-ims{display:grid!important}
.fpg .fpg .pcr-sec .pg-grid img{width:100%!important;border-radius:8px!important;display:block!important;aspect-ratio:1!important}
.fpg .fpg .pcr-sec .pg-cur{width:22px!important;height:22px!important;position:absolute!important;left:138px!important;top:84px!important;z-index:2!important}
.fpg .fpg .pcr-sec .pg-card{width:158px!important;padding:9px 9px 11px!important;right:14px!important;bottom:-12px!important}
.fpg .fpg .pcr-sec .pg-card img{width:100%!important;height:104px!important;border-radius:9px!important;display:block!important}
.fpg .fpg .pcr-sec .pg-card h4{font-size:11.5px!important;font-weight:500!important;margin:9px 2px 7px!important}
.fpg .fpg .pcr-sec .pg-card dl{margin:0!important;display:grid!important}
.fpg .fpg .pcr-sec .pg-card dl div{padding:5px 7px!important;background:#F2F7FF!important;border-radius:7px!important}
.fpg .fpg .pcr-sec .pg-card dt{font-size:8.5px!important;color:#7A8CA3!important}
.fpg .fpg .pcr-sec .pg-card dd{font-size:10.5px!important;font-weight:500!important;margin:1px 0 0!important}
.fpg .fpg .pcr-sec .rp-vid{height:178px!important;border-radius:14px!important;box-shadow:0 14px 30px rgba(0,22,52,.35)!important;position:absolute!important;left:14px!important;top:14px!important;right:14px!important;overflow:hidden!important}
.fpg .fpg .pcr-sec .rp-vid>.rp-ph{width:100%!important;height:100%!important;display:block!important}
.fpg .fpg .pcr-sec .rp-score{font-size:10px!important;font-weight:500!important;color:#11713F!important;padding:4px 9px!important;background:#E7F7EE!important;border-radius:99px!important;position:absolute!important;left:10px!important;top:10px!important}
.fpg .fpg .pcr-sec .rp-toast{font-size:9.5px!important;line-height:1.3!important;color:#002347!important;width:132px!important;padding:7px 8px!important;background:#fff!important;border-radius:10px!important;box-shadow:0 8px 18px rgba(0,22,52,.25)!important;position:absolute!important;top:10px!important;right:10px!important;display:flex!important}
.fpg .fpg .pcr-sec .rp-toast span{font-size:10px!important;width:16px!important;height:16px!important;background:#FFF1D6!important;border-radius:50%!important;display:grid!important}
.fpg .fpg .pcr-sec .rp-pip{width:54px!important;height:62px!important;border-radius:9px!important;border:2px solid rgba(255,255,255,.85)!important;position:absolute!important;right:10px!important;bottom:10px!important}
.fpg .fpg .pcr-sec .rp-rec{font-size:9.5px!important;color:#fff!important;padding:3px 8px!important;background:rgba(0,22,52,.55)!important;border-radius:99px!important;position:absolute!important;left:10px!important;bottom:10px!important;display:flex!important}
.fpg .fpg .pcr-sec .rp-rec b{width:6px!important;height:6px!important;background:#FF5A5A!important;border-radius:50%!important}
.fpg .fpg .pcr-sec .rp-ins{padding:12px!important;background:#0A2D55!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.14)!important;position:absolute!important;left:14px!important;top:204px!important;right:14px!important;bottom:-12px!important}
.fpg .fpg .pcr-sec .rp-tabs{margin-bottom:9px!important;display:flex!important}
.fpg .fpg .pcr-sec .rp-tabs span{font-size:10px!important;color:#fff!important;padding:4px 10px!important;border-radius:99px!important;border:1px solid rgba(255,255,255,.35)!important}
.fpg .fpg .pcr-sec .rp-tabs span:first-child{color:#1C7EC2!important;background:#fff!important}
.fpg .fpg .pcr-sec .rp-row{font-size:10px!important;color:rgba(255,255,255,.88)!important;margin-bottom:5px!important;padding:6px 8px!important;background:rgba(255,255,255,.06)!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.1)!important;display:flex!important}
.fpg .fpg .pcr-sec .rp-row .ck{color:#fff!important;width:14px!important;height:14px!important;background:transparent!important}
.fpg .fpg .pcr-sec .rp-row.on{background:rgba(63,191,127,.12)!important}
.fpg .fpg .pcr-sec .rp-row.on .ck{background:#3FBF7F!important}
.fpg .fpg .pcr-sec .pc:hover .rp-row:nth-child(3){background:rgba(63,191,127,.12)!important}
.fpg .fpg .pcr-sec .pc:hover .rp-row:nth-child(3) .ck{background:#3FBF7F!important}
.fpg .fpg .pcr-sec .mm{padding:14px!important;left:18px!important;top:20px!important;right:18px!important;bottom:-14px!important}
.fpg .fpg .pcr-sec .mm-h{font-size:12px!important;font-weight:500!important;margin-bottom:10px!important;display:flex!important}
.fpg .fpg .pcr-sec .mm-h span{font-size:9.5px!important;font-weight:400!important;color:#7A8CA3!important}
.fpg .fpg .pcr-sec .mm-ch{padding:8px 0!important;display:grid!important}
.fpg .fpg .pcr-sec .mm-ch>b{font-size:9.5px!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:500!important;color:#1C7EC2!important}
.fpg .fpg .pcr-sec .mm-tx{font-size:10.5px!important;line-height:1.4!important;color:#4A5D73!important}
.fpg .fpg .pcr-sec .mm-tx mark{color:#00468E!important;padding:0 2px!important;background:#E4F2FC!important;border-radius:3px!important}
.fpg .fpg .pcr-sec .mm-wave{height:30px!important;display:flex!important}
.fpg .fpg .pcr-sec .mm-wave i{height:var(--h)!important;background:#7CCBF4!important;border-radius:2px!important}
.fpg .fpg .pcr-sec .mm-wave i.hi{background:#1C7EC2!important}
.fpg .fpg .pcr-sec .mm-face{display:flex!important}
.fpg .fpg .pcr-sec .mm-face figure{margin:0!important;width:46px!important;height:46px!important;border-radius:10px!important;position:relative!important;overflow:hidden!important}
.fpg .fpg .pcr-sec .mm-face img{width:100%!important;height:100%!important}
.fpg .fpg .pcr-sec .mm-face svg{position:absolute!important;inset:0!important}
.fpg .fpg .pcr-sec .mm-tags{display:flex!important}
.fpg .fpg .pcr-sec .mm-tags span{font-size:9.5px!important;color:#00468E!important;padding:3px 7px!important;background:#F2F7FF!important;border-radius:99px!important}
.fpg .fpg .pcr-sec .mm-wc{margin-top:6px!important;display:grid!important}
.fpg .fpg .pcr-sec .mm-wc div{font-size:9.5px!important;color:#7A8CA3!important}
.fpg .fpg .pcr-sec .mm-wc div b{font-weight:500!important;color:#002347!important}
.fpg .fpg .pcr-sec .mm-bar{margin-top:5px!important;height:5px!important;background:#EEF3F9!important;border-radius:9px!important;overflow:hidden!important}
.fpg .fpg .pcr-sec .mm-bar i{width:var(--w)!important;height:100%!important;background:linear-gradient(90deg,#33A7E6,#1C7EC2)!important;border-radius:9px!important;display:block!important}
.fpg .fpg .pcr-sec .gc{left:22px!important;top:22px!important;right:22px!important;bottom:-14px!important;overflow:hidden!important}
.fpg .fpg .pcr-sec .gc-tabs{padding:0 16px!important;display:flex!important}
.fpg .fpg .pcr-sec .gc-tabs span{font-size:10px!important;letter-spacing:.08em!important;text-align:center!important;font-weight:500!important;color:#7A8CA3!important;padding:12px 0 10px!important}
.fpg .fpg .pcr-sec .gc-tabs span:first-child{color:#1C7EC2!important;box-shadow:inset 0 -2px 0 #1C7EC2!important}
.fpg .fpg .pcr-sec .gc-b{padding:10px 14px!important}
.fpg .fpg .pcr-sec .gc-who{font-size:12px!important;font-weight:500!important;margin-bottom:8px!important;display:flex!important}
.fpg .fpg .pcr-sec .orb{width:28px!important;height:28px!important;background:#0E3170!important;border-radius:50%!important;display:grid!important}
.fpg .fpg .pcr-sec .orb svg{width:19px!important;height:auto!important;display:block!important}
.fpg .fpg .pcr-sec .gc-msg{font-size:10.5px!important;line-height:1.45!important;color:#2A3F57!important;padding:9px 10px!important;background:#F2F7FF!important;border-radius:10px!important}
.fpg .fpg .pcr-sec .gc-msg ul{margin:6px 0 0!important;padding:0 0 0 13px!important}
.fpg .fpg .pcr-sec .gc-msg li{margin:0 0 3px!important}
.fpg .fpg .pcr-sec .gc-msg b{font-weight:500!important;color:#002347!important}
.fpg .fpg .pcr-sec .gc-try{font-size:10.5px!important;line-height:1.4!important;color:#002347!important;margin-top:8px!important;padding:9px 10px!important;background:#fff!important;border-radius:10px!important;border:1px solid #BFE3F7!important}
.fpg .fpg .pcr-sec .gc-try small{font-size:8.5px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:500!important;color:#1C7EC2!important;margin-bottom:3px!important;display:block!important}
.fpg .fpg .pcr-sec .an1{width:190px!important;height:200px!important;padding:11px!important;left:16px!important;top:20px!important}
.fpg .fpg .pcr-sec .an2{width:112px!important;height:200px!important;padding:11px!important;top:20px!important;right:16px!important}
.fpg .fpg .pcr-sec .an3{padding:11px!important;left:16px!important;top:232px!important;right:16px!important;bottom:-14px!important}
.fpg .fpg .pcr-sec .an-t{font-size:10.5px!important;font-weight:500!important;margin:0 0 2px!important}
.fpg .fpg .pcr-sec .an-st{font-size:8.5px!important;color:#7A8CA3!important;margin:0 0 8px!important}
.fpg .fpg .pcr-sec .an-bars{height:128px!important;display:flex!important}
.fpg .fpg .pcr-sec .an-bars i{height:100%!important;display:flex!important}
.fpg .fpg .pcr-sec .an-bars b{width:100%!important;border-radius:3px 3px 0 0!important;display:block!important}
.fpg .fpg .pcr-sec .an-bars b:first-child{height:var(--a)!important;background:#00468E!important}
.fpg .fpg .pcr-sec .an-bars b:last-child{height:var(--b)!important;background:#9BD4F5!important;border-radius:3px 3px 0 0!important}
.fpg .fpg .pcr-sec .an-bars b:first-child{border-radius:0!important}
.fpg .fpg .pcr-sec .an-big{font-size:26px!important;font-weight:500!important;color:#00468E!important;margin:6px 0 2px!important}
.fpg .fpg .pcr-sec .an-big+div{font-size:8.5px!important;color:#7A8CA3!important;margin:0!important}
.fpg .fpg .pcr-sec .ag-q{font-size:11.5px!important;line-height:1.4!important;color:#002347!important;max-width:220px!important;padding:10px 12px!important;background:#fff!important;border-radius:14px 14px 4px 14px!important;box-shadow:0 12px 26px rgba(0,22,52,.3)!important;position:absolute!important;top:26px!important;right:18px!important}
.fpg .fpg .pcr-sec .ag-a{padding:14px!important;left:18px!important;top:104px!important;right:18px!important;bottom:-14px!important}
.fpg .fpg .pcr-sec .ag-who{font-size:12px!important;font-weight:500!important;margin-bottom:10px!important;display:flex!important}
.fpg .fpg .pcr-sec .ag-who small{font-weight:400!important;color:#7A8CA3!important}
.fpg .fpg .pcr-sec .ag-li{font-size:11px!important;padding:7px 0!important;display:flex!important}
.fpg .fpg .pcr-sec .ag-li em{font-size:9.5px!important;color:#7A8CA3!important}
.fpg .fpg .pcr-sec .ag-li .ck{width:16px!important;height:16px!important}
.fpg .fpg .pcr-sec .ag-glow{margin-left:-130px!important;width:260px!important;height:260px!important;background:radial-gradient(circle,rgba(124,203,244,.55),rgba(124,203,244,0) 65%)!important;border-radius:50%!important;position:absolute!important;left:50%!important;top:-30%!important}
.fpg .fpg .pcr-sec .ag-ok{margin-top:12px!important;display:flex!important}
.fpg .fpg .pcr-sec .ag-ok span{font-size:11px!important;text-align:center!important;font-weight:500!important;color:#00468E!important;padding:8px 0!important;border-radius:9px!important;border:1px solid #DCE6F2!important}
.fpg .fpg .pcr-sec .ag-ok span:nth-child(2){color:#fff!important;background:#00468E!important}
.fpg .fpg .pcr-sec .pg-new{font-size:11px!important;line-height:1.35!important;color:#fff!important;width:116px!important;padding:10px!important;border-radius:14px!important;border:1px dashed rgba(255,255,255,.45)!important;position:absolute!important;left:16px!important;top:212px!important}
.fpg .fpg .pcr-sec .pg-new b{font-size:18px!important;font-weight:400!important;color:#7CCBF4!important;margin-bottom:2px!important;display:block!important}
.fpg .fpg .pcr-sec .mm-mo{font-size:10px!important;line-height:1.35!important;color:#2A3F57!important;margin-top:10px!important;padding:8px 9px!important;border-radius:9px!important;border:1px solid #BFE3F7!important;display:flex!important}
.fpg .fpg .pcr-sec .mm-mo b{font-weight:500!important;color:#00468E!important;padding:2px 6px!important;background:#E4F2FC!important;border-radius:5px!important}
@media (max-width:780px){.fpg .fpg .pcr-sec .pcr-nav{display:none!important}}
@media (max-width:780px){.fpg .fpg .pcr-sec .pc{height:512px!important}}
@media (max-width:780px){.fpg .fpg .pcr-sec .pc-shot{height:312px!important}}
@media (max-width:780px){.fpg .fpg .pcr-sec .pc-t{font-size:22px!important}}
.fpg .fpg .fpg-sec.fpg-sec-white.pcr-sec{padding:88px 0 40px!important;background:radial-gradient(70% 60% at 6% 0%,rgba(28,126,194,.42),rgba(28,126,194,0) 70%),radial-gradient(50% 55% at 100% 35%,rgba(12,72,140,.32),rgba(12,72,140,0) 72%)!important;overflow:clip!important}
.fpg .fpg .pcr-sec .pcr-top{margin:0 0 36px!important;display:flex!important}
.fpg .fpg .pcr-sec .pcr-top h2{font-size:34.56px!important;line-height:1.18!important;font-weight:600!important;color:#fff!important;margin:0!important}
@media (max-width:1100px){.fpg .fpg .pcr-sec .pcr-top h2{font-size:27px!important}}
.fpg .fpg .pcr-sec .pcr-top h2 em{color:#7CCBF4!important}
.fpg .fpg .pcr-sec .pcr-rail{margin:0 calc(50% - 50vw) 0 0!important;padding:6px calc(50vw - 50%) 18px 0!important}
.fpg .fpg .pcr-sec .pc-t,.fpg .fpg .pcr-sec .pc-s{display:block!important}
.fpg .fpg .pcr-sec .pc-t{color:#fff!important}
.fpg .fpg .pcr-sec img{max-width:none!important}
@media (max-width:780px){.fpg .fpg .fpg-sec.fpg-sec-white.pcr-sec{padding:64px 0 60px!important}}
@media (max-width:780px){.fpg .fpg .pcr-sec .pcr-nav{display:none!important}}
@media (max-width:780px){.fpg .fpg .pcr-sec .pcr-top{margin-bottom:24px!important}}
@media (max-width:780px){.fpg .fpg .pcr-sec .ag-ok{display:none!important}}
.fpg .fpg .pcr-sec .pc:hover .pg-card{box-shadow:0 24px 50px rgba(0,22,52,.5),0 2px 6px rgba(0,22,52,.18)!important}
.fpg .fpg .pcr-sec .an1{width:168px!important}
.fpg .fpg .pcr-sec .pc:hover .ck.ld{color:#fff!important;background:#1C7EC2!important}
.fpg .fpg .pcr-sec .pc:hover .ag-who .ag-d{color:#1B8A3F!important}
.fpg .fpg .pcr-sec .ag-who .ag-d{display:none!important}
.fpg .fpg .pcr-sec .pc:hover .ag-who .ag-d{display:inline!important}
.fpg .fpg .pcr-sec .ag-ok{position:relative!important}
.fpg .fpg .pcr-sec .ag-done{padding:0 11px!important;background:#E7F7EE!important;border-radius:9px!important;border:1px solid #9FDDB7!important;position:absolute!important;display:flex!important;inset:0!important}
.fpg .fpg .pcr-sec .ag-done i{color:#fff!important;width:20px!important;height:20px!important;background:#1B8A3F!important;border-radius:50%!important;display:grid!important}
.fpg .fpg .pcr-sec .ag-done i svg{width:11px!important;height:11px!important}
.fpg .fpg .pcr-sec .ag-done b{font-size:11.5px!important;line-height:1.2!important;font-weight:600!important;color:#11713F!important;display:block!important}
.fpg .fpg .pcr-sec .ag-done em{font-size:9.5px!important;line-height:1.3!important;color:#3C6E52!important;display:block!important}
.fpg .fpg .pcr-sec .gc-pts{margin:6px 0 0!important}
.fpg .fpg .pcr-sec .gc-pt{margin:0 0 4px!important;padding:0 0 0 14px!important;position:relative!important}
.fpg .fpg .pcr-sec .gc-pt::before{width:5px!important;height:5px!important;background:#1C7EC2!important;border-radius:50%!important;position:absolute!important;left:2px!important;top:6px!important;content:""!important}
.fpg .fpg .pcr-sec .gc-pt b{padding:0 2px!important;background:linear-gradient(#DCEBFA,#DCEBFA) no-repeat 0 100%/100% 100%!important;border-radius:3px!important}
.fpg .fpg .pcr-sec .gc-go{font-size:9.5px!important;font-weight:500!important;color:#fff!important;margin-top:7px!important;padding:4px 9px!important;background:#00468E!important;border-radius:99px!important;display:inline-flex!important}
.fpg .fpg .pcr-sec .pg-grid{width:132px!important;padding:9px!important;left:20px!important;top:20px!important}
.fpg .fpg .pcr-sec .pg-grid .pg-lab{font-size:10.5px!important;margin:0 0 7px 1px!important}
.fpg .fpg .pcr-sec .pg-cur{left:100px!important;top:62px!important}
.fpg .fpg .pcr-sec .pg-new{width:132px!important;left:20px!important;top:186px!important}
.fpg .fpg .pcr-sec .pg-card{width:146px!important;right:16px!important}
.fpg .fpg .pcr-sec .pg-grid{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}
/* patch:pcr end */
/* patch:rpcl */
.fpg section.rpc{position:relative}
.fpg .rpc .rpc-foot{position:absolute!important;left:0;right:0;bottom:40px;z-index:2;display:block!important;padding:0 20px!important;text-align:center!important}
.fpg .rpc .rpc-foot .rpc-comp{display:block!important;margin:18px auto 0!important;max-width:820px;text-align:center!important}
.fpg .rpc .rpc-logos{position:relative!important;display:block!important;width:auto;max-width:1200px;margin:0 auto!important;overflow:visible!important}
.fpg .rpc .rpc-logos .rpcl-track{display:block!important;width:auto;animation:none!important}
.fpg .rpc .rpc-logos .rpcl-set{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 40px;padding:0!important}
@media (min-width:1100px){.fpg .rpc .rpc-logos .rpcl-set{flex-wrap:nowrap}}
.fpg .rpc .rpc-logos .rpcl-set[aria-hidden]{display:none!important}
.fpg .rpc .rpc-logos img{display:block!important;width:auto!important;max-width:none!important;margin:0!important;border-radius:0!important;box-shadow:none!important;opacity:.72}
@keyframes rpcl-run{to{transform:translateX(-50%)}}
@media (max-width:780px){.fpg .rpc .rpc-foot{bottom:28px}.fpg .rpc .rpc-logos .rpcl-set{gap:16px 28px}}
@media (prefers-reduced-motion:reduce){.fpg .rpc .rpc-logos .rpcl-track{animation:none}}
/* patch:rpcl end */
/* patch:h1pill */
.fpg h2.rph-h{text-align:left}
.fpg h2.rph-h{color:var(--bd);font-weight:700;line-height:1.2;margin:0 0 16px}
.fpg h2.rph-h{font-size:44px;letter-spacing:-.5px}
@media(max-width:768px){.fpg h2.rph-h{font-size:30px}}
.rph-copy h2.rph-h .hl{color:var(--cy)}
.rph-copy h2.rph-h{margin:0 0 12px;max-width:40ch;font-size:clamp(28px,3.1vw,44px);line-height:1.12;
font-weight:600;color:var(--nv);text-wrap:balance}
@media (max-width:780px){.rph-copy h2.rph-h{font-size:26px}}
.fpg .rph-copy h2.rph-h .hl{color:var(--cy)!important}
.fpg .rph-copy h2.rph-h{font-size:clamp(28px,3.1vw,44px)!important;line-height:1.12!important;font-weight:600!important;color:var(--nv)!important;margin:0 0 12px!important;max-width:40ch!important}
@media (max-width:780px){.fpg .rph-copy h2.rph-h{font-size:26px!important}}
.rph-copy h2.rph-h .hl{color:var(--cy)}
.rph-copy h2.rph-h{margin:0 0 12px;max-width:40ch;font-size:clamp(28px,3.1vw,44px);line-height:1.12;
font-weight:600;color:var(--nv);text-wrap:balance}
@media (max-width:780px){.rph-copy h2.rph-h{font-size:26px}}
.fpg h2.rph-h{text-align:left}
.fpg .rph-copy h1.eyebrow,.fpg .rph .rph-copy h1.eyebrow{font-size:16px!important;line-height:1.3!important;font-weight:400!important;letter-spacing:normal!important;text-transform:none!important;margin:0 0 12px!important;max-width:none!important;text-wrap:wrap;font-family:Rubik,-apple-system,"system-ui","Segoe UI",sans-serif!important}
.fpg .rph-copy h1.eyebrow i{font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important}
/* patch:h1pill end */
/* patch:scx */
.fpg .scx,.fpg .scx *{box-sizing:border-box}
.fpg .scx{font-family:Rubik,system-ui,sans-serif;color:#4A5D73;-webkit-font-smoothing:antialiased}
.fpg .scx-eye{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#00468E}
.fpg .scx-eye::before{content:"";width:22px;height:2px;border-radius:2px;background:#1C7EC2}
.fpg .scx h2.scx-h{font-family:Rubik,sans-serif;font-weight:600;font-size:34.56px;line-height:1.2;color:#002347;margin:16px 0 0;letter-spacing:-.01em}
.fpg .scx-lede{display:block;font-size:17px;line-height:1.6;color:#4A5D73;margin-top:16px}
.fpg .scx-svg{display:block;width:100%;height:auto;overflow:visible}
.fpg .scx-src{display:block;font-size:13px;line-height:1.6;color:#4A5D73;margin-top:40px;padding-top:20px;border-top:1px solid #DCE5EF}
.fpg .scx-src b{font-weight:600;color:#002347;margin-right:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.scx-anim .fpg .scx .a{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--d,0)*1ms)}
.scx-anim .fpg .scx .a.g{transform:scaleY(.2);transform-box:fill-box;transform-origin:50% 100%}
.scx-anim .fpg .scx .a.gx{transform:scaleX(0);transform-origin:0 50%}
.scx-anim .fpg .scx.in .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scx-anim .fpg .scx .a{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:1100px){.fpg .scx h2.scx-h{font-size:27px}}
@media (max-width:768px){}
@media (max-width:575px){.fpg .scx-lede{font-size:16px}}
.fpg .scx .v2-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end}
.fpg .scx .v2-top .scx-lede{margin-top:0}
.fpg .scx .v2-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:48px;align-items:center}
.fpg .scx .v2-fig{display:block;background:#F2F7FF;border-radius:24px;padding:36px 32px}
.fpg .scx .v2-notes{display:block}
.fpg .scx .v2-note{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding:24px 0;border-top:1px solid #DCE5EF}
.fpg .scx .v2-note:first-child{border-top:0;padding-top:0}
.fpg .scx .v2-note:last-child{padding-bottom:0}
.fpg .scx .v2-m{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#002347;color:#fff;font-size:15px;font-weight:600}
.fpg .scx .v2-k{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#00468E;padding-top:2px}
.fpg .scx .v2-t{display:block;font-size:18px;font-weight:600;line-height:1.35;color:#002347;margin-top:8px}
.fpg .scx .v2-stat{display:block;font-size:15px;line-height:1.5;color:#4A5D73;margin-top:4px}
.fpg .scx .v2-stat span{font-weight:600;color:#002347}
.fpg .scx .v2-p{display:block;font-size:16px;line-height:1.6;color:#4A5D73;margin-top:6px}
@media (max-width:1000px){.fpg .scx .v2-top{grid-template-columns:1fr;gap:16px}.fpg .scx .v2-body{grid-template-columns:1fr;gap:36px}.fpg .scx .v2-fig{max-width:720px}}
@media (max-width:575px){.fpg .scx .v2-fig svg text{font-size:21px}.fpg .scx .v2-fig{padding:16px 8px;border-radius:18px}.fpg .scx .v2-body{margin-top:32px}.fpg .scx .v2-note{grid-template-columns:30px minmax(0,1fr);gap:14px}.fpg .scx .v2-m{width:30px;height:30px;font-size:14px}}
.fpg .scx-v2 .zl,.fpg .scx-v2 .cap{pointer-events:none}
.fpg .scx-v2 .z,.fpg .scx-v2 .mk{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.fpg .scx-v2 .hub{pointer-events:none}
.fpg .scx-v2 .mk circle{fill:#002347}
.fpg .scx-v2 .mk text{fill:#fff;pointer-events:none}
.fpg .scx-v2 .mk.inv circle{fill:#fff}
.fpg .scx-v2 .mk.inv text{fill:#002347}
.fpg .scx-v2 .z,.fpg .scx-v2 .mk circle,.fpg .scx-v2 .zf,.fpg .scx-v2 .v2-note,.fpg .scx-v2 .v2-m,.fpg .scx-v2 .v2-t{transition:opacity .32s ease-out,fill .32s ease-out,fill-opacity .32s ease-out,filter .32s ease-out,background-color .32s ease-out,color .32s ease-out}
.fpg .scx-v2 .zl{transition:fill .28s ease-out,opacity .28s ease-out}
.fpg .scx-v2 .zo{transition:stroke .28s ease-out}
.fpg .scx-v2 .z.is-a .zf{fill:#1C7EC2;fill-opacity:1}
.fpg .scx-v2 .z.zn.is-a .zf{fill:#00468E}
.fpg .scx-v2 .z.is-a .zo{stroke:#1C7EC2}
.fpg .scx-v2 .z.zn.is-a .zo{stroke:#00468E}
.fpg .scx-v2 .z.is-a .zl{fill:#fff}
.fpg .scx-v2 .has-a .z:not(.is-a){opacity:.35}
.fpg .scx-v2 .has-a .z.zc:not(.is-a){opacity:1}
.fpg .scx-v2 .mk.is-a circle,.fpg .scx-v2 .mk.inv.is-a circle{fill:#fff}
.fpg .scx-v2 .mk.is-a text,.fpg .scx-v2 .mk.inv.is-a text{fill:#1C7EC2}
.fpg .scx-v2 .v2-fig{position:relative}
.fpg .scx-v2 .v5-tip{position:absolute;left:0;top:0;z-index:2;display:block;box-sizing:border-box;max-width:240px;padding:12px 14px;background:#fff;border:1px solid #DCE5EF;border-radius:12px;box-shadow:0 6px 20px rgba(0,35,71,.10);opacity:0;transform:translateY(4px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}
.fpg .scx-v2 .v5-tip.on{opacity:1;transform:none}
.fpg .scx-v2 .v5-tip.nar{max-width:196px;padding:9px 11px}
.fpg .scx-v2 .v5-tip.nar .v5-tt{font-size:14px}
.fpg .scx-v2 .v5-tip.nar .v5-ts{font-size:13px}
.fpg .scx-v2 .v5-tt{display:block;font-size:15px;font-weight:600;line-height:1.35;color:#002347}
.fpg .scx-v2 .v5-ts{display:block;font-size:13.5px;line-height:1.45;color:#4A5D73;margin-top:4px}
.fpg .scx-v2 .v5-cap{display:none}
.fpg .scx-v2 .v2-note{cursor:pointer;outline:none}
.fpg .scx-v2 .v2-note:focus-visible{outline:2px solid #1C7EC2;outline-offset:6px}
.fpg .scx-v2 .v2-t{color:#0E3170}
.fpg .scx-v2 .v2-note.is-a .v2-t{color:#002347}
.fpg .scx-v2 .v2-note.is-a .v2-m{background:#1C7EC2}
.fpg .scx-v2 .v2-notes.has-a .v2-note:not(.is-a){opacity:.6}
.scx-v3a .fpg .scx-v2 .zo{stroke-dasharray:1;stroke-dashoffset:1}
.scx-v3a .fpg .scx-v2 .zf,.scx-v3a .fpg .scx-v2 .zl,.scx-v3a .fpg .scx-v2 .hub,.scx-v3a .fpg .scx-v2 .cap{opacity:0}
.scx-v3a .fpg .scx-v2 .mk{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:50% 50%}
.scx-v3a .fpg .scx-v2.in .zo{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease-out}
.scx-v3a .fpg .scx-v2.in .zf,.scx-v3a .fpg .scx-v2.in .zl{opacity:1;transition:opacity .4s ease-out calc(.45s + var(--i)*.16s),fill-opacity .32s ease-out}
.scx-v3a .fpg .scx-v2.in .hub,.scx-v3a .fpg .scx-v2.in .cap{opacity:1;transition:opacity .4s ease-out .8s}
.scx-v3a .fpg .scx-v2.in .mk{opacity:1;transform:none;transition:opacity .3s ease-out calc(1.05s + var(--i)*.1s),transform .3s ease-out calc(1.05s + var(--i)*.1s)}
.scx-v3a .fpg .scx-v2.done .zf,.scx-v3a .fpg .scx-v2.done .zl,.scx-v3a .fpg .scx-v2.done .mk{transition:opacity .28s ease-out,fill .28s ease-out,fill-opacity .28s ease-out,transform .28s ease-out}
.scx-v3a .fpg .scx-v2 .has-a .zo{stroke-dashoffset:0}
.scx-v3a .fpg .scx-v2 .has-a .zf,.scx-v3a .fpg .scx-v2 .has-a .zl,.scx-v3a .fpg .scx-v2 .has-a .hub,.scx-v3a .fpg .scx-v2 .has-a .cap,.scx-v3a .fpg .scx-v2 .has-a .mk{opacity:1;transform:none;transition:opacity .28s ease-out,fill .28s ease-out,fill-opacity .28s ease-out,transform .28s ease-out}
@media (prefers-reduced-motion:reduce){.fpg .scx-v2 *{transition:none!important}}
@media (max-width:575px){.fpg .scx-v2 .v5-tip{display:none}.fpg .scx-v2 .v5-cap{display:block;min-height:62px;margin-top:8px;padding:0 8px;font-size:14px;line-height:1.45;color:#4A5D73;opacity:0;transform:translateY(4px);transition:opacity .2s ease-out,transform .2s ease-out}.fpg .scx-v2 .v5-cap.on{opacity:1;transform:none}.fpg .scx-v2 .v5-cap .v5-def{font-size:13px;color:#4A5D73}.fpg .scx-v2 .v5-cap b{font-weight:600;color:#002347}.fpg .scx-v2 .v2-fig svg text{font-size:31px}.fpg .scx-v2 .v2-fig svg .mk circle{r:26px}.fpg .scx-v2 .v2-fig svg .mk text{font-size:28px}}
.fpg .fpg-sec.sci-sec.scx h2.scx-h{font-size:34.56px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:-.01em!important;margin:16px 0 0!important}
@media (max-width:1100px){.fpg .fpg-sec.sci-sec.scx h2.scx-h{font-size:27px!important}}
.fpg .fpg-sec.sci-sec.scx>.fpg-w>h2.scx-h,.fpg .scx h2.scx-h{color:#002347!important}
.fpg .scx .scx-src{text-align:left}
.fpg .fpg .scx{color:#4A5D73!important}
.fpg .fpg .scx-eye{font-size:13px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:600!important;color:#00468E!important;display:inline-flex!important}
.fpg .fpg .scx-eye::before{width:22px!important;height:2px!important;background:#1C7EC2!important;border-radius:2px!important;content:""!important}
.fpg .fpg .scx h2.scx-h{font-size:34.56px!important;line-height:1.2!important;letter-spacing:-.01em!important;font-weight:600!important;color:#002347!important;margin:16px 0 0!important}
.fpg .fpg .scx-lede{font-size:17px!important;line-height:1.6!important;color:#4A5D73!important;margin-top:16px!important;display:block!important}
.fpg .fpg .scx-svg{width:100%!important;height:auto!important;display:block!important;overflow:visible!important}
.fpg .fpg .scx-src{font-size:13px!important;line-height:1.6!important;color:#4A5D73!important;margin-top:40px!important;display:block!important}
.fpg .fpg .scx-src b{font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:600!important;color:#002347!important;margin-right:8px!important}
@media (max-width:1100px){.fpg .fpg .scx h2.scx-h{font-size:27px!important}}
@media (max-width:575px){.fpg .fpg .scx-lede{font-size:16px!important}}
.fpg .fpg .scx .v2-top{display:grid!important}
.fpg .fpg .scx .v2-top .scx-lede{margin-top:0!important}
.fpg .fpg .scx .v2-body{margin-top:48px!important;display:grid!important}
.fpg .fpg .scx .v2-fig{padding:36px 32px!important;background:#F2F7FF!important;border-radius:24px!important;display:block!important}
.fpg .fpg .scx .v2-notes{display:block!important}
.fpg .fpg .scx .v2-note{padding:24px 0!important;display:grid!important}
.fpg .fpg .scx .v2-m{font-size:15px!important;font-weight:600!important;color:#fff!important;width:34px!important;height:34px!important;background:#002347!important;border-radius:50%!important;display:flex!important}
.fpg .fpg .scx .v2-k{font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:600!important;color:#00468E!important;display:block!important}
.fpg .fpg .scx .v2-t{font-size:18px!important;line-height:1.35!important;font-weight:600!important;color:#002347!important;margin-top:8px!important;display:block!important}
.fpg .fpg .scx .v2-stat{font-size:15px!important;line-height:1.5!important;color:#4A5D73!important;margin-top:4px!important;display:block!important}
.fpg .fpg .scx .v2-stat span{font-weight:600!important;color:#002347!important}
.fpg .fpg .scx .v2-p{font-size:16px!important;line-height:1.6!important;color:#4A5D73!important;margin-top:6px!important;display:block!important}
@media (max-width:1000px){.fpg .fpg .scx .v2-fig{max-width:720px!important}}
@media (max-width:575px){.fpg .fpg .scx .v2-fig svg text{font-size:21px!important}}
@media (max-width:575px){.fpg .fpg .scx .v2-fig{padding:16px 8px!important;border-radius:18px!important}}
@media (max-width:575px){.fpg .fpg .scx .v2-body{margin-top:32px!important}}
@media (max-width:575px){.fpg .fpg .scx .v2-m{font-size:14px!important;width:30px!important;height:30px!important}}
.fpg .fpg .scx-v2 .v2-fig{position:relative!important}
.fpg .fpg .scx-v2 .v5-tip{max-width:240px!important;padding:12px 14px!important;background:#fff!important;border-radius:12px!important;border:1px solid #DCE5EF!important;box-shadow:0 6px 20px rgba(0,35,71,.10)!important;position:absolute!important;left:0!important;top:0!important;z-index:2!important;display:block!important}
.fpg .fpg .scx-v2 .v5-tip.nar{max-width:196px!important;padding:9px 11px!important}
.fpg .fpg .scx-v2 .v5-tip.nar .v5-tt{font-size:14px!important}
.fpg .fpg .scx-v2 .v5-tip.nar .v5-ts{font-size:13px!important}
.fpg .fpg .scx-v2 .v5-tt{font-size:15px!important;line-height:1.35!important;font-weight:600!important;color:#002347!important;display:block!important}
.fpg .fpg .scx-v2 .v5-ts{font-size:13.5px!important;line-height:1.45!important;color:#4A5D73!important;margin-top:4px!important;display:block!important}
.fpg .fpg .scx-v2 .v5-cap{display:none!important}
.fpg .fpg .scx-v2 .v2-t{color:#0E3170!important}
.fpg .fpg .scx-v2 .v2-note.is-a .v2-t{color:#002347!important}
.fpg .fpg .scx-v2 .v2-note.is-a .v2-m{background:#1C7EC2!important}
@media (max-width:575px){.fpg .fpg .scx-v2 .v5-tip{display:none!important}}
@media (max-width:575px){.fpg .fpg .scx-v2 .v5-cap{font-size:14px!important;line-height:1.45!important;color:#4A5D73!important;margin-top:8px!important;min-height:62px!important;padding:0 8px!important;display:block!important}}
@media (max-width:575px){.fpg .fpg .scx-v2 .v5-cap .v5-def{font-size:13px!important;color:#4A5D73!important}}
@media (max-width:575px){.fpg .fpg .scx-v2 .v5-cap b{font-weight:600!important;color:#002347!important}}
@media (max-width:575px){.fpg .fpg .scx-v2 .v2-fig svg text{font-size:31px!important}}
@media (max-width:575px){.fpg .fpg .scx-v2 .v2-fig svg .mk text{font-size:28px!important}}
.fpg .fpg .fpg-sec.sci-sec.scx h2.scx-h{font-size:34.56px!important;line-height:1.2!important;letter-spacing:-.01em!important;font-weight:600!important;margin:16px 0 0!important}
@media (max-width:1100px){.fpg .fpg .fpg-sec.sci-sec.scx h2.scx-h{font-size:27px!important}}
.fpg .fpg .fpg-sec.sci-sec.scx>.fpg-w>h2.scx-h,.fpg .fpg .scx h2.scx-h{color:#002347!important}
.fpg .fpg .scx .scx-src{text-align:left!important}
/* patch:scx end */
/* patch:edtype */
.fpg section#rps h2,.fpg section#rhl h2,.fpg section#rpg h2,.fpg section#rpa h2,.fpg section#rpp h2,
.fpg section.rpb h2,.fpg section.rpc h2,.fpg section.rpc .rpc-in h2,.fpg .acx h2.acx-h,.fpg .fpg-sec .acx h2.acx-h,
.fpg #see-the-feedback h2:not([class*="text-["]),.fpg .agc-pk h2,.fpg .fpg-faq h2,.fpg .fpg-sec .fpg-faq h2{
font-size:34.56px!important;font-weight:600!important;line-height:1.18!important;letter-spacing:-.005em!important}
@media (max-width:1100px){.fpg section#rps h2,.fpg section#rhl h2,.fpg section#rpg h2,.fpg section#rpa h2,.fpg section#rpp h2,
.fpg section.rpb h2,.fpg section.rpc h2,.fpg section.rpc .rpc-in h2,.fpg .acx h2.acx-h,.fpg .fpg-sec .acx h2.acx-h,
.fpg #see-the-feedback h2:not([class*="text-["]),.fpg .agc-pk h2,.fpg .fpg-faq h2,.fpg .fpg-sec .fpg-faq h2{font-size:27px!important}}
.fpg .rhl .rhl-card,.fpg .acx .acx-box,.fpg .scx .v2-fig,.fpg .fpg-sec.scx .v2-fig,.fpg .rpb .rpb-c,.fpg section.rpb .rpb-c{border-radius:14px!important}
/* patch:edtype end */
/* patch:hero-mzoom */
@property --rph-mz{syntax:'';inherits:false;initial-value:0}
@media (max-width:780px){@supports (animation-timeline:view()){
.fpg .rph{view-timeline:--rphz block}
.fpg .rph .rph-seq,.fpg .rph .rph-poster{--hero-mzoom:2026-10-13;animation:rph-mzoom ease-in-out both;animation-timeline:--rphz;animation-range:contain 55% contain 90%;inset:auto!important;right:auto!important;bottom:auto!important;left:calc(var(--rph-mz) * 28px)!important;top:calc(var(--rph-mz) * (50svh - (100vw - 56px) * .28125))!important;width:calc(100% + var(--rph-mz) * (100vw - 56px - 100%))!important;height:calc(100% + var(--rph-mz) * ((100vw - 56px) * .5625 - 100%))!important;border-radius:calc(var(--rph-mz) * 12px);box-shadow:0 18px 40px -18px rgba(0,35,71,calc(var(--rph-mz) * .35))}
@keyframes rph-mzoom{from{--rph-mz:0}to{--rph-mz:1}}
}}
/* end:hero-mzoom */
/* patch:tablet-desc-off */
.fpg .rps-desc,.fpg .rpg-desc,.fpg .rpp-desc{--desc-off:2026-10-13;display:none!important}
/* end:tablet-desc-off */
/* patch:rpb-zigzag */
.fpg .rpb{--rpb-zz:2026-10-13;padding-bottom:0!important}
.fpg .rpb .rpb-in>h2{margin-left:auto!important;margin-right:auto!important;text-align:center!important;max-width:760px!important}
.fpg .rpb .lede{margin-left:auto!important;margin-right:auto!important;text-align:center!important;max-width:640px!important}
.fpg .rpb .rpb-grid{display:block!important;margin-top:24px!important}
.fpg .rpb .rpb-c{opacity:1!important;transform:none!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:56px 0!important}
.fpg .rpb .rpb-c:nth-child(2),.fpg .rpb .rpb-c:nth-child(4){border-top:1px solid #e3e6ea!important}
.fpg .rpb .rpb-c:nth-child(3),.fpg .rpb .rpb-c:nth-child(4){background:#fff!important;box-shadow:0 0 0 100vmax #fff!important;clip-path:inset(0 -100vmax)}
.fpg .rpb .rpb-c:nth-child(3){padding-top:96px!important}
.fpg .rpb .rpb-c:nth-child(4){padding-bottom:104px!important}
@media (min-width:781px){
.fpg .rpb .rpb-c{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;grid-template-rows:1fr auto auto auto auto 1fr;column-gap:72px}
.fpg .rpb .rpb-c>*{grid-column:1;margin-left:0!important;margin-right:0!important;max-width:none!important}
.fpg .rpb .rpb-c>:nth-child(1){grid-row:2}
.fpg .rpb .rpb-c>:nth-child(2){grid-row:3}
.fpg .rpb .rpb-c>:nth-child(3){grid-row:4}
.fpg .rpb .rpb-c>:nth-child(4){grid-row:5}
.fpg .rpb .rpb-c:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)!important}
.fpg .rpb .rpb-c:nth-child(even)>*{grid-column:2}
.fpg .rpb .rpb-c>div.rpb-well,.fpg .rpb .rpb-c>div.rpb-draw,.fpg .rpb .rpb-c>div.rpb-stats{grid-column:2;grid-row:1/-1;align-self:center;margin:0!important;width:100%!important}
.fpg .rpb .rpb-c:nth-child(even)>div.rpb-well,.fpg .rpb .rpb-c:nth-child(even)>div.rpb-draw,.fpg .rpb .rpb-c:nth-child(even)>div.rpb-stats{grid-column:1}
}
@media (max-width:780px){
.fpg .rpb .rpb-c{display:block!important;padding:40px 0!important}
.fpg .rpb .rpb-c:nth-child(3){padding-top:64px!important}
.fpg .rpb .rpb-c:nth-child(4){padding-bottom:72px!important}
}
.fpg .rpb .lab{margin:0 0 14px!important}
.fpg .rpb .lab .fpk-badge{margin:0!important}
.fpg .rpb .rpb-qa{display:flex!important;align-items:center;gap:12px}
.fpg .rpb .rpb-av{width:44px!important;height:44px!important;max-width:none!important;border-radius:50%!important;object-fit:cover;flex:none;margin:0!important;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,35,71,.15)}
.fpg .rpb .rpb-orb.rpb-still,.fpg .rpb .rpb-orb.rpb-still *,.fpg .rpb .rpb-w2:has(.rpb-still) *{animation-play-state:paused!important}
.fpg .fpg-live .fpg-intro,.fpg .fpg-live .fpg-intro h2,.fpg .fpg-live .fpg-intro p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.fpg .rpb .rpb-draw.rwc-well{height:auto!important;aspect-ratio:4/3}
.fpg .rpb .rwc-in{inset:14px!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;row-gap:14px!important}
.fpg .rpb .rwc-sd{gap:10px!important;justify-content:flex-start!important}
.fpg .rpb .rwc-tm{grid-template-areas:"tk tk tk" "m1 . m2"!important}
@media (max-width:780px){.fpg .rpb .rpb-draw.rwc-well{aspect-ratio:1/1}}
/* end:rpb-zigzag */
/* patch:scx-solo-hover 2026-10-13 */
.fpg .scx-v2 .has-a .z:not(.is-a),.fpg .scx-v2 .has-a .mk:not(.is-a),.fpg .scx-v2 .has-a .hub,.fpg .scx-v2 .has-a .cap{opacity:0!important}
.fpg .scx-v2 .z .zl,.fpg .scx-v2 .mk{transition:opacity .28s ease-out,fill .28s ease-out,transform .32s ease-out!important}
.fpg .scx-v2 .has-a .z.is-a .zl,.fpg .scx-v2 .has-a .mk.is-a{transform:translate(var(--sdx,0px),var(--sdy,0px))!important}
.fpg .scx-v2 .v5-tip{transition:opacity .2s ease-out,transform .2s ease-out,left .25s ease-out,top .25s ease-out}
/* /patch:scx-solo-hover */