/*!
 * SUITE LANDING — Pass 3 product-family stage (DEML + FORJD + community)
 * ----------------------------------------------------------------------------
 * forjd.co · deml.app / · dataengineeringformachinelearning.com
 * Atmosphere + hero + section rhythm only. Tokens + suite-components for chrome.
 * Dual/triple class aliases keep historical markup working during lockstep.
 * Docs: SUITE_LANDING.md
 */

/* =============================================================================
   Stage — void atmosphere (SpaceX power + Porsche precision + electric command)
   ============================================================================= */
:is(.suite-landing, .fj-landing, .landing-container, .community-home) {
  /* Restrained command atmosphere — no neon orbs; stepped light only. */
  /* Single electric wash — calm confidence over layered theater */
  --_suite-landing-glow: color-mix(
    in srgb,
    var(--suite-primary) 11%,
    transparent
  );
  position: relative;
  isolation: isolate;
  min-height: 100%;
  font-family: var(--suite-font-sans);
  color: var(--suite-ink);
}

/*
 * Atmosphere uses absolute (not fixed) so it works inside Angular app shells
 * that apply transform/containment on main content. Covers full landing height.
 */
:is(.suite-landing, .fj-landing)::before,
.landing-container.suite-landing::before,
.community-home.suite-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      100% 70% at 12% -10%,
      var(--_suite-landing-glow),
      transparent 62%
    ),
    var(--suite-bg);
}

:is(.suite-landing, .fj-landing)::after,
.landing-container.suite-landing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--suite-border) 40%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--suite-border) 40%, transparent) 1px,
      transparent 1px
    );
  background-size: var(--suite-space-10) var(--suite-space-10);
  mask-image: radial-gradient(ellipse at 30% 0%, black 0%, transparent 48%);
}

/* Children above atmosphere */
:is(.suite-landing, .fj-landing, .landing-container.suite-landing) > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  :is(.suite-landing, .fj-landing)::after,
  .landing-container.suite-landing::after {
    opacity: 0.04;
  }
}

/*
 * Constrained delivery — solid void, skip grid mask + paint-heavy hairlines.
 * High-end / wide viewports keep the electric wash + grid.
 * prefers-reduced-data is progressive (unsupported browsers ignore the clause).
 */
@media (max-width: 600px), (prefers-reduced-data: reduce) {
  :is(.suite-landing, .fj-landing)::before,
  .landing-container.suite-landing::before,
  .community-home.suite-landing::before {
    background: var(--suite-bg);
  }

  :is(.suite-landing, .fj-landing)::after,
  .landing-container.suite-landing::after {
    content: none;
    display: none;
  }

  :is(.suite-landing-feature, .landing__feature)
    :is(.suite-card, .viking-card, .fj-card)::before,
  :is(.suite-landing-steps, .landing__steps)
    :is(.suite-landing-feature, .landing__feature)
    :is(.suite-card, .viking-card, .fj-card)::before,
  :is(.landing__band-panel) :is(.suite-card, .viking-card, .fj-card)::before {
    content: none;
    display: none;
  }
}

/* --- Page stack --- */
:is(.suite-landing, .fj-landing, .landing, .showcase-layout.suite-landing) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-section-gap);
  padding-block: var(--suite-space-8) var(--suite-space-14);
  min-height: min(100dvh, 100%);
  max-width: var(--suite-content-max);
  margin-inline: auto;
  padding-inline: var(--suite-page-gutter);
  box-sizing: border-box;
}

/* When nested inside forjd-page-shell which already gutters */
forjd-page-shell :is(.suite-landing, .fj-landing, .landing) {
  max-width: none;
  padding-inline: 0;
}

/*
 * deml.app product-home uses .page-inner-wrapper (layout-shell) AND suite-landing.
 * Collapse double gutters / grid so the stage owns the column rhythm.
 */
.page-inner-wrapper.suite-landing,
.page-inner-wrapper.showcase-layout.suite-landing {
  display: flex;
  flex-direction: column;
  gap: var(--suite-section-gap);
  max-width: var(--suite-content-max);
  margin-inline: auto;
  padding-inline: var(--suite-page-gutter);
  padding-block: var(--suite-space-6) var(--suite-space-10);
  min-height: 0;
  grid-template-columns: unset;
}

.page-inner-wrapper.suite-landing .suite-landing-hero,
.page-inner-wrapper.suite-landing .viking-unified-hero,
.page-inner-wrapper.suite-landing .landing__hero {
  /* Leave room for navbar + footer — avoid 78dvh hero crushing the fold */
  min-height: min(52dvh, 26rem);
  padding-block: var(--suite-space-5) var(--suite-space-3);
  max-width: 40rem;
}

.page-inner-wrapper.suite-landing .suite-landing-brand,
.page-inner-wrapper.suite-landing .hero-brand {
  /* Match forjd.co display brand weight — no deml-only shrink */
  font-size: var(--suite-text-display);
  letter-spacing: var(--suite-tracking-brand);
  color: var(--suite-ink);
  text-shadow: none;
}

/* Quiet secondary mark on community marketing (not a competing display title) */
.suite-landing-mark-label {
  margin: 0;
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-medium);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--suite-ink-muted) 85%, transparent);
}

/* suite-card already pads — don't double-pad step/pillar tiles */
.page-inner-wrapper.suite-landing
  :is(.quick-start-step, .security-pillar).suite-card {
  padding: var(--suite-space-3);
}

/* =============================================================================
   Hero — tall, vivid, industrial display type
   ============================================================================= */
:is(
  .suite-landing-hero,
  .fj-landing-hero,
  .landing__hero,
  .viking-unified-hero
) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
  max-width: 52rem;
  /* Mobile-first: keep steps in the first scroll; grow tall only on large viewports */
  min-height: min(52dvh, 26rem);
  justify-content: center;
  padding-block: var(--suite-space-7) var(--suite-space-5);
}

/* Expensive type rhythm — tighten brand↔headline; open lede→actions */
:is(.suite-landing-mark, .landing__hero-mark)
  + :is(.suite-landing-brand, .fj-brand, .landing__brand) {
  margin-top: calc(-1 * var(--suite-space-0-5));
}

:is(.suite-landing-brand, .fj-brand, .landing__brand)
  + :is(.suite-landing-headline, .landing__hero-line, .fj-headline) {
  margin-top: calc(-1 * var(--suite-space-1));
}

:is(.suite-landing-lede, .landing__lede, .fj-lede)
  + :is(.suite-landing-actions, .landing__actions) {
  margin-top: var(--suite-space-2);
}

/* Instant hero — no staggered reveal (calm confidence over clever motion) */

@media (min-width: 768px) {
  :is(
    .suite-landing-hero,
    .fj-landing-hero,
    .landing__hero,
    .viking-unified-hero
  ) {
    gap: var(--suite-space-4);
    min-height: min(58dvh, 30rem);
    padding-block: var(--suite-space-9) var(--suite-space-6);
  }
}

@media (min-width: 1024px) {
  :is(
    .suite-landing-hero,
    .fj-landing-hero,
    .landing__hero,
    .viking-unified-hero
  ) {
    min-height: min(64dvh, 34rem);
    padding-block: var(--suite-space-10) var(--suite-space-6);
  }
}

/* Short / landscape viewports — keep brand + CTAs in the first screen */
@media (max-height: 500px), (max-height: 420px) and (orientation: landscape) {
  :is(
    .suite-landing-hero,
    .fj-landing-hero,
    .landing__hero,
    .viking-unified-hero
  ) {
    min-height: 0;
    justify-content: flex-start;
    padding-block: var(--suite-space-4) var(--suite-space-3);
    gap: var(--suite-space-2);
  }
}

/* Status pill — 80% quiet Production; 20% data-tone + in-badge Retry */
:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge,
  .community-eyebrow
) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
  width: fit-content;
  max-width: min(100%, 32rem);
  margin: 0;
  padding: var(--suite-space-1) var(--suite-space-2);
  border: 1px solid color-mix(in srgb, var(--suite-primary) 28%, transparent);
  border-radius: var(--suite-radius-pill);
  background: color-mix(in srgb, var(--suite-primary) 10%, transparent);
  color: var(--suite-primary-strong);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  box-shadow: var(--suite-highlight);
}

/* Loading chapter — muted confirming, not success green yet */
:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge
)[data-phase="loading"] {
  border-color: color-mix(in srgb, var(--suite-border-strong) 80%, transparent);
  background: color-mix(in srgb, var(--suite-surface-2) 80%, transparent);
  color: var(--suite-ink-muted);
}

:is(
    .suite-landing-badge,
    .hero-badge,
    .viking-unified-hero-badge
  )[data-phase="loading"]
  .badge-dot {
  background: var(--suite-ink-muted);
  animation: suite-confirm 1.4s var(--suite-ease) infinite;
}

:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge
)[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--suite-warning) 45%, transparent);
  background: color-mix(in srgb, var(--suite-warning) 12%, transparent);
  color: var(--suite-warning);
}

:is(
  .suite-landing-badge,
  .hero-badge,
  .viking-unified-hero-badge
)[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--suite-danger) 45%, transparent);
  background: color-mix(in srgb, var(--suite-danger) 12%, transparent);
  color: var(--suite-danger);
}

:is(
    .suite-landing-badge,
    .hero-badge,
    .viking-unified-hero-badge
  )[data-tone="warning"]
  .badge-dot,
:is(
    .suite-landing-badge,
    .hero-badge,
    .viking-unified-hero-badge
  )[data-tone="danger"]
  .badge-dot {
  background: currentColor;
}

:is(.badge-dot, .pulse-dot) {
  width: var(--suite-space-0-5);
  height: var(--suite-space-0-5);
  border-radius: var(--suite-radius-pill);
  background: var(--suite-success);
  flex-shrink: 0;
}

/* Pulse only when explicitly marked live — static otherwise */
:is(.badge-dot).pulse-dot {
  animation: suite-pulse 3.6s var(--suite-ease) infinite;
}

:is(.badge-text) {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Compact edge retry — 44px touch floor; lives in the badge, not a callout */
:is(.suite-landing-badge-retry) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-inline-start: var(--suite-space-0-5);
  min-height: var(--suite-touch);
  min-width: var(--suite-touch);
  padding: 0 var(--suite-space-2);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--suite-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: var(--suite-transition-colors);
}

:is(.suite-landing-badge-retry):hover,
:is(.suite-landing-badge-retry):focus-visible {
  background: color-mix(in srgb, currentColor 14%, transparent);
  outline: none;
}

:is(.suite-landing-badge-retry):focus-visible {
  outline: var(--suite-ring-width) solid var(--suite-ring);
  outline-offset: var(--suite-ring-offset);
}

/* One quiet edge line under the badge — never displaces hero → CTAs → sequence */
:is(.suite-landing-edge, .landing__ready-edge) {
  margin: calc(var(--suite-space-1) * -1) 0 0;
  max-width: 36rem;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-sm);
  font-weight: var(--suite-weight-regular);
  letter-spacing: var(--suite-tracking-normal);
  line-height: var(--suite-leading-snug);
  text-transform: none;
}

:is(.suite-landing-mark, .landing__hero-mark) {
  width: min(3.75rem, 16vw);
  height: auto;
  margin-bottom: 0;
  filter: none;
}

/* Display brand wordmark */
:is(.suite-landing-brand, .landing__brand, .hero-brand, .fj-brand) {
  margin: 0;
  font-family: var(--suite-font-sans);
  font-size: var(--suite-text-display);
  font-weight: var(--suite-weight-extrabold);
  letter-spacing: var(--suite-tracking-brand);
  line-height: var(--suite-leading-tight);
  color: var(--suite-ink);
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: none;
}

/* Primary headline under brand (or standalone title on marketing) */
:is(
  .suite-landing-headline,
  .landing__hero-line,
  .fj-headline,
  .title,
  .viking-unified-hero-title
) {
  margin: 0;
  font-size: var(--suite-text-headline);
  font-weight: var(--suite-weight-medium);
  letter-spacing: var(--suite-tracking-tight);
  max-width: 36rem;
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight);
  text-wrap: balance;
}

/* When brand + title coexist, title is slightly quieter industrial sub */
.suite-landing-brand
  + :is(.title, .viking-unified-hero-title, .suite-landing-headline),
.hero-brand + :is(.title, .viking-unified-hero-title) {
  font-size: var(--suite-text-headline-quiet);
  color: color-mix(in srgb, var(--suite-ink) 92%, var(--suite-primary) 8%);
  max-width: 32rem;
}

:is(
  .suite-landing-lede,
  .landing__lede,
  .fj-lede,
  .subtitle,
  .viking-unified-hero-lead
) {
  margin: 0;
  max-width: var(--suite-readable-max);
  font-size: var(--suite-text-lg);
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-relaxed);
  text-wrap: pretty;
}

:is(
  .suite-landing-actions,
  .landing__actions,
  .viking-unified-hero-actions,
  .cta-group
) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--suite-space-3);
  width: 100%;
  margin-top: var(--suite-space-1);
}

/* Flat CTA row (marketing / deml) — children are suite-btn */
:is(
    .suite-landing-actions,
    .landing__actions,
    .viking-unified-hero-actions,
    .cta-group
  )
  > :is(.suite-btn, .viking-btn, .fj-btn, forjd-button, viking-button) {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

:is(
    .suite-landing-actions,
    .landing__actions,
    .viking-unified-hero-actions,
    .cta-group
  )
  > :is(forjd-button, viking-button)
  :is(.suite-btn, .viking-btn, .fj-btn) {
  width: 100%;
  justify-content: center;
}

/* Tiered CTAs — primary command row + quiet secondary instrument strip */
:is(.suite-landing-actions-primary, .landing__actions-primary) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--suite-cluster-gap);
  width: 100%;
}

:is(.suite-landing-actions-secondary, .landing__actions-secondary) {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--suite-space-1);
  width: 100%;
  padding-top: var(--suite-space-1);
  border-top: 1px solid color-mix(in srgb, var(--suite-border) 80%, transparent);
}

:is(.suite-landing-actions-primary, .landing__actions-primary)
  > :is(forjd-button, viking-button, .suite-btn, .viking-btn, .fj-btn),
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  > :is(
    forjd-button,
    viking-button,
    .suite-btn,
    .viking-btn,
    .fj-btn,
    forjd-theme-toggle,
    viking-theme-toggle
  ) {
  width: 100%;
  box-sizing: border-box;
}

:is(.suite-landing-actions-primary, .landing__actions-primary)
  :is(.suite-btn, .viking-btn, .fj-btn),
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  :is(.suite-btn, .viking-btn, .fj-btn) {
  width: 100%;
  justify-content: center;
}

/* Secondary ghosts — color only (no lift) so the toolbar stays calm */
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  :is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"]:hover:not(
    :disabled
  ):not([aria-disabled="true"]),
:is(.suite-landing-actions-secondary, .landing__actions-secondary)
  :is(.suite-btn, .viking-btn, .fj-btn)[data-variant="ghost"]:active:not(
    :disabled
  ) {
  transform: none;
}

@media (min-width: 600px) {
  :is(
      .suite-landing-actions,
      .landing__actions,
      .viking-unified-hero-actions,
      .cta-group
    ):not(:has(.suite-landing-actions-primary)):not(
      :has(.landing__actions-primary)
    ) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: var(--suite-cluster-gap);
  }

  :is(
      .suite-landing-actions,
      .landing__actions,
      .viking-unified-hero-actions,
      .cta-group
    ):not(:has(.suite-landing-actions-primary)):not(
      :has(.landing__actions-primary)
    )
    > :is(.suite-btn, .viking-btn, .fj-btn, forjd-button, viking-button) {
    width: auto;
  }

  :is(
      .suite-landing-actions,
      .landing__actions,
      .viking-unified-hero-actions,
      .cta-group
    ):not(:has(.suite-landing-actions-primary)):not(
      :has(.landing__actions-primary)
    )
    > :is(forjd-button, viking-button)
    :is(.suite-btn, .viking-btn, .fj-btn) {
    width: auto;
  }

  :is(.suite-landing-actions-primary, .landing__actions-primary) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }

  :is(.suite-landing-actions-primary, .landing__actions-primary)
    > :is(forjd-button, viking-button, .suite-btn, .viking-btn, .fj-btn),
  :is(.suite-landing-actions-primary, .landing__actions-primary)
    :is(.suite-btn, .viking-btn, .fj-btn) {
    width: auto;
  }

  :is(.suite-landing-actions-secondary, .landing__actions-secondary) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: var(--suite-space-1);
  }

  :is(.suite-landing-actions-secondary, .landing__actions-secondary)
    > :is(
      forjd-button,
      viking-button,
      .suite-btn,
      .viking-btn,
      .fj-btn,
      forjd-theme-toggle,
      viking-theme-toggle
    ),
  :is(.suite-landing-actions-secondary, .landing__actions-secondary)
    :is(.suite-btn, .viking-btn, .fj-btn) {
    width: auto;
  }
}

/* CTA content helpers inside suite-btn */
:is(.cta-content) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
}

:is(.cta-label) {
  font: inherit;
  color: inherit;
}

:is(.cta-button) {
  /* structural alias only — chrome from suite-btn */
}

@keyframes suite-pulse {
  0% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--suite-success) 50%, transparent);
  }
  70% {
    box-shadow: 0 0 0 0.45rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Soft confirm breath — loading chapter (opacity only) */
@keyframes suite-confirm {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.badge-dot).pulse-dot,
  :is(
      .suite-landing-badge,
      .hero-badge,
      .viking-unified-hero-badge
    )[data-phase="loading"]
    .badge-dot {
    animation: none;
    opacity: 1;
  }

  :is(.showcase-link, .community-showcase-cta):hover {
    transform: none;
  }
}

/* =============================================================================
   Section headers / tags
   ============================================================================= */
:is(
  .suite-landing-section-header,
  .landing__section-header,
  .viking-unified-section-header,
  .quick-start-header,
  .security-pillars-header,
  .pricing-header
) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-2);
  max-width: var(--suite-readable-max);
  margin-bottom: var(--suite-block-gap);
}

:is(.suite-landing-tag, .landing__tag, .section-tag, .strip-label) {
  margin: 0;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--suite-weight-medium);
}

:is(
  .suite-landing-section-title,
  .landing__section-title,
  .suite-landing-section-header h2,
  .viking-unified-section-header h2,
  .quick-start-header h2,
  .security-pillars-header h2,
  .pricing-header h2
) {
  margin: 0;
  font-size: var(--suite-text-2xl);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
  color: var(--suite-ink);
  line-height: var(--suite-leading-tight);
  text-wrap: balance;
}

:is(
  .suite-landing-section-lede,
  .landing__section-lede,
  .suite-landing-section-header p,
  .viking-unified-section-header p,
  .quick-start-header p,
  .security-pillars-header p,
  .pricing-header p
) {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
  line-height: var(--suite-leading-normal);
  max-width: var(--suite-readable-max);
}

/* Shared type roles */
:is(.suite-eyebrow, .fj-eyebrow) {
  margin: 0;
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  color: var(--suite-gold);
  font-weight: var(--suite-weight-medium);
}

:is(.suite-display, .fj-display) {
  margin: 0;
  font-size: var(--suite-text-display);
  font-weight: var(--suite-weight-bold);
  letter-spacing: var(--suite-tracking-tight);
  line-height: var(--suite-leading-tight);
  color: var(--suite-ink);
  text-transform: uppercase;
  text-wrap: balance;
}

:is(.suite-meta, .fj-meta, .suite-muted, .fj-muted) {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
}

:is(.suite-error-text, .fj-error) {
  margin: 0;
  color: var(--suite-danger);
  font-size: var(--suite-text-md);
}

/* Panel titles: owned by suite-components.css (triple .suite- / .viking- / .fj-) */

/* =============================================================================
   Steps / grids / features
   ============================================================================= */
:is(.suite-landing-steps, .landing__steps, .quick-start-steps) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-2);
}

@media (min-width: 768px) {
  :is(.suite-landing-steps, .landing__steps, .quick-start-steps) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--suite-space-3);
  }
}

/* 4-up only when each step can stay readable — avoid skinny desktop shrink */
@media (min-width: 1440px) {
  :is(.suite-landing-steps, .landing__steps, .quick-start-steps) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

:is(.suite-landing-step-num, .landing__step-num, .step-number) {
  margin: 0 0 var(--suite-space-2);
  color: var(--suite-primary);
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-sm);
  letter-spacing: var(--suite-tracking-wide);
  font-weight: var(--suite-weight-semibold);
}

:is(.suite-landing-grid, .landing__grid, .community-showcase-grid) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-2);
}

@media (min-width: 768px) {
  :is(.suite-landing-grid, .landing__grid, .community-showcase-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :is(.suite-landing-grid, .landing__grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:is(
  .suite-landing-feature,
  .landing__feature,
  .quick-start-step,
  .security-pillar,
  .community-showcase-card,
  .community-resource-link
) {
  display: block;
  min-height: 100%;
}

:is(.suite-landing-feature, .landing__feature, .quick-start-step) p,
:is(.quick-start-step) p,
:is(.security-pillar) span {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
  line-height: var(--suite-leading-normal);
}

:is(.quick-start-step) h3,
:is(.security-pillar) strong,
:is(.community-showcase-card) h3 {
  margin: 0 0 var(--suite-space-1);
  color: var(--suite-ink);
  font-size: var(--suite-text-lg);
  font-weight: var(--suite-weight-semibold);
  letter-spacing: var(--suite-tracking-tight);
}

/* Cards used as steps get suite card padding if only viking-card */
:is(.quick-start-step, .security-pillar).viking-card:not(.suite-card) {
  /* suite-card already applied when dual-classed */
}

.quick-start-step,
.security-pillar {
  padding: var(--suite-space-3) var(--suite-space-3) var(--suite-space-2);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  box-shadow: var(--suite-elevation-1);
  transition: var(--suite-transition);
}

.quick-start-step:hover,
.quick-start-step:focus-visible,
.security-pillar:hover,
.security-pillar:focus-visible {
  border-color: var(--suite-border-strong);
  background: var(--suite-surface-elevated);
  /* Border/surface only — no lift on dense landing grids */
}

/* forjd-panel / viking-card tiles — hairline + quiet border hover (no lift) */
:is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card),
:is(.suite-landing-steps, .landing__steps)
  :is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card),
:is(.landing__band-panel) :is(.suite-card, .viking-card, .fj-card) {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: var(--suite-transition-colors);
}

:is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card)::before,
:is(.suite-landing-steps, .landing__steps)
  :is(.suite-landing-feature, .landing__feature)
  :is(.suite-card, .viking-card, .fj-card)::before,
:is(.landing__band-panel) :is(.suite-card, .viking-card, .fj-card)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--suite-primary) 28%, transparent),
    color-mix(in srgb, var(--suite-highlight) 55%, transparent) 40%,
    transparent 85%
  );
  opacity: 0.55;
}

:is(.suite-landing-feature, .landing__feature):hover
  :is(.suite-card, .viking-card, .fj-card),
:is(.suite-landing-steps, .landing__steps)
  :is(.suite-landing-feature, .landing__feature):hover
  :is(.suite-card, .viking-card, .fj-card) {
  border-color: var(--suite-border-strong);
  background: var(--suite-surface-elevated);
}

/* =============================================================================
   Capability bands (copy + metric panel)
   ============================================================================= */
:is(.suite-landing-bands, .landing__bands) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-section-gap);
}

:is(.suite-landing-band, .landing__band, .showcase-band) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-block-gap);
  align-items: stretch;
}

@media (min-width: 768px) {
  :is(.suite-landing-band, .landing__band, .showcase-band) {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--suite-space-8);
  }

  :is(.suite-landing-band, .landing__band)[data-reversed="true"],
  .landing__band--reversed,
  .showcase-band.reversed {
    direction: rtl;
  }

  :is(.suite-landing-band, .landing__band)[data-reversed="true"] > *,
  .landing__band--reversed > *,
  .showcase-band.reversed > * {
    direction: ltr;
  }
}

:is(.suite-landing-band-copy, .landing__band-copy, .showcase-band-copy) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-2);
  justify-content: center;
}

:is(.suite-landing-band-title, .landing__band-title, .showcase-band-copy h2) {
  margin: 0;
  font-size: var(--suite-text-xl);
  font-weight: var(--suite-weight-semibold);
  color: var(--suite-ink);
  letter-spacing: var(--suite-tracking-tight);
}

:is(.showcase-band-copy) p {
  margin: 0;
  color: var(--suite-ink-muted);
  line-height: var(--suite-leading-normal);
}

:is(.showcase-link, .community-showcase-cta) {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-1);
  margin-top: var(--suite-space-1);
  color: var(--suite-primary);
  font-weight: var(--suite-weight-semibold);
  font-size: var(--suite-text-sm);
  text-decoration: none;
  letter-spacing: var(--suite-tracking-wide);
  transition: var(--suite-transition);
}

:is(.showcase-link, .community-showcase-cta):hover,
:is(.showcase-link, .community-showcase-cta):focus-visible {
  color: var(--suite-primary-hover);
  transform: translateX(var(--suite-nudge));
}

:is(.showcase-link-row) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-3);
}

/* Metric panel inside bands */
:is(.suite-landing-metric-list, .landing__metric-list, .visual-metrics) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-density-gap);
}

:is(.suite-landing-metric-list, .landing__metric-list) li,
:is(.visual-metric) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--suite-space-3);
  border-bottom: 1px solid var(--suite-border);
  padding-block: var(--suite-space-1);
  font-size: var(--suite-text-md);
}

:is(.suite-landing-metric-list, .landing__metric-list) li:first-child,
:is(.visual-metric):first-child {
  padding-top: var(--suite-space-0-5);
}

:is(.suite-landing-metric-list, .landing__metric-list) li:last-child,
:is(.visual-metric):last-child {
  border-bottom: 0;
  padding-bottom: var(--suite-space-0-5);
}

:is(.suite-landing-metric-list, .landing__metric-list) span,
:is(.metric-label) {
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  letter-spacing: var(--suite-tracking-wide);
  text-transform: uppercase;
  font-size: var(--suite-text-xs);
}

:is(.suite-landing-metric-list, .landing__metric-list) strong,
:is(.metric-value) {
  color: var(--suite-ink);
  font-weight: var(--suite-weight-semibold);
  font-variant-numeric: tabular-nums;
}

:is(.visual-panel, .landing__band-panel) {
  min-height: 100%;
}

:is(.visual-panel-header) {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
  margin-bottom: var(--suite-space-3);
  color: var(--suite-ink);
  font-weight: var(--suite-weight-semibold);
  font-size: var(--suite-text-sm);
}

/* =============================================================================
   Widget / pricing / community extras (suite DNA)
   ============================================================================= */
:is(.widget-showcase, .pricing-showcase, .security-pillars-band) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-block-gap);
}

:is(.widget-showcase-inner) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-5);
  align-items: center;
}

@media (min-width: 768px) {
  :is(.widget-showcase-inner) {
    grid-template-columns: 1fr 1fr;
  }
}

:is(.widget-copy) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
}

:is(.embed-code) {
  margin: 0;
  padding: var(--suite-space-3);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-bg-subtle);
  overflow-x: auto;
}

:is(.embed-code) code {
  font-family: var(--suite-font-mono);
  font-size: var(--suite-text-xs);
  color: var(--suite-success);
  word-break: break-all;
}

/* Center copy with the single free-plan card */
:is(.pricing-showcase) {
  align-items: center;
}

:is(.pricing-showcase) .pricing-header {
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

:is(.pricing-showcase) .pricing-header p {
  max-width: none;
}

:is(.pricing-cards-container) {
  display: grid;
  justify-items: center;
  width: 100%;
}

:is(.pricing-card) {
  padding: var(--suite-space-5);
  border: 1px solid var(--suite-border-strong);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface-elevated);
  /* Focal commercial surface — one step above peer cards */
  box-shadow: var(--suite-elevation-3);
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-3);
  width: 100%;
  max-width: 28rem;
  justify-self: center;
  margin-inline: auto;
}

:is(.pricing-card) h3 {
  margin: 0;
  font-size: var(--suite-text-xl);
  color: var(--suite-ink);
}

:is(.pricing-card) .price {
  font-size: var(--suite-text-4xl);
  font-weight: var(--suite-weight-bold);
  letter-spacing: var(--suite-tracking-tight);
  color: var(--suite-ink);
  font-variant-numeric: tabular-nums;
}

:is(.features-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--suite-space-2);
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
}

:is(.features-list) li {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
}

:is(.security-pillars-grid) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--suite-space-2);
}

@media (min-width: 768px) {
  :is(.security-pillars-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:is(.security-pillar) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-1);
}

/* Community cards */
:is(.community-showcase-card, .community-resource-link) {
  display: flex;
  flex-direction: column;
  gap: var(--suite-density-gap);
  padding: var(--suite-space-3) var(--suite-space-3) var(--suite-space-2);
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-surface);
  background: var(--suite-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--suite-elevation-1);
  transition: var(--suite-transition);
  min-height: 100%;
}

:is(.community-showcase-card):hover,
:is(.community-showcase-card):focus-visible,
:is(.community-resource-link):hover,
:is(.community-resource-link):focus-visible {
  border-color: var(--suite-border-strong);
  box-shadow: var(--suite-elevation-hover);
  background: var(--suite-surface-elevated);
  transform: translateY(var(--suite-hover-lift));
}

:is(.community-showcase-card) p,
:is(.community-resource-link) span {
  margin: 0;
  color: var(--suite-ink-muted);
  font-size: var(--suite-text-md);
  line-height: var(--suite-leading-normal);
}

:is(.community-showcase-card-title) {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
}

:is(.community-resource-link) {
  flex-direction: row;
  align-items: center;
}

:is(.community-resource-link) > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-space-0-5);
}

:is(.community-resource-link) strong {
  color: var(--suite-ink);
  font-size: var(--suite-text-md);
}

:is(.community-resource-list) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--suite-space-2);
}

/* =============================================================================
   Meta footer strip — instrument ledger
   ============================================================================= */
:is(.suite-landing-meta, .landing__meta) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--suite-space-3) var(--suite-space-4);
  border-top: 1px solid var(--suite-border);
  padding-top: var(--suite-space-5);
  margin-top: var(--suite-space-3);
  font-size: var(--suite-text-sm);
  position: relative;
  align-items: start;
}

@media (min-width: 600px) {
  :is(.suite-landing-meta, .landing__meta) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--suite-space-3) var(--suite-space-5);
    padding-top: var(--suite-space-6);
  }
}

@media (min-width: 1024px) {
  :is(.suite-landing-meta, .landing__meta) {
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  }

  :is(.suite-landing-meta, .landing__meta) > div + div {
    border-inline-start: 1px solid
      color-mix(in srgb, var(--suite-border) 70%, transparent);
    padding-inline-start: var(--suite-space-4);
  }
}

:is(.suite-landing-meta, .landing__meta)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: min(100%, 12rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--suite-primary) 55%, transparent),
    transparent
  );
  opacity: 0.5;
}

:is(.suite-landing-meta, .landing__meta) span {
  display: block;
  color: var(--suite-ink-muted);
  font-family: var(--suite-font-mono);
  letter-spacing: var(--suite-tracking-caps);
  text-transform: uppercase;
  font-size: var(--suite-text-xs);
  margin-bottom: var(--suite-space-0-5);
}

:is(.suite-landing-meta, .landing__meta) a,
:is(.suite-landing-meta, .landing__meta) .suite-link,
:is(.suite-landing-meta, .landing__meta) .viking-link,
:is(.suite-landing-meta, .landing__meta) .fj-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--suite-touch);
  color: inherit;
  text-decoration: none;
  border-radius: var(--suite-radius-control);
  transition: var(--suite-transition-colors);
}

:is(.suite-landing-meta, .landing__meta) a:hover code,
:is(.suite-landing-meta, .landing__meta) a:focus-visible code,
:is(.suite-landing-meta, .landing__meta) .suite-link:hover code,
:is(.suite-landing-meta, .landing__meta) .suite-link:focus-visible code,
:is(.suite-landing-meta, .landing__meta) .viking-link:hover code,
:is(.suite-landing-meta, .landing__meta) .viking-link:focus-visible code,
:is(.suite-landing-meta, .landing__meta) .fj-link:hover code,
:is(.suite-landing-meta, .landing__meta) .fj-link:focus-visible code {
  color: var(--suite-primary);
}

:is(.suite-landing-meta, .landing__meta) code {
  color: var(--suite-ink);
  font-family: var(--suite-font-mono);
  word-break: break-all;
}