/* ALIGN Training — Design System
   Dark + cyan, Bebas Neue + Inter, mobile-first
*/

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700;800&family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Permanent+Marker&display=swap');

:root {
  --bg: #0B0F14;
  --bg-elevated: #14191F;
  --bg-card: #181E26;
  --border: #2A2F38;
  --border-glow: #E62A3A;
  --accent: #E62A3A;
  --accent-hover: #FF5566;
  --accent-dim: #B92434;
  --text: #FFFFFF;
  --text-muted: #A9B0BC;
  --text-dim: #6C7480;
  --success: #2DD48F;
  --danger: #FF5C5C;
  --warning: #F5B642;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --shadow-glow: 0 0 24px rgba(230, 42, 58, 0.18);
  --shadow-glow-strong: 0 0 36px rgba(230, 42, 58, 0.32);

  --font-display: 'Antonio', 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  /* Tints native form controls (checkbox/radio fill, focus rings on some browsers) */
  accent-color: var(--accent);
  /* Hints to the browser that this is a dark UI so it picks dark autofill/scrollbar styles */
  color-scheme: dark;
}

/* Kill blue/yellow autofill backgrounds on form inputs (Chrome/Safari).
   Browsers don't allow overriding the autofill color directly, but we can
   layer an inset box-shadow that paints over the autofill background. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important;
  caret-color: var(--text);
  transition: background-color 99999s ease-in-out 0s;
}

/* Replace the browser default blue focus outline with our red ring */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; /* the input rule below paints a red ring via box-shadow */
}

/* iOS tap-highlight color (the flash that appears when you tap a link) */
a, button { -webkit-tap-highlight-color: rgba(230, 42, 58, 0.25); }

/* Custom scrollbar in WebKit (Chrome/Safari) — dark with a red thumb */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

body {
  background:
    radial-gradient(ellipse at top right, rgba(230, 42, 58, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(230, 42, 58, 0.05) 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* TYPOGRAPHY ---------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.1rem; letter-spacing: 0.06em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

.accent { color: var(--accent); }

/* LAYOUT -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  /* When an anchor (#why, #faq, #apply…) jumps to a section, the section's
     own 40-64px padding-top already pushes the eyebrow/heading down below the
     section's box edge. So scroll-margin-top only needs to overlap the 64px
     sticky header — the visual gap below the header IS the section's padding.
     16px lets the section box hide behind the header while the heading lands
     just below it on all viewports (8-24px gap depending on clamp output).
     NOTE: `content-visibility: auto` was previously here as a perf trick but
     it caused anchor jumps to land in the wrong spot — the browser computed
     the scroll target using the 600px placeholder height, then sections
     above the target rendered their real (larger) heights, shifting the
     target away from where you landed. The cost of rendering all sections
     up-front on this page is negligible (≤13 sections, no heavy JS). */
  scroll-margin-top: 16px;
}

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.stack-xl > * + * { margin-top: 2.5rem; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm { gap: 0.5rem; }
.gap { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }

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

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

/* HEADER -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 20, 32, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.18em;
}
.brand-tag {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-left: 0.65rem;
  display: none;
}
@media (min-width: 720px) { .brand-tag { display: inline; } }
.brand-tag .dot { color: var(--accent); }

.nav { display: flex; gap: 1.4rem; align-items: center; }
.nav a {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav a:hover, .nav a.active { color: var(--text); }

/* HERO ---------------------------------------------------------- */
.hero {
  position: relative;
  padding: 6rem 0 5rem;
  overflow: hidden;
  min-height: 640px;
}
.hero::before {
  content: '';
  position: absolute;
  top: 10%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(230, 42, 58, 0.20) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 2;
}
.hero h1 .accent { display: block; }
/* Float text content above the background layers */
.hero > .container { position: relative; z-index: 3; }

/* Crossfading video reel behind the hero copy -------------------- */
.hero-bg-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  /* Dark/desaturate the clips so the brand copy reads cleanly and the three
     wildly different scenes (sun-lit panels, dark Lambo, hazy Dubai) feel
     like they belong to the same reel. */
  filter: brightness(0.62) saturate(0.78) contrast(1.05);
  transition: opacity 1200ms ease;
  will-change: opacity;
  pointer-events: none;
}
.hero-bg-slide.is-active { opacity: 1; }

/* Multi-layer tint — same retune as the stills version.
   - radial bottom-left text-area shade improves copy contrast on bright slides
   - top-right red wash carries the brand glow
   - vertical bleed dissolves the hero into the stats section below */
.hero-bg-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 25% 65%, rgba(11,15,20,0.55) 0%, transparent 65%),
    radial-gradient(ellipse at 85% 15%, rgba(230,42,58,0.14) 0%, transparent 55%),
    linear-gradient(95deg, rgba(11,15,20,0.78) 0%, rgba(11,15,20,0.55) 40%, rgba(11,15,20,0.30) 70%, rgba(11,15,20,0.45) 100%),
    linear-gradient(180deg, rgba(11,15,20,0.20) 0%, rgba(11,15,20,0.45) 55%, rgba(11,15,20,0.92) 100%);
  pointer-events: none;
}

/* BUTTONS ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms ease;
  text-decoration: none;
  background: transparent;
  color: var(--text);
  user-select: none;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--accent-hover);
  box-shadow: var(--shadow-glow-strong);
  transform: translateY(-1px);
  color: #ffffff;
}
.btn-outline {
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: rgba(255,92,92,0.08); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.78rem; }

/* CARDS / HEX FRAMES ------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
}
.card-pad-lg { padding: 2rem; }

.hex-frame {
  position: relative;
  background: linear-gradient(135deg, rgba(230, 42, 58,0.05) 0%, rgba(230, 42, 58,0.01) 100%);
  border: 1px solid var(--accent);
  padding: 1.75rem;
  clip-path: polygon(
    18px 0, calc(100% - 18px) 0, 100% 18px,
    100% calc(100% - 18px), calc(100% - 18px) 100%,
    18px 100%, 0 calc(100% - 18px), 0 18px
  );
  box-shadow: var(--shadow-glow);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 2rem 0;
}

/* FORMS --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .hint { font-size: 0.8rem; color: var(--text-dim); }
.field .err { font-size: 0.82rem; color: var(--danger); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"],
input[type="url"], select, textarea {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
textarea { resize: vertical; min-height: 100px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230, 42, 58, 0.20);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }

/* OTP input grid */
.otp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  max-width: 360px;
}
.otp-grid input {
  text-align: center;
  font-size: 1.6rem;
  font-family: var(--font-display);
  letter-spacing: 0;
  padding: 0.85rem 0;
}

/* Checkbox / radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  padding: 0.5rem 0;
}
.check input[type="checkbox"], .check input[type="radio"] {
  margin-top: 0.25rem;
  accent-color: var(--accent);
  width: 18px; height: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}
.check span { font-size: 0.96rem; color: var(--text); line-height: 1.5; }
.check.muted span { color: var(--text-muted); }

/* PROGRESS BAR -------------------------------------------------- */
.progress {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress > .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 200ms ease;
  box-shadow: 0 0 12px rgba(230, 42, 58,0.5);
}

/* STEP INDICATOR ----------------------------------------------- */
.steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.steps .step {
  flex: 1;
  min-width: 120px;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
}
.steps .step .num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-right: 0.45rem;
}
.steps .step.active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--shadow-glow);
}
.steps .step.active .num { color: var(--accent); }
.steps .step.done {
  border-color: var(--success);
  color: var(--text);
}
.steps .step.done .num { color: var(--success); }

/* MODULE TILES ------------------------------------------------- */
.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 720px) { .module-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .module-grid { grid-template-columns: repeat(3, 1fr); } }

.module-tile {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 160ms ease;
  text-decoration: none;
  color: var(--text);
}
.module-tile:hover:not(.locked) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  color: var(--text);
}
.module-tile .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--accent);
  line-height: 1;
}
.module-tile.done .num { color: var(--success); }
.module-tile.locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.module-tile.locked .num { color: var(--text-dim); }
.module-tile .badge {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.module-tile.done .badge { color: var(--success); }
.module-tile.active .badge { color: var(--accent); }

/* QUIZ ---------------------------------------------------------- */
.quiz-q {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.quiz-q .qnum {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.quiz-q h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 1rem;
  line-height: 1.45;
}
.quiz-q .options { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-q .options .check {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0;
  transition: all 140ms ease;
}
.quiz-q .options .check:hover { border-color: var(--accent-dim); }
.quiz-q .options .check input:checked ~ span { color: var(--accent); }

.score-banner {
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 1.5rem;
}
.score-banner.pass { border-color: var(--success); }
.score-banner.fail { border-color: var(--danger); }
.score-banner .pct {
  font-family: var(--font-display);
  font-size: 4rem;
  letter-spacing: 0;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.score-banner.pass .pct { color: var(--success); }
.score-banner.fail .pct { color: var(--danger); }

/* AGREEMENT ----------------------------------------------------- */
.agreement-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 420px;
  overflow-y: auto;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.agreement-box h2, .agreement-box h3, .agreement-box h4 {
  color: var(--text);
  font-family: var(--font-display);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.agreement-box h2 { font-size: 1.3rem; }
.agreement-box h3 { font-size: 1.1rem; }
.agreement-box h4 { font-size: 0.95rem; color: var(--accent); }
.agreement-box p { margin-bottom: 0.85rem; }
.agreement-box ul { margin-left: 1.4rem; margin-bottom: 0.85rem; }
.agreement-box li { margin-bottom: 0.3rem; }

/* TABLES (admin) ----------------------------------------------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.tbl th {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-elevated);
}
.tbl tr:hover td { background: var(--bg-elevated); }

/* TABS ---------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.tabs button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.85rem 1.1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.tabs button:hover { color: var(--text); }

/* TOAST / FEEDBACK --------------------------------------------- */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  z-index: 100;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  max-width: 90vw;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--accent); }

.alert {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.alert.error { border-left-color: var(--danger); color: var(--text); background: rgba(255,92,92,0.06); }
.alert.success { border-left-color: var(--success); background: rgba(45,212,143,0.06); }
.alert.info { border-left-color: var(--accent); background: rgba(230, 42, 58,0.06); }

/* FOOTER -------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  margin-top: 4rem;
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: center;
}
.site-footer .tag {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: var(--text-muted);
}
.site-footer .tag .dot { color: var(--accent); }

/* UTILITIES ----------------------------------------------------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: 0.5rem; }
.mt { margin-top: 1rem; }
.mt-lg { margin-top: 2rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 2rem; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* LANDING-PAGE-SPECIFIC ---------------------------------------- */

/* Massive display headline used on the public landing */
.display {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.display .red { color: var(--accent); }
.display .line { display: block; }

/* Stripe of stat tiles */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.stat-tile .num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--accent);
}
.stat-tile .label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Two-column "split" sections */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .split.reverse { direction: rtl; }
  .split.reverse > * { direction: ltr; }
}

/* Role comparison cards (Setter vs Closer) */
.role-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
}
.role-card .role-label {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.role-card ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.role-card ul li {
  padding: 0.55rem 0 0.55rem 1.5rem;
  position: relative;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.role-card ul li:last-child { border-bottom: none; }
.role-card ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Bigger eyebrow for section dividers on the landing */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}

/* FAQ accordion (semantic <details>) */
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1rem 1.25rem;
  margin-bottom: 0.65rem;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details p {
  color: var(--text-muted);
  margin-top: 0.75rem;
  line-height: 1.65;
}

/* Process timeline */
.timeline {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .timeline { grid-template-columns: repeat(4, 1fr); }
}
.timeline .step-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  position: relative;
}
.timeline .step-item .step-num {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 2.2rem;
  line-height: 1;
}
.timeline .step-item h4 {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.4rem;
}
.timeline .step-item p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 0.5rem;
  line-height: 1.55;
}

/* Pull quote — used in a "life as a rep" section */
.pull-quote {
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text);
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.55;
}
.pull-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.85rem;
}

/* Floating "PROOF" tags */
.proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.proof-tag {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-muted);
}
.proof-tag .accent { color: var(--accent); }

/* Smooth anchor scrolling */
html {
  scroll-behavior: smooth;
  /* Fallback for elements without an explicit scroll-margin (.section sets
     its own at 16px because its built-in padding-top provides the gap). For
     other anchor targets, leave room for the 64px sticky header. */
  scroll-padding-top: 64px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* TRIP INCENTIVES REEL (landing) -------------------------------- */
.trip-reel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-glow);
  margin-top: 2rem;
}
.trip-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.trip-slide {
  flex: 0 0 100%;           /* no grow, no shrink, basis = 100% — exactly one slide per viewport */
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .trip-slide { aspect-ratio: auto; min-height: 760px; }
}
.trip-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(11,15,20,0.96) 0%, rgba(11,15,20,0.7) 38%, rgba(11,15,20,0.2) 68%, transparent 100%),
    linear-gradient(180deg, rgba(11,15,20,0.4) 0%, transparent 35%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 760px) {
  .trip-slide::after {
    background: linear-gradient(180deg, rgba(11,15,20,0.6) 0%, rgba(11,15,20,0.92) 35%, rgba(11,15,20,0.97) 100%);
  }
}

.tb-cancun {
  background:
    radial-gradient(ellipse at 75% 35%, rgba(45,210,200,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(230, 42, 58,0.25) 0%, transparent 50%),
    linear-gradient(180deg, #0B2738 0%, #0B0F14 70%);
}
.tb-cabo {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255,140,40,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgba(230, 42, 58,0.35) 0%, transparent 55%),
    linear-gradient(180deg, #2C150A 0%, #0B0F14 70%);
}
.tb-vegas {
  background:
    radial-gradient(ellipse at 70% 35%, rgba(190,80,220,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 75%, rgba(230, 42, 58,0.35) 0%, transparent 50%),
    linear-gradient(180deg, #1d0c2a 0%, #0B0F14 75%);
}
.tb-hawaii {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(60,210,140,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(230, 42, 58,0.2) 0%, transparent 50%),
    linear-gradient(180deg, #0b2018 0%, #0B0F14 70%);
}
.tb-morocco {
  background:
    radial-gradient(ellipse at 75% 35%, rgba(230,140,55,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(200,60,40,0.4) 0%, transparent 50%),
    linear-gradient(180deg, #3a1d0c 0%, #0B0F14 70%);
}

.trip-overlay {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  gap: clamp(0.5rem, 1.4vw, 0.95rem);
  height: 100%;
}

.trip-brand { display: flex; align-items: center; gap: 0.55rem; z-index: 3; }
.trip-brand .tb-mark {
  width: 26px; height: 26px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1;
}
.trip-brand .tb-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.18em;
}
.trip-brand .tb-tag {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  color: var(--text-muted);
  margin-left: 0.45rem;
  text-transform: uppercase;
}
.trip-brand .tb-tag .red { color: var(--accent); }

.trip-body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 760px) {
  .trip-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.trip-text { display: flex; flex-direction: column; min-width: 0; }
.trip-headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.trip-headline span { display: block; }
.trip-headline .red { color: var(--accent); }
.trip-callout {
  font-family: 'Permanent Marker', var(--font-display), cursive, sans-serif;
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0.4rem 0 0.5rem;
  text-shadow: 0 0 28px rgba(230, 42, 58,0.4);
  transform: rotate(-1deg);
}
.trip-location {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}
.trip-location .icon { width: 16px; height: 16px; color: var(--accent); }

.trip-panels {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
@media (max-width: 540px) { .trip-panels { grid-template-columns: 1fr; } }
.trip-panel {
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(230, 42, 58,0.07) 0%, rgba(230, 42, 58,0.01) 100%);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  clip-path: polygon(
    13px 0, calc(100% - 13px) 0, 100% 13px,
    100% calc(100% - 13px), calc(100% - 13px) 100%,
    13px 100%, 0 calc(100% - 13px), 0 13px
  );
}
.trip-panel .panel-big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.95;
  color: var(--text);
  padding-right: 0.7rem;
  border-right: 1px solid var(--accent);
  white-space: nowrap;
}
.trip-panel .panel-icon { width: 36px; height: 36px; color: var(--accent); flex: 0 0 auto; }
.trip-panel .panel-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.trip-panel .panel-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
}
.trip-panel .panel-label .accent { color: var(--accent); display: block; }
.trip-panel .panel-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.trip-includes { position: relative; z-index: 2; }
.trip-includes-title {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  margin-bottom: 0.6rem;
}
/* Strict single-row inline strip — no wrap. Scrolls horizontally on tight viewports. */
.trip-includes-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.5vw, 2rem);
  padding: 0 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.trip-includes-row::-webkit-scrollbar { display: none; }
.trip-includes-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;       /* never shrink — items keep their natural width */
  white-space: nowrap;
  text-align: left;
}
.trip-includes-item .icon {
  width: 20px; height: 20px;
  color: var(--accent);
  flex: 0 0 auto;
  margin: 0;
}
.trip-includes-item .ii-label {
  font-family: var(--font-display);
  font-size: clamp(0.74rem, 1.2vw, 0.85rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--text);
}
.trip-includes-item .ii-sub {
  display: none;
}

.trip-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.trip-footer .tf-left {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.trip-footer .tf-left .icon { width: 18px; height: 18px; color: var(--accent); }
.trip-footer .tf-left .tf-value {
  display: block; color: var(--accent); font-weight: 600; margin-top: 0.1rem;
  letter-spacing: 0.12em;
}
.trip-footer .tf-center .tb-mark { width: 24px; height: 24px; }
.trip-footer .tf-right {
  text-align: right;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.25;
}
.trip-footer .tf-right .red { color: var(--accent); display: block; }
@media (max-width: 540px) {
  .trip-footer { grid-template-columns: 1fr; text-align: center; }
  .trip-footer .tf-right { text-align: center; }
  .trip-footer .tf-left { justify-content: center; }
}

.trip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(11, 15, 20, 0.65);
  border: 1px solid var(--border);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 180ms ease;
}
.trip-nav:hover { background: var(--accent); border-color: var(--accent); }
.trip-nav.prev { left: 1.25rem; }
.trip-nav.next { right: 1.25rem; }
@media (max-width: 540px) {
  .trip-nav { width: 36px; height: 36px; font-size: 1.1rem; }
  .trip-nav.prev { left: 0.6rem; }
  .trip-nav.next { right: 0.6rem; }
}

.trip-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0 0.4rem;
}
.trip-dots .dot {
  width: 28px; height: 3px;
  background: var(--border);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
  padding: 0;
}
.trip-dots .dot.active {
  background: var(--accent);
  width: 48px;
  box-shadow: 0 0 12px rgba(230, 42, 58, 0.5);
}

.trip-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 3;
}
.trip-progress > .fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(230, 42, 58, 0.5);
  transition: width 80ms linear;
}

/* PAGE-CHROME / EDGE MOTION ------------------------------------- */
/* Four fixed-position overlays that frame the landing without
   taking up any content space:
     1) scroll progress bar (top)
     2) section indicator dots (right rail)
     3) floating apply CTA (bottom-right)
     4) vertical brand text (left rail)                              */

/* 1) Scroll progress */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  z-index: 100;
  pointer-events: none;
}
.scroll-progress > .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  box-shadow: 0 0 8px rgba(230, 42, 58, 0.55);
  transition: width 80ms linear;
}

/* 2) Section indicator dots (right edge) */
.section-dots {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 90;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .section-dots { display: none; } }
.section-dots .dot-btn {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 220ms ease;
  position: relative;
  display: block;
}
.section-dots .dot-btn:hover {
  border-color: var(--accent);
  transform: scale(1.4);
}
.section-dots .dot-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(230, 42, 58, 0.6);
}
.section-dots .dot-btn .label {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(11, 15, 20, 0.95);
  border: 1px solid var(--border);
  padding: 0.28rem 0.65rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  font-weight: 600;
}
.section-dots .dot-btn:hover .label,
.section-dots .dot-btn:focus-visible .label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* 3) Floating apply CTA (bottom-right) */
.floating-apply {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 95;
  background: var(--accent);
  color: #fff;
  padding: 0.95rem 1.4rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 10px 28px rgba(230, 42, 58, 0.4),
    0 0 18px rgba(230, 42, 58, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 320ms ease, transform 320ms ease, background 180ms ease, box-shadow 220ms ease;
  pointer-events: none;
}
.floating-apply.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-apply:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(230, 42, 58, 0.55),
    0 0 28px rgba(230, 42, 58, 0.45);
}
@media (max-width: 540px) {
  .floating-apply { right: 1rem; bottom: 1rem; padding: 0.8rem 1.1rem; font-size: 0.7rem; }
}

/* 4) Vertical brand text on the left edge */
.left-rail {
  position: fixed;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.65rem;
  letter-spacing: 0.55em;
  color: rgba(255, 255, 255, 0.18);
  font-weight: 700;
  text-transform: uppercase;
  z-index: 90;
  pointer-events: none;
  font-family: var(--font-body);
  user-select: none;
}
.left-rail .dot { color: var(--accent); }
@media (max-width: 900px) { .left-rail { display: none; } }

/* Page-chrome respects reduced motion (progress bar still works — it's the basic indicator) */
@media (prefers-reduced-motion: reduce) {
  .floating-apply { transition: none; }
  .section-dots .dot-btn { transition: none; }
}

/* MOTION: scroll-triggered reveal + card tilt --------------------- */

/* Scroll-into-view fade + lift. Applied via JS adding .reveal-in. */
.reveal {
  opacity: 0;
  transform: translateY(-36px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-in {
  opacity: 1;
  transform: none;
}

/* Card tilt (3D rotate following cursor) — JS sets the transform inline. */
.tilt {
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hero cursor spotlight — JS updates --mx / --my on mousemove. */
.hero { --mx: 50%; --my: 50%; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 500px at var(--mx) var(--my),
              rgba(230, 42, 58,0.12) 0%,
              rgba(230, 42, 58,0.04) 30%,
              transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero:hover::after { opacity: 1; }
}
/* Make sure hero text sits above the spotlight overlay */
.hero > .container { position: relative; z-index: 1; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tilt   { transition: none; transform: none !important; }
  .hero::after { display: none; }
}

/* Bidirectional scroll-driven fade. When the browser supports scroll-driven
   animations (CSS `animation-timeline: view()`), every .reveal element fades
   in as it enters the viewport AND fades out as it leaves — so the page feels
   alive while scrolling. We animate opacity only (not transform) so .tilt's
   inline cursor-following transform keeps working. Older browsers fall through
   to the JS-driven .reveal path above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 1;             /* base; animation overrides */
      transform: none;
      transition: none;
      animation: revealScroll cubic-bezier(0.4, 0, 0.2, 1) both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* .reveal-in becomes a no-op in this mode — the scroll animation
       continuously controls opacity, so the class can't pin it open. */
  }
}
@keyframes revealScroll {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

/* SHOP — YoungLA-style ----------------------------------------- */
/* Scoped via body.shop-page so the apparel storefront aesthetic
   (clean white, full-bleed imagery, minimal chrome) doesn't bleed
   into the rest of the site (which keeps its dark-navy ALIGN look). */

body.shop-page {
  --shop-ink: #1A1714;        /* primary text — softer than pure black, slightly warm */
  --shop-ink-muted: #6B635A;  /* secondary text — warm gray */
  --shop-ink-dim: #968D82;    /* tertiary text — warm dim */
  --shop-line: rgba(60, 40, 20, 0.12);
  --shop-bg: #F1ECE5;         /* page bg — warm cream, easier on eyes */
  --shop-surface: #F8F4ED;    /* card / placeholder bg (lighter than page so cards lift) */
  background: var(--shop-bg);
  color: var(--shop-ink);
  background-attachment: scroll;
}
body.shop-page .site-header {
  background: rgba(241, 236, 229, 0.88);
  border-bottom: 1px solid var(--shop-line);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
body.shop-page .site-header .brand { color: var(--shop-ink); }
body.shop-page .site-header .brand-name { color: var(--shop-ink); }
body.shop-page .site-header .brand-tag { color: var(--shop-ink-muted); }
body.shop-page .site-header .nav a { color: rgba(0, 0, 0, 0.65); }
body.shop-page .site-header .nav a.active,
body.shop-page .site-header .nav a:hover { color: var(--shop-ink); }
body.shop-page .site-header .nav a.btn-ghost { color: var(--shop-ink-muted); }
body.shop-page .site-header .nav a.btn-ghost:hover { color: var(--shop-ink); }
body.shop-page .site-footer {
  background: var(--shop-bg);
  border-top: 1px solid var(--shop-line);
  color: var(--shop-ink-muted);
}
body.shop-page .site-footer .tag { color: var(--shop-ink); }

/* Page-chrome adapted for the white shop theme */
body.shop-page .scroll-progress { background: rgba(0, 0, 0, 0.08); }

/* Full-bleed sections (override .container max-width for hero + tiles) */
.shop-fullbleed { width: 100%; max-width: none; padding: 0; }

/* ---------- HERO CAROUSEL (white-themed) ---------- */
.shop-hero-carousel { position: relative; overflow: hidden; }
.shop-hero-track {
  display: flex;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.shop-hero-slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (max-width: 720px) {
  .shop-hero-slide { aspect-ratio: 4 / 5; min-height: 560px; align-items: center; }
}
.shop-hero-slide::after {
  /* Soft vignette so text reads cleanly over the photo */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.55) 100%),
    linear-gradient(95deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.shop-hero-slide .hero-inner {
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem 4rem;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 720px) {
  .shop-hero-slide .hero-inner { padding: 4rem 4rem 5rem; max-width: 1280px; margin: 0; }
}
.shop-hero-slide .kicker {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--shop-ink-muted);
  margin-bottom: 0.75rem;
}
.shop-hero-slide h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--shop-ink);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.shop-hero-slide .sub {
  color: var(--shop-ink-muted);
  max-width: 520px;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.shop-hero-slide .cta {
  background: var(--shop-ink);
  color: #fff;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 180ms ease;
}
.shop-hero-slide .cta:hover { background: var(--accent); color: #fff; }

/* Hero gradient backdrops (light-themed). Replace with real lifestyle photos by
   setting data-img on each <article class="shop-hero-slide">. */
.hb-1 {
  background:
    radial-gradient(ellipse at top right, rgba(230, 42, 58,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #F5EFE6 0%, #EAE0D2 55%, #E0CCC0 100%);
}
.hb-2 {
  background:
    radial-gradient(ellipse at bottom left, rgba(80,40,20,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #F3EDE3 0%, #E5DCCB 100%);
}
.hb-3 {
  background:
    radial-gradient(ellipse at 70% 40%, rgba(230, 42, 58,0.16) 0%, transparent 50%),
    linear-gradient(180deg, #F4EEE4 0%, #E6DDCD 100%);
}

/* Hero carousel controls — dark-on-light variant */
.shop-hero-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}
.shop-hero-dots .dot {
  width: 24px; height: 2px;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
  padding: 0;
}
.shop-hero-dots .dot.active { background: var(--shop-ink); width: 40px; }
.shop-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--shop-ink);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all 180ms ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.shop-hero-nav:hover { background: var(--shop-ink); color: #fff; border-color: var(--shop-ink); }
.shop-hero-nav.prev { left: 1.5rem; }
.shop-hero-nav.next { right: 1.5rem; }
@media (max-width: 540px) { .shop-hero-nav { display: none; } }

/* ---------- SHOP SECTION WRAPPER ---------- */
.shop-section { padding: 4rem 0; }
@media (min-width: 720px) { .shop-section { padding: 5rem 0; } }
.shop-section .container { padding: 0 1.5rem; }
@media (min-width: 960px)  { .shop-section .container { padding: 0 2.5rem; max-width: 1440px; } }

.shop-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.shop-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--shop-ink);
}
.shop-section-head .see-all {
  color: var(--shop-ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.shop-section-head .see-all:hover { color: var(--shop-ink); }

/* ---------- COLLECTION TILES ---------- */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 720px) { .collection-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .collection-grid { grid-template-columns: repeat(6, 1fr); } }

.collection-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--shop-ink);
  display: block;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--shop-line);
}
.collection-tile::after {
  /* Light-mode: a subtle gradient at the bottom for label readability without darkening the whole tile */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.85) 100%);
  pointer-events: none;
  transition: background 220ms ease;
}
.collection-tile:hover::after {
  background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,0.95) 100%);
}
.collection-tile .label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: end center;
  padding: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shop-ink);
  text-align: center;
  line-height: 1.1;
}
.collection-tile .count {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--shop-ink-muted);
  font-weight: 600;
  display: block;
  margin-top: 0.25rem;
}

/* ---------- PRODUCT GRID ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 0.6rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.25rem; } }

/* "Featured row" variant — horizontally scrolling on mobile, grid on desktop */
.product-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.product-row::-webkit-scrollbar { display: none; }
.product-row .product-card { scroll-snap-align: start; }
@media (min-width: 640px) {
  .product-row { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1rem; overflow: visible; }
}

.product-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease;
}
.product-card.hidden { display: none; }

.product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  background-color: var(--shop-surface);
  transition: filter 240ms ease;
}
.product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.04) 100%);
  pointer-events: none;
  transition: opacity 220ms ease;
}
.product-card:hover .product-image { filter: brightness(0.97); }
.product-image .product-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  letter-spacing: 0.03em;
  color: rgba(11, 15, 20, 0.07);
  text-transform: uppercase;
  line-height: 0.9;
  text-align: center;
  padding: 1rem;
  z-index: 1;
}

/* Placeholder gradient backdrops — warm cream tones, slightly lighter than the page */
.pg-1 { background: linear-gradient(135deg, #FAF5EC 0%, #ECE5D8 80%); }
.pg-2 { background: linear-gradient(135deg, #F8E5E1 0%, #EDE4D5 75%); }
.pg-3 { background: linear-gradient(135deg, #F0EBE0 0%, #DFD7C7 75%); }
.pg-4 { background: linear-gradient(135deg, #F6D9D5 0%, #E8DED0 75%); }
.pg-5 { background: linear-gradient(135deg, #F4EFE5 0%, #E3DBCC 75%); }
.pg-6 { background: linear-gradient(135deg, #EDE0CC 0%, #DFD3BF 75%); }

.product-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  background: var(--shop-ink);
  color: #fff;
  border-radius: 0;
}
.product-badge.bestseller { background: var(--shop-ink); color: #fff; }
.product-badge.new        { background: var(--accent); color: #fff; }
.product-badge.sold       { background: #fff; color: var(--shop-ink); border: 1px solid rgba(0,0,0,0.25); }

.product-sold-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  color: var(--shop-ink);
  text-transform: uppercase;
}

.product-quickadd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: var(--shop-ink);
  color: #fff;
  border: none;
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 220ms ease, transform 220ms ease, background 160ms ease;
  text-align: center;
  cursor: pointer;
}
.product-card:hover .product-quickadd { opacity: 1; transform: translateY(0); }
.product-quickadd:hover { background: var(--accent); color: #fff; }
@media (hover: none) {
  .product-quickadd {
    opacity: 1; transform: translateY(0);
    background: rgba(11,15,20,0.85); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}

.product-info { padding: 0.9rem 0 0; }
.product-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--shop-ink);
  margin: 0 0 0.35rem;
  letter-spacing: 0;
  font-family: var(--font-body);
}
.product-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--shop-ink);
  font-family: var(--font-body);
}
.product-price .sale {
  color: var(--accent);
  margin-right: 0.5rem;
  font-weight: 700;
}
.product-price .strike {
  color: var(--shop-ink-dim);
  text-decoration: line-through;
  font-weight: 400;
}

.product-swatches {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.product-swatches .sw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}
.product-swatches .sw:hover { transform: scale(1.22); border-color: var(--shop-ink); }
.product-swatches .sw.active { border-color: var(--shop-ink); box-shadow: 0 0 0 1px var(--shop-ink); }

/* Sticky category bar (inside the catalog section) — warm light mode */
.shop-categories {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(241, 236, 229, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--shop-line);
  border-bottom: 1px solid var(--shop-line);
  margin-bottom: 2rem;
}
.shop-categories .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1440px;
}
.shop-categories .container::-webkit-scrollbar { display: none; }

/* Override chip styles on the shop page for a flatter YoungLA-style look — light mode */
body.shop-page .chip {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--shop-ink-muted);
  border-radius: 0;
  padding: 0.55rem 1rem;
}
body.shop-page .chip:hover { color: var(--shop-ink); border-color: rgba(0,0,0,0.4); }
body.shop-page .chip.active {
  background: var(--shop-ink);
  color: #fff;
  border-color: var(--shop-ink);
  box-shadow: none;
}

/* Product detail modal — placeholder until real checkout */
.shop-modal { max-width: 720px; }
.shop-modal .vm-placeholder { aspect-ratio: 4 / 5; }

/* TRAINING LIBRARY + VIDEO CATALOG (training portal) ----------- */
/* Both libraries reuse the same .chip / .video-card / .video-grid framework.
   Training cards use a separate ".training-card" hook for read-specific bits
   (book icon, "Read" type badge) but share layout, hover, and thumbnail tints. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 1.25rem;
}
.chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  border-radius: 99px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
  font-family: inherit;
}
.chip:hover { color: var(--text); border-color: var(--accent-dim); }
.chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(230, 42, 58, 0.35);
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }

.video-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  color: inherit;
}
.video-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.video-card.hidden { display: none; }

/* Thumbnail with gradient placeholder + play button + duration badge */
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-thumb::after {
  /* gentle gradient sheen */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
/* 6 category gradients — each video card picks one via .vt-cat-N */
.vt-cat-1 { background: linear-gradient(135deg, #1a3050 0%, #0B0F14 75%); }   /* Rapport — cool blue */
.vt-cat-2 { background: linear-gradient(135deg, #5C1620 0%, #0B0F14 75%); }   /* Closing — red */
.vt-cat-3 { background: linear-gradient(135deg, #3a2155 0%, #0B0F14 75%); }   /* Voice — purple */
.vt-cat-4 { background: linear-gradient(135deg, #1f4a3a 0%, #0B0F14 75%); }   /* Compliance — green */
.vt-cat-5 { background: linear-gradient(135deg, #5A4515 0%, #0B0F14 75%); }   /* Objections — amber */
.vt-cat-6 { background: linear-gradient(135deg, #2A4D5E 0%, #0B0F14 75%); }   /* Mindset — teal */

.play-btn {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(11, 15, 20, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 220ms ease;
}
.video-card:hover .play-btn {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(230, 42, 58, 0.6);
}
.play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }

.video-duration {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  background: rgba(11, 15, 20, 0.85);
  border-radius: var(--radius-sm);
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.video-new {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 12px rgba(230, 42, 58, 0.4);
}

.video-meta {
  padding: 1rem 1.1rem 1.1rem;
}
.video-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
  line-height: 1.35;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.video-row .dot { color: var(--text-dim); }
.video-category {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* Read-specific overrides for training library cards. They reuse .video-card,
   .video-thumb, .video-meta, etc. — these tweaks swap "play" semantics for "read". */
.training-card .read-btn {
  position: relative; z-index: 2;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(11, 15, 20, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all 220ms ease;
}
.training-card:hover .read-btn {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(230, 42, 58, 0.55);
}
.training-card .read-btn svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.training-card .video-duration { background: rgba(230, 42, 58, 0.22); border: 1px solid var(--accent); }
.training-card .video-new       { background: var(--bg-elevated); color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }

/* Empty-state when a filter has no matches */
.video-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* Placeholder modal shown when clicking a video card */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 20, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.video-modal-overlay.open { display: flex; }
.video-modal {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 24px rgba(230, 42, 58,0.25);
  position: relative;
  animation: modal-in 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.video-modal .vm-placeholder {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #14191F 0%, #0B0F14 100%);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.video-modal .vm-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(230, 42, 58,0.15) 0%, transparent 50%);
}
.video-modal .vm-icon {
  position: relative;
  z-index: 1;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(230, 42, 58, 0.2);
  border: 2px solid var(--accent);
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.video-modal .vm-icon svg { width: 32px; height: 32px; fill: var(--accent); margin-left: 4px; }
.video-modal .vm-msg {
  position: relative; z-index: 1;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.video-modal .vm-body { padding: 1.5rem 1.75rem 1.75rem; }
.video-modal .vm-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.video-modal .vm-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.video-modal .vm-meta .accent { color: var(--accent); }
.video-modal .vm-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(11, 15, 20, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  z-index: 3;
  transition: all 160ms ease;
}
.video-modal .vm-close:hover { background: var(--accent); border-color: var(--accent); }

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* STATS BANNER (Commission section) ---------------------------- */
.stats-banner {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2rem;
}
@media (min-width: 860px) {
  .stats-banner { grid-template-columns: 320px 1fr; }
}

/* Left feature tile — big single-stat over a dark gradient. Clickable: links to /apply. */
.stats-feature {
  position: relative;
  padding: 2rem 1.5rem;
  background:
    linear-gradient(135deg, rgba(230, 42, 58,0.32) 0%, rgba(230, 42, 58,0.08) 60%, transparent 100%),
    radial-gradient(ellipse at top right, rgba(230, 42, 58,0.2) 0%, transparent 60%),
    linear-gradient(180deg, #1a0a0e 0%, #14191F 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 200px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: filter 220ms ease, transform 220ms ease;
}
a.stats-feature:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}
a.stats-feature::after {
  /* Hover-only "JOIN →" tag in the corner so it's discoverably clickable */
  content: 'Join →';
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 2;
}
a.stats-feature:hover::after { opacity: 1; }
.stats-feature::before {
  /* faint sport-car silhouette accent (CSS-only — no asset needed) */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 130%, rgba(230, 42, 58,0.3) 0%, transparent 45%),
    radial-gradient(ellipse at 30% 80%, rgba(0,0,0,0.4) 0%, transparent 40%);
  pointer-events: none;
}
.stats-feature .feat-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 24px rgba(230, 42, 58, 0.4);
}
.stats-feature .feat-label {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  margin-top: 0.65rem;
  line-height: 1.3;
}
.stats-feature .feat-sub {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.4rem;
  font-style: italic;
}

/* Right side — 6 columns with dashed vertical dividers (2x3 on tablet, 1 col on mobile) */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1.75rem 0.85rem;
  gap: 1rem 0.5rem;
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stats-grid { grid-template-columns: repeat(6, 1fr); } }

.stats-grid .stat-cell {
  text-align: center;
  padding: 0.5rem 1rem;
  position: relative;
}
@media (min-width: 720px) {
  .stats-grid .stat-cell + .stat-cell::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background-image: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
    background-size: 1px 6px;
    background-repeat: repeat-y;
    /* dashed look via repeating-linear-gradient for crisp control */
    background: repeating-linear-gradient(180deg, var(--border) 0 4px, transparent 4px 8px);
  }
}
.stats-grid .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(230, 42, 58, 0.3);
}
.stats-grid .stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
  margin-top: 0.7rem;
  line-height: 1.3;
}
.stats-grid .stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  font-style: italic;
}

/* "YOUR PATH TO SUCCESS" — brush-script display headline (Permanent Marker) */
.path-to-success {
  text-align: center;
  font-family: 'Permanent Marker', 'Bebas Neue', cursive, sans-serif;
  font-size: clamp(2.8rem, 7.5vw, 5.5rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--accent);
  text-transform: uppercase;
  /* Slight skew + heavy shadow gives the painted-on-the-wall feel */
  transform: rotate(-1.5deg);
  text-shadow:
    0 0 28px rgba(230, 42, 58, 0.45),
    0 3px 0 rgba(0, 0, 0, 0.35);
  margin-top: 2.5rem;
  padding: 0 1rem;
}

/* IMPACT / LEADERBOARD + MAP ----------------------------------- */
.impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 860px) {
  .impact-grid { grid-template-columns: 1.05fr 1.2fr; }
}

.impact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
}

/* Big animated counter */
.impact-counter {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
}
.impact-counter .unit {
  color: var(--accent);
  margin-left: 0.4rem;
}
.impact-sub {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* Mini-stats row inside the impact card */
.impact-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.impact-mini > div { text-align: center; }
.impact-mini .num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--accent);
  line-height: 1;
}
.impact-mini .label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* "Top markets" bar list */
.top-markets {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.top-markets .tm-title {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}
.top-markets .tm-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.top-markets .tm-bar {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
}
.top-markets .tm-bar > .fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(230, 42, 58, 0.45);
}
.top-markets .tm-val { text-align: right; color: var(--accent); font-weight: 600; }

/* US map */
.impact-map-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
}
.impact-map {
  width: 100%;
  height: auto;
  display: block;
  /* Tiny inset shadow on the SVG so it feels like a screen, not a flat box */
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.04));
}

/* All 48 contiguous state outlines */
.impact-map .us-states path {
  fill: url(#mapGradient);
  stroke: #FFFFFF;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 220ms ease, stroke 220ms ease, stroke-width 220ms ease;
  vector-effect: non-scaling-stroke;
  /* paint-order: stroke draws under fill, so borders never look chopped by neighbors */
  paint-order: stroke fill;
}
.impact-map .us-states path:hover {
  fill: rgba(230, 42, 58, 0.22);
  stroke: var(--accent);
  stroke-width: 1.8;
  cursor: default;
}
/* Outer continental border — slight red glow around the whole US */
.impact-map .us-states {
  filter: drop-shadow(0 0 8px rgba(230, 42, 58, 0.18));
}

/* Marker group — wraps halo + ring + dot + label + hit area */
.impact-map .marker-group { cursor: pointer; }
.impact-map .marker-group .marker-dot,
.impact-map .marker-group .marker-ring {
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 220ms ease;
  transform-origin: center;
  transform-box: fill-box;
}
.impact-map .marker-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 5px rgba(230, 42, 58, 0.85));
}
.impact-map .marker-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0.55;
}
.impact-map .marker-halo {
  fill: rgba(230, 42, 58, 0.20);
  animation: marker-halo 2.6s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  pointer-events: none;
}
.impact-map .marker-group.lg .marker-dot { animation: marker-pulse 2.4s ease-in-out infinite; }
.impact-map .marker-hit { fill: transparent; }

.impact-map .marker-group:hover .marker-dot,
.impact-map .marker-group.is-active .marker-dot { transform: scale(1.35); }
.impact-map .marker-group:hover .marker-ring,
.impact-map .marker-group.is-active .marker-ring {
  transform: scale(1.85);
  opacity: 1;
  stroke-width: 1.8;
}
.impact-map .marker-group:hover .label,
.impact-map .marker-group.is-active .label { fill: var(--text); }

.impact-map .label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  transition: fill 220ms ease;
  pointer-events: none;
}

@keyframes marker-halo {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(2.4); }
}
@keyframes marker-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .impact-map .marker-dot,
  .impact-map .marker-halo,
  .impact-map .marker-ring { animation: none; transition: none; }
}

/* Tooltip overlay positioned above the map */
.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(11, 15, 20, 0.95);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  min-width: 140px;
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 12px rgba(230, 42, 58, 0.25);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
}
.map-tooltip.visible { opacity: 1; transform: translateY(-8px) scale(1); }
.map-tooltip .mt-city {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.map-tooltip .mt-kw {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0.2rem;
}
.map-tooltip .mt-kw .unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  margin-left: 0.3rem;
}
.map-tooltip .mt-share {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Leaderboard row hover sync */
.top-markets .tm-row {
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  margin-left: -0.55rem;
  margin-right: -0.55rem;
  transition: background 180ms ease;
  cursor: default;
}
.top-markets .tm-row.is-active {
  background: rgba(230, 42, 58, 0.08);
}
.top-markets .tm-row.is-active .tm-val { text-shadow: 0 0 8px rgba(230, 42, 58, 0.5); }

/* Legend below the map */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.map-legend .dot {
  display: inline-block;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(230, 42, 58, 0.6);
}
.map-legend .dot.sm { width: 6px; height: 6px; }
.map-legend .dot.md { width: 9px; height: 9px; }
.map-legend .dot.lg { width: 12px; height: 12px; }

/* GROWTH TAB (portal) ================================================== */
/* Career-progression table + animated annual-earning bars. Adapts the
   classic "progression path / earning averages" sales deck into the ALIGN
   dark theme — accent red instead of the usual corporate blue. The library
   tab bar reuses the existing .chip / .chip-row framework, so there are no
   new tab styles here. */

.growth-block { margin-top: 1.75rem; }
.growth-block + .growth-block { margin-top: 3rem; }
.growth-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0.1rem 0 0;
}

/* --- Progression path table --- */
.prog-table { display: flex; flex-direction: column; margin-top: 1.15rem; }
.prog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1rem 0.95rem 1.35rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 160ms ease;
}
/* Left accent rail that grows brighter the higher the rung — echoes the
   "lines converging" motif of the source deck, in ALIGN red. */
.prog-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: var(--rail, 0.25);
  transition: opacity 160ms ease;
}
.prog-row:hover { background: rgba(230, 42, 58, 0.05); }
.prog-row:hover::before { opacity: 1; }
.prog-row.prog-head { border-bottom: 1px solid var(--accent); padding-top: 0; padding-bottom: 0.55rem; }
.prog-row.prog-head::before { display: none; }
.prog-row.prog-head .prog-title,
.prog-row.prog-head .prog-metric {
  font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.prog-title { font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
.prog-title .prog-sub {
  display: block; margin-top: 0.18rem;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0; color: var(--text-dim);
}
.prog-metric {
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.05em; color: var(--accent);
  white-space: nowrap; text-align: right;
}

/* --- Annual earning bars --- */
.earn-list { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 1.45rem; }
.earn-label {
  font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; color: var(--text-muted); margin-bottom: 0.55rem;
}
.earn-track { display: flex; align-items: center; gap: 0.9rem; }
.earn-bar-wrap {
  flex: 1; height: 10px; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px; overflow: hidden;
}
.earn-bar {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent) 65%, var(--accent-hover));
  box-shadow: 0 0 12px rgba(230, 42, 58, 0.45);
  transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Bars fill from 0 to their target only once the panel is shown. */
.growth-panel.bars-animate .earn-bar { width: var(--w, 0%); }
.earn-value {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: 0.04em; color: var(--text);
  white-space: nowrap; text-align: right; min-width: 6.5ch;
}
.earn-foot { margin-top: 1.6rem; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--text-dim); }

@media (max-width: 560px) {
  .prog-metric { font-size: 1.1rem; }
  .earn-value { font-size: 1.2rem; min-width: 5ch; }
  .prog-row { padding-left: 1.1rem; }
}

/* Growth panel header: heading on the left, Download-PDF button on the right. */
.growth-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.growth-pdf-btn { flex: none; white-space: nowrap; }

/* Print-only masthead — hidden on screen, shown in the PDF/print output. */
.print-only { display: none; }

/* PRINT / PDF EXPORT (Growth path) ==================================== */
/* "Download PDF" calls window.print(); these rules strip the app chrome and
   the other library tabs, then re-style the Growth panel into a clean,
   ink-friendly document on white. */
@media print {
  @page { margin: 1.5cm; }

  /* Hide everything that isn't the Growth panel. */
  .site-header, .site-footer, .scroll-progress,
  #loading, #onboardingPrompt, #libNav,
  #trainingsSection, #videosSection,
  .growth-pdf-btn,
  #content > .eyebrow, #headline, #subhead { display: none !important; }

  html, body { background: #fff !important; }
  main.container { padding: 0 !important; max-width: 100% !important; }
  #content { display: block !important; }
  #growthSection { display: block !important; }

  /* Force background colors/gradients to print (browsers drop them otherwise). */
  .prog-row::before, .earn-bar-wrap, .earn-bar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Light document palette. */
  #growthSection .eyebrow { color: var(--accent) !important; }
  #growthSection h2, .growth-head h3 { color: #0B0F14 !important; }
  #growthSection .muted, .prog-title .prog-sub, .earn-label, .earn-foot, #growthSection .dim {
    color: #555 !important;
  }
  .prog-title { color: #111 !important; }
  .prog-metric, .earn-value { color: #0B0F14 !important; }
  .prog-row { border-bottom: 1px solid #d9d9d9 !important; background: none !important; }
  .prog-row.prog-head { border-bottom: 1px solid var(--accent) !important; }
  .prog-row::before { opacity: 1 !important; }
  .earn-bar-wrap { background: #ececec !important; border-color: #d9d9d9 !important; }
  .earn-bar { background: var(--accent) !important; box-shadow: none !important; width: var(--w) !important; }

  /* Keep rows and blocks from splitting across pages. */
  .growth-block { break-inside: avoid; page-break-inside: avoid; margin-top: 1.5rem; }
  .prog-row, .earn-item { break-inside: avoid; page-break-inside: avoid; }

  /* Print masthead. */
  .print-only { display: block !important; }
  .print-masthead { margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--accent); }
  .print-masthead .pm-brand {
    font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0.14em;
    color: #0B0F14; display: inline-block; margin-right: 0.6rem;
  }
  .print-masthead .pm-tag { font-size: 0.7rem; letter-spacing: 0.22em; color: var(--accent); }
  .print-masthead .pm-title { display: block; margin-top: 0.35rem; font-size: 0.85rem; letter-spacing: 0.06em; color: #555; text-transform: uppercase; }
}

/* LIGHT SECTION VARIANT ============================================== */
/* Inverts the palette inside .section--light so ALIGN red pops harder on a
   white panel. CSS variables cascade to descendants, so most child rules
   adapt automatically; a few specific elements are tuned below. */
.section--light {
  --bg: #ffffff;
  --bg-elevated: #f5f6f8;
  --bg-card: #ffffff;
  --border: #e4e6ea;
  --text: #0b0f14;
  --text-muted: #4b5563;
  --text-dim: #6b7280;
  --shadow-glow: 0 0 24px rgba(230, 42, 58, 0.10);
  background: #ffffff;
  color: #0b0f14;
}
/* Hex-frame keeps its red-tinted glass; on white the tint is subtle but the
   border still pops. */
.section--light .hex-frame {
  background: linear-gradient(135deg, rgba(230, 42, 58, 0.05), rgba(230, 42, 58, 0.01));
}
/* Pull quote: soft surface, dark text. */
.section--light .pull-quote {
  background: #fafbfc;
  border-color: var(--border);
  color: var(--text);
}
.section--light .pull-quote cite { color: var(--text-dim); }
/* Cards on the white panel get a faint elevated surface so they don't blend. */
.section--light .stat-tile,
.section--light .stat-cell {
  background: #fafbfc;
  border-color: var(--border);
}
/* FAQ rows. */
.section--light .faq details { border-color: var(--border); }
.section--light .faq summary { color: var(--text); }
.section--light .faq p { color: var(--text-muted); }

/* CARD HOVER: lift + animated accent underline ======================= */
/* Tactile feedback on the major card surfaces. The underline slides in
   from the left; non-.tilt cards also lift 3px on hover. */
.role-card, .stat-tile, .stat-cell, .step-item {
  position: relative;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.role-card::after,
.stat-tile::after,
.stat-cell::after,
.step-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.role-card:hover,
.stat-tile:hover,
.stat-cell:hover,
.step-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.role-card:hover::after,
.stat-tile:hover::after,
.stat-cell:hover::after,
.step-item:hover::after {
  width: 100%;
}

/* FLOATING APPLY CTA — inverts when a light section is in view ======== */
.floating-apply--on-light {
  background: #ffffff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: 0 8px 22px rgba(11, 15, 20, 0.16);
}
.floating-apply--on-light:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* PARTNERS SECTION ==================================================== */
/* Tier-one installer + financing roster, sitting under the install map as
   a coda to the "where we sell" chapter. Logo-less for now — names are
   typeset in the display font; drop in real artwork later by replacing the
   inner <span class="partner-name"> with an <img>. */
/* 4 partner logos: 2×2 on mobile, 1×4 on tablet+. The previous 3-col
   middle breakpoint left a lone logo on its own row (3+1) and the 5-col
   desktop breakpoint left an empty cell at the end of the row. */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 720px) { .partner-grid { grid-template-columns: repeat(4, 1fr); } }

.partner-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 1.5rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.partner-card img {
  display: block;
  width: auto;
  max-width: 78%;
  max-height: 56px;
  object-fit: contain;
  /* Force every logo to render as a clean white silhouette — unified across
     SVG, PNG, WebP regardless of the source file's colors. Source files were
     also pre-recolored to white where possible, so this filter is belt-and-
     suspenders and tolerates any future logo drop-ins. */
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Text fallback (used if a logo file is ever swapped out or fails). */
.partner-card .partner-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0b0f14;
  text-align: center;
  line-height: 1;
}
.partner-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.partner-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--bg-card);
}
.partner-card:hover img {
  opacity: 1;
  transform: scale(1.05);
}
.partner-card:hover::after { width: 100%; }

/* HERO — centered focal layout (rivsolar-style) ======================= */
/* Above the fold: ALIGN SOLAR wordmark is the visual anchor. Everything
   beneath (headline, subhead, CTAs, stats) is center-stacked. */
.hero > .container.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 8rem);
}

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.75rem;
}
/* Kept available for future use (e.g. badge variant); currently no element
   uses .hero-brand-mark — the wordmark is the sole focal point. */
.hero-brand-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--accent);
  width: 76px; height: 76px; line-height: 76px;
  text-align: center;
  border-radius: 16px;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 28px rgba(230, 42, 58, 0.45);
}
.hero-brand-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}
.hero-brand-wordmark .accent { color: var(--accent); }

/* Refined tagline beneath the wordmark — locks them into a single brand unit. */
.hero-brand-tag {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 0.9vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.95rem;
}
.hero-brand-tag .dot { color: var(--accent); margin: 0 0.15em; }

.hero-headline {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.005em;
}
.hero-headline .line { display: block; }

.hero-subhead {
  max-width: 560px;
  margin: 1.5rem auto 0;
  font-size: clamp(0.98rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  color: var(--text-muted);
}
.hero-subhead strong { color: var(--text); font-weight: 600; }

.hero-ctas {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.hero-stats {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 4rem);
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  width: min(100%, 520px);
}
.hero-stat { text-align: center; }
.hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.hero-stat-num .accent { color: var(--accent); }
.hero-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.5rem;
}

@media (max-width: 560px) {
  .hero-brand { margin-bottom: 2.25rem; }
  .hero-brand-wordmark { letter-spacing: 0.16em; }
  .hero-brand-tag { letter-spacing: 0.22em; margin-top: 0.7rem; }
  .hero-stats { gap: 1.5rem; padding-top: 1.5rem; margin-top: 2rem; }
}

/* PROMOTIONAL CHART (Growth tab) =================================== */
/* Six-rung promotional chart with all three data views (Performance ·
   Leadership · Growth) stacked together — no tabs, everything visible.
   Red / black theme matching ALIGN's brand, scoped to this card only. */
.promo-chart {
  --pc-bg:        var(--bg-elevated);            /* #14191F */
  --pc-card:      #06090d;                       /* near-black role cards */
  --pc-accent:    var(--accent);                 /* ALIGN red #E62A3A */
  --pc-text:      var(--text);                   /* white */
  --pc-text-mute: var(--text-muted);
  --pc-divider:   rgba(230, 42, 58, 0.45);
  background: var(--pc-bg);
  color: var(--pc-text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.25rem 1.5rem 1.5rem;
  margin-top: 1.5rem;
}

/* Header: "ALIGN SOLAR" + "PROMOTIONAL CHART" subtitle */
.promo-chart-header { text-align: center; margin-bottom: 1.75rem; }
.pc-brand {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pc-text);
  line-height: 1;
}
.pc-brand-accent { color: var(--pc-accent); }
.pc-subtitle {
  display: inline-block;
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--pc-text);
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--pc-accent);
}

/* Six role tiles — black with red number */
.pc-roles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
}
.pc-role {
  background: var(--pc-card);
  color: var(--pc-text);
  padding: 0.9rem 0.5rem;
  text-align: center;
  border: 1px solid rgba(230, 42, 58, 0.25);
  border-radius: 4px;
}
.pc-num {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  color: var(--pc-accent);
  line-height: 1;
  font-weight: 700;
}
.pc-title {
  font-size: clamp(0.6rem, 1.1vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-top: 0.45rem;
  color: var(--pc-text);
}

/* Arrow connectors between each card */
.pc-arrows {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
  margin: 0.5rem 0;
}
.pc-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--pc-accent);
  font-size: 1.1rem;
  font-weight: 700;
  height: 1.4rem;
  transform: translateX(50%);
}
.pc-arrow:last-child { display: none; }

/* Content cells — one per role */
.pc-content {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
  align-items: start;
}
.pc-cell {
  padding: 0.5rem 0.5rem 1rem;
}
.pc-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pc-text-mute);
  text-align: center;
  border-bottom: 1px solid var(--pc-divider);
  padding-bottom: 0.45rem;
  margin-bottom: 0.85rem;
}
.pc-cell-list ul {
  list-style: disc;
  padding-left: 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--pc-text);
}
.pc-cell-list li { margin-bottom: 0.55rem; }
.pc-cell-list li::marker { color: var(--pc-accent); }
.pc-amount {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 700;
  text-align: center;
  color: var(--pc-text);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.pc-period {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--pc-text-mute);
  margin-top: 0.35rem;
}
.pc-cell-tbd .pc-amount { color: var(--pc-accent); }

/* Tab bar — Performance · Leadership · Growth */
.pc-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pc-divider);
}
.pc-tab {
  background: transparent;
  border: 0;
  padding: 0.55rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pc-text-mute);
  cursor: pointer;
  position: relative;
  transition: color 200ms ease;
}
.pc-tab + .pc-tab::before {
  content: '';
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: var(--pc-divider);
}
.pc-tab::after {
  content: '';
  position: absolute;
  left: 1.2rem; right: 1.2rem;
  bottom: -1.25rem;
  height: 2px;
  background: var(--pc-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.pc-tab:hover { color: var(--pc-text); }
.pc-tab.active {
  color: var(--pc-text);
  font-weight: 700;
}
.pc-tab.active::after { transform: scaleX(1); }

/* INTERACTIVITY ----------------------------------------------------- */
/* Hovering a role card highlights its cell directly below (in whichever
   view is active). Hovering any cell highlights the role card. */
.pc-role {
  cursor: default;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 240ms ease,
              background 240ms ease;
}
.pc-role:hover,
.pc-role.is-paired {
  transform: translateY(-3px);
  border-color: var(--pc-accent);
  box-shadow: 0 10px 26px rgba(230, 42, 58, 0.28);
  background: linear-gradient(180deg, #0a0e14 0%, #1a0a10 100%);
}

.pc-cell {
  cursor: default;
  transition: background 220ms ease, transform 220ms ease;
  border-radius: 6px;
}
.pc-cell:hover,
.pc-cell.is-paired {
  background: rgba(230, 42, 58, 0.08);
}
.pc-cell.is-paired { transform: translateY(-2px); }

/* SEAMLESS TAB TRANSITIONS ------------------------------------------ */
/* When swapping views, fade + lift the content out, then fade the new
   view in. Driven from JS via .pc-leaving / .pc-entering. */
.pc-content {
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  min-height: 9rem;
}
.pc-content.pc-leaving {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
}
.pc-content.pc-entering {
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
}

/* Stagger the individual cells coming in for the entering view. */
.pc-content > .pc-cell {
  animation: pc-cell-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.pc-content > .pc-cell:nth-child(1) { animation-delay:   0ms; }
.pc-content > .pc-cell:nth-child(2) { animation-delay:  50ms; }
.pc-content > .pc-cell:nth-child(3) { animation-delay: 100ms; }
.pc-content > .pc-cell:nth-child(4) { animation-delay: 150ms; }
.pc-content > .pc-cell:nth-child(5) { animation-delay: 200ms; }
.pc-content > .pc-cell:nth-child(6) { animation-delay: 250ms; }
@keyframes pc-cell-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect prefers-reduced-motion — no slides/lifts, just the data. */
@media (prefers-reduced-motion: reduce) {
  .pc-role, .pc-cell, .pc-content, .pc-content > .pc-cell, .pc-tab, .pc-tab::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Responsive: collapse to 3 columns on tablet, 2 on phone */
@media (max-width: 900px) {
  .pc-roles, .pc-arrows, .pc-content { grid-template-columns: repeat(3, 1fr); }
  .pc-arrow:nth-child(3n) { display: none; }
}
@media (max-width: 540px) {
  .pc-roles, .pc-arrows, .pc-content { grid-template-columns: repeat(2, 1fr); }
  .pc-arrows { display: none; }
  .promo-chart { padding: 1.5rem 1rem 1rem; }
  .pc-tab { padding: 0.4rem 0.85rem; font-size: 0.7rem; letter-spacing: 0.15em; }
}

/* COMP TAB — calculator + pipeline ================================= */
/* Two contained cards (calculator + pipeline) on the dark portal canvas. */
.comp-calc, .comp-pipe {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
  margin-top: 1.5rem;
}

/* --- Calculator --- */
.cc-head { margin-bottom: 1.5rem; }
.cc-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: 0.04em;
  margin: 0.15rem 0 0;
  line-height: 1;
}

.cc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) { .cc-inputs { grid-template-columns: 1fr; } }

.cc-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.cc-field .cc-hint {
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
}

.cc-input-row {
  display: flex; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cc-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(230, 42, 58, 0.22);
}
.cc-prefix, .cc-suffix {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.cc-prefix { margin-right: 0.35rem; }
.cc-suffix { margin-left: 0.35rem; }
.cc-input-row input[type="number"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0;
  width: 100%;
  appearance: textfield;
}
.cc-input-row input[type="number"]::-webkit-outer-spin-button,
.cc-input-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.cc-slider {
  width: 100%;
  margin-top: 0.85rem;
  accent-color: var(--accent);
}
.cc-ticks {
  display: flex; justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.4rem;
}

.cc-result {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.cc-result-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-result-amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin: 0.45rem 0 0.5rem;
  letter-spacing: 0.02em;
}
.cc-result-formula {
  font-size: 0.86rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* --- Pipeline --- */
.cp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.cp-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: 0.04em;
  margin: 0.15rem 0 0;
  line-height: 1;
}

.cp-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 720px) { .cp-totals { grid-template-columns: repeat(2, 1fr); } }
.cp-tot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 0.85rem;
  text-align: center;
}
.cp-tot-num {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.cp-tot-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Add-deal form */
.cp-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.cp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1rem;
}
@media (max-width: 540px) { .cp-form-grid { grid-template-columns: 1fr; } }
.cp-form .field { margin-bottom: 0; }
.cp-form-actions {
  display: flex; gap: 0.55rem; margin-top: 1rem;
}

/* Deal list */
.cp-list { display: flex; flex-direction: column; }
.cp-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.cp-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.9fr 1.1fr 0.9fr 0.4fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.cp-row:last-child { border-bottom: none; }
.cp-row-head {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  padding-bottom: 0.55rem;
  padding-top: 0.55rem;
  border-bottom: 1px solid var(--accent-dim);
}
.cp-name { font-weight: 600; color: var(--text); }
.cp-kw, .cp-ppw { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cp-commission {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cp-status {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cp-status-submitted { background: rgba(169, 176, 188, 0.15); color: var(--text-muted); }
.cp-status-approved  { background: rgba(245, 182, 66, 0.15); color: var(--warning); }
.cp-status-installed { background: rgba(45, 212, 143, 0.15); color: var(--success); }
.cp-status-paid      { background: rgba(230, 42, 58, 0.18); color: var(--accent); }

.cp-del {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 26px; height: 26px;
  border-radius: 4px;
  transition: color 160ms ease, background 160ms ease;
}
.cp-del:hover { color: var(--accent); background: rgba(230, 42, 58, 0.10); }

@media (max-width: 720px) {
  .cp-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 0.35rem 0.85rem;
    padding: 1rem 0.25rem;
  }
  .cp-row-head { display: none; }
  .cp-name { grid-column: 1 / span 2; font-size: 1rem; }
}

/* ADMIN PIPELINE (master tracker) =====================================
   Matches the existing admin tab pattern — plain .card wrapper, small
   h2, muted subhead, mt-lg sections. Only new ingredients: stat-tile
   row, filter chip counts, and the data table styling. */

/* Stat tiles — 5 flat, equal-weight metrics */
.pipeline-totals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}
@media (max-width: 900px) { .pipeline-totals { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .pipeline-totals { grid-template-columns: repeat(2, 1fr); } }
.pt-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.75rem;
  text-align: center;
}
.pt-num {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.pt-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.45rem;
}

/* Filter chip-row — small count badge inside each chip */
.pipeline-filters {
  margin: 1.25rem 0 0.5rem;
  gap: 0.4rem;
}
.pipeline-filters .chip {
  font-size: 0.72rem;
  padding: 0.4rem 0.8rem;
  letter-spacing: 0.06em;
}
.pipeline-filters .chip-count {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 0.4rem;
  text-align: center;
  transition: background 160ms ease, color 160ms ease;
}
.pipeline-filters .chip.active .chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Data table — clean, utilitarian, matches admin's voice */
.pipeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.pipeline-table thead th {
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.7rem 0.65rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pipeline-table tbody td {
  padding: 0.8rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pipeline-table tbody tr:last-child td { border-bottom: none; }
.pipeline-table th.num,
.pipeline-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pipeline-table td.accent {
  color: var(--accent);
  font-weight: 600;
}

/* PORTAL HERO BAND ===================================================
   Cinematic header for the rep portal. Composed of 4 layers (back to front):
     1. Image: wind-turbine sunset photo with slow Ken-Burns zoom
     2. Dark gradient tint: heavy bottom-darken + corner vignette for text
        legibility regardless of where the image's light/dark areas land
     3. Two animated red glow orbs that drift slowly — matches the ALIGN
        accent and gives the band a sense of motion without distraction
     4. Foreground content: welcome eyebrow + headline + subhead with a
        soft text-shadow so they read cleanly against any image region
*/
.portal-hero {
  position: relative;
  overflow: hidden;
  margin: -2.5rem -1.25rem 0;            /* break out of the main container's padding */
  padding: clamp(3.5rem, 9vw, 6rem) clamp(1.5rem, 4vw, 3rem) clamp(2.75rem, 6vw, 4rem);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
@media (min-width: 720px) {
  .portal-hero {
    margin-left: calc(-1 * max(1.25rem, (100vw - var(--maxw)) / 2 + 1.25rem));
    margin-right: calc(-1 * max(1.25rem, (100vw - var(--maxw)) / 2 + 1.25rem));
  }
}

/* Layer 1 — image stack: 3 finance/wealth slides crossfading on a 24s loop.
   Each slide carries the same toned-down filter so they all blend into the
   dark portal palette as ambient atmosphere. The Ken-Burns zoom runs only
   during each slide's visible window so the motion lines up with the fade. */
.portal-hero-img-stack {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.portal-hero-img {
  position: absolute;
  inset: -2%;                              /* over-bleed so zoom doesn't expose edges */
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(0.72) saturate(0.62) contrast(0.95);
  animation: portalHeroSlideZoom 24s ease-in-out infinite;
  will-change: opacity, transform;
}
.portal-hero-img-1 {
  background-image: url('/images/portal/portal-hero-1.jpg?v=202606012300');
  animation-delay: 0s;                     /* gold bars — slide 1 (0–8s) */
}
.portal-hero-img-2 {
  background-image: url('/images/portal/portal-hero-2.jpg?v=202606012300');
  animation-delay: -16s;                   /* $100 bills — slide 2 (8–16s) */
}
.portal-hero-img-3 {
  background-image: url('/images/portal/portal-hero-3.jpg?v=202606012300');
  animation-delay: -8s;                    /* stock chart — slide 3 (16–24s) */
}
@keyframes portalHeroSlideZoom {
  0%   { opacity: 0; transform: scale(1.02) translate3d(0, 0, 0); }
  4%   { opacity: 1; transform: scale(1.04) translate3d(0, -0.2%, 0); }   /* fade in (1s) */
  33%  { opacity: 1; transform: scale(1.10) translate3d(0, -1.5%, 0); }   /* fully zoomed */
  37%  { opacity: 0; transform: scale(1.10) translate3d(0, -1.5%, 0); }   /* fade out (1s) */
  100% { opacity: 0; transform: scale(1.02) translate3d(0, 0, 0); }
}

/* Layer 2 — soft global tint that blends image into the page. No more
   aggressive spotlight; the desaturated image carries its own contrast now. */
.portal-hero-tint {
  position: absolute;
  inset: 0;
  background:
    /* very subtle text-area shade, just to nudge legibility */
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(11, 15, 20, 0.30) 0%, transparent 70%),
    /* gentle warm red wash, top-right corner */
    radial-gradient(ellipse at 80% 20%, rgba(230, 42, 58, 0.10) 0%, transparent 60%),
    /* main blend: light top → heavier bottom so it dissolves into the page */
    linear-gradient(180deg, rgba(11, 15, 20, 0.40) 0%, rgba(11, 15, 20, 0.55) 55%, rgba(11, 15, 20, 0.95) 100%);
  pointer-events: none;
  z-index: -2;
}

/* Layer 3 — two animated red glow orbs */
.portal-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.portal-hero-glow-1 {
  width: 320px; height: 320px;
  top: -60px; left: 8%;
  background: radial-gradient(circle, rgba(230, 42, 58, 0.55) 0%, transparent 70%);
  animation: portalHeroOrbDrift1 18s ease-in-out infinite alternate;
}
.portal-hero-glow-2 {
  width: 380px; height: 380px;
  bottom: -120px; right: 6%;
  background: radial-gradient(circle, rgba(255, 109, 80, 0.45) 0%, transparent 70%);
  animation: portalHeroOrbDrift2 22s ease-in-out infinite alternate;
}
@keyframes portalHeroOrbDrift1 {
  from { transform: translate3d(0,    0, 0) scale(1);    opacity: 0.45; }
  to   { transform: translate3d(60px, 40px, 0) scale(1.18); opacity: 0.65; }
}
@keyframes portalHeroOrbDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.05);    opacity: 0.55; }
  to   { transform: translate3d(-50px, -30px, 0) scale(0.92); opacity: 0.35; }
}

/* Layer 4 — foreground content */
.portal-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}
.portal-hero-content .eyebrow {
  color: var(--accent);
  text-shadow: 0 2px 10px rgba(11, 15, 20, 0.7);
}
.portal-hero-content #headline {
  font-size: clamp(1.85rem, 4.2vw, 2.8rem);
  text-shadow: 0 2px 14px rgba(11, 15, 20, 0.75);
  letter-spacing: -0.005em;
}
.portal-hero-content #subhead {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(11, 15, 20, 0.65);
}

/* Push the library nav slightly down from the hero band */
#libNav { margin-top: clamp(1.5rem, 3vw, 2.5rem) !important; }

/* Reduced-motion guard — kill the slideshow + zoom + orb drift for users
   who opt out. The first slide stays visible as a static background. */
@media (prefers-reduced-motion: reduce) {
  .portal-hero-img,
  .portal-hero-glow-1,
  .portal-hero-glow-2 { animation: none !important; }
  .portal-hero-img-1 { opacity: 1 !important; }
  .portal-hero-img-2,
  .portal-hero-img-3 { opacity: 0 !important; }
}

/* ============================================================
   SCRIPTS — verbatim talk-track viewer (/script.html)
   ============================================================
   Three visual lanes per section so a rep can scan and learn:
     🎯 .script-purpose   — small subdued one-liner ("what this beat does")
     🗣 .script-block     — large verbatim block ("what you say"), brand-tinted
     📝 .coach-note       — tinted callout with bulleted tactical notes
   Plus .branch-pill (PURCHASE / PPA labels) and a TOC at the top.
   ============================================================ */

.script-tldr {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: 6px;
}

.script-toc {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.script-toc-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: decimal-leading-zero;
  color: var(--text-muted);
}
.script-toc-list li { margin: 0.35rem 0; }
.script-toc-list a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}
.script-toc-list a:hover { color: var(--accent); }

.script-section {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}
.script-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.script-section-head h2 {
  margin: 0;
  font-size: 1.6rem;
  flex: 1 1 auto;
  min-width: 200px;
}
.script-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  line-height: 1;
}

.branch-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  vertical-align: middle;
}
.branch-pill.branch-purchase {
  color: var(--accent);
  border-color: rgba(230, 42, 58, 0.35);
  background: rgba(230, 42, 58, 0.08);
}
.branch-pill.branch-ppa {
  color: #5ec0ff;
  border-color: rgba(94, 192, 255, 0.35);
  background: rgba(94, 192, 255, 0.08);
}

.lane-icon {
  font-size: 0.95rem;
  margin-right: 0.4rem;
}
.lane-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  margin-right: 0.6rem;
}

/* 🎯 Purpose — small one-liner, subdued */
.script-purpose {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border-radius: 6px;
  font-size: 0.92rem;
}
.script-purpose p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

/* 🗣 Script — the LARGE verbatim block, brand-tinted left border */
.script-block {
  margin: 1.25rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text);
}
.script-block p {
  margin: 0 0 1rem;
}
.script-block p:last-child {
  margin-bottom: 0;
}
/* Branch-specific add-on script — slightly indented + a softer left border */
.script-block-extra {
  margin-left: 1rem;
  border-left-color: var(--text-muted);
  background: var(--bg-elevated);
}
.script-block-extra .branch-pill {
  display: inline-block;
  margin-bottom: 0.6rem;
}

/* 📝 Coach notes — tinted callout, smaller text, bulleted */
.coach-note {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: rgba(94, 192, 255, 0.05);
  border: 1px solid rgba(94, 192, 255, 0.18);
  border-radius: 6px;
}
.coach-note ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.coach-note li {
  margin: 0.45rem 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
.coach-note li::marker { color: rgba(94, 192, 255, 0.6); }

/* Compact on small screens */
@media (max-width: 600px) {
  .script-num { font-size: 1.5rem; }
  .script-section-head h2 { font-size: 1.3rem; }
  .script-block { padding: 1rem 1.1rem; font-size: 1rem; }
  .coach-note { padding: 0.85rem 1rem; }
}

/* Video catalog placeholders — slots that don't have a real video yet.
   Dim the card and recolor the badge so they read as "stand-in" without
   making the section feel broken. Remove by deleting `comingSoon: true`
   on the entry and giving it real duration + instructor. */
.video-card.is-coming {
  opacity: 0.72;
  cursor: default;
}
.video-card.is-coming:hover {
  transform: none;
}
.video-card.is-coming .video-thumb {
  filter: saturate(0.55) brightness(0.85);
}
.video-new.video-coming {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Large primary button — used on terminal CTAs like "Sign Agreement with
   DocuSign" where the click should feel like the heaviest action on the
   page. ~30% bigger padding + 1.05rem type. */
.btn-lg {
  padding: 1.05rem 2rem;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

/* ==============================================================
   MOBILE SWIPE CAROUSELS — applies ONLY below 720px.
   Desktop (>=720px) is the site's breakpoint, so it is never
   affected by anything in here. Add `m-carousel` to any card
   row to turn it into an edge-to-edge swipe strip on phones.
   ============================================================== */

/* Swipe hint label — hidden everywhere by default; shown on mobile only. */
.m-swipe { display: none; }

@media (max-width: 719.98px) {
  .m-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 0.9rem;
    /* Bleed past the .container's 1.25rem padding to the screen edges, then
       re-inset the cards so the first/last align with the rest of the page. */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0.35rem 1.25rem 0.9rem;
    scroll-padding-left: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* override grid layout from the base rules */
    grid-template-columns: none !important;
  }
  .m-carousel::-webkit-scrollbar { display: none; }

  .m-carousel > * {
    flex: 0 0 82% !important;
    scroll-snap-align: start;     /* snap flush-left, aligned with the headings */
    min-width: 0;
    margin-top: 0 !important;
  }

  /* Carousel cards must be visible even before the scroll-in observer fires
     (off-screen-right items otherwise stay hidden until swiped to). */
  .m-carousel > .reveal { opacity: 1 !important; transform: none !important; }

  /* Swipe affordance under each carousel. */
  .m-swipe {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .m-swipe::after {
    content: '→';
    font-size: 0.95rem;
    animation: mSwipeNudge 1.5s ease-in-out infinite;
  }
}
@keyframes mSwipeNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .m-swipe::after { animation: none; }
}

/* ==============================================================
   APPLY section — tighter + shorter on mobile only (<720px).
   Desktop layout (>=720px) is unchanged.
   ============================================================== */
@media (max-width: 719.98px) {
  #apply { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  #apply .hex-frame { padding: 1.1rem; }
  #apply h2 { margin-top: 0.2rem; }
  #apply .section-eyebrow { font-size: 0.7rem; }
  #apply .hex-frame > p.muted { margin-top: 0.3rem; font-size: 0.88rem; line-height: 1.45; }
  #apply form.mt-lg { margin-top: 0.85rem; }

  /* Pair the short fields into two columns; keep Email + Phone full-width. */
  #apply .grid-2 { grid-template-columns: 1fr 1fr; gap: 0.45rem 0.6rem; }
  #apply .grid-2 .span2 { grid-column: 1 / -1; }

  #apply .field { margin-bottom: 0.55rem; gap: 0.3rem; }
  #apply .field label { font-size: 0.72rem; }
  #apply textarea { min-height: 64px; }
  #apply #aSubmit { margin-top: 0.1rem; }
  #apply form .dim.mt-sm { margin-top: 0.45rem; }
  #apply .text-center.mt-lg { margin-top: 0.9rem; }
}

/* ==============================================================
   TRIP INCENTIVES — fix mobile clipping/alignment of the big
   handwritten callout (was overflowing the slide's hidden box and
   the -1deg tilt threw off alignment). Mobile only.
   ============================================================== */
@media (max-width: 600px) {
  .trip-overlay { padding: 1.1rem 1rem; }
  .trip-headline { font-size: clamp(1.7rem, 8vw, 2.5rem); }
  .trip-callout {
    font-size: clamp(2.2rem, 12vw, 3.1rem);
    transform: none;                 /* straighten so it lines up with the text */
    margin: 0.2rem 0 0.45rem;
    max-width: 100%;
    line-height: 1;
  }
  /* keep the panel "big" number from forcing horizontal overflow */
  .trip-panel .panel-big { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* ==============================================================
   TOP NAV — on phones the 5-item nav crammed/overflowed. Hide the
   in-page text links and keep the CTA buttons, sized to fit. The
   page already has section-dots + a floating Apply button for nav.
   Mobile only; desktop nav is unchanged.
   ============================================================== */
@media (max-width: 719.98px) {
  .site-header .nav-landing { gap: 0.45rem; flex-wrap: nowrap; }
  .site-header .nav-landing a:not(.btn) { display: none; }   /* hide Why / Pay / FAQ */
  .site-header .nav-landing .btn-sm {
    padding: 0.5rem 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}
/* Very small phones: drop the secondary "Sign in" so the primary CTA never wraps. */
@media (max-width: 380px) {
  .site-header .nav-landing .btn-ghost { display: none; }
}

/* Onboarding — in-page agreement acknowledgment rows (DocuSign fallback). */
.ack-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.55rem 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted);
  cursor: pointer;
}
.ack-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}