/* Site pages around the homepage (about, privacy, terms) in the
 * redesign's theme: the same tokens (../../main-landing-page/css/tokens.css),
 * type, header, footer and actions as the homepage, without its scroll
 * story. Phone first; tablet at 768, desktop at 1024, like the homepage.
 * Surfaces: warm off-white page, white and pale-blue bands, navy only in the
 * footer. */
:root {
  --bg: var(--sw-bg-warm);
  --surface: var(--sw-light);
  --line: var(--sw-bg-grey);
  --line-soft: #e7e5e1;
  --ink: var(--sw-dark);
  --muted: var(--sw-secondary);
  --blue: var(--sw-primary);
  --blue-press: #005e9e;
  --tint: var(--sw-bg-blue);
  --navy: var(--sw-navy);
  --g: 20px; /* side gutter */
  --main-w: 560px; /* content width */
  --read-w: 680px; /* long-form measure */
  --header-h: 60px;
  --r-card: 22px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-card: 0 1px 2px rgba(12, 14, 30, 0.06), 0 12px 32px -18px rgba(12, 14, 30, 0.28);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/24px var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

a {
  color: var(--blue);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

figure,
blockquote {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: absolute;
  inset-inline-start: 8px;
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  top: -60px;
  z-index: 12;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip:focus {
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  top: 8px;
}

/* ───────── Header (the homepage's) ───────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 11;
  background: #fff;
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
  box-shadow:
    inset 0 -1px 0 var(--line-soft),
    0 6px 20px -12px rgba(12, 14, 30, 0.16);
}

.header-in {
  block-size: var(--header-h);
  max-inline-size: var(--main-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--g);
}

.brand {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  border-radius: 6px;
  flex: none;
}

.brand img {
  inline-size: 124px;
  block-size: auto;
}

.login-btn {
  flex: none;
  min-block-size: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.login-btn:hover {
  background: var(--ink);
  color: #fff;
}

/* ───────── Footer (the homepage's: navy) ───────── */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  padding: 30px var(--g) calc(22px + env(safe-area-inset-bottom));
}

.site-footer > div {
  max-inline-size: calc(var(--main-w) - 2 * var(--g));
  margin: 0 auto;
}

.site-footer .wm {
  inline-size: 132px;
  block-size: auto;
}

.site-footer .tag {
  margin: 10px 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.foot-links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.foot-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.foot-links a[aria-current='page'] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer small {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 18px;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

/* ───────── Layout primitives ───────── */
.band {
  padding-block: 48px;
}

.band-white {
  background: var(--surface);
}

.band-tint {
  background: var(--tint);
}

.wrap {
  max-inline-size: var(--main-w);
  margin: 0 auto;
  padding-inline: var(--g);
}

.eyebrow {
  font: 600 13px/16px var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-title {
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.section-title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lede {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ───────── Actions (the homepage's blue CTA, ink secondary) ───────── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 113, 189, 0.9);
  transition:
    background-color 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.cta:hover {
  background: var(--blue-press);
}

.cta:active {
  transform: scale(0.985);
}

.cta:focus-visible {
  border-radius: 999px;
}

.cta[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.cta .arrow {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  transition: transform 0.25s var(--ease);
}

.cta:hover .arrow {
  transform: translateX(3px);
}

/* ═════════ About ═════════ */
.about-hero {
  padding-block: 40px 0;
  overflow: hidden;
}

.about-hero h1 {
  max-inline-size: var(--main-w);
  margin: 0 auto;
  padding-inline: var(--g);
  text-align: center;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.about-hero h1 > span {
  display: block;
}

.about-hero .hl {
  color: var(--blue);
}

.about-hero h1 > .only-wide {
  display: none;
}

/* the map: the dotted US drawn in navy through its own dots (a mask), with a
 * pulsing dot per review; the review cards sit above their dots from 1024 */
.map {
  position: relative;
  inline-size: min(100%, 1040px);
  margin: 8px auto 0;
  aspect-ratio: 1038 / 704;
}

.map-dots {
  position: absolute;
  inset: 0;
  background: var(--navy);
  -webkit-mask: var(--map) center / contain no-repeat;
  mask: var(--map) center / contain no-repeat;
}

.pin {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}

.pin-dot {
  position: absolute;
  inset-inline-start: -6px;
  inset-block-start: -6px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 189, 0.18);
}

.pin .pin-card {
  display: none;
}

.review {
  inline-size: 184px;
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 4px 10px;
  align-items: center;
  text-align: start;
}

.review img {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  object-fit: cover;
  grid-row: span 1;
}

.review figcaption {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}

.review blockquote {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 19px;
  color: var(--ink);
}

/* phones and tablets: the reviews as a row you can swipe, under the map */
.review-row {
  list-style: none;
  margin: 0;
  padding: 16px var(--g) 40px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--g);
  scrollbar-width: none;
}

.review-row::-webkit-scrollbar {
  display: none;
}

.review-row li {
  flex: none;
  scroll-snap-align: start;
  display: flex;
}

.review-row .review {
  inline-size: 220px;
}

/* stats */
.stats {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--g);
  max-inline-size: var(--main-w);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
}

.stats li {
  display: grid;
  gap: 6px;
  align-content: start;
}

.stat-ic {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-block-end: 6px;
}

.stat-ic svg {
  inline-size: 22px;
  block-size: 22px;
  fill: currentColor;
}

.stat-num {
  font-size: 30px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 15px;
  line-height: 21px;
  color: var(--muted);
}

/* story */
.story {
  display: grid;
  gap: 24px;
}

.story-photo {
  border-radius: var(--r-card);
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 700 / 467;
  object-fit: cover;
}

.story-text {
  display: grid;
  gap: 18px;
  font-size: 17px;
  line-height: 28px;
}

/* values */
.values {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.value {
  padding: 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.value-ic {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-block-end: 6px;
}

.value-ic svg,
.value-ic img {
  inline-size: 28px;
  block-size: 28px;
  fill: currentColor;
}

.value h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.value p {
  font-size: 16px;
  line-height: 25px;
  color: var(--muted);
}

/* closing line */
.closing {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 24px;
}

.closing h2 {
  font-size: 34px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* ═════════ Legal (privacy, terms): long-form ═════════ */
.legal-head {
  display: grid;
  gap: 14px;
}

.legal-meta {
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

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

.band.legal-text {
  padding-block-start: 40px;
}

.legal-body {
  max-inline-size: calc(var(--read-w) + 2 * var(--g));
  margin: 0 auto;
  padding-inline: var(--g);
}

.prose {
  font-size: 17px;
  line-height: 28px;
  overflow-wrap: break-word;
}

.prose > * + * {
  margin-block-start: 16px;
}

.prose :where(p, ul, ol, table) {
  margin-block: 0;
}

.prose h2 {
  margin-block-start: 48px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--line-soft);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.prose h3 {
  margin-block-start: 32px;
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.prose h4 {
  margin-block-start: 24px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-block-start: 12px;
}

.prose ul,
.prose ol {
  padding-inline-start: 24px;
}

.prose li + li {
  margin-block-start: 8px;
}

.prose li > ul,
.prose li > ol {
  margin-block-start: 8px;
}

.prose li::marker {
  color: var(--muted);
}

.prose strong {
  font-weight: 650;
}

.prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose hr {
  border: 0;
  border-block-start: 1px solid var(--line-soft);
  margin-block: 32px;
}

/* the one table (privacy: data per app) scrolls inside its own box */
.prose table {
  display: block;
  overflow-x: auto;
  background: var(--surface);
  border-collapse: collapse;
  font-size: 15px;
  line-height: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

.prose th,
.prose td {
  text-align: start;
  vertical-align: top;
  padding: 12px 14px;
  border-block-end: 1px solid var(--line-soft);
  min-inline-size: 150px;
}

.prose th {
  background: var(--tint);
  font-weight: 600;
}

.prose tr:last-child td {
  border-block-end: 0;
}

.prose td ul {
  margin: 0;
  padding-inline-start: 18px;
}

.prose td li + li {
  margin-block-start: 4px;
}

/* ═════════ Motion ═════════ */
@media (prefers-reduced-motion: no-preference) {
  .pin-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--blue);
    animation: pin-pulse 2.4s var(--ease-out) var(--d, 0s) infinite;
  }

  .rise {
    animation: rise 0.6s var(--ease-out) var(--d, 0s) both;
  }
}

@keyframes pin-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ═════════ Narrow phones ═════════ */
@media (max-width: 359px) {
  :root {
    --g: 16px;
  }

  .foot-links {
    gap: 0 14px;
  }

  .page-title,
  .about-hero h1 {
    font-size: 34px;
    line-height: 38px;
  }
}

/* ═════════ Tablet (≥ 768) ═════════ */
@media (min-width: 768px) {
  :root {
    --g: 32px;
    --main-w: 720px;
    --header-h: 64px;
  }

  .brand img {
    inline-size: 136px;
  }

  .band {
    padding-block: 72px;
  }

  .page-title,
  .about-hero h1 {
    font-size: 56px;
    line-height: 58px;
  }

  .section-title {
    font-size: 38px;
    line-height: 42px;
  }

  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-num {
    font-size: 36px;
    line-height: 40px;
  }

  .closing h2 {
    font-size: 44px;
    line-height: 48px;
  }

  .site-footer > div {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'wm links' 'tag links' 'copy copy';
    column-gap: 32px;
    align-items: center;
  }

  .site-footer .wm {
    grid-area: wm;
  }

  .site-footer .tag {
    grid-area: tag;
    margin: 8px 0 0;
  }

  .foot-links {
    grid-area: links;
    margin: 0;
    justify-content: flex-end;
  }

  .site-footer small {
    grid-area: copy;
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* ═════════ Desktop (≥ 1024) ═════════ */
@media (min-width: 1024px) {
  :root {
    --g: 48px;
    --main-w: 1200px;
    --header-h: 72px;
  }

  .brand img {
    inline-size: 142px;
  }

  .band {
    padding-block: 96px;
  }

  .page-title,
  .about-hero h1 {
    font-size: 64px;
    line-height: 66px;
  }

  .about-hero {
    padding-block: 64px 48px;
  }

  .about-hero h1 > .only-wide {
    display: block;
  }

  .about-hero h1 > .only-narrow {
    display: none;
  }

  /* review cards over their dots; the swipe row goes away */
  .pin .pin-card {
    display: grid;
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 18px;
    transform: translateX(-50%);
  }

  .pin-card::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: -8px;
    inline-size: 16px;
    block-size: 16px;
    margin-inline-start: -8px;
    background: var(--surface);
    border-inline-end: 1px solid var(--line-soft);
    border-block-end: 1px solid var(--line-soft);
    transform: rotate(45deg);
  }

  .review-row {
    display: none;
  }

  .story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }

  .story .section-title {
    grid-column: 1 / -1;
  }

  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 36px;
  }

  .value {
    padding: 32px;
  }

  .closing h2 {
    font-size: 56px;
    line-height: 58px;
  }

  .prose h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .site-footer {
    padding: 36px var(--g) 28px;
  }

  .site-footer > div {
    max-inline-size: calc(var(--main-w) - 2 * var(--g));
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'wm tag links' 'copy copy copy';
    column-gap: 28px;
  }

  .site-footer .tag {
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0ms !important;
  }
}