/* ==========================================================================
   AFFILIATE PROGRAMME — public page   (/{locale}/<native slug>)

   Loaded by resources/views/frontend/pages/affiliate_program.blade.php alone,
   pushed into the head after front.css so its rules win on order as well as on
   specificity.

   Same three rules as the other v3 page stylesheets, for the same reasons:

     1. SCOPE. Everything is under .nlp-affiliate, the class on #page-content.
        Two classes deep beats every Bootstrap/Nifty rule below it, so there is
        not one !important in this file.

     2. TOKENS ARE PREFIXED --af-. front.css declares its own :root --green,
        --dark and --primary; an unprefixed token on a container here would
        silently repaint any front.css rule reaching an element inside the page.

     3. EVERY CLASS IS PREFIXED af-, including the layout primitives (.af-wrap,
        .af-sec, .af-kicker, .af-sec-head) and the buttons (.af-btn, never
        .btn.small — front.css declares .small { font-size: 11px !important },
        which no amount of specificity beats). .btn itself is left alone: the
        layout's cart and header controls use it.

   Palette is the About page's, deliberately: this is a sibling marketing page
   and inventing a second blue/teal for it would make the site look assembled
   from parts. Gold is reserved for the two numbers that matter and the primary
   call to action.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-affiliate {
  --af-sky: #3FA9E8;
  --af-sky-deep: #2286C7;
  --af-sky-tint: #EDF6FC;
  --af-sky-line: #D3E9F8;
  --af-ink: #12303B;
  --af-teal: #0F6E78;
  --af-teal-deep: #0A4F57;
  --af-teal-tint: #EAF4F3;
  --af-teal-line: #CFE5E2;
  --af-paper: #FDFEFE;
  --af-mist: #F6FAFA;
  --af-line: #E6EDEC;
  --af-white: #ffffff;
  --af-text: #3D5058;
  --af-text-soft: #66787E;
  --af-gold: #F0C033;
  --af-gold-deep: #B98908;
  --af-gold-tint: #FEF7E3;
  --af-rose: #C2534A;
  --af-rose-tint: #FBEFEE;
  --af-green-deep: #1F7A6F;
  --af-radius: 18px;
  --af-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --af-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);
  /* Clearance for the sticky v3 chrome, used by the in-page anchors so a jump
     to #af-apply does not land under the pinned header. The header measures
     67px; the promo strip pins with it and publishes its own height. */
  --af-head-offset: calc(88px + var(--nlp-promo-h, 0px));
}

/* ============ reset ============ */
.nlp-affiliate *,
.nlp-affiliate *::before,
.nlp-affiliate *::after { box-sizing: border-box; }

.nlp-affiliate h1, .nlp-affiliate h2, .nlp-affiliate h3,
.nlp-affiliate p, .nlp-affiliate ul, .nlp-affiliate ol,
.nlp-affiliate dl, .nlp-affiliate dd, .nlp-affiliate dt,
.nlp-affiliate figure { margin: 0; padding: 0; }

.nlp-affiliate ul, .nlp-affiliate ol { list-style: none; }

.nlp-affiliate {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--af-text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--af-paper);
  -webkit-font-smoothing: antialiased;
}

.nlp-affiliate h1,
.nlp-affiliate h2,
.nlp-affiliate h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--af-ink);
  line-height: 1.16;
  letter-spacing: -0.012em;
  font-weight: 600;
}

.nlp-affiliate a { color: inherit; text-decoration: none; }
.nlp-affiliate img { max-width: 100%; display: block; }
.nlp-affiliate button { font-family: inherit; cursor: pointer; }
.nlp-affiliate :focus-visible { outline: 2px solid var(--af-sky-deep); outline-offset: 2px; border-radius: 6px; }

/* Every in-page target is jumped to by an anchor, and the v3 header is sticky
   — without this the heading lands underneath it. */
.nlp-affiliate [id] { scroll-margin-top: var(--af-head-offset); }

/* ============ theme neutralisers ============ */
/* Bootstrap makes every <label> bold, inline-block and 100%-wide inside a
   form-group; this page's labels are plain text above their field. */
.nlp-affiliate label { font-weight: 400; margin-bottom: 0; max-width: none; display: block; }

/* Nifty styles bare <input>/<select> through .form-control only, but Bootstrap's
   normalize still sets a font stack and line-height the fields here override. */
.nlp-affiliate input,
.nlp-affiliate select,
.nlp-affiliate textarea { font-family: inherit; font-size: inherit; }

/* ============ links ============ */
.nlp-affiliate .af-link { color: var(--af-sky-deep); text-decoration: underline; text-underline-offset: 2px; }
.nlp-affiliate .af-link:hover { color: var(--af-teal); }
.nlp-affiliate .af-link-light { color: var(--af-gold); text-decoration: underline; text-underline-offset: 2px; }
.nlp-affiliate .af-link-light:hover { color: #fff; }

/* ============ buttons ============ */
.nlp-affiliate .af-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: var(--af-sky); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; text-decoration: none; flex: 0 0 auto;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
}
.nlp-affiliate .af-btn:hover,
.nlp-affiliate .af-btn:focus { background: var(--af-sky-deep); color: #fff; }
.nlp-affiliate .af-btn:active { transform: scale(.985); }

.nlp-affiliate .af-btn-gold { background: var(--af-gold); color: #4A3A06; box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5); }
.nlp-affiliate .af-btn-gold:hover,
.nlp-affiliate .af-btn-gold:focus { background: #E5B62B; color: #4A3A06; }

.nlp-affiliate .af-btn-ghost { background: transparent; color: var(--af-sky-deep); box-shadow: inset 0 0 0 1.5px var(--af-sky-deep); }
.nlp-affiliate .af-btn-ghost:hover,
.nlp-affiliate .af-btn-ghost:focus { background: var(--af-sky-tint); color: var(--af-sky-deep); }

.nlp-affiliate .af-btn-light { background: var(--af-gold); color: #4A3A06; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); }
.nlp-affiliate .af-btn-light:hover,
.nlp-affiliate .af-btn-light:focus { background: #fff; color: var(--af-teal-deep); }

.nlp-affiliate .af-btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ============ layout primitives ============ */
.nlp-affiliate .af-wrap { max-width: 1320px; margin: 0 auto; padding: 0 30px; }
.nlp-affiliate .af-sec { padding: 74px 0 0; }

.nlp-affiliate .af-kicker {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--af-sky-deep);
}

.nlp-affiliate .af-sec-head { margin: 0 0 30px; max-width: 70ch; }
.nlp-affiliate .af-sec-head h2 { font-size: clamp(27px, 3.2vw, 38px); }
.nlp-affiliate .af-sec-head p { margin-top: 12px; font-size: 16.5px; color: var(--af-text-soft); }

/* ============ hero ============ */
.nlp-affiliate .af-hero { padding: 58px 0 0; }

.nlp-affiliate .af-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 54px;
  align-items: center;
}

.nlp-affiliate .af-hero-h1 { font-size: clamp(32px, 4.1vw, 52px); margin-top: 12px; }

.nlp-affiliate .af-hero-lede {
  font-size: 17px;
  color: var(--af-text-soft);
  margin-top: 18px;
  max-width: 54ch;
}

.nlp-affiliate .af-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.nlp-affiliate .af-hero-points {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px;
  font-size: 14px; color: var(--af-text-soft);
}
.nlp-affiliate .af-hero-points li { display: flex; align-items: center; gap: 8px; }
/* A tick drawn in CSS rather than fetched: three list items do not justify an
   icon request, and an <img> here would be decorative noise for a screen
   reader to skip. */
.nlp-affiliate .af-hero-points li::before {
  content: "";
  width: 15px; height: 9px;
  border-left: 2px solid var(--af-green-deep);
  border-bottom: 2px solid var(--af-green-deep);
  transform: rotate(-45deg) translateY(-2px);
  flex: 0 0 auto;
}

/* ---- the offer card ---- */
.nlp-affiliate .af-hero-art { display: flex; justify-content: center; }

.nlp-affiliate .af-offer-card {
  width: 100%;
  max-width: 420px;
  border-radius: 26px;
  background: linear-gradient(150deg, var(--af-teal) 0%, var(--af-teal-deep) 62%, #073A40 100%);
  box-shadow: var(--af-shadow-lift);
  padding: 34px 34px 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.nlp-affiliate .af-offer-card::after {
  content: ""; position: absolute; right: -70px; bottom: -90px; width: 260px; height: 260px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; background: rgba(240, 192, 51, .13); pointer-events: none;
}

.nlp-affiliate .af-offer-row { position: relative; z-index: 1; }
.nlp-affiliate .af-offer-pct {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.nlp-affiliate .af-offer-lbl { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .84); }

.nlp-affiliate .af-offer-them .af-offer-pct { color: #fff; }
.nlp-affiliate .af-offer-you  .af-offer-pct { color: var(--af-gold); }

.nlp-affiliate .af-offer-split {
  height: 1px; margin: 26px 0; background: rgba(255, 255, 255, .22); position: relative; z-index: 1;
}

/* ============ stat band ============ */
.nlp-affiliate .af-stats {
  border-top: 1px solid var(--af-line);
  border-bottom: 1px solid var(--af-line);
  background: var(--af-white);
  margin-top: 60px;
}

.nlp-affiliate .af-stat-row {
  padding-top: 26px; padding-bottom: 26px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}

.nlp-affiliate .af-stat { text-align: center; }
.nlp-affiliate .af-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  color: var(--af-teal);
  line-height: 1.1;
}
.nlp-affiliate .af-stat span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--af-text-soft); }

/* ============ why ============ */
.nlp-affiliate .af-why-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}

.nlp-affiliate .af-card {
  background: var(--af-white);
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius);
  padding: 28px 26px;
  box-shadow: var(--af-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nlp-affiliate .af-card:hover { transform: translateY(-2px); box-shadow: var(--af-shadow-lift); }
.nlp-affiliate .af-card h3 { font-size: 19px; margin-top: 16px; }
.nlp-affiliate .af-card p { margin-top: 10px; font-size: 15px; color: var(--af-text-soft); }

/* The six card icons. Each is an inline SVG in the Blade — six files would be
   six requests for six 20px marks — and everything about how they look is
   decided here: the tile, the size, and the colour they inherit through
   currentColor. */
.nlp-affiliate .af-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--af-sky-tint);
  color: var(--af-teal);
}
.nlp-affiliate .af-card-icon svg { width: 22px; height: 22px; display: block; }

/* ============ how it works ============ */
.nlp-affiliate .af-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  counter-reset: af-step;
}

.nlp-affiliate .af-step {
  background: var(--af-mist);
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius);
  padding: 26px 24px;
  position: relative;
}
.nlp-affiliate .af-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--af-teal); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
}
.nlp-affiliate .af-step h3 { font-size: 18px; margin-top: 14px; }
.nlp-affiliate .af-step p { margin-top: 9px; font-size: 14.5px; color: var(--af-text-soft); }

/* ============ the arithmetic ============ */
.nlp-affiliate .af-maths-card {
  background: var(--af-white);
  border: 1px solid var(--af-line);
  border-radius: 22px;
  box-shadow: var(--af-shadow);
  padding: 10px 34px 28px;
  max-width: 760px;
}

.nlp-affiliate .af-maths-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--af-line);
}
.nlp-affiliate .af-maths-row:last-of-type { border-bottom: 0; }

.nlp-affiliate .af-maths-row dt { font-size: 15.5px; font-weight: 400; color: var(--af-text); }
.nlp-affiliate .af-maths-row dd {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px;
  color: var(--af-ink); white-space: nowrap;
}

.nlp-affiliate .af-maths-minus dd { color: var(--af-text-soft); }

.nlp-affiliate .af-maths-total { background: var(--af-teal-tint); border-radius: 12px; padding-left: 16px; padding-right: 16px; margin: 4px -16px; border-bottom: 0; }
.nlp-affiliate .af-maths-total dt { font-weight: 600; }
.nlp-affiliate .af-maths-total dd { color: var(--af-teal-deep); }

.nlp-affiliate .af-maths-you { background: var(--af-gold-tint); border-radius: 12px; padding-left: 16px; padding-right: 16px; margin: 4px -16px; border-bottom: 0; }
.nlp-affiliate .af-maths-you dt { font-weight: 600; }
.nlp-affiliate .af-maths-you dd { color: var(--af-gold-deep); font-size: 19px; }

.nlp-affiliate .af-maths-us dt,
.nlp-affiliate .af-maths-us dd { color: var(--af-text-soft); font-weight: 400; }

.nlp-affiliate .af-maths-note {
  margin-top: 20px; font-size: 14.5px; color: var(--af-text-soft);
  border-left: 3px solid var(--af-teal-line); padding-left: 16px;
}

/* ============ calculator ============ */
.nlp-affiliate .af-calc-card {
  background: var(--af-mist);
  border: 1px solid var(--af-line);
  border-radius: 22px;
  padding: 30px 34px 28px;
}

.nlp-affiliate .af-calc-inputs {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px;
  align-items: start;
}

.nlp-affiliate .af-label {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--af-ink); margin-bottom: 8px;
}

.nlp-affiliate .af-help { margin-top: 7px; font-size: 13px; color: var(--af-text-soft); }

.nlp-affiliate .af-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; padding: 0;
  background: var(--af-sky-line);
  cursor: pointer;
}
.nlp-affiliate .af-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--af-teal); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 80, 95, .3);
}
.nlp-affiliate .af-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--af-teal); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 80, 95, .3);
}

.nlp-affiliate .af-range-out {
  display: inline-block; margin-top: 10px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--af-teal-deep);
}

.nlp-affiliate .af-input-money { display: flex; align-items: stretch; }
.nlp-affiliate .af-input-cur {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--af-white); border: 1px solid var(--af-line); border-right: 0;
  border-radius: 10px 0 0 10px;
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--af-text-soft);
}
.nlp-affiliate .af-input-money .af-input { border-radius: 0 10px 10px 0; }

.nlp-affiliate .af-input {
  width: 100%;
  background: var(--af-white);
  border: 1px solid var(--af-line);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--af-ink);
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nlp-affiliate .af-input:focus {
  border-color: var(--af-sky);
  box-shadow: 0 0 0 3px rgba(63, 169, 232, .16);
  outline: none;
}
.nlp-affiliate .af-textarea { resize: vertical; min-height: 110px; }
.nlp-affiliate .af-select { height: 44px; }

.nlp-affiliate .af-calc-outputs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: 30px;
}

.nlp-affiliate .af-calc-out {
  background: var(--af-white);
  border: 1px solid var(--af-line);
  border-radius: 16px;
  padding: 20px 22px;
}
.nlp-affiliate .af-calc-out-lbl { display: block; font-size: 13px; color: var(--af-text-soft); }
.nlp-affiliate .af-calc-out-val {
  display: block; margin-top: 6px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; color: var(--af-ink);
}
.nlp-affiliate .af-calc-out-help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--af-text-soft); }

.nlp-affiliate .af-calc-out-hero { background: var(--af-teal); border-color: var(--af-teal); }
.nlp-affiliate .af-calc-out-hero .af-calc-out-lbl { color: rgba(255, 255, 255, .8); }
.nlp-affiliate .af-calc-out-hero .af-calc-out-val { color: var(--af-gold); }
.nlp-affiliate .af-calc-out-hero .af-calc-out-help { color: rgba(255, 255, 255, .72); }

.nlp-affiliate .af-calc-note { margin-top: 18px; font-size: 13px; color: var(--af-text-soft); }

/* ============ terms ============ */
.nlp-affiliate .af-term-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
}

.nlp-affiliate .af-term { padding: 20px 0; border-bottom: 1px solid var(--af-line); }
.nlp-affiliate .af-term dt {
  font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--af-ink);
}
.nlp-affiliate .af-term dd { margin-top: 7px; font-size: 15px; color: var(--af-text-soft); }

/* ============ rules ============ */
.nlp-affiliate .af-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.nlp-affiliate .af-rules-col { border-radius: var(--af-radius); padding: 26px 28px; border: 1px solid transparent; }
.nlp-affiliate .af-rules-col h3 { font-size: 19px; }
.nlp-affiliate .af-rules-col ul { margin-top: 14px; display: grid; gap: 12px; }
.nlp-affiliate .af-rules-col li { position: relative; padding-left: 26px; font-size: 15px; color: var(--af-text-soft); }

.nlp-affiliate .af-rules-do { background: var(--af-teal-tint); border-color: var(--af-teal-line); }
.nlp-affiliate .af-rules-do li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 13px; height: 8px;
  border-left: 2px solid var(--af-green-deep); border-bottom: 2px solid var(--af-green-deep);
  transform: rotate(-45deg);
}

.nlp-affiliate .af-rules-dont { background: var(--af-rose-tint); border-color: #F0D5D3; }
.nlp-affiliate .af-rules-dont li::before,
.nlp-affiliate .af-rules-dont li::after {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 13px; height: 2px; background: var(--af-rose);
}
.nlp-affiliate .af-rules-dont li::before { transform: rotate(45deg); }
.nlp-affiliate .af-rules-dont li::after  { transform: rotate(-45deg); }

/* ============ who ============ */
.nlp-affiliate .af-who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.nlp-affiliate .af-who-item { border-top: 3px solid var(--af-teal); padding-top: 16px; }
.nlp-affiliate .af-who-item h3 { font-size: 17.5px; }
.nlp-affiliate .af-who-item p { margin-top: 8px; font-size: 14.5px; color: var(--af-text-soft); }

.nlp-affiliate .af-who-not {
  margin-top: 30px; padding: 24px 26px;
  background: var(--af-mist); border: 1px dashed var(--af-line); border-radius: var(--af-radius);
}
.nlp-affiliate .af-who-not h3 { font-size: 17.5px; }
.nlp-affiliate .af-who-not p { margin-top: 8px; font-size: 15px; color: var(--af-text-soft); max-width: 90ch; }

/* ============ faq ============ */
.nlp-affiliate .af-faq-list { max-width: 900px; border-top: 1px solid var(--af-line); }

.nlp-affiliate .af-faq-item { border-bottom: 1px solid var(--af-line); }

.nlp-affiliate .af-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-family: 'Poppins', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--af-ink);
}
/* Safari draws its own disclosure triangle through ::-webkit-details-marker. */
.nlp-affiliate .af-faq-item summary::-webkit-details-marker { display: none; }

.nlp-affiliate .af-faq-chev {
  width: 19px; height: 19px; flex: 0 0 auto; color: var(--af-sky-deep);
  transition: transform .18s ease;
}
.nlp-affiliate .af-faq-item[open] .af-faq-chev { transform: rotate(180deg); }

.nlp-affiliate .af-faq-body { padding: 0 2px 20px; }
.nlp-affiliate .af-faq-body p { font-size: 15px; color: var(--af-text-soft); max-width: 78ch; }

/* ============ application form ============ */
.nlp-affiliate .af-apply-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 50px;
  align-items: start;
}

.nlp-affiliate .af-apply-intro h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 10px; }
.nlp-affiliate .af-apply-lede { margin-top: 12px; font-size: 16px; color: var(--af-text-soft); }

.nlp-affiliate .af-apply-recap { margin-top: 26px; display: grid; gap: 12px; }
.nlp-affiliate .af-apply-recap li { font-size: 14.5px; color: var(--af-text-soft); }
.nlp-affiliate .af-apply-recap b {
  display: inline-block; min-width: 58px;
  font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--af-teal);
}

.nlp-affiliate .af-apply-contact { margin-top: 24px; font-size: 14px; color: var(--af-text-soft); }

.nlp-affiliate .af-form-card {
  background: var(--af-white);
  border: 1px solid var(--af-line);
  border-radius: 22px;
  box-shadow: var(--af-shadow-lift);
  padding: 32px 34px 34px;
}

.nlp-affiliate .af-form .af-field { margin-bottom: 20px; }
.nlp-affiliate .af-form .af-field:last-of-type { margin-bottom: 0; }

/* The honeypot. Taken out of the layout and out of the accessibility tree
   rather than display:none — some bots skip hidden fields but fill
   off-screen ones, which is exactly the signal wanted. */
.nlp-affiliate .af-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.nlp-affiliate .af-check { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nlp-affiliate .af-check input[type="checkbox"] { margin: 4px 0 0; flex: 0 0 auto; width: 16px; height: 16px; }
.nlp-affiliate .af-check label { font-size: 14.5px; color: var(--af-text); flex: 1; min-width: 200px; }

.nlp-affiliate .af-captcha { min-height: 78px; }

.nlp-affiliate .af-submit { width: 100%; margin-top: 26px; padding: 15px 26px; font-size: 15px; }

.nlp-affiliate .af-privacy { margin-top: 14px; font-size: 12.5px; color: var(--af-text-soft); text-align: center; }

/* ---- validation ---- */
.nlp-affiliate .af-field-error { display: none; margin-top: 6px; font-size: 13px; color: var(--af-rose); }
.nlp-affiliate .af-field-error.af-shown { display: block; }
.nlp-affiliate .af-input.af-invalid { border-color: var(--af-rose); box-shadow: 0 0 0 3px rgba(194, 83, 74, .12); }

.nlp-affiliate .af-form-error {
  margin-bottom: 20px; padding: 13px 16px; border-radius: 12px;
  background: var(--af-rose-tint); border: 1px solid #F0D5D3;
  font-size: 14.5px; color: #8E332C;
}

/* ---- success ---- */
.nlp-affiliate .af-form-done { text-align: center; padding: 26px 10px 18px; }
.nlp-affiliate .af-form-done:focus { outline: none; }
.nlp-affiliate .af-done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--af-teal-tint); color: var(--af-green-deep);
  margin-bottom: 18px;
}
.nlp-affiliate .af-done-mark svg { width: 26px; height: 26px; }
.nlp-affiliate .af-form-done h3 { font-size: 22px; }
.nlp-affiliate .af-form-done p { margin-top: 10px; font-size: 15px; color: var(--af-text-soft); max-width: 44ch; margin-left: auto; margin-right: auto; }

/* ============ closing band ============ */
.nlp-affiliate .af-close { margin-top: 78px; padding-bottom: 20px; }

.nlp-affiliate .af-close-in {
  position: relative; overflow: hidden; border-radius: 24px;
  background: linear-gradient(140deg, var(--af-teal) 0%, var(--af-teal-deep) 60%, #073A40 100%);
  color: #fff;
  padding: 56px 54px;
  text-align: center;
  /* .af-wrap supplies a horizontal padding the band needs replaced with its
     own, and a max-width it keeps. */
  padding-left: 54px; padding-right: 54px;
}

.nlp-affiliate .af-close-in::after {
  content: ""; position: absolute; right: -90px; bottom: -120px; width: 340px; height: 340px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; background: rgba(143, 174, 155, .18); pointer-events: none;
}
.nlp-affiliate .af-close-in::before {
  content: ""; position: absolute; left: -60px; top: -100px; width: 240px; height: 240px;
  border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%; background: rgba(240, 192, 51, .10); pointer-events: none;
}

.nlp-affiliate .af-close-in h2 { position: relative; z-index: 1; color: #fff; font-size: clamp(28px, 3.4vw, 40px); }
.nlp-affiliate .af-close-in p {
  position: relative; z-index: 1;
  margin: 14px auto 0; max-width: 56ch;
  font-size: 15.5px; color: rgba(255, 255, 255, .85);
}
.nlp-affiliate .af-close-in .af-btn { position: relative; z-index: 1; margin-top: 26px; }

.nlp-affiliate .af-close-existing { margin-top: 24px; font-size: 14px; }

/* ============ responsive ============ */
/* Two breaks, the same pair the author and about pages use: the grids collapse
   to two columns on a tablet and to one on a phone. */
@media (max-width: 1080px) {
  .nlp-affiliate .af-wrap { padding: 0 22px; }
  .nlp-affiliate .af-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .nlp-affiliate .af-hero-art { justify-content: flex-start; }
  .nlp-affiliate .af-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-affiliate .af-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-affiliate .af-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-affiliate .af-apply-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .nlp-affiliate .af-term-grid { gap: 0 30px; }
}

@media (max-width: 760px) {
  .nlp-affiliate .af-sec { padding-top: 54px; }
  .nlp-affiliate .af-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .nlp-affiliate .af-why-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-affiliate .af-steps { grid-template-columns: minmax(0, 1fr); }
  .nlp-affiliate .af-who-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-affiliate .af-term-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-affiliate .af-rules-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-affiliate .af-calc-inputs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .nlp-affiliate .af-calc-outputs { grid-template-columns: minmax(0, 1fr); }
  .nlp-affiliate .af-calc-card { padding: 24px 20px; }
  .nlp-affiliate .af-maths-card { padding: 6px 20px 22px; }
  .nlp-affiliate .af-form-card { padding: 26px 22px 28px; }
  .nlp-affiliate .af-close-in { padding: 42px 24px; }
  .nlp-affiliate .af-close { margin-top: 54px; }
  /* The maths rows stack rather than squeeze: a long translated label beside a
     nowrap amount is what forces horizontal overflow on a narrow screen. */
  .nlp-affiliate .af-maths-row { flex-direction: column; gap: 2px; align-items: flex-start; }
}

/* The reCAPTCHA iframe is a fixed 304px wide and cannot be reflowed; below that
   it is scaled down instead, which is Google's own supported workaround. */
@media (max-width: 400px) {
  .nlp-affiliate .af-captcha .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
  .nlp-affiliate .af-captcha { min-height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .nlp-affiliate .af-card,
  .nlp-affiliate .af-btn,
  .nlp-affiliate .af-faq-chev { transition: none; }
  .nlp-affiliate .af-card:hover { transform: none; }
}

/* Printing the terms is a reasonable thing to want before applying. */
@media print {
  .nlp-affiliate .af-hero-art,
  .nlp-affiliate .af-calc,
  .nlp-affiliate .af-apply,
  .nlp-affiliate .af-close { display: none; }
  .nlp-affiliate .af-faq-item .af-faq-body { display: block; }
}