/* ============================================================
   HiveMind — Plugins ad landing page (/plugins) — CR-09 / HM-525
   Owns .plugins-page additions only. Loads AFTER css/sections/skills.css
   and reuses its sk-* patterns read-only (hero, cards, steps, buy card,
   FAQ, reveal); this file adds only what the landing page needs: the
   price chip, the outcome strip, the desktop-only hero visual, the
   final CTA band, and the mobile sticky CTA. Tokens from css/tokens.css.

   Accent discipline (DESIGN.md): interactive teal (--hive-500) only on
   buttons; non-interactive accents Sage (--hive-300). One mono .eyebrow
   (hero kicker). No Ember (footer lockup dot owns the single use).
   ============================================================ */

/* Sticky-header clearance for this page's own anchor ids. */
.plugins-page :is(#catalog) {
  scroll-margin-top: var(--nav-h);
}

/* ---- Hero additions ---- */

/* This headline runs longer than /skills'; at display size it wraps five
   lines on desktop and pushes the primary CTA below an 800px fold. Step it
   down one size on wide screens (mobile keeps the clamped display size,
   where the CTA already clears the 375x812 gate). */
@media (min-width: 768px) {
  .plugins-page .sk-hero__title {
    font-size: var(--fs-h1);
  }
}

/* Trust microcopy under the CTA row (echoes .sk-buy-secure, left-aligned). */
.pl-trust-note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--fs-eyebrow);
  color: var(--muted-dark);
}

.pl-trust-note svg {
  flex: none;
  color: var(--hive-300);
}

/* Terminal visual is desktop-only so the primary CTA stays above the
   fold at 375px — the ad page's one hard layout gate. */
.pl-hero-visual {
  display: none;
}

@media (min-width: 768px) {
  .pl-hero-visual {
    display: block;
    min-width: 0;
  }
}

/* ---- Outcome strip ---- */
.pl-outcomes {
  padding-block: var(--space-2xl);
  border-block: 1px solid var(--line-dark);
}

.pl-outcomes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .pl-outcomes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.pl-outcomes__grid li {
  color: var(--muted-dark);
  font-size: var(--fs-sm);
}

.pl-outcomes__grid b {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--offwhite);
}

/* ---- Catalog price chip (foots each plugin card's meta row) ---- */
.pl-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--hive-300);
  color: var(--hive-300);
  white-space: nowrap;
}

/* Not-yet-purchasable plugins (checkout sells the three audits today). */
.pl-chip--soon {
  border-color: var(--line-dark);
  color: var(--muted-dark);
}

/* ---- Final CTA band ---- */
.pl-final .container {
  max-width: 60ch;
  text-align: center;
}

.pl-final h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
}

.pl-final .btn {
  margin-top: var(--space-xl);
}

.pl-final .sk-cta-note {
  margin-top: var(--space-md);
}

/* ---- Sticky mobile CTA bar (under 768px) ---- */
.pl-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--space-sm) var(--space-md);
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  background: var(--ink); /* fallback for no color-mix support */
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  border-top: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pl-sticky .btn {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Keep the footer readable above the fixed bar on mobile. */
.plugins-page ~ .site-footer {
  padding-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .pl-sticky {
    display: none;
  }

  .plugins-page ~ .site-footer {
    padding-bottom: 0;
  }
}