/* =============================================================================
   Shared case-study styles. Used by the web (long-form) layout.
   Letter and Wide layouts include this AND their own override sheet.
   Tokens come from ../../variables.css; chrome (nav, footer, .pushable button)
   comes from ../../main.css.
   ============================================================================= */

.cs *,
.cs *::before,
.cs *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Layout shells ── */
.cs-wrap         { max-width: var(--page-max-width); margin: 0 auto; padding: 0 40px; }
.cs-wrap--narrow { max-width: 920px; margin: 0 auto; padding: 0 40px; }

/* ── Shared eyebrow ── */
.cs-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-eyebrow);
  text-transform: uppercase;
  color: var(--color-deep-teal);
  margin: 0 0 18px;
  text-wrap: balance;
}
.cs-eyebrow--mint { color: var(--color-aura-mint); }

/* ── Shared section title ── */
.cs-title {
  font-family: var(--font-bebas-neue);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-midnight-ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.cs-title--mid { font-size: var(--text-section); line-height: var(--leading-section); }

/* ── Shared body ── */
.cs-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--color-dusty-ash);
  margin: 0 0 1.3em;
  text-wrap: pretty;
}
.cs-body:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════
   NAV — force legible colors over the dark hero.
   ═══════════════════════════════════════════════ */
.navigation-logo     { color: var(--color-ceramic-white); }
.navigation-logo-sub { color: var(--color-aura-mint); }
.navigation-link     { color: var(--color-ceramic-white); }
.navigation-actions .button-secondary {
  color: var(--color-ceramic-white);
  border-color: var(--color-ghost-jade);
}
.navigation-container .navigation-logo { flex: 0 0 auto; }
.cs-nav-back { display: inline-flex; align-items: center; gap: 7px; }
.cs-nav-back svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════
   HERO  (dark)
   ═══════════════════════════════════════════════ */
.cs-hero { background: var(--color-midnight-emerald); padding: 48px 0 100px; text-align: center; }
.cs-hero-headline {
  font-family: var(--font-bebas-neue);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ceramic-white);
  max-width: 900px; margin: 0 auto 28px;   /* match homepage .hero-copy cap */
  text-wrap: balance;
}
.cs-hero-headline .hl { color: var(--color-aura-mint); }
.cs-hero-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--color-platinum-ghost);
  max-width: 640px; margin: 0 auto;   /* match homepage .hero-copy p cap */
  text-wrap: balance;
}
.cs-hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Download dropdown — click the button, choose Vertical or Horizontal PDF. */
.cs-download-dd { position: relative; display: inline-block; text-align: left; }
.cs-download-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-body); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-midnight-emerald);
  background: var(--color-aura-mint);
  border: none; cursor: pointer;
  padding: 14px 22px; border-radius: var(--radius-buttons, 10px);
  /* Depth bevel (solid darker-mint edge) + drop shadow, like the pushable. */
  box-shadow: 0 4px 0 #2c8f79, 0 12px 22px -8px rgba(13, 13, 13, 0.45);
  transition: background 160ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.cs-download-btn:hover {
  background: #b6ffe6;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #2c8f79, 0 16px 26px -8px rgba(13, 13, 13, 0.5);
}
.cs-download-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #2c8f79, 0 6px 14px -8px rgba(13, 13, 13, 0.4);
}
.cs-download-ico { width: 17px; height: 17px; flex-shrink: 0; }
.cs-download-chevron { width: 15px; height: 15px; flex-shrink: 0; transition: transform 180ms ease; }
.cs-download-dd.is-open .cs-download-chevron { transform: rotate(180deg); }

.cs-download-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 100%;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-midnight-ink, #0D0D0D);
  border: 1px solid var(--color-ghost-jade);
  border-radius: var(--radius-buttons, 10px);
  padding: 6px;
  z-index: 30;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
}
.cs-download-menu[hidden] { display: none; }
.cs-download-item {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-aura-mint);
  text-decoration: none; white-space: nowrap;
  padding: 11px 16px; border-radius: 7px;
  transition: background 140ms ease, color 140ms ease;
}
.cs-download-item:hover,
.cs-download-item:focus-visible { background: var(--color-aura-mint); color: var(--color-midnight-emerald); outline: none; }

/* ═══════════════════════════════════════════════
   STATS BAND  (solid brand teal)
   ═══════════════════════════════════════════════ */
.cs-stats {
  background: var(--color-ghost-jade);
  padding: 72px 0;
}
.cs-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-stat { text-align: center; padding: 8px 28px; }
.cs-stat + .cs-stat { border-left: 1px solid rgba(255,255,255,0.12); }
.cs-stat-num {
  display: block;
  font-family: var(--font-bebas-neue);
  font-size: var(--text-stat); line-height: 1; letter-spacing: 0.02em;
  color: var(--color-ceramic-white); margin: 0 0 18px;
}
.cs-stat-rule { width: 34px; height: 2px; background: var(--color-aura-mint); margin: 0 auto 16px; border-radius: 2px; }
.cs-stat-label {
  font-family: var(--font-body);
  font-size: var(--text-body); font-weight: 600; line-height: 1.4;
  color: var(--color-ceramic-white); margin: 0 0 14px;
  text-wrap: balance;   /* stat sub-text: even lines, no lone last word */
}
.cs-stat-note {
  font-family: var(--font-body);
  font-size: var(--text-body-sm); line-height: 1.5;
  color: rgba(255,255,255,0.62); margin: 0;
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════
   LIGHT BODY SECTIONS
   ═══════════════════════════════════════════════ */
.cs-light { background: var(--color-paper-white); }
.cs-section { padding: 96px 0; }

.cs-rule { height: 1px; background: rgba(13,13,13,0.08); max-width: var(--page-max-width); margin: 0 auto; }

/* ── Campaign (two column) ── */
.cs-campaign-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.cs-campaign-visual img { width: 100%; height: auto; display: block; }
.cs-partners {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin: 36px 0 0; padding-top: 30px; border-top: 1px solid rgba(13,13,13,0.08);
}
.cs-partners img { height: 13px; width: auto; display: block; opacity: 0.92; }
.cs-partners img.is-reddit { height: 19px; }
.cs-partners img.is-tall   { height: 32px; }

/* ── Results lede ── */
.cs-lede {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6;
  color: var(--color-midnight-ink); margin: 0 0 1.3em;
  text-wrap: pretty;
}

/* ── Funnel ── */
.cs-funnel { margin: 52px 0 0; }
.cs-funnel-intro {
  font-family: var(--font-body);
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-deep-teal); margin: 0 0 30px;
  text-wrap: balance;
}
.cs-funnel-step { display: flex; align-items: baseline; gap: 22px; margin: 0 0 4px; }
.cs-funnel-num {
  font-family: var(--font-bebas-neue);
  font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--color-deep-teal); min-width: 5ch;
}
.cs-funnel-desc {
  font-family: var(--font-body);
  font-size: var(--text-body); line-height: 1.45; color: var(--color-dusty-ash);
  text-wrap: balance;
}
.cs-funnel-arrow {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  color: var(--color-deep-teal); opacity: 0.4; margin: 4px 0;
}
.cs-funnel-step--sub   { padding-left: calc(5ch + 22px); }
.cs-funnel-step--sub  .cs-funnel-num { font-size: clamp(1.7rem, 2.4vw, 2.2rem); color: #5cae9f; }
.cs-funnel-arrow--sub  { padding-left: calc(5ch + 22px); }
.cs-funnel-step--sub2  { padding-left: calc((5ch + 22px) * 2); }
.cs-funnel-step--sub2 .cs-funnel-num { font-size: clamp(1.5rem, 2vw, 1.9rem); color: #84c4b8; }
.cs-funnel-arrow--sub2 { padding-left: calc((5ch + 22px) * 2); }

/* ── Under the hood: dark stat band inside light section ── */
.cs-hood-band {
  margin: 44px 0 0;
  background: var(--color-midnight-ink);
  border-radius: var(--radius-cards);
  padding: 56px 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.cs-hood-cell { text-align: center; padding: 4px 24px; }
.cs-hood-cell + .cs-hood-cell { border-left: 1px solid rgba(255,255,255,0.1); }
.cs-hood-num {
  display: block;
  font-family: var(--font-bebas-neue);
  font-size: var(--text-stat); line-height: 1; letter-spacing: 0.02em;
  color: var(--color-ceramic-white); margin: 0 0 12px;
}
.cs-hood-label {
  font-family: var(--font-body);
  font-size: var(--text-meta); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-aura-mint);
}

/* ═══════════════════════════════════════════════
   CTA  (light, centered)
   ═══════════════════════════════════════════════ */
.cs-cta { background: var(--color-fossil); padding: 104px 0; text-align: center; }
.cs-cta-headline {
  font-family: var(--font-bebas-neue);
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ash-text); margin: 0 0 18px;
  text-wrap: balance;
}
.cs-cta-headline--two { color: var(--color-deep-teal); margin: 0 0 32px; }
.cs-cta-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg); line-height: var(--leading-body);
  color: var(--color-dusty-ash); max-width: 640px; margin: 0 auto 40px;   /* match homepage hero body cap */
  text-wrap: pretty;
}
.cs-cta .pushable { display: inline-block; text-decoration: none; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 880px) {
  .cs-campaign-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-campaign-visual { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .cs-wrap, .cs-wrap--narrow { padding: 0 24px; }
  .cs-section { padding: 72px 0; }
  .cs-stats { padding: 56px 0; }
  .cs-stats-grid { grid-template-columns: 1fr; gap: 0; }
  .cs-stat { padding: 30px 20px; }
  .cs-stat + .cs-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .cs-hood-band { grid-template-columns: 1fr; gap: 0; padding: 36px 24px; }
  .cs-hood-cell { padding: 26px 16px; }
  .cs-hood-cell + .cs-hood-cell { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
  .cs-cta { padding: 80px 0; }
  .cs-hero { padding: 64px 0 80px; }
}