/* ==========================================================================
   ProHealth footer. Source of truth: CTA + footer mockup (2172px reference).
   Desktop sizes are in cqw of .pf so the footer scales like the mockup.
   ========================================================================== */
.pf { background: #022241; color: #fff; container-type: inline-size; font-family: inherit; }
.pf a { color: inherit; text-decoration: none; }
.pf h3 { margin: 0; color: #fff; font-weight: 600; letter-spacing: 0; }
.pf__top { display: grid; align-items: start; padding: 2.1cqw 0 2cqw 5.4cqw;
  grid-template-columns: 24.4cqw 14.9cqw 18.9cqw 19.3cqw 1fr; }

.pf__logo { display: inline-block; margin: -1.1cqw 0 0 0; }
.pf__logo img { display: block; width: max(180px, 14.5cqw); height: auto; }
.pf__tag { margin: .75cqw 0 0; font-size: max(13px, .96cqw); line-height: 1.5; color: rgba(255,255,255,.9); font-weight: 400; }

.pf__social { display: flex; gap: .82cqw; margin-top: .55cqw; }
.pf__social a { width: max(34px, 2.3cqw); height: max(34px, 2.3cqw); border-radius: 50%; background: #1b5493;
  display: grid; place-items: center; color: #fff; transition: background .15s, transform .15s; }
.pf__social a:hover { background: #2a71bf; transform: translateY(-1px); }
.pf__social svg { width: 50%; height: 50%; fill: currentColor; }
.pf__social--lg { margin-top: 1.05cqw; }

.pf__col h3 { font-size: max(14px, 1cqw); line-height: 1.2; }
.pf__col > a { display: block; font-size: max(13px, .96cqw); line-height: 1; color: rgba(255,255,255,.9); font-weight: 400; margin-top: .49cqw; transition: color .15s; }
.pf__col > h3 + a { margin-top: .95cqw; }
.pf__col > a:hover { color: #56c7f2; }
.pf__col--support > a { margin-top: .37cqw; }
.pf__col--support > h3 + a { margin-top: .95cqw; }

.pf__col--pay h3, .pf__col--follow h3 { margin-top: .12cqw; }
.pf__cards { display: flex; gap: .65cqw; margin-top: 1.05cqw; }
.pf__card { height: max(30px, 2.2cqw); min-width: max(50px, 3.5cqw); padding: 0 .5cqw; border-radius: max(6px, .42cqw);
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.pf__card--visa { background: #fff; color: #17399a; font: italic 900 max(15px, 1.15cqw)/1 'Manrope', Arial, sans-serif; letter-spacing: -.02em; }
.pf__card--mc, .pf__card--apple { background: #031a35; border: 1.5px solid rgba(255,255,255,.72); }
.pf__card--mc i { width: max(15px, 1.05cqw); height: max(15px, 1.05cqw); border-radius: 50%; display: block; }
.pf__card--mc i:first-child { background: #eb001b; margin-right: calc(max(15px, 1.05cqw) * -.36); }
.pf__card--mc i:last-child { background: #f79e1b; mix-blend-mode: normal; opacity: .95; }
.pf__card--apple { gap: .18cqw; color: #fff; }
.pf__card--apple svg { width: max(13px, .95cqw); height: max(13px, .95cqw); fill: currentColor; }
.pf__card--apple b { font: 600 max(14px, 1.08cqw)/1 -apple-system, 'Manrope', Arial, sans-serif; letter-spacing: -.01em; }

.pf__bottom { border-top: 1px solid rgba(77,120,178,.32); display: flex; justify-content: space-between; align-items: center;
  padding: 1.35cqw 5.5cqw 1.5cqw 5.4cqw; }
.pf__bottom p { margin: 0; font-size: max(12px, .86cqw); color: rgba(255,255,255,.85); font-weight: 400; }

/* narrower laptops: tighten columns */
@media (max-width: 1180px) {
  .pf__top { grid-template-columns: 26cqw 15cqw 19cqw 20cqw 1fr; padding-left: 4cqw; }
  .pf__bottom { padding-left: 4cqw; padding-right: 4cqw; }
  .pf__social--lg { gap: 8px; }
  .pf__social a { width: 30px; height: 30px; }
}

/* tablet and mobile: stacked */
@media (max-width: 900px) {
  .pf__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 32px 20px 26px; }
  .pf__brand { grid-column: 1 / -1; }
  .pf__logo { margin: 0; } .pf__logo img { width: 210px; }
  .pf__tag { font-size: 14px; margin-top: 10px; }
  .pf__social { gap: 12px; margin-top: 16px; } .pf__social a { width: 44px; height: 44px; }
  .pf__col h3 { font-size: 15px; }
  .pf__col > a, .pf__col--support > a { font-size: 14px; margin-top: 12px; }
  .pf__col > h3 + a, .pf__col--support > h3 + a { margin-top: 14px; }
  .pf__col--pay { grid-column: 1 / -1; } .pf__col--pay h3, .pf__col--follow h3 { margin-top: 0; }
  .pf__cards { gap: 10px; margin-top: 14px; }
  .pf__card { height: 38px; min-width: 64px; border-radius: 8px; padding: 0 10px; }
  .pf__card--visa { font-size: 18px; } .pf__card--mc i { width: 20px; height: 20px; margin-right: 0; } .pf__card--mc i:first-child { margin-right: -7px; }
  .pf__card--apple svg { width: 17px; height: 17px; } .pf__card--apple b { font-size: 17px; }
  .pf__bottom { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .pf__bottom p { font-size: 12.5px; }
}

/* hit areas: visual size unchanged */
.pf__col > a::after { content: ""; position: absolute; inset: -6px 0; }
.pf a:focus-visible { outline: 3px solid #8fd8f5; outline-offset: 2px; }
@media (max-width: 900px) {
  .pf__col > a, .pf__col--support > a { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
  .pf__col > h3 + a, .pf__col--support > h3 + a { margin-top: 6px; }
  .pf__col > a::after { display: none; }
}

/* ==== consistency layer (desktop): footer sits on the same rail and type scale ==== */
@media (min-width: 901px) {
  .pf__top { grid-template-columns: 1.65fr 1fr 1.3fr 1.3fr .9fr; padding: 52px var(--rail, 60px) 44px; column-gap: 24px; }
  .pf__bottom { padding: 24px var(--rail, 60px); }
  .pf__logo { margin: 0; } .pf__logo img { width: 220px; }
  .pf__tag { font-size: 16px; margin-top: 14px; }
  .pf__social { gap: 12px; margin-top: 16px; } .pf__social a { width: 36px; height: 36px; }
  .pf__col h3 { font-size: 17px; }
  .pf__col > a, .pf__col--support > a { font-size: 16px; margin-top: 11px; line-height: 1.2; }
  .pf__col > h3 + a, .pf__col--support > h3 + a { margin-top: 14px; }
  .pf__col--pay h3, .pf__col--follow h3 { margin-top: 0; }
  .pf__cards { gap: 10px; margin-top: 14px; }
  .pf__card { height: 34px; min-width: 56px; border-radius: 7px; padding: 0 8px; }
  .pf__card--visa { font-size: 16px; } .pf__card--mc i { width: 17px; height: 17px; } .pf__card--apple svg { width: 14px; height: 14px; } .pf__card--apple b { font-size: 15px; }
  .pf__bottom p { font-size: 14px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .pf__top { padding-left: 32px; padding-right: 32px; }
  .pf__bottom { padding-left: 32px; padding-right: 32px; }
}

/* toggles look like plain headings on desktop */
.pf__toggle { all: unset; font: inherit; color: inherit; cursor: default; display: block; }
@media (min-width: 901px) { .pf__toggle { pointer-events: none; } }

/* ---- mobile: compact accordion footer ---- */
@media (max-width: 900px) {
  .pf__top { grid-template-columns: 1fr; gap: 0; padding: 28px 20px 8px; }
  .pf__brand { padding-bottom: 20px; }
  .pf__logo img { width: 190px; }
  .pf__tag { font-size: 14px; margin-top: 10px; }
  .pf__brand .pf__social { display: none; }
  .pf__col, .pf__col--pay, .pf__col--follow { grid-column: auto; display: block; border-top: 1px solid rgba(77,120,178,.32); }
  .pf__col--follow { display: block; }
  .pf__col h3 { margin: 0; }
  .pf__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; min-height: 52px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; }
  .pf__toggle::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #8fd8f5; border-bottom: 2px solid #8fd8f5; transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
  .pf__col.is-open .pf__toggle::after { transform: rotate(-135deg); }
  .pf__col > a, .pf__col--support > a, .pf__cards, .pf__col .pf__social { display: none; }
  .pf__col.is-open > a, .pf__col--support.is-open > a { display: flex; margin-top: 0; min-height: 44px; }
  .pf__col.is-open > a:last-child { margin-bottom: 8px; }
  .pf__col.is-open .pf__cards { display: flex; margin: 0 0 16px; }
  .pf__col.is-open .pf__social { display: flex; margin: 0 0 16px; }
  .pf__bottom { padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 4px; border-top: 1px solid rgba(77,120,178,.32); }
  .pf__bottom p { font-size: 13px; }
}