/* clariBI marketing site: base design layer.
 *
 * Loaded last on every page. It does two jobs:
 *  1. Tokens and components for rebuilt pages (.s-* classes).
 *  2. Overrides that calm the older Tailwind markup: no gradient
 *     backgrounds or gradient text, no pastel icon tiles, no drop
 *     shadows, small radii, one accent colour, IBM Plex type.
 */

:root {
  --paper: #f7f6f2;
  --paper-2: #efede6;
  --paper-3: #e6e3da;
  --card: #fffefb;
  --ink: #15171a;
  --ink-2: #3a3e45;
  --muted: #676b72;
  --rule: #dcd8ce;
  --rule-2: #c9c4b8;
  --accent: #0e6b61;
  --accent-ink: #0a4f48;
  --accent-wash: #e3efec;
  --signal: #b0600c;
  --radius: 4px;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--sans) !important;
  font-feature-settings: 'ss02' 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans) !important;
  color: var(--ink);
  letter-spacing: -0.02em !important;
  font-weight: 600;
}
code, pre, kbd, samp { font-family: var(--mono) !important; }
a { text-underline-offset: 3px; }
::selection { background: var(--accent-wash); color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Components for rebuilt pages                                       */
/* ------------------------------------------------------------------ */

.s-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.s-narrow { max-width: 760px; }
.s-section { padding: 88px 0; border-top: 1px solid var(--rule); }
.s-section:first-of-type { border-top: 0; }
.s-section--tint { background: var(--paper-2); }
.s-label {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 18px;
}
.s-label b { color: var(--accent); font-weight: 500; }
.s-h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em !important; margin: 0; }
.s-h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; font-weight: 600; margin: 0 0 16px; }
.s-h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0 0 8px; }
.s-lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 620px; margin: 22px 0 0; }
.s-body { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.s-body p + p { margin-top: 12px; }
.s-small { font-size: 14px; line-height: 1.55; color: var(--muted); }
.s-mono { font-family: var(--mono); }
.s-accent { color: var(--accent); }

.s-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 var(--sans); padding: 13px 18px;
  border-radius: var(--radius); border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper) !important; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.s-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.s-btn--ghost { background: transparent; color: var(--ink) !important; border-color: var(--rule-2); }
.s-btn--ghost:hover { background: var(--card); border-color: var(--ink); }
.s-btn--sm { padding: 9px 13px; font-size: 14px; }
.s-link { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(14,107,97,.35); }
.s-link:hover { text-decoration-color: currentColor; }
.s-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }

.s-grid { display: grid; gap: 32px; }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
@media (max-width: 900px) {
  .s-grid--3, .s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .s-grid--2, .s-grid--3, .s-grid--4 { grid-template-columns: 1fr; }
  .s-section { padding: 64px 0; }
}

.s-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.s-ruled > * { border-top: 1px solid var(--rule); padding-top: 20px; }
.s-num { font-family: var(--mono); font-size: 13px; color: var(--accent); display: block; margin-bottom: 10px; }

.s-list { list-style: none; padding: 0; margin: 0; }
.s-list li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.s-list li:last-child { border-bottom: 1px solid var(--rule); }
.s-list li::before { content: '\2192'; position: absolute; left: 0; top: 10px; color: var(--accent); font-family: var(--mono); }
.s-list--plain li { padding-left: 0; }
.s-list--plain li::before { content: none; }

.s-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.s-table th, .s-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.s-table thead th { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--ink); }
.s-table td:first-child { color: var(--ink); }
.s-table .s-yes { color: var(--accent); font-weight: 500; }
.s-table .s-no { color: var(--muted); }

/* A question and what comes back, drawn as a document, not a chart. */
.s-exchange { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.s-exchange__q { padding: 18px 20px; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; }
.s-exchange__q span { font: 500 12px var(--mono); color: var(--muted); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.s-exchange__a { padding: 18px 20px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.s-exchange__meta { padding: 12px 20px; border-top: 1px solid var(--rule); font: 12px/1.5 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }

.s-figure { margin: 0; }
.s-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--card); }
.s-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }

.s-plan { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.s-plan--mark { border-color: var(--ink); }
.s-plan__name { font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.s-plan__price { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; margin: 12px 0 2px; }
.s-plan__price small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.s-plan .s-list { margin: 18px 0 22px; flex: 1; }
.s-plan .s-list li { font-size: 14px; padding: 8px 0; }

.s-note { border-left: 2px solid var(--accent); padding: 4px 0 4px 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

.s-logos { display: flex; flex-wrap: wrap; gap: 10px; }
.s-logos a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); font-size: 14px; color: var(--ink); text-decoration: none; }
.s-logos a:hover { border-color: var(--ink); }
.s-logos img { width: 18px; height: 18px; object-fit: contain; }


.s-page { padding-top: 64px; }
.s-hero { padding: 88px 0 96px; }
.s-hero .s-split { align-items: center; grid-template-columns: 6fr 5fr; }
@media (max-width: 900px) { .s-hero .s-split { grid-template-columns: 1fr; } .s-hero { padding: 56px 0 64px; } }
.s-hero .s-exchange { margin-top: 8px; }
.s-code { font: 14px/1.5 var(--mono); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; margin: 0; white-space: pre-wrap; }
.s-table-wrap { overflow-x: auto; }
.s-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .s-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .s-grid--5 { grid-template-columns: 1fr; } }
.s-cta { background: var(--ink); color: #d9d7d0; border-top: 0; }
.s-cta .s-h2 { color: #f4f2ec; }
.s-cta .s-body { color: #c4c2bb; }
.s-cta .s-btn { background: var(--paper); color: var(--ink) !important; border-color: var(--paper); }
.s-cta .s-btn:hover { background: #fff; }
.s-cta .s-btn--ghost { background: transparent; color: #f4f2ec !important; border-color: #55585e; }
.s-cta .s-btn--ghost:hover { background: transparent; border-color: #f4f2ec; }
.s-section .s-table td:first-child { width: 34%; }
.s-exchange__a p + p { margin-top: 10px; }


.s-billing { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius); margin-top: 28px; overflow: hidden; }
.s-billing__opt { font: 500 14px var(--sans); padding: 9px 16px; background: transparent; color: var(--ink-2); border: 0; cursor: pointer; }
.s-billing__opt.is-on { background: var(--ink); color: var(--paper); }
.s-plans .s-plan__price { font-size: 30px; }
.s-plans .s-plan .s-btn { justify-content: center; }
.s-faq .s-h3 { margin-top: 28px; }
.s-faq .s-h3:first-child { margin-top: 0; }
.s-table--plans { min-width: 760px; background: var(--card); border: 1px solid var(--rule); }
.s-table--plans td:not(:first-child), .s-table--plans th:not(:first-child) { text-align: center; }
.s-table--plans tbody tr:hover { background: var(--paper); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Navigation and footer                                              */
/* ------------------------------------------------------------------ */

#global-navigation nav, nav.s-nav { background: rgba(247,246,242,.94) !important; backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; }
.s-footer { background: var(--ink); color: #b9bcc2; font-size: 14px; }
.s-footer a { color: #b9bcc2; text-decoration: none; }
.s-footer a:hover { color: #fff; }
.s-footer__main { display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; padding-top: 64px; padding-bottom: 48px; }
.s-footer__logo { font-size: 22px; font-weight: 600; color: #f1efe9 !important; letter-spacing: -0.02em; }
.s-footer__logo span { color: #6fc1b6; }
.s-footer__brand p { margin-top: 14px; line-height: 1.6; max-width: 300px; }
.s-footer__contact a { color: #e6e3db; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.s-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.s-footer h3 { font: 500 12px var(--mono) !important; letter-spacing: .05em !important; text-transform: uppercase; color: #eceae4 !important; margin: 0 0 12px; }
.s-footer ul { list-style: none; padding: 0; margin: 0 0 28px; }
.s-footer li { margin: 0 0 8px; }
.s-footer__base { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid #2c2f35; font: 12px var(--mono); color: #8d9097; }
.s-footer .status-indicator { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
@media (max-width: 900px) { .s-footer__main { grid-template-columns: 1fr; } .s-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ */
/* Calming the older pages (Tailwind markup)                          */
/* ------------------------------------------------------------------ */

/* Gradient text becomes plain ink. */
.bg-clip-text, .text-transparent, [class*="text-gradient"], .gradient-text {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--ink) !important;
}

/* Gradient bands (classes or inline styles) become a flat tint. */
[class*="bg-gradient-to-"], [style*="linear-gradient"], [style*="radial-gradient"], .hero-grad, .hero-gradient, .gradient-bg, [class*="gradient-hero"] {
  background-image: none !important; background: var(--paper-2) !important;
}
section[class*="bg-gradient-to-"], header[class*="bg-gradient-to-"], section[style*="gradient"], header[style*="gradient"],
section.hero-grad, section.hero-gradient { border-bottom: 1px solid var(--rule); }
/* Light text meant for a coloured band now sits on paper: make it ink. */
[class*="bg-gradient-to-"] .text-white, [style*="linear-gradient"] .text-white, [style*="radial-gradient"] .text-white, .hero-grad .text-white, .hero-gradient .text-white, .gradient-bg .text-white, [class*="gradient-hero"] .text-white, [class*="bg-gradient-to-"] .text-teal-100, [style*="linear-gradient"] .text-teal-100, [style*="radial-gradient"] .text-teal-100, .hero-grad .text-teal-100, .hero-gradient .text-teal-100, .gradient-bg .text-teal-100, [class*="gradient-hero"] .text-teal-100, [class*="bg-gradient-to-"] .text-teal-200, [style*="linear-gradient"] .text-teal-200, [style*="radial-gradient"] .text-teal-200, .hero-grad .text-teal-200, .hero-gradient .text-teal-200, .gradient-bg .text-teal-200, [class*="gradient-hero"] .text-teal-200, [class*="bg-gradient-to-"] .text-amber-100, [style*="linear-gradient"] .text-amber-100, [style*="radial-gradient"] .text-amber-100, .hero-grad .text-amber-100, .hero-gradient .text-amber-100, .gradient-bg .text-amber-100, [class*="gradient-hero"] .text-amber-100, [class*="bg-gradient-to-"] .text-amber-200, [style*="linear-gradient"] .text-amber-200, [style*="radial-gradient"] .text-amber-200, .hero-grad .text-amber-200, .hero-gradient .text-amber-200, .gradient-bg .text-amber-200, [class*="gradient-hero"] .text-amber-200, [class*="bg-gradient-to-"] .text-amber-300, [style*="linear-gradient"] .text-amber-300, [style*="radial-gradient"] .text-amber-300, .hero-grad .text-amber-300, .hero-gradient .text-amber-300, .gradient-bg .text-amber-300, [class*="gradient-hero"] .text-amber-300, [class*="bg-gradient-to-"] .text-gray-100, [style*="linear-gradient"] .text-gray-100, [style*="radial-gradient"] .text-gray-100, .hero-grad .text-gray-100, .hero-gradient .text-gray-100, .gradient-bg .text-gray-100, [class*="gradient-hero"] .text-gray-100, [class*="bg-gradient-to-"] .text-gray-200, [style*="linear-gradient"] .text-gray-200, [style*="radial-gradient"] .text-gray-200, .hero-grad .text-gray-200, .hero-gradient .text-gray-200, .gradient-bg .text-gray-200, [class*="gradient-hero"] .text-gray-200, [class*="bg-gradient-to-"] .text-gray-300, [style*="linear-gradient"] .text-gray-300, [style*="radial-gradient"] .text-gray-300, .hero-grad .text-gray-300, .hero-gradient .text-gray-300, .gradient-bg .text-gray-300, [class*="gradient-hero"] .text-gray-300, [class*="bg-gradient-to-"] .text-purple-100, [style*="linear-gradient"] .text-purple-100, [style*="radial-gradient"] .text-purple-100, .hero-grad .text-purple-100, .hero-gradient .text-purple-100, .gradient-bg .text-purple-100, [class*="gradient-hero"] .text-purple-100, [class*="bg-gradient-to-"] .text-purple-200, [style*="linear-gradient"] .text-purple-200, [style*="radial-gradient"] .text-purple-200, .hero-grad .text-purple-200, .hero-gradient .text-purple-200, .gradient-bg .text-purple-200, [class*="gradient-hero"] .text-purple-200, [class*="bg-gradient-to-"] .text-indigo-100, [style*="linear-gradient"] .text-indigo-100, [style*="radial-gradient"] .text-indigo-100, .hero-grad .text-indigo-100, .hero-gradient .text-indigo-100, .gradient-bg .text-indigo-100, [class*="gradient-hero"] .text-indigo-100, [class*="bg-gradient-to-"] .text-indigo-200, [style*="linear-gradient"] .text-indigo-200, [style*="radial-gradient"] .text-indigo-200, .hero-grad .text-indigo-200, .hero-gradient .text-indigo-200, .gradient-bg .text-indigo-200, [class*="gradient-hero"] .text-indigo-200, [class*="bg-gradient-to-"] .text-blue-100, [style*="linear-gradient"] .text-blue-100, [style*="radial-gradient"] .text-blue-100, .hero-grad .text-blue-100, .hero-gradient .text-blue-100, .gradient-bg .text-blue-100, [class*="gradient-hero"] .text-blue-100, [class*="bg-gradient-to-"] .text-blue-200, [style*="linear-gradient"] .text-blue-200, [style*="radial-gradient"] .text-blue-200, .hero-grad .text-blue-200, .hero-gradient .text-blue-200, .gradient-bg .text-blue-200, [class*="gradient-hero"] .text-blue-200, [class*="bg-gradient-to-"] .text-yellow-200, [style*="linear-gradient"] .text-yellow-200, [style*="radial-gradient"] .text-yellow-200, .hero-grad .text-yellow-200, .hero-gradient .text-yellow-200, .gradient-bg .text-yellow-200, [class*="gradient-hero"] .text-yellow-200, [class*="bg-gradient-to-"] .text-yellow-300, [style*="linear-gradient"] .text-yellow-300, [style*="radial-gradient"] .text-yellow-300, .hero-grad .text-yellow-300, .hero-gradient .text-yellow-300, .gradient-bg .text-yellow-300, [class*="gradient-hero"] .text-yellow-300, [class*="bg-gradient-to-"] .text-pink-100, [style*="linear-gradient"] .text-pink-100, [style*="radial-gradient"] .text-pink-100, .hero-grad .text-pink-100, .hero-gradient .text-pink-100, .gradient-bg .text-pink-100, [class*="gradient-hero"] .text-pink-100, [class*="bg-gradient-to-"] [class*="text-white\/"], [style*="linear-gradient"] [class*="text-white\/"], [style*="radial-gradient"] [class*="text-white\/"], .hero-grad [class*="text-white\/"], .hero-gradient [class*="text-white\/"], .gradient-bg [class*="text-white\/"], [class*="gradient-hero"] [class*="text-white\/"], [class*="bg-gradient-to-"] .text-opacity-80, [style*="linear-gradient"] .text-opacity-80, [style*="radial-gradient"] .text-opacity-80, .hero-grad .text-opacity-80, .hero-gradient .text-opacity-80, .gradient-bg .text-opacity-80, [class*="gradient-hero"] .text-opacity-80, [class*="bg-gradient-to-"] .text-opacity-90, [style*="linear-gradient"] .text-opacity-90, [style*="radial-gradient"] .text-opacity-90, .hero-grad .text-opacity-90, .hero-gradient .text-opacity-90, .gradient-bg .text-opacity-90, [class*="gradient-hero"] .text-opacity-90, [class*="bg-gradient-to-"].text-white, [style*="linear-gradient"].text-white, [style*="radial-gradient"].text-white, .hero-grad.text-white, .hero-gradient.text-white, .gradient-bg.text-white, [class*="gradient-hero"].text-white { color: var(--ink) !important; }
[class*="bg-gradient-to-"] p, [style*="linear-gradient"] p, [style*="radial-gradient"] p, .hero-grad p, .hero-gradient p, .gradient-bg p, [class*="gradient-hero"] p { color: var(--ink-2) !important; }
[class*="bg-gradient-to-"] a.bg-white, [style*="linear-gradient"] a.bg-white, [style*="radial-gradient"] a.bg-white, .hero-grad a.bg-white, .hero-gradient a.bg-white, .gradient-bg a.bg-white, [class*="gradient-hero"] a.bg-white, [class*="bg-gradient-to-"] button.bg-white, [style*="linear-gradient"] button.bg-white, [style*="radial-gradient"] button.bg-white, .hero-grad button.bg-white, .hero-gradient button.bg-white, .gradient-bg button.bg-white, [class*="gradient-hero"] button.bg-white {
  background: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink) !important;
}
[class*="bg-gradient-to-"] [class*="border-white"], [style*="linear-gradient"] [class*="border-white"], [style*="radial-gradient"] [class*="border-white"], .hero-grad [class*="border-white"], .hero-gradient [class*="border-white"], .gradient-bg [class*="border-white"], [class*="gradient-hero"] [class*="border-white"] { border-color: var(--rule-2) !important; color: var(--ink) !important; }
[class*="bg-gradient-to-"] .bg-opacity-10, [style*="linear-gradient"] .bg-opacity-10, [style*="radial-gradient"] .bg-opacity-10, .hero-grad .bg-opacity-10, .hero-gradient .bg-opacity-10, .gradient-bg .bg-opacity-10, [class*="gradient-hero"] .bg-opacity-10, [class*="bg-gradient-to-"] .bg-opacity-20, [style*="linear-gradient"] .bg-opacity-20, [style*="radial-gradient"] .bg-opacity-20, .hero-grad .bg-opacity-20, .hero-gradient .bg-opacity-20, .gradient-bg .bg-opacity-20, [class*="gradient-hero"] .bg-opacity-20, [class*="bg-gradient-to-"] [class*="bg-white\/"], [style*="linear-gradient"] [class*="bg-white\/"], [style*="radial-gradient"] [class*="bg-white\/"], .hero-grad [class*="bg-white\/"], .hero-gradient [class*="bg-white\/"], .gradient-bg [class*="bg-white\/"], [class*="gradient-hero"] [class*="bg-white\/"] {
  background-color: var(--card) !important; border: 1px solid var(--rule);
}

/* Decorative blobs, glows and motion. Elements that started hidden for an
   entrance animation are shown as they are. */
.floating-shape, .floating-shapes, .blob, .hero-glow, .mix-blend-multiply, .filter[class*="blur-"],
[class*="blur-3xl"], [class*="blur-2xl"] { display: none !important; }
[class*="animate-"], .animate-on-scroll, .fade-in, .fade-in-up, .slide-up, .scale-in {
  animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important;
}

/* Shadows and radii. */
[class*="shadow"] { box-shadow: none !important; }
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: var(--radius) !important; }
.rounded-full.px-2, .rounded-full.px-3, .rounded-full.px-4, .rounded-full.py-1 { border-radius: 3px !important; }
.bg-white.rounded-lg, .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-3xl {
  border: 1px solid var(--rule); background: var(--card) !important;
}
.transform:hover, [class*="hover\:-translate-"]:hover, [class*="hover\:scale-"]:hover { transform: none !important; }

/* Pastel fills and the rainbow of accent colours collapse to two. */
.bg-gray-50, .bg-slate-50 { background-color: var(--paper-2) !important; }
.bg-white { background-color: var(--card); }
.bg-teal-50, .bg-teal-100, .bg-teal-200, .bg-amber-50, .bg-amber-100, .bg-amber-200, .bg-yellow-50, .bg-yellow-100, .bg-yellow-200, .bg-orange-50, .bg-orange-100, .bg-orange-200, .bg-purple-50, .bg-purple-100, .bg-purple-200, .bg-pink-50, .bg-pink-100, .bg-pink-200, .bg-indigo-50, .bg-indigo-100, .bg-indigo-200, .bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-green-50, .bg-green-100, .bg-green-200, .bg-emerald-50, .bg-emerald-100, .bg-emerald-200, .bg-red-50, .bg-red-100, .bg-red-200, .bg-rose-50, .bg-rose-100, .bg-rose-200, .bg-cyan-50, .bg-cyan-100, .bg-cyan-200, .bg-violet-50, .bg-violet-100, .bg-violet-200, .bg-sky-50, .bg-sky-100, .bg-sky-200, .bg-lime-50, .bg-lime-100, .bg-lime-200 { background-color: var(--paper-2) !important; }
.border-teal-100, .border-teal-200, .border-teal-300, .border-teal-400, .border-teal-500, .border-teal-600, .border-amber-100, .border-amber-200, .border-amber-300, .border-amber-400, .border-amber-500, .border-amber-600, .border-purple-100, .border-purple-200, .border-purple-300, .border-purple-400, .border-purple-500, .border-purple-600, .border-pink-100, .border-pink-200, .border-pink-300, .border-pink-400, .border-pink-500, .border-pink-600, .border-indigo-100, .border-indigo-200, .border-indigo-300, .border-indigo-400, .border-indigo-500, .border-indigo-600, .border-blue-100, .border-blue-200, .border-blue-300, .border-blue-400, .border-blue-500, .border-blue-600, .border-green-100, .border-green-200, .border-green-300, .border-green-400, .border-green-500, .border-green-600, .border-yellow-100, .border-yellow-200, .border-yellow-300, .border-yellow-400, .border-yellow-500, .border-yellow-600, .border-orange-100, .border-orange-200, .border-orange-300, .border-orange-400, .border-orange-500, .border-orange-600, .border-emerald-100, .border-emerald-200, .border-emerald-300, .border-emerald-400, .border-emerald-500, .border-emerald-600 { border-color: var(--rule) !important; }
.text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800, .text-pink-500, .text-pink-600, .text-pink-700, .text-pink-800, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-orange-500, .text-orange-600, .text-orange-700, .text-orange-800, .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-teal-500, .text-teal-600, .text-teal-700, .text-teal-800, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-cyan-500, .text-cyan-600, .text-cyan-700, .text-cyan-800, .text-sky-500, .text-sky-600, .text-sky-700, .text-sky-800 { color: var(--accent) !important; }
/* Solid colour fills (buttons, badges, number circles) become ink. */
.bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-amber-500, .bg-amber-600, .bg-amber-700, .bg-amber-800, .bg-orange-500, .bg-orange-600, .bg-orange-700, .bg-orange-800, .bg-pink-500, .bg-pink-600, .bg-pink-700, .bg-pink-800, .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700, .bg-cyan-800, .bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-rose-800 { background-color: var(--ink) !important; color: var(--paper) !important; }
a[class*="bg-teal-"]:hover, button[class*="bg-teal-"]:hover { background-color: var(--accent-ink) !important; }
.bg-gray-900, .bg-slate-900 { background-color: var(--ink) !important; }


/* Page-level decorations defined in each page's own <style>. */
.absolute.inset-0.bg-black, .absolute.inset-0[class*="bg-opacity"], .absolute.inset-0.opacity-20 { display: none !important; }
section.min-h-screen, header.min-h-screen, section[class*="min-h-"][class*="bg-gradient"] { min-height: 0 !important; padding-top: 96px !important; padding-bottom: 80px !important; }
.step-number { background: var(--ink) !important; color: var(--paper) !important; border-radius: 3px !important; }
.btn-primary { background: var(--ink) !important; background-image: none !important; color: var(--paper) !important; border-radius: var(--radius) !important; }
.btn-primary:hover { background: var(--accent-ink) !important; }
.btn-primary::before, .btn-primary:before, .feature-card::before, .example-box::before, .icon-container::before,
.industry-card .card-header::before, .connector-line { background: none !important; display: none !important; }
.industry-card .card-header, .feature-card, .thumb-placeholder, .animated-gradient, .compliance-badge {
  background: var(--paper-2) !important; background-image: none !important;
}
.industry-card .card-header, .industry-card .card-header * { color: var(--ink) !important; }
.stat-number { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink) !important; }


/* Shared button classes (GlobalStyles + global-components.js rename
   Tailwind buttons to these at runtime). */
.btn { border-radius: var(--radius) !important; font-family: var(--sans) !important; font-weight: 500 !important; transform: none !important; box-shadow: none !important; }
.btn-secondary, .btn-outline, .btn-white-outline, .btn-ghost {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--rule-2) !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-white-outline:hover, .btn-ghost:hover { border-color: var(--ink) !important; background: var(--card) !important; }
.hover-scale:hover, .hover-lift:hover { transform: none !important; }

/* Headings on older pages: sentence-scale, no giant display sizes. */
h1.text-5xl, h1.text-6xl, h1[class*="md:text-6xl"], h1[class*="lg:text-7xl"] { letter-spacing: -0.035em !important; }

/* Product screenshot with a caption */
.s-shot { margin: 0; max-width: 980px; }
.s-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.s-shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3, #6c6a62); max-width: 640px; }