/* =========================================================
   partners.html — the B2B page for online gift vendors
   Layers over tokens.css + styles.css. Nothing here touches the consumer pages.
   Order: browser surfaces → hero → opportunity → flow → branding → who → contact → responsive
   ========================================================= */

/* ---------- Browser surfaces ---------- */
.page-partners ::selection { background: var(--lavender); color: var(--ink); }
.page-partners { accent-color: var(--blue); }
.page-partners a:not(.btn):not(.badge) { text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
.page-partners .footer__grid a { text-decoration: none; }
.page-partners .footer__grid a:hover { text-decoration: underline; }
/* the same contrast-corrected primary fill the home page uses (white on it is 4.8:1) */
.page-partners .btn--primary { background: var(--blue-deep); }
@media (hover: hover) and (pointer: fine) {
  .page-partners .btn--primary:hover { background: #0b5ec4; }
}

/* The pack's sub-label is ink-mute at .62em in the shared stylesheet, which lands at 9.9px and
   3.5:1 here. Both are below the floor for text someone is meant to read. */
.page-partners .brand-pack__label small { color: var(--ink-soft); font-size: .74em; }

/* ---------- Hero ---------- */
.phero {
  padding: calc(var(--nav-h) + 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(60% 80% at 100% 0%, var(--lavender), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, var(--peach), transparent 70%),
    var(--mist);
}
.phero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.phero__title {
  margin: 0;
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
.phero__lead {
  max-width: 40ch;
  margin-top: 1.3rem;
  font-size: var(--t-lead);
  color: var(--ink-soft);
}
.phero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .9rem 1.6rem;
  margin-top: 2rem;
}
.phero__note { margin-top: 1.1rem; font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.phero__visual { width: 100%; margin: 0; }
.phero__visual img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}

/* ---------- The opportunity ---------- */
.pquote {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.plede {
  margin: 1.4rem auto 0;
  max-width: 46ch;
  font-size: var(--t-lead);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- The four-moment flow ---------- */
.pflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: none;
}
.pflow__step {
  display: grid;
  gap: .9rem;
  align-content: start;
  padding: 1.5rem 1.4rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.pflow__n {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  font-size: 1rem; font-weight: 800; line-height: 1;
  color: #fff;
  background: var(--purple);
}
.pflow__step h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.pflow__step p { font-size: var(--t-small); }

/* ---------- Branding: the sticker on its own ---------- */
.sticker-stage {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(150deg, var(--lavender), var(--peach));
}
.sticker-stage img {
  width: min(86%, 420px);
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(31, 46, 77, .28));
}

/* ---------- Who it's for ---------- */
.pwho {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0; padding: 0;
  list-style: none;
}
.pwho__item {
  padding: 1.5rem 1.4rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}
.pwho__item h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.pwho__item p { font-size: var(--t-small); }
.pwho__item:nth-child(1) { background: var(--peach); border-color: transparent; }
.pwho__item:nth-child(2) { background: var(--lavender); border-color: transparent; }
.pwho__item:nth-child(3) { background: var(--mint); border-color: transparent; }
.pwho__item:nth-child(4) { background: var(--butter); border-color: transparent; }

/* ---------- Contact ---------- */
.pcontact {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.pcontact__inner { display: flex; flex-direction: column; align-items: center; }
.pcontact h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.025em;
}
.pcontact p { margin-top: 1.1rem; max-width: 46ch; color: var(--on-dark-soft); font-size: var(--t-lead); }
.pcontact__actions { margin-top: 2rem; }
.pcontact__note { margin-top: 1.2rem; font-size: var(--t-small); color: var(--on-dark-soft); }
/* on the dark band the blue glow would read as a halo; a neutral elevation shadow instead */
.pcontact .btn--primary { box-shadow: 0 8px 20px -8px rgba(8, 14, 30, .55); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pflow, .pwho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .phero { padding-top: calc(var(--nav-h) + 3rem); }
  .phero__inner { grid-template-columns: 1fr; }
  .phero__copy { text-align: center; }
  .phero__lead { margin-inline: auto; }
  .phero__actions { justify-content: center; }
  .phero__visual { max-width: 460px; margin-inline: auto; order: -1; }
  .phero__actions .btn--lg { width: 100%; }

  .branded__visual { max-width: 460px; margin-inline: auto; width: 100%; }
}

@media (max-width: 620px) {
  .pflow, .pwho { grid-template-columns: 1fr; }
  .pflow__step, .pwho__item { padding: 1.2rem 1.2rem 1.35rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-partners .reveal { opacity: 1; transform: none; }
}