/* ========================================================================== 
   SORYXPAY responsive hardening layer
   Loaded after the original styles so the current visual design is preserved,
   while narrow screens, wide screens and browser zoom remain stable.
   ========================================================================== */

:root{
  --sx-page-gutter:clamp(14px,3.35vw,48px);
  --sx-card-gap:clamp(12px,1.35vw,18px);
}

html{
  min-width:280px;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-width:280px;
  max-width:100%;
  overflow-x:clip;
}

img,svg,video,canvas{vertical-align:middle}
img{image-rendering:auto}
button,input,textarea,select{max-width:100%;font:inherit}

/* Grid/flex children may otherwise keep their intrinsic width and push a page
   wider when zoom is increased or when a translation contains a long word. */
:where(
  .header,.header-actions,.nav,.container,
  .section-head,.bento-grid,.bento,.steps,.step,.risk-grid,.risk-card,
  .risk-card__body,.geo-system,.geo-image-shell,.business-overview-card,
  .overview-stats,.overview-features,.overview-feature,.cta-card,.cta-content,
  .cta-actions,.footer-grid,.privacy-layout,.privacy-document,.privacy-section,
  .agent-benefit-grid,.agent-benefit-card,.agent-showcase,.agent-application-card,
  .agent-application-copy,.application-form,.application-field
){min-width:0}

:where(
  h1,h2,h3,.lead,.section-head p,.bento p,.step p,.risk-card p,.risk-card li,
  .overview-feature__copy,.cta-content p,.footer a,.footer p,.privacy-section,
  .privacy-section a,.privacy-toc a,.agent-benefit-card p,.agent-showcase__text,
  .agent-application-copy p,.application-consent
){overflow-wrap:break-word;word-break:normal}

.container{max-width:100%}

/* Keep visual media proportional and prevent stretching. */
:where(
  .api-support-media,.global-control-media,.payment-methods-media,
  .safe-deal-media,.detail-attention-media,.support-247-media,
  .risk-card__visual,.overview-feature__visual,.cta-photo-media
) img{
  display:block;
  max-width:100%;
  object-fit:contain;
}

/* Equal-height card behavior without adding fixed heights to text. */
.bento-grid,.risk-grid,.overview-features,.agent-benefit-grid{align-items:stretch}
.bento,.risk-card,.overview-feature,.agent-benefit-card{height:100%}
.risk-card__body{height:100%;display:flex;flex-direction:column}
.risk-card__visual{width:100%;overflow:hidden}
.risk-card__visual img{max-width:100%;height:100%;object-fit:contain}
.risk-card ul{width:100%}

/* The process has five items. minmax(0,1fr) prevents long headings from
   widening individual columns. */
@media (min-width:901px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,30px)}
}

/* --------------------------------------------------------------------------
   Header: the old stylesheet hid the navigation at 900px but only displayed
   the menu button at 680px. This closes that tablet/zoom gap.
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (max-width:900px){
  .header.glass,
  .header.is-scrolled{
    width:calc(100% - 32px);
    grid-template-columns:198px minmax(0,1fr) 64px !important;
    gap:12px;
  }
  .header > .menu-btn{
    display:grid;
    place-content:center;
    width:64px;
    min-width:64px;
    height:64px;
    min-height:64px;
    margin:0;
    padding:0;
    border-radius:20px;
    cursor:pointer;
  }
  .header > .menu-btn span{
    position:relative;
    z-index:1;
    width:20px;
    height:1px;
    margin:3px 0;
    background:#f3f3f4;
    transform-origin:center;
    transition:transform .25s ease,opacity .25s ease;
  }
  .header > .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .header > .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .header > .nav.open{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    width:100%;
    min-height:0;
    height:auto;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:4px;
    border:1px solid rgba(255,255,255,.105);
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),rgba(8,8,10,.96);
    box-shadow:0 28px 72px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.07);
    backdrop-filter:blur(24px) saturate(125%);
    -webkit-backdrop-filter:blur(24px) saturate(125%);
  }
  .header > .nav.open::after{display:none}
  .header > .nav.open a{
    width:100%;
    min-height:48px;
    padding:0 16px;
    justify-content:flex-start;
    border-radius:12px;
  }
}

@media (min-width:681px) and (max-width:760px){
  .header.glass,
  .header.is-scrolled{grid-template-columns:198px minmax(0,1fr) 64px !important}
  .header > .header-actions{
    justify-self:end;
    width:64px;
    min-width:64px;
    height:64px;
    min-height:64px;
    padding:5px;
  }
  .header > .header-actions .header-connect,
  .header > .header-actions .header-actions__divider{display:none}
  .language-switcher{width:100%;flex:1 1 auto}
}

/* --------------------------------------------------------------------------
   Main page at tablet widths / desktop browser zoom.
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (max-width:1000px){
  .hero-wrap{grid-template-columns:1fr;gap:clamp(24px,5vw,48px)}
  .hero-copy{text-align:center;margin-inline:auto}
  .hero-actions{justify-content:center;flex-wrap:wrap}
  .hero-visual{width:min(100%,760px);margin-inline:auto;overflow:clip}
  .hero-copy .lead{width:auto;max-width:760px;white-space:normal;margin-inline:auto;font-size:clamp(14px,2vw,17px)}

  .section-head.split{grid-template-columns:1fr;gap:20px;align-items:start}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .process-line{display:none}
  .step{height:100%;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.015)}
  .step-dot{margin:22px auto}

  .risk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-stats,.overview-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .geo-system.geo-system--image,
  .geo-image-shell{overflow:hidden !important}
  .geo-coverage-image{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin-left:0 !important;
    object-fit:contain !important;
  }
}

/* --------------------------------------------------------------------------
   Phones and high zoom levels.
   -------------------------------------------------------------------------- */
@media (max-width:680px){
  :root{--sx-page-gutter:14px}
  .container{width:calc(100% - (var(--sx-page-gutter) * 2))}

  main > .section:not(.hero):not(.agent-hero):not(.privacy-hero){
    padding-top:clamp(68px,18vw,90px);
    padding-bottom:clamp(68px,18vw,90px);
  }

  h1{font-size:clamp(36px,11.5vw,48px)}
  .section-head h2{font-size:clamp(30px,9.6vw,42px)}
  .section-head{margin-bottom:clamp(34px,10vw,52px)}
  .section-head p{font-size:clamp(14px,4vw,16px)}
  .eyebrow{font-size:10px;line-height:1.55}

  .hero-copy .lead{
    width:auto;
    max-width:100%;
    white-space:normal;
    font-size:clamp(13px,3.8vw,15px);
    line-height:1.65;
    letter-spacing:-.025em;
  }
  .hero-actions{width:100%}
  .hero-actions .btn{width:100%;min-width:0}
  .hero-visual{width:100%;overflow:clip}

  .btn{
    min-width:0;
    max-width:100%;
    height:auto;
    min-height:52px;
    padding:13px 18px;
    line-height:1.25;
    text-align:center;
  }

  .steps{grid-template-columns:1fr;gap:12px}
  .process-line{display:none}
  .step{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:4px 14px;
    align-items:start;
    padding:20px;
    text-align:left;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.015);
  }
  .step-num{grid-row:1 / span 2;padding-top:4px}
  .step-dot{display:none}
  .step h3,.step p{grid-column:2;margin-inline:0}
  .step h3{font-size:17px}
  .step p{margin-block:0}

  .risk-grid,.overview-stats,.overview-features,.agent-benefit-grid{grid-template-columns:1fr}
  .risk-card{min-height:0}
  .risk-card__body{padding-inline:clamp(18px,5vw,26px)}
  .risk-card__visual{height:clamp(132px,40vw,160px);min-height:0}
  .risk-card__accent{pointer-events:none}

  .overview-stats > div,.overview-feature{min-height:0}
  .overview-feature{padding-inline:clamp(18px,6vw,28px)}

  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .footer-bottom{align-items:flex-start}

  .contact-modal,.application-modal{padding:12px;overflow:auto}
  .contact-modal__panel,.application-modal__panel{
    width:min(100%,560px);
    max-height:calc(100dvh - 24px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .application-field input,.application-field textarea{width:100%;min-width:0}
}

/* Reflow the illustration-heavy bento cards only when the viewport is too
   narrow for their original absolute two-zone composition. */
@media (max-width:520px){
  .bento-grid--text-only{gap:12px}
  .bento-grid--text-only .bento{
    display:flex !important;
    flex-direction:column;
    min-height:0 !important;
    padding:22px !important;
  }
  .bento-grid--text-only :is(
    .api-support-copy,.global-control-copy,.payment-methods-copy,
    .safe-deal-copy,.detail-attention-copy,.support-247-copy
  ){
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    flex:0 0 auto !important;
    padding:0 !important;
  }
  .bento-grid--text-only :is(
    .api-support-copy,.global-control-copy,.payment-methods-copy,
    .safe-deal-copy,.detail-attention-copy,.support-247-copy
  ) h3{
    width:auto !important;
    max-width:none !important;
    margin:0 0 10px !important;
  }
  .bento-grid--text-only :is(
    .api-support-copy,.global-control-copy,.payment-methods-copy,
    .safe-deal-copy,.detail-attention-copy,.support-247-copy
  ) p{
    position:static !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.65 !important;
  }
  .bento-grid--text-only :is(
    .api-support-media,.global-control-media,.payment-methods-media,
    .safe-deal-media,.detail-attention-media,.support-247-media
  ){
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:min(100%,230px) !important;
    height:150px !important;
    margin:18px auto -2px !important;
    transform:none !important;
    flex:0 0 auto;
  }

  .cta-card--photo{
    aspect-ratio:auto !important;
    min-height:0 !important;
    height:auto !important;
  }
  .cta-card--photo .cta-content{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:clamp(460px,135vw,600px) !important;
    margin-left:0 !important;
    padding:28px 20px !important;
  }
  .cta-card--photo .cta-copy-text{transform:none}
  .cta-card--photo .cta-actions{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
  }
  .cta-card--photo .cta-actions .btn{
    white-space:normal !important;
    font-size:12px !important;
    letter-spacing:0;
  }

  .footer-grid{grid-template-columns:1fr}
  .footer-grid > div:first-child{grid-column:auto}
}

@media (max-width:360px){
  .header.glass,.header.is-scrolled{width:calc(100% - 12px)}
  .header > .brand{padding-inline:10px}
  .header > .brand .brand-name{font-size:10px}
  .header > .brand .brand-logo{width:34px;height:30px}
  h1{font-size:clamp(33px,11.2vw,40px)}
  .section-head h2{font-size:clamp(28px,9.5vw,36px)}
  .step{grid-template-columns:34px minmax(0,1fr);padding:17px 15px;gap-inline:10px}
  .privacy-section{padding:22px 17px}
}

/* --------------------------------------------------------------------------
   Privacy / terms pages: long uppercase titles and links must wrap at zoom.
   -------------------------------------------------------------------------- */
.privacy-hero h1{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}
.privacy-section img,.privacy-section svg{max-width:100%;height:auto}

@media (max-width:680px){
  .privacy-hero{min-height:auto;padding:132px 0 72px}
  .privacy-hero h1{font-size:clamp(28px,8.4vw,44px);line-height:1.04;letter-spacing:-.045em}
  .privacy-layout{gap:20px}
  .privacy-section{padding:clamp(22px,6vw,30px);border-radius:22px}
  .privacy-toc nav{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Partner page.
   -------------------------------------------------------------------------- */
.agent-benefit-card{display:flex;flex-direction:column}
.agent-benefit-card p{margin-top:auto}
.agent-showcase__content,.agent-application-copy{min-width:0}
.agent-form{width:100%;min-width:0}

@media (min-width:681px) and (max-width:1080px){
  .agent-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agent-application-card{grid-template-columns:1fr;gap:clamp(30px,5vw,45px)}
}

@media (max-width:680px){
  .agent-hero{min-height:auto;padding:124px 0 78px}
  .agent-hero__copy h1{font-size:clamp(36px,11vw,44px)}
  .agent-hero__copy .lead{white-space:normal;font-size:clamp(14px,4vw,16px)}
  .agent-benefit-card{min-height:0;padding:24px}
  .agent-benefit-card h3{margin-top:52px}
  .agent-showcase__caption{padding:clamp(32px,9vw,44px) clamp(18px,6vw,26px)}
  .agent-showcase__caption h2{font-size:clamp(29px,8.5vw,38px);overflow-wrap:anywhere}
  .agent-application-card{padding:clamp(26px,7vw,36px) clamp(18px,5.5vw,24px)}
  .agent-application-copy h2{font-size:clamp(32px,9.5vw,42px)}
  .agent-form{padding:clamp(17px,5vw,22px)}
  .agent-form .application-submit{width:100%;height:auto;min-height:56px}
}

/* Viewport-height units that do not jump when mobile browser chrome changes. */
@supports (height:100svh){
  .hero,.agent-hero,.privacy-hero{min-height:100svh}
}

/* Touch devices should not keep desktop hover lifts in a stuck state. */
@media (hover:none) and (pointer:coarse) and (any-hover:none){
  .bento:hover,.risk-card:hover,.overview-feature:hover,.agent-benefit-card:hover,.btn:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important}
}

/* ========================================================================== 
   Mobile-first polish v2 — phone cards, media, forms and partner hero
   ========================================================================== */

:where(section[id],main[id]){scroll-margin-top:104px}

@media (max-width:680px){
  :root{
    --sx-mobile-radius:20px;
    --sx-mobile-card-pad:clamp(18px,5.4vw,22px);
  }

  body{
    font-size:16px;
    padding-right:env(safe-area-inset-right);
    padding-left:env(safe-area-inset-left);
  }

  a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}
  input,textarea,select{font-size:16px}

  .header.glass,
  .header.is-scrolled{
    top:max(10px,env(safe-area-inset-top));
    width:calc(100% - 20px);
  }

  .section-head{
    width:100%;
    max-width:100%;
  }
  .section-head h2{
    max-width:360px;
    margin-inline:auto;
    text-wrap:balance;
  }
  .section-head p{
    max-width:350px;
    margin-inline:auto;
  }

  /* Make the feature cards compact, consistently spaced and image-led. */
  .bento-grid--text-only{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  .bento-grid--text-only .bento{
    grid-column:auto !important;
    grid-row:auto !important;
    border-radius:var(--sx-mobile-radius);
  }
  .bento-grid--text-only .bento:not(.bento-coverage){
    display:flex !important;
    flex-direction:column;
    min-height:258px !important;
    padding:var(--sx-mobile-card-pad) !important;
  }
  .bento-grid--text-only :is(
    .api-support-copy,.global-control-copy,.payment-methods-copy,
    .safe-deal-copy,.detail-attention-copy,.support-247-copy
  ){
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    pointer-events:auto;
  }
  .bento-grid--text-only :is(
    .api-support-copy,.global-control-copy,.payment-methods-copy,
    .safe-deal-copy,.detail-attention-copy,.support-247-copy
  ) h3{
    width:auto !important;
    max-width:none !important;
    margin:0 0 9px !important;
    font-size:18px;
    line-height:1.28;
  }
  .bento-grid--text-only :is(
    .api-support-copy,.global-control-copy,.payment-methods-copy,
    .safe-deal-copy,.detail-attention-copy,.support-247-copy
  ) p{
    position:static !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.62 !important;
  }
  .bento-grid--text-only :is(
    .api-support-media,.global-control-media,.payment-methods-media,
    .safe-deal-media,.detail-attention-media,.support-247-media
  ){
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:min(100%,220px) !important;
    height:132px !important;
    margin:auto auto -2px !important;
    transform:none !important;
    flex:0 0 132px;
  }
  .bento-grid--text-only :is(
    .api-support-media,.global-control-media,.payment-methods-media,
    .safe-deal-media,.detail-attention-media,.support-247-media
  ) img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  .bento-grid--text-only .bento-coverage{
    display:flex !important;
    flex-direction:column;
    min-height:300px !important;
    padding:var(--sx-mobile-card-pad) !important;
  }
  .bento-grid--text-only .bento-coverage > h3{
    margin:0 0 9px;
    font-size:20px;
    line-height:1.26;
  }
  .bento-grid--text-only .bento-coverage > p{
    font-size:13px;
    line-height:1.62;
  }
  .bento-grid--text-only .coverage-map{
    position:relative;
    inset:auto;
    width:calc(100% + 8px);
    height:170px;
    margin:auto -4px -10px;
    flex:0 0 170px;
  }
  .bento-grid--text-only .coverage-map img{
    width:100%;
    max-width:320px;
    transform:translateY(8px) scale(1.03);
  }

  /* Process cards: large touch-friendly rows without unnecessary empty space. */
  .process-section .steps{gap:10px}
  .process-section .step{
    min-height:0;
    padding:18px;
    border-radius:var(--sx-mobile-radius);
  }
  .process-section .step h3{
    margin:0 0 6px;
    font-size:17px;
    line-height:1.34;
  }
  .process-section .step p{
    font-size:13px;
    line-height:1.62;
  }

  /* Risk cards keep the artwork prominent while reducing excess height. */
  .risk-grid{gap:12px}
  .risk-card{
    padding:18px;
    border-radius:var(--sx-mobile-radius);
  }
  .risk-card__visual,
  .risk-card--low .risk-card__visual,
  .risk-card--medium .risk-card__visual,
  .risk-card--high .risk-card__visual,
  .risk-card--integrators .risk-card__visual{
    height:142px;
    min-height:142px;
  }
  .risk-card__intro{
    font-size:12.5px;
    line-height:1.55;
  }
  .risk-card li{
    min-height:38px;
    padding-block:8px;
    font-size:12.5px;
    line-height:1.42;
  }

  /* 2 × 2 mobile dashboard instead of eight long full-width rows. */
  .business-overview-card .overview-stats,
  .business-overview-card .overview-features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .business-overview-card .overview-stats > div{
    min-height:142px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:22px 10px !important;
    border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    text-align:center;
  }
  .business-overview-card .overview-stats > div:nth-child(2n){border-right:0 !important}
  .business-overview-card .overview-stats > div:nth-last-child(-n+2){border-bottom:0 !important}
  .business-overview-card .overview-stats strong{
    font-size:clamp(30px,9vw,38px);
  }
  .business-overview-card .overview-stats span{
    max-width:130px;
    font-size:10px;
    line-height:1.45;
  }

  .business-overview-card .overview-features{
    border-top:0;
  }
  .business-overview-card .overview-feature{
    min-height:218px;
    gap:8px;
    padding:18px 12px 20px;
    border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
  }
  .business-overview-card .overview-feature:nth-child(2n){border-right:0 !important}
  .business-overview-card .overview-feature:nth-last-child(-n+2){border-bottom:0 !important}
  .overview-feature__visual{
    width:min(100%,130px);
    height:82px;
  }
  .overview-feature__copy{
    max-width:145px;
    text-align:center;
  }
  .overview-feature__copy h3{
    font-size:12.5px;
    line-height:1.35;
  }
  .overview-feature__copy p{
    margin-top:6px;
    font-size:10px;
    line-height:1.5;
  }

  /* CTA and forms remain readable and avoid iOS input zoom. */
  .cta-card--photo .cta-content h2{
    font-size:clamp(30px,8.6vw,38px) !important;
    line-height:1.04;
  }
  .cta-card--photo .cta-content p{
    font-size:13px;
    line-height:1.62;
  }
  .application-field input,
  .application-field textarea{
    min-height:52px;
    font-size:16px;
  }

  /* Partner page: text first, artwork below — never on top of the copy. */
  .agent-hero{
    min-height:0 !important;
    align-items:flex-start;
    padding:126px 0 clamp(310px,84vw,370px) !important;
  }
  .agent-hero__inner{z-index:3}
  .agent-hero__copy{
    max-width:100%;
    margin:0 auto;
    text-align:center;
  }
  .agent-hero__copy .eyebrow{
    max-width:320px;
    margin:0 auto 18px;
    font-size:9px;
    line-height:1.55;
  }
  .agent-hero__copy h1{
    max-width:360px;
    margin:0 auto 22px;
    font-size:clamp(36px,10.2vw,43px) !important;
    line-height:1.02;
    text-wrap:balance;
  }
  .agent-hero__copy .lead{
    max-width:345px;
    margin-inline:auto;
    font-size:14px !important;
    line-height:1.65;
  }
  .agent-hero__copy .hero-actions{
    margin-top:30px;
  }
  .agent-hero__handshake-bg{
    top:auto;
    bottom:0;
    height:clamp(310px,84vw,370px);
    background-position:center 48% !important;
    background-size:cover;
    opacity:.94;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);
  }
  .agent-hero__handshake-bg::before{
    background:
      linear-gradient(180deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.22) 22%,rgba(5,5,5,.08) 74%,rgba(5,5,5,.5) 100%) !important;
  }
  .agent-hero__handshake-bg::after{opacity:.55}

  .agent-benefit-grid{gap:12px}
  .agent-benefit-card{
    min-height:190px;
    padding:22px;
    border-radius:var(--sx-mobile-radius);
  }
  .agent-benefit-card h3{
    margin:34px 0 10px;
    font-size:18px;
    line-height:1.3;
  }
  .agent-benefit-card p{
    font-size:13px;
    line-height:1.65;
  }
  .agent-showcase,
  .agent-application-card,
  .agent-form{border-radius:var(--sx-mobile-radius)}
  .agent-showcase__caption{padding:34px 20px}
  .agent-showcase__caption h2{
    font-size:clamp(28px,8vw,34px);
    line-height:1.1;
  }
  .agent-application-card{
    padding:28px 18px;
    gap:24px;
  }
  .agent-application-copy h2{
    font-size:clamp(32px,9vw,39px);
  }
  .agent-form{padding:18px}
}

@media (max-width:360px){
  .bento-grid--text-only .bento:not(.bento-coverage){min-height:248px !important}
  .bento-grid--text-only :is(
    .api-support-media,.global-control-media,.payment-methods-media,
    .safe-deal-media,.detail-attention-media,.support-247-media
  ){
    height:122px !important;
    flex-basis:122px;
  }
  .business-overview-card .overview-stats > div{min-height:132px}
  .business-overview-card .overview-feature{min-height:208px;padding-inline:9px}
  .overview-feature__visual{width:116px;height:76px}
  .agent-hero{padding-bottom:300px !important}
  .agent-hero__handshake-bg{height:300px}
}

/* --------------------------------------------------------------------------
   Mobile header alignment: keep the language selector in the right control
   group, directly beside the menu button instead of centering it in the
   remaining header space.
   -------------------------------------------------------------------------- */
@media (max-width:680px){
  .header.glass,
  .header.is-scrolled{
    justify-content:flex-start;
    column-gap:8px;
  }

  .header > .header-actions{
    margin-left:auto;
    margin-right:0;
  }

  .header > .menu-btn{
    margin-left:0;
    margin-right:0;
  }
}

/* ========================================================================== 
   Mobile reveal reliability fix — 2026-08-06

   On touch devices GSAP ScrollTrigger / IntersectionObserver can occasionally
   miss a reveal after the mobile browser toolbar changes the viewport height
   or after lazy images resize a section. Content must never remain hidden.
   The desktop reveal animation is preserved unchanged.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  main .section:not(.hero) .reveal,
  main .risk-card,
  .agent-reveal,
  .privacy-section{
    opacity:1 !important;
    visibility:visible !important;
    transition-delay:0s !important;
    animation:none !important;
  }
}

html.sx-mobile-reveal-safe main .section:not(.hero) .reveal,
html.sx-mobile-reveal-safe main .risk-card,
html.sx-mobile-reveal-safe .agent-reveal,
html.sx-mobile-reveal-safe .privacy-section{
  opacity:1 !important;
  visibility:visible !important;
  transition-delay:0s !important;
}


/* ========================================================================== 
   CTA card — dedicated mobile image layout (2026-08-06)

   The desktop artwork is very wide. On phones it used to be enlarged with
   object-fit:cover, which cropped most of the devices and placed them behind
   the copy. Mobile now uses a dedicated crop in its own visual area below the
   text and actions. Desktop/tablet composition is unchanged.
   ========================================================================== */
.cta-card--photo .cta-photo-media picture{
  display:block;
  width:100%;
  height:100%;
}

@media (max-width:680px){
  .cta-section > .container{
    width:min(100% - 20px,var(--max)) !important;
  }

  .cta-card--photo{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;
    border-radius:24px !important;
    background:#070809 !important;
    isolation:isolate;
  }

  .cta-card--photo::before{
    content:none !important;
    display:none !important;
  }

  .cta-card--photo .cta-content{
    position:relative !important;
    z-index:2 !important;
    order:1;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:28px 20px 18px !important;
    justify-content:flex-start !important;
    background:linear-gradient(180deg,#090a0b 0%,#070809 100%);
  }

  .cta-card--photo .cta-copy-text{
    transform:none !important;
  }

  .cta-card--photo .cta-content .eyebrow{
    margin-bottom:14px !important;
  }

  .cta-card--photo .cta-content h2{
    max-width:430px !important;
    margin-bottom:14px !important;
    font-size:clamp(30px,8.6vw,39px) !important;
    line-height:1.04 !important;
    text-wrap:balance;
  }

  .cta-card--photo .cta-content p{
    max-width:440px !important;
    font-size:13px !important;
    line-height:1.58 !important;
  }

  .cta-card--photo .cta-actions{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:none !important;
    margin-top:20px !important;
    gap:9px !important;
  }

  .cta-card--photo .cta-actions .btn{
    min-height:52px !important;
    height:52px !important;
    padding-inline:16px !important;
    font-size:12px !important;
    white-space:normal !important;
  }

  .cta-card--photo .cta-photo-media{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    order:2;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:29 / 20;
    margin:0 !important;
    overflow:hidden !important;
    background:#050607;
  }

  .cta-card--photo .cta-photo-media::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,#070809 0%,rgba(7,8,9,.72) 8%,rgba(7,8,9,0) 24%);
  }

  .cta-card--photo .cta-photo-media picture,
  .cta-card--photo .cta-photo-media img{
    width:100% !important;
    height:100% !important;
  }

  .cta-card--photo .cta-photo-media img{
    display:block !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
  }
}

@media (max-width:380px){
  .cta-card--photo .cta-content{
    padding:24px 16px 16px !important;
  }

  .cta-card--photo .cta-content h2{
    font-size:clamp(28px,8.8vw,34px) !important;
  }

  .cta-card--photo .cta-photo-media{
    aspect-ratio:4 / 3;
  }
}


/* ========================================================================== 
   Smooth card motion — V12
   One active compositor layer, no full-grid updates during pointer movement.
   ========================================================================== */
.risk-card.tilt{
  --sx-rotate-x:0deg;
  --sx-rotate-y:0deg;
  transform-origin:center center;
  will-change:auto;
  transition:border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease,
    transform .22s cubic-bezier(.2,.8,.2,1) !important;
}

/* Keep cards perfectly straight after reveal, but never override the
   temporary GSAP entrance transform while they slide into view. */
.risk-card.tilt:not(.is-scroll-revealing):not(.is-pointer-tilting){
  transform:none !important;
}

.risk-card.tilt.is-scroll-revealing{
  will-change:transform,opacity;
  pointer-events:none;
  transition:none !important;
}

.risk-card.tilt.is-pointer-tilting:not(.is-scroll-revealing){
  transform:perspective(760px)
    rotateX(var(--sx-rotate-x))
    rotateY(var(--sx-rotate-y))
    translate3d(0,-5px,0) !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  transition:border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease,
    transform 0s linear !important;
}

@media (any-hover:hover), (any-pointer:fine){
  .risk-card.tilt:hover:not(.is-pointer-tilting):not(.is-scroll-revealing){
    transform:translate3d(0,-4px,0) !important;
  }

  .why-section .bento.tilt:hover:not(.is-pointer-tilting){
    transform:translateY(-5px);
  }

  .overview-feature:hover{
    transform:translateY(-4px);
  }

  .agent-benefit-card.agent-reveal.is-visible:hover{
    transform:translateY(-6px);
  }
}

.why-section .bento.tilt.is-pointer-tilting,
.agent-benefit-card.is-pointer-tilting{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  transition:border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease,
    transform 0s linear !important;
}

/* ========================================================================== 
   Guaranteed simultaneous section reveal — V20
   The whole content group of each section moves as one compositor layer, so
   headings, cards and blocks begin in exactly the same frame on desktop and
   mobile. This also works for local file:// launches without GSAP or CDN.
   ========================================================================== */
html.sx-reveal-v20 main > .section:not(.hero):not(.agent-hero),
html.sx-reveal-v20 .footer{
  perspective:1400px;
}

html.sx-reveal-v20 main > .section:not(.hero):not(.agent-hero) > .container,
html.sx-reveal-v20 .footer > .footer-grid{
  opacity:0 !important;
  transform:translate3d(0,92px,0) scale(.925) !important;
  transform-origin:center 65%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none;
  transition:
    opacity 1.32s cubic-bezier(.18,.78,.24,1),
    transform 1.32s cubic-bezier(.18,.78,.24,1) !important;
}

html.sx-reveal-v20 main > .section.sx-v20-visible:not(.hero):not(.agent-hero) > .container,
html.sx-reveal-v20 .footer.sx-v20-visible > .footer-grid{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
  pointer-events:auto;
}

html.sx-reveal-v20 main > .section.sx-v20-finished:not(.hero):not(.agent-hero) > .container,
html.sx-reveal-v20 .footer.sx-v20-finished > .footer-grid{
  will-change:auto;
}

html.sx-reveal-v20 main > .section.sx-v20-reveal-section:not(.sx-v20-finished):not(.hero):not(.agent-hero) > .container,
html.sx-reveal-v20 .footer.sx-v20-reveal-section:not(.sx-v20-finished) > .footer-grid{
  will-change:transform,opacity;
}

/* Legacy per-element reveal systems are neutralized inside the V20 section
   layer so they cannot hide text or animate cards a second time. */
.sx-v20-reveal-section .sx-unified-reveal-child{
  opacity:1 !important;
  visibility:visible !important;
  translate:none !important;
  rotate:none !important;
  scale:none !important;
  animation:none !important;
  transition-delay:0ms !important;
}

@media (max-width:900px){
  html.sx-reveal-v20 main > .section:not(.hero):not(.agent-hero) > .container,
  html.sx-reveal-v20 .footer > .footer-grid{
    transform:translate3d(0,68px,0) scale(.945) !important;
    transition-duration:1.16s !important;
  }

  html.sx-reveal-v20 main > .section.sx-v20-visible:not(.hero):not(.agent-hero) > .container,
  html.sx-reveal-v20 .footer.sx-v20-visible > .footer-grid{
    transform:translate3d(0,0,0) scale(1) !important;
  }
}

/* styles.css contains a global reduced-motion rule that sets every transition
   to 0.01ms. The user explicitly requested a visible scroll reveal, so this
   component keeps a gentler but still clearly visible transition. */
@media (prefers-reduced-motion:reduce){
  html.sx-reveal-v20 main > .section:not(.hero):not(.agent-hero) > .container,
  html.sx-reveal-v20 .footer > .footer-grid{
    transition-duration:.86s !important;
    transition-timing-function:cubic-bezier(.22,.7,.28,1) !important;
  }
}

/* --------------------------------------------------------------------------
   Business overview cards — visual match to the supplied reference.
   Scope intentionally limited to #business-overview.
   -------------------------------------------------------------------------- */
#business-overview .business-overview-card{
  --overview-line:rgba(255,255,255,.105);
  --overview-accent:#ff5148;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.17);
  border-radius:30px;
  background:
    radial-gradient(520px 280px at 35% 22%,rgba(106,43,38,.13),transparent 64%),
    radial-gradient(440px 260px at 63% 56%,rgba(107,43,35,.10),transparent 66%),
    linear-gradient(112deg,rgba(255,255,255,.035),rgba(255,255,255,.006) 38%,rgba(255,255,255,.018) 72%,rgba(255,255,255,.006)),
    rgba(9,10,11,.73);
  box-shadow:
    0 34px 90px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(255,255,255,.012);
  backdrop-filter:blur(12px) saturate(108%);
  -webkit-backdrop-filter:blur(12px) saturate(108%);
}
#business-overview .business-overview-card::before{
  z-index:0;
  background:
    radial-gradient(circle at 8% -7%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 34%);
  opacity:.9;
}
#business-overview .business-overview-card .overview-stats{
  position:relative;
  z-index:1;
  min-height:174px;
  border-bottom:1px solid var(--overview-line);
}
#business-overview .business-overview-card .overview-stats > div{
  position:relative;
  min-height:174px;
  padding:48px 28px 29px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border-right:1px solid var(--overview-line);
}
#business-overview .business-overview-card .overview-stats > div:last-child{
  border-right:0;
}
#business-overview .business-overview-card .overview-stats > div::before{
  content:"";
  position:absolute;
  top:28px;
  left:30px;
  width:26px;
  height:1px;
  background:linear-gradient(90deg,var(--overview-accent),rgba(255,81,72,.05));
  opacity:.9;
}
#business-overview .business-overview-card .overview-stats strong{
  display:block;
  margin:0;
  color:#f4f4f5;
  background:none;
  -webkit-background-clip:initial;
  font-size:55px;
  line-height:.98;
  font-weight:760;
  letter-spacing:-.055em;
  text-shadow:0 0 24px rgba(255,255,255,.025);
}
#business-overview .business-overview-card .overview-stats span{
  display:block;
  margin-top:20px;
  color:#777b83;
  font-size:11px;
  line-height:1.35;
  font-weight:500;
}

#business-overview .business-overview-card .overview-features{
  position:relative;
  z-index:1;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:transparent;
}
#business-overview .overview-feature{
  position:relative;
  min-height:292px;
  padding:20px 20px 27px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  border-right:1px solid var(--overview-line);
  background:transparent;
  overflow:hidden;
  transition:background .35s ease;
}
#business-overview .overview-feature:last-child{border-right:0}
#business-overview .overview-feature:hover{
  transform:none;
  background:linear-gradient(180deg,rgba(255,255,255,.017),rgba(255,255,255,.006));
}

/* Inset technical frame used by each lower card. */
#business-overview .overview-feature::before{
  content:"";
  position:absolute;
  z-index:0;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-top:1px solid rgba(255,255,255,.075);
  border-right:1px solid rgba(255,255,255,.075);
  border-radius:0 13px 0 0;
  pointer-events:none;
}
#business-overview .overview-feature::after{
  content:"";
  position:absolute;
  z-index:0;
  left:10px;
  bottom:10px;
  width:38px;
  height:38px;
  border-left:1px solid rgba(255,81,72,.13);
  border-bottom:1px solid rgba(255,81,72,.13);
  border-radius:0 0 0 13px;
  opacity:1;
  transform:none;
  background:none;
  pointer-events:none;
}
#business-overview .overview-feature__meta{
  position:relative;
  z-index:2;
  width:100%;
  height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  color:#72767e;
  pointer-events:none;
}
#business-overview .overview-feature__meta span{
  width:31px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  color:#d9dadd;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.03em;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
#business-overview .overview-feature__meta i{
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--overview-accent);
  box-shadow:0 0 8px rgba(255,81,72,.26);
}
#business-overview .overview-feature__meta b{
  overflow:hidden;
  color:#777b83;
  font-size:8px;
  line-height:1;
  font-weight:800;
  letter-spacing:.20em;
  white-space:nowrap;
}
#business-overview .overview-feature__visual{
  position:relative;
  z-index:1;
  width:160px;
  max-width:100%;
  height:96px;
  margin-top:18px;
  color:#c3c6ca;
  opacity:.92;
}
#business-overview .overview-feature__copy{
  position:relative;
  z-index:1;
  max-width:245px;
  margin-top:24px;
  text-align:center;
}
#business-overview .overview-feature__copy h3{
  margin:0;
  color:#ececee;
  font-size:15px;
  line-height:1.34;
  font-weight:750;
  letter-spacing:-.025em;
}
#business-overview .overview-feature__copy p{
  margin:11px 0 0;
  color:#777b83;
  font-size:11px;
  line-height:1.52;
}

@media (max-width:1000px){
  #business-overview .business-overview-card::after{display:none}
  #business-overview .business-overview-card .overview-stats,
  #business-overview .business-overview-card .overview-features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #business-overview .business-overview-card .overview-stats > div{
    border-right:1px solid var(--overview-line) !important;
    border-bottom:1px solid var(--overview-line) !important;
  }
  #business-overview .business-overview-card .overview-stats > div:nth-child(2n){border-right:0 !important}
  #business-overview .business-overview-card .overview-stats > div:nth-last-child(-n+2){border-bottom:0 !important}
  #business-overview .overview-feature{
    border-right:1px solid var(--overview-line) !important;
    border-bottom:1px solid var(--overview-line) !important;
  }
  #business-overview .overview-feature:nth-child(2n){border-right:0 !important}
  #business-overview .overview-feature:nth-last-child(-n+2){border-bottom:0 !important}
}

@media (max-width:680px){
  #business-overview .business-overview-card{border-radius:22px}
  #business-overview .business-overview-card .overview-stats > div{
    min-height:136px;
    padding:37px 10px 18px !important;
  }
  #business-overview .business-overview-card .overview-stats > div::before{
    top:20px;
    left:18px;
    width:20px;
  }
  #business-overview .business-overview-card .overview-stats strong{
    font-size:clamp(31px,9vw,39px);
  }
  #business-overview .business-overview-card .overview-stats span{
    max-width:135px;
    margin-top:14px;
    font-size:9.5px;
  }
  #business-overview .overview-feature{
    min-height:218px;
    padding:13px 10px 18px;
  }
  #business-overview .overview-feature::before{
    top:7px;
    right:7px;
    width:28px;
    height:28px;
  }
  #business-overview .overview-feature::after{
    left:7px;
    bottom:7px;
    width:28px;
    height:28px;
  }
  #business-overview .overview-feature__meta{
    height:27px;
    gap:7px;
    padding:0;
  }
  #business-overview .overview-feature__meta span{
    width:28px;
    height:22px;
    border-radius:7px;
    font-size:8px;
  }
  #business-overview .overview-feature__meta i{width:4px;height:4px}
  #business-overview .overview-feature__meta b{font-size:6.5px;letter-spacing:.14em}
  #business-overview .overview-feature__visual{
    width:min(100%,124px);
    height:76px;
    margin-top:8px;
  }
  #business-overview .overview-feature__copy{
    max-width:150px;
    margin-top:6px;
  }
  #business-overview .overview-feature__copy h3{font-size:12.5px}
  #business-overview .overview-feature__copy p{margin-top:6px;font-size:9.5px;line-height:1.45}
}

/* Mobile hero artwork boundary fix — keep the hero image fully inside its container. */
@media (max-width:680px){
  .hero-visual{
    overflow:hidden !important;
  }
  .hero-interface{
    inset:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .hero-interface__image{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    transform:none !important;
    object-fit:contain !important;
    object-position:center !important;
  }
}

/* Mobile GEO artwork size only. */
@media (max-width:680px){
  .geo-coverage-image{
    width:134% !important;
    max-width:none !important;
    margin-left:-17% !important;
  }
}

/* ========================================================================== 
   Mobile section headlines — wider, cleaner line breaks (v21)
   Scope: homepage mobile only. Desktop/tablet above 680px is untouched.
   ========================================================================== */
@media (max-width:680px){
  /* Let these four homepage headings use the real phone width instead of the
     generic 360px cap. This produces longer lines and fewer awkward breaks. */
  .why-section .section-head h2,
  .process-section .section-head h2,
  .integrations-section .section-head h2,
  .business-overview .section-head h2{
    width:100% !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding-inline:2px;
    text-wrap:wrap !important;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    letter-spacing:-.052em;
    font-weight:700;
  }

  /* "Инфраструктура, рассчитанная на рост" */
  .why-section .section-head h2{
    font-size:clamp(30px,8.5vw,36px) !important;
    line-height:1.035;
  }

  /* Keep the paragraph under the first heading broad as well. */
  .why-section .section-head p{
    width:100%;
    max-width:420px !important;
    padding-inline:4px;
    font-size:clamp(14px,3.75vw,16px) !important;
    line-height:1.55;
    text-wrap:wrap;
  }

  /* "От подключения до первых платежей" */
  .process-section .section-head h2{
    font-size:clamp(30px,8.35vw,35px) !important;
    line-height:1.035;
  }

  /* Long GEO statement — slightly smaller so it reads in longer, calmer lines. */
  .integrations-section .section-head h2{
    font-size:clamp(26px,7.35vw,31px) !important;
    line-height:1.075;
    letter-spacing:-.047em;
  }

  /* "Мы не просто предоставляем сервис..." */
  .business-overview .section-head h2{
    font-size:clamp(29px,8.05vw,34px) !important;
    line-height:1.045;
  }
}

@media (max-width:380px){
  .why-section .section-head h2,
  .process-section .section-head h2{
    font-size:29px !important;
  }
  .business-overview .section-head h2{
    font-size:28px !important;
  }
  .integrations-section .section-head h2{
    font-size:25px !important;
    line-height:1.08;
  }
}

/* ========================================================================== 
   Hero first-screen top gap reduction — v23
   Pulls the hero copy and payment artwork closer to the floating header on
   desktop, without changing the mobile composition.
   ========================================================================== */
@media (min-width:1001px){
  .hero{
    padding-top:30px !important;
  }
}

@media (min-width:681px) and (max-width:1000px){
  .hero{
    padding-top:54px !important;
  }
}

/* ========================================================================== 
   Desktop hero bottom-gap trim
   Keep the hero copy/artwork at the exact same vertical position, but remove
   the unused space below them. The dynamic top padding reproduces the previous
   100vh centering; only the section's lower edge is brought upward.
   ========================================================================== */
@media (min-width:1001px){
  .hero{
    min-height:0 !important;
    align-items:flex-start !important;
    padding-top:calc(30px + max(0px, 50vh - 395px)) !important;
    padding-bottom:40px !important;
  }

  .why-section--after-hero{
    padding-top:24px !important;
  }
}

/* ========================================================================== 
   Desktop hero copy fine-tune
   Move only the headline + lead slightly lower; keep the hero artwork and
   section geometry unchanged.
   ========================================================================== */
@media (min-width:1001px){
  .hero-copy{
    transform:translateY(18px);
  }
}

/* Mobile hero-to-next-section gap trim — v24.
   Removes only the excessive empty space after the hero artwork on phones. */
@media (max-width:680px){
  .hero{
    padding-bottom:0 !important;
  }

  .why-section--after-hero{
    padding-top:24px !important;
  }
}

/* ========================================================================== 
   Mobile process list — flat reference-style rows
   Mobile only: replaces rounded cards with compact text rows and separators.
   ========================================================================== */
@media (max-width:680px){
  .process-section .steps{
    display:block !important;
    width:calc(100% + 28px) !important;
    margin:0 -14px !important;
    padding:0 !important;
    gap:0 !important;
  }

  .process-section .process-line,
  .process-section .step-dot{
    display:none !important;
  }

  .process-section .step{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:20px 28px 21px !important;
    text-align:left !important;
    border:0 !important;
    border-radius:0 !important;
    border-top:1px solid rgba(255,255,255,.11) !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .process-section .step:last-child{
    border-bottom:1px solid rgba(255,255,255,.11) !important;
  }

  .process-section .step-num{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
    height:auto !important;
    margin:0 0 7px !important;
    padding:0 !important;
    color:#7d8086 !important;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    letter-spacing:.14em !important;
  }

  .process-section .step-num::before{
    content:"";
    width:5px;
    height:5px;
    flex:0 0 5px;
    background:#f36a21;
  }

  .process-section .step h3{
    display:block !important;
    min-height:0 !important;
    margin:0 0 5px !important;
    padding:0 !important;
    color:#f3f3f3 !important;
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    letter-spacing:-.025em !important;
    text-align:left !important;
    white-space:normal !important;
  }

  .process-section .step p{
    display:block !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    color:#8f9298 !important;
    font-size:12.5px !important;
    line-height:1.48 !important;
    text-align:left !important;
  }
}

/* ========================================================================== 
   Mobile section-gap trim — v26
   Reduce only the oversized empty space around GEO coverage on phones.
   Desktop/tablet and all inner content geometry remain unchanged.
   ========================================================================== */
@media (max-width:680px){
  #features.risk-section{
    padding-bottom:24px !important;
  }

  #integration.geo-section{
    padding-top:28px !important;
    padding-bottom:26px !important;
  }

  #business-overview.business-overview{
    padding-top:30px !important;
  }
}


/* ========================================================================== 
   Mobile process-to-risk gap trim — v27
   Reduce only the oversized empty space between the last process row and the
   next section on phones. Desktop/tablet and inner card geometry stay intact.
   ========================================================================== */
@media (max-width:680px){
  .process-section{
    padding-bottom:24px !important;
  }

  #features.risk-section{
    padding-top:24px !important;
  }
}


/* ========================================================================== 
   Mobile CTA artwork removal — v28
   On phones, finish the CTA card directly below the action buttons.
   Desktop/tablet keep the existing photo composition unchanged.
   ========================================================================== */
@media (max-width:680px){
  .cta-card--photo .cta-photo-media{
    display:none !important;
  }

  .cta-card--photo .cta-content{
    padding-bottom:20px !important;
  }
}


/* ==========================================================================
   Mobile compact footer — v29
   Keep the three navigation groups in one row on phones and reduce the
   footer height. Desktop/tablet remain unchanged.
   ========================================================================== */
@media (max-width:680px){
  .footer{
    padding:36px 0 18px !important;
  }

  .footer-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:26px 10px !important;
    align-items:start !important;
  }

  .footer-grid > div:first-child{
    grid-column:1 / -1 !important;
  }

  .footer-grid > div:not(:first-child){
    min-width:0 !important;
    gap:9px !important;
  }

  .footer-grid > div:first-child p{
    max-width:280px !important;
    margin-top:14px !important;
    font-size:11px !important;
    line-height:1.55 !important;
  }

  .footer-grid h4{
    margin:0 0 10px !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  .footer-grid > div:not(:first-child) a,
  .footer-grid > div:not(:first-child) span{
    overflow-wrap:anywhere !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }

  .footer-bottom{
    margin-top:28px !important;
    padding-top:16px !important;
    gap:5px !important;
    font-size:9px !important;
  }
}

/* ========================================================================== 
   Mobile partner-section gap trim — v28
   Keeps the showcase card exactly where it is internally, but removes the
   oversized vertical whitespace before and after it on phones only.
   ========================================================================== */
@media (max-width:680px){
  .agents-page .agent-benefits{
    padding-bottom:24px !important;
  }

  .agents-page .agent-showcase-section{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }

  .agents-page .agent-application-section{
    padding-top:20px !important;
  }
}


/* ==========================================================================
   Mobile native scroll stability — 2026-08-11
   Keep touch scrolling fully browser-native. Desktop smooth scrolling remains
   controlled by smooth-scroll.js; mobile hash jumps use instant/native scroll.
   ========================================================================== */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  html,body{scroll-behavior:auto !important}
}