/* ============================================================
   TAKE CARE OF MY GPT — MASTER STYLESHEET
   tcomaisecurity.com — /css/styles.css
   ============================================================
   Brand Colors:
     Primary Teal   : #0F5C7D   Dark Teal      : #0A4560
     Accent Green   : #00D084   Deep Navy      : #0A1628
     Mid Navy       : #0D2240   Light Gray     : #F4F6F8
     Mid Gray       : #8A9BB0   Text Dark      : #1A2B3C
     White          : #FFFFFF
   Typography: Montserrat (headings), Open Sans (body)
   Last Consolidated: Session 013 — April 26, 2026
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --teal:        #0F5C7D;
  --teal-dark:   #0A4560;
  --teal-light:  #1A7FA8;
  --green:       #00D084;
  --green-dark:  #00A86B;
  --navy:        #0A1628;
  --navy-mid:    #0D2240;
  --navy-light:  #132D50;
  --gray-light:  #F4F6F8;
  --gray-mid:    #8A9BB0;
  --gray-border: #D1DCE8;
  --text-dark:   #1A2B3C;
  --text-body:   #3D5166;
  --white:       #FFFFFF;
  --gold:        #F5A623;

  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 2px 8px rgba(10,22,40,0.08);
  --shadow-md:  0 6px 24px rgba(10,22,40,0.12);
  --shadow-lg:  0 16px 48px rgba(10,22,40,0.18);
  --shadow-glow: 0 0 32px rgba(0,208,132,0.25);

  --transition: 0.25s ease;
  --max-width:  1200px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1rem; color: var(--text-body); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--text-dark); }

/* ── Layout Utilities ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }
.section--sm { padding: 48px 0; }
.section--lg { padding: 100px 0; }

.section--dark {
  background: var(--navy);
  color: var(--white);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(255,255,255,0.82); }

.section--teal {
  background: var(--teal);
  color: var(--white);
}
.section--teal h1,
.section--teal h2,
.section--teal h3 { color: var(--white); }
.section--teal p { color: rgba(255,255,255,0.88); }

.section--gray { background: var(--gray-light); }

.text-center { text-align: center; }
.text-white { color: var(--white) !important; }
.text-teal  { color: var(--teal) !important; }
.text-green { color: var(--green) !important; }
.text-gold  { color: var(--gold) !important; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--green);
  color: var(--navy);
  border-color: var(--green);
}
.btn--primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn--secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn--secondary:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn--outline:hover {
  background: var(--teal);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--lg {
  padding: 18px 44px;
  font-size: 1.1rem;
  border-radius: var(--radius-lg);
}

.btn--sm {
  padding: 10px 22px;
  font-size: 0.9rem;
}

/* ============================================================
   styles.css ADDITION — Session 019 — April 27, 2026
   ============================================================
   INSTRUCTIONS:
   Find the button modifier section in styles.css (near .btn--outline,
   .btn--full, etc.) and paste the two rules below right after the
   last .btn--* modifier block.
   ============================================================ */

/* Block-level button: full width, centered text */
.btn--block {
  display: block;
  text-align: center;
  width: 100%;
}

/* Sidebar context: add top spacing when .btn--block follows a list */
.sidebar-widget .btn--block {
  margin-top: var(--space-4);
}

/* Full-width button (used by the pricing card CTAs).
   Must come AFTER .btn so it overrides the base inline-flex + nowrap.
   Fills its container and WRAPS to two lines in a narrow column instead of
   overflowing the card - required now that .pricing-grid uses minmax(0,1fr),
   which lets columns shrink below their content width. */
.btn--full {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: normal;
  padding-left: 18px;
  padding-right: 18px;
}

/* ── Pre-headline / Overline ── */
.overline {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

.overline--white { color: rgba(255,255,255,0.7); }

/* ── Section Headers ── */
.section-header { margin-bottom: 48px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { font-size: 1.1rem; max-width: 680px; }
.section-header.text-center p { margin: 0 auto; }

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card--dark {
  background: var(--navy-mid);
  border-color: rgba(255,255,255,0.08);
  color: var(--white);
}
.card--dark h3, .card--dark h4 { color: var(--white); }
.card--dark p { color: rgba(255,255,255,0.78); }

.card--teal {
  background: var(--teal);
  border-color: var(--teal-dark);
  color: var(--white);
}
.card--teal h3, .card--teal h4 { color: var(--white); }
.card--teal p { color: rgba(255,255,255,0.88); }

/* ── Grid Layouts ── */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Callout Box ── */
.callout {
  background: var(--gray-light);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.callout--green { border-left-color: var(--green); }
.callout--gold  { border-left-color: var(--gold); }
.callout--dark  { background: var(--navy-mid); border-left-color: var(--green); }
.callout--dark p { color: rgba(255,255,255,0.88); }

.callout-box {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin: 28px 0;
  border: 1px solid rgba(0,208,132,0.3);
}
.callout-box p { color: rgba(255,255,255,0.88); }

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge--green  { background: var(--green); color: var(--navy); }
.badge--teal   { background: var(--teal); color: var(--white); }
.badge--gold   { background: var(--gold); color: var(--navy); }
.badge--navy   { background: var(--navy); color: var(--white); }
.badge--outline { background: transparent; border: 2px solid var(--green); color: var(--green); }

/* ── Top Navigation Bar (Multi-page site) ── */
.site-nav {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(10,22,40,0.25);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  max-width: 1600px;
  margin: 0 auto;
  height: 72px;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__logo-placeholder {
  width: 48px;
  height: 48px;
  background: var(--teal);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--white);
  flex-shrink: 0;
}

.site-nav__logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--white);
  line-height: 1.2;
  white-space: nowrap;
}

.site-nav__logo-text span {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav__links a {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__links a:hover,
.site-nav__links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.site-nav__contact {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Home dropdown (Round 5, item 4) ── */
.site-nav__dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__caret-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px 6px;
  margin-left: -4px;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-sm);
}
.site-nav__caret-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }

.site-nav__caret {
  width: 10px;
  height: 7px;
  transition: transform var(--transition);
}
.site-nav__dropdown.open .site-nav__caret,
.site-nav__dropdown:focus-within .site-nav__caret,
.site-nav__dropdown:hover .site-nav__caret {
  transform: rotate(180deg);
}

.site-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  /* Flush against the trigger's bottom edge - no margin-top. A gap here
     is a hover dead zone: the pointer crosses empty space where nothing
     in .site-nav__dropdown is hovered, :hover clears, display:none
     reasserts, and the panel isn't there when the pointer arrives.
     Breathing room lives inside the panel as padding-top instead
     (Round 6, item 1). */
  padding: 10px 6px 6px;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}
.site-nav__submenu a { display: block; }

.site-nav__dropdown.open .site-nav__submenu,
.site-nav__dropdown:hover .site-nav__submenu,
.site-nav__dropdown:focus-within .site-nav__submenu {
  display: flex;
}

/* ── Connect Free two-line CTA button ── */
.site-nav__cta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding: 6px 18px;
  gap: 0;
}
.site-nav__cta-line1 { font-size: 0.82rem; font-weight: 700; }
.site-nav__cta-line2 { font-size: 0.64rem; font-weight: 500; color: rgba(11,22,40,0.65); }

/* ── Sales Page Sticky Bar ── */
.sales-topbar {
  background: var(--navy);
  padding: 12px 24px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(10,22,40,0.3);
}

.sales-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  flex-wrap: wrap;
}

.sales-topbar__brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
}

.sales-topbar__cta {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

/* ── Hero Section ── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, var(--teal-dark) 100%);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,208,132,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero__pre {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
  display: block;
}

.hero__headline {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

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

.hero__subheadline {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin-bottom: 36px;
  line-height: 1.6;
}

.hero__cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Hero shield image — center on all screen sizes */
.hero-shield-img {
    display: block;
    margin: 0 auto var(--space-8);
}

.hero__trust-item .dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Problem / Demo Section ── */
.demo-prompt {
  background: var(--navy);
  border: 1px solid rgba(0,208,132,0.35);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin: 28px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: var(--green);
  line-height: 1.6;
  position: relative;
}

.demo-prompt::before {
  content: '> Try this now';
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,208,132,0.6);
  margin-bottom: 12px;
}

.video-placeholder {
  background: var(--navy-mid);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 60px 32px;
  text-align: center;
  margin: 28px 0;
  color: rgba(255,255,255,0.5);
}

.video-placeholder__icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.video-placeholder p {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Steps / How It Works ── */
.steps { display: flex; flex-direction: column; gap: 32px; }

.step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.step__number {
  width: 52px;
  height: 52px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--white);
  flex-shrink: 0;
}

.step__content h3 { margin-bottom: 8px; }

/* ── Feature Grid ── */
.feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.feature-item:hover { background: var(--gray-light); }

.feature-item__icon {
  width: 44px;
  height: 44px;
  background: rgba(15,92,125,0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.feature-item__text h4 { margin-bottom: 4px; font-size: 1rem; }
.feature-item__text p  { font-size: 0.9rem; margin: 0; }

/* ── Before / After Table ── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.comparison-table th {
  padding: 16px 24px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.comparison-table th:first-child {
  background: var(--navy-mid);
  color: rgba(255,255,255,0.7);
  width: 50%;
}

.comparison-table th:last-child {
  background: var(--teal);
  color: var(--white);
  width: 50%;
}

.comparison-table td {
  padding: 14px 24px;
  font-size: 0.95rem;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-border);
}

.comparison-table tr:last-child td { border-bottom: none; }

.comparison-table td:first-child {
  background: #F9FBFD;
  color: var(--text-body);
}

.comparison-table td:last-child {
  background: rgba(15,92,125,0.05);
  color: var(--text-dark);
  font-weight: 500;
}

.comparison-table td:last-child::before {
  content: '✓ ';
  color: var(--green);
  font-weight: 700;
}

/* ── Avatar / Who It's For ── */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.avatar-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: all var(--transition);
  border-left: 4px solid var(--teal);
}
.avatar-card:hover {
  border-left-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.avatar-card h4 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--teal);
}

.avatar-card p { font-size: 0.9rem; margin: 0; }

/* ── Dale's Story ── */
.story-section {
  background: var(--navy);
  color: var(--white);
}

.story-content {
  max-width: 780px;
  margin: 0 auto;
}

.story-content p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.2rem;
}

.story-signature {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green);
  font-size: 1rem;
}

/* ── Social Proof Banner ── */
.social-proof-banner {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy) 100%);
  padding: 60px 24px;
  text-align: center;
}

.social-proof-banner__stat {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--green);
  line-height: 1;
  margin-bottom: 12px;
}

.social-proof-banner__label {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.social-proof-banner__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  max-width: 600px;
  margin: 0 auto;
}

/* ── Testimonials ── */
.testimonials-section { display: none; } /* Hidden until real testimonials collected */

/* ── Pricing ── */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

.pricing-toggle__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--transition);
}

.pricing-toggle__label.active { color: var(--teal); }

.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-border);
  border-radius: 100px;
  transition: background var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  top: 4px;
  left: 4px;
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider { background: var(--teal); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }

.pricing-annual-tag {
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* Three tiers display in source order: Starter Guardian, Creator Guardian,
   Subscriber Automation. Subscription Empire is the static callout box
   below the grid, not a grid card (Round 5, item 1). */

/* Embedded GHL order form (#order) */
.order-embed {
  max-width: 920px;
  margin: 0 auto;
}
.order-embed iframe { width: 100%; }
.section-header__sub {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--text-muted, #64748b);
  font-size: 1rem;
  line-height: 1.6;
}

.pricing-card {
  background: var(--white);
  border: 2px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  transition: all var(--transition);
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pricing-card--featured {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15,92,125,0.12), var(--shadow-lg);
}

.pricing-card--anchor {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.pricing-card--anchor h3,
.pricing-card--anchor h4,
.pricing-card--anchor .pricing-card__tagline,
.pricing-card--anchor .pricing-card__label { color: var(--white); }
.pricing-card--anchor p { color: rgba(255,255,255,0.78); }
.pricing-card--anchor .pricing-card__price { color: var(--green); }
.pricing-card--anchor .pricing-card__feature { color: rgba(255,255,255,0.85); }
.pricing-card--anchor .pricing-card__feature--no { color: rgba(255,255,255,0.35); }

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pricing-card__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

/* Plan name. The markup is <h2 class="pricing-card__name">, so the old
   ".pricing-card h3" selector never matched and the names inherited the global
   h2 size (clamp up to 2.6rem) - which is why the long plan names towered.
   Class beats element, so this wins over the global h2 without !important.
   The clamp lets long names shrink in narrow columns instead of wrapping 4 deep. */
.pricing-card h3,
.pricing-card__name {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  margin-bottom: 4px;
}

.pricing-card__tagline {
  font-size: 0.9rem;
  color: var(--text-body);
  font-style: italic;
  margin-bottom: 8px;
}

.pricing-card__job {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 20px;
}

.pricing-card__setup-note {
  font-size: 0.82rem;
  color: var(--gray-mid);
  font-style: italic;
  margin-top: -8px;
  margin-bottom: 0;
}

/* ── Connect Free Form ── */
.connect-free-form {
  max-width: 380px;
  margin: 32px auto 0;
  text-align: left;
}

/* ── Quote Card (What Creators Say) ── */
.quote-card blockquote {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.6;
}
.quote-card cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--teal);
}

/* ── Subscription Empire callout (Round 5, item 1) ── */
.empire-callout { margin: 40px 0; }
.empire-callout h2 { color: var(--white); margin-bottom: 4px; }
.empire-callout__subhead {
  color: var(--green);
  font-weight: 600;
  margin-bottom: 16px;
}
.empire-callout__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.empire-callout__or { color: rgba(255,255,255,0.75); }
.empire-callout__or a { color: var(--white); text-decoration: underline; }
.empire-callout__or a:hover { color: var(--green); }

/* ── Pricing Blocks A/B (reframe Part 4) ── */
.pricing-block {
  max-width: 780px;
  margin: 56px auto 0;
}
.pricing-block h2 { margin-bottom: 20px; }
.pricing-block p { margin-bottom: 16px; line-height: 1.7; }
.pricing-block p:last-child { margin-bottom: 0; }

.pricing-card__price {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.8rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

/* Subscription Empire only - "Starting at" price prefix (Round 4, item 6) */
.pricing-card__price-prefix {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-mid);
  margin-bottom: 2px;
}

.pricing-card__price sup {
  font-size: 1.2rem;
  vertical-align: super;
  font-weight: 700;
}

.pricing-card__price-period {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-mid);
  margin-bottom: 20px;
}

.pricing-card__annual-note {
  font-size: 0.82rem;
  color: var(--green-dark);
  font-weight: 600;
  margin-bottom: 20px;
  display: none;
}

.pricing-card__annual-note.visible { display: block; }

.pricing-card__divider {
  height: 1px;
  background: var(--gray-border);
  margin: 20px 0;
}
.pricing-card--anchor .pricing-card__divider { background: rgba(255,255,255,0.12); }

.pricing-card__features { margin-bottom: 28px; }

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-body);
  padding: 5px 0;
  line-height: 1.4;
  text-wrap: pretty;
}

.pricing-card__feature::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-card__feature--no::before { content: '✗'; color: var(--gray-mid); }

.pricing-card__feature--section {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-mid);
  padding-top: 12px;
  padding-bottom: 4px;
}
.pricing-card__feature--section::before { content: none; }

/* WP-6.2 MICRO, item 3: a fetched card_line ending in ':' is a lead-in
   to the bullets under it ("Everything in Starter, plus:"), not itself
   an included feature - no checkmark, reads as introductory text. */
.pricing-card__feature--lead-in {
  font-style: italic;
  color: var(--text-body);
}
.pricing-card__feature--lead-in::before { content: none; }

/* ── 3-Day Classes Callout ── */
.classes-callout {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--white);
  margin: 48px 0;
}

.classes-callout h3 { color: var(--white); margin-bottom: 8px; }
.classes-callout p  { color: rgba(255,255,255,0.85); margin-bottom: 20px; }

.classes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.classes-table th {
  text-align: left;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.classes-table td {
  padding: 12px 16px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.classes-table td:last-child { color: var(--green); font-weight: 600; }

/* ── Guarantee ── */
.guarantee-section {
  background: var(--gray-light);
}

.guarantee-block {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: var(--radius-xl);
  padding: 48px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.guarantee-block::before {
  content: '30';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 56px;
  text-align: center;
}

.guarantee-block__name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
  margin-top: 16px;
}

.guarantee-block h2 { margin-bottom: 20px; }

.guarantee-block__quote {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-body);
  font-style: italic;
  margin-bottom: 20px;
  text-align: left;
}

.guarantee-block__sig {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--teal);
  font-size: 0.95rem;
}

/* ── FAQ ── */
.faq-section { background: var(--white); }

.faq-group { margin-bottom: 40px; scroll-margin-top: 90px; }

.faq-group__title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--teal);
  display: inline-block;
}

.faq-item {
  border-bottom: 1px solid var(--gray-border);
}

.faq-item__question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 18px 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color var(--transition);
}

.faq-item__question:hover { color: var(--teal); }

.faq-item__question.open { color: var(--teal); }

.faq-item__icon {
  width: 24px;
  height: 24px;
  background: var(--gray-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: all var(--transition);
  color: var(--teal);
}

.faq-item__question.open .faq-item__icon {
  background: var(--teal);
  color: var(--white);
  transform: rotate(45deg);
}

.faq-item__answer {
  display: none;
  padding: 0 0 18px 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-body);
}

.faq-item__answer.open { display: block; }

/* ── Founders Badge ── */
.founders-badge {
  background: var(--navy);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 32px auto;
}

.founders-badge__icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.founders-badge__text h4 {
  color: var(--gold);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.founders-badge__text p {
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  margin: 0;
}

/* ── Final CTA ── */
.final-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  padding: 100px 0;
  text-align: center;
}

.final-cta h2 { color: var(--white); margin-bottom: 20px; }
.final-cta p  { color: rgba(255,255,255,0.82); max-width: 640px; margin: 0 auto 32px; font-size: 1.05rem; }

/* ── Footer ── */
.site-footer {
  background: var(--navy);
  padding: 48px 0 24px;
  color: rgba(255,255,255,0.6);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.site-footer__brand h4 {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.site-footer__brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

.site-footer__col h5 {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.site-footer__col a {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
  transition: color var(--transition);
}
.site-footer__col a:hover { color: var(--green); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
}

.site-footer__bottom a { color: rgba(255,255,255,0.5); }
.site-footer__bottom a:hover { color: var(--green); }

/* ── Contact Form ── */
.contact-form {
  max-width: 680px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--gray-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal);
}

.form-group textarea { min-height: 140px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Page Hero (inner pages) ── */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  padding: 72px 0 60px;
  text-align: center;
}

.page-hero h1 { color: var(--white); margin-bottom: 12px; }
.page-hero p  { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* ── V4 Callout Banner ── */
.v4-banner {
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%);
  padding: 16px 24px;
  text-align: center;
  color: var(--white);
}

.v4-banner p {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.v4-banner strong { color: var(--green); }

/* ── Scroll-to-top ── */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  z-index: 999;
}

.scroll-top.visible { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--teal-dark); transform: translateY(-2px); }

/* ── Hamburger / Mobile Nav ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; margin: 0 auto; }
  .pricing-grid .pricing-card { order: unset !important; }
}
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-grid .pricing-card { order: unset !important; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section--lg { padding: 72px 0; }

  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }

  .site-nav__links { display: none; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--navy); padding: 16px 24px; gap: 4px; }
  .site-nav__links.open { display: flex; }
  .site-nav { position: relative; }
  .site-nav__inner { flex-wrap: wrap; }

  .nav-toggle { display: flex; }

  /* Home dropdown becomes an inline expandable group, not a floating menu */
  .site-nav__dropdown { flex-wrap: wrap; }
  .site-nav__submenu {
    position: static;
    width: 100%;
    margin-top: 4px;
    margin-left: 12px;
    box-shadow: none;
    border-color: rgba(255,255,255,0.08);
  }
  .site-nav__dropdown:hover .site-nav__submenu { display: none; }
  .site-nav__dropdown.open .site-nav__submenu { display: flex; }

  .hero { padding: 72px 0 56px; }

  .comparison-table { font-size: 0.85rem; }
  .comparison-table th, .comparison-table td { padding: 10px 14px; }

  .guarantee-block { padding: 36px 24px; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom { flex-direction: column; text-align: center; }

  .form-row { grid-template-columns: 1fr; }

  .hero__cta-group { flex-direction: column; align-items: flex-start; }

  .sales-topbar__inner { flex-direction: column; gap: 8px; }

  .classes-callout { padding: 28px 20px; }

  .founders-badge { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .btn--lg { padding: 14px 28px; font-size: 1rem; }
  .hero__headline { font-size: 2rem; }
  .pricing-card { padding: 28px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE SITE — Additional Component Styles
   Appended for: index, features, pricing, faq, about, contact
═══════════════════════════════════════════════════════════════ */

/* ── Nav toggle open state ── */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Dot (trust bar) ── */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  display: inline-block;
}

/* ── Stats Bar (Home page) ── */
.stats-bar {
  background: var(--teal);
  padding: 32px 0;
}
.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item__number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-item__label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
@media (max-width: 768px) { .stats-bar__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-bar__inner { grid-template-columns: 1fr; } }

/* ── Shield graphic (Home hero) ── */
/* Hero shield image — replaces .shield-graphic div */
.hero-shield-img {
    display: block;
    margin: 0 auto 20px;
    max-width: 200px;
    width: 100%;
}
@keyframes pulse-shield {
  0%, 100% { box-shadow: 0 0 40px rgba(0,208,132,0.2), var(--shadow-lg); }
  50%       { box-shadow: 0 0 80px rgba(0,208,132,0.45), var(--shadow-lg); }
}

/* ── Hero centered variant (Home) ── */
.hero--home { text-align: center; padding: 20px 0 80px; }
.hero--home .hero__subheadline { margin-left: auto; margin-right: auto; }
.hero--home .hero__cta-group   { justify-content: center; }
.hero--home .hero__trust       { justify-content: center; }

/* ── Feature cards (Features page) ── */
.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: all var(--transition);
  border-top: 4px solid var(--teal);
}
.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-top-color: var(--green);
}
.feature-card__icon { font-size: 2rem; margin-bottom: 14px; }
.feature-card h3    { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p     { font-size: 0.88rem; margin: 0; }

/* Tier badges on feature cards */
.tier-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tier-badge--all  { background: rgba(15,92,125,0.1);  color: var(--teal); }
.tier-badge--mid  { background: rgba(0,208,132,0.12); color: var(--green-dark); }
.tier-badge--top  { background: rgba(10,22,40,0.08);  color: var(--navy); }

/* ── FAQ quick-nav (FAQ page) ── */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
}
.faq-nav a {
  display: inline-block;
  padding: 8px 18px;
  background: var(--gray-light);
  border: 1px solid var(--gray-border);
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  transition: all var(--transition);
  text-decoration: none;
}
.faq-nav a:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

/* ── Timeline (About page) ── */
.timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 44px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--teal), var(--green));
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  margin-bottom: 36px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -36px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--teal);
}
.timeline-item__year {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.timeline-item h4 { font-size: 1rem; margin-bottom: 5px; color: var(--text-dark); }
.timeline-item p  { font-size: 0.88rem; margin: 0; color: var(--text-body); }

/* ── Values grid (About page) ── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  border-top: 4px solid var(--teal);
  text-align: center;
  transition: all var(--transition);
}
.value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.value-card__icon { font-size: 2rem; margin-bottom: 12px; }
.value-card h4    { font-size: 0.95rem; margin-bottom: 8px; }
.value-card p     { font-size: 0.85rem; margin: 0; }

/* ── Contact layout (Contact page) ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-info-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  color: var(--white);
}
.contact-info-card h3 { color: var(--white); margin-bottom: 24px; font-size: 1.2rem; }

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.contact-info-item__icon  { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.contact-info-item__label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-light);
  margin-bottom: 3px;
}
.contact-info-item a {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color var(--transition);
}
.contact-info-item a:hover { color: var(--green); }
.contact-info-item p { color: rgba(255,255,255,0.55); font-size: 0.8rem; margin: 3px 0 0; }

.contact-support-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-support-note h4 { color: var(--green); font-size: 0.85rem; margin-bottom: 12px; }

.support-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
}
.support-tier:last-child { border-bottom: none; }
.support-tier__name { color: rgba(255,255,255,0.7); }
.support-tier__time { color: var(--green); font-weight: 700; font-family: var(--font-heading); }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}
.contact-form-card h3 { margin-bottom: 24px; font-size: 1.25rem; }

.form-submit { margin-top: 8px; }
.form-note   { font-size: 0.78rem; color: var(--gray-mid); margin-top: 10px; }
.form-group label .required { color: #E53E3E; margin-left: 2px; }

.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success__icon { font-size: 3rem; margin-bottom: 16px; }
.form-success h3 { color: var(--teal); margin-bottom: 8px; }

/* ── Pricing comparison table (Pricing page) ── */
.pricing-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.pricing-compare-table thead tr { background: var(--navy); }
.pricing-compare-table thead th {
  padding: 14px 18px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pricing-compare-table thead th:first-child { text-align: left; }
.pricing-compare-table tbody tr:nth-child(odd)  { background: var(--white); }
.pricing-compare-table tbody tr:nth-child(even) { background: var(--gray-light); }
.pricing-compare-table tbody td {
  padding: 11px 18px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--gray-border);
  color: var(--text-body);
  text-align: center;
}
.pricing-compare-table tbody td:first-child { text-align: left; color: var(--text-dark); }

/* ── Accent color utility ── */
.accent { color: var(--green); }

/* ── Print ── */
@media print {
  .site-nav, .sales-topbar, .scroll-top, .final-cta, .stats-bar { display: none; }
  body { color: #000; }
}


/* ── Accessibility & Logo ── */

/* Skip to main content link (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--teal);
    color: var(--white);
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

/* Nav logo image (replaces CSS placeholder div) */
.site-nav__logo-img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

/* Footer brand column — contact info block */
.footer-contact-info {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.footer-contact-info a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--transition);
}
.footer-contact-info a:hover {
    color: var(--green);
}

/* Footer email link — accent green */
.footer-email {
    color: var(--green) !important;
}
.footer-email:hover {
    color: var(--green-dark) !important;
}

/* ── Homepage Additions (index.php) ── */

/* ── Fade-in animation (was in every page's <style> block — now centralised) ── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Margin utilities ── */
.mt-sm  { margin-top: 8px; }
.mt-md  { margin-top: 20px; display: inline-block; }
.mt-lg  { margin-top: 36px; }

/* ── Section CTA (button below a grid) ── */
.section-cta {
  margin-top: 36px;
}

/* ── Grid Modifiers ── */
.grid--narrow-md {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.grid--narrow-lg {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.grid--vcenter  { align-items: center; }
.grid--gap-xl   { gap: 48px; }

/* ── Callout Box — Centered variant (Problem section) ── */
.callout-box--centered {
  max-width: 720px;
  margin: 0 auto;
}
.callout-box__warning {
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-heading);
}
.callout-box__resolve {
  margin: 0;
  color: var(--green);
  font-weight: 600;
}

/* ── How It Works — Step emoji ── */
.step__emoji {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
  text-align: center;
}

/* ── Before / After Comparison ── */
.comparison-card-header {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.comparison-card-header--bad  { color: rgba(255, 255, 255, 0.5); }
.comparison-card-header--good { color: var(--teal); }

.card--comparison-good {
  border: 2px solid var(--teal);
}

.comparison-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.comparison-list__item {
  font-size: 0.9rem;
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}
.comparison-list__item::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.comparison-list__item--bad {
  color: rgba(255, 255, 255, 0.65);
}
.comparison-list__item--bad::before {
  content: '✗';
  color: #E53E3E;
}
.comparison-list__item--good {
  color: var(--text-body);
}
.comparison-list__item--good::before {
  content: '✓';
  color: var(--green);
}

/* ── Social Proof Banner — CTA block ── */
.social-proof-banner__cta {
  margin-top: 28px;
}

/* ── Dale / Founder Card ── */
.founder-card__emoji {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
}
.founder-card__name {
  color: var(--white);
  margin-bottom: 4px;
}
.founder-card__role {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: 0;
}
.founder-card__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px 0;
}
.founder-card__quote {
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.founder-card__quote p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}
.founder-card__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: var(--space-4);
    margin-left: auto;
    align-self: center;   /* ← this is the key addition for flex containers */
}

/* ── Guarantee Teaser ── */
.guarantee-teaser {
  max-width: 640px;
  margin: 0 auto;
}
.guarantee-teaser h2 { margin-bottom: 20px; }
.guarantee-teaser p  { font-size: 1.05rem; }

.guarantee-teaser__sig {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--teal);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ── Final CTA — ensure heading stays white ── */
.final-cta h2 { color: var(--white); }


/* ============================================================


/* ============================================================
   BLOG SYSTEM — blog.php + blog-post.php
   Uses site CSS variables: --navy, --teal, --teal-light,
   --text-dark, --text-body, --gray-light, --gray-border, --white
   ============================================================ */

/* ── Shared blog badge ─────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   BLOG SYSTEM — blog.php + blog-post.php
═══════════════════════════════════════════════════════════ */

/* ── Shared blog badge ─────────────────────────────────────── */
.blog-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1;
}
.blog-badge--cat { background: rgba(15,92,125,0.12); color: var(--teal); }
.blog-badge--cat:hover { background: rgba(15,92,125,0.22); }
.blog-badge--featured { background: var(--gold); color: var(--navy); }

/* ── Blog meta row ─────────────────────────────────────────── */
.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-body);
}
.blog-meta--sm { font-size: 0.78rem; }
.blog-meta__author { font-weight: 600; color: var(--text-dark); }
.blog-meta__dot { color: var(--gray-mid); }

/* ── Blog listing page (blog.php) ─────────────────────────── */

.blog-page-header { padding: 64px 0 48px; }
.blog-page-header h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 12px;
  color: var(--white);
}
.blog-page-header p {
  font-size: 1.05rem;
  max-width: 640px;
  color: rgba(255,255,255,0.78);
  margin: 0;
  line-height: 1.7;
}

/* ── Featured post ─────────────────────────────────────────── */
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 48px;
  background: var(--white);
  border: 1px solid var(--gray-border);
}
.blog-featured__body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.blog-featured__title {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0;
}
.blog-featured__title a { text-decoration: none; color: inherit; }
.blog-featured__title a:hover { color: var(--teal); }
.blog-featured__excerpt {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0;
}
.blog-featured__image-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  align-self: start;
  width: 100%;
}
.blog-featured__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-featured:hover .blog-featured__image { transform: scale(1.03); }
.blog-featured__image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
}

/* ── Blog grid ─────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.blog-card:hover .blog-card__image { transform: scale(1.04); }
.blog-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
}
.blog-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.blog-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
}
.blog-card__title a { text-decoration: none; color: inherit; }
.blog-card__title a:hover { color: var(--teal); }
.blog-card__excerpt {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  flex: 1;
}
.blog-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--gray-border);
  margin-top: auto;
}
.blog-card__read-time { font-size: 0.78rem; color: var(--gray-mid); }
.blog-card__read-more { font-size: 0.82rem; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.blog-card__read-more:hover { color: var(--teal-dark); }

/* ── Empty state ───────────────────────────────────────────── */
.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 32px;
  color: var(--text-body);
  gap: 16px;
}
.blog-empty svg { color: var(--gray-mid); }
.blog-empty h3 { color: var(--text-dark); font-size: 1.1rem; }

/* ── Pagination ────────────────────────────────────────────── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.blog-pagination__info { font-size: 0.875rem; color: var(--text-body); margin-top: 12px; text-align: center; width: 100%; }

/* ── Bottom CTA strip ──────────────────────────────────────── */
.blog-cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.blog-cta-strip__text { flex: 1; min-width: 260px; }
.blog-cta-strip__title { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; color: var(--white); margin-bottom: 6px; }
.blog-cta-strip__text p { color: rgba(255,255,255,0.75); font-size: 0.95rem; margin: 0; }

/* ── Not found ─────────────────────────────────────────────── */
.blog-not-found { text-align: center; padding: 80px 16px; }
.blog-not-found h1 { margin-bottom: 16px; color: var(--text-dark); }
.blog-not-found p  { margin-bottom: 24px; color: var(--text-body); }

/* ============================================================
   BLOG POST PAGE (blog-post.php)
   ============================================================ */

/* ── Hero — full-width image + dark overlay ────────────────── */
.post-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  background-color: var(--navy);
  overflow: hidden;
}
.post-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.post-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,22,40,0.25) 0%, rgba(10,22,40,0.65) 50%, rgba(10,22,40,0.92) 100%);
}
.post-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 48px 0 52px;
}
.post-breadcrumb { margin-bottom: 24px; }
.post-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}
.post-breadcrumb__link { color: rgba(255,255,255,0.55); text-decoration: none; }
.post-breadcrumb__link:hover { color: var(--teal-light); }
.post-breadcrumb__sep { color: rgba(255,255,255,0.3); }

.post-hero__category {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.post-hero__category:hover { background: var(--teal-dark); }
.post-hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  max-width: 820px;
  margin-bottom: 20px;
}
.post-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.post-hero__meta-text { display: flex; flex-direction: column; gap: 2px; }
.post-hero__author { font-weight: 600; font-size: 0.9rem; color: var(--white); }
.post-hero__meta-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.post-hero__dot { color: rgba(255,255,255,0.3); }

/* ── Share buttons ─────────────────────────────────────────── */
.post-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--white);
  transition: opacity 0.18s ease, transform 0.18s ease;
  line-height: 1;
}
.post-share__btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--white); }
.post-share__btn--twitter  { background: #000; }
.post-share__btn--linkedin { background: #0A66C2; }
.post-share__btn--facebook { background: #1877F2; }

/* ── Sidebar share widget ──────────────────────────────────── */
.sidebar-share-widget {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.sidebar-share-widget__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dark);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal);
}
.sidebar-share-widget__btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-share-widget .post-share__btn {
  justify-content: flex-start;
  padding: 9px 14px;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
}

/* ── Article footer share ──────────────────────────────────── */
.post-share--footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-share--footer .post-share__btn--twitter  { background: #000; }
.post-share--footer .post-share__btn--linkedin { background: #0A66C2; }
.post-share--footer .post-share__btn--facebook { background: #1877F2; }

/* ── Post layout: article + sidebar ───────────────────────── */
.post-layout { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.post-article { min-width: 0; }

/* ── Article content ───────────────────────────────────────── */
.post-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-body); }
.post-content h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--text-dark);
  margin: 48px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-border);
  scroll-margin-top: 90px;
}
.post-content h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: var(--text-dark);
  margin: 32px 0 12px;
  scroll-margin-top: 90px;
}
.post-content h4 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 24px 0 8px; scroll-margin-top: 90px; }
.post-content p  { margin-bottom: 20px; max-width: 72ch; }
.post-content ul, .post-content ol { margin: 0 0 20px 24px; }
.post-content li { margin-bottom: 8px; line-height: 1.7; }
.post-content blockquote {
  border-left: 4px solid var(--teal);
  padding: 16px 24px;
  background: var(--gray-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 24px 0;
  font-style: italic;
  color: var(--text-body);
}
.post-content blockquote p { margin-bottom: 0; }
.post-content code { background: var(--gray-light); border: 1px solid var(--gray-border); border-radius: 4px; padding: 2px 6px; font-size: 0.88em; font-family: "Consolas","Monaco",monospace; color: var(--teal-dark); }
.post-content pre { background: var(--navy); color: #e6edf3; padding: 20px 24px; border-radius: var(--radius-sm); overflow-x: auto; margin: 24px 0; }
.post-content pre code { background: none; border: none; padding: 0; color: inherit; font-size: 0.9rem; }
.post-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--teal-dark); }
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 24px 0; }
.post-content hr { border: none; border-top: 1px solid var(--gray-border); margin: 40px 0; }
.post-content strong { color: var(--text-dark); }
.post-content table { border-collapse: collapse; width: 100%; margin: 24px 0; }
.post-content th { background: var(--navy); color: var(--white); padding: 10px 14px; text-align: left; font-size: 0.85rem; font-weight: 600; }
.post-content td { padding: 10px 14px; border-bottom: 1px solid var(--gray-border); font-size: 0.9rem; vertical-align: top; }
.post-content tr:nth-child(even) td { background: var(--gray-light); }

/* ── Post footer ───────────────────────────────────────────── */
.post-footer {
  border-top: 1px solid var(--gray-border);
  padding-top: 32px;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.post-footer__tags { display: flex; align-items: center; gap: 8px; }
.post-footer__tags-label { font-size: 0.85rem; color: var(--text-body); }
.post-tag { display: inline-block; background: var(--gray-light); border: 1px solid var(--gray-border); color: var(--text-body); font-size: 0.8rem; font-weight: 500; padding: 4px 12px; border-radius: 4px; text-decoration: none; }
.post-tag:hover { border-color: var(--teal); color: var(--teal); }
.post-footer__share { display: flex; flex-direction: column; gap: 8px; }
.post-footer__share-label { font-size: 0.85rem; font-weight: 600; color: var(--text-dark); }

/* ── Author card ───────────────────────────────────────────── */
.post-author-card {
  display: flex;
  gap: 24px;
  background: var(--gray-light);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-top: 40px;
  align-items: flex-start;
}
.post-author-card__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--teal-light); }
.post-author-card__byline { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-mid); margin-bottom: 4px; }
.post-author-card__name  { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.post-author-card__bio   { font-size: 0.875rem; line-height: 1.65; color: var(--text-body); margin-bottom: 16px; max-width: 65ch; }

/* ── Post sidebar — scrollable ─────────────────────────────── */
.post-sidebar {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── TOC widget ────────────────────────────────────────────── */
.toc-widget { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius-md); overflow: hidden; }
.toc-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--navy);
  cursor: pointer;
  user-select: none;
}
.toc-widget__heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin: 0; }
.toc-widget__toggle { font-size: 0.75rem; color: rgba(255,255,255,0.6); transition: transform 0.2s ease; display: inline-block; }
.toc-widget.is-collapsed .toc-widget__toggle { transform: rotate(180deg); }
.toc-widget__body {
  padding: 12px 0;
}
.toc-widget.is-collapsed .toc-widget__body { display: none; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li a {
  display: block;
  padding: 7px 20px;
  font-size: 0.83rem;
  color: var(--text-body);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: all 0.18s ease;
}
.toc-list li a:hover { color: var(--teal); border-left-color: var(--teal); background: rgba(15,92,125,0.05); }
.toc-list li a.toc-active { color: var(--teal); border-left-color: var(--teal); font-weight: 600; background: rgba(15,92,125,0.06); }
.toc-list li.toc-sub a { padding-left: 32px; font-size: 0.8rem; color: var(--gray-mid); }
.toc-list li.toc-sub a:hover { color: var(--teal); }

/* ── Sidebar widgets ───────────────────────────────────────── */
.post-sidebar .sidebar-widget { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius-md); padding: 24px; }
.post-sidebar .sidebar-widget__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dark);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal);
}
.post-sidebar .sidebar-widget--cta { background: var(--navy); border-color: transparent; }
.post-sidebar .sidebar-widget--cta p { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin-bottom: 16px; line-height: 1.6; }
.sidebar-widget__overline { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 6px; }
.sidebar-widget__cta-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.3; }
.sidebar-recent__link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-recent__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: var(--navy);
}
/* ── Sidebar recent posts ──────────────────────────────────── */
.sidebar-recent { list-style: none; padding: 0; margin: 0; }
.sidebar-recent__item { padding: 10px 0; border-bottom: 1px solid var(--gray-border); }
.sidebar-recent__item:last-child { border-bottom: none; }

.sidebar-recent__info { display: flex; flex-direction: column; gap: 3px; }
.sidebar-recent__title { font-size: 0.83rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; }
.sidebar-recent__link:hover .sidebar-recent__title { color: var(--teal); }
.sidebar-recent__meta { font-size: 0.75rem; color: var(--gray-mid); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .post-layout { grid-template-columns: 1fr; gap: 40px; }
  .post-sidebar { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__image-wrap { aspect-ratio: 16/9; align-self: auto; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured__body { padding: 24px; }
  .post-hero { min-height: 360px; }
  .post-hero__title { font-size: 1.5rem; }
  .post-hero__meta { gap: 12px; }
  .post-author-card { flex-direction: column; gap: 16px; }
  .post-footer { flex-direction: column; align-items: flex-start; }
  .blog-cta-strip__inner { flex-direction: column; align-items: flex-start; }
  .blog-page-header { padding: 40px 0 32px; }
}


/* ═══════════════════════════════════════════════════════════
   FEATURES PAGE — features.php
   Session 013 — April 26, 2026
═══════════════════════════════════════════════════════════ */

/* ── v4 Banner link ─────────────────────────────────────── */
.v4-banner a { color: var(--green); font-weight: 700; text-decoration: none; }
.v4-banner a:hover { text-decoration: underline; }

/* ── Setup section layout ───────────────────────────────── */
.feature-steps-wrap { max-width: 860px; margin-inline: auto; }

/* ── Setup stat card ────────────────────────────────────── */
.feature-stat__icon {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
}
.feature-stat__number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3.5rem;
  color: var(--green);
  line-height: 1;
  margin: 16px 0;
}
.feature-stat__sub {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.feature-stat__note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Table scroll wrapper ───────────────────────────────── */
.table-wrap { overflow-x: auto; }

/* ── 3-column comparison table ──────────────────────────── */
.comparison-table--3col th:first-child {
  background: var(--navy-mid);
  color: rgba(255, 255, 255, 0.6);
  width: 25%;
}
.comparison-table--3col th:nth-child(2) {
  background: var(--gray-light);
  color: var(--text-dark);
  width: 37.5%;
}
.comparison-table--3col th:last-child {
  width: 37.5%;
}
.comparison-table--3col td:nth-child(2) {
  background: var(--white);
  color: var(--text-body);
}
.comparison-table--3col td:last-child::before {
  content: '\2713\00A0';
  color: var(--green);
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════
   PRICING PAGE — pricing.php
   Session 013 — April 26, 2026
═══════════════════════════════════════════════════════════ */

/* ── "Most Popular" badge visual styles ─────────────────── */
/* (.pricing-card__badge positioning already defined above) */
.pricing-card__badge {
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 100px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Disclaimer note below pricing grid ─────────────────── */
.pricing-note {
  font-size: 0.85rem;
  color: var(--text-body);
  margin-top: 24px;
}
.pricing-note a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.pricing-note a:hover { text-decoration: underline; }

/* ── Plan price in comparison table header ──────────────── */
.pricing-compare__price {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Section divider rows in comparison table ───────────── */
.pricing-compare-table__section {
  background: var(--navy) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  border: none;
  text-align: left !important;
}



/* ═══════════════════════════════════════════════════════════
   PRICING TOGGLE — pricing.php
   Mirrors sales-page.css toggle, translated to BEM + main site vars
   Session 013 — April 26, 2026
═══════════════════════════════════════════════════════════ */

.pricing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

.pricing-toggle__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--transition);
}
.pricing-toggle__label.active { color: var(--teal); }

.pricing-toggle__switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
  display: block;
}
.pricing-toggle__switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.pricing-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--gray-border);
  border-radius: 100px;
  transition: background var(--transition);
}
.pricing-toggle__slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  top: 4px;
  left: 4px;
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.pricing-toggle__switch input:checked + .pricing-toggle__slider {
  background: var(--teal);
}
.pricing-toggle__switch input:checked + .pricing-toggle__slider::before {
  transform: translateX(24px);
}

.pricing-toggle__save {
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════
   3-DAY CLASSES CALLOUT — pricing.php
   Mirrors .tc-classes-callout from sales-page.css
═══════════════════════════════════════════════════════════ */

.classes-callout {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--white);
  margin: 48px 0;
}
.classes-callout h3 {
  color: var(--white);
  margin-bottom: 8px;
}
.classes-callout p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}

.classes-callout__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.classes-callout__table th {
  text-align: left;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.classes-callout__table td {
  padding: 12px 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.classes-callout__table td:last-child {
  color: var(--green);
  font-weight: 600;
}

.classes-callout__sig {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green);
  font-size: 0.9rem;
  margin-top: 8px;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .classes-callout { padding: 28px 20px; }
  .pricing-toggle-wrap { gap: 12px; }
}


/* ═══════════════════════════════════════════════════════════
   INDEX.PHP — SALES PAGE SECTION ADDITIONS
   Session 013 — April 26, 2026
   New: demo-prompt, video-wrap, stakes-body, callout-box
        variants for dark sections, v4-banner
═══════════════════════════════════════════════════════════ */

/* ── Demo Prompt (Problem section) ── */
.demo-prompt {
  background: var(--navy-mid);
  border: 1px solid var(--teal);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.92rem;
  color: var(--white);
  max-width: 780px;
  margin: 28px auto;
  line-height: 1.7;
}
.demo-prompt strong {
  color: var(--green);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

/* ── Responsive Video Wrapper ── */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin: 28px auto;
  max-width: 900px;
  box-shadow: var(--shadow-lg);
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Stakes Section Body ── */
.stakes-body {
  max-width: 780px;
  margin: 0 auto 32px;
}
.stakes-body p {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 18px;
  line-height: 1.75;
}
.stakes-body p:last-child { margin-bottom: 0; }

/* ── Callout Box — Dark Section Overrides ── */
.section--dark .callout-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--dark .callout-box p {
  color: rgba(255, 255, 255, 0.88);
}

/* ── Callout Box — Warning Variant (gold border) ── */
.callout-box--warning {
  background: rgba(245, 166, 35, 0.07);
  border-color: rgba(245, 166, 35, 0.4);
}
.callout-box__warning-title {
  display: block;
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.callout-box__note {
  margin-bottom: 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Homepage Rebuild (WP-1, T3) — narrative body + story visual ── */
.hp-narrative p {
  margin-bottom: 22px;
  line-height: 1.75;
}
.hp-narrative p:last-child { margin-bottom: 0; }

.hp-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: start;
}
.hp-story-grid p { grid-column: 1; margin: 0 0 22px; line-height: 1.75; }
.hp-story-visual {
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  top: 100px;
  align-self: start;
}
.hp-story-visual__placeholder {
  border: 2px dashed var(--gray-border);
  border-radius: var(--radius-md);
  min-height: 320px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  color: #5A6B7B;
  font-size: 0.85rem;
  background: rgba(11,27,43,0.03);
}

.hp-story-visual__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-border);
}

@media (max-width: 768px) {
  .hp-story-grid { grid-template-columns: 1fr; }
  .hp-story-visual { grid-column: 1; grid-row: auto; position: static; margin: 22px 0; }
}

/* ── V4 Announcement Banner ── */
.v4-banner {
  background: var(--navy);
  border-top: 1px solid rgba(0, 208, 132, 0.2);
  border-bottom: 1px solid rgba(0, 208, 132, 0.2);
  padding: 18px 0;
}
.v4-banner p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  text-align: center;
  margin: 0;
  line-height: 1.65;
}
.v4-banner strong {
  color: var(--green);
  font-family: var(--font-heading);
}

@media (max-width: 768px) {
  .demo-prompt { padding: 18px 20px; font-size: 0.85rem; }
  .video-wrap { margin: 20px 0; }
  .v4-banner { padding: 14px 0; }
  .v4-banner p { font-size: 0.85rem; }
}


/* ═══════════════════════════════════════════════════════════
   FEATURES.PHP — New component styles
   Session 013 — April 26, 2026
   New: page-header, numbered-steps, features-grid,
        feature-item, solution-callout, before-after-table,
        table-scroll-wrap, video-wrap--below-grid
═══════════════════════════════════════════════════════════ */

/* ── Page Header (interior pages) ── */
.page-header {
  padding: 80px 0 72px;
}
.page-header h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 820px;
  margin: 16px auto 0;
  line-height: 1.2;
  color: var(--white);
}
.page-header__sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 16px auto 0;
  max-width: 560px;
}

/* ── Numbered Steps (features How It Works) ── */
.numbered-steps {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.numbered-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.numbered-step__num {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.numbered-step__content h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--text-dark);
}
.numbered-step__content p {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.75;
  margin: 0;
}

/* ── Solution Callout (green left-border) ── */
.solution-callout {
  max-width: 780px;
  margin: 36px auto 0;
  background: rgba(0, 208, 132, 0.06);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
}
.solution-callout p {
  font-size: 0.95rem;
  color: var(--text-body);
  margin: 0;
  line-height: 1.7;
}

/* ── Features Grid (2-col icon + text) ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 40px;
  max-width: 920px;
  margin: 0 auto;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.feature-item__icon {
  font-size: 2rem;
  min-width: 48px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.feature-item__text h4 {
  font-size: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-dark);
}
.feature-item__text p {
  font-size: 0.88rem;
  color: var(--text-body);
  margin: 0;
  line-height: 1.65;
}

/* ── Video below features grid ── */
.video-wrap--below-grid {
  margin-top: 56px;
}

/* ── Table scroll wrapper (mobile) ── */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Before/After Table ── */
.before-after-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-width: 560px;
}
.before-after-table thead tr {
  background: var(--navy);
}
.before-after-table thead th {
  padding: 16px 24px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 50%;
}
.before-after-table thead th:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.before-after-table tbody tr:nth-child(odd) {
  background: var(--white);
}
.before-after-table tbody tr:nth-child(even) {
  background: var(--gray-light);
}
.before-after-table tbody td {
  padding: 14px 24px;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--gray-border);
  vertical-align: top;
  line-height: 1.55;
}
.before-after-table tbody tr:last-child td {
  border-bottom: none;
}
.before-after-table tbody td:first-child {
  color: var(--text-body);
  border-right: 1px solid var(--gray-border);
}
.before-after-table tbody td:first-child::before {
  content: '\2717  ';
  color: #e53e3e;
  font-weight: 700;
}
.before-after-table tbody td:last-child {
  color: var(--text-dark);
  font-weight: 500;
}
.before-after-table tbody td:last-child::before {
  content: '\2713  ';
  color: var(--green);
  font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .page-header { padding: 60px 0 52px; }
  .features-grid { grid-template-columns: 1fr; gap: 28px; }
  .numbered-step { gap: 16px; }
  .before-after-table tbody td { padding: 10px 14px; font-size: 0.85rem; }
  .before-after-table thead th { padding: 12px 14px; }
  .video-wrap--below-grid { margin-top: 36px; }
}


/* ═══════════════════════════════════════════════════════════
   ABOUT.PHP — Two additions
   Session 013 — April 26, 2026
═══════════════════════════════════════════════════════════ */

/* ── About page photo ── */
.about-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}

/* ── Story signature on light background ── */
.story-signature--light {
  border-top-color: var(--gray-border);
  color: var(--teal);
}

/* ── Story body spacing ── */
.story-body p {
  margin-bottom: 16px;
  line-height: 1.8;
  color: var(--text-body);
}
.story-body h2 {
  margin-bottom: 24px;
}


/* ═══════════════════════════════════════════════════════════
   CONTACT.PHP — One addition
   Session 013 — April 26, 2026
═══════════════════════════════════════════════════════════ */

/* ── Error callout (contact form validation/send error) ── */
.callout-box--error {
  background: rgba(161, 44, 123, 0.06);
  border-left: 4px solid var(--color-error, #a12c7b);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  font-size: 0.92rem;
  color: var(--text-dark);
  margin-bottom: 20px;
}


/* ============================================================
   404 PAGE
   ============================================================ */
.not-found-block {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.not-found-block__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.not-found-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.not-found-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    background: var(--color-surface);
    border: 1px solid oklch(from var(--color-text) l c h / 0.10);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow var(--transition-interactive),
                border-color var(--transition-interactive),
                transform var(--transition-interactive);
}

.not-found-link:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    color: var(--color-text);
}

.not-found-link__icon {
    font-size: 2rem;
    line-height: 1;
}

.not-found-link__label {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
}

.not-found-link__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

.not-found-cta {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.not-found-cta p {
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.not-found-cta a:not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
}