/* Base styles */
html, body {
  height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-size: var(--fs-m);
  line-height: var(--lh-m);
}

header.site-header {
  background: transparent;
}

/* Hero */
.hero {
  overflow: hidden;
}
.hero .left {
  flex: 1 1 30rem;
  text-align: var(--align-center);
}
.hero h1 {
  margin: 0 0 var(--space-s) 0;
  font-size: var(--fs-xl);
  line-height: 1.05;
}
.hero p.lead {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-s);
  text-align: var(--align-center);
}

/* Cards */
.card {
  margin-bottom: var(--card-margin);
  border-radius: var(--radius);
  background: transparent;
}
.card-inner {
  padding: var(--card-padding);
}

.card-inner a {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--fs-m);
  font-weight: var(--fw-bold);
  transition: color var(--transition-medium) ease;
  letter-spacing: var(--ls-s);
}

.card-inner a:hover {
  opacity: var(--opacity-medium);
}

/* Media card */
.card.media-card {
  padding: 0;
}

/* Video */
.video-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  width: 100%;
}
.video-wrap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: none;
  border: 0;
}
.video-wrap.loaded iframe {
  display: block !important;
}

/* Layout helpers */
.row {
  display: flex;
  gap: var(--gap-l);
  flex-wrap: wrap;
  margin-bottom: var(--space-l);
}
.col {
  flex: 1 1 20rem;
  min-width: 16.25rem;
}

/* Sections */
.benefits, .social-proof, .features {
  text-align: var(--align-center);
}
.benefits h2, .features h2, .social-proof h2 {
  margin: 0 0 var(--space-s) 0;
  font-size: var(--fs-l);
}
.benefits p {
  margin: 0 0 var(--space-s) 0;
  color: var(--color-muted);
  line-height: var(--lh-m);
  font-size: var(--fs-s);
}
.features ul {
  padding-left: 1.125em;
  margin: var(--space-s) 0 0 0;
  color: var(--color-muted);
  list-style: none;
}
.features li {
  margin: var(--space-s) 0;
  font-size: var(--fs-s);
}
.social-proof {
  font-style: normal;
  color: var(--color-muted);
}
.social-proof .quote {
  font-size: var(--fs-s);
  margin: 0;
}
.social-proof .who {
  margin-top: var(--space-s);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

/* Buy area */
.buy-area {
  display: flex;
  gap: var(--gap-l);
  align-items: center;
  flex-direction: column;
}
.buy-area h2 {
  margin: 0 0 var(--space-s) 0;
  font-size: var(--fs-l);
  text-align: var(--align-center);
}
.buy-area p {
  margin: 0 0 var(--space-s) 0;
  color: var(--color-muted);
  font-size: var(--fs-s);
  max-width: 35rem;
  text-align: var(--align-center);
}

/* Buttons */
.btn {
  background: var(--color-button);
  color: var(--color-text);
  border: 0;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-weight: var(--fw-bold);
  font-size: var(--fs-m);
  transition: background var(--btn-transition) ease, box-shadow var(--btn-transition) ease;
  box-shadow: var(--btn-shadow);
}
.btn:hover, .btn:focus-visible {
  background: var(--color-button-hover);
  box-shadow: var(--btn-shadow-hover);
}
/* Sticky buy */
.sticky-buy {
  position: fixed;
  right: var(--space-xl);
  bottom: var(--space-xl);
  background: var(--color-button);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
  z-index: var(--z-modal);
  transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
  cursor: pointer;
  border: 0;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-size: var(--fs-m);
}
.sticky-buy:hover, .sticky-buy:focus-visible {
  background: var(--color-panel);
}
.sticky-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
}
.sticky-buy.hide-sticky {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Main content box */
main {
  width: 96%;
  background: var(--color-bg);
  border-radius: var(--radius);
  max-width: var(--max-width);
  margin: var(--space-m) auto;
  padding: var(--space-m);
  text-align: center;
  color: var(--color-text);
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: var(--bp-tablet)) {
  .hero {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }
  .video-wrap iframe {
    height: 18.75rem;
  }
  .sticky-buy {
    right: var(--space-m);
    bottom: var(--space-m);
  }
}

@media (max-width: 36rem) {
  main {
    background: none;
    padding: var(--space-xxl) 0;
  }
}

/* ------------------------------
   Scroll reveal animation system
------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  will-change: opacity, transform;
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal].visible p {
  margin: 0 0 var(--space-s) 0;
  color: var(--color-muted);
  line-height: var(--lh-m);
  font-size: var(--fs-s);
}

/* Feature list items - staggered fade/slide */
.feature-list li {
  opacity: 0;
  transform: translateY(0.75em);
  transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
  will-change: opacity, transform;
}
.feature-list li.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Benefits paragraphs */
.benefits p {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  will-change: opacity, transform;
}
.benefits p.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Buy area */
.buy-area h2, .buy-area p {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  will-change: opacity, transform;
}
.buy-area h2.visible, .buy-area p.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Social proof */
.social-proof .quote, .social-proof .who {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  will-change: opacity, transform;
}
.social-proof .quote.visible, .social-proof .who.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero headings and lead paragraph */
.hero h1, .hero p.lead {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  will-change: opacity, transform;
}
.hero h1.visible, .hero p.lead.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Compact plugin details */
/* Scope these rules to just the row that holds plugin details */
.row[aria-label="Plugin details"] {
  gap: var(--gap-m);
  align-items: start;
  max-width: var(--container-max-width);
  margin: var(--space-m) auto;
}

/* Make each column use compact card blocks */
.row[aria-label="Plugin details"] .col.card {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-width: 18rem;
}

/* Turn the repeated .card-inner blocks into compact, stacked info panels */
.row[aria-label="Plugin details"] .card-inner {
  line-height: var(--lh-m);
}

/* Smaller headings for these compact blocks */
.row[aria-label="Plugin details"] .card-inner h2 {
  font-size: var(--fs-m);
  margin: 0 0 var(--space-xs) 0;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-s);
}

/* Reduce body text size and tighten spacing */
.row[aria-label="Plugin details"] .card-inner p {
  font-size: var(--fs-s);
  margin: 0;
  color: var(--color-muted);
}

/* Make lists and long lines wrap nicely */
.row[aria-label="Plugin details"] .card-inner p,
.row[aria-label="Plugin details"] .card-inner ul {
  max-width: 36rem;
  word-wrap: break-word;
}

/* On wide screens show both columns in a bit tighter grid */
@media (min-width: calc(var(--bp-tablet) + 1px)) {
  .row[aria-label="Plugin details"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-m);
  }

  .row[aria-label="Plugin details"] .col.card {
    display: block;
  }

  /* group the three small blocks inside each column so they align */
  .row[aria-label="Plugin details"] .col.card > .card-inner {
    display: block;
  }
}

/* On small screens keep blocks stacked but tighter */
@media (max-width: var(--bp-mobile)) {
  .row[aria-label="Plugin details"] {
    gap: var(--gap-s);
    padding: 0 var(--space-s);
  }
  .row[aria-label="Plugin details"] .card-inner {
    padding: var(--padding-xs);
    margin-bottom: var(--gap-xs);
  }
}

/* Slightly reduce the main section title size so it does not overpower */
.features h2,
.benefits h2,
.social-proof h2 {
  font-size: var(--fs-l);
}


/* Compatibility container */
.compatibility-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-l);
  max-width: var(--container-max-width);
  margin: var(--space-m) auto;
  box-sizing: border-box;
  text-align: left;
}

/* Card */
.compatibility-box {
  flex: 1 1 calc(33.33% - var(--gap-l));
  min-width: 17.5rem;
  max-width: 24rem;
  background: var(--color-panel);
  border-radius: calc(var(--radius) * 1.3333);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  box-sizing: border-box;
  box-shadow: var(--card-shadow);
}

.compatibility-box h3 {
  font-size: var(--fs-l);
  line-height: var(--lh-s);
  color: var(--color-text);
  margin-bottom: var(--space-s);
  letter-spacing: var(--ls-s);
  margin-top: var(--space-s);
}

.compatibility-box p {
  color: var(--color-muted);
  margin: var(--space-xs) 0;
  line-height: var(--lh-s);
  font-size: var(--fs-s);
}

/* Links */
.compatibility-box a {
  text-decoration: none;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  margin-right: var(--space-s);
  transition: color var(--transition-medium) ease;
  font-size: var(--fs-s);
}

.compatibility-box a:hover {
  color: var(--color-accent-hover);
}

/* Downloads grid (2x2 style) */
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);
}

/* Download button */
.download-button {
  background-color: var(--color-button);
  padding: var(--space-s);
  text-align: center;
  border-radius: calc(var(--radius) * 0.6667);
  color: var(--color-text) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  transition: background var(--transition-medium);
  box-shadow: var(--btn-shadow);
}

.download-button:hover {
  background-color: var(--color-button-hover);
  box-shadow: var(--btn-shadow-hover);
}

/* Responsive behavior */
@media (max-width: 64rem) {
  .compatibility-container {
    flex-direction: column;
    align-items: var(--align-center);
  }

  .compatibility-box {
    min-width: var(--full);
    max-width: none;
  }

  .nav-container {
    justify-content: var(--align-center);
    flex-wrap: wrap;
  }
}

@media (max-width: var(--bp-mobile)) {
  .download-grid {
    grid-template-columns: 1fr;
  }

  .compatibility-container {
    gap: var(--gap-m);
  }

  .img-parent {
    flex-direction: column;
    align-items: var(--align-center);
  }

  .img-sub {
    max-width: var(--full) !important;
  }
}

/* Markdown container */
#rendered-markdown {
  background: var(--color-panel);
  border-radius: calc(var(--radius) * 1.3333);
  max-width: var(--container-max-width);
  margin: var(--space-m) auto;
  padding: var(--space-l);
  color: var(--color-text);
  text-align: var(--align-center);
  box-sizing: border-box;
  box-shadow: var(--shadow-soft);
}