/* ============================================================
   Biller Genie Partner Portal — 2027 design tokens (shared)
   Served:  /Contents/Assets/registration/pp-2027-tokens.css
   Source:  magentrix/prod/src/Assets/pp-2027-tokens.css (authoritative;
            sandbox copy kept identical)
   Deploy:  tools/pp_registration_deploy.mjs (uploads + cache-busts ?v=)
   Linked by: BGRegistration, Partner_Portal_Login (dark2027).

   This file owns the shared visual language: palette, type scale,
   gold pill, gradient accent, hero display type, and the
   MID → Biller Genie → QuickBooks connector strip.
   Pages keep their own layout (anchors, margins, grid) and load
   this file BEFORE their <style> block, so page rules win ties.
   ============================================================ */

:root {
  --bg-navy: #265074;
  --bg-teal: #1C99A3;
  --bg-mint: #00D3B1;
  --bg-gold: #FFD752;
  --bg-ink: #081625;   /* page background */
  --bg-band: #0C2135;  /* alt section band */
  --bg-body: #c3d3e2;  /* body copy on dark */
  --bg-muted: #7e93a8; /* secondary copy on dark */
  --bg-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bg-display-font: Comfortaa, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===== gold pill (hero eyebrows + section tags) =====
   Visual treatment only; .pp-section-tag re-lays itself out page-side. */
.pp-eyebrow, .pp-section-tag, .regv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 215, 82, 0.11);
  border: 1px solid rgba(255, 215, 82, 0.28);
  color: var(--bg-gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.pp-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--bg-gold);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== gradient text accent ===== */
.pp-grad, .regv2-grad {
  background: linear-gradient(100deg, #00D3B1 10%, #1C99A3 55%, #6fd4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== hero display type (rem clamps ride the theme's 14px root) ===== */
.pp-hero-heading, .regv2-display {
  color: #ffffff;
  font-family: var(--bg-display-font);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0 0 16px;
}

/* hero lede — margins stay page-side (centered on reg mobile, flush on desktop) */
.pp-hero-desc, .regv2-lede {
  color: var(--bg-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
}

/* ===== section heading ===== */
.pp-section-heading, .regv2-steps-head h2 {
  color: #ffffff;
  font-family: var(--bg-display-font);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

/* ===== aurora + grid fold background =====
   Used by the login hero (.pp-*) and the registration fold (.regv2-*).
   The site.js dark shell for /user pages carries an INLINED copy (it runs on
   pages that don't link this file) — keep the two in lockstep. */
.pp-aurora, .regv2-fold-aurora {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  filter: blur(70px);
  opacity: .55;
}
.pp-aurora::before, .pp-aurora::after, .pp-aurora .pp-blob,
.regv2-fold-aurora::before, .regv2-fold-aurora::after, .regv2-fold-aurora .regv2-blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.pp-aurora::before, .regv2-fold-aurora::before {
  width: 55vw; height: 55vw; left: -12vw; top: -8vw;
  background: radial-gradient(circle at 30% 30%, rgba(28, 153, 163, .55), transparent 65%);
}
.pp-aurora::after, .regv2-fold-aurora::after {
  width: 46vw; height: 46vw; right: -10vw; top: 4vw;
  background: radial-gradient(circle at 60% 40%, rgba(0, 211, 177, .4), transparent 62%);
}
.pp-aurora .pp-blob, .regv2-fold-aurora .regv2-blob {
  width: 40vw; height: 40vw; left: 32vw; bottom: -18vw;
  background: radial-gradient(circle at 50% 50%, rgba(38, 80, 116, .9), transparent 65%);
}
.pp-grid, .regv2-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 75%);
}

/* ===== OWN FORM card language (Registration* panes; one-pane 2026-08-24) =====
   Pane-only classes — inert on pages that don't render the enroll form. */
.ownform-title { color: var(--bg-navy); font-size: 24px; font-weight: 800; margin: 0 0 6px; text-align: center; font-family: var(--bg-font); }
.ownform-sub { color: #5a6b7c; font-size: 14px; line-height: 1.5; margin: 0; text-align: center; }
.ownform-section { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--bg-teal); margin: 2px 0 12px; }
.ownform-email { display: flex; align-items: center; gap: 10px; background: #f2f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.ownform-email-label { font-weight: 700; color: #3a4a5c; }
.ownform-email-value { color: var(--bg-navy); font-weight: 600; word-break: break-all; }
.ownform-email-lock { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0e9f6e; background: rgba(14, 159, 110, .1); border-radius: 12px; padding: 3px 10px; white-space: nowrap; }
.ownform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ownform-field label { display: block; font-size: 13px; font-weight: 600; color: #3a4a5c; margin-bottom: 5px; }
.ownform-wide { grid-column: 1 / -1; }
.ownform-req { color: #d9534f; }
.ownform-opt { color: #94a3b8; font-weight: 400; font-size: 12px; }
.ownform-err { display: none; background: #fdf2f2; border: 1px solid #f5c6cb; color: #b02a37; border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 13.5px; }
@media (max-width: 560px) {
  .ownform-grid { grid-template-columns: 1fr; }
}

/* ===== connector strip: [strategy tile] ⇄ [Biller Genie] ⇄ [QuickBooks] =====
   Tiles only, no captions below them (owner 2026-08-30). The LEFT tile carries
   the per-strategy icon + text INSIDE it, so every child is tile-height and the
   arrows center on the tiles themselves. */
.pp-connect {
  display: inline-flex; /* shrink-wraps; centers on centered heroes, flush on left-aligned */
  align-items: center;
  margin-top: 28px;
  gap: 10px;
}
.pp-cn-icon {
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.pp-cn-icon > svg {
  width: 100%;
  height: 100%;
}
.pp-cn-icon-img {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
}
.pp-cn-icon-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.pp-cn-icon-img > svg {
  width: 100%;
  height: 100%;
}
/* left tile: SAME 68px square as the logo tiles (owner 2026-08-30); hosts the
   per-strategy icon + a one-word label */
.pp-cn-tile {
  padding: 9px 5px 7px;
}
.pp-cn-tile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.pp-cn-tile-inner > svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}
.pp-cn-tile-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
/* arrow box = tile height so the arrows stay centered on the tiles */
.pp-cn-arrow {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0;
}
.pp-cn-arrow svg {
  width: 100%;
  display: block;
}
@media (max-width: 640px) {
  .pp-cn-icon {
    width: 56px;
    height: 56px;
    padding: 10px;
    border-radius: 12px;
  }
  .pp-cn-tile {
    padding: 7px 4px 6px;
  }
  .pp-cn-tile-inner > svg {
    width: 21px;
    height: 21px;
  }
  .pp-cn-tile-text {
    font-size: 8.5px;
  }
  .pp-cn-arrow {
    flex-basis: 34px;
    height: 56px;
  }
}

/* ══ Bare-card vertical centering — ONE shared rule for every mid-flow screen ══
   (owner 2026-08-30: "center all of them"). Engine page opts in via the
   server-bound .regv2-midflow class; the standalone registration pages key off
   their verified-token input. 2:3 top:bottom split = optical centering that
   also clears overlays; min-height floors stop tall cards from clipping. */
.regv2-2027.regv2-midflow { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.regv2-2027.regv2-midflow > .container { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
.regv2-2027.regv2-midflow > .container::before { content: ""; flex: 2 1 0; min-height: 16px; }
.regv2-2027.regv2-midflow > .container::after { content: ""; flex: 3 1 0; min-height: 16px; }
.regv2-2027.regv2-midflow > .container > .row { margin-top: 0 !important; margin-bottom: 0 !important; }
.regv2-2027.regv2-midflow .regv2-maincol { padding: 0 15px !important; }
body:has(#v2vt[value]:not([value=""])) .container { min-height: calc(100svh - 150px); display: flex; flex-direction: column; }
body:has(#v2vt[value]:not([value=""])) .container::before { content: ""; flex: 2 1 0; min-height: 16px; }
body:has(#v2vt[value]:not([value=""])) .container::after { content: ""; flex: 3 1 0; min-height: 16px; }
body:has(#v2vt[value]:not([value=""])) .container > .row { margin-top: 0; margin-bottom: 0; }