.site-header .wrap { column-gap: var(--s-3); }
/*
 * The brand's two lines stack beside the mark, so on phones the row keeps the mark's height and still has
 * room for the app link. Narrowed by large text, the lines wrap at spaces; the app link then moves below.
 */
.brand {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: center;
  column-gap: var(--s-2);
  min-block-size: 3.25rem;
  /* Room for the inner focus ring beside the mark, without moving the brand off the content edge. */
  padding: var(--s-1);
  margin-inline: calc(-1 * var(--s-1));
  color: var(--text);
  line-height: 1.3;
  text-decoration: none;
}

/* The app's own launcher artwork, rounded like the favicon (22 % corners). */
.brand-mark {
  display: block;
  grid-row: span 2;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 22%;
}

.brand-name {
  font-weight: 600;
}

.brand-sub {
  color: var(--muted);
  font-size: 0.875rem;
}

/* The app page is not a directory section: a tonal link at the end of the brand row, apart from the tabs. */
.header-app {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-1);
  min-block-size: 2.75rem;
  margin-inline-start: auto;
  padding-inline: var(--s-3);
  color: var(--accent);
  background: var(--tint);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.header-app .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.header-app:hover {
  background: var(--sunken);
}

.header-app[aria-current="page"] {
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent-solid);
}

/*
 * App page: an unframed hero on the page background, the capabilities beside it from 60rem (or below it
 * when there are screenshots), then the directory steps and the questions.
 */

.app-top {
  display: grid;
  gap: var(--s-6);
  margin-block: var(--s-5) var(--s-4);
}

/* Grid items would otherwise widen to a screenshot strip instead of letting it scroll. */
.app-top > * {
  min-inline-size: 0;
}

/* With large text the name moves under the icon rather than widening the page. */
.app-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

/* The 180 px launcher artwork, rounded like the header mark. */
.app-icon {
  display: block;
  flex: none;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 22%;
}

.app-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.app-hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);
  font-weight: 700;
  line-height: 1.25;
}

.app-lead {
  max-inline-size: 34rem;
  margin-block: var(--s-4) 0;
  font-size: 1.125rem;
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-block-start: var(--s-5);
}

/* Full width and stacked on phones; side by side at their own width once both fit. */
.app-download,
.app-directory {
  display: inline-flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 3rem;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-md);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.app-download {
  color: var(--on-accent);
  background: var(--accent-solid);
}

.app-download:hover {
  filter: brightness(1.08);
}

.app-directory {
  color: var(--accent);
  background: var(--tint);
}

.app-directory:hover {
  background: var(--sunken);
}

.app-facts {
  margin-block: var(--s-3) 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.app-features h2 {
  margin: 0 0 var(--s-2);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
}

.features {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Divided rows like the directory lists: the icon in a tinted tile, then a name over one sentence. */
.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--border);
}

.feature .icon {
  grid-row: span 2;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0.5rem;
  border-radius: var(--r-md);
  color: var(--accent);
  background: var(--tint);
}

.feature h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Screenshots: a scrolling strip on phones, one row in the second column on wide screens. */
.app-shots {
  margin: 0;
}

.shots {
  list-style: none;
  display: flex;
  gap: var(--s-3);
  margin: 0;
  padding: 0 0 var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.shots li {
  flex: none;
  scroll-snap-align: start;
}

/* Dimensions come from the width and height attributes, so nothing moves while the files load. */
.shots img {
  display: block;
  inline-size: 11rem;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--sunken);
}

@media (min-width: 30rem) {
  .app-download,
  .app-directory {
    flex: 0 1 auto;
  }
}

@media (min-width: 60rem) {
  .app-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: calc(2 * var(--s-6));
    margin-block-start: var(--s-6);
  }

  .app-top:has(.app-shots) .app-features {
    grid-column: 1 / -1;
  }

  /* The steps and the questions continue the same two columns. */
  .app-more {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: calc(2 * var(--s-6));
  }

  .app-top:has(.app-shots) .features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }

  .shots {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    overflow: visible;
  }

  .shots img {
    inline-size: 100%;
  }
}

.app-steps,
.app-faq {
  margin-block: var(--s-6);
}

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0;
  padding: 0;
}

/* The number sits beside the first line; the step's text and links wrap as ordinary text. */
.steps li {
  counter-increment: step;
  position: relative;
  min-block-size: 1.75rem;
  padding-inline-start: 2.5rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  color: var(--accent);
  background: var(--tint);
  font-size: 0.875rem;
  font-weight: 600;
}

.app-note {
  margin-block: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--info);
  background: var(--info-tint);
  font-size: 0.9375rem;
}

.faq-item {
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--border);
}

.faq-item h3 {
  margin: 0 0 var(--s-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}


@media (forced-colors: active) { .header-app, .app-download, .app-directory { border: 1px solid ButtonText; } }