/*
==================================================================
BECOME A PARTNER PAGE
Page-scoped styles for become-a-partner.html. Most of this page
is assembled from the shared kit already on the site (tt-hp-* from
hrms-page.css, the ticker + integration artboard + contact panel
from style.css). Only the pieces with no existing equivalent live
here: the hero's "success story" kicker and the standalone stats
strip that the old partner page carried near the top.
==================================================================
*/

/* ---------- Hero kicker ---------- */
.tt-pt-kicker {
  display: block;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 700;
  font-size: var(--tt-fs-body-lg);
  color: var(--tt-primary);
  margin-bottom: 0.9rem;
}

/* ==================================================================
   LOGO BAND — reuses the index ticker, adds a heading + "all clients"
   ================================================================== */
.tt-pt-logos-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(1.25rem, 2.4vw, 2rem);
}
.tt-pt-logos-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 500;
  font-size: var(--tt-fs-h2);
  color: var(--tt-dark);
  margin-bottom: 0.5rem;
}
.tt-pt-logos-title strong { font-weight: 800; color: var(--tt-primary); }

.tt-pt-logos-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--tt-primary);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-pt-logos-link:hover { color: var(--tt-primary-hover); gap: 0.7rem; }

/* ==================================================================
   SPLIT ROWS — "Why TimeTrax?" and the mobile app feature list
   ================================================================== */
.tt-pt-split-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Brand-token glow sitting BEHIND the artwork. For the phone composite this
   is not just atmosphere: it replaces the image's own baked-in orange blob,
   which the mask below fades out (see .tt-pt-img-plain). */
.tt-pt-split-visual::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  background: none;
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}
.tt-pt-split-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--tt-glass-border);
  box-shadow: var(--tt-shadow-xl);
}

/* mobile-screen-1.png ships with its own orange radial blob, a compression-
   speckled ring around it and a hard white "floor" strip along the bottom.
   Framed like a screenshot it reads as a pasted-on box, so: no border/shadow,
   and feather the outer margin into transparency. The cards and phone sit
   well inside 70% of the canvas, so nothing real gets touched - only the
   artifacty rim fades, and the CSS glow above carries the colour on. */
.tt-pt-split-img.tt-pt-img-plain {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 620px;
  mask-image: radial-gradient(ellipse 74% 78% at 50% 44%, #000 62%, transparent 97%);
  -webkit-mask-image: radial-gradient(ellipse 74% 78% at 50% 44%, #000 62%, transparent 97%);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 767.98px) {
  }

/* ===================================================================
   CONTACT STATS PANEL  (Let's Connect, right column)
   The same panel contact-sales.html shows, in this page's LIGHT
   treatment. Those rules live in book-call.css, which this page does not
   load - and they are written for a dark band (white text, translucent
   white fill, heavy shadow), so they could not be reused as-is anyway.
   The .tt-contact-stats-card shell already provides the soft peach fill
   and orange hairline from style.css; only the grid needs adding.
   Flat fills, brand orange for the figures (rule 3).
   =================================================================== */
.tt-contact-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}

.tt-contact-stat-num {
  display: block;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: clamp(1.95rem, 3.2vw, 2.85rem);
  line-height: 1;
  color: var(--tt-primary);
}

.tt-contact-stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.45;
  /* Muted dark rather than book-call.css's rgba(255,255,255,0.7), which is
     invisible on this light card. */
  color: var(--tt-muted);
}

@media (max-width: 400px) {
  .tt-contact-stats-grid { grid-template-columns: minmax(0, 1fr); }
}