/* Shared shell for the legal + corporate pages.
   Same tokens as the marketing page (Georgia on paper, ink green) so a customer moving
   from the pitch to the contract stays in the same room — and so the contract does not
   look like it was pasted in from somewhere else. Deliberately plainer: these pages are
   read, not scanned, so the type is bigger, the measure is narrow, and nothing moves. */
:root {
  --ground: #ECEDE7;
  --panel: #F7F7F2;
  --text: #1B211C;
  --body: #3A3F39;
  --muted: #6E736B;
  --faint: #9BA097;
  --line: #D2D5CB;
  --line-ink: #B9BDB1;
  --vir: #0F5C46;
  --vir-soft: rgba(15, 92, 70, .07);
  --amb: #B45309;
  --amb-soft: rgba(180, 83, 9, .08);
  --serif: Georgia, "Times New Roman", ui-serif, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font: 400 17px/1.72 var(--serif);
  text-rendering: optimizeLegibility;
}

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--line-ink);
  background: var(--panel);
}

.masthead .in {
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.masthead a.home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font: 600 15px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.masthead img { width: 26px; height: 26px; display: block; }

.masthead .sp { flex: 1; }

.masthead nav {
  display: flex;
  gap: 18px;
  font: 400 13px/1 var(--sans);
}

.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--vir); text-decoration: underline; }

/* ── document ─────────────────────────────────────────────────────────── */
main.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

main.legal h1 {
  font: 400 clamp(30px, 5vw, 42px)/1.16 var(--serif);
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

main.legal .meta {
  font: 400 12px/1.6 var(--mono);
  color: var(--faint);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

main.legal .lead {
  font-size: 19px;
  color: var(--text);
  margin: 0 0 30px;
}

main.legal h2 {
  font: 600 20px/1.36 var(--serif);
  color: var(--text);
  margin: 42px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

main.legal h3 {
  font: 600 16px/1.4 var(--sans);
  color: var(--text);
  margin: 26px 0 8px;
}

main.legal p { margin: 0 0 14px; }

main.legal ol, main.legal ul { margin: 0 0 16px; padding-left: 26px; }
main.legal li { margin: 0 0 8px; }

main.legal a { color: var(--vir); text-decoration: underline; text-underline-offset: 2px; }

main.legal strong { color: var(--text); }

/* Tables carry the data-map / lawful-basis / subprocessor matrices. They must scroll
   inside their own box — the page body never scrolls sideways. */
main.legal .tw { overflow-x: auto; margin: 0 0 20px; }

main.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font: 400 14.5px/1.55 var(--sans);
}

main.legal th, main.legal td {
  border: 1px solid var(--line);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}

main.legal th {
  background: var(--vir-soft);
  color: var(--text);
  font-weight: 600;
}

/* ── the two callout kinds ────────────────────────────────────────────── */
/* .open = a decision the owner must make before go-live (amber: the same colour the
   marketing page reserves for "something leaves the machine" — it means ATTENTION). */
main.legal .open {
  background: var(--amb-soft);
  border-left: 3px solid var(--amb);
  padding: 16px 18px;
  margin: 24px 0;
  font-size: 16px;
}

main.legal .open > :first-child { margin-top: 0; }
main.legal .open > :last-child { margin-bottom: 0; }

main.legal .open h2, main.legal .open h3 {
  border: 0;
  padding-top: 0;
  margin-top: 0;
  color: var(--amb);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* .gap = a clause whose subject is not built yet. Inline, quiet, but unmissable. */
main.legal .gap {
  display: block;
  font: 400 13.5px/1.6 var(--mono);
  color: var(--amb);
  background: var(--amb-soft);
  border: 1px dashed var(--amb);
  padding: 8px 11px;
  margin: 10px 0;
}

/* A per-order contract field the checkout fills in — a form blank, not a defect. */
main.legal .blank {
  display: inline-block;
  min-width: 9em;
  border-bottom: 1px solid var(--line-ink);
}

/* ── footer ───────────────────────────────────────────────────────────── */
footer.legal-foot {
  border-top: 1px solid var(--line-ink);
  background: var(--panel);
  padding: 30px 24px 44px;
}

footer.legal-foot .in {
  max-width: 780px;
  margin: 0 auto;
  font: 400 13px/1.8 var(--sans);
  color: var(--muted);
}

footer.legal-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 16px;
}

footer.legal-foot a { color: var(--muted); text-decoration: none; }
footer.legal-foot a:hover { color: var(--vir); text-decoration: underline; }

footer.legal-foot .marks {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Height-locked, width-free: each mark keeps its own ratio. The white plate is what card
   schemes expect behind their marks (they are specified on light backgrounds), and it also
   keeps them legible when the page is in dark mode. */
footer.legal-foot .marks img {
  height: 22px;
  width: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 8px;
  box-sizing: content-box;
}

/* Fallback for a mark whose file is not present yet (iyzico's badge ships from their
   merchant panel). Typeset to sit at the same height as a real mark so the strip does not
   look broken while one file is missing. */
footer.legal-foot .marks .fallback {
  display: block;
  height: 22px;
  line-height: 22px;
  font: 600 12px/22px var(--sans);
  letter-spacing: .04em;
  color: #1B211C;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 9px;
}

footer.legal-foot .sig {
  font: 400 12px/1.6 var(--mono);
  color: var(--faint);
  letter-spacing: .05em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #14170f;
    --panel: #1A1E15;
    --text: #EDEFE6;
    --body: #C6CBBC;
    --muted: #8F958A;
    --faint: #6B7166;
    --line: #2C3126;
    --line-ink: #3A4033;
    --vir: #5FCFA8;
    --vir-soft: rgba(95, 207, 168, .09);
    --amb: #E0A45C;
    --amb-soft: rgba(224, 164, 92, .11);
  }
}