/* SUCRE — sucreapp.com
 *
 * Colour tokens, spacing and radii are taken verbatim from the iOS app's design system
 * (SUCRE/DesignSystem/Theme.swift, the "Chantilly" palette) so the site and the app read as
 * one product.
 *
 * No @font-face and no font CDN: system faces only, which is both faster and one fewer third
 * party able to see a visitor loading the Privacy Policy. The serif carries SUCRE's cookbook
 * voice; the sans is the iOS system face on Apple devices.
 */

:root {
  /* Chantilly palette — Theme.swift */
  --bg: #FBF7F0;
  --surface: #FFFFFF;
  --surface-2: #F4EEE3;
  --text: #17140F;
  --text-secondary: #6B5F4E;
  --accent: #C2405B;
  --accent-pressed: #A5324A;
  --accent-soft: #FBEAEE;
  --gold: #C98A3C;
  --choc: #5A3A2E;
  --border: rgba(23, 20, 15, 0.10);
  --border-strong: rgba(23, 20, 15, 0.18);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  /* Spacing scale — Spacing.swift */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 56px;
  --sp-4xl: 88px;

  /* Radii — Radius.swift */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  --serif: ui-serif, "New York", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --wrap: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140F;
    --surface: #211C16;
    --surface-2: #1C1812;
    --text: #F7F2E9;
    --text-secondary: #C3B6A1;
    /* Berry is lightened on dark to keep text contrast above 4.5:1. */
    --accent: #E8899E;
    --accent-pressed: #F3A8B9;
    --accent-soft: rgba(232, 137, 158, 0.12);
    --gold: #D9AF63;
    --border: rgba(247, 242, 233, 0.14);
    --border-strong: rgba(247, 242, 233, 0.24);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  /* Fluid body type: 16.5px on a small iPhone up to 18px on desktop. */
  font-size: clamp(1.03rem, 0.98rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Same reason as the headings — long compounds and email addresses must never overflow. */
  overflow-wrap: break-word;
}

/* Hyphenation is worth it in running legal prose; the browser uses the document language. */
.legal-doc .doc-body p,
.legal-doc .doc-body li { hyphens: auto; }

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; }
a:hover { color: var(--accent-pressed); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 var(--sp-lg);
  /* German compounds ("Datenschutzerklärung", "Auftragsverarbeitungsvertrag") are longer
   * than a 375px column at display sizes. Hyphenate where the browser can, and break as a
   * guaranteed fallback, so no heading can push the page sideways. */
  overflow-wrap: break-word;
  hyphens: auto;
}

p, ul, ol, dl, table { margin: 0 0 var(--sp-lg); }
li + li { margin-top: var(--sp-sm); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.12em 0.36em;
  border-radius: 6px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-2xl) 0;
}

.muted { color: var(--text-secondary); }
.center { text-align: center; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-xl);
}
.wrap.narrow { max-width: 780px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-sm);
  background: var(--surface);
  color: var(--text);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-lg); }

/* ---------------------------------------------------------------- header */

/* Opaque rather than translucent-with-backdrop-filter: the blurred variant promotes the
 * header to its own compositing layer, which is a well-known source of blank repaints on
 * scroll in some renderers. The design does not need it. */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 44px;
  text-decoration: none;
  color: var(--text);
}
.brand-mark { display: inline-flex; }
.brand-word {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: 0.14em;
}

.nav {
  display: flex;
  gap: var(--sp-xl);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.97rem;
}
.nav li { margin: 0; }
/* Padded to a 44px tap target: these are standalone navigation targets, so WCAG 2.5.8's
 * inline-link exception does not apply to them. */
.nav a {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-xs);
}
.nav a:hover { color: var(--accent); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(var(--sp-3xl), 9vw, var(--sp-4xl));
  background:
    radial-gradient(120% 100% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}

.hero-inner { max-width: 760px; margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-lg);
}

.hero-title {
  font-size: clamp(2.4rem, 1.6rem + 4.2vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-xl);
}

.hero-sub {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  color: var(--text-secondary);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--sp-2xl);
  text-wrap: pretty;
}

.hero-note { font-size: 0.94rem; margin-top: var(--sp-xl); margin-bottom: 0; }

/* ---------------------------------------------------------------- buttons */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: center;
}
.hero .cta-row, .center-row { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 48px;
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-sm { min-height: 42px; padding: var(--sp-sm) var(--sp-lg); font-size: 0.95rem; }

.btn-primary { background: var(--accent); color: #FFF; }
a.btn-primary:hover { background: var(--accent-pressed); color: #FFF; }
@media (prefers-color-scheme: dark) { .btn-primary { color: #17140F; } a.btn-primary:hover { color: #17140F; } }

/* The App Store announcement is a status, not a control. Deliberately pill-shaped but
 * flat and dotted rather than button-like, so nobody tries to click it. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  margin: 0;
  min-height: 48px;
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent-pressed);
  font-weight: 600;
  font-size: 1rem;
}
@media (prefers-color-scheme: dark) { .status-pill { color: var(--accent); } }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
a.btn-secondary:hover { color: var(--text); border-color: var(--accent); }

.btn-quiet { color: var(--text-secondary); background: transparent; }
a.btn-quiet:hover { color: var(--accent); }

/* ---------------------------------------------------------------- sections */

.section { padding-block: clamp(var(--sp-3xl), 7vw, var(--sp-4xl)); }
.section:focus { outline: none; }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--border); }

.section-title {
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem);
  margin-bottom: var(--sp-lg);
}
.section-lede {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: var(--measure);
  margin-bottom: var(--sp-2xl);
}

.feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.feature-grid li { margin: 0; }

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  box-shadow: var(--shadow);
}
.feature h3 { font-size: 1.16rem; margin-bottom: var(--sp-sm); }
.feature p { margin: 0; color: var(--text-secondary); font-size: 0.99rem; }

/* ---------------------------------------------------------------- pages */

.page-head {
  padding-block: clamp(var(--sp-2xl), 6vw, var(--sp-3xl)) var(--sp-xl);
  border-bottom: 1px solid var(--border);
}
.page-head h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  margin-bottom: var(--sp-md);
}
.page-lede { color: var(--text-secondary); font-size: 1.1rem; margin: 0; max-width: var(--measure); }

.topic-list { list-style: none; margin: 0 0 var(--sp-3xl); padding: 0; display: grid; gap: var(--sp-lg); }
.topic-list li { margin: 0; }
.topic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  box-shadow: var(--shadow);
}
.topic h2 { font-size: 1.2rem; margin-bottom: var(--sp-sm); }
.topic p { color: var(--text-secondary); }
.topic p:last-child { margin-bottom: 0; }

.contact-list { margin: 0 0 var(--sp-2xl); }
.contact-list dt { font-weight: 600; margin-top: var(--sp-md); }
.contact-list dd { margin: var(--sp-xs) 0 0; }
.contact-list dd a { display: inline-block; padding-block: var(--sp-xs); }

.notice {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}
.notice p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- legal documents */

.legal-doc { padding-block: var(--sp-2xl) var(--sp-4xl); }

.legal-doc .doc-body { max-width: var(--measure); }
/* The source documents already carry a `---` before every `## ` heading, so the section
 * separator comes from the content itself — adding a border here would double it. */
.legal-doc h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  margin-top: var(--sp-2xl);
}
.legal-doc hr { margin: var(--sp-2xl) 0; }
.legal-doc h3 { font-size: 1.14rem; margin-top: var(--sp-xl); margin-bottom: var(--sp-sm); }
.legal-doc ul { padding-left: 1.25em; }
.legal-doc ul ul { margin-top: var(--sp-sm); }

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: baseline;
  margin: 0 0 var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
}
.lang-switch p { margin: 0; }
/* The other language is a primary affordance on this page — give it a real tap target. */
.lang-switch a { display: inline-block; padding-block: var(--sp-sm); font-weight: 600; }

.table-wrap { overflow-x: auto; margin-bottom: var(--sp-lg); }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-md);
  border-bottom: 1px solid var(--border);
}
th { font-weight: 600; background: var(--surface-2); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-block: var(--sp-3xl) var(--sp-2xl);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  gap: var(--sp-2xl);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: var(--sp-2xl);
}

.footer-brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  margin: 0 0 var(--sp-xs);
}
.footer-heading { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--sp-md); }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li + li { margin-top: 0; }
/* Same rule as the header nav: standalone links need a 24px-plus target. */
.plain a {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.plain a:hover { color: var(--accent); text-decoration: underline; }

.colophon {
  margin: 0 0 var(--sp-sm);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  max-width: var(--measure);
}
.colophon + .colophon { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------- print */

@media print {
  .site-header, .site-footer, .skip-link, .lang-switch { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
}