/* Edtools marketing design system — shared core (pricing, demo, etc.) */
:root {
  --green: #00db8e;
  --green-dark: #00b378;
  --green-rgb: 0, 219, 142;
  --font-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-pill: 9999px;
  --maxw: 1200px;
  --side-pad: 32px;
}

html[data-theme="dark"] {
  --page: #08090a;
  --raised: #17181b;
  --overlay: #191a1b;
  --text-primary: #f7f8f8;
  --text-secondary: #8a8f98;
  --text-tertiary: #62666d;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-solid: #3a3c40;
  --soft-line: rgba(255, 255, 255, 0.06);
  --surface-raised: #17181b;
  --card-surface: #0e0f11;
  --shadow-card: rgba(0, 0, 0, 0.85) 0px 60px 120px -40px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset;
  --shadow-elevated: rgba(0, 0, 0, 0.7) 0px 40px 100px -40px;
}

html[data-theme="light"] {
  --page: #ffffff;
  --raised: #f7f8f8;
  --overlay: #f0f1f2;
  --text-primary: #08090a;
  --text-secondary: #5b6069;
  --text-tertiary: #8a8f98;
  --border-subtle: rgba(8, 9, 10, 0.08);
  --border-solid: #e5e5e6;
  --soft-line: rgba(8, 9, 10, 0.06);
  --surface-raised: #f5f6f7;
  --card-surface: #ffffff;
  --shadow-card: rgba(8, 9, 10, 0.08) 0px 40px 80px -40px, rgba(255, 255, 255, 0.8) 0px 1px 0px inset;
  --shadow-elevated: rgba(8, 9, 10, 0.08) 0px 24px 60px -24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font-roboto);
  -webkit-font-smoothing: antialiased;
  transition: background 200ms ease, color 200ms ease;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* Logo swap */
html[data-theme="dark"] .mkt-logo-light { display: none !important; }
html[data-theme="dark"] .mkt-logo-dark { display: block; }
html[data-theme="light"] .mkt-logo-dark { display: none !important; }
html[data-theme="light"] .mkt-logo-light { display: block; }

.mkt-logo-dark,
.mkt-logo-light {
  display: block;
  height: auto;
}

.mkt-brand-logo {
  display: block;
  height: auto;
  width: auto;
  max-width: 135px;
}

/* ─────────────────────────────────────────────────────────────
   Client / institution logos — logostrip carousel
   Silhouette-based system: each logo has a dark (for light mode)
   and light (for dark mode) variant, keeping value contrast
   uniform across the whole strip.
   ───────────────────────────────────────────────────────────── */
.mkt-logostrip-section {
  padding: 56px 32px 72px;
  border-bottom: 1px solid var(--border-subtle);
}

.mkt-logostrip-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.mkt-logostrip-title {
  margin: 0 0 40px;
  font-family: var(--font-roboto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
}

.mkt-brands-carousel-wrap {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.mkt-brands-carousel {
  width: 100%;
  overflow: hidden;
}

.mkt-brands-carousel .swiper-wrapper {
  align-items: center;
  transition-timing-function: linear !important;
}

.mkt-brands-carousel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 72px;
  padding: 0 8px;
}

/* Slot: fixed height row, width auto-sizes to logo aspect */
.mkt-client-logo-slot {
  --logo-height: 40px;
  --logo-max-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--logo-height);
  width: auto;
  max-width: var(--logo-max-width);
  flex-shrink: 0;
}

.mkt-client-logo-img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 200ms ease;
}

/* Theme-swap: show the correct silhouette per theme */
.mkt-client-logo-slot .mkt-logo-dark,
.mkt-client-logo-slot .mkt-logo-light {
  display: none;
}

html[data-theme="light"] .mkt-client-logo-slot .mkt-logo-dark {
  display: block;
}

html[data-theme="dark"] .mkt-client-logo-slot .mkt-logo-light {
  display: block;
}

/* Fallback: single-source logos (colored, no variants) */
.mkt-client-logo-slot:not(:has(.mkt-logo-dark)) .mkt-client-logo-img {
  display: block;
}

/* Default opacity for silhouette logos */
.mkt-client-logo-slot .mkt-client-logo-img {
  opacity: 0.62;
}

html[data-theme="dark"] .mkt-client-logo-slot .mkt-client-logo-img {
  opacity: 0.7;
}

.mkt-client-logo-slot:hover .mkt-client-logo-img {
  opacity: 1;
}

/* Escape hatch: keep-brand-color logos (colored PNGs w/o silhouette variant).
   Applies a soft grayscale + opacity so they cohere with the strip. */
.mkt-client-logo-slot[data-tone="brand"] .mkt-client-logo-img {
  filter: grayscale(1);
  opacity: 0.55;
}

html[data-theme="dark"] .mkt-client-logo-slot[data-tone="brand"] .mkt-client-logo-img {
  filter: grayscale(1) brightness(1.1);
  opacity: 0.65;
}

.mkt-client-logo-slot[data-tone="brand"]:hover .mkt-client-logo-img {
  filter: grayscale(0);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   Pure-CSS marquee (no Swiper dependency).
   The JS clones the track once so we can translate -50% and get
   a seamless loop. Duration scales with --marquee-duration.
   ───────────────────────────────────────────────────────────── */
.mkt-marquee {
  display: flex;
  --marquee-duration: 42s;
  --marquee-gap: 56px;
}

.mkt-marquee-track {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  width: max-content;
  gap: var(--marquee-gap);
  align-items: center;
  animation: mktMarqueeScroll var(--marquee-duration) linear infinite;
  will-change: transform;
}

.mkt-marquee-track > .swiper-slide {
  flex-shrink: 0;
}

.mkt-marquee-track .swiper-slide {
  padding: 0;
}

.mkt-marquee-clone { }

.mkt-marquee.is-reduced-motion .mkt-marquee-track {
  animation: none;
}

.mkt-marquee:hover .mkt-marquee-track {
  animation-play-state: paused;
}

@keyframes mktMarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

/* Footer partner logos */
.mkt-footer-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 22px;
}

.mkt-partner-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 34px;
  object-fit: contain;
  opacity: 0.88;
  transition: opacity 180ms ease, filter 180ms ease;
}

.mkt-partner-logo--wide {
  max-height: 30px;
  max-width: 88px;
}

html[data-theme="dark"] .mkt-partner-logo {
  filter: brightness(1.08);
}

html[data-theme="light"] .mkt-partner-logo {
  filter: none;
  opacity: 0.8;
}

.mkt-footer-partners .mkt-partner-logo:hover {
  opacity: 1;
}

/* Tablet — override per-slot inline --logo-height/--logo-max-width via
   attribute selector, which beats element style="" specificity. */
@media (max-width: 900px) {
  .mkt-logostrip-section {
    padding: 44px 24px 60px;
  }

  .mkt-brands-carousel .swiper-slide {
    height: 60px;
  }

  .mkt-marquee {
    --marquee-gap: 40px;
    --marquee-duration: 32s;
  }

  .mkt-client-logo-slot[style] {
    --logo-height: 34px !important;
    --logo-max-width: 130px !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .mkt-logostrip-section {
    padding: 36px 16px 52px;
  }

  .mkt-logostrip-title {
    margin: 0 0 28px;
    font-size: 10.5px;
    letter-spacing: 1.5px;
  }

  .mkt-brands-carousel .swiper-slide {
    height: 44px;
  }

  .mkt-marquee {
    --marquee-gap: 28px;
    --marquee-duration: 24s;
  }

  .mkt-client-logo-slot[style] {
    --logo-height: 26px !important;
    --logo-max-width: 100px !important;
  }

  .mkt-brands-carousel-wrap {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }
}

/* Theme toggle */
.mkt-theme-toggle {
  border: 1px solid var(--border-solid);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease, border-color 120ms ease;
}

.mkt-theme-toggle:hover {
  color: var(--text-primary);
}

.mkt-theme-toggle .icon-sun { display: none; }

html[data-theme="dark"] .mkt-theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .mkt-theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .mkt-theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .mkt-theme-toggle .icon-moon { display: block; }

/* Hero secondary CTA: product demo video */
.mkt-hero-demo-video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-roboto);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.165px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease;
}

.mkt-hero-demo-video:hover {
  color: var(--green);
}

.mkt-hero-demo-video__icon {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid var(--border-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 120ms ease, background 120ms ease;
}

.mkt-hero-demo-video:hover .mkt-hero-demo-video__icon {
  border-color: var(--green);
  background: rgba(0, 219, 142, 0.08);
}

/* Buttons */
.btn-mkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-roboto);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.btn-mkt.sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 32px;
}

.btn-mkt.lg {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  line-height: 44px;
}

.btn-mkt.brand {
  background-color: var(--green);
  color: #08090a;
  border: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 20px -8px rgba(0, 219, 142, 0.55);
}

.btn-mkt.brand:hover {
  background-color: var(--green-dark);
}

.btn-mkt.brand:disabled {
  opacity: 0.74;
  cursor: not-allowed;
}

.btn-mkt.ghost {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-solid);
}

.btn-mkt.ghost:hover {
  background-color: var(--border-subtle);
}

.w-100 {
  width: 100%;
}

/* Typography */
.mkt-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.13px;
  color: var(--green);
  margin-bottom: 14px;
}

.mkt-title-lg {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.9px;
  color: var(--text-primary);
}

.mkt-title-md {
  margin: 0;
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.mkt-lead {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-secondary);
}

.mkt-hero-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.5rem, 4.25vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -1.2px;
  color: var(--text-primary);
}