/* ============================================================
   MarketStarter — long-form / legal pages
   Loaded AFTER /styles.css + /services/service.css by:
     /privacy/ · /el/privacy/ · /thank-you/
   Root design system untouched.

   WHY THIS FILE EXISTS: styles.css resets `p, ul, ol { margin: 0 }`,
   `ul, ol { padding: 0; list-style: none }` and `a { color: inherit }`.
   That is right for the marketing pages and wrong for a document:
   without this file legal prose renders as an unspaced wall, lists
   lose their markers, and inline links become invisible (WCAG 1.4.1).

   ⚠️ NO data-fx / data-fx-group on anything in here. Those set
   autoAlpha:0 from JS and only reveal on ScrollTrigger — a deep link
   to /privacy/#cookies would land on a permanently invisible block.
   ============================================================ */

/* ---------- Greek documents: brand faces have no Greek glyphs ----------
   MOVED 2026-08-06 → styles.css. The Greek font-token override (Manrope +
   Noto Sans Mono, because Bricolage/Geist/Geist Mono ship no Greek glyphs)
   used to be duplicated here and in article.css. Neither file is loaded by
   the service pages, so the first Greek SERVICE page had nowhere to inherit
   it from. It now lives in styles.css, which every page loads. Do not copy
   it back here — two copies is exactly how they drifted apart. */

/* ---------- page shell ---------- */
.legal { background: var(--paper); padding-block: clamp(56px, 7vw, 92px); }

.legal-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), never a bare 1fr: a bare 1fr is minmax(auto, 1fr), so the
     track takes its automatic MINIMUM from the widest unbreakable descendant
     (the recipients table) and the column blows out to ~693px inside a 375px
     viewport, scrolling the whole page sideways. The desktop rule above
     already got this right; the mobile one did not. */
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* ---------- table of contents ---------- */
.legal-toc { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .legal-toc {
    position: static;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 18px 18px 20px;
  }
}
.legal-toc > .mono-label { color: var(--ink-muted); margin-bottom: 14px; }
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
  counter-reset: toc;
}
@media (max-width: 900px) {
  .legal-toc ol { grid-template-columns: 1fr 1fr; gap: 8px 18px; }
}
@media (max-width: 460px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-muted-strong);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  /* --ink-faint would be 2.56:1 here — fails AA badly at 10.5px */
  color: var(--ink-muted);
  padding-top: 2px;
}
.legal-toc a:hover { color: var(--green-text-light); }
.legal-toc a:hover::before { color: var(--green-text-light); }

/* ---------- prose ---------- */
.legal-body { max-width: 42em; }
.legal-body > section { padding-top: clamp(34px, 4vw, 52px); }
.legal-body > section:first-child { padding-top: 0; }

.legal-body h2 {
  font-family: var(--f-display);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
}
.legal-body h2 .h-n {
  display: block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-text-light);
  margin-bottom: 10px;
}
.legal-body h3 {
  font-family: var(--f-display);
  font-size: 18.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-top: 30px;
}
.legal-body h4 {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  margin-top: 24px;
}

.legal-body p,
.legal-body ul,
.legal-body ol,
.legal-body dl {
  color: var(--ink-muted-strong);
  font-size: 16px;
  line-height: 1.68;
}
.legal-body h2 + p { margin-top: 16px; }
.legal-body p + p,
.legal-body p + ul,
.legal-body p + ol,
.legal-body p + dl,
.legal-body ul + p,
.legal-body ol + p,
.legal-body dl + p,
.legal-body h3 + p,
.legal-body h4 + p,
.legal-body p + .table-wrap,
.legal-body .table-wrap + p { margin-top: 14px; }

/* lists — markers restored */
.legal-body ul,
.legal-body ol { padding-inline-start: 1.35em; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li + li { margin-top: 8px; }
.legal-body li::marker { color: var(--green-text-light); }
.legal-body li > ul,
.legal-body li > ol { margin-top: 8px; }
.legal-body li > ul { list-style: circle; }

/* inline links — must be distinguishable from body text */
/* --green-text-light is the design system's documented AA green for small text
   on light surfaces (#007944). --green-deep (#008A4E) is only 4.13:1 on paper
   and must not be used for body-size text. */
.legal-body a {
  color: var(--green-text-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.legal-body a:hover { color: var(--navy); text-decoration-color: var(--green); }

.legal-body strong, .legal-body b { color: var(--navy); font-weight: 600; }
.legal-body dl { display: grid; gap: 10px; }
.legal-body dt { font-weight: 600; color: var(--navy); }
.legal-body dd { margin: 2px 0 0; padding-inline-start: 1em; border-inline-start: 2px solid var(--border); }
.legal-body hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.legal-body address { font-style: normal; }
.legal-body small { font-size: 13.5px; color: var(--ink-muted); }
.legal-body abbr[title] { text-decoration: underline dotted; cursor: help; }
.legal-body blockquote {
  margin: 16px 0;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--green);
  color: var(--ink-strong);
}

/* deep-link target (CookieYes links straight to #cookies) */
.legal-body > section:target > h2 {
  position: relative;
}
.legal-body > section:target > h2::before {
  content: "";
  position: absolute;
  left: -18px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px;
  background: var(--green);
}
@media (max-width: 900px) {
  .legal-body > section:target > h2::before { left: -12px; }
}

/* ---------- tables ---------- */
.table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.legal-body table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.legal-body caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.legal-body th,
.legal-body td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.legal-body thead th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted-strong);
  background: var(--surface-subtle);
  white-space: nowrap;
}
.legal-body tbody th { font-weight: 600; color: var(--navy); }
.legal-body tbody tr:last-child th,
.legal-body tbody tr:last-child td { border-bottom: 0; }
.legal-body td code { font-size: 12.5px; }

/* status pills for the cookie table */
.status-active,
.status-pending {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-active { background: var(--mint-tint); color: var(--green-text-light); }
.status-pending { background: var(--surface-subtle); color: var(--ink-muted-strong); box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- callout (Art. 21 objection box, LIA note) ---------- */
.callout {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--mint-wash);
  border: 1px solid var(--mint-tint);
  border-inline-start: 3px solid var(--green);
  border-radius: var(--r-md);
}
.callout > .mono-label { color: var(--green-text-light); margin-bottom: 8px; }
.callout p { font-size: 15.5px; }
.callout p + p { margin-top: 10px; }

/* ---------- unfilled build placeholders — deliberately loud ---------- */
.placeholder {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #7A4A00;
  background: #FFE9B8;
  border: 1px dashed #B87A00;
  border-radius: 5px;
  padding: 0 6px;
}

/* ---------- language switch ---------- */
.lang-switch {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.lang-switch a {
  color: var(--on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.lang-switch a:hover { color: var(--green-bright); }
.lang-switch a[aria-current="page"] { color: var(--on-dark); text-decoration: none; }
.lang-switch a + a::before {
  content: "·";
  margin-inline-end: 10px;
  color: var(--on-dark-faint);
  text-decoration: none;
  display: inline-block;
}

/* the "last updated" stamp under the hero */
.legal-stamp { margin-top: 16px; color: var(--on-dark-faint); }

/* ---------- /thank-you/ ---------- */
/* .next-steps equivalent — re-declared here so /thank-you/ never has
   to load /contact/contact.css just for a three-row list. */
.tk-steps { margin-top: 34px; display: grid; gap: 12px; max-width: 32em; }
.tk-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; }
.tk-steps .step-n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--green-text-light); }
.tk-steps span { color: var(--ink-muted-strong); font-size: 15.5px; line-height: 1.6; }

/* the small print line that carries the Art. 14 "we may look you up" notice */
.tk-note {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 38em;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted-strong);
}
.tk-note a {
  color: var(--green-text-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tk-note a:hover { color: var(--navy); }

/* ---------- slim closing act (re-declared from contact.css) ---------- */
.close--slim { padding-top: clamp(80px, 10vw, 130px); }
.close--slim h2 { margin-top: 0; }

/* NOTE: the FOOTER "Cookie settings" button is styled in styles.css, because
   all 10 pages carry it and only 3 of them load this file. What follows is the
   INLINE variant used inside the cookie section of the policy prose. */
.legal-body .cky-banner-element {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: inherit;
  color: var(--green-text-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
.legal-body .cky-banner-element:hover { color: var(--navy); }

/* ---------- print: a legal document should print as one ---------- */
@media print {
  .legal-toc, .lang-switch, .close, .nav, .skip-link { display: none !important; }
  .legal { padding-block: 0; background: #fff; }
  .legal-grid { display: block; }
  .legal-body { max-width: none; }
  .legal-body > section { padding-top: 20px; break-inside: auto; }
  .legal-body h2, .legal-body h3 { break-after: avoid; }
  .table-wrap { overflow: visible; border-color: #999; }
  .legal-body table { min-width: 0; font-size: 10pt; }
  .legal-body a { color: #000; }
  .legal-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .callout { border: 1px solid #999; background: none; }
}