/* /ai static page — shell (no Tailwind). Typography/layout for sections that previously relied on utility classes. */

html.ai-hide-ai-root #ai-prototype-root {
  opacity: 0 !important;
  visibility: hidden !important;
}

#ai-prototype-root {
  opacity: 0;
  visibility: hidden;
}

body[data-ai-page-ready="true"] #ai-prototype-root {
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms ease-out;
}

/* Prototype bundle reads these (public/ai-page-css/prototype.css) */
body[data-ai-page="true"] {
  --color-primary-bg: var(--ai-color-black);
  --color-secondary-bg: var(--ai-color-black);
  --color-sticky-bar: var(--ai-color-surface);
  --color-card-bg: var(--ai-color-surface);
  --color-accent: var(--ai-color-accent);
  --color-cta-primary: var(--ai-color-accent);
  --color-text-primary: var(--ai-color-white);
  --color-text-secondary: color-mix(in srgb, var(--ai-color-gray) 55%, var(--ai-color-white) 45%);
  --color-text-muted: var(--ai-color-gray);
  --color-accent-rgb: var(--ai-color-accent-rgb);
  --color-primary-bg-rgb: 30, 29, 31;
}

/* Layout tokens — colors live in /ai/css/colors.css */
:root {
  --sticky-bar-height: 48px;
  --hero-dot-opacity: 0.13;
  --section-dot-opacity: 0.1;
  --ai-hero-overlay-opacity: 0.6;
  --ai-hero-background-blur: 10px;
}

/* Dark scrollbar — Backtrack pattern, /ai-owned tokens (not @imported). */
html:has(body[data-ai-page="true"]) {
  color-scheme: dark;
  overflow-x: hidden;
  scrollbar-color: color-mix(in srgb, var(--ai-color-accent) 12%, var(--ai-color-black) 88%)
    var(--ai-color-black);
}

html:has(body[data-ai-page="true"])::-webkit-scrollbar,
body[data-ai-page="true"]::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:has(body[data-ai-page="true"])::-webkit-scrollbar-track,
body[data-ai-page="true"]::-webkit-scrollbar-track {
  background: var(--ai-color-black);
}

html:has(body[data-ai-page="true"])::-webkit-scrollbar-thumb,
body[data-ai-page="true"]::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--ai-color-accent) 12%, var(--ai-color-black) 88%);
  border-radius: 999px;
  border: 2px solid var(--ai-color-black);
}

html:has(body[data-ai-page="true"])::-webkit-scrollbar-thumb:hover,
body[data-ai-page="true"]::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--ai-color-accent) 18%, var(--ai-color-black) 82%);
}

@media (max-width: 768px) {
  html:has(body[data-ai-page="true"]),
  body[data-ai-page="true"] {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ai-color-accent) 12%, var(--ai-color-black) 88%)
      transparent;
  }

  html:has(body[data-ai-page="true"])::-webkit-scrollbar,
  body[data-ai-page="true"]::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  html:has(body[data-ai-page="true"])::-webkit-scrollbar-track,
  body[data-ai-page="true"]::-webkit-scrollbar-track {
    background: transparent;
  }

  html:has(body[data-ai-page="true"])::-webkit-scrollbar-thumb,
  body[data-ai-page="true"]::-webkit-scrollbar-thumb {
    border: 0;
  }
}

html,
body {
  background-color: var(--ai-color-black);
}

body[data-ai-page="true"] {
  background-color: var(--ai-color-black) !important;
  background-image: none !important;
}

body[data-ai-page="true"] #ai-prototype-root {
  position: relative;
  isolation: isolate;
  background-color: var(--ai-color-black) !important;
  background-image: none !important;
  overflow-x: hidden;
  overflow-x: clip;
}

body[data-ai-page="true"] #ai-prototype-root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--ai-color-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--ai-color-accent) 1px, transparent 1px);
  background-size: var(--ai-canvas-grid-size) var(--ai-canvas-grid-size);
  background-position: 0 0;
  /* Match /backtrack and /lux canvas grid strength. */
  opacity: 0.05;
}

/* Do not set position on .sticky-bar — it must stay position:fixed (prototype.css). */
body[data-ai-page="true"] #ai-prototype-root > *:not(.sticky-bar) {
  position: relative;
  z-index: 1;
}

/* Sticky promo bar — restore fixed slide-in after hero (ai-sticky.js toggles visible/hidden). */
body[data-ai-page="true"] #ai-prototype-root > .sticky-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  background: var(--ai-color-surface) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-color-gray) 28%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-ai-page="true"] #ai-prototype-root > .sticky-bar.sticky-bar-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-ai-page="true"] #ai-prototype-root > .sticky-bar.sticky-bar-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 64rem !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-left {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 !important;
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-left > * + * {
  margin-left: 0.5rem !important;
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-text {
  color: #fff !important;
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-text-mobile {
  display: flex !important;
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-text-desktop {
  display: none !important;
}

@media (min-width: 640px) {
  body[data-ai-page="true"] #ai-prototype-root .sticky-bar-text-mobile {
    display: none !important;
  }

  body[data-ai-page="true"] #ai-prototype-root .sticky-bar-text-desktop {
    display: flex !important;
    gap: 0.25em;
  }
}

body[data-ai-page="true"] #ai-prototype-root .sticky-bar-cta {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  padding: 0.5rem 1rem !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--ai-color-accent) !important;
  color: var(--ai-color-black) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

@media (max-width: 767px) {
  body[data-ai-page="true"] #ai-prototype-root {
    --ai-canvas-grid-size: 18px;
  }
}

/*
 * Keep nested surfaces transparent so only the canvas + grid show through.
 * prototype.css still paints body (#121d39), main (dot grid), .section-padding, etc.
 */

body[data-ai-page="true"] #ai-prototype-root > main,
body[data-ai-page="true"] #ai-prototype-root main,
body[data-ai-page="true"] #ai-prototype-root .ai-page-main,
body[data-ai-page="true"] #ai-prototype-root .bg-dark-50,
body[data-ai-page="true"] #ai-prototype-root .bg-dark-100,
body[data-ai-page="true"] #ai-prototype-root .section-padding,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-section,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-content-wrap,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-grid,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-content,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-right-column {
  background-color: transparent !important;
  background-image: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .section-padding::before,
body[data-ai-page="true"] #ai-prototype-root .section-padding::after {
  content: none !important;
  display: none !important;
}

/* Kill legacy prototype radial-dot washes (cards, body, testimonial overlay, etc.). */
body[data-ai-page="true"] #ai-prototype-root .card,
body[data-ai-page="true"] #ai-prototype-root .dashboard-card,
body[data-ai-page="true"] #ai-prototype-root .ai-project-card,
body[data-ai-page="true"] #ai-prototype-root .ai-pricing-card,
body[data-ai-page="true"] #ai-prototype-root .ai-testimonial-highlight-section,
body[data-ai-page="true"] #ai-prototype-root .testimonial-highlight-section {
  background-image: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-testimonial-highlight-overlay {
  display: none !important;
}

/* Hero: no stacked gradient wash — content sits on the shared page backdrop. */
body[data-ai-page="true"] #ai-prototype-root .ai-hero-section {
  position: relative;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-content-wrap {
  position: relative;
  z-index: 1;
}

/* Direct section rhythm (static HTML has no .ai-page-block wrappers). */
body[data-ai-page="true"] #ai-prototype-root .ai-page-main > section.section-padding {
  padding-top: var(--ai-space-section-top, clamp(2.75rem, 5vw, 4rem));
  padding-bottom: var(--ai-space-section-bottom, clamp(2rem, 3.5vw, 3rem));
}

body[data-ai-page="true"] #ai-prototype-root .ai-page-main > section.ai-hero-section {
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* prototype.css zeros projects top padding at 1024px — restore rhythm after testimonial embeds */
body[data-ai-page="true"] #ai-prototype-root section.section-padding.projects-section,
body[data-ai-page="true"] #ai-prototype-root .ai-projects-section {
  padding-top: clamp(2rem, 3.5vw, 2.75rem) !important;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* prototype.css adds 50–60px top margin to all trust rows on small screens */
body[data-ai-page="true"] #ai-prototype-root .ai-hero-trust.testimonials-trust-container {
  margin-top: 0 !important;
}

/* Hero benefit rows — SVG icons use .ai-hero-benefit-icon (not legacy .hero-benefit-check) */
body[data-ai-page="true"] #ai-prototype-root .hero-benefit-item,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-benefit-item {
  align-items: center !important;
  gap: 0.75rem !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-benefit-text,
body[data-ai-page="true"] #ai-prototype-root .hero-benefit-text {
  flex: 1;
  min-width: 0;
}

body[data-ai-page="true"] #ai-prototype-root [data-ai-roadmap-stack="true"] {
  display: flex;
  flex-direction: column;
}

body[data-ai-page="true"] #ai-prototype-root [data-ai-roadmap-stack="true"] > .ai-roadmap-intro-block + .ai-roadmap-steps-block {
  margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
}

body[data-ai-page="true"] #ai-prototype-root [data-ai-roadmap-stack="true"] > .ai-roadmap-steps-block {
  margin-bottom: 0 !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-intro-block {
  text-align: left !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-intro {
  font-size: var(--ai-font-emphasis) !important;
  color: var(--ai-color-white) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  margin: 0 0 1.25rem !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-intro-block .simple-paragraph:nth-child(n + 3) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: calc(0.375rem + 0.625rem) !important;
  overflow-wrap: break-word !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-intro-block .simple-paragraph:nth-child(n + 3)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.55em !important;
  width: 0.375rem !important;
  height: 0.375rem !important;
  border-radius: 50% !important;
  background: var(--ai-color-accent) !important;
}

/* Author strip: frosted panel card */
body[data-ai-page="true"] #ai-prototype-root .ai-hero-section .author-profile.ai-hero-author-card {
  background: color-mix(in srgb, var(--ai-color-surface) 90%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  border-radius: 1rem !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent) !important;
}

/* Credibility: stat cards — grid layout in content-sections.css */
.ai-credibility-stats-stack > * {
  margin-bottom: 0;
}

/* Credibility: previous-courses block — centered heading + contained row */
body[data-ai-page="true"] #ai-prototype-root .ai-prev-courses-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  margin-top: var(--ai-space-block, 3rem);
  margin-bottom: var(--ai-space-block, 3rem);
}

body[data-ai-page="true"] #ai-prototype-root .ai-prev-courses-heading {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto !important;
  margin-bottom: var(--ai-space-4, 1.5rem) !important;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  text-align: center !important;
  font-weight: 700;
  color: var(--ai-color-white);
}

.ai-prev-courses-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.ai-prev-courses-row > * {
  margin: 0 var(--ai-space-3, 1rem) var(--ai-space-3, 1rem) 0;
}

.ai-prev-course-card {
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .ai-prev-course-card {
    flex: 1 1 0;
    max-width: none;
  }
}

/* Henry quote card layout */
.ai-henry-card-inner {
  text-align: center;
  padding: 1.5rem 1.5rem 2rem;
}

@media (min-width: 640px) {
  .ai-henry-card-inner {
    padding: 2rem 2.5rem;
  }
}

.ai-henry-meta {
  margin-bottom: 1rem;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.ai-henry-meta > * {
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
}

.ai-henry-body {
  color: #e5e7eb;
  line-height: 1.625;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Features grid */
.ai-features-grid-section .ai-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

body[data-ai-page="true"] #ai-prototype-root .ai-features-grid-section .ai-feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body[data-ai-page="true"] #ai-prototype-root .ai-features-grid-section .ai-feature-title {
  flex: 1;
  margin-bottom: 0 !important;
}

.ai-features-grid-section .ai-features-grid > * {
  margin-bottom: 1rem;
}

.ai-features-grid-section .ai-features-grid > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ai-features-grid-section .ai-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ai-features-grid-section .ai-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Curriculum build grid */
.ai-curriculum-build-section .ai-curriculum-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

body[data-ai-page="true"] #ai-prototype-root .ai-curriculum-build-section .ai-curriculum-grid {
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-curriculum-build-section .ai-curriculum-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body[data-ai-page="true"] #ai-prototype-root .ai-curriculum-build-section .ai-curriculum-card-text {
  flex: 1;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  .ai-curriculum-build-section .ai-curriculum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ai-curriculum-build-section .ai-curriculum-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

body[data-ai-page="true"] #ai-prototype-root .ai-curriculum-build-section .ai-curriculum-footer-copy {
  text-align: center !important;
  max-width: 42rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* Icon sizing for stat / feature icons */
.ai-icon-svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ai-icon-svg-lg {
  width: 1.75rem;
  height: 1.75rem;
}

/* FAQ: static page toggles via data-open + ai-faq.js
   Must scope with #ai-prototype-root so display beats reset.css
   `#ai-prototype-root :where(svg) { display: block }` (specificity 1,0,1). */
#ai-prototype-root .ai-faq-item[data-open="false"] .ai-faq-answer-wrap {
  display: none;
}

#ai-prototype-root .ai-faq-item[data-open="true"] .ai-faq-answer-wrap {
  display: block;
}

#ai-prototype-root .ai-faq-item[data-open="false"] .ai-faq-chevron-down {
  display: block;
}

#ai-prototype-root .ai-faq-item[data-open="false"] .ai-faq-chevron-up {
  display: none;
}

#ai-prototype-root .ai-faq-item[data-open="true"] .ai-faq-chevron-down {
  display: none;
}

#ai-prototype-root .ai-faq-item[data-open="true"] .ai-faq-chevron-up {
  display: block;
}

/* Mobile hero GIF: hidden until loaded (matches prior React behavior) */
[data-ai-mobile-gif-shell]:not(.ai-hero-gif-ready) {
  visibility: hidden;
  min-height: 200px;
}

[data-ai-mobile-gif-shell].ai-hero-gif-ready {
  visibility: visible;
}

/* Testimonial highlight overlay removed — legacy dot pattern; section uses canvas only. */

/* Credibility stat icon row */
.ai-credibility-container .flex.justify-center {
  display: flex;
  justify-content: center;
}

.ai-credibility-container .mb-6 {
  margin-bottom: 1.5rem;
}

/* Previous-course carousel cards */
.ai-prev-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .ai-prev-avatar {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .ai-prev-avatar {
    width: 6rem;
    height: 6rem;
  }
}

.ai-prev-avatar-placeholder {
  background: color-mix(in srgb, var(--ai-color-surface) 80%, var(--ai-color-black) 20%);
  border: 1px solid color-mix(in srgb, var(--ai-color-gray) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ai-color-gray) 55%, var(--ai-color-white) 45%);
  font-weight: 600;
}

.ai-prev-name {
  font-weight: 600;
  margin-top: var(--ai-space-2, 0.75rem);
  margin-bottom: var(--ai-space-1, 0.5rem);
  color: var(--ai-color-white);
}

.ai-prev-sub {
  margin-bottom: var(--ai-space-2, 0.75rem);
  opacity: 0.72;
  color: color-mix(in srgb, var(--ai-color-gray) 55%, var(--ai-color-white) 45%);
}

.ai-prev-text {
  color: var(--ai-color-white);
}

/* FAQ: compact collapsed rows — trigger only, no card padding or title margins */
body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-item.dashboard-card {
  padding: 0 !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-trigger {
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-trigger > * + * {
  margin-left: 0;
}

body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-item .ai-faq-title,
body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-item h3.faq-title {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  line-height: 1.3;
  padding-right: 0.25rem;
}

body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-chevron {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0;
  flex-shrink: 0;
}

body[data-ai-page="true"] #ai-prototype-root .ai-faq-item[data-open="false"] .ai-faq-answer-wrap {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 640px) {
  body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-trigger {
    padding: 1.125rem 1.25rem !important;
  }

  body[data-ai-page="true"] #ai-prototype-root .ai-faq-section .ai-faq-answer-wrap {
    padding: 0 1.25rem 1rem;
  }
}

.ai-faq-section .ai-faq-answer {
  max-width: 100%;
}

.ai-faq-section .ai-faq-answer-p {
  margin: 0;
  color: rgba(241, 245, 249, 0.96);
  line-height: 1.65;
}

.ai-faq-section .ai-faq-answer-p + .ai-faq-answer-p {
  margin-top: 0.85rem;
}

.ai-faq-section .ai-faq-strong {
  font-weight: 600;
  color: #f8fafc;
}

.ai-faq-section .ai-faq-answer .ai-highlight-mark {
  font-weight: 600;
}

/*
 * Hero headline glow — accent only.
 */
body[data-ai-page="true"] #ai-prototype-root .gradient-text.ai-hero-headline,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-headline,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-headline.headline__glow {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  font-weight: 800;
  filter: none !important;
  line-height: 1.2 !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--ai-color-accent) 90%, transparent),
    0 0 5px color-mix(in srgb, var(--ai-color-accent) 100%, transparent),
    0 0 12px color-mix(in srgb, var(--ai-color-accent) 88%, transparent),
    0 0 26px color-mix(in srgb, var(--ai-color-accent) 65%, transparent) !important;
}

/*
 * Minimal type + surface system — white copy + soft accent glow (hero headline pattern).
 * Replaces legacy blue gradient fills, neon text, and pulsing card glows page-wide.
 */

body[data-ai-page="true"] #ai-prototype-root .gradient-text:not(.ai-hero-headline),
body[data-ai-page="true"] #ai-prototype-root .dashboard-gradient-text,
body[data-ai-page="true"] #ai-prototype-root h2.dashboard-gradient-text,
body[data-ai-page="true"] #ai-prototype-root h3.dashboard-gradient-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f8fafc !important;
  color: #f8fafc !important;
  filter: none !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--ai-color-accent) 40%, transparent),
    0 0 4px color-mix(in srgb, var(--ai-color-accent) 30%, transparent),
    0 0 10px color-mix(in srgb, var(--ai-color-accent) 18%, transparent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-section-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-story-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-solution-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-difference-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-projects-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-prev-courses-heading:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-obsidian-bonus-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-time-saving-title:not(.section__title),
body[data-ai-page="true"] #ai-prototype-root .ai-bonuses-title:not(.section__title) {
  color: #ffffff !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--ai-color-accent) 40%, transparent),
    0 0 4px color-mix(in srgb, var(--ai-color-accent) 30%, transparent),
    0 0 10px color-mix(in srgb, var(--ai-color-accent) 18%, transparent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-neon-blue-text,
body[data-ai-page="true"] #ai-prototype-root .text-blue-400,
body[data-ai-page="true"] #ai-prototype-root [class*="text-blue-"] {
  color: var(--ai-color-accent) !important;
  text-shadow:
    0 0 1px color-mix(in srgb, var(--ai-color-accent) 40%, transparent),
    0 0 4px color-mix(in srgb, var(--ai-color-accent) 30%, transparent),
    0 0 10px color-mix(in srgb, var(--ai-color-accent) 18%, transparent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .dashboard-label {
  color: rgba(241, 245, 249, 0.92) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .dashboard-card,
body[data-ai-page="true"] #ai-prototype-root .card {
  background: color-mix(in srgb, var(--ai-color-surface) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .dashboard-glow,
body[data-ai-page="true"] #ai-prototype-root .dashboard-glow:hover,
body[data-ai-page="true"] #ai-prototype-root .dashboard-card.dashboard-glow,
body[data-ai-page="true"] #ai-prototype-root .dashboard-card.dashboard-glow:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent) !important;
  border-color: color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  transform: none !important;
  animation: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body[data-ai-page="true"] #ai-prototype-root .dashboard-card.dashboard-glow:hover,
body[data-ai-page="true"] #ai-prototype-root .card:hover,
body[data-ai-page="true"] #ai-prototype-root .ai-project-card:hover {
  border-color: color-mix(in srgb, var(--ai-color-accent) 34%, transparent) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

body[data-ai-page="true"] #ai-prototype-root .dashboard-pulse,
body[data-ai-page="true"] #ai-prototype-root .dashboard-icon.dashboard-pulse {
  animation: none !important;
  box-shadow: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .dashboard-icon {
  color: color-mix(in srgb, var(--ai-color-accent) 88%, #ffffff 12%) !important;
  background: color-mix(in srgb, var(--ai-color-accent) 10%, var(--ai-color-black) 90%) !important;
  border: 1px solid color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  box-shadow: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-step-icon.dashboard-icon {
  margin: 0 auto;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-steps-block {
  width: 100%;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-steps-block .ai-roadmap-title {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-steps {
  align-items: stretch;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-step.dashboard-card {
  list-style: none;
  margin: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-step.dashboard-card:hover {
  transform: translateY(-2px) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-step .ai-roadmap-step-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-step .ai-roadmap-step-title {
  margin: 0 0 0.375rem !important;
  line-height: 1.4 !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-roadmap-step-body > .simple-paragraph:not(.ai-roadmap-step-title) {
  flex: 1;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-author-photo-shell,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-author-fallback {
  background: color-mix(in srgb, var(--ai-color-accent) 28%, var(--ai-color-black) 72%) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-pricing-badge {
  background: color-mix(in srgb, var(--ai-color-accent) 42%, var(--ai-color-black) 58%) !important;
  border: 1px solid color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  box-shadow: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-countdown-box,
body[data-ai-page="true"] #ai-prototype-root .ai-countdown-modal-box {
  background: color-mix(in srgb, var(--ai-color-surface) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  box-shadow: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-header-nav-btn:hover,
body[data-ai-page="true"] #ai-prototype-root .ai-header-mobile-nav-btn:hover,
body[data-ai-page="true"] #ai-prototype-root .ai-header-mobile-toggle:hover,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-social-link:hover,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-link:hover,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-backtop:hover {
  color: color-mix(in srgb, var(--ai-color-accent) 75%, #ffffff 25%) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-project-card {
  background: color-mix(in srgb, var(--ai-color-surface) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .btn-accent {
  background: var(--ai-color-accent) !important;
  border: 1px solid color-mix(in srgb, var(--ai-color-accent) 45%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent) !important;
  color: var(--ai-color-black) !important;
}

body[data-ai-page="true"] #ai-prototype-root .btn-accent:hover {
  background: color-mix(in srgb, var(--ai-color-accent) 88%, #000000 12%) !important;
  border-color: color-mix(in srgb, var(--ai-color-accent) 45%, transparent) !important;
  transform: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-pricing-intro-check,
body[data-ai-page="true"] #ai-prototype-root .ai-bonuses-icon,
body[data-ai-page="true"] #ai-prototype-root .ai-faq-chevron,
body[data-ai-page="true"] #ai-prototype-root .ai-countdown-label-icon,
body[data-ai-page="true"] #ai-prototype-root .ai-countdown-separator,
body[data-ai-page="true"] #ai-prototype-root .ai-countdown-extend-link,
body[data-ai-page="true"] #ai-prototype-root .ai-countdown-modal-separator,
body[data-ai-page="true"] #ai-prototype-root .ai-testimonial-highlight-subtitle-course {
  color: var(--ai-color-accent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-countdown-modal-submit {
  background: var(--ai-color-accent) !important;
  color: var(--ai-color-black) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-countdown-modal-submit:hover {
  background: color-mix(in srgb, var(--ai-color-accent) 88%, #000000 12%) !important;
}

body[data-ai-page="true"] #ai-prototype-root .hover-lift:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

/* Palette enforcement — only colors from colors.css */
body[data-ai-page="true"] #ai-prototype-root .testimonials-trust-text {
  color: var(--ai-color-accent) !important;
  font-weight: 500;
  line-height: var(--ai-line-snug) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-wish-text,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-subtitle,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-benefit-item,
body[data-ai-page="true"] #ai-prototype-root .ai-hero-benefit-text {
  color: color-mix(in srgb, var(--ai-color-gray) 55%, var(--ai-color-white) 45%) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-highlight-mark {
  background-color: var(--ai-color-accent) !important;
  color: var(--ai-color-black) !important;
}

body[data-ai-page="true"] #ai-prototype-root strong,
body[data-ai-page="true"] #ai-prototype-root b,
body[data-ai-page="true"] #ai-prototype-root .ai-faq-strong,
body[data-ai-page="true"] #ai-prototype-root .ai-inline-accent {
  color: var(--ai-color-accent) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700 !important;
}

body[data-ai-page="true"] #ai-prototype-root .card,
body[data-ai-page="true"] #ai-prototype-root .ai-story-mission-card {
  background: color-mix(in srgb, var(--ai-color-surface) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ai-color-gray) 22%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-story-mission-title,
body[data-ai-page="true"] #ai-prototype-root .ai-story-mission-list {
  color: color-mix(in srgb, var(--ai-color-gray) 55%, var(--ai-color-white) 45%) !important;
}

/* Credibility stack: block margins handled in typography.css */
body[data-ai-page="true"] #ai-prototype-root .ai-credibility-container > .ai-credibility-block {
  display: block;
}

body[data-ai-page="true"] #ai-prototype-root .ai-credibility-container .ai-credibility-body-row .ai-credibility-stats-stack {
  margin-block: clamp(3rem, 6vw, 4.5rem) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-henry-card-inner {
  margin-bottom: var(--ai-space-block) !important;
}

body[data-ai-page="true"] #ai-prototype-root [data-ai-credibility-visual="true"] {
  margin-bottom: 0 !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

body[data-ai-page="true"] #ai-prototype-root .ai-robot-illustration-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

body[data-ai-page="true"] #ai-prototype-root .ai-robot-illustration {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-difference-image-inline .ai-robot-illustration-wrap,
body[data-ai-page="true"] #ai-prototype-root .ai-robot-image-inline .ai-robot-illustration-wrap {
  max-width: min(100%, 18rem);
  margin: 0 auto;
}

body[data-ai-page="true"] #ai-prototype-root .ai-robot-image-inline {
  display: flex;
  justify-content: center;
  margin: clamp(0.75rem, 2.5vw, 1.5rem) 0;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-idea-band {
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  padding-top: 0;
  width: 100%;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-idea-wrap {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-idea-visual {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-problem-idea-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body[data-ai-page="true"] #ai-prototype-root .ai-problem-idea-band {
  width: 100%;
  margin: 0;
}

body[data-ai-page="true"] #ai-prototype-root .ai-problem-idea-wrap {
  width: 100%;
  max-width: min(100%, 36rem);
  margin: 0 auto;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-problem-idea-visual {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ai-color-black) 34%, transparent);
  opacity: 1 !important;
  visibility: visible !important;
}


body[data-ai-page="true"] #ai-prototype-root .ai-header-nav-btn,
body[data-ai-page="true"] #ai-prototype-root .ai-header-mobile-nav-btn,
body[data-ai-page="true"] #ai-prototype-root .ai-header-mobile-toggle,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-link,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-social-link,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-backtop,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-copyright,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-madewith {
  color: var(--ai-color-gray) !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-footer-col-title,
body[data-ai-page="true"] #ai-prototype-root .ai-header-logo,
body[data-ai-page="true"] #ai-prototype-root .ai-footer-brand-title {
  color: var(--ai-color-white) !important;
}