/* ============================================================
   MERCURIUM V2 — Design System
   Light-first · Clean · Bento Grid · Compliance AI
   ============================================================ */

/* ── 0. FONTS ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Mercurium';
  src: url('/static/fonts/mercurium_fonts/MercuriumFont-light.woff') format('woff'),
       url('/static/fonts/mercurium_fonts/MercuriumFont-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mercurium';
  src: url('/static/fonts/mercurium_fonts/MercuriumFont-Regular.woff') format('woff'),
       url('/static/fonts/mercurium_fonts/MercuriumFont-Regular.otf') format('opentype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mercurium';
  src: url('/static/fonts/mercurium_fonts/MercuriumFont-Boldsubset.woff') format('woff'),
       url('/static/fonts/mercurium_fonts/MercuriumFont-Boldsubset.otf') format('opentype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  --bg-base:        #F8FAFC;    /* light grey page bg */
  --bg-surface:     #FFFFFF;    /* panels / cards */
  --bg-card:        #FFFFFF;
  --bg-glass:       rgba(255,255,255,0.88);
  --bg-glass-light: rgba(248,250,252,0.9);

  --accent-1:       #6366F1;   /* indigo */
  --accent-2:       #8B5CF6;   /* violet */
  --accent-gold:    #F59E0B;   /* amber */
  --accent-green:   #10B981;   /* emerald */
  --accent-red:     #EF4444;
  --accent-cyan:    #06B6D4;

  --border-dim:     rgba(15,23,42,0.08);
  --border-accent:  rgba(99,102,241,0.4);
  --glow-indigo:    rgba(99,102,241,0.18);
  --glow-violet:    rgba(139,92,246,0.14);

  --text-1:   #0F172A;   /* near-black */
  --text-2:   #334155;
  --text-3:   #64748B;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;

  --shadow-card:   0 4px 24px rgba(15,23,42,0.08);
  --shadow-glow:   0 0 40px rgba(99,102,241,0.14);
  --shadow-glow-lg:0 0 100px rgba(99,102,241,0.10);

  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Mercurium', 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-xl, .display-lg, .display-md,
.v2-nav-logo, .footer-brand-name {
  font-family: 'Mercurium', 'Inter', system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */
.display-xl {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.display-lg {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.display-md {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
}
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
}
.lead { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--text-2); line-height: 1.75; }

.gradient-text,
.gradient-text span {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
.gradient-text-green {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 4. LAYOUT ──────────────────────────────────────────────── */
.container-v2 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1400px) { .container-v2 { max-width: 1360px; } }

.section { padding: 100px 0; position: relative; }
.section-sm { padding: 64px 0; }

/* ── 5. NAVBAR ──────────────────────────────────────────────── */
.v2-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  transition: background var(--transition), box-shadow var(--transition);
}
.v2-nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border-dim), 0 4px 16px rgba(15,23,42,0.06);
}
.v2-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.v2-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}
.v2-nav-logo__img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.v2-nav-logo__text { line-height: 1; }
.v2-nav-logo__text > span { color: var(--accent-1); }
.v2-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.v2-nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--transition);
}
.v2-nav-links a:hover { color: var(--text-1); }
.v2-nav-cta { display: flex; align-items: center; gap: 12px; }
.v2-nav-login {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--transition);
}
.v2-nav-login:hover { color: var(--text-1); }
.v2-nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-1);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
}
@media (max-width: 900px) {
  .v2-nav-links { display: none; }
  .v2-nav-mobile-toggle { display: block; }
  .v2-nav-login { display: none; }
}

/* ── Mobile drawer ── */
.v2-mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
@media (max-width: 900px) {
  .v2-mobile-drawer { display: block; pointer-events: none; }
  .v2-mobile-drawer.is-open { pointer-events: auto; }
}
.v2-mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.50);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.v2-mobile-drawer.is-open .v2-mobile-drawer__backdrop { opacity: 1; }

.v2-mobile-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(380px, 88%);
  background: #fff;
  box-shadow: -20px 0 60px rgba(15,23,42,0.22);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.v2-mobile-drawer.is-open .v2-mobile-drawer__panel { transform: translateX(0); }

.v2-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.v2-mobile-drawer__close {
  background: #f1f5f9;
  border: none;
  color: #0f172a;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-mobile-drawer__close:hover { background: #e2e8f0; }

.v2-mobile-drawer__nav { padding: 14px 16px; flex: 1 1 auto; }

.v2-mobile-drawer__top {
  display: block;
  padding: 14px 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s;
}
.v2-mobile-drawer__top:hover, .v2-mobile-drawer__top:focus {
  background: rgba(99,102,241,0.06);
  color: var(--accent-1);
}

.v2-mobile-drawer__group { border-radius: 12px; margin-bottom: 4px; }
.v2-mobile-drawer__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
}
.v2-mobile-drawer__group > summary::-webkit-details-marker { display: none; }
.v2-mobile-drawer__group > summary:hover { background: rgba(99,102,241,0.06); }
.v2-mobile-drawer__group > summary i {
  transition: transform 0.2s;
  font-size: 0.8rem;
  color: #94a3b8;
}
.v2-mobile-drawer__group[open] > summary i { transform: rotate(180deg); }

.v2-mobile-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  text-decoration: none;
  color: #1e293b;
  border-radius: 10px;
  transition: background 0.15s;
}
.v2-mobile-drawer__item:hover, .v2-mobile-drawer__item:focus {
  background: rgba(99,102,241,0.06);
}
.v2-mobile-drawer__item > i {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(99,102,241,0.08);
  color: var(--accent-1);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v2-mobile-drawer__item-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}
.v2-mobile-drawer__item-sub {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.35;
}

.v2-mobile-drawer__foot {
  padding: 18px 22px 24px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}
.v2-mobile-drawer__signin {
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-2);
  text-decoration: none;
  padding: 8px;
}
.v2-mobile-drawer__signin:hover { color: var(--text-1); }

/* ── 6. BUTTONS ─────────────────────────────────────────────── */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 14px;
  font-size: 0.925rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  white-space: nowrap;
}
.btn-v2-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 24px rgba(99,102,241,0.4);
}
.btn-v2-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(99,102,241,0.5);
  color: #fff;
}
.btn-v2-outline {
  background: transparent;
  color: var(--text-1);
  border: 1.5px solid var(--border-dim);
}
.btn-v2-outline:hover {
  border-color: var(--border-accent);
  background: var(--bg-glass-light);
  color: var(--text-1);
}
.btn-v2-sm { padding: 8px 20px; font-size: 0.85rem; }

/* ── 7. GLASS CARDS ─────────────────────────────────────────── */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
  border-color: var(--border-accent);
}
.glass-card-glow {
  position: relative;
  overflow: hidden;
}
.glass-card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity var(--transition);
}
.glass-card-glow:hover::before { opacity: 1; }

/* ── 7b. SECTION HEADER HELPERS ─────────────────────────────── */
.section-intro { margin-bottom: 0; }
.section-header { margin-top: 16px; }
.section-divider {
  width: 60px;
  height: 3px;
  margin: 20px auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.text-center .section-divider { margin-left: auto; margin-right: auto; }

/* Alternating section backgrounds */
.section-alt { background: #F1F5F9; }

/* ── 8. SECTION CHIP ────────────────────────────────────────── */
.section-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 20px;
}

/* ── 9. HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
}

/* Mesh gradient background */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(99,102,241,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139,92,246,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 80%, rgba(16,185,129,0.08) 0%, transparent 50%),
    var(--bg-base);
}

/* Animated grid */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
}

/* Floating orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
  pointer-events: none;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
  top: -100px; left: -150px;
  animation: float1 12s ease-in-out infinite;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,92,246,0.14), transparent 70%);
  bottom: -80px; right: -100px;
  animation: float2 15s ease-in-out infinite;
}
.hero-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(16,185,129,0.10), transparent 70%);
  top: 40%; right: 20%;
  animation: float3 18s ease-in-out infinite;
}

@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(40px,-30px) scale(1.08);} 66%{transform:translate(-20px,20px) scale(0.95);} }
@keyframes float2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,25px);} }
@keyframes float3 { 0%,100%{transform:translate(0,0);} 40%{transform:translate(20px,-20px);} }

.hero-content { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 28px;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.6;transform:scale(1.4);} }

.hero-headline { margin-bottom: 24px; }
.hero-headline .line-2 { display: block; }

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-2);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.hero-trust {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-trust-text { font-size: 0.8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.hero-trust-logos {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-trust-logo {
  padding: 6px 16px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-card);
}

/* Node graph visual (legacy SVG — kept for backwards compat with non-3d hero) */
.hero-visual:not(.hero-3d) {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 580px;
  height: 480px;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 1200px) { .hero-visual:not(.hero-3d) { display: none; } }

/* ── 3D Hero — layered platform showcase stack ── */
.hero-3d {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 620px;
  z-index: 1;
  pointer-events: none;
  perspective: 2200px;
  perspective-origin: 60% 50%;
}
@media (max-width: 1280px) { .hero-3d { right: -200px; opacity: 0.55; } }
@media (max-width: 1024px) { .hero-3d { display: none; } }

.hero-3d__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.hero-3d__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  z-index: 0;
}
.hero-3d__glow--purple {
  width: 420px; height: 420px;
  top: 60px; right: 80px;
  background: radial-gradient(circle, rgba(168,85,247,0.55), transparent 60%);
  animation: hero3dGlow 8s ease-in-out infinite;
}
.hero-3d__glow--blue {
  width: 360px; height: 360px;
  bottom: 40px; left: 40px;
  background: radial-gradient(circle, rgba(59,130,246,0.45), transparent 60%);
  animation: hero3dGlow 10s ease-in-out infinite reverse;
}
@keyframes hero3dGlow {
  0%, 100% { transform: scale(1);   opacity: 0.45; }
  50%      { transform: scale(1.12); opacity: 0.6; }
}

/* Each layer is an absolutely-positioned platform showcase frame.
   Kept as simple as possible: one transform variable driven by a two-stop
   keyframe per layer + a cheap opacity fade-in. No filter: blur, no
   mix-blend-mode, no compound transforms — rock-solid on every browser. */
.hero-3d__layer {
  position: absolute;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 90px -25px rgba(15,23,42,0.40),
              0 12px 28px -8px rgba(15,23,42,0.20),
              inset 0 0 0 1px rgba(255,255,255,0.6);
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-3d__layer * { pointer-events: none !important; }

/* BACK — workflow canvas, largest, deepest */
.hero-3d__layer--back {
  top: 30px; right: 40px;
  width: 620px; height: 380px;
  opacity: 1;
  transform: translate3d(0, 0, -180px) rotateX(10deg) rotateY(-22deg);
  animation: hero3dFloatBack 8s ease-in-out infinite;
  z-index: 1;
}
@keyframes hero3dFloatBack {
  0%, 100% { transform: translate3d(0, 0,    -180px) rotateX(10deg) rotateY(-22deg); }
  50%      { transform: translate3d(0, -18px,-180px) rotateX(10deg) rotateY(-22deg); }
}

/* MID — document intelligence */
.hero-3d__layer--mid {
  top: 220px; left: 0;
  width: 520px; height: 340px;
  opacity: 1;
  transform: translate3d(0, 0, -40px) rotateX(8deg) rotateY(-18deg);
  animation: hero3dFloatMid 10s ease-in-out infinite;
  z-index: 2;
}
@keyframes hero3dFloatMid {
  0%, 100% { transform: translate3d(0, 0,    -40px) rotateX(8deg) rotateY(-18deg); }
  50%      { transform: translate3d(0, -22px,-40px) rotateX(8deg) rotateY(-18deg); }
}

/* FRONT — background checks, smallest, most prominent */
.hero-3d__layer--front {
  top: 110px; right: -30px;
  width: 380px; height: 380px;
  opacity: 1;
  transform: translate3d(0, 0, 60px) rotateX(6deg) rotateY(-12deg);
  animation: hero3dFloatFront 7s ease-in-out infinite;
  z-index: 3;
}
@keyframes hero3dFloatFront {
  0%, 100% { transform: translate3d(0, 0,    60px) rotateX(6deg) rotateY(-12deg); }
  50%      { transform: translate3d(0, -14px,60px) rotateX(6deg) rotateY(-12deg); }
}

/* Light shimmer sweep — pure transform+opacity on a pseudo element.
   No mix-blend-mode (that was the fragile bit), no filter, no compound
   transforms. Just a diagonal highlight sliding across each layer. */
.hero-3d__layer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0) 65%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  animation: hero3dShimmer 6s ease-in-out infinite;
}
.hero-3d__layer--back::after  { animation-duration: 8s;  animation-delay: 1s; }
.hero-3d__layer--mid::after   { animation-duration: 10s; animation-delay: 3.5s; }
.hero-3d__layer--front::after { animation-duration: 7s;  animation-delay: 5.2s; }
@keyframes hero3dShimmer {
  0%, 35% { transform: translateX(0);    opacity: 0; }
  45%     { opacity: 1; }
  70%     { transform: translateX(280%); opacity: 0.8; }
  72%, 100% { transform: translateX(280%); opacity: 0; }
}

/* Respect users who prefer reduced motion — no animation, just the final state */
@media (prefers-reduced-motion: reduce) {
  .hero-3d__layer,
  .hero-3d__glow--purple,
  .hero-3d__glow--blue { animation: none !important; }
}

.hero-3d__pill {
  position: absolute;
  bottom: 0; left: 60px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.01em;
  z-index: 4;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(15,23,42,0.30);
  transform: translateZ(120px);
  animation: hero3dPillPulse 4s ease-in-out infinite;
}
.hero-3d__pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: hero3dDotPulse 1.8s infinite;
}
@keyframes hero3dPillPulse {
  0%, 100% { transform: translateZ(120px) translateY(0); }
  50%      { transform: translateZ(120px) translateY(-6px); }
}
@keyframes hero3dDotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}

/* Hover the hero region — bring the stack forward and straighten slightly */
.hero:hover .hero-3d__layer--back  { transform: translateZ(-140px) rotateY(-18deg) rotateX(8deg); }
.hero:hover .hero-3d__layer--mid   { transform: translateZ(-20px)  rotateY(-14deg) rotateX(6deg); }
.hero:hover .hero-3d__layer--front { transform: translateZ(80px)   rotateY(-8deg)  rotateX(4deg); }
.hero:hover .hero-3d__layer        { animation-play-state: paused; }

/* ============================================================
   TECHNOLOGY PAGE (page_technology.html)
   ============================================================ */
.tech-hero {
  padding: 140px 0 60px;
  text-align: center;
  background: radial-gradient(900px 400px at 50% 0%, rgba(99,102,241,0.10), transparent 60%),
              radial-gradient(700px 300px at 30% 60%, rgba(168,85,247,0.06), transparent 70%);
}
.tech-hero__inner { max-width: 860px; margin: 0 auto; }
.tech-hero__title { margin: 18px 0 16px; line-height: 1.1; }
.tech-hero__sub   { max-width: 680px; margin: 0 auto; }

.tech-section { padding: 40px 0 80px; }
.tech-stack { display: flex; flex-direction: column; gap: 80px; }

.tech-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99,102,241,0.14);
  padding: 72px 64px;
  box-shadow: 0 40px 80px -30px rgba(15,23,42,0.16),
              0 12px 24px -10px rgba(15,23,42,0.06);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s;
}
.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 50px 100px -30px rgba(15,23,42,0.22),
              0 16px 32px -10px rgba(15,23,42,0.08);
}

.tech-card__aurora {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  animation: techAurora 14s ease-in-out infinite;
  z-index: 0;
}
.tech-card__aurora--red   { background: radial-gradient(circle, rgba(239,68,68,0.16),  transparent 60%); right: auto; left: -10%; }
.tech-card__aurora--green { background: radial-gradient(circle, rgba(34,197,94,0.18),  transparent 60%); top: 50%; }
@keyframes techAurora {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}

.tech-card__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  z-index: 1;
}
.tech-card__grid--reverse { direction: rtl; }
.tech-card__grid--reverse > * { direction: ltr; }

.tech-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99,102,241,0.10);
  color: #4338ca;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(99,102,241,0.22);
  margin-bottom: 22px;
}
.tech-card__chip--red   { background: rgba(239,68,68,0.10);  color: #b91c1c; border-color: rgba(239,68,68,0.22); }
.tech-card__chip--green { background: rgba(34,197,94,0.10);  color: #15803d; border-color: rgba(34,197,94,0.22); }

.tech-card__title { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; font-weight: 800; margin: 0 0 22px; color: #0f172a; }
.tech-card__body  { font-size: 1.05rem; line-height: 1.75; color: var(--text-2); margin-bottom: 28px; }

.tech-card__capabilities {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.tech-card__capabilities > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-1);
  line-height: 1.55;
}
.tech-card__capabilities i {
  color: #22c55e;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.tech-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.tech-card__metrics > div { display: flex; flex-direction: column; align-items: flex-start; }
.tech-card__metric-value {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tech-card__metric-label {
  font-size: 0.78rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
  font-weight: 600;
}

.tech-card__visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(15,23,42,0.20),
              0 8px 20px -8px rgba(15,23,42,0.10),
              inset 0 0 0 1px rgba(255,255,255,0.5);
  background: #fff;
  transform: perspective(2400px) rotateY(-8deg) rotateX(4deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tech-card__grid--reverse .tech-card__visual { transform: perspective(2400px) rotateY(8deg) rotateX(4deg); }
.tech-card:hover .tech-card__visual { transform: perspective(2400px) rotateY(0) rotateX(0); }
.tech-card__visual * { pointer-events: none !important; }

/* Emma chat mock */
.tech-chat {
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tech-chat__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  color: #fff;
}
.tech-chat__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.tech-chat__dot:nth-child(1) { background: #ef4444; }
.tech-chat__dot:nth-child(2) { background: #f59e0b; }
.tech-chat__dot:nth-child(3) { background: #22c55e; }
.tech-chat__title {
  margin-left: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.85;
}
.tech-chat__msg {
  padding: 14px 18px;
  margin: 10px 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  border-radius: 14px;
  max-width: 85%;
}
.tech-chat__msg--user {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  align-self: flex-end;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.tech-chat__msg--emma {
  background: #f1f5f9;
  color: #1e293b;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.tech-chat__tool {
  margin: 4px 26px;
  padding: 8px 14px;
  background: rgba(99,102,241,0.08);
  color: #4338ca;
  font-size: 0.78rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.tech-chat__tool--done { background: rgba(34,197,94,0.10); color: #15803d; margin-bottom: 18px; }
.tech-chat__tool i { animation: techPulse 1.6s ease-in-out infinite; }
.tech-chat__tool--done i { animation: none; }
@keyframes techPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (max-width: 960px) {
  .tech-card { padding: 48px 28px; border-radius: 24px; }
  .tech-card__grid, .tech-card__grid--reverse { grid-template-columns: 1fr; gap: 36px; direction: ltr; }
  .tech-card__visual { transform: none !important; }
  .tech-card__metrics { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
}

/* Compact down the inner showcase content so they fit each layer's frame */
.hero-3d__layer--back .sc-workflow { min-height: 0; height: 100%; border-radius: 18px; }
.hero-3d__layer--back .sc-workflow__canvas { height: calc(100% - 92px); }

.hero-3d__layer--mid .sc-docintel { min-height: 0; height: 100%; border-radius: 18px; grid-template-columns: 1.3fr 1fr; }
.hero-3d__layer--mid .sc-docintel__doc, .hero-3d__layer--mid .sc-docintel__panel { padding: 16px 18px; }
.hero-3d__layer--mid .sc-docintel__page { font-size: 0.72rem; padding: 14px 16px; }
.hero-3d__layer--mid .sc-docintel__line { margin-bottom: 8px; }

.hero-3d__layer--front .sc-bgcheck { min-height: 0; height: 100%; padding: 18px 20px; border-radius: 18px; }
.hero-3d__layer--front .sc-bgcheck__rows { gap: 6px; }
.hero-3d__layer--front .sc-bgcheck__row { padding: 10px 12px; }
.hero-3d__layer--front .sc-bgcheck__row-title { font-size: 0.78rem; }
.hero-3d__layer--front .sc-bgcheck__row-sub   { font-size: 0.66rem; }


.node-graph { width: 100%; height: 100%; }
.node-graph .node-box {
  rx: 12px; ry: 12px;
  fill: rgba(255,255,255,0.9);
  stroke: rgba(99,102,241,0.3);
  stroke-width: 1;
}
.node-graph .node-box-active {
  fill: rgba(99,102,241,0.08);
  stroke: rgba(99,102,241,0.5);
}
.node-graph .conn { stroke: url(#connGrad); stroke-width: 1.5; fill: none; stroke-dasharray: 6 4; animation: dashFlow 3s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -20; } }
.node-graph text { fill: #64748B; font-family: monospace; font-size: 11px; }
.node-graph .label { fill: #0F172A; font-size: 12px; font-weight: 600; }
.node-graph .badge { fill: rgba(99,102,241,0.8); rx: 4px; }
.node-graph .badge-text { fill: #fff; font-size: 9px; font-weight: 700; }

/* ── 10. STATS BAR ──────────────────────────────────────────── */
.stats-bar {
  background: #F1F5F9;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
  padding: 40px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.stat-item {
  padding: 20px 32px;
  border-right: 1px solid var(--border-dim);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-value {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-desc { font-size: 0.75rem; color: var(--text-3); }
.stat-icon { font-size: 1.4rem; margin-bottom: 10px; color: var(--accent-1); }

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border-dim); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--border-dim); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .stat-item { border-right: none !important; } }

/* ── 11. PROBLEM SECTION ────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (min-width: 1200px) { .problem-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (max-width: 720px)  { .problem-grid { grid-template-columns: 1fr; } }
.problem-card {
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.problem-card .problem-icon { margin-left: auto; margin-right: auto; }
.problem-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-red), #F97316);
}
.problem-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.12);
}
.problem-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--accent-red);
  margin-bottom: 20px;
}
.problem-audience {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 12px;
}
.problem-spend {
  font-size: 0.95rem;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 4px;
  padding: 8px 16px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 50px;
  display: inline-block;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 12px rgba(245,158,11,0.10);
}
.problem-spend-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
  margin-bottom: 18px;
  display: block;
}
.problem-challenge {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.65;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,0.06);
}

/* ── 12. WORKFLOW SECTION ───────────────────────────────────── */
.workflow-canvas {
  margin-top: 56px;
  padding: 48px 40px;
  background: #FFFFFF;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-xl);
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.workflow-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(99,102,241,0.06), transparent 70%);
  pointer-events: none;
}
.workflow-steps-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
}
.workflow-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.workflow-node-box {
  width: 100%;
  max-width: 180px;
  padding: 20px 16px;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  border: 1.5px solid rgba(99,102,241,0.25);
  box-shadow: 0 2px 12px rgba(15,23,42,0.07);
  position: relative;
  transition: all var(--transition);
}
.workflow-node-box:hover {
  border-color: var(--accent-1);
  box-shadow: 0 0 32px rgba(99,102,241,0.25);
  transform: translateY(-3px);
}
.workflow-node-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  margin: 0 auto 12px;
}
.workflow-step-num {
  position: absolute;
  top: -10px; right: -10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workflow-node-title { font-size: 0.8rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.workflow-node-desc { font-size: 0.7rem; color: var(--text-3); line-height: 1.45; }

/* Arrow connector */
.workflow-connector {
  display: flex;
  align-items: center;
  padding-top: 30px;
  min-width: 32px;
  flex: 0 0 auto;
}
.workflow-connector-line {
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  position: relative;
}
.workflow-connector-line::after {
  content: '';
  position: absolute;
  right: -5px; top: -4px;
  border: 5px solid transparent;
  border-left-color: var(--accent-2);
}

@media (max-width: 900px) {
  .workflow-steps-row { flex-direction: column; gap: 16px; }
  .workflow-connector { display: none; }
  .workflow-node-box { max-width: 100%; }
}

/* ── 13. TECHNOLOGY BENTO GRID ──────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 20px;
  margin-top: 56px;
}
.bento-cell {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bento-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
  border-color: var(--border-accent);
}
.bento-cell.wide { grid-column: span 2; }
.bento-cell.tall { grid-row: span 2; }

.bento-cell::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-1), transparent 70%);
  opacity: 0.06;
  pointer-events: none;
}
.bento-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.1));
  border: 1px solid rgba(99,102,241,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--accent-1);
  margin-bottom: 20px;
}
.bento-metric {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  color: var(--accent-green);
  margin-bottom: 14px;
}
.bento-title { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 10px; }
.bento-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bento-cell.wide { grid-column: span 2; }
  .bento-cell.tall { grid-row: span 1; }
  .bento-cell { padding: 24px; }
}
@media (max-width: 580px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-cell.wide { grid-column: span 1; }
}

/* ── 14. PRODUCTS ───────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.product-card {
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(15,23,42,0.10), var(--shadow-glow);
}
.product-card-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.accent-indigo .product-card-accent-bar { background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); }
.accent-violet .product-card-accent-bar { background: linear-gradient(90deg, var(--accent-2), #A78BFA); }
.accent-emerald .product-card-accent-bar { background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan)); }

.product-icon-wrap {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 24px;
}
.accent-indigo .product-icon-wrap { background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.1)); color: var(--accent-1); }
.accent-violet .product-icon-wrap { background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(167,139,250,0.1)); color: var(--accent-2); }
.accent-emerald .product-icon-wrap { background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(6,182,212,0.1)); color: var(--accent-green); }

.product-name { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.product-tagline { font-size: 1.3rem; font-weight: 700; color: var(--text-1); margin-bottom: 14px; }
.product-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; margin-bottom: 28px; }
.product-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-dim);
}
.product-stat-value { font-size: 1.3rem; font-weight: 800; display: block; margin-bottom: 2px; }
.product-stat-label { font-size: 0.75rem; color: var(--text-3); }

@media (max-width: 900px) { .products-grid { grid-template-columns: 1fr; } }

/* ── 15. USE CASES ──────────────────────────────────────────── */
.usecases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.usecase-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  display: flex;
  gap: 20px;
  transition: transform var(--transition), border-color var(--transition);
}
.usecase-card:hover { transform: translateY(-3px); border-color: var(--border-accent); }
.usecase-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.usecase-client {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 6px;
}
.usecase-headline { font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: 10px; }
.usecase-body { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; }
.usecase-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-green);
  padding: 4px 12px;
  background: rgba(16,185,129,0.08);
  border-radius: 50px;
  border: 1px solid rgba(16,185,129,0.2);
}

@media (max-width: 768px) { .usecases-grid { grid-template-columns: 1fr; } }

/* ── 16. TEAM ───────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.team-card {
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.team-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity var(--transition);
}
.team-card:hover::before { opacity: 1; }
.team-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0 auto 20px;
  overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-name { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 4px; }
.team-role {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.team-bio { font-size: 0.83rem; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.team-socials { display: flex; justify-content: center; gap: 12px; }
.team-social-link {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass-light);
  border: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-3);
  transition: all var(--transition);
}
.team-social-link:hover { color: var(--accent-1); border-color: var(--border-accent); }

@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .team-grid { grid-template-columns: 1fr; } }

/* ── 17. PRICING ────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  align-items: start;
}
.pricing-card {
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  position: relative;
  transition: transform var(--transition);
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.featured {
  background: linear-gradient(160deg, rgba(99,102,241,0.1), rgba(139,92,246,0.06));
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 0 60px rgba(99,102,241,0.15);
}
.pricing-featured-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  white-space: nowrap;
}
.pricing-name { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 10px; }
.pricing-price { font-size: 2.2rem; font-weight: 800; color: var(--text-1); line-height: 1; margin-bottom: 4px; }
.pricing-period { font-size: 0.8rem; color: var(--text-3); margin-bottom: 6px; }
.pricing-setup { font-size: 0.75rem; color: var(--accent-gold); margin-bottom: 20px; }
.pricing-desc { font-size: 0.85rem; color: var(--text-2); margin-bottom: 24px; min-height: 44px; }
.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--text-2);
}
.pricing-features li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2310B981' d='M13.7 4.3a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4L7 9.6l5.3-5.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-top: 2px;
}

@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ── 18. CTA SECTION ────────────────────────────────────────── */
.cta-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 30% 50%, rgba(99,102,241,0.2), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(139,92,246,0.15), transparent 55%),
    var(--bg-surface);
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.cta-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 32px auto 0;
}
.cta-input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 50px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border-dim);
  color: var(--text-1);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}
.cta-input::placeholder { color: var(--text-3); }
.cta-input:focus { border-color: var(--border-accent); }
@media (max-width: 580px) { .cta-form { flex-direction: column; } }

/* ── 19. FOOTER ─────────────────────────────────────────────── */
.v2-footer {
  background: #0F172A;
  border-top: none;
  padding: 64px 0 32px;
  color: #94A3B8;
}
.v2-footer .footer-brand-desc { color: #64748B; }
.v2-footer .footer-col-title  { color: #64748B; }
.v2-footer .footer-links a    { color: #475569; }
.v2-footer .footer-links a:hover { color: #F1F5F9; }
.v2-footer .footer-bottom     { border-top-color: rgba(255,255,255,0.06); color: #475569; }
.v2-footer .footer-bottom-links a { color: #475569; }
.v2-footer .footer-bottom-links a:hover { color: #F1F5F9; }
.v2-footer .team-social-link  { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); color: #64748B; }
.v2-footer .team-social-link:hover { color: var(--accent-1); border-color: var(--border-accent); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-name { font-size: 1.3rem; font-weight: 800; margin-bottom: 14px; }
.footer-brand-name span { color: var(--accent-1); }
.footer-brand-desc { font-size: 0.85rem; color: var(--text-3); line-height: 1.65; max-width: 280px; }
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.875rem; color: var(--text-3); transition: color var(--transition); }
.footer-links a:hover { color: var(--text-1); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: var(--text-3); transition: color var(--transition); }
.footer-bottom-links a:hover { color: var(--text-1); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── 20. PRODUCT DEMO SECTION ───────────────────────────────── */
.demo-section {
  background: #F8FAFC;
  position: relative;
}

/* ── Tab list ── */
.demo-tab-list {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #F1F5F9;
  padding: 6px;
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 28px;
  flex-wrap: wrap;
}
.demo-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
  font-family: inherit;
}
.demo-tab-btn:hover { color: var(--accent-1); background: rgba(99,102,241,0.06); }
.demo-tab-btn.active {
  background: #fff;
  color: var(--accent-1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

/* ── Tab panels ── */
.demo-panel { display: none; }
.demo-panel.active { display: block; }

/* ── Canvas (WorkflowAI tab) ── */
.demo-canvas-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14);
  border: 1px solid rgba(99,102,241,0.18);
}
.demo-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(10,18,40,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.demo-canvas-toolbar-left { display: flex; align-items: center; }
.demo-canvas-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  color: #94A3B8;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.demo-canvas-toolbar-right { display: flex; gap: 6px; }
.demo-canvas-btn {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #94A3B8;
  font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.demo-canvas-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.demo-canvas {
  position: relative;
  height: 380px;
  background:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(116,235,213,0.07) 0%, transparent 50%),
    linear-gradient(214deg, #1a1a4a 0%, #26246A 43%, #6b2a5c 75%, #A52F69 100%);
  background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%;
  overflow: hidden;
}

.demo-canvas-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.demo-connector {
  fill: none;
  stroke: rgba(116,235,213,0.45);
  stroke-width: 1.8;
  stroke-dasharray: 7 4;
  animation: dashFlow 1.8s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -22; } }

/* Floating nodes */
.demo-node {
  position: absolute;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  width: 168px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.32);
  animation: nodeAppear 0.55s ease both;
  overflow: hidden;
}
.demo-node:nth-child(3) { animation-delay: 0.08s; }
.demo-node:nth-child(4) { animation-delay: 0.16s; }
.demo-node:nth-child(5) { animation-delay: 0.24s; }
.demo-node:nth-child(6) { animation-delay: 0.32s; }
.demo-node:nth-child(7) { animation-delay: 0.40s; }

@keyframes nodeAppear {
  from { opacity: 0; transform: scale(0.82) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.demo-node-title {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.demo-node-title.green  { background: linear-gradient(135deg, #059669, #10B981); }
.demo-node-title.red    { background: linear-gradient(135deg, #DC2626, #EF4444); }
.demo-node-title.teal   { background: linear-gradient(135deg, #0891B2, #06B6D4); }
.demo-node-title.yellow { background: linear-gradient(135deg, #D97706, #F59E0B); }
.demo-node-title.indigo { background: linear-gradient(135deg, #4F46E5, #6366F1); }
.demo-node-body {
  padding: 7px 12px 9px;
  font-size: 0.71rem;
  color: rgba(255,255,255,0.66);
}

.demo-canvas-legend {
  display: flex;
  gap: 24px;
  padding: 14px 24px;
  background: rgba(10,18,40,0.98);
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.76rem;
  color: #94A3B8;
  flex-wrap: wrap;
}
.demo-canvas-legend span { display: flex; align-items: center; gap: 7px; }

/* ── Old Node UI panels (tabs 2-4) — REMOVED, replaced by demo-node-card system ── */
/* The old .demo-node-ui / .demo-wf-card / .demo-toggle / .demo-callout classes
   conflicted with the new card system. Keeping only the tab-btn and tab-panel
   layout that the tab switcher still needs. */

/* DELETED: .demo-node-ui through .demo-callout-amber — see git history if needed */

/* Tab-panel responsive kept: */
._removed_demo_node_ui_placeholder {display:none;}

/* ── OLD BLOCK DELETED — everything from .demo-node-ui-inner through
   .demo-callout-amber was removed because the HTML it styled was replaced
   by the new .demo-node-card system. See git history. ── */

/* ── Placeholder: skip to section 21 ── */
._old_demo_block_end {display:none;}
/* Old demo panel CSS removed — replaced by .demo-node-card system below */

.demo-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ── Nav dropdown (Use Cases) ── */
.v2-nav-dropdown {
  position: relative;
  display: inline-flex;
  /* Padding extends the hover area downward to bridge the 10px gap to the menu */
  padding-bottom: 12px;
  margin-bottom: -12px;
}
.v2-nav-dropdown-btn {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.v2-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 340px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(15,23,42,0.14), 0 2px 8px rgba(15,23,42,0.06);
  padding: 8px;
  z-index: 1000;
  animation: navDropIn 0.2s ease;
}
/* Invisible bridge above the menu to catch the cursor between trigger and menu */
.v2-nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.v2-nav-dropdown:hover .v2-nav-dropdown-menu,
.v2-nav-dropdown:focus-within .v2-nav-dropdown-menu {
  display: block;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.v2-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  transition: background 0.15s ease;
}
.v2-nav-dropdown-item:hover {
  background: rgba(99,102,241,0.06);
}
.v2-nav-dropdown-item i {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(99,102,241,0.08);
}
.v2-nav-dropdown-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
}
.v2-nav-dropdown-sub {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   USE CASES PAGE — premium visual product showcase
   ════════════════════════════════════════════════════════════════════════ */

.uc-page { padding-bottom: 80px; }

/* ── Tabs ── */
.uc-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.uc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: #fff;
  font-family: 'Mercurium', sans-serif !important;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.uc-tab span { font-family: 'Mercurium', sans-serif !important; }
.uc-tab i { font-size: 1rem; }
.uc-tab:hover {
  border-color: #6366f1;
  color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.15);
}
.uc-tab.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}

.uc-panel { display: none; }
.uc-panel.active { display: block; animation: ucFadeIn 0.4s ease; }
@keyframes ucFadeIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* ── Hero v2 — full-width gradient banner ── */
.uc-hero-v2 {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 48px 40px;
  margin-bottom: 48px;
  min-height: 180px;
  display: flex;
  align-items: center;
}
.uc-hero-v2__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 60%, #6d28d9 100%);
  z-index: 0;
}
.uc-hero-v2__gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(139,92,246,0.2) 0%, transparent 60%);
}
.uc-hero-v2__content { position: relative; z-index: 1; }
.uc-hero-v2__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.8);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
}
.uc-hero-v2__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.uc-hero-v2__subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  line-height: 1.6;
}

/* ── Flow headline (between hero and steps) ── */
.uc-flow-headline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.uc-flow-headline__line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
}
.uc-flow-headline__text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  text-align: center;
}

/* ── Steps — alternating left/right product showcase ── */
.uc-steps {
  max-width: 1100px;
  margin: 0 auto;
}

.uc-step-v2 {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 32px;
  margin-bottom: 64px;
  align-items: center;
}
.uc-step-v2--flip {
  grid-template-columns: 60px 1fr 1fr;
}
.uc-step-v2--flip .uc-step-v2__text { order: 2; }
.uc-step-v2--flip .uc-step-v2__visual { order: 1; }

@media (max-width: 768px) {
  .uc-step-v2 {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }
  .uc-step-v2__visual { grid-column: 2; margin-top: 16px; }
  .uc-step-v2--flip .uc-step-v2__text { order: unset; }
  .uc-step-v2--flip .uc-step-v2__visual { order: unset; }
}

/* Connector (number + vertical line) */
.uc-step-v2__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
.uc-step-v2__number {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.uc-step-v2__line {
  width: 3px;
  flex: 1;
  background: linear-gradient(180deg, #8b5cf6, #c4b5fd, #e2e8f0);
  border-radius: 3px;
  margin-top: 8px;
}

/* Text side */
.uc-step-v2__text { min-width: 0; }
.uc-step-v2__label {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.12));
  color: #6366f1;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  border: 1px solid rgba(99,102,241,0.15);
}
.uc-step-v2__heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.3;
}
.uc-step-v2__body {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.7;
}
.uc-step-v2__body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.uc-step-v2__body p {
  margin: 0 0 10px;
}
.uc-step-v2__body ul {
  padding-left: 20px;
  margin: 8px 0 0;
  list-style: none;
}
.uc-step-v2__body li {
  position: relative;
  padding-left: 8px;
  margin-bottom: 6px;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
}
.uc-step-v2__body li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #8b5cf6;
}
.uc-step-v2__note {
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 8px;
  font-style: italic;
}

/* Visual / image side */
.uc-step-v2__visual { min-width: 0; }
.uc-step-v2__img-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(15,23,42,0.12),
    0 4px 12px rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.06);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  position: relative;
}
.uc-step-v2__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  pointer-events: none;
}
.uc-step-v2__img-wrap:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 28px 60px rgba(99,102,241,0.15),
    0 8px 20px rgba(15,23,42,0.08);
}
.uc-step-v2__img {
  width: 100%;
  display: block;
}

.uc-step-v2__img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  border-radius: 20px;
  border: 2px dashed rgba(99,102,241,0.2);
  background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(139,92,246,0.05));
  color: #94a3b8;
  font-size: 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}
.uc-step-v2__img-placeholder i { font-size: 2rem; opacity: 0.4; }
.uc-step-v2__img-placeholder:hover {
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.06);
  color: #6366f1;
}

/* Add step button area */
.uc-add-step {
  text-align: center;
  padding: 20px 0 40px;
}

/* ── 21. SCROLL REVEAL ANIMATIONS ──────────────────────────── */
/* By default, reveal elements are fully visible — prevents FOUC when JS
   hasn't loaded yet. The .js-reveal class is set synchronously in <head>
   if JS is available, which re-arms the hidden initial state. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
html.js-reveal .reveal:not(.revealed) {
  opacity: 0;
  transform: translateY(28px);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ── 21. DIVIDER ────────────────────────────────────────────── */
.section-divider {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  border-radius: 2px;
  margin: 20px 0 0;
}
.section-header { margin-bottom: 16px; }
.section-intro { max-width: 620px; }

/* ── 22. MISC UTILITIES ─────────────────────────────────────── */
.text-center { text-align: center; }
.text-center .section-intro { margin: 0 auto; }
.text-center .section-divider { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── 23. DRAWFLOW DEMO CANVAS ───────────────────────────────── */

/* Override drawflow canvas for the demo */
#demo-drawflow {
  width: 100%;
  height: 540px;
  background:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px),
    #F8FAFC;
  background-size: 30px 30px, 30px 30px;
  border-radius: 0;
}
#demo-drawflow .drawflow-node {
  background: #fff;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 0;
  width: 280px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
#demo-drawflow .drawflow-node.selected {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 8px 30px rgba(99,102,241,0.15);
}
#demo-drawflow .drawflow-node .input,
#demo-drawflow .drawflow-node .output {
  width: 14px; height: 14px;
  background: #fff;
  border: 2px solid #6366F1;
  border-radius: 50%;
  top: 50%;
}
#demo-drawflow .drawflow-node .input  { left: -8px; }
#demo-drawflow .drawflow-node .output { right: -8px; }
#demo-drawflow .connection .main-path {
  stroke: #6366F1;
  stroke-width: 2.5px;
  stroke-dasharray: 8 5;
  animation: dashFlow 1.8s linear infinite;
}

/* Drawflow node title boxes */
#demo-drawflow .df-title {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  cursor: grab;
}
#demo-drawflow .df-title:active { cursor: grabbing; }
#demo-drawflow .df-title::after {
  content: '';
  position: absolute;
  top: -40px; right: -30px;
  width: 90px; height: 90px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  pointer-events: none;
}
#demo-drawflow .df-title-icon { font-size: 1.4rem; }
#demo-drawflow .df-title-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: dfShimmer 3s infinite;
}
@keyframes dfShimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(200%) rotate(45deg); }
}

/* Title colour variants */
#demo-drawflow .df-red    { background: linear-gradient(135deg, #EF5350 0%, #D32F2F 100%); }
#demo-drawflow .df-green  { background: linear-gradient(135deg, #66BB6A 0%, #388E3C 100%); }
#demo-drawflow .df-yellow { background: linear-gradient(135deg, #FFCA28 0%, #FFA000 100%); }
#demo-drawflow .df-indigo { background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); }

/* Node body */
#demo-drawflow .df-body {
  padding: 14px 16px 16px;
  font-family: 'Mercurium', 'Inter', system-ui, sans-serif;
}
#demo-drawflow .df-label {
  text-align: center;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94A3B8;
  margin-bottom: 10px;
}

/* Workflow cards inside nodes */
#demo-drawflow .df-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
#demo-drawflow .df-card-row.df-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
#demo-drawflow .df-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
#demo-drawflow .df-card.active,
#demo-drawflow .df-card:hover { border-color: #6366F1; background: rgba(99,102,241,0.05); }
#demo-drawflow .df-card.disabled { opacity: 0.45; cursor: not-allowed; }
#demo-drawflow .df-card-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: #fff;
  margin-bottom: 5px;
}
#demo-drawflow .df-card-lbl { font-size: 0.66rem; font-weight: 600; color: #374151; line-height: 1.3; }
#demo-drawflow .df-card-soon { font-size: 0.6rem; color: #94A3B8; }

/* Card icon gradients */
#demo-drawflow .df-amber   { background: linear-gradient(135deg, #D97706, #F59E0B); }
#demo-drawflow .df-purple  { background: linear-gradient(135deg, #7C3AED, #8B5CF6); }
#demo-drawflow .df-person  { background: linear-gradient(135deg, #f093fb, #f5576c); }
#demo-drawflow .df-company { background: linear-gradient(135deg, #667eea, #764ba2); }
#demo-drawflow .df-social  { background: linear-gradient(135deg, #8B5CF6, #6366F1); }
#demo-drawflow .df-news    { background: linear-gradient(135deg, #EF4444, #DC2626); }
#demo-drawflow .df-db      { background: linear-gradient(135deg, #3B82F6, #2563EB); }

/* Settings rows inside nodes */
#demo-drawflow .df-settings {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
}
#demo-drawflow .df-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #E2E8F0;
}
#demo-drawflow .df-row:last-child { border-bottom: none; }
#demo-drawflow .df-row-title { font-size: 0.72rem; font-weight: 600; color: #1E293B; }
#demo-drawflow .df-row-sub   { font-size: 0.63rem; color: #64748B; margin-top: 1px; }

/* Inline toggle */
#demo-drawflow .df-tog {
  width: 34px; height: 19px;
  background: #CBD5E1;
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
#demo-drawflow .df-tog::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: left 0.2s;
}
#demo-drawflow .df-tog.df-on { background: #10B981; }
#demo-drawflow .df-tog.df-on::after { left: 17px; }

/* Drag sidebar */
.demo-df-wrap {
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(15,23,42,0.08);
}
.demo-df-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #E2E8F0;
}
.demo-df-toolbar-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; color: #0F172A;
}
.demo-df-toolbar-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 50px;
  font-size: 0.68rem; font-weight: 700; color: #059669;
}
.demo-df-nodes {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.demo-df-node-drag {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-size: 0.77rem; font-weight: 600; color: #374151;
  cursor: grab;
  transition: all 0.2s;
  white-space: nowrap;
  user-select: none;
}
.demo-df-node-drag:hover { border-color: #6366F1; background: rgba(99,102,241,0.05); color: #6366F1; }
.demo-df-node-drag i { font-size: 0.9rem; }

/* ── 24. INLINEEDIT INTEGRATION ─────────────────────────────── */
/* Ensure inline edit controls blend with dark theme */
.inlineedit-wrapper { display: inline; position: relative; }
.inlineedit-wrapper .inlineedit-btn {
  background: rgba(99,102,241,0.15) !important;
  border: 1px solid rgba(99,102,241,0.3) !important;
  border-radius: 6px !important;
  color: var(--accent-1) !important;
}
.inlineedit-controls-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ── 25. HERO MINI (sub-page banner) ───────────────────────── */
.hero-mini {
  position: relative;
  overflow: hidden;
  padding: 120px 0 64px;
  background: linear-gradient(160deg, #F8FAFC 0%, #EEF2FF 60%, #F8FAFC 100%);
  border-bottom: 1px solid var(--border-dim);
}
.hero-mini-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-3);
  margin-bottom: 20px;
}
.hero-mini-breadcrumb a {
  color: var(--accent-1);
  text-decoration: none;
  font-weight: 500;
}
.hero-mini-breadcrumb a:hover { text-decoration: underline; }
.hero-mini-breadcrumb .bi { font-size: 0.65rem; }
.hero-mini-title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-1);
}
.hero-mini-sub {
  max-width: 620px;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}
.hero-mini-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-mini-orb-1 {
  width: 360px; height: 360px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(99,102,241,0.09), transparent 70%);
}
.hero-mini-orb-2 {
  width: 200px; height: 200px;
  bottom: -60px; left: 10%;
  background: radial-gradient(circle, rgba(16,185,129,0.07), transparent 70%);
}

/* ── 26. PRODUCT DETAIL PAGE ────────────────────────────────── */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 40px; }
}
.product-detail-desc {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-2);
  margin-bottom: 28px;
}
.product-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.product-feature-list li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.95rem;
  color: var(--text-2);
}
.product-feature-list li:last-child { border-bottom: none; }
.product-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.product-stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: 'Mercurium', 'Inter', sans-serif;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.product-stat-label {
  font-size: 0.85rem;
  color: var(--text-3);
  margin-top: 4px;
}
.product-detail-callout {
  background: linear-gradient(135deg, #EEF2FF 0%, #F0FDF4 100%);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  margin-top: 8px;
}

/* ── 27. CONTACT PAGE ───────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: start;
}
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
.contact-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow-card);
}
.contact-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 8px;
}
.contact-form-sub {
  font-size: 0.92rem;
  color: var(--text-3);
  margin: 0 0 28px;
  line-height: 1.6;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cf-row { display: flex; gap: 16px; }
.cf-row-2 > * { flex: 1; }
@media (max-width: 600px) { .cf-row { flex-direction: column; } }
.cf-group { display: flex; flex-direction: column; gap: 6px; }
.cf-label { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1.5px solid var(--border-dim);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--text-1);
  transition: border-color 0.2s;
  font-family: inherit;
  appearance: none;
}
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.cf-textarea { resize: vertical; min-height: 100px; }
.cf-submit { width: 100%; justify-content: center; padding: 14px; }
.cf-privacy {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-3);
  margin: 4px 0 0;
}
.cf-privacy a { color: var(--accent-1); }

/* Contact info column */
.contact-info-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 24px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-dim);
}
.contact-info-item:last-of-type { border-bottom: none; }
.contact-info-icon {
  width: 40px; height: 40px;
  background: rgba(99,102,241,0.08);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-1);
  font-size: 1rem;
  flex-shrink: 0;
}
.contact-info-label { font-size: 0.75rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.contact-info-val   { font-size: 0.92rem; color: var(--text-2); margin-top: 2px; }
.contact-info-val a { color: var(--accent-1); text-decoration: none; }

.contact-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.contact-trust-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.contact-trust-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 8px 0 4px;
}
.contact-trust-sub {
  font-size: 0.72rem;
  color: var(--text-3);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════
   INLINEEDIT — staff-only inline content editing
   Replaces the Materialize-styled buttons (`grey darken-4 white-text`)
   that public_v2 doesn't ship.
   ════════════════════════════════════════════════════════════════════════ */

/* Hide the "full edit" modal buttons on bento cards — they're unstyled in
   public_v2 and redundant (inline pencil icons handle editing). */
.bento-cell button[hx-get*="full_edit"],
.bento-cell div:has(> button[hx-get*="full_edit"]) {
  display: none !important;
}

.inlineedit-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s ease, background 0.15s ease;
}
.inlineedit-toggle:hover {
  background: #0f172a;
  transform: scale(1.08);
}

.inlineedit-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.inlineedit-form input[type="text"],
.inlineedit-form input[type="number"],
.inlineedit-form input[type="email"],
.inlineedit-form input[type="url"],
.inlineedit-form textarea,
.inlineedit-form select {
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  outline: none;
  min-width: 220px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.inlineedit-form input[type="text"]:focus,
.inlineedit-form input[type="number"]:focus,
.inlineedit-form input[type="email"]:focus,
.inlineedit-form input[type="url"]:focus,
.inlineedit-form textarea:focus,
.inlineedit-form select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.inlineedit-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.inlineedit-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}
.inlineedit-form button[type="submit"]:hover {
  background: #16a34a;            /* green-600 */
}
.inlineedit-form button[type="reset"]:hover {
  background: #dc2626;            /* red-600 */
}
.inlineedit-form button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.inlineedit-form .errorlist {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  font-size: 0.75rem;
  color: #dc2626;
}

.inlineedit-value-transparent {
  opacity: 0.5;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════
   DEMO WORKFLOW NODE CARDS
   Used by the three product tabs (Background Checks / Document Intelligence
   / Universal Translator) on the Live Platform section. Mirrors the real
   workflow editor node visuals in workflowai/ but stripped down to a
   marketing-grade interactive showcase.
   ════════════════════════════════════════════════════════════════════════ */

/* Wrapper: card on left + metrics on right */
.demo-node-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .demo-node-layout {
    grid-template-columns: 1fr;
  }
}

.demo-node-card {
  max-width: 600px;
  background: #ffffff;
  border-radius: 25px;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 8px;
}

/* — Title bar (gradient + shimmer animation) — */
.demo-node-title {
  position: relative;
  height: 96px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  overflow: hidden;
  border-radius: 20px;
}
.demo-node-title.gradient-green {
  background: linear-gradient(135deg, #43A047 0%, #1B5E20 100%);
}
.demo-node-title.gradient-red {
  background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%);
}
.demo-node-title.gradient-amber {
  background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
}
.demo-node-title__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.demo-node-title__shimmer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent);
  animation: demoShimmer 3.5s linear infinite;
  pointer-events: none;
}
@keyframes demoShimmer {
  0%   { transform: translate(-100%, -100%) rotate(45deg); }
  100% { transform: translate(100%, 100%) rotate(45deg); }
}

/* — Body — */
.demo-node-body {
  padding: 22px 22px 18px;
}

.demo-section-label {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: var(--text-3, #6b7280);
  margin: 4px 0 12px;
}

/* — Card chooser grids (2-col, 3-col) — */
.demo-card-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.demo-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.demo-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) {
  .demo-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

.demo-choice {
  position: relative;
  background: #ffffff;
  border: 2px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 16px 10px 14px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo-choice:hover {
  transform: translateY(-3px);
  border-color: #6366f1;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18);
}
.demo-choice.is-active {
  border-color: #6366f1;
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.06) 0%,
    rgba(139, 92, 246, 0.08) 100%);
}
.demo-choice[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.demo-choice[aria-disabled="true"]:hover {
  transform: none;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: none;
}
.demo-choice__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
}
.demo-choice__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
}
.demo-choice__hint {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  color: var(--text-3, #6b7280);
}

/* — Gradient icon backgrounds reused across the demos — */
.demo-grad-person       { background: linear-gradient(135deg, #ec4899, #db2777); }
.demo-grad-company      { background: linear-gradient(135deg, #6366f1, #4338ca); }
.demo-grad-social       { background: linear-gradient(135deg, #c026d3, #7e22ce); }
.demo-grad-news         { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.demo-grad-database     { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.demo-grad-quick        { background: linear-gradient(135deg, #f59e0b, #d97706); }
.demo-grad-deep         { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.demo-grad-source       { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.demo-grad-target       { background: linear-gradient(135deg, #f59e0b, #d97706); }
.demo-grad-disabled     { background: linear-gradient(135deg, #94a3b8, #64748b); }

/* — Collapsible panels (use `[hidden]` toggling, no jQuery) — */
.demo-panel-section {
  margin-top: 8px;
  animation: demoSlideDown 0.28s ease;
}
.demo-panel-section[hidden] {
  display: none !important;
}
@keyframes demoSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Settings rows (toggle, select) — */
.demo-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.demo-setting-row__text { flex: 1; padding-right: 12px; }
.demo-setting-row__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}
.demo-setting-row__sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-3, #6b7280);
}

.demo-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.demo-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.demo-toggle .demo-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 22px;
  transition: background 0.2s ease;
}
.demo-toggle .demo-toggle__slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.demo-toggle input:checked + .demo-toggle__slider {
  background: #6366f1;
}
.demo-toggle input:checked + .demo-toggle__slider::before {
  transform: translateX(18px);
}

.demo-select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font-size: 0.85rem;
  color: #1f2937;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.demo-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.demo-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  margin: 12px 0 6px;
}

/* — Metric callouts (side column next to card) — */
.demo-metrics-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 960px) {
  .demo-metrics-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .demo-metrics-sidebar .demo-metric { flex: 1; min-width: 140px; }
}
.demo-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.demo-metric {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 1.3rem;
}
.demo-metric__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.demo-metric__value {
  display: block;
  font-size: 0.83rem;
  font-weight: 700;
  color: #1E293B;
}
.demo-metric__label {
  display: block;
  font-size: 0.7rem;
  color: #64748B;
  margin-top: 2px;
}
.demo-metric--green  { background: rgba(16,185,129,0.07);  border: 1px solid rgba(16,185,129,0.2);  color: #059669; }
.demo-metric--red    { background: rgba(239,68,68,0.07);   border: 1px solid rgba(239,68,68,0.2);   color: #DC2626; }
.demo-metric--blue   { background: rgba(99,102,241,0.07);  border: 1px solid rgba(99,102,241,0.2);  color: #6366f1; }
.demo-metric--amber  { background: rgba(245,158,11,0.07);  border: 1px solid rgba(245,158,11,0.2);  color: #D97706; }

/* — Try it CTA — */
.demo-try {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.demo-try__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.demo-try__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.4);
}
.demo-try__btn i { font-size: 1rem; }

/* — Try-it modal — */
.demo-try-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  z-index: 9999;
  animation: demoFadeIn 0.2s ease;
}
.demo-try-modal[hidden] { display: none; }
.demo-try-modal__panel {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px 32px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.demo-try-modal__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
}
.demo-try-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #0f172a;
}
.demo-try-modal__body {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
}
.demo-try-modal__close {
  border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.demo-try-modal__close:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
@keyframes demoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   PLATFORM PAGE (page_platform_detail.html)
   ============================================================ */
.pp-hero {
  padding: 140px 0 80px;
  background: radial-gradient(900px 400px at 80% 0%, rgba(99,102,241,0.10), transparent 60%),
              radial-gradient(800px 350px at 0% 30%, rgba(168,85,247,0.08), transparent 60%);
}
.pp-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
}
.pp-hero__title { margin: 18px 0 14px; line-height: 1.1; }
.pp-hero__sub   { max-width: 640px; margin-bottom: 28px; }
.pp-hero__cta   { display: flex; gap: 14px; flex-wrap: wrap; }
.pp-hero__metric {
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 24px;
  padding: 28px 36px;
  text-align: center;
  min-width: 220px;
}
.pp-hero__metric-value {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pp-hero__metric-label { font-size: 0.85rem; color: var(--text-2); margin-top: 6px; }

.pp-section { padding: 80px 0; }
.pp-section--challenge { background: linear-gradient(180deg, transparent, rgba(239,68,68,0.025) 50%, transparent); }
.pp-section--solution  { background: linear-gradient(180deg, transparent, rgba(99,102,241,0.03) 50%, transparent); }
.pp-section__title { margin: 14px 0 18px; max-width: 820px; line-height: 1.15; }
.pp-section__sub   { color: var(--text-2); max-width: 720px; }
.pp-section__body  { max-width: 820px; color: var(--text-1); font-size: 1.05rem; line-height: 1.7; }
.section-chip--warning {
  background: rgba(239,68,68,0.10);
  color: #b91c1c;
  border-color: rgba(239,68,68,0.25);
}

.pp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.pp-feature-card {
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pp-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.06);
  border-color: rgba(99,102,241,0.30);
}
.pp-feature-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--accent-1);
  margin-bottom: 14px;
}
.pp-feature-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: #0f172a; }
.pp-feature-card__body  { font-size: 0.9rem; color: var(--text-2); margin: 0; line-height: 1.55; }
.pp-feature-card--add {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-1, #e2e8f0);
  background: transparent;
  min-height: 140px;
}

.pp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.pp-metric {
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
}
.pp-metric__value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pp-metric__label { font-size: 0.85rem; color: var(--text-2); margin-top: 4px; }

.pp-cta { padding: 60px 0 100px; }
.pp-cta__card {
  background: linear-gradient(135deg, #0f172a, #1e1b4b 60%, #4c1d95);
  border-radius: 32px;
  padding: 72px 48px;
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 80px rgba(15,23,42,0.18);
}
.pp-cta__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; margin: 0 0 14px; }
.pp-cta__sub   { color: rgba(255,255,255,0.78); margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ── Showcase wrappers (isometric 3D + interaction-disabled) ── */
.pp-showcases { margin-top: 50px; }
.pp-showcases > .pp-showcase-block + .pp-showcase-block { margin-top: 80px; }
/* Plain block layout (NOT flex). When this was `display: flex; flex-direction:
   column;` it collapsed to ~20px wide on full-screen desktop because the
   3D-transformed .platform-showcase child (max-width: 1100px; margin: 0 auto)
   confused the flex layout's cross-axis sizing. Block layout sidesteps it. */
.pp-showcase-block { display: block; }
.pp-showcase-block__caption { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.pp-showcase-block__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; color: #0f172a; }
.pp-showcase-block__sub   { color: var(--text-2); margin: 0; }

.platform-showcase {
  position: relative;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.25),
              0 12px 24px -8px rgba(15,23,42,0.12);
  overflow: hidden;
  /* Isometric 3D — pulled back, slight rotation, subtle float */
  transform: perspective(2400px) rotateX(8deg) rotateY(-12deg);
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin: 0 auto;
  max-width: 1100px;
  animation: showcaseFloat 6s ease-in-out infinite;
}
.platform-showcase:hover {
  transform: perspective(2400px) rotateX(0deg) rotateY(0deg) translateY(-4px);
  animation-play-state: paused;
}
.platform-showcase * { pointer-events: none !important; }
@keyframes showcaseFloat {
  0%, 100% { transform: perspective(2400px) rotateX(8deg) rotateY(-12deg) translateY(0); }
  50%      { transform: perspective(2400px) rotateX(8deg) rotateY(-12deg) translateY(-10px); }
}
.platform-showcase__live {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(15,23,42,0.85);
  color: #fff;
  font-size: 0.7rem;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  backdrop-filter: blur(6px);
}
.platform-showcase__live span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94, 0.6);
  animation: showcasePulse 2s infinite;
}
@keyframes showcasePulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94, 0);   }
}

@media (max-width: 800px) {
  .platform-showcase { transform: none !important; animation: none !important; }
  .pp-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .pp-metrics-grid { grid-template-columns: 1fr; }
}

/* Mobile: showcase mocks are designed at ~1000px and the workflow uses
   absolute-positioned nodes — neither shrinks naturally. We use a CSS
   container-query pattern: the wrapper measures itself, the showcase
   stays at design width but scales down via transform, and the wrapper
   reserves the scaled height with aspect-ratio. No horizontal page
   scroll, no clipping, no fixed pixel margins that break layout. */
@media (max-width: 900px) {
  /* Generic mobile-scaling — applied directly to .platform-showcase so it
     works in EVERY context (about framework steps, platform_detail blocks,
     future pages). The inner mock UI (sc-workflow has absolute-positioned
     nodes; sc-docintel/sc-quest/sc-bgcheck are wide grids) keeps its 1000px
     design width but scales down via transform. The showcase itself becomes
     a container query reference and reserves the scaled height with
     aspect-ratio so the rest of the page flows correctly. */
  .platform-showcase {
    container-type: inline-size;
    aspect-ratio: 1000 / 540;
    overflow: hidden;
    width: 100%;
    max-width: none;
    transform: none !important;
    animation: none !important;
    box-shadow: 0 14px 40px -16px rgba(15,23,42,0.30);
  }
  .platform-showcase > *:not(.platform-showcase__live) {
    width: 1000px;
    transform: scale(calc(100cqw / 1000));
    transform-origin: top left;
  }
  .platform-showcase__live { display: none !important; }

  /* Optional caption above framework steps (about page only) */
  .ab-framework__visual { position: relative; }
  .ab-framework__visual::before {
    content: "Platform preview";
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-1);
    margin: 0 4px 10px;
  }
}

/* ============================================================
   SHOWCASE COMPONENTS (mock platform UI)
   ============================================================ */

/* Annotation marks — used by doc_intel + translator */
.sc-mark { padding: 1px 5px; border-radius: 4px; font-weight: 500; }
.sc-mark--amount { background: rgba(34,197,94,0.18); color: #15803d; }
.sc-mark--date   { background: rgba(168,85,247,0.18); color: #6b21a8; }
.sc-mark--entity { background: rgba(59,130,246,0.18); color: #1d4ed8; }

/* === Document Intelligence === */
.sc-docintel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; min-height: 540px; border-radius: 24px; overflow: hidden; }
.sc-docintel__doc { background: #f8fafc; padding: 24px 28px; border-right: 1px solid #e2e8f0; }
.sc-docintel__doc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; margin-bottom: 18px; }
.sc-docintel__doc-head > i { font-size: 2rem; color: #ef4444; }
.sc-docintel__doc-title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-docintel__doc-meta  { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.sc-docintel__badge { margin-left: auto; background: rgba(34,197,94,0.15); color: #15803d; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.sc-docintel__page { background: #fff; border-radius: 12px; padding: 24px; font-size: 0.85rem; line-height: 1.65; color: #1e293b; box-shadow: 0 4px 12px rgba(15,23,42,0.04); }
.sc-docintel__line { margin-bottom: 12px; }
.sc-docintel__line:first-child { font-weight: 700; font-size: 1rem; text-align: center; margin-bottom: 4px; }
.sc-docintel__line--sub { text-align: center; color: #64748b; font-style: italic; margin-bottom: 18px; }

.sc-docintel__panel { background: #fff; padding: 20px 22px; overflow-y: hidden; }
.sc-docintel__panel-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e2e8f0; margin-bottom: 16px; }
.sc-docintel__tab { font-size: 0.78rem; padding: 8px 12px; color: #64748b; font-weight: 600; cursor: pointer; }
.sc-docintel__tab--active { color: #6366f1; border-bottom: 2px solid #6366f1; }
.sc-docintel__group { margin-bottom: 18px; }
.sc-docintel__group-head { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.sc-docintel__group-head span { margin-left: auto; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: #64748b; }
.sc-docintel__chip { background: #f8fafc; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.sc-docintel__chip-val { display: block; font-size: 0.82rem; font-weight: 600; color: #0f172a; }
.sc-docintel__chip-meta { display: block; font-size: 0.7rem; color: #64748b; margin-top: 2px; }
.sc-docintel__stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.78rem; }
.sc-docintel__stat-row b { color: #6366f1; font-weight: 700; }

/* Native responsiveness for the docintel mock. NO container-type — that
   was establishing inline-size containment which collapsed .platform-showcase
   children to ~min-content in some browsers. Plain overflow-wrap rules
   are enough; the platform-showcase scale-down handles narrow viewports. */
.sc-docintel__doc-head { flex-wrap: wrap; }
.sc-docintel__doc-head > div:nth-of-type(1) { min-width: 0; flex: 1 1 200px; }
.sc-docintel__doc-title, .sc-docintel__doc-meta { overflow-wrap: anywhere; }
.sc-docintel__badge { white-space: nowrap; }
.sc-docintel__line { overflow-wrap: anywhere; }
.sc-docintel__panel-tabs { flex-wrap: wrap; }
.sc-docintel__chip-val, .sc-docintel__chip-meta { overflow-wrap: anywhere; }

/* === Workflow Canvas === */
.sc-workflow { background: #0f172a; color: #fff; border-radius: 24px; padding: 0; min-height: 460px; overflow: hidden; }
.sc-workflow__topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sc-workflow__title { font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
.sc-workflow__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-workflow__pill { font-size: 0.72rem; background: rgba(255,255,255,0.08); padding: 5px 12px; border-radius: 999px; color: #cbd5e1; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-workflow__pill--ok { background: rgba(34,197,94,0.20); color: #86efac; }
.sc-workflow__canvas { position: relative; height: 360px; background-image:
  linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sc-workflow__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-node { position: absolute; width: 200px; background: #1e293b; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.sc-node__bar { padding: 8px 12px; font-size: 0.78rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.sc-node__body { padding: 10px 12px; font-size: 0.78rem; color: #cbd5e1; }
.sc-node__meta { display: block; font-size: 0.68rem; color: #94a3b8; margin-top: 4px; }
.sc-node--green  .sc-node__bar { background: linear-gradient(135deg, #16a34a, #15803d); }
.sc-node--purple .sc-node__bar { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.sc-node--blue   .sc-node__bar { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.sc-node--red    .sc-node__bar { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sc-node--amber  .sc-node__bar { background: linear-gradient(135deg, #f59e0b, #b45309); }
.sc-node--indigo .sc-node__bar { background: linear-gradient(135deg, #6366f1, #4338ca); }
.sc-workflow__footer { padding: 12px 22px; font-size: 0.75rem; color: #94a3b8; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.sc-workflow__dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.sc-workflow__dot--ok { background: #22c55e; }

/* === Background Checks === */
.sc-bgcheck { padding: 24px 28px; min-height: 500px; }
.sc-bgcheck__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; margin-bottom: 18px; }
.sc-bgcheck__head > i { font-size: 1.8rem; color: #16a34a; }
.sc-bgcheck__title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-bgcheck__sub   { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sc-bgcheck__live { margin-left: auto; background: rgba(34,197,94,0.10); color: #15803d; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.sc-bgcheck__live span { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: showcasePulse 2s infinite; }
.sc-bgcheck__chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.sc-bgcheck__choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid #e2e8f0; border-radius: 14px; background: #fff; }
.sc-bgcheck__choice > i { font-size: 1.4rem; color: #94a3b8; }
.sc-bgcheck__choice--active { border-color: #6366f1; background: rgba(99,102,241,0.04); }
.sc-bgcheck__choice--active > i { color: #6366f1; }
.sc-bgcheck__choice-title { font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.sc-bgcheck__choice-sub   { font-size: 0.72rem; color: #64748b; margin-top: 2px; }
.sc-bgcheck__rows { display: flex; flex-direction: column; gap: 10px; }
.sc-bgcheck__row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: #f8fafc; }
.sc-bgcheck__row-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.sc-bgcheck__row--ok   .sc-bgcheck__row-icon { background: rgba(34,197,94,0.15); color: #16a34a; }
.sc-bgcheck__row--warn .sc-bgcheck__row-icon { background: rgba(245,158,11,0.15); color: #d97706; }
.sc-bgcheck__row-title { font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.sc-bgcheck__row-sub   { font-size: 0.72rem; color: #64748b; margin-top: 2px; }
.sc-bgcheck__row-time  { font-size: 0.7rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.sc-bgcheck__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; margin-top: 18px; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b; }
.sc-bgcheck__pill { background: #f1f5f9; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; }

/* Bgcheck mock — soft responsiveness via overflow-wrap + flex-wrap.
   No container-type (it collapsed siblings of .platform-showcase to ~20px
   in some browsers). The platform-showcase scale-down handles mobile. */
.sc-bgcheck__head { flex-wrap: wrap; }
.sc-bgcheck__head > div:first-of-type { min-width: 0; flex: 1 1 200px; }
.sc-bgcheck__title, .sc-bgcheck__sub { overflow-wrap: anywhere; }
.sc-bgcheck__live { white-space: nowrap; }
.sc-bgcheck__choice { min-width: 0; }
.sc-bgcheck__choice > div { min-width: 0; }
.sc-bgcheck__choice-title, .sc-bgcheck__choice-sub { overflow-wrap: anywhere; }
.sc-bgcheck__row-title, .sc-bgcheck__row-sub { overflow-wrap: anywhere; }
.sc-bgcheck__row { min-width: 0; }
.sc-bgcheck__row > div:nth-child(2) { min-width: 0; }
.sc-bgcheck__footer { flex-wrap: wrap; gap: 10px; }

/* === Classification === */
.sc-classify { padding: 24px 28px; }
.sc-classify__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sc-classify__head > i { font-size: 1.8rem; color: #16a34a; }
.sc-classify__title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-classify__sub   { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sc-classify__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.sc-classify__card { background: #f8fafc; border-radius: 14px; padding: 16px; border-left: 3px solid #94a3b8; }
.sc-classify__card--legal { border-left-color: #6366f1; }
.sc-classify__card--kyc   { border-left-color: #16a34a; }
.sc-classify__card--fin   { border-left-color: #f59e0b; }
.sc-classify__card--reg   { border-left-color: #a855f7; }
.sc-classify__card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sc-classify__pill { font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.sc-classify__pill--legal { background: rgba(99,102,241,0.15); color: #4338ca; }
.sc-classify__pill--kyc   { background: rgba(34,197,94,0.15); color: #15803d; }
.sc-classify__pill--fin   { background: rgba(245,158,11,0.15); color: #b45309; }
.sc-classify__pill--reg   { background: rgba(168,85,247,0.15); color: #6b21a8; }
.sc-classify__count { font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.sc-classify__card-list { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: #1e293b; }
.sc-classify__card-list span { display: inline-flex; align-items: center; gap: 8px; }
.sc-classify__card-list span i { color: #64748b; font-size: 0.85rem; }
.sc-classify__more { color: #94a3b8 !important; font-style: italic; font-size: 0.72rem !important; }

/* === Data Room === */
.sc-dataroom { padding: 0; min-height: 480px; }
.sc-dataroom__head { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-bottom: 1px solid #e2e8f0; }
.sc-dataroom__head > i { font-size: 1.8rem; color: #6366f1; }
.sc-dataroom__title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-dataroom__sub   { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sc-dataroom__badge { margin-left: auto; background: rgba(34,197,94,0.15); color: #15803d; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.sc-dataroom__cols { display: grid; grid-template-columns: 240px 1fr; }
.sc-dataroom__tree { padding: 18px 12px; background: #f8fafc; border-right: 1px solid #e2e8f0; }
.sc-dataroom__tree-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; color: #1e293b; }
.sc-dataroom__tree-item > i { color: #f59e0b; }
.sc-dataroom__tree-item span { margin-left: auto; font-size: 0.7rem; color: #94a3b8; background: #fff; padding: 1px 8px; border-radius: 999px; }
.sc-dataroom__tree-item--active { background: rgba(99,102,241,0.10); color: #4338ca; font-weight: 600; }
.sc-dataroom__tree-item--child { padding-left: 28px; }
.sc-dataroom__list { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.sc-dataroom__row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; }
.sc-dataroom__row:hover { background: #f8fafc; }
.sc-dataroom__icon { font-size: 1.6rem; }
.sc-dataroom__icon--pdf { color: #ef4444; }
.sc-dataroom__icon--img { color: #a855f7; }
.sc-dataroom__icon--xls { color: #16a34a; }
.sc-dataroom__icon--doc { color: #3b82f6; }
.sc-dataroom__row-name { font-size: 0.85rem; font-weight: 600; color: #0f172a; }
.sc-dataroom__row-meta { font-size: 0.7rem; color: #64748b; margin-top: 2px; }
.sc-dataroom__tag { font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.sc-dataroom__tag--ok   { background: rgba(34,197,94,0.15); color: #15803d; }
.sc-dataroom__tag--warn { background: rgba(245,158,11,0.15); color: #b45309; }

/* === Translator === */
.sc-translate { padding: 24px 28px; }
.sc-translate__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sc-translate__head > i { font-size: 1.8rem; color: #f59e0b; }
.sc-translate__title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-translate__sub   { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sc-translate__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.sc-translate__lang { background: #f8fafc; border-radius: 12px; padding: 12px 16px; }
.sc-translate__lang-label { font-size: 0.7rem; color: #94a3b8; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-translate__lang-pick { font-size: 0.92rem; color: #0f172a; font-weight: 600; margin-top: 4px; }
.sc-translate__lang-pick span { font-size: 1.1rem; margin-right: 6px; }
.sc-translate__arrow { color: #94a3b8; font-size: 1.2rem; }
.sc-translate__demo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.sc-translate__col { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.sc-translate__col-head { background: #f8fafc; padding: 8px 14px; font-size: 0.72rem; color: #64748b; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-translate__col-body { padding: 14px 16px; font-size: 0.82rem; line-height: 1.6; color: #1e293b; }
.sc-translate__toggles { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-translate__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #475569; background: #f8fafc; padding: 8px 14px; border-radius: 999px; }
.sc-translate__toggle span { width: 28px; height: 16px; border-radius: 999px; background: #e2e8f0; position: relative; }
.sc-translate__toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.sc-translate__toggle--on span { background: #6366f1; }
.sc-translate__toggle--on span::after { left: 14px; }

/* === Questionnaire === */
.sc-quest { padding: 24px 28px; min-height: 520px; }
.sc-quest__head { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; margin-bottom: 24px; }
.sc-quest__head > i { font-size: 1.8rem; color: #6366f1; }
.sc-quest__title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-quest__sub   { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sc-quest__progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sc-quest__progress-bar { width: 160px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.sc-quest__progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); }
.sc-quest__progress-text { font-size: 0.7rem; color: #64748b; font-weight: 600; }
.sc-quest__field { margin-bottom: 18px; }
.sc-quest__label { display: block; font-size: 0.78rem; font-weight: 700; color: #475569; margin-bottom: 8px; }
.sc-quest__req { color: #ef4444; }
.sc-quest__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-quest__pill { background: #fff; border: 1.5px solid #e2e8f0; padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; color: #475569; }
.sc-quest__pill--on { background: rgba(99,102,241,0.10); border-color: #6366f1; color: #4338ca; font-weight: 600; }
.sc-quest__hint { font-size: 0.72rem; color: #6366f1; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.sc-quest__input { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 0.85rem; color: #1e293b; }
.sc-quest__input--filled { border-color: #16a34a; background: rgba(34,197,94,0.05); }
.sc-quest__upload { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: rgba(99,102,241,0.05); border: 1.5px dashed #6366f1; border-radius: 12px; }
.sc-quest__upload > i { font-size: 1.5rem; color: #6366f1; }
.sc-quest__upload-title { font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.sc-quest__upload-meta  { font-size: 0.72rem; color: #64748b; margin-top: 2px; }
.sc-quest__upload-tag { background: rgba(34,197,94,0.15); color: #15803d; font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.sc-quest__ubos { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-quest__ubo { background: #f8fafc; border: 1px solid #e2e8f0; padding: 10px 14px; border-radius: 10px; font-size: 0.82rem; color: #1e293b; }
.sc-quest__ubo--add { border-style: dashed; color: #6366f1; cursor: pointer; }

/* ============================================================
   Bootstrap Modal CSS (extracted — avoids loading full Bootstrap)
   ============================================================ */
.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}
.modal-backdrop.fade{opacity:0}
.modal-backdrop.show{opacity:.5}
.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}
.modal.show{display:block}
.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}
.modal.fade .modal-dialog{transform:translateY(-50px);transition:transform .3s ease-out}
.modal.show .modal-dialog{transform:none}
.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}
.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;outline:0;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:.5rem;border-top-right-radius:.5rem}
.modal-title{margin:0;line-height:1.5;font-size:1.25rem;font-weight:500}
.modal-body{position:relative;flex:1 1 auto;padding:1rem}
.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}
.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;color:#000;background:transparent;border:0;border-radius:.25rem;opacity:.5;cursor:pointer}
.btn-close:hover{opacity:.75}
@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-sm{max-width:300px}}
@media (min-width:992px){.modal-lg{max-width:800px}}
@media (min-width:1200px){.modal-xl{max-width:1140px}}
.modal-xxl{max-width:95vw}
.modal-dialog{margin:10px auto}

/* Bootstrap utilities used by modal form */
.d-flex{display:flex!important}
.d-inline{display:inline!important}
.justify-content-center{justify-content:center!important}
.align-items-center{align-items:center!important}
.text-center{text-align:center!important}
.mt-2{margin-top:.5rem!important}
.mt-5{margin-top:3rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.me-2{margin-right:.5rem!important}
.p-3{padding:1rem!important}
.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}
.btn{display:inline-block;font-weight:400;line-height:1.5;text-align:center;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s}
.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}
.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}
.btn-primary:hover{background-color:#0b5ed7;border-color:#0a58ca}
.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}
.btn-secondary:hover{background-color:#5c636a;border-color:#565e64}
.btn-success{color:#fff;background-color:#198754;border-color:#198754}
.btn-success:hover{background-color:#157347;border-color:#146c43}
.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}
.btn-danger:hover{background-color:#bb2d3b;border-color:#b02a37}
.btn-group{display:inline-flex;vertical-align:middle}
.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s,box-shadow .15s}
.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}
.form-label{margin-bottom:.5rem;font-weight:500}
.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;animation:.75s linear infinite spinner-border}
.text-primary{color:#0d6efd!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes spinner-border{to{transform:rotate(360deg)}}

/* ============================================================
   RESPONSIVE POLISH — iPad + Mobile
   ============================================================ */

/* iPad / tablet (900–1024) — hero loses 3D visual, copy centres a bit */
@media (max-width: 1024px) {
  .hero-content { max-width: 720px !important; margin: 0 auto; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-trust   { justify-content: center; }
}

/* Small tablet / large phone (768) */
@media (max-width: 768px) {
  .container-v2 { padding-left: 20px; padding-right: 20px; }
  .section { padding: 60px 0 !important; }
  .display-xl { font-size: clamp(2rem, 8vw, 2.6rem) !important; line-height: 1.1 !important; }
  .display-lg { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; line-height: 1.15 !important; }
  .display-md { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; line-height: 1.2 !important; }
  .lead { font-size: 1rem !important; }

  .hero { padding: 100px 0 60px !important; }

  /* Platform detail */
  .pp-hero { padding: 100px 0 50px !important; }
  .pp-hero__title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .pp-hero__cta { justify-content: center; }
  .pp-features-grid { grid-template-columns: 1fr !important; }
  .pp-metrics-grid { grid-template-columns: 1fr !important; }
  .pp-cta__card { padding: 48px 24px !important; border-radius: 24px !important; }
  .pp-section { padding: 56px 0 !important; }

  /* Technology page */
  .tech-hero { padding: 100px 0 40px !important; }
  .tech-card { padding: 36px 22px !important; border-radius: 20px !important; }
  .tech-card__title { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; }
  .tech-card__body { font-size: 0.95rem !important; }
  .tech-card__metrics { grid-template-columns: 1fr !important; gap: 14px !important; padding-top: 18px !important; }
  .tech-card__metrics > div { flex-direction: row; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(15,23,42,0.06); padding-bottom: 10px; }
  .tech-card__metrics > div:last-child { border-bottom: none; }
  .tech-card__metric-label { margin-top: 0 !important; }
  .tech-stack { gap: 40px !important; }

  /* Use Cases tabs — horizontal scroll on mobile.
     justify-content: center (the desktop rule) makes overflowed content
     visually centered but unreachable on the left when scrolling — must
     override to flex-start so scroll position 0 is the actual start of
     the row. Negative margin lets the row use the full viewport width
     (escape any container padding) so tabs don't get cropped. */
  .uc-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 8px;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
  }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
  .uc-step-v2 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .uc-step-v2__connector { flex-direction: row !important; }
  .uc-step-v2__line { display: none !important; }
  .uc-hero-v2__title { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }

  /* Showcase blocks — force-disable 3D on mobile everywhere */
  .platform-showcase { transform: none !important; animation: none !important; }
  .tech-card__visual { transform: none !important; }
}

/* Phone (480) */
@media (max-width: 480px) {
  .container-v2 { padding-left: 16px; padding-right: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-v2 { width: 100%; justify-content: center; }
  .pp-hero__cta { flex-direction: column; align-items: stretch; }
  .pp-hero__cta .btn-v2 { width: 100%; justify-content: center; }
  .pp-hero__metric { padding: 20px 24px !important; min-width: 0 !important; }
  .tech-card__capabilities > div { font-size: 0.9rem !important; }
  .tech-card { padding: 28px 18px !important; }

  /* Tighter showcase insides for very narrow screens */
  .sc-docintel { grid-template-columns: 1fr !important; }
  .sc-docintel__doc { border-right: none; border-bottom: 1px solid #e2e8f0; }
  .sc-bgcheck__chooser { grid-template-columns: 1fr !important; }
  .sc-classify__grid { grid-template-columns: 1fr !important; }
  .sc-dataroom__cols { grid-template-columns: 1fr !important; }
  .sc-dataroom__tree { display: none; }
  .sc-translate__pair { grid-template-columns: 1fr !important; }
  .sc-translate__demo { grid-template-columns: 1fr !important; }
}

/* Small phone (380) — squeeze padding/typography to the limit */
@media (max-width: 380px) {
  .display-xl { font-size: 1.85rem !important; }
  .display-lg { font-size: 1.4rem !important; }
  .hero-badge { font-size: 0.72rem; }
}

/* === M&A adaptive Q&A — auto-answered rows === */
.sc-qma__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 10px;
  border-left: 3px solid #6366f1;
}
.sc-qma__row--answered { border-left-color: #16a34a; }
.sc-qma__row--pending  { border-left-color: #f59e0b; background: rgba(245,158,11,0.06); }

.sc-qma__q-label {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6366f1;
  background: rgba(99,102,241,0.10);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.sc-qma__q {
  font-size: 0.82rem;
  color: #1e293b;
  line-height: 1.5;
}
.sc-qma__a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px dashed rgba(99,102,241,0.20);
  padding-left: 14px;
}
.sc-qma__a-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #15803d;
  margin-bottom: 4px;
}
.sc-qma__a-value--pending { color: #b45309; }
.sc-qma__a-cite {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sc-qma__a-cite i { color: #94a3b8; flex-shrink: 0; }

.sc-quest--ma .sc-qma__row:last-of-type { margin-bottom: 18px; }

@media (max-width: 560px) {
  .sc-qma__row { grid-template-columns: 1fr; }
  .sc-qma__a { border-left: none; padding-left: 0; border-top: 1px dashed rgba(99,102,241,0.20); padding-top: 8px; }
}

/* ============================================================
   PLATFORM SPOTLIGHT (landing) — 3D preview cards
   ============================================================ */
.plat-spot { padding: 100px 0; }
.plat-spot__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 50px;
}
@media (max-width: 960px) { .plat-spot__grid { grid-template-columns: 1fr; } }

.plat-spot__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99,102,241,0.14);
  box-shadow: 0 20px 50px -20px rgba(15,23,42,0.12),
              0 6px 16px -6px rgba(15,23,42,0.06);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s,
              border-color 0.3s;
}
.plat-spot__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.22),
              0 12px 24px -8px rgba(15,23,42,0.10);
  border-color: rgba(99,102,241,0.35);
}

.plat-spot__card-aurora {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.4s, transform 0.6s;
}
.plat-spot__card:hover .plat-spot__card-aurora { opacity: 1; transform: translate(-20px, 20px); }

.plat-spot__card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.plat-spot__card-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 16px -4px rgba(99,102,241,0.35);
}
.plat-spot__card-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 4px;
}
.plat-spot__card-title { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.2; }

.plat-spot__card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  position: relative; z-index: 1;
}

/* 3D preview — embeds a showcase partial, tilted */
.plat-spot__preview {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px -16px rgba(15,23,42,0.28),
              inset 0 0 0 1px rgba(255,255,255,0.5);
  transform: perspective(2000px) rotateX(6deg) rotateY(-8deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center;
  margin: 6px 0;
  height: 300px;
  z-index: 1;
}
.plat-spot__card:hover .plat-spot__preview { transform: perspective(2000px) rotateX(2deg) rotateY(-2deg) translateY(-3px); }
.plat-spot__preview * { pointer-events: none !important; }

.plat-spot__preview-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  color: #fff;
}
.plat-spot__preview-chrome > span:not(.plat-spot__preview-title) {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.plat-spot__preview-chrome > span:nth-child(1) { background: #ef4444; }
.plat-spot__preview-chrome > span:nth-child(2) { background: #f59e0b; }
.plat-spot__preview-chrome > span:nth-child(3) { background: #22c55e; }
.plat-spot__preview-title {
  margin-left: 10px;
  font-size: 0.7rem;
  opacity: 0.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.plat-spot__preview-body {
  position: relative;
  overflow: hidden;
  /* Scale the content down so the full snippet fits in the small frame.
     width + height are 1/scale so the scaled box visually occupies 100%. */
  transform: scale(0.55);
  transform-origin: top left;
  width: 181.82%;   /* 1/0.55 */
  height: calc((100% - 34px) / 0.55);
  pointer-events: none;
}
/* Per-snippet sizing tweaks so each one fills the preview frame nicely */
.plat-spot__preview-body .sc-workflow { min-height: 0; height: auto; }
.plat-spot__preview-body .sc-workflow__canvas { height: 320px; }
.plat-spot__preview-body .sc-docintel { min-height: 0; height: auto; }
.plat-spot__preview-body .sc-bgcheck  { min-height: 0; }
.plat-spot__preview-body .sc-dataroom { min-height: 0; }
.plat-spot__preview-body .sc-quest    { min-height: 0; }

.plat-spot__card-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,0.08);
  position: relative; z-index: 1;
  gap: 14px;
}
.plat-spot__card-metric-value {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.plat-spot__card-metric-label {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-left: 8px;
  flex: 1;
  line-height: 1.35;
}
.plat-spot__card-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.25s;
}
.plat-spot__card:hover .plat-spot__card-cta { transform: translateX(4px); }
.plat-spot__card-cta i { transition: transform 0.25s; }
.plat-spot__card:hover .plat-spot__card-cta i { transform: translateX(3px); }

@media (max-width: 768px) {
  .plat-spot { padding: 60px 0; }
  .plat-spot__card { padding: 26px; }
  .plat-spot__preview { transform: none !important; height: 220px; }
  .plat-spot__card:hover .plat-spot__preview { transform: none !important; }
  .plat-spot__card-metric { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   RESPONSIVE FIXES — April 2026
   ============================================================ */

/* ── Hero trust logos: wrap cleanly at every breakpoint ── */
.hero-trust { gap: 16px !important; }
.hero-trust-logos { flex-wrap: wrap !important; gap: 8px !important; }
@media (max-width: 560px) {
  .hero-trust { margin-top: 36px !important; gap: 10px !important; flex-direction: column; align-items: flex-start; }
  .hero-trust-text { font-size: 0.72rem !important; }
  .hero-trust-logo {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
}

/* ── Hero padding: tighter at every size so content shows above fold ── */
.hero { min-height: auto !important; padding: 120px 0 80px !important; }
@media (min-width: 1025px) { .hero { min-height: 80vh !important; padding: 140px 0 100px !important; } }
@media (max-width: 768px)  { .hero { padding: 96px 0 56px !important; } }
@media (max-width: 480px)  { .hero { padding: 80px 0 40px !important; } }

/* ── Hero orbs: shrink on mobile so they don't visually dominate ── */
@media (max-width: 768px) {
  .hero-orb { opacity: 0.5 !important; }
  .hero-orb-1, .hero-orb-2, .hero-orb-3 { width: 260px !important; height: 260px !important; }
}

/* ── Workflow-canvas (demo) toolbar: scroll horizontally on mobile ── */
.demo-df-toolbar { flex-wrap: wrap; }
.demo-df-nodes { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.demo-df-nodes::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .demo-df-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .demo-df-toolbar-title { font-size: 0.82rem !important; }
  .demo-df-nodes {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 2px;
  }
  .demo-df-node-drag {
    flex-shrink: 0;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }
  .demo-canvas-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8rem !important;
  }
  .demo-df-toolbar-badge { display: none !important; }
}

/* ── Product-card stats: wrap gracefully on mobile ── */
.product-stats { flex-wrap: wrap; gap: 14px; }
@media (max-width: 560px) {
  .product-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    padding-top: 14px !important;
  }
  .product-stats > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(99,102,241,0.04);
    border-radius: 10px;
  }
  .product-stat-value { font-size: 1.05rem !important; line-height: 1.2 !important; }
  .product-stat-label { font-size: 0.68rem !important; line-height: 1.35 !important; }
}
@media (max-width: 380px) {
  .product-stats { grid-template-columns: 1fr !important; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.v2-cookie-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 1500;
  background: #0f172a;
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(15,23,42,0.35),
              0 8px 20px rgba(15,23,42,0.20);
  overflow: hidden;
  animation: v2CookieSlide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}
@keyframes v2CookieSlide {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.v2-cookie-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.v2-cookie-bar__copy { flex: 1 1 auto; min-width: 0; }
.v2-cookie-bar__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.v2-cookie-bar__title i { color: var(--accent-1); }
.v2-cookie-bar__body {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}
.v2-cookie-bar__body a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.v2-cookie-bar__body a:hover { color: var(--accent-1); }
.v2-cookie-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.v2-cookie-bar .btn-v2-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background: transparent;
}
.v2-cookie-bar .btn-v2-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
}
@media (max-width: 720px) {
  .v2-cookie-bar { left: 10px; right: 10px; bottom: 10px; border-radius: 14px; }
  .v2-cookie-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
  }
  .v2-cookie-bar__actions { justify-content: flex-end; }
  .v2-cookie-bar__body { font-size: 0.82rem; }
}
@media (max-width: 420px) {
  .v2-cookie-bar__actions { flex-direction: column-reverse; }
  .v2-cookie-bar__actions form { width: 100%; }
  .v2-cookie-bar__actions .btn-v2 { width: 100%; justify-content: center; }
}

/* ============================================================
   COOKIE PREFERENCES PAGE (/cookies/)
   ============================================================ */
.cookies-hero {
  padding: 140px 0 40px;
  text-align: center;
  background: radial-gradient(900px 400px at 50% 0%, rgba(99,102,241,0.10), transparent 60%);
}
.cookies-hero__inner { max-width: 780px; margin: 0 auto; }
.cookies-hero__title { margin: 18px 0 14px; line-height: 1.1; }
.cookies-hero__sub   { max-width: 640px; margin: 0 auto; }

.cookies-section { padding: 40px 0 100px; }

.cookies-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
@media (max-width: 860px) { .cookies-summary { grid-template-columns: 1fr; } }
.cookies-summary__card {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
.cookies-summary__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.12));
  color: var(--accent-1);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.cookies-summary__card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: #0f172a; }
.cookies-summary__card p  { font-size: 0.88rem; color: var(--text-2); margin: 0; line-height: 1.55; }

.cookies-groups { display: flex; flex-direction: column; gap: 20px; }

.cookies-group {
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 10px 30px -10px rgba(15,23,42,0.08);
  transition: border-color 0.2s;
}
.cookies-group:hover { border-color: rgba(99,102,241,0.25); }

.cookies-group__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(99,102,241,0.10);
  color: var(--accent-1);
  border: 1px solid rgba(99,102,241,0.20);
  margin-bottom: 14px;
}
.cookies-group__pill--required {
  background: rgba(22,163,74,0.10);
  color: #15803d;
  border-color: rgba(22,163,74,0.22);
}

.cookies-group__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; color: #0f172a; }
.cookies-group__desc  { font-size: 0.95rem; color: var(--text-2); line-height: 1.6; margin: 0 0 20px; max-width: 760px; }

.cookies-group__state {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.cookies-group__status {
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cookies-group__status--required { color: #15803d; font-weight: 500; font-style: italic; }
.cookies-group__status--on  { color: #16a34a; }
.cookies-group__status--off { color: #dc2626; }

.cookies-group__details { margin-top: 20px; }
.cookies-group__details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--accent-1);
  font-weight: 600;
  padding: 8px 0;
}
.cookies-group__details > summary::-webkit-details-marker { display: none; }
.cookies-group__details > summary i { transition: transform 0.2s; font-size: 0.72rem; }
.cookies-group__details[open] > summary i { transform: rotate(180deg); }

.cookies-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.88rem;
}
.cookies-table th {
  text-align: left;
  font-weight: 700;
  color: #475569;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cookies-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text-1);
  vertical-align: top;
}
.cookies-table td code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--accent-1);
}
.cookies-table tr:last-child td { border-bottom: none; }

.cookies-footer {
  text-align: center;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid #f1f5f9;
  color: var(--text-2);
  font-size: 0.92rem;
}
.cookies-footer a { color: var(--accent-1); font-weight: 600; }
.cookies-footer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .cookies-hero { padding: 100px 0 30px; }
  .cookies-section { padding: 30px 0 80px; }
  .cookies-group { padding: 22px 20px; border-radius: 18px; }
  .cookies-group__title { font-size: 1.1rem; }
  .cookies-table { font-size: 0.78rem; }
  .cookies-table th, .cookies-table td { padding: 8px 10px; }
}

/* ============================================================
   LEGAL / COMPLIANCE PAGES (/v2/legal/<slug>/)
   ============================================================ */
.legal-hero {
  padding: 140px 0 40px;
  background: radial-gradient(900px 400px at 50% 0%, rgba(99,102,241,0.08), transparent 60%);
}
.legal-hero__inner { max-width: 860px; }
.legal-hero__title { margin: 18px 0 14px; line-height: 1.1; }
.legal-hero__sub   { max-width: 720px; }
.legal-hero__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-3);
  background: rgba(15,23,42,0.04);
  padding: 6px 14px;
  border-radius: 999px;
}

.legal-section { padding: 40px 0 100px; }
.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 30px; } }

.legal-nav {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 16px;
  padding: 18px 16px;
}
.legal-nav__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-3);
  padding: 0 8px;
  margin-bottom: 8px;
}
.legal-nav ul { list-style: none; padding: 0; margin: 0; }
.legal-nav li { margin: 2px 0; }
.legal-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 0.88rem;
  color: var(--text-1);
  text-decoration: none;
  border-radius: 10px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.legal-nav a:hover { background: rgba(99,102,241,0.06); color: var(--accent-1); }
.legal-nav a.is-active {
  background: rgba(99,102,241,0.10);
  color: var(--accent-1);
  font-weight: 700;
}
.legal-nav a i { font-size: 0.95rem; color: var(--text-3); width: 18px; text-align: center; }
.legal-nav a.is-active i { color: var(--accent-1); }
.legal-nav__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }

.legal-body {
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
  padding: 40px 48px;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,0.06);
  color: var(--text-1);
  font-size: 0.98rem;
  line-height: 1.75;
}
.legal-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin: 36px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 24px 0 10px; }
.legal-body p  { margin: 0 0 14px; color: var(--text-1); }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body strong { color: #0f172a; }
.legal-body a { color: var(--accent-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--accent-2); }
.legal-body code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; color: var(--accent-1); }

@media (max-width: 768px) {
  .legal-hero { padding: 100px 0 30px; }
  .legal-body { padding: 28px 22px; border-radius: 16px; font-size: 0.94rem; }
  .legal-body h2 { font-size: 1.15rem; margin-top: 28px; }
}

/* ============================================================
   AGENT BUILDER SECTION (_agent_builder.html)
   ============================================================ */
.ab-section {
  padding: 100px 0;
  position: relative;
  background: radial-gradient(900px 400px at 80% 20%, rgba(168,85,247,0.06), transparent 60%),
              radial-gradient(700px 300px at 10% 80%, rgba(99,102,241,0.05), transparent 60%);
}

.ab-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 50px;
}
@media (max-width: 1024px) { .ab-grid { grid-template-columns: 1fr; gap: 40px; } }

.ab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.12));
  color: var(--accent-1);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(99,102,241,0.22);
  margin-bottom: 20px;
}
.ab-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 18px;
  color: #0f172a;
}
.ab-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 28px;
  max-width: 640px;
}

.ab-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 560px) { .ab-cards { grid-template-columns: 1fr; } }

.ab-card {
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 16px;
  padding: 20px 22px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.ab-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,0.07);
  border-color: rgba(99,102,241,0.30);
}
.ab-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-size: 1.1rem;
  color: #fff;
}
.ab-card__icon--purple { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.ab-card__icon--red    { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.ab-card__icon--green  { background: linear-gradient(135deg, #16a34a, #15803d); }
.ab-card__icon--amber  { background: linear-gradient(135deg, #f59e0b, #b45309); }
.ab-card h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 6px; color: #0f172a; line-height: 1.3; }
.ab-card p  { font-size: 0.85rem; color: var(--text-2); margin: 0; line-height: 1.6; }

.ab-visual {
  background: #0f172a;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.30),
              0 12px 24px -10px rgba(15,23,42,0.15);
  transform: perspective(2400px) rotateY(-6deg) rotateX(4deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ab-visual:hover { transform: perspective(2400px) rotateY(0) rotateX(0); }
.ab-visual * { pointer-events: none !important; }
.ab-visual__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ab-visual__chrome > span:not(.ab-visual__title) {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.ab-visual__chrome > span:nth-child(1) { background: #ef4444; }
.ab-visual__chrome > span:nth-child(2) { background: #f59e0b; }
.ab-visual__chrome > span:nth-child(3) { background: #22c55e; }
.ab-visual__title {
  margin-left: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ab-visual__frame {
  height: 440px;
  overflow: hidden;
}
.ab-visual__frame .sc-workflow { min-height: 100%; border-radius: 0; }
@media (max-width: 1024px) {
  .ab-visual { transform: none !important; }
  .ab-visual__frame { height: 380px; }
}

/* Related use case callout */
.ab-related {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 32px;
  margin-top: 60px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0f172a, #1e1b4b 60%, #4c1d95);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 24px 48px -16px rgba(15,23,42,0.28);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.ab-related::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(168,85,247,0.35), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  transition: transform 0.6s;
}
.ab-related:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -16px rgba(15,23,42,0.38);
  color: #fff;
}
.ab-related:hover::before { transform: translate(-20px, 20px); }
.ab-related__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 8px 16px -4px rgba(245,158,11,0.35);
}
.ab-related__copy { flex: 1 1 auto; min-width: 0; position: relative; }
.ab-related__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.ab-related__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.ab-related__sub { font-size: 0.88rem; color: rgba(255,255,255,0.78); line-height: 1.5; }
.ab-related__cta {
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  white-space: nowrap;
  position: relative;
  transition: transform 0.25s;
}
.ab-related__cta i { transition: transform 0.25s; }
.ab-related:hover .ab-related__cta i { transform: translateX(4px); }
@media (max-width: 720px) {
  .ab-related { flex-direction: column; align-items: flex-start; padding: 22px 22px; gap: 16px; }
  .ab-related__cta { align-self: flex-end; }
}

/* Use-Case step — 3D showcase variant (alternative to image) */
.uc-step-v2__showcase {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: visible;
}
.uc-step-v2__showcase .platform-showcase {
  max-width: 100% !important;
  margin: 0 !important;
  transform: perspective(2400px) rotateX(6deg) rotateY(-10deg) !important;
  animation: none !important;
}
.uc-step-v2--flip .uc-step-v2__showcase .platform-showcase {
  transform: perspective(2400px) rotateX(6deg) rotateY(10deg) !important;
}
.uc-step-v2__showcase:hover .platform-showcase {
  transform: perspective(2400px) rotateX(0) rotateY(0) translateY(-3px) !important;
}
.uc-step-v2__showcase-edit {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
@media (max-width: 768px) {
  .uc-step-v2__showcase .platform-showcase { transform: none !important; }
}

/* Staff toolbar under each use-case visual — always shown so staff can
   switch between the current image and any of our 3D platform snippets. */
.uc-step-v2__visual-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px dashed rgba(99, 102, 241, 0.28);
  border-radius: 10px;
}
.uc-step-v2__visual-toolbar-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.uc-step-v2__visual-toolbar-label i { font-size: 0.9rem; }
.uc-step-v2__visual-toolbar .m-2 { margin: 0 !important; }

/* === Risk scoring & decision === */
.sc-risk { padding: 24px 28px; min-height: 480px; background: #fff; }
.sc-risk__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sc-risk__head > i { font-size: 1.8rem; color: #f59e0b; }
.sc-risk__title { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.sc-risk__sub   { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sc-risk__live { margin-left: auto; background: rgba(34,197,94,0.10); color: #15803d; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.sc-risk__live span { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: showcasePulse 2s infinite; }

.sc-risk__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) { .sc-risk__grid { grid-template-columns: 1fr; } }

/* --- Left: gauge + decision --- */
.sc-risk__score { display: flex; flex-direction: column; gap: 16px; }
.sc-risk__gauge {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.sc-risk__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.sc-risk__ring-bg {
  fill: none;
  stroke: #f1f5f9;
  stroke-width: 12;
}
.sc-risk__ring-fg {
  fill: none;
  stroke: url(#scrisk);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease-out;
}
.sc-risk__score-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sc-risk__score-value {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  display: inline-flex;
  align-items: baseline;
}
.sc-risk__score-value span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 3px;
}
.sc-risk__score-band {
  font-size: 0.78rem;
  font-weight: 700;
  color: #d97706;
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-risk__decision {
  background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(239,68,68,0.08));
  border: 1px solid rgba(245,158,11,0.24);
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
}
.sc-risk__decision--review .sc-risk__decision-value { color: #b45309; }
.sc-risk__decision-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}
.sc-risk__decision-value {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-risk__decision-value i { font-size: 1.1rem; }
.sc-risk__decision-conf {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #64748b;
}

.sc-risk__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.sc-risk__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  color: #64748b;
  background: #f8fafc;
  transition: all 0.15s;
}
.sc-risk__btn--approve { color: #15803d; border-color: rgba(34,197,94,0.22); background: rgba(34,197,94,0.08); }
.sc-risk__btn--review  { color: #b45309; border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.08); font-weight: 800; box-shadow: 0 2px 8px rgba(245,158,11,0.15); }
.sc-risk__btn--reject  { color: #b91c1c; border-color: rgba(239,68,68,0.22); background: rgba(239,68,68,0.08); }

/* --- Right: category breakdown --- */
.sc-risk__categories { display: flex; flex-direction: column; gap: 10px; }
.sc-risk__cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}
.sc-risk__cat-head span {
  font-size: 0.68rem;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.sc-risk__cat {
  display: grid;
  grid-template-columns: 24px 1fr 90px 30px;
  gap: 10px;
  align-items: center;
  font-size: 0.82rem;
  color: #1e293b;
  padding: 4px 0;
}
.sc-risk__cat > i {
  color: #6366f1;
  font-size: 0.95rem;
  text-align: center;
}
.sc-risk__cat--ok   > i { color: #16a34a; }
.sc-risk__cat--warn > i { color: #d97706; }
.sc-risk__cat-name { font-weight: 500; }
.sc-risk__bar {
  position: relative;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.sc-risk__bar > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  border-radius: 999px;
}
.sc-risk__bar--warn > span {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.sc-risk__cat-val {
  text-align: right;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

.sc-risk__cat-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.sc-risk__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #b45309;
  background: rgba(245,158,11,0.08);
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 600;
}
.sc-risk__flag i { color: #d97706; }

@media (max-width: 560px) {
  .sc-risk { padding: 18px 20px; min-height: 0; }
  .sc-risk__gauge { width: 180px; height: 180px; }
  .sc-risk__score-value { font-size: 2.2rem; }
  .sc-risk__cat { grid-template-columns: 22px 1fr 60px 30px; font-size: 0.76rem; }
}

/* ============================================================
   FIX — let showcases size naturally, especially when embedded
   in narrow use-case step cards. Tall `min-height` values were
   forcing content past the rounded-corner clip and past the
   badges/tags on the right edge.
   ============================================================ */
.platform-showcase .sc-risk,
.platform-showcase .sc-dataroom,
.platform-showcase .sc-bgcheck,
.platform-showcase .sc-classify,
.platform-showcase .sc-quest,
.platform-showcase .sc-translate,
.platform-showcase .sc-workflow,
.platform-showcase .sc-docintel {
  min-height: 0 !important;
}

/* Use-case embed specifically — shrink the inner components so all
   badges, row tags and the risk-score column fit comfortably inside
   the step card. */
.uc-step-v2__showcase .platform-showcase .sc-risk__grid {
  grid-template-columns: 240px 1fr;
  gap: 20px;
}
.uc-step-v2__showcase .platform-showcase .sc-risk__gauge {
  width: 180px; height: 180px;
}
.uc-step-v2__showcase .platform-showcase .sc-risk__score-value { font-size: 2.3rem; }
.uc-step-v2__showcase .platform-showcase .sc-risk__cat {
  grid-template-columns: 22px 1fr 60px 28px;
  font-size: 0.76rem;
}

.uc-step-v2__showcase .platform-showcase .sc-dataroom__cols {
  grid-template-columns: 200px 1fr;
}
.uc-step-v2__showcase .platform-showcase .sc-dataroom__row {
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
}
.uc-step-v2__showcase .platform-showcase .sc-dataroom__row-name { font-size: 0.78rem; }
.uc-step-v2__showcase .platform-showcase .sc-dataroom__row-meta { font-size: 0.66rem; }
.uc-step-v2__showcase .platform-showcase .sc-dataroom__tag {
  font-size: 0.66rem;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ============================================================
   ABOUT PAGE (page_about.html)
   ============================================================ */

/* ── HERO ── */
.ab-hero {
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
}
.ab-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 25% 40%, rgba(99,102,241,0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(168,85,247,0.12), transparent 55%),
    radial-gradient(ellipse 40% 35% at 60% 80%, rgba(245,158,11,0.08), transparent 55%);
  z-index: 0;
}
.ab-hero__inner { position: relative; z-index: 1; max-width: 920px; }
.ab-hero__title { margin: 18px 0 20px; line-height: 1.05; }
.ab-hero__sub   { max-width: 760px; margin-bottom: 18px; }
.ab-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 600;
}
.ab-hero__badge i { color: var(--accent-1); }

/* ── MARKET (headline + 3 stats) ── */
.ab-market { padding: 80px 0; }
.ab-market__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 1024px) { .ab-market__grid { grid-template-columns: 1fr; gap: 40px; } }
.ab-market__title { margin: 14px 0 18px; line-height: 1.15; }
.ab-market__body  { font-size: 1.02rem; color: var(--text-1); line-height: 1.7; }
.ab-market__body p { margin: 0 0 14px; }

.ab-market__stats { display: flex; flex-direction: column; gap: 16px; }
.ab-market__stat {
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ab-market__stat:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,0.06); }
.ab-market__stat--gap {
  background: linear-gradient(135deg, #0f172a, #1e1b4b 60%, #4c1d95);
  color: #fff;
  border-color: transparent;
}
.ab-market__stat--gap .ab-market__stat-value {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.ab-market__stat--gap .ab-market__stat-label { color: rgba(255,255,255,0.85); }
.ab-market__stat-value {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-market__stat-label {
  font-size: 0.88rem;
  color: var(--text-2);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Shared section header ── */
.ab-section { padding: 90px 0; position: relative; }
.ab-section--failures { background: linear-gradient(180deg, transparent, rgba(239,68,68,0.03) 50%, transparent); }
.ab-section__intro { max-width: 860px; margin-bottom: 50px; }
.ab-section__title { margin: 14px 0 18px; line-height: 1.1; }
.ab-section__body  { font-size: 1.02rem; color: var(--text-2); line-height: 1.7; max-width: 760px; }
.ab-section__body p { margin: 0 0 14px; }
.section-chip--warning {
  background: rgba(239,68,68,0.10);
  color: #b91c1c;
  border-color: rgba(239,68,68,0.25);
}

/* ── FAILURES (the two traps) ── */
.ab-failures__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 860px) { .ab-failures__grid { grid-template-columns: 1fr; } }
.ab-failure {
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.ab-failure::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(239,68,68,0.10), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.ab-failure:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.08);
  border-color: rgba(239,68,68,0.30);
}
.ab-failure__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 8px 16px -6px rgba(239,68,68,0.35);
}
.ab-failure__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; color: #0f172a; position: relative; }
.ab-failure__body  { font-size: 0.95rem; color: var(--text-2); line-height: 1.65; margin: 0 0 18px; position: relative; }
.ab-failure__ceil {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(239,68,68,0.08);
  border: 1px dashed rgba(239,68,68,0.22);
  color: #b91c1c;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  position: relative;
}

/* ── THESIS (hero card) ── */
.ab-thesis { padding: 90px 0; }
.ab-thesis__card {
  background: linear-gradient(135deg, #0f172a, #1e1b4b 55%, #4c1d95);
  border-radius: 32px;
  padding: 72px 64px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.30);
}
.ab-thesis__aurora {
  position: absolute;
  top: -20%; right: -15%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(168,85,247,0.40), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  animation: hero3dGlow 12s ease-in-out infinite;
}
.ab-thesis__copy { position: relative; z-index: 1; max-width: 820px; }
.ab-thesis .section-chip { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.ab-thesis__title { margin: 18px 0 20px; color: #fff; }
.ab-thesis__body  { font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,0.88); }
.ab-thesis__body p { margin: 0 0 14px; }
.ab-thesis__body strong { color: #fff; }
@media (max-width: 768px) { .ab-thesis__card { padding: 48px 28px; border-radius: 24px; } }

/* ── IN-HOUSE PILLARS ── */
.ab-section--pillars { background: linear-gradient(180deg, transparent, rgba(99,102,241,0.03) 50%, transparent); }
.ab-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .ab-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ab-pillars__grid { grid-template-columns: 1fr; } }

.ab-pillar {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
  padding: 26px 28px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.ab-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,23,42,0.07);
  border-color: rgba(99,102,241,0.30);
}
.ab-pillar__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 16px -6px rgba(99,102,241,0.35);
}
.ab-pillar__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: #0f172a; line-height: 1.3; }
.ab-pillar__body  { font-size: 0.92rem; color: var(--text-2); line-height: 1.65; margin: 0; }
.ab-pillar--add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-style: dashed;
  background: transparent;
}
.ab-pillar__edit {
  position: absolute;
  top: 14px; right: 14px;
}

/* ── 3-STEP FRAMEWORK (big alternating rows) ── */
.ab-framework { padding: 90px 0; }
.ab-framework__steps { display: flex; flex-direction: column; gap: 80px; margin-top: 30px; }
.ab-framework__step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ab-framework__step--flip { direction: rtl; }
.ab-framework__step--flip > * { direction: ltr; }
@media (max-width: 1024px) { .ab-framework__step, .ab-framework__step--flip { grid-template-columns: 1fr; direction: ltr; gap: 40px; } }

.ab-framework__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-gold));
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 22px;
  box-shadow: 0 12px 28px -8px rgba(99,102,241,0.40);
}
.ab-framework__title {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ab-framework__title i { color: var(--accent-1); font-size: 1.2rem; }
.ab-framework__body { font-size: 1rem; color: var(--text-1); line-height: 1.75; max-width: 540px; }
.ab-framework__body p { margin: 0 0 12px; }
.ab-framework__body strong { color: #0f172a; }
.ab-framework__body em { color: var(--accent-1); font-style: normal; font-weight: 600; }

/* ── TEAM (premium card grid) ── */
.ab-team { padding: 100px 0; background: linear-gradient(180deg, transparent, rgba(99,102,241,0.04) 50%, transparent); }
.ab-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}
@media (max-width: 960px) { .ab-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ab-team__grid { grid-template-columns: 1fr; } }

/* Founders row — 2 premium wide cards on top */
.ab-founders__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 30px;
  margin-bottom: 36px;
}
@media (max-width: 860px) { .ab-founders__grid { grid-template-columns: 1fr; } }

.ab-team__card--founder {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 26px;
  text-align: left;
  padding: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: 0 20px 50px -20px rgba(15,23,42,0.12);
}
.ab-team__card--founder::before {
  top: -50%; left: -10%;
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(168,85,247,0.15), transparent 60%);
  opacity: 0.9;
}
.ab-team__photo--founder {
  width: 140px; height: 140px;
  margin: 0;
  border-radius: 24px;
  flex-shrink: 0;
  box-shadow: 0 20px 36px -12px rgba(99,102,241,0.38);
}
.ab-team__photo--founder .ab-team__photo-initial { font-size: 3.4rem; }
.ab-team__founder-body {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ab-team__founder-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--accent-gold, #f59e0b), #f97316);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(245,158,11,0.30);
}
.ab-team__card--founder .ab-team__name { font-size: 1.35rem; }
.ab-team__card--founder .ab-team__bio { font-size: 0.95rem; line-height: 1.65; }
.ab-team__card--founder .ab-team__socials { justify-content: flex-start; }

@media (max-width: 520px) {
  .ab-team__card--founder { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; }
  .ab-team__photo--founder { margin: 0 auto; }
  .ab-team__card--founder .ab-team__founder-pill { margin-left: auto; margin-right: auto; }
  .ab-team__card--founder .ab-team__socials { justify-content: center; }
}
.ab-team__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 22px;
  padding: 30px 28px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  overflow: hidden;
}
.ab-team__card::before {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(99,102,241,0.10), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.ab-team__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -16px rgba(15,23,42,0.12);
  border-color: rgba(99,102,241,0.30);
}
.ab-team__card:hover::before { opacity: 1; }

.ab-team__photo {
  position: relative;
  width: 128px; height: 128px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 16px 32px -10px rgba(99,102,241,0.35);
}
.ab-team__photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ab-team__photo-initial {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
}
.ab-team__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  position: relative;
}
.ab-team__role {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-1);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  position: relative;
}
.ab-team__bio {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 18px;
  position: relative;
}
.ab-team__socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.ab-team__socials a {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(99,102,241,0.08);
  color: var(--accent-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.ab-team__socials a:hover {
  background: var(--accent-1);
  color: #fff;
  transform: translateY(-2px);
}
.ab-team__edit {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
}

/* ── ABOUT CTA ── */
.ab-cta { padding: 80px 0 120px; }
.ab-cta__card {
  background: linear-gradient(135deg, #0f172a, #1e1b4b 55%, #4c1d95);
  border-radius: 32px;
  padding: 72px 48px;
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 80px rgba(15,23,42,0.20);
}
.ab-cta__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; margin: 0 0 14px; }
.ab-cta__sub   { color: rgba(255,255,255,0.82); max-width: 540px; margin: 0 auto 28px; line-height: 1.6; }

/* Ensure the platform-showcase inside framework steps is sized well */
.ab-framework__visual .platform-showcase {
  transform: perspective(2400px) rotateY(-8deg) rotateX(4deg);
  max-width: 100%;
}
.ab-framework__step--flip .ab-framework__visual .platform-showcase {
  transform: perspective(2400px) rotateY(8deg) rotateX(4deg);
}
.ab-framework__step:hover .platform-showcase {
  transform: perspective(2400px) rotateY(0) rotateX(0);
}
@media (max-width: 768px) {
  .ab-framework__visual .platform-showcase { transform: none !important; }
}

/* Mobile polish */
@media (max-width: 768px) {
  .ab-hero { padding: 110px 0 60px; }
  .ab-section { padding: 60px 0; }
  .ab-market { padding: 60px 0; }
  .ab-thesis { padding: 60px 0; }
  .ab-framework { padding: 60px 0; }
  .ab-framework__steps { gap: 48px; }
  .ab-team { padding: 60px 0; }
  .ab-cta { padding: 48px 0 80px; }
  .ab-cta__card { padding: 48px 24px; border-radius: 24px; }
  .ab-hero__title { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
}

/* ============================================================
   ARTICLES & RESEARCH (/v2/articles/ + /v2/articles/<slug>/)
   ============================================================ */

/* ── Hero ── */
.art-hero { padding: 140px 0 40px; }
.art-hero__inner { max-width: 820px; }
.art-hero__title { margin: 18px 0 14px; line-height: 1.1; }
.art-hero__sub   { max-width: 660px; margin-bottom: 32px; }

.art-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: #f1f5f9;
  border-radius: 14px;
  margin-top: 20px;
}
.art-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s;
}
.art-tab:hover { color: var(--accent-1); background: rgba(99,102,241,0.06); }
.art-tab.is-active {
  background: #fff;
  color: var(--accent-1);
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.art-tab i { font-size: 0.92rem; }

/* ── List grid ── */
.art-list { padding: 40px 0 100px; }
.art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .art-grid { grid-template-columns: 1fr; } }
.art-grid--related { margin-top: 24px; }

/* ── Card ── */
.art-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.art-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(15,23,42,0.14);
  border-color: rgba(99,102,241,0.30);
  color: inherit;
}
.art-card--hero {
  grid-column: span 2;
}
@media (max-width: 980px) { .art-card--hero { grid-column: span 1; } }

.art-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.art-card__cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.art-card__cover-pattern {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.art-card__cover-icon {
  position: relative;
  font-size: 4rem;
  opacity: 0.92;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.18));
}
.art-card__cover-tagline {
  position: absolute;
  bottom: 14px; left: 18px; right: 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.88);
  z-index: 2;
}
.art-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(15,23,42,0.80);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  backdrop-filter: blur(6px);
}
.art-card__badge i { font-size: 0.78rem; }

/* Cover variants — 8 gradient themes */
.art-card__cover--purple, .art-post__hero--purple  { background: linear-gradient(135deg, #7e22ce, #a855f7 60%, #6366f1); }
.art-card__cover--red,    .art-post__hero--red     { background: linear-gradient(135deg, #b91c1c, #ef4444 55%, #f97316); }
.art-card__cover--green,  .art-post__hero--green   { background: linear-gradient(135deg, #15803d, #16a34a 60%, #22c55e); }
.art-card__cover--blue,   .art-post__hero--blue    { background: linear-gradient(135deg, #1d4ed8, #3b82f6 55%, #06b6d4); }
.art-card__cover--amber,  .art-post__hero--amber   { background: linear-gradient(135deg, #b45309, #f59e0b 55%, #f97316); }
.art-card__cover--indigo, .art-post__hero--indigo  { background: linear-gradient(135deg, #1e1b4b, #4338ca 55%, #6366f1); }
.art-card__cover--gold,   .art-post__hero--gold    { background: linear-gradient(135deg, #92400e, #f59e0b 50%, #fbbf24); }
.art-card__cover--dark,   .art-post__hero--dark    { background: linear-gradient(135deg, #0f172a, #1e1b4b 50%, #4c1d95); }

.art-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.art-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  margin: 0;
}
.art-card--hero .art-card__title { font-size: 1.35rem; }
.art-card__excerpt {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.art-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-3);
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.art-card__author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-2);
}
.art-card__author img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.art-card__dot { opacity: 0.4; }

.art-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-3);
}
.art-empty i { font-size: 3rem; margin-bottom: 14px; display: block; }

/* ── Post detail ── */
.art-post { }

.art-post__hero {
  padding: 110px 0 60px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.art-post__hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08), transparent 45%);
  pointer-events: none;
}
.art-post__hero-inner { position: relative; z-index: 1; max-width: 860px; }
.art-post__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 22px;
  transition: color 0.2s;
}
.art-post__back:hover { color: #fff; }
.art-post__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}
.art-post__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 18px;
  color: #fff;
}
.art-post__excerpt {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin: 0 0 26px;
  max-width: 740px;
}
.art-post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.82);
}
.art-post__author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.art-post__author img,
.art-post__author-initial {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}
.art-post__author-name { display: flex; flex-direction: column; line-height: 1.25; }
.art-post__author-name b { color: #fff; font-size: 0.92rem; }
.art-post__author-name span { font-size: 0.74rem; opacity: 0.8; }
.art-post__dot { opacity: 0.5; }

.art-post__coverart {
  margin: -40px auto 0;
  padding: 0 20px;
  max-width: 900px;
  position: relative;
  z-index: 2;
}
.art-post__coverart img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 30px 60px -20px rgba(15,23,42,0.24);
  display: block;
}

.art-post__body-wrap { padding: 60px 0 80px; }
.art-post__body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-1);
}
.art-post__body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 48px 0 16px;
  color: #0f172a;
}
.art-post__body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 32px 0 12px;
  color: #0f172a;
}
.art-post__body p  { margin: 0 0 18px; }
.art-post__body ul, .art-post__body ol { margin: 0 0 20px; padding-left: 22px; }
.art-post__body li { margin: 8px 0; }
.art-post__body strong { color: #0f172a; }
.art-post__body em { color: var(--accent-1); font-style: normal; font-weight: 500; }
.art-post__body a { color: var(--accent-1); text-decoration: underline; text-underline-offset: 3px; }

/* Share bar */
.art-post__share {
  max-width: 720px;
  margin: 50px auto 0;
  padding-top: 28px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.art-post__share-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 6px;
}
.art-post__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.art-post__share-btn:hover {
  background: var(--accent-1);
  color: #fff;
  border-color: var(--accent-1);
  transform: translateY(-1px);
}
.art-post__share-btn i { font-size: 0.92rem; }

/* Related */
.art-related { padding: 60px 0 100px; background: linear-gradient(180deg, transparent, rgba(99,102,241,0.03) 50%, transparent); }
.art-related__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 20px; color: #0f172a; }

@media (max-width: 768px) {
  .art-hero { padding: 100px 0 30px; }
  .art-post__hero { padding: 90px 0 50px; }
  .art-post__coverart { margin-top: -24px; }
  .art-post__body-wrap { padding: 40px 0 60px; }
  .art-post__body { font-size: 0.98rem; }
  .art-post__body h2 { font-size: 1.3rem; }
}

/* ============================================================
   ARTICLE — RESEARCH PDF "MERCURIUM ANALYSIS" PREVIEW
   Mirrors file_share/.../page_analysis_preview.html at a glance.
   ============================================================ */
.art-pdf-preview {
  padding: 60px 0 40px;
  background: linear-gradient(180deg, transparent, rgba(99,102,241,0.03) 50%, transparent);
}
.art-pdf-preview__intro {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}
.art-pdf-preview__title { margin: 18px 0 14px; line-height: 1.15; }
.art-pdf-preview__sub   { max-width: 680px; margin: 0 auto; }
.section-chip--mercurium {
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10));
  color: var(--accent-1);
  border-color: rgba(99,102,241,0.22);
}

/* Outer stage — premium dark frame with tilted 3D */
.art-pdf-preview__stage {
  background: #0f172a;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.35),
              0 12px 24px -8px rgba(15,23,42,0.15);
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.art-pdf-preview__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.art-pdf-preview__chrome-left { display: inline-flex; align-items: center; gap: 8px; }
.art-pdf-preview__chrome-dot { width: 10px; height: 10px; border-radius: 50%; }
.art-pdf-preview__chrome-title {
  margin-left: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.art-pdf-preview__chrome-title i { color: #ef4444; }
.art-pdf-preview__chrome-viewmodes { display: inline-flex; gap: 4px; background: rgba(255,255,255,0.08); padding: 4px; border-radius: 10px; }
.art-pdf-preview__vb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px;
  font-size: 0.76rem; font-weight: 600;
  color: rgba(255,255,255,0.72);
  cursor: default;
}
.art-pdf-preview__vb--active { background: rgba(255,255,255,0.14); color: #fff; }

/* 2-col grid: sidebar + document */
.art-pdf-preview__grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: #0f172a;
}
@media (max-width: 900px) { .art-pdf-preview__grid { grid-template-columns: 1fr; } }

/* ── Sidebar (dark, pane-like) ── */
.art-pdf-preview__sidebar {
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 900px) {
  .art-pdf-preview__sidebar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
}
.art-pdf-preview__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px 14px 12px;
  color: rgba(255,255,255,0.82);
}
.art-pdf-preview__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: #fff;
}
.art-pdf-preview__card-head i { color: var(--accent-1); }
.art-pdf-preview__card-head h3 { font-size: 0.82rem; font-weight: 700; margin: 0; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.art-pdf-preview__count {
  font-size: 0.68rem;
  background: rgba(255,255,255,0.10);
  padding: 2px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,0.72);
}

.art-pdf-preview__hl-selector {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 10px;
}
.art-pdf-preview__hl-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 6px;
  border-radius: 7px;
  color: rgba(255,255,255,0.68);
}
.art-pdf-preview__hl-btn--active { background: rgba(255,255,255,0.16); color: #fff; }

.art-pdf-preview__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 2px;
  font-size: 0.78rem;
}
.art-pdf-preview__switch {
  width: 32px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  position: relative;
}
.art-pdf-preview__switch > span {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.art-pdf-preview__switch--on { background: var(--accent-1); }
.art-pdf-preview__switch--on > span { left: 16px; }

.art-pdf-preview__filter {
  display: grid;
  grid-template-columns: 14px 1fr 24px;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
  padding: 5px 2px;
}
.art-pdf-preview__filter b {
  text-align: right;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.art-pdf-preview__dot { width: 10px; height: 10px; border-radius: 50%; display: block; }

.art-pdf-preview__tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}
.art-pdf-preview__tool i { color: var(--accent-1); }

.art-pdf-preview__card--download {
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(168,85,247,0.12));
  border-color: rgba(99,102,241,0.28);
}
.art-pdf-preview__dl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.art-pdf-preview__dl:hover { background: rgba(255,255,255,0.10); color: #fff; }
.art-pdf-preview__dl > i { font-size: 1.4rem; color: #ef4444; }
.art-pdf-preview__dl-title { font-size: 0.82rem; font-weight: 700; }
.art-pdf-preview__dl-sub   { font-size: 0.7rem; color: rgba(255,255,255,0.64); margin-top: 2px; }

/* ── Document viewer (the hero — tilted 3D page with layout overlays) ── */
.art-pdf-preview__viewer {
  padding: 34px 42px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  perspective: 2400px;
  background:
    radial-gradient(circle at 80% 20%, rgba(168,85,247,0.14), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(99,102,241,0.10), transparent 60%);
}
.art-pdf-preview__doc {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55),
              0 0 0 1px rgba(255,255,255,0.08) inset;
  overflow: hidden;
  transform: rotateX(4deg) rotateY(-6deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.art-pdf-preview__doc:hover { transform: rotateX(0deg) rotateY(0deg); }
.art-pdf-preview__doc-img { width: 100%; height: auto; object-fit: contain; display: block; }

/* Document page — renders the ACTUAL research paper (title, abstract, full body) so
   visitors can read the paper itself while Mercurium's layout + annotation overlays
   sit on top. Uses serif typography to feel like a real PDF. */
.art-pdf-preview__doc-mock {
  position: relative;
  padding: 56px 68px 80px;
  color: #0f172a;
  font-family: Georgia, 'Times New Roman', 'Times', serif;
  z-index: 0;
}
.art-pdf-preview__mock-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 6px;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.art-pdf-preview__mock-byline {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 24px;
  font-style: italic;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}
.art-pdf-preview__mock-h {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 22px 0 10px;
}
.art-pdf-preview__mock-text {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #1e293b;
  margin: 0 0 18px;
  text-align: justify;
  font-style: italic;
}
.art-pdf-preview__mock-body {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #1e293b;
  text-align: justify;
}
.art-pdf-preview__mock-body h2 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  margin: 26px 0 10px;
  font-family: Georgia, serif;
}
.art-pdf-preview__mock-body h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin: 18px 0 8px;
  font-family: Georgia, serif;
}
.art-pdf-preview__mock-body p  { margin: 0 0 14px; }
.art-pdf-preview__mock-body ul,
.art-pdf-preview__mock-body ol { padding-left: 24px; margin: 0 0 16px; }
.art-pdf-preview__mock-body li { margin-bottom: 4px; }
.art-pdf-preview__mock-body strong { color: #0f172a; font-weight: 700; }
.art-pdf-preview__mock-body em     { color: #1e293b; font-style: italic; }
/* Subtle page fade at the bottom so long content feels like a scrolled/truncated page */
.art-pdf-preview__doc::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, #fff 85%);
  pointer-events: none;
  z-index: 3;
}

/* Layout overlay boxes — SAME colour system as the real overlay-element.
   Kept transparent inside so the actual paper text remains readable under them. */
.art-pdf-preview__overlay {
  position: absolute;
  border: 2px solid;
  background: transparent;
  border-radius: 6px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  z-index: 2;
  animation: artLayoutBoxFade 0.5s ease-out both;
}
/* Label sits OUTSIDE the box (top-left corner) so it never covers the paper text. */
.art-pdf-preview__overlay::before {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  left: 6px;
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.art-pdf-preview__overlay--heading { border-color: #2563eb; color: #2563eb; }
.art-pdf-preview__overlay--table   { border-color: #10b981; color: #10b981; }
.art-pdf-preview__overlay--figure  { border-color: #f59e0b; color: #f59e0b; }
.art-pdf-preview__overlay--text    { border-color: #64748b; color: #64748b; }
@keyframes artLayoutBoxFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Annotation pins (inline entity chips) */
.art-pdf-preview__pin {
  position: absolute;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  letter-spacing: 0.02em;
  animation: artPinPulse 2.4s ease-in-out infinite;
  z-index: 2;
}
.art-pdf-preview__pin:nth-child(odd)  { animation-delay: 0.3s; }
.art-pdf-preview__pin:nth-child(even) { animation-delay: 0.9s; }
@keyframes artPinPulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.08); opacity: 0.92; }
}

.art-pdf-preview__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px 0;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.62);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
}
.art-pdf-preview__footer i { font-size: 0.82rem; }

/* ── CTA bar below ── */
.art-pdf-preview__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 28px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 10px 30px -10px rgba(15,23,42,0.08);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.art-pdf-preview__cta-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 4px;
}
.art-pdf-preview__cta-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  max-width: 540px;
}
.art-pdf-preview__cta-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .art-pdf-preview__viewer { padding: 24px 22px 16px; }
  .art-pdf-preview__doc    { transform: none !important; }
  .art-pdf-preview__cta    { flex-direction: column; align-items: flex-start; padding: 22px; }
  .art-pdf-preview__cta-buttons .btn-v2 { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
  .art-pdf-preview__chrome-viewmodes { display: none; }
  .art-pdf-preview__overlay { font-size: 8px; padding: 3px 6px; }
  .art-pdf-preview__pin     { font-size: 8px; padding: 2px 5px; }
}

/* ── List-page PDF ribbon on research cards ── */
.art-card__pdf-ribbon {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239,68,68,0.95);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(239,68,68,0.30);
}
.art-card__pdf-ribbon i { font-size: 0.74rem; }

/* Landing-page open-source mention */
.lp-os { padding: 70px 0; background: linear-gradient(180deg, #fff 0%, #fafbff 100%); }
.lp-os__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: center;
}
.lp-os__title {
  font-family: 'Mercurium', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 12px 0 12px;
  color: var(--text-1);
  line-height: 1.15;
}
.lp-os__sub { color: var(--text-2); line-height: 1.65; max-width: 620px; margin: 0 0 22px; }
.lp-os__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 880px) { .lp-os__inner { grid-template-columns: 1fr; gap: 28px; } }

/* Partnership card — used on landing + open-source tab */
.lp-partner {
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 6px 24px -12px rgba(15,23,42,0.10);
  position: relative;
  max-width: 100%;
}
.art-opensource .lp-partner {
  margin: 0 auto 28px;
  max-width: 520px;
  text-align: center;
}
.lp-partner__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 10px;
}
.lp-partner__org { display: flex; align-items: center; gap: 12px; }
.art-opensource .lp-partner__org { justify-content: center; }
.lp-partner__org > i {
  font-size: 1.4rem;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.10));
  color: var(--accent-1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-partner__org > div { min-width: 0; text-align: left; }
.art-opensource .lp-partner__org > div { text-align: left; }
.lp-partner__name { font-weight: 700; color: var(--text-1); font-size: 0.95rem; overflow-wrap: anywhere; }
.lp-partner__sub  { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.lp-partner__cta  { margin-top: 14px; width: 100%; justify-content: center; }
.art-opensource .lp-partner__cta,
.art-research-intro .lp-partner__cta { width: auto; padding-left: 22px; padding-right: 22px; }
.art-research-intro { padding: 24px 0 8px; }
.art-research-intro__head { text-align: center; max-width: 760px; margin: 0 auto 22px; }
.art-research-intro .lp-partner { margin: 0 auto 24px; max-width: 520px; text-align: center; }
.art-research-intro .lp-partner__org { justify-content: center; }
.art-research-intro .lp-partner__org > div { text-align: left; }

/* Open-source section on /research/ — only shown when active_category == 'research' */
.art-opensource { padding: 24px 0 8px; }
.art-os-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.art-os-title {
  font-family: 'Mercurium', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 12px 0 10px;
  color: var(--text-1);
}
.art-os-sub { color: var(--text-2); margin: 0; line-height: 1.6; }
.art-os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.art-os-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.art-os-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(15,23,42,0.18);
  border-color: rgba(99,102,241,0.35);
  color: inherit;
}
.art-os-card--soon {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05)) #fff;
  border-style: dashed;
  cursor: default;
}
.art-os-card--soon:hover { transform: none; box-shadow: 0 1px 3px rgba(15,23,42,0.04); border-color: rgba(99,102,241,0.35); }
.art-os-card__head { display: flex; align-items: flex-start; gap: 12px; }
.art-os-card__head > i:first-child {
  font-size: 1.6rem;
  color: var(--accent-1);
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(99,102,241,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.art-os-card--soon .art-os-card__head > i:first-child { color: var(--accent-2); background: rgba(139,92,246,0.10); }
.art-os-card__head > div { flex: 1; min-width: 0; }
.art-os-card__name { font-weight: 700; font-size: 1rem; color: var(--text-1); }
.art-os-card__org  { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }
.art-os-card__ext  { color: var(--text-3); font-size: 1rem; }
.art-os-card:hover .art-os-card__ext { color: var(--accent-1); }
.art-os-card__desc { margin: 0; font-size: 0.88rem; color: var(--text-2); line-height: 1.55; }
.art-os-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.art-os-tag {
  font-size: 0.7rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(15,23,42,0.04); color: var(--text-2);
}

/* Articles list — tabs row with staff "+ Add article" button on the right */
.art-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.art-tabs-row .art-tabs { margin-top: 0; }
.art-tabs-admin { display: inline-flex; gap: 10px; }
.art-tabs-admin .m-2 { margin: 0 !important; }

/* Mobile: long labels like "Research & Open Source" overflow on phones.
   Make the tabs row horizontally scrollable, full-bleed (escape container
   padding), and prevent each label from wrapping mid-word. */
@media (max-width: 700px) {
  .art-tabs-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px 4px;
    margin-left: -16px;
    margin-right: -16px;
    justify-content: flex-start;
  }
  .art-tabs-row::-webkit-scrollbar { display: none; }
  .art-tabs {
    flex-shrink: 0;
    flex-wrap: nowrap;
    max-width: none;
  }
  .art-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 9px 14px;
    font-size: 0.82rem;
  }
}

/* ──────────────────────────────────────────────────────────────
   Full-width primary button variant
   ────────────────────────────────────────────────────────────── */
.btn-v2-full {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 28px auto 0;
  max-width: 620px;
  padding: 16px 32px;
  font-size: 1rem;
}

/* ──────────────────────────────────────────────────────────────
   RESEARCH ANALYSIS — premium PDF preview chrome
   (distinct from .art-pdf-preview used for showcase screenshots)
   ────────────────────────────────────────────────────────────── */
.art-pdf-preview .research-analysis {
  background: linear-gradient(180deg, #0b0f1a 0%, #0b1020 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.6),
    0 20px 40px -20px rgba(99,102,241,0.25);
  margin: 28px auto 0;
  max-width: 1180px;
}

.research-analysis__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(17,23,40,0.95), rgba(12,17,30,0.95));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.research-analysis__topbar-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.research-analysis__topbar-left > i {
  font-size: 1.4rem;
  color: #ef4444;
  flex-shrink: 0;
}
.research-analysis__doc-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.research-analysis__doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
  flex-wrap: wrap;
}
.research-analysis__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #22c55e;
  font-weight: 600;
}
.research-analysis__live > span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: ra-pulse 2s infinite;
}
@keyframes ra-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.research-analysis__viewmodes {
  display: inline-flex;
  gap: 2px;
  background: rgba(255,255,255,0.06);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis__vb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.68);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.research-analysis__vb:hover { color: #fff; background: rgba(255,255,255,0.05); }
.research-analysis__vb.is-active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

/* ── Grid: sidebar + viewer ── */
.research-analysis__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 620px;
}
@media (max-width: 960px) {
  .research-analysis__grid { grid-template-columns: 1fr; }
}

.research-analysis__sidebar {
  background: rgba(8,12,22,0.6);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
@media (max-width: 960px) {
  .research-analysis__sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-direction: row;
    overflow-x: auto;
    padding: 14px;
  }
  .research-analysis__sidebar > .research-analysis__card { min-width: 240px; flex-shrink: 0; }
}

.research-analysis__card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
}
.research-analysis__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.research-analysis__card-head i { color: var(--accent-1); font-size: 0.92rem; }
.research-analysis__card-head h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}
.research-analysis__count {
  font-size: 0.68rem;
  background: rgba(99,102,241,0.25);
  color: #c7d2fe;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.research-analysis__hl-selector {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.research-analysis__hl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.research-analysis__hl-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }
.research-analysis__hl-btn.is-active {
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(167,139,250,0.2));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.35);
}

.research-analysis__filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.18s ease;
}
.research-analysis__filter:hover { background: rgba(255,255,255,0.04); }
.research-analysis__filter > span:nth-child(2) { flex: 1; }
.research-analysis__filter b {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
}
.research-analysis__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.research-analysis__tool {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.research-analysis__tool:hover { background: rgba(255,255,255,0.06); color: #fff; }
.research-analysis__tool i { color: var(--accent-1); }

.research-analysis__card--download { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); }
.research-analysis__dl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: all 0.2s ease;
}
.research-analysis__dl:hover { background: rgba(255,255,255,0.09); color: #fff; transform: translateY(-1px); }
.research-analysis__dl > i { font-size: 1.4rem; color: #ef4444; }
.research-analysis__dl-title { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.research-analysis__dl-sub   { font-size: 0.68rem; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ── Viewer ── */
.research-analysis__viewer {
  padding: 28px;
  background:
    radial-gradient(ellipse at top left,  rgba(99,102,241,0.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(167,139,250,0.06), transparent 55%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.research-analysis__doc {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 8.5 / 11;
  border-radius: 10px;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.55),
    0 10px 30px -10px rgba(99,102,241,0.25);
  transform: perspective(2200px) rotateY(-3deg) rotateX(1deg);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.research-analysis__doc:hover { transform: perspective(2200px) rotateY(0deg) rotateX(0deg); }

.research-analysis__paper {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.research-analysis__paper-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.research-analysis__mock {
  padding: 40px 44px;
  height: 100%;
  overflow-y: auto;
  color: #1e293b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.55;
}
.research-analysis__mock-title { font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.2; margin-bottom: 6px; }
.research-analysis__mock-byline { font-size: 11.5px; color: #64748b; margin-bottom: 18px; font-style: italic; }
.research-analysis__mock-h { font-size: 12px; font-weight: 700; color: #0f172a; text-transform: uppercase; letter-spacing: 0.12em; margin: 14px 0 8px; }
.research-analysis__mock-text { margin: 0 0 16px; }
.research-analysis__mock-body h2 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 18px 0 8px; }
.research-analysis__mock-body h3 { font-size: 13.5px; font-weight: 700; color: #1e293b; margin: 14px 0 6px; }
.research-analysis__mock-body p  { margin: 0 0 12px; }
.research-analysis__mock-body ul,
.research-analysis__mock-body ol { padding-left: 22px; margin: 0 0 14px; }
.research-analysis__mock-body li { margin-bottom: 4px; }
.research-analysis__mock-body strong { color: #0f172a; font-weight: 700; }
.research-analysis__mock-body em     { color: #1e293b; font-style: italic; }
.research-analysis__mock-body code   { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, monospace; color: #334155; }
.research-analysis__mock-body a      { color: #4f46e5; text-decoration: underline; }

/* Overlay boxes — visible in Layout + Annotated modes */
.research-analysis__overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.research-analysis__overlay {
  position: absolute;
  border: 2px dashed;
  border-radius: 3px;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.research-analysis__overlay::before {
  content: attr(data-label);
  position: absolute;
  top: -8px; left: 6px;
  padding: 1px 6px;
  background: #0b1020;
  border-radius: 3px;
}
.research-analysis__overlay--heading { border-color: #2563eb; color: #2563eb; }
.research-analysis__overlay--table   { border-color: #10b981; color: #10b981; }
.research-analysis__overlay--figure  { border-color: #f59e0b; color: #f59e0b; }
.research-analysis__overlay--text    { border-color: #64748b; color: #cbd5e1; }

/* Annotation pins — visible in Image + Annotated modes */
.research-analysis__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.research-analysis__pin {
  position: absolute;
  padding: 3px 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  animation: ra-pin-float 3s ease-in-out infinite;
}
.research-analysis__pin:nth-child(odd)  { animation-delay: 0.3s; }
.research-analysis__pin:nth-child(even) { animation-delay: 0.9s; }
@keyframes ra-pin-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

/* ── View-mode switcher ── */
.research-analysis__doc[data-mode="image"] .research-analysis__overlays { opacity: 0; }
.research-analysis__doc[data-mode="image"] .research-analysis__pins     { opacity: 1; }

.research-analysis__doc[data-mode="layout"] .research-analysis__overlays { opacity: 1; }
.research-analysis__doc[data-mode="layout"] .research-analysis__pins     { opacity: 0; }
.research-analysis__doc[data-mode="layout"] .research-analysis__paper    { opacity: 0.55; }

.research-analysis__doc[data-mode="annotated"] .research-analysis__overlays { opacity: 0.35; }
.research-analysis__doc[data-mode="annotated"] .research-analysis__pins     { opacity: 1; }

/* ── Footer ── */
.research-analysis__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.7);
}
.research-analysis__footer b { color: #fff; }

/* ── Pages viewer ── */
.research-analysis__pages {
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(8,12,22,0.55);
  padding: 16px 20px 18px;
}
.research-analysis__pages-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.research-analysis__pages-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.9);
}
.research-analysis__pages-title > i { font-size: 1.1rem; color: var(--accent-1); }
.research-analysis__pages-title div > div { font-size: 0.85rem; font-weight: 700; color: #fff; }
.research-analysis__pages-title small { font-size: 0.72rem; color: rgba(255,255,255,0.55); }

.research-analysis__pages-ctrls {
  display: inline-flex;
  gap: 6px;
}
.research-analysis__pgbtn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.research-analysis__pgbtn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.research-analysis__pages-scroller {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.research-analysis__pages-scroller::-webkit-scrollbar { height: 6px; }
.research-analysis__pages-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.research-analysis__pages-track {
  display: inline-flex;
  gap: 10px;
  padding: 4px 2px 8px;
}
.research-analysis__page-card {
  flex-shrink: 0;
  width: 108px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease;
}
.research-analysis__page-card:hover { transform: translateY(-2px); }

.research-analysis__page-thumb {
  height: 140px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.5);
}
.research-analysis__page-thumb--a { background: linear-gradient(180deg, #fff 0%, #fff 14%, #f1f5f9 14%, #f1f5f9 16%, #fff 16%, #fff 42%, #f1f5f9 42%, #f1f5f9 44%, #fff 44% 70%, #e5e7eb 70% 78%, #fff 78%); }
.research-analysis__page-thumb--b { background: linear-gradient(180deg, #fff 0%, #fff 20%, #f1f5f9 20%, #f1f5f9 22%, #fff 22% 56%, #e5e7eb 56% 64%, #fff 64% 85%, #f1f5f9 85%); }
.research-analysis__page-thumb--c { background: linear-gradient(180deg, #fff 0%, #fff 10%, #f1f5f9 10%, #f1f5f9 12%, #fff 12% 38%, #f1f5f9 38% 40%, #fff 40% 62%, #e5e7eb 62% 72%, #fff 72%); }
.research-analysis__page-thumb--d { background: linear-gradient(180deg, #fff 0%, #fff 18%, #f1f5f9 18%, #f1f5f9 20%, #fff 20% 48%, #e5e7eb 48% 58%, #fff 58% 80%, #f1f5f9 80%); }

/* Legacy page-num badge removed — "Page N" already appears in .research-analysis__page-footer. */
.research-analysis__page-num { display: none !important; }

.research-analysis__page-card.is-active .research-analysis__page-thumb {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.3), 0 10px 24px -6px rgba(99,102,241,0.45);
}
.research-analysis__page-footer {
  padding: 6px 4px 0;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  text-align: center;
}
.research-analysis__page-card.is-active .research-analysis__page-footer { color: #fff; }

/* Admin edit button for staff */
.art-pdf-preview__admin {
  text-align: center;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .research-analysis__topbar { padding: 12px 14px; }
  .research-analysis__viewmodes { width: 100%; }
  .research-analysis__vb { flex: 1; justify-content: center; padding: 6px 8px; font-size: 0.72rem; }
  .research-analysis__viewer { padding: 18px 14px; }
  .research-analysis__doc { transform: none !important; }
  .research-analysis__page-card { width: 92px; }
  .research-analysis__page-thumb { height: 120px; }
}

/* ──────────────────────────────────────────────────────────────
   Research-paper form (rpf-*) — staff upload page
   ────────────────────────────────────────────────────────────── */
.rpf-hero {
  padding: 80px 0 24px;
  background:
    radial-gradient(ellipse at top, rgba(99,102,241,0.10), transparent 60%),
    var(--bg-0);
}
.rpf-hero__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.rpf-hero__title { margin: 18px 0 14px; line-height: 1.15; }
.rpf-hero__sub   { max-width: 620px; margin: 0 auto; }

.rpf-section {
  padding: 30px 0 80px;
  background: var(--bg-0);
}

.rpf-form { display: block; }

.rpf-errors {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
.rpf-errors div + div { margin-top: 6px; }

.rpf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}
@media (max-width: 960px) { .rpf-grid { grid-template-columns: 1fr; } }

.rpf-col { min-width: 0; }
.rpf-col--aside { display: flex; flex-direction: column; gap: 18px; }

.rpf-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  padding: 22px;
  backdrop-filter: blur(16px);
  margin-bottom: 18px;
}
.rpf-col--aside .rpf-card { margin-bottom: 0; }

.rpf-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 18px;
}
.rpf-card__head > i {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  flex-shrink: 0;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(99,102,241,0.35);
}
.rpf-card__head h3 {
  margin: 0 0 2px;
  color: var(--text-1);
  font-size: 1rem;
  font-weight: 700;
}
.rpf-card__head p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.82rem;
}

.rpf-field { margin-bottom: 14px; }
.rpf-field:last-child { margin-bottom: 0; }
.rpf-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 7px;
}
.rpf-field input[type="text"],
.rpf-field input[type="url"],
.rpf-field input[type="number"],
.rpf-field input[type="date"],
.rpf-field input[type="datetime-local"],
.rpf-field input[type="file"],
.rpf-field select,
.rpf-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rpf-field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.rpf-field textarea[name="body_markdown"] { min-height: 320px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; }
.rpf-field input:focus,
.rpf-field select:focus,
.rpf-field textarea:focus {
  outline: none;
  border-color: var(--accent-1);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.rpf-field input[type="file"] {
  padding: 9px 12px;
  cursor: pointer;
}

.rpf-field__help {
  font-size: 0.74rem;
  color: var(--text-2);
  margin-top: 6px;
  line-height: 1.45;
}
.rpf-field__help code {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
}
.rpf-field__err {
  font-size: 0.76rem;
  color: #fca5a5;
  margin-top: 6px;
}

.rpf-field--check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
}
.rpf-field--check label {
  margin: 0;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
}
.rpf-field--check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent-1);
  cursor: pointer;
}

.rpf-submit {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  align-items: center;
}
.rpf-submit .btn-v2-full { margin: 0; flex: 1; }
@media (max-width: 600px) {
  .rpf-submit { flex-direction: column; }
  .rpf-submit .btn-v2 { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────
   art-post__reader — the real page_layout.html rendering on a
   research article detail page. Sits BELOW the showcase.
   ────────────────────────────────────────────────────────────── */
.art-post__reader {
  padding: 72px 0 90px;
  background:
    radial-gradient(ellipse at top, rgba(99,102,241,0.06), transparent 55%),
    var(--bg-0);
}
.art-post__reader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.art-post__reader-title { margin: 14px 0 10px; line-height: 1.2; }
.art-post__reader-sub   { max-width: 700px; color: var(--text-2); margin: 0; }

.art-post__reader-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.art-post__reader-pagebtn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.art-post__reader-pagebtn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
}
.art-post__reader-pagebtn.is-active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(99,102,241,0.3);
}

.art-post__reader-body {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  padding: 28px;
  min-height: 400px;
}
.rr-page-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  color: var(--text-2);
}
.rr-page-meta b { color: var(--text-1); }
.rr-page-meta__of { color: var(--text-2); }

/* Keep page_layout.html's own styles scoped inside .art-post__reader-body so
   they don't clash with the site's global CSS. The template uses :root vars
   and scoped class names, so minimal overrides are needed. */
.art-post__reader-body .markdown-content { color: var(--text-1); }
.art-post__reader-body .markdown-content code { background: rgba(255,255,255,0.06); color: #fca5a5; border-color: rgba(255,255,255,0.1); }
.art-post__reader-body .layout-replica { background: #ffffff; }

/* ──────────────────────────────────────────────────────────────
   PUBLIC RESEARCH VIEWER — dark chrome, white reading islands.
   Scoped to `.research-analysis--dark`. The reused file_share
   partials are white-native; we override only what's needed and
   explicitly re-assert white on the 4 content surfaces so the
   reader focuses on the document, not the instrument panel.
   ────────────────────────────────────────────────────────────── */

/* Chrome backgrounds */
.research-analysis--dark {
  background: linear-gradient(180deg, #0b0f1a 0%, #0b1020 100%);
  color: rgba(255,255,255,0.85);
}

/* doc-preview-layout (sidebar + tabs) */
.research-analysis--dark .doc-preview-layout {
  background: transparent;
  padding: 16px 16px 0;
}
.research-analysis--dark .doc-sidebar {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .doc-sidebar-tab {
  color: rgba(255,255,255,0.55);
}
.research-analysis--dark .doc-sidebar-tab:hover { color: rgba(255,255,255,0.85); }
.research-analysis--dark .doc-sidebar-tab.active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.research-analysis--dark .doc-tab-content {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.research-analysis--dark .doc-tab-pane-card {
  background: transparent;
  box-shadow: none;
}
.research-analysis--dark .doc-tab-body {
  background: rgba(255,255,255,0.02);
}

/* ═══════════════════════════════════════════════════════════════
   CLASSIFICATION INSIGHTS — dark palette (not transparent + white;
   properly designed for dark mode).
   ═══════════════════════════════════════════════════════════════ */

.research-analysis--dark .doc-insights-panel      { background: transparent; }
.research-analysis--dark .doc-insights-section-title { color: rgba(255,255,255,0.55); }
.research-analysis--dark .doc-insights-section-title i { color: var(--accent-1); }

/* Overview card */
.research-analysis--dark .doc-insights-overview {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}
.research-analysis--dark .doc-insights-title {
  background: linear-gradient(135deg, #c7d2fe 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.research-analysis--dark .doc-insights-summary         { color: rgba(255,255,255,0.78); }
.research-analysis--dark .doc-insights-summary-toggle  { color: #a5b4fc; }
.research-analysis--dark .doc-insights-badge.language  { background: rgba(99,102,241,0.15); color: #c7d2fe; border-color: rgba(99,102,241,0.3); }
.research-analysis--dark .doc-insights-badge.format    { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
.research-analysis--dark .doc-insights-badge.purpose   { background: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.3); }

/* Stats grid — 5 cards (Chapters / Definitions / Structures / Cross-Refs / Ext. Docs) */
.research-analysis--dark .doc-insights-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.research-analysis--dark .doc-insights-stat:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.research-analysis--dark .doc-insights-stat-value { color: #fff; }
.research-analysis--dark .doc-insights-stat-label { color: rgba(255,255,255,0.5); }

/* Key insights (3 cards by category) */
.research-analysis--dark .doc-insight-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-left-width: 3px;
}
.research-analysis--dark .doc-insight-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.research-analysis--dark .doc-insight-value { color: rgba(255,255,255,0.92); }
.research-analysis--dark .doc-insight-page  { color: rgba(255,255,255,0.4); }

/* Subject cards (scrollable strip) */
.research-analysis--dark .doc-subject-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(99,102,241,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.08);
}
.research-analysis--dark .doc-subject-card.enriched {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(16,185,129,0.08) 100%);
  border-color: rgba(16,185,129,0.2);
}
.research-analysis--dark .doc-subject-card::before    { display: none; }
.research-analysis--dark .doc-subject-name            { color: rgba(255,255,255,0.95); }
.research-analysis--dark .doc-subject-role            { color: #a5b4fc; }
.research-analysis--dark .doc-subject-description     { color: rgba(255,255,255,0.7); }
.research-analysis--dark .doc-subject-facts li        { color: rgba(255,255,255,0.75); }
.research-analysis--dark .doc-subject-facts li::before{ background: #a78bfa; }
.research-analysis--dark .doc-subject-mentions        { color: rgba(255,255,255,0.45); border-top-color: rgba(255,255,255,0.08); }
.research-analysis--dark .doc-insights-subjects-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(167,139,250,0.6));
}

/* Entities section — tabs + chips */
.research-analysis--dark .doc-entity-tabs {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.research-analysis--dark .doc-entity-tab          { color: rgba(255,255,255,0.6); }
.research-analysis--dark .doc-entity-tab.active   { background: rgba(255,255,255,0.1); color: #fff; box-shadow: none; }
.research-analysis--dark .doc-entity-tab:hover:not(.active) { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.03); }

.research-analysis--dark .doc-entity-tag         { border: 1px solid transparent; }
.research-analysis--dark .doc-entity-tag.company { background: rgba(239,68,68,0.15);  color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.research-analysis--dark .doc-entity-tag.person  { background: rgba(236,72,153,0.15); color: #f9a8d4; border-color: rgba(236,72,153,0.3); }
.research-analysis--dark .doc-entity-tag.gov     { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
.research-analysis--dark .doc-entity-tag.address { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
.research-analysis--dark .doc-entity-tag-page a  { color: inherit; opacity: 0.75; }

/* Definitions list */
.research-analysis--dark .doc-def-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .doc-def-item:hover,
.research-analysis--dark .doc-def-item.expanded {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.25);
}
.research-analysis--dark .doc-def-term         { color: rgba(255,255,255,0.92); }
.research-analysis--dark .doc-def-page         { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }
.research-analysis--dark .doc-def-expanded-content { color: rgba(255,255,255,0.75); border-top-color: rgba(16,185,129,0.2); }
.research-analysis--dark .doc-def-mentioned-pages       { color: rgba(255,255,255,0.45); }
.research-analysis--dark .doc-def-mentioned-pages span  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }

/* Structure hierarchy tree */
.research-analysis--dark .doc-structure-doc-tabs {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .doc-structure-doc-tab          { color: rgba(255,255,255,0.55); }
.research-analysis--dark .doc-structure-doc-tab.active   { background: rgba(255,255,255,0.1); color: #c7d2fe; box-shadow: none; }
.research-analysis--dark .doc-structure-doc-tab:hover:not(.active) { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.03); }

.research-analysis--dark .doc-hierarchy-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .doc-hierarchy-item:hover           { border-color: rgba(99,102,241,0.35); }
.research-analysis--dark .doc-hierarchy-item-header:hover    { background: rgba(99,102,241,0.08); }
.research-analysis--dark .doc-hierarchy-title                { color: rgba(255,255,255,0.9); }
.research-analysis--dark .doc-hierarchy-page                 { color: rgba(255,255,255,0.45); }
.research-analysis--dark .doc-hierarchy-detail               { border-top-color: rgba(255,255,255,0.06); }
.research-analysis--dark .doc-hierarchy-children             { background: transparent; }
.research-analysis--dark .doc-child-item                     { background: rgba(255,255,255,0.02); border-left-color: rgba(255,255,255,0.1); }
.research-analysis--dark .doc-child-item:hover               { background: rgba(99,102,241,0.08); border-left-color: var(--accent-1); }
.research-analysis--dark .doc-child-title                    { color: rgba(255,255,255,0.82); }

.research-analysis--dark .doc-structure-type-badge {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}
.research-analysis--dark .doc-structure-type-badge strong { color: #fff; }

/* External docs */
.research-analysis--dark .doc-ext-doc-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .doc-ext-doc-item:hover {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.25);
}
.research-analysis--dark .doc-ext-doc-name     { color: rgba(255,255,255,0.9); }
.research-analysis--dark .doc-ext-doc-category { color: rgba(255,255,255,0.45); }

/* Tables */
.research-analysis--dark .doc-table-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .doc-table-item:hover {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.2);
}
.research-analysis--dark .doc-table-name         { color: rgba(255,255,255,0.92); }
.research-analysis--dark .doc-table-stats        { color: rgba(255,255,255,0.45); }
.research-analysis--dark .doc-table-col-tag      { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.1); }

/* Collapsible section chevrons */
.research-analysis--dark .doc-insights-collapse-header          { border-bottom-color: rgba(255,255,255,0.08); }
.research-analysis--dark .doc-insights-collapse-header:hover .doc-insights-section-title { color: #c7d2fe; }
.research-analysis--dark .doc-insights-collapse-chevron         { color: rgba(255,255,255,0.35); }

/* Unified TOC + structure tree */
.research-analysis--dark .fact-toc-search input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}
.research-analysis--dark .fact-toc-search input::placeholder { color: rgba(255,255,255,0.4); }
.research-analysis--dark .fact-toc-entry {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .fact-toc-entry:hover   { border-color: rgba(99,102,241,0.3); }
.research-analysis--dark .fact-toc-header:hover  { background: rgba(255,255,255,0.04); }
.research-analysis--dark .fact-toc-chapter       { color: rgba(255,255,255,0.9); }
.research-analysis--dark .fact-toc-pages         { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.research-analysis--dark .fact-toc-detail        { border-top-color: rgba(255,255,255,0.06); }

.research-analysis--dark .fact-struct-item       { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); }
.research-analysis--dark .fact-struct-header     { background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, rgba(255,255,255,0.02) 100%); }
.research-analysis--dark .fact-struct-header:hover { background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.04) 100%); }
.research-analysis--dark .fact-struct-title      { color: rgba(255,255,255,0.9); }
.research-analysis--dark .fact-struct-child .fact-struct-title { color: rgba(255,255,255,0.72); }
.research-analysis--dark .fact-struct-page       { color: rgba(255,255,255,0.45); }
.research-analysis--dark .fact-struct-children   { background: transparent; border-top-color: rgba(255,255,255,0.05); }
.research-analysis--dark .fact-struct-child      { background: rgba(255,255,255,0.025); border-left-color: rgba(99,102,241,0.3); }
.research-analysis--dark .fact-struct-child:hover{ background: rgba(99,102,241,0.08); border-left-color: var(--accent-1); }
.research-analysis--dark .fact-struct-child::before { background: rgba(255,255,255,0.1); }
.research-analysis--dark .fact-table-card        { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.research-analysis--dark .fact-table-card-title  { color: rgba(255,255,255,0.85); }
.research-analysis--dark .fact-table-card-meta   { color: rgba(255,255,255,0.45); }

/* Empty state */
.research-analysis--dark .doc-insights-empty-icon  { color: rgba(255,255,255,0.25); }
.research-analysis--dark .doc-insights-empty-title { color: rgba(255,255,255,0.75); }
.research-analysis--dark .doc-insights-empty-desc  { color: rgba(255,255,255,0.5); }

/* TOC search-bar navigation arrow button */
.research-analysis--dark .fact-toc-nav-btn {
  background: rgba(99,102,241,0.15);
  color: #c7d2fe;
}
.research-analysis--dark .fact-toc-nav-btn:hover { background: var(--accent-1); color: #fff; }

/* Small info chips keep their colour identity but with dark-friendly tints so
   they glow, not blind. Scoped to avoid touching the logged-in file_share
   where these same chips display on white. */
.research-analysis--dark .doc-hierarchy-chip.company,
.research-analysis--dark .doc-child-chip.company   { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.research-analysis--dark .doc-hierarchy-chip.date,
.research-analysis--dark .doc-child-chip.date      { background: rgba(139,92,246,0.15); color: #c4b5fd; }
.research-analysis--dark .doc-hierarchy-chip.amount,
.research-analysis--dark .doc-child-chip.amount    { background: rgba(16,185,129,0.15); color: #6ee7b7; }

.research-analysis--dark .fact-dtype-badge.date,
.research-analysis--dark .doc-table-dtype-tag.date       { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.research-analysis--dark .fact-dtype-badge.currency,
.research-analysis--dark .fact-dtype-badge.amount,
.research-analysis--dark .doc-table-dtype-tag.currency   { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.research-analysis--dark .fact-dtype-badge.number,
.research-analysis--dark .doc-table-dtype-tag.number     { background: rgba(59,130,246,0.18); color: #93c5fd; }
.research-analysis--dark .fact-dtype-badge.percentage,
.research-analysis--dark .doc-table-dtype-tag.percentage { background: rgba(245,158,11,0.18); color: #fcd34d; }

.research-analysis--dark .fact-def-chip   { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
.research-analysis--dark .fact-data-chip.date    { background: rgba(139,92,246,0.15); color: #c4b5fd; }
.research-analysis--dark .fact-data-chip.amount  { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.research-analysis--dark .fact-data-chip.company { background: rgba(59,130,246,0.15); color: #93c5fd; }

.research-analysis--dark .fact-no-toc { color: rgba(255,255,255,0.45); }

/* Per-page analysis sidebar — dark cards.
   file_share's `partials/page_analysis_styles.html` is included INSIDE the
   fragment so its inline <style> block is loaded AFTER main.css. To win the
   specificity tie we stack `.research-analysis--dark .page-analysis-view` in
   front of every selector — 0,3,0 beats file_share's 0,2,0 and the load
   order doesn't matter any more. */
.research-analysis--dark .page-analysis-view .sidebar-controls { background: transparent; }
.research-analysis--dark .page-analysis-view .control-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85);
}
.research-analysis--dark .page-analysis-view .control-card[data-accent="neutral"],
.research-analysis--dark .page-analysis-view .control-card[data-accent="blue"],
.research-analysis--dark .page-analysis-view .control-card[data-accent="yellow"] {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.research-analysis--dark .page-analysis-view .control-card-header h3 { color: #fff; }
.research-analysis--dark .page-analysis-view .control-card-header i  { color: var(--accent-1); }

.research-analysis--dark .page-analysis-view .hl-view-selector {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .page-analysis-view .hl-view-btn {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid transparent;
}
.research-analysis--dark .page-analysis-view .hl-view-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.research-analysis--dark .page-analysis-view .hl-view-btn.active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

.research-analysis--dark .page-analysis-view .toggle-row { color: rgba(255,255,255,0.8); }
.research-analysis--dark .page-analysis-view .toggle-row label { color: rgba(255,255,255,0.85); }
.research-analysis--dark .page-analysis-view .toggle-switch .slider { background: rgba(255,255,255,0.15); }

.research-analysis--dark .page-analysis-view .hl-filter-item {
  color: rgba(255,255,255,0.82);
  background: transparent;
}
.research-analysis--dark .page-analysis-view .hl-filter-item:hover { background: rgba(255,255,255,0.04); }
.research-analysis--dark .page-analysis-view .hl-filter-label { color: rgba(255,255,255,0.85); }

.research-analysis--dark .page-analysis-view .zoom-controls {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.research-analysis--dark .page-analysis-view .zoom-btn {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.08);
}
.research-analysis--dark .page-analysis-view .zoom-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.research-analysis--dark .page-analysis-view .zoom-level { color: rgba(255,255,255,0.9); }

.research-analysis--dark .page-analysis-view .action-button {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.08);
}
.research-analysis--dark .page-analysis-view .action-button:hover { background: rgba(255,255,255,0.08); color: #fff; }

.research-analysis--dark .page-analysis-view .translation-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.9);
}
.research-analysis--dark .page-analysis-view .translation-card:hover { background: rgba(255,255,255,0.08) !important; }
.research-analysis--dark .page-analysis-view .translation-card.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(167,139,250,0.2)) !important;
  border-color: rgba(99,102,241,0.35) !important;
}
.research-analysis--dark .page-analysis-view .translation-card .language { color: #fff; }
.research-analysis--dark .page-analysis-view .translation-card .date     { color: rgba(255,255,255,0.5); }
.research-analysis--dark .page-analysis-view .translations-empty {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.65);
  border: 1px dashed rgba(255,255,255,0.1);
}

/* Expand button (top-right) */
.research-analysis--dark .page-analysis-view .expand-toggle {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.1);
}
.research-analysis--dark .page-analysis-view .expand-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Pages strip — dark chrome, thumbs obviously stay as actual page images */
.research-analysis--dark .pages-viewer,
.research-analysis--dark .research-analysis__pages {
  background: rgba(8,12,22,0.55);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.research-analysis--dark .page-search-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
.research-analysis--dark .page-search-input::placeholder { color: rgba(255,255,255,0.4); }
.research-analysis--dark .page-search-wrapper .search-icon { color: rgba(255,255,255,0.5); }
.research-analysis--dark .btn-icon-sm {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}
.research-analysis--dark .page-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.research-analysis--dark .page-card .page-footer,
.research-analysis--dark .page-card .page-number {
  color: rgba(255,255,255,0.75);
}
.research-analysis--dark .page-card.is-active {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
}

/* #chart-analysis-results wrapper — dark chrome */
.research-analysis--dark #chart-analysis-results { background: transparent; color: rgba(255,255,255,0.85); }
.research-analysis--dark #chart-analysis-results .card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}

/* The page-analysis outer view (the wrapping `.page-analysis-view` card)
   should ALSO be dark — it's chrome around the document. file_share ships it
   white-native; we flip it and its children's containers to dark so the only
   light surfaces are the four explicit reading islands listed below. */
.research-analysis--dark .page-analysis-view {
  background: transparent !important;
  color: rgba(255,255,255,0.85);
}
.research-analysis--dark .page-analysis-view .premium-header h1,
.research-analysis--dark .page-analysis-view .premium-header {
  color: #fff;
}
.research-analysis--dark .document-viewer,
.research-analysis--dark .document-container {
  background: transparent;
}

/* ── THE FOUR WHITE READING ISLANDS — Picture / Markdown / Layout / Annotated.
   Anything *inside* these four keeps its file_share native light styling.
   Everything *outside* inherits the dark chrome from the widget root. ── */
.research-analysis--dark .document-image-wrapper,
.research-analysis--dark #markdown-view,
.research-analysis--dark #layout-view,
.research-analysis--dark .hl-annotated-pane {
  background: #ffffff;
  color: #0f172a;
  border-radius: 12px;
}
.research-analysis--dark #markdown-view .card,
.research-analysis--dark #layout-view .card {
  background: #ffffff !important;
  color: #0f172a;
  border: none;
}
.research-analysis--dark .document-overlay,
.research-analysis--dark .markdown-content,
.research-analysis--dark .layout-replica {
  background: #ffffff;
  color: #0f172a;
}
.research-analysis--dark .annotated-text-pre { color: #0f172a; background: transparent; }
.research-analysis--dark .markdown-content p,
.research-analysis--dark .markdown-content li,
.research-analysis--dark .markdown-content h1,
.research-analysis--dark .markdown-content h2,
.research-analysis--dark .markdown-content h3,
.research-analysis--dark .markdown-content table,
.research-analysis--dark .markdown-content td,
.research-analysis--dark .markdown-content th { color: #0f172a; }

/* Tab headers (the gradient banners) keep their own colours — they look right against dark. */

/* Widget outer edge + room to breathe.
   Bumps the widget wider than the base `.art-pdf-preview .research-analysis`
   and gives the three children (doc-preview-layout, #slide_detail_preview,
   pages strip) horizontal padding so nothing — especially the white
   .layout-view island — touches the dark outer edge. */
.art-pdf-preview .research-analysis.research-analysis--dark {
  max-width: 1320px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6), 0 20px 40px -20px rgba(99,102,241,0.25);
}
.research-analysis--dark > .research-analysis__topbar,
.research-analysis--dark > .doc-preview-layout,
.research-analysis--dark > #slide_detail_preview,
.research-analysis--dark > .research-analysis__pages {
  padding-left: clamp(16px, 2.2vw, 32px);
  padding-right: clamp(16px, 2.2vw, 32px);
}
.research-analysis--dark > #slide_detail_preview { padding-top: 8px; padding-bottom: 8px; }
.research-analysis--dark > .research-analysis__pages { margin-left: clamp(16px, 2.2vw, 32px); margin-right: clamp(16px, 2.2vw, 32px); }

@media (max-width: 640px) {
  .research-analysis--dark > .research-analysis__topbar,
  .research-analysis--dark > .doc-preview-layout,
  .research-analysis--dark > #slide_detail_preview,
  .research-analysis--dark > .research-analysis__pages { padding-left: 12px; padding-right: 12px; }
  .research-analysis--dark > .research-analysis__pages { margin-left: 12px; margin-right: 12px; }
}

/* ──────────────────────────────────────────────────────────────
   ABOUT — Integrated front office section (between framework + team).
   Two-column: copy on the left, findings panel on the right.
   ────────────────────────────────────────────────────────────── */
.ab-frontoffice {
  padding: 90px 0;
  background:
    radial-gradient(ellipse at top right, rgba(99,102,241,0.08), transparent 55%),
    var(--bg-0);
}
.ab-frontoffice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .ab-frontoffice__grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-frontoffice { padding: 60px 0; }
}

.ab-frontoffice__title { margin: 14px 0 18px; line-height: 1.15; }
.ab-frontoffice__lead {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

.ab-frontoffice__findings {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 18px;
  padding: 26px 28px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.ab-frontoffice__findings::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.ab-frontoffice__findings-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-dim);
}
.ab-frontoffice__findings-head > i {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  border-radius: 10px;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(99,102,241,0.35);
}
.ab-frontoffice__findings-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.2;
}
.ab-frontoffice__findings-head small { color: var(--text-2); font-size: 0.78rem; }

.ab-frontoffice__list,
.ab-frontoffice__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ab-frontoffice__list li {
  position: relative;
  padding: 14px 0 14px 4px;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.6;
  border-bottom: 1px dashed var(--border-dim);
}
.ab-frontoffice__list li:last-child { border-bottom: 0; }
.ab-frontoffice__list strong {
  color: var(--text-1);
  font-weight: 700;
}
/* The first <strong> in each list item gets gradient-pill styling so the
   metric pops — works whether staff edit via CKEditor or the default copy. */
.ab-frontoffice__list li > strong:first-child {
  display: inline-block;
  font-weight: 800;
  font-size: 0.95rem;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8px;
  letter-spacing: -0.01em;
}

.ab-frontoffice__stat {
  display: inline-block;
  font-weight: 800;
  font-size: 0.95rem;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8px;
  letter-spacing: -0.01em;
}

.ab-frontoffice__cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-dim);
  font-size: 0.78rem;
  color: var(--text-2);
}
.ab-frontoffice__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-1);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ab-frontoffice__cta-link:hover { color: var(--accent-2); }
.ab-frontoffice__cta-link i { transition: transform 0.18s ease; }
.ab-frontoffice__cta-link:hover i { transform: translateX(3px); }

/* ──────────────────────────────────────────────────────────────
   Emma article-writer bar — sits just above the CKEditor body in
   /v2/articles/<slug>/edit/. Three modes (Draft / Improve / Continue),
   streaming preview, Insert/Append/Discard actions.
   ────────────────────────────────────────────────────────────── */
.emma-bar {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(167,139,250,0.06));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.emma-bar__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 10px;
}
.emma-bar__head > i { color: var(--accent-1); font-size: 1rem; }
.emma-bar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.emma-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,102,241,0.3);
  color: var(--text-1);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.emma-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.emma-btn:disabled { opacity: 0.5; cursor: wait; }
.emma-btn i { font-size: 0.92rem; }

.emma-preview {
  margin-top: 14px;
  background: #0b1020;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 10px;
  overflow: hidden;
}
.emma-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(99,102,241,0.15);
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  font-weight: 600;
}
.emma-preview__head i { color: var(--accent-1); margin-right: 4px; }
.emma-preview__cancel {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.emma-preview__cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.emma-preview__raw {
  margin: 0;
  padding: 14px 16px;
  max-height: 360px;
  overflow-y: auto;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.emma-preview__actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(99,102,241,0.2);
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────
   Embedded media inside the article body — pictures, figures,
   captions, iframes. Bleach allows <img>; <iframe> is filtered
   for safety so PDFs are uploaded via Article.pdf_attachment and
   rendered as a card above the body (see .art-post__attachment).
   ────────────────────────────────────────────────────────────── */
.art-post__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border-radius: 14px;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,0.45);
}
.art-post__body figure {
  margin: 32px 0;
  text-align: center;
}
.art-post__body figure img { margin: 0 auto; }
.art-post__body figcaption {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 0.85rem;
  font-style: italic;
}
.art-post__body iframe,
.art-post__body video {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 28px auto;
  border-radius: 14px;
  border: 0;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,0.45);
  aspect-ratio: 16 / 9;
}

/* PDF attachment card — rendered above the body when Article.pdf_attachment is set. */
.art-post__attachment {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(239,68,68,0.10));
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-1);
  transition: all 0.18s ease;
}
.art-post__attachment:hover {
  transform: translateY(-2px);
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 12px 32px -10px rgba(239,68,68,0.35);
  color: var(--text-1);
}
.art-post__attachment-icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  border-radius: 12px;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(239,68,68,0.35);
}
.art-post__attachment-meta { flex: 1; min-width: 0; }
.art-post__attachment-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-1);
  line-height: 1.3;
}
.art-post__attachment-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 3px;
}
.art-post__attachment-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.art-post__attachment:hover .art-post__attachment-cta { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }

@media (max-width: 600px) {
  .art-post__attachment { flex-direction: column; align-items: flex-start; text-align: left; }
  .art-post__attachment-cta { align-self: stretch; justify-content: center; }
}

/* Staff-only Edit button above the article body. */
.art-post__edit-bar {
  display: flex;
  justify-content: flex-end;
  max-width: 780px;
  margin: 0 auto 20px;
}

/* ──────────────────────────────────────────────────────────────
   Newsroom — consultant hub (/v2/newsroom/)
   ────────────────────────────────────────────────────────────── */
.nr-hero { padding: 72px 0 28px; background: radial-gradient(ellipse at top, rgba(99,102,241,0.08), transparent 55%), var(--bg-0); }
.nr-hero__title { margin: 14px 0 10px; }
.nr-hero__sub   { max-width: 720px; color: var(--text-2); margin: 0 0 18px; }
.nr-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; }

.nr-section { padding: 0 0 100px; background: var(--bg-0); }

.nr-tabs { display: flex; gap: 6px; margin: 18px 0 28px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: 12px; width: fit-content; }
.nr-tab  { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; background: transparent; color: var(--text-2); font-size: 0.88rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.18s ease; }
.nr-tab:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }
.nr-tab.is-active { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,0.35); }
.nr-tab-count { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 0.72rem; }

.nr-pane { display: none; }
.nr-pane.is-active { display: block; animation: nr-fade 0.25s ease both; }
@keyframes nr-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.nr-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 20px 0 12px; }
.nr-section-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-1); display: inline-flex; align-items: center; gap: 10px; }
.nr-section-title i { color: var(--accent-1); }
.nr-section-count { padding: 2px 10px; background: rgba(99,102,241,0.2); color: #c7d2fe; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.nr-section-sub   { margin: 0; color: var(--text-2); font-size: 0.82rem; }

.nr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 36px; }
.nr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  color: var(--text-1);
  text-decoration: none;
  transition: all 0.15s ease;
}
.nr-row:hover { border-color: rgba(99,102,241,0.4); transform: translateY(-1px); box-shadow: 0 8px 24px -12px rgba(99,102,241,0.35); color: var(--text-1); }
.nr-row--draft { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.25); }
.nr-row__cat  { flex-shrink: 0; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; }
.nr-row__cat--article  { background: rgba(99,102,241,0.18); color: #c7d2fe; }
.nr-row__cat--research { background: rgba(239,68,68,0.15); color: #fca5a5; }
.nr-row__main  { flex: 1; min-width: 0; }
.nr-row__title { font-weight: 600; font-size: 0.95rem; color: var(--text-1); }
.nr-row__meta  { font-size: 0.76rem; color: var(--text-2); margin-top: 2px; }
.nr-row__featured { color: #fcd34d; font-weight: 700; }
.nr-row__cta-group { display: inline-flex; align-items: center; gap: 6px; }
.nr-row__cta  { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: rgba(99,102,241,0.12); color: #c7d2fe; border-radius: 7px; font-size: 0.78rem; font-weight: 600; }
.nr-row__cta-secondary { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,0.04); color: var(--text-2); cursor: pointer; }
.nr-row__cta-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text-1); }
.nr-row:hover .nr-row__cta { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: #fff; }

.nr-empty { text-align: center; padding: 40px 20px; color: var(--text-2); }
.nr-empty i { font-size: 2rem; display: block; margin-bottom: 10px; opacity: 0.5; }

/* Analytics */
.nr-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 8px 0 28px; }
.nr-stat { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: 12px; padding: 18px 20px; }
.nr-stat__value { font-size: 2.1rem; font-weight: 800; color: var(--text-1); line-height: 1; letter-spacing: -0.02em; }
.nr-stat__label { margin-top: 4px; font-size: 0.82rem; color: var(--text-1); font-weight: 600; }
.nr-stat__sub   { margin-top: 2px; font-size: 0.72rem; color: var(--text-2); }

.nr-chart { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: 12px; padding: 18px 20px; margin-bottom: 24px; }
.nr-chart__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.nr-chart__head i { color: var(--accent-1); }
.nr-chart__head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
.nr-chart__body svg { display: block; }
.nr-chart__empty { color: var(--text-2); text-align: center; padding: 40px 0; }

.nr-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .nr-twocol { grid-template-columns: 1fr; } }
.nr-table { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: 12px; overflow: hidden; }
.nr-table__head { padding: 14px 18px; font-weight: 700; font-size: 0.88rem; color: var(--text-1); border-bottom: 1px solid var(--border-dim); display: flex; align-items: center; gap: 10px; }
.nr-table__head i { color: var(--accent-1); }
.nr-table__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--border-dim); font-size: 0.85rem; }
.nr-table__row:last-child { border-bottom: 0; }
.nr-table__cell-title { color: var(--text-1); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-table__cell-title:hover { color: var(--accent-1); }
.nr-table__metrics { display: inline-flex; gap: 14px; color: var(--text-2); font-size: 0.76rem; white-space: nowrap; }
.nr-table__metrics i { margin-right: 3px; }
.nr-table__empty { padding: 20px 18px; color: var(--text-2); font-size: 0.82rem; text-align: center; }

.nr-privacy-note { display: flex; gap: 14px; margin-top: 28px; padding: 16px 20px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.25); border-radius: 12px; color: var(--text-2); font-size: 0.85rem; }
.nr-privacy-note i { color: #6ee7b7; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.nr-privacy-note strong { color: var(--text-1); display: block; margin-bottom: 4px; }
.nr-privacy-note p { margin: 0; }
.nr-privacy-note code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.78rem; }

/* Back-to-Newsroom link at the top of the edit forms when the consultant arrived from /v2/newsroom/. */
.rpf-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.18s ease;
}
.rpf-back-link:hover { color: var(--text-1); background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); }
.rpf-back-link i { transition: transform 0.18s ease; }
.rpf-back-link:hover i { transform: translateX(-3px); }

/* Draft banner shown above the Save row when an article is unpublished. */
.rpf-draft-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 12px 18px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 12px;
  color: #fcd34d;
  font-size: 0.88rem;
}
.rpf-draft-banner i { font-size: 1.05rem; }

/* Danger variant of the primary pill — red gradient. */
.btn-v2-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 4px 18px rgba(239,68,68,0.35);
  border: 0;
}
.btn-v2-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(239,68,68,0.45);
  color: #fff;
}

/* Danger zone on the edit page — sits below the main form, visually
   separated by a red border so the consultant has to intend to scroll here. */
.rpf-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 22px 24px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 14px;
}
.rpf-danger-zone h4 {
  margin: 0 0 4px;
  color: #fca5a5;
  font-size: 0.95rem;
  font-weight: 700;
}
.rpf-danger-zone p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.82rem;
  max-width: 560px;
}
@media (max-width: 640px) {
  .rpf-danger-zone { flex-direction: column; align-items: stretch; }
  .rpf-danger-zone .btn-v2 { width: 100%; justify-content: center; }
}

/* ── Step-label chrome wrapping the embedded file_share doc_uploader ── */
.rpf-uploader-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 28px;
  backdrop-filter: blur(16px);
}
.rpf-uploader-wrap .doc-uploader-container { padding: 0; }
.rpf-uploader-wrap .doc-uploader-card { box-shadow: none; border: 1px solid var(--border-dim); }

.rpf-step-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.rpf-step-label--spaced { margin-top: 18px; }
.rpf-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(99,102,241,0.35);
}
.rpf-step-label h3 {
  margin: 0 0 4px;
  color: var(--text-1);
  font-size: 1.05rem;
  font-weight: 700;
}
.rpf-step-label p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.85rem;
  max-width: 640px;
}


/* ============================================================
   NEWSLETTER signup widget — used in footer + standalone page +
   article-list slim CTA. Compact, dark-mode-friendly.
   ============================================================ */
.nl-signup { margin-top: 8px; }
.nl-signup__label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-1);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.nl-signup__sub { font-size: 0.78rem; color: var(--text-3); margin-bottom: 10px; line-height: 1.5; }
.nl-signup__row { display: flex; gap: 6px; }
.nl-signup__input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text-1, #fff);
  border-radius: 10px;
  font-size: 0.85rem; font-family: inherit;
  transition: border-color .18s, background .18s, box-shadow .18s;
  outline: none;
}
.nl-signup__input:focus {
  border-color: var(--accent-1);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.nl-signup__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff; border: 0; border-radius: 10px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.nl-signup__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.50); }
.nl-signup__btn-icon { font-size: 0.95em; }
.nl-signup__disclosure { margin-top: 7px; font-size: 0.7rem; color: var(--text-3); line-height: 1.45; }
.nl-signup__disclosure a { color: var(--text-2); text-decoration: underline; }
.nl-signup__thanks {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.30);
  color: #6ee7b7; font-size: 0.85rem; font-weight: 600;
}
.nl-signup__thanks > i { font-size: 1.1rem; color: #22c55e; }

/* Light-mode override (used on the public site outside the dark Marketing shell) */
.v2-footer .nl-signup__input { color: var(--text-1); }
.nl-signup--light .nl-signup__input,
:not(.newsroom-scope) > .nl-signup .nl-signup__input { color: var(--text-1); }

.art-cta-newsletter { padding: 12px 0 80px; }
.art-cta-newsletter .nl-signup {
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 6px 24px -12px rgba(15,23,42,0.10);
}
.art-cta-newsletter .nl-signup__input {
  background: #f8fafc; color: var(--text-1); border-color: rgba(15,23,42,0.10);
}
.art-cta-newsletter .nl-signup__disclosure { color: var(--text-3); }
.art-cta-newsletter .nl-signup__disclosure a { color: var(--text-2); }