/* Evengo — public site.
 *
 * Deliberately hand-written CSS rather than the app's Tailwind build: this
 * stylesheet is served to someone who tapped an invitation on mobile data and
 * has never heard of Evengo. It has to paint before they lose interest, so it
 * carries no build step and no framework.
 *
 * The palette is copied from src/styles/theme.css. Light-only, like the app —
 * see the SystemBars note in capacitor.config.ts.
 */

:root {
  --background: #f2f2f7;
  --foreground: #1c1c1e;
  --card: #ffffff;
  --muted-foreground: #8e8e93;
  --accent: #5856d6;
  --accent-soft: #eeecfb;
  --accent-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.06);
  --radius: 0.875rem;
  --radius-lg: 1.5rem;
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

/* ─── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

/* Two rows on a phone, one on a desktop, driven by named areas rather than
   source order — so the markup can stay in the desktop reading order (brand,
   nav, language, action) and still stack sensibly when there is no room.
   The action button cannot share the first row: at 320px the brand and the
   language picker already take all of it. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'brand lang'
    'nav   cta';
  align-items: center;
  gap: 10px 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  grid-area: brand;
}

.site-nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-left: -12px; /* pulls the first label back in line with the brand */
}

.lang {
  grid-area: lang;
  justify-self: end;
}

.header-cta {
  grid-area: cta;
  justify-self: end;
}

/* 12px of vertical padding rather than 8: the label is 21px tall, which is a
   comfortable read and a 37px tap target. This brings it to 45. */
.nav-link {
  padding: 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.nav-link:hover {
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.035);
}

.nav-link.is-current {
  color: var(--accent);
  background: var(--accent-soft);
}

/* The second row holds the links and the action button side by side, and the
   labels differ by ~30px across the five languages. At the default spacing the
   French pair cleared a 375px screen by 2px — near enough to wrapping that a
   different font rendering would have broken it. Tightening here buys ~30px of
   margin instead.

   The button's own size lives with the .btn rules further down, not here: .btn
   is declared after this block, and at equal specificity it would win. */
@media (max-width: 819px) {
  /* Three entries now, not two. "Pro" costs about 50px and took the French
     margin from 61px down to 20 — enough to survive, not enough to trust. */
  .nav-link {
    padding: 12px 6px;
  }

  .site-nav {
    margin-left: -6px;
  }

  .header-inner {
    gap: 10px;
  }
}

@media (min-width: 820px) {
  .header-inner {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: 'brand nav lang cta';
    gap: 22px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* Only sticky where it is a single 64px row. On a phone it is two rows, and
     pinning that much chrome to the top of a 10 000px guide would cost more
     than it gives. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(242, 242, 247, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }

  /* So an in-page anchor such as #how does not land underneath the bar. */
  html {
    scroll-padding-top: 76px;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 18px;
  line-height: 1;
}

/* The language picker is a real <select>: it is one control, it is reachable
   by keyboard for free, and the phone renders it as a native wheel. */
.lang {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 30px 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238E8E93' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.lang:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

/* padding-block, never the `padding` shorthand: these sections also carry
   .wrap, and a shorthand would reset its 24px side padding to zero — which put
   the headline flush against the edge of the phone screen. */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
  padding-block: 40px 72px;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    padding-block: 64px 104px;
  }
}

.eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.lede {
  margin: 0 0 32px;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: #48484a;
  max-width: 34em;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-secondary {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

/* Must sit after .btn, not up in the header block where it is used: both are
   single-class selectors, so source order is the only tie-breaker. */
.btn-sm {
  padding: 9px 16px;
  font-size: 14.5px;
  border-radius: 11px;
}

@media (max-width: 819px) {
  .header-cta {
    padding: 9px 12px;
    font-size: 14px;
  }
}

/* Below this there is genuinely no room for four controls: the links wrap onto
   a second line and the bar eats a quarter of the screen. The links are the
   navigation and they stay; the app is one hero button away. */
@media (max-width: 339px) {
  .header-cta {
    display: none;
  }

  /* Hiding the button does not widen the links: the language picker shares its
     grid column, so the second row was still only 157px. Letting the nav span
     both columns is what actually hands it the full width. */
  .header-inner {
    grid-template-areas:
      'brand lang'
      'nav   nav';
  }
}

/* One step further down for the labels themselves. Three of them did not fit a
   320px screen at 15px — the bar went back to two rows and 177px tall, a
   quarter of the viewport. A point of type and two of padding buy it back. */
@media (max-width: 399px) {
  .nav-link {
    padding: 12px 4px;
    font-size: 14px;
  }

  .site-nav {
    margin-left: -4px;
  }
}

.cta-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* ─── Phone mock ──────────────────────────────────────────────────────────── */

.mock {
  justify-self: center;
  width: 100%;
  max-width: 300px;
  filter: drop-shadow(0 24px 48px rgba(28, 28, 30, 0.16));
}

.mock svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Sections ────────────────────────────────────────────────────────────── */

.section {
  padding-block: 8px 72px; /* see .hero */
}

.section-title {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}

.section-lede {
  margin: 0 0 36px;
  color: var(--muted-foreground);
  max-width: 40em;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px 28px;
}

.card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 16px;
}

.card-icon svg {
  width: 23px;
  height: 23px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.card p {
  margin: 0;
  font-size: 15.5px;
  color: #48484a;
}

/* ─── Panels (problem / audience) ─────────────────────────────────────────── */

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px 26px;
}

.panel h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.panel p:last-child {
  margin: 0;
  font-size: 15.5px;
  color: #48484a;
}

/* The two illustrations have to line up across the pair, so the frame owns the
   height rather than the drawing inside it. */
.panel-art {
  border-radius: var(--radius);
  background: #fafafd;
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 18px;
}

.panel-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.panel-before .panel-art {
  background: #ffffff;
}

.panel-tag {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.panel-tag-accent {
  color: var(--accent);
}

.compare,
.audience {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .compare,
  .audience {
    grid-template-columns: repeat(2, 1fr);
  }
}

.audience-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.audience-head .card-icon {
  margin-bottom: 0;
}

.audience-head h3 {
  margin: 0;
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

/* The tick is a background image rather than a marker so the second line of a
   wrapped item aligns with the first, not with the tick. */
.ticks li {
  padding-left: 32px;
  font-size: 15.5px;
  color: #48484a;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23EEECFB'/%3E%3Cpath fill='none' stroke='%235856D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 10.2l2.6 2.6L14 7.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 2px;
}

/* ─── How it works ────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 24px 26px;
}

.step-art {
  margin: 0 -8px 4px;
}

.step-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.step p:last-child {
  margin: 0;
  font-size: 15.5px;
  color: #48484a;
}

/* The button that closes a section and points at the guide. Deliberately not a
   .btn-primary: it sits on a page whose main call to action is "open the app",
   and two solid accent buttons competing would blunt both. */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.btn-guide {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  padding: 16px 22px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1.5px solid #ddd9f7;
  color: var(--foreground);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(88, 86, 214, 0.07);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.btn-guide:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(88, 86, 214, 0.16);
}

.btn-guide:active {
  transform: translateY(0);
}

.btn-guide-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-guide-icon svg {
  width: 23px;
  height: 23px;
}

.btn-guide-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* lets the hint wrap instead of stretching the button */
}

.btn-guide-title {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.btn-guide-hint {
  font-size: 13.5px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.btn-guide-arrow {
  margin-left: auto;
  flex: none;
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
}

/* On a 320px screen the arrow and the wide padding cost the hint about 50px,
   which was enough to wrap it onto five lines and stretch the button to 164px
   tall. The arrow is decoration — the whole row is already the link. */
@media (max-width: 479px) {
  .btn-guide {
    gap: 12px;
    padding: 14px 16px;
  }

  .btn-guide-arrow {
    display: none;
  }
}

/* ─── Guide page ──────────────────────────────────────────────────────────── */

.guide-hero {
  padding-block: 32px 40px; /* see .hero */
  max-width: 780px;
}

.guide-hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
}

.part-tag {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.guide-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One column until there is room for the drawing to sit beside the text. The
   art keeps a fixed share so the six steps line up as a column of equal cards
   rather than each one sizing itself to its own paragraph. */
.guide-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 24px 26px;
}

@media (min-width: 760px) {
  .guide-step {
    grid-template-columns: 300px 1fr;
    padding: 24px 28px;
  }
}

.guide-art {
  margin: 0 -10px;
}

.guide-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.guide-body h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.guide-body > p {
  margin: 0 0 14px;
  font-size: 15.5px;
  color: #48484a;
}

.guide-body .ticks {
  gap: 10px;
}

/* ─── Plan tables ─────────────────────────────────────────────────────────── */

/* The table is the one thing on the site that cannot reflow below a certain
   width, so it gets its own scroller rather than pushing the page sideways. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
}

.plan-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}

.plan-table th,
.plan-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td {
  border-bottom: 0;
}

.plan-table thead th {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.plan-table tbody th {
  font-weight: 500;
  color: #48484a;
}

.plan-table td {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The Pro column is tinted rather than bolder: the numbers in it are already
   the biggest on the row, and two emphases would fight. */
.plan-table .is-pro {
  background: var(--accent-soft);
  color: var(--accent);
}

.plan-table thead .is-pro {
  color: var(--accent);
}

.fineprint {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted-foreground);
  max-width: 46em;
}

/* ─── Callout ─────────────────────────────────────────────────────────────── */

.callout {
  background: var(--accent-soft);
  border: 1px solid #ddd9f7;
  border-radius: var(--radius-lg);
  padding: 22px 20px 26px;
}

@media (min-width: 640px) {
  .callout {
    padding: 28px 28px 32px;
  }
}

.callout h2 {
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: -0.025em;
  font-weight: 800;
}

.callout > p {
  margin: 0 0 20px;
  color: #48484a;
  max-width: 46em;
}

.callout-sub {
  margin: 28px 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* The tick's opposite, for the list of things the app turns down. Same
   background-image trick as .ticks — see the note there. */
.crosses {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.crosses li {
  padding-left: 32px;
  font-size: 15.5px;
  color: #48484a;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23FFE1E1'/%3E%3Cpath fill='none' stroke='%23E5484D' stroke-width='2' stroke-linecap='round' d='M7 7l6 6M13 7l-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 2px;
}

/* ─── Closing band ────────────────────────────────────────────────────────── */

.band {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 32px;
  text-align: center;
  margin-bottom: 72px;
}

.band .cta {
  justify-content: center;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
  font-size: 14.5px;
  color: var(--muted-foreground);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: space-between;
}

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

/* Padded rather than sized: the text is 18px tall, which is a fine reading size
   and a miserable tap target. The padding brings the touch area to 44px without
   changing how the row looks. */
.site-footer a {
  display: inline-block;
  padding: 13px 8px;
  text-decoration: none;
}

.footer-links li {
  display: flex;
}

.site-footer a:hover {
  color: var(--foreground);
}

/* ─── Legal pages ─────────────────────────────────────────────────────────── */

.legal {
  max-width: 720px;
  padding-bottom: 72px;
}

.legal h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 8px;
}

.legal h2 {
  margin: 36px 0 10px;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  color: #48484a;
  font-size: 16.5px;
}

.legal ul {
  color: #48484a;
  padding-left: 22px;
  margin: 10px 0;
}

.legal li {
  margin-bottom: 8px;
}

.legal-meta {
  color: var(--muted-foreground) !important;
  font-size: 14px !important;
  margin-top: 0;
}

/* Language switcher for the legal pages only. These are the one part of the
   site that does not go through i18n.js — a contract is too long to live in a
   key dictionary — so each language is its own file and they link to each
   other here. */
.legal-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 28px;
  font-size: 14px;
}

.legal-langs a,
.legal-langs span {
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

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

.legal-langs [aria-current='page'] {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
}

/* The prevailing-version clause. Small, last, and present on every language
   so that no translation can be read as the binding text. */
.legal-authority {
  margin-top: 40px !important;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground) !important;
  font-size: 14px !important;
}

/* The one-paragraph version, for the majority who will not read the rest.
   Tinted rather than boxed: a policy that opens with a warning panel reads as
   a disclaimer, and this is the opposite — it is the part we want read. */
.legal-summary {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0 8px;
}

.legal-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  line-height: 1.7;
}

/* Tables carry the two lists that are genuinely tabular — what we collect, and
   who receives it. They scroll inside their own container so a narrow phone
   never scrolls the whole page sideways. */
.legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  margin: 18px 0;
}

.legal-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 15px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: #48484a;
}

.legal-table th {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 600;
  white-space: nowrap;
}

.legal-table tr:last-child td {
  border-bottom: none;
}