/* ============================================================
   INDIVIDUAL . Payments & FX (individual-payments-fx.html) . 2026-10-15
   Ground truth: ../otabek 15.10/Individual - Make payments here or abroad/Spec+Html/
                 digidoe-payments-page.html + digidoe-payments-page-spec.md; the PDF is 1440 x 7024 pt.
   Figma "DD-Website" frame "Individual - Make payments here or abroad" (1156:6949).

   Same recipe as sept-sme.css: <main> IS the designer's markup (classes ipay-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes:
     .x                 -> [data-skin="ipay"] #main .ipay-x
     hero photo         -> his <img> under his SVG radial shade, data: URI -> sept/individual-payments-fx/hero.webp
     body min-width     -> gone (D1): his numbers hold from 1300 up; the block at the end relaxes them below
     nav + footer       -> his rules dropped, chrome stays live (D2): dd-nav.css + sept-footer.css
   data-followup="ind" is OFF this page, as on companies: followup.css forces h3 20px, every p #5C5750 and
   every non-.btn link #B75F00 with !important inside main, which beat his 24px card titles and his colours.
   Its two chrome blocks (black header CTAs, cookie Accept) are repeated at the end, keyed on data-skin.

   Deviations from his HTML, each on record (Yuval 2026-10-15 "use the live copy but all the designer's
   visual directives"):
     hero       live hero chips dropped (03.10 precedent, "use the designer's version")
     copy       "USD & AED" -> "USD and AED"; "Rate and Fees" -> "Rate and fees"; the schedule button carries
                the live arrow, so its pill is min-width 380 instead of width 380 (grows ~16px)
     titles     the four audience card titles stay links to their pages (live routes), in his title colour
     closing    the live second note ("Fees, limits, allowances and FX methodology …") returns as a second
                14px line in his note style; the section grows 21px (841 -> 862, page 7024 -> 7045)
     reveals    kept (D3): scroll-driven, same timing family as alt-home.css, defined at the end.
   ============================================================ */

html[data-skin="ipay"] body{background:#fff}

/* ---------- resets his page relied on, scoped to main ---------- */
[data-skin="ipay"] main{
  width:100%;overflow-x:clip;color:#121212;font-size:16px;line-height:normal;letter-spacing:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
}
[data-skin="ipay"] #main *{box-sizing:border-box;margin:0;padding:0}
[data-skin="ipay"] #main section{width:100%;padding:0;background:#fff;position:relative;height:auto;min-height:0}
[data-skin="ipay"] #main h1,[data-skin="ipay"] #main h2,[data-skin="ipay"] #main h3{
  margin:0;font-weight:inherit;letter-spacing:normal!important;line-height:normal;text-wrap:auto;font-family:inherit;max-width:none;
}
[data-skin="ipay"] #main p{margin:0;font-weight:inherit;letter-spacing:normal!important;line-height:inherit;text-wrap:auto;font-family:inherit;max-width:none;color:inherit}
[data-skin="ipay"] #main a{color:inherit;text-decoration:none}
[data-skin="ipay"] #main a:hover{text-decoration:none}
[data-skin="ipay"] #main a:focus-visible{outline:2px solid #F37F00;outline-offset:2px}
[data-skin="ipay"] #main img,[data-skin="ipay"] #main svg{display:block;max-width:none}
[data-skin="ipay"] #main section::before,[data-skin="ipay"] #main section::after{content:none!important;display:none!important}

/* ---------- his stylesheet, prefixed ---------- */
[data-skin="ipay"] #main .ipay-wrap{width:1440px;max-width:none;margin:0 auto;padding:0;position:relative}

/* type tokens */
[data-skin="ipay"] #main .ipay-h-section{font-weight:500;font-size:44px;line-height:53px;color:#121212}
[data-skin="ipay"] #main .ipay-h-card{font-weight:500;font-size:24px;line-height:29px;color:#121212}
[data-skin="ipay"] #main .ipay-body{font-weight:400;font-size:16px;line-height:24px}
[data-skin="ipay"] #main .ipay-c555{color:#555049}
[data-skin="ipay"] #main .ipay-c5c5{color:#5C5750}
[data-skin="ipay"] #main .ipay-center{text-align:center}

/* buttons */
[data-skin="ipay"] #main .ipay-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:0 24px;border-radius:100px;border:0;font-family:inherit;font-size:16px;line-height:19px;white-space:nowrap;cursor:pointer;flex-shrink:0}
[data-skin="ipay"] #main .ipay-btn-dark{background:#121212;color:#FFFFFF;font-weight:700}
[data-skin="ipay"] #main .ipay-btn-light{background:#F4F3F0;color:#555049;font-weight:500}
[data-skin="ipay"] #main .ipay-btn-white{background:#FFFFFF;color:#555049;font-weight:500}
[data-skin="ipay"] #main .ipay-btn:hover{opacity:.9}   /* spec 0.4: optional, matches the sibling page */

/* 2 hero */
[data-skin="ipay"] #main .ipay-hero .ipay-wrap{height:640px;padding:0 80px}
[data-skin="ipay"] #main .ipay-hero-card{position:relative;width:1280px;height:640px;border-radius:48px;overflow:hidden;background:#2C2620}
[data-skin="ipay"] #main .ipay-hero-card .ipay-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
[data-skin="ipay"] #main .ipay-hero-card .ipay-shade{position:absolute;inset:0;width:100%;height:100%}
[data-skin="ipay"] #main .ipay-hero-content{position:relative;height:100%;padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px}
[data-skin="ipay"] #main .ipay-hero-text{width:500px;display:flex;flex-direction:column;gap:20px}
[data-skin="ipay"] #main .ipay-hero-text h1{font-weight:500;font-size:52px;line-height:63px;color:#FFFFFF}
[data-skin="ipay"] #main .ipay-hero-text p{color:#FFFFFF;opacity:.8}
[data-skin="ipay"] #main .ipay-hero-btns{display:flex;gap:20px}
[data-skin="ipay"] #main .ipay-btn-hero1{background:#FFFFFF;color:#121212;font-weight:700}
[data-skin="ipay"] #main .ipay-btn-hero2{background:rgba(18,18,18,.16);color:#FFFFFF;font-weight:500}

/* 3 routes */
[data-skin="ipay"] #main .ipay-routes .ipay-wrap{height:872px;padding:140px 160px 180px;display:flex;gap:160px;align-items:flex-start}
[data-skin="ipay"] #main .ipay-routes-left{width:480px;display:flex;flex-direction:column;gap:20px}
[data-skin="ipay"] #main .ipay-routes-right{width:480px;display:flex;flex-direction:column;gap:30px}
[data-skin="ipay"] #main .ipay-route-card{width:480px;height:164px;background:#F4F3F0;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:20px}
[data-skin="ipay"] #main .ipay-route-head{display:flex;align-items:center;gap:16px;height:40px}
[data-skin="ipay"] #main .ipay-flag{width:40px;height:40px;flex-shrink:0}
[data-skin="ipay"] #main .ipay-flag-pair{position:relative;width:72px;height:40px;flex-shrink:0}
[data-skin="ipay"] #main .ipay-flag-pair img{position:absolute;top:0;width:40px;height:40px}
[data-skin="ipay"] #main .ipay-flag-pair .ipay-f-usa{left:0;z-index:1}
[data-skin="ipay"] #main .ipay-flag-pair .ipay-f-uae{left:32px;z-index:2}
[data-skin="ipay"] #main .ipay-route-card p{font-size:16px;line-height:21.6px;color:#555049;width:420px}

/* 4 personal */
[data-skin="ipay"] #main .ipay-personal .ipay-wrap{height:902px;padding:160px 80px 40px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="ipay"] #main .ipay-divider{position:absolute;top:0;left:140px;width:1160px;height:1px;background:#D6D2C7}
[data-skin="ipay"] #main .ipay-personal h2{width:540px}
[data-skin="ipay"] #main .ipay-p-grid{width:1120px;display:grid;grid-template-columns:545px 545px;gap:30px}
[data-skin="ipay"] #main .ipay-p-card{height:243px;background:linear-gradient(111deg,#FFFFFF 0%,#F4F3F0 100%);border:1px solid #D6D2C7;border-radius:24px;padding:29px;display:flex;flex-direction:column;gap:30px}
[data-skin="ipay"] #main .ipay-p-card img{width:40px;height:40px}
[data-skin="ipay"] #main .ipay-p-text{display:flex;flex-direction:column;gap:12px;width:485px}
[data-skin="ipay"] #main .ipay-tlink{color:inherit}
[data-skin="ipay"] #main .ipay-tlink:hover{text-decoration:underline;text-underline-offset:3px}

/* 5 schedule */
[data-skin="ipay"] #main .ipay-schedule .ipay-wrap{height:760px;padding:100px 160px 100px 120px;display:flex;align-items:center;gap:80px}
[data-skin="ipay"] #main .ipay-schedule .ipay-img{width:560px;height:560px;object-fit:cover;flex-shrink:0}
[data-skin="ipay"] #main .ipay-sched-col{width:520px;display:flex;flex-direction:column;gap:60px;align-items:flex-start}
[data-skin="ipay"] #main .ipay-sched-text{display:flex;flex-direction:column;gap:20px}
[data-skin="ipay"] #main .ipay-sched-text h2{width:450px}
[data-skin="ipay"] #main .ipay-sched-col .ipay-btn{min-width:380px}

/* 6 fx (full width) */
[data-skin="ipay"] #main .ipay-fx{background:#F4F3F0;width:100%}
[data-skin="ipay"] #main .ipay-fx .ipay-wrap{height:899px;padding:160px 80px 180px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="ipay"] #main .ipay-fx-head{width:750px;display:flex;flex-direction:column;align-items:center;gap:30px}
[data-skin="ipay"] #main .ipay-fx-head h2{width:650px}
[data-skin="ipay"] #main .ipay-fx-cards{width:1040px;display:flex;gap:80px}
[data-skin="ipay"] #main .ipay-fx-card{width:480px;height:271px;background:#FFFFFF;border-radius:24px;box-shadow:0 12px 28px rgba(0,0,0,.06);padding:30px;display:flex;flex-direction:column;gap:45px}
[data-skin="ipay"] #main .ipay-fx-card img{width:50px;height:50px}
[data-skin="ipay"] #main .ipay-fx-text{width:420px;display:flex;flex-direction:column;gap:15px}

/* 7 rate */
[data-skin="ipay"] #main .ipay-rate .ipay-wrap{height:903px;padding:180px 80px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="ipay"] #main .ipay-rate-head{width:636px;display:flex;flex-direction:column;align-items:center;gap:20px}
[data-skin="ipay"] #main .ipay-rate-head h2{width:542px}
[data-skin="ipay"] #main .ipay-rate-cards{width:1160px;display:flex;gap:30px}
[data-skin="ipay"] #main .ipay-rate-card{flex:1 1 0;height:265px;border:1px solid #D6D2C7;border-radius:24px;padding:29px;display:flex;flex-direction:column;gap:30px}
[data-skin="ipay"] #main .ipay-rate-card img{width:40px;height:40px}
[data-skin="ipay"] #main .ipay-rate-text{display:flex;flex-direction:column;gap:10px;width:306.67px}
[data-skin="ipay"] #main .ipay-orange-link{color:#B75F00}

/* 8 compare */
[data-skin="ipay"] #main .ipay-compare .ipay-wrap{height:438px;padding:0 80px}
[data-skin="ipay"] #main .ipay-compare-card{width:1280px;height:438px;background:#F4F3F0;border-radius:48px;padding:100px 80px;display:flex;justify-content:center;align-items:center}
[data-skin="ipay"] #main .ipay-compare-inner{width:720px;display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="ipay"] #main .ipay-compare-text{display:flex;flex-direction:column;align-items:center;gap:30px;width:720px}
[data-skin="ipay"] #main .ipay-compare-text p{width:600px}
[data-skin="ipay"] #main .ipay-btn-row{display:flex;gap:20px}

/* 9 cta */
[data-skin="ipay"] #main .ipay-cta .ipay-wrap{height:auto;min-height:841px;padding:160px 80px 60px;display:flex;flex-direction:column;align-items:center;gap:120px}
[data-skin="ipay"] #main .ipay-cta-row{width:1120px;height:480px;display:flex;align-items:center;gap:120px}
[data-skin="ipay"] #main .ipay-cta-row .ipay-img{width:480px;height:480px;border-radius:48px;object-fit:cover;flex-shrink:0}
[data-skin="ipay"] #main .ipay-cta-col{width:520px;display:flex;flex-direction:column;gap:60px}
[data-skin="ipay"] #main .ipay-cta-text{display:flex;flex-direction:column;gap:20px}
[data-skin="ipay"] #main .ipay-cta-notes{display:flex;flex-direction:column;gap:0}
[data-skin="ipay"] #main .ipay-cta-note{width:1280px;font-size:14px;line-height:21px;color:#7B756D;text-align:center}

/* ---------- D3: reveals, the alt-home family (alt-home.css already rises every main section h2) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes ipay-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes ipay-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    @keyframes ipay-slide-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
    @keyframes ipay-slide-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    [data-skin="ipay"] #main .ipay-hero-card{animation:ipay-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="ipay"] #main .ipay-routes-right,[data-skin="ipay"] #main .ipay-p-grid,[data-skin="ipay"] #main .ipay-fx-cards,
    [data-skin="ipay"] #main .ipay-rate-cards,[data-skin="ipay"] #main .ipay-compare-card{animation:ipay-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
    [data-skin="ipay"] #main .ipay-routes-left,[data-skin="ipay"] #main .ipay-schedule .ipay-img,
    [data-skin="ipay"] #main .ipay-cta-row .ipay-img{animation:ipay-slide-l both;animation-timeline:view();animation-range:entry 0% entry 50%}
    [data-skin="ipay"] #main .ipay-sched-col,[data-skin="ipay"] #main .ipay-cta-col{animation:ipay-slide-r both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="ipay"] #main .ipay-wrap{width:100%;max-width:1440px}
  [data-skin="ipay"] #main .ipay-hero .ipay-wrap{height:auto;padding:0 40px}
  [data-skin="ipay"] #main .ipay-hero-card{width:100%;height:auto;min-height:560px}
  [data-skin="ipay"] #main .ipay-hero-content{min-height:560px;padding:60px}
  [data-skin="ipay"] #main .ipay-hero-text{max-width:100%}
  [data-skin="ipay"] #main .ipay-routes .ipay-wrap{height:auto;padding:100px 60px;gap:60px}
  [data-skin="ipay"] #main .ipay-routes-left,[data-skin="ipay"] #main .ipay-routes-right{width:auto;flex:1 1 0;min-width:0}
  [data-skin="ipay"] #main .ipay-route-card{width:auto;height:auto;min-height:164px}
  [data-skin="ipay"] #main .ipay-route-card p{width:auto}
  [data-skin="ipay"] #main .ipay-personal .ipay-wrap{height:auto;padding:100px 60px 40px}
  [data-skin="ipay"] #main .ipay-personal h2{width:auto;max-width:540px}
  [data-skin="ipay"] #main .ipay-p-grid{width:100%;max-width:1120px;grid-template-columns:1fr 1fr}
  [data-skin="ipay"] #main .ipay-p-card{height:auto;min-height:243px}
  [data-skin="ipay"] #main .ipay-p-text{width:auto}
  [data-skin="ipay"] #main .ipay-schedule .ipay-wrap{height:auto;padding:80px 60px;gap:60px}
  [data-skin="ipay"] #main .ipay-schedule .ipay-img{width:42%;height:auto;aspect-ratio:1/1}
  [data-skin="ipay"] #main .ipay-sched-col{width:auto;flex:1 1 0;min-width:0}
  [data-skin="ipay"] #main .ipay-sched-text h2{width:auto}
  [data-skin="ipay"] #main .ipay-sched-col .ipay-btn{min-width:0;max-width:100%}
  [data-skin="ipay"] #main .ipay-fx .ipay-wrap{height:auto;padding:100px 60px}
  [data-skin="ipay"] #main .ipay-fx-head,[data-skin="ipay"] #main .ipay-fx-head h2{width:auto;max-width:750px}
  [data-skin="ipay"] #main .ipay-fx-cards{width:100%;max-width:1040px;gap:40px}
  [data-skin="ipay"] #main .ipay-fx-card{width:auto;flex:1 1 0;min-width:0;height:auto;min-height:271px}
  [data-skin="ipay"] #main .ipay-fx-text{width:auto}
  [data-skin="ipay"] #main .ipay-rate .ipay-wrap{height:auto;padding:100px 60px}
  [data-skin="ipay"] #main .ipay-rate-head,[data-skin="ipay"] #main .ipay-rate-head h2{width:auto;max-width:636px}
  [data-skin="ipay"] #main .ipay-rate-cards{width:100%;max-width:1160px}
  [data-skin="ipay"] #main .ipay-rate-card{height:auto;min-height:265px}
  [data-skin="ipay"] #main .ipay-rate-text{width:auto}
  [data-skin="ipay"] #main .ipay-compare .ipay-wrap{height:auto;padding:0 40px}
  [data-skin="ipay"] #main .ipay-compare-card{width:100%;height:auto;padding:60px 40px}
  [data-skin="ipay"] #main .ipay-compare-inner,[data-skin="ipay"] #main .ipay-compare-text,[data-skin="ipay"] #main .ipay-compare-text p{width:auto;max-width:720px}
  [data-skin="ipay"] #main .ipay-cta .ipay-wrap{min-height:0;padding:100px 60px 60px;gap:80px}
  [data-skin="ipay"] #main .ipay-cta-row{width:100%;height:auto;gap:60px}
  [data-skin="ipay"] #main .ipay-cta-row .ipay-img{width:38%;height:auto;aspect-ratio:1/1}
  [data-skin="ipay"] #main .ipay-cta-col{width:auto;flex:1 1 0;min-width:0}
  [data-skin="ipay"] #main .ipay-cta-note{width:auto;max-width:100%}
  [data-skin="ipay"] #main .ipay-divider{left:60px;right:60px;width:auto}
}

/* ---------- chrome that followup.css carried for this page (its lines 62-66, verbatim, keyed on data-skin) ---------- */
html[data-skin="ipay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="ipay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important}
html[data-skin="ipay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="ipay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important}
html[data-skin="ipay"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}