/* Homepage refresh inspired by the supplied WiFi Murah layout.
   Scoped to the public homepage: portal and legal pages retain their UI. */
.home-page {
  --navy: #0c2461;
  --navy-deep: #07183e;
  --navy-soft: #153e80;
  --red: #e8203c;
  --red-dark: #c71531;
  --ink: #12213e;
  --text: #43526a;
  --muted: #67748a;
  --line: #e2e9f4;
  --soft: #f5f8fe;
  --container: 1180px;
  background: #fff;
}
.home-page .site-header { border-top: 3px solid var(--navy); border-bottom-color: #e8edf5; background: rgba(255,255,255,.975); }
.home-page .header-inner { min-height: 74px; }
.home-page .brand-lockup img { width: 141px; height: 56px; }
.home-page .site-nav { gap: 4px; }
.home-page .site-nav a { font-size: 13px; color: #31415d; }
.home-page .site-nav a:hover, .home-page .site-nav a[aria-current="page"] { background: #eff4ff; color: #0c3986; }
.home-page .site-nav .nav-cta { background: var(--red); color: #fff; border-radius: 999px; padding: 12px 19px; box-shadow: 0 8px 20px rgba(232,32,60,.17); }
.home-page .site-nav .nav-cta:hover { color: #fff; background: var(--red-dark); }
.home-page .btn { min-height: 49px; border-radius: 999px; font-weight: 800; letter-spacing: -.01em; }
.home-page .btn--primary { background: var(--red); color: #fff; }
.home-page .btn--primary:hover { background: var(--red-dark); }
.home-page .btn--secondary { background: #fff; color: var(--navy); border-color: #dbe4f3; }
.home-page .btn--secondary:hover { background: #eef4ff; border-color: #bbcbe7; }

/* A confident blue hero, spacious text, and a proportional family image. */
.home-page.campaign-page .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 84px;
  background: radial-gradient(circle at 89% 17%, rgba(96,154,255,.23) 0, transparent 32%),
              radial-gradient(circle at 17% 112%, rgba(65,120,224,.26) 0, transparent 42%),
              linear-gradient(118deg, #071b4c 0%, #123477 57%, #0b285d 100%);
}
.home-page .home-hero::before, .home-page .home-hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.home-page .home-hero::before { width: 610px; height: 610px; top: -440px; right: -145px; }
.home-page .home-hero::after { width: 650px; height: 650px; bottom: -520px; left: -190px; }
.home-page .campaign-hero__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(34px,5vw,66px); align-items: center; }
.home-page .campaign-hero__copy { padding: 8px 0; }
.home-page .campaign-kicker { color: var(--red); letter-spacing: .11em; font-size: 12px; }
.home-page .campaign-kicker::before { display: none; }
.home-page .campaign-hero__copy .campaign-kicker { width: fit-content; padding: 10px 14px; color: #e4ecff; background: rgba(255,255,255,.105); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; letter-spacing: .045em; }
.home-page .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5570; box-shadow: 0 0 0 4px rgba(255,85,112,.16); }
.home-page .campaign-hero h1 { max-width: 720px; margin-top: 25px; color: #fff; font-size: clamp(39px,4.7vw,67px); line-height: 1.1; letter-spacing: -.055em; }
.home-page .campaign-hero h1 em { color: #ff7793; font-style: normal; }
.home-page .campaign-hero__lead { max-width: 585px; margin-top: 23px; color: #d6e1f7; font-size: 17px; line-height: 1.78; }
.home-page .campaign-hero__lead strong { color: #fff; }
.home-page .campaign-actions { gap: 12px; margin-top: 29px; }
.home-page .campaign-actions .btn--primary { background: #fff; color: var(--navy); }
.home-page .campaign-actions .btn--primary:hover { background: #f1f4fc; }
.home-page .campaign-actions .btn--secondary { background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.36); }
.home-page .campaign-actions .btn--secondary:hover { background: rgba(255,255,255,.16); }
.home-page .campaign-trust { gap: 13px 16px; color: #f0f4ff; margin-top: 28px; }
.home-page .campaign-trust span::before { color: #d0ffec; background: rgba(54,196,137,.22); }
.home-page .ad-disclosure { max-width: 570px; color: #b0c0df; margin-top: 22px; }
.home-page .campaign-hero__visual { display: grid; gap: 15px; align-items: start; }
.home-page .hero-photo-card { overflow: hidden; padding: 9px; background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.7); border-radius: 25px; box-shadow: 0 26px 70px rgba(2,12,36,.26); }
.home-page .campaign-hero__photo { display: block; aspect-ratio: 2 / 1; width: 100%; height: auto; object-fit: contain; object-position: center; border-radius: 17px; box-shadow: none; }
.home-page .hero-bubble { top: 20px; right: 15px; background: #fff; color: var(--navy); border: 1px solid #e5ebf5; font-size: 11px; box-shadow: 0 8px 20px rgba(2,12,36,.15); }
.home-page .hero-product-card { display: grid; gap: 4px; padding: 23px 27px; background: #fff; border-radius: 22px; border: 1px solid #fff; box-shadow: 0 16px 46px rgba(2,12,36,.18); }
.home-page .hero-product-card__eyebrow { color: #c02847; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.home-page .hero-product-card strong { color: var(--navy); font-size: clamp(25px,2.7vw,35px); line-height: 1.15; letter-spacing: -.05em; }
.home-page .hero-product-card strong em { color: var(--red); font-style: normal; }
.home-page .hero-product-card > span:not(.hero-product-card__eyebrow) { color: #657087; font-size: 13px; }
.home-page .hero-product-card a { width: fit-content; margin-top: 7px; color: #bb1938; font-size: 13px; font-weight: 850; text-decoration: none; }
.home-page .hero-product-card a:hover { text-decoration: underline; }
.home-page .trust-ribbon { background: #061634; border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; }
.home-page .trust-ribbon__inner { color: #d8e3fa; font-size: 12px; }
.home-page .trust-ribbon__inner span::before { color: #f67891; }

/* Interactive preference selector: no personal information collected. */
.home-page .advisor-section { padding: 92px 0; background: linear-gradient(135deg,#f6f8fe,#edf3ff); }
.home-page .advisor-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(30px,6vw,90px); align-items: center; }
.home-page .advisor-copy h2 { margin: 18px 0 19px; font-size: clamp(34px,4vw,52px); }
.home-page .advisor-copy p { color: #58677e; font-size: 17px; line-height: 1.75; }
.home-page .advisor-highlights { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 25px; color: #225c53; font-size: 13px; font-weight: 750; }
.home-page .advisor-card { display: grid; gap: 18px; padding: 32px; background: #fff; border: 1px solid #e3eaf6; border-radius: 25px; box-shadow: 0 20px 60px rgba(15,49,104,.1); }
.home-page .advisor-card__step { color: #d02c47; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.home-page .advisor-card h3 { font-size: clamp(22px,2.5vw,29px); }
.home-page .advisor-card fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.home-page .advisor-card legend { margin-bottom: 9px; color: #374966; font-size: 13px; font-weight: 800; }
.home-page .advisor-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.home-page .advisor-options--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.home-page .advisor-options label { position: relative; min-width: 0; display: flex; align-items: center; padding: 12px 11px; border: 1px solid #dce5f3; border-radius: 12px; cursor: pointer; background: #fff; font-size: 12px; font-weight: 780; color: #43526a; transition: border-color .16s,background .16s; }
.home-page .advisor-options input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0 8px 0 0; accent-color: var(--red); }
.home-page .advisor-options label:has(input:checked) { border-color: #ee8292; background: #fff4f6; color: #a51f37; }
.home-page .advisor-options label:focus-within { outline: 2px solid #96afe1; outline-offset: 2px; }
.home-page .advisor-submit { width: 100%; }
.home-page .advisor-result { padding: 17px 18px; background: #f0f6ff; border: 1px solid #cfe0ff; border-radius: 15px; }
.home-page .advisor-result strong { color: #14397c; font-size: 19px; }
.home-page .advisor-result p { margin: 7px 0 14px; color: #4f617e; font-size: 13px; }
.home-page .advisor-result .btn { min-height: 40px; padding: 8px 14px; background: #fff; font-size: 12px; }

/* Familiar section hierarchy from the reference while preserving the catalog. */
.home-page .section-heading--center { text-align: center; margin-inline: auto; }
.home-page .section-heading--center p { margin-inline: auto; }
.home-page .section-heading h2 { letter-spacing: -.05em; }
.home-page .section--compact { padding: 86px 0; }
.home-page .benefit-layout { gap: 20px; }
.home-page .benefit-card { padding: 31px; border-radius: 20px; border-color: #e3e9f3; box-shadow: 0 12px 30px rgba(15,49,104,.045); }
.home-page .benefit-card__icon { color: #d12141; background: #fff1f4; }
.home-page .benefit-card__number { color: #7c8aa1; }
.home-page .benefit-card h3 { color: #192e54; }
.home-page .section--cream { background: #f8faff; }
.home-page #promo { padding: 76px 0; }
.home-page .spotlight-panel { grid-template-columns: .83fr 1.17fr; padding: 31px; gap: 40px; border: 1px solid #ffe0e8; background: #fff; border-radius: 28px; box-shadow: 0 18px 55px rgba(16,35,86,.065); }
.home-page .spotlight-panel__illustration { min-height: 0; display: block; margin: 0; overflow: hidden; background: #f8f2f3; border: 1px solid #f2e4e8; border-radius: 22px; }
.home-page .spotlight-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.home-page .spotlight-panel h2 { color: #142e5e; }
.home-page .spotlight-list li { color: #3e4c66; }
.home-page .catalog-section { padding: 90px 0; background: #fff; }
.home-page .catalog-intro { align-items: end; }
.home-page .catalog-section .package-grid { gap: 18px; }
.home-page .catalog-section .package-card { border-color: #dfe7f3; box-shadow: 0 12px 35px rgba(15,49,104,.055); }
.home-page .catalog-section .package-card--featured { border-color: #ee7f93; background: linear-gradient(180deg,#fff7f9,#fff 28%); }
.home-page .package-card h3 { color: #132d5e; }
.home-page .catalog-highlight { color: #8d3950; }
.home-page .package-category-select { border-color: #d4e0f1; }

/* Real regional images with a stable contrast scrim for accessible labels. */
.home-page .region-section { background: #f4f7fd; padding: 87px 0; }
.home-page .region-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.home-page .region-card { position: relative; isolation: isolate; min-height: 260px; display: flex; flex-direction: column; justify-content: end; overflow: hidden; padding: 26px 23px; color: #fff; background: #17375c; border-radius: 22px; box-shadow: 0 12px 28px rgba(13,38,80,.12); }
.home-page .region-card__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.home-page .region-card::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(5,20,50,.02) 20%,rgba(4,20,48,.25) 48%,rgba(3,16,40,.91) 100%); }
.home-page .region-card > :not(.region-card__photo) { position: relative; z-index: 2; }
.home-page .region-card:hover .region-card__photo { transform: scale(1.045); }
.home-page .region-card__label { margin-bottom: 10px; color: #c7e2ff; font-size: 10px; letter-spacing: .11em; font-weight: 900; text-shadow: 0 1px 7px rgba(0,0,0,.6); }
.home-page .region-card h3 { color: #fff; font-size: 23px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.home-page .region-card p { margin-top: 10px; color: #f1f6ff; font-size: 12px; line-height: 1.6; text-shadow: 0 1px 7px rgba(0,0,0,.6); }
.home-page .region-help { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding: 20px 24px; border: 1px solid #dae3f3; border-radius: 18px; background: #fff; }
.home-page .region-help span { color: #25406d; font-weight: 800; }
.home-page .region-help .btn { min-height: 43px; }
.home-page .steps-card { border-top-color: #173f8c; border-right-color: #e0e8f4; border-bottom-color: #e0e8f4; border-left-color: #e0e8f4; }
.home-page .steps-card__num { color: #17468e; }
.home-page .faq-section { background: #fff; }
.home-page .faq-layout { grid-template-columns: .82fr 1.18fr; gap: 65px; }
.home-page .faq-list details { border-color: #e0e8f5; box-shadow: 0 6px 15px rgba(16,43,90,.03); }
.home-page .faq-list summary { color: #152b50; }
.home-page .faq-action { margin-top: 24px; }
.home-page .sales-proof { background: #fff; border-color: #e0e7f4; }
.home-page .sales-proof__facts span { background: #f2f6fe; }
.home-page .campaign-bottom { position: relative; overflow: hidden; background: linear-gradient(115deg,#102a62,#0c214f); padding: 69px 0; }
.home-page .campaign-bottom::before { content: ''; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; top: -130px; right: 12%; pointer-events: none; }
.home-page .campaign-bottom h2 { color: #fff; }
.home-page .campaign-bottom .btn { background: #fff; color: #153a80; }
.home-page .campaign-bottom .btn:hover { background: #f2f6ff; }
.home-page .site-footer { border-bottom-color: #0d357e; }

@media (max-width: 1080px) {
  .home-page .site-nav a { padding-inline: 8px; }
  .home-page .campaign-hero__grid { gap: 30px; }
  .home-page .region-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .home-page .site-nav { background: #fff; }
  .home-page .campaign-hero__grid, .home-page .advisor-layout, .home-page .spotlight-panel, .home-page .faq-layout { grid-template-columns: 1fr; }
  .home-page.campaign-page .home-hero { padding: 54px 0 62px; }
  .home-page .campaign-hero__visual { width: min(100%,640px); margin-inline: auto; }
  .home-page .advisor-section { padding: 70px 0; }
  .home-page .faq-layout { gap: 30px; }
  .home-page .spotlight-panel { gap: 20px; }
}
@media (max-width: 600px) {
  .home-page .header-inner { min-height: 68px; }
  .home-page .brand-lockup img { width: 123px; height: 50px; }
  .home-page.campaign-page .home-hero { padding: 38px 0 47px; }
  .home-page .campaign-hero h1 { margin-top: 19px; font-size: clamp(36px,10.5vw,49px); }
  .home-page .campaign-hero__lead { font-size: 15px; line-height: 1.7; }
  .home-page .campaign-actions { display: grid; grid-template-columns: 1fr; }
  .home-page .campaign-actions .btn { width: 100%; }
  .home-page .campaign-trust { gap: 9px 13px; font-size: 11px; }
  .home-page .ad-disclosure { font-size: 11px; }
  .home-page .hero-photo-card { padding: 6px; border-radius: 17px; }
  .home-page .campaign-hero__photo { aspect-ratio: 2/1; object-fit: contain; border-radius: 12px; }
  .home-page .hero-product-card { padding: 19px; border-radius: 16px; }
  .home-page .hero-product-card strong { font-size: 29px; }
  .home-page .hero-bubble { display: none; }
  .home-page .advisor-section, .home-page .region-section { padding: 58px 0; }
  .home-page .advisor-card { padding: 21px; gap: 16px; border-radius: 19px; }
  .home-page .advisor-options { grid-template-columns: 1fr; }
  .home-page .advisor-options--two { grid-template-columns: 1fr 1fr; }
  .home-page .advisor-options label { min-height: 44px; }
  .home-page .section--compact, .home-page #promo, .home-page .catalog-section { padding: 62px 0; }
  .home-page .spotlight-panel { padding: 19px; }
  .home-page .spotlight-panel__illustration { min-height: 0; }
  .home-page .region-grid { grid-template-columns: 1fr; gap: 14px; }
  .home-page .region-card { min-height: 245px; padding: 24px; border-radius: 17px; }
  .home-page .region-card h3 { font-size: 23px; }
  .home-page .region-card p { font-size: 12px; max-width: 290px; }
  .home-page .region-help { align-items: stretch; flex-direction: column; padding: 19px; }
  .home-page .region-help .btn { width: 100%; }
  .home-page .campaign-bottom { padding: 48px 0 80px; }
}
@media (max-width: 390px) {
  .home-page .advisor-options--two { grid-template-columns: 1fr; }
  .home-page .region-card { min-height: 220px; }
}