/* Subpages (support, privacy, terms): the home page's chrome, ground and type rhythm.
   Tokens and shared components stay in their own files. */

html:has(.subpage) {
  background-color: var(--ground);
}

.subpage {
  --nav-shift: 0px; /* no desktop menu bar to sit under */
  background-color: var(--ground);
}

/* Header: display heading and one subline on the ground, lit like the scenes. */
.page-head {
  padding-top: calc(var(--space-xl) + 52px + 12px);
  padding-bottom: var(--space-xl);
  background-image: radial-gradient(90% 100% at 50% 0%, light-dark(rgb(0 113 227 / 0.07), rgb(var(--glow) / 0.42)), transparent 80%);
  background-repeat: no-repeat;
}

.page-head .container {
  display: grid;
  gap: var(--space-sm);
  max-width: 48rem;
}

.page-head h1 {
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 4.5rem);
  line-height: var(--leading-display);
}

.page-head .lead {
  max-width: 36rem;
}

.page-head__meta {
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Body: one calm reading column. */
.page-body {
  max-width: 48rem;
  padding-bottom: var(--space-section);
}

.page-section + .page-section {
  margin-top: var(--space-xl);
}

.page-body h2 {
  margin-bottom: var(--space-md);
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height: var(--leading-title);
}

.page-body p {
  max-width: var(--measure);
}

.nav-menu a[aria-current="page"] {
  opacity: 1;
}

/* Steps: the order carries information, so the numbers stay. */
.steps {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 2rem;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
  counter-increment: step;
}

.steps li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.steps li::before {
  position: absolute;
  left: 0;
  content: counter(step);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.faq-list summary:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Explainers (setup, analytics): prose with screenshots in the same column. */
.page-section > p + p,
.page-section > p + .plain-list,
.page-section > .plain-list + p,
.page-section > p + .evidence-list,
.page-section > .evidence-list + p {
  margin-top: var(--space-sm);
}

.page-section > h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--text-body);
  line-height: var(--leading-title);
  letter-spacing: 0;
}

.page-section > h3 + p {
  margin-top: 0;
}

.page-body .note {
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--muted);
}

.page-body .steps .note {
  margin-top: var(--space-xs);
}

.plain-list,
.evidence-list {
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
  padding-left: 1.25rem;
  margin-top: var(--space-sm);
}

.evidence-list {
  gap: var(--space-sm);
  padding-left: 0;
  list-style: none;
}

.evidence-list li {
  display: grid;
  gap: 0.25rem;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}

.evidence-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.evidence-list__meta {
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Changelog: one section per version, the date sits under the version name. */
.release__meta {
  margin-top: calc(-1 * var(--space-xs));
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.release .note {
  margin-top: var(--space-sm);
}

.page-body .app-figure {
  margin-top: var(--space-md);
}

.steps .app-figure {
  margin-top: var(--space-sm);
}

/* Contact and Important: quiet, separated by a hairline. */
.support__contact,
.support__important {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}

.support__contact p + p {
  margin-top: var(--space-md);
}

.support__important p {
  color: var(--muted);
}

@media (max-width: 734px) {
  .support__contact .btn {
    padding-inline: var(--space-md);
    overflow-wrap: anywhere;
  }
}

/* Legal text (privacy, terms): the same column, long documents get their own rhythm. */
.legal h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}

.legal > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal p,
.legal li {
  color: var(--muted);
}

.legal strong {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: var(--space-sm);
}

.legal ul,
.legal ol {
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
  padding-left: 1.25rem;
  margin-top: var(--space-xs);
}

.legal .legal-note {
  font-style: normal;
}

.legal .disclaimer {
  margin-bottom: var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--hairline);
}

.legal .disclaimer strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.legal .disclaimer p {
  color: var(--ink);
}

.legal hr {
  margin-block: var(--space-lg);
  border: 0;
  border-top: 1px solid var(--hairline);
}