/* ═══════════════════════════════════════════════════════════════════════
   Partner program — SHARED template for /partners/<program>/ pages.
   Hero + how-it-works steps + what-you-get + closer. Accent PURPLE.
   Hairline-on-transparent, no card fills. Linked as ../_program.css.
   ═══════════════════════════════════════════════════════════════════════ */
@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

.pp-main { position: relative; z-index: 1; overflow-x: clip; }
.blur-t { opacity: 0; filter: blur(12px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), filter 720ms cubic-bezier(0.22,1,0.36,1); transform: translateZ(0); backface-visibility: hidden; will-change: filter, opacity; }
.blur-t.is-in { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .blur-t { opacity: 1; filter: none; transition: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pp-hero { max-width: 1000px; margin-inline: auto; padding: clamp(118px,15vh,176px) clamp(20px,5vw,72px) clamp(48px,7vh,88px); }
/* Apply page has only a hero + form (no steps/gets grid), so it left-anchors
   to the site rail instead of centering a narrow 1000px column. Bounded by a
   1920px outer band: pinned to the rail (H1 aligned with the logo) up to
   1920, then the band recenters above 1920 so it never hugs the far-left
   edge on ultra-wide screens. */
.pp-hero.pp-hero--apply { max-width: 1920px; padding-inline: clamp(20px,5vw,96px); }
.pa-lead { min-width: 0; }
.pa-side { display: none; }

/* ── Apply page: the programs switchboard (right rail) ─────────────────
   Mirrors the form's "How do you want to partner with us?" field: the seven
   real programs, grouped by family, with their economics. A single teal
   marker travels to the active row (auto-cycles, pauses on hover); the
   active row brightens and its hook blurs in. Type-led, hairline, one accent. */
@media (min-width: 1200px) {
  .pp-hero.pp-hero--apply {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    column-gap: clamp(56px, 8vw, 168px);
    align-items: center;
  }
  .pa-side { display: block; }
}
.pa-side-label { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 clamp(18px,2.6vh,28px); padding-bottom: 13px; border-bottom: 1px solid var(--border-subtle); }
.pa-prog { position: relative; padding-left: 24px; }
.pa-prog-marker { position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 2px; background: #7C4FE8; transition: transform 440ms cubic-bezier(0.22,1,0.36,1), height 440ms cubic-bezier(0.22,1,0.36,1); will-change: transform, height; }
.pa-prog-fam { font-family: var(--font-base); font-size: 13px; color: var(--text-quaternary); margin: clamp(20px,2.6vh,28px) 0 4px; }
.pa-prog-fam:first-of-type { margin-top: 0; }
.pa-prog-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(11px,1.5vh,15px) 0; border-top: 1px solid var(--border-subtle); cursor: pointer; }
.pa-prog-row .pa-prog-t, .pa-prog-row .pa-prog-hook { cursor: pointer; }
.pa-prog-t { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px,1.5vw,23px); letter-spacing: -0.012em; line-height: 1; color: var(--text-tertiary); white-space: nowrap; transition: color 320ms ease; }
.pa-prog-hook { font-family: var(--font-base); font-size: 13.5px; line-height: 1.35; text-align: right; color: var(--text-quaternary); opacity: 0.42; filter: blur(3px); transition: opacity 400ms ease, filter 400ms ease, color 320ms ease; }
.pa-prog-row.is-active .pa-prog-t { color: var(--text-primary); }
.pa-prog-row.is-active .pa-prog-hook { opacity: 1; filter: blur(0); color: var(--text-secondary); }
.pa-prog.is-static .pa-prog-t { color: var(--text-secondary); }
.pa-prog.is-static .pa-prog-hook { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .pa-prog-marker { transition: none; }
  .pa-prog-hook { filter: none; }
}
.pp-crumb { font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); margin: 0 0 clamp(24px,4vh,42px); }
.pp-crumb a { color: var(--text-tertiary); text-decoration: none; }
.pp-crumb a:hover { color: var(--text-secondary); }
.pp-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px,5.6vw,80px); line-height: 0.97; letter-spacing: -0.032em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.pp-h1 em { font-style: normal; color: var(--text-primary); }
.pp-sub { font-family: var(--font-base); font-size: clamp(15px,1.3vw,19px); line-height: 1.5; color: var(--text-secondary); margin: 22px 0 0; max-width: 56ch; }
.pp-hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(28px,4vh,42px); }
.pp-hero-cta .link-cta { align-self: center; padding-top: 4px; }

/* ── How it works (numbered staircase) ────────────────────────────────── */
.pp-steps { max-width: 1000px; margin-inline: auto; padding: clamp(48px,8vh,96px) clamp(20px,5vw,72px); }
.pp-sec-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,3.6vw,50px); line-height: 1.02; letter-spacing: -0.026em; color: var(--text-primary); margin: 0 0 clamp(24px,4vh,44px); }
.pp-sec-h2 em { font-style: normal; color: var(--text-primary); }
.pp-step-list { list-style: none; margin: 0; padding: 0; }
.pp-step { display: grid; grid-template-columns: clamp(44px,5vw,80px) 1fr; gap: clamp(14px,2.4vw,40px); align-items: baseline; padding: clamp(20px,2.6vw,32px) 0; border-top: 1px solid var(--border-subtle); }
.pp-step:last-child { border-bottom: 1px solid var(--border-subtle); }
.pp-step-n { font-family: var(--font-code); font-size: 13px; color: var(--text-quaternary); }
.pp-step-t { font-family: var(--font-display); font-size: clamp(20px,2.2vw,30px); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); }
.pp-step-d { font-family: var(--font-base); font-size: clamp(14px,1.1vw,16px); line-height: 1.5; color: var(--text-secondary); margin: 8px 0 0; max-width: 52ch; }

/* ── What you get ─────────────────────────────────────────────────────── */
.pp-gets { max-width: 1000px; margin-inline: auto; padding: clamp(48px,8vh,96px) clamp(20px,5vw,72px); }
.pp-get-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 0; }
.pp-get { padding: clamp(22px,2.6vw,32px) clamp(22px,2.4vw,34px) clamp(22px,2.6vw,32px) 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.pp-get-t { font-family: var(--font-display); font-size: clamp(18px,1.7vw,23px); color: var(--text-primary); }
.pp-get-d { font-family: var(--font-base); font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); max-width: 42ch; }

/* ── Directory (the partner list, grouped) ────────────────────────────── */
.pp-dir { max-width: 1000px; margin-inline: auto; padding: clamp(30px,5vh,64px) clamp(20px,5vw,72px) clamp(40px,6vh,80px); display: flex; flex-direction: column; gap: clamp(34px,4.5vh,56px); }
.pp-dir-label { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 clamp(14px,2vh,20px); padding-bottom: 13px; border-bottom: 1px solid var(--border-subtle); }
.pp-dir-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(2px,0.4vw,8px) clamp(20px,3vw,48px); }
.pp-dir-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-base); font-size: clamp(14px,1.15vw,16.5px); color: var(--text-secondary); text-decoration: none; padding: 11px 0; transition: color 200ms ease; }
.pp-dir-item:hover { color: var(--text-primary); }
.pp-dir-fav { width: 20px; height: 20px; object-fit: contain; flex: none; border-radius: 4px; }
.pp-dir-fav[src*="anthropic"] { filter: brightness(0) invert(1); }
.pp-dir-search { margin-top: clamp(26px,4vh,40px); }
.pp-dir-group[hidden] { display: none; }
.pp-dir-empty { font-family: var(--font-base); font-size: 15px; color: var(--text-tertiary); margin: 4px 0 0; }
@media (max-width: 760px) { .pp-dir-grid { grid-template-columns: 1fr 1fr; } }

/* ── Closer ───────────────────────────────────────────────────────────── */
.pp-end { padding: clamp(88px,14vh,180px) clamp(20px,5vw,72px); text-align: center; }
.pp-end-frame { max-width: 740px; margin-inline: auto; }
.pp-end-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px,5.2vw,72px); line-height: 0.97; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; }
.pp-end-h2 em { font-style: normal; color: var(--text-primary); }
.pp-end-cta { margin-top: clamp(28px,4vh,44px); }
/* HubSpot apply form — capped, left-aligned with the hero H1/sub. */
.pp-form { max-width: 560px; margin: clamp(28px,4vh,44px) 0 0; text-align: left; }
.pp-end-links { font-family: var(--font-base); font-size: 14px; color: var(--text-tertiary); margin: 22px 0 0; }
.pp-end-links a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border); }
.pp-end-links a:hover { color: var(--text-primary); }

@media (max-width: 760px) {
  .pp-get-list { grid-template-columns: 1fr; }
  .pp-get { padding-right: 0; }
  .pp-step { grid-template-columns: auto 1fr; }
}
@media (min-width: 1600px) { .pp-hero, .pp-steps, .pp-gets { max-width: 1160px; } }