/*
  WB-6's shared stylesheet across every page of the marketing site.

  §6.8's carve-out: apps/site has no platform design system to follow, so
  §6.2's tokens apply as literal values here rather than as platform color
  roles — the same choice this directory's original holding page already
  made (see its own comment, kept below).

  System fonts, not Barlow. The holding page recorded that adopting the
  brand's display ramp here is a deliberate step this directory had not
  taken yet; this pass is the real marketing site, but still does not take
  it — vendoring and wiring @font-face for a whole site is its own decision,
  not a side effect of writing the copy. -apple-system/system-ui in the
  meantime, same as the holding page always used.
*/

:root {
  --brand: #ff2a43;
  --accent: #0060fc;
  --ink: #0d0f14;
  --ink-secondary: #777a88;
  --ink-tertiary: #9d9d9d;
  --surface: #ffffff;
  --surface-muted: #f3f3f4;
  --border: #cccccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #ff5c6b;
    --accent: #5b9bff;
    --ink: #f2f3f7;
    --ink-secondary: #a8abba;
    --ink-tertiary: #888b9e;
    --surface: #1a1d28;
    --surface-muted: #2c3040;
    --border: #3a3e4d;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ── top nav ─────────────────────────────────────────────────────────── */

.top {
  border-bottom: 1px solid var(--border);
}

.top__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.top__mark {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.0625rem;
}

.top__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.top__link {
  text-decoration: none;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.top__link[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}

/* ── layout helpers ──────────────────────────────────────────────────── */

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wrap--narrow {
  max-width: 40rem;
}

.section {
  padding: 4rem 0;
}

.section--tint {
  background: var(--surface-muted);
}

.centre {
  text-align: center;
}

/* ── masthead ────────────────────────────────────────────────────────── */

.mast {
  padding: 5rem 0 4rem;
  text-align: center;
}

.mast__tag {
  margin: 0;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mast__rule {
  width: 4rem;
  height: 4px;
  margin: 1.75rem auto;
  background: var(--brand);
  border-radius: 2px;
}

.mast__sub {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.125rem;
  color: var(--ink-secondary);
}

.mast__sub strong {
  color: var(--ink);
}

.mast__cta {
  margin-top: 2.25rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* A store badge with nowhere real to link yet (Q15/Q16 open — the app is
   not published) reads as inert text, not a disabled-looking button, so it
   does not promise a tap that goes nowhere. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

/* ── eyebrow / heading rhythm ────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.eyebrow--brand {
  color: var(--brand);
}

.coming {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
}

.title--page {
  font-size: 2rem;
  margin: 0.25rem 0 1.5rem;
}

.lede {
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--ink-secondary);
}

.lede--centre {
  margin: 0 auto;
}

.body {
  font-size: 1rem;
  color: var(--ink-secondary);
}

.body strong {
  color: var(--ink);
}

/* ── grids and tiles ─────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 42rem) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.grid--tiles {
  grid-template-columns: 1fr;
}

@media (min-width: 42rem) {
  .grid--tiles {
    grid-template-columns: 1fr 1fr;
  }
}

.tile {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.tile--lead {
  border-color: var(--brand);
}

.tile h2,
.tile h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}

.tile p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* ── figures ─────────────────────────────────────────────────────────── */

.figures {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 42rem) {
  .figures {
    grid-template-columns: repeat(3, 1fr);
  }
}

.figure__n {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.figure__l {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

.figure__src {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-tertiary);
}

/* ── mock panels (streaming / scoring) ──────────────────────────────── */

.mock {
  background: var(--ink);
  color: var(--surface);
  border-radius: 1rem;
  padding: 1.75rem;
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mock__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mock__score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.75rem;
  font-weight: 800;
}

.mock__score span:first-child {
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0.8;
}

/* ── payments square diagram ─────────────────────────────────────────── */

.square {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
}

.square--theirs {
  background: var(--surface-muted);
}

.square--ours {
  background: var(--surface-muted);
  outline: 1px solid var(--brand);
}

.square__q {
  padding: 1.25rem 0.5rem;
  text-align: center;
  border-radius: 0.5rem;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
}

.square__q--none {
  color: var(--ink-tertiary);
  text-decoration: line-through;
}

.square__cap {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-tertiary);
  text-align: center;
}

/* ── pricing tiles ───────────────────────────────────────────────────── */

.price {
  font-size: 2rem;
  font-weight: 800;
  margin: 0.4rem 0 0.1rem;
}

.price-meta {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--ink-tertiary);
}

.notice {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--surface-muted);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

.notice strong {
  color: var(--ink);
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--brand);
  color: #ffffff;
}

.btn--outlined {
  border-color: var(--border);
  color: var(--ink);
}

.ctarow {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* ── footer ──────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  font-size: 0.875rem;
  color: var(--ink-tertiary);
}

.foot__links {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.foot__links a {
  color: var(--ink-secondary);
  text-decoration: none;
}

/* ── support tiles ───────────────────────────────────────────────────── */

.support-lede {
  margin: 0 0 1.75rem;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

/* ── long-form legal prose (/privacy, /terms) ────────────────────────── */

/*
  These two pages are the only prose documents on the site, and they are read
  differently from the marketing pages: linearly, at length, often on a phone,
  and sometimes by a carrier or store reviewer looking for one specific
  sentence. So the measure is narrower than .wrap--narrow, the body copy is
  --ink rather than --ink-secondary (§18.2's rule is about contrast minimums,
  and dense legal text is the worst place to spend the margin), and headings
  carry scroll anchors so a clause can be linked to directly.
*/

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.legal__meta {
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

.legal__meta strong {
  color: var(--ink);
}

.legal h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.legal h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.legal p,
.legal li {
  font-size: 1rem;
  color: var(--ink);
}

.legal ul,
.legal ol {
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal a {
  color: var(--accent);
}

/* The plain-language box at the top of each document. Not a substitute for
   the text below it, and it says so. */
.legal__summary {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 0.5rem;
  background: var(--surface-muted);
}

.legal__summary h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.legal__summary p:last-child,
.legal__summary ul:last-child {
  margin-bottom: 0;
}

.legal__summary li {
  font-size: 0.9375rem;
}

/* Table of contents. Two columns where there is room, because these
   documents have enough sections that one column runs past the fold. */
.toc {
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  columns: 1;
}

@media (min-width: 42rem) {
  .toc {
    columns: 2;
    column-gap: 2rem;
  }
}

.toc li {
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
}

/* Tables carry the retention schedule and the processor list — the two places
   a reader is most likely to be looking something specific up. They scroll
   inside themselves rather than widening the page. */
.legal__table {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
}

.legal__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.legal__table th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.legal__table td {
  color: var(--ink);
}

/* "Not yet available" markers. These documents cover the whole product,
   including the parts that have not shipped; saying which is which is the
   difference between a policy that is complete and one that is inaccurate. */
.soon {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}