/* CoPlay website styles.
   The values mirror the app's design tokens (Theme.swift, D28) and the Golden Hour
   palette (D32): amberDeep #C25400, amberProminent #E66B00, amberGlow #FF9640,
   hazardYellow #F5C417, ink #0D0A08, radius control 12 / prominent 20, and the icon's
   brand gradient #FF8A00 -> #F29700 (Icon Composer fill, D31). Like the app (NN #15),
   both appearances work by construction: the dark palette is the default (brand-first,
   amberGlow accent on ink), and a light palette takes over under prefers-color-scheme:
   light (amberDeep accent on warm paper). The screenshots switch to match (site.js). */

:root {
  --ink: #0d0a08;
  --surface: #17120e;
  --surface-raised: #211a14;
  --border: rgba(255, 150, 64, 0.16);
  --text: #f7f3ee;
  --text-secondary: #beb2a6;
  --text-tertiary: #8a8076;
  --accent: #ff9640;
  --accent-deep: #c25400;
  --accent-prominent: #e66b00;
  --on-accent: #0d0a08;
  --hazard: #f5c417;
  --header-bg: rgba(13, 10, 8, 0.82);
  --brand-gradient: linear-gradient(180deg, #ff8a00 0%, #f29700 70%);
  --radius-control: 12px;
  --radius-prominent: 20px;
  --space-m: 8px;
  --space-l: 12px;
  --space-xl: 16px;
  --space-xxl: 24px;
  --screen-margin: 28px;
  --content-width: 1080px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

/* Light appearance. Only the color tokens flip; spacing, radii, and the brand gradient
   (which carries white text in the hero either way) are appearance independent. The accent
   moves from amberGlow to amberDeep so it stays readable as link text and as a filled
   background on warm paper, and the hazard tone darkens to a legible gold. */
@media (prefers-color-scheme: light) {
  :root {
    --ink: #fbf6f0;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --border: rgba(194, 84, 0, 0.16);
    --text: #1b140e;
    --text-secondary: #6e5f52;
    --text-tertiary: #998878;
    --accent: #c25400;
    --accent-deep: #a34600;
    --accent-prominent: #c25400;
    --on-accent: #ffffff;
    --hazard: #8a6a00;
    --header-bg: rgba(251, 246, 240, 0.82);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header .bar {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 10px var(--screen-margin);
  display: flex;
  align-items: center;
  gap: var(--space-xxl);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-gradient);
  padding: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-left: auto;
  font-size: 15px;
}

.site-nav a { color: var(--text-secondary); }
.site-nav a:hover { color: var(--text); text-decoration: none; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
}

.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* Hero */

.hero {
  background: var(--brand-gradient);
  color: #fff;
  overflow: hidden;
}

.hero .inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 72px var(--screen-margin) 84px;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.hero .copy { flex: 1 1 420px; }

.hero h1 {
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero .subtitle {
  font-size: clamp(17px, 2.2vw, 21px);
  max-width: 34em;
  margin: var(--space-xl) 0 var(--space-xxl);
  color: rgba(255, 255, 255, 0.94);
}

.hero .morph {
  flex: 0 1 360px;
  margin: 0 auto;
}

.hero .morph img { width: 100%; height: auto; }

.store-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-control);
  padding: 9px 22px 11px;
  line-height: 1.15;
}
.store-badge:hover { text-decoration: none; transform: scale(1.02); }
.store-badge small { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.store-badge strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.hero .fine-print {
  margin-top: var(--space-xl);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 36em;
}

/* Sections */

.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 72px var(--screen-margin) 8px;
}

.section > h2 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
}

.section > .lede {
  color: var(--text-secondary);
  max-width: 44em;
  margin: var(--space-l) 0 0;
  font-size: 17px;
}

/* Feature rows: screenshot beside copy, alternating */

.feature {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 56px 0;
  flex-wrap: wrap;
}

.feature:nth-child(even) { flex-direction: row-reverse; }

.feature .shot { flex: 0 1 320px; margin: 0 auto; }

.feature .copy { flex: 1 1 380px; }

.feature h3 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--text);
}

.feature p {
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 36em;
  margin: var(--space-xl) 0 0;
}

.feature .kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-l);
}

/* The real screenshots sit in a simple device shell */

.device {
  border-radius: 44px;
  border: 9px solid #292219;
  background: #000;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.device img { width: 100%; height: auto; }

/* How it works */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xxl);
  padding: 48px 0 64px;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-prominent);
  padding: var(--space-xxl);
}

.step .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-xl);
}

.step h3 { font-size: 20px; }

.step p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: var(--space-m) 0 0;
}

/* Join callout (shared look with the join page card) */

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-prominent);
  padding: 40px var(--screen-margin);
  margin: 24px 0 72px;
  text-align: center;
}

.callout h2 { font-size: 26px; }

.callout p {
  color: var(--text-secondary);
  max-width: 38em;
  margin: var(--space-l) auto var(--space-xxl);
}

.button-secondary {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-control);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 600;
}
.button-secondary:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }

/* Join page */

.join-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px var(--screen-margin) 72px;
  text-align: center;
}

.join-main .mark-badge {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: var(--brand-gradient);
  padding: 6px;
  margin: 0 auto 20px;
}

.join-main h1 { font-size: 30px; font-weight: 800; }

.join-main p { color: var(--text-secondary); margin: var(--space-xl) 0; }

.code {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 12px 16px;
  word-break: break-all;
  user-select: all;
}

.disclaimer {
  margin-top: 32px;
  padding: var(--space-xl);
  border-radius: var(--radius-control);
  background: rgba(245, 196, 23, 0.1);
  border: 1px solid rgba(245, 196, 23, 0.4);
  text-align: left;
}

.disclaimer strong { color: var(--hazard); display: block; margin-bottom: 4px; }
.disclaimer p { color: var(--text-secondary); margin: 0; font-size: 14px; }

.join-main .get-app { margin-top: 36px; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.site-footer .inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px var(--screen-margin) 56px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxl);
  flex-wrap: wrap;
  color: var(--text-tertiary);
  font-size: 14px;
}

.site-footer .tagline { flex: 1 1 260px; color: var(--text-secondary); }

.site-footer nav {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.site-footer a { color: var(--text-secondary); }

.site-footer .legal {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Legal documents (Impressum, privacy, EULA, terms). Long-form prose, one readable
   column. Each language is a [data-lang-block] toggled by the site's language switch. */

.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--screen-margin) 72px;
}

.legal-doc h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
}

.legal-doc .effective {
  color: var(--text-tertiary);
  font-size: 14px;
  margin: var(--space-l) 0 0;
}

.legal-doc .intro {
  color: var(--text-secondary);
  font-size: 17px;
  margin: var(--space-xl) 0 0;
}

.legal-doc h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 0;
}

.legal-doc h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 0;
}

.legal-doc p,
.legal-doc li {
  color: var(--text-secondary);
  font-size: 15px;
  margin: var(--space-l) 0 0;
}

.legal-doc ul { margin: var(--space-l) 0 0; padding-left: 1.3em; }
.legal-doc li { margin-top: var(--space-m); }

.legal-doc .addr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--space-xl);
  margin: var(--space-xl) 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.legal-doc .placeholder {
  color: var(--hazard);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

/* Obscured identity (name, address, email) masks: click any to reveal them all (site.js).
   Deliberately plain spans with no accessible affordance, an anti-harvesting trade-off. */
.legal-doc .reveal-pii {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline dotted;
}

/* Hub page listing the app / App Store legal documents */

.legal-hub { max-width: 760px; margin: 0 auto; padding: 56px var(--screen-margin) 72px; }
.legal-hub h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 800; }
.legal-hub .intro { color: var(--text-secondary); font-size: 17px; margin: var(--space-xl) 0 var(--space-xxl); }

.legal-hub .doc-list { display: grid; gap: var(--space-l); }

.legal-hub .doc-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-prominent);
  padding: var(--space-xl) var(--space-xxl);
}
.legal-hub .doc-link:hover { text-decoration: none; border-color: var(--accent); }
.legal-hub .doc-link strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 18px; }
.legal-hub .doc-link span { display: block; color: var(--text-secondary); font-size: 14px; margin-top: 4px; }

@media (max-width: 640px) {
  .site-header .bar { padding: 10px 16px; }
  .site-nav .nav-link { display: none; }
  .hero .inner { padding-top: 48px; padding-bottom: 56px; }
  .hero .morph { flex-basis: 240px; max-width: 260px; }
  .feature { padding: 40px 0; gap: 32px; }
  .feature .shot { flex-basis: 240px; }
  .device { border-radius: 34px; border-width: 7px; }
}