/*
 * Private Label - Minimal Design System
 * "Your brand is the hero. We're the invisible backbone."
 */

/* Outfit loaded via Google Fonts link in layout */

/* ==================== VARIABLES ==================== */
:root {
  --pl-primary: #003366;
  --pl-primary-light: #004080;
  --pl-primary-dark: #002244;
  --pl-secondary: #FF3333;
  --pl-secondary-dark: #e62e2e;
  /* The coral is called `--pl-accent` in the Tailwind entry (as
     --color-pl-accent), in pages.css, and in the features partial's colour
     hash — but it was never declared here, so those five references resolved to
     nothing and their elements fell back to inherited colour. Aliased rather
     than renamed so both vocabularies keep working; --pl-secondary is the
     source of truth. */
  --pl-accent: var(--pl-secondary);
  --pl-gray: #dddddd;
  --pl-gray-50: #f9f9f9;
  --pl-gray-100: #f0f0f0;
  --pl-gray-200: #dddddd;
  --pl-gray-300: #cccccc;
  --pl-gray-400: #999999;
  --pl-gray-500: #777777;
  --pl-gray-600: #555555;
  --pl-gray-700: #444444;
  --pl-gray-900: #222222;

  --font-sans: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 1200px;
}

/* ==================== BASE ==================== */
.pl-page {
  font-family: var(--font-sans);
  background: white;
  color: var(--pl-gray-900);
  -webkit-font-smoothing: antialiased;
}

/* ==================== NAVIGATION ==================== */
.pl-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--pl-gray-100);
  transition: box-shadow 0.2s;
}

.pl-nav-scrolled {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.pl-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pl-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--pl-primary);
}

.pl-nav-logo img {
  height: 2.5rem;
  width: auto;
}

@media (min-width: 1024px) {
  .pl-nav-logo img {
    height: 3rem;
  }
}

.pl-nav-logo-text {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pl-gray-500);
}

.pl-nav-links {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .pl-nav-links {
    display: flex;
  }
}

.pl-nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pl-gray-600);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s;
}

.pl-nav-link:hover {
  color: var(--pl-gray-900);
  background: var(--pl-gray-50);
}

.pl-nav-cta {
  display: none;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .pl-nav-cta {
    display: flex;
  }
}

/* Mega Menu */
.pl-mega-trigger {
  position: relative;
}

.pl-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.pl-mega-trigger:hover .pl-mega-menu {
  opacity: 1;
  visibility: visible;
}

.pl-mega-content {
  background: white;
  border: 1px solid var(--pl-gray-100);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
  padding: 1.5rem;
  width: 500px;
}

.pl-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* Two-column mega panel with per-column headings (Products menu: CustomView
   column + sibling-platforms column). Modifier, not a base-class change —
   the narrow single-column panels keep their block layout. */
.pl-mega-content-wide {
  display: flex;
  gap: 1.5rem;
  width: 640px;
}

.pl-mega-column {
  flex: 1;
  min-width: 0;
}

.pl-mega-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pl-gray-500);
  padding: 0 1rem 0.5rem;
}

/* Inline text link used in pl page copy. */
.pl-link {
  color: var(--pl-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pl-link:hover {
  color: var(--pl-accent);
}

.pl-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.pl-mega-item:hover {
  background: var(--pl-gray-50);
}

.pl-mega-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--pl-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pl-gray-600);
  flex-shrink: 0;
}

.pl-mega-item:hover .pl-mega-icon {
  background: var(--pl-primary);
  color: white;
}

.pl-mega-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pl-gray-900);
  margin-bottom: 0.25rem;
}

.pl-mega-desc {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
  line-height: 1.4;
}

/* Mobile menu button */
.pl-nav-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--pl-gray-600);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .pl-nav-mobile-btn {
    display: none;
  }
}

/* ==================== LAYOUT ==================== */
.pl-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.pl-section {
  padding: 6rem 0;
}

@media (min-width: 768px) {
  .pl-section {
    padding: 8rem 0;
  }
}

/* ==================== TYPOGRAPHY ==================== */
.pl-h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--pl-primary);
}

@media (min-width: 768px) {
  .pl-h1 {
    font-size: 4rem;
  }
}

@media (min-width: 1024px) {
  .pl-h1 {
    font-size: 4.5rem;
  }
}

.pl-h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pl-primary);
}

@media (min-width: 768px) {
  .pl-h2 {
    font-size: 2.5rem;
  }
}

.pl-h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pl-primary);
}

.pl-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--pl-gray-500);
}

.pl-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-primary);
  margin-bottom: 1rem;
}

/* ==================== BUTTONS ==================== */
.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
}

.pl-btn-primary {
  background: var(--pl-primary);
  color: white;
}

.pl-btn-primary:hover {
  background: var(--pl-primary-light);
  color: white;
}

.pl-btn-secondary {
  background: var(--pl-secondary);
  color: white;
}

.pl-btn-secondary:hover {
  background: var(--pl-secondary-dark);
  color: white;
}

.pl-btn-outline {
  background: transparent;
  color: var(--pl-gray-600);
  border: 1px solid var(--pl-gray-200);
}

.pl-btn-outline:hover {
  border-color: var(--pl-gray-300);
  background: var(--pl-gray-50);
}

/* Outline button for dark backgrounds */
.pl-btn-outline-light {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
}

.pl-btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: white;
}

.pl-btn-ghost {
  background: transparent;
  color: var(--pl-gray-600);
}

.pl-btn-ghost:hover {
  color: var(--pl-gray-900);
}

.pl-btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* The coral CTA that sits on a dark band. Emitted by the shared CTA section and
   the mobile menu — via `class:` on a tag helper, which is why the
   emitted-class ratchet could not see it was undefined until the scanner was
   widened to that form. Both buttons rendered as unstyled inline links. */
.pl-btn-accent {
  background: var(--pl-accent);
  color: white;
}

.pl-btn-accent:hover {
  background: var(--pl-secondary-dark);
  color: white;
}

/* The band those buttons sit on. `<section class="pl-bg-gradient text-white">`
   is rendered on seven Private Label pages and the rule did not exist, so the
   section had no background and its white heading and subtitle were white on
   white — invisible, on live pages, while every test stayed green. It sat in
   the ratchet's BASELINE, which is what a baseline entry costs. */
.pl-bg-gradient {
  background: linear-gradient(135deg, var(--pl-primary-dark) 0%, var(--pl-primary) 55%, var(--pl-primary-light) 100%);
}

/* ==================== HERO ==================== */
.pl-hero {
  padding-top: 8rem;
  padding-bottom: 4rem;
  background: linear-gradient(135deg, var(--pl-gray-50) 0%, white 50%, var(--pl-gray-50) 100%);
  overflow: hidden;
}

@media (min-width: 768px) {
  .pl-hero {
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
}

.pl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .pl-hero-grid {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
}

.pl-hero-content {
  max-width: none;
}

.pl-hero-title {
  margin-bottom: 1.5rem;
}

/* On a phone a one-word product name ("LeaderView360") at 3rem is wider than
   the screen, and the hero clips its overflow, so the name and the lead were
   cut off at the right edge (site sweep 2026-09-28). Scale the hero heading
   with the viewport there, and let a name that still does not fit wrap. */
@media (max-width: 639px) {
  .pl-hero-title {
    font-size: clamp(2rem, 8.5vw, 3rem);
    overflow-wrap: break-word;
  }
}

.pl-hero-title-accent {
  color: var(--pl-gray-400);
}

.pl-hero-lead {
  margin-bottom: 2.5rem;
}

.pl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.pl-hero-visual {
  position: relative;
}

@media (min-width: 1024px) {
  .pl-hero-visual {
    padding-left: 3rem;
  }
}

.pl-hero-img {
  width: auto;
  max-width: 100%;
  max-height: 450px;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pl-hero-visual-compact {
  max-width: 450px;
}

.pl-hero-visual-compact .pl-hero-img {
  max-height: 420px;
}

/* Stacked under the copy (below 1024px) the height cap leaves the image
   narrower than its column; centre it rather than leave it hard left. */
@media (max-width: 1023px) {
  .pl-hero-img {
    margin-left: auto;
    margin-right: auto;
  }
}



/* Brand showcase */
.pl-brand-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .pl-brand-showcase {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.pl-brand-card {
  background: white;
  border: 1px solid var(--pl-gray-200);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.pl-brand-card-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
}

.pl-brand-card-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pl-gray-900);
  margin-bottom: 0.25rem;
}

.pl-brand-card-type {
  font-size: 0.75rem;
  color: var(--pl-gray-400);
}

/* ==================== STATS ==================== */
.pl-stats-section {
  background: var(--pl-gray-50);
  padding: 4rem 0;
}

.pl-stats-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .pl-stats-grid {
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
  }
}

.pl-stats-image {
  display: none;
}

@media (min-width: 768px) {
  .pl-stats-image {
    display: block;
  }
}

.pl-stats-img {
  width: 100%;
  max-width: 320px;
}

.pl-stats {
  display: grid;
  gap: 2rem;
}

/* Three across from 640px. Below it they stack: "2,068,181+" at stat size is
   wider than a third of a phone, and three columns made /consultants 515px
   wide at 390 (site sweep 2026-09-28). */
@media (min-width: 640px) {
  .pl-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pl-stat {
  text-align: center;
}

.pl-stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--pl-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.pl-stat-label {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
}

/* ==================== VALUE PROPS ==================== */
.pl-values {
  display: grid;
  gap: 4rem;
}

@media (min-width: 768px) {
  .pl-values {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.pl-value {
  text-align: center;
}

@media (min-width: 768px) {
  .pl-value {
    text-align: left;
  }
}

.pl-value-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  border-radius: 12px;
  background: var(--pl-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pl-gray-600);
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .pl-value-icon {
    margin: 0 0 1.5rem;
  }
}

.pl-value-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin-bottom: 0.75rem;
}

.pl-value-desc {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  line-height: 1.6;
}

/* ==================== SOLUTION ==================== */
.pl-solution {
  background: white;
}

.pl-solution-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.pl-solution-intro .pl-lead {
  margin-bottom: 0;
}

/* ==================== FEATURES ==================== */
.pl-features-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.pl-features-grid {
  display: grid;
  gap: 1px;
  background: var(--pl-gray-200);
  border: 1px solid var(--pl-gray-200);
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .pl-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pl-feature {
  background: white;
  padding: 2.5rem;
}

/* Three columns start at 768px, where a 2.5rem pad left each column about
   160px of text on a tablet. Tighter padding until the grid has room. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pl-feature {
    padding: 1.5rem;
  }
}

.pl-feature-img {
  margin-bottom: 1.5rem;
}

.pl-feature-img img {
  width: 100%;
  height: auto;
  display: block;
}

.pl-feature-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pl-gray-300);
  margin-bottom: 1.5rem;
}

.pl-feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin-bottom: 0.75rem;
}

.pl-feature-desc {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.pl-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pl-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--pl-gray-600);
  padding: 0.5rem 0;
}

/* Top-aligned and centred on the FIRST line: with align-items: center the dot
   sat halfway down any item that wrapped, between its two lines. */
.pl-feature-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: calc(0.75em - 2.5px);
  background: var(--pl-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==================== PROCESS ==================== */
.pl-process {
  background: var(--pl-primary);
  color: white;
}

.pl-process-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.pl-process-header .pl-eyebrow {
  color: var(--pl-gray-400);
}

.pl-process-header .pl-h2 {
  color: white;
}

.pl-process-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .pl-process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

.pl-process-step {
  text-align: center;
  padding: 1.5rem;
}

.pl-process-number {
  width: 40px;
  height: 40px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--pl-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
}

.pl-process-title {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.pl-process-duration {
  font-size: 0.75rem;
  color: var(--pl-primary);
  margin-bottom: 0.75rem;
}

.pl-process-desc {
  font-size: 0.875rem;
  color: var(--pl-gray-400);
  line-height: 1.6;
}

/* ==================== TESTIMONIALS ==================== */
.pl-testimonials-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.pl-testimonials-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pl-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pl-testimonial {
  background: var(--pl-gray-50);
  border-radius: 12px;
  padding: 2rem;
}

.pl-testimonial-quote {
  font-size: 1rem;
  color: var(--pl-gray-700);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.pl-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pl-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pl-testimonial-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pl-gray-900);
}

.pl-testimonial-role {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
}

/* ==================== CTA ==================== */
.pl-cta {
  text-align: center;
  background: var(--pl-gray-50);
}

.pl-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.pl-cta-title {
  margin-bottom: 1rem;
}

.pl-cta-desc {
  font-size: 1.125rem;
  color: var(--pl-gray-500);
  margin-bottom: 2rem;
}

.pl-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ==================== LOGOS ==================== */
.pl-logos-section {
  padding: 3rem 0;
  border-top: 1px solid var(--pl-gray-100);
}

.pl-logos-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pl-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.pl-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.pl-logo-item {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pl-gray-300);
}

/* ==================== PAIN POINTS ==================== */
.pl-pain-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.pl-pain-quote {
  font-size: 1.5rem;
  font-style: italic;
  color: var(--pl-gray-700);
  line-height: 1.5;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .pl-pain-quote {
    font-size: 1.75rem;
  }
}

.pl-pain-attribution {
  font-size: 0.875rem;
  color: var(--pl-gray-500);
}

.pl-pain-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .pl-pain-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pl-pain-card {
  text-align: center;
  padding: 2rem;
}

.pl-pain-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.pl-pain-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin-bottom: 0.75rem;
}

.pl-pain-desc {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
}

/* ==================== DREAM STATE ==================== */
.pl-dream {
  background: var(--pl-gray-50);
}

.pl-dream-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
}

.pl-dream-title {
  margin-top: 0.5rem;
}

.pl-dream-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto 3rem;
}

@media (min-width: 768px) {
  .pl-dream-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pl-dream-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border-radius: 8px;
}

.pl-dream-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.pl-dream-item p {
  font-size: 0.9375rem;
  color: var(--pl-gray-700);
  line-height: 1.5;
  margin: 0;
}

.pl-dream-testimonial-centered {
  text-align: center;
  padding: 2.5rem;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--pl-gray-200);
  max-width: 600px;
  margin: 3rem auto 0;
}

.pl-dream-testimonial-centered .pl-dream-author {
  justify-content: center;
}

.pl-dream-quote {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--pl-gray-700);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.pl-dream-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .pl-dream-author {
    justify-content: flex-start;
  }
}

.pl-dream-image {
  display: none;
}

@media (min-width: 768px) {
  .pl-dream-image {
    display: block;
  }
}

.pl-dream-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px -15px rgba(0, 51, 102, 0.15);
}

/* ==================== WHO IT'S FOR ==================== */
.pl-fit-header {
  text-align: center;
  margin-bottom: 3rem;
}

.pl-fit-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.pl-fit-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--pl-gray-50);
  border-radius: 12px;
}

.pl-fit-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pl-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
}

.pl-fit-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin-bottom: 0.25rem;
}

.pl-fit-desc {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  margin: 0;
}

/* ==================== UTILITIES ==================== */
.pl-text-center { text-align: center; }
.pl-text-muted { color: var(--pl-gray-500); }
.pl-mt-0 { margin-top: 0; }
.pl-mb-0 { margin-bottom: 0; }
.pl-mb-4 { margin-bottom: 1rem; }
.pl-mb-8 { margin-bottom: 2rem; }

/* ==================== FOOTER ==================== */
.pl-footer {
  background: var(--pl-primary);
  color: white;
}

.pl-footer-main {
  /* Trimmed at the bottom because the locale bar now closes this block. */
  padding: 4rem 0 2rem;
}

.pl-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .pl-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .pl-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}

.pl-footer-brand {
  max-width: 280px;
}

.pl-footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 1rem;
}

.pl-footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.pl-footer-social {
  display: flex;
  gap: 1rem;
}

.pl-footer-social a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.25rem;
  transition: color 0.15s;
}

.pl-footer-social a:hover {
  color: white;
}

.pl-footer h3 {
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 0 0 1.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pl-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pl-footer-links li {
  margin-bottom: 0.75rem;
}

.pl-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.15s;
}

.pl-footer-links a:hover {
  color: white;
}

/* Two-level columns: a parent page reads as the heading of the group it
   contains, its children sit indented behind a hairline. */
.pl-footer-links .pl-footer-parent {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.pl-footer-sublinks {
  list-style: none;
  margin: 0.625rem 0 0 0;
  padding: 0 0 0 0.875rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.pl-footer-sublinks li {
  margin-bottom: 0.5rem;
}

.pl-footer-sublinks a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s;
}

.pl-footer-sublinks a:hover {
  color: white;
}

.pl-footer-links > li:has(.pl-footer-sublinks) {
  margin-bottom: 1.25rem;
}

.pl-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
}

.pl-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .pl-footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.pl-footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  margin: 0;
}

.pl-footer-legal {
  display: flex;
  gap: 1.5rem;
}

.pl-footer-legal a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s;
}

.pl-footer-legal a:hover {
  color: white;
}

/* ==================== MOBILE MENU ==================== */
.pl-mobile-menu {
  transform: translateX(100%);
  /* Closed means hidden, not just off-screen: an off-screen drawer still cast
     its shadow-2xl onto the right edge of every page, and its links stayed in
     the tab order. Visibility flips after the slide-out finishes. */
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  /* Above the fixed nav (100) and the site bar (101), or they cover the
     drawer's own header and close button. */
  z-index: 110;
}

.pl-mobile-backdrop {
  z-index: 105;
}

.pl-mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}

/* Compact mega-menu link rows (the assessments menu lists ~17 instruments —
   the icon+desc pl-mega-item pattern is too heavy at that count). */
/* Matches .pl-mega-label's type scale (0.875rem/600) so the assessments menu
   reads as the same system as the Products menu. */
.pl-mega-link {
  display: block;
  padding: 0.3rem 1rem;
  border-radius: 6px;
  color: var(--pl-gray-700);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.pl-mega-link:hover {
  background: var(--pl-gray-50);
  color: var(--pl-primary);
}

.pl-mega-content-assessments {
  /* Wide enough that the longest instrument name ("Emotional
     IntelligenceView360") stays on one line — wrapping made the two
     library columns ragged against each other. */
  width: 880px;
}

.pl-mega-featured {
  background: var(--pl-gray-50);
  border-radius: 10px;
  padding: 1rem;
}

.pl-mega-featured-desc {
  font-size: 0.875rem;
  color: var(--pl-gray-700);
  margin: 0.25rem 0 0.9rem;
}

.pl-mega-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pl-primary);
  text-decoration: none;
}

.pl-mega-all-link:hover {
  color: var(--pl-accent);
}

.pl-mega-all-link i {
  font-size: 0.75rem;
  transition: transform 0.15s;
}

.pl-mega-all-link:hover i {
  transform: translateX(2px);
}

/* Wide mega panels anchor to the trigger's LEFT edge instead of centering —
   centering pushed half the panel off-viewport at lower resolutions (the
   same fix retail's mega already carries via :has(.retail-mega-large)). */
.pl-mega-menu:has(.pl-mega-content-wide) {
  left: 0;
  transform: none;
}

.pl-mega-content-wide {
  max-width: calc(100vw - 3rem);
}

/* Category headings inside a compact-link column need their own air —
   without the top margin a heading sits flush on the previous group's last
   link and the column reads as one undifferentiated list. */
.pl-mega-column .pl-mega-heading {
  padding-top: 0.25rem;
}

.pl-mega-column .pl-mega-link + .pl-mega-heading,
.pl-mega-column .pl-mega-item + .pl-mega-heading {
  margin-top: 1.25rem;
}