/* ============================================================
   Components Lab — supplemental styles.
   Extends tokens.css vocabulary (no new tokens, no new colors).
   ============================================================ */

/* ============================================================
   IBM Plex Sans Arabic — self-hosted (weights 300/400/500/600/700)
   Arabic subset first, then Latin; browser picks based on character range.
   Matches the Cascadia Code pattern in tokens.css.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-300-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Keyboard focus rings (a11y) =====
   Only shown for keyboard navigation (:focus-visible), never for mouse clicks.
   Uses a double outline so rings read on both dark and light surfaces. */
.faq-trigger:focus-visible,
.sfs-tab:focus-visible,
.sfs-dot:focus-visible,
.cmp-table a:focus-visible,
.footer-col a:focus-visible,
.footer-legal-links a:focus-visible,
.footer-locale-link:focus-visible,
.footer-social a:focus-visible,
.footer-newsletter-btn:focus-visible,
.logo-strip-item a:focus-visible,
.pricing-cta:focus-visible,
.rich-linkcard:focus-visible,
.rich-video-play:focus-visible {
  outline: 2px solid #0E43F1;
  outline-offset: 3px;
  border-radius: 0.6rem;
}
/* Pill/rounded elements get a larger offset to read around the full shape. */
.sfs-tab:focus-visible,
.pricing-cta:focus-visible,
.footer-newsletter-btn:focus-visible,
.footer-social a:focus-visible,
.footer-locale-link:focus-visible {
  outline-offset: 2px;
  border-radius: 9999px;
}
.footer-newsletter-field:focus-within {
  outline: 2px solid rgba(14, 67, 241, 0.5);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  /* Ring fade-in so focus moves feel smooth, not stabby. */
  :focus-visible { transition: outline-offset 120ms ease; }
}

/* ===== HeroWithProduct: product image slot ===== */
.hero-product-image {
  transition: transform 420ms var(--ease-spring);
}
@media (min-width: 1024px) {
  .hero-product-image:hover {
    transform: translateY(-3px);
  }
}

/* ===== StickyFeatureShowcase ===== */

/* ── Card-shell background: subtle radial gradient that shifts with scroll (f).
   Lives on .sfs-card-shell (inside the pin) so it never stretches the section. */
.sfs-card-shell {
  background-image: radial-gradient(
    circle at var(--sfs-bg-x, 30%) 50%,
    rgba(14, 67, 241, 0.05),
    transparent 60%
  );
  background-color: white;
}

/* ── Tab button */
.sfs-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  text-align: start;
  transition:
    background 260ms var(--ease-apple),
    border-color 260ms var(--ease-apple),
    transform 320ms var(--ease-spring);
  cursor: pointer;
}
.sfs-tab:hover {
  background: rgba(14, 67, 241, 0.04);
  border-color: rgba(14, 67, 241, 0.12);
}
.sfs-tab-active {
  background: rgba(14, 67, 241, 0.06);
  border-color: rgba(14, 67, 241, 0.22);
  box-shadow: 0 8px 28px -16px rgba(14, 67, 241, 0.35);
}

.sfs-tab-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid oklch(0.90 0.008 265);
  color: oklch(0.55 0.015 265);
  transition:
    background 260ms ease,
    color 260ms ease,
    border-color 260ms ease,
    transform 320ms var(--ease-spring);
}
.sfs-tab:hover .sfs-tab-icon,
.sfs-tab-active .sfs-tab-icon {
  background: linear-gradient(135deg, rgba(14,67,241,1), rgba(27,6,223,0.85));
  border-color: transparent;
  color: white;
  transform: rotate(-4deg) scale(1.05);
}

.sfs-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sfs-tab-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: rgba(10, 10, 46, 0.3);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 260ms ease, transform 320ms var(--ease-spring), color 260ms ease;
  align-self: center;
}
.sfs-tab-active .sfs-tab-arrow,
.sfs-tab:hover .sfs-tab-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #0E43F1;
}
html[dir="rtl"] .sfs-tab-arrow {
  transform: translateX(-6px);
}
html[dir="rtl"] .sfs-tab-active .sfs-tab-arrow,
html[dir="rtl"] .sfs-tab:hover .sfs-tab-arrow {
  transform: translateX(0);
}

/* ── c. Tab rail — Apple sliding indicator
   Vertical on lg, wraps the ul. JS drives translateY / translateX.
   Uses logical inset-inline-start so it sits on the "start" edge in both LTR & RTL. */
.sfs-nav > div {
  position: relative;
}
.sfs-tab-rail {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #0E43F1, rgba(27,6,223,0.7));
  box-shadow: 0 0 12px rgba(14, 67, 241, 0.45);
  pointer-events: none;
  z-index: 2;
  transition: none; /* JS drives this — no CSS transition fighting */
}
@media (min-width: 1024px) {
  .sfs-tab-rail {
    /* Height matches one tab row — JS reads offsetHeight at runtime */
    height: var(--sfs-tab-h, 60px);
    width: 3px;
  }
}
@media (max-width: 1023px) {
  .sfs-tab-rail {
    /* Horizontal on mobile */
    width: var(--sfs-tab-w, 80px);
    height: 3px;
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-start: 0;
  }
}

/* ===== Sticky scroll-pin track =====
   .sfs-section  — transparent host; no bg, no padding, just position:relative anchor.
   .sfs-track    — tall scroll runway (N × --sfs-stop). Transparent. No visual chrome.
   .sfs-pin      — position:sticky; one-viewport tall. Hosts .sfs-card-shell.
   .sfs-card-shell — the VISIBLE white rounded card; always one-screen tall or less. */

.sfs-section {
  /* Transparent host — no background, no padding */
  background: none;
}

.sfs-track {
  --sfs-stop: 70vh;
  height: calc(var(--sfs-stops, 5) * var(--sfs-stop));
  position: relative;
  /* No background — visually invisible; scroll runway only */
}

.sfs-pin {
  position: sticky;
  top: 5rem;
  /* Let the pin shrink-wrap the card-shell — no explicit height so it doesn't
     push the track taller than the runway. Padding is on .sfs-card-shell now. */
  height: auto;
  min-height: 0;
  padding-block: 0;
  overflow: visible;
}

/* .sfs-card-shell: the visible chrome.
   Centering via max-w + mx-auto replicates the old .container behaviour.
   Vertical padding is here (not on .sfs-pin) so it doesn't double-pad. */
.sfs-card-shell {
  width: 100%;
  max-width: 1376px;
  margin-inline: auto;
  /* bg + radial-gradient set inline via Tailwind + JS --sfs-bg-x above */
}

/* When JS is unavailable or user prefers reduced motion, collapse to static flow. */
@media (prefers-reduced-motion: reduce) {
  .sfs-track { height: auto; }
  .sfs-pin { position: static; height: auto; padding-block: 0; }
  .sfs-card-shell { padding-block: 2.5rem; }
}

/* Small viewports: unpin and flow naturally */
@media (max-width: 1023px) {
  .sfs-track { --sfs-stop: 60vh; height: auto; }
  .sfs-pin { position: static; height: auto; padding-block: 0; }
  .sfs-card-shell { padding-block: 2.5rem; }
}

/* ── a. 3D perspective — cards lean toward/away as they transition */
.sfs-stage {
  position: relative;
  min-height: 22rem;
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* Compact shuffle — JS drives all motion via rAF inline styles */
.sfs-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  /* NO CSS transition on scroll path — rAF owns this */
  transform-style: preserve-3d;
}
/* b. Image parallax: overflow hidden on the image wrapper so scale doesn't bleed */
.sfs-card .aspect-\\[16\\/10\\] {
  overflow: hidden;
}
/* GPU compositing only while actively scrolling */
.sfs-track[data-scrolling="1"] .sfs-card {
  will-change: transform, opacity, filter;
}
/* Fallback: no-JS / reduced-motion */
.sfs-card.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sfs-stage { perspective: none; }
  .sfs-card {
    transition: opacity 200ms ease;
    transform: none !important;
    filter: none !important;
  }
  .sfs-card.is-active { opacity: 1; position: relative; }
  .sfs-tab-rail { transition: transform 200ms ease; }
}

/* ===== FAQ accordion ===== */
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid oklch(0.28 0.03 265);
  transition: border-color 240ms ease;
}
.faq-item:last-child {
  border-bottom: 1px solid oklch(0.28 0.03 265);
}
.faq-item-open {
  border-color: rgba(14, 67, 241, 0.35);
}

.faq-trigger {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0.25rem;
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: padding 280ms var(--ease-spring);
}
.faq-trigger:hover .faq-chevron {
  background: rgba(14, 67, 241, 0.18);
  border-color: rgba(14, 67, 241, 0.45);
  color: oklch(0.99 0.005 265);
}

.faq-chevron {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #0E43F1;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 320ms var(--ease-spring),
    color 220ms ease;
}
.faq-item-open .faq-chevron {
  background: #0E43F1;
  border-color: #0E43F1;
  color: white;
  transform: rotate(180deg);
  box-shadow: 0 0 24px -6px rgba(14, 67, 241, 0.6);
}

/* Accordion open/close animation using grid-template-rows.
   Wrap has 0fr → 1fr transition; inner has overflow hidden so content clips
   smoothly. Text fades + translates slightly for a polished feel. */
.faq-panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-spring);
}
.faq-panel-wrap.is-open {
  grid-template-rows: 1fr;
}
.faq-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-panel-text {
  padding: 0 2.25rem 1.5rem 2.25rem;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 320ms var(--ease-spring) 120ms,
    transform 380ms var(--ease-spring) 120ms;
}
.faq-panel-wrap.is-open .faq-panel-text {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .faq-panel-wrap,
  .faq-panel-text { transition: none; }
}

/* ===== Timeline ===== */
.tl-list {
  --tl-line-inset: 0.55rem;   /* aligns vertical line to center of dot */
  --tl-col-width: 6rem;        /* year column width */
  --tl-gap: 1.5rem;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tl-item {
  display: grid;
  grid-template-columns: var(--tl-col-width) 1fr;
  gap: var(--tl-gap);
  padding-bottom: 2.25rem;
  position: relative;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-marker {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.25rem;
}
.tl-year {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: oklch(0.55 0.015 265);
  text-transform: uppercase;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl-dot {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 9999px;
  background: #0E43F1;
  box-shadow: 0 0 0 4px rgba(14, 67, 241, 0.14), 0 0 14px -2px rgba(14, 67, 241, 0.5);
  position: relative;
  z-index: 1;
}
.tl-dot-live {
  background: #00D9A6;
  box-shadow: 0 0 0 4px rgba(0, 217, 166, 0.18), 0 0 18px rgba(0, 240, 181, 0.6);
  animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 217, 166, 0.18), 0 0 18px rgba(0, 240, 181, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 217, 166, 0.08), 0 0 24px rgba(0, 240, 181, 0.9); }
}

/* Vertical line — connects dots down the marker column.
   In RTL, the marker column is visually on the right side of the item,
   so the line inherits the correct side via the grid. */
.tl-item::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  bottom: -0.25rem;
  /* Line sits at center of the 0.85rem dot inside the grid column. */
  inset-inline-start: calc(var(--tl-col-width) - 0.425rem);
  width: 1px;
  background: linear-gradient(180deg, rgba(14, 67, 241, 0.3) 0%, oklch(0.90 0.008 265) 60%, rgba(14, 67, 241, 0.08) 100%);
  z-index: 0;
}
.tl-item:last-child::before {
  display: none;
}

.tl-body {
  padding-top: 0;
}

@media (max-width: 640px) {
  .tl-list { --tl-col-width: 4.5rem; --tl-gap: 1rem; }
  .tl-item::before { inset-inline-start: calc(var(--tl-col-width) - 0.425rem); }
}

/* ===== TeamGrid =====
   Flex-wrap + justify-center so partial rows center (2 members → both in middle,
   4 members → 3 up top + 1 centered below, etc.). Max 3 cards per row at lg+. */
.team-card {
  position: relative;
  padding: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 420ms var(--ease-spring), box-shadow 420ms ease;
  flex: 0 0 100%;
  max-width: 26rem;
}
@media (min-width: 640px) {
  /* 2 per row; gap-5 = 1.25rem → 1 gap × 1.25rem = 1.25rem total */
  .team-card { flex: 0 0 calc((100% - 1.25rem) / 2); }
}
@media (min-width: 1024px) {
  /* 3 per row max; 2 gaps × 1.25rem = 2.5rem total */
  .team-card { flex: 0 0 calc((100% - 2.5rem) / 3); }
}
.team-card-inner {
  position: relative;
  border-radius: inherit;
  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(14, 67, 241, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 100%, rgba(27, 6, 223, 0.05) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.15 0.035 265), oklch(0.12 0.03 265));
  border: 1px solid oklch(0.28 0.03 265);
  min-height: 16rem;
  transition:
    background 560ms var(--ease-spring),
    border-color 320ms ease;
}
.team-card:hover,
.team-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -24px rgba(14, 67, 241, 0.45);
}
.team-card:hover .team-card-inner,
.team-card:focus-within .team-card-inner {
  border-color: oklch(0.76 0.01 265 / 0.4);
  background:
    radial-gradient(ellipse at 80% 10%, rgba(14, 67, 241, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(27, 6, 223, 0.18) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.17 0.055 265), oklch(0.12 0.035 265));
}
.team-mono {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: oklch(0.16 0.09 265);
  color: white;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 320ms ease, border-color 320ms ease;
}
.team-card:hover .team-mono {
  background: #0E43F1;
  border-color: rgba(255, 255, 255, 0.22);
}

/* ===== TeamGrid — portrait variant =====
   Taller card with a large image area on top (~62% of card height) and meta below.
   Same flex-wrap + justify-center responsive pattern (1→2→3 per row, partial rows center). */
.team-card-portrait {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 420ms var(--ease-spring), box-shadow 420ms ease;
  flex: 0 0 100%;
  max-width: 22rem;
}
@media (min-width: 640px) {
  .team-card-portrait { flex: 0 0 calc((100% - 1.25rem) / 2); }
}
@media (min-width: 1024px) {
  .team-card-portrait { flex: 0 0 calc((100% - 2.5rem) / 3); }
}
.tcp-inner {
  position: relative;
  border-radius: inherit;
  background: linear-gradient(155deg, oklch(0.15 0.035 265), oklch(0.12 0.03 265));
  border: 1px solid oklch(0.28 0.03 265);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 320ms ease;
}
.team-card-portrait:hover,
.team-card-portrait:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px -24px rgba(14, 67, 241, 0.5);
}
.team-card-portrait:hover .tcp-inner,
.team-card-portrait:focus-within .tcp-inner {
  border-color: oklch(0.76 0.01 265 / 0.4);
}
.tcp-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(14, 67, 241, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(27, 6, 223, 0.3) 0%, transparent 55%),
    linear-gradient(160deg, oklch(0.22 0.09 265), oklch(0.13 0.04 265));
  overflow: hidden;
}
.tcp-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.02);
  transition: transform 620ms var(--ease-spring), filter 520ms ease;
}
.team-card-portrait:hover .tcp-image img,
.team-card-portrait:focus-within .tcp-image img {
  transform: scale(1.08);
  filter: grayscale(0) contrast(1);
}
.tcp-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
}
.tcp-image-placeholder svg {
  width: 3.5rem;
  height: 3.5rem;
  stroke-width: 1.2;
}
.tcp-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 24, 0.65) 100%);
  pointer-events: none;
}
.tcp-badge {
  position: absolute;
  top: 0.85rem;
  inset-inline-start: 0.85rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  background: rgba(8, 8, 24, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
}
.tcp-body {
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tcp-name {
  font-size: 1.025rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: white;
  line-height: 1.3;
}
.tcp-role {
  font-size: 0.82rem;
  color: oklch(0.76 0.01 265);
}
.tcp-foot {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== Pricing ===== */
.pricing-card {
  position: relative;
  border-radius: 1.5rem;
  background: white;
  border: 1px solid oklch(0.90 0.008 265);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 40px -22px rgba(10,10,46,0.12);
  transition:
    transform 420ms var(--ease-spring),
    box-shadow 420ms ease,
    border-color 320ms ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 50px -20px rgba(10,10,46,0.18);
  border-color: oklch(0.80 0.015 265);
}
.pricing-card-inner {
  padding: 2rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 34rem;
}
.pricing-head h3 {
  line-height: 1.15;
}
.pricing-price {
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background: #F5F5F7;
  border: 1px solid oklch(0.90 0.008 265);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
}
.pricing-features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
  color: oklch(0.30 0.02 265);
  font-size: 0.92rem;
  line-height: 1.55;
}
.pf-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: #0E43F1;
  margin-top: 0.2rem;
  stroke-width: 2.5;
}
.pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.95rem;
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 180ms var(--ease-spring),
    box-shadow 180ms ease;
}
.pricing-cta:active { transform: scale(0.97); }
.pricing-cta-ghost {
  background: white;
  color: oklch(0.10 0.02 265);
  border: 1px solid oklch(0.90 0.008 265);
}
.pricing-cta-ghost:hover {
  background: oklch(0.10 0.02 265);
  color: white;
  border-color: oklch(0.10 0.02 265);
}
.pricing-cta-primary {
  background: #0E43F1;
  color: white;
  box-shadow: 0 10px 30px -10px rgba(14, 67, 241, 0.55);
}
.pricing-cta-primary:hover {
  background: #1B06DF;
  box-shadow: 0 14px 36px -10px rgba(27, 6, 223, 0.7);
}

/* Featured middle tier — brand blue border + glow */
.pricing-card-featured {
  border-color: transparent;
  background: white;
  box-shadow:
    0 0 0 2px #0E43F1,
    0 20px 60px -20px rgba(14, 67, 241, 0.55),
    0 1px 2px rgba(0,0,0,0.04);
  position: relative;
  z-index: 1;
}
.pricing-card-featured:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 2px #0E43F1,
    0 28px 72px -16px rgba(14, 67, 241, 0.65),
    0 1px 2px rgba(0,0,0,0.04);
}
.pricing-card-featured .pricing-card-inner {
  min-height: 36rem;
}
.pricing-card-featured .pricing-price {
  background: linear-gradient(180deg, rgba(14,67,241,0.06), rgba(14,67,241,0.02));
  border-color: rgba(14, 67, 241, 0.22);
}
.pricing-ribbon {
  position: absolute;
  top: -0.85rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: #0E43F1;
  color: white;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(14, 67, 241, 0.7);
  z-index: 2;
  white-space: nowrap;
}
html[dir="rtl"] .pricing-ribbon {
  transform: translateX(50%);
}

/* ===== ScrollingCards: horizontal marquee ===== */
.scroll-wall-mask {
  overflow: hidden;
  padding-block: 6px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.scroll-wall-track {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  width: max-content;
  padding-inline: 1.25rem;
  animation: scroll-wall-scroll 42s linear infinite;
  will-change: transform;
}
.scroll-wall-track:hover {
  animation-play-state: paused;
}
.scroll-wall-track:has(.scroll-card:hover) {
  animation-play-state: paused;
}
@keyframes scroll-wall-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html[dir="rtl"] .scroll-wall-track {
  animation-name: scroll-wall-scroll-rtl;
}
@keyframes scroll-wall-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-wall-track { animation: none; }
}

.scroll-card {
  flex-shrink: 0;
  width: 22rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(14, 67, 241, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 100%, rgba(27, 6, 223, 0.06) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.15 0.035 265), oklch(0.12 0.03 265));
  border: 1px solid oklch(0.28 0.03 265);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: white;
  transition:
    transform 360ms var(--ease-spring),
    border-color 280ms ease,
    box-shadow 360ms ease,
    background 420ms ease;
}
.scroll-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 48px -18px rgba(14, 67, 241, 0.45);
  background:
    radial-gradient(ellipse at 80% 10%, rgba(14, 67, 241, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(27, 6, 223, 0.16) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.17 0.055 265), oklch(0.13 0.04 265));
}
.scroll-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.scroll-card-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 67, 241, 0.14);
  border: 1px solid rgba(14, 67, 241, 0.3);
  color: oklch(0.99 0.005 265);
  transition: background 260ms ease, transform 320ms var(--ease-spring);
}
.scroll-card:hover .scroll-card-icon {
  background: linear-gradient(135deg, rgba(14, 67, 241, 0.7), rgba(27, 6, 223, 0.4));
  transform: rotate(-4deg) scale(1.05);
}
.scroll-card-tag {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.76 0.01 265);
}
.scroll-card-kpi {
  margin-inline-start: auto;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: rgba(14, 67, 241, 0.14);
  border: 1px solid rgba(14, 67, 241, 0.3);
  color: oklch(0.92 0.02 265);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.scroll-card-title {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: white;
}
.scroll-card-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: oklch(0.76 0.01 265);
  flex: 1 1 auto;
}
.scroll-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.76 0.01 265);
  transition: color 220ms ease;
}
.scroll-card:hover .scroll-card-cta {
  color: white;
}

/* ===== RichText article typography ===== */

/* Root prose wrapper */
.rich-article {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
.rich-article > * + * { margin-top: 1.2em; }

/* Headings */
.rich-article h2 {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: oklch(0.10 0.02 265);
  margin-top: 2.5em;
  margin-bottom: 0.5em;
}

.rich-article h3 {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: oklch(0.10 0.02 265);
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}
.rich-article p {
  margin-block: 1.15rem;
}
.rich-article ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.rich-article ul > li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: oklch(0.20 0.02 265);
  line-height: 1.7;
}
.rich-article ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 0.85em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #0E43F1;
  box-shadow: 0 0 10px rgba(14, 67, 241, 0.4);
}
.rich-article strong {
  color: oklch(0.10 0.02 265);
  font-weight: 600;
}
.rich-article hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 1px solid oklch(0.90 0.008 265);
}

/* Links */
.rich-article a {
  color: #0E43F1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms;
}
.rich-article a:hover { color: #1B06DF; text-decoration-thickness: 2px; }

/* Inline code */
.rich-article code:not(pre code) {
  background: rgba(14,67,241,0.08);
  color: #0E43F1;
  padding: 0.12em 0.4em;
  border-radius: 0.3em;
  font-size: 0.9em;
  font-family: var(--font-mono);
}

/* Code block */
.rich-article pre {
  background: oklch(0.14 0.03 265);
  color: rgba(255,255,255,0.95);
  padding: 1.2em;
  border-radius: 0.75rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.88em;
  line-height: 1.6;
  margin: 1.5em 0;
}

/* Ordered list (unordered already defined above) */
.rich-article ol {
  list-style: decimal;
  padding-inline-start: 1.5rem;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rich-article ol > li {
  padding-inline-start: 0.25rem;
  color: oklch(0.20 0.02 265);
  line-height: 1.7;
}

/* First paragraph emphasis — large first line */
.rich-article .first-line-emphasis::first-line,
.rich-article > p:first-of-type::first-line {
  font-weight: 600;
  color: oklch(0.10 0.02 265);
}

/* ===== Article delight: reading progress bar ===== */
[data-reading-progress] {
  transform-origin: 0 0;
  will-change: transform;
}
html[dir="rtl"] [data-reading-progress] {
  transform-origin: 100% 0;
}

/* ===== Article delight: floating TOC ===== */
.rich-toc {
  position: fixed;
  top: 6rem;
  inset-inline-end: max(1.5rem, calc((100vw - 1376px) / 2 - 14rem));
  width: 13rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 1rem;
  background: white;
  border: 1px solid oklch(0.90 0.008 265);
  border-radius: 1rem;
  box-shadow: 0 4px 24px -8px rgba(10,10,46,0.12);
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 40;
}
@media (min-width: 1024px) {
  .rich-toc { display: flex; }
}
.rich-toc-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.55 0.015 265);
  padding: 0 0.25rem 0.5rem;
  border-bottom: 1px solid oklch(0.90 0.008 265);
  margin-bottom: 0.35rem;
}
.rich-toc-link {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: oklch(0.30 0.03 265);
  text-decoration: none;
  transition: background 130ms, color 130ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rich-toc-link:hover { background: oklch(0.95 0.005 265); color: #0E43F1; }
.rich-toc-link.is-active { background: rgba(14,67,241,0.08); color: #0E43F1; font-weight: 600; }
.rich-toc-link[data-level="h3"] { padding-inline-start: 1.2rem; font-size: 0.75rem; color: oklch(0.45 0.015 265); }
.rich-toc-link[data-level="h3"].is-active { color: #0E43F1; }

/* ===== Article delight: share footer ===== */
.article-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem 2.5rem;
  border-top: 1px solid oklch(0.90 0.008 265);
  margin-top: 3rem;
  text-align: center;
}
.article-share-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: oklch(0.14 0.03 265);
}
.article-share-btns {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  align-items: flex-start;
}
.article-share-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 3.25rem;
}
.article-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 1px solid oklch(0.88 0.01 265);
  background: white;
  color: oklch(0.20 0.03 265);
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms, border-color 200ms, color 200ms,
              transform 280ms var(--ease-bounce),
              box-shadow 280ms;
}
.article-share-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  transition: transform 280ms var(--ease-bounce);
}
.article-share-btn:hover,
.article-share-btn:focus-visible {
  border-color: #0E43F1;
  color: #0E43F1;
  background: rgba(14, 67, 241, 0.06);
  transform: scale(1.15);
  box-shadow: 0 8px 24px -10px rgba(14, 67, 241, 0.4);
  outline: none;
}
.article-share-btn:active { transform: scale(1.08); }
.article-share-btn-text {
  font-size: 0.72rem;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  color: oklch(0.45 0.02 265);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease-spring),
              transform 280ms var(--ease-spring),
              color 200ms;
  pointer-events: none;
  white-space: nowrap;
}
.article-share-btn-wrap:hover .article-share-btn-text,
.article-share-btn-wrap:focus-within .article-share-btn-text {
  opacity: 1;
  transform: translateY(0);
  color: #0E43F1;
}
@media (prefers-reduced-motion: reduce) {
  .article-share-btn,
  .article-share-btn svg,
  .article-share-btn-text {
    transition: background 150ms, border-color 150ms, color 150ms, opacity 150ms;
    transform: none !important;
  }
}
.rich-quote {
  margin: 2.75rem 0;
  padding: 2.25rem 2.25rem 1.75rem;
  border-radius: 1.25rem;
  background: linear-gradient(155deg, rgba(14, 67, 241, 0.05), rgba(14, 67, 241, 0.015));
  border: 1px solid rgba(14, 67, 241, 0.14);
  position: relative;
  isolation: isolate;
}
/* Large decorative quote mark — editorial pattern, replaces the banned side stripe.
   Positioned with negative insets so it bleeds slightly outside the frame. */
.rich-quote::before {
  content: "\201D"; /* left double quote — renders mirrored in RTL via direction */
  position: absolute;
  top: -1.25rem;
  inset-inline-start: 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  line-height: 1;
  color: #0E43F1;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  font-weight: 700;
}
.rich-quote > * { position: relative; z-index: 1; }
.rich-quote blockquote { margin: 0; padding: 0; }
.rich-quote blockquote p {
  font-size: clamp(1.08rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
  color: oklch(0.15 0.02 265);
  margin: 0;
}
.rich-quote figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: oklch(0.55 0.015 265);
  text-transform: uppercase;
}

/* ===== 3D tilt (opt-in via [data-tilt]) =====
   Pointer-reactive rotateX/rotateY driven by lab.js. Variables default to 0
   so elements render flat until a mousemove sets them. Smooth return on leave. */
[data-tilt] {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transition: transform 520ms var(--ease-spring);
  will-change: transform;
}
[data-tilt].is-tilting {
  /* While actively tracking the pointer we shorten the transition so it feels
     responsive, but not instant (which would jitter on fast moves). */
  transition: transform 140ms var(--ease-apple);
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none; transition: none; }
}

/* ===== Article media: figures, video, link card ===== */
.rich-figure {
  margin: 2.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.rich-figure-frame {
  /* Natural rendering — let inline body images display at their own size.
     No fixed aspect-ratio, border, shadow, or radius: a tiny divider PNG
     should stay tiny; a wide hero should scale to the column. */
  display: block;
  text-align: center;
}
.rich-figure-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.rich-figure-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(14, 67, 241, 0.35);
}
.rich-figure-placeholder svg { stroke-width: 1.2; }
.rich-figure > figcaption {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: oklch(0.45 0.015 265);
  line-height: 1.6;
  padding-inline-start: 0.15rem;
  font-weight: 500;
}

/* Wide breakout — extends beyond prose column on large viewports */
.rich-figure--wide {
  margin: 2.75rem 0;
}
@media (min-width: 1024px) {
  .rich-figure--wide {
    margin-inline: calc(50% - 50vw + 0.5rem);
    max-width: min(1100px, calc(100vw - 3rem));
    margin-inline-start: 50%;
    transform: translateX(-50%);
  }
  html[dir="rtl"] .rich-figure--wide {
    transform: translateX(50%);
  }
  /* Wide breakout: image still renders at natural size — only the figure
     container extends beyond the prose column, the image inside is unforced. */
}

/* Video embed — poster + play button; swap in <iframe>/<video> on play */
.rich-video {
  margin: 2.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.rich-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.1rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(14, 67, 241, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(27, 6, 223, 0.2) 0%, transparent 55%),
    linear-gradient(160deg, oklch(0.18 0.06 265), oklch(0.12 0.03 265));
  border: 1px solid oklch(0.90 0.008 265);
  cursor: pointer;
  transition: transform 420ms var(--ease-spring), box-shadow 420ms ease;
  box-shadow: 0 18px 48px -24px rgba(10, 10, 46, 0.35);
}
.rich-video-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 64px -24px rgba(14, 67, 241, 0.4);
}
.rich-video-poster {
  position: absolute;
  inset: 0;
}
.rich-video-poster .rich-figure-placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.rich-video-play {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: white;
  color: #0E43F1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-inline-start: 0.35rem;
  cursor: pointer;
  border: 0;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.12),
    0 20px 40px -12px rgba(14, 67, 241, 0.6);
  transition: transform 320ms var(--ease-spring), background 220ms ease, color 220ms ease;
}
html[dir="rtl"] .rich-video-play {
  transform: translate(50%, -50%) scaleX(-1);
}
.rich-video-frame:hover .rich-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #0E43F1;
  color: white;
}
html[dir="rtl"] .rich-video-frame:hover .rich-video-play {
  transform: translate(50%, -50%) scale(1.08) scaleX(-1);
}
.rich-video-meta {
  position: absolute;
  bottom: 0.85rem;
  inset-inline-start: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  background: rgba(8, 8, 24, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}
.rich-video > figcaption {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: oklch(0.45 0.015 265);
  font-weight: 500;
  line-height: 1.6;
}

/* Link card — OG-preview style, replaces bare underlined links for external references */
.rich-linkcard,
.rich-article a.rich-linkcard,
.rich-linkcard * {
  text-decoration: none !important;
}

.rich-linkcard {
  display: grid;
  grid-template-columns: 1fr 8rem;
  gap: 1.25rem;
  align-items: stretch;
  margin: 2rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: 1.1rem;
  background: white;
  border: 1px solid oklch(0.90 0.008 265);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 40px -28px rgba(10, 10, 46, 0.2);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform 360ms var(--ease-spring),
    border-color 280ms ease,
    box-shadow 360ms ease,
    background 320ms ease;
}
.rich-linkcard:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 67, 241, 0.35);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 54px -22px rgba(14, 67, 241, 0.35);
  background: linear-gradient(155deg, rgba(14, 67, 241, 0.025), white 45%);
}
.rich-linkcard-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.rich-linkcard-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: oklch(0.45 0.015 265);
  flex-wrap: wrap;
}
.rich-linkcard-favicon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.95 0.01 265);
  border: 1px solid oklch(0.90 0.008 265);
  color: #0E43F1;
  transition: background 280ms ease, border-color 280ms ease, color 280ms ease;
}
.rich-linkcard:hover .rich-linkcard-favicon {
  background: #0E43F1;
  border-color: #0E43F1;
  color: white;
}
.rich-linkcard-favicon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}
.rich-linkcard-site {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: oklch(0.35 0.015 265);
  font-weight: 600;
}
.rich-linkcard-dot {
  color: oklch(0.72 0.01 265);
}
.rich-linkcard-tag {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0E43F1;
  font-weight: 600;
}
.rich-linkcard-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: oklch(0.10 0.02 265);
  line-height: 1.35;
  margin: 0;
}
.rich-linkcard:hover .rich-linkcard-title {
  color: #0E43F1;
}
.rich-linkcard-desc {
  font-size: 0.88rem;
  color: oklch(0.38 0.015 265);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rich-linkcard-thumb {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(14, 67, 241, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, oklch(0.94 0.015 265), oklch(0.88 0.02 265));
  border: 1px solid oklch(0.90 0.008 265);
  min-height: 5.5rem;
}
.rich-linkcard-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rich-linkcard-arrow {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 0.9rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: oklch(0.95 0.01 265);
  color: oklch(0.35 0.015 265);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 280ms ease, color 280ms ease, transform 320ms var(--ease-spring);
}
html[dir="rtl"] .rich-linkcard-arrow i {
  transform: scaleX(-1);
}
.rich-linkcard:hover .rich-linkcard-arrow {
  background: #0E43F1;
  color: white;
  transform: translate(-3px, -3px);
}
html[dir="rtl"] .rich-linkcard:hover .rich-linkcard-arrow {
  transform: translate(3px, -3px);
}
@media (max-width: 640px) {
  .rich-linkcard {
    grid-template-columns: 1fr;
  }
  .rich-linkcard-thumb {
    order: -1;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* ============================================================
   Additional components (round 6): LogoStrip, StatsBand,
   Testimonial, Comparison, CtaBanner, Footer.
   All reuse the existing token palette — no new colors introduced.
   ============================================================ */

/* ===== LogoStrip ===== */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: stretch;
  border-top: 1px solid oklch(0.90 0.008 265);
  border-bottom: 1px solid oklch(0.90 0.008 265);
  padding-block: 1.5rem;
}
@media (min-width: 640px) { .logo-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px){ .logo-strip { grid-template-columns: repeat(8, 1fr); gap: 0.5rem; } }
.logo-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  border-inline-end: 1px solid oklch(0.92 0.008 265);
  /* Logos render in their full brand colour at rest. The previous
     greyscale treatment turned partner logos into unreadable silhouettes
     (UX QA P1). Slight desaturation softens visual chaos without
     erasing brand identity. */
  filter: saturate(0.9) opacity(0.92);
  transition: filter 320ms ease, transform 320ms var(--ease-spring);
}
.logo-strip-item img {
  max-height: 2.25rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.logo-strip-item:last-child { border-inline-end: 0; }
@media (max-width: 1023px) {
  .logo-strip-item:nth-child(4n) { border-inline-end: 0; }
}
@media (max-width: 639px) {
  .logo-strip-item:nth-child(2n) { border-inline-end: 0; }
}
.logo-strip-item:hover {
  filter: saturate(1) opacity(1);
  transform: translateY(-2px);
}

/* Edge-fade mask on the rail itself — logos closest to the section
   edges fade out like an Apple Stores marquee, drawing the eye to the
   centre of the row. Mask only kicks in at >= 640px where multiple
   logos are visible side-by-side. */
@media (min-width: 640px) {
  .logo-strip {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  }
}

/* ===== StatsBand ===== */
.stats-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid oklch(0.28 0.03 265);
  border-bottom: 1px solid oklch(0.28 0.03 265);
}
@media (min-width: 1024px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stat-item {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  transition: background 320ms ease;
}
.stat-item + .stat-item { border-inline-start: 1px solid oklch(0.28 0.03 265); }
@media (max-width: 1023px) {
  .stat-item:nth-child(2n) { border-inline-start: 1px solid oklch(0.28 0.03 265); }
  .stat-item:nth-child(2n+1) { border-inline-start: 0; }
  .stat-item:nth-child(n+3) { border-top: 1px solid oklch(0.28 0.03 265); }
}
.stat-item:hover {
  background: linear-gradient(180deg, rgba(14, 67, 241, 0.08), transparent);
}
.stat-mono {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: oklch(0.55 0.015 265);
  font-weight: 600;
}
.stat-value {
  font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: white;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 1rem;
  font-weight: 500;
  color: white;
  line-height: 1.4;
}
.stat-sub {
  font-size: 0.82rem;
  color: oklch(0.72 0.01 265);
}

/* ===== Testimonial ===== */
.testimonial-card {
  max-width: 58rem;
  margin: 0 auto;
  padding: 2.5rem 2.5rem 2rem;
  border-radius: 1.75rem;
  background: white;
  border: 1px solid oklch(0.90 0.008 265);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 28px 70px -28px rgba(10, 10, 46, 0.18);
  position: relative;
  isolation: isolate;
}
.tst-quote-mark {
  position: absolute;
  top: -1.5rem;
  inset-inline-start: 1.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  line-height: 1;
  color: #0E43F1;
  opacity: 0.16;
  font-weight: 700;
  z-index: 0;
}
.tst-body {
  position: relative;
  z-index: 1;
  margin: 0 0 2rem;
}
.tst-body p {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.75;
  font-weight: 500;
  color: oklch(0.12 0.02 265);
  margin: 0;
  letter-spacing: -0.005em;
}
.tst-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(0.92 0.008 265);
  position: relative;
  z-index: 1;
}
.tst-person {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.tst-avatar {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(14, 67, 241, 0.2) 0%, transparent 55%),
    linear-gradient(160deg, oklch(0.94 0.015 265), oklch(0.88 0.02 265));
  border: 1px solid oklch(0.90 0.008 265);
}
.tst-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tst-avatar .rich-figure-placeholder { color: rgba(14, 67, 241, 0.35); }
.tst-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: oklch(0.10 0.02 265);
  letter-spacing: -0.005em;
}
.tst-role {
  font-size: 0.82rem;
  color: oklch(0.45 0.015 265);
  margin-top: 0.15rem;
}
.tst-company {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-radius: 9999px;
  background: oklch(0.96 0.01 265);
  border: 1px solid oklch(0.92 0.008 265);
}
.tst-company-mark {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: oklch(0.16 0.09 265);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tst-company-logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  object-fit: contain;
  background: white;
  padding: 0.15rem;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== Final CTA — optional companion image (LTR: right, RTL: left) ===== */
.cta-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-image {
  width: 100%;
  max-width: 28rem;
  height: auto;
  border-radius: 1.25rem;
  object-fit: cover;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55);
}
.tst-company-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: oklch(0.20 0.02 265);
}

/* ===== Comparison table ===== */
.cmp-table-wrap {
  border-radius: 1.25rem;
  overflow-x: auto;
  border: 1px solid oklch(0.92 0.008 265);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 20px 50px -30px rgba(10, 10, 46, 0.15);
  background: white;
}
.cmp-table {
  width: 100%;
  min-width: 58rem;
  border-collapse: separate;
  border-spacing: 0;
  text-align: start;
}
.cmp-table thead tr { background: oklch(0.97 0.008 265); }
.cmp-table th,
.cmp-table td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
}
.cmp-table th {
  font-weight: 600;
  font-size: 0.88rem;
  border-bottom: 1px solid oklch(0.92 0.008 265);
}
.cmp-col-feature {
  width: 36%;
  color: oklch(0.20 0.02 265);
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  color: oklch(0.45 0.015 265) !important;
}
.cmp-head-us,
.cmp-head-them {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}
.cmp-head-them { color: oklch(0.35 0.015 265); }
/* Match the Resal header's name size/weight so all three columns align
   vertically on the same baseline. */
.cmp-head-them > span:first-child {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: oklch(0.25 0.02 265);
  line-height: 1.2;
}
.cmp-head-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0E43F1;
  line-height: 1.2;
}
.cmp-head-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: #0E43F1;
  box-shadow: 0 0 0 3px rgba(14, 67, 241, 0.18);
  flex-shrink: 0;
}
.cmp-head-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: oklch(0.55 0.015 265);
  letter-spacing: 0;
  text-transform: none;
}
.cmp-table tbody tr { transition: background 220ms ease; }
.cmp-table tbody tr:hover { background: oklch(0.98 0.008 265); }
.cmp-table tbody td {
  border-bottom: 1px solid oklch(0.94 0.008 265);
  font-size: 0.95rem;
  color: oklch(0.20 0.02 265);
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-feature {
  font-weight: 500;
  color: oklch(0.12 0.02 265);
}
.cmp-cell {
  vertical-align: middle;
  width: 21%;
  font-size: 0.88rem;
  line-height: 1.4;
  color: oklch(0.35 0.015 265);
}
.cmp-cell-us {
  background: rgba(14, 67, 241, 0.05);
}
.cmp-table tbody tr:hover .cmp-cell-us {
  background: rgba(14, 67, 241, 0.08);
}

.cmp-val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.cmp-val-us {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: oklch(0.12 0.02 265);
}
.cmp-val-tick {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 9999px;
  background: #0E43F1;
  color: white;
  box-shadow: 0 4px 10px -4px rgba(14, 67, 241, 0.55);
}
.cmp-val-empty {
  color: oklch(0.75 0.01 265);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Category group header rows */
.cmp-group-row { background: oklch(0.98 0.008 265); }
.cmp-table tbody .cmp-group-row:hover { background: oklch(0.98 0.008 265); }
.cmp-group-cell {
  padding: 1rem 1.25rem !important;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.40 0.015 265);
  font-weight: 600;
  border-top: 1px solid oklch(0.92 0.008 265);
  border-bottom: 1px solid oklch(0.94 0.008 265) !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cmp-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: rgba(14, 67, 241, 0.1);
  color: #0E43F1;
}
/* First group row sits flush under the thead — suppress the top border. */
.cmp-table tbody tr:first-child .cmp-group-cell { border-top: 0; }

/* ===== CTA Banner ===== */
.cta-banner-inner {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

/* ===== Footer ===== */
#footer { margin-top: 0; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid oklch(0.28 0.03 265);
}
@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.1fr 1.9fr;
    gap: 4rem;
  }
}

.footer-brand { max-width: 28rem; }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: white;
}
.footer-logo-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, #0E43F1, #1B06DF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 10px 28px -12px rgba(14, 67, 241, 0.6);
}
.footer-logo-word {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.footer-tagline {
  margin-top: 1.25rem;
  color: oklch(0.72 0.01 265);
  line-height: 1.7;
  font-size: 0.92rem;
  max-width: 32ch;
}
.footer-newsletter { margin-top: 1.75rem; }
/* Pixel-perfect button alignment via absolute positioning + fixed wrapper height.
   The button is centred against the wrapper (not the input's intrinsic line-box),
   so placeholder font metrics, locale, and zoom level cannot drift it off-axis. */
.footer-newsletter-field {
  position: relative;
  display: block;
  height: 3.5rem;                   /* 56px — locks vertical geometry; fits 44px button + 6px inset top/bottom */
  background: oklch(0.13 0.03 265);
  border: 1px solid oklch(0.28 0.03 265);
  border-radius: 9999px;
  transition: border-color 240ms ease, background 240ms ease;
}
.footer-newsletter-field:focus-within {
  border-color: rgba(14, 67, 241, 0.5);
  background: oklch(0.15 0.04 265);
}
.footer-newsletter-field input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: white;
  font-size: 0.92rem;
  /* Reserve space for the absolutely-positioned button: 2.75rem button width
     + 0.375rem inset + 0.5rem visual breathing = 3.625rem. */
  padding-inline-start: 1.1rem;
  padding-inline-end: 3.625rem;
  min-width: 0;
}
/* Suppress global :focus-visible rectangle — container shows focus via :focus-within */
.footer-newsletter-field input:focus,
.footer-newsletter-field input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.footer-newsletter-field input::placeholder { color: oklch(0.60 0.015 265); }
.footer-newsletter-btn {
  /* WCAG 2.5.5 / 2.5.8 minimum tap target — 44×44 (Apple HIG / WCAG AA). */
  position: absolute;
  top: 50%;
  inset-inline-end: 0.375rem;       /* 6px logical inset — RTL-safe, matches top/bottom inset */
  transform: translateY(-50%);
  width: 2.75rem;                   /* 44px */
  height: 2.75rem;
  border-radius: 9999px;
  background: #0E43F1;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition: background 220ms ease, transform 320ms var(--ease-apple);
}
.footer-newsletter-btn:hover {
  background: #1B06DF;
  transform: translateY(-50%) translateX(-2px);
}
html[dir="rtl"] .footer-newsletter-btn:hover { transform: translateY(-50%) translateX(2px); }
.footer-newsletter-note {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: oklch(0.60 0.015 265);
  line-height: 1.6;
}
.footer-newsletter-status {
  margin-top: 0.6rem;
  min-height: 1em;
  font-size: 0.78rem;
  line-height: 1.5;
  color: oklch(0.72 0.015 265);
  transition: color 200ms ease;
}
.footer-newsletter-status:empty { display: none; }
.footer-newsletter-status[data-state="working"] { color: oklch(0.78 0.018 265); }
.footer-newsletter-status[data-state="success"]  { color: oklch(0.82 0.16 152); }
.footer-newsletter-status[data-state="already"]  { color: oklch(0.78 0.10 90); }
.footer-newsletter-status[data-state="invalid"],
.footer-newsletter-status[data-state="rate"],
.footer-newsletter-status[data-state="error"]    { color: oklch(0.78 0.16 25); }

/* ===== Inline newsletter card (mid-article) ===== */
.inline-newsletter-card {
  margin: 3.5rem 0;
  padding: 2rem 1.5rem 1.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(155deg, rgba(14, 67, 241, 0.07) 0%, rgba(14, 67, 241, 0.015) 70%);
  border: 1px solid rgba(14, 67, 241, 0.18);
  position: relative;
}
.inline-newsletter-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 67, 241, 0.10) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 20%, transparent 80%);
  pointer-events: none;
  opacity: 0.45;
}
.inline-newsletter-card > * { position: relative; z-index: 1; }
.inline-newsletter-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0E43F1;
  margin: 0 0 0.5rem;
}
.inline-newsletter-heading {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: oklch(0.14 0.03 265);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.inline-newsletter-sub {
  color: oklch(0.40 0.02 265);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.inline-newsletter-form { margin: 0; }
/* Pixel-perfect button alignment: absolute-positioned button against a fixed-height
   wrapper. Centre is geometric (top:50% / translateY(-50%)) so it cannot drift
   with input intrinsic height, font metrics, locale, or zoom. */
.inline-newsletter-field {
  position: relative;
  display: block;
  height: 3.5rem;                   /* 56px — locks geometry; fits 44px button + 6px inset top/bottom */
  background: white;
  border: 1px solid rgba(14, 67, 241, 0.18);
  border-radius: 9999px;
  transition: border-color 200ms, box-shadow 200ms;
}
.inline-newsletter-field:focus-within {
  border-color: #0E43F1;
  box-shadow: 0 0 0 4px rgba(14, 67, 241, 0.12);
}
.inline-newsletter-field input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: oklch(0.16 0.03 265);
  /* Reserve space for the absolutely-positioned button. Button is auto-width
     (text + icon), so we use a generous reserve. The button's inset-inline-end
     is 0.375rem; padding pushes input text clear of the button shape. */
  padding-inline-start: 1.25rem;
  padding-inline-end: 7.5rem;
  min-width: 0;
}
.inline-newsletter-field input:focus,
.inline-newsletter-field input:focus-visible { outline: none; box-shadow: none; }
.inline-newsletter-field input::placeholder { color: oklch(0.58 0.02 265); }
.inline-newsletter-field button {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.375rem;       /* 6px logical inset — RTL-safe */
  transform: translateY(-50%);
  height: 2.75rem;                  /* 44px tap target — WCAG 2.5.5 / Apple HIG */
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0;
  padding-inline: 1.25rem;
  border-radius: 9999px;
  border: 0;
  background: #0E43F1;
  color: white;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  /* Match the site's primary CTA convention: deepens to #1B06DF on hover,
     same as .pricing-cta-primary. */
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  box-shadow: 0 6px 18px -8px rgba(14, 67, 241, 0.5);
}
.inline-newsletter-field button:hover,
.inline-newsletter-field button:focus-visible {
  background: #1B06DF;
  box-shadow: 0 10px 24px -8px rgba(27, 6, 223, 0.55);
  outline: none;
}
.inline-newsletter-field button:active { transform: translateY(-50%) scale(0.98); }
.inline-newsletter-arrow { transition: transform 220ms ease; }
/* Move the arrow toward the inline-end on hover regardless of writing direction. */
.inline-newsletter-field button:hover .inline-newsletter-arrow {
  transform: translateX(-3px);
}
html[dir="ltr"] .inline-newsletter-field button:hover .inline-newsletter-arrow {
  transform: translateX(3px);
}
.inline-newsletter-status {
  margin: 0.6rem 0 0 0;
  margin-inline-start: 0.6rem;
  min-height: 1em;
  font-size: 0.8rem;
  line-height: 1.5;
  color: oklch(0.45 0.02 265);
}
.inline-newsletter-status:empty { display: none; }
.inline-newsletter-status[data-state="success"] { color: oklch(0.55 0.16 152); }
.inline-newsletter-status[data-state="already"] { color: oklch(0.55 0.10 90); }
.inline-newsletter-status[data-state="invalid"],
.inline-newsletter-status[data-state="rate"],
.inline-newsletter-status[data-state="error"]  { color: oklch(0.55 0.18 25); }

/* ===== Blog search input ===== */
.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 520px;
  padding: 0.65rem 1rem 0.65rem 1.1rem;
  border-radius: 9999px;
  background: oklch(0.97 0.005 265);
  border: 1px solid oklch(0.90 0.008 265);
  transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
.blog-search:focus-within {
  border-color: #0E43F1;
  background: white;
  box-shadow: 0 0 0 4px rgba(14, 67, 241, 0.10);
}
.blog-search-icon { color: oklch(0.55 0.02 265); flex-shrink: 0; }
.blog-search input {
  flex: 1;
  border: 0;
  outline: 0;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: oklch(0.16 0.03 265);
  min-width: 0;
}
.blog-search input:focus,
.blog-search input:focus-visible { outline: none; box-shadow: none; }
.blog-search input::placeholder { color: oklch(0.58 0.02 265); }
.blog-search input::-webkit-search-cancel-button,
.blog-search input::-webkit-search-decoration,
.blog-search input::-webkit-search-results-button,
.blog-search input::-webkit-search-results-decoration { display: none; }
.blog-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9999px;
  border: 0;
  background: oklch(0.92 0.008 265);
  color: oklch(0.40 0.02 265);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.blog-search-clear:hover { background: #0E43F1; color: white; }
@media (prefers-reduced-motion: reduce) {
  .footer-newsletter-status { transition: none; }
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col-title {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.60 0.015 265);
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer-col a {
  /* Touch-target floor — 2.5rem (40px) sits a hair under WCAG 2.5.5's 44px
     guideline; Master tuned this down for visual density. The hit-area still
     covers the full row, just slimmer than Apple HIG's 44px ideal. */
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: oklch(0.85 0.008 265);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 220ms ease;
  position: relative;
}
.footer-col a:hover { color: white; }
.footer-col a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: #0E43F1;
  vertical-align: middle;
  margin-inline-end: 0;
  transition: width 280ms var(--ease-spring), margin-inline-end 280ms ease;
}
.footer-col a:hover::before {
  width: 0.85rem;
  margin-inline-end: 0.5rem;
}

.footer-wordmark {
  margin-top: 3.5rem;
  font-size: clamp(3rem, 2rem + 8vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
  padding-block: 0.08em;
  text-align: center;
  color: rgba(255, 255, 255, 0.06);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid oklch(0.22 0.03 265);
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; }
}
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: oklch(0.60 0.015 265);
}
.footer-legal-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.82rem;
}
.footer-legal-links a {
  color: oklch(0.80 0.008 265);
  text-decoration: none;
  transition: color 220ms ease;
}
.footer-legal-links a:hover { color: white; }
.footer-legal-links span { color: oklch(0.40 0.015 265); }
.footer-cookie-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: oklch(0.80 0.008 265);
  cursor: pointer;
  text-decoration: none;
  transition: color 220ms ease;
}
.footer-cookie-trigger:hover { color: white; }
.footer-cookie-trigger:focus-visible {
  outline: 2px solid #0e43f1;
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

/* Locale toggle — AR | EN with hover-underline sliding under the active slot */
.footer-locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
.footer-locale-link {
  position: relative;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: oklch(0.60 0.015 265);
  text-decoration: none;
  transition: color 220ms ease, background 220ms ease;
}
.footer-locale-link.is-active {
  color: white;
  background: rgba(255,255,255,0.1);
}
.footer-locale-link:not(.is-active):hover { color: white; }
.footer-locale-link:not(.is-active)::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.15rem;
  height: 1px;
  background: #0E43F1;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms var(--ease-spring);
}
.footer-locale-link:not(.is-active):hover::after { transform: scaleX(1); }
.footer-locale-sep {
  width: 1px;
  height: 0.9rem;
  background: rgba(255,255,255,0.15);
}

.footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 0.6rem;
}
.footer-social a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid oklch(0.28 0.03 265);
  color: oklch(0.72 0.01 265);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 280ms var(--ease-spring);
}
.footer-social a:hover {
  background: rgba(14, 67, 241, 0.14);
  border-color: rgba(14, 67, 241, 0.5);
  color: white;
  transform: translateY(-2px);
}

/* ============================================================
   NEW COMPONENTS — Phase 2 promotion
   Added 2026-04-22
   ============================================================ */

/* ── Hero icon (shared by legal-page-hero & contact-hero) ──────
   Starting state (before .icon-in is added by lab.js).
   The base rotation is applied by the parallax utility at runtime;
   these rules set the entrance animation keyframe start/end.        */
.hero-icon {
  opacity: 0;
  transform: rotate(-15deg) scale(0.85);
  transform-origin: center;
  transition:
    opacity 1100ms var(--ease-spring),
    transform 1400ms var(--ease-spring);
}
.hero-icon.icon-in {
  opacity: 0.35;
  transform: rotate(-15deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-icon {
    transition: opacity 300ms linear;
  }
  .hero-icon.icon-in { opacity: 0.35; }
}

/* ── PDPL badge atom ────────────────────────────────────────── */
.pdpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0E43F1;
  background: rgba(14, 67, 241, 0.07);
  border: 1px solid rgba(14, 67, 241, 0.18);
  border-radius: 0.4rem;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.5rem;
}

/* ── legal-doc-layout: TOC + prose ─────────────────────────── */
.toc-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  color: oklch(0.24 0.04 265);
  text-decoration: none;
  transition:
    background 280ms var(--ease-apple),
    color      280ms var(--ease-apple),
    padding    280ms var(--ease-apple);
}
.toc-link::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 1.1rem;
  border-radius: 999px;
  background: #0E43F1;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 320ms var(--ease-apple);
  pointer-events: none;
}
.toc-link:hover { background: oklch(0.90 0.008 265); color: #0E43F1; }
.toc-link.is-active {
  background: rgba(14, 67, 241, 0.08);
  color: #0E43F1;
  font-weight: 600;
  padding-inline-start: 1rem;
}
.toc-link.is-active::before { transform: translateY(-50%) scaleY(1); }
.toc-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: oklch(0.55 0.015 265);
  min-width: 1.8rem;
  transition: color 280ms var(--ease-apple);
}
.toc-link.is-active .toc-num { color: #0E43F1; }

.legal-prose h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: oklch(0.10 0.02 265);
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid oklch(0.90 0.008 265);
}
.legal-prose p,
.legal-prose li {
  font-size: 0.97rem;
  line-height: 1.85;
  color: oklch(0.24 0.04 265);
}
.legal-prose ul {
  list-style: disc;
  padding-right: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.legal-prose li { margin-bottom: 0.3rem; }
.legal-prose a { color: #0E43F1; }
.legal-prose a:hover { text-decoration: underline; }

/* ── contact-split layout ───────────────────────────────────── */
.contact-split {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  width: 100%;
}
.contact-split__form { flex: 1 1 0%; min-width: 0; }
.contact-split__info { width: 100%; }
@media (min-width: 720px) {
  .contact-split { flex-direction: row; }
  .contact-split__info { width: 340px; flex-shrink: 0; flex-grow: 0; }
}

/* contact-info rows */
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid oklch(0.90 0.008 265);
}
.contact-row:last-child { border-bottom: none; }
.contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-label {
  font-size: 0.75rem;
  color: oklch(0.55 0.015 265);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.contact-value {
  font-size: 0.97rem;
  font-weight: 600;
  color: oklch(0.10 0.02 265);
}
.contact-value a { color: inherit; transition: color 120ms; }
.contact-value a:hover { color: #0E43F1; }

/* focus rings for new components */
.toc-link:focus-visible {
  outline: 2px solid #0E43F1;
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* ── Tag-bubble colour variants ──────────────────────────────
   Base `.tag-bubble` (layout, padding, font, dot) is defined in
   tokens.css. This block is variant-only — do not redefine the base
   here or the two definitions will fight. */
.tag-bubble-blue {
  background: rgba(14, 67, 241, 0.10);
  color: #0E43F1;
  border-color: rgba(14, 67, 241, 0.25);
}
.tag-bubble-teal {
  background: rgba(0, 217, 166, 0.12);
  color: oklch(0.55 0.18 170);
  border-color: rgba(0, 217, 166, 0.30);
}
.tag-bubble-dark {
  background: oklch(0.93 0.008 265);
  color: oklch(0.14 0.03 265);
  border-color: oklch(0.85 0.01 265);
}
.tag-bubble-light {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
.tag-bubble-hot {
  background: linear-gradient(135deg, rgba(14,67,241,0.2), rgba(0,217,166,0.15));
  color: #ffffff;
  border-color: rgba(14,67,241,0.35);
}

/* ── Auto-inverse: tags adapt to their section's theme ──────────────────
   Safety net — if a `tag-bubble-light` lands on a light section (wrong
   by default), it's silently re-styled as a dark pill so text stays
   readable. Same for `tag-bubble-dark` on a dark section.
   Works across any parent with `data-theme-section="light|dark"` or the
   common bg utility classes (white/paper).                              */
[data-theme-section="light"] .tag-bubble-light,
section.bg-white .tag-bubble-light,
section[class*="bg-paper"] .tag-bubble-light {
  background: oklch(0.93 0.008 265);
  color: oklch(0.14 0.03 265);
  border-color: oklch(0.85 0.01 265);
}

[data-theme-section="dark"] .tag-bubble-dark,
section.bg-ink-0 .tag-bubble-dark,
section[class*="bg-ink"] .tag-bubble-dark {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── Blog card cover — GPU-composited clip so image zoom never flashes ── */
.blog-card-cover {
  position: relative;
  border-radius: 0; /* top rounding comes from parent article's overflow-hidden */
  overflow: hidden;
  transform: translateZ(0);   /* promote to compositor layer */
  isolation: isolate;
}
.blog-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms var(--ease-spring);
  will-change: transform;
}
.blog-card:hover .blog-card-cover-img {
  transform: scale(1.04);
}

/* Blog filter — FLIP animation grid cells */
/* Entry/exit animation is handled entirely via inline JS transitions */
.blog-card-gridcell {}