/* Home page additions. Tokens and components stay in their own files. */

.container--wide {
  max-width: 1200px;
}

.section--compact {
  padding-block: var(--space-xl);
}

/* App figures: picture fills the figure, size comes from the modifier. */
.app-figure {
  width: 100%;
  margin-inline: auto;
}

.app-figure picture {
  width: 100%;
}

.app-figure--hero {
  max-width: 520px;
}

/* Tablet: stacked figures stay a sensible size next to their text. */
@media (min-width: 735px) and (max-width: 1068px) {
  .feature-row .app-figure {
    max-width: 720px;
  }
}

.app-figure--tall {
  max-width: 340px;
}

/* Section statements: centred text-only blocks. */
.statement {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.statement + .fact-list {
  margin-top: var(--space-lg);
}

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

.statement p:not(.lead):not(.statement__small) {
  max-width: var(--measure);
  color: var(--muted);
}

.statement--important p {
  color: var(--ink);
}

.final-cta {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.final-cta .badge-note {
  margin-top: calc(var(--space-sm) * -1);
}

/* Feature rows */
.feature-row__text {
  gap: var(--space-sm);
}

.feature-row__text h3,
.pair__item h3 {
  font-size: 1.5rem;
  line-height: var(--leading-title);
}

.feature-row .fact-list {
  margin-inline: 0;
  margin-top: var(--space-xs);
}

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

.fact-list--centered {
  text-align: center;
}

.feature-row__text .note {
  max-width: var(--measure);
}

@media (min-width: 1069px) {
  .feature-row--wide {
    grid-template-columns: 4fr 8fr;
  }

  .feature-row--wide + .feature-row--wide {
    margin-top: var(--space-section);
  }
}

.note--caveat {
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
}

/* Reversed rows: the wide column follows the media, so the screenshot keeps its size. */
@media (min-width: 1069px) {
  .feature-row--reverse {
    grid-template-columns: 7fr 5fr;
  }

  .feature-row--wide.feature-row--reverse {
    grid-template-columns: 8fr 4fr;
  }
}

/* Analytics: one large moment, a pair, then Observations. */
.pair {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-section);
  text-align: center;
}

@media (min-width: 900px) {
  .pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

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

.pair__more {
  margin-top: var(--space-lg);
  text-align: center;
  color: var(--muted);
}

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

.feature-row--obs {
  margin-top: var(--space-section);
}

@media (min-width: 1069px) {
  .feature-row--obs {
    grid-template-columns: 5fr 7fr;
  }
}

/* Crop to the content pane: the window chrome and sidebar are not the point at this size. */
.crop {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.37;
  border-radius: var(--radius-md);
  filter: var(--window-shadow);
}

.crop picture {
  display: block;
}

.crop picture img {
  width: 134%;
  max-width: none;
  margin: -8% 0 0 -34%;
  filter: none;
}

/* Observations: sentence, then its evidence in muted text. */
.obs-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xs);
  list-style: none;
}

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

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

.feature-row__text .obs__text {
  max-width: var(--measure);
  color: var(--ink);
}

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

/* Privacy: the headline fact, at display scale. */
.statement--display {
  max-width: 52rem;
}

.statement--display h2 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.statement--display .lead:not(.lead--quiet) {
  max-width: 36rem;
  color: var(--ink);
}

.fact-columns {
  display: grid;
  gap: var(--space-md);
  max-width: 52rem;
  margin: var(--space-xl) auto 0;
  list-style: none;
}

.fact-columns li {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-body);
  color: var(--muted);
}

@media (min-width: 735px) {
  .fact-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Also included: one quiet line. */
.also-line {
  display: grid;
  gap: 0.5rem;
  max-width: 48rem;
  margin: var(--space-xl) auto 0;
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--muted);
  list-style: none;
  text-align: center;
}

.badge-note--need {
  max-width: 36rem;
  margin-top: 0;
  text-align: center;
}