/**
 * Ipoteco 5.2.1 — referral page visual consistency and late-load fallback.
 * One 1122px desktop artboard, scaled once by ipoteco.js like every other page.
 * All selectors are scoped to the referral page only. Header, footer, logos,
 * Elementor widget content and Theme Studio are deliberately untouched.
 */
@media (min-width:991px) {
  .ipo-app.ipx-referral-root .ipr-shell {
    width:calc(100% - 146px);
    max-width:976px;
  }
  .ipo-app.ipx-referral-root .ipr-hero {
    height:370px;
    min-height:370px;
  }
  .ipo-app.ipx-referral-root .ipr-hero-content {
    padding-top:27px;
    width:460px;
    max-width:49%;
  }
  .ipo-app.ipx-referral-root .ipr-kicker {font-size:9.5px}
  .ipo-app.ipx-referral-root .ipr-hero-title {
    font-size:43px!important;
    line-height:1.045;
    letter-spacing:-1.7px;
    margin-top:10px!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-title em {letter-spacing:-1.5px}
  .ipo-app.ipx-referral-root .ipr-hero-intro {
    max-width:430px;
    font-size:12.6px;
    line-height:1.43;
    margin-top:11px!important;
  }
  .ipo-app.ipx-referral-root .ipr-actions {
    margin-top:16px;
    gap:12px;
    flex-wrap:nowrap;
  }
  .ipo-app.ipx-referral-root .ipr-btn {
    height:40px;
    padding:0 13px;
    border-radius:9px;
    font-size:10px;
  }
  .ipo-app.ipx-referral-root .ipr-btn-primary {min-width:203px}
  .ipo-app.ipx-referral-root .ipr-btn-outline {min-width:161px}
  .ipo-app.ipx-referral-root .ipr-hero-benefits {
    max-width:465px;
    margin-top:19px;
    gap:0;
  }
  .ipo-app.ipx-referral-root .ipr-hero-benefit {
    padding:0 7px;
    gap:6px;
    min-height:33px;
    font-size:8.7px;
  }
  .ipo-app.ipx-referral-root .ipr-picto-sm {
    width:30px;
    height:30px;
    flex-basis:30px;
    padding:7px;
  }
  .ipo-app.ipx-referral-root .ipr-hero-photo {width:59%}
  .ipo-app.ipx-referral-root .ipr-hero-couple {
    top:23px;
    right:-2%;
    width:70%;
  }
  .ipo-app.ipx-referral-root .ipr-hero::after {
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 27%,rgba(255,255,255,.91) 35%,rgba(255,255,255,.33) 48%,transparent 62%);
  }
  .ipo-app.ipx-referral-root .ipr-hero-leaves {
    top:135px;left:-77px;width:177px;height:260px;
  }
  .ipo-app.ipx-referral-root .ipr-hero-floats {inset:0 0 0 48%}
  .ipo-app.ipx-referral-root .ipr-floating-sent {
    top:25px;left:8px;width:176px;min-height:64px;padding:10px 12px;
  }
  .ipo-app.ipx-referral-root .ipr-floating-sent img {width:37px;height:37px}
  .ipo-app.ipx-referral-root .ipr-floating-sent strong {font-size:10px}
  .ipo-app.ipx-referral-root .ipr-floating-send {width:22px;height:22px}
  .ipo-app.ipx-referral-root .ipr-flight {top:86px;left:22px;width:270px;height:210px}
  .ipo-app.ipx-referral-root .ipr-floating-home {
    left:71px;bottom:12px;width:172px;min-height:133px;padding:7px 7px 9px;
  }
  .ipo-app.ipx-referral-root .ipr-floating-home img {height:70px}
  .ipo-app.ipx-referral-root .ipr-floating-home strong {font-size:10px}
  .ipo-app.ipx-referral-root .ipr-floating-home-icon {
    width:42px;height:42px;left:-15px;top:-10px;padding:11px;border-radius:14px;
  }
  .ipo-app.ipx-referral-root .ipr-floating-reward {
    bottom:12px;right:5px;width:146px;min-height:130px;
    padding:12px 12px 10px;border-radius:17px;
  }
  .ipo-app.ipx-referral-root .ipr-reward-emblem {width:41px;height:41px;padding:9px;border-radius:13px}
  .ipo-app.ipx-referral-root .ipr-reward-check {width:28px;height:28px;padding:6px}
  .ipo-app.ipx-referral-root .ipr-floating-reward p {font-size:9.8px}
  .ipo-app.ipx-referral-root .ipr-floating-reward p strong {font-size:11px}
  .ipo-app.ipx-referral-root .ipr-hero-wave {bottom:-32px;height:56px}
  /* Secondary section titles use the same editorial hierarchy as homepage. */
  .ipo-app.ipx-referral-root .ipr-section-head h2 {font-size:28px;letter-spacing:-.9px}
}

/* Tablet: match the homepage's 33px hero heading and keep the two CTAs on one line. */
@media (min-width:621px) and (max-width:990px) {
  .ipo-app.ipx-referral-root .ipr-hero {height:435px;min-height:435px}
  .ipo-app.ipx-referral-root .ipr-hero-content {
    padding-top:30px;
    width:370px;
    max-width:51%;
  }
  .ipo-app.ipx-referral-root .ipr-hero-title {
    font-size:33px!important;
    letter-spacing:-1.25px;
    line-height:1.06;
    margin-top:10px!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-title em {letter-spacing:-1px}
  .ipo-app.ipx-referral-root .ipr-hero-intro {
    max-width:322px;font-size:11.7px;line-height:1.45;margin-top:10px!important;
  }
  .ipo-app.ipx-referral-root .ipr-actions {margin-top:14px;gap:8px;flex-wrap:nowrap}
  .ipo-app.ipx-referral-root .ipr-btn {height:39px;font-size:9.6px;padding:0 9px}
  .ipo-app.ipx-referral-root .ipr-btn-primary {min-width:183px}
  .ipo-app.ipx-referral-root .ipr-btn-outline {min-width:137px}
  .ipo-app.ipx-referral-root .ipr-hero-benefits {margin-top:18px;gap:4px 0;max-width:100%;flex-wrap:wrap}
  .ipo-app.ipx-referral-root .ipr-hero-benefit {font-size:8px;gap:4px;padding:0 2px;min-height:34px}
  .ipo-app.ipx-referral-root .ipr-picto-sm {width:25px;height:25px;flex-basis:25px;padding:6px}
  .ipo-app.ipx-referral-root .ipr-hero-photo {width:60%}
  .ipo-app.ipx-referral-root .ipr-hero-couple {top:46px;right:-12%;width:98%}
  .ipo-app.ipx-referral-root .ipr-hero::after {background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 29%,rgba(255,255,255,.78) 40%,rgba(255,255,255,.12) 60%,transparent 70%)}
  .ipo-app.ipx-referral-root .ipr-hero-floats {left:48%}
  .ipo-app.ipx-referral-root .ipr-floating-sent {top:24px;left:6px;width:155px;min-height:61px;padding:9px}
  .ipo-app.ipx-referral-root .ipr-floating-sent img {width:30px;height:30px}
  .ipo-app.ipx-referral-root .ipr-floating-sent strong {font-size:9px}
  .ipo-app.ipx-referral-root .ipr-floating-home {left:24px;bottom:13px;width:154px;min-height:125px}
  .ipo-app.ipx-referral-root .ipr-floating-home img {height:65px}
  .ipo-app.ipx-referral-root .ipr-floating-home strong {font-size:9px}
  .ipo-app.ipx-referral-root .ipr-floating-home-icon {width:39px;height:39px;padding:10px}
  .ipo-app.ipx-referral-root .ipr-floating-reward {right:0;bottom:12px;width:128px;min-height:126px;padding:10px}
  .ipo-app.ipx-referral-root .ipr-floating-reward p,.ipo-app.ipx-referral-root .ipr-floating-reward p strong {font-size:9px}
  .ipo-app.ipx-referral-root .ipr-reward-emblem {width:35px;height:35px;padding:7px}
  .ipo-app.ipx-referral-root .ipr-reward-check {width:26px;height:26px;padding:6px}
  .ipo-app.ipx-referral-root .ipr-section-head h2 {font-size:27px}
}

/* Phone: text first, photo second, just like the existing responsive referral layout;
   size and vertical rhythm now follow the approved homepage's mobile proportions. */
@media (max-width:620px) {
  .ipo-app.ipx-referral-root .ipr-hero {height:790px;min-height:790px}
  .ipo-app.ipx-referral-root .ipr-hero-content {padding-top:21px}
  .ipo-app.ipx-referral-root .ipr-hero-title {
    font-size:clamp(33px,8.8vw,39px)!important;
    letter-spacing:-1.35px;
    line-height:1.04;
    margin-top:10px!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-title em {letter-spacing:-1px}
  .ipo-app.ipx-referral-root .ipr-hero-intro {
    font-size:12px;line-height:1.44;margin-top:11px!important;
  }
  .ipo-app.ipx-referral-root .ipr-actions {margin-top:13px;gap:7px}
  .ipo-app.ipx-referral-root .ipr-btn {height:39px;font-size:10px;border-radius:9px}
  .ipo-app.ipx-referral-root .ipr-hero-benefits {margin-top:12px;gap:3px}
  .ipo-app.ipx-referral-root .ipr-hero-benefit {font-size:8.5px;padding:0 3px;min-height:37px}
  .ipo-app.ipx-referral-root .ipr-hero-benefit .ipr-picto-sm {width:25px;height:25px;flex-basis:25px;padding:5px}
  .ipo-app.ipx-referral-root .ipr-hero-photo {top:405px;height:385px}
  .ipo-app.ipx-referral-root .ipr-hero-couple {top:35px;right:-11%;width:115%}
  .ipo-app.ipx-referral-root .ipr-hero-floats {inset:405px 0 0 0}
  .ipo-app.ipx-referral-root .ipr-floating-sent {top:15px;left:8px;width:146px;min-height:57px;padding:8px}
  .ipo-app.ipx-referral-root .ipr-floating-sent img {width:30px;height:30px}
  .ipo-app.ipx-referral-root .ipr-floating-sent strong {font-size:8.7px}
  .ipo-app.ipx-referral-root .ipr-floating-home {left:11px;bottom:20px;width:145px;min-height:118px}
  .ipo-app.ipx-referral-root .ipr-floating-home img {height:60px}
  .ipo-app.ipx-referral-root .ipr-floating-home strong {font-size:8.9px}
  .ipo-app.ipx-referral-root .ipr-floating-home-icon {width:38px;height:38px;padding:9px}
  .ipo-app.ipx-referral-root .ipr-floating-reward {right:3px;bottom:20px;width:119px;min-height:115px;padding:9px}
  .ipo-app.ipx-referral-root .ipr-floating-reward p,.ipo-app.ipx-referral-root .ipr-floating-reward p strong {font-size:9px}
  .ipo-app.ipx-referral-root .ipr-reward-emblem {width:35px;height:35px;padding:7px}
  .ipo-app.ipx-referral-root .ipr-reward-check {width:26px;height:26px;padding:6px}
  .ipo-app.ipx-referral-root .ipr-flight {width:205px;height:185px;top:48px;left:12px}
  .ipo-app.ipx-referral-root .ipr-section-head h2 {font-size:27px}
}
@media(max-width:400px) {
  .ipo-app.ipx-referral-root .ipr-hero {height:825px;min-height:825px}
  .ipo-app.ipx-referral-root .ipr-hero-photo {top:420px;height:405px}
  .ipo-app.ipx-referral-root .ipr-hero-floats {inset:420px 0 0 0}
  .ipo-app.ipx-referral-root .ipr-btn-primary,.ipo-app.ipx-referral-root .ipr-btn-outline {width:100%;min-width:100%}
  .ipo-app.ipx-referral-root .ipr-hero-benefit {font-size:8px}
}
/* Narrow tablet: do not let two buttons spill into the photograph. */
@media (min-width:621px) and (max-width:700px) {
  .ipo-app.ipx-referral-root .ipr-actions {flex-wrap:wrap;gap:7px}
  .ipo-app.ipx-referral-root .ipr-btn-primary {min-width:193px}
  .ipo-app.ipx-referral-root .ipr-btn-outline {min-width:138px}
  .ipo-app.ipx-referral-root .ipr-hero-benefits {margin-top:12px}
  .ipo-app.ipx-referral-root .ipr-hero-photo {width:57%}
}
/* Small phones: consistent benefit columns, no orphaned third item. */
@media (max-width:620px) {
  .ipo-app.ipx-referral-root .ipr-hero-benefits {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:4px;
  }
  .ipo-app.ipx-referral-root .ipr-hero-benefit {
    width:100%;
    min-width:0;
    align-items:flex-start;
    gap:4px;
    padding:0 2px;
  }
}
/* Wide phones are taller than tablet proportionally, but avoid a blank image gap. */
@media (min-width:401px) and (max-width:620px) {
  .ipo-app.ipx-referral-root .ipr-hero {height:720px;min-height:720px}
  .ipo-app.ipx-referral-root .ipr-hero-photo {top:360px;height:360px}
  .ipo-app.ipx-referral-root .ipr-hero-floats {inset:360px 0 0 0}
}
/* Apply the same hierarchy to the lower sections, not only the hero. */
@media(min-width:991px) {
  .ipo-app.ipx-referral-root .ipr-dashboard-intro h2,
  .ipo-app.ipx-referral-root .ipr-faq-intro h2 {
    font-size:25px;
    line-height:1.15;
    letter-spacing:-.8px;
  }
}
@media(min-width:621px) and (max-width:990px) {
  .ipo-app.ipx-referral-root .ipr-dashboard-intro h2,
  .ipo-app.ipx-referral-root .ipr-faq-intro h2 {
    font-size:27px;
    line-height:1.16;
    letter-spacing:-.7px;
  }
}
@media(max-width:620px) {
  .ipo-app.ipx-referral-root .ipr-dashboard-intro h2,
  .ipo-app.ipx-referral-root .ipr-faq-intro h2 {
    font-size:26px;
    line-height:1.16;
    letter-spacing:-.7px;
  }
}


/* 5.2.1 critical invariants: retain the same 1122px artboard and desktop
 * text/image scale as the approved mortgage/homepage. These are deliberately
 * !important because Elementor and caching plugins may output a legacy
 * referral stylesheet after the normal enqueue order. No generic selectors.
 */
@media(min-width:991px) {
  .ipo-app.ipx-referral-root .ipr-hero {
    height:370px!important;min-height:370px!important;
  }
  .ipo-app.ipx-referral-root .ipr-shell {
    width:calc(100% - 146px)!important;max-width:976px!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-content {
    padding-top:27px!important;width:460px!important;max-width:49%!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-title {
    font-size:43px!important;line-height:1.045!important;
    letter-spacing:-1.7px!important;margin-top:10px!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-intro {
    max-width:430px!important;font-size:12.6px!important;
    line-height:1.43!important;margin-top:11px!important;
  }
  .ipo-app.ipx-referral-root .ipr-actions {margin-top:16px!important;gap:12px!important}
  .ipo-app.ipx-referral-root .ipr-btn {
    height:40px!important;padding:0 13px!important;font-size:10px!important;
  }
  .ipo-app.ipx-referral-root .ipr-hero-benefits {margin-top:19px!important}
  .ipo-app.ipx-referral-root .ipr-hero-photo {width:59%!important}
  .ipo-app.ipx-referral-root .ipr-hero-couple {top:23px!important;right:-2%!important;width:70%!important}
}
@media(min-width:621px) and (max-width:990px) {
  .ipo-app.ipx-referral-root .ipr-hero {height:435px!important;min-height:435px!important}
  .ipo-app.ipx-referral-root .ipr-hero-title {font-size:33px!important;line-height:1.06!important}
  .ipo-app.ipx-referral-root .ipr-hero-intro {font-size:11.7px!important}
  .ipo-app.ipx-referral-root .ipr-btn {height:39px!important;font-size:9.6px!important}
}
@media(max-width:620px) {
  .ipo-app.ipx-referral-root .ipr-hero-title {font-size:clamp(33px,8.8vw,39px)!important}
  .ipo-app.ipx-referral-root .ipr-hero-intro {font-size:12px!important}
  .ipo-app.ipx-referral-root .ipr-btn {height:39px!important;font-size:10px!important}
}