/* ==========================================================================
   SOVEL — Design System  (v1.0.0 — Phase 1)
   --------------------------------------------------------------------------
   Single stylesheet, no framework, no dependencies.
   Layers:  tokens → reset → typography → layout → components → utilities
   Fonts:   Inter (UI/body/headings) + EB Garamond (editorial accents)
            Both self-hosted, subsetted to Latin, SIL OFL licensed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — light, neutral, layered */
  --surface:        #ffffff;
  --surface-2:      #f7f9fc;
  --surface-3:      #eef2f9;
  --surface-invert: #0b1020;

  /* Ink
     NOTE: --ink-subtle is darkened to meet WCAG AA (4.5:1) for small text on the
     lightest surface it is used on (--surface-3). Earlier values (#78829b) measured
     3.64–3.84:1 and failed. Verified by tests/browser-check.js contrast audit. */
  --ink:        #0b1020;
  --ink-2:      #232b3d;
  --ink-muted:  #55607a;
  --ink-subtle: #616b82;
  --on-invert:        #f2f5fb;
  --on-invert-muted:  #a8b2c9;

  /* Lines */
  --line:      #e4e8f0;
  --line-soft: #eef1f7;
  --line-invert: rgba(255, 255, 255, 0.14);

  /* Brand */
  --brand-900: #1b1746;
  --brand-700: #2a2470;
  --brand-600: #3a32a8;
  --brand-500: #4b41d6;
  --brand-400: #6c63f0;
  --brand-050: #f0effd;

  /* Accents
     NOTE: the 600-level accent colours are darkened so that small badge and notice
     labels meet WCAG AA (4.5:1) on their 050-level backgrounds. The previous values
     measured 3.99–4.35:1 and failed. Verified by tests/browser-check.js. */
  --teal-600: #0a6f6c;
  --teal-500: #0e9f9a;
  --teal-050: #e6f6f5;
  --gold-600: #7d5c16;
  --gold-500: #b8892b;
  --gold-050: #fbf4e6;
  --amber-600: #8f5208;
  --amber-050: #fdf3e6;

  /* Semantic */
  --focus:  #4b41d6;
  --ok:     #0b7f7b;

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.15rem, 0.4vw + 1.05rem, 1.3rem);
  --fs-xl:   clamp(1.35rem, 0.8vw + 1.15rem, 1.65rem);
  --fs-2xl:  clamp(1.6rem, 1.6vw + 1.2rem, 2.15rem);
  --fs-3xl:  clamp(2rem, 3vw + 1.2rem, 3rem);
  --fs-4xl:  clamp(2.5rem, 5vw + 1rem, 4.25rem);

  /* Spacing (8px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;

  /* Radii */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;

  /* Elevation — soft, layered, never heavy */
  --e-1: 0 1px 2px rgba(11, 16, 32, 0.05);
  --e-2: 0 4px 14px rgba(11, 16, 32, 0.06);
  --e-3: 0 14px 40px rgba(11, 16, 32, 0.09);
  --e-4: 0 28px 70px rgba(11, 16, 32, 0.13);

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --header-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-600); text-underline-offset: 3px; }
a:hover { color: var(--brand-500); }
ul, ol { padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

/* --------------------------------------------------------------------------
   4. ACCESSIBILITY BASELINE
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--brand-700);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: #fff; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 680; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

.lede {
  font-size: var(--fs-lg);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 62ch;
}
.serif { font-family: var(--font-serif); }

/* Editorial statement — EB Garamond accent */
.statement {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.eyebrow--teal { color: var(--teal-600); }
.eyebrow--muted { color: var(--ink-subtle); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-9); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: var(--s-4) 0; }
.prose li + li { margin-top: var(--s-2); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-3);
  padding: 0.12em 0.4em;
  border-radius: 5px;
  color: var(--brand-700);
}

.prose .media-figure {
  margin: var(--s-8) 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--s-6) 0;
}
.prose table th,
.prose table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.prose table th {
  color: var(--ink);
  font-weight: 620;
  background: var(--surface-2);
}
.prose table td {
  color: var(--ink-muted);
}
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-6) 0;
}
.prose blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  border-left: 3px solid var(--brand-600);
  background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-muted);
}
.prose hr {
  margin: var(--s-9) 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   6. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s-10); }
.section--tight { padding-block: var(--s-8); }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--line-soft); }

.section-head { max-width: 66ch; margin-bottom: var(--s-7); }
.section-head h2 { margin-top: var(--s-3); }
.section-head .lede { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--shop { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid--blog { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (min-width: 1400px) {
  .grid--shop { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
  .grid--blog { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Grid and flex children default to min-width:auto, which lets long content
   push a track wider than its container and cause horizontal overflow at narrow
   widths. Resetting to 0 lets tracks shrink as intended. Verified at 320px by
   the reflow320 viewport in tests/browser-check.js. */
.grid > *,
.footer-grid > *,
.product-layout > *,
.facts > * { min-width: 0; }

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  font-weight: 680;
  letter-spacing: 0.02em;
  font-size: 1.0625rem;
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__sub {
  font-size: 0.6rem;
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* Footer brand: the flat SOVEL lockup is dark navy on transparency, so it sits
   on a light plate rather than being recoloured to suit the dark footer. */
.brand-plate {
  display: inline-block;
  background: #fff;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  line-height: 0;
  text-decoration: none;
}
.brand-plate:hover { text-decoration: none; }
.brand-plate__logo { display: block; width: 200px; height: auto; }
@media (max-width: 480px) {
  .brand-plate__logo { width: 168px; }
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__link {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__link:hover { background: var(--surface-3); color: var(--brand-700); }
.nav__link[aria-current='page'] { color: var(--brand-700); background: var(--brand-050); }

/* Dropdown */
.nav__item--has-menu { position: relative; }
.nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  padding: var(--s-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.nav__menu a:hover { background: var(--surface-3); color: var(--brand-700); }
.nav__menu small { display: block; color: var(--ink-subtle); font-size: var(--fs-xs); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--s-2); }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--e-3);
    padding: var(--s-4);
    display: none;
  }
  .nav[data-open='true'] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin-left: var(--s-3); padding: 0 0 0 var(--s-2);
  }
  .nav__link { padding: var(--s-3); font-size: var(--fs-base); }
}

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.72em 1.35em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 620;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff;
  box-shadow: 0 6px 18px rgba(58, 50, 168, 0.26);
}
.btn--primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(58, 50, 168, 0.32); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--e-1);
}
.btn--ghost:hover { border-color: var(--brand-400); color: var(--brand-700); }

.btn--quiet { color: var(--brand-600); padding-inline: var(--s-3); white-space: normal; }
.btn--quiet:hover { background: var(--brand-050); }

.btn--on-invert {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line-invert);
  color: #fff;
}
.btn--on-invert:hover { background: rgba(255, 255, 255, 0.17); color: #fff; }

/* Size modifier. Used by primary form actions such as the contact submit
   button, which are the single most important action on their page and should
   read as such. */
.btn--large {
  padding: 0.95em 1.9em;
  font-size: var(--fs-base);
  font-weight: 650;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* --------------------------------------------------------------------------
   9. BADGES / PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.28em 0.72em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
.badge--brand  { background: var(--brand-050); color: var(--brand-700); border-color: #ddd9f8; }
.badge--teal   { background: var(--teal-050);  color: var(--teal-600);  border-color: #ccecea; }
.badge--gold   { background: var(--gold-050);  color: var(--gold-600);  border-color: #f0e2c4; }
.badge--amber  { background: var(--amber-050); color: var(--amber-600); border-color: #f3e0c2; }
.badge--plain  { background: transparent; }
.badge--neutral { background: var(--surface-3); color: var(--ink-muted); border-color: var(--line); }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--e-1);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s var(--ease), box-shadow 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(11, 16, 32, 0.08), 0 0 0 1px rgba(79, 70, 229, 0.16);
  border-color: rgba(79, 70, 229, 0.3);
}
.card__title { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.card__title a { text-decoration: none; color: var(--ink); }
.card__title a:hover { color: var(--brand-600); }
.card__meta { font-size: var(--fs-xs); color: var(--ink-subtle); margin-bottom: var(--s-3); }
.card p { color: var(--ink-muted); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__body { padding: var(--s-6); }

/* ---- Book presentation cards with ambient glow & interactive motion ---- */
.card--book {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card--book .card__media--book {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(79, 70, 229, 0.16);
  box-shadow:
    0 10px 28px -8px rgba(79, 70, 229, 0.22),
    0 4px 14px -2px rgba(13, 148, 136, 0.18),
    0 0 18px -2px rgba(79, 70, 229, 0.15);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.45s var(--ease);
  animation: bookGlowAmbient 5s ease-in-out infinite alternate;
}

.card--book:nth-child(2) .card__media--book {
  animation-delay: 1.6s;
}

.card--book:nth-child(3) .card__media--book {
  animation-delay: 3.2s;
}

@keyframes bookGlowAmbient {
  0% {
    box-shadow:
      0 10px 26px -8px rgba(79, 70, 229, 0.20),
      0 4px 12px -2px rgba(13, 148, 136, 0.16),
      0 0 16px -2px rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.18);
  }
  100% {
    box-shadow:
      0 16px 36px -6px rgba(79, 70, 229, 0.32),
      0 6px 18px -2px rgba(13, 148, 136, 0.26),
      0 0 26px 3px rgba(13, 148, 136, 0.24);
    border-color: rgba(13, 148, 136, 0.38);
  }
}

.card--book .card__media--book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s var(--ease);
}

.card--book .book-sheen {
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.card--book:hover .card__media--book,
.card--book:focus-within .card__media--book {
  transform: translateY(-8px) scale(1.025);
  border-color: var(--teal-500);
  box-shadow:
    0 22px 50px -8px rgba(79, 70, 229, 0.38),
    0 8px 24px -2px rgba(13, 148, 136, 0.34),
    0 0 35px 5px rgba(13, 148, 136, 0.32);
}

.card--book:hover .card__media--book img,
.card--book:focus-within .card__media--book img {
  transform: scale(1.04);
}

.card--book:hover .book-sheen,
.card--book:focus-within .book-sheen {
  opacity: 1;
  animation: bookSheenSweep 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes bookSheenSweep {
  0% { left: -120%; }
  100% { left: 180%; }
}

/* Numbered step card */
.step {
  position: relative;
  padding-left: var(--s-7);
}
.step__num {
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.step h4 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--s-11) var(--s-10);
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(75, 65, 214, 0.13), transparent 62%),
    radial-gradient(880px 460px at 92% 6%, rgba(14, 159, 154, 0.11), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #ffffff 72%);
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(11, 16, 32, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 16, 32, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(720px 420px at 28% 22%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(720px 420px at 28% 22%, #000, transparent 78%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: var(--s-5); }
.hero__actions { margin-top: var(--s-7); }

.hero--compact { padding-block: var(--s-9) var(--s-8); }

/* Dark hero variant (used sparingly, not as site default) */
.hero--invert {
  background:
    radial-gradient(900px 480px at 18% -10%, rgba(108, 99, 240, 0.32), transparent 62%),
    radial-gradient(760px 420px at 88% 8%, rgba(14, 159, 154, 0.22), transparent 60%),
    var(--surface-invert);
  color: var(--on-invert);
}
.hero--invert h1 { color: #fff; }
.hero--invert .lede { color: var(--on-invert-muted); }
.hero--invert::after { display: none; }

/* Page header (inner pages) */
.page-head {
  padding-block: var(--s-9) var(--s-7);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--line-soft);
}
.page-head h1 { font-size: var(--fs-3xl); }
.page-head .lede { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   12. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumbs {
  font-size: var(--fs-sm);
  color: var(--ink-subtle);
  padding-block: var(--s-4);
}
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: 0; margin: 0;
}
.breadcrumbs li + li::before { content: '/'; margin-right: var(--s-2); color: var(--line); }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-600); text-decoration: underline; }
.breadcrumbs [aria-current='page'] { color: var(--ink-2); font-weight: 550; }

/* --------------------------------------------------------------------------
   13. NOTICES (evidence / deferred states)
   -------------------------------------------------------------------------- */
.notice {
  border-radius: var(--r-md);
  padding: var(--s-5);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.notice__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  color: var(--ink-subtle);
}
.notice--deferred { background: var(--amber-050); border-color: #f0dcbd; }
.notice--deferred .notice__label { color: var(--amber-600); }
.notice--evidence { background: var(--teal-050); border-color: #ccecea; }
.notice--evidence .notice__label { color: var(--teal-600); }
.notice--brand { background: var(--brand-050); border-color: #ddd9f8; }
.notice--brand .notice__label { color: var(--brand-700); }
.notice p + p { margin-top: var(--s-3); }
.notice ul { margin: var(--s-3) 0 0; }

/* --------------------------------------------------------------------------
   14. DATA / SPEC TABLES
   -------------------------------------------------------------------------- */
.spec {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--fs-sm);
}
.spec dt {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.spec dd {
  padding: var(--s-3) var(--s-4);
  margin: 0;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; }

@media (max-width: 620px) {
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding-bottom: 0; background: var(--surface); }
  .spec dd { padding-top: var(--s-1); }
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.data caption {
  text-align: left;
  color: var(--ink-subtle);
  font-size: var(--fs-xs);
  padding-bottom: var(--s-2);
}
table.data th, table.data td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.data th { color: var(--ink); font-weight: 620; background: var(--surface-2); }
table.data td { color: var(--ink-muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   15. PIPELINE / WORKFLOW DIAGRAM
   -------------------------------------------------------------------------- */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.pipeline__step {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-2);
  box-shadow: var(--e-1);
}
.pipeline__step code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-600);
  background: var(--brand-050);
  padding: 0.15em 0.45em;
  border-radius: 4px;
}

/* Flow chain (arrow-separated) */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.flow__node {
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.flow__sep { color: var(--brand-400); font-weight: 700; }

/* --------------------------------------------------------------------------
   16. PRODUCT PAGE LAYOUT
   -------------------------------------------------------------------------- */
.product-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  padding-block: var(--s-8) var(--s-10);
}
@media (max-width: 940px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  font-size: var(--fs-sm);
}
.toc__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: var(--ink-subtle);
  margin-bottom: var(--s-3);
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin-bottom: var(--s-1); }
.toc a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--line);
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.toc a:hover { color: var(--brand-700); background: var(--surface-2); border-left-color: var(--brand-400); }
@media (max-width: 940px) { .toc { position: static; } }

.product-block { margin-bottom: var(--s-9); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.product-block > h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}

/* Key facts strip */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.facts__item { display: flex; flex-direction: column; gap: 2px; }
.facts__k {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--ink-subtle);
}
.facts__v { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* Feature list with ticks */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--teal-050);
  border: 1px solid #b9e3e0;
}
.ticks li::after {
  content: '';
  position: absolute;
  left: 5px; top: 0.72em;
  width: 5px; height: 8px;
  border-right: 2px solid var(--teal-600);
  border-bottom: 2px solid var(--teal-600);
  transform: rotate(40deg);
}
.ticks li strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   17. ASSET PLACEHOLDER
   -------------------------------------------------------------------------- */
.asset-placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  min-height: 230px;
  padding: var(--s-7);
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
  border: 1px dashed #c8d0e0;
  border-radius: var(--r-lg);
  color: var(--ink-subtle);
  font-size: var(--fs-sm);
}
.asset-placeholder strong { display: block; color: var(--ink-muted); font-size: var(--fs-base); }
.asset-placeholder code { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* Figure */
figure { margin: 0; }
figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-subtle);
}
.diagram-frame {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   18. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(760px 340px at 16% 0%, rgba(108, 99, 240, 0.3), transparent 62%),
    radial-gradient(620px 320px at 88% 100%, rgba(14, 159, 154, 0.22), transparent 60%),
    var(--surface-invert);
  color: var(--on-invert);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-8);
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: var(--on-invert-muted); margin-top: var(--s-4); max-width: 58ch; }
.cta-band .btn-row { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-invert);
  color: var(--on-invert-muted);
  padding-block: var(--s-9) var(--s-6);
  margin-top: var(--s-10);
  font-size: var(--fs-sm);
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: var(--s-4);
  font-weight: 700;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--s-6);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 840px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-sidebar {
    position: static !important;
    order: 2;
    margin-top: var(--s-6);
  }
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer a { color: var(--on-invert-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* The footer brand is the flat lockup on a white plate (.brand-plate), so the
   dark-surface text overrides that the old text lockup needed are gone. */
.site-footer .brand-plate { margin-bottom: var(--s-2); }
.footer-note {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-invert);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: #8c96ad;
}
.footer-disclaimer {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: #8c96ad;
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.pt-3 { padding-top: var(--s-3); }
.pt-4 { padding-top: var(--s-4); }
.p-4 { padding: var(--s-4); }
.p-5 { padding: var(--s-5); }
.p-6 { padding: var(--s-6); }
.text-muted { color: var(--ink-muted); }
.mw-measure { max-width: 68ch; }
.link--quiet { color: var(--ink-muted); text-decoration: none; }
.link--quiet:hover { color: var(--brand-600); text-decoration: underline; }
.eyebrow--brand { color: var(--brand-600); }
.card--subtle { box-shadow: none; background: var(--surface-2); }
.section-subhead { color: var(--ink-muted); font-size: var(--fs-lg); margin-top: var(--s-3); }

/* Button and notice modifiers referenced by templates.
   NOTE: `.btn--brand` and `.btn--large` were previously referenced by the
   contact form but never defined, so the page's primary call to action fell
   back to the browser's default grey button and read as disabled. `.btn--large`
   is now defined above; `.btn--brand` is aliased here so any remaining use
   renders as the brand primary rather than an unstyled button. */
.btn--brand { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff; box-shadow: 0 6px 18px rgba(58, 50, 168, 0.26); }
.btn--brand:hover { color: #fff; box-shadow: 0 10px 26px rgba(58, 50, 168, 0.32); }
.btn--secondary { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--e-1); }
.btn--secondary:hover { border-color: var(--brand-400); color: var(--brand-700); }
.btn--small { padding: 0.45em 0.9em; font-size: var(--fs-xs); }

.notice--error { background: #fdf0f0; border-color: #f2cccc; }
.notice--error .notice__label { color: #8f2020; }
.notice--success { background: var(--teal-050); border-color: #ccecea; }
.notice--success .notice__label { color: var(--teal-600); }
.notice--info { background: var(--brand-050); border-color: #ddd9f8; }
.notice--info .notice__label { color: var(--brand-700); }

.input--select, .input--textarea { width: 100%; }
.input--textarea { min-height: 9rem; resize: vertical; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.hr-soft { border-top: 1px solid var(--line-soft); margin-block: var(--s-7); }

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: var(--s-8); }
  .card { padding: var(--s-5); }
  .cta-band { padding: var(--s-7) var(--s-5); }
}

/* Very narrow screens — WCAG 1.4.10 reflow (320 CSS px).
   The header brand sub-line is the widest element in the bar, so it is dropped
   to keep the menu button inside the viewport. */
@media (max-width: 420px) {
  .wrap { padding-inline: var(--s-4); }
  .site-header__inner { gap: var(--s-3); }
  .brand__sub { display: none; }
  .nav-toggle { padding-inline: var(--s-3); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .grid--auto, .grid--wide, .grid--shop, .grid--blog { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   20b. REVEAL ON SCROLL
   --------------------------------------------------------------------------
   The hidden initial state applies ONLY when JavaScript is available. The `js`
   class is set by a one-line inline script in <head>, which runs before first
   paint (so there is no flash) and before the deferred script executes.

   With JavaScript disabled the rule never matches, so content is never hidden.

   CORRECTED after the accessibility audit: the previous version applied
   `opacity: 0` unconditionally and relied on a `.no-js` class that nothing ever
   set, which left large parts of every page invisible to no-JS users.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .toc, .skip-link { display: none; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .product-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22. VISUAL LAYER (2026-09 upgrade)
   Self-contained: everything below is scoped to new classes so the existing
   design system is untouched.
   ========================================================================== */

/* ---- Hero: layered composition ---- */
.hero--visual { position: relative; overflow: hidden; }

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 420px at 88% -10%, rgba(75, 65, 214, 0.10), transparent 62%),
    radial-gradient(560px 380px at -8% 108%, rgba(14, 159, 154, 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(11, 16, 32, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 16, 32, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(900px 520px at 50% 20%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 520px at 50% 20%, #000 30%, transparent 78%);
}

.hero--visual > .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) 0 var(--s-9);
}

/* ---- Hero visual panel ---- */
.hero__panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  overflow: hidden;
}

.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--teal-500));
}

.hero__panel-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }

.hero__panel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(14, 159, 154, 0.16);
}

.hero__panel-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__panel-note { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ink-subtle); }

.hero__path { display: block; width: 100%; height: auto; }

.hero__path text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
}

.hero__node-core { fill: var(--surface); stroke: var(--brand-500); stroke-width: 2.5; }
.hero__node--6 .hero__node-core { fill: var(--teal-500); stroke: var(--teal-600); }
.hero__node--1 .hero__node-core { fill: var(--brand-500); stroke: var(--brand-600); }

/* Depth: a soft halo disc behind each node. Decorative only. */
.hero__node-halo {
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

@keyframes hero-node-pulse {
  0%, 100% { opacity: 0.35; }
  12%      { opacity: 1; }
  28%      { opacity: 0.35; }
}

@keyframes hero-dash-flow { to { stroke-dashoffset: -100; } }

.hero__path-dash { stroke: var(--brand-500); }
.js .hero__path-dash { animation: hero-dash-flow 6s var(--ease) infinite; }
.js .hero__node-core { animation: hero-node-pulse 6s var(--ease) infinite; }
.js .hero__node--2 .hero__node-core { animation-delay: 0.4s; }
.js .hero__node--3 .hero__node-core { animation-delay: 0.8s; }
.js .hero__node--4 .hero__node-core { animation-delay: 1.2s; }
.js .hero__node--5 .hero__node-core { animation-delay: 1.6s; }
.js .hero__node--6 .hero__node-core { animation-delay: 2s; }

/* Ambient aura, the return rail, the fading trail and the travelling signal.
   All four layers are decorative; the diagram is complete without them. */
.hero__path-aura { opacity: 0.15; }
.hero__path-return { opacity: 0.55; transition: opacity 0.6s var(--ease); }
.hero__path-tail { opacity: 0; transition: opacity 0.3s var(--ease); }
.hero__path-signal { opacity: 0; transition: opacity 0.45s var(--ease); }

.js .hero__path.has-traveller .hero__path-tail { opacity: 0.85; }
.js .hero__path.has-traveller .hero__path-signal { opacity: 1; }
.js .hero__path.is-returning .hero__path-return { opacity: 1; }
.js .hero__path.is-returning .hero__path-signal { opacity: 0; }
.js .hero__path.is-returning .hero__path-tail { opacity: 0; }

.hero__path-halo { fill: rgba(13, 148, 136, 0.22); }

.hero__path-light {
  fill: #ffffff;
  stroke: var(--teal-500);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(13, 148, 136, 0.95));
}

/* ---- Product cards with media ---- */
.card { position: relative; }

.card__media {
  display: block;
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
  position: relative;
}

.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.5s var(--ease);
}

.card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
}

.card__media-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
}

.card__media-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-050);
  color: var(--brand-600);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgba(75, 65, 214, 0.15);
}

.card__media-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card--interactive:hover .card__media img,
.card--interactive:focus-within .card__media img { transform: scale(1.035); }

.card--interactive { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--e-3); }

/* ---- Media grid on product pages ---- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.media-figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.media-figure:hover { transform: translateY(-2px); box-shadow: var(--e-3); }

.media-figure img { display: block; width: 100%; height: auto; }

.media-figure figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ---- Video panel (click-to-load) ---- */
.video-figure { margin: 0 auto; max-width: 360px; }

.video-panel {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--e-4);
}

.video-panel__stage {
  position: relative;
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(75, 65, 214, 0.55), transparent 60%),
    radial-gradient(120% 60% at 50% 100%, rgba(14, 159, 154, 0.5), transparent 60%),
    var(--surface-invert);
}

.video-panel__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.10) 46%, transparent 62%);
}

.video-panel__badge {
  position: absolute;
  top: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-invert-muted);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
}

.video-panel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.video-panel__play:hover {
  background: var(--surface-3);
  transform: translate(-50%, -50%) scale(1.03);
}

.video-panel__play:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.video-panel__play-icon { font-size: 0.85em; }
.video-panel__note { margin: var(--s-3) 0 0; padding: 0 var(--s-2); text-align: center; font-size: var(--fs-sm); color: var(--ink-subtle); }
.video-figure figcaption { margin-top: var(--s-2); text-align: center; font-size: var(--fs-sm); color: var(--ink-muted); }
.video-figure video { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }

/* ---- Author portrait ---- */
.page-head--split {
  overflow: visible;
  padding-block: var(--s-9) var(--s-8);
}

.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: var(--s-8);
}

/* Author portrait composition is defined once — see the "Author portrait
   composition" block in section 23 (it owns the frame, ring and caption). */

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6) 0 var(--s-8); }
}

@media (max-width: 640px) {
  .media-grid { grid-template-columns: 1fr; }
  .hero__panel { padding: var(--s-4); }
  .hero__path text { font-size: 14px; }
}

@media (max-width: 760px) {
  .page-head__grid { grid-template-columns: 1fr; }
}

/* ---- Reduced motion: the design must stand still gracefully ---- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__path-dash,
  .js .hero__node circle,
  .card__media img,
  .card--interactive,
  .media-figure,
  .video-panel__play {
    animation: none !important;
    transition: none !important;
  }
}

.video-panel__player { display:block; width:100%; height:auto; aspect-ratio:9/16; background:var(--surface-invert); }


/* ==========================================================================
   23. VISUAL EXPERIENCE LAYER (2026-09 phase 2)
   Stage rails, execution chain, flagship spotlights, family rails, portrait
   composition, hero depth. Scoped to new classes; fully static without JS.
   ========================================================================== */

/* ---- Stage rails (workflow / pipeline) ---- */
.stages {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--e-2);
  padding: var(--s-5);
  overflow: hidden;
  position: relative;
}

.stages::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--teal-500));
}

.stages__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4) var(--s-4);
  counter-reset: none;
}

.stages--compact .stages__list { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.stages__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

/* Connector line to the next stage (desktop grid) */
@media (min-width: 720px) {
  .stages__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--s-2) + 13px);
    left: calc(100% - var(--s-4) + 6px);
    right: calc(-100% + var(--s-4) + 6px);
    height: 2px;
    background: linear-gradient(90deg, var(--line), var(--brand-400));
  }
}

.stages__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-700);
  border: 1.5px solid var(--brand-400);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex: 0 0 auto;
}

.stages__item:last-child .stages__node {
  background: var(--teal-050);
  color: var(--teal-600);
  border-color: var(--teal-500);
}

.stages__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
}

.stages__note {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-subtle);
}

/* Progressive activation: items are visible statically, and when JS marks the
   rail with .is-active the stages cascade in with a stagger. */
.js .stages.is-anim .stages__item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--stage-i) * 70ms);
}

.js .stages.is-anim.is-active .stages__item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .stages.is-anim .stages__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Execution chain strip ---- */
.chain {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: var(--s-6) 0;
  position: relative;
  overflow: hidden;
}

.chain__system {
  position: relative;
  width: 100%;
}

.chain__track {
  position: absolute;
  opacity: 0 !important;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
}

.chain__track-fill {
  display: none;
}

.chain__signal {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0d9488;
  box-shadow: 0 0 20px 6px rgba(13, 148, 136, 0.85), 0 0 6px #ffffff;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.chain__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-3) 0;
}

.chain__item {
  display: inline-flex;
  align-items: flex-end;
  position: relative;
}

.chain__step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0.5rem 0.75rem 0;
  cursor: pointer;
  transition: all 0.35s var(--ease);
  user-select: none;
  text-decoration: none;
  border-radius: var(--r-md);
  outline: none;
}

.chain__step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #475569;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
  padding: 0 4px;
}

.chain__node {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 2;
}

.chain__node-halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.4) 0%, rgba(79, 70, 229, 0) 72%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

.chain__node-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #94a3b8;
  box-shadow: 0 1px 4px rgba(11, 16, 32, 0.08);
  transition: all 0.35s var(--ease);
}

.chain__node-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  opacity: 0.6;
  transition: all 0.35s var(--ease);
  z-index: 1;
}

.chain__connector {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 72px;
  height: 26px;
  margin: 0 4px;
  flex-shrink: 0;
}

.chain__connector-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(36, 75, 122, 0.22);
  border-radius: 1px;
}

.chain__connector-pulse {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  width: 0%;
  background: linear-gradient(90deg, #4338ca, #0d9488);
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(13, 148, 136, 0.8), 0 0 4px #4338ca;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.chain__arrow {
  display: none !important;
}

/* Living chain states */
.chain__step.is-lit .chain__step-label {
  color: #0f172a;
  font-weight: 800;
  transform: translateY(-2px);
  text-shadow: 0 0 16px rgba(79, 70, 229, 0.2);
}

.chain__step.is-lit .chain__node-halo {
  opacity: 1;
  transform: scale(1.45);
  animation: chain-beacon-pulse 1.4s ease-in-out infinite;
}

.chain__step.is-lit .chain__node-core {
  border-color: #4f46e5;
  background: #ffffff;
  box-shadow: 0 0 18px 3px rgba(79, 70, 229, 0.45), 0 2px 6px rgba(11, 16, 32, 0.1);
  transform: scale(1.12);
}

.chain__step.is-lit .chain__node-dot {
  background: #4f46e5;
  opacity: 1;
  box-shadow: 0 0 8px #818cf8;
}

.chain__item--6 .chain__step.is-lit .chain__step-label {
  color: var(--teal-600);
}

.chain__item--6 .chain__step.is-lit .chain__node-halo {
  background: radial-gradient(circle, rgba(13, 148, 136, 0.5) 0%, rgba(13, 148, 136, 0) 70%);
}

.chain__item--6 .chain__step.is-lit .chain__node-core {
  border-color: var(--teal-500);
  box-shadow: 0 0 16px 3px rgba(13, 148, 136, 0.45);
}

.chain__item--6 .chain__step.is-lit .chain__node-dot {
  background: var(--teal-500);
  box-shadow: 0 0 8px var(--teal-400);
}

.chain__step.is-done .chain__step-label {
  color: var(--ink-2);
}

.chain__step.is-done .chain__node-halo {
  opacity: 0.35;
  transform: scale(0.95);
}

.chain__step.is-done .chain__node-core {
  border-color: var(--brand-400);
  background: #ffffff;
}

.chain__step.is-done .chain__node-dot {
  background: var(--brand-500);
  opacity: 0.85;
}

.chain__connector.is-active .chain__connector-pulse {
  width: 100%;
}

/* Hover & Focus states */
.chain__step:hover .chain__step-label,
.chain__step:focus-visible .chain__step-label {
  color: var(--ink);
}

.chain__step:hover .chain__node-core,
.chain__step:focus-visible .chain__node-core {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(75, 65, 214, 0.18), 0 4px 12px rgba(11, 16, 32, 0.08);
}

.chain__step:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.chain__note {
  margin: var(--s-4) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .chain__row {
    gap: var(--s-3);
  }
  .chain__connector {
    width: 32px;
  }
}

@media (max-width: 680px) {
  .chain__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    max-width: 360px;
    margin-inline: auto;
  }
  .chain__item {
    display: flex;
    justify-content: center;
  }
  .chain__step {
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .chain__connector {
    display: none;
  }
  .chain__signal {
    display: none !important;
  }
}

/* ---- Flagship spotlights (alternating, asymmetric) ---- */
.spotlight { padding-block: var(--s-9); }

.spotlight--b {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--s-8);
}

.spotlight--b .spotlight__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.spotlight--b .spotlight__copy  { order: 2; }
.spotlight--b .spotlight__media { order: 1; }

.spotlight__stat {
  display: inline-flex;
}

.spotlight__stat-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-050);
  border: 1px solid var(--brand-400);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
}

.spotlight--b .spotlight__stat-value {
  color: var(--teal-600);
  background: var(--teal-050);
  border-color: var(--teal-500);
}

.spotlight__figure {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--e-4);
  background: var(--surface-2);
}

.spotlight__figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .spotlight__grid,
  .spotlight--b .spotlight__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .spotlight--b .spotlight__copy  { order: 1; }
  .spotlight--b .spotlight__media { order: 2; }
}

/* ---- Family accent rails (product library) ---- */
.family-panel {
  position: relative;
  border-left-width: 3px;
}

.family-panel[data-family="systems"]  { border-left-color: var(--brand-500); }
.family-panel[data-family="engines"]  { border-left-color: var(--teal-500); }
.family-panel[data-family="software"] { border-left-color: var(--gold-500); }
.family-panel[data-family="research"] { border-left-color: var(--brand-400); }
.family-panel[data-family="library"]  { border-left-color: var(--gold-600); }
.family-panel[data-family="tools"]    { border-left-color: var(--teal-600); }

/* ---- Author portrait composition (single source of truth) ----------------
   The decorative frame and ring are scoped to __stage, which contains the
   image only. The caption is a flow sibling *outside* the stage, so it can
   never sit under the frame, overlap the image, or be clipped. */
.author-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.author-portrait__stage {
  position: relative;
  /* The frame offsets outward by these amounts; the padding keeps every
     offset inside the figure box so nothing is clipped by the page head. */
  padding: 16px 0 0 16px;
  box-sizing: border-box;
}

.author-portrait__stage img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--e-4);
}

.author-portrait__frame {
  position: absolute;
  inset: 0 16px 0 0;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--brand-050), var(--teal-050));
  border: 1px solid var(--line);
  z-index: 1;
}

.author-portrait__ring {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2.5px solid var(--teal-500);
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}

/* The caption reads as a deliberate label: hairline rule, accent dash, clear
   space from the portrait at every viewport. Left padding aligns with the photo. */
.author-portrait__caption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) 0 0 16px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
  box-sizing: border-box;
}

.author-portrait__caption::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--teal-500));
}

.author-portrait__name {
  font-weight: 600;
  color: var(--ink);
}

.author-portrait__sep {
  color: var(--ink-subtle);
  margin: 0 2px;
}

.author-portrait__role {
  color: var(--ink-muted);
}

@media (max-width: 760px) {
  .author-portrait {
    width: 260px;
    max-width: 100%;
    margin-top: var(--s-5);
  }
  .author-portrait__stage { padding: 12px 0 0 12px; }
  .author-portrait__frame { inset: 0 12px 0 0; }
  .author-portrait__ring { width: 54px; height: 54px; }
  .author-portrait__caption { margin-top: var(--s-4); padding: var(--s-3) 0 0 12px; }
}

/* ---- Hero depth: cursor-responsive tilt (fine pointers, JS-gated) ---- */
.hero__visual { perspective: 1100px; }

.js .hero__panel[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.25s var(--ease), box-shadow 0.35s var(--ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__panel[data-tilt] { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .chain__row,
  .spotlight__figure img {
    transition: none !important;
  }
}

/* ==========================================================================
   23. MOTION REFINEMENT — Engineering Path + execution chain
   --------------------------------------------------------------------------
   Pure enhancement. Initial hidden states are scoped to `.js` and reversed
   under prefers-reduced-motion; without JS everything is fully visible.
   ========================================================================== */

/* ---- 23.1 Engineering path: travelling light point + node activation ---- */
/* While the JS traveller runs, the CSS pulse hands over to activation states. */
.js .hero__path.has-traveller .hero__node-core,
.js .hero__path.has-traveller .hero__path-dash { animation: none; }

/* Node activation: halo expands, core scales, label strengthens. The passed
   nodes keep a lighter "done" state so the sequence reads as progression. */
.hero__node-core,
.hero__node-halo,
.hero__node text {
  transition: transform 0.35s var(--ease), fill 0.35s var(--ease), opacity 0.35s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}

.hero__node.is-lit .hero__node-core {
  fill: var(--brand-500);
  stroke: var(--brand-600);
  transform: scale(1.28);
}
.hero__node.is-lit .hero__node-halo { opacity: 1; transform: scale(1.32); }
.hero__node.is-lit text { fill: var(--ink); font-weight: 700; }

.hero__node.is-done .hero__node-core { fill: var(--brand-050); stroke: var(--brand-400); }
.hero__node.is-done .hero__node-halo { opacity: 0.7; }
.hero__node.is-done text { fill: var(--ink-muted); }

/* ---- 23.2 Execution chain: smooth transitions ------------ */
.chain__step {
  transition: all 0.35s var(--ease);
}

/* ---- 23.3 Shared motion utility classes ---------------------------------- */
.m-lift {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.m-lift:hover { transform: translateY(-3px); }

.m-glow {
  transition: box-shadow 0.35s var(--ease);
}
.m-glow.is-active {
  box-shadow: 0 0 0 3px rgba(75, 65, 214, 0.18), 0 6px 24px rgba(13, 148, 136, 0.22);
}

.m-node circle {
  transition: transform 0.35s var(--ease), fill 0.35s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}
.m-node.is-lit circle { transform: scale(1.3); }

.m-path-light {
  fill: var(--teal-500);
  filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.85));
  transition: opacity 0.4s var(--ease);
}

/* ---- 23.4 Reduced motion: everything stands still, fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__path-signal,
  .hero__path-tail { opacity: 0 !important; }
  .hero__path-aura { opacity: 0.15; }
  .hero__path-return { opacity: 0.55; }
  .chain__signal {
    display: none !important;
    opacity: 0 !important;
  }
  .chain__track,
  .chain__track-fill {
    opacity: 0 !important;
    display: none !important;
  }
  .hero__node-core,
  .hero__node-halo,
  .hero__node text,
  .chain__step,
  .chain__arrow,
  .chain__track,
  .chain__track-fill,
  .chain__signal,
  .m-lift,
  .m-glow,
  .m-node circle,
  .stages__node,
  .stages__item::after,
  .stages__list::before,
  .spotlight__figure img,
  .diagram-frame img,
  .card__media img,
  .card__media--book,
  .book-sheen {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .js .chain__row:not(.is-visible) .chain__step,
  .js .chain__row:not(.is-visible) .chain__arrow {
    opacity: 1;
    transform: none;
  }
  .hero__node.is-lit .hero__node-core,
  .hero__node.is-lit .hero__node-halo { transform: none; }
  .chain__row.has-signal .chain__step.is-lit { transform: none; box-shadow: none; }
}

/* ==========================================================================
   24. VISUAL EXPERIENCE REFINEMENT (2026-09 phase 3)
   Depth and motion refinement on the highest-value surfaces only. Every
   component here is complete and still without JavaScript and under reduced
   motion, and no layer carries information the text does not already state.
   ========================================================================== */

/* ---- 24.1 Hero depth: light field, layered panel, technical grid -------- */
.hero__visual {
  position: relative;
  perspective: 1200px;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: -14% -8% -10%;
  background:
    radial-gradient(48% 48% at 70% 25%, rgba(75, 65, 214, 0.18), transparent 70%),
    radial-gradient(44% 44% at 32% 76%, rgba(13, 148, 136, 0.15), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}

.hero__panel {
  position: relative;
  background: linear-gradient(175deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow:
    0 1px 3px rgba(11, 16, 32, 0.04),
    0 10px 30px -4px rgba(11, 16, 32, 0.08),
    0 24px 54px -12px rgba(75, 65, 214, 0.14);
  z-index: 1;
  overflow: hidden;
}

.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.95) 25%, rgba(75, 65, 214, 0.4) 60%, rgba(13, 148, 136, 0.4) 85%, transparent 98%);
  z-index: 3;
}

.hero__panel-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 16, 32, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 16, 32, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 85%);
  z-index: 0;
}

.hero__panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  z-index: 1;
}

.hero__panel-title-group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.hero__panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2), 0 0 10px rgba(13, 148, 136, 0.6);
  flex-shrink: 0;
}

.hero__panel-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__panel-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-050);
  border: 1px solid var(--teal-500);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
}

.hero__path {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* ---- 24.2 Engineering path traveling light & ripple pulse -------------- */
.hero__node-pulse {
  transform-origin: center;
  pointer-events: none;
}

@keyframes hero-node-ripple {
  0% {
    r: 8px;
    opacity: 0.95;
    stroke-width: 2px;
  }
  100% {
    r: 28px;
    opacity: 0;
    stroke-width: 0.5px;
  }
}

.hero__node.is-lit .hero__node-pulse {
  animation: hero-node-ripple 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.hero__node-core {
  fill: var(--surface);
  stroke: var(--brand-400);
  stroke-width: 1.5px;
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease), transform 0.35s var(--ease);
}

.hero__node-halo {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.hero__node text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--ink-muted);
  transition: fill 0.35s var(--ease), font-weight 0.35s var(--ease);
}

.hero__node.is-lit .hero__node-core {
  fill: var(--brand-500);
  stroke: var(--brand-600);
  transform: scale(1.35);
}

.hero__node--6.is-lit .hero__node-core {
  fill: var(--teal-500);
  stroke: var(--teal-600);
}

.hero__node.is-lit .hero__node-halo {
  opacity: 1;
  transform: scale(1.4);
}

.hero__node.is-lit text {
  fill: var(--ink);
  font-weight: 700;
}

.hero__node.is-done .hero__node-core {
  fill: var(--brand-050);
  stroke: var(--brand-400);
  transform: scale(1.05);
}

.hero__node--6.is-done .hero__node-core {
  fill: var(--teal-050);
  stroke: var(--teal-500);
}

.hero__node.is-done .hero__node-halo {
  opacity: 0.35;
  transform: scale(1.05);
}

.hero__node.is-done text {
  fill: var(--ink-2);
  font-weight: 600;
}

/* ---- 24.3 Stage rails: dimensional nodes, progressive connectors -------- */
.stages__node {
  background: radial-gradient(120% 120% at 30% 20%, #ffffff, var(--brand-050) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px -2px rgba(11, 16, 32, 0.26);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.stages__item:last-child .stages__node {
  background: radial-gradient(120% 120% at 30% 20%, #ffffff, var(--teal-050) 72%);
}

/* Connectors draw themselves as the rail activates, so the pipeline reads as
   progress rather than as a static underline. */
.stages__item::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
  transition-delay: calc(var(--stage-i) * 90ms);
}

.js .stages.is-anim.is-active .stages__item::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--brand-400), var(--teal-500));
}

.stages:not(.is-anim) .stages__item::after { transform: scaleX(1); }

.stages__item:last-child .stages__name { font-weight: 700; color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .stages__item:hover .stages__node {
    transform: translateY(-2px) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 20px -10px rgba(75, 65, 214, 0.55);
  }
}

/* ---- 24.4 Depth on selected product surfaces --------------------------- */
.spotlight__media { position: relative; }

.spotlight__media::before {
  content: "";
  position: absolute;
  inset: 5% -3% -7% 5%;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(75, 65, 214, 0.16), rgba(13, 148, 136, 0.14));
  filter: blur(2px);
  z-index: 0;
}

.spotlight__figure { position: relative; z-index: 1; }
.spotlight__figure img { transform: scale(1); transition: transform 0.6s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .spotlight__figure:hover img { transform: scale(1.015); }
}

/* The workflow and pipeline diagrams sit on a technical surface rather than
   on plain white, so the drawing reads as a system view. */
.diagram-frame {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--e-2);
}

.diagram-frame img { display: block; width: 100%; height: auto; }

.diagram-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 16, 32, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 16, 32, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
}

.cta-band { position: relative; overflow: hidden; }

.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(38% 60% at 78% 6%, rgba(75, 65, 214, 0.45), transparent 70%),
    radial-gradient(34% 56% at 12% 98%, rgba(13, 148, 136, 0.4), transparent 72%);
  pointer-events: none;
}

.cta-band > * { position: relative; }

.family-panel { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .family-panel:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
}

/* ---- 25. Commercial card: verified product pricing & direct buy ---------- */
.commercial-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--e-1);
}

.commercial-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.commercial-card__price {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.commercial-card__term {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-top: var(--s-1);
}

.commercial-card__footer {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

/* ---- 26. Certificate Cards: verified document artifacts ------------------ */
.card--cert {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card--cert .card__media {
  background: #f1f5f9;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}

.card--cert .card__media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card--cert:hover .card__media img {
    transform: scale(1.04);
  }
}

/* ---- 27. WooCommerce light-theme refinement & checkout layout ------------ */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: var(--s-4);
}

/* Ensure entry-content on checkout page expands to full container width */
.woocommerce-checkout .prose.entry-content,
.woocommerce-cart .prose.entry-content,
.woocommerce-account .prose.entry-content {
  max-width: 100%;
}

/* Two-column responsive checkout layout */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-8);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Override default WooCommerce floats and clearfixes inside checkout form */
form.woocommerce-checkout #customer_details,
form.woocommerce-checkout .col2-set {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

form.woocommerce-checkout .col2-set .col-1,
form.woocommerce-checkout .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

form.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

form.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
}

form.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  width: 100% !important;
  float: none !important;
}

/* Form row inputs */
.woocommerce form .form-row {
  margin-bottom: var(--s-3);
  padding: 0;
}

.woocommerce form .form-row label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-1);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.65em 0.85em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  background-color: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(75, 65, 214, 0.15);
}

/* Shop table / Order summary styling */
.woocommerce-checkout table.shop_table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--e-1);
  overflow: hidden;
  margin-bottom: var(--s-5);
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.woocommerce-checkout table.shop_table th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink);
}

.woocommerce-checkout table.shop_table tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.woocommerce-checkout table.shop_table tfoot tr th,
.woocommerce-checkout table.shop_table tfoot tr td {
  font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}

.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 0;
  background: var(--surface-2);
}

/* Payment card and methods */
.woocommerce-checkout #payment {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  padding: var(--s-5);
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4) 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: 0;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--surface-2);
}

.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #ffffff;
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-6);
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px rgba(75, 65, 214, 0.25);
  transition: transform 0.15s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}

.woocommerce-checkout #place_order:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(75, 65, 214, 0.35);
}

.woocommerce-checkout #place_order:active {
  transform: translateY(0);
}

/* Mobile & tablet responsive single-column layout */
@media (max-width: 900px) {
  form.woocommerce-checkout {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  form.woocommerce-checkout #order_review_heading {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--s-6);
  }

  form.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: auto;
  }

  form.woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Customer details card refinement for 4 fields */
.woocommerce-checkout #customer_details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  padding: var(--s-5) var(--s-6);
}

.woocommerce-checkout #customer_details h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 48%;
  display: inline-block;
  vertical-align: top;
}

.woocommerce form .form-row-first {
  float: left;
}

.woocommerce form .form-row-last {
  float: right;
}

.woocommerce form .form-row-wide {
  width: 100%;
  clear: both;
}

.woocommerce form .form-row .description {
  font-size: var(--fs-xs);
  color: var(--ink-subtle);
  margin-top: var(--s-1);
  display: block;
}

/* Create account section */
.woocommerce-checkout .create-account {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  margin-bottom: var(--s-3);
  clear: both;
}

.woocommerce-checkout .create-account label.checkbox {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  margin-bottom: 0;
}

/* Checkout login toggle & returning customer notice */
.woocommerce-form-login-toggle .woocommerce-info {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand-500) !important;
  border-radius: var(--r-md) !important;
  padding: var(--s-4) var(--s-5) !important;
  font-size: var(--fs-sm) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--e-1);
  margin-bottom: var(--s-5) !important;
}

.woocommerce-form-login-toggle .woocommerce-info a {
  color: var(--brand-600) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

form.woocommerce-form-login {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  box-shadow: var(--e-1);
}

/* ---- Global Color Harmonization & Pink/Rose/Red Cleanup ---- */

/* Notice wrappers */
.woocommerce-NoticeGroup,
.woocommerce-notices-wrapper {
  width: 100%;
  margin-bottom: var(--s-5);
}

/* 1. Error Notices — Semantic Red (Strictly retained for actual errors) */
.woocommerce-error {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: var(--r-md) !important;
  color: #991b1b !important;
  padding: var(--s-4) var(--s-5) !important;
  list-style: none !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
  margin-bottom: var(--s-4) !important;
}

.woocommerce-error::before {
  color: #dc2626 !important;
}

.woocommerce-error li {
  color: #991b1b !important;
}

/* 2. Info Notices — Neutral / Brand (Overrides default WC blue/pink styling) */
.woocommerce-info {
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand-500) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-2) !important;
  padding: var(--s-4) var(--s-5) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
  margin-bottom: var(--s-4) !important;
}

.woocommerce-info::before {
  color: var(--brand-500) !important;
}

/* 3. Success / Order Messages — Verified Teal */
.woocommerce-message {
  background-color: var(--teal-050) !important;
  border: 1px solid #ccecea !important;
  border-left: 4px solid var(--teal-600) !important;
  border-radius: var(--r-md) !important;
  color: var(--teal-600) !important;
  padding: var(--s-4) var(--s-5) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
  margin-bottom: var(--s-4) !important;
}

.woocommerce-message::before {
  color: var(--teal-600) !important;
}

/* 4. Remove Button in Cart / Checkout — Neutralized (no default WooCommerce red) */
.woocommerce a.remove {
  color: var(--ink-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.woocommerce a.remove:hover {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}

/* 5. Required Field Asterisk — Brand Indigo (harmonized with SOVEL system) */
.woocommerce form .form-row label abbr.required,
abbr.required {
  color: var(--brand-500) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: 0 !important;
}

/* 6. Form Field Validation States */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
  border-color: var(--teal-500) !important;
}

/* 7. WooCommerce Buttons — Brand Indigo (replaces default WC purple/pink buttons) */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-form-login__submit,
.woocommerce-Button {
  display: inline-block !important;
  background: var(--brand-500) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: var(--s-3) var(--s-6) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  font-family: var(--font-sans) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.15s var(--ease) !important;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-Button:hover {
  background: var(--brand-600) !important;
  box-shadow: 0 4px 12px rgba(75, 65, 214, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 600px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: 100%;
    float: none;
    display: block;
  }
}

/* ---- 28. Product visual pipeline ribbons --------------------------------- */
.product-ribbon {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
  box-shadow: 0 1px 3px rgba(11, 16, 32, 0.04);
}

.product-ribbon__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.product-ribbon__tag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.product-ribbon__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.product-ribbon__track {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-ribbon__step {
  display: flex;
  align-items: center;
  flex: 1 1 140px;
  gap: var(--s-2);
  min-width: 130px;
}

.product-ribbon__node {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--s-3);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.product-ribbon__index {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: 2px;
}

.product-ribbon__label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.product-ribbon__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.35;
  margin-top: 3px;
}

.product-ribbon__arrow {
  color: var(--ink-subtle);
  font-size: var(--fs-sm);
  font-weight: 600;
  user-select: none;
  padding: 0 2px;
}

@media (hover: hover) and (pointer: fine) {
  .product-ribbon__node:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 16, 32, 0.06);
  }
}

/* Theme 1: Methodology (Indigo / Brand) */
.product-ribbon--methodology {
  border-left: 4px solid var(--brand-500);
}
.product-ribbon--methodology .product-ribbon__tag {
  background: var(--brand-050);
  color: var(--brand-700);
}
.product-ribbon--methodology .product-ribbon__index {
  color: var(--brand-600);
}
.product-ribbon--methodology .product-ribbon__step--terminal .product-ribbon__node {
  border-color: var(--brand-500);
  background: var(--brand-050);
}

/* Theme 2: Governed Pipeline (Amber / Gold) */
.product-ribbon--pipeline {
  border-left: 4px solid var(--amber-600);
}
.product-ribbon--pipeline .product-ribbon__tag {
  background: var(--amber-050);
  color: var(--amber-600);
}
.product-ribbon--pipeline .product-ribbon__index {
  color: var(--amber-600);
}
.product-ribbon--pipeline .product-ribbon__step--terminal .product-ribbon__node {
  border-color: var(--amber-600);
  background: var(--amber-050);
}

/* Theme 3: Evidence-Led Research (Teal) */
.product-ribbon--evidence {
  border-left: 4px solid var(--teal-600);
}
.product-ribbon--evidence .product-ribbon__tag {
  background: var(--teal-050);
  color: var(--teal-600);
}
.product-ribbon--evidence .product-ribbon__index {
  color: var(--teal-600);
}
.product-ribbon--evidence .product-ribbon__step--terminal .product-ribbon__node {
  border-color: var(--teal-600);
  background: var(--teal-050);
}

@media (max-width: 640px) {
  .product-ribbon__track {
    flex-direction: column;
  }
  .product-ribbon__step {
    flex-direction: column;
    align-items: stretch;
  }
  .product-ribbon__arrow {
    text-align: center;
    transform: rotate(90deg);
    padding: var(--s-1) 0;
  }
}

/* ---- 24.5 Reduced motion: the refinement layers stand still ------------- */
@media (prefers-reduced-motion: reduce) {
  .spotlight__figure img,
  .family-panel,
  .stages__node,
  .card--cert .card__media img,
  .product-ribbon__node {
    transform: none !important;
    transition: none !important;
  }
  .stages__item::after { transform: scaleX(1) !important; }
  .chain__signal { display: none !important; }
}

/* =========================================================================
   Section 29 — Visual polish & premium experience layer
   ========================================================================= */

/* Chain beacon pulse keyframes */
@keyframes chain-beacon-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--brand-400); opacity: 1; }
  50%       { box-shadow: 0 0 18px 5px rgba(75, 65, 214, 0.48); opacity: 0.88; }
}
@keyframes chain-beacon-pulse-teal {
  0%, 100% { box-shadow: 0 0 8px var(--teal-500); opacity: 1; }
  50%       { box-shadow: 0 0 18px 5px rgba(13, 148, 136, 0.48); opacity: 0.88; }
}

/* Apply teal pulse to EXECUTION node */
.chain__item--6 .chain__step.is-lit .chain__step-beacon {
  animation: chain-beacon-pulse-teal 1.2s ease-in-out infinite;
}

/* Hero panel: subtle glass layering */
.hero__panel {
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.10),
    0 8px 32px -8px rgba(11, 16, 32, 0.16),
    0 2px 8px rgba(11, 16, 32, 0.05);
}

/* Spotlight figure: restrained lift on hover */
@media (hover: hover) and (pointer: fine) {
  .spotlight__figure {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s var(--ease);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .spotlight__figure:hover {
    transform: translateY(-3px) scale(1.008);
    box-shadow: 0 16px 48px -12px rgba(79, 70, 229, 0.2), 0 4px 12px rgba(11,16,32,0.07);
  }
}

.spotlight__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}

/* ---- Research workflow visual component --------------------------------- */
.research-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-1);
  margin: var(--s-7) 0 var(--s-5);
}

.research-flow__step {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 100px;
}

.research-flow__node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(11,16,32,0.04);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}

.research-flow__node::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-500), var(--brand-500));
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .research-flow__node:hover {
    border-color: var(--teal-400);
    box-shadow: 0 4px 16px -4px rgba(13, 148, 136, 0.18);
  }
  .research-flow__node:hover::before { opacity: 1; }
}

.research-flow__num {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--teal-600);
  margin-bottom: 2px;
  letter-spacing: 0.04em;
}

.research-flow__label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.research-flow__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.35;
}

.research-flow__arrow {
  color: var(--ink-subtle);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 4px;
  user-select: none;
}

@media (max-width: 760px) {
  .research-flow { flex-direction: column; gap: var(--s-2); }
  .research-flow__step { flex-direction: row; align-items: center; }
  .research-flow__arrow { transform: rotate(90deg); padding: var(--s-1) 0; }
}

.research-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.research-outcome-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--teal-050);
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-700, #0f766e);
}

.research-outcome-chip::before {
  content: "✓";
  font-size: 10px;
  color: var(--teal-500);
  font-weight: 900;
}

/* ---- WooCommerce cart / checkout premium finish ----------------------- */
.woocommerce .cart_item td,
.woocommerce .cart_item th {
  vertical-align: middle;
  padding: var(--s-4);
}

.woocommerce-cart table.cart td.product-name a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--brand-600);
}

.woocommerce .cart-collaterals .cart_totals {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--e-1);
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}

.digital-delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--brand-050, #eef2ff);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.woocommerce-order-received .woocommerce-order-overview {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  padding: var(--s-5);
  box-shadow: var(--e-1);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin: var(--s-5) 0;
  padding-left: 0;
}

.woocommerce-order-received .woocommerce-order-overview strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}

/* ---- Product card: image zoom on hover --------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .card__media { overflow: hidden; }
  .card__media img {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .card--interactive:hover .card__media img {
    transform: scale(1.03);
  }
}

/* ---- Reduced motion guards for Section 29 ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .chain__step.is-lit .chain__step-beacon,
  .chain__item--6 .chain__step.is-lit .chain__step-beacon {
    animation: none !important;
  }
  .spotlight__figure,
  .spotlight__figure:hover {
    transform: none !important;
    transition: none !important;
  }
  .card--interactive:hover .card__media img {
    transform: none !important;
  }
  .research-flow__node,
  .research-flow__node::before {
    transition: none !important;
  }
}

/* =========================================================================
   Section 30 — Final Visual Polish Pass (Local RC Completion)
   ========================================================================= */

/* ---- 30.1 Checkout — Input ergonomics & card refinements -------------- */

/* Taller inputs — easier on touch and cleaner on desktop */
.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select {
  padding: 0.75em 1em;
  font-size: var(--fs-sm);
  line-height: 1.45;
  min-height: 44px; /* WCAG 2.5.5 target size */
}

/* First/last name side-by-side row — ensure gap between them */
.woocommerce-checkout form .form-row-first,
.woocommerce-checkout form .form-row-last {
  width: calc(50% - var(--s-2));
}
.woocommerce-checkout form .form-row-first {
  margin-right: var(--s-2);
}

/* Customer details card: tighter inner padding rhythm */
.woocommerce-checkout #customer_details {
  padding: var(--s-5);
}

/* Payment methods: tighten row padding, add left accent on selected */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--brand-500);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
}

/* Place Order CTA — larger padding, stronger shadow */
.woocommerce-checkout #place_order {
  padding: var(--s-4) var(--s-6);
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: 0.01em;
  min-height: 48px;
  margin-top: var(--s-4);
}

/* Order review section heading top spacing reset */
.woocommerce-checkout #order_review_heading {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}

/* ---- 30.2 Checkout — Mobile stacking ---------------------------------- */
@media (max-width: 680px) {
  .woocommerce-checkout form .form-row-first,
  .woocommerce-checkout form .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}

/* ---- 30.3 Docs page — Reduce notice visual weight in content context -- */

/* Compact notice variant: lighter padding for secondary/status notices
   inside already-structured content areas */
.notice--compact {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}
.notice--compact .notice__label {
  font-size: 0.65rem;
  margin-bottom: var(--s-1);
}

/* Docs product card spacing — replace mb-6 heavy margin with tighter gap */
article.card.mb-6 {
  margin-bottom: var(--s-5) !important;
}

/* ---- 30.4 About page — Accessibility section spacing ------------------- */
#accessibility .notice {
  margin-top: var(--s-4);
}

/* ---- 30.5 Order confirmation & download experience -------------------- */
.woocommerce-order-received .woocommerce-order {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--e-1);
}

.woocommerce-order-received .woocommerce-notice--success {
  background: var(--teal-050) !important;
  border: 1px solid #ccecea !important;
  border-left: 4px solid var(--teal-600) !important;
  border-radius: var(--r-md) !important;
  color: var(--teal-600) !important;
  padding: var(--s-4) var(--s-5) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600 !important;
  margin-bottom: var(--s-6) !important;
}

.woocommerce-order-downloads {
  margin: var(--s-6) 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}

.woocommerce-order-downloads__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}

.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.woocommerce-table--order-downloads th,
.woocommerce-table--order-downloads td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

.woocommerce-table--order-downloads th {
  background: var(--surface-3);
  font-weight: 600;
  color: var(--ink);
}

.woocommerce-table--order-downloads .download-file a,
.woocommerce-MyAccount-downloads-file {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--s-2) !important;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500)) !important;
  color: #ffffff !important;
  font-weight: 650 !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: var(--s-2) var(--s-4) !important;
  border-radius: var(--r-pill) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(10, 111, 108, 0.25) !important;
  transition: transform 0.15s var(--ease), box-shadow 0.18s var(--ease) !important;
}

.woocommerce-table--order-downloads .download-file a:hover,
.woocommerce-MyAccount-downloads-file:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(10, 111, 108, 0.35) !important;
  color: #ffffff !important;
}

.woocommerce-order-received .woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---- 30.6 Account & login pages — brand harmonization ----------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 550;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--brand-050);
  color: var(--brand-700);
}

/* ---- 30.7 Reduced motion guards for Section 30 ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout #place_order {
    transition: none !important;
  }
}

/* ==========================================================================
   31. WOOCOMMERCE SINGLE PRODUCT & STORE CARDS (SOVEL DESIGN SYSTEM)
   ========================================================================== */

/* ---- 31.1 Single Product Layout ----------------------------------------- */
.sovel-wc-product-layout {
  margin: 0 auto;
  max-width: var(--container, 1120px);
}

.sovel-wc-product-layout div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  position: relative;
}

@media (min-width: 860px) {
  .sovel-wc-product-layout div.product {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-8);
    align-items: start;
  }
}

/* Gallery & Media */
.sovel-wc-product-layout .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.sovel-wc-product-layout .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.sovel-wc-product-layout .woocommerce-product-gallery__trigger {
  top: 1rem;
  right: 1rem;
}

/* Product Summary */
.sovel-wc-product-layout .entry-summary {
  width: 100% !important;
  float: none !important;
  margin-bottom: var(--s-6);
}

.sovel-wc-product-layout .entry-summary .product_title {
  display: none !important; /* Handled semantically in .page-head H1 */
}

.sovel-wc-product-layout .entry-summary .price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-700);
  margin: 0 0 var(--s-4);
  line-height: 1.2;
}

.sovel-wc-product-layout .entry-summary .price del {
  font-size: 1.125rem;
  color: var(--ink-3);
  font-weight: 400;
}

.sovel-wc-product-layout .entry-summary .price ins {
  text-decoration: none;
}

.sovel-wc-product-layout .woocommerce-product-details__short-description {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: var(--s-5);
}

/* Add to Cart Form */
.sovel-wc-product-layout form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.sovel-wc-product-layout form.cart .quantity {
  margin: 0 !important;
  float: none !important;
}

.sovel-wc-product-layout form.cart .quantity .qty {
  width: 4.5rem;
  height: 48px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-1);
  background: #ffffff;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.sovel-wc-product-layout form.cart .button,
.sovel-wc-product-layout form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  background: var(--brand-700) !important;
  border: none !important;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  box-shadow: var(--shadow-sm);
}

.sovel-wc-product-layout form.cart .button:hover,
.sovel-wc-product-layout form.cart .single_add_to_cart_button:hover {
  background: var(--brand-800) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Product Meta (SKU, Category, Tags) */
.sovel-wc-product-layout .product_meta {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sovel-wc-product-layout .product_meta span {
  display: inline-block;
}

.sovel-wc-product-layout .product_meta a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 31.2 Product Tabs & Typography Fix -------------------------------- */
.sovel-wc-product-layout .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-6);
}

.sovel-wc-product-layout .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  overflow-x: auto;
}

.sovel-wc-product-layout .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.sovel-wc-product-layout .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sovel-wc-product-layout .woocommerce-tabs ul.tabs li.active a {
  color: var(--brand-700);
  border-bottom-color: var(--brand-700);
}

.sovel-wc-product-layout .woocommerce-tabs ul.tabs li:before,
.sovel-wc-product-layout .woocommerce-tabs ul.tabs li:after {
  display: none !important;
}

/* Fix oversized Description H2 heading */
.sovel-wc-product-layout .woocommerce-tabs .panel h2,
.sovel-wc-product-layout .woocommerce-Tabs-panel--description h2 {
  font-family: var(--font-sans);
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin: 0 0 var(--s-3) 0 !important;
  letter-spacing: -0.01em;
}

.sovel-wc-product-layout .woocommerce-tabs .panel {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-2);
}

/* Related Products / Upsells */
.sovel-wc-product-layout .related.products,
.sovel-wc-product-layout .upsells.products {
  grid-column: 1 / -1;
  margin-top: var(--s-8);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-6);
}

.sovel-wc-product-layout .related.products h2,
.sovel-wc-product-layout .upsells.products h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: var(--s-4);
}

/* ---- 31.3 Cart & Store Product Cards (Gutenberg Blocks & Standard Loops) */
.wc-block-grid__products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--s-4) !important;
  padding: 0 !important;
  margin: var(--s-4) 0 !important;
  list-style: none !important;
}

.wc-block-grid__product,
ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--r-md) !important;
  padding: var(--s-4) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

.wc-block-grid__product:hover,
ul.products li.product:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--brand-200) !important;
}

/* Card Image */
.wc-block-grid__product-image,
ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product a img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: var(--s-3) !important;
  background: var(--surface-2) !important;
}

.wc-block-grid__product-image a {
  display: block !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
}

/* Card Title */
.wc-block-grid__product-title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  line-height: 1.35 !important;
  margin: 0 0 var(--s-2) 0 !important;
  text-decoration: none !important;
}

.wc-block-grid__product-title a {
  color: var(--ink-1) !important;
  text-decoration: none !important;
}

.wc-block-grid__product-title a:hover {
  color: var(--brand-700) !important;
}

/* Card Price */
.wc-block-grid__product-price,
ul.products li.product .price {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--brand-700) !important;
  margin: 0 0 var(--s-3) 0 !important;
}

.wc-block-grid__product-price del,
ul.products li.product .price del {
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  margin-right: 0.25rem !important;
}

.wc-block-grid__product-price ins,
ul.products li.product .price ins {
  text-decoration: none !important;
}

/* Card Button */
.wc-block-grid__product-add-to-cart,
ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  margin-top: auto !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
ul.products li.product .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: var(--brand-700) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  box-shadow: var(--shadow-sm) !important;
  box-sizing: border-box !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
ul.products li.product .button:hover {
  background: var(--brand-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Suppress empty or uncategorized metadata in WooCommerce single product */
.single-product .product_meta .posted_in:empty,
.single-product .product_meta .posted_in a[href*="uncategorized"],
.single-product .product_meta .posted_in:has(a[href*="uncategorized"]:only-child) {
  display: none !important;
}

/* ==========================================================================
   SOVEL Evidence Card & Lightbox Media Presentation
   ========================================================================== */
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .evidence-grid {
    gap: var(--s-7);
  }
}

.evidence-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(11, 16, 32, 0.04), 0 6px 16px -4px rgba(11, 16, 32, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.evidence-card:hover {
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 12px 28px -6px rgba(11, 16, 32, 0.1), 0 0 0 1px rgba(79, 70, 229, 0.12);
  transform: translateY(-2px);
}

.evidence-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: rgba(16, 23, 38, 0.4);
  border-bottom: 1px solid var(--line-soft);
  gap: var(--s-3);
}

.evidence-card__badge {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.evidence-card__zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.evidence-card__zoom-btn:hover {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
  background: var(--surface-raised, #1a2234);
}

.evidence-card__zoom-btn:focus-visible {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
  background: var(--surface-raised, #1a2234);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.evidence-card__stage {
  position: relative;
  background: #06090d;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line-soft);
}

.evidence-card__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
  transition: transform 0.35s var(--ease);
}

.evidence-card:hover .evidence-card__img {
  transform: scale(1.01);
}

.evidence-card__body {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.evidence-card__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.evidence-card__caption {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-muted);
}

.evidence-card__provenance {
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-subtle);
  font-family: var(--font-mono, monospace);
}

.evidence-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  flex-shrink: 0;
}

/* ---- Lightbox Modal ---- */
.sovel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6, 9, 13, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.sovel-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.sovel-lightbox__dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  max-width: 1280px;
  width: 100%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: sovelLightboxIn 0.25s var(--ease);
}

@keyframes sovelLightboxIn {
  from { transform: scale(0.97); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.sovel-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-subtle);
  gap: var(--s-3);
}

.sovel-lightbox__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sovel-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sovel-lightbox__close:hover {
  background: var(--brand-700);
  color: #ffffff;
  border-color: var(--brand-600);
}

.sovel-lightbox__close:focus-visible {
  background: var(--brand-700);
  color: #ffffff;
  border-color: var(--brand-600);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sovel-lightbox__stage {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05080c;
  padding: var(--s-2);
}

.sovel-lightbox__stage img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--r-sm);
}

.sovel-lightbox__footer {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.sovel-lightbox__caption {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.5;
}

body.lightbox-locked {
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .evidence-card,
  .evidence-card__img,
  .sovel-lightbox,
  .sovel-lightbox__dialog {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   28. CATEGORY NAVIGATION PILLS & SOCIAL INTEGRATIONS
   -------------------------------------------------------------------------- */
.cat-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 620;
  text-decoration: none;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}

.cat-pill:hover {
  background: var(--surface-3);
  color: var(--brand-700);
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.cat-pill--active {
  background: var(--brand-600);
  color: #fff !important;
  border-color: var(--brand-600);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
}

.cat-pill--active:hover {
  background: var(--brand-700);
  color: #fff !important;
  border-color: var(--brand-700);
}

.social-link:hover {
  background: var(--brand-050) !important;
  color: var(--brand-600) !important;
  border-color: var(--brand-300) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.15);
}

/* ==========================================================================
   26. CONTACT PAGE & 3D SIGNAL FLOW ARCHITECTURE
   ========================================================================== */

.contact-signal-section {
  padding-top: var(--s-3);
  padding-bottom: var(--s-6);
}

.contact-flow-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-6);
  box-shadow: 0 4px 20px -2px rgba(11, 16, 32, 0.05);
  overflow: hidden;
  position: relative;
}

.contact-flow-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  perspective: 900px;
  position: relative;
}

.flow-node {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3);
  box-shadow: 0 4px 12px rgba(11, 16, 32, 0.04), 0 1px 3px rgba(11, 16, 32, 0.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  transform: translateZ(8px);
  position: relative;
  z-index: 2;
}

.flow-node:hover {
  transform: translateY(-3px) translateZ(16px);
  border-color: var(--brand-400);
  box-shadow: 0 10px 24px -4px rgba(75, 65, 214, 0.12);
}

.flow-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand-500);
  color: var(--brand-600);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--s-2);
  box-shadow: 0 2px 6px rgba(75, 65, 214, 0.15);
}

.flow-node--gate .flow-node__icon {
  border-color: #0284c7;
  color: #0369a1;
}

.flow-node--core .flow-node__icon {
  border-color: var(--brand-500);
  background: var(--brand-500);
  color: #ffffff;
}

.flow-node--resolution .flow-node__icon {
  border-color: #059669;
  color: #047857;
}

.flow-node__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.flow-node__sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-weight: 500;
}

.flow-connector {
  flex: 0 0 44px;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.flow-connector__pulse {
  position: absolute;
  top: -1px;
  left: -20px;
  width: 24px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  border-radius: 2px;
  animation: signalPulse 2.4s infinite ease-in-out;
}

@keyframes signalPulse {
  0% { left: -30px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-node {
    transform: none !important;
    transition: none !important;
  }
  .flow-connector__pulse {
    animation: none !important;
    display: none;
  }
}

@media (max-width: 840px) {
  .contact-flow-visual {
    flex-direction: column;
    gap: var(--s-3);
  }
  .flow-node {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }
  .flow-node__icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .flow-connector {
    width: 2px;
    height: 18px;
    flex: 0 0 18px;
    align-self: center;
  }
  .flow-connector__pulse {
    width: 4px;
    height: 12px;
    top: -12px;
    left: -1px;
    animation-name: signalPulseVertical;
  }
}

@keyframes signalPulseVertical {
  0% { top: -15px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Contact Form & Controls */
.contact-form .form-group {
  margin-bottom: var(--s-4);
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-1);
}

.form-label .required {
  color: #dc2626;
  margin-left: 2px;
}

.input--text,
select.input,
textarea.input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input--text:focus,
select.input:focus,
textarea.input:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
  border-color: var(--brand-500);
}

.radio-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-2);
}

.radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink);
  transition: all 0.15s ease;
}

.radio-card:hover {
  border-color: var(--brand-300);
  background: var(--surface-2);
}

.radio-card input[type="radio"]:checked + span {
  font-weight: 700;
  color: var(--brand-700);
}

.radio-card:has(input[type="radio"]:checked) {
  border-color: var(--brand-500);
  background: var(--brand-050);
}

.channel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.channel-item:last-child {
  border-bottom: none;
}

.channel-item__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

/* ==========================================================================
   27. NEWSLETTER / SOVEL UPDATES ARCHITECTURE
   ========================================================================== */

.newsletter-block {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.newsletter-block--compact {
  padding: var(--s-4);
}

.site-footer .newsletter-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-invert);
  color: var(--on-invert-muted);
}

.site-footer .newsletter-block .eyebrow {
  color: #93c5fd !important;
  background: transparent !important;
}

.site-footer .newsletter-block__title {
  color: #ffffff;
}

.site-footer .newsletter-block__desc {
  color: var(--on-invert-muted);
}

.site-footer .newsletter-form__input {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--line-invert);
  color: #ffffff;
}

.site-footer .newsletter-form__input::placeholder {
  color: #8c96ad;
}

.site-footer .newsletter-form__input:focus {
  border-color: var(--brand-400);
  outline-color: var(--brand-400);
}

.site-footer .checkbox-label {
  color: var(--on-invert-muted);
}

.newsletter-form__input-group {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.newsletter-form__input {
  flex: 1 1 220px;
}

.newsletter-form__submit {
  flex: 0 0 auto;
  background: var(--brand-600);
  color: #ffffff !important;
  border: 1px solid var(--brand-600);
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.newsletter-form__submit:hover {
  background: var(--brand-700);
  color: #ffffff !important;
}

.site-footer .newsletter-form__submit {
  background: #ffffff !important;
  color: #0b1020 !important;
  border-color: #ffffff !important;
}

.site-footer .newsletter-form__submit:hover {
  background: #eef2f9 !important;
  color: #0b1020 !important;
}

.newsletter-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--ink-muted);
  cursor: pointer;
}

.checkbox-pill input[type="checkbox"] {
  accent-color: var(--brand-500);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--brand-500);
  margin-top: 3px;
}