/* ==========================================================================
   CabTaxi Website Colour & Visual Style Guide 2026
   --------------------------------------------------------------------------
   Implementation of the approved CabTaxi master palette and component
   specification. Loaded immediately after /css/main.css so the brand layer
   always wins the cascade without rewriting the vendored Unibody template.

   Contents (mirrors the style guide sections):
     1. Design tokens ......................... section 2 palette + section 9 table
     2. Base typography & surfaces ............ section 7 readability
     3. Header - light + dark/overlay ......... section 3
     4. Hero .................................. section 3
     5. Buttons ............................... section 3
     6. Cards, sections, pricing .............. section 3
     7. Forms ................................. section 3
     8. Links, focus & accessibility .......... section 7
     9. Icons & status colours ................ section 5
    10. Gradients (small accents only) ........ section 6
    11. Footer ............................... section 3

   Design principle: 70% neutral / 20% CabTaxi purple / 10% accent and status.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Variable names follow the "Developer implementation table" (section 9).
   ========================================================================== */
:root {
  /* --- Core master palette (section 2) ---------------------------------- */
  --color-brand-primary: #0f172a; /* Brand anchor: headings, icons, selected UI */
  --color-brand-interactive: #ffd428; /* Primary buttons, links, active controls */
  --color-brand-hover: #f7cb1e; /* Hover/pressed states, deep accent */
  --color-surface-dark: #0f172a; /* Hero, footer, dark feature sections */
  --color-text-primary: #111827; /* Body copy + headings on light */
  --color-text-muted: #64748b; /* Secondary copy, captions, helper text */
  --color-surface-light: #f8fafc; /* Alternating sections, page background */
  --color-surface-white: #ffffff; /* Cards, surfaces, text on dark areas */
  --color-border: #e5e7eb; /* Cards, dividers, form borders */
  --color-accent-tech: #06b6d4; /* Small highlights, live/technology cues */
  --color-success: #16a34a; /* Success, live, completed, active */
  --color-warning: #f59e0b; /* Warnings, expiring documents, attention */
  --color-error: #dc2626; /* Errors, expired, cancelled, critical */

  /* --- Dark-surface support text (section 3 hero/footer, section 7) ------ */
  --color-text-on-dark: #ffd428;
  --color-text-on-dark-muted: #cbd5e1; /* Supporting copy on #0F172A */
  --color-brand-lavender: #dad8d4; /* Highlight text on dark surfaces */
  --color-brand-lavender-soft: #ffd428; /* Links + active accent on dark */
  --color-border-on-dark: rgba(255, 255, 255, 0.22);
  --color-divider-dark: #334155; /* Footer dividers */
  --color-disabled: #94a3b8; /* Disabled / unavailable controls */

  /* --- Purple tints (small identity cues, never whole surfaces) --------- */
  --color-brand-tint: #f5f3ff;
  --color-brand-tint-strong: #ffd428;
  --color-brand-tint-border: #ddd6fe;

  /* --- Gradients (section 6) ------------------------------------------- */
  --gradient-brand: linear-gradient(135deg, #ccbce4 0%, #ddccfa 100%);
  --gradient-brand-soft: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  --gradient-tech: linear-gradient(
    135deg,
    #5b2a86 0%,
    #6d28d9 50%,
    #0891b2 100%
  );
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);

  /* --- Radii, elevation, brand glow ------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 14px 34px rgba(15, 23, 42, 0.12);
  --shadow-glow-brand: 0 6px 18px rgba(124, 58, 237, 0.28);

  /* --- Accessibility (section 7) --------------------------------------- */
  --focus-ring-color: #a78bfa;
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-outline: 2px solid var(--focus-ring-color);

  /* --- Legacy alias remap ----------------------------------------------
     Retires the pre-2026 gold/black one-off colours. Any older rule that
     still references these names now resolves to a brand token instead. */
  --gold: var(--color-brand-interactive);
  --gold-dark: var(--color-brand-primary);
  --gold-light: var(--color-brand-tint-strong);
  --gold-bg: rgba(124, 58, 237, 0.06);
  --dark: var(--color-surface-dark);
  --dark-2: var(--color-brand-hover);
  --gray-bg: var(--color-surface-light);
  --text-muted: var(--color-text-muted);
}

/* ==========================================================================
   2. BASE TYPOGRAPHY & SURFACES  (section 7 - body copy / dark sections)
   ========================================================================== */
body {
  color: var(--color-text-primary);
  background-color: var(--color-surface-white);
}

/* Headings use the brand anchor purple, never pure black (section 2). */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-brand-primary);
}

p {
  color: var(--color-text-primary);
}

/* Section rhythm: white <-> light grey, with occasional dark navy. */
.bg-white {
  background-color: var(--color-surface-white) !important;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.bg-gray {
  background-color: var(--color-surface-light) !important;
}

.bg-gray2 {
  background: var(--gradient-dark) !important;
}

.bg-dark {
  background-color: var(--color-surface-dark) !important;
}

.bg-dark2 {
  background-color: rgba(15, 23, 42, 0.98) !important;
}

/* Text on dark #0F172A surfaces: white headings, #CBD5E1 supporting copy. */
.bg-dark,
.bg-dark2,
.bg-gray2,
.section-cta,
.mk-hero,
.mk-cta {
  color: var(--color-text-on-dark);
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark2 h1,
.bg-dark2 h2,
.bg-dark2 h3,
.bg-dark2 h4,
.bg-dark2 h5,
.bg-dark2 h6,
.bg-gray2 h1,
.bg-gray2 h2,
.bg-gray2 h3,
.bg-gray2 h4,
.bg-gray2 h5,
.bg-gray2 h6,
.section-cta h2,
.mk-hero h1,
.mk-cta h2 {
  color: var(--color-text-on-dark);
}

.bg-dark p,
.bg-dark2 p,
.bg-gray2 p,
.bg-dark li,
.bg-gray2 li,
.bg-dark .lead,
.bg-gray2 .lead {
  color: var(--color-text-on-dark-muted);
}

/* Keep the intended emphasis for the template's .bold helper. */
section.bg-gray2 h4,
section.bg-gray2 .bold {
  color: var(--color-text-on-dark);
}

/* Standard section separators. */
.mk-section {
  border-color: var(--color-border);
}

/* ==========================================================================
   3. HEADER
   Light version: background #FFFFFF; text #111827; hover/active #7C3AED;
   bottom border #E5E7EB - use for content-heavy pages.
   Dark/overlay version: background #0F172A or transparent over a dark hero;
   text #FFFFFF; active accent #C4B5FD; primary CTA #7C3AED.
   ========================================================================== */

/* --- 3a. Default (top of page) = dark header ---------------------------
   The style guide's dark/overlay header offers two options: "background
   #0F172A" or "transparent over a dark hero". This template only supports
   the first one, so #0F172A is what we use here.

   Reason: main.css reserves room for the fixed header with
   `body { padding-top: 90px }` (64px under 990px). Nothing is ever painted
   behind the header - the surface immediately under it at the top of every
   page is the white page background. A transparent header therefore put
   white links (#FFFFFF) on white and the whole menu disappeared; only the
   active item stayed visible because it alone is tinted #C4B5FD.
   Solid #0F172A keeps the header legible on every page and hero type. */
.navbar-custom,
.navbar-custom.bg-dark,
.navbar-custom.bg-dark2 {
  background-color: var(--color-surface-white);
}

/* Cover the reserved body padding exactly so no light strip can show
   through under the header on small/logo-less breakpoints. */
.navbar-custom {
  min-height: 50px;
}

@media (max-width: 990px) {
  .navbar-custom {
    min-height: 64px;
  }
}

.navbar-custom a,
.navbar-custom .navbar-nav > li > a {
  color: var(--color-brand-primary) !important;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li.active > a,
.navbar-custom .navbar-nav > li.active > a {
  color: var(--color-brand-primary) !important;
}

.navbar-custom .dropdown-menu {
  background-color: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-brand-interactive);
  box-shadow: var(--shadow-card-hover);
}

.navbar-custom .dropdown-menu > li > a {
  color: var(--color-brand-primary) !important;
}

.navbar-custom .dropdown-menu > li > a:hover,
.navbar-custom .dropdown-menu > li > a:focus,
.navbar-custom .dropdown-menu > .active > a {
  background-color: var(--color-brand-tint) !important;
  color: var(--color-brand-primary) !important;
}

.navbar-custom .navbar-toggle {
  color: var(--color-brand-primary);
}

/* --- 3b. Scrolled header: switches to dark navy with gold/white text --- */
.navbar-custom.top-nav-collapse {
  background-color: var(--color-surface-dark);

  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}

.navbar-custom.top-nav-collapse a,
.navbar-custom.top-nav-collapse .navbar-nav > li > a {
  color: var(--color-text-on-dark) !important;
}

.navbar-custom.top-nav-collapse .navbar-nav > li > a:hover,
.navbar-custom.top-nav-collapse .navbar-nav > li > a:focus,
.navbar-custom.top-nav-collapse .nav > li.active > a,
.navbar-custom.top-nav-collapse .navbar-nav > li.active > a {
  color: var(--color-brand-interactive) !important;
}

.navbar-custom.top-nav-collapse .dropdown-menu {
  background-color: rgba(15, 23, 42, 0.97);
  border: none;
  border-top: 2px solid var(--color-brand-interactive);
}

.navbar-custom.top-nav-collapse .dropdown-menu > li > a {
  color: var(--color-text-on-dark) !important;
}

.navbar-custom.top-nav-collapse .dropdown-menu > li > a:hover,
.navbar-custom.top-nav-collapse .dropdown-menu > li > a:focus,
.navbar-custom.top-nav-collapse .dropdown-menu > .active > a {
  background-color: rgba(255, 212, 40, 0.12) !important;
  color: var(--color-brand-interactive) !important;
}

.navbar-custom.top-nav-collapse .navbar-toggle {
  color: var(--color-text-on-dark);
}

.navbar-custom .navbar-toggle .icon-bar {
  background-color: currentColor;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: rgba(124, 58, 237, 0.18);
}

.navbar-custom .nav .badge,
.supcircle {
  background-color: var(--color-brand-interactive) !important;
  color: var(--color-surface-white) !important;
}

/* --- 3c. Header primary CTA (always #7C3AED) --------------------------- */
.navbar-custom .navbar-nav > li > a.nav-cta,
.navbar-custom.top-nav-collapse .navbar-nav > li > a.nav-cta {
  background-color: var(--color-brand-interactive);
  border: 2px solid var(--color-brand-interactive);
  color: #0f172a !important;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.navbar-custom .navbar-nav > li > a.nav-cta:hover,
.navbar-custom .navbar-nav > li > a.nav-cta:focus,
.navbar-custom.top-nav-collapse .navbar-nav > li > a.nav-cta:hover,
.navbar-custom.top-nav-collapse .navbar-nav > li > a.nav-cta:focus {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-surface-white) !important;
}

/* ==========================================================================
   4. HERO  (section 3)
   Background #0F172A. H1 #FFFFFF. Highlight text #A78BFA.
   Supporting copy #CBD5E1. Primary CTA #7C3AED;
   secondary CTA transparent with a white border.
   ========================================================================== */
.intro {
  background: var(--color-surface-dark);
  background-color: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  text-shadow: none;
}

/* Photo heroes keep their image but are blended onto the dark navy
   foundation so white text stays legible (section 3 + section 7). */
.intro.responsive-bg-11,
.intro.responsive-bg-15,
.intro.responsive-bg-18,
.intro.error-404-bg {
  background-blend-mode: multiply;
}

.intro h1,
.intro h2,
.intro h3,
.intro h4,
.intro h5,
.intro h1.intro-small,
.intro h1.classic {
  color: var(--color-text-on-dark);
  text-shadow: none;
}

/* Keep the photographic hero legible on the dark navy foundation. */
.intro .fill,
#Carousel-intro .fill {
  position: relative;
}

.intro .fill::after,
#Carousel-intro .fill::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 0;
  pointer-events: none;
}

.intro .intro-body,
#Carousel-intro .fill .intro-body {
  position: relative;
  z-index: 1;
}

/* Highlight text and kickers inside the hero. */
.intro h1 em,
.intro h1 strong,
.intro .highlight,
.intro .section-label,
.intro .mk-kicker,
.intro .classic {
  color: var(--color-brand-lavender);
}

.intro .lead,
.intro p,
.intro .intro-body p {
  color: var(--color-text-on-dark-muted);
  text-shadow: none;
}

.intro a {
  color: var(--color-brand-lavender-soft);
}

.intro a:hover,
.intro a:focus {
  color: var(--color-surface-white);
}

.intro .carousel-indicators li {
  background-color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
}

.intro .carousel-indicators .active {
  background-color: var(--color-brand-lavender);
}

/* Half-hero / small-header bands share the dark foundation. */
.small-header.bg-dark,
.small-header.bg-transparent {
  background-color: var(--color-surface-dark);
}

.small-header.bg-dark h1,
.small-header.bg-dark h2,
.small-header.bg-dark h3,
.small-header.bg-transparent h1,
.small-header.bg-transparent h2,
.small-header.bg-transparent h3 {
  color: var(--color-text-on-dark);
}

.small-header p {
  color: var(--color-text-on-dark-muted);
}

/* ==========================================================================
   5. BUTTONS  (section 3)
   Primary:   bg #7C3AED, text #FFFFFF, hover/pressed #4C1D95,
              focus ring based on #A78BFA.
   Secondary: light page - white/transparent with #5B2A86 border and text;
              dark page  - transparent with white border and white text.
   ========================================================================== */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Replace the template's flat opacity hover - contrast must stay AA. */
.btn:hover,
.btn:focus {
  opacity: 1;
}

/* --- 5a. Primary CabTaxi buttons -------------------------------------- */
.btn-unibody,
.btn-violet,
.btn-gold,
.btn-primary {
  background-color: var(--color-brand-primary) !important;
  border: 2px solid var(--color-brand-interactive) !important;
  color: var(--color-brand-interactive) !important;
}

.btn-unibody:hover,
.btn-unibody:focus,
.btn-unibody:active,
.btn-unibody.active,
.btn-violet:hover,
.btn-violet:focus,
.btn-violet:active,
.btn-violet.active,
.btn-gold:hover,
.btn-gold:focus,
.btn-gold:active,
.btn-gold.active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--color-brand-hover) !important;
  border-color: var(--color-brand-hover) !important;
  color: var(--color-surface-white) !important;
  box-shadow: var(--shadow-glow-brand);
  text-decoration: none;
}

/* --- 5b. Dark navy button (light pages) -------------------------------- */
.btn-dark {
  background-color: var(--color-surface-dark) !important;
  border: 2px solid var(--color-surface-dark) !important;
  color: var(--color-surface-white) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-surface-white) !important;
  text-decoration: none;
}

/* --- 5c. Secondary button (light page): #5B2A86 border + text --------- */
.btn-white,
.btn-border,
.btn-dark-border {
  background-color: var(--color-surface-white) !important;
  border: 2px solid var(--color-brand-primary) !important;
  color: var(--color-brand-primary) !important;
}

.btn-white:hover,
.btn-white:focus,
.btn-border:hover,
.btn-border:focus,
.btn-dark-border:hover,
.btn-dark-border:focus {
  background-color: var(--color-brand-tint) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-brand-primary) !important;
  text-decoration: none;
}

/* --- 5d. Neutral grey button ------------------------------------------ */
.btn-gray {
  background-color: var(--color-surface-white) !important;
  border: 2px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

.btn-gray:hover,
.btn-gray:focus {
  background-color: var(--color-surface-light) !important;
  border-color: var(--color-disabled) !important;
  color: var(--color-text-primary) !important;
}

/* --- 5e. Technology accent button (small, cyan, 10% band) ------------- */
.btn-info {
  background-color: var(--color-accent-tech) !important;
  border: 2px solid var(--color-accent-tech) !important;
  color: var(--color-surface-dark) !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
  color: var(--color-surface-white) !important;
}

/* --- 5f. Disabled / unavailable --------------------------------------- */
.btn[disabled],
.btn.disabled,
.btn:disabled {
  background-color: var(--color-disabled) !important;
  border-color: var(--color-disabled) !important;
  color: var(--color-surface-white) !important;
  opacity: 0.75;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- 5g. Dark-page overrides ------------------------------------------
   Secondary buttons become transparent with a white border and white text.
   Primary purple CTAs stay purple so action authority is preserved.
   ---------------------------------------------------------------------- */
.bg-dark .btn-white,
.bg-dark2 .btn-white,
.bg-gray2 .btn-white,
.section-cta .btn-white,
.mk-hero .btn-white,
.mk-cta .btn-white,
.intro .btn-white,
.bg-dark .btn-dark-border,
.bg-gray2 .btn-dark-border,
.mk-hero .btn-dark-border,
.intro .btn-dark-border,
.bg-dark .btn-border,
.bg-gray2 .btn-border {
  background-color: transparent !important;
  border: 2px solid var(--color-surface-white) !important;
  color: var(--color-surface-white) !important;
}

.bg-dark .btn-white:hover,
.bg-dark2 .btn-white:hover,
.bg-gray2 .btn-white:hover,
.section-cta .btn-white:hover,
.mk-hero .btn-white:hover,
.mk-cta .btn-white:hover,
.intro .btn-white:hover,
.bg-dark .btn-dark-border:hover,
.bg-gray2 .btn-dark-border:hover,
.mk-hero .btn-dark-border:hover,
.intro .btn-dark-border:hover,
.bg-dark .btn-border:hover,
.bg-gray2 .btn-border:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--color-surface-white) !important;
  color: var(--color-surface-white) !important;
}

.bg-dark .btn-dark,
.bg-dark2 .btn-dark,
.bg-gray2 .btn-dark,
.section-cta .btn-dark,
.mk-hero .btn-dark,
.mk-cta .btn-dark,
.intro .btn-dark {
  background-color: transparent !important;
  border: 2px solid var(--color-border-on-dark) !important;
  color: #ffd428 !important;
}

.bg-dark .btn-dark:hover,
.bg-dark2 .btn-dark:hover,
.bg-gray2 .btn-dark:hover,
.section-cta .btn-dark:hover,
.mk-hero .btn-dark:hover,
.mk-cta .btn-dark:hover,
.intro .btn-dark:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--color-surface-white) !important;
  color: var(--color-surface-white) !important;
}

.bg-dark .btn-gray,
.bg-dark2 .btn-gray,
.bg-gray2 .btn-gray,
.section-cta .btn-gray,
.mk-hero .btn-gray,
.mk-cta .btn-gray,
.intro .btn-gray {
  background-color: transparent !important;
  border-color: var(--color-border-on-dark) !important;
  color: var(--color-text-on-dark-muted) !important;
}

/* ==========================================================================
   6. CARDS, SECTIONS & PRICING  (section 3)
   Cards: background #FFFFFF, text #111827, border #E5E7EB. Purple appears
   only in icon containers, small labels or top borders - never as a full
   card wall. Pricing highlights the recommended plan with a purple top
   border or a subtle pale-purple wash.
   ========================================================================== */
.cap-card,
.why-card,
.segment-card,
.mk-subsection,
.mk-link-card,
.service-box,
.info-card,
.news-item,
#news .news-item {
  background-color: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  border-radius: 50px;
}

/* A light grey section still needs white cards to read as separate surfaces. */
.section-alt-bg .cap-card,
.section-alt-bg .why-card,
.section-alt-bg .segment-card,
.bg-gray .cap-card,
.bg-gray .why-card,
.bg-gray .segment-card,
.bg-gray .mk-subsection,
.bg-gray .mk-link-card {
  background-color: var(--color-surface-white);
}

.cap-card h3,
.cap-card p,
.why-card h3,
.why-card p,
.segment-card h3,
.segment-card p,
.mk-subsection h3,
.mk-link-card h3,
.service-box h3 {
  color: var(--color-text-primary);
}

/* Keep comparison/link card titles (e.g. "Compare CabTaxi and iCabbi") gold
   on hover/focus instead of falling through to the generic a:hover navy color. */
/* Keep comparison/link card titles (e.g. "Compare CabTaxi and iCabbi") a
   consistent dark navy on default/hover/focus instead of falling through
   to the generic a:hover/base "a" gold color. Covers every card variant
   that nests a link inside its heading (sitemap/module grids included). */
.mk-link-card h3 a,
.mk-link-card h3 a:hover,
.mk-link-card h3 a:focus,
.cap-card h3 a,
.cap-card h3 a:hover,
.cap-card h3 a:focus,
.why-card h3 a,
.why-card h3 a:hover,
.why-card h3 a:focus,
.segment-card h3 a,
.segment-card h3 a:hover,
.segment-card h3 a:focus,
.mk-subsection h3 a,
.mk-subsection h3 a:hover,
.mk-subsection h3 a:focus,
.service-box h3 a,
.service-box h3 a:hover,
.service-box h3 a:focus,
.info-card h3 a,
.info-card h3 a:hover,
.info-card h3 a:focus,
.news-item h3 a,
.news-item h3 a:hover,
.news-item h3 a:focus {
  color: #151838;
}

.cap-card p,
.why-card p,
.segment-card p,
.mk-subsection p,
.mk-link-card p,
.service-box p {
  color: var(--color-text-muted);
}

.cap-card:hover,
.why-card:hover,
.segment-card:hover,
.mk-subsection:hover,
.mk-link-card:hover,
.service-box:hover {
  border-color: var(--color-brand-tint-border);
  box-shadow: var(--shadow-card-hover);
}

/* Icon containers carry the purple identity (section 3 + section 5). */
.cap-icon-wrap {
  background: var(--color-brand-tint-strong);
  color: var(--color-brand-primary);
}

.icon-big {
  color: var(--color-brand-primary);
}

/* Small uppercase labels / kickers use the anchor purple, not gold. */
.section-label,
.mk-kicker,
.mk-breadcrumbs,
.module-item-title {
  color: var(--color-brand-primary);
}

.product-block .product-badge {
  background: var(--color-brand-tint-strong);
  color: var(--color-brand-primary);
}

.mk-list li::before {
  background: var(--color-brand-interactive);
}

.mk-answer {
  border-left: 3px solid var(--color-brand-interactive);
  color: var(--color-text-primary);
}

/* Tables: dark navy header instead of black. */
.mk-table thead th {
  background: var(--color-surface-dark);
  color: var(--color-surface-white);
}

.mk-table th,
.mk-table td {
  border-color: var(--color-border);
}

.mk-table-note,
.mk-disclaimer,
.mk-faq-item p,
.mk-breadcrumbs {
  color: var(--color-text-muted);
}

.mk-disclaimer {
  background: var(--color-surface-light);
  border-color: var(--color-border);
}

.mk-faq-item {
  border-bottom-color: var(--color-border);
}

.mk-section h2 {
  margin-bottom: 16px;
}

/* --- 6a. Full-width dark CTA bands ------------------------------------ */
.section-cta,
.mk-cta {
  background: var(--gradient-dark);
}

.section-cta p,
.mk-cta p {
  color: var(--color-text-on-dark-muted);
}

.mk-cta-contact a,
.mk-cta a {
  color: var(--color-brand-lavender-soft);
}

.mk-cta-contact a:hover,
.mk-cta a:hover {
  color: var(--color-surface-white);
}

/* --- 6b. Pricing: neutral cards + one highlighted option --------------- */
.pricing .panel,
.pricing .panel-default {
  background-color: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.pricing .panel-heading {
  background-color: var(--color-surface-light);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.pricing .panel-heading h4 {
  color: var(--color-brand-primary);
}

.pricing .list-group-item {
  background-color: var(--color-surface-white);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* Highlighted / recommended / Founding plan - purple top border + pale wash. */
.pricing .panel.featured,
.pricing .panel-highlight,
.pricing .recommended,
.pricing .panel.panel-primary {
  border-top: 4px solid var(--color-brand-interactive);
  background: var(--gradient-brand-soft);
}

.pricing .panel.featured .panel-heading,
.pricing .recommended .panel-heading {
  background: var(--color-brand-tint-strong);
}

.badge-highlight,
.pricing .badge {
  background-color: var(--color-brand-interactive);
  color: var(--color-surface-white);
}

/* ==========================================================================
   7. FORMS  (section 3)
   White background, #111827 text, #E5E7EB default border,
   #7C3AED focus border/ring, #DC2626 errors, #64748B help text.
   ========================================================================== */
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.crf-field input[type="text"],
.crf-field input[type="email"],
.crf-field input[type="tel"],
.crf-field input[type="url"],
.crf-field input[type="date"],
.crf-field input[type="file"] {
  background-color: var(--color-surface-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.crf-field input:focus {
  border-color: var(--color-brand-interactive);
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* Fields sitting on a dark navy section keep a neutral surface. */
.bg-dark .form-control,
.bg-gray2 .form-control,
.section-cta .form-control,
.mk-hero .form-control,
.intro .form-control,
.navbar-custom .form-control {
  background-color: var(--color-surface-white);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.form-control.is-invalid,
.form-control.has-error,
.has-error .form-control,
.error .form-control {
  border-color: var(--color-error);
}

.help-block,
.form-text,
.crf-hint,
.form-hint {
  color: var(--color-text-muted);
}

.form-group label,
.control-label,
.crf-field label {
  color: var(--color-text-primary);
}

label.required:after,
.crf-required,
.form-group .required {
  color: var(--color-error);
}

/* Inline form feedback - colour is always paired with text (section 7). */
.alert-success,
.crf-alert.crf-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--color-success);
}

.alert-danger,
.alert-error,
.crf-alert.crf-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--color-error);
}

.alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}

.alert-info {
  background-color: var(--color-brand-tint);
  border: 1px solid var(--color-brand-tint-border);
  color: var(--color-brand-primary);
}

/* ==========================================================================
   8. LINKS, FOCUS & ACCESSIBILITY  (section 7)
   Links: #7C3AED on light, #C4B5FD on dark, underlined in long-form content.
   Focus: clearly visible purple outline with separation from the border.
   ========================================================================== */
a {
  color: var(--color-brand-interactive);
}

a:hover,
a:focus {
  color: var(--color-brand-primary);
}

/* Long-form content: pair colour with an underline for clarity. */
.article-content a,
.blog-content a,
.entry-content a,
.privacy-content a,
.mk-section p a,
.mk-answer a,
.home-seo-content a {
  color: var(--color-brand-interactive);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content a:hover,
.blog-content a:hover,
.entry-content a:hover,
.privacy-content a:hover,
.mk-section p a:hover,
.mk-answer a:hover,
.home-seo-content a:hover {
  color: var(--color-brand-hover);
}

/* Links on dark surfaces. */
.bg-dark a,
.bg-dark2 a,
.bg-gray2 a,
.section-cta a,
.mk-hero a,
.mk-cta a,
.intro a,
.footer a {
  color: var(--color-brand-lavender-soft);
}

.bg-dark a:hover,
.bg-dark2 a:hover,
.bg-gray2 a:hover,
.section-cta a:hover,
.mk-hero a:hover,
.mk-cta a:hover,
.intro a:hover,
.footer a:hover {
  color: var(--color-surface-white);
}

/* Keyboard focus ring built on #A78BFA. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.navbar-nav > li > a:focus-visible,
.footer-menu a:focus-visible,
.footer .list-inline a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-to-content {
  background: var(--color-surface-dark);
  color: var(--color-surface-white);
}

.skip-to-content:focus {
  outline: var(--focus-outline);
}

::selection,
::-moz-selection {
  background: var(--color-brand-interactive);
  color: var(--color-surface-white);
}

/* ==========================================================================
   9. ICONS & STATUS COLOURS  (section 5)
   One consistent icon family. Default icon colour #5B2A86 or #7C3AED on
   light backgrounds. Status colours are reserved for functional states and
   are always paired with words, never colour alone.
   ========================================================================== */
.fa,
.icon,
[class^="icon-"] {
  color: inherit;
}

/* Default brand icon treatment on light surfaces. */
#contact h5 .fa,
.access-row .access-item i,
#about .icon-accent,
.module-num,
.footer .list-inline i:hover,
.crf-icon {
  color: var(--color-brand-primary);
}

.module-num {
  background: var(--color-brand-tint-strong);
  color: var(--color-brand-primary);
}

/* --- Status colours ---------------------------------------------------- */
.status-badge,
.label-status {
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-badge.published,
.status-badge.success,
.badge-success,
.label-success,
.text-success {
  background-color: var(--color-success);
  color: var(--color-surface-white);
}

.status-badge.draft,
.status-badge.disabled,
.badge-disabled,
.label-default {
  background-color: var(--color-disabled);
  color: var(--color-surface-white);
}

.status-badge.warning,
.badge-warning,
.label-warning,
.text-warning {
  background-color: var(--color-warning);
  color: var(--color-surface-dark);
}

.status-badge.cancelled,
.status-badge.error,
.badge-danger,
.label-danger,
.text-danger {
  background-color: var(--color-error);
  color: var(--color-surface-white);
}

.status-badge.info,
.status-badge.scheduled,
.badge-info,
.label-info {
  background-color: var(--color-accent-tech);
  color: var(--color-surface-dark);
}

/* Text-only status helpers never rely on colour alone. */
p.text-success,
span.text-success {
  background-color: transparent;
  color: var(--color-success);
}

p.text-warning,
span.text-warning {
  background-color: transparent;
  color: #b45309;
}

p.text-danger,
span.text-danger {
  background-color: transparent;
  color: var(--color-error);
}

.status-toggle .status-btn {
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface-white);
}

.status-toggle .status-btn[data-status="draft"].active {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-surface-white);
}

.status-toggle .status-btn[data-status="published"].active {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-surface-white);
}

/* ==========================================================================
   10. GRADIENTS  (section 6)
   Small hero accents, CTA bands and decorative glows only - never applied
   across every section. Purple overload is explicitly avoided: the brand
   gradient is limited to quick accents and the technology gradient to
   small highlights.
   ========================================================================== */
.section-problem {
  background: var(--color-surface-light);
  border-left: 4px solid var(--color-brand-interactive);
}

.section-problem::before {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.06) 0%,
    transparent 55%
  );
}

/* A restrained brand-led decorative glow for product imagery. */
.product-block .product-img img.img-responsive,
.module-img,
.phone-mock .phone-screen {
  box-shadow:
    0 0 0 1px var(--color-border),
    0 18px 40px rgba(15, 23, 42, 0.12);
}

.gradient-brand {
  background: var(--gradient-brand);
}

.gradient-tech {
  background: var(--gradient-tech);
}

.gradient-soft {
  background: var(--gradient-brand-soft);
}

.section-cta h2::after,
.section h2::after,
section h3::after {
  background: var(--color-brand-interactive);
}

/* ==========================================================================
   11. FOOTER  (section 3)
   Background #0F172A; headings #FFFFFF; body/link text #CBD5E1;
   hover #C4B5FD; divider #334155.
   ========================================================================== */
section.footer,
.footer,
section.footer.bg-gray,
section.footer.bg-dark {
  background-color: var(--color-surface-dark) !important;
  color: var(--color-text-on-dark-muted);
  border-top: 1px solid var(--color-divider-dark);
}

.footer h4,
.footer h5,
.footer h6 {
  color: var(--color-text-on-dark);
}

.footer p,
.footer li,
.footer span,
.footer .text-justify {
  color: var(--color-text-on-dark-muted);
}

.footer a,
.footer h6 a,
.footer .list-inline a {
  color: var(--color-text-on-dark-muted);
}

.footer a:hover,
.footer a:focus,
.footer h6 a:hover,
.footer .list-inline a:hover,
.footer .list-inline i:hover {
  color: var(--color-brand-lavender-soft);
}

.footer-legal,
.footer hr {
  border-top: 1px solid var(--color-divider-dark);
  color: var(--color-text-on-dark-muted);
}

/* ==========================================================================
   12. MIGRATED DETAILS  (preloader, marketing hero, app mockups)
   ========================================================================== */
#preloader,
#status {
  background-color: transparent;
}

#status {
  background: var(--color-brand-interactive);
}

/* Marketing / product pages: flat dark navy hero, no gradient. */
.mk-hero {
  background: var(--color-surface-dark);
}

.mk-lead,
.mk-reviewed {
  color: var(--color-text-on-dark-muted);
}

.mk-kicker {
  color: var(--color-brand-lavender);
}

/* App-screenshot mockups tie to the brand with a subtle purple glow. */
.phone-mock {
  border-color: var(--color-surface-dark);
  box-shadow:
    0 0 0 1px var(--color-border),
    0 25px 60px rgba(15, 23, 42, 0.35);
}

.phone-screen {
  background: var(--color-surface-dark);
}

.screens-dots span {
  background: var(--color-brand-tint-border);
}

/* Blog / news category labels use purple, not full-card saturation. */
.blog-card-link:hover h5,
#news h2 a:hover,
.recent-post-body h5 a:hover,
.recent-post-body h5 a:focus {
  color: var(--color-brand-interactive);
}

#news .news-img {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
}

/* Rich-text editor chrome matches the form spec. */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--color-border);
}

.ql-toolbar.ql-snow {
  background: var(--color-surface-light);
}

/* ==========================================================================
   13. TEMPLATE UTILITY OVERRIDES
   Retires the last vendor-template colours that carried no brand meaning.
   ========================================================================== */
/* Icons inside dark navy sections use the muted-on-dark text colour. */
section.bg-dark .fa,
section.bg-dark2 .fa,
section.bg-gray2 .fa {
  color: var(--color-text-on-dark-muted);
}

/* Pricing blocks rendered on a dark section. */
.bg-dark .pricing .panel-heading,
.bg-dark2 .pricing .panel-heading {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-on-dark-muted);
}

.bg-dark .list-group-item,
.bg-dark2 .list-group-item,
.bg-gray2 .list-group-item {
  border-color: var(--color-divider-dark);
}

/* Pagination: neutral by default, purple for the active page. */
.pagination > li > a,
.pagination > li > span {
  background: var(--color-surface-light);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--color-brand-tint);
  border-color: var(--color-brand-tint-border);
  color: var(--color-brand-interactive);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background-color: var(--color-brand-interactive);
  border-color: var(--color-brand-interactive);
  color: var(--color-surface-white);
}

/* News category chips: a small purple label over photography, never a
   full-card saturation (section 3 + section 6). */
#news .meta {
  background: var(--color-brand-interactive);
  color: var(--color-surface-white);
}

#news .meta a {
  color: var(--color-surface-white);
}

#news .meta a:hover {
  color: var(--color-brand-lavender-soft);
}

/* Dark navy hero for the home slider keeps the carousel controls legible. */
#Carousel-intro .carousel-control {
  color: var(--color-surface-white);
}

#Carousel-intro .carousel-control:hover,
#Carousel-intro .carousel-control:focus {
  color: var(--color-brand-lavender);
}