/* ==========================================================================
   Dr. Lean Murali — leanmurali.in
   Design system: Onyx / Deep Red / Silver / White (Value Enablers palette)
   ========================================================================== */

:root {
  /* Brand palette — locked, see brand/color-palette.md */
  --onyx: #0D0D0D;
  --deep-red: #A81F1F;
  --red-hover: #A81F1F;
  --red-active: #5C0000;

  /* CTA button colors — see brand/color-palette.md (explicit request 2026-08-20) */
  --cta-bg: #8B0000;
  --cta-bg-hover: #A81F1F;
  --red-tint-10: #FBEAEA;
  --silver: #C0C0C0;
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --platinum: #E5E5E5;
  --graphite: #4A4A4A;
  --slate: #5C5C5C;
  --border: #DADAD9;
  --success: #2E7D4F;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* Layout */
  --max-width: 1200px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(13,13,13,0.04), 0 4px 16px rgba(13,13,13,0.05);

  /* Header height — referenced by nav-wrap and the mobile nav panel's
     top offset so the two never fall out of sync at any breakpoint. */
  --header-h: 112px;
}

/* Safety net: nothing on the page should ever be able to create
   horizontal scroll on mobile. Fixed/sticky elements are unaffected
   since they position against the viewport, not this box. */
html { overflow-x: hidden; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--onyx);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--onyx); }
p { margin: 0; }
figure { margin: 0; }

/* Skip link for accessibility */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--onyx); color: var(--white); padding: 12px 20px;
  border-radius: 0 0 6px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--deep-red);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.section { padding: var(--space-6) 0; }
.section-tight { padding: var(--space-5) 0; }
@media (max-width: 700px) {
  .section { padding: var(--space-5) 0; }
  .section-tight { padding: var(--space-4) 0; }
}
.section-dark { background: var(--onyx); color: var(--white); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-offwhite { background: var(--off-white); }
.section-red { background: var(--deep-red); color: var(--white); }
.section-red h2, .section-red h3 { color: var(--white); }

.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-red);
  margin-bottom: var(--space-2);
  display: inline-block;
}
.section-dark .eyebrow, .section-red .eyebrow { color: var(--silver); }

.section-head { max-width: 700px; margin: 0 auto var(--space-5); text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: var(--space-2); }
.section-head p { color: var(--slate); font-size: 1.08rem; }
.section-dark .section-head p, .section-red .section-head p { color: var(--platinum); }

/* ---------- Typography scale ---------- */
h1 { font-size: clamp(2.1rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.lede { font-size: 1.2rem; color: var(--slate); }
/* On dark/red section backgrounds the default slate lede reads as
   low-contrast, hard-to-read grey text — lift it to platinum so it
   stays legible on both desktop and mobile (same rule, no breakpoint
   needed since it isn't a responsive-only bug). */
.section-dark .lede, .section-red .lede, .final-cta .lede, .mission-strip .lede, .page-hero .lede { color: var(--platinum); }
.small { font-size: 0.9rem; }
.stat-number {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  letter-spacing: -0.02em;
  color: var(--white);
}
.section-offwhite .stat-number, .section-light .stat-number { color: var(--onyx); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cta-bg); color: var(--white); }
.btn-primary:hover { background: var(--cta-bg-hover); }
.btn-primary:active { background: var(--red-active); }
.btn-secondary { background: transparent; color: var(--onyx); border-color: var(--silver); }
.btn-secondary:hover { border-color: var(--onyx); background: var(--platinum); }
.section-dark .btn-secondary, .section-red .btn-secondary, .hero .btn-secondary, .page-hero .btn-secondary, .final-cta .btn-secondary, .mission-strip .btn-secondary, .sticky-cta .btn-secondary { background: var(--platinum); color: var(--onyx); border-color: var(--platinum); }
.section-dark .btn-secondary:hover, .section-red .btn-secondary:hover, .hero .btn-secondary:hover, .page-hero .btn-secondary:hover, .final-cta .btn-secondary:hover, .mission-strip .btn-secondary:hover, .sticky-cta .btn-secondary:hover { background: var(--white); border-color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
@media (max-width: 700px) {
  /* Long CTA labels (e.g. "See the full Lean Six Sigma learning hub →")
     must never force horizontal scroll on a phone screen — let them
     wrap to a second line instead of pushing the button past the edge. */
  .btn { white-space: normal; text-align: center; }
}

.cta-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--onyx);
  border-bottom: 3px solid var(--deep-red);
}
.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 0.65rem; color: var(--white); flex-shrink: 0; min-width: 0; }
.brand img { height: 38px; width: auto; }
.brand-word { font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; }
.brand-word span { color: var(--deep-red); }

.main-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1 1 auto; justify-content: space-between; min-width: 0; }
.main-nav ul { display: flex; align-items: center; gap: 1.85rem; }
.main-nav a {
  color: var(--platinum);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--white); border-color: var(--deep-red); }

.nav-toggle {
  display: none;
  background: none; border: none; color: var(--white);
  padding: 0.4rem;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle:hover, .nav-toggle:active { background: rgba(255,255,255,0.1); }

@media (max-width: 1300px) {
  .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--onyx); flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-3); transform: translateX(100%); transition: transform .2s ease;
    overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 1rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .main-nav .cta-row { margin-top: var(--space-3); flex-direction: column; }
  .nav-toggle { display: block; }
}

/* Phone header: the desktop wordmark size (3.1rem) overwhelms a phone
   screen and crowds the menu button, so it steps down in two stages
   and the sticky header shrinks to match — --header-h keeps the
   mobile nav panel's top offset in sync automatically. */
@media (max-width: 700px) {
  :root { --header-h: 76px; }
  .brand-word { font-size: 1.7rem; }
  .brand img { height: 30px; }
  .nav-toggle { padding: 0.6rem; }
  .nav-toggle svg { width: 26px; height: 26px; }
}
@media (max-width: 420px) {
  :root { --header-h: 68px; }
  .brand-word { font-size: 1.4rem; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--onyx);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-3) var(--space-4);
  position: relative;
  z-index: 2;
}
.hero-copy { max-width: 600px; }

/* Full-bleed hero portrait: no frame/box — a clean cutout sitting directly on
   the onyx background. Pinned to the TOP of the section (flush against the
   header's red line) and sized purely from its own aspect ratio, rather than
   stretched to the section's full height — the section's height varies with
   how much the copy column wraps to at a given viewport width, and stretching
   to fill it (the previous approach: top:0/bottom:0 + object-fit:contain +
   object-position:bottom) let a taller section letterbox empty space in above
   the head. Anchoring to the top instead keeps the head-to-header gap fixed
   and small at every viewport/content height; the trade-off is that on an
   unusually tall section the feet may land slightly above the mission strip
   rather than exactly flush with it. */
.hero .hero-photo {
  position: absolute;
  bottom: 0;
  right: max(var(--space-3), calc((100vw - var(--max-width)) / 2 + var(--space-3)));
  width: clamp(300px, 36vw, 500px);
  aspect-ratio: 936 / 1341;
  z-index: 1;
  pointer-events: none;
}
.hero .hero-photo picture,
.hero .hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 900px) {
  .hero-inner { padding: var(--space-6) var(--space-3) var(--space-4); }
  .hero-copy { max-width: none; }
  .hero .hero-photo {
    position: static;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto var(--space-4);
    aspect-ratio: 936 / 1341;
  }
  .hero .hero-photo img { height: 100%; }
}
.hero h1 { color: var(--white); margin-bottom: var(--space-3); }
.hero h1 em { font-style: italic; color: var(--deep-red); }
.hero .lede { color: var(--platinum); margin-bottom: var(--space-4); max-width: 46ch; }
.hero-photo-frame {
  /* Transparent portrait cutout — no card background/border behind it,
     so the photo floats directly on the section background. */
}
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mentor section photo bleed (homepage "Your Mentor" section) ----------
   This is a distinct component from .hero-photo-frame above (which the About
   page keeps using in its own two-column layout, unchanged). Only the BOTTOM
   edge is bled through the section's own padding, so the photo's feet always
   sit flush with the dark stats section that follows. The photo keeps its
   natural aspect ratio (width set, height auto — no object-fit crop of any
   kind), so the whole person, including both shoulders/elbows, is always
   fully visible; a larger width naturally pulls the head closer to the top
   of this off-white section as a side effect, without forcing an exact
   flush top that would otherwise require cropping the sides to compensate. */
.mentor-photo-col { position: relative; }
.mentor-photo-frame {
  position: absolute;
  bottom: calc(-1 * var(--space-6));
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 440px);
}
.mentor-photo-frame img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .mentor-photo-frame { width: min(90%, 340px); }
}
@media (max-width: 700px) {
  .mentor-photo-frame { bottom: calc(-1 * var(--space-5)); width: min(90%, 280px); }
}
@media (max-width: 560px) {
  /* Grid stacks to one column here — let the photo sit as a normal,
     un-bled block above the text instead of absolutely positioned. */
  .mentor-photo-col { position: static; min-height: 320px; margin-bottom: var(--space-3); }
  .mentor-photo-frame { position: static; bottom: auto; left: auto; transform: none; width: 100%; max-width: 260px; margin: 0 auto; }
}
.hero-proof { margin-top: var(--space-5); display: flex; gap: var(--space-5); flex-wrap: wrap; }
.hero-proof .num { font-family: var(--font-body); font-weight: 800; font-size: 1.6rem; color: var(--white); }
.hero-proof .label { font-size: 0.82rem; color: var(--silver); letter-spacing: 0.02em; }

/* ---------- Mission strip ---------- */
.mission-strip {
  background: var(--deep-red);
  color: var(--white);
  padding: var(--space-5) 0;
  text-align: center;
}
.mission-strip .eyebrow { color: rgba(255,255,255,0.75); }
.mission-strip p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.3;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

.resource-card { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.resource-card > img { width: 96px; height: 96px; }
@media (max-width: 700px) {
  .resource-card { grid-template-columns: 1fr; text-align: center; gap: 1.1rem; }
  .resource-card > img { margin: 0 auto; }
  .resource-card > .btn { width: 100%; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--slate); }

.tool-card { display: flex; flex-direction: column; gap: 0.7rem; }
.tool-card .tag {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--deep-red); background: var(--red-tint-10); padding: 0.25rem 0.6rem; border-radius: 100px;
}

/* ---------- Journey (5-step) ---------- */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); counter-reset: step; }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .journey { grid-template-columns: 1fr; } }
.journey-step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--deep-red);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2) var(--space-2);
}
.journey-step .step-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--deep-red); margin-bottom: 0.4rem; display: block;
}
.journey-step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.journey-step p { font-size: 0.92rem; color: var(--slate); }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); text-align: center; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .stats-grid-3 { grid-template-columns: 1fr; } }
.stat-item .stat-label { color: var(--silver); font-size: 0.85rem; margin-top: 0.4rem; }
.section-offwhite .stat-item .stat-label, .section-light .stat-item .stat-label { color: var(--slate); }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-card);
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--onyx);
  margin: 0;
}
.testimonial-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.testimonial-meta .who { font-weight: 700; font-size: 0.95rem; }
.testimonial-meta .role { color: var(--slate); font-size: 0.85rem; }
.testimonial-meta .result-chip {
  font-size: 0.78rem; font-weight: 700; color: var(--success); background: #EAF6EF;
  padding: 0.25rem 0.6rem; border-radius: 100px; white-space: nowrap;
}
.view-original { font-size: 0.82rem; color: var(--deep-red); font-weight: 600; }
.view-original:hover { text-decoration: underline; }

/* ---------- Logo strips ---------- */
.logo-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-5); }
.logo-strip img { height: 56px; width: auto; }
.logo-strip .wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--graphite);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.4rem;
}

/* ---------- Article cards ---------- */
.article-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3); box-shadow: var(--shadow-card);
}
.article-card .tag { color: var(--deep-red); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.article-card .read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--deep-red); margin-top: auto; }
.article-card .read-more:hover { text-decoration: underline; }

/* ---------- Community cards ---------- */
.community-card {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--white);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.community-card.telegram { background: linear-gradient(160deg, #229ED9 0%, #1c7fb0 100%); }
.community-card.linkedin { background: linear-gradient(160deg, #0A66C2 0%, #084a8c 100%); }
.community-card.youtube { background: linear-gradient(160deg, #FF0000 0%, #b30000 100%); }
.community-card .num { font-size: 1.7rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 420px) { .community-card .num { font-size: 1.4rem; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--onyx); color: var(--platinum); padding: var(--space-6) 0 var(--space-3); border-top: 1px solid rgba(255,255,255,0.14); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-2); }
.site-footer .brand-word { color: var(--white); font-size: 1.55rem; }
.site-footer .mission-line { color: var(--silver); margin: var(--space-2) 0; max-width: 34ch; }
.site-footer ul li { margin-bottom: 0.6rem; }
.site-footer a { color: var(--platinum); }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  font-size: 0.85rem; color: var(--silver);
}

/* ---------- Final CTA band ---------- */
.final-cta { background: var(--onyx); color: var(--white); text-align: center; padding: var(--space-6) 0; }
.final-cta h2 { color: var(--white); margin-bottom: var(--space-2); }
.final-cta p { color: var(--platinum); max-width: 640px; margin: 0 auto var(--space-4); font-size: 1.1rem; }

/* ---------- Page hero (secondary pages) ---------- */
.page-hero { background: var(--onyx); color: var(--white); padding: var(--space-6) 0 var(--space-5); }
.page-hero .eyebrow { color: var(--silver); }
.page-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.9rem); }
.page-hero p { color: var(--platinum); max-width: 60ch; margin-top: var(--space-2); font-size: 1.1rem; }
.breadcrumb { font-size: 0.85rem; color: var(--silver); margin-bottom: var(--space-2); }
.breadcrumb a { color: var(--silver); }
.breadcrumb a:hover { color: var(--white); }

/* ---------- Utility ---------- */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.text-slate { color: var(--slate); }
.text-silver { color: var(--silver); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }
.badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--deep-red); background: var(--red-tint-10); padding: 0.3rem 0.7rem; border-radius: 100px;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill { border: 1px solid var(--border); border-radius: 100px; padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--graphite); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll (subtle, one-shot) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Sticky mobile CTA bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--onyx); border-top: 3px solid var(--deep-red);
  padding: 0.7rem var(--space-3);
  display: none;
}
.sticky-cta .btn { width: 100%; }
@media (max-width: 700px) { .sticky-cta { display: block; } body { padding-bottom: 96px; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(13,13,13,0.92);
  display: none; align-items: center; justify-content: center; padding: var(--space-4);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(90vw, 720px); max-height: 88vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: transparent; border: 1.5px solid rgba(255,255,255,0.5); color: var(--white);
  width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,0.12); }

/* Table (used sparingly, e.g., tool grid on LSS page) */
.plain-table { width: 100%; border-collapse: collapse; }
.plain-table th, .plain-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.plain-table th { font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); }

/* ==========================================================================
   Lead capture modal — "Get the Free Training Manual" gate + the
   exit-intent / 80%-scroll reminder popup (same component, multiple
   triggers). z-index 400 sits above the lightbox (300) and sticky-cta (90).
   ========================================================================== */
.lead-modal-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(13,13,13,0.72);
  display: flex; align-items: center; justify-content: center; padding: var(--space-3);
}
.lead-modal-overlay[hidden] { display: none; }
.lead-modal {
  position: relative; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35); max-width: 440px; width: 100%;
  padding: var(--space-5) var(--space-4) var(--space-4);
  max-height: 90vh; overflow-y: auto;
}
.lead-modal-close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: transparent; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--slate); width: 36px; height: 36px; border-radius: 50%;
}
.lead-modal-close:hover { background: var(--off-white); color: var(--onyx); }
.lead-modal h3 { font-size: 1.35rem; margin: 0.2rem 0 0; }
.lead-form, .lead-verify-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: var(--space-3); }
.lead-form label, .lead-verify-form label {
  display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--graphite);
}
/* Required-field marker (Round 13) — Name/Email/Phone are all mandatory */
.lead-required { color: var(--deep-red); }
.lead-form input, .lead-verify-form input {
  font: inherit; padding: 0.75rem 0.9rem; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; color: var(--onyx); width: 100%;
}
.lead-form input:focus, .lead-verify-form input:focus { outline: none; border-color: var(--deep-red); }
.lead-verify-form input[name="code"] { letter-spacing: 0.4em; text-align: center; font-size: 1.3rem; font-weight: 700; }
.lead-form-error {
  color: #B3261E; background: #FDECEA; border: 1px solid #F3C6C2; border-radius: var(--radius);
  padding: 0.6rem 0.8rem; font-size: 0.85rem; font-weight: 600; margin: 0;
}
.lead-form-note { font-size: 0.78rem; color: var(--slate); margin: 0; text-align: center; }
.lead-modal-links { text-align: center; font-size: 0.85rem; }
.lead-modal-links button {
  background: none; border: none; color: var(--deep-red); font-weight: 600; padding: 0; font-size: 0.85rem;
}
.lead-modal-links button:hover:not(:disabled) { text-decoration: underline; }
.lead-modal-links button:disabled { color: var(--silver); cursor: default; }
.lead-modal-links a { color: var(--deep-red); font-weight: 600; }
.lead-modal-links a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .lead-modal { padding: var(--space-4) var(--space-3) var(--space-3); }
}