@layer theme, base, components, utilities;
@import "../node_modules/tailwindcss/theme.css" layer(theme);
@import "../node_modules/tailwindcss/preflight.css" layer(base);
@import "../node_modules/tailwindcss/utilities.css" layer(utilities) source(none);
@source "./**/*.{js,jsx,ts,tsx,mdx,html}";
@source "../components/**/*.{js,jsx,ts,tsx,mdx}";
@source "../lib/**/*.{js,jsx,ts,tsx,mdx}";
@source "../utils/**/*.{js,jsx,ts,tsx,mdx}";

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));
  --font-sans: var(--font-axiforma), Arial, sans-serif;
  --font-mono: var(--font-axiforma), Arial, sans-serif;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

* {
  border-color: hsl(var(--border));
  outline-color: hsl(var(--ring) / 0.5);
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-axiforma), Arial, sans-serif;
}

/* Introduction-class cards keep a visible one-pixel gold frame. */
.cv-intro-page .border-\[\#C9A96E\] {
  border-color: #d4af37 !important;
}

.cv-intro-page .border-2.border-\[\#C9A96E\] {
  border-width: 1px !important;
}

/* Match the Tailwind v3 responsive typography cascade used by the original
   introduction pages. In v3 the responsive text-size utilities also reset
   line-height; Tailwind v4 preserves the separate leading utility instead. */
@media (min-width: 640px) {
  .cv-intro-page .sm\:text-5xl.leading-\[1\.07\] {
    line-height: 1;
  }
}

@media (min-width: 768px) {
  .cv-intro-page .md\:text-lg.leading-relaxed {
    line-height: 1.75rem;
  }
}

button,
a,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  cursor: pointer;
}

/* Shared course-card motion: matches the reference gold-border reveal style. */
.cv-course-page {
  overflow-x: clip;
}

.cv-course-page section[id] {
  scroll-margin-top: 8rem;
}

.cv-course-page .cv-course-card {
  transition: border-color 250ms ease;
}

/* Keep the visible course pricing header separated with a permanent gold rule. */
.cv-course-page .fixed.top-0.left-0.right-0.z-50 {
  border-bottom: 3px solid #d4af37 !important;
}

.cv-course-page .cv-course-card.cv-card-pending {
  opacity: 1;
  transform: none;
}

.cv-course-page .cv-course-card.cv-card-in-view {
  opacity: 1;
  transform: translateY(0);
}

.cv-course-page .cv-course-card.cv-card-in-view:not([data-static-border]):hover {
  border-color: #d4af37 !important;
  box-shadow: none !important;
  transform: translateY(0);
}

/* Course hover states may change borders or colours, but never add a bottom shadow. */
.cv-course-page [class*="hover:shadow"]:hover {
  box-shadow: none !important;
}

/* The main right-side course preview card always uses its gold frame. */
.cv-course-page [data-hero-preview-card],
.cv-course-page [data-hero-preview-card]:hover {
  border-color: #d4af37 !important;
}

/* Permanent before/after comparison-card frames. */
.cv-course-page [data-transformation-card="before"],
.cv-course-page [data-transformation-card="before"]:hover {
  border: 3px solid #d1d5db !important;
}

.cv-course-page [data-transformation-card="after"],
.cv-course-page [data-transformation-card="after"]:hover {
  border: 3px solid #d4af37 !important;
}

/* Permanent audience-fit cards: white surfaces with fixed reference borders. */
.cv-course-page [data-audience-card="fit"],
.cv-course-page [data-audience-card="fit"]:hover {
  background: #ffffff !important;
  border: 2px solid #e6d3b1 !important;
  box-shadow: none !important;
}

.cv-course-page [data-audience-card="not-fit"],
.cv-course-page [data-audience-card="not-fit"]:hover {
  background: #ffffff !important;
  border: 2px solid #d1d5db !important;
  box-shadow: none !important;
}

/* Curriculum units highlight independently without moving. */
.cv-course-page [data-curriculum-card] {
  transition:
    border-color 250ms ease,
    box-shadow 250ms ease;
}

.cv-course-page [data-curriculum-card]:hover {
  border-color: #d4af37 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Assessment and certificate frames stay fixed with no hover changes. */
.cv-course-page [data-assessment-card],
.cv-course-page [data-assessment-card]:hover {
  border: 2px solid #e6d3b1 !important;
  box-shadow: 0 10px 24px -18px rgb(43 10 17 / 32%) !important;
  transform: none !important;
}

.cv-course-page [data-certificate-card],
.cv-course-page [data-certificate-card]:hover,
.cv-course-page [data-certificate-image-card],
.cv-course-page [data-certificate-image-card]:hover {
  border-color: #d4af37 !important;
  transform: none !important;
}

/* Instructor profile uses one permanent frame and never reacts on hover. */
.cv-course-page [data-instructor-card],
.cv-course-page [data-instructor-card]:hover {
  border: 3px solid #d4af37 !important;
  box-shadow: 0 14px 32px -22px rgb(43 10 17 / 38%) !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cv-course-page .cv-course-card {
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease;
    will-change: auto;
  }

  .cv-course-page .cv-course-card,
  .cv-course-page .cv-course-card:hover {
    opacity: 1;
    transform: none;
  }
}

.grammar-content {
  color: #3d1a24;
  font-size: 15px;
  line-height: 1.7;
}

.grammar-content > * + * {
  margin-top: 1rem;
}

.grammar-content h2,
.grammar-content h3,
.grammar-content h4 {
  color: #1c0a12;
  font-weight: 900;
  line-height: 1.25;
}

.grammar-content h2 {
  font-size: 1.5rem;
}

.grammar-content h3 {
  font-size: 1.25rem;
}

.grammar-content p {
  margin: 0;
}

.grammar-content ul,
.grammar-content ol {
  margin-left: 1.25rem;
}

.grammar-content a {
  color: #4a1429;
  font-weight: 700;
  text-decoration: underline;
}

.grammar-content img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.grammar-content table {
  width: 100%;
  border-collapse: collapse;
}

.grammar-content [style*="grid-template-columns"] {
  min-width: 0;
}

@media (max-width: 640px) {
  .grammar-content [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

.fill-exercise-layout {
  grid-template-columns: minmax(0, 1fr) max-content;
}

@media (max-width: 640px) {
  .fill-exercise-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fill-exercise-answer-bank {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px !important;
  }

  .fill-exercise-answer-bank > button {
    width: var(--fill-answer-width) !important;
    flex: 0 0 var(--fill-answer-width);
  }
}

/* ── Dynamic Tailwind classes used inside grammar_post.content ────────────── */
/* These classes appear in DB-stored HTML and must be defined here since       */
/* Turbopack cannot scan dynamic strings for utility class names.              */

/* Display & layout */
.grammar-content .flex          { display: flex; }
.grammar-content .grid          { display: grid; }
.grammar-content .inline-flex   { display: inline-flex; }
.grammar-content .flex-1        { flex: 1 1 0%; }
.grammar-content .flex-shrink-0 { flex-shrink: 0; }
.grammar-content .overflow-hidden { overflow: hidden; }
.grammar-content .items-center  { align-items: center; }
.grammar-content .items-start   { align-items: flex-start; }
.grammar-content .justify-center { justify-content: center; }
.grammar-content .text-center   { text-align: center; }

/* Gap */
.grammar-content .gap-3 { gap: 0.75rem; }
.grammar-content .gap-4 { gap: 1rem; }

/* Divide */
.grammar-content .divide-x > * + * { border-left-width: 1px; }
.grammar-content .divide-y > * + * { border-top-width: 1px; }

/* Border */
.grammar-content .border   { border-width: 1px; border-style: solid; }
.grammar-content .border-b { border-bottom-width: 1px; border-style: solid; }

/* Border-radius */
.grammar-content .rounded-full { border-radius: 9999px; }
.grammar-content .rounded-xl   { border-radius: 0.75rem; }
.grammar-content .rounded-2xl  { border-radius: 1rem; }
.grammar-content .rounded-3xl  { border-radius: 1.5rem; }

/* Shadow */
.grammar-content .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Sizing */
.grammar-content .h-px   { height: 1px; }
.grammar-content .h-3\.5 { height: 0.875rem; }
.grammar-content .h-4    { height: 1rem; }
.grammar-content .h-7    { height: 1.75rem; }
.grammar-content .w-3\.5 { width: 0.875rem; }
.grammar-content .w-4    { width: 1rem; }
.grammar-content .w-7    { width: 1.75rem; }

/* Padding */
.grammar-content .px-3   { padding-left: 0.75rem;  padding-right: 0.75rem; }
.grammar-content .px-4   { padding-left: 1rem;      padding-right: 1rem; }
.grammar-content .px-5   { padding-left: 1.25rem;   padding-right: 1.25rem; }
.grammar-content .py-1   { padding-top: 0.25rem;    padding-bottom: 0.25rem; }
.grammar-content .py-2\.5 { padding-top: 0.625rem;  padding-bottom: 0.625rem; }
.grammar-content .py-3   { padding-top: 0.75rem;    padding-bottom: 0.75rem; }
.grammar-content .py-3\.5 { padding-top: 0.875rem;  padding-bottom: 0.875rem; }
.grammar-content .py-4   { padding-top: 1rem;        padding-bottom: 1rem; }

/* Margin */
.grammar-content .mb-0\.5 { margin-bottom: 0.125rem; }
.grammar-content .mb-1    { margin-bottom: 0.25rem; }
.grammar-content .mb-4    { margin-bottom: 1rem; }
.grammar-content .mb-5    { margin-bottom: 1.25rem; }
.grammar-content .mt-0\.5 { margin-top: 0.125rem; }
.grammar-content .mt-8    { margin-top: 2rem; }

/* Typography — font weight */
.grammar-content .font-medium    { font-weight: 500; }
.grammar-content .font-bold      { font-weight: 700; }
.grammar-content .font-extrabold { font-weight: 800; }
.grammar-content .font-mono      { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Typography — size */
.grammar-content .text-\[9px\]  { font-size: 9px; }
.grammar-content .text-\[10px\] { font-size: 10px; }
.grammar-content .text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.grammar-content .text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.grammar-content .text-2xl { font-size: 1.5rem;   line-height: 2rem; }

/* Typography — style */
.grammar-content .italic      { font-style: italic; }
.grammar-content .uppercase   { text-transform: uppercase; }
.grammar-content .leading-relaxed { line-height: 1.625; }
.grammar-content .leading-snug    { line-height: 1.375; }
.grammar-content .tracking-wider  { letter-spacing: 0.05em; }
.grammar-content .tracking-widest { letter-spacing: 0.1em; }
.grammar-content .tracking-\[0\.2em\] { letter-spacing: 0.2em; }

/* Typography — color */
.grammar-content .text-\[\#1C0A12\] { color: #1C0A12; }
.grammar-content .text-\[\#3D1A24\] { color: #3D1A24; }
.grammar-content .text-\[\#4A1429\] { color: #4A1429; }
.grammar-content .text-\[\#5A3040\] { color: #5A3040; }
.grammar-content .text-\[\#5A3A10\] { color: #5A3A10; }
.grammar-content .text-\[\#7A5C65\] { color: #7A5C65; }
.grammar-content .text-\[\#D4B038\] { color: #D4B038; }
.grammar-content .text-blue-600    { color: #2563eb; }
.grammar-content .text-emerald-600 { color: #059669; }
.grammar-content .text-emerald-700 { color: #047857; }
.grammar-content .text-violet-600  { color: #7c3aed; }

/* Lucide SVG icons injected via dangerouslySetInnerHTML */
.grammar-content .lucide {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.level-test-question span {
  display: inline;
}

html.level-test-question-active,
html.level-test-question-active body {
  overflow: hidden;
}

html.level-test-question-active .level-test-site-header,
html.level-test-question-active .level-test-site-footer {
  display: none;
}

@keyframes enter {
  0% {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

@keyframes accordion-up {
  0% {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

@keyframes accordion-down {
  0% {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.animate-in,
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"],
.data-\[state\=open\]\:animate-in[data-state="open"],
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 0.15s;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"],
.data-\[state\=closed\]\:animate-out[data-state="closed"],
.data-\[state\=hidden\]\:animate-out[data-state="hidden"],
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 0.15s;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.fade-in-0,
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"],
.data-\[state\=open\]\:fade-in-0[data-state="open"],
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"],
.data-\[state\=closed\]\:fade-out-0[data-state="closed"],
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}

.zoom-in-95,
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: 0.95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: 0.9;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: 0.95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"],
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 0.3s;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 0.5s;
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

@media (min-width: 640px) {
  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}

.legacy-course-page {
  --legacy-course-promo-offset: 0px;
  overflow-x: hidden;
}

.legacy-course-page #stickyPromoBar,
.legacy-course-page #cvteStickyCta,
.legacy-course-page [data-sticky-cta] {
  min-height: 84px;
}

.legacy-course-promo-visible .legacy-course-page {
  --legacy-course-promo-offset: 84px;
}

.legacy-course-promo-visible .legacy-course-page #sectionNavBar,
.legacy-course-promo-visible .legacy-course-page [data-jump-nav],
.legacy-course-promo-visible .legacy-course-page .sticky.top-0 {
  top: var(--legacy-course-promo-offset) !important;
}

.legacy-course-page section,
.legacy-course-page [id] {
  scroll-margin-top: calc(var(--legacy-course-promo-offset) + 24px);
}

.legacy-course-page img {
  object-fit: cover;
}

.legacy-course-page .js-portfolio-card img {
  width: 100%;
  height: 100%;
}

.legacy-course-page .js-hero-preview-youtube-wrap,
.legacy-course-page .js-portfolio-youtube-wrap {
  pointer-events: auto;
}

.legacy-course-page .js-enroll-panel:not(.hidden),
.legacy-course-page .js-enroll-panel.is-active {
  display: block;
}

.legacy-course-page [data-cv-tab-panel][hidden],
.legacy-course-page [data-cv-panel][hidden],
.legacy-course-page .legacy-tab-panel.hidden {
  display: none !important;
}

.legacy-course-page [class*="bg-gradient-to-br"][class*="from-[#4A141E]"][class*="via-[#3B0F18]"][class*="to-[#2B0A11]"] {
  background-image: linear-gradient(to bottom right, #4A141E, #3B0F18, #2B0A11) !important;
}

.legacy-course-page [class*="bg-gradient-to-br"][class*="from-[#4A141E]"][class*="to-[#3B0F18]"],
.legacy-course-page [class*="bg-gradient-to-r"][class*="from-[#4A141E]"][class*="to-[#3B0F18]"] {
  background-image: linear-gradient(to bottom right, #4A141E, #3B0F18) !important;
}

.legacy-course-page [class*="bg-gradient-to-r"][class*="from-[#8B1C1C]"][class*="to-[#D4AF37]"] {
  background-image: linear-gradient(to right, #8B1C1C, #D4AF37) !important;
}

.legacy-course-page [class*="bg-gradient-to-r"][class*="from-[#8B1C1C]/10"][class*="to-[#D4AF37]/10"] {
  background-image: linear-gradient(to right, rgba(139, 28, 28, 0.1), rgba(212, 175, 55, 0.1)) !important;
}

.legacy-course-page [class*="bg-gradient-to-r"][class*="from-[#8B1C1C]"][class*="to-[#4A141E]"] {
  background-image: linear-gradient(to right, #8B1C1C, #4A141E) !important;
}

.legacy-course-page [class*="bg-gradient-to-r"][class*="from-[#25D366]"][class*="to-[#128C7E]"] {
  background-image: linear-gradient(to right, #25D366, #128C7E) !important;
  background-color: #25D366 !important;
}

.legacy-course-page [class*="hover:from-[#128C7E]"]:hover[class*="hover:to-[#25D366]"] {
  background-image: linear-gradient(to right, #128C7E, #25D366) !important;
  background-color: #128C7E !important;
}

.legacy-course-page [class*="bg-gradient-to-br"][class*="from-[#8B1C1C]"][class*="to-[#6B1010]"] {
  background-image: linear-gradient(to bottom right, #8B1C1C, #6B1010) !important;
}

.legacy-course-page [class*="bg-gradient-to-br"][class*="from-[#D4AF37]/5"][class*="to-transparent"] {
  background-image: linear-gradient(to bottom right, rgba(212, 175, 55, 0.05), transparent) !important;
}

.legacy-course-page [class*="bg-gradient-to-tr"][class*="from-[#8B1C1C]/5"][class*="to-transparent"] {
  background-image: linear-gradient(to top right, rgba(139, 28, 28, 0.05), transparent) !important;
}

.legacy-course-page [class*="bg-gradient-to-br"][class*="from-[#F6EFE9]"][class*="to-white"] {
  background-image: linear-gradient(to bottom right, #F6EFE9, #FFFFFF) !important;
}

.legacy-course-page [class*="bg-gradient-to-r"][class*="from-[#F6EFE9]"][class*="to-white"] {
  background-image: linear-gradient(to right, #F6EFE9, #FFFFFF) !important;
}

.legacy-course-page [class*="bg-gradient-to-br"][class*="from-white"][class*="via-[#F6EFE9]/30"][class*="to-white"] {
  background-image: linear-gradient(to bottom right, #FFFFFF, rgba(246, 239, 233, 0.3), #FFFFFF) !important;
}

.legacy-course-page [class*="bg-[#4A141E]"] {
  background-color: #4A141E !important;
}

.legacy-course-page [class*="bg-[#3B0F18]"] {
  background-color: #3B0F18 !important;
}

.legacy-course-page [class*="bg-[#2B0A11]"] {
  background-color: #2B0A11 !important;
}

.legacy-course-page [class*="bg-[#8B1C1C]"] {
  background-color: #8B1C1C !important;
}

.legacy-course-page [class*="bg-[#F6EFE9]"] {
  background-color: #F6EFE9 !important;
}

.legacy-course-page [class*="bg-[#6B1010]"] {
  background-color: #6B1010 !important;
}

.legacy-course-page [class*="bg-[#4A141E]/5"] {
  background-color: rgba(74, 20, 30, 0.05) !important;
}

.legacy-course-page [class*="bg-[#4A141E]/10"] {
  background-color: rgba(74, 20, 30, 0.1) !important;
}

.legacy-course-page [class*="bg-[#8B1C1C]/5"] {
  background-color: rgba(139, 28, 28, 0.05) !important;
}

.legacy-course-page [class*="bg-[#8B1C1C]/10"] {
  background-color: rgba(139, 28, 28, 0.1) !important;
}

.legacy-course-page [class*="bg-[#D4AF37]/5"] {
  background-color: rgba(212, 175, 55, 0.05) !important;
}

.legacy-course-page [class*="bg-[#D4AF37]/10"] {
  background-color: rgba(212, 175, 55, 0.1) !important;
}

.legacy-course-page [class*="bg-[#D4AF37]/20"] {
  background-color: rgba(212, 175, 55, 0.2) !important;
}

.legacy-course-page [class*="bg-[#F6EFE9]/30"] {
  background-color: rgba(246, 239, 233, 0.3) !important;
}

.legacy-course-page [class*="bg-white/8"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.legacy-course-page [class*="bg-white/10"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.legacy-course-page [class*="bg-white/20"] {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.legacy-course-page #sectionNavBar .js-section-link {
  background-color: transparent !important;
}

.legacy-course-page #sectionNavBar .js-section-link.bg-\[\#F6EFE9\] {
  background-color: #F6EFE9 !important;
}

.legacy-course-page #sectionNavBar .js-section-link:hover {
  background-color: #F6EFE9 !important;
}

.legacy-course-page #sectionNavBar [data-scroll-target] {
  background-color: transparent !important;
  color: #4A141E !important;
  font-weight: 600 !important;
}

.legacy-course-page #sectionNavBar [data-scroll-target][aria-current="true"] {
  background-color: #F6EFE9 !important;
  color: #8B1C1C !important;
  font-weight: 900 !important;
}

.legacy-course-page #sectionNavBar [data-scroll-target]:hover {
  background-color: #F6EFE9 !important;
  color: #8B1C1C !important;
}

.legacy-course-page [class*="text-[#2B0A11]"] {
  color: #2B0A11 !important;
}

.legacy-course-page [class*="text-[#4A141E]"] {
  color: #4A141E !important;
}

.legacy-course-page [class*="text-[#4A141E]/60"] {
  color: rgba(74, 20, 30, 0.6) !important;
}

.legacy-course-page [class*="text-[#4A141E]/70"] {
  color: rgba(74, 20, 30, 0.7) !important;
}

.legacy-course-page [class*="text-[#4A141E]/80"] {
  color: rgba(74, 20, 30, 0.8) !important;
}

.legacy-course-page [class*="text-[#8B1C1C]"] {
  color: #8B1C1C !important;
}

.legacy-course-page [class*="text-[#D4AF37]"] {
  color: #D4AF37 !important;
}

.legacy-course-page [class*="text-[#E6D3B1]"] {
  color: #E6D3B1 !important;
}

.legacy-course-page [class*="text-[#E6D3B1]/70"] {
  color: rgba(230, 211, 177, 0.7) !important;
}

.legacy-course-page [class*="text-white"] {
  color: #FFFFFF !important;
}

.legacy-course-page [class*="bg-clip-text"][class*="text-transparent"][class*="from-[#8B1C1C]"][class*="to-[#4A141E]"] {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.legacy-course-page svg[class*="text-[#8B1C1C]"] {
  color: #8B1C1C !important;
  stroke: currentColor !important;
}

.legacy-course-page svg[class*="text-[#D4AF37]"] {
  color: #D4AF37 !important;
  stroke: currentColor !important;
}

.legacy-course-page svg[class*="text-white"] {
  color: #FFFFFF !important;
  stroke: currentColor !important;
}

@media (min-width: 1024px) and (max-height: 900px) {
  .legacy-course-page .lg\:text-6xl {
    font-size: 3.75rem !important;
    line-height: 1.08 !important;
  }

  .legacy-course-page .md\:text-5xl {
    font-size: 3rem !important;
    line-height: 1.12 !important;
  }

  .legacy-course-page .text-xl {
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
  }

  .legacy-course-page section.py-20 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .legacy-course-page section.relative.overflow-hidden > .relative.z-10 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .legacy-course-page .cvte-axiforma .lg\:text-6xl {
    font-size: 3.75rem !important;
    line-height: 1.08 !important;
  }

  .legacy-course-page .cvte-axiforma .text-xl {
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
  }

  .legacy-course-page .cvte-axiforma .md\:py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .legacy-course-page .cvte-axiforma .p-8.rounded-3xl {
    padding: 1.5rem !important;
  }

  .legacy-course-page .cvte-axiforma section.py-20 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}
/* FAQ cards keep a neutral frame until the individual card is hovered. */
.cv-course-page [data-faq-card]:hover,
.legacy-course-page [data-faq-card]:hover {
  border-color: #d4af37 !important;
}

/* Keep translucent marketing pills on their matching brand-colour frames.
   These rules intentionally sit after the legacy course overrides. */
[class~="rounded-full"][class~="bg-[#D4AF37]/8"] {
  background-color: rgb(212 175 55 / 8%) !important;
  border-color: rgb(212 175 55 / 35%) !important;
}

[class~="rounded-full"][class~="bg-[#C9A96E]/15"] {
  background-color: rgb(201 169 110 / 15%) !important;
  border-color: rgb(201 169 110 / 40%) !important;
}

/* Use brand-colour borders throughout every route. Direct RGB values avoid
   browsers falling back to the neutral global border when an opacity colour
   generated by Tailwind is not applied. Solid white media rings/loaders are
   deliberately excluded because they use `border-white` without an opacity. */
[class^="border-white/"],
[class*=" border-white/"],
[class^="border-[#D4AF37]/"],
[class*=" border-[#D4AF37]/"],
[class^="border-[#E6D3B1]/"],
[class*=" border-[#E6D3B1]/"],
[class~="border-[#E6D3B1]"] {
  border-color: rgb(212 175 55 / 35%) !important;
}

.cv-intro-page [class^="border-white/"],
.cv-intro-page [class*=" border-white/"],
.cv-intro-page [class^="border-[#D4AF37]/"],
.cv-intro-page [class*=" border-[#D4AF37]/"],
.cv-intro-page [class^="border-[#E6D3B1]/"],
.cv-intro-page [class*=" border-[#E6D3B1]/"],
.cv-intro-page [class^="border-[#C9A96E]/"],
.cv-intro-page [class*=" border-[#C9A96E]/"],
.cv-intro-page [class~="border-[#E6D3B1]"] {
  border-color: rgb(201 169 110 / 40%) !important;
}

/* Self-paced teacher training landing page */
.self-paced-page {
  color: #2b0b14;
  background: #fff;
}

.self-paced-page .cv-card {
  background: #fff;
  border: 1px solid #e5ddd5;
  box-shadow: 0 10px 30px rgb(74 20 41 / 6%);
}

.self-paced-page .cv-card-hover {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.self-paced-page .cv-card-hover:hover {
  transform: translateY(-4px);
  border-color: rgb(212 176 56 / 55%);
  box-shadow: 0 18px 42px rgb(74 20 41 / 12%);
}

.self-paced-page .cv-badge-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(212 176 56 / 38%);
  border-radius: 9999px;
  background: rgb(212 176 56 / 12%);
  padding: 0.4rem 0.8rem;
  color: #80651d;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.self-paced-page .cv-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d4b038 0%, #c49a24 100%);
  color: #2b0b14;
  box-shadow: 0 9px 24px rgb(212 176 56 / 22%);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.self-paced-page .cv-btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgb(212 176 56 / 30%);
}

.self-paced-page .cv-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 24%);
  background: rgb(255 255 255 / 8%);
  color: #fff;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.self-paced-page .cv-btn-secondary:hover {
  border-color: rgb(212 176 56 / 50%);
  background: rgb(255 255 255 / 13%);
}

.self-paced-page .cv-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(74 20 41 / 24%);
  background: #fff;
  color: #4a1429;
  box-shadow: 0 7px 20px rgb(74 20 41 / 7%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.self-paced-page .cv-btn-outline:hover {
  transform: translateY(-1px);
  border-color: rgb(212 176 56 / 70%);
  box-shadow: 0 10px 24px rgb(74 20 41 / 11%);
}

.self-paced-page .cv-badge-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(74 20 41 / 20%);
  border-radius: 9999px;
  background: rgb(74 20 41 / 7%);
  padding: 0.4rem 0.8rem;
  color: #4a1429;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.self-paced-page .cv-section-white {
  background: #fff;
}

.self-paced-page .cv-section-cream {
  background: #f2ebe3;
}

/* Voice & Accent reference-page tokens */
.voice-accent-foundation .voice-accent-content {
  font-family: var(--font-voice-accent), sans-serif;
}

.voice-accent-foundation .cv-card {
  border-radius: 16px;
  box-shadow:
    0 1px 4px rgb(74 20 41 / 4%),
    0 4px 14px rgb(74 20 41 / 3%);
}

.voice-accent-foundation .cv-badge-gold {
  border-color: rgb(212 176 56 / 45%);
  border-radius: 999px;
  background: #fff8e7;
  padding: 0.2rem 0.65rem;
  color: #6b5d52;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.voice-accent-foundation .cv-badge-brand {
  border-color: rgb(74 20 41 / 18%);
  border-radius: 999px;
  background: rgb(74 20 41 / 7%);
  padding: 0.2rem 0.65rem;
  color: #5a1f34;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.voice-accent-foundation .cv-btn-primary {
  border-radius: 14px;
  background: #d4b038;
  padding: 0.75rem 1.75rem;
  font-weight: 800;
  box-shadow: 0 3px 14px rgb(212 176 56 / 35%);
}

.voice-accent-foundation .cv-btn-secondary {
  border-color: rgb(255 255 255 / 28%);
  border-radius: 14px;
  background: rgb(255 255 255 / 10%);
  padding: 0.75rem 1.75rem;
  font-weight: 700;
}

.voice-accent-foundation .cv-btn-outline {
  border-color: #e5ddd5;
  border-radius: 14px;
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  box-shadow: none;
}

.voice-accent-foundation .cv-section-cream {
  background: #f5efe7;
}

.voice-accent-foundation .voice-accent-content > section:first-of-type h1 {
  line-height: 1;
}

.voice-accent-foundation .voice-progress-list > * + * {
  margin-top: 0.75rem;
}

.voice-accent-foundation .voice-progress-list > :not(:first-child) {
  margin-bottom: 0;
}

.voice-accent-foundation table thead th:first-child {
  line-height: 1.25rem;
}

.voice-accent-foundation .animate-fade-in-up,
.ipc-club-page .animate-fade-in-up {
  animation: voice-accent-fade-in-up 620ms ease-out both;
}

@keyframes voice-accent-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.self-paced-page .cv-section-dark {
  background: linear-gradient(155deg, #2b0b14 0%, #4a1429 50%, #3d0e20 100%);
}

.self-paced-page .ticker-track {
  display: inline-flex;
  min-width: max-content;
  animation: self-paced-ticker 56s linear infinite;
}

.self-paced-page .ticker-track:hover {
  animation-play-state: paused;
}

@keyframes self-paced-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .self-paced-page .ticker-track {
    animation: none;
  }

  .self-paced-page .cv-card-hover:hover,
  .self-paced-page .cv-btn-primary:hover,
  .self-paced-page .cv-btn-outline:hover {
    transform: none;
  }

  .voice-accent-foundation .animate-fade-in-up,
  .ipc-club-page .animate-fade-in-up {
    animation: none;
  }
}