/* Light marketing / legal layout (D15) — share accents, not app dark chrome */
:root {
  --mkt-bg: #F5F7FA;
  --mkt-surface: #FFFFFF;
  --mkt-text: #0B0F14;
  --mkt-muted: #5A6A7E;
  --mkt-accent: #3ECF8E;
  --mkt-community: #FF8A3D;
  --mkt-radius: 12px;
  --mkt-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body.mkt {
  margin: 0; min-height: 100%;
  background: var(--mkt-bg); color: var(--mkt-text); font-family: var(--mkt-font);
}
.mkt-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 24px; background: var(--mkt-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--mkt-muted) 20%, transparent);
}
.mkt-logo {
  font-weight: 700; font-size: 1.15rem; color: var(--mkt-text); text-decoration: none;
}
.mkt-logo::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px;
  border-radius: 999px; background: var(--mkt-accent); vertical-align: middle;
}
.mkt-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
/* 44px tap targets (phone first) */
.mkt-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--mkt-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.mkt-nav a[aria-current="page"], .mkt-nav a:hover { color: var(--mkt-text); }
.mkt-nav .mkt-app {
  background: var(--mkt-accent); color: #04110a; padding: 0 16px;
  border-radius: 999px; font-weight: 600;
}
.mkt-main { max-width: 720px; margin: 0 auto; padding: 32px 20px 48px; }
.mkt-card {
  background: var(--mkt-surface); border-radius: var(--mkt-radius);
  padding: 28px 28px 20px; box-shadow: 0 1px 3px rgba(11,15,20,0.06);
}
.mkt-card h1 { margin: 0 0 16px; font-size: 1.75rem; }
.mkt-body { line-height: 1.55; color: var(--mkt-text); }
/* Legal bodies are plain text from the translation store: keep their line breaks and paragraphs. */
.mkt-text { white-space: pre-line; }
/* Links inside legal bodies (URLs and email addresses, linked by the server). */
.mkt-text a { color: var(--mkt-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Imprint: the operator data from creabyte.com as label / value rows; stacked on narrow screens. */
.mkt-imprint {
  display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 10px 20px;
  margin: 8px 0 24px; line-height: 1.5;
}
.mkt-imprint dt { color: var(--mkt-muted); font-weight: 600; }
.mkt-imprint dd { margin: 0; overflow-wrap: anywhere; }
.mkt-imprint a { color: var(--mkt-text); text-underline-offset: 3px; }
@media (max-width: 520px) {
  .mkt-imprint { grid-template-columns: 1fr; gap: 2px; }
  .mkt-imprint dd { margin-bottom: 10px; }
}
/* License page: official traffic sources (0.3.4) */
.mkt-list { margin: 0 0 8px; padding-left: 1.2em; line-height: 1.55; overflow-wrap: anywhere; }
.mkt-list li + li { margin-top: 6px; }
.mkt-list a { color: var(--mkt-text); text-underline-offset: 3px; }
.mkt-note {
  margin-top: 24px; font-size: 0.8rem; color: var(--mkt-muted);
  border-top: 1px solid color-mix(in srgb, var(--mkt-muted) 18%, transparent); padding-top: 12px;
}
.mkt-note code { font-size: 0.85em; }
.mkt-footer {
  max-width: 720px; margin: 0 auto; padding: 0 20px 32px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--mkt-muted); font-size: 0.85rem;
}
.mkt-footer-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.mkt-footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--mkt-text); text-underline-offset: 3px;
}
.mkt-footer-nav a[aria-current="page"] { font-weight: 700; text-decoration: none; }
/* Text links on the light layout use the text colour (community orange is ~2.3:1 on #F5F7FA, below AA). */
.mkt-langs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  color: var(--mkt-text); text-underline-offset: 3px;
}
.mkt-langs a[aria-current="true"] { font-weight: 700; text-decoration: none; }
/* Version link (footer) → What's new */
.mkt-version {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--mkt-text); text-underline-offset: 3px; font-variant-numeric: tabular-nums;
}
.mkt-version[aria-current="page"] { font-weight: 700; text-decoration: none; }
/* What's new: one section per release, newest first */
.mkt-lead { margin: 0 0 8px; color: var(--mkt-muted); line-height: 1.5; }
.mkt-release { padding: 20px 0 4px; border-top: 1px solid color-mix(in srgb, var(--mkt-muted) 18%, transparent); }
.mkt-release:first-of-type { border-top: 0; }
.mkt-release h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mkt-release ul { margin: 0; padding-left: 1.2em; line-height: 1.55; }
.mkt-release li + li { margin-top: 6px; }
.mkt-badge {
  padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: color-mix(in srgb, var(--mkt-accent) 22%, transparent); color: #04110a;
}

/* Dark appearance (html[data-theme] from theme-boot.js). Light stays the rules above. */
html[data-ui="marketing"][data-theme="light"] { color-scheme: light; }
html[data-ui="marketing"][data-theme="dark"] {
  color-scheme: dark;
  --mkt-bg: #0B0F14;
  --mkt-surface: #151B24;
  --mkt-text: #E8EEF7;
  --mkt-muted: #9AA8BC;
}

.mkt-form { display: grid; gap: 12px; margin-top: 8px; }
.mkt-form label { display: grid; gap: 6px; font-weight: 600; }
.mkt-form input, .mkt-form textarea {
  font: inherit; font-weight: 400; font-size: 1rem;
  padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--mkt-muted) 35%, transparent);
  background: var(--mkt-bg); color: var(--mkt-text); width: 100%;
}
.mkt-form button {
  justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: #0B0F14; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
html[data-ui="marketing"][data-theme="dark"] .mkt-form button { background: var(--mkt-text); color: #0B0F14; }
.mkt-hp { position: absolute; left: -10000px; height: 0; overflow: hidden; }

.mkt-captcha { margin: var(--ks-space-3, 0.75rem) 0; min-height: 0; }
.mkt-captcha:empty { display: none; }