/* ==========================================================================
   KosmetikOn Design System — styles.css
   Precision Science × Haute Craft
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts
   Plus Jakarta Sans (display/body), JetBrains Mono (mono)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   0. DESIGN TOKENS — Custom Properties
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Color Palette — Neutral Precision Base
     -------------------------------------------------------------------- */
  --color-black:        #0B0C0E;
  --color-near-black:   #141518;
  --color-charcoal:     #1E1F24;
  --color-graphite:     #2A2B31;
  --color-slate-900:    #33343B;
  --color-slate-800:    #3E3F47;
  --color-slate-700:    #52535C;
  --color-slate-600:    #6B6C76;
  --color-slate-500:    #85868F;
  --color-slate-400:    #A0A1A9;
  --color-slate-300:    #BDBEC4;
  --color-slate-200:    #D4D5D9;
  --color-slate-100:    #E8E9EB;
  --color-warm-gray:    #F0EFED;
  --color-warm-white:   #F7F6F4;
  --color-ivory:        #FAFAF8;
  --color-white:        #FFFFFF;

  /* --------------------------------------------------------------------
     Per-Vertical Accent Colors
     -------------------------------------------------------------------- */

  /* Labify Beauté — Spotify Green */
  --color-beaute-50:    #E8F5E9;
  --color-beaute-100:   #C8E6C9;
  --color-beaute-200:   #A5D6A7;
  --color-beaute-300:   #81C784;
  --color-beaute-400:   #1DB954;
  --color-beaute-500:   #1AAE4E;
  --color-beaute-600:   #17A348;
  --color-beaute-700:   #14833A;
  --color-beaute-800:   #0F6A2E;
  --color-beaute-900:   #0A4520;

  /* Labify Nez — Lighter Green */
  --color-nez-50:       #E8F8ED;
  --color-nez-100:      #C6EDCF;
  --color-nez-200:      #93DBA6;
  --color-nez-300:      #60C97D;
  --color-nez-400:      #1ED760;
  --color-nez-500:      #1BC556;
  --color-nez-600:      #18B34C;
  --color-nez-700:      #148F3D;
  --color-nez-800:      #106B2E;
  --color-nez-900:      #0C471F;
  --color-nez-amber:    #1ED760;

  /* Labify Factory — Industrial Blue */
  --color-factory-50:   #EBF0FE;
  --color-factory-100:  #C9D7FC;
  --color-factory-200:  #93AFF9;
  --color-factory-300:  #6E94F7;
  --color-factory-400:  #509BF5;
  --color-factory-500:  #4A8FE0;
  --color-factory-600:  #3F7AC5;
  --color-factory-700:  #33619E;
  --color-factory-800:  #274977;
  --color-factory-900:  #1B3050;

  /* La Dalle — Warm Orange */
  --color-ladalle-50:   #FFF3E0;
  --color-ladalle-100:  #FFE0B2;
  --color-ladalle-200:  #FFCC80;
  --color-ladalle-300:  #FFB74D;
  --color-ladalle-400:  #F59B23;
  --color-ladalle-500:  #E08A1A;
  --color-ladalle-600:  #C77A15;
  --color-ladalle-700:  #9E6110;
  --color-ladalle-800:  #76490C;
  --color-ladalle-900:  #4E3008;

  /* kAI — Purple / Violet */
  --color-kai-50:       #F3F0FF;
  --color-kai-100:      #E0DAFE;
  --color-kai-200:      #C4B5FD;
  --color-kai-300:      #A78BFA;
  --color-kai-400:      #8B5CF6;
  --color-kai-500:      #7C3AED;
  --color-kai-600:      #6D28D9;
  --color-kai-700:      #5B21B6;
  --color-kai-800:      #4C1D95;
  --color-kai-900:      #3B1578;

  /* MSDS — Teal */
  --color-msds-50:      #E6FFFE;
  --color-msds-100:     #CCFBF1;
  --color-msds-200:     #99F6E4;
  --color-msds-300:     #5EEAD4;
  --color-msds-400:     #2DD4BF;
  --color-msds-500:     #14B8A6;
  --color-msds-600:     #0D9488;
  --color-msds-700:     #0F766E;
  --color-msds-800:     #115E59;
  --color-msds-900:     #134E4A;

  /* --------------------------------------------------------------------
     Semantic Colors — Dark Default (Spotify-inspired)
     -------------------------------------------------------------------- */
  --color-bg:           #121212;
  --color-bg-alt:       #181818;
  --color-bg-elevated:  #1E1E1E;
  --color-bg-inset:     #282828;
  --color-surface:      #181818;
  --color-border:       #2E2E2E;
  --color-border-subtle:#242424;
  --color-border-medium:#535353;
  --color-text:         #FFFFFF;
  --color-text-secondary: #B3B3B3;
  --color-text-tertiary:  #898989;
  --color-text-inverse: #121212;
  --color-link:         #1DB954;
  --color-link-hover:   #1ED760;
  --color-focus:        #1DB954;
  --color-accent:       #1DB954;

  /* Status */
  --color-success:      #2A7F4F;
  --color-warning:      #B8860B;
  --color-error:        #C0392B;
  --color-info:         var(--color-accent);

  /* --------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------- */
  --font-display:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font Sizes — Minor Third Scale (1.2) */
  --text-xs:            0.694rem;   /* ~11px */
  --text-sm:            0.833rem;   /* ~13px */
  --text-base:          1rem;       /* 16px */
  --text-md:            1.125rem;   /* 18px */
  --text-lg:            1.25rem;    /* 20px */
  --text-xl:            1.5rem;     /* 24px */
  --text-2xl:           1.875rem;   /* 30px */
  --text-3xl:           2.25rem;    /* 36px */
  --text-4xl:           3rem;       /* 48px */
  --text-5xl:           3.75rem;    /* 60px */
  --text-6xl:           4.5rem;     /* 72px */

  /* Line Heights */
  --leading-none:       1;
  --leading-tight:      1.15;
  --leading-snug:       1.3;
  --leading-normal:     1.6;
  --leading-relaxed:    1.75;
  --leading-loose:      2;

  /* Font Weights */
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* Letter Spacing */
  --tracking-tighter:  -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.025em;
  --tracking-wider:     0.05em;
  --tracking-widest:    0.1em;

  /* --------------------------------------------------------------------
     Spacing — 8px Grid
     -------------------------------------------------------------------- */
  --space-px:           1px;
  --space-0:            0;
  --space-0-5:          0.125rem;  /* 2px */
  --space-1:            0.25rem;   /* 4px */
  --space-1-5:          0.375rem;  /* 6px */
  --space-2:            0.5rem;    /* 8px */
  --space-3:            0.75rem;   /* 12px */
  --space-4:            1rem;      /* 16px */
  --space-5:            1.25rem;   /* 20px */
  --space-6:            1.5rem;    /* 24px */
  --space-7:            1.75rem;   /* 28px */
  --space-8:            2rem;      /* 32px */
  --space-9:            2.25rem;   /* 36px */
  --space-10:           2.5rem;    /* 40px */
  --space-12:           3rem;      /* 48px */
  --space-14:           3.5rem;    /* 56px */
  --space-16:           4rem;      /* 64px */
  --space-20:           5rem;      /* 80px */
  --space-24:           6rem;      /* 96px */
  --space-32:           8rem;      /* 128px */

  /* Section spacing */
  --section-gap:        var(--space-24);
  --section-gap-sm:     var(--space-16);

  /* --------------------------------------------------------------------
     Borders, Radii, Shadows
     -------------------------------------------------------------------- */
  --radius-sm:          0.25rem;   /* 4px */
  --radius-md:          0.5rem;    /* 8px */
  --radius-lg:          0.75rem;   /* 12px */
  --radius-xl:          1rem;      /* 16px */
  --radius-2xl:         1.5rem;    /* 24px */
  --radius-full:        9999px;

  --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:          0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --shadow-2xl:         0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-inner:       inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);

  /* --------------------------------------------------------------------
     Transitions & Motion
     -------------------------------------------------------------------- */
  --duration-fast:      120ms;
  --duration-base:      200ms;
  --duration-slow:      350ms;
  --duration-slower:    500ms;
  --duration-entrance:  600ms;

  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:        cubic-bezier(0.34, 1.2, 0.64, 1);

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */
  --container-sm:       640px;
  --container-md:       768px;
  --container-lg:       1024px;
  --container-xl:       1200px;
  --container-2xl:      1440px;
  --container-padding:  var(--space-6);

  --header-height:      4.5rem;    /* 72px */

  /* --------------------------------------------------------------------
     Z-index Scale
     -------------------------------------------------------------------- */
  --z-below:           -1;
  --z-base:             0;
  --z-above:            1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-skip:             500;
}


/* ==========================================================================
   1. CSS RESET / NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Remove default list styles */
ol,
ul,
menu {
  list-style: none;
}

/* Reset links */
a {
  color: inherit;
  text-decoration: none;
}

/* Media defaults */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Form resets */
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button,
[role="button"] {
  cursor: pointer;
}

button:disabled,
[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

textarea {
  resize: vertical;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Misc */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: var(--weight-semibold);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

small {
  font-size: var(--text-sm);
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

summary {
  cursor: pointer;
}

/* Remove default search decoration */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Reduced motion: disable all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tighter);
  text-align: center;
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--text-3xl);
  text-align: center;
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
  h4 { font-size: var(--text-2xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--text-6xl); }
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 64ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .lead {
    font-size: var(--text-xl);
  }
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.mono {
  font-family: var(--font-mono);
}

a:not([class]) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}

a:not([class]):hover {
  color: var(--color-link-hover);
}

blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

blockquote p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

mark {
  background-color: rgba(29, 185, 84, 0.2);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   3. LAYOUT SYSTEM
   ========================================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

.container--2xl {
  max-width: var(--container-2xl);
}

/* Section */
.section {
  padding-block: var(--section-gap-sm);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-gap);
  }
}

.section--tight {
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .section--tight {
    padding-block: var(--space-16);
  }
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: #0B0B0B;
  color: var(--color-text);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-white);
}

.section--dark .lead {
  color: var(--color-text-secondary);
}

.section--dark .overline {
  color: var(--color-accent);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

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

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

/* Inside 2-col grids, headings should be left-aligned */
.grid--2 h1,
.grid--2 h2,
.grid--2 h3 {
  text-align: left;
}

.grid--gap-sm  { gap: var(--space-4); }
.grid--gap-lg  { gap: var(--space-12); }
.grid--gap-xl  { gap: var(--space-16); }

/* Flex utilities */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.gap-8          { gap: var(--space-8); }

/* Alignment */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-left h1, .text-left h2, .text-left h3 { text-align: left; }
.text-right     { text-align: right; }
.mx-auto        { margin-inline: auto; }


/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--duration-base) var(--ease-out);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Global focus styles */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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


/* ==========================================================================
   5. NAVIGATION HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background-color: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.site-header--scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo:hover {
  color: var(--color-text);
}

.site-header__logo img,
.site-header__logo svg {
  height: 2rem;
  width: auto;
}

/* Desktop Navigation */
.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
  }
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-white);
  background-color: var(--color-bg-inset);
}

/* Nav dropdown */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__dropdown-trigger::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.15em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__dropdown:hover .site-nav__dropdown-trigger::after,
.site-nav__dropdown:focus-within .site-nav__dropdown-trigger::after {
  transform: rotate(-135deg);
  margin-top: 0.1em;
}

.site-nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  padding: var(--space-2);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:focus-within .site-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.site-nav__dropdown-item:hover {
  color: var(--color-text);
  background-color: var(--color-bg-inset);
}

/* Header CTA */
.site-header__cta {
  display: none;
  margin-left: var(--space-4);
}

@media (min-width: 1024px) {
  .site-header__cta {
    display: block;
  }
}

/* Hamburger / Mobile Toggle */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
  position: absolute;
}

.nav-toggle__bar:nth-child(1) { transform: translateY(-5px); }
.nav-toggle__bar:nth-child(2) { transform: translateY(0); }
.nav-toggle__bar:nth-child(3) { transform: translateY(5px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: rotate(-45deg);
}

/* Mobile Navigation Panel
   NOTE: .site-header uses backdrop-filter which creates a containing block
   for position:fixed descendants. This means bottom:0 resolves to the
   bottom of the header (72px), not the viewport. We use an explicit height
   with viewport units instead to ensure the nav covers the full screen. */
.mobile-nav {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  z-index: var(--z-overlay);
  background-color: var(--color-bg);
  padding: var(--space-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.mobile-nav[aria-hidden="false"],
.mobile-nav.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav__link {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.mobile-nav__link:hover {
  color: var(--color-accent);
}

.mobile-nav__cta {
  margin-top: var(--space-8);
}

/* Ensure all links and CTA inside mobile nav are always visible when open */
.mobile-nav.is-open .mobile-nav__link,
.mobile-nav[aria-hidden="false"] .mobile-nav__link,
.mobile-nav.is-open .mobile-nav__cta,
.mobile-nav[aria-hidden="false"] .mobile-nav__cta {
  display: block;
  visibility: visible;
  opacity: 1;
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Primary — picks up per-vertical theme accent on product pages;
   falls back to brand green on global pages (no --theme-accent set). */
.btn--primary {
  background-color: var(--theme-accent, #1DB954);
  color: var(--theme-btn-text, var(--color-text-inverse));
  border-color: var(--theme-accent, #1DB954);
}

.btn--primary:hover {
  background-color: var(--theme-accent-hover, #1ED760);
  border-color: var(--theme-accent-hover, #1ED760);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary (outlined) */
.btn--secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-border-medium);
}

.btn--secondary:hover {
  background-color: var(--color-bg-inset);
  border-color: var(--color-text-tertiary);
  transform: translateY(-1px);
}

.btn--secondary:active {
  transform: translateY(0);
}

/* Ghost (text-only) */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding-inline: var(--space-3);
}

.btn--ghost:hover {
  color: var(--color-text);
  background-color: var(--color-bg-inset);
}

/* Accent variant — picks up vertical theme color */
.btn--accent {
  background-color: var(--theme-accent, var(--color-accent));
  color: var(--color-text-inverse);
  border-color: var(--theme-accent, var(--color-accent));
}

.btn--accent:hover {
  background-color: var(--theme-accent-hover, #1ED760);
  border-color: var(--theme-accent-hover, #1ED760);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Inverse — white bg on dark site */
.btn--inverse {
  background-color: var(--color-white);
  color: var(--color-text-inverse);
  border-color: var(--color-white);
}

.btn--inverse:hover {
  background-color: #E0E0E0;
  border-color: #E0E0E0;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Size variants */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* Button focus override */
.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Button with arrow */
.btn__arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}


/* ==========================================================================
   7. HERO SECTIONS
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--space-20) + var(--header-height));
  padding-bottom: var(--space-20);
  overflow: hidden;
}

.hero--homepage {
  min-height: min(90vh, 900px);
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(29, 185, 84, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 70% 60%, rgba(29, 185, 84, 0.04) 0%, transparent 70%),
    var(--color-bg);
}

.hero--product {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg-alt) 100%
  );
}

.hero--compact {
  min-height: auto;
  padding-top: calc(var(--space-16) + var(--header-height));
  padding-bottom: var(--space-12);
}

.hero__overline {
  margin-bottom: var(--space-4);
}

.hero__title {
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  text-align: center;
}

.hero__subtitle {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Decorative gradient orb behind hero */
.hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  z-index: var(--z-below);
}

/* Hero mockup / product illustration */
.hero__mockup {
  width: 100%;
}

.hero__mockup img {
  margin-inline: auto;
}

/* Product Hero — centered variant used on MSDS page */
.product-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--space-20) + var(--header-height));
  padding-bottom: var(--space-20);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg-alt) 100%
  );
}

.product-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.product-hero__content {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.product-hero__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--theme-accent, var(--color-accent));
  margin-bottom: var(--space-4);
}

.product-hero__subtitle {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  color: var(--color-text-secondary);
}

.product-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.product-hero__visual {
  margin-top: var(--space-12);
  max-width: 960px;
  width: 100%;
  margin-inline: auto;
}

.product-hero__visual img {
  margin-inline: auto;
}


/* ==========================================================================
   8. PRODUCT CARDS
   ========================================================================== */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--theme-accent, var(--color-accent));
}

/* Accent top bar */
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-8);
  right: var(--space-8);
  height: 3px;
  background-color: var(--theme-accent, var(--color-accent));
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.product-card:hover::before {
  opacity: 1;
}

.product-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-6);
  color: var(--theme-accent, var(--color-accent));
}

.product-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  text-align: left;
}

.product-card__description {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  flex-grow: 1;
  margin-bottom: var(--space-6);
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--theme-accent, var(--color-accent));
  transition: gap var(--duration-base) var(--ease-out);
  text-decoration: none;
}

.product-card__link:hover {
  gap: var(--space-3);
}


/* ==========================================================================
   9. FEATURE LIST / GRID
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

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

.feature-item {
  display: flex;
  gap: var(--space-4);
}

.feature-item--stacked {
  flex-direction: column;
  padding: var(--space-5);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: border-color var(--duration-base) var(--ease-out);
}

.feature-item--stacked:hover {
  border-color: var(--color-border-medium);
}

.feature-item__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--theme-bg-tint, rgba(29, 185, 84, 0.1));
  color: var(--theme-accent, var(--color-accent));
}

/* SVG icons loaded as <img> cannot inherit CSS color via currentColor.
   Invert black-on-transparent SVGs to white so they are visible on dark backgrounds. */
.feature-item__icon img,
.icon-box img,
.value-card__icon img,
.module-pill img,
.module-card__icon img {
  filter: brightness(0) invert(1);
}

.feature-item__content h3,
.feature-item__content h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-align: left;
}

.feature-item__content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   10. FAQ ACCORDION
   ========================================================================== */

.faq-list {
  max-width: var(--container-md);
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  gap: var(--space-4);
  transition: color var(--duration-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .faq-item__question {
    font-size: var(--text-md);
    padding: var(--space-6) 0;
  }
}

.faq-item__question:hover {
  color: var(--color-accent);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out);
}

/* Plus/minus icon using pseudo-elements */
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  border-radius: 1px;
}

.faq-item__icon::before {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

.faq-item[data-open="true"] .faq-item__icon::after,
.faq-item.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--ease-in-out),
              padding var(--duration-slow) var(--ease-in-out);
}

.faq-item[data-open="true"] .faq-item__answer,
.faq-item.is-open .faq-item__answer {
  max-height: 600px;
}

.faq-item__answer-inner {
  padding-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .faq-item__answer-inner {
    font-size: var(--text-base);
  }
}


/* ==========================================================================
   11. STAT COUNTERS
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  text-align: center;
}

.stat__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-none);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .stat__number {
    font-size: var(--text-5xl);
  }
}

.stat__suffix {
  font-family: var(--font-display);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

/* Counter animation — JS toggles .is-counting */
.stat__number[data-count] {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   12. KNOWLEDGE HUB / ARTICLE CARDS
   ========================================================================== */

.article-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.article-card__image {
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-inset);
  overflow: hidden;
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card__category {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.article-card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.article-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex-grow: 1;
  margin-bottom: var(--space-4);
}

.article-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* Article page prose */
.prose {
  max-width: 68ch;
  margin-inline: auto;
}

.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  text-align: left;
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  text-align: left;
}

.prose p {
  margin-bottom: var(--space-5);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.prose li::marker {
  color: var(--color-text-tertiary);
}

.prose code {
  background-color: var(--color-bg-inset);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.prose pre {
  background-color: #0B0B0B;
  color: var(--color-slate-200);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.prose pre code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}

.prose img {
  border-radius: var(--radius-lg);
  margin-block: var(--space-8);
}

.prose blockquote {
  margin-block: var(--space-6);
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-footer {
  background-color: #0B0B0B;
  color: var(--color-text-secondary);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.site-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--color-white);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.footer__brand {
  max-width: 320px;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
  text-align: left;
}

.footer__links li {
  margin-bottom: var(--space-3);
}

.footer__links a {
  font-size: var(--text-sm);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}


/* ==========================================================================
   14. FORM INPUTS
   ========================================================================== */

.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-error);
}

.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--color-border-medium);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1-5);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1-5);
}

.form-input--error,
.form-textarea--error {
  border-color: var(--color-error);
}

.form-input--error:focus,
.form-textarea--error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent);
}


/* ==========================================================================
   15. COMPARISON TABLE
   ========================================================================== */

.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--container-padding));
  padding-inline: var(--container-padding);
}

.comparison-table {
  width: 100%;
  min-width: 640px;
  font-size: var(--text-base);
}

.comparison-table thead {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-above);
}

.comparison-table th {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  text-align: left;
  background-color: #0B0B0B;
  color: var(--color-white);
  white-space: nowrap;
}

.comparison-table th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.comparison-table th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.comparison-table th.comparison-table__highlight {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.comparison-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.comparison-table td:first-child {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.comparison-table td.comparison-table__highlight {
  background-color: rgba(29, 185, 84, 0.08);
}

.comparison-table tbody tr:hover td {
  background-color: var(--color-bg-inset);
}

.comparison-table tbody tr:hover td.comparison-table__highlight {
  background-color: rgba(29, 185, 84, 0.15);
}

/* Check / Cross icons in table */
.comparison-check {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.comparison-cross {
  color: var(--color-slate-500);
}

.comparison-partial {
  color: var(--color-warning);
}


/* ==========================================================================
   16. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  padding: var(--space-4) 0;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumbs__item::before {
  content: '/';
  color: var(--color-text-tertiary);
  margin-right: var(--space-1);
}

.breadcrumbs__item:first-child::before {
  display: none;
}

.breadcrumbs__link {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumbs__link:hover {
  color: var(--color-text);
}

.breadcrumbs__current {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

/* Breadcrumb singular alias — some pages use .breadcrumb (no 's') */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  padding: var(--space-4) 0;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__item::before {
  content: '/';
  color: var(--color-text-tertiary);
  margin-right: var(--space-1);
}

.breadcrumb__item:first-child::before {
  display: none;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb__item a:hover {
  color: var(--color-text);
}


/* ==========================================================================
   17. PER-VERTICAL THEME CLASSES
   ========================================================================== */

/* Labify Beauté — Rose Gold / Champagne
   --theme-btn-text: dark — rose gold (#C9A96E) is a light tone; dark text
   gives ~8.7:1 contrast ratio (WCAG AAA). */
.theme-beaute {
  --theme-accent:       #C9A96E;
  --theme-accent-hover: #B8945A;
  --theme-accent-light: rgba(201, 169, 110, 0.14);
  --theme-bg-tint:      rgba(201, 169, 110, 0.07);
  --theme-btn-text:     var(--color-text-inverse);
}

/* Labify Nez — Botanical Green
   --theme-btn-text: white — deep forest green (#4A7C59) gives ~7.5:1 with white. */
.theme-nez {
  --theme-accent:       #4A7C59;
  --theme-accent-hover: #3D6849;
  --theme-accent-light: rgba(74, 124, 89, 0.16);
  --theme-bg-tint:      rgba(74, 124, 89, 0.08);
  --theme-btn-text:     var(--color-white);
}

/* Labify Factory — Industrial Slate Blue
   --theme-btn-text: dark — bright blue (#509BF5) gives ~4.5:1 with dark text. */
.theme-factory {
  --theme-accent:       var(--color-factory-400);
  --theme-accent-hover: var(--color-factory-600);
  --theme-accent-light: rgba(80, 155, 245, 0.12);
  --theme-bg-tint:      rgba(80, 155, 245, 0.06);
  --theme-btn-text:     var(--color-text-inverse);
}

/* La Dalle — Warm Amber / Terracotta (reference — do not alter accent)
   --theme-btn-text: dark — amber (#F59B23) is bright; dark text gives ~9:1. */
.theme-ladalle {
  --theme-accent:       var(--color-ladalle-400);
  --theme-accent-hover: var(--color-ladalle-600);
  --theme-accent-light: rgba(245, 155, 35, 0.12);
  --theme-bg-tint:      rgba(245, 155, 35, 0.06);
  --theme-btn-text:     var(--color-text-inverse);
}

/* kAI — Electric Violet / Deep Purple
   --theme-btn-text: white — deep purple (#6C3FC4) gives ~8.75:1 with white. */
.theme-kai {
  --theme-accent:       #6C3FC4;
  --theme-accent-hover: #5A35A3;
  --theme-accent-light: rgba(108, 63, 196, 0.15);
  --theme-bg-tint:      rgba(108, 63, 196, 0.08);
  --theme-btn-text:     var(--color-white);
}

/* MSDS — Cool Teal
   --theme-btn-text: dark — bright teal (#2DD4BF) gives ~10:1 with dark text. */
.theme-msds {
  --theme-accent:       var(--color-msds-400);
  --theme-accent-hover: var(--color-msds-500);
  --theme-accent-light: rgba(45, 212, 191, 0.12);
  --theme-bg-tint:      rgba(45, 212, 191, 0.06);
  --theme-btn-text:     var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   Theme-aware component overrides
   All selectors are scoped to [class*="theme-"] so they only apply on pages
   that carry a product theme class on <body>. Global pages (homepage, about,
   contact, etc.) are unaffected.
   -------------------------------------------------------------------------- */

/* Overline / category label */
[class*="theme-"] .overline {
  color: var(--theme-accent);
}

/* Feature icons (feature-item layout) */
[class*="theme-"] .feature-item__icon {
  background-color: var(--theme-accent-light);
  color: var(--theme-accent);
}

/* Feature-card icons (La Dalle / product grid layout with inline SVG) */
[class*="theme-"] .feature-card__icon {
  color: var(--theme-accent);
}

/* Marked / highlighted text */
[class*="theme-"] mark {
  background-color: var(--theme-accent-light);
}

/* Product / article card links */
[class*="theme-"] .product-card__link,
[class*="theme-"] .article-card__category {
  color: var(--theme-accent);
}

/* Inline prose links */
[class*="theme-"] .prose a {
  color: var(--theme-accent);
}
[class*="theme-"] .prose a:hover {
  color: var(--theme-accent-hover);
}

/* Inline links outside .prose — feature descriptions, FAQ answers, body copy */
[class*="theme-"] p a:not(.btn),
[class*="theme-"] .feature-item__content a:not(.btn),
[class*="theme-"] .faq-item__answer-inner a:not(.btn) {
  color: var(--theme-accent);
}
[class*="theme-"] p a:not(.btn):hover,
[class*="theme-"] .feature-item__content a:not(.btn):hover,
[class*="theme-"] .faq-item__answer-inner a:not(.btn):hover {
  opacity: 0.8;
}

/* Stat / data highlight numbers */
[class*="theme-"] .stat__number {
  color: var(--theme-accent);
}

/* FAQ accordion — open/active state uses page accent */
[class*="theme-"] .faq-item[data-open="true"] .faq-item__question,
[class*="theme-"] .faq-item.is-open .faq-item__question {
  color: var(--theme-accent);
}

/* FAQ question hover on themed pages */
[class*="theme-"] .faq-item__question:hover {
  color: var(--theme-accent);
}

/* --------------------------------------------------------------------------
   Button overrides — primary, secondary, and inverse buttons on a product
   page all use the product accent. .btn--primary picks it up via the base
   rule (var(--theme-accent, #1DB954)); secondary and inverse are scoped
   here for completeness.
   -------------------------------------------------------------------------- */

/* Secondary (outline) button */
[class*="theme-"] .btn--secondary {
  color: var(--theme-accent);
  border-color: var(--theme-accent);
}
[class*="theme-"] .btn--secondary:hover {
  background-color: var(--theme-accent-light);
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}

/* Inverse button (white-on-dark CTA sections) */
[class*="theme-"] .btn--inverse {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--theme-btn-text, var(--color-text-inverse));
}
[class*="theme-"] .btn--inverse:hover {
  background-color: var(--theme-accent-hover);
  border-color: var(--theme-accent-hover);
  color: var(--theme-btn-text, var(--color-text-inverse));
}


/* ==========================================================================
   18. CTA SECTIONS
   ========================================================================== */

.cta-section {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  background-color: #0B0B0B;
  color: var(--color-text);
  border-radius: var(--radius-2xl);
}

.cta-section h2 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.cta-section p {
  color: var(--color-text-secondary);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* Full-width CTA (no border-radius) */
.cta-banner {
  text-align: center;
  padding: var(--space-20) var(--space-6);
  background: linear-gradient(135deg, #0B0B0B 0%, #181818 100%);
  color: var(--color-text);
}

.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.cta-banner p {
  color: var(--color-text-secondary);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}


/* ==========================================================================
   19. TESTIMONIAL (About page only)
   ========================================================================== */

.testimonial {
  position: relative;
  padding: var(--space-10);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  max-width: var(--container-md);
  margin-inline: auto;
}

.testimonial::before {
  content: '\201C';
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: 1;
  color: var(--color-border);
  pointer-events: none;
}

.testimonial__quote {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  position: relative;
}

@media (min-width: 768px) {
  .testimonial__quote {
    font-size: var(--text-xl);
  }
}

.testimonial__author {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.testimonial__role {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   20. SCROLL REVEAL / MOTION
   ========================================================================== */

/* Reveal: elements start hidden, JS adds .reveal-visible on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-entrance) var(--ease-out),
              transform var(--duration-entrance) var(--ease-out);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }

/* Fade in only (no translate) */
.reveal--fade {
  transform: none;
}

/* Slide from left */
.reveal--left {
  transform: translateX(-24px);
}

.reveal--left.reveal-visible {
  transform: translateX(0);
}

/* Slide from right */
.reveal--right {
  transform: translateX(24px);
}

.reveal--right.reveal-visible {
  transform: translateX(0);
}

/* Scale up */
.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.reveal-visible {
  transform: scale(1);
}

/* Stat counter animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat--animate {
  animation: countUp var(--duration-entrance) var(--ease-out) forwards;
}

/* Subtle pulse for accent elements */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}


/* ==========================================================================
   21. MISCELLANEOUS COMPONENTS
   ========================================================================== */

/* Badge / Tag */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.badge--accent {
  background-color: var(--theme-accent-light, rgba(29, 185, 84, 0.12));
  color: var(--theme-accent, var(--color-accent));
}

.badge--beta {
  background-color: var(--color-warning);
  color: var(--color-white);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

/* Divider with text */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* Icon container */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background-color: var(--theme-bg-tint, var(--color-bg-inset));
  color: var(--theme-accent, var(--color-accent));
}

.icon-box--lg {
  width: 4rem;
  height: 4rem;
}

/* Calendly embed container */
.calendly-embed {
  min-height: 700px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Platform architecture diagram placeholder */
.architecture-diagram {
  padding: var(--space-12);
  background-color: var(--color-bg-inset);
  border-radius: var(--radius-xl);
  border: 1px dashed var(--color-border);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* Module pills for platform page */
.module-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.module-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.module-pill:hover {
  border-color: var(--theme-accent, var(--color-accent));
  background-color: var(--theme-bg-tint, var(--color-bg-inset));
}

/* Team member card (About page) */
.team-card {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Supplier value prop cards */
.value-card {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.value-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.value-card__icon {
  margin-inline: auto;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
}

.value-card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

.value-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   22. DARK MODE (prefers-color-scheme)
   ========================================================================== */

/* ==========================================================================
   22. DARK-BY-DEFAULT — No prefers-color-scheme needed
   Site is dark by default. This section intentionally left empty.
   ========================================================================== */


/* ==========================================================================
   22b. MODULE GRID & MODULE CARD
   Used on /platform/ and /kai/ pages.
   ========================================================================== */

.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

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

.module-card {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.module-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-md);
}

.module-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-bg-tint, rgba(29, 185, 84, 0.08));
  border-radius: var(--radius-lg);
  color: var(--theme-accent, var(--color-accent));
  flex-shrink: 0;
}

.module-card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  text-align: left;
}

.module-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   22c. FEATURE LIST (alternate naming used on /platform/ and /kai/)
   .feature-item__title / .feature-item__desc are used when the feature-item
   does NOT have a .feature-item__content wrapper.
   ========================================================================== */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature-list .feature-item {
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--duration-base) var(--ease-out);
}

.feature-list .feature-item:hover {
  border-color: var(--color-border-medium);
}

.feature-item__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-align: left;
}

.feature-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ==========================================================================
   23. PRINT STYLES
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  abbr[title]::after {
    content: ' (' attr(title) ')';
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  /* Hide interactive/nav elements */
  .site-header,
  .site-footer,
  .nav-toggle,
  .mobile-nav,
  .skip-link,
  .btn,
  .cta-section,
  .cta-banner,
  .calendly-embed {
    display: none !important;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .section {
    padding: 1em 0;
  }

  .hero {
    min-height: auto;
    padding: 2em 0;
  }
}


/* ==========================================================================
   24. UTILITY CLASSES
   ========================================================================== */

/* Visibility */
.hidden        { display: none !important; }
.block         { display: block; }
.inline-block  { display: inline-block; }

/* Responsive show/hide */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 1023px) {
  .hide-below-desktop { display: none !important; }
}

/* Spacing utilities */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.py-8  { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }
.py-24 { padding-block: var(--space-24); }

.px-4  { padding-inline: var(--space-4); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }

/* Width constraints */
.max-w-prose   { max-width: 68ch; }
.max-w-narrow  { max-width: 42ch; }
.max-w-wide    { max-width: 80ch; }
.w-full        { width: 100%; }

/* Decorative line above section headers */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center .lead {
  margin-inline: auto;
}

.section-header .overline {
  margin-bottom: var(--space-4);
  display: block;
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

/* Shared section-heading classes — always centered when used above body text */
.section-title,
.section__title {
  text-align: center;
}

/* Relative position utility for z-stacking */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }


/* ==========================================================================
   24. MISSING COMPONENT CSS
   Classes used in HTML that were not yet defined in styles.css.
   ========================================================================== */

/* --- Container narrow ---------------------------------------------------- */
.container--narrow {
  max-width: 860px;
}

/* --- Section title aliases ----------------------------------------------- */
/* .section__title (double-underscore) is used on knowledge/index.html;
   .section__heading / .section__subheading are used on products/msds       */
.section__title,
.section__heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-align: center;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.section__subheading {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 64ch;
  margin-inline: auto;
  margin-bottom: var(--space-12);
  text-align: center;
}

@media (min-width: 768px) {
  .section__title,
  .section__heading {
    font-size: var(--text-4xl);
  }
}

/* --- Vertical cards (platform + kai pages) ------------------------------- */
.vertical-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .vertical-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vertical-card {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  border-top: 3px solid var(--color-border);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.vertical-card:hover {
  box-shadow: var(--shadow-lg);
}

.vertical-card--beaute {
  border-top-color: #C9A96E; /* champagne / rose gold — matches --theme-accent in .theme-beaute */
}

.vertical-card--nez {
  border-top-color: #4A7C59; /* botanical green — matches --theme-accent in .theme-nez */
}

.vertical-card--ladalle {
  border-top-color: var(--color-ladalle-400);
}

/* Per-product "Explore →" link colors on shared pages (Platform, etc.) */
.vertical-card--beaute .vertical-card__link   { color: #C9A96E; }
.vertical-card--nez .vertical-card__link      { color: #4A7C59; }
.vertical-card--ladalle .vertical-card__link  { color: var(--color-ladalle-400); }
.vertical-card--factory .vertical-card__link  { color: var(--color-factory-400); }
.vertical-card--kai .vertical-card__link      { color: #6C3FC4; }
.vertical-card--msds .vertical-card__link     { color: var(--color-msds-400); }

.vertical-card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  text-align: left;
  line-height: var(--leading-snug);
}

.vertical-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.vertical-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--duration-base) var(--ease-out);
}

.vertical-card__link:hover {
  gap: var(--space-3);
}

/* --- Credentials card (kai page) ----------------------------------------- */
.credentials-card {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  max-width: var(--container-md);
  margin-inline: auto;
}

.credentials-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.credentials-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  text-align: left;
}

.credentials-card__role {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.credentials-card__list {
  list-style: disc;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.credentials-card__list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* --- Knowledge grid + card (knowledge/index.html) ------------------------- */
.knowledge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

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

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

.knowledge-card {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.knowledge-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-md);
}

.knowledge-card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  text-align: left;
}

.knowledge-card__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.knowledge-card__title a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.knowledge-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex-grow: 1;
}

/* --- Generic card (contact page, msds page) ------------------------------ */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.card--feature {
  padding: var(--space-8);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.card--feature:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-md);
}

.card__icon {
  margin-bottom: var(--space-4);
}

.card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-align: left;
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.card__list {
  list-style: disc;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card__list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* --- Step component (products/msds, how-it-works flows) ------------------ */
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
}

.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--theme-bg-tint, rgba(29, 185, 84, 0.1));
  color: var(--theme-accent, var(--color-accent));
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.step__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: left;
  margin: 0;
}

.step__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ==========================================================================
   25. MOBILE RESPONSIVENESS — Global Fixes
   All rules in this section are inside @media (max-width: 767px) unless
   otherwise noted. No desktop layout changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25a. Global mobile rules
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Prevent horizontal scroll globally */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Ensure all images are responsive */
  img,
  svg,
  video,
  picture {
    max-width: 100%;
    height: auto;
  }

  /* Tighten container padding on small screens */
  .container {
    padding-inline: var(--space-4);
  }

}

/* --------------------------------------------------------------------------
   25b. Typography scale-down on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  h1 {
    font-size: clamp(1.875rem, 6vw, 2.5rem); /* 30–40px */
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem); /* 24–32px */
  }

  h3 {
    font-size: clamp(1.125rem, 4vw, 1.5rem); /* 18–24px */
  }

  /* Hero title: override hero__title which can get very large */
  .hero__title {
    font-size: clamp(1.75rem, 6.5vw, 2.5rem);
    max-width: 100%;
  }

  /* Hero subtitle */
  .hero__subtitle {
    font-size: var(--text-base);
    max-width: 100%;
  }

  /* Lead text */
  .lead {
    font-size: var(--text-base);
    max-width: 100%;
  }

  /* Stat counter numbers */
  .stat__number {
    font-size: var(--text-3xl); /* 2.25rem = 36px instead of 3rem */
  }
}

/* --------------------------------------------------------------------------
   25c. Hero section fixes on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--space-12) + var(--header-height));
    padding-bottom: var(--space-12);
  }

  .hero--homepage {
    min-height: auto;
  }

  /* CTA button group — stack vertically on mobile */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Product hero CTA */
  .product-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .product-hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Product hero visual — full width on mobile */
  .product-hero__visual {
    margin-top: var(--space-8);
    width: 100%;
  }

  /* Hero mockup */
  .hero__mockup {
    width: 100%;
    margin-top: var(--space-8);
  }

  .hero__mockup img,
  .product-hero__visual img {
    width: 100%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   25d. Feature-item: collapse to single column on mobile
   The base .feature-item is flex-row (icon + content side by side).
   Without an icon, h3 and p would sit beside each other — too narrow on mobile.
   Fix: always stack to column below 768px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .feature-item {
    flex-direction: column;
  }

  /* Ensure icon is not over-sized when stacked */
  .feature-item__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Feature item stacked: reduce padding on mobile */
  .feature-item--stacked {
    padding: var(--space-4);
  }

  /* Feature list items: reduce side padding on mobile */
  .feature-list .feature-item {
    padding: var(--space-4);
  }

  /* Feature grid: single column on mobile (base CSS already sets 1fr,
     this block ensures any overrides don't break mobile layout) */
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   25e. Multi-column grids: enforce single column on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* All standard grid variants → single column (base CSS already sets 1fr
     as the default before the 768px min-width breakpoint kicks in) */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Module grid */
  .module-grid {
    grid-template-columns: 1fr;
  }

  /* Vertical cards */
  .vertical-cards {
    grid-template-columns: 1fr;
  }

  /* Knowledge grid */
  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  /* Stats: keep 2-column on mobile (default is already repeat(2, 1fr)) */
  .stats {
    gap: var(--space-6);
  }

  /* Inline-style stats overrides — prevent overflow */
  .stat__number {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Footer grid */
  .footer__grid {
    grid-template-columns: 1fr;
  }

  /* Footer brand: remove max-width constraint on mobile */
  .footer__brand {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   25f. Navigation on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Ensure mobile nav links have adequate tap targets (≥ 44px height) */
  .mobile-nav__link {
    padding: var(--space-3) var(--space-2);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Hamburger button: adequate tap target */
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  /* Mobile nav panel: full-width, no horizontal overflow */
  .mobile-nav {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* --------------------------------------------------------------------------
   25g. FAQ accordion on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faq-list {
    max-width: 100%;
  }

  .faq-item__question {
    padding: var(--space-4) 0;
    font-size: var(--text-sm);
    gap: var(--space-3);
    /* Ensure icon doesn't overlap text */
    align-items: flex-start;
  }

  .faq-item__icon {
    margin-top: 0.2em; /* align with first line of text */
    flex-shrink: 0;
  }

  .faq-item__answer-inner {
    padding-bottom: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }
}

/* --------------------------------------------------------------------------
   25h. Comparison table: horizontal scroll within wrapper on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Extend to edge of screen for wider scroll area */
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }

  .comparison-table {
    min-width: 560px;
    font-size: var(--text-sm);
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-3) var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   25i. Calendly embed on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .calendly-embed {
    min-height: 600px;
    border-radius: var(--radius-lg);
  }
}

/* --------------------------------------------------------------------------
   25j. Product cards on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .product-card {
    padding: var(--space-6);
  }

  .value-card {
    padding: var(--space-6);
  }

  .module-card {
    padding: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   25k. Knowledge hub article prose on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .prose {
    max-width: 100%;
    /* Side padding handled by .container, but ensure no overflow */
    overflow-x: hidden;
  }

  .prose h2,
  .prose h3 {
    text-align: left;
    /* Reduce heading size in article body */
    font-size: var(--text-xl);
  }

  .prose h3 {
    font-size: var(--text-lg);
  }

  .prose pre {
    /* Horizontal scroll within code blocks, not the whole page */
    overflow-x: auto;
    font-size: var(--text-xs);
  }

  .prose ul,
  .prose ol {
    padding-left: var(--space-5);
  }

  .prose li {
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  /* Ensure article line-height is at least 1.6 */
  .prose p {
    line-height: 1.7;
    font-size: var(--text-base);
  }
}

/* --------------------------------------------------------------------------
   25l. CTA sections on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cta-section {
    padding: var(--space-10) var(--space-4);
    border-radius: var(--radius-xl);
  }

  .cta-banner {
    padding: var(--space-12) var(--space-4);
  }

  /* CTA button pairs in these sections */
  .cta-section .flex,
  .cta-banner .flex {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .cta-section .btn,
  .cta-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   25m. Team card and testimonial on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .team-card {
    padding: var(--space-6);
  }

  .testimonial {
    padding: var(--space-6) var(--space-5);
  }

  .testimonial::before {
    font-size: var(--text-5xl);
    top: var(--space-2);
    left: var(--space-4);
  }

  .testimonial__quote {
    font-size: var(--text-base);
    padding-top: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   25n. Vertical card and credentials card on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .vertical-card {
    padding: var(--space-6);
  }

  .credentials-card {
    padding: var(--space-6) var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   25o. Tablet (768px–1023px): intermediate adjustments
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 3-col grids → 2-col at tablet */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 4-col grids → 2-col at tablet */
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Vertical cards: 2-col at tablet */
  .vertical-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats: 4-col at tablet */
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   25p. Miscellaneous mobile fixes
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Section header: reduce bottom margin */
  .section-header {
    margin-bottom: var(--space-8);
  }

  /* Breadcrumbs: reduce font size */
  .breadcrumbs,
  .breadcrumb {
    font-size: var(--text-xs);
    padding: var(--space-3) 0;
  }

  /* Module pills: allow wrapping and smaller text on mobile */
  .module-pills {
    gap: var(--space-1-5);
  }

  .module-pill {
    font-size: var(--text-xs);
    padding: var(--space-1-5) var(--space-3);
  }

  /* Step component: ensure full width on mobile */
  .step {
    padding: var(--space-5);
  }

  /* Card: reduce padding on mobile */
  .card--feature {
    padding: var(--space-6);
  }

  /* Knowledge card: reduce padding on mobile */
  .knowledge-card {
    padding: var(--space-5);
  }

  /* Footer bottom links: stack on mobile */
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer__legal {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* Ensure footer links have adequate tap targets */
  .footer__links a,
  .site-footer a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Architecture diagram: reduce padding */
  .architecture-diagram {
    padding: var(--space-8) var(--space-4);
  }

  /* Stat counter: ensure labels wrap cleanly */
  .stat__label {
    font-size: var(--text-xs);
  }
}

@media (max-width: 767px) {
  .contact-offices {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CROSS-REFERENCE LINK COLORS — Rule A
   When any page links to a specific product, the link takes that product's
   accent color — regardless of which page is showing it.
   Exclusions: nav links, mobile nav links, footer links, and buttons (.btn)
   all stay neutral; only inline content links are colored.
   ========================================================================== */

a[href*="/labify-beaute/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a) {
  color: #C9A96E; /* --theme-accent for Labify Beauté */
}
a[href*="/labify-beaute/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover {
  color: #B8945A;
}

a[href*="/labify-nez/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a) {
  color: #4A7C59; /* --theme-accent for Labify Nez */
}
a[href*="/labify-nez/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover {
  color: #3D6849;
}

a[href*="/labify-factory/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a) {
  color: #509BF5; /* --color-factory-400 */
}
a[href*="/labify-factory/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover {
  color: #3F7AC5;
}

a[href*="/la-dalle/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a),
a[href*="ladalle.io"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a) {
  color: #F59B23; /* --color-ladalle-400 */
}
a[href*="/la-dalle/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover,
a[href*="ladalle.io"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover {
  color: #C77A15;
}

a[href*="/msds/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a) {
  color: #2DD4BF; /* --color-msds-400 */
}
a[href*="/msds/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover {
  color: #14B8A6;
}

a[href*="/kai/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a) {
  color: #6C3FC4; /* --theme-accent for kAI */
}
a[href*="/kai/"]:not(.btn):not(.site-nav__link):not(.site-nav__dropdown-item):not(.mobile-nav__link):not(.site-footer a):not(.footer__links a):hover {
  color: #5A35A3;
}

/* Footer links always stay neutral — override any product-color rules above */
.site-footer a[href*="/labify-beaute/"],
.site-footer a[href*="/labify-nez/"],
.site-footer a[href*="/labify-factory/"],
.site-footer a[href*="/la-dalle/"],
.site-footer a[href*="ladalle.io"],
.site-footer a[href*="/msds/"],
.site-footer a[href*="/kai/"] {
  color: var(--color-text-secondary);
}
.site-footer a[href*="/labify-beaute/"]:hover,
.site-footer a[href*="/labify-nez/"]:hover,
.site-footer a[href*="/labify-factory/"]:hover,
.site-footer a[href*="/la-dalle/"]:hover,
.site-footer a[href*="ladalle.io"]:hover,
.site-footer a[href*="/msds/"]:hover,
.site-footer a[href*="/kai/"]:hover {
  color: var(--color-white);
}

/* ==========================================================================
   Cross-reference BUTTON colors (secondary/outline)
   When a .btn--secondary links to a specific product, it uses that product's
   accent color for text and border — regardless of the current page's theme.
   This ensures "Explore Labify® Factory →" is always Factory blue, etc.
   ========================================================================== */

.btn--secondary[href*="/labify-beaute/"] {
  color: #C9A96E;
  border-color: #C9A96E;
}
.btn--secondary[href*="/labify-beaute/"]:hover {
  background-color: rgba(201, 169, 110, 0.12);
  color: #B8945A;
  border-color: #B8945A;
}

.btn--secondary[href*="/labify-nez/"] {
  color: #4A7C59;
  border-color: #4A7C59;
}
.btn--secondary[href*="/labify-nez/"]:hover {
  background-color: rgba(74, 124, 89, 0.12);
  color: #3D6849;
  border-color: #3D6849;
}

.btn--secondary[href*="/labify-factory/"] {
  color: #509BF5;
  border-color: #509BF5;
}
.btn--secondary[href*="/labify-factory/"]:hover {
  background-color: rgba(80, 155, 245, 0.12);
  color: #3F7AC5;
  border-color: #3F7AC5;
}

.btn--secondary[href*="/la-dalle/"],
.btn--secondary[href*="ladalle.io"] {
  color: #F59B23;
  border-color: #F59B23;
}
.btn--secondary[href*="/la-dalle/"]:hover,
.btn--secondary[href*="ladalle.io"]:hover {
  background-color: rgba(245, 155, 35, 0.12);
  color: #C77A15;
  border-color: #C77A15;
}

.btn--secondary[href*="/msds/"] {
  color: #2DD4BF;
  border-color: #2DD4BF;
}
.btn--secondary[href*="/msds/"]:hover {
  background-color: rgba(45, 212, 191, 0.12);
  color: #14B8A6;
  border-color: #14B8A6;
}

.btn--secondary[href*="/kai/"] {
  color: #6C3FC4;
  border-color: #6C3FC4;
}
.btn--secondary[href*="/kai/"]:hover {
  background-color: rgba(108, 63, 196, 0.12);
  color: #5A35A3;
  border-color: #5A35A3;
}