/* Homepage A: Water Freedom affiliate centre, info-product trust homepage pattern. */
.ha { background: #fff; }
.ha h2 { font: 700 34px/1.2 Roboto, sans-serif; color: var(--ink); margin: 0 0 18px; letter-spacing: -.01em; }
.ha p { font-size: 18px; line-height: 1.65; }

/* Hero */
.ha-hero { position: relative; overflow: hidden; background: var(--dark-3); color: #fff; padding: 56px 0 64px; }
.ha-hero-bg, .ha-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ha-hero-bg img { object-fit: cover; object-position: 30% 40%; }
.ha-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 44, 72, .94) 0%, rgba(8, 44, 72, .82) 45%, rgba(8, 44, 72, .35) 100%); }
.ha-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.ha-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 16px !important; font-weight: 500; line-height: 1.3 !important; }
.ha-pill svg { width: 18px; height: 18px; color: var(--cream); flex: none; }
.ha-hero h1 { font: 800 46px/1.12 Roboto, sans-serif; margin: 0 0 18px; color: #fff; letter-spacing: -.015em; }
.ha-hero h1 em { font-style: normal; color: var(--cream); }
.ha-lede { font-size: 20px !important; color: #e6f1fa; margin: 0 0 22px; max-width: 620px; }
.ha-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ha-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; line-height: 1.45; }
.ha-ticks svg { width: 22px; height: 22px; flex: none; color: #7fd0ff; margin-top: 2px; }
.ha-hero-form .acct { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); color: var(--text); }

/* Trust strip */
.ha-trust { background: var(--tint); border-bottom: 1px solid var(--line); padding: 18px 0; }
.ha-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ha-trust li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.ha-trust svg { width: 30px; height: 30px; flex: none; color: var(--blue); }

/* Why promote */
.ha-why { padding: 72px 0 40px; }
.ha-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ha-why-links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.ha-why-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); }
.ha-why-links svg { width: 18px; height: 18px; }
.ha-why-shot { margin: 0; }
.ha-why-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(11, 58, 94, .18); }
.ha-why-shot figcaption, .ha-photos figcaption { font-size: 16px; color: var(--muted); margin-top: 10px; text-align: center; }
.ha-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.ha-photos figure { margin: 0; }
.ha-photos img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }

/* Sign-up bar (repeated) */
.ha-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 40px 0; padding: 26px 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.ha-bar p { margin: 0; font-size: 20px !important; font-weight: 600; color: var(--ink); }
.ha-btn { display: inline-flex; flex-direction: column; align-items: center; flex: none; padding: 12px 34px; border-radius: 14px; background: linear-gradient(#e0403f, var(--orange) 50%, #b81a1a); color: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px rgba(208, 32, 31, .28); }
.ha-btn:hover { background: var(--orange-hi); color: #fff; }
.ha-btn-1 { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.ha-btn-1 svg { width: 20px; height: 20px; }
.ha-btn-2 { font-size: 16px; opacity: .9; }

/* What affiliates get */
.ha-get { padding: 40px 0 56px; }
.ha-get h2 { text-align: center; max-width: 820px; margin: 0 auto 36px; }
.ha-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ha-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ha-card:hover { border-color: var(--blue); box-shadow: 0 12px 30px rgba(11, 58, 94, .12); transform: translateY(-2px); }
.ha-card-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--blue); }
.ha-card-ico svg { width: 26px; height: 26px; }
.ha-card-name { font-size: 19px; font-weight: 700; color: var(--blue-d); }
.ha-card-desc { font-size: 16px; line-height: 1.5; }

/* Commission */
.ha-pay { background: var(--dark); color: #fff; padding: 64px 0; }
.ha-pay h2 { color: #fff; }
.ha-pay p { color: #e2eef8; }
.ha-pay-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.ha-pay-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.ha-pay-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-size: 17px; line-height: 1.4; }
.ha-pay-up { background: rgba(159, 214, 255, .16); border-color: var(--cream); }
.ha-pay-big { font-size: 52px; font-weight: 800; line-height: 1; color: var(--cream); }
.ha-pack { grid-column: 1 / -1; width: 100%; max-width: 360px; height: auto; margin: 8px auto 0; display: block; }

/* FAQ + contact */
.ha-narrow { max-width: 860px; }
.ha-faq { padding: 64px 0 24px; }
.ha-faq h2, .ha-contact h2 { text-align: center; }
.ha-contact { padding: 40px 0 16px; }
.ha-contact > .wrap > p { text-align: center; }

@media (max-width: 1060px) {
  .ha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ha-hero h1 { font-size: 40px; }
}
@media (max-width: 900px) {
  .ha-hero-grid, .ha-why-grid, .ha-pay-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ha-hero::after { background: linear-gradient(180deg, rgba(8, 44, 72, .82), rgba(8, 44, 72, .95)); }
  .ha-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-bar { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .ha h2 { font-size: 27px; }
  .ha p { font-size: 17px; }
  .ha-hero { padding: 36px 0 44px; }
  .ha-hero h1 { font-size: 31px; }
  .ha-lede { font-size: 18px !important; }
  .ha-ticks li { font-size: 17px; }
  .ha-trust ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ha-why { padding: 48px 0 24px; }
  .ha-photos { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 32px; }
  .ha-grid { grid-template-columns: minmax(0, 1fr); }
  .ha-bar { padding: 22px 18px; margin: 28px 0; }
  .ha-bar p { font-size: 18px !important; }
  .ha-btn { width: 100%; padding: 12px 16px; }
  .ha-pay-big { font-size: 42px; }
  .ha-pay { padding: 48px 0; }
  .ha-faq { padding: 44px 0 16px; }
}

/* fixes after the first screenshots */
main.ha { padding-bottom: 24px; }
.ha-hero b, .ha-pay b { color: #fff; }
.ha-why-grid { align-items: start; }
.ha-why-shot { margin-top: 8px; }
@media (max-width: 600px) {
  .ha-grid { gap: 12px; }
  .ha-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
  .ha-card-ico { grid-row: 1 / span 2; width: 44px; height: 44px; }
  .ha-card-name { font-size: 18px; }
}

/* v3 design fixes 2026-11-10: headline top lines up with the form top; the photo shows between copy and form;
   on phones the photo is its own block above the copy (no dark wash). */
.ha-hero { padding: 40px 0 56px; }
.ha-hero-grid { grid-template-columns: minmax(0, 560px) minmax(0, 410px); justify-content: space-between; align-items: start; gap: 40px; }
.ha-hero-copy > .ha-pill:first-child { margin-top: 0; }
.ha-hero-bg img { object-position: 62% 45%; }
.ha-hero::after { background: linear-gradient(90deg, rgba(8, 44, 72, .95) 0%, rgba(8, 44, 72, .88) 34%, rgba(8, 44, 72, .45) 46%, rgba(8, 44, 72, .08) 56%, rgba(8, 44, 72, .1) 66%, rgba(8, 44, 72, .4) 100%); }
.ha-hero-copy { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.ha-why-shot .wf-shot { display: block; max-width: 460px; text-decoration: none; }
.ha-why-shot .wf-shot-bar { display: flex; }
@media (max-width: 900px) {
  .ha-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ha-hero { padding-top: 0; }
  .ha-hero-bg { position: relative; display: block; inset: auto; height: 300px; margin-bottom: 28px; }
  .ha-hero-bg img { position: absolute; inset: 0; object-position: 55% 40%; }
  .ha-hero::after { display: none; }
  .ha-hero-copy { text-shadow: none; }
}
@media (max-width: 600px) {
  .ha-hero-bg { height: 240px; margin-bottom: 24px; }
  .ha-hero-bg img { object-position: 52% 40%; }
}

/* v5 2026-11-10: the man's face shows in the gap between the copy and the form; product card fills the band
   under the ticks; "What you earn" text lines up with the top of the stat boxes. */
@media (min-width: 901px) {
  /* The photo is pinned so his face (43% across the image, 18% down) lands 75px right of centre, in the gap
     between the 560px copy column and the 410px form. The left edge may stop short; it sits under the dark wash. */
  .ha-hero-bg { overflow: hidden; }
  .ha-hero-bg img { left: calc(50% + 75px); right: auto; top: 0; width: auto; height: 100%; min-width: calc(88vw - 130px); aspect-ratio: 1536 / 1024; object-fit: cover; object-position: 43% 12%; transform: translateX(-43%); }
  .ha-hero::after { background:
      linear-gradient(90deg, rgba(8, 44, 72, .97) 0, rgba(8, 44, 72, .94) calc(50% - 40px), rgba(8, 44, 72, .35) calc(50% + 10px), rgba(8, 44, 72, .05) calc(50% + 40px), rgba(8, 44, 72, .05) calc(50% + 120px), rgba(8, 44, 72, .3) calc(50% + 200px), rgba(8, 44, 72, .45) 100%); }
}
.ha-hero-prod { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding: 14px 20px 14px 14px; max-width: 540px; border-radius: 16px; background: rgba(4, 30, 52, .7); border: 1px solid rgba(159, 214, 255, .3); text-shadow: none; }
.ha-hero-prod img { width: 120px; height: auto; flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); }
.ha-hero-prod p { margin: 0; font-size: 16px !important; line-height: 1.5 !important; color: #dfe9f3; }
.ha-hero-prod b { display: block; font-size: 17px; margin-bottom: 2px; }
.ha-pay-grid { align-items: start; }
.ha-pack { max-width: 240px; }
@media (max-width: 600px) {
  .ha-hero-prod { gap: 14px; padding: 12px; }
  .ha-hero-prod img { width: 84px; }
}

/* v7 2026-11-10: the package sits beside the two stat cards (not alone under them); reading text 17px. */
.ha-pay-cards { grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto auto; align-items: center; column-gap: 20px; }
.ha-pay-card { grid-column: 1; }
.ha-pack { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: 200px; margin: 0; align-self: center; }
@media (max-width: 600px) {
  .ha-pay-cards { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 14px; row-gap: 12px; }
  .ha-pay-card { padding: 16px 18px; }
}
.ha-card-desc, .ha-why-shot figcaption, .ha-photos figcaption, .ha-trust li, .ha-btn-2 { font-size: 17px; }
.ha-hero-prod p { font-size: 17px !important; }

/* v8 2026-11-10: the package sits in its own panel beside the two stat cards, with its name and price, so it
   reads as part of the band; on phones the panel is a full-width row under the cards. */
.ha-pay-cards { grid-template-columns: minmax(0, 1fr) 220px; }
.ha-pay-prod { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); text-align: center; }
.ha-pay-prod img { display: block; width: 100%; max-width: 170px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.ha-pay-prod figcaption { font-size: 17px; line-height: 1.4; color: #e2eef8; }
.ha-pay-prod figcaption b { display: block; }
@media (max-width: 600px) {
  .ha-pay-cards { grid-template-columns: minmax(0, 1fr); }
  .ha-pay-prod { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: flex-start; text-align: left; gap: 16px; padding: 14px 18px; }
  .ha-pay-prod img { width: 110px; flex: none; }
}