/* previa.css — Previa-specific overrides */

:root {
  --color-accent: var(--color-previa-teal);
}

/* App icon uses rounded corners matching iOS icon shape */
.app-previa .app-hero__icon,
.app-previa .app-card__icon {
  border-radius: 22.5%;
}

/* Hero background tint — bleeds edge-to-edge */
.app-previa .app-hero {
  background: linear-gradient(160deg, var(--color-previa-teal-light) 0%, var(--color-background) 70%);
  margin: 0 calc(-1 * var(--pad-x-mobile));
  padding-left: var(--pad-x-mobile);
  padding-right: var(--pad-x-mobile);
  border-bottom: 1px solid var(--color-previa-teal-light);
}

@media (min-width: 768px) {
  .app-previa .app-hero {
    margin: 0 calc(-1 * var(--pad-x-desktop));
    padding-left: var(--pad-x-desktop);
    padding-right: var(--pad-x-desktop);
  }
}

/* Feature list */
.app-previa .content ul li::marker {
  color: var(--color-previa-teal);
}

/* Inline links */
.app-previa .content a {
  color: var(--color-previa-teal);
}

.app-previa .content a:hover {
  color: var(--color-previa-teal-dark);
}

/* Horizontal rule between sections */
.app-previa .content hr {
  border-color: var(--color-previa-teal-light);
}

/* Guide buttons */
.app-previa .guide-btn:hover {
  border-color: var(--color-previa-teal);
  color: var(--color-previa-teal);
}