/**
 * Precision Stark landing primitives (product landing pages).
 * Opt-in: link after precision-stark.css. Not part of the bundle, so
 * already rolled-out apps are unaffected until a page links it.
 */

.ps-hero {
  display: grid;
  gap: var(--ps-space-md);
  align-content: center;
  justify-items: start;
  /* Keep logo + H1 + subline + CTA pair inside the first viewport at 390x844. */
  min-height: min(560px, 80svh);
  padding: var(--ps-space-xl) var(--ps-page-margin);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-surface-elevated);
  box-shadow: var(--ps-bevel-inset), var(--ps-elevation-shadow);
  color: var(--ps-ink);
}

.ps-hero__title {
  margin: 0;
  font-family: var(--ps-font-display);
  font-size: var(--ps-display-lg-size);
  font-weight: 700;
  line-height: var(--ps-line-display);
  letter-spacing: var(--ps-tracking-display);
  color: var(--ps-ink);
}

.ps-hero__subline {
  margin: 0;
  max-width: 40rem;
  font-family: var(--ps-font-family);
  font-size: var(--ps-body-lg-size);
  line-height: var(--ps-line-body-lg);
  color: var(--ps-on-surface);
}

.ps-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-sm);
}

.ps-product-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 72px;
}

.ps-hero .ps-btn,
.ps-landing .ps-btn {
  min-height: var(--ps-tap-target);
  min-width: var(--ps-tap-target);
}

/* DESIGN.md: primary CTA is solid #FF9902 with BLACK text (white on #FF9902 fails AA). */
.ps-hero .ps-btn--primary,
.ps-landing .ps-btn--primary {
  background: var(--ps-action);
  border-color: var(--ps-action);
  color: #000000;
  box-shadow: var(--ps-btn-primary-shadow);
}

.ps-hero .ps-btn--secondary,
.ps-landing .ps-btn--secondary {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
  color: var(--ps-white);
  box-shadow: var(--ps-btn-secondary-shadow);
}

.ps-hero .ps-btn,
.ps-landing .ps-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ps-hero .ps-btn:hover,
.ps-landing .ps-btn:hover {
  transform: translateY(-1px);
}

.ps-hero a:focus-visible,
.ps-hero .ps-btn:focus-visible,
.ps-landing a:focus-visible,
.ps-landing .ps-btn:focus-visible {
  outline: 2px solid var(--ps-ink);
  outline-offset: 2px;
  box-shadow: var(--ps-input-focus-glow);
}

.ps-landing a:not(.ps-btn) {
  color: var(--ps-action-text);
}

@media (max-width: 767px) {
  .ps-hero {
    padding: var(--ps-space-lg) var(--ps-page-margin);
  }

  .ps-hero__title {
    font-size: var(--ps-display-lg-mobile-size);
    line-height: var(--ps-line-display-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-hero .ps-btn,
  .ps-landing .ps-btn {
    transition: none;
  }

  .ps-hero .ps-btn:hover,
  .ps-landing .ps-btn:hover {
    transform: none;
  }
}