/* ============================================================
   TryEmma — shared styles for the legal pages (privacy, terms).
   Same token block and type scale as the funnel page so these
   don't look like they came from somewhere else. Deliberately
   plain: legal pages are read, not sold from.
   ============================================================ */

:root{
  --surface:        #ffffff;
  --surface-warm:   #f7f6f5;
  --surface-dark:   #0a0a0c;
  --accent:         #fb923c;
  --accent-text:    #0a0a0c;
  --brand:          #0ea5e9;
  --text:           #0a0a0c;
  --text-muted:     rgba(10,10,12,.70);
  --text-faint:     rgba(10,10,12,.50);
  --border:         rgba(10,10,12,.10);
  --r-control: 6px;
  --r-tile:   12px;
  --r-pill:   999rem;
  --pad-page:  5vw;
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--surface); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.pad-global{ padding-left:var(--pad-page); padding-right:var(--pad-page); }
@media (min-width:1440px){ .pad-global{ padding-left:72px; padding-right:72px; } }
.container{ max-width:75rem; margin:0 auto; width:100%; }
.doc{ max-width:44rem; margin:0 auto; width:100%; }

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--border);
  padding-top:20px; padding-bottom:20px; background:var(--surface);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem;
  letter-spacing:-.02em; color:var(--text); text-decoration:none;
}
.logo-tile{
  width:40px; height:40px; flex:none;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.logo-tile svg{ width:26px; height:26px; display:block; overflow:visible; }
.back-link{
  font-size:.875rem; color:var(--text-muted); text-decoration:none;
  border-bottom:1px solid var(--border);
}
.back-link:hover{ color:var(--text); border-bottom-color:var(--text); }

/* ---------- Document ---------- */
.doc-head{ padding-top:4rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
h1{
  font-family:var(--font-display); font-weight:600; font-size:2.5rem;
  letter-spacing:-.02em; line-height:1.1; margin:0;
}
.updated{ margin-top:14px; font-size:.875rem; color:var(--text-faint); }
.doc-body{ padding-top:2.5rem; padding-bottom:5rem; }
h2{
  font-family:var(--font-display); font-weight:600; font-size:1.375rem;
  letter-spacing:-.015em; line-height:1.25; margin:2.75rem 0 .85rem;
}
h2:first-child{ margin-top:0; }
h3{
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  letter-spacing:-.01em; margin:1.75rem 0 .5rem;
}
p{ margin:0 0 1rem; color:var(--text-muted); }
ul{ margin:0 0 1rem; padding-left:1.25rem; color:var(--text-muted); }
li{ margin-bottom:.5rem; }
strong{ color:var(--text); font-weight:600; }
a{ color:var(--text); }
.lede{ font-size:1.0625rem; }

/* Callout for the things people actually need to find fast —
   opt-out instructions, cancellation, the guarantee terms. */
.callout{
  margin:1.5rem 0; padding:20px 22px;
  background:var(--surface-warm); border:1px solid var(--border);
  border-radius:var(--r-tile);
}
.callout p:last-child{ margin-bottom:0; }
.callout strong{ display:block; margin-bottom:6px; font-family:var(--font-display); }

/* ---------- Tables ----------
   The CCPA disclosure table is the one place in these documents where the
   meaning lives in the grid — a category is worthless without its Collected /
   Disclosed / Sold answer beside it. Flattened to paragraphs it reads as
   nonsense, so it gets real table markup.

   It is wider than the 44rem prose column on purpose: it breaks out to the full
   container on desktop, and scrolls inside its own wrapper on narrow screens so
   the page body never scrolls sideways. */
.table-wrap{
  margin:1.75rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:var(--r-tile);
}
@media (min-width:1100px){
  .table-wrap{ width:min(64rem, calc(100vw - 2 * var(--pad-page))); margin-left:calc((44rem - min(64rem, calc(100vw - 2 * var(--pad-page)))) / 2); }
}
.legal-table{
  width:100%; border-collapse:collapse; font-size:.8125rem; line-height:1.45;
  min-width:46rem;
}
.legal-table th,
.legal-table td{
  padding:12px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
.legal-table th:last-child,
.legal-table td:last-child{ border-right:0; }
.legal-table tbody tr:last-child td{ border-bottom:0; }
.legal-table thead th{
  background:var(--surface-warm); color:var(--text);
  font-family:var(--font-display); font-weight:600; font-size:.75rem;
  letter-spacing:.02em; white-space:nowrap; position:sticky; top:0;
}
.legal-table td{ color:var(--text-muted); }
/* Yes/No columns: centred and narrow so the answer is scannable down the column. */
.legal-table td.yn{
  text-align:center; white-space:nowrap; width:1%;
  font-weight:600; color:var(--text);
}

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding-top:32px; padding-bottom:40px; }
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-footer .links{ display:flex; gap:24px; flex-wrap:wrap; font-size:.875rem; }
.site-footer a{ color:var(--text-muted); text-decoration:none; }
.site-footer a:hover{ color:var(--text); }
.foot-legal{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap;
  font-size:.75rem; color:var(--text-faint);
}

@media (max-width:767px){
  h1{ font-size:1.875rem; }
  h2{ font-size:1.1875rem; }
  .doc-head{ padding-top:2.5rem; }
  .foot-legal{ flex-direction:column; gap:8px; }
}