/* ==========================================================================
   PMG Partner Programs (/partners/) — access pages and gated deliverables.

   Built on the NG token set (`tokens.css`) rather than the hex values in the
   Claude Design source: ours are the WCAG-AA darkened brand colours from the
   accessibility pass (#E42027 / #1774B5), so reusing them keeps these pages
   consistent with the rest of the site and passes contrast.

   Loaded only on /partners/ pages via {% block ng_head %} — it is not part of the
   main ng.css bundle, which every marketing page pays for.
   ========================================================================== */

/* ── Hero reset ────────────────────────────────────────────────────────── */
/* `.ng-hero` is the HOMEPAGE hero: a two-column grid (copy + image mosaic)
   whose `h1` is `white-space: nowrap` at up to 92px, sized to sit in one
   column. Reusing it for a single-column page squeezes the text into 1.15fr
   and runs the headline off the screen — which is exactly what happened here.

   Every single-column NG page resets it the same way (see
   `.ng-hero--listing` in listing.html). Doubling the class in the selector
   (`.ng-hero.pp-hero`) wins on specificity rather than load order, so this
   holds regardless of where the stylesheet ends up in the head. */
.ng-hero.pp-hero .ng-wrap,
.ng-hero.pp-rhero .ng-wrap {
  display: block;
  padding: 52px 32px 48px;
}
.ng-hero.pp-hero h1,
.ng-hero.pp-rhero h1 {
  white-space: normal;
}

/* ── Landing / access ──────────────────────────────────────────────────── */
.pp-hero {
  /* Blueprint grid on ink, echoing the design's secure-document feel. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 26px 26px;
}
.pp-hero__h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.pp-hero__sub {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pmg-text-on-dark-body);
  max-width: 560px;
}

.pp-access { padding-bottom: 72px; }
.pp-access__grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 36px;
}
.pp-access__side { display: flex; flex-direction: column; gap: 14px; }

.pp-card {
  background: #fff;
  border: 1px solid var(--pmg-hairline-1);
  padding: 22px 24px;
}
.pp-card--form { border-top: 3px solid var(--pmg-red); padding: 28px 30px; }
.pp-card__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}
.pp-card__sub {
  font-size: 13px;
  color: var(--pmg-text-muted);
  line-height: 1.55;
  margin: 6px 0 0;
}
.pp-card__foot {
  border-top: 1px solid var(--pmg-hairline-2);
  margin: 18px 0 0;
  padding-top: 14px;
  font-size: 12px;
  color: var(--pmg-text-muted);
  line-height: 1.6;
}

.pp-field { display: block; margin-top: 14px; }
.pp-field__label { font-size: 12.5px; font-weight: 700; }
.pp-field input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  border: 1px solid var(--pmg-text-disabled);
  padding: 12px 13px;
  font-size: 14px;
  font-family: var(--font-mono);
  background: #FDFDFC;
  text-transform: uppercase;
}
.pp-field input:focus { outline: 2px solid var(--pmg-ink); outline-offset: -1px; }
.pp-form__submit { width: 100%; margin-top: 16px; }

.pp-note {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.pp-note--error {
  background: #FDF0F0;
  border-left: 3px solid var(--pmg-red);
  color: #8a1f23;
}
.pp-note--amber {
  background: #FFF8EC;
  border-left: 3px solid #C77700;
  color: #6b4600;
}
.pp-note__h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 600;
  margin-bottom: 4px;
}
.pp-note .ng-btn { margin-top: 10px; }

.pp-inside { list-style: none; margin: 10px 0 0; padding: 0; }
.pp-inside li {
  display: flex;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pmg-hairline-2);
  font-size: 13px;
}
.pp-inside li span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--pmg-red);
}

.pp-independence {
  background: #F7F7F4;
  border-left: 3px solid var(--pmg-blue);
  padding: 16px 20px;
}
.pp-independence__h {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--pmg-blue);
}
.pp-independence p { font-size: 13px; line-height: 1.6; margin: 5px 0 0; }
/* Scope-boundary variant (DPR "what we never touch") — same panel, ink accent
   so it reads as a limit rather than a reassurance. */
.pp-independence--scope { border-left-color: var(--pmg-ink); background: #F2F2EF; }
.pp-independence--scope .pp-independence__h { color: var(--pmg-ink); }

.pp-cta {
  background: var(--pmg-ink);
  color: #fff;
  border-left: 3px solid var(--pmg-red);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pp-cta__t { font-size: 13.5px; font-weight: 600; }

/* ── Hub ───────────────────────────────────────────────────────────────── */
.pp-hub__grid {
  display: grid;
  /* auto-FIT, not auto-fill: with one programme live, auto-fill keeps the empty
     tracks and leaves a lonely 320px card against a wall of white. The 560px
     cap stops a single card stretching the full 1160px, which reads as a
     mistake in the other direction. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 560px));
  gap: 18px;
  margin: 40px 0 56px;
}
.pp-hub__card {
  display: block;
  background: #fff;
  border: 1px solid var(--pmg-hairline-1);
  border-top: 3px solid var(--pmg-red);
  padding: 24px 26px;
  color: inherit;
}
.pp-hub__card:hover { border-color: var(--pmg-ink); }
.pp-hub__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  margin: 6px 0 8px;
}
.pp-hub__b { font-size: 13.5px; line-height: 1.6; color: var(--pmg-text-muted); }

/* ── Gated deliverable ─────────────────────────────────────────────────── */
.pp-preview-bar {
  background: #C77700;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 8px 24px;
  text-align: center;
}
.pp-docbar { background: #fff; border-bottom: 1px solid var(--pmg-hairline-1); }
.pp-docbar__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--pmg-text-muted);
  text-transform: uppercase;
}
.pp-docbar__sib { margin-right: 8px; }

.pp-rhero__h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.pp-rhero__spec {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--pmg-text-on-dark-body);
}
.pp-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 22px;
  margin-top: 26px;
  border-top: 1px solid var(--pmg-ink-4);
  padding-top: 18px;
}
.pp-meta span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--pmg-red-on-dark);
}
.pp-meta strong { display: block; font-size: 12.5px; margin-top: 4px; font-weight: 600; }

/* Headline band — tone drives the colour, so the same markup serves any
   programme's verdict vocabulary. */
.pp-verdict { padding: 22px 0; color: #fff; }
.pp-verdict--positive { background: #2E7D32; }
.pp-verdict--caution  { background: #C77700; }
.pp-verdict--negative { background: var(--pmg-red); }
.pp-verdict--neutral  { background: var(--pmg-ink); }
.pp-verdict__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  opacity: .92;
}
.pp-verdict__v {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  margin-top: 4px;
}
.pp-verdict__s { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; max-width: 900px; }

.pp-report { padding-bottom: 72px; }
.pp-sec { margin-top: 40px; }
.pp-sec__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--pmg-ink);
  padding-bottom: 8px;
  margin: 0 0 16px;
}
.pp-sec__h span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--pmg-red);
}
.pp-sec__lead { font-size: 13.5px; color: var(--pmg-text-muted); line-height: 1.6; margin: 0 0 16px; }

.pp-risks { list-style: none; margin: 0; padding: 0; }
.pp-risks li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pmg-hairline-2);
  font-size: 14px;
  line-height: 1.6;
}
.pp-risks li > span:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--pmg-red);
  flex-shrink: 0;
}

/* The document itself. */
.pp-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.pp-doc__head .pp-sec__h { flex: 1 1 260px; }
.pp-doc__frame {
  border: 1px solid var(--pmg-hairline-1);
  background: #F7F7F4;
  margin-top: 16px;
  height: 900px;
}
.pp-doc__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pp-doc__hint { font-size: 12.5px; color: var(--pmg-text-muted); margin-top: 10px; }

.pp-limits { font-size: 12.5px; line-height: 1.65; color: var(--pmg-text-muted); margin-top: 14px; }
.pp-signoff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--pmg-hairline-2);
  padding-top: 14px;
}
.pp-signoff span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--pmg-text-muted);
}
.pp-signoff strong { display: block; font-size: 13.5px; margin-top: 3px; }

.pp-close {
  background: var(--pmg-ink);
  color: #fff;
  padding: 28px 30px;
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.pp-close__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
}
.pp-close p { margin: 6px 0 0; font-size: 13.5px; color: var(--pmg-text-on-dark-body); max-width: 560px; }
.pp-close__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.pp-printfoot {
  display: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--pmg-text-muted);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pp-access__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* A 4-page A4 PDF in an iframe on a phone is pinch-zoom misery, and these
     readers are phone-first — so drop the embed and let the button (and the
     device's own PDF viewer) do the job. The HTML header above is why the
     page is still worth loading on mobile. */
  .pp-doc__frame { display: none; }
  .pp-doc__head { align-items: stretch; }
  .pp-doc__head .ng-btn { width: 100%; text-align: center; }
  .pp-close { flex-direction: column; align-items: flex-start; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .pp-docbar,
  .pp-preview-bar,
  .pp-close,
  .pp-doc__frame,
  .pp-doc__hint,
  .ng-navbar,
  .ng-footer { display: none !important; }

  .pp-rhero, .pp-verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-sec { break-inside: avoid; }

  /* Repeat the issued-to line at the foot of every printed page, so a page
     that gets separated from the rest still says who it was issued to. */
  .pp-printfoot {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 0;
    border-top: 1px solid #ddd;
    background: #fff;
  }
  @page { size: A4; margin: 14mm 12mm 18mm; }
}

/* Red buttons on the partner pages' own dark bands (the landing CTA and the
   report's closing band) — same fix as the NG dark sections: invert to
   white-bg / red-text on hover so they don't disappear into the ink. The
   amber expiry note's red button is deliberately NOT here — it sits on a light
   panel where the default red→ink hover is correct. */
.pp-cta .ng-btn--red:hover,
.pp-close .ng-btn--red:hover {
  background: #fff;
  color: var(--pmg-red);
}