/* End-user editorial layer: practical journeys, one brand and one readable type system. */
:root {
  --end-user-ui: "Hanken Grotesk", system-ui, sans-serif;
  --end-user-display: "Playfair Display", Georgia, serif;
  --end-user-wordmark: "Cormorant Garamond", Georgia, serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--end-user-ui);
}

h1,
h2,
h3,
.atlas-hero h1,
.atlas-card h2,
.atlas-brand strong,
.journey-shell h2,
.journey-shell h3,
.news-body h3 {
  font-family: var(--end-user-display);
}

.brand .wordmark,
.atlas-brand strong {
  font-family: var(--end-user-wordmark);
}

/* The five stops are questions a patient can act on, not a site inventory. */
#products .journey-intro {
  max-width: 760px;
}

#products .journey-intro p {
  max-width: 68ch;
}

#products .journey-stop {
  grid-template-columns: minmax(42px, .12fr) minmax(0, 1.48fr) minmax(220px, .82fr);
}

#products .journey-stop:hover,
#products .journey-stop:focus-within {
  border-color: rgba(228, 127, 164, .48);
  background: linear-gradient(105deg, rgba(228, 127, 164, .08), rgba(255, 255, 255, .018));
}

#products .journey-stop--availability .journey-label {
  color: #c6a479;
}

#products .journey-stop--community .journey-label {
  color: #8eb7aa;
}

#products .journey-outcome strong {
  text-wrap: balance;
}

#products .journey-action,
#news-preview .news-card-link,
.news-hub-page .atlas-card__cta {
  text-underline-offset: 4px;
}

/* The news hub leads with a real question and keeps every card useful at a glance. */
.news-hub-page .atlas-hero h1,
.news-hub-page .atlas-card h2 {
  text-wrap: balance;
}

.news-hub-page .atlas-card p {
  max-width: 60ch;
}

.news-hub-page .atlas-card[data-topic="community"] {
  --card-accent: 142, 183, 170;
}

.news-hub-page .atlas-card[data-topic="price"] {
  --card-accent: 190, 142, 105;
}

.news-hub-page .atlas-card[data-topic="wording"] {
  --card-accent: 228, 127, 164;
}

@media (max-width: 860px) {
  #products .journey-stop {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  #products .journey-outcome {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  #products .journey-stop {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  #products .journey-outcome {
    grid-column: 1 / -1;
    margin-left: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #products .journey-stop {
    transition: none;
  }
}

/* Final end-user layer: consistent type, generous measure, useful surfaces. */
:root {
  --end-user-line: rgba(239, 231, 220, .14);
  --end-user-muted: #b9ac9d;
  --end-user-ink: #efe7dc;
}

body,
button,
input,
textarea,
select {
  font-family: var(--end-user-ui);
}

.atlas-hero h1,
.news-start h2,
.atlas-card h2,
.atlas-copy h2,
.atlas-aside strong,
.journey-shell h2,
.journey-shell h3 {
  font-family: var(--end-user-display);
  text-wrap: balance;
}

.atlas-hero p,
.atlas-card p,
.atlas-copy p,
.atlas-callout,
.news-start p {
  text-wrap: pretty;
}

.news-hub-page .atlas-card {
  isolation: isolate;
}

.news-hub-page .atlas-card::after,
.news-hub-page .atlas-card > .atlas-meta,
.news-hub-page .atlas-card > [data-provenance],
.news-hub-page .atlas-card > [class*="metric"],
.news-hub-page .atlas-card > [class*="source"] {
  display: none;
}

.news-hub-page .atlas-card img,
.atlas-copy img,
.atlas-copy figure img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.news-hub-page .atlas-card .atlas-card__cta,
.news-hub-page .news-route,
#news-preview .news-card-link,
#products .journey-action {
  text-underline-offset: 4px;
}

.news-hub-page .atlas-card:focus-visible,
.news-hub-page .news-route:focus-visible,
.atlas-copy a:focus-visible,
.atlas-aside a:focus-visible {
  outline: 3px solid var(--pink, #e47fa4);
  outline-offset: 4px;
}

@media (max-width: 680px) {
  .news-hub-page .atlas-card p,
  .atlas-copy p,
  .atlas-callout {
    line-height: 1.72;
  }
}

/* Shared editorial rhythm: the same serif display voice and readable UI copy on every locale. */
.home-action-hub,
.news-hub-page { font-family: var(--ui, "Hanken Grotesk", system-ui, sans-serif); }
.home-action-hub h2,
.home-action-hub h3,
.news-hub-page .atlas-hero h1,
.news-hub-page .news-start h2,
.news-hub-page .atlas-card h2 { font-family: var(--serif, "Playfair Display", Georgia, serif); }
.home-action-hub a,
.news-hub-page a { -webkit-tap-highlight-color: rgba(223,126,158,.18); }