/* =============================================================
   partners-polish.css
   Marketing-polish layer on top of partners.css. Loaded AFTER
   partners.css so these rules win where they overlap.

   Scope - touches chrome only:
     - typography (fonts + hero headline)
     - buttons (flat brand fill, matching the design system)
     - trust-strip, faq, mode cards, footer wordmark
     - scroll-reveal helpers

   Explicitly DOES NOT touch:
     - anything under .maplibregl-*, .map-*, .dir-* (map + directory)
     - anything under .wiz-*, .apply-*, .form-*, .contact-modal*
     - anything under .legal-* (already styled separately)
   ============================================================= */

/* -------- fonts -------- */
/* The Google Fonts import is gone: the design system self-hosts Manrope and
   IBM Plex Mono, so this was a second render-blocking fetch for faces the page
   no longer uses. */

:root {
  /* One family, with weight and size carrying the hierarchy. That is what the
     approved design does, and it removes the second webfont entirely. */
  --font-display: var(--font-sans);
  /* Brand-aware rather than a fixed yellow, so the glow follows the theme. */
  --y-glow: color-mix(in srgb, var(--pri) 35%, transparent);
  --ease-m: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* This sheet loads LAST on purpose, so anything it declares beats the design
   system. That is fine for its own overrides and wrong for the typeface: pointing
   at the token means it stays last without silently winning the font. Its sibling
   mc-polish.css did exactly that and the console rendered in a face the bundle
   does not even ship. */
html, body {
  font-family: var(--font-sans);
}

/* single scroll container - prevents any double-scrollbar
   combinations from third-party CSS */
html { overflow-x: hidden; }
body { position: relative; }

/* -------- AMBIENT LAYERS: REMOVED -------- */
/* Three decorative layers used to sit behind every page here: three 800px
   blurred gradient orbs, a 440px radial spotlight that followed the cursor, and
   a fixed canvas of drifting dots joined by lines. All three used
   mix-blend-mode: screen or a low-alpha brand wash, which ADDS light. That is a
   move for a near-black page. On the design system's ground, warm paper in
   light and flat charcoal in dark, it reads as a smudge over the content rather
   than as atmosphere, so the layers came off instead of being re-tinted.
   partners-polish.js no longer injects any of them. */

/* -------- HERO -------- */
/* The hero is the same flat ground as the rest of the page. It used to carry a
   radial wash in partners.css that was then overridden to transparent here so
   the orbs could show through; both are gone, and the type carries the section. */
.hero {
  background: transparent;
  position: relative;
  overflow: hidden;
  /* Back to the proportions partners.css declares. The 6rem/5rem this used to
     carry was room for the particle mesh to read as a mesh; with the mesh gone
     it was simply a hole between the subtitle and the next section. */
  padding: 5rem 0 3rem !important;
}
.hero .container {
  position: relative;
  width: 100%;
}
@media (max-width: 700px) {
  .hero { padding: 3.5rem 0 2.25rem !important; }
}

/* Back-to-home link in the nav */
.site-nav-home {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: all 0.2s var(--ease-m);
}
.site-nav-home:hover {
  border-color: color-mix(in srgb, var(--pri) 40%, transparent);
  color: var(--yellow);
  background: color-mix(in srgb, var(--pri) 5%, transparent);
  text-decoration: none;
}
.site-nav-home i { font-size: 0.9rem; }

/* Kept after the ambient layers were removed: the footer paints a wordmark
   watermark in its own ::after, and this is what keeps the footer columns above
   it. There is nothing else left in the page for it to stack over. */
main, .site-footer { position: relative; z-index: 2; }

/* -------- NAV -------- */
.site-header {
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.site-nav a {
  position: relative;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  transition: color 0.2s var(--ease-m), background 0.2s var(--ease-m);
}
.site-nav a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); text-decoration: none; }

/* Header parity with wppbx.com: same 1240px width so the login CTA
   sits at the same right edge, and the Partner Portal Login behaves
   exactly like the wppbx.com "Become a Partner" button (the generic
   .site-nav a:hover grey wash must not override the brand fill). */
.site-header .container { max-width: 1240px; }
/* This anchor carries class "btn btn-primary", so it is ink ON the brand fill.
   It was --surf2, a SURFACE token, which happens to look right in dark and puts
   a pale card colour on a green button in light. --priInk is the half of the
   brand pair that means exactly this, so the two always move together. */
.site-nav a.site-nav-login { color: var(--priInk); }
.site-nav a.site-nav-login:hover {
  background: var(--priHover);
  color: var(--priInk);
}

/* -------- HERO typography -------- */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 920px;
  margin: 0.3rem auto 1.1rem;
}
/* The emphasised words in the headline are brand colour, painted directly.
   They used to be a moving three-stop gradient clipped to the glyphs, which
   needs background-clip:text and therefore -webkit-text-fill-color:transparent;
   that pair has no fallback, so any engine that misses the clip renders the
   headline invisible. A solid colour has no such failure mode, and it is what
   the design system does everywhere else. */
.hero h1 .shimmer,
.hero h1 em {
  font-style: normal;
  color: var(--pri);
}
.hero-sub {
  max-width: 680px;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--text-muted);
  line-height: 1.65;
}

/* small pill above the H1 - matches wppbx.com kicker */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem 0.3rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--pri) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pri) 5%, transparent);
  color: var(--yellow);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.hero-kicker::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 20%, transparent);
  animation: kpulse 2.6s ease-in-out infinite;
}
@keyframes kpulse {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 20%, transparent); }
  50%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pri) 6%, transparent); }
}

/* -------- BUTTONS -------- */
/* The design system's button, exactly: a solid --pri ground with --priInk on
   it, --priHover on hover, no gradient and no coloured glow. The old treatment
   ran the fill from brand to --warn and hung a 28px brand-tinted shadow under
   it. Both were compensating for a flat yellow on a near-black page, and on the
   new ground the amber stop reads as a second, unexplained colour.
   partners.css already declares this treatment. These rules exist only to undo
   what this sheet had overridden, so the two files now agree. */
.btn {
  transition: background 0.15s var(--ease-m),
              border-color 0.15s var(--ease-m),
              color 0.15s var(--ease-m),
              transform 0.08s ease;
}
.btn-primary {
  background: var(--pri);
  border: 1px solid var(--pri);
  color: var(--priInk);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--priHover);
  border-color: var(--priHover);
  color: var(--priInk);
  box-shadow: none;
}
.btn-ghost {
  background: var(--surf2);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--surf3);
  border-color: var(--line2);
  color: var(--ink);
}

/* -------- MODE CARDS (find/become) -------- */
.modes .mode-card,
.mode-card {
  transition: border-color 0.24s var(--ease-m),
              transform 0.24s var(--ease-m),
              box-shadow 0.24s var(--ease-m);
}
.mode-card:hover {
  border-color: color-mix(in srgb, var(--pri) 50%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--pri) 35%, transparent);
}

/* -------- TRUST STRIP polish -------- */
/* The ::before radial wash is gone: the strip already has a hairline top and
   bottom in partners.css, and that is what separates it from the sections either
   side. A tinted ellipse behind it was a second, softer answer to the same
   question. */
.trust-strip {
  position: relative;
  padding: 4rem 0 3.5rem;
}
.trust-grid > * { position: relative; }
.trust-num {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* -------- SECTION HEADINGS anywhere -------- */
h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* -------- FAQ polish -------- */
.faq details {
  transition: border-color 0.24s var(--ease-m), background 0.24s var(--ease-m);
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--pri) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.faq details summary {
  transition: color 0.2s var(--ease-m);
}
.faq details[open] summary { color: var(--yellow); }

/* -------- FOOTER wordmark watermark: MOVED -------- */
/* The watermark is a .footer-wordmark span now, defined once in
   ds/v1/footer.css and written into the markup, exactly as the homepage
   does it. Leaving the ::after here as well would paint the word twice. */

.footer-brand, .footer-col { position: relative; z-index: 1; }

/* -------- SCROLL REVEALS -------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-m), transform 0.8s var(--ease-m);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* -------- reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.05s !important;
  }
}

/* -------- BRAND-NAME FLASHER: REMOVED -------- */
/* Labels reading "WebPulse PBX", "WorldPrime PBX" and so on used to drift
   through the page background at 40 percent brand with a double text-shadow
   glow. They sat at z-index 0 under a transparent <main>, so a label landing on
   the hero subtitle put two sets of words in the same place. Same family as the
   orbs and the mesh, removed for the same reason.

   wppbx.com runs the same device. It is deliberately untouched here: the
   marketing site is its own phase. */