/* Shared styling for Sumzy's static content pages (privacy, support,
   delete-account). Reuses the design tokens (colors, type, spacing) so these
   pages read as native to the marketing site. Dark is the default theme —
   matching the deployed landing page, which is always dark. */

html, body { margin: 0; }
body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
a { color: var(--text-1); text-decoration-color: var(--text-3); }
a:hover { color: var(--text-2); }

/* ---- language ----
   English prose is inline in each page; the other seven locales are fetched as
   fragments by i18n.js. Hide the prose only while a fragment is in flight, so a
   reader never sees English flash into their own language. i18n.js clears the
   attribute on success, on failure, and on a timeout — the page can never stay
   blank. With JS off the attribute is never set and English renders. */
html[data-i18n-loading] [data-i18n-doc] { visibility: hidden; }

/* mark: white glyph on dark, black on light — mirrors index.html */
.mark-light { display: none; }
[data-theme="light"] .mark-light { display: block; }
[data-theme="light"] .mark-dark { display: none; }

/* ---- header ---- */
.site-header {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-1);
  text-decoration: none;
}
.brand:hover { color: var(--text-1); }
.brand .mark {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
}
.brand .mark img { width: 28px; height: 28px; }
.brand .mark .mark-light { position: absolute; left: 0; top: 0; }
.brand .wordmark {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Eight languages do not fit as a row of pills, so the switcher is a native
   <select> in a pill — one tap on mobile, keyboard- and screen-reader-native,
   and it scales to a ninth language without a redesign. i18n.js injects the
   <option>s, so the language list has exactly one definition. */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  min-height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--text-2);
}
.lang-switch:hover { color: var(--text-1); border-color: rgba(255, 255, 255, 0.2); }
[data-theme="light"] .lang-switch:hover { border-color: rgba(0, 0, 0, 0.2); }
.lang-switch svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }
.lang-switch select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  /* room for the chevron drawn by the ::after below */
  padding: 0 16px 0 0;
  cursor: pointer;
}
.lang-switch select:focus-visible { outline: 2px solid var(--text-2); outline-offset: 3px; }
/* Native option lists are OS-drawn and ignore our tokens; force readable
   contrast on the platforms that do honour these (Windows/Linux Chrome). */
.lang-switch option { background: var(--surface-1); color: var(--text-1); }
.lang-switch::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
  opacity: 0.7;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 20px;
  /* Translated CTAs are longer than "Get the app" — never break mid-phrase. */
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}
.header-cta:hover { color: var(--text-1); border-color: rgba(255,255,255,0.2); }
[data-theme="light"] .header-cta:hover { border-color: rgba(0,0,0,0.2); }

/* ---- prose column ---- */
main.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 96px;
}
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
main.legal h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.updated {
  margin: 0 0 40px;
  font-size: 14px;
  color: var(--text-3);
}
main.legal h2 {
  margin: 44px 0 14px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
main.legal h3 {
  margin: 30px 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
main.legal p,
main.legal li {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-2);
}
main.legal p { margin: 0 0 16px; }
main.legal ul { margin: 0 0 16px; padding-left: 22px; }
main.legal li { margin: 0 0 9px; }
main.legal strong { color: var(--text-1); font-weight: 600; }
main.legal a { text-decoration: underline; text-decoration-color: var(--text-3); }
main.legal .lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-1);
  margin-bottom: 28px;
}

/* callout card — for the important boxes (irreversible, steps, contact) */
.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin: 0 0 24px;
  box-shadow: var(--shadow-card);
}
.card h3:first-child { margin-top: 0; }
.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }
.card.warn { border-color: var(--you-owe-tint); background: var(--you-owe-tint); }

/* numbered step list */
ol.steps {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}
ol.steps li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-2);
}
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* contact email pill */
.email-link {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--hairline);
}
.site-footer .inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}
.site-footer nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.site-footer nav a { color: var(--text-3); }
.site-footer nav a:hover { color: var(--text-1); }
.site-footer .current { color: var(--text-2); }

@media (max-width: 640px) {
  /* Brand + a language name like "Português" + a translated CTA do not fit on
     one 375px row. Let the header wrap to two rows rather than squeezing or
     hyphenating either control. */
  .site-header { padding: 18px 20px; gap: 12px; flex-wrap: wrap; row-gap: 12px; }
  .header-right { gap: 8px; margin-left: auto; }
  .lang-switch { padding: 0 8px 0 10px; }
  .lang-switch::after { right: 9px; }
  .lang-switch svg { display: none; }
  .lang-switch select { font-size: 12px; }
  .header-cta { padding: 0 14px; font-size: 13px; }
  main.legal { padding: 28px 20px 72px; }
  .site-footer .inner { padding: 22px 20px; flex-direction: column; align-items: flex-start; }
}