/* =========================================================================
 * review.rycolston.com — page-local layout glue for the review hub.
 * Components (nav, btn, footer) and tokens come from the design system,
 * synced in by deploy.sh. Only what is not a component lives here.
 * ========================================================================= */

body {
  margin: 0;
  background: var(--s-surface-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.review {
  flex: 1;
  padding: var(--s-space-3xl) 0 var(--s-space-3xl);
}
.review__inner {
  max-width: 640px;
  text-align: center;
}
.review__title {
  margin: 0 0 var(--s-space-lg);
  color: var(--s-text-primary);
}
.review__sub {
  font-size: var(--p-text-19);
  line-height: var(--p-lh-body);
  color: var(--s-text-muted);
  margin: 0 auto var(--s-space-xl);
  max-width: 520px;
}

/* One row per review site, stacked, full width on a phone. */
.review__sites {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-md);
  max-width: 360px;
}
.review__sites [hidden] { display: none; }
.review__btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}
.review__note { margin: var(--s-space-md) 0 0; }

.review__footer { padding-block: var(--s-space-xl); }
.review__who {
  margin: 0 0 var(--s-space-sm);
  font-size: var(--p-text-15);
  color: var(--s-text-primary);
}
.review__footer .footer__legal {
  gap: var(--s-space-md);
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 480px) {
  .review { padding-top: var(--s-space-2xl); }
}