/* The legal documents (/privacy-policy, /terms-of-service, /cookie-policy, EN and ES) are rendered
   at build time from the app's markdown, in the front door's chrome (styles.css) plus these rules
   (ISSUE-MARKETING-DYNAMIC-SHELL-PERF). The family is served from this origin: the front door's
   Google Fonts stylesheet is render-blocking from two third-party origins, and Lighthouse's
   simulated mobile LCP charged those connections ~1 s on about half the runs. Same WOFF2 faces
   as the app (apps/web/lib/fonts, OFL: ../fonts/OFL.txt); 800/900 render as 700. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-700.woff2') format('woff2');
}
/* Arial (or a metric twin: Liberation Sans, Arimo) scaled to Plus Jakarta Sans' metrics (the values next/font computes for the app's copy of
   these faces), so the text does not re-wrap when the web font swaps in (CLS). */
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src:
    local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  ascent-override: 98.16%;
  descent-override: 20.99%;
  line-gap-override: 0%;
  size-adjust: 105.75%;
}
body {
  font-family:
    'Plus Jakarta Sans',
    'Plus Jakarta Sans Fallback',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
/* The header's Spanish labels and the signed-in "Open Green Vision" are longer than the front
   door's, so the legal pages carry no "Request access" button (Contact is in the nav), the brand
   stays on one line, and the nav type is a step smaller where it would otherwise touch the brand
   (product review MO-1). */
.site-header .brand span {
  white-space: nowrap;
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .site-header .nav-link {
    padding: 0 8px;
    font-size: 0.8rem;
  }
}
.legal-hero {
  padding: 72px 0 48px;
}
.legal-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
}
.legal-hero .hero-actions {
  margin: 0 0 24px;
}
.section.legal-section {
  padding: 48px 0 96px;
}
.legal-doc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.legal-contents {
  position: sticky;
  top: 96px;
  min-width: 0;
}
.legal-contents-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-600);
  margin-bottom: 12px;
}
.legal-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
}
.legal-contents a {
  color: var(--stone-700);
}
.legal-contents a:hover {
  color: var(--forest-700);
  text-decoration: underline;
}
.legal-article {
  min-width: 0;
  overflow-wrap: break-word;
}
.legal-updated {
  font-size: 0.92rem;
  color: var(--stone-600);
  margin-bottom: 24px;
}
.legal-article h2,
.legal-article h3 {
  scroll-margin-top: 110px;
}
.legal-article h2:first-of-type {
  margin-top: 0;
}
.legal-article h3 {
  margin: 22px 0 8px;
}
.legal-article p,
.legal-article li,
.legal-article td,
.legal-article th {
  color: var(--stone-700);
}
.legal-article ul,
.legal-article ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
  display: grid;
  gap: 6px;
}
.legal-article a {
  color: var(--forest-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Spanish: the courtesy-translation notice (product review MO-2) */
.legal-article blockquote {
  margin: 0 0 1.25rem;
  padding: 12px 16px;
  border-left: 4px solid var(--forest-700);
  background: var(--stone-100);
  border-radius: 8px;
}
.legal-article blockquote p {
  margin: 0;
  color: var(--stone-800);
}
.legal-article strong {
  color: var(--stone-950);
}
.legal-article div:has(> table) {
  /* the cells wrap instead: a scrolling region would need keyboard access (axe
     scrollable-region-focusable) */
  margin: 0 0 1.25rem;
}
.legal-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal-article th,
.legal-article td {
  border-bottom: 1px solid var(--stone-200);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
/* the first column holds names with no break points (cookie and storage keys) */
.legal-article td:first-child {
  overflow-wrap: anywhere;
}
.legal-article th {
  color: var(--stone-950);
}
.legal-article code {
  background: var(--stone-100);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.88em;
}
@media (max-width: 1080px) {
  .legal-doc {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .legal-contents {
    position: static;
  }
}
@media (max-width: 760px) {
  .legal-hero {
    padding: 44px 0 32px;
  }
  .section.legal-section {
    padding: 28px 0 64px;
  }
  .legal-wrap.legal-article {
    padding: 22px 16px;
    border-radius: 20px;
  }
  .legal-article table {
    font-size: 0.84rem;
  }
  .legal-article th,
  .legal-article td {
    padding: 6px 6px;
  }
}