/* 55 Knots shared style layer.
   Loaded after each page's own styles. Holds the type scale, the uppercase
   Barlow headings, the rounded card shapes and the crimson accent panels. */

:root {
  /* Type scale: every font size on the site is one of these eight steps */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: clamp(26px, 3vw, 34px);
  --fs-3xl: clamp(32px, 4.4vw, 52px);
  --fs-4xl: clamp(40px, 6.6vw, 84px);

  /* Corner radii */
  --r-sm: 8px;
  --r-md: 20px;
  --r-lg: 28px;
}

/* ---------- Headings: Barlow, uppercase, heavy ---------- */
h1, h2, h3, h4,
p.statement, .summary p, .price-statements p, .sc-question, .plan-name, .read-list li,
.plan-quiet-name, .story-num, .belief-num, .step-num, .included-num, .inside-item-num {
  font-family: 'Barlow', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.015em !important;
}
h1 { line-height: 0.96 !important; }
h2 { line-height: 1 !important; }
h3, h4 { line-height: 1.08 !important; }
h1 *, h2 *, h3 *, h4 * { font-weight: inherit !important; font-style: normal !important; }

/* ---------- Small labels: one size, uppercase, tracked ---------- */
.marker {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #fff !important;
}
.plan-tag, .plan-featured-tag, .stat-label, .hero-stat span, .hero-meta,
.brands-label, .trusted-label, .eyebrow, .tier, .tag, .story-tag,
.sc-question-num, .sc-step-text, .footer-meta, .mobile-menu-section-title,
.part .n, .card .n, .step .n, .offer-card h4, .cmp tr.group th {
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  font-style: normal !important;
  font-weight: 600;
}

/* ---------- Buttons ---------- */
nav .nav-btn, .cta-primary, .hero-cta-primary, .btn, .plan-cta, .mobile-menu-book,
.price-cta, .final-cta-btn, .submit-btn, .capture-btn, .sc-next, .sc-gate button,
.cta-secondary, .hero-cta-secondary, .spy a {
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.cta-secondary, .hero-cta-secondary {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  padding: 16px 26px !important;
  color: #fff !important;
  background: transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cta-secondary:hover, .hero-cta-secondary:hover { background: #fff; color: #000 !important; border-color: #fff !important; }

/* ---------- Stat tiles: dark tiles with one crimson lead tile ---------- */
.hero-stats { gap: 12px !important; }
.hero-stat {
  background: var(--bg-card, #1E1E1E);
  border-radius: var(--r-md);
  padding: 20px 22px;
  text-align: left !important;
  min-width: 150px;
}
.hero-stat strong { font-weight: 800 !important; }
.hero-stat:first-child, .stat-cell:first-child { background: var(--accent, #D9044D); }
.hero-stat:first-child span, .stat-cell:first-child .stat-label { color: #fff !important; }
.stat-cell:first-child .accent, .hero-stat:first-child .accent { color: #000 !important; }
.stat-grid { border: none !important; gap: 12px !important; }
.stat-cell {
  background: var(--bg-card, #1E1E1E);
  border: none !important;
  border-radius: var(--r-md);
  padding: 28px 24px !important;
}
.stat-num { font-weight: 800 !important; }

/* ---------- Crimson panels ---------- */
.cta-block {
  background: var(--accent, #D9044D) !important;
  border: none !important;
  border-radius: var(--r-lg);
  width: calc(100% - 80px);
  max-width: 1320px !important;
  margin: 72px auto !important;
  padding: 88px 40px !important;
}
.cta-block p { color: #fff !important; }
.cta-block .accent { color: #000 !important; }
.cta-block .marker { border-color: rgba(255, 255, 255, 0.55); }
.cta-block .cta-primary { background: #000 !important; color: #fff !important; }
.cta-block .cta-primary:hover { background: #1E1E1E !important; box-shadow: none !important; }
.cta-block .cta-secondary { border-color: rgba(255, 255, 255, 0.65) !important; }

.plan-card.featured, .plan-featured {
  background: var(--accent, #D9044D) !important;
  border-color: var(--accent, #D9044D) !important;
}
.plan-card.featured *, .plan-featured * { color: #fff !important; border-color: rgba(255, 255, 255, 0.28) !important; }
.plan-card.featured .accent, .plan-featured .accent { color: #000 !important; }
.plan-card.featured .plan-cta, .plan-featured a[class*="cta"], .plan-featured button {
  background: #000 !important; border-color: #000 !important; color: #fff !important;
}

/* ---------- No italics outside quotes ---------- */
.contact-link-value, .footer-meta, .logo-moment-caption, .mobile-menu-eyebrow, .newsletter-meta,
.plan-featured-price .from, .reel-meta .name, .sc-mid-eyebrow, .sc-score-label, .ben-hero-sub,
.price-label, .capture-label, .capture-thanks-eyebrow, .cal-modal-title, .note {
  font-style: normal !important;
}
.reel-meta .name, .contact-link-value { font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }

/* ---------- Homepage plan tiles ---------- */
.plans-quiet { border: none !important; gap: 12px !important; margin-top: 12px; }
.plan-quiet {
  background: var(--bg-card, #1E1E1E);
  border: none !important;
  border-radius: var(--r-md);
}
.plan-quiet:hover { background: #262626 !important; }
.plan-quiet-price, .plan-price, .plan-featured-price { font-weight: 800 !important; }
.plan-featured { border-radius: var(--r-lg) !important; }
.plan-featured-tag {
  display: inline-block;
  background: #000 !important;
  border-radius: 999px;
  padding: 6px 14px !important;
}

/* ---------- Cards ---------- */
.plan-card, .now-card, .sc-card, .price-card, .capture-card, .aside, .thanks,
.card, .part, .proof-card, .offer-card, .pull-quote, section.content blockquote {
  border-radius: var(--r-md) !important;
}
.proof-card img { border-radius: 0 !important; }

@media (max-width: 768px) {
  .cta-block { width: calc(100% - 32px); margin: 48px auto !important; padding: 56px 22px !important; }
  .hero-stat { min-width: 0; flex: 1; padding: 16px; }
}