/* ============================================================
   SoSocial marketing site — shared styles
   Loaded after tailwind.css and mockups.css on every page.
   Phase 1: drop-in extraction of duplicated inline CSS.
   ============================================================ */

:root {
  --coral: #F43F5E;
  --indigo: #818CF8;
  --dark: #0f172a;
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body { overflow-x: clip; }
  /* Keep the hero from being stretched wider than the viewport by its
     product mockup, and never let the mockup frame overflow its column. */
  .hero-mock { max-width: 100%; }
  .hero-mock .app-frame { max-width: 100%; }
  /* Inline (Tailwind) inbox mockup: narrow the fixed sidebar so the
     two-pane layout fits a phone instead of clipping the thread. */
  .mock-sidebar { width: 8.5rem; padding: 0.5rem; }
  /* Allow bento cards to shrink as flex/grid items so nowrap/truncated
     content can't blow out a single-column grid track on phones. */
  .bento-card { min-width: 0; }
}

body {
  max-width: 100%;
  color: #0f172a;
  font-family: 'Inter', sans-serif;
}

/* ─── NAV ─── Morphing pill on scroll.
   At top: full-width transparent, document flow looks airy.
   After ~40px scroll: inner shell collapses into a centered floating
   pill with backdrop blur + soft shadow. Pure CSS transition for
   silky motion — no JS needed.                                     */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 0.75rem;
  transition: padding 0.4s var(--spring);
  pointer-events: none; /* let outer pad ignore clicks; shell catches them */
}
#main-nav > div:first-child {
  pointer-events: auto;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  border-radius: 0;
  border: 1px solid transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  transition:
    max-width    0.45s var(--spring),
    padding      0.4s  var(--spring),
    border-radius 0.4s var(--spring),
    border-color 0.4s  ease,
    background   0.4s  ease,
    box-shadow   0.4s  ease,
    -webkit-backdrop-filter 0.4s ease,
            backdrop-filter 0.4s ease;
}
#main-nav.scrolled {
  padding: 0.75rem 0.75rem;
}
#main-nav.scrolled > div:first-child {
  max-width: 48rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border-color: rgba(15,23,42,0.07);
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 10px 30px -10px rgba(15,23,42,0.18),
    0 4px 12px -4px  rgba(15,23,42,0.08);
}
/* Tighten the desktop nav spacing inside the pill so links don't crowd the CTA. */
#main-nav.scrolled .desktop-nav { gap: 1.25rem; }
/* Shrink the logo a touch in pill mode for proportional balance. */
#main-nav > div:first-child > a img { transition: height 0.4s var(--spring); }
#main-nav.scrolled > div:first-child > a img { height: 2.25rem; }
/* Compact CTA inside the pill. */
#main-nav.scrolled .btn-coral {
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
}

/* ─── ANIMATIONS ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244,63,94,0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 18px rgba(244,63,94,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244,63,94,0); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-line {
  display: block;
  opacity: 0;
  animation: fadeUp 0.9s var(--spring) forwards;
}
.hero-line:nth-child(1) { animation-delay: 0.05s; }
.hero-line:nth-child(2) { animation-delay: 0.17s; }
.hero-line:nth-child(3) { animation-delay: 0.29s; }

.hero-sub    { opacity: 0; animation: fadeUp 0.9s var(--spring) 0.42s forwards; }
.hero-ctas   { opacity: 0; animation: fadeUp 0.9s var(--spring) 0.54s forwards; }
.hero-badges { opacity: 0; animation: fadeUp 0.9s var(--spring) 0.66s forwards; }
.hero-mock   { opacity: 0; animation: fadeUp 1s   var(--spring) 0.5s  forwards; }
.floating    { animation: float 5s ease-in-out infinite; }

/* ─── SCROLL REVEAL (fallback when GSAP disabled) ─── */
.reveal-section > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--spring), transform 0.7s var(--spring);
}
.reveal-section.in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:0ms; }
.reveal-section.in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:80ms; }
.reveal-section.in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:160ms; }
.reveal-section.in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:240ms; }
.reveal-section.in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:320ms; }
.reveal-section.in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:400ms; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--spring), transform 0.7s var(--spring);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ─── CARDS ─── */
.bento-card {
  background: white;
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.35s var(--spring), box-shadow 0.35s var(--spring), border-color 0.35s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
}
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  border-color: rgba(244,63,94,0.18);
}
.bento-card.coral-tint   { background: #fff1f2; border-color: rgba(244,63,94,0.1); }
.bento-card.indigo-tint  { background: #eef2ff; border-color: rgba(129,140,248,0.12); }
.bento-card.emerald-tint { background: #f0fdf4; border-color: rgba(16,185,129,0.12); }
.bento-card.amber-tint   { background: #fffbeb; border-color: rgba(245,158,11,0.12); }
.bento-card.dark         { background: var(--dark); border-color: rgba(255,255,255,0.08); color: white; }
.bento-card.dark:hover   { border-color: rgba(244,63,94,0.4); }

/* ─── BUTTONS ─── */
.btn-coral {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  background: var(--coral); color: white;
  font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em;
  padding: 0.75rem 1.75rem; border-radius: 9999px;
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring), background 0.2s ease;
}
.btn-coral:hover  { background: #e11d48; transform: scale(1.03); box-shadow: 0 6px 24px rgba(244,63,94,0.35); }
.btn-coral:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  background: white; color: #0f172a;
  font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em;
  padding: 0.75rem 1.75rem; border-radius: 9999px;
  border: 1px solid rgba(0,0,0,0.12);
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring), border-color 0.2s ease;
}
.btn-secondary:hover  { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: rgba(244,63,94,0.3); }
.btn-secondary:active { transform: scale(0.98); }

.btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  background: white; color: var(--coral);
  font-weight: 700; font-size: 0.95rem;
  padding: 0.875rem 2rem; border-radius: 9999px;
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring);
}
.btn-white:hover { transform: scale(1.03); box-shadow: 0 6px 24px rgba(0,0,0,0.15); }

.btn-ghost-white {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15); color: white;
  font-weight: 600; font-size: 0.95rem;
  padding: 0.875rem 2rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.3);
  transition: transform 0.2s var(--spring), background 0.2s ease;
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.25); transform: scale(1.03); }

/* ─── SECTION LABELS ─── */
.section-label {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral); background: rgba(244,63,94,0.08);
  padding: 0.35rem 0.875rem; border-radius: 9999px;
}
.section-label.indigo  { color: var(--indigo); background: rgba(129,140,248,0.1); }
.section-label.emerald { color: #059669;       background: rgba(5,150,105,0.08); }
.section-label.amber   { color: #d97706;       background: rgba(217,119,6,0.08); }
.section-label.slate   { color: #475569;       background: rgba(71,85,105,0.08); }
.section-label.pink    { color: #db2777;       background: rgba(219,39,119,0.08); }
.section-label.cyan    { color: #0891b2;       background: rgba(8,145,178,0.08); }
.section-label.white   { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.12); }

/* ─── HERO GLOWS ─── */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(244,63,94,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 20%,  rgba(129,140,248,0.05) 0%, transparent 60%);
}
.mock-glow {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 80px;
  background: radial-gradient(ellipse, rgba(244,63,94,0.2) 0%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

/* ─── GRADIENT TEXT ─── */
.text-gradient {
  background: linear-gradient(135deg, var(--coral) 0%, var(--indigo) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-warm {
  background: linear-gradient(135deg, #F43F5E 0%, #fb923c 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-green {
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── SECTION BACKGROUNDS ─── */
.section-coral-bg { background: #fff1f2; }
.section-dark-bg  { background: var(--dark); }

/* ─── MOCK CHROME (legacy) ─── */
.mock-chrome  { background:#1e293b; }
.mock-body    { background:#f8fafc; }
.mock-sidebar { background:#f1f5f9; border-right:1px solid #e2e8f0; }

/* ─── CHECKLIST ─── */
.check-item { display:flex; align-items:flex-start; gap:0.75rem; }

/* ─── PLATFORM BADGE ─── */
.platform-badge {
  display:inline-flex; align-items:center; gap:0.375rem;
  background:white; border:1px solid rgba(0,0,0,0.08); border-radius:9999px;
  padding:0.3rem 0.875rem; font-size:0.78rem; font-weight:500; color:#334155;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-badge:hover { transform:scale(1.04); box-shadow:0 2px 12px rgba(0,0,0,0.08); }

/* ─── CHIP ─── */
.chip {
  display:inline-flex; align-items:center; gap:0.3rem;
  background:#f8fafc; border:1px solid rgba(0,0,0,0.08); border-radius:9999px;
  padding:0.25rem 0.75rem; font-size:0.75rem; font-weight:500; color:#475569;
}

/* ─── CTA GLOW ─── */
.cta-btn-wrap { position:relative; display:inline-block; }
.cta-pulse    { position:absolute; inset:-4px; border-radius:9999px; animation: pulse-ring 2.5s ease-out infinite; }

/* ─── HEATMAP CELLS ─── */
.hcell { height:1.5rem; border-radius:0.25rem; margin:0.125rem; transition:transform 0.2s ease; }
.hcell:hover { transform:scale(1.15); }

/* ─── MEGA MENU ─── */
.mega-trigger { position: relative; }
.mega-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  padding-top: 5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--spring), transform 0.25s var(--spring);
}
.mega-menu.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.mega-menu-inner {
  max-width: 72rem;
  margin: 0 auto;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.05);
}
.mega-col-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.75rem;
  padding-left: 0.75rem;
}
.mega-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.mega-item:hover { background: rgba(0,0,0,0.03); }
.mega-item:hover .mega-icon-coral   { border-color: var(--coral); }
.mega-item:hover .mega-icon-indigo  { border-color: var(--indigo); }
.mega-item:hover .mega-icon-emerald { border-color: #059669; }
.mega-item:hover .mega-icon-pink    { border-color: #db2777; }
.mega-item:hover .mega-icon-amber   { border-color: #d97706; }
.mega-item:hover .mega-icon-cyan    { border-color: #0891b2; }
.mega-item:hover .mega-icon-slate   { border-color: #475569; }
.mega-icon {
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid transparent;
  transition: border-color 0.15s ease;
}
.mega-icon-coral   { background: rgba(244,63,94,0.1);   color: var(--coral); }
.mega-icon-indigo  { background: rgba(129,140,248,0.1); color: var(--indigo); }
.mega-icon-emerald { background: rgba(5,150,105,0.08);  color: #059669; }
.mega-icon-pink    { background: rgba(219,39,119,0.08); color: #db2777; }
.mega-icon-amber   { background: rgba(217,119,6,0.08);  color: #d97706; }
.mega-icon-cyan    { background: rgba(8,145,178,0.08);  color: #0891b2; }
.mega-icon-slate   { background: rgba(71,85,105,0.08);  color: #475569; }
.mega-item-name { font-size: 0.82rem; font-weight: 600; color: #0f172a; line-height: 1.2; }
.mega-item-desc { font-size: 0.72rem; color: #94a3b8; line-height: 1.35; margin-top: 0.125rem; }
.mega-trigger > a .mega-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-left: 0.125rem;
}
.mega-trigger:hover > a .mega-chevron,
.mega-trigger.open  > a .mega-chevron { transform: rotate(180deg); }

/* Mega menu — featured cards + categorized lists + promo */
.mega-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 1.5rem; }
.mega-featured {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 1rem; border-radius: 0.875rem;
  background: #f8fafc; border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.mega-featured:hover { background: white; border-color: rgba(244,63,94,0.18); box-shadow: 0 2px 12px rgba(0,0,0,0.05); transform: translateY(-1px); }
.mega-featured .mega-icon       { width: 36px; height: 36px; border-radius: 0.625rem; flex-shrink: 0; }
.mega-featured .mega-item-name  { font-size: 0.9rem; }
.mega-featured .mega-item-desc  { font-size: 0.72rem; margin-top: 0.125rem; }

.mega-lists      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,0.06); }
.mega-link-list  { display: flex; flex-direction: column; gap: 0.125rem; }
.mega-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem; font-weight: 500; color: #334155;
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.mega-link:hover { background: rgba(244,63,94,0.05); color: var(--coral); }
.mega-link-dot {
  width: 5px; height: 5px; border-radius: 9999px; background: #cbd5e1;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.mega-link:hover .mega-link-dot { background: var(--coral); transform: scale(1.4); }

.mega-promo {
  background: linear-gradient(135deg, #fff1f2 0%, #eef2ff 100%);
  border-radius: 1rem; padding: 1.25rem;
  border: 1px solid rgba(244,63,94,0.1);
  display: flex; flex-direction: column;
}
.mega-promo-header {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 0.75rem;
}
.mega-promo h4 { font-size: 1rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; letter-spacing: -0.015em; line-height: 1.25; }
.mega-promo p  { font-size: 0.8125rem; color: #64748b; line-height: 1.5; margin-bottom: 1rem; font-weight: 400; }
.mega-promo-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  background: var(--coral); color: white; font-weight: 600; font-size: 0.8125rem;
  padding: 0.55rem 1rem; border-radius: 9999px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.mega-promo-cta:hover { background: #e11d48; transform: scale(1.02); box-shadow: 0 4px 14px rgba(244,63,94,0.3); }
.mega-promo-links {
  display: flex; flex-direction: column; gap: 0.125rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(244,63,94,0.15);
}
.mega-promo-link {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; color: #475569;
  padding: 0.375rem 0.5rem; border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.mega-promo-link:hover { color: var(--coral); background: rgba(255,255,255,0.6); }

/* ─── MOBILE MENU ─── */
.mobile-menu {
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:98;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s step-end;
  padding-top:5rem;
}
.mobile-menu.open { opacity:1; visibility:visible; transition:opacity 0.3s ease, visibility 0s; }
.mobile-menu-link {
  display:block;
  padding:0.875rem 1.5rem;
  font-size:1.05rem; font-weight:500; color:#334155;
  border-bottom:1px solid rgba(0,0,0,0.06);
  transition:background 0.15s ease;
  text-decoration:none;
}
.mobile-menu-link:hover { background:rgba(0,0,0,0.03); }
#mobileMenuBtn .menu-close             { display:none; }
#mobileMenuBtn.active .menu-open       { display:none; }
#mobileMenuBtn.active .menu-close      { display:block; }

@media (min-width: 768px) {
  #mobileMenuBtn, .mobile-menu { display:none !important; }
}
@media (max-width: 767px) {
  .desktop-nav, .desktop-only { display:none !important; }
}

/* ─── HERO PIN + HORIZONTAL SHOWCASE ─── */
.hero-pin { position: relative; }
.hero-pin__sticky { position: relative; padding: 5rem 0 4rem; }
.hero-pin__header  { text-align: center; padding: 0 1.5rem; margin: 0 auto 2.5rem; max-width: 56rem; }
.hero-strip {
  display: flex;
  gap: 1.25rem;
  padding: 0 6vw;
  will-change: transform;
}
.strip-card {
  flex-shrink: 0;
  width: min(34rem, 88vw);
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 24px 60px -24px rgba(15,23,42,0.25), 0 4px 12px -4px rgba(15,23,42,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.strip-card__head {
  padding: 1.25rem 1.5rem 0.875rem;
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.strip-card__head .section-label { margin-bottom: 0.625rem; }
.strip-card__title {
  font-size: 1.35rem; font-weight: 800; color: #0f172a;
  letter-spacing: -0.02em; line-height: 1.2;
}
.strip-card__sub {
  font-size: 0.85rem; color: #64748b; margin-top: 0.25rem;
  font-weight: 400; line-height: 1.4;
}
.strip-card__body {
  padding: 1.5rem;
  flex: 1;
  min-height: 19rem;
  display: flex; align-items: stretch; justify-content: stretch;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244,63,94,0.04), transparent 70%),
    #fafbff;
}

/* Card-specific inline mockups (light, illustrative — not full feature replicas). */
.scd { width: 100%; display: flex; flex-direction: column; gap: 0.625rem; }
.scd-row {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 0.875rem; background: white;
  border: 1px solid rgba(15,23,42,0.06); border-radius: 0.875rem;
  font-size: 0.78rem; color: #0f172a; font-weight: 500;
}
.scd-row svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.scd-pill {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.2rem 0.6rem; border-radius:9999px;
  font-size:0.65rem; font-weight:700; letter-spacing:0.04em;
}
.scd-pill--fb { background: rgba(24,119,242,0.1); color:#1877F2; }
.scd-pill--ig { background: rgba(220,39,67,0.1);  color:#dc2743; }
.scd-pill--x  { background: rgba(15,23,42,0.08);  color:#0f172a; }
.scd-pill--tk { background: rgba(15,23,42,0.08);  color:#0f172a; }
.scd-pill--ok { background: rgba(16,185,129,0.12); color:#059669; }
.scd-pill--warn { background: rgba(245,158,11,0.14); color:#92400e; }

.scd-bar {
  display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; align-items: center;
  gap: 0.625rem; font-size: 0.72rem; color: #475569; font-weight: 600;
}
.scd-bar__track {
  height: 0.5rem; background: rgba(15,23,42,0.06); border-radius: 9999px; overflow: hidden;
}
.scd-bar__fill { height: 100%; background: linear-gradient(90deg, var(--coral), var(--indigo)); border-radius: 9999px; }
.scd-bar__val { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #0f172a; }

.scd-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; width: 100%; }
.scd-cal__day {
  aspect-ratio: 1; border-radius: 0.5rem;
  background: white; border: 1px solid rgba(15,23,42,0.06);
  display: flex; flex-direction: column; padding: 0.3rem;
  font-size: 0.6rem; color: #94a3b8; font-weight: 600;
}
.scd-cal__day--filled { border-color: rgba(244,63,94,0.18); background: linear-gradient(180deg, rgba(244,63,94,0.06), white); }
.scd-cal__day-dots { display: flex; gap: 2px; margin-top: auto; }
.scd-cal__day-dot { width: 5px; height: 5px; border-radius: 9999px; background: var(--coral); }
.scd-cal__day-dot--ig { background: #dc2743; }
.scd-cal__day-dot--x  { background: #0f172a; }

.scd-chat {
  display: flex; flex-direction: column; gap: 0.625rem; width: 100%;
}
.scd-msg {
  max-width: 75%; padding: 0.625rem 0.875rem; border-radius: 1rem;
  font-size: 0.8rem; line-height: 1.35;
}
.scd-msg--in {
  background: white; border: 1px solid rgba(15,23,42,0.06);
  color: #0f172a; align-self: flex-start; border-bottom-left-radius: 0.25rem;
}
.scd-msg--out {
  background: var(--coral); color: white;
  align-self: flex-end; border-bottom-right-radius: 0.25rem;
}
.scd-msg-meta { font-size: 0.62rem; opacity: 0.7; margin-bottom: 0.15rem; font-weight: 600; }

.scd-ring {
  position: relative;
  width: 9rem; height: 9rem;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.scd-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.scd-ring__num { font-size: 2.5rem; font-weight: 900; color: #0f172a; letter-spacing: -0.04em; line-height: 1; }
.scd-ring__num sub { font-size: 0.85rem; color: #94a3b8; font-weight: 700; }
.scd-ring__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; margin-top: 0.35rem; }

/* ── Hero strip card redesign: app-faithful mini-illustrations ── */

/* Card 1 — AI Captions: tabbed caption viewer */
.scd-tabs { display:flex; gap:0; border-bottom:1px solid rgba(15,23,42,0.08); margin-bottom:0.625rem; }
.scd-tab {
  display:inline-flex; align-items:center;
  padding:0.4rem 0.75rem;
  font-size:0.7rem; font-weight:600; color:#64748b;
  position:relative; white-space:nowrap; cursor:default;
}
.scd-tab.is-active { color:#F43F5E; }
.scd-tab.is-active::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:2px; border-radius:9999px; background:#F43F5E;
}
.scd-caption-box {
  background:white; border:1px solid rgba(15,23,42,0.08);
  border-radius:0.75rem; padding:0.75rem;
  font-size:0.78rem; line-height:1.55; color:#334155; flex:1;
}
.scd-caption-meta { display:flex; align-items:center; justify-content:space-between; }
.scd-caption-meta__count { font-size:0.64rem; color:#94a3b8; font-weight:500; }
.scd-caption-meta__regen {
  display:inline-flex; align-items:center; gap:0.3rem;
  font-size:0.68rem; font-weight:700; color:#F43F5E;
}

/* Card 2 — Smart Calendar: mini week view */
.scd-week { display:grid; grid-template-columns:repeat(5,1fr); gap:0.375rem; width:100%; }
.scd-week__col { display:flex; flex-direction:column; gap:0.3rem; }
.scd-week__day { font-size:0.55rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; }
.scd-week__date { font-size:0.68rem; font-weight:700; color:#0f172a; margin-bottom:0.1rem; }
.scd-week__chip { border-radius:0.45rem; overflow:hidden; border:1px solid rgba(15,23,42,0.07); background:white; }
.scd-week__chip-thumb {
  height:1.5rem; position:relative;
  background:linear-gradient(135deg,#F43F5E,#f97316);
}
.scd-week__chip-thumb--indigo  { background:linear-gradient(135deg,#6366f1,#06b6d4); }
.scd-week__chip-thumb--emerald { background:linear-gradient(135deg,#10b981,#06b6d4); }
.scd-week__chip-thumb--violet  { background:linear-gradient(135deg,#8b5cf6,#ec4899); }
.scd-week__chip-badge {
  position:absolute; top:0.18rem; right:0.18rem;
  font-size:0.42rem; font-weight:700;
  background:rgba(0,0,0,0.45); color:white;
  padding:0.08rem 0.22rem; border-radius:9999px; letter-spacing:0.03em;
}
.scd-week__chip-body { padding:0.2rem 0.3rem 0.25rem; }
.scd-week__chip-name { font-size:0.52rem; font-weight:600; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scd-week__chip-time { font-size:0.5rem; color:#94a3b8; font-weight:500; }

/* Card 3 — Analytics: stat tiles + heatmap */
.scd-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.scd-stat {
  background:white; border:1px solid rgba(15,23,42,0.07);
  border-radius:0.625rem; padding:0.625rem 0.5rem;
  display:flex; flex-direction:column; gap:0.1rem;
}
.scd-stat__label { font-size:0.58rem; font-weight:600; color:#64748b; }
.scd-stat__value { font-size:1.05rem; font-weight:800; color:#0f172a; letter-spacing:-0.03em; line-height:1.1; }
.scd-stat__delta { font-size:0.58rem; font-weight:600; }
.scd-stat__delta--up   { color:#10b981; }
.scd-stat__delta--down { color:#F43F5E; }
.scd-stat__delta--neutral { color:#94a3b8; }

.scd-heatmap { display:grid; grid-template-columns:1.75rem repeat(6,1fr); gap:2px; width:100%; }
.scd-heatmap__label { font-size:0.52rem; font-weight:600; color:#94a3b8; display:flex; align-items:center; }
.scd-heatmap__header { font-size:0.5rem; font-weight:600; color:#94a3b8; text-align:center; padding-bottom:2px; }
.scd-heatmap__cell { height:1.2rem; border-radius:0.2rem; background:rgba(16,185,129,0.06); }
.scd-heatmap__cell--1 { background:rgba(16,185,129,0.15); }
.scd-heatmap__cell--2 { background:rgba(16,185,129,0.30); }
.scd-heatmap__cell--3 { background:rgba(16,185,129,0.50); }
.scd-heatmap__cell--4 { background:rgba(16,185,129,0.72); }
.scd-heatmap__cell--5 { background:#10b981; }
.scd-heatmap__cell--num { display:flex; align-items:center; justify-content:center; font-size:0.48rem; font-weight:700; color:white; }

/* Card 4 — Unified Inbox: conversation list */
.scd-inbox { display:flex; flex-direction:column; width:100%; gap:0; }
.scd-inbox__header {
  display:flex; align-items:center; gap:0.5rem;
  padding-bottom:0.5rem; margin-bottom:0.25rem;
  border-bottom:1px solid rgba(15,23,42,0.07);
}
.scd-inbox__title { display:flex; align-items:center; gap:0.35rem; font-size:0.82rem; font-weight:800; color:#0f172a; letter-spacing:-0.02em; }
.scd-inbox__title svg { color:#F43F5E; }
.scd-inbox__counts { display:flex; align-items:center; gap:0.3rem; margin-left:auto; }
.scd-inbox__count-pill { display:inline-flex; align-items:center; font-size:0.58rem; font-weight:700; padding:0.15rem 0.45rem; border-radius:9999px; }
.scd-inbox__count-pill--fb { background:rgba(24,119,242,0.1); color:#1877F2; }
.scd-inbox__count-pill--ig { background:rgba(220,39,67,0.1); color:#dc2743; }
.scd-inbox__row { display:flex; align-items:flex-start; gap:0.5rem; padding:0.45rem 0; border-bottom:1px solid rgba(15,23,42,0.05); }
.scd-inbox__row:last-of-type { border-bottom:none; }
.scd-inbox__avatar {
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:linear-gradient(135deg,#94a3b8,#64748b);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:0.55rem; font-weight:700; flex-shrink:0;
}
.scd-inbox__avatar--coral   { background:linear-gradient(135deg,#F43F5E,#f97316); }
.scd-inbox__avatar--indigo  { background:linear-gradient(135deg,#6366f1,#06b6d4); }
.scd-inbox__avatar--emerald { background:linear-gradient(135deg,#10b981,#06b6d4); }
.scd-inbox__meta { flex:1; min-width:0; }
.scd-inbox__name-row { display:flex; align-items:center; gap:0.3rem; margin-bottom:0.12rem; }
.scd-inbox__name { font-size:0.7rem; font-weight:700; color:#0f172a; }
.scd-inbox__time { font-size:0.58rem; color:#94a3b8; margin-left:auto; white-space:nowrap; }
.scd-inbox__badge { display:inline-flex; align-items:center; font-size:0.54rem; font-weight:700; padding:0.1rem 0.375rem; border-radius:9999px; }
.scd-inbox__badge--comment { background:rgba(244,63,94,0.1); color:#F43F5E; }
.scd-inbox__badge--dm      { background:rgba(16,185,129,0.1); color:#059669; }
.scd-inbox__preview { font-size:0.63rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scd-inbox__ai-chip {
  display:flex; align-items:center; gap:0.375rem;
  background:rgba(244,63,94,0.06); border:1px solid rgba(244,63,94,0.18);
  border-radius:0.625rem; padding:0.5rem 0.625rem;
  font-size:0.64rem; font-weight:600; color:#F43F5E; margin-top:0.375rem;
}

/* Card 5 — Engagement Score: tip chips */
.scd-tip-row { display:flex; gap:0.375rem; flex-wrap:wrap; justify-content:center; }
.scd-tip { display:inline-flex; align-items:center; gap:0.3rem; padding:0.3rem 0.625rem; border-radius:9999px; font-size:0.64rem; font-weight:600; border:1px solid transparent; }
.scd-tip--ok   { background:rgba(16,185,129,0.1);  border-color:rgba(16,185,129,0.2);  color:#059669; }
.scd-tip--warn { background:rgba(245,158,11,0.1);  border-color:rgba(245,158,11,0.2);  color:#92400e; }
.scd-tip--info { background:rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.18); color:#4f46e5; }

/* Card 6 — So Chat: welcome panel */
.scd-sochat { display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; gap:0.75rem; }
.scd-sochat__icon {
  width:2.75rem; height:2.75rem; border-radius:0.875rem;
  background:#F43F5E; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(244,63,94,0.3);
}
.scd-sochat__heading { font-size:0.9rem; font-weight:800; color:#0f172a; letter-spacing:-0.02em; margin-top:-0.25rem; }
.scd-sochat__sub { font-size:0.68rem; color:#64748b; line-height:1.4; margin-top:-0.375rem; max-width:22rem; }
.scd-sochat__chips { display:flex; flex-wrap:wrap; gap:0.375rem; justify-content:center; }
.scd-sochat__chip {
  display:inline-flex; align-items:center; gap:0.3rem;
  background:white; border:1px solid rgba(15,23,42,0.1);
  border-radius:9999px; padding:0.35rem 0.75rem;
  font-size:0.66rem; font-weight:600; color:#334155;
}
.scd-sochat__chip svg { color:#F43F5E; }
.scd-sochat__prompts { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; width:100%; text-align:left; }
.scd-sochat__prompt {
  background:white; border:1px solid rgba(15,23,42,0.08);
  border-radius:0.75rem; padding:0.625rem;
  display:flex; flex-direction:column; gap:0.2rem;
}
.scd-sochat__prompt-icon {
  width:1.25rem; height:1.25rem; border-radius:0.35rem;
  background:rgba(244,63,94,0.1); display:flex; align-items:center;
  justify-content:center; margin-bottom:0.15rem; flex-shrink:0;
}
.scd-sochat__prompt-icon svg { width:0.65rem; height:0.65rem; color:#F43F5E; }
.scd-sochat__prompt-title { font-size:0.66rem; font-weight:700; color:#0f172a; line-height:1.2; }
.scd-sochat__prompt-sub   { font-size:0.6rem; color:#64748b; line-height:1.3; }

/* ── Smart Scheduling stack card: Schedule Post modal ── */
.scd-schedule-modal {
  background: white;
  border: 1px solid rgba(15,23,42,0.09);
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 4px 24px rgba(15,23,42,0.07);
}

.scd-schedule-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem 0.75rem;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}

.scd-schedule-modal__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.scd-schedule-modal__body {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  min-height: 220px;
}

.scd-schedule-modal__left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 1rem 1.125rem;
  border-right: 1px solid rgba(15,23,42,0.07);
}

.scd-schedule-modal__field-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.scd-schedule-modal__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
}

.scd-schedule-modal__input {
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 0.5rem;
  padding: 0.45rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scd-schedule-modal__add {
  font-size: 0.72rem;
  font-weight: 600;
  color: #F43F5E;
  margin-top: 0.25rem;
}

.scd-schedule-modal__right {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  gap: 0.5rem;
}

.scd-schedule-modal__ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.125rem;
}

.scd-schedule-modal__ai-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #334155;
}

.scd-schedule-modal__ai-range {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #334155;
  border: 1px solid rgba(244,63,94,0.35);
  border-radius: 0.4rem;
  padding: 0.2rem 0.5rem;
}

.scd-schedule-modal__slots {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.scd-schedule-modal__slot {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.45rem 0.625rem;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: #334155;
  background: white;
}

.scd-schedule-modal__slot--checked {
  border-color: rgba(244,63,94,0.3);
  background: #fff5f6;
}

.scd-schedule-modal__radio {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  flex-shrink: 0;
  display: inline-block;
}

.scd-schedule-modal__radio--checked {
  border-color: #F43F5E;
  background: #F43F5E;
  box-shadow: inset 0 0 0 2.5px white;
}

.scd-schedule-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid rgba(15,23,42,0.07);
}

.scd-schedule-modal__btn-cancel {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 0.5rem;
  padding: 0.45rem 1rem;
}

.scd-schedule-modal__btn-schedule {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  background: #F43F5E;
  border: none;
  border-radius: 0.5rem;
  padding: 0.45rem 1.125rem;
}

/* ── Smart Scheduling stack card: Optimal Posting Times heatmap ── */
.scd-opt-times {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  background: white;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem 1rem;
}

.scd-opt-times__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.scd-opt-times__grid {
  display: grid;
  grid-template-columns: 2.25rem repeat(8, 1fr);
  gap: 3px;
}

.scd-opt-times__corner { /* empty top-left cell */ }

.scd-opt-times__hdr {
  font-size: 0.58rem;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  padding-bottom: 3px;
  white-space: nowrap;
}

.scd-opt-times__day {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  padding-right: 0.25rem;
}

.scd-opt-times__cell {
  height: 1.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.52rem;
  font-weight: 700;
  color: white;
}

/* intensity scale — emerald palette (matches Deep Analytics card accent) */
.scd-opt-times__cell.c0 { background: rgba(16,185,129,0.06); }
.scd-opt-times__cell.c1 { background: rgba(16,185,129,0.18); }
.scd-opt-times__cell.c2 { background: rgba(16,185,129,0.35); }
.scd-opt-times__cell.c3 { background: rgba(16,185,129,0.55); }
.scd-opt-times__cell.c4 { background: rgba(16,185,129,0.75); }
.scd-opt-times__cell.c5 { background: #10b981; }
.scd-opt-times__cell.c0.cn { color: #94a3b8; }

.scd-opt-times__legend {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.58rem;
  color: #94a3b8;
  font-weight: 500;
  justify-content: flex-end;
}

.scd-opt-times__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.15rem;
  display: inline-block;
}

/* Pin behavior only on tablet+ — mobile flows naturally. */
@media (min-width: 768px) {
  .hero-pin { height: 360vh; }
  .hero-pin__sticky {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
    padding: 4rem 0;
  }
}
@media (max-width: 767px) {
  .hero-strip { flex-direction: column; padding: 0 1.5rem; gap: 1rem; }
  .strip-card { width: 100%; }
  .strip-card__body { min-height: 16rem; }
}

/* Hero mockup zoom-on-enter (when JS not available it stays at scale 1). */
.hero-mock-zoom { transform-origin: 50% 80%; }

/* Word-reveal wrappers used by motion.js text reveals. */
.rv-w { display: inline-block; overflow: hidden; }
[data-reveal-words], .mk-reveal-words { overflow: hidden; }

/* ─── STACKING FEATURE CARDS ─── */
.stack-section {
  position: relative;
  padding: 4rem 0 8rem;
}
.stack-section__intro {
  max-width: 56rem; margin: 0 auto 3rem;
  padding: 0 1.5rem; text-align: center;
}
.stack-list {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
}
.stack-card {
  position: sticky;
  top: 6rem;
  border-radius: 1.75rem;
  padding: 3rem;
  background: white;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 30px 80px -40px rgba(15,23,42,0.25);
  min-height: 28rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}
@media (min-width: 900px) {
  .stack-card { grid-template-columns: 1.05fr 1fr; padding: 4rem; min-height: 32rem; }
}
.stack-card + .stack-card { margin-top: 2rem; }

.stack-card__body { display: flex; flex-direction: column; gap: 1.25rem; }
.stack-card__icon {
  width: 3rem; height: 3rem; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 6px 18px -6px rgba(15,23,42,0.25);
}
.stack-card__h {
  font-size: 2rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.025em; color: #0f172a;
}
@media (min-width: 900px) { .stack-card__h { font-size: 2.5rem; } }
.stack-card__p {
  font-size: 1rem; color: #475569; line-height: 1.55; font-weight: 400;
}
.stack-card__bullets {
  display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.25rem;
}
.stack-card__bullets li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: 0.9rem; color: #334155; font-weight: 500;
}
.stack-card__bullets svg { flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--coral); }

/* Right-side visual frame. */
.stack-card__visual {
  position: relative;
  border-radius: 1.25rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(244,63,94,0.06), transparent 70%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(15,23,42,0.05);
  padding: 1.5rem;
  min-height: 16rem;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Variant tinted backgrounds. */
.stack-card.is-coral   { background: linear-gradient(140deg, #fff1f2 0%, #ffffff 70%); }
.stack-card.is-indigo  { background: linear-gradient(140deg, #eef2ff 0%, #ffffff 70%); }
.stack-card.is-emerald { background: linear-gradient(140deg, #ecfdf5 0%, #ffffff 70%); }
.stack-card.is-pink    { background: linear-gradient(140deg, #fdf2f8 0%, #ffffff 70%); }
.stack-card.is-amber   { background: linear-gradient(140deg, #fffbeb 0%, #ffffff 70%); }
.stack-card.is-violet  { background: linear-gradient(140deg, #f5f3ff 0%, #ffffff 70%); }

.stack-card__icon.bg-coral   { background: var(--coral); }
.stack-card__icon.bg-indigo  { background: var(--indigo); }
.stack-card__icon.bg-emerald { background: #059669; }
.stack-card__icon.bg-pink    { background: #db2777; }
.stack-card__icon.bg-amber   { background: #d97706; }
.stack-card__icon.bg-violet  { background: #7c3aed; }

@media (max-width: 767px) {
  .stack-card { position: relative; top: auto; padding: 2rem; min-height: 0; }
  .stack-card + .stack-card { margin-top: 1rem; }
  .stack-card__h { font-size: 1.75rem; }
}

/* ─── BACK TO TOP ─── */
#backToTop {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 200;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--coral); color: #fff;
  cursor: pointer;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
#backToTop.visible { opacity: 1; transform: translateY(0); }

/* Mobile: tighten the inline showcase/stacking-card mock illustrations
   (scd-*) so the 7-column calendar, score ring, chat bubbles, and bar
   rows fit narrow phones. Placed after the base scd-* defs above so these
   overrides win without bumping specificity. */
@media (max-width: 767px) {
  .scd-cal { gap: 0.15rem; }
  .scd-cal__day { font-size: 0.5rem; padding: 0.2rem; }
  .scd-msg { max-width: 88%; }
  .scd-bar { grid-template-columns: 3.5rem 1fr 2rem; gap: 0.4rem; }
  .scd-week         { grid-template-columns: repeat(3,1fr); }
  .scd-sochat__prompts { grid-template-columns: 1fr; }
  .scd-heatmap      { grid-template-columns: 1.5rem repeat(6,1fr); }
  .scd-stat__value  { font-size: 0.9rem; }
}