/* ─────────────────────────────────────────────────────────────────────────
   Partner portal — public landing (MAR-778 restyle of MAR-712; epic
   MAR-646, Figma 0.1 specimen § 2). Screen-owned selectors only (MAR-719
   split convention): linked by the head partial after the shared
   portal.css layer via screen_css = 'landing'.

   Marketing rhythm, deliberately NOT the portal's in-product density:
   150px vertical bands on the 1320px container, white cards on the beige
   ground with the warm hairline and no shadow, Poppins 600 display
   headings, DM Sans feature heads and body. Do not halve these — only
   in-product screens take the density step.
   (Dotted class names of shared-layer rules stay out of these comments —
   test_no_class_is_defined_in_two_files reads comments too.)
   ───────────────────────────────────────────────────────────────────────── */

/* The header rules moved to the shared layer with MAR-795: the fixed
   public nav is included by landing AND apply, so its classes live in
   portal.css per the split convention above. */

/* ── marketing bands on the shared container token ── */
.pp-band { padding:150px 56px; }
.pp-band--beige { background:var(--mp-beige); }
.pp-band--white { background:var(--bg-surface); }
.pp-band--offwhite { background:var(--mp-beige-3); }
.pp-inner { max-width:var(--mp-container-max); margin:0 auto; }

/* ── marketing type — display heads in the sans family at Figma 0.1
      proportions (80/61px at full width), feature body in DM Sans ── */
.pp-mkt-eyebrow { display:block; margin:0 0 18px; font-size:16px;
  font-weight:500; line-height:24px; color:var(--mp-muted); }
.pp-mkt-h1 { margin:0; font-size:clamp(40px, 5.5vw, 80px); line-height:1;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
.pp-mkt-h2 { margin:0; font-size:clamp(34px, 4.2vw, 61px); line-height:1.05;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
.pp-mkt-lead { margin:26px 0 0; font-size:20px; line-height:30px;
  color:var(--mp-muted); max-width:62ch; }
.pp-mkt-body { margin:0; font-family:var(--font-feature); font-size:18px;
  line-height:1.4; color:var(--mp-muted); }

/* ── the org-type picker: white cards, warm hairline, marketing padding ── */
.pp-org-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:52px; }
/* A fifth org card would otherwise sit alone on row three. Count-agnostic and
   INERT at four — the last card spans both columns only when the count is
   ODD, and today's last card is the fourth, so this selector matches nothing
   and the rendered page is byte-identical. Under the 820px collapse below
   (`grid-template-columns:1fr`) `1 / -1` names the only column and is a no-op
   there too. MAR-1833, prepared for MAR-1832's fifth ck_partners_type value. */
.pp-org-grid > .pp-org-card:last-child:nth-child(odd) { grid-column:1 / -1; }
.pp-org-card { padding:var(--mp-card-padding); display:flex;
  flex-direction:column; gap:14px; }
.pp-org-card__h { margin:0; font-family:var(--font-feature); font-size:25px;
  line-height:35px; font-weight:600; color:var(--mp-ink-2); }

/* ── CheckItem (docs/design/mp-design-system/components/core/CheckItem.jsx)
      recreated as classes: 16px bronze circle, white ✓ at 10px/700, body
      text in DM Sans ink ── */
.pp-check { margin:auto 0 0; padding:8px 0 0; list-style:none; display:flex;
  flex-direction:column; gap:9px; }
.pp-check__item { display:flex; align-items:flex-start; gap:10px;
  font-family:var(--font-feature); font-size:18px; line-height:1.4;
  color:var(--mp-ink-2); }
.pp-check__mark { width:16px; height:16px; margin-top:4px; border-radius:8px;
  background:var(--mp-bronze); color:var(--text-inverse); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  font-weight:700; line-height:1; }

/* ── hero triad (MAR-1834): issued / held / verified, three columns at the
      marketing rhythm. Collapses at the same 820px step as the picker grid
      below, so the hero and the cards stack together rather than at two
      different widths. The items carry no class of their own — they are
      grid children and need none, and a class with no rule would not
      resolve (test_partner_css_split). ── */
.pp-triad { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  margin-top:52px; }
.pp-triad__h { margin:0; font-family:var(--font-feature); font-size:20px;
  line-height:1.4; font-weight:600; color:var(--mp-ink-2); }
.pp-triad__p { margin:10px 0 0; font-family:var(--font-feature);
  font-size:18px; line-height:1.4; color:var(--mp-muted); }

/* ── marketing inline link (MAR-1834): the hero's credibility line, the
      per-card apply links and the closing band's contact link.

      NAVY AND UNDERLINED, which is the shared link primitive's treatment at
      marketing size rather than a new one — and it is an accessibility
      requirement, not a house-style preference. The obvious choice here is
      the bronze action pigment, and it fails: as a FOREGROUND, bronze
      #af7c4f measures 3.18:1 on the beige ground, 3.61:1 on white and
      3.43:1 on the offwhite — all under AA's 4.5:1, and none qualifies for
      the large-text 3:1 exemption (weight 600 at 20px is neither bold at
      ≥18.66px nor ≥24px). Navy clears it on all three at 11.2:1 or better.
      Bronze stays the action pigment where it is a BACKGROUND with the
      inverse label — the filled CTA pill — and that is unchanged; the
      point of these being text links is that four card links must not
      become four more pills.

      The underline is the second half, not decoration: two of these sit
      INLINE inside a paragraph, where colour alone is the only cue that
      they are links (WCAG 1.4.1). Size and family are inherited, so the
      two inline uses match their 20px lead and the card link matches its
      card. ── */
.pp-mkt-link { color:var(--mp-navy); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.2px; }

/* ── the seafarer deflection's store links (MAR-1834). Inline-flex on a
      span, not a block: the note must nest no div element, because the test
      that reads its copy stops at the first closing div tag. Same pigment
      and underline argument as the rule above — these sit inline in the
      note's sentence. ── */
.pp-getapp { display:inline-flex; flex-wrap:wrap; gap:4px 14px;
  align-items:baseline; }
.pp-getapp__link { color:var(--mp-navy); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.2px; }

/* ── closing band: the one bronze CTA beside its reassurance line ── */
.pp-cta-row { display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  margin-top:40px; }

/* ── small screens: the bands tighten ── */
@media (max-width:820px) {
  .pp-org-grid { grid-template-columns:1fr; }
  .pp-triad { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .pp-band { padding:72px 20px; }
}