/* ==========================================================================
   partners.css
   The three Partners pages: Partner Program (/partner-program), Introducing
   Brokers (/introducing-broker) and Refer a Friend (/refer-a-friend).
   Ported from update/stage6/Partners.

   LOAD css/about.css FIRST. That file is the shared editorial page kit — the
   tokens (--ab-*), the hero, section shell, heads, eyebrows, buttons, sub-nav,
   note and closing band all live there and are used unchanged here. Its `ab-`
   prefix is historical: it was written for the About sequence and is now the
   base layer for both sequences. This file adds only what About has no
   equivalent of.

   The same porting rules apply as in about.css: every colour is a token with a
   light counterpart, no font-family is declared, and reveal-on-scroll is
   .animate-on-scroll (observed by js/general.js) rather than the source's own
   IntersectionObserver.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero network lines
   The decorative constellation behind the Partners hero. It carries no
   meaning — nodes are not offices, partners or countries — so it is
   aria-hidden and drawn at low contrast.
   -------------------------------------------------------------------------- */
.pt-hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

.pt-hero__lines line {
  stroke: var(--ab-line);
  stroke-width: 1;
}

.pt-hero__lines circle {
  fill: var(--ab-gold);
  opacity: 0.55;
}

.pt-hero__lines circle.pulse {
  animation: pt-pulse 4.5s ease-in-out infinite;
}

@keyframes pt-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}

.pt-hero__sub {
  margin: 18px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ab-platinum);
}

/* --------------------------------------------------------------------------
   2. Two ways to partner
   -------------------------------------------------------------------------- */
/* ===== The grid rule technique used by every card matrix in this file =====

   Container draws border-top + border-left; each cell draws border-right +
   border-bottom. Full rows compose into a complete box with single hairlines
   and no :last-child bookkeeping in either writing direction.

   What it replaces, and why: these grids were `gap: 1px` over a
   line-coloured container background, which is elegant only while every row
   is full. Six cards in an auto-fit grid resolved to four columns on a wide
   screen, and the two empty tracks in the second row rendered the container's
   own gold background as a large solid slab.

   Two things follow, and both matter:
     - column counts are FIXED per breakpoint, chosen so the card counts on
       these pages divide evenly (6 and 9 over three columns);
     - the cells no longer paint a background, so an incomplete row is simply
       absent rather than filled with anything.
   Check both page card counts before changing a column count here. */
.pt-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.rtl .pt-paths,
.rtl .pt-benefits,
.rtl .pt-personas,
.rtl .pt-steps {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
}

.pt-path {
  padding: 40px 36px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.rtl .pt-path,
.rtl .pt-benefit,
.rtl .pt-persona,
.rtl .pt-step {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.pt-path .idx {
  display: block;
  margin-bottom: 16px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.pt-path h3 {
  margin: 0 0 12px;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.pt-path p {
  margin: 0;
  max-width: 46ch;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   3. Numbered benefit cards
   Six on the program page, nine on the IB page — auto-fit rather than a fixed
   column count so both settle without a per-page override.
   -------------------------------------------------------------------------- */
/* Three columns, not auto-fit: the program page has six cards and the IB page
   nine, and both divide by three. auto-fit resolved to four on a wide screen
   and left the second row two cards short. */
.pt-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.pt-benefit {
  padding: 32px 30px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.pt-benefit .n {
  display: block;
  margin-bottom: 14px;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.pt-benefit h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.pt-benefit p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   4. Who it is for
   -------------------------------------------------------------------------- */
/* Six personas over three columns — two full rows. */
.pt-personas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.pt-persona {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 28px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.pt-persona .dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ab-gold);
  box-shadow: 0 0 0 4px var(--ab-glow);
}

.pt-persona h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ab-ink);
}

/* --------------------------------------------------------------------------
   5. Step sequence
   Five steps on the IB page, four on Refer a Friend. The counter rule sits on
   the number, not between the cards, so a wrapped row never leaves a dangling
   connector pointing at nothing.
   -------------------------------------------------------------------------- */
/* Four columns by default, which is Refer a Friend's four steps in one row.
   The IB page has five and carries .pt-steps--five to match. A step sequence
   reads as a sequence only while it is one unbroken row, so the count is
   declared rather than inferred. */
.pt-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.pt-steps--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pt-step {
  padding: 30px 26px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.pt-step .num {
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ab-gold);
  border-bottom: 1px solid var(--ab-line);
  font-variant-numeric: tabular-nums;
}

.pt-step h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.pt-step p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   6. Partner Portal illustration

   This is a PICTURE OF A LAYOUT, not a preview of an account. Two rules hold
   it on the right side of BRD §8.2 (no simulated functionality) and §3.2 (no
   performance claims), and both are load-bearing:

     - every value is a neutral label — "Tracked", "Per Agreement",
       "Managed" — never a number, a rate, a rebate or a balance;
     - there is no chart. The stage6 source draws a rising polyline here. A
       climbing line with no data behind it is a performance claim, so it was
       dropped in the port rather than restyled.

   The caption beneath says what the panel is. Do not remove it, and do not let
   a figure of any kind into these rows.
   -------------------------------------------------------------------------- */
.pt-portal {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.pt-portal__frame {
  overflow: hidden;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

.pt-portal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ab-line);
}

.pt-portal__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ab-line);
}

.pt-portal__bar span {
  margin-left: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.rtl .pt-portal__bar span {
  margin-left: 0;
  margin-right: 12px;
  letter-spacing: 0;
}

.pt-portal__body {
  padding: 26px 24px 22px;
}

.pt-portal__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 22px;
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.rtl .pt-portal__metrics {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
}

.pt-portal__metric {
  padding: 16px 14px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.rtl .pt-portal__metric {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.pt-portal__metric .l {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.rtl .pt-portal__metric .l,
.rtl .pt-portal__row span {
  letter-spacing: 0;
}

/* Quiet on purpose. These are placeholders for a value the reader will only
   ever see inside their own portal, and they must not read as data. */
.pt-portal__metric .v {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--ab-ink-quiet);
}

.pt-portal__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ab-line);
}

.pt-portal__row span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pt-portal__row b {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ab-ink);
}

.pt-portal__note {
  margin: 18px 0 0;
  font-size: 0.76rem;
  color: var(--ab-ink-muted);
}

.pt-portal__side h2 {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 500;
  line-height: 1.18;
  color: var(--ab-ink);
}

.pt-portal__side > p {
  margin: 0 0 22px;
  color: var(--ab-ink-muted);
}

.pt-portal__side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-portal__side li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 0.92rem;
  color: var(--ab-ink-muted);
  border-top: 1px solid var(--ab-line);
}

.pt-portal__side li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--ab-gold);
}

/* --------------------------------------------------------------------------
   7. Programme disclosure
   The eligibility/jurisdiction qualifier that closes all three pages. It is a
   condition on every claim above it, so it stays with them — do not move it
   into the footer's legal block.
   -------------------------------------------------------------------------- */
.pt-disclosure {
  max-width: 820px;
  margin: 34px auto 0;
  padding-top: 22px;
  font-size: 0.78rem;
  color: var(--ab-ink-muted);
  border-top: 1px solid var(--ab-line);
}

.pt-disclosure p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pt-hero__lines circle.pulse {
    animation: none;
    opacity: 0.55;
  }
}

/* Column counts step 3 -> 2 -> 1 and 5/4 -> 2 -> 1. Every count below still
   divides the card counts these pages carry (6, 9, 6, 5, 4), except the IB
   page's five steps and nine benefits over two columns — and those degrade to
   a short last row, not to a hole, because the cells paint no background. */
@media (max-width: 1199.98px) {
  .pt-portal {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pt-steps,
  .pt-steps--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .pt-paths {
    grid-template-columns: 1fr;
  }

  .pt-path {
    padding: 32px 26px;
  }

  .pt-benefits,
  .pt-personas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pt-portal__metrics {
    grid-template-columns: 1fr;
  }

  .pt-portal__row {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 575.98px) {
  .pt-benefits,
  .pt-personas,
  .pt-steps,
  .pt-steps--five {
    grid-template-columns: 1fr;
  }
}