:root {
  --bg-main: #141414;
  --bg-deep: #0A0A0A;
  --accent: #C9A227;
  --accent-soft: rgba(201, 162, 39, 0.16);
  --accent-border: rgba(201, 162, 39, 0.35);
  --soft-white: #F0EFF0;
  --pure-white: #FFFFFF;
  --text-muted: #B0B0B0;
  --radius-lg: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;
  --max-width: 760px;
  --side-pad: 56px;
  --side-pad-mobile: 44px;
  --pad-card: 28px;
  --pad-card-lg: 40px;
  --section-gap: 104px;
  --tile-1: #262626;
  --tile-2: #363636;
  --tile-3: #474747;
  --tile-light: #ECECEC;
  --accent-gold: #C9A227;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-main);
  color: var(--soft-white);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #000000 0%, #262626 45%, #000000 100%);
}

.main-column {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 76px var(--side-pad) 100px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(16, 10, 33, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--accent-border);
}
.site-header--minimal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: none;
  border-bottom: none;
}
.header-brand-link.header-brand-link--hidden {
  display: none;
}
.site-header--minimal .header-inner {
  justify-content: space-between;
}
.site-header--icon-only {
  position: fixed;
  top: 14px;
  right: var(--side-pad-mobile);
  z-index: 30;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 1px solid var(--accent-border);
}
.site-header--icon-only .menu-toggle {
  width: 100%;
  height: 100%;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.header-logo { width: 40px; height: 40px; object-fit: contain; }
.header-logo-fallback {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--accent);
}
.header-brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.5px; }
.header-brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* Hamburger menu */
.menu-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-toggle-line {
  width: 22px;
  height: 2px;
  background: var(--soft-white);
  border-radius: 2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(320px, 85vw);
  z-index: 20;
  background: var(--bg-main);
  border-left: 1px solid var(--accent-border);
  overflow-y: auto;
  padding: 20px;
  box-shadow: -12px 0 40px rgba(0,0,0,0.4);
}
.site-menu-list {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  text-align: right;
}
.site-menu-list > li {
  border-bottom: 1px solid var(--accent-border);
}
.site-menu-list > li > a {
  display: block;
  padding: 18px 4px;
  color: var(--pure-white);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}
.site-menu-expand-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 4px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--pure-white);
  font-weight: 700;
  font-size: 1.1rem;
  font-family: inherit;
  cursor: pointer;
}
.site-submenu {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.site-submenu li a {
  display: block;
  padding: 10px 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-submenu-view-all {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* Page headings (Curriculum, About) */
.page-heading {
  text-align: center;
  margin: 32px 0 40px;
}
.page-heading h1 {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 0 0 12px;
}
.page-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
}
.about-block {
  margin: 0 0 48px;
}

/* Curriculum page - fully static, always expanded */
.curriculum-certificate {
  margin: 0 0 56px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent-border);
}
.curriculum-cert-title {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 8px;
}
.curriculum-cert-promise {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 24px;
}
.curriculum-course {
  background: var(--bg-deep);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
  margin-bottom: 16px;
}
.curriculum-course-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pure-white);
  margin: 4px 0 14px;
}


/* Hero Offer: photo with overlay panel (course name + signup), curriculum below/outside */
.hero-offer--boring {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 20px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hero-offer--brand {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  text-align: center;
  background: linear-gradient(
    to bottom,
    var(--bg-deep) 0%,
    var(--bg-deep) 50%,
    var(--tile-1) 50%,
    var(--tile-1) 100%
  );
}
.hero-horizon-top {
  padding: 20px var(--side-pad) 8px;
}
.hero-horizon-bottom {
  padding: 6px var(--side-pad) 16px;
}
.hero-box-img {
  width: min(190px, 50vw);
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.6));
}
.hero-box-img--compact {
  width: min(120px, 34vw);
  margin: 10px auto 4px;
}
.hero-box-img--row {
  width: min(110px, 30vw);
  margin: 0;
  flex-shrink: 0;
}
.hero-product-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 8px auto 16px;
  max-width: 340px;
}
.hero-whats-included--plain {
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.hero-course-card-tagline {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}
.hero-whats-included-box {
  display: inline-block;
  border: 2px solid var(--accent);
  padding: 6px 14px;
  margin: 0 0 6px;
}
.hero-whats-included {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.hero-whats-included li {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.85rem;
}
.hero-whats-included li::before {
  content: "\2713  ";
  color: var(--accent);
}
.hero-enroll-btn {
  margin-top: 2px;
}
.hero-enroll-btn--compact {
  font-size: 0.85rem;
  padding: 10px 28px;
}
.hero-free-pitch {
  margin-top: 8px;
}
.hero-free-pitch-bold {
  color: var(--pure-white);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
}
.hero-offer-curriculum-section {
  max-width: var(--max-width);
  margin: var(--section-gap) auto;
}
.hero-offer-curriculum {
  margin-top: 0;
}
.hero-offer-curriculum-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* Mission section: outlined box (matches framework-section) with segmented idea cards */
.mission-section {
  margin: var(--section-gap) 0;
  text-align: center;
}
.mission-section--outlined {
  border: 2px solid var(--accent);
  padding: var(--pad-card-lg) var(--pad-card);
}
.mission-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mission-card {
  text-align: left;
  padding: var(--pad-card);
  border: 1px solid var(--accent-border);
}
.mission-card--tile-1 { background: var(--tile-1); }
.mission-card--tile-2 { background: var(--tile-2); }
.mission-card--tile-3 { background: var(--tile-3); }
.mission-card p {
  color: var(--soft-white);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* Merch page */
.merch-header-section {
  margin: 48px 0 26px;
  text-align: center;
}
.merch-empty-state {
  text-align: center;
  color: var(--text-muted);
  margin: var(--section-gap) 0;
}
/* One honest line instead of a dead "Checkout Coming Soon" button repeated
   on every card - five disabled buttons is what made this read as broken. */
.merch-notice {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--soft-white);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 12px 16px;
  margin: 0 0 24px;
}
.merch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 64px;
}
@media (min-width: 720px) {
  .merch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.merch-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
}
.merch-card--link {
  text-decoration: none;
  transition: transform 0.14s ease;
}
.merch-card--link:hover { transform: translateY(-3px); }
.merch-card--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.merch-shop-line { text-align: center; margin: 0 0 24px; }
.merch-shop-btn { min-width: 220px; }
/* Printify shoots on white, so the media tile is white on purpose - it reads
   as a product shot rather than a stray bright rectangle. contain, not cover:
   cover was cropping the sleeves and hems off every garment. */
.merch-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}
.merch-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
  margin: 0;
  background: transparent;
}
.merch-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--soft-white);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.merch-card-price {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--accent);
  color: #0A0A0A;
  border: 2px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.btn-secondary {
  background: transparent;
  color: var(--pure-white);
  border: 2px solid var(--soft-white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.btn-outline {
  background: transparent;
  color: var(--pure-white);
  border: 2px solid var(--accent-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Section heading */
.section-heading { text-align: center; margin: 56px 0 24px; }
.section-heading h2 {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 12px;
}
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.section-body { color: var(--text-muted); font-size: 1rem; line-height: 1.6; text-align: left; }
.certificates-intro { text-align: center; margin: 0 0 24px; }

/* Featured certificate */
.featured-certificate-section { margin: var(--section-gap) 0; text-align: center; }
.featured-pill-wrap { text-align: left; margin-top: 16px; }

/* Pills - shared */
.pill {
  background: var(--bg-deep);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pill.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-border), 0 12px 32px rgba(0,0,0,0.25);
}
.pill-trigger {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  padding: var(--pad-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.pill-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.pill-trigger-text { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pill-title { font-weight: 700; font-size: 1.05rem; color: var(--pure-white); }
.course-subject-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent);
  text-transform: uppercase;
}
.cert-promise { color: var(--text-muted); font-size: 0.92rem; }
.cert-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.badge-chip {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0;
}
.chevron {
  flex-shrink: 0;
  font-size: 1.6rem;
  color: var(--accent);
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}
.chevron-open { transform: rotate(-90deg); }

.pill-panel {
  padding: 0 var(--pad-card) var(--pad-card);
  border-top: 1px solid var(--accent-border);
  padding-top: 20px;
}
.cert-panel { background: rgba(0,0,0,0.15); }
.cert-panel .course-pill { margin: 0 0 14px; }

.course-pain, .course-outcome {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.course-pain strong, .course-outcome strong { color: var(--soft-white); }
.course-certs {
  font-size: 0.85rem;
  color: var(--accent);
  margin: 0 0 14px;
}

.module-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.module-pill {
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.module-pill-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.module-number {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.module-title { font-size: 0.9rem; color: var(--soft-white); }

.view-course-btn { width: 100%; }
.view-course-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Glow section (AI Calls) */
.glow-section { margin: var(--section-gap) 0; }
.glow-card {
  background: linear-gradient(160deg, var(--bg-deep), var(--bg-main));
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: var(--pad-card-lg);
  text-align: center;
  box-shadow: 0 0 60px rgba(0,0,0,0.3);
}
.glow-card h2 {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 20px;
}
.glow-body p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin: 0 0 10px; text-align: left; }
.glow-card .btn { margin-top: 20px; }

/* Mastermind / Method sections */
.mastermind-section, .method-section {
  margin: var(--section-gap) 0;
  text-align: center;
}
.mastermind-section h2, .method-section h2 {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 20px;
}
.section-body-block p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin: 0 0 10px; text-align: left; }
.mastermind-section .btn { margin-top: 16px; }

/* Framework section: segmented into icon cards, not a paragraph wall */
.framework-section {
  margin: var(--section-gap) 0;
  text-align: center;
}
.framework-tagline {
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 20px;
}
.framework-intro-box {
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: var(--pad-card);
  margin-bottom: 24px;
}
.framework-intro {
  text-align: left;
  color: var(--soft-white);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}
.framework-section--outlined {
  border: 2px solid var(--accent);
  padding: var(--pad-card-lg) var(--pad-card);
}
.framework-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}
.framework-card {
  text-align: left;
  padding: var(--pad-card);
  border: 1px solid var(--accent-border);
}
.framework-card--tile-1 { background: var(--tile-1); }
.framework-card--tile-2 { background: var(--tile-2); }
.framework-card--tile-3 { background: var(--tile-3); }
.framework-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-main);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.framework-card-icon .icon { width: 24px; height: 24px; color: var(--accent); }
.framework-card-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 10px;
}
.framework-card-body {
  color: var(--soft-white);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.framework-moments {
  margin-bottom: 32px;
  text-align: left;
}
.framework-moments-heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pure-white);
  text-align: center;
  margin: 0 0 20px;
}
.framework-moments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.framework-moment {
  border: 1px solid var(--accent-border);
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.framework-moment .icon { width: 22px; height: 22px; color: var(--accent); }
.framework-moment span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--soft-white);
}
.framework-cta { margin-top: 24px; }

/* Full-bleed color block sections: bold palette tile as background, text keeps the site's huge margins */
.color-block {
  width: 100vw;
  margin: var(--section-gap) 0 var(--section-gap) calc(50% - 50vw);
  padding: 64px 0;
}
.color-block--bright { background: var(--accent); }
.color-block--light { background: var(--tile-light); }
.color-block-inner {
  max-width: calc(var(--max-width) - var(--side-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  text-align: center;
}
.color-block-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bg-main);
  margin: 0 0 16px;
}
.color-block-headline {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 800;
  color: var(--bg-main);
  line-height: 1.2;
  margin: 0 0 20px;
}
.color-block-body {
  color: #2A2A2A;
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
  margin: 0 0 28px;
}
.color-block-body--center { text-align: center; }
.btn-dark-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid var(--bg-main);
  color: var(--bg-main);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: transparent;
}
@media (max-width: 480px) {
  .color-block { padding: 48px 0; }
  .color-block-inner { padding: 0 var(--side-pad-mobile); max-width: calc(var(--max-width) - var(--side-pad-mobile) * 2); }
}

/* How it works */
.how-it-works-section { margin: var(--section-gap) 0; text-align: center; }
.how-it-works-section h2 {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 28px;
}
.steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.step-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-deep);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: var(--pad-card);
}
.step-number {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-content { display: flex; flex-direction: column; gap: 2px; }
.step-title { font-weight: 700; color: var(--pure-white); }
.step-description { font-size: 0.88rem; color: var(--text-muted); }

/* Final CTA */
.final-cta-section { margin: var(--section-gap) 0 20px; text-align: center; }
.final-headline {
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 20px 0 28px;
}
.final-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Image + text marketing blocks */
.image-text-block {
  margin: var(--section-gap) 0;
  text-align: center;
}
.block-image-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}
.block-image {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 0;
  border: 1px solid var(--accent-border);
}

/* Decorative photo frames: smaller, rectangular, fading border, color tile behind */
.photo-decor {
  position: relative;
  width: 68%;
  max-width: 380px;
  margin: 0 auto 28px;
}
.photo-decor::before {
  content: '';
  position: absolute;
  top: 22px;
  left: -22px;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.photo-decor--tile-1::before { background: var(--tile-1); }
.photo-decor--tile-2::before { background: var(--tile-2); }
.photo-decor--tile-3::before { background: var(--tile-3); }
.photo-decor img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 5px solid var(--accent-border);
  box-shadow:
    0 0 0 1px rgba(185, 129, 246, 0.12),
    0 0 70px rgba(185, 129, 246, 0.35);
}
@media (max-width: 480px) {
  .photo-decor { width: 78%; }
}

/* Photo banners: full-bleed width matching hero photo exactly, near-natural crop */
.photo-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 8px;
}
.photo-banner {
  position: relative;
  width: 100%;
  border: 1px solid var(--accent-border);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
@media (min-width: 640px) {
  .photo-banner { aspect-ratio: 16 / 10; }
}
.photo-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-banner-caption {
  position: absolute;
  left: var(--pad-card);
  bottom: var(--pad-card);
  background: rgba(185, 129, 246, 0.55);
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 18px;
  max-width: calc(100% - var(--pad-card) * 2);
}

.block-headline {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 0 0 20px;
}
.block-body p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 14px;
  text-align: left;
}
.block-bold-line {
  font-weight: 800;
  color: var(--pure-white) !important;
  font-size: 1.15rem !important;
  text-align: left;
}

/* Photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.photo-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-border);
  aspect-ratio: 1 / 1;
}
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Final crest */
.final-crest {
  width: 120px;
  height: auto;
  margin: 24px auto 0;
  display: block;
}

.loading-state, .error-state {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--soft-white);
  text-align: center;
  padding: 20px;
}
.loading-spinner {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid var(--accent-border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-detail { color: var(--text-muted); font-size: 0.85rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn, .pill, .chevron, .loading-spinner {
    transition: none !important;
    animation: none !important;
  }
}

.growing-up-closing {
  text-align: left;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 600px;
  margin: -24px auto 40px;
}

.community-photos-section {
  margin: var(--section-gap) 0;
  text-align: center;
}
.community-photos-body {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 24px;
  text-align: left;
}

/* Testimonials */
.testimonials-section {
  margin: var(--section-gap) 0;
  text-align: center;
}
.testimonials-intro {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 32px;
  text-align: left;
}
.testimonial-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
.testimonial-card {
  background: var(--bg-deep);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
  text-align: left;
}
.testimonial-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--accent-border);
  display: block;
  margin: 0 0 16px;
}
.testimonial-role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.testimonial-quote {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pure-white);
  line-height: 1.35;
  margin: 0 0 12px;
}
.testimonial-body {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.testimonial-attribution {
  color: var(--soft-white);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
}

/* Mobile tightening */
@media (max-width: 480px) {
  .main-column { padding: 68px var(--side-pad-mobile) 60px; }
  .header-inner { padding: 14px var(--side-pad-mobile); }
  .hero-actions, .final-cta-actions { flex-direction: column; }
  .hero-actions .btn, .final-cta-actions .btn { width: 100%; }
}

/* Progressive enhancement: content is visible by default (no JS required).
   Once JS runs, it adds .js-enhanced to <html> and pill panels become
   collapsible. Without JS, everything just stays open and readable. */
.js-enhanced .pill-panel { display: none; }
.js-enhanced .pill.is-open .pill-panel { display: block; }
.js-enhanced .chevron { transform: rotate(90deg); }
.js-enhanced .chevron.chevron-open { transform: rotate(-90deg); }

.site-menu { display: none; }
.js-enhanced .site-menu.is-open { display: block; }
.js-enhanced .menu-toggle { cursor: pointer; }

.site-submenu { display: block; }
.js-enhanced .site-submenu { display: none; }
.js-enhanced .site-submenu.is-open { display: flex; }

/* Curriculum page: always fully static/expanded, no JS toggle applies there */
.curriculum-course .pill-panel,
.curriculum-page .pill-panel { display: block !important; }

.site-menu-close {
  display: block;
  margin: 0 0 24px auto;
  background: transparent;
  border: 2px solid var(--soft-white);
  color: var(--soft-white);
  border-radius: 0;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

/* Purchase CTA embedded in each content block */
.block-cta-wrap {
  margin-top: 24px;
  text-align: center;
}
.block-purchase-cta {
  width: 100%;
  max-width: 340px;
}

/* Opt-in checkpoint sections (email, curriculum) */
.opt-in-section {
  margin: var(--section-gap) 0;
  padding: var(--pad-card-lg) var(--pad-card);
  text-align: center;
  background: var(--bg-deep);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
}
.opt-in-section .section-body {
  text-align: center;
  margin-bottom: 20px;
}
.email-opt-in-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}
.email-opt-in-form input {
  padding: 16px var(--pad-card);
  border-radius: 0;
  border: 2px solid var(--accent-border);
  background: rgba(255,255,255,0.05);
  color: var(--pure-white);
  font-size: 1rem;
  font-family: inherit;
}
.email-opt-in-form input::placeholder { color: var(--text-muted); }
.opt-in-confirm {
  margin-top: 16px;
  color: var(--accent);
  font-weight: 700;
}

/* Auth pages: login, signup, account */
.auth-section {
  margin: var(--section-gap) 0;
  text-align: center;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: 32px auto 0;
  text-align: left;
}
.auth-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--soft-white);
  font-weight: 700;
  font-size: 0.9rem;
}
.auth-label input {
  padding: 16px var(--pad-card);
  border-radius: 0;
  border: 2px solid var(--accent-border);
  background: rgba(255,255,255,0.05);
  color: var(--pure-white);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 400;
}
.auth-error {
  color: #FF8A8A;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}
.auth-success {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}
.auth-submit {
  width: 100%;
  margin-top: 8px;
}
.auth-alt-link {
  margin-top: 24px;
  color: var(--text-muted);
}
.auth-alt-link a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.account-subheading {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pure-white);
  margin: 40px 0 20px;
  text-align: left;
}
.account-subheading--lg {
  font-size: 1.7rem;
  margin-top: 48px;
}
.discipline-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 20px;
}
.discipline-row {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}
.discipline-name {
  color: var(--accent);
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 4px;
}
.discipline-desc {
  color: var(--soft-white);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.account-course-card {
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: var(--pad-card);
  text-align: left;
  margin-bottom: 16px;
}
.account-course-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 8px;
}
.account-course-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Blog (list + article pages, rendered live via server.js) */
.blog-list-header {
  margin: var(--section-gap) 0 40px;
  text-align: center;
}
.blog-outlined-box {
  border: 2px solid var(--accent);
  padding: var(--pad-card-lg) var(--pad-card);
  margin-bottom: var(--section-gap);
}
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.blog-post-card {
  display: block;
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: var(--pad-card);
  text-align: left;
  text-decoration: none;
}
.blog-post-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 16px;
  display: block;
}
.blog-post-card-date {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.blog-post-card-title {
  color: var(--pure-white);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 10px;
}
.blog-post-card-excerpt {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.blog-feed {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.blog-tile {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-shrink: 0;
  border-bottom: 1px solid var(--accent-border);
}
.blog-tile:last-child {
  border-bottom: none;
}
.blog-tile--v0 {
  background: linear-gradient(160deg, var(--bg-main) 0%, var(--tile-3) 100%);
}
.blog-tile--v1 {
  background: radial-gradient(circle at 20% 15%, rgba(201,162,39,0.24) 0%, var(--bg-main) 55%, var(--bg-deep) 100%);
}
.blog-tile--v2 {
  background: radial-gradient(circle at 80% 85%, rgba(201,162,39,0.2) 0%, var(--bg-deep) 55%, var(--bg-main) 100%);
}
.blog-tile--v3 {
  background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(201,162,39,0.14) 50%, var(--bg-deep) 100%);
}
.blog-ad-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--accent-soft), rgba(201,162,39,0.03));
  border-bottom: 1px solid var(--accent-border);
  border-top: 1px solid var(--accent-border);
  padding: 40px 0;
}
.blog-ad-tile .blog-tile-inner {
  padding: 14px var(--side-pad-mobile) !important;
}
.blog-free-cta-tile {
  background: linear-gradient(180deg, var(--bg-deep), var(--bg-main));
}
.blog-free-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.blog-free-cta-eyebrow {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.blog-free-cta-headline {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.blog-tile-inner {
  padding: 58px var(--side-pad-mobile) 14px !important;
  width: 100%;
  position: relative;
}
.blog-download-btn {
  position: absolute;
  top: 14px;
  left: var(--side-pad-mobile);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  z-index: 5;
}
.blog-download-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.blog-article {
  margin: 0;
  text-align: left;
}
.blog-article-title {
  color: var(--pure-white);
  font-size: clamp(1.4rem, 5.5vw, 1.75rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.blog-article-title-highlight {
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-soft);
}
.blog-article-lede {
  color: var(--soft-white);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.9;
  margin: 0 0 18px;
  max-width: 62ch;
}
.blog-key-points {
  border-top: 1px solid var(--accent-border);
  border-bottom: 1px solid var(--accent-border);
  padding: 16px 0;
  margin: 0 0 18px;
}
.blog-key-points-kicker {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.blog-key-points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.blog-key-point {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.blog-key-point-number {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  line-height: 1.45;
}
.blog-key-point-text {
  color: var(--soft-white);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}
.blog-mystery {
  color: var(--soft-white);
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  opacity: 0.85;
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}
.blog-native-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
  width: fit-content;
}
.blog-native-promo-click {
  color: var(--soft-white);
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.blog-native-promo-cover {
  max-width: 130px;
  max-height: 140px;
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--accent-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.blog-native-promo-tag {
  color: var(--text-muted);
  font-size: 0.42rem;
  font-weight: 600;
  margin-top: 6px;
}

/* ===== Chart/visual block, ported from the reference card app, re-themed
   to SMC's single gold accent instead of per-category dynamic colors ===== */
.viz-block {
  margin: 0 0 14px;
}
.viz-title {
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.viz-timeline {
  display: flex;
  flex-direction: column;
}
.viz-tl-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.viz-tl-num {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.4;
}
.viz-tl-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.viz-tl-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pure-white);
}
.viz-tl-value {
  font-size: 0.68rem;
  color: var(--text-muted);
}
.viz-tl-connector {
  width: 1px;
  height: 10px;
  margin-left: 5px;
  background: var(--accent-border);
}
.viz-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.viz-bar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.viz-bar-toprow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.viz-bar-label {
  font-size: 0.7rem;
  color: var(--soft-white);
}
.viz-bar-value {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--pure-white);
  flex-shrink: 0;
}
.viz-bar-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--tile-1), var(--tile-2));
  border-radius: 3px;
  overflow: hidden;
}
.viz-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.viz-linetrend-svg {
  width: 100%;
  height: 44px;
  display: block;
}
.viz-lt-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}
.viz-lt-label {
  font-size: 0.58rem;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}
.viz-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.viz-flow-step {
  background: linear-gradient(135deg, var(--tile-1), var(--tile-2));
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 14px 18px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.viz-flow-num {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
}
.viz-flow-text {
  flex: 1;
}
.viz-flow-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
}
.viz-flow-value {
  font-size: 0.75rem;
  color: var(--pure-white);
  font-weight: 600;
  margin-top: 1px;
}
.viz-flow-arrow {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
.viz-scale {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 6px;
  padding-top: 6px;
}
.viz-scale-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.viz-scale-circle {
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 6px;
}
.viz-scale-label {
  font-size: 0.7rem;
  color: var(--soft-white);
  text-align: center;
}
.viz-scale-value {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.viz-myth-panel {
  background: linear-gradient(135deg, rgba(220,60,60,0.12), rgba(220,60,60,0.04));
  border: 1px solid rgba(220,60,60,0.35);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.viz-myth-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #e05c5c;
  margin: 0 0 4px;
}
.viz-myth-text {
  font-size: 0.88rem;
  color: var(--soft-white);
  line-height: 1.4;
  text-decoration: line-through;
  text-decoration-color: rgba(224,92,92,0.5);
  margin: 0;
}
.viz-reality-panel {
  border: 1px solid var(--accent-border);
  background: linear-gradient(135deg, var(--accent-soft), rgba(201,162,39,0.04));
  border-radius: 8px;
  padding: 16px 18px;
}
.viz-reality-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.viz-reality-text {
  font-size: 0.88rem;
  color: var(--pure-white);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* Free signup mention (demoted, homepage) */
.free-signup-section {
  margin: 40px 0;
  text-align: center;
}
.free-signup-inline-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

/* Join free-signup page */
.join-hero {
  margin: var(--section-gap) 0 40px;
  text-align: center;
}
.join-perks {
  margin: 0 0 var(--section-gap);
}
.join-perks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.join-perks .module-number {
  color: var(--accent);
  font-weight: 800;
}
.join-form-section {
  margin: 0 0 var(--section-gap);
  text-align: center;
}
.join-next {
  margin: 0 0 var(--section-gap);
  text-align: center;
}
.join-bridge {
  margin: 0 0 var(--section-gap);
}
.join-offer-card {
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: var(--pad-card);
  text-align: left;
  margin: 24px 0;
}
.join-offer-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 10px;
}
.join-offer-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.join-offer-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 16px;
}
.join-offer-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}
.join-offer-btn {
  width: 100%;
}
.join-offer-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.join-decline-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 12px;
  font-family: inherit;
}

/* Quote library */
.quotes-header {
  margin: var(--section-gap) 0 40px;
  text-align: center;
}
.quotes-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: var(--section-gap);
}
.quote-card {
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: var(--pad-card);
  margin: 0;
  color: var(--soft-white);
  font-size: 1.05rem;
  line-height: 1.7;
  font-style: italic;
}

/* Course sales page (Confidence 101) */
.course-sales-hero {
  margin: 24px 0 32px;
  text-align: left;
}
.course-sales-box-img {
  width: min(150px, 40vw);
  margin: 20px 0;
  display: block;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.55));
}
.course-sales-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent);
  margin: 16px 0 4px;
}
.course-sales-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}
.course-sales-price-note {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
  margin: 0 0 24px;
}

.course-sales-badges {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.course-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--accent-border);
  color: var(--pure-white);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.course-badge--bestseller {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}

.course-sales-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  margin: 24px auto 0;
  max-width: 460px;
  overflow: hidden;
}
.course-sales-stats--left {
  margin: 24px 0 0;
}
.course-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border-right: 1px solid var(--accent-border);
}
.course-stat:last-child {
  border-right: none;
}
.course-stat-number {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}
.course-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}
.course-sales-guarantee {
  color: var(--text-muted);
  font-size: 0.7rem;
  margin: 10px 0 0;
}

@media (max-width: 480px) {
  .course-stat-number { font-size: 1.1rem; }
  .course-stat-label { font-size: 0.55rem; }
}
.course-sales-modules {
  margin: 40px 0;
  text-align: left;
}
.course-sales-cta {
  margin: var(--section-gap) 0;
  text-align: center;
}

/* Hero product placeholder card (replaces the old Confidence 101 box image
   until a new mockup exists for the actual flagship course) */
.course-sales-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 6px 0 0;
}
.course-sales-hook {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 12px 0 0;
}
.course-sales-tagline {
  color: var(--soft-white);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 6px 0 0;
}

/* ===== New landing page sections ===== */

/* Hero course-card text elements, now sitting directly on the brand gradient */
.hero-course-card-title {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pure-white);
  font-size: 1.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.hero-course-card-subtitle {
  color: var(--pure-white);
  font-size: 1.15rem;
  font-weight: 600;
  opacity: 0.9;
  margin: 0;
}
.hero-course-card-hook {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 10px 0 0;
}
.hero-course-card-tagline {
  color: var(--pure-white);
  opacity: 0.75;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 6px 0 0;
}
.hero-course-card-price {
  color: var(--pure-white);
  font-size: 1.7rem;
  font-weight: 800;
  margin: 8px 0 12px;
}
.hero-free-pitch-note {
  color: var(--pure-white);
  opacity: 0.75;
  font-size: 0.8rem;
  margin: 12px 0 0;
}
.hero-offer-secondary-link {
  display: inline-flex;
  width: fit-content;
  font-size: 0.9rem;
  padding: 12px 24px;
  border-color: var(--accent);
}

/* We Teach the Stuff section */
.teach-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 24px var(--side-pad) 64px;
  background: var(--bg-main);
  text-align: left;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.teach-section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 96px;
}
.teach-section-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: block;
}
.teach-section-headline {
  margin-bottom: 32px;
}
.teach-section-subhead {
  color: var(--pure-white);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 24px;
}
.teach-stages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.teach-stage {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(4px);
  padding: 28px 24px;
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.teach-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--pure-white);
  opacity: 0.6;
}
.teach-stage-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--pure-white);
  font-weight: 800;
  font-size: 1.05rem;
}
.teach-stage-body {
  flex: 1;
}
.teach-stage-title {
  color: var(--pure-white);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.teach-stage-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Junk Life Throwing at You section */
.junk-life-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 24px var(--side-pad) 64px;
  background: var(--tile-2);
  text-align: left;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.junk-life-section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 96px;
}
  margin: 0 auto;
}
.junk-life-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
  text-align: left;
}
.junk-life-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  padding: var(--pad-card);
}
.junk-life-card-title {
  color: var(--pure-white);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.junk-life-card-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin: 0;
}
.junk-life-cta {
  margin-top: 16px;
}
.junk-life-note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin: 16px 0 0;
}

/* Look Around Free section - the light peak of the scroll wave */
.look-around-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--section-gap) var(--side-pad);
  background: var(--tile-light);
  text-align: center;
}
.look-around-section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.look-around-section .block-headline,
.look-around-section .section-body,
.look-around-section .hero-free-pitch-note {
  color: var(--bg-main);
}
.look-around-label {
  color: #4C2E86;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 24px 0 16px;
}
.look-around-cta {
  margin-bottom: 8px;
}

/* Life Will Teach You section - strong dark close */
.life-teach-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--section-gap) var(--side-pad);
  background: var(--bg-deep);
  text-align: center;
}
.life-teach-section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.life-teach-closer {
  color: var(--pure-white);
  font-weight: 800;
}
.life-teach-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.hero-cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 20px;
}
@media (min-width: 480px) {
  .hero-cta-row {
    flex-direction: row;
  }
}
.ddg-not-ready-btn {
  display: inline-block;
  margin-top: 12px;
}

/* Site footer */
.site-footer {
  background: #000000;
  border-top: 1px solid var(--accent-border);
  padding: 48px var(--side-pad) 40px;
  text-align: center;
  margin-top: var(--section-gap);
}
.site-footer-brand {
  color: var(--pure-white);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.site-footer-tagline {
  color: var(--pure-white);
  opacity: 0.75;
  font-size: 0.9rem;
  margin: 0 0 24px;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}
.site-footer-links a {
  color: var(--pure-white);
  opacity: 0.75;
  font-size: 0.85rem;
  text-decoration: none;
}
.site-footer-links a:hover {
  color: var(--accent);
  opacity: 1;
}

.course-sales-intro {
  font-weight: 700;
  color: var(--pure-white);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Rotating tile-color variants so repeated card grids aren't all identical */
.teach-stage--tile-1 { background: linear-gradient(160deg, var(--tile-1) 0%, var(--bg-main) 100%); }
.teach-stage--tile-2 { background: linear-gradient(160deg, var(--tile-2) 0%, var(--bg-main) 100%); }
.teach-stage--tile-3 { background: linear-gradient(160deg, var(--tile-3) 0%, var(--bg-main) 100%); }

.junk-life-card--tile-1 { background: linear-gradient(160deg, var(--tile-1) 0%, var(--bg-deep) 100%); }
.junk-life-card--tile-2 { background: linear-gradient(160deg, var(--tile-2) 0%, var(--bg-deep) 100%); }
.junk-life-card--tile-3 { background: linear-gradient(160deg, var(--tile-3) 0%, var(--bg-deep) 100%); }

.curriculum-course--tile-1 { background: linear-gradient(160deg, var(--tile-1) 0%, var(--bg-deep) 100%); }
.curriculum-course--tile-2 { background: linear-gradient(160deg, var(--tile-2) 0%, var(--bg-deep) 100%); }
.curriculum-course--tile-3 { background: linear-gradient(160deg, var(--tile-3) 0%, var(--bg-deep) 100%); }

/* ============================================================
   Homepage scroll tiles: Boring Company style full-bleed photo
   sections with dark-to-reveal scroll mechanic.
   ============================================================ */

.tile-photo {
  position: relative;
  overflow: hidden;
}
.tile-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: filter 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile-photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
}
.tile-photo-content {
  position: relative;
  z-index: 2;
}

/* Dark-to-reveal scroll mechanic (tiles 2 and 3 only) */
.tile-reveal .tile-photo-bg {
  filter: brightness(0.12) saturate(0) contrast(1.1);
  transform: scale(1.06);
}
.tile-reveal.in-view.tile-photo--color .tile-photo-bg {
  filter: brightness(0.7) saturate(1) contrast(1.05);
  transform: scale(1);
}
.tile-reveal.in-view.tile-photo--mono .tile-photo-bg {
  filter: brightness(0.65) saturate(0) contrast(1.15);
  transform: scale(1);
}
.tile-reveal .tile-photo-content {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease 0.2s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.tile-reveal.in-view .tile-photo-content {
  opacity: 1;
  transform: translateY(0);
}

.tile-photo--warehouse .tile-photo-bg {
  background-image: url('/hero-bg-warehouse.webp');
  filter: brightness(1.0) saturate(0.6) contrast(1.02);
  transform: scale(1);
  transition: none;
  background-color: #0A0A0A;
}
.hero-offer--boring.tile-photo--warehouse {
  margin-top: -76px;
  padding-top: 76px;
}
@media (min-width: 768px) {
  .hero-offer--boring.tile-photo--warehouse .tile-photo-bg {
    background-position: center top;
  }
}
/* On phones the source photo is landscape, so background-size:cover on a
   tall narrow viewport crops it down to almost nothing (just a sliver of
   the subject). Use contain so the whole photo is always visible, with
   the dark background filling any letterboxed space above/below. */
@media (max-width: 767px) {
  .hero-offer--boring.tile-photo--warehouse .tile-photo-bg {
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.hero-offer--boring.tile-photo--warehouse .tile-photo-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
@media (max-width: 480px) {
  .hero-offer--boring.tile-photo--warehouse {
    margin-top: -68px;
    padding-top: 68px;
  }
}

.hero-listen-kicker {
  color: var(--soft-white);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 20px 0 8px;
}
.hero-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 14px 30px;
  margin: 16px 0;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(201,162,39,0.35);
}
.hero-listen-btn:hover {
  filter: brightness(1.08);
}
.hero-inline-video-wrap {
  max-width: 280px;
  margin: 16px 0;
}
.hero-inline-video {
  width: 100%;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--accent-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.promise-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 20px 0 8px;
}
.promise-icon-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
}
.promise-icon-card .promise-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 10px;
}
.promise-icon-card p {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}
.promise-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}
.promise-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid var(--accent-border);
}
.promise-card--yes {
  background: rgba(201, 162, 39, 0.08);
  border-color: var(--accent-gold);
}
.promise-card--no {
  background: rgba(255,255,255,0.02);
}
.promise-card-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
}
.promise-card--yes .promise-card-icon {
  background: var(--accent-gold);
  color: var(--bg-deep);
}
.promise-card--no .promise-card-icon {
  background: rgba(255,255,255,0.1);
  color: var(--text-muted);
}
.promise-card p {
  margin: 0;
  color: var(--soft-white);
  font-size: 0.95rem;
  line-height: 1.5;
  padding-top: 3px;
}
.preview-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
}
.preview-buttons-row .course-audio-btn {
  margin-right: 8px;
}
.slide-previewer {
  margin: 12px 0 24px;
}
.slide-previewer-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
}
.slide-previewer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.slide-previewer-img--active {
  opacity: 1;
  pointer-events: auto;
}
.slide-previewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
}
.slide-previewer-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-previewer-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-deep);
}
.slide-previewer-counter {
  color: var(--soft-white);
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 48px;
  text-align: center;
}
.chapter-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 12px 0 24px;
}
.chapter-screenshot-card {
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-soft);
}
.chapter-screenshot-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.chapter-screenshot-label {
  padding: 10px 12px;
  margin: 0;
  color: var(--soft-white);
  font-size: 0.82rem;
  font-weight: 700;
}
.whatyouget-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 24px;
  align-items: start;
  margin: 12px 0 24px;
}
@media (max-width: 640px) {
  .whatyouget-grid {
    grid-template-columns: 1fr;
  }
}
.whatyouget-card {
  text-align: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-gold);
  border-radius: 12px;
  padding: 20px;
}
.whatyouget-book-img {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 12px;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.whatyouget-label {
  color: var(--pure-white);
  font-weight: 800;
  margin: 0 0 4px;
  font-size: 0.95rem;
}
.whatyouget-sub {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0;
}
.whatyouget-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.whatyouget-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.whatyouget-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.whatyouget-item p {
  margin: 0;
  color: var(--soft-white);
  font-size: 0.95rem;
  line-height: 1.5;
  padding-top: 4px;
}
.founder-letter-play-row {
  margin: 0 0 24px;
}
.founder-letter-play-btn {
  font-weight: 700;
}
.founder-letter-section {
  margin: 40px 0 60px;
  padding: 32px 24px;
  background: #000000;
  border: 2px solid #FFD700;
  border-radius: 4px;
}
.founder-letter-inner {
  max-width: 640px;
  margin: 0 auto;
}
.founder-letter-p {
  color: #FFD700;
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 18px;
}
.founder-letter-p:first-child {
  font-style: italic;
  color: #FFD700;
}
.founder-letter-signoff {
  color: #FFD700;
  font-weight: 700;
  font-size: 1.02rem;
  margin-top: 28px;
  text-align: right;
}
.reviews-section {
  margin: 60px 0;
}
.reviews-rating-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 24px;
  flex-wrap: wrap;
}
.reviews-rating-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-gold);
}
.reviews-rating-stars {
  color: var(--accent-gold);
  font-size: 1.3rem;
  letter-spacing: 2px;
}
.reviews-rating-count {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.review-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-card--hidden {
  display: none;
}
.review-card-stars {
  color: var(--accent-gold);
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.review-card-quote {
  color: var(--soft-white);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}
.review-card-name {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
}
.stories-section {
  margin: 60px 0;
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.story-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.story-card-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-gold);
}
.story-card-photo--placeholder {
  background: var(--accent-border);
}
.story-card-quote {
  color: var(--soft-white);
  font-size: 0.9rem;
  line-height: 1.5;
  font-style: italic;
  margin: 6px 0;
}
.story-card-name {
  color: var(--pure-white);
  font-weight: 800;
  margin: 0;
  font-size: 0.95rem;
}
.story-card-role {
  color: var(--accent-gold);
  font-size: 0.8rem;
  margin: 0;
}
.module-preview-btn {
  padding: 0 16px 12px;
}
.module-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 24px;
}
.module-name-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
}
.character-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 8px 0 24px;
}
.character-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.character-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent-gold);
}
.character-name {
  color: var(--accent-gold);
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 4px;
}
.character-bio {
  color: var(--soft-white);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
.promise-numbered-list {
  margin: 0 0 24px;
  padding-left: 22px;
  color: var(--soft-white);
  font-size: 0.92rem;
  line-height: 1.7;
}
.promise-numbered-list--no li {
  color: var(--text-muted);
}

/* Shared background for the 4-panel sticky group and the standalone
   final tile: one photo used throughout instead of four separate ones. */
.tile-photo--crowd .tile-photo-bg {
  background-image: url('/tile-crowd-street.png');
  filter: brightness(1.0) saturate(0.5) contrast(1.02);
  transform: scale(1);
  transition: none;
}
.hero-offer--boring.tile-photo--crowd {
  margin-top: -76px;
  padding-top: 76px;
}
@media (min-width: 768px) {
  .hero-offer--boring.tile-photo--crowd .tile-photo-bg {
    background-position: center top;
  }
}
.hero-offer--boring.tile-photo--crowd .tile-photo-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
@media (max-width: 480px) {
  .hero-offer--boring.tile-photo--crowd {
    margin-top: -68px;
    padding-top: 68px;
  }
}

/* Persistent SMC logo: visible through panels 1-3 of the sticky group; hides on the hero panel and the final standalone tile */
.persistent-scroll-logo {
  position: fixed;
  top: 88px;
  left: 24px;
  width: 120px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}
.persistent-scroll-logo.is-visible {
  opacity: 1;
}
@media (max-width: 640px) {
  .persistent-scroll-logo { width: 84px; top: 78px; left: 16px; }
}

/* Sticky 4-panel group: one true sticky background, four text panels
   toggled by continuous scroll position, generalized from the original
   2-panel mechanic. */
.sticky-tile-group {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.sticky-tile-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-tile-boundary {
  height: 100vh;
  height: 100dvh;
  width: 100%;
}
.sticky-tile-boundary--4 {
  height: 300vh;
  height: 300dvh;
  width: 100%;
}
.sticky-tile-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px var(--side-pad) 64px;
  text-align: left;
  will-change: opacity, transform;
}
.sticky-tile-panel.is-active {
  pointer-events: auto;
}
.sticky-tile-panel-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 640px) {
  .sticky-tile-panel { padding: 56px var(--side-pad-mobile); }
}

/* ============================================================
   Boring Company style: shared headline/lede treatment used by
   hero (tile 1) and any tile converted to this minimal paragraph
   format. Smaller, condensed, no boxed cards.
   ============================================================ */

.bc-headline {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--accent-gold);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.18;
  margin: 0 0 12px;
}
.bc-lede {
  font-family: 'Calibri', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  max-width: 460px;
  margin: 0;
}
.bc-lede + .bc-lede {
  margin-top: 10px;
}
.bc-lede-lead {
  font-style: italic;
  font-weight: 700;
  color: var(--pure-white);
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
}

/* Hero (tile 1) specific: product box + CTA row above the headline */
.hero-offer--boring {
  text-align: left;
  background: none;
}
.hero-bc-content {
  max-width: 460px;
  margin: 0;
  padding: 0 var(--side-pad);
}
.hero-bc-top-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.hero-bc-box-img {
  width: 170px;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
}
.hero-bc-top-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.hero-bc-cta-btn {
  padding: 12px 24px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--accent-gold);
  box-shadow: none;
  color: var(--pure-white);
}
.hero-bc-secondary-link {
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .hero-bc-content { padding: 0 var(--side-pad-mobile); max-width: 85%; }
  .hero-v2-price { font-size: 1.6rem; }
  .hero-v2-cta { font-size: 0.75rem; padding: 9px 18px; }
  .hero-bc-top-row { gap: 12px; }
  .hero-bc-box-img { width: 145px; }
  .hero-bc-cta-btn { padding: 10px 18px; font-size: 0.7rem; }
}

/* Additional boring-company shared elements: wrapping headline modifier,
   gold tagline, and outline CTA used on tile 3 (and reusable elsewhere). */
.bc-headline--wrap {
  max-width: 460px;
}
.bc-tagline {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  margin: 16px 0 24px;
}
.bc-outline-btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--accent-gold);
  background: rgba(0,0,0,0.25);
  color: var(--pure-white);
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.bc-outline-note {
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin: 10px 0 0;
}

/* Secondary outline button variant: quieter than the primary gold
   outline, used for tertiary CTAs stacked below a main action. */
.bc-outline-btn--secondary {
  border-color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.2);
  font-size: 0.72rem;
  padding: 10px 24px;
}

/* ============================================================
   Site-wide heading color sweep: everything reads gold now,
   matching the homepage's Boring Company treatment. Excludes
   headings that sit on light/bright color-block backgrounds
   (those need dark text and are already correct as-is).
   ============================================================ */
.curriculum-cert-title,
.curriculum-course-title,
/* .merch-card-title deliberately excluded from this gold sweep: on the
   product grid its price directly beneath is already gold, and two golds
   stacked leave the pair with no hierarchy. Title stays neutral. */
.section-heading h2,
.framework-card-heading,
.framework-moments-heading,
.final-headline,
.account-subheading,
.account-course-title,
.blog-post-card-title,
.join-offer-title,
.course-sales-subtitle,
.hero-course-card-subtitle {
  color: var(--accent);
}

/* Generic safety net for any heading tag not covered by a specific
   class above: keeps new/overlooked headings consistent by default. */
h1, h2, h3 {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   Desktop scale-up. Everything above was sized mobile-first with
   font-size clamp() caps and narrow content widths that read fine
   on a phone but look tiny/lost on a real desktop viewport. This
   raises the ceiling on all of it above 1024px.
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --max-width: 900px;
    --side-pad: 96px;
  }

  /* Hero + tile headline/lede system */
  .bc-headline {
    font-size: clamp(27px, 2.6vw, 40px);
  }
  .bc-headline--wrap {
    max-width: 720px;
  }
  .bc-lede {
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 640px;
  }
  .bc-lede-lead {
    font-size: 1.15rem;
  }
  .bc-tagline {
    font-size: 1.15rem;
  }
  .bc-outline-btn {
    font-size: 0.95rem;
    padding: 16px 40px;
  }
  .bc-outline-btn--secondary {
    font-size: 0.85rem;
    padding: 14px 32px;
  }
  .bc-outline-note {
    font-size: 0.9rem;
  }

  /* Hero product box + top CTA row */
  .hero-bc-content {
    max-width: 640px;
  }
  .hero-bc-box-img {
    width: 150px;
  }
  .hero-bc-top-row {
    gap: 28px;
    margin-bottom: 28px;
  }
  .hero-bc-cta-btn {
    font-size: 0.95rem;
    padding: 16px 34px;
  }
  .hero-bc-secondary-link {
    font-size: 0.9rem;
  }

  /* Sticky pair (tiles 4/5) */
  .sticky-tile-panel-inner {
    max-width: 700px;
  }

  /* Interior page headings */
  .page-heading h1 {
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  }
  .page-subtitle {
    font-size: 1.2rem;
  }
  .block-headline {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  }

  /* Give interior pages real breathing room instead of a mobile
     column stranded in a huge black canvas */
  .main-column {
    padding-top: 96px;
  }
}

@media (min-width: 1440px) {
  .bc-headline {
    font-size: clamp(32px, 2.2vw, 44px);
  }
  .bc-lede {
    font-size: 1.25rem;
    max-width: 700px;
  }
  .hero-bc-content {
    max-width: 720px;
  }
  .hero-bc-box-img {
    width: 180px;
  }
  :root {
    --max-width: 1040px;
  }
}

/* ============================================================
   Course delivery page (/learn/:course/:module/)
   ============================================================ */
.learn-page {
  max-width: 720px;
}
.learn-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: 20px 0;
  display: block;
}
.learn-audio {
  width: 100%;
  margin: 20px 0;
  display: block;
}
.learn-transcript-toggle {
  background: none;
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 0.85rem;
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: 16px;
}
.learn-body {
  color: var(--soft-white);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 24px 0 40px;
}
.learn-body p {
  margin: 0 0 20px;
}
.learn-body h3 {
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin: 32px 0 12px;
}
.learn-reflection {
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: var(--pad-card);
  margin-bottom: 32px;
}
.learn-reflection-label {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}
.learn-actions {
  margin-bottom: 40px;
}
.learn-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--accent-border);
  padding-top: 24px;
}
.account-continue-btn {
  margin-top: 12px;
}

/* Submodule breakdown on course sales pages */
.submodule-list {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--accent-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.submodule-item {
  display: flex;
  gap: 12px;
}
.submodule-number {
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 32px;
  flex-shrink: 0;
}
.submodule-title {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 4px;
}
.submodule-summary {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* Course reviews section */
.course-reviews {
  margin: 40px 0;
  text-align: left;
}
.course-reviews-summary {
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 20px;
}
.course-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.review-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.review-stars {
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin: 0 0 10px;
}
.review-text {
  color: var(--soft-white);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 10px;
}
.review-name {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}

@media (min-width: 700px) {
  .course-reviews-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.course-reviews-grid--hidden {
  display: none;
}
.course-reviews-toggle {
  display: block;
  width: 100%;
  margin-top: 16px;
}

/* Coaching call settings form on account page */
.call-settings-form {
  margin: 16px 0 32px;
  max-width: 360px;
}
.call-settings-label {
  display: block;
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 16px 0 6px;
}
.call-settings-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  color: var(--pure-white);
  font-size: 0.95rem;
}
#call-settings-save {
  margin-top: 20px;
}
#call-settings-note {
  color: var(--accent);
  font-weight: 700;
  margin-top: 10px;
}

/* Pricing widget with AI calls add-on toggle */
.pricing-widget {
  margin: 16px 0;
}
.pricing-widget-promo {
  background: var(--accent);
  color: #0A0A0A;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  text-align: center;
}
.pricing-widget-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 8px;
}
.pricing-widget-addon {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pure-white);
  font-size: 0.75rem;
  margin-bottom: 10px;
  cursor: pointer;
}
.pricing-widget-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.pricing-widget-btn {
  width: 100%;
}

/* Cart page */
.cart-page {
  max-width: 480px;
  padding-top: 80px;
}
.cart-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--accent-border);
}
.cart-line-name {
  color: var(--pure-white);
  font-size: 0.95rem;
}
.cart-line-price {
  color: var(--pure-white);
  font-weight: 700;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  margin-top: 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
}
.cart-checkout-btn {
  width: 100%;
  margin-top: 12px;
}
.cart-edit-link {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 16px;
}

/* ============================================================
   Hero v2 - matches the reference mockup: no product box, full
   price/CTA shown directly, 4-icon benefits row underneath.
   ============================================================ */
.hero-v2-title {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  font-weight: 800;
  line-height: 1.02;
  margin: 0 0 8px;
  text-transform: none;
}
.hero-v2-title-white { color: var(--pure-white); }
.hero-v2-title-gold { color: var(--accent); }

.hero-v2-subtitle {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.75rem;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.hero-v2-body {
  color: rgba(255,255,255,0.85);
  font-family: 'Calibri', Arial, sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 460px;
  margin: 8px 0 12px;
}

.hero-v2-purchase-label {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.hero-v2-price {
  color: var(--pure-white);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 12px;
}
.hero-v2-price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.hero-v2-cta {
  display: inline-block;
  width: auto;
  text-align: center;
  padding: 10px 22px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.hero-v2-secondary-link {
  display: block;
  text-align: left;
  color: var(--pure-white);
  text-decoration: underline;
  font-size: 0.75rem;
  margin: 10px 0 24px;
}

.hero-v2-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-v2-benefit-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--accent);
  margin-bottom: 10px;
}
.hero-v2-benefit-icon svg { width: 100%; height: 100%; }
.hero-v2-benefit-title {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.78rem;
  margin: 0 0 4px;
  line-height: 1.2;
}
.hero-v2-benefit-desc {
  color: rgba(255,255,255,0.6);
  font-size: 0.68rem;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 480px) {
  .hero-v2-benefits { gap: 8px; }
  .hero-v2-benefit-desc { display: none; }
}

@media (min-width: 1024px) {
  .hero-v2-title { font-size: clamp(3.2rem, 6vw, 5rem); }
  .hero-v2-body { font-size: 1.15rem; max-width: 560px; }
  .hero-v2-price { font-size: 3.2rem; }
  .hero-v2-benefit-desc { display: block; font-size: 0.8rem; }
  .hero-v2-benefit-title { font-size: 0.95rem; }
}

/* Product page compact sizing - scoped so it doesn't affect
   .block-headline / .eyebrow used elsewhere on the site */
.course-sales-hero .eyebrow {
  font-size: 0.62rem;
  margin: 0 0 4px;
}
.course-sales-hero .block-headline {
  font-size: clamp(1.2rem, 6vw, 1.5rem);
  margin: 0 0 4px;
}
@media (max-width: 480px) {
  .pricing-widget-price { font-size: 1.4rem; }
  .pricing-widget-addon { font-size: 0.7rem; }
  .pricing-widget-btn { font-size: 0.8rem; padding: 10px 20px; }
}

/* Hero module list (replaces the 4-icon benefits row for the new flagship) */
.hero-v2-modules {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-v2-module {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hero-v2-module-num {
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  min-width: 14px;
}
.hero-v2-module-title {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .hero-v2-module-title { font-size: 0.95rem; }
}

/* More Courses grid on homepage */
.more-courses-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 40px var(--side-pad-mobile);
  background: var(--bg-main);
}
.more-courses-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.more-courses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.more-course-card {
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
}
.more-course-card-link {
  display: block;
  text-decoration: none;
}
.more-course-price {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 10px 0 8px;
}
.more-course-buy-btn {
  display: block;
  text-align: center;
  width: 100%;
  padding: 10px;
  font-size: 0.8rem;
}
.more-course-cover {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.more-course-title {
  color: var(--pure-white);
  font-weight: 700;
  font-size: 0.8rem;
  margin: 0 0 4px;
  line-height: 1.25;
}
.more-course-subtitle {
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.3;
  margin: 0;
}

@media (min-width: 700px) {
  .more-courses-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .more-courses-section { padding: 64px var(--side-pad); }
}

/* Plain (no-photo) sections - background matches More Courses exactly */
.plain-tile-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px var(--side-pad-mobile);
  background: var(--bg-main);
}
.plain-tile-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: left;
}

/* "Scroll." cue on the simplified tile2 */
.scroll-cue {
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .plain-tile-section { padding: 88px var(--side-pad); }
}

/* Dirty Damn Games homepage teaser */
.ddg-teaser-box-img {
  width: min(340px, 78vw);
  margin: 0 auto 28px;
  display: block;
}
.ddg-teaser-box-img--framed {
  width: min(180px, 50vw);
  border: 2px solid var(--accent-gold);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  margin: 28px auto;
}
.ddg-teaser-lessons-link {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.9rem;
  margin-top: 16px;
}

/* ===== Front door gate page ===== */
.gate-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--side-pad-mobile);
  background: var(--bg-deep);
}
.gate-inner {
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.gate-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}
.gate-video {
  width: 100%;
  max-width: 340px;
  border-radius: 10px;
  display: block;
  margin: 0 auto 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  border: 1px solid var(--accent-border);
}
.gate-tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 28px;
}
.gate-headline {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pure-white);
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 32px;
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.gate-input {
  background: var(--tile-1);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  color: var(--pure-white);
  font-size: 1rem;
  padding: 14px 16px;
  text-align: center;
  width: 100%;
}
.gate-code-input {
  letter-spacing: 6px;
  font-weight: 700;
}
.gate-submit-btn {
  width: 100%;
}
.gate-code-sent-msg {
  color: var(--soft-white);
  font-size: 0.9rem;
  margin: 0 0 4px;
}
.gate-error {
  color: #e05c5c;
  font-size: 0.85rem;
  margin: 0 0 16px;
}
.gate-escape-link {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  margin-top: 12px;
}

/* ===== Internal social media submission portal ===== */
.social-portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .social-portal-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.social-portal-item {
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--tile-1);
}
.social-portal-media {
  width: 100%;
  border-radius: 6px;
  display: block;
  background: #000;
  max-height: 480px;
  object-fit: contain;
}
.social-portal-caption {
  color: var(--soft-white);
  font-size: 0.9rem;
  margin: 10px 0 4px;
}
.social-portal-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin: 0;
}

/* Course intro audio play button */
.course-audio-player {
  margin: 12px 0;
}
.course-audio-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  display: inline-block;
}
.course-audio-btn:hover {
  background: var(--accent);
  color: var(--bg-deep);
}
.ddg-play-intro-large {
  margin: 20px 0;
}
.ddg-play-intro-large .course-audio-btn {
  background: var(--accent-gold);
  border: none;
  color: var(--bg-deep);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 16px 34px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(201,162,39,0.35);
}
.ddg-play-intro-large .course-audio-btn:hover {
  filter: brightness(1.08);
  background: var(--accent-gold);
  color: var(--bg-deep);
}

/* ===== Link hub (link-in-bio) ===== */
/* Reuses the homepage hero's photo/scrim machinery (.tile-photo,
   .tile-photo--warehouse) but NOT .hero-offer--boring, which is
   min-height:100dvh - a full-viewport hero here would push every link row
   below the fold, the one thing a link-in-bio page must not do. Height is
   content-sized so all five rows land in the first screen.
   Type is set at app sizes (~14px titles), not landing-page sizes. */
.linkhub-hero {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 32px var(--side-pad-mobile) 24px;
  background: var(--bg-deep);
}
.linkhub-hero-content {
  position: relative;
  z-index: 1;
  max-width: 460px;
  width: 100%;
}
.linkhub-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin: 0 auto 11px;
  display: block;
}
.linkhub-name {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pure-white);
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: 0 0 4px;
}
.linkhub-handle {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}
.linkhub-hero-headline {
  font-family: 'Oswald', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pure-white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 9px;
}
.linkhub-bio {
  color: var(--text-muted);
  font-size: 0.755rem;
  line-height: 1.5;
  margin: 0;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
/* Scoped down from the homepage's full-size Listen button so it sits in the
   same type scale as the rest of this page. */
.linkhub-hero .hero-listen-kicker {
  font-size: 0.62rem;
  margin: 14px 0 0;
}
.linkhub-hero .hero-listen-btn {
  font-size: 0.78rem;
  padding: 10px 22px;
  margin: 9px 0 0;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
}

.linkhub-page {
  display: flex;
  justify-content: center;
  padding: 10px 0 40px;
  background: var(--bg-deep);
}
.linkhub-inner { max-width: 460px; width: 100%; }

/* Flat rows split by hairlines - no card boxes. Dropping the box chrome and
   the gaps between cards buys back more vertical room than the added meta
   line costs, so this fits MORE rows per screen than the boxed version did. */
.linkhub-cards { display: block; }
.linkhub-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 17px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: background 0.13s ease;
}
.linkhub-card:last-child { border-bottom: 0; }
/* The audio row is a <button>, so it needs the browser's button styling
   stripped back to match the anchor rows exactly. */
.linkhub-card--audio {
  width: 100%;
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.linkhub-card--audio:last-child { border-bottom: 0; }
.linkhub-card:hover { background: rgba(255, 255, 255, 0.045); }
.linkhub-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.linkhub-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161616;
  border-radius: 5px;
  overflow: hidden;
}
.linkhub-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.linkhub-thumb--photo img { object-fit: cover; }
.linkhub-card-text { flex: 1 1 auto; min-width: 0; }
.linkhub-card-title {
  display: block;
  color: var(--pure-white);
  font-size: 0.895rem;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.linkhub-card-desc {
  display: block;
  color: #A7A7A7;
  font-size: 0.755rem;
  font-weight: 500;
  line-height: 1.33;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linkhub-card-meta {
  display: block;
  color: #CFCFCF;
  font-size: 0.655rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
/* Filled = costs money. Outlined = free. */
.linkhub-card-badge {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 6px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #141414;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 6px;
  border-radius: 3px;
}
.linkhub-card-badge--free { background: transparent; color: var(--accent); }
.linkhub-card-go {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.linkhub-footnote {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.68rem;
  margin: 26px 0 0;
}

/* ===== Free guide lead capture ===== */
.freeguide-page {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 32px var(--side-pad-mobile) 56px;
  background: var(--bg-deep);
}
.freeguide-inner {
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.freeguide-back {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  margin-bottom: 20px;
}
.freeguide-back:hover { color: var(--accent); }
.freeguide-cover {
  width: 100%;
  max-width: 210px;
  display: block;
  margin: 0 auto 22px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.freeguide-headline {
  font-family: 'Oswald', 'Plus Jakarta Sans', sans-serif;
  color: var(--pure-white);
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.22;
  margin: 6px 0 14px;
}
.freeguide-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 26px;
}
.freeguide-modules {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.freeguide-module {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: linear-gradient(135deg, var(--tile-1) 0%, #1c1c1c 100%);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
}
.freeguide-module-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 3px;
}
.freeguide-module-title {
  color: var(--soft-white);
  font-size: 0.87rem;
  line-height: 1.35;
}
.freeguide-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.freeguide-input {
  background: var(--tile-1);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  color: var(--pure-white);
  font-size: 1rem;
  padding: 14px 16px;
  text-align: center;
  width: 100%;
}
.freeguide-input::placeholder { color: #7a7a7a; }
/* display:flex above beats the UA [hidden] rule, so hiding the form after a
   successful submit needs this explicitly or the form stays on screen. */
.freeguide-form[hidden] { display: none; }
.freeguide-submit { width: 100%; }
.freeguide-error {
  color: #e05c5c;
  font-size: 0.85rem;
  margin: 12px 0 0;
}
.freeguide-success {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 22px 18px;
}
.freeguide-success-title {
  font-family: 'Oswald', 'Plus Jakarta Sans', sans-serif;
  color: var(--pure-white);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.freeguide-success-body {
  color: var(--soft-white);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.freeguide-download { width: 100%; }
.freeguide-fineprint {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin: 18px 0 0;
}

.auth-confirmed {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--soft-white);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 16px;
  margin: 0 0 20px;
}

.site-footer-legal {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.6;
  text-align: center;
  margin: 18px auto 0;
  max-width: 520px;
}

/* Legal pages carry mailto links; the browser default blue clashes badly
   with the dark/gold palette. */
.block-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.block-body a:hover { color: var(--pure-white); }


/* ============================================================
   HOMEPAGE REBUILD 2026-09-10
   Sharp corners, gold hairlines, real grid rhythm. The old
   middle of the page was one grey tile holding four unrelated
   ideas with a 3-card grid that wrapped 2-then-1 at every
   width. Each idea now owns a section and every grid either
   fits its row or stacks to one column.
   ============================================================ */

.section-kicker {
  font-family: 'Oswald', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.section-kicker--gold { color: var(--accent-gold); }

/* ---------- Hero: listen panel + free guide, superimposed ---------- */
.hero-listen-panel {
  margin: 24px 0 20px;
  padding: 22px;
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent-gold);
  backdrop-filter: blur(6px);
  max-width: 460px;
}
.hero-listen-panel .hero-listen-kicker { margin: 0; }
.hero-listen-panel .hero-listen-btn { margin: 12px 0 0; }

.hero-freebie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-freebie-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  padding: 4px 9px;
  flex-shrink: 0;
}
.hero-freebie-text { flex: 1 1 180px; min-width: 0; }
.hero-freebie-title {
  font-weight: 800;
  color: var(--pure-white);
  font-size: 0.95rem;
  margin: 0;
}
.hero-freebie-sub {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 2px 0 0;
}
.hero-freebie-btn {
  flex-shrink: 0;
  background: var(--accent-gold);
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  text-decoration: none;
  white-space: nowrap;
}
.hero-freebie-btn:hover { background: #e0b62c; }
.hero-video-caption {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 8px 0 0;
}

/* ---------- OB origin story: the recording, nothing else ---------- */
.ob-story-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px var(--side-pad-mobile);
  background: var(--bg-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ob-story-inner { max-width: var(--max-width); margin: 0 auto; }
.ob-story-player {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 20px;
  background: var(--bg-main);
  border: 1px solid var(--accent-border);
}
.ob-story-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-gold);
  flex-shrink: 0;
}
.ob-story-player-body { flex: 1 1 200px; min-width: 0; }
.ob-story-track {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pure-white);
  margin: 0 0 10px;
}
.ob-story-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-gold);
  color: var(--bg-deep);
  border: none;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  cursor: pointer;
}
.ob-story-btn:hover { background: #e0b62c; }
.ob-story-signoff {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.88rem;
}

/* ---------- Lying Folk: the free lead magnet ---------- */
.freebie-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(201, 162, 39, 0.10), transparent 60%),
    var(--bg-main);
}
.freebie-inner { max-width: var(--max-width); margin: 0 auto; }
.freebie-badge {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: var(--accent-gold);
  padding: 5px 11px;
  margin-bottom: 12px;
}
.freebie-head { margin-bottom: 26px; }
.freebie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}
.freebie-preview { min-width: 0; }
.freebie-preview .slide-previewer { margin-top: 8px; }
.freebie-side {
  border: 1px solid var(--accent-border);
  background: var(--bg-deep);
  padding: 22px;
}
.freebie-box-img {
  width: 128px;
  max-width: 55%;
  display: block;
  margin: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.freebie-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.freebie-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  line-height: 1.5;
}
.freebie-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--accent-gold);
}
.freebie-cta {
  display: block;
  text-align: center;
  background: var(--accent-gold);
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 15px 20px;
  text-decoration: none;
}
.freebie-cta:hover { background: #e0b62c; }
.freebie-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 10px 0 0;
}

/* ---------- Bestseller ---------- */
.bestseller-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background: var(--bg-deep);
}
.bestseller-box-link { display: block; margin: 22px 0 6px; }
.bestseller-box-img {
  display: block;
  width: 260px;
  max-width: 78%;
  border: 1px solid var(--accent-border);
  padding: 10px;
  background: var(--bg-main);
}

/* ---------- What We Deliver ---------- */
.deliver-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background: var(--bg-main);
}
.deliver-inner { max-width: var(--max-width); margin: 0 auto; }
.deliver-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
.deliver-card {
  position: relative;
  padding: 24px 20px 22px;
  background: var(--bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 2px solid var(--accent-gold);
  overflow: hidden;
}
.deliver-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(201, 162, 39, 0.14);
}
.deliver-icon { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.deliver-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pure-white);
  margin: 0 0 7px;
}
.deliver-body {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Disciplines ---------- */
.disciplines-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background:
    linear-gradient(180deg, var(--bg-deep), var(--bg-main));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.disciplines-inner { max-width: var(--max-width); margin: 0 auto; }
.disciplines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.discipline-card {
  position: relative;
  background: var(--bg-deep);
  padding: 20px 20px 18px 52px;
  transition: background 0.18s ease;
}
.discipline-card:hover { background: #111; }
.discipline-index {
  position: absolute;
  left: 18px;
  top: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
}
.discipline-card-name {
  font-family: 'Oswald', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--pure-white);
  margin: 0 0 6px;
}
.discipline-card-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
}
.disciplines-foot {
  margin: 20px 0 0;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* ---------- Instructors + the voices ---------- */
.instructors-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background: var(--bg-main);
}
.instructors-inner { max-width: var(--max-width); margin: 0 auto; }
.instructor-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
.instructor-card {
  background: var(--bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 26px 22px;
  text-align: center;
}
.instructor-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-gold);
  margin: 0 auto 14px;
  display: block;
}
.instructor-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pure-white);
  margin: 0 0 3px;
}
.instructor-role {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 12px;
}
.instructor-bio {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}
.voices-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-gold);
  margin: 40px 0 4px;
}
.voices-lede {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 18px;
}
.voices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.voice-card {
  background: var(--bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 2px solid rgba(201, 162, 39, 0.4);
  padding: 16px 14px;
}
.voice-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px dashed var(--accent-border);
  background: rgba(201, 162, 39, 0.08);
  color: var(--accent-gold);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.voice-name {
  font-family: 'Oswald', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pure-white);
  margin: 0 0 5px;
}
.voice-bio {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

/* ---------- What you get / what you don't ---------- */
.getnot-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background: var(--bg-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.getnot-inner { max-width: var(--max-width); margin: 0 auto; }
.getnot-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
.getnot-col {
  background: var(--bg-main);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 22px 20px;
}
.getnot-col--yes { border-top: 3px solid var(--accent-gold); }
.getnot-col--no { border-top: 3px solid #4a4a4a; }
.getnot-col-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
  color: var(--pure-white);
}
.getnot-col-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.getnot-col--yes .getnot-col-mark { background: var(--accent-gold); color: var(--bg-deep); }
.getnot-col--no .getnot-col-mark { background: #3a3a3a; color: var(--soft-white); }
.getnot-list { list-style: none; padding: 0; margin: 0; }
.getnot-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  line-height: 1.5;
}
.getnot-list li:last-child { border-bottom: none; }
.getnot-col--no .getnot-list li { color: var(--text-muted); }

@media (min-width: 720px) {
  .deliver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .disciplines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instructor-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .getnot-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .freebie-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .ob-story-section,
  .freebie-section,
  .bestseller-section,
  .deliver-section,
  .disciplines-section,
  .instructors-section,
  .getnot-section { padding-left: var(--side-pad); padding-right: var(--side-pad); }
}

/* Wrappers and the struggle/outcome frame had no rules at all, so they
   rendered as unconstrained full-bleed text next to sections that were
   properly centred. */
.reviews-inner,
.stories-inner { max-width: var(--max-width); margin: 0 auto; }

.text-frame {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid var(--accent-gold);
  background: rgba(255, 255, 255, 0.02);
  padding: 20px 22px;
  margin: 14px 0 24px;
}
.text-frame p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 10px;
}
.text-frame p:last-child { margin-bottom: 0; }
.text-frame strong {
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  display: block;
  margin-bottom: 3px;
}

/* .hero-bc-content is a flex item in .hero-offer--boring. Flex items default
   to min-width:auto, so they refuse to shrink below their min-content width:
   one long headline word was pushing the whole column (headline, listen panel
   and free-guide row) past the right edge of the screen. Constraining the
   item and allowing the headline to break fixes the overflow at every width;
   the 460px max-width on the element still governs desktop. */
.hero-offer--boring .hero-bc-content {
  width: 100%;
  min-width: 0;
}
.hero-offer--boring .bc-headline {
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero-listen-panel { max-width: min(460px, 100%); }

/* 13 disciplines in a 2-column grid leaves one empty cell, which reads as a
   broken box because the grid gap uses a lighter background. The last card
   spans the full row instead. */
@media (min-width: 720px) {
  .discipline-card:last-child { grid-column: 1 / -1; }
}

/* Closing free-guide CTA. Shares the freebie styling so the offer looks the
   same at the bottom of the page as it does in the hero and the Lying Folk
   section: one offer, one treatment. */
.closing-free-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px var(--side-pad-mobile);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, 0.10), transparent 62%),
    var(--bg-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* Left-aligned to match every other band on the page. A centred closing
   section was the only centred thing on the homepage and read as a stray
   template. */
.closing-free-section .plain-tile-inner { max-width: var(--max-width); margin: 0 auto; }
.closing-free-section .bc-lede { margin: 0 0 22px; }
.closing-free-cta { max-width: 340px; margin: 0; }
@media (min-width: 1024px) {
  .closing-free-section { padding-left: var(--side-pad); padding-right: var(--side-pad); }
}

/* .freebie-note is centred where it sits under a centred card in the Lying
   Folk section. In the left-aligned closing band it has to follow the button. */
.closing-free-section .freebie-note { text-align: left; }

/* The hero free row is now a link down to the Lying Folk section rather than
   a second conversion CTA, so it needs to read as one tappable strip. */
a.hero-freebie { text-decoration: none; }
a.hero-freebie:hover .hero-freebie-title { color: var(--accent-gold); }
.hero-freebie-arrow {
  flex-shrink: 0;
  color: var(--accent-gold);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* The what-you-get grid lost its left cell (the repeated course-box photo),
   so the icon list now owns the full width instead of sitting in a column
   sized for a two-up layout. */
.whatyouget-list--full { width: 100%; }

/* Hero offer. Nearly every visitor lands on the homepage and leaves without
   scrolling, so the free offer had to move above the fold and become the
   loudest element rather than a quiet strip under a bigger audio button. */
.hero-offer-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.hero-offer-badge {
  background: var(--accent-gold);
  color: var(--bg-deep);
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 9px;
}
.hero-offer-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--pure-white);
  margin: 0 0 8px;
}
.hero-offer-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 16px;
}
.hero-offer-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent-gold);
  color: var(--bg-deep);
  font-family: 'Oswald', sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 22px;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}
.hero-offer-cta:hover { background: #e0b62c; }
.hero-offer-note {
  color: var(--text-muted);
  font-size: 0.76rem;
  margin: 9px 0 0;
  text-align: center;
}
.hero-listen-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-listen-secondary {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 10px 18px;
  cursor: pointer;
  width: 100%;
}
.hero-listen-secondary:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
@media (min-width: 720px) {
  .hero-offer-cta { display: inline-block; width: auto; min-width: 280px; }
  .hero-offer-note { text-align: left; }
  .hero-listen-secondary { width: auto; }
}



/* Audio rows on the link page: clip length in the meta line, and a progress
   bar along the bottom edge of the row while it plays. */
.linkhub-card--audio { position: relative; }
.linkhub-card-time {
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.linkhub-card-time:not(:empty)::before {
  content: '\00b7';
  color: var(--text-muted);
  margin-right: 8px;
}
.linkhub-card-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  display: block;
  pointer-events: none;
}
.linkhub-card-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-gold);
  transition: width 0.2s linear;
}
.linkhub-card--playing .linkhub-card-title { color: var(--accent-gold); }

/* Audio player. A round transport button, the track name, and a seekable
   scrubber with elapsed and total either side. The previous version was a
   rectangular button with a bar stuck underneath, which read as neither a
   button nor a player. The circle is deliberate: it is a transport control,
   not a card, and the site already uses circles for avatars. */
.aplay {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 16px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.aplay-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--accent-gold);
  color: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.aplay-btn:hover { background: #e6bb2e; transform: scale(1.06); }
.aplay-btn:active { transform: scale(0.97); }
.aplay-icon { display: flex; line-height: 0; margin-left: 1px; }
.aplay--playing .aplay-icon { margin-left: 0; }

.aplay-body { flex: 1; min-width: 0; }
.aplay-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--pure-white);
  margin: 0 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aplay--playing .aplay-label { color: var(--accent-gold); }

.aplay-scrub { display: flex; align-items: center; gap: 9px; }
.aplay-elapsed,
.aplay-total {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 30px;
}
.aplay-total { text-align: right; }
.aplay-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 14px;               /* tall hit area, thin visible line */
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.aplay-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
}
.aplay-fill {
  position: absolute;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--accent-gold);
}
.aplay-knob {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pure-white);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.aplay:hover .aplay-knob,
.aplay--playing .aplay-knob { opacity: 1; }

/* Primary: the course intro and OB's story, where the clip is the point. */
.aplay--primary { background: rgba(201, 162, 39, 0.10); border-color: var(--accent-border); }

/* Quiet: the hero, where the free offer outranks it. */
.aplay--quiet { background: rgba(0, 0, 0, 0.35); }
.aplay--quiet .aplay-btn { width: 40px; height: 40px; }
.aplay--quiet .aplay-label { font-size: 0.82rem; }

/* ============================================================
   SPINE + CENTRED BANDS
   The page read as a stack of unrelated left-aligned tiles. One
   thread now runs down it: a length of rule, a numbered node,
   the band label. Bands are centred so the thread has something
   to run through instead of sitting off to one side.
   ============================================================ */
.spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 20px;
}
.spine-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, var(--accent-border) 55%, var(--accent-gold));
}
.spine-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -1px;
  border: 1px solid var(--accent-gold);
  background: var(--bg-deep);
  color: var(--accent-gold);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(45deg);
  position: relative;
}
/* The diamond is a rotated square, so the number inside is counter-rotated
   to sit upright. Rotating the text with the box was the first attempt and
   it read as a mistake. */
.spine-num {
  display: block;
  transform: rotate(-45deg);
  line-height: 1;
}
.spine-label {
  margin-top: 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Bands centre their own heading block. Card bodies and lists stay
   left-aligned: centred multi-line prose is hard to read. */
.freebie-section,
.bestseller-section,
.ob-story-section,
.deliver-section,
.disciplines-section,
.instructors-section,
.getnot-section,
.reviews-section,
.stories-section { text-align: center; }

.freebie-section .bc-lede,
.bestseller-section .bc-lede,
.ob-story-section .bc-lede,
.deliver-section .bc-lede,
.disciplines-section .bc-lede,
.instructors-section .bc-lede,
.getnot-section .bc-lede,
.reviews-section .bc-lede,
.stories-section .bc-lede { margin-left: auto; margin-right: auto; }

.freebie-section .account-subheading,
.bestseller-section .account-subheading { text-align: center; }

/* Anything that is a block of reading or a list goes back to the left. */
.freebie-side,
.freebie-list,
.getnot-col,
.discipline-card,
.text-frame,
.whatyouget-list,
.voice-card,
.review-card,
.story-card { text-align: left; }

.bestseller-box-link { display: inline-block; margin-left: auto; margin-right: auto; }
.bestseller-section .aplay,
.ob-story-section .aplay,
.freebie-section .aplay { margin-left: auto; margin-right: auto; }
.ob-story-section .ob-story-player { justify-content: center; }
.freebie-section .freebie-box-img { margin-left: auto; margin-right: auto; }
.deliver-section .deliver-card { text-align: center; }
/* The ghost 01/02/03 behind each card is gone. Centred, it sat directly
   behind the icon and read as a smudge, and the spine now numbers the bands
   anyway, so a second numbering was competing with it. */
.deliver-section .deliver-num { display: none; }
.deliver-section .deliver-icon { margin-left: auto; margin-right: auto; }

/* bc-headline--wrap caps at 460px, which is right for a left-aligned column
   but leaves a centred headline dropping one orphaned word onto its own
   line. Centred bands get room to break evenly. */
.freebie-section .bc-headline--wrap,
.bestseller-section .bc-headline--wrap,
.ob-story-section .bc-headline--wrap,
.deliver-section .bc-headline--wrap,
.disciplines-section .bc-headline--wrap,
.instructors-section .bc-headline--wrap,
.getnot-section .bc-headline--wrap,
.reviews-section .bc-headline--wrap,
.stories-section .bc-headline--wrap {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* Grit: corner ticks on the structural cards. Two hairlines in the top-left
   and bottom-right, the way a technical drawing marks a crop. Cheap, and it
   stops every card reading as a plain rounded-off rectangle. */
.deliver-card,
.instructor-card,
.getnot-col,
.voice-card { position: relative; }
.deliver-card::before,
.instructor-card::before,
.getnot-col::before,
.voice-card::before,
.deliver-card::after,
.instructor-card::after,
.getnot-col::after,
.voice-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--accent-gold);
  opacity: 0.55;
  pointer-events: none;
}
.deliver-card::before,
.instructor-card::before,
.getnot-col::before,
.voice-card::before {
  top: 6px; left: 6px;
  border-top: 1px solid; border-left: 1px solid;
}
.deliver-card::after,
.instructor-card::after,
.getnot-col::after,
.voice-card::after {
  bottom: 6px; right: 6px;
  border-bottom: 1px solid; border-right: 1px solid;
}

/* Grit: a faint rule grid behind the darker bands, so flat black areas have
   some structure without becoming noisy. */
.ob-story-section,
.getnot-section,
.bestseller-section {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 68px),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deep));
}