/*
Theme Name: Career Currency Academy
Theme URI: https://careercurrencyacademy.com
Author: Career Currency Academy
Author URI: https://careercurrencyacademy.com
Description: Site theme for Career Currency Academy.
Version: 2.7.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */

/* CSS Variables */
:root {
}

/* Inline Styles */
/* Inline style 1 */

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 420px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Inline style 2 */

[data-discount-off-only] {
  display: none !important;
}
.cca-hidden {
  display: none !important;
}

/* Extracted CSS from page */
:root {
  --gold: #c9a84c;
  --gold-light: #f0d58a;
  --gold-pale: #fbf4e2;
  --gold-border: rgba(201, 168, 76, 0.35);
  --gunmetal: #1c2025;
  --gunmetal-dark: #1c2025;
  --slate: #4a5568;
  --slate-light: #718096;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --border: #e2ddd4;
  --red-soft: #fff0ee;
  --red-text: #9b2c1d;
  --red-border: #f5c6c0;
  --green-soft: #fbf4e2;
  --green-text: #c9a84c;
  --green-border: #e0bb6a;
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --max: 800px;
  --sp: 72px 24px;
  --off: #f9f8f5;
  --dark: #1c2025;
  --dark-teal: #1c2828;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--gold-border);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-logo span {
  color: var(--white);
}
.nav-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-btn {
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
}
.nav {
  background: #1c2828 !important;
}
/* AUDIENCE TOGGLE, dual audience banner */
.audience-bar {
  background: var(--dark);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.audience-bar p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
.aud-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.aud-pill.parent {
  background: var(--gold);
  color: var(--dark);
}
.aud-pill.student {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.65);
}
/* HERO */
.hero {
  background: var(--dark);
  padding: 80px 24px 72px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  max-width: 680px;
  margin: 0 auto 20px;
  letter-spacing: -0.01em;
}
.hero h1 em {
  color: var(--gold);
  font-style: normal;
}
.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.68);
  max-width: 560px;
  margin: 0 auto 16px;
  line-height: 1.65;
}
.hero-sub strong {
  color: var(--white);
}
.hero-who {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 auto 36px;
  max-width: 500px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}
.hero-who span {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.btn-free {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.btn-free:hover {
  background: var(--gold-light);
}
.hero-sub2 {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.03em;
}
.hero-sub2 span {
  color: rgba(255, 255, 255, 0.55);
}
/* INVESTMENT REFRAME */
.invest {
  background: var(--gold-pale);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--border);
  padding: 40px 24px;
  text-align: center;
}
.invest-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.invest h2 {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}
.invest p {
  font-size: 16px;
  color: var(--slate);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}
.invest-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
  text-align: center;
}
.invest-stat .num {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.invest-stat .lbl {
  font-size: 13px;
  color: var(--slate);
  margin-top: 5px;
  line-height: 1.35;
}
/* SECTION SHARED */
.sec {
  padding: var(--sp);
}
.sec-alt {
  background: var(--off);
}
.sec-dark {
  background: var(--dark);
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.h2 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}
.h2.light {
  color: var(--white);
}
.body-copy {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.7;
  max-width: 660px;
}
.body-copy.light {
  color: rgba(255, 255, 255, 0.65);
}
/* PROBLEM: WHAT COLLEGES AREN'T TEACHING */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
.prob-card {
  border-radius: 6px;
  padding: 24px 20px;
}
.prob-card.bad {
  background: var(--red-soft);
  border: 1px solid var(--red-border);
}
.prob-card.good {
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}
.prob-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.prob-card.bad .prob-card.good .prob-list {
  list-style: none;
}
.prob-list li {
  font-size: 15px;
  color: var(--dark);
  padding: 5px 0;
  display: flex;
  gap: 8px;
  line-height: 1.45;
}
.prob-list li::before {
  content: '→';
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.prob-card.bad .prob-list li::before {
  color: var(--red-text);
}
.prob-card.good .prob-list li::before {
  color: var(--green-text);
}
.callout-stat {
  background: var(--dark);
  color: var(--white);
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.callout-stat .big {
  font-size: 46px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.callout-stat .text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}
.callout-stat .text strong {
  color: var(--white);
}
/* WHAT'S INSIDE */
.modules-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
.mod-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  align-items: start;
}
.mod-badge {
  width: 44px;
  height: 44px;
  background: var(--dark);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}
.mod-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.mod-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 5px;
  line-height: 1.3;
}
.mod-body {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.55;
}
.mod-insights {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mod-insight-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 7px;
}
.insight-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.insight-list li {
  font-size: 15px;
  color: var(--dark);
  display: flex;
  gap: 7px;
}
.insight-list li::before {
  content: '✦';
  color: var(--gold);
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 3px;
}
/* FREE ENROLL STRIP */
.enroll-strip {
  background: var(--dark);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 44px 24px;
  text-align: center;
}
.enroll-strip h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
}
.enroll-strip p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.enroll-note {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}
.enroll-note span {
  color: rgba(255, 255, 255, 0.55);
}
/* INSTRUCTOR */
.instructor-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.instr-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.instr-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  border: 2px solid var(--gold);
  margin-bottom: 14px;
}
.instr-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
}
.instr-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.instr-bio {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
}
.instr-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.cred-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold-pale);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--dark);
}
/* CAREER CENTER REALITY */
.reality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.reality-card {
  border-radius: 6px;
  padding: 20px;
}
.reality-card.them {
  background: var(--red-soft);
  border: 1px solid var(--red-border);
}
.reality-card.us {
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}
.reality-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.reality-card.them .reality-card.us .reality-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reality-items li {
  font-size: 15px;
  color: var(--dark);
  line-height: 1.4;
  display: flex;
  gap: 8px;
}
.reality-items li .icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.reality-card.them
  .reality-card.us

  /* TESTIMONIALS */
  .testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  position: relative;
}
.testi-card::before {
  content: '"';
  font-size: 56px;
  color: var(--gold-pale);
  font-family: var(--font-sans);
  position: absolute;
  top: 8px;
  left: 16px;
  line-height: 1;
}
.testi-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.testi-tag.parent {
  background: var(--gold-pale);
  color: #c9a84c;
}
.testi-tag.student {
  background: var(--green-soft);
  color: var(--green-text);
}
.testi-quote {
  font-size: 16px;
  color: var(--dark);
  line-height: 1.65;
  margin-bottom: 14px;
  padding-top: 18px;
  position: relative;
  z-index: 1;
}
.testi-attr {
  font-size: 13px;
  color: var(--slate-light);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
/* WHAT HAPPENS NEXT, paid course bridge */
.bridge {
  background: var(--dark);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 28px 28px 28px 32px;
  margin-top: 32px;
}
.bridge-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.bridge-body {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}
.bridge-body strong {
  color: var(--white);
}
/* FOR STUDENTS SECTION */
.student-bar {
  background: var(--dark);
  border-left: none;
  padding: 32px 28px;
  border-radius: 8px;
  margin-top: 28px;
  border: 1px solid rgba(201, 168, 76, 0.2);
}
.student-bar .eyebrow {
  margin-bottom: 8px;
}
.student-bar h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.student-bar p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}
.student-bar p strong {
  color: var(--white);
}
/* FAQ */
.faq-list {
  margin-top: 32px;
}
details {
  border-bottom: 1px solid var(--border);
}
details:first-child {
  border-top: 1px solid var(--border);
}
summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: '+';
  font-size: 20px;
  color: var(--gold);
  font-weight: 400;
  flex-shrink: 0;
}
details[open] summary::after {
  content: '−';
}
.faq-ans {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.7;
  padding: 0 0 18px;
  max-width: 660px;
}
/* FINAL CTA */
.final-cta {
  background: var(--dark);
  padding: 80px 24px;
  text-align: center;
}
.final-cta .h2 {
  color: var(--white);
  max-width: 580px;
  margin: 0 auto 14px;
}
.final-cta .body-copy {
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto 32px;
}
.final-cta .sub {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
}
.final-cta .sub span {
  color: rgba(255, 255, 255, 0.55);
}
/* PHOTOS */
.instr-avatar {
  overflow: hidden;
}
.instr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-scene {
  max-width: var(--max);
  margin: 36px auto 0;
  border-radius: 8px;
  overflow: hidden;
  height: 300px;
}
.hero-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}
.photo-placeholder span {
  font-size: 11px;
  opacity: 0.7;
}
.photo-placeholder-light {
  width: 100%;
  height: 100%;
  background: var(--off);
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--slate-light);
  font-size: 13px;
}
.photo-placeholder-light span {
  font-size: 11px;
  opacity: 0.7;
}
.mid-photo {
  margin: 0 0 40px;
  border-radius: 8px;
  overflow: hidden;
  height: 260px;
}
.mid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-avatar-init {
  width: 100%;
  height: 100%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
/* RESPONSIVE */
@media (max-width: 600px) {
  .problem-grid,
  .reality-grid,
  .testi-grid,
  .instructor-pair {
    grid-template-columns: 1fr;
  }
  .invest-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .invest-stats-row2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .callout-stat {
    flex-direction: column;
    text-align: center;
  }
  :root {
    --sp: 52px 20px;
  }
  .mod-card {
    grid-template-columns: 1fr;
  }
  .mod-badge {
    width: 38px;
    height: 38px;
  }
}
/* ── POLISH: Global consistency ── */
html {
  scroll-behavior: smooth;
}
:focus-visible {
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 3px;
}
a {
  transition:
    color 0.15s,
    opacity 0.15s;
}
a:hover {
  opacity: 0.85;
}
img {
  height: auto;
}
.btn-primary,
.btn-lg {
  transition:
    background 0.2s,
    transform 0.1s;
}
.btn-primary:active,
.btn-lg:active {
  transform: scale(0.98);
}
/* Standardize section vertical rhythm */
section + section {
  margin-top: 0;
}
/* Consistent eyebrow across all pages */
.eyebrow,
[class*='eyebrow'] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  display: block;
  margin-bottom: 10px;
}
/* FAQ details polish */
details {
  transition: all 0.2s;
}
summary {
  user-select: none;
}
/* Responsive image polish */
.section-photo img,
.photo-block img,
.mid-photo img {
  width: 100%;
  display: block;
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 420px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}
[data-discount-off-only] {
  display: none !important;
}
.cca-hidden {
  display: none !important;
}
:root {
  --gold: #c9a84c;
  --gold-light: #f0d58a;
  --gold-pale: #fbf4e2;
  --gold-border: rgba(201, 168, 76, 0.35);
  --gunmetal: #1c2025;
  --gunmetal-dark: #1c2025;
  --slate: #4a5568;
  --slate-light: #718096;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --border: #e2ddd4;
  --red-soft: #fff0ee;
  --red-text: #9b2c1d;
  --red-border: #f5c6c0;
  --green-soft: #fbf4e2;
  --green-text: #c9a84c;
  --green-border: #e0bb6a;
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --max: 800px;
  --sp: 72px 24px;
  --off: #f9f8f5;
  --dark: #1c2025;
  --dark-teal: #1c2828;
}
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: var(--max);
  margin: 0px auto;
  padding: 0px 24px;
}
.nav {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--gold-border);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-logo span {
  color: var(--white);
}
.nav-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-btn {
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
}
.nav {
  background: rgb(28, 40, 40) !important;
}
.audience-bar {
  background: var(--dark);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.audience-bar p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
.aud-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.aud-pill.parent {
  background: var(--gold);
  color: var(--dark);
}
.aud-pill.student {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.65);
}
.hero {
  background: var(--dark);
  padding: 80px 24px 72px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  max-width: 680px;
  margin: 0px auto 20px;
  letter-spacing: -0.01em;
}
.hero h1 em {
  color: var(--gold);
  font-style: normal;
}
.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.68);
  max-width: 560px;
  margin: 0px auto 16px;
  line-height: 1.65;
}
.hero-sub strong {
  color: var(--white);
}
.hero-who {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
  margin: 0px auto 36px;
  max-width: 500px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}
.hero-who span {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.btn-free {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.btn-free:hover {
  background: var(--gold-light);
}
.hero-sub2 {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.03em;
}
.hero-sub2 span {
  color: rgba(255, 255, 255, 0.55);
}
.invest {
  background: var(--gold-pale);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--border);
  padding: 40px 24px;
  text-align: center;
}
.invest-inner {
  max-width: var(--max);
  margin: 0px auto;
}
.invest h2 {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}
.invest p {
  font-size: 16px;
  color: var(--slate);
  max-width: 600px;
  margin: 0px auto;
  line-height: 1.65;
}
.invest-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
  text-align: center;
}
.invest-stat .num {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.invest-stat .lbl {
  font-size: 13px;
  color: var(--slate);
  margin-top: 5px;
  line-height: 1.35;
}
.sec {
  padding: var(--sp);
}
.sec-alt {
  background: var(--off);
}
.sec-dark {
  background: var(--dark);
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.h2 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}
.h2.light {
  color: var(--white);
}
.body-copy {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.7;
  max-width: 660px;
}
.body-copy.light {
  color: rgba(255, 255, 255, 0.65);
}
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0px;
}
.prob-card {
  border-radius: 6px;
  padding: 24px 20px;
}
.prob-card.bad {
  background: var(--red-soft);
  border: 1px solid var(--red-border);
}
.prob-card.good {
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}
.prob-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.prob-card.bad .prob-card.good .prob-list {
  list-style: none;
}
.prob-list li {
  font-size: 15px;
  color: var(--dark);
  padding: 5px 0px;
  display: flex;
  gap: 8px;
  line-height: 1.45;
}
.prob-list li::before {
  content: '→';
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.prob-card.bad .prob-list li::before {
  color: var(--red-text);
}
.prob-card.good .prob-list li::before {
  color: var(--green-text);
}
.callout-stat {
  background: var(--dark);
  color: var(--white);
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.callout-stat .big {
  font-size: 46px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.callout-stat .text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}
.callout-stat .text strong {
  color: var(--white);
}
.modules-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
.mod-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  align-items: start;
}
.mod-badge {
  width: 44px;
  height: 44px;
  background: var(--dark);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}
.mod-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.mod-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 5px;
  line-height: 1.3;
}
.mod-body {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.55;
}
.mod-insights {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mod-insight-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 7px;
}
.insight-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.insight-list li {
  font-size: 15px;
  color: var(--dark);
  display: flex;
  gap: 7px;
}
.insight-list li::before {
  content: '✦';
  color: var(--gold);
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 3px;
}
.enroll-strip {
  background: var(--dark);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 44px 24px;
  text-align: center;
}
.enroll-strip h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
}
.enroll-strip p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0px auto 28px;
  line-height: 1.6;
}
.enroll-note {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}
.enroll-note span {
  color: rgba(255, 255, 255, 0.55);
}
.instructor-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.instr-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.instr-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  border: 2px solid var(--gold);
  margin-bottom: 14px;
}
.instr-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
}
.instr-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.instr-bio {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
}
.instr-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.cred-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold-pale);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--dark);
}
.reality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.reality-card {
  border-radius: 6px;
  padding: 20px;
}
.reality-card.them {
  background: var(--red-soft);
  border: 1px solid var(--red-border);
}
.reality-card.us {
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}
.reality-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.reality-card.them .reality-card.us .reality-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reality-items li {
  font-size: 15px;
  color: var(--dark);
  line-height: 1.4;
  display: flex;
  gap: 8px;
}
.reality-items li .icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.reality-card.them .reality-card.us .testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  position: relative;
}
.testi-card::before {
  content: '"';
  font-size: 56px;
  color: var(--gold-pale);
  font-family: var(--font-sans);
  position: absolute;
  top: 8px;
  left: 16px;
  line-height: 1;
}
.testi-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.testi-tag.parent {
  background: var(--gold-pale);
  color: rgb(201, 168, 76);
}
.testi-tag.student {
  background: var(--green-soft);
  color: var(--green-text);
}
.testi-quote {
  font-size: 16px;
  color: var(--dark);
  line-height: 1.65;
  margin-bottom: 14px;
  padding-top: 18px;
  position: relative;
  z-index: 1;
}
.testi-attr {
  font-size: 13px;
  color: var(--slate-light);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.bridge {
  background: var(--dark);
  border-left: 4px solid var(--gold);
  border-radius: 0px 8px 8px 0px;
  padding: 28px 28px 28px 32px;
  margin-top: 32px;
}
.bridge-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.bridge-body {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}
.bridge-body strong {
  color: var(--white);
}
.student-bar {
  background: var(--dark);
  padding: 32px 28px;
  border-radius: 8px;
  margin-top: 28px;
  border: 1px solid rgba(201, 168, 76, 0.2);
}
.student-bar .eyebrow {
  margin-bottom: 8px;
}
.student-bar h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.student-bar p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}
.student-bar p strong {
  color: var(--white);
}
.faq-list {
  margin-top: 32px;
}
details {
  border-bottom: 1px solid var(--border);
}
details:first-child {
  border-top: 1px solid var(--border);
}
summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  padding: 18px 0px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: '+';
  font-size: 20px;
  color: var(--gold);
  font-weight: 400;
  flex-shrink: 0;
}
details[open] summary::after {
  content: '−';
}
.faq-ans {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.7;
  padding: 0px 0px 18px;
  max-width: 660px;
}
.final-cta {
  background: var(--dark);
  padding: 80px 24px;
  text-align: center;
}
.final-cta .h2 {
  color: var(--white);
  max-width: 580px;
  margin: 0px auto 14px;
}
.final-cta .body-copy {
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0px auto 32px;
}
.final-cta .sub {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
}
.final-cta .sub span {
  color: rgba(255, 255, 255, 0.55);
}
.instr-avatar {
  overflow: hidden;
}
.instr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-scene {
  max-width: var(--max);
  margin: 36px auto 0px;
  border-radius: 8px;
  overflow: hidden;
  height: 300px;
}
.hero-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}
.photo-placeholder span {
  font-size: 11px;
  opacity: 0.7;
}
.photo-placeholder-light {
  width: 100%;
  height: 100%;
  background: var(--off);
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--slate-light);
  font-size: 13px;
}
.photo-placeholder-light span {
  font-size: 11px;
  opacity: 0.7;
}
.mid-photo {
  margin: 0px 0px 40px;
  border-radius: 8px;
  overflow: hidden;
  height: 260px;
}
.mid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-avatar-init {
  width: 100%;
  height: 100%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
@media (max-width: 600px) {
  .problem-grid,
  .reality-grid,
  .testi-grid,
  .instructor-pair {
    grid-template-columns: 1fr;
  }
  .invest-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .invest-stats-row2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .callout-stat {
    flex-direction: column;
    text-align: center;
  }
  :root {
    --sp: 52px 20px;
  }
  .mod-card {
    grid-template-columns: 1fr;
  }
  .mod-badge {
    width: 38px;
    height: 38px;
  }
}
html {
  scroll-behavior: smooth;
}
:focus-visible {
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 3px;
}
a {
  transition:
    color 0.15s,
    opacity 0.15s;
}
a:hover {
  opacity: 0.85;
}
img {
  height: auto;
}
.btn-primary,
.btn-lg {
  transition:
    background 0.2s,
    transform 0.1s;
}
.btn-primary:active,
.btn-lg:active {
  transform: scale(0.98);
}
section + section {
  margin-top: 0px;
}
.eyebrow,
[class*='eyebrow'] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  display: block;
  margin-bottom: 10px;
}
details {
  transition: 0.2s;
}
summary {
  user-select: none;
}
.section-photo img,
.photo-block img,
.mid-photo img {
  width: 100%;
  display: block;
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}
[data-discount-off-only] {
  display: none !important;
}
.cca-hidden {
  display: none !important;
}
/* EC-CSS-005: scoped per-page CSS for page-why-gpa-doesnt-guarantee-a-job */
.page-why-gpa-doesnt-guarantee-a-job {
  --gold: #c9a84c;
  --gold-light: #f0d58a;
  --gold-pale: #fbf4e2;
  --dark: #1c2025;
  --slate: #4a5568;
  --slate-light: #718096;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --border: #e2ddd4;
  --font: 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --max: 700px;
}
.page-why-gpa-doesnt-guarantee-a-job * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.page-why-gpa-doesnt-guarantee-a-job {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.page-why-gpa-doesnt-guarantee-a-job a {
  color: var(--gold);
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.page-why-gpa-doesnt-guarantee-a-job .sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-why-gpa-doesnt-guarantee-a-job .nav-cta {
  background: var(--gold);
  color: var(--dark);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--gold-light);
}
.post-hero-media {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: var(--dark);
}
.post-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 24px 0;
}
.post-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.post-title {
  font-family: var(--font-sans);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 18px;
}
.post-meta {
  font-size: 13px;
  color: var(--slate-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin-bottom: 8px;
  display: flex;
  gap: 16px;
}
.post-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.post-body p {
  font-size: 17px;
  color: var(--dark);
  margin-bottom: 22px;
  line-height: 1.75;
}
.post-body h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--dark);
  margin: 36px 0 16px;
}
.post-callout {
  background: var(--gold-pale);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  margin: 28px 0;
  border-radius: 4px;
}
.post-callout p {
  font-size: 16px;
  font-style: italic;
  color: var(--dark);
  margin-bottom: 0;
}
.post-cta {
  background: var(--dark);
  border-radius: 10px;
  padding: 32px 28px;
  text-align: center;
  margin-top: 40px;
}
.post-cta p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin-bottom: 18px;
}
.post-cta a.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
}
footer.site-footer {
  background: #111618;
  border-top: 3px solid var(--gold);
  padding: 40px 24px;
  text-align: center;
}
footer.site-footer p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
footer.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  margin: 0 10px;
}
footer.site-footer a:hover {
  color: var(--gold);
}
/* EC-CSS-005: scoped per-page CSS for page-course */
.page-course {
  --gold: #c9a84c;
  --gold-light: #f0d58a;
  --gold-pale: #fbf4e2;
  --gold-border: rgba(201, 168, 76, 0.35);
  --gunmetal: #1c2025;
  --gunmetal-dark: #1c2025;
  --slate: #4a5568;
  --slate-light: #718096;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --border: #e2ddd4;
  --red-soft: #fff0ee;
  --red-text: #9b2c1d;
  --red-border: #f5c6c0;
  --green-soft: #fbf4e2;
  --green-text: #c9a84c;
  --green-border: #e0bb6a;
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --max: 820px;
  --sp: 72px 24px;
  --off: #f9f8f5;
  --dark: #1c2025;
  --dark-teal: #1c2828;
}
.page-course * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.page-course {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.page-course .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.sec {
  padding: var(--sp);
}
.sec-alt {
  background: var(--off);
}
.sec-dark {
  background: var(--dark);
}
.page-course .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.eyebrow.light {
  color: var(--gold);
}
.h2 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}
.page-course .h2.light {
  color: rgba(255, 255, 255, 0.8);
}
.h2 .body-copy {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.7;
  max-width: 680px;
}
.page-course .body-copy.light {
  color: var(--white);
}
.body-copy

  /* ── STICKY NAV ── */
  .nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--gold-border);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-course .nav-logo {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-logo span {
  color: var(--white);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-price {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.nav-price strong {
  color: var(--white);
  font-size: 16px;
}
.page-course .nav-btn {
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 13px;
  padding: 9px 20px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.nav-btn:hover {
  background: var(--gold-light);
}
.page-course .nav {
  background: #1c2828 !important;
}
/* ── HERO ── */
.page-course .hero {
  background: var(--dark);
  padding: 80px 24px 72px;
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.page-course .hero h1 {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.hero h1 em {
  color: var(--gold);
  font-style: normal;
}
.page-course .hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 560px;
}
.page-course .hero-sub strong {
  color: var(--white);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-meta-item {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}
.hero-meta-item span {
  color: rgba(255, 255, 255, 0.75);
}
/* Price card, floated right in hero */
.price-card {
  background: var(--white);
  border-radius: 8px;
  padding: 28px 24px;
  min-width: 240px;
  max-width: 280px;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.price-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.price-card-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.price-card-was {
  font-size: 14px;
  color: var(--slate-light);
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 400;
}
.price-card-note {
  font-size: 12px;
  color: var(--slate-light);
  margin: 6px 0 16px;
}
.btn-enroll {
  display: block;
  text-align: center;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 15px;
  padding: 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-enroll:hover {
  background: var(--gold-light);
}
.price-card-sub {
  font-size: 11px;
  color: var(--slate-light);
  text-align: center;
  margin-top: 8px;
}
.price-card-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.price-includes-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 10px;
}
.price-includes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.price-includes-list li {
  font-size: 14px;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.35;
}
.price-check {
  color: var(--green-text);
  font-weight: 700;
  flex-shrink: 0;
}
.guarantee-strip {
  margin-top: 12px;
  background: var(--off);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--slate);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.guarantee-strip strong {
  color: var(--dark);
}
/* ── SOCIAL PROOF BAR ── */
.proof-bar {
  background: var(--gold-pale);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px;
}
.proof-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
.proof-stat .num {
  font-size: 26px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.proof-stat .lbl {
  font-size: 12px;
  color: var(--slate);
  margin-top: 5px;
  line-height: 1.35;
}
/* ── BRUTAL REALITY ── */
.reality-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.reality-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--red-soft);
  border: 1px solid var(--red-border);
  border-radius: 6px;
  padding: 14px 16px;
}
.reality-icon {
  font-size: 18px;
  color: var(--red-text);
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
}
.reality-text {
  font-size: 15px;
  color: var(--dark);
  line-height: 1.5;
}
.reality-text strong {
  color: var(--red-text);
}
/* ── BAD ADVICE ── */
.bad-advice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.bad-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  border-top: 3px solid var(--red-border);
}
.bad-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 8px;
}
.bad-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
  line-height: 1.3;
}
.bad-card-body {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}
/* ── CAREER COIN ── */
.coin-section {
  padding: var(--sp);
  background: var(--dark);
}
.coin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.coin-card {
  border-radius: 8px;
  padding: 28px 24px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  background: rgba(255, 255, 255, 0.04);
}
.coin-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 2px solid var(--gold);
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}
.coin-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}
.coin-card-body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
}
.coin-card-points {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.coin-card-points li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  gap: 8px;
}
.coin-card-points li::before {
  content: '✦';
  color: var(--gold);
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 4px;
}
.coin-connector {
  text-align: center;
  margin-top: 28px;
  padding: 20px 28px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  background: rgba(201, 168, 76, 0.05);
}
.coin-connector-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}
.coin-connector-text strong {
  color: var(--gold);
}
/* ── MODULES ── */
.modules-list {
  list-style: none;
  margin-top: 32px;
}
.page-course .module-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.module-item:last-child {
  border-bottom: none;
}
.module-badge {
  width: 44px;
  height: 44px;
  background: var(--dark);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}
.page-course .module-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
  line-height: 1.3;
}
.module-outcome {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
}
.module-deliverable {
  font-size: 13px;
  color: var(--gunmetal);
  line-height: 1.5;
  margin-top: 8px;
}
.module-deliverable strong {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.module-count {
  font-size: 12px;
  color: var(--slate-light);
  white-space: nowrap;
  margin-top: 4px;
}
/* ── BONUSES ── */
.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
.bonus-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  border-top: 3px solid var(--gold);
}
.bonus-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.bonus-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.bonus-body {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
}
.bonus-value {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold-pale);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: #c9a84c;
}
/* ── COMPARISON TABLE ── */
.comp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
}
.comp-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.comp-table th.col-cca {
  background: var(--dark);
  color: var(--gold);
  border-radius: 6px 6px 0 0;
  text-align: center;
}
.comp-table th.col-them {
  color: var(--slate-light);
  text-align: center;
}
.comp-table td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.45;
}
.comp-table td.col-feature {
  color: var(--dark);
  font-weight: 600;
}
.comp-table td.col-cca {
  background: rgba(28, 32, 37, 0.04);
  color: var(--green-text);
  font-weight: 600;
  text-align: center;
}
.comp-table td.col-them {
  color: var(--red-text);
  text-align: center;
}
.comp-table tr:last-child td {
  border-bottom: none;
}
/* ── INSTRUCTORS ── */
.instr-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.instr-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.page-course .instr-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  border: 2px solid var(--gold);
  margin-bottom: 14px;
}
.instr-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
}
.instr-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.instr-bio {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
}
.instr-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.cred-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold-pale);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--dark);
}
/* ── TESTIMONIALS ── */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  position: relative;
}
.page-course .testi-card::before {
  content: '"';
  font-size: 56px;
  color: var(--gold-pale);
  font-family: var(--font-sans);
  position: absolute;
  top: 8px;
  left: 16px;
  line-height: 1;
}
.testi-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.testi-tag.student {
  background: var(--green-soft);
  color: var(--green-text);
}
.page-course .testi-tag.parent {
  background: var(--gold-pale);
  color: #c9a84c;
}
.page-course .testi-quote {
  font-size: 16px;
  color: var(--dark);
  line-height: 1.65;
  margin-bottom: 14px;
  padding-top: 18px;
  position: relative;
  z-index: 1;
}
.page-course .testi-attr {
  font-size: 13px;
  color: var(--slate-light);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.testi-result {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--green-soft);
  color: var(--green-text);
  margin-top: 8px;
}
/* ── GUARANTEE ── */
.guarantee-section {
  background: var(--dark);
  padding: var(--sp);
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.guarantee-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.1);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.guarantee-body {
}
.guarantee-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
}
.guarantee-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;
  max-width: 600px;
}
/* ── URGENCY CLOSE ── */
.urgency {
  background: var(--dark);
  padding: var(--sp);
}
.urgency-box {
  border: 2px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  max-width: 640px;
  margin: 28px auto 0;
}
.urgency-header {
  background: var(--gold);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.urgency-header-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
}
.spot-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  opacity: 0.7;
}
.urgency-body {
  background: var(--white);
  padding: 28px 24px;
}
.urgency-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.urgency-price {
  font-size: 40px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.urgency-was {
  font-size: 18px;
  color: var(--slate-light);
  text-decoration: line-through;
}
.urgency-note {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 20px;
}
.urgency-includes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
  margin-bottom: 24px;
}
.urgency-includes li {
  font-size: 13px;
  color: var(--dark);
  display: flex;
  gap: 7px;
  line-height: 1.35;
  text-align: left;
}
.btn-enroll-lg {
  display: block;
  text-align: center;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 17px;
  padding: 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-enroll-lg:hover {
  background: var(--gold-light);
}
.urgency-sub {
  text-align: center;
  font-size: 12px;
  color: var(--slate-light);
  margin-top: 10px;
}
/* ── FINAL CTA ── */
.final-cta {
  background: var(--dark);
  padding: 80px 24px;
  text-align: center;
}
.page-course .final-cta .h2 {
  color: var(--white);
  max-width: 580px;
  margin: 0 auto 14px;
}
.page-course .final-cta .body-copy {
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto 32px;
}
/* ── PHOTOS ── */
.page-course .instr-avatar {
  overflow: hidden;
}
.instr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hero background image */
.hero-with-bg {
  background-image: url('assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-blend-mode: overlay;
}
/* Nick + Heather side-by-side large photo */
.instructor-duo-photo {
  width: 100%;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}
.instructor-duo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Mid-page break photo */
.break-photo {
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 48px;
}
.break-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Photo placeholder shared style */
.photo-ph {
  width: 100%;
  height: 100%;
  background: var(--off);
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--slate-light);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.photo-ph span {
  font-size: 11px;
  opacity: 0.75;
}
.photo-ph-dark {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.photo-ph-dark span {
  font-size: 11px;
  opacity: 0.7;
}
/* Testimonial avatar */
.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-avatar-init {
  width: 100%;
  height: 100%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.testi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
/* ── FAQ ── */
.faq-list {
  margin-top: 32px;
}
.page-course details {
  border-bottom: 1px solid var(--border);
}
details:first-child {
  border-top: 1px solid var(--border);
}
.page-course summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
.page-course summary::after {
  content: '+';
  font-size: 20px;
  color: var(--gold);
  font-weight: 400;
  flex-shrink: 0;
}
.page-course details[open] summary::after {
  content: '\u2212';
}
.page-course .faq-ans {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.7;
  padding: 0 0 18px;
  max-width: 660px;
}
/* ── RESPONSIVE ── */
@media (max-width: 680px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .price-card {
    max-width: 100%;
    min-width: 0;
  }
  .proof-bar-inner {
    grid-template-columns: 1fr 1fr;
  }
  .bad-advice-grid,
  .bonus-grid,
  .instr-pair,
  .testi-grid,
  .coin-grid {
    grid-template-columns: 1fr;
  }
  .module-item {
    grid-template-columns: 44px 1fr;
  }
  .module-count {
    display: none;
  }
  .guarantee-section {
    flex-direction: column;
  }
  .urgency-includes {
    grid-template-columns: 1fr;
  }
  .comp-table td,
  .comp-table th {
    padding: 10px 10px;
    font-size: 13px;
  }
  :root {
    --sp: 52px 20px;
  }
}
/* ── POLISH: Global consistency ── */
html {
  scroll-behavior: smooth;
}
:focus-visible {
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 3px;
}
.page-course a {
  transition:
    color 0.15s,
    opacity 0.15s;
}
a:hover {
  opacity: 0.85;
}
img {
  height: auto;
}
.btn-lg {
  transition:
    background 0.2s,
    transform 0.1s;
}
.page-course .btn-primary {
  transition:
    background 0.2s,
    transform 0.1s;
}
.btn-primary:active,
.btn-lg:active {
  transform: scale(0.98);
}
/* Standardize section vertical rhythm */
.page-course section + section {
  margin-top: 0;
}
/* Consistent eyebrow across all pages */
[class*='eyebrow'] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  display: block;
  margin-bottom: 10px;
}
.page-course .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  display: block;
  margin-bottom: 10px;
}
/* FAQ details polish */
.page-course details {
  transition: all 0.2s;
}
.page-course summary {
  user-select: none;
}
/* Responsive image polish */
.photo-block img {
  width: 100%;
  display: block;
}
.page-course .section-photo img,
.page-course .mid-photo img {
  width: 100%;
  display: block;
}
/* PRESS / PROBLEM VALIDATION STRIP */
.press-section {
  background: var(--white);
  padding: 48px 24px;
  border-bottom: 1px solid var(--border);
}
.press-section-inner {
  max-width: 900px;
  margin: 0 auto;
}
.press-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 12px;
}
.press-heading {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--dark);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 12px;
  line-height: 1.3;
}
.press-sub {
  font-size: 14px;
  color: var(--slate);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.press-stat-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.press-stat {
  text-align: center;
}
.press-stat-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.press-stat-label {
  font-size: 12px;
  color: var(--slate-light);
  margin-top: 6px;
  max-width: 150px;
  line-height: 1.4;
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.press-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s ease;
}
.press-card:hover {
  border-color: var(--gold);
}
.press-outlet {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.press-outlet-arrow {
  color: var(--gold);
  font-weight: 700;
}
.press-summary {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  font-style: italic;
}
.press-date {
  font-size: 11px;
  color: var(--slate-light);
  margin-top: 10px;
}
@media (max-width: 640px) {
  .press-grid {
    grid-template-columns: 1fr;
  }
  .press-stat-row {
    gap: 24px;
  }
}
@media (max-width: 680px) {
  .moved-article-grid {
    grid-template-columns: 1fr !important;
  }
}
/* EC-CSS-005: scoped per-page CSS for page-the-playbook */
.page-the-playbook {
  --gold: #c9a84c;
  --gold-light: #f0d58a;
  --gold-pale: #fbf4e2;
  --dark: #1c2025;
  --slate: #4a5568;
  --slate-light: #718096;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --border: #e2ddd4;
  --font: 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --max: 1000px;
}
.page-the-playbook * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.page-the-playbook {
  font-family: var(--font-sans);
  background: var(--off-white);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.page-the-playbook a {
  color: inherit;
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.page-the-playbook .sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-the-playbook .nav-cta {
  background: var(--gold);
  color: var(--dark);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--gold-light);
}
.blog-hero {
  background: var(--dark);
  padding: 64px 24px 48px;
  text-align: center;
}
.blog-hero-eyebrow {
  display: inline-block;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.blog-hero h1 {
  font-family: var(--font-sans);
  color: var(--white);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto 14px;
  line-height: 1.15;
}
.blog-hero p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto;
}
.blog-grid-section {
  padding: 56px 24px 80px;
}
.blog-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 860px) {
  .blog-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28, 32, 37, 0.12);
}
.post-card-media {
  width: 100%;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--dark);
}
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.post-card-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 10px;
}
.post-card-excerpt {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}
.post-card-meta {
  font-size: 12px;
  color: var(--slate-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
footer.site-footer {
  background: #111618;
  border-top: 3px solid var(--gold);
  padding: 40px 24px;
  text-align: center;
}
footer.site-footer p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
footer.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  margin: 0 10px;
}
footer.site-footer a:hover {
  color: var(--gold);
}
/* EC-CSS-005: scoped per-page CSS for page-program */
/* ─── BRAND TOKENS ─── */
.page-program {
  --gold: #c9a84c;
  --gold-light: #f0d58a;
  --gold-pale: #fbf4e2;
  --gunmetal: #1c2025;
  --gunmetal-dark: #1c2025;
  --slate: #4a5568;
  --slate-light: #718096;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --border: #e2ddd4;
  --red-soft: #fff0ee;
  --red-text: #9b2c1d;
  --green-soft: #fbf4e2;
  --green-text: #c9a84c;
  --font: 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --max: 780px;
  --section-pad: 72px 24px;
  --off: #f9f8f5;
  --dark: #1c2025;
  --dark-teal: #1c2828;
}
.page-program * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.page-program {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
/* ─── STICKY NAV ─── */
.page-program .sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sticky-nav .logo {
  color: var(--gold);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sticky-nav .logo span {
  color: var(--white);
}
.page-program .nav-cta {
  background: var(--gold);
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 20px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.nav-cta:hover {
  background: var(--gold-light);
}
.page-program .sticky-nav {
  background: #1c2828 !important;
}
/* ─── HERO ─── */
.page-program .hero {
  background: var(--dark);
  padding: 80px 24px 72px;
  text-align: center;
}
.page-program .hero-eyebrow {
  display: inline-block;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 28px;
}
.page-program .hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  max-width: 680px;
  margin: 0 auto 20px;
  letter-spacing: -0.01em;
}
.hero h1 em {
  color: var(--gold);
  font-style: normal;
}
.page-program .hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.page-program .hero-sub strong {
  color: var(--white);
  font-weight: 600;
}
.page-program .btn-primary {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition:
    background 0.15s,
    transform 0.1s;
}
.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}
.hero-guarantee {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.03em;
}
.hero-guarantee span {
  color: rgba(255, 255, 255, 0.65);
}
/* ─── STAT BAR ─── */
.stat-bar {
  background: var(--gold-pale);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--border);
  padding: 36px 24px;
}
.stat-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: center;
}
.stat-item .num {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.stat-item .lbl {
  font-size: 13px;
  color: var(--slate);
  margin-top: 6px;
  line-height: 1.4;
}
.stat-divider {
  width: 1px;
  background: var(--border);
  display: none;
}
/* ─── SECTION SHARED ─── */
.section {
  padding: var(--section-pad);
}
.section-alt {
  background: var(--off);
}
.section-dark {
  background: var(--dark);
}
.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.section-headline {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}
.section-headline.light {
  color: var(--white);
}
.section-body {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.7;
  max-width: 620px;
}
.section-body.light {
  color: rgba(255, 255, 255, 0.65);
}
/* ─── PROBLEM ─── */
.problem {
  padding: var(--section-pad);
}
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
.contrast-card {
  border-radius: 6px;
  padding: 24px 20px;
}
.contrast-card.bad {
  background: var(--red-soft);
  border: 1px solid #f5c6c0;
}
.contrast-card.good {
  background: var(--green-soft);
  border: 1px solid #e0bb6a;
}
.contrast-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.contrast-card.bad .contrast-card.good .contrast-steps {
  list-style: none;
}
.contrast-steps li {
  font-size: 14px;
  color: var(--dark);
  padding: 5px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.contrast-steps li::before {
  content: '→';
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.contrast-card.bad .contrast-steps li::before {
  color: var(--red-text);
}
.contrast-card.good .contrast-steps li::before {
  color: var(--green-text);
}
.stat-callout {
  background: var(--dark);
  color: var(--white);
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.stat-callout .big-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.stat-callout .callout-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
}
.stat-callout .callout-text strong {
  color: var(--white);
}
/* ─── INSTRUCTOR ─── */
.instructor {
  padding: var(--section-pad);
}
.instructor-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.instructor-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  border: 3px solid var(--gold);
  overflow: hidden;
}
.instructor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ─── PHOTO BLOCKS ─── */
/* Hero visual strip */
.hero-visual {
  max-width: var(--max);
  margin: 40px auto 0;
  border-radius: 8px;
  overflow: hidden;
  height: 320px;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-visual-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}
.hero-visual-placeholder span {
  font-size: 11px;
  opacity: 0.7;
}
/* Mid-page section photo (between modules and testimonials) */
.section-photo {
  margin: 0 0 48px;
  border-radius: 8px;
  overflow: hidden;
  height: 280px;
}
.page-program .section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--off);
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--slate-light);
  font-size: 13px;
}
.section-photo-placeholder span {
  font-size: 11px;
  opacity: 0.7;
}
/* Testimonial avatar */
.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.testi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.instructor-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.instructor-title {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.instructor-bio {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.65;
}
.credential-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.credential-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  color: var(--dark);
}
/* ─── MODULES ─── */
.modules {
  padding: var(--section-pad);
}
.modules-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}
.module-list {
  list-style: none;
}
.page-program .module-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.module-item:last-child {
  border-bottom: none;
}
.module-num-badge {
  width: 40px;
  height: 40px;
  background: var(--dark);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}
.page-program .module-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.module-outcome {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
}
.module-deliverable {
  font-size: 13px;
  color: var(--gunmetal);
  line-height: 1.5;
  margin-top: 8px;
}
.module-deliverable strong {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.module-outcome strong {
  color: var(--green-text);
}
/* ─── TESTIMONIALS ─── */
.testimonials {
  padding: var(--section-pad);
}
.testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  position: relative;
}
.page-program .testi-card::before {
  content: '"';
  font-size: 60px;
  color: var(--gold-pale);
  font-family: var(--font-sans);
  position: absolute;
  top: 10px;
  left: 18px;
  line-height: 1;
}
.page-program .testi-quote {
  font-size: 16px;
  color: var(--dark);
  line-height: 1.65;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  padding-top: 20px;
}
.page-program .testi-attr {
  font-size: 13px;
  color: var(--slate-light);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.testi-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.testi-tag.student {
  background: var(--green-soft);
  color: var(--green-text);
}
.page-program .testi-tag.parent {
  background: var(--gold-pale);
  color: #c9a84c;
}
/* ─── PRICING ─── */
.pricing {
  padding: var(--section-pad);
}
.anchor-text {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.7;
  max-width: 600px;
  margin: 16px 0 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: var(--gold-pale);
  border-radius: 0 6px 6px 0;
}
.price-box {
  border: 2px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  max-width: 560px;
}
.price-header {
  background: var(--dark);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.price-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.price-amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.price-original {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: line-through;
  margin-left: 10px;
  font-weight: 400;
}
.price-badge {
  background: var(--gold);
  color: var(--dark);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-includes {
  padding: 24px 28px;
  background: var(--white);
}
.includes-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 16px;
}
.includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-bottom: 24px;
}
.includes-item {
  font-size: 14px;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.check {
  color: var(--green-text);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.btn-enroll:hover {
  background: var(--gold-light);
}
.enroll-sub {
  text-align: center;
  font-size: 12px;
  color: var(--slate-light);
  margin-top: 10px;
}
/* ─── FAQ ─── */
.faq {
  padding: var(--section-pad);
}
.faq-list {
  margin-top: 32px;
}
.page-program details {
  border-bottom: 1px solid var(--border);
}
details:first-child {
  border-top: 1px solid var(--border);
}
.page-program summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
.page-program summary::after {
  content: '+';
  font-size: 22px;
  color: var(--gold);
  font-weight: 400;
  flex-shrink: 0;
}
.page-program details[open] summary::after {
  content: '−';
}
.faq-answer {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.7;
  padding: 0 0 20px;
  max-width: 620px;
}
/* ─── FOOTER CTA ─── */
.footer-cta {
  background: var(--dark);
  padding: 80px 24px;
  text-align: center;
}
.footer-cta .section-headline {
  color: var(--white);
  max-width: 560px;
  margin: 0 auto 16px;
}
.footer-cta .section-body {
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto 36px;
}
.footer-cta .footer-guarantee {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
}
/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
  .contrast-grid,
  .testi-grid,
  .includes-grid {
    grid-template-columns: 1fr;
  }
  .instructor-grid {
    grid-template-columns: 1fr;
  }
  .instructor-photo {
    margin: 0 auto;
  }
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .stat-callout {
    flex-direction: column;
    text-align: center;
  }
  .page-program {
    --section-pad: 52px 20px;
  }
}
/* ── POLISH: Global consistency ── */
html {
  scroll-behavior: smooth;
}
:focus-visible {
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 3px;
}
.page-program a {
  transition:
    color 0.15s,
    opacity 0.15s;
}
a:hover {
  opacity: 0.85;
}
img {
  height: auto;
}
.btn-lg {
  transition:
    background 0.2s,
    transform 0.1s;
}
.page-program .btn-primary {
  transition:
    background 0.2s,
    transform 0.1s;
}
.btn-primary:active,
.btn-lg:active {
  transform: scale(0.98);
}
/* Standardize section vertical rhythm */
.page-program section + section {
  margin-top: 0;
}
/* Consistent eyebrow across all pages */
[class*='eyebrow'] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  display: block;
  margin-bottom: 10px;
}
.page-program .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  display: block;
  margin-bottom: 10px;
}
/* FAQ details polish */
.page-program details {
  transition: all 0.2s;
}
.page-program summary {
  user-select: none;
}
/* Responsive image polish */
.photo-block img {
  width: 100%;
  display: block;
}
.page-program .section-photo img,
.page-program .mid-photo img {
  width: 100%;
  display: block;
}
/* PRESS / PROBLEM VALIDATION STRIP */
.press-section {
  background: var(--white);
  padding: 48px 24px;
  border-bottom: 1px solid var(--border);
}
.press-section-inner {
  max-width: 900px;
  margin: 0 auto;
}
.press-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 12px;
}
.press-heading {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--dark);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 12px;
  line-height: 1.3;
}
.press-sub {
  font-size: 14px;
  color: var(--slate);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.press-stat-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.press-stat {
  text-align: center;
}
.press-stat-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.press-stat-label {
  font-size: 12px;
  color: var(--slate-light);
  margin-top: 6px;
  max-width: 150px;
  line-height: 1.4;
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.press-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s ease;
}
.press-card:hover {
  border-color: var(--gold);
}
.press-outlet {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.press-outlet-arrow {
  color: var(--gold);
  font-weight: 700;
}
.press-summary {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  font-style: italic;
}
.press-date {
  font-size: 11px;
  color: var(--slate-light);
  margin-top: 10px;
}
@media (max-width: 640px) {
  .press-grid {
    grid-template-columns: 1fr;
  }
  .press-stat-row {
    gap: 24px;
  }
}
@media (max-width: 680px) {
  .moved-article-grid {
    grid-template-columns: 1fr !important;
  }
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
/* EC-CONTAIN-001: site defines own container/section widths — no override needed */

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
[role='dialog'][class*='fixed'],
[data-radix-dialog-content][class*='fixed'],
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black'],
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop'] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it. */
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer.
 * EC-NAV-323: Also offset header.fixed — React/Vite SPAs (Kai.dev) use <header class="fixed top-0">,
 * not bare nav.fixed, so the round-1 EC-NAV-089 selectors never matched. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav),
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed[class*='top-0'] {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* FIX: course page .btn-primary/.btn-lg had no visual styles (invisible, tiny bottom Enroll button) */
.page-course .btn-primary,
.page-course .btn-lg {
  display: inline-block;
  background: var(--gold, #c9a84c);
  color: var(--dark, #2c3236);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  text-align: center;
}
.page-course .btn-lg {
  font-size: 18px;
  padding: 18px 44px;
}
.page-course .btn-primary:hover,
.page-course .btn-lg:hover {
  background: var(--gold-light, #f0d58a);
}

/* Skip link: hidden until keyboard-focused (accessibility) */
.cca-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #c9a84c;
  color: #2c3236;
  font-weight: 800;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.cca-skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   PRICE CARD ALIGNMENT FIX
   WPConvert added `text-align: center` to `.hero` (the source HTML had no such
   rule). The price card sits inside `.hero`, so it inherited centering, which
   centered the wrapped second line of every multi-line bullet instead of
   aligning it under the first line. Restores the source layout.
   --------------------------------------------------------------------------- */
.price-card {
  text-align: left;
}
.price-includes-list li {
  text-align: left;
}
/* these two were centered on purpose in the original design */
.price-card .btn-primary,
.price-card-sub {
  text-align: center;
}
/* the price-card CTA was written as a full-width block button (.btn-enroll in
   the source CSS) but the markup carries .btn-primary, so it never picked up
   those styles. Apply them where they belong. */
.price-card .btn-primary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: 15px;
  padding: 14px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.price-card .btn-primary:hover {
  background: var(--gold-light);
}

/* ---------------------------------------------------------------------------
   ADJACENT CTA BUTTONS MUST NEVER OVERLAP
   The founding-price CTA and the evergreen CTA are written as two adjacent
   inline-block anchors, with CSS hiding whichever one doesn't apply. If that
   hide ever fails (WPConvert has mangled those attributes before), both render
   side by side, wrap, and visually overlap. Forcing the second of any adjacent
   pair to block-level makes overlap structurally impossible either way.
   --------------------------------------------------------------------------- */
.btn-primary + .btn-primary,
.btn-primary + .btn-free,
.btn-free + .btn-free,
.btn-free + .btn-primary,
.btn-lg + .btn-lg {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
}
/* keep inline-block CTAs from riding up into the line above when they wrap */
.btn-primary,
.btn-lg,
.btn-free {
  vertical-align: top;
}

/* ---------------------------------------------------------------------------
   MID-PAGE SECTION PHOTO: crop to a banner instead of running full height
   The source photo is 3:2, which at the 752px content width would render about
   500px tall and shove the testimonials well below the fold. The design spec
   for this slot is a wide banner strip, so crop with object-fit and bias the
   focal point upward to keep faces in frame.
   --------------------------------------------------------------------------- */
.section-photo img,
.photo-block img,
.mid-photo img {
  height: 280px;
  object-fit: cover;
  object-position: center 25%;
}
@media (max-width: 640px) {
  .section-photo img,
  .photo-block img,
  .mid-photo img {
    height: 200px;
  }
}


/* ── Credential pill spacing (pills previously rendered flush together) ── */
.cred-pill,
.credential-pill {
  display: inline-block;
  margin: 0 8px 8px 0;
}

/* ── In-article stat graphics ── */
.post-stat {
  margin: 34px 0;
}
.post-stat img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}