/*
  Shared styling for the marketing and legal pages.

  Deliberately NOT used by join.html or get.html. Those two are the pages an
  invite lands on and the one a store QR points at — both have exactly one job,
  both must work on a bad connection, and neither should be able to fail because
  a second request did. They keep their own inlined styles. Everything here is
  for pages a reader chose to browse to.

  Colours are src/theme.ts, so the site and the app agree on what Splitr looks
  like.
*/
:root {
  --brand: #2f62e0;
  --brand-deep: #1e4bb8;
  --teal: #0c8665;
  --bg: #f3f5fa;
  --surface: #ffffff;
  --raised: #eef1f8;
  --text: #12131a;
  --dim: #585b66;
  --faint: #8a8d99;
  --line: rgba(18, 19, 26, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1017;
    --surface: #161b26;
    --raised: #1d2331;
    --text: #f2f4f8;
    --dim: #a4adc0;
    --faint: #767f92;
    --line: rgba(255, 255, 255, 0.12);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------- header */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 66px;
}
header.site img { width: 34px; height: 34px; border-radius: 9px; display: block; }
header.site .name { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
header.site nav { margin-left: auto; display: flex; gap: 20px; }
header.site nav a { color: var(--dim); text-decoration: none; font-size: 15px; font-weight: 600; }
header.site nav a:hover { color: var(--brand); }

/*
  320px — iPhone SE (1st gen) and the small end of Android — is where the header
  stops fitting: logo, wordmark and three nav links on one non-wrapping row
  overflowed the viewport by 5px, which scrolls the whole page sideways rather
  than just the header. Tightening the row is enough; dropping a link would cost
  a store-required destination.
*/
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  header.site .wrap { gap: 9px; }
  header.site .name { font-size: 17px; }
  header.site nav { gap: 14px; }
  header.site nav a { font-size: 14px; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  background: linear-gradient(160deg, #2f62e0 0%, #1e4bb8 55%, #0c8665 100%);
  color: #fff;
  text-align: center;
  padding: 72px 0 78px;
}
.hero img.mark {
  width: 96px; height: 96px; border-radius: 24px; display: block; margin: 0 auto 26px;
  box-shadow: 0 18px 40px rgba(6, 10, 24, 0.34);
}
.hero h1 {
  font-size: clamp(34px, 7vw, 50px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.hero p { font-size: clamp(17px, 3.4vw, 21px); color: rgba(255, 255, 255, 0.88); margin: 0 auto; max-width: 30ch; }
.hero .btn { margin-top: 32px; background: #fff; color: var(--brand); }

/* --------------------------------------------------------------- content */
/*
  `main.wrap`, not `main` — every content page is <main class="wrap">, and a bare
  `main` selector loses to `.wrap { padding: 0 22px }` on specificity. Written
  that way it silently dropped the vertical padding, and the first heading on the
  legal pages collided with the sticky header.
*/
main.wrap { padding-top: 56px; padding-bottom: 24px; }
h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 48px 0 14px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 19px; font-weight: 700; margin: 30px 0 8px; }
p, li { color: var(--dim); }
main p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }
a { color: var(--brand); }
strong { color: var(--text); font-weight: 700; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--raised);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text);
}

.lede { font-size: 19px; }
.updated { color: var(--faint); font-size: 15px; margin: 0 0 8px; }

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 14px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

a.card { display: block; text-decoration: none; }
a.card h3 { color: var(--text); }
a.card:hover { border-color: var(--brand); }

.features { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }
.features .card { margin-bottom: 0; }
.features .emoji { font-size: 26px; line-height: 1; display: block; margin-bottom: 10px; }

/*
  Data tables in the privacy policy. They scroll inside their own box rather
  than widening the page — a policy that scrolls sideways on a phone is a policy
  nobody reads, and this one is going in front of two app review teams.
*/
.tablewrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--raised); color: var(--text); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td { color: var(--dim); }

/*
  On a phone the three-column tables become stacked blocks with the column name
  above each cell.

  Left as a scrolling table they technically fit — .tablewrap contains the
  overflow so the page itself never moves sideways — but the third column sits
  off the edge, and the third column is "why we collect it". A privacy policy
  where the justification is the part you have to discover a sideways swipe to
  read is a privacy policy that gets skimmed. `data-label` on every <td> in
  privacy.html carries the header text down here.
*/
@media (max-width: 620px) {
  .tablewrap { overflow-x: visible; border: 0; border-radius: 0; }
  table { display: block; min-width: 0; font-size: 16px; }
  thead { display: none; }
  tbody { display: block; }
  tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 6px 2px;
    margin-bottom: 12px;
  }
  td { display: block; border: 0; padding: 8px 16px; }
  tr:last-child { margin-bottom: 0; }
  td::before {
    content: attr(data-label);
    display: block;
    color: var(--faint);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
  }
}

/* ---------------------------------------------------------------- footer */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 32px 0 44px;
  color: var(--faint);
  font-size: 15px;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
footer.site nav a { color: var(--dim); text-decoration: none; font-weight: 600; }
footer.site nav a:hover { color: var(--brand); }
footer.site p { margin: 0; color: var(--faint); }