/* StockRepublic pricing slides (agent B): the offer look (offer.css .jo-offer) with StockRepublic colours and fewer words.
   navy #1C062F · yellow #B380F1 · blue #663399 · teal #B380F1 / #663399 for text on light. */
.sx-offer{--jo-gap:clamp(16px,3vh,34px)}
.sx-offer .jo-h1{font-size:clamp(40px,min(4.6vw,8vh),76px);letter-spacing:-.04em}
.sx-offer .jo-kb{color:#663399}
.sx-offer .jo-card{min-height:clamp(170px,calc(34vh - 60px),290px);justify-content:space-between}
.sx-offer .jo-p{font-family:Montserrat,Inter,system-ui,sans-serif;font-size:clamp(52px,10vh,104px)}
.sx-offer .sx-bothp{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);flex-wrap:wrap}
.sx-offer .sx-was{font-family:Montserrat,Inter,system-ui,sans-serif;font-size:clamp(22px,3.4vh,34px);font-weight:500;letter-spacing:-.03em;color:var(--muted);opacity:.55;text-decoration-thickness:2px;text-decoration-color:rgba(28,6,47,.45)}
.sx-offer .jo-orb{background:radial-gradient(circle,rgba(24,99,220,.20),transparent 70%)}
.sx-offer .jo-both{box-shadow:0 26px 64px rgba(24,99,220,.18),0 2px 6px rgba(28,6,47,.06)}
/* risk: headline with the money-back badge, then the navy band with three steps */
.sx-risk .sx-rhead{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sx-risk .sx-badge{margin:0;align-self:center;padding:12px 20px;border-radius:999px;font-size:clamp(15px,2vh,19px);background:rgba(179,128,241,.16);color:#663399;animation:joUp .7s var(--ease) .9s both}
.sx-risk .sx-band{grid-template-columns:1fr;padding:clamp(22px,4vh,44px) clamp(22px,2.6vw,40px);background:linear-gradient(160deg,#1C062F,#321055);box-shadow:0 24px 60px rgba(28,6,47,.28)}
.sx-risk .jo-glow{background:radial-gradient(circle,rgba(255,203,49,.30),transparent 68%)}
.sx-risk .sx-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.5fr);align-items:stretch;gap:clamp(10px,1.2vw,18px)}
.sx-risk .sx-seg{border-radius:20px;padding:clamp(16px,2.8vh,28px) clamp(16px,1.6vw,26px);display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;animation:joUp .7s var(--ease) both;animation-delay:calc(var(--i)*220ms + 300ms)}
.sx-risk .sx-big{font-family:Montserrat,Inter,system-ui,sans-serif;font-size:clamp(30px,5.6vh,56px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sx-risk .sx-small{font-size:clamp(16px,2.4vh,22px);line-height:1.25}
.sx-risk .sx-seg.s1{background:linear-gradient(135deg,#E0D6EB,#B380F1 55%,#994CE5);color:#1C062F;box-shadow:0 12px 30px rgba(255,203,49,.32)}
.sx-risk .sx-seg.s2{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);color:#fff}
.sx-risk .sx-seg.s2 .sx-small{color:rgba(255,255,255,.72)}
.sx-risk .sx-seg.s3{border:1.5px dashed rgba(255,255,255,.34);background:rgba(255,255,255,.04);color:#fff;gap:10px}
.sx-risk .sx-line{font-family:Montserrat,Inter,system-ui,sans-serif;font-size:clamp(19px,3vh,30px);line-height:1.2;letter-spacing:-.02em;color:rgba(255,255,255,.86)}
.sx-risk .sx-line b{color:#B380F1;font-weight:600}
.sx-risk .sx-arr{align-self:center;color:rgba(255,255,255,.5);display:flex;animation:joFade .6s var(--ease) both;animation-delay:calc(var(--i)*220ms + 200ms)}
@media (max-width:1000px){.sx-risk .sx-flow{grid-template-columns:1fr}.sx-risk .sx-arr{transform:rotate(90deg);justify-self:center}}
@media (max-width:760px){.sx-offer .jo-price{grid-template-columns:1fr}}
/* operator change: two price cards on "price"; "Both" with the money-back badge sits on "risk" above the steps */
.sx-offer .jo-price.sx-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-risk .sx-bothrow{min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(18px,3vh,30px) clamp(20px,2.2vw,34px)}
.sx-risk .sx-bothl{display:flex;flex-direction:column;gap:clamp(6px,1vh,10px)}
.sx-risk .sx-bothrow .jo-p{font-size:clamp(48px,8.6vh,88px)}
.sx-risk .sx-bothrow .sx-badge{margin:0;align-self:center}