:root {
  /* ---- Tier 1: raw palette (not used directly by components) ---- */
  --paper: #ffffff;
  --ground: #f2f5f3;
  --ink: #101514;
  --ink-soft: #27312e;
  --muted: #65716d;
  --line: #d8dfdc;
  --green-500: #25b96f;
  --green-600: #147d4d; /* WEB-ROUND3: was #168653 (4.2–4.6:1 as text on the light washes); now AA everywhere */
  --cyan-500: #35c9d0;
  --blue-500: #4a89f3;
  --coral-500: #ff765f;
  --dark: #0e1513;
  --dark-2: #18211e;

  /* ---- Tier 2: semantic (marketing-specific names, not app-state names) ---- */
  --brand-accent: var(--green-500);
  --brand-accent-strong: var(--green-600);
  --signal-local: var(--cyan-500);
  --signal-cloud: var(--blue-500); /* same hue family as the desktop client's cloud state */
  --signal-relay: var(--coral-500);
  --surface-dark: var(--dark);
  --surface-dark-2: var(--dark-2);

  /* ---- Phase 2: light wash tints for icon chips (capability-card signals) ---- */
  --brand-accent-wash: #eafcf3;
  --signal-local-wash: #eafbfc;
  --signal-cloud-wash: #eef4fe;
  --signal-relay-wash: #fff1ee;

  /* ---- spacing (marketing scale, deliberately roomier than the client's 4px grid) ---- */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 42px;
  --space-6: 68px;
  --space-7: 112px;

  /* ---- radius (collapses the site's current 5/6/7/8px drift over time) ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---- elevation: the two shadow treatments the site actually uses today ---- */
  --shadow-float: 0 24px 70px rgba(8, 20, 15, 0.28); /* pilot dialog */
  --shadow-window: 0 32px 70px rgba(25, 43, 36, 0.18); /* product mock-up */

  /* ---- typography weight scale (collapses six ad-hoc weights to three) ---- */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 800;

  /* ---- motion ---- */
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- legacy aliases: every existing rule in this file still reads these
     exact names, so keeping them means zero component rules need to change
     to adopt the token system. Remove only once nothing references them. ---- */
  --green: var(--green-500);
  --green-dark: var(--green-600);
  --cyan: var(--cyan-500);
  --blue: var(--blue-500);
  --coral: var(--coral-500);
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

body,
button,
a {
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

/* Phase 1: baseline keyboard-focus visibility. Purely additive -- only
   changes rendering when an element is keyboard-focused, never otherwise. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Phase 2: shared icon primitive. Every <svg class="icon"> on the site
   (imported from the desktop client's sprite, see the <symbol> block above
   the header) renders through this one rule; per-context sizing overrides
   it locally (.eyebrow .icon, .faq-chevron, etc.) rather than each icon
   usage inventing its own base styling. */
.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Phase 6: skip link. Hidden off-screen until keyboard-focused, then pinned
   above the fixed header (z-index 30 > .site-header's 20) so it's never
   obscured. Targets the existing #top id already used by the wordmark's
   "back to top" link -- no new anchor target needed. */
.skip-link {
  position: fixed;
  z-index: 30;
  top: -100px;
  left: 16px;
  padding: 12px 20px;
  background: var(--brand-accent-strong);
  color: #fff;
  text-decoration: none;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.site-header.scrolled {
  background: rgba(14, 21, 19, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.wordmark-mark {
  width: 27px;
  height: 27px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
}

.wordmark-mark i {
  display: block;
  background: var(--green);
}

.wordmark-mark i:nth-child(2) {
  background: var(--cyan);
}

.wordmark-mark i:nth-child(3) {
  grid-column: 1 / 3;
  background: var(--coral);
}

.header-end {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.profile-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-full);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.profile-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Language switch (docs/i18n.md): the other language's two-letter code,
   always in that language, next to the account button. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.lang-switch:hover {
  background: rgba(255, 255, 255, 0.12);
}

.legal-header .lang-switch {
  margin-left: 20px;
}

/* Signed in: filled with the brand accent instead of outlined, so the two
   states read apart at a glance without needing to parse the label text --
   the same color language the rest of the site uses for a primary action. */
.profile-button.is-authenticated {
  border-color: transparent;
  background: var(--brand-accent);
  color: #05130c;
}

.profile-button.is-authenticated:hover {
  background: var(--brand-accent-strong);
}

.logout-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-full);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
}

/* `display` above and the `[hidden]` attribute have equal specificity, and
   this stylesheet loads after the browser's own `[hidden] { display: none }`
   default -- without this, the button stayed visible while logged out even
   though app.js correctly sets the `hidden` property. The extra class in
   the selector outweighs a bare `[hidden]` regardless of source order. */
.logout-button[hidden] {
  display: none;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.site-nav a {
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-nav a:hover {
  color: #89edbc;
}

.site-nav .nav-cta {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-sm);
}

.menu-toggle {
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
}

.hero {
  position: relative;
  min-height: 760px;
  height: 88svh;
  max-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background-color: #233b31;
  background-image: url("mcsync-world-hero.webp");
  background-position: center;
  background-size: cover;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 9, 0.5);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 80px));
  margin: 28px auto 0;
}

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.status-line span,
.release-status > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #62e89f;
  box-shadow: 0 0 0 5px rgba(98, 232, 159, 0.16);
}

.hero h1 {
  margin: 0;
  font-size: 82px;
  line-height: 0.95;
  font-weight: var(--weight-bold);
}

/* The one sentence under the headline that says what the product does:
   between the old two-tier claim (38px) and body copy (18px), so it reads
   as part of the message rather than as fine print. */
.hero-lead {
  max-width: 780px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1.4;
  font-weight: var(--weight-medium);
}

.hero-setup {
  margin: 12px 0 0;
  color: #baf4d5;
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.hero-setup span {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.48);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-cta-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.hero-cta-note span {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.48);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.button-primary {
  background: var(--green);
  color: #07110d;
}

.button-primary:hover {
  background: #5adb99;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.button-secondary {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.button-secondary:hover {
  border-color: #aab6b1;
  background: var(--ground);
}

.button-quiet {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(8, 18, 14, 0.42);
  color: #fff;
}

.button-quiet:hover {
  background: rgba(8, 18, 14, 0.72);
}

.hero-facts {
  display: flex;
  gap: 42px;
  margin: 42px 0 0;
}

.hero-facts div {
  display: grid;
}

.hero-facts dt {
  font-size: 18px;
  font-weight: var(--weight-bold);
}

.hero-facts dd {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.hero-next {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.section {
  padding: 112px max(40px, calc((100% - 1180px) / 2));
}

.section-intro {
  background: var(--paper);
}

.section-heading {
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

/* Phase 2: sizes the one eyebrow icon in use today (security section).
   Scoped to .icon inside .eyebrow so untouched eyebrows elsewhere on the
   page are completely unaffected. */
.eyebrow .icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

.section-heading h2,
.security-section h2,
.early-access h2 {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
}

.section-heading > p:last-child,
.early-access > p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 18px;
}

/* Phase 5: two actions side by side (universal + pilot), matching the
   hero's own primary/secondary pattern -- was a single centered column
   when this section only ever had the one (dead-end) pilot button. */
.pilot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.pilot-actions-note {
  display: block;
  margin-top: 12px;
  color: var(--muted);
}

.steps {
  margin: 68px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.steps li {
  min-height: 142px;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.step-number {
  color: var(--green-dark);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.steps h3,
.capabilities h3 {
  margin: 0;
  font-size: 23px;
}

.steps p,
.capabilities p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
}

.product-section {
  overflow: hidden;
  background: var(--ground);
}

.product-heading {
  margin-bottom: 52px;
}

/* Phase 4: replaces the hand-coded pre-redesign application mock-up with
   a real screenshot of the current redesigned desktop client (see
   docs/website-redesign-plan.md Phase 4 for the render source and demo
   data). Restrained frame: border + shadow reusing the same
   --shadow-window token the old mock-up already used, no fake window
   chrome, no traffic lights -- the screenshot IS the real app, it doesn't
   need to pretend to be one. */
.product-shot {
  max-width: 1180px;
  margin: 0 auto;
}

.product-shot img,
.product-shot video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-window);
}

.product-shot figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-align: center;
}


.capabilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 76px;
}

.capabilities article {
  padding-top: 22px;
  border-top: 1px solid #bfcac5;
}

/* Phase 2: was a flat 16px colour square; now an icon-in-wash chip using
   the same icon geometry as the desktop client. Modifier class names
   (cyan/coral/green/blue) are unchanged so the exact original colour stays
   paired with the exact original card -- only the content inside (a plain
   square vs. a meaningful icon) changed. */
.signal {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border-radius: var(--radius-md);
}

.signal .icon {
  width: 20px;
  height: 20px;
}

.signal.cyan {
  background: var(--signal-local-wash);
  color: var(--signal-local);
}

.signal.coral {
  background: var(--signal-relay-wash);
  color: var(--signal-relay);
}

.signal.green {
  background: var(--brand-accent-wash);
  color: var(--brand-accent);
}

.signal.blue {
  background: var(--signal-cloud-wash);
  color: var(--signal-cloud);
}

/* The hosting explainer: a situation picker (local vs. cloud) above one
   animation that shows the chosen situation. Replaced the earlier static
   World/Local/Relay/Cloud cards, which said the same thing without a
   picture. */
.hosting-explainer {
  padding: 112px max(40px, calc((100% - 1180px) / 2));
  background: var(--dark);
  color: #fff;
}

/* Light green for the dark sections only. The early access section sits on
   white, where this green had about 1.9:1 contrast; it keeps the regular
   eyebrow colour instead. */
.hosting-explainer .eyebrow,
.security-section .eyebrow {
  color: #65daa0;
}

.hosting-explainer .section-heading > p:last-child {
  color: #9ba9a4;
}

/* ---- Situation picker: the two ways a session gets hosted. The cards are
   also the only prose about Local/Relay/Cloud in this section, so they
   stay readable (and indexable) without JS; with JS they switch the
   animation below. ---- */
.host-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 56px;
}

.host-option {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid #34423d;
  border-radius: var(--radius-lg);
  background: var(--dark-2);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}

.host-option:hover {
  border-color: #4f625b;
}

.host-option:focus-visible {
  outline: 2px solid #65daa0;
  outline-offset: 3px;
}

.host-option.active {
  border-color: #65daa0;
  background: #1c2a25;
  box-shadow: 0 0 0 1px #65daa0 inset;
}

.host-option-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #65daa0;
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.host-option[data-host-scene="cloud"] .host-option-kicker {
  color: #8fb5f8;
}

.host-option-kicker .icon {
  width: 16px;
  height: 16px;
}

.host-option-title {
  font-size: 20px;
  font-weight: var(--weight-bold);
}

.host-option-text {
  color: #9ba9a4;
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Sync story: one world travelling between hosts via the cloud. All
   state lives in classes on the figure (and data-state on each PC), set by
   setupSyncStory() in site.js; the SVG only says what each state looks
   like. ---- */
.sync-story {
  --ss-alert: #f26464;
  margin: 20px 0 0;
  padding: 28px 28px 24px;
  border: 1px solid #34423d;
  border-radius: var(--radius-lg);
  background: var(--dark-2);
}

.sync-story-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sync-story-art text {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: inherit;
}

.ss-link {
  stroke: #34423d;
  stroke-width: 2.5;
  stroke-dasharray: 6 8;
  transition: stroke var(--dur-base);
}

.sync-story.link-a .ss-link-a,
.sync-story.link-b .ss-link-b,
.sync-story.link-c .ss-link-c,
.sync-story.link-d .ss-link-d {
  stroke: var(--signal-cloud);
  animation: ss-flow 0.8s linear infinite;
}

.ss-cloud-shape {
  fill: rgba(74, 137, 243, 0.12);
  stroke: var(--signal-cloud);
  stroke-width: 2.5;
  transition: stroke var(--dur-base), fill var(--dur-base);
}

.sync-story.cloud-starting .ss-cloud-shape {
  animation: ss-pulse 0.9s ease-in-out infinite;
}

.sync-story.host-cloud .ss-cloud-shape {
  fill: rgba(53, 201, 208, 0.18);
  stroke: var(--signal-local);
  filter: drop-shadow(0 0 16px rgba(53, 201, 208, 0.5));
}

.ss-cloud-label {
  fill: #cfdcf9;
  font-size: 18px;
  font-weight: var(--weight-bold);
}

.ss-version rect {
  fill: var(--green-500);
}

.ss-version-text {
  fill: var(--dark);
  font-size: 15px;
  font-weight: var(--weight-bold);
}

.ss-version.pop {
  animation: ss-pop 520ms var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

.ss-lock {
  opacity: 0;
  transition: opacity var(--dur-base);
}

.ss-lock rect {
  fill: var(--coral-500);
}

.ss-lock path {
  fill: none;
  stroke: var(--coral-500);
  stroke-width: 3;
}

.sync-story-art .ss-lock-label {
  fill: var(--coral-500);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-anchor: end;
}

.sync-story.locked .ss-lock {
  opacity: 1;
}

/* ---- the four PCs ---- */
.ss-monitor {
  fill: var(--dark);
  stroke: #4a5a54;
  stroke-width: 2.5;
  transition: stroke var(--dur-base);
}

.ss-screen {
  fill: #1e2a26;
  transition: fill var(--dur-base);
}

.ss-face {
  shape-rendering: crispEdges;
}

/* Dimmed with an overlay, not a CSS filter: older Safari ignores filters
   on SVG children. */
.ss-dim {
  fill: var(--dark);
  opacity: 0;
  transition: opacity var(--dur-base);
}

.ss-pc[data-state="offline"] .ss-dim {
  opacity: 0.62;
}

.ss-pc-name {
  fill: #cfd8d4;
  font-size: 19px;
  font-weight: var(--weight-bold);
  transition: fill var(--dur-base);
}

.ss-pc[data-state="offline"] .ss-pc-name {
  fill: #7d8b86;
}

.ss-stand {
  stroke: #4a5a54;
  stroke-width: 3;
  stroke-linecap: round;
}

.ss-status rect {
  fill: #26322e;
  transition: fill var(--dur-base);
}

.ss-status-text {
  fill: #9ba9a4;
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.ss-pc[data-state="busy"] .ss-status rect {
  fill: rgba(74, 137, 243, 0.25);
}

.ss-pc[data-state="busy"] .ss-status-text {
  fill: #cfdcf9;
}

.ss-pc[data-state="host"] .ss-monitor {
  stroke: var(--signal-local);
  filter: drop-shadow(0 0 14px rgba(53, 201, 208, 0.45));
}

.ss-pc[data-state="host"] .ss-screen {
  fill: rgba(53, 201, 208, 0.2);
}

.ss-pc[data-state="host"] .ss-status rect,
.ss-pc[data-state="playing"] .ss-status rect {
  fill: rgba(37, 185, 111, 0.25);
}

.ss-pc[data-state="host"] .ss-status-text,
.ss-pc[data-state="playing"] .ss-status-text {
  fill: #65daa0;
}

.ss-pc[data-state="playing"] .ss-monitor {
  stroke: var(--signal-local);
}

.ss-pc[data-state="weak"] .ss-monitor {
  stroke: var(--ss-alert);
}

.ss-pc[data-state="weak"] .ss-screen {
  fill: rgba(242, 100, 100, 0.14);
}

.ss-pc[data-state="weak"] .ss-status rect {
  fill: rgba(242, 100, 100, 0.22);
}

.ss-pc[data-state="weak"] .ss-status-text {
  fill: #ff9d9d;
}

/* ---- connections: host beam, joining players, cloud server ---- */
.ss-play,
.ss-cloud-beam {
  fill: none;
  stroke: var(--signal-local);
  opacity: 0;
  transition: opacity 300ms;
}

.ss-play {
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.sync-story.host-a .ss-play-a,
.sync-story.host-b .ss-play-b,
.sync-story.host-c .ss-play-c,
.sync-story.host-d .ss-play-d,
.sync-story.host-cloud .ss-cloud-beam {
  opacity: 1;
  stroke-width: 3.5;
  stroke-dasharray: 7 9;
  animation: ss-flow 0.8s linear infinite;
}

.sync-story.join-a .ss-play-a,
.sync-story.join-b .ss-play-b,
.sync-story.join-c .ss-play-c,
.sync-story.join-d .ss-play-d {
  opacity: 0.9;
  animation: ss-flow 0.8s linear infinite reverse;
}

.ss-address rect {
  fill: var(--dark);
  stroke: #34423d;
  stroke-width: 1.5;
  transition: stroke var(--dur-base);
}

.ss-address text {
  fill: #7d8b86;
  font-size: 15px;
  font-weight: var(--weight-medium);
  transition: fill var(--dur-base);
}

.ss-address-short {
  display: none;
}

.sync-story.hosting .ss-address rect {
  stroke: var(--signal-local);
}

.sync-story.hosting .ss-address text {
  fill: #fff;
}

.ss-packet {
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.45, 0, 0.2, 1), opacity 200ms;
}

.ss-packet.visible {
  opacity: 1;
}

.ss-packet rect {
  fill: var(--green-500);
  filter: drop-shadow(0 4px 10px rgba(37, 185, 111, 0.45));
}

.ss-packet-text {
  fill: var(--dark);
  font-size: 15px;
  font-weight: var(--weight-bold);
}

/* ---- phase pills and caption ---- */
.sync-story-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.ss-step {
  padding: 6px 14px;
  border: 1px solid #34423d;
  border-radius: var(--radius-full);
  color: #9ba9a4;
  font-size: 13px;
  font-weight: var(--weight-medium);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}

.ss-step.active {
  border-color: #65daa0;
  background: rgba(101, 218, 160, 0.12);
  color: #fff;
}

.ss-step-arrow {
  color: #4f625b;
  font-size: 13px;
}

.sync-story-caption {
  max-width: 680px;
  min-height: 3em;
  margin: 12px auto 0;
  color: #cfd8d4;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

@keyframes ss-flow {
  to {
    stroke-dashoffset: -32;
  }
}

@keyframes ss-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes ss-pulse {
  50% { fill: rgba(74, 137, 243, 0.32); }
}

/* On a phone the diagram is ~0.35x, so SVG labels get larger, the heads
   move to the centre of the screen instead of sharing it with the name,
   and the small print (names, status pills, long address) gives way --
   state still reads from the monitor colours, and the caption below is
   real text that carries the whole story. */
@media (max-width: 640px) {
  .sync-story {
    padding: 18px 12px 16px;
  }

  .ss-cloud-label {
    font-size: 30px;
  }

  .ss-address text {
    font-size: 24px;
  }

  .ss-version-text,
  .ss-packet-text {
    font-size: 19px;
  }

  .ss-head {
    transform: translate(-24px, -26px) scale(1.5);
  }

  .ss-pc-name,
  .ss-status,
  .ss-lock-label,
  .ss-address-full,
  .ss-step-arrow {
    display: none;
  }

  .ss-address-short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-story *,
  .sync-story *::before,
  .sync-story *::after {
    animation: none !important;
    transition: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pricing-section {
  background: #fff;
}

.segmented {
  width: fit-content;
  display: flex;
  margin-top: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ground);
}

.segmented button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segmented button.active {
  background: var(--ink);
  color: #fff;
  font-weight: var(--weight-bold);
}

/* Names the relationship between the two segmented-control views: the
   monthly cloud credit each plan includes vs. the hourly rates (the
   "Cloud-Stunden" tab) that usage beyond it is charged at -- two different
   cost types, easy to conflate without this line. */
.pricing-hint {
  max-width: 640px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pricing-catalog-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.pricing-catalog-status[data-kind="success"] {
  color: var(--green-dark);
}

.pricing-catalog-status[data-kind="error"],
.pricing-catalog-error {
  color: #a33a3f;
}

.price-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.price-panel.active {
  display: grid;
}

.price-card {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.price-card.featured {
  border: 2px solid var(--green-dark);
}

.price-card.unavailable {
  background: var(--ground);
}

/* Not bookable yet, so it is not the one to point at either. */
.price-card.featured.unavailable {
  border: 1px solid var(--line);
}

.price-card.unavailable > :not(.price-status) {
  opacity: 0.6;
}

/* Pushed to the bottom so the buttons line up across cards of different
   length. */
.price-cta {
  align-self: stretch;
  margin-top: auto;
  padding: 12px 18px;
  border: 1px solid var(--green-dark);
  border-radius: var(--radius-full);
  color: var(--green-dark);
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
}

.price-card ul:has(+ .price-cta),
.price-card .price-footnote:has(+ .price-cta) {
  margin-bottom: 28px;
}

.price-cta.primary {
  background: var(--green-dark);
  color: #fff;
}

.price-cta.primary:hover {
  background: #0f6b41;
}

/* Plus while the test phase runs: the plan people can use for free right
   now, so the one card that is highlighted and has the main button. */
.price-card.on-offer {
  position: relative;
  background: var(--brand-accent-wash);
}

/* The plan name in green on the green wash needs a darker shade for 4.5:1. */
.price-card.on-offer > p:not(.price-note) {
  color: #0f6b41;
}

/* "bis 31. Dezember 2026" under the price, not beside it, so the date
   never breaks in the middle on a phone. */
.price-card.on-offer h3 span {
  display: block;
  margin-top: 4px;
}

.price-ribbon {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.price-card > .price-note {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.price-footnote {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}

/* What happens after the test phase: a clarification people must not
   miss, so a marked block rather than fine print. */
.price-panel-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--green-dark);
  border-radius: var(--radius-sm);
  background: var(--brand-accent-wash);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: var(--weight-medium);
}

.price-cta:hover {
  background: var(--green-dark);
  color: #fff;
}

.price-card > p {
  margin: 0;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.price-card h3 {
  margin: 18px 0 0;
  font-size: 30px;
}

.price-card h3 span {
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--weight-medium);
}

.price-card > strong {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.price-card ul {
  display: grid;
  gap: 13px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.price-card li::before {
  content: "✓";
  margin-right: 9px;
  color: var(--green-dark);
  font-weight: var(--weight-bold);
}

/* Phase 5: a per-card status badge instead of a per-card CTA button --
   there is nothing to book yet (see the section intro), so an honest
   "planned" status reads more truthfully here than a fake enabled/disabled
   buy button would. Neutral grey, deliberately not accent-coloured, so it
   never reads as a "recommended"/"most popular" badge. */
.price-status {
  display: inline-block;
  align-self: flex-start;
  margin-top: 20px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--ground);
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--weight-medium);
}

.cloud-prices {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.cloud-row {
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr 180px 220px;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.cloud-row > span {
  display: grid;
}

.cloud-row b {
  font-size: 21px;
}

.cloud-row small,
.cloud-row em {
  color: var(--muted);
  font-style: normal;
}

.cloud-row small + small {
  margin-top: 5px;
}

.cloud-row strong {
  font-size: 22px;
}

.security-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 100px;
  padding: 112px max(40px, calc((100% - 1180px) / 2));
  background: #16382c;
  color: #fff;
}

.security-list {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.security-list div {
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.security-list dt {
  font-weight: var(--weight-bold);
}

.security-list dd {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.68);
}

.faq-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 100px;
  background: var(--ground);
}

.faq-list {
  border-top: 1px solid #bac5c0;
}

.faq-list details {
  border-bottom: 1px solid #bac5c0;
}

.faq-list summary {
  position: relative;
  padding: 24px 42px 24px 0;
  cursor: pointer;
  font-weight: var(--weight-bold);
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* Phase 2: was a literal "+"/"-" character swapped via ::after content;
   now a single rotating chevron icon, matching the client's own identical
   fix for the same "literal glyph" anti-pattern. */
.faq-chevron {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq-list details[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-list details p {
  max-width: 680px;
  margin: -8px 0 24px;
  color: var(--muted);
}

/* Phase 6: inline prose links (the FAQ -> #preise cross-link) need a
   non-colour signal, not just `a { color: inherit }`, since colour alone
   doesn't distinguish them from surrounding .faq-list details p text. */
.faq-list details p a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.early-access {
  padding: 116px max(40px, calc((100% - 900px) / 2));
  text-align: center;
}

.early-access > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.release-status {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 10px auto;
  gap: 2px 12px;
  align-items: center;
  margin: 34px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: left;
}

.release-status > span {
  grid-row: 1 / 3;
}

.release-status small {
  color: var(--muted);
}

.pilot-dialog {
  width: min(560px, calc(100% - 32px));
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

.pilot-dialog::backdrop {
  background: rgba(5, 13, 10, 0.7);
}

.pilot-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.pilot-dialog-head h2 {
  margin: 0;
  font-size: 28px;
}

.pilot-dialog > p {
  margin: 18px 0 0;
  color: var(--muted);
}

.dialog-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}

.dialog-close .icon {
  width: 18px;
  height: 18px;
}

.dialog-close:hover {
  background: var(--ground);
}

.pilot-form {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.pilot-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.pilot-form-status {
  min-height: 24px;
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.pilot-form-status[data-kind="error"] {
  color: #b22b24;
}

.pilot-form-status[data-kind="success"] {
  color: var(--green-dark);
}

.pilot-form-status[data-kind="progress"] {
  color: #255faa;
}

.pilot-warning {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdf3d8;
  border: 1px solid #e8c766;
  color: #7a5b00;
  font-size: 14px;
  line-height: 1.5;
}

.pilot-notice {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Closed beta: access request form (docs/ai/tasks/BETA-001.md). */
.pilot-signing-note {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef4fe;
  border: 1px solid #b9cdf2;
  color: #1f4b8f;
  font-size: 14px;
  line-height: 1.5;
}

.beta-request {
  max-width: 560px;
  margin: 56px auto 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  text-align: left;
}

.beta-request h3 {
  margin: 0;
  font-size: 24px;
}

.beta-request > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.beta-request-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.beta-request-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.beta-request-form input,
.beta-request-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}

.beta-request-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.beta-request-privacy {
  color: var(--muted);
  font-size: 13px;
}

.beta-request-status {
  min-height: 24px;
  margin: 0;
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.beta-request-status[data-kind="error"] {
  color: #b22b24;
}

.beta-request-status[data-kind="success"] {
  color: var(--green-dark);
}

.beta-request-status[data-kind="progress"] {
  color: #255faa;
}

.site-footer {
  min-height: 190px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px 40px;
  align-content: center;
  padding: 42px max(40px, calc((100% - 1180px) / 2));
  background: var(--dark);
  color: #fff;
}

.site-footer > p {
  justify-self: end;
  margin: 0;
  color: #a7b2ae;
}

.site-footer .legal-note {
  grid-column: 1 / 3;
  justify-self: start;
  max-width: 760px;
  font-size: 12px;
}

.footer-sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-self: end;
}

.footer-sitemap a,
.footer-links a {
  color: #dce6e2;
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.footer-sitemap a:hover,
.footer-links a:hover {
  color: #89edbc;
}

.legal-page {
  background: var(--ground);
}

.legal-header {
  position: fixed;
  background: rgba(14, 21, 19, 0.98);
}

.legal-nav a[aria-current="page"] {
  color: #89edbc;
}

.legal-main {
  width: min(860px, calc(100% - 40px));
  min-height: calc(100vh - 190px);
  margin: 0 auto;
  padding: 132px 0 100px;
}

.legal-title {
  margin-bottom: 42px;
}

.legal-title h1 {
  margin: 4px 0 12px;
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1.04;
  /* Phase 6: the 42px clamp floor doesn't shrink further on narrow phones,
     and a long unhyphenated compound word ("Datenschutzerklärung") caused
     horizontal overflow at 390/360px. hyphens:auto (the page is lang="de")
     breaks at a proper syllable boundary; overflow-wrap is a fallback for
     engines/fonts where hyphenation doesn't engage. Neither changes
     rendering at widths where the heading already fits on one line. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.legal-title > p:last-child {
  max-width: 650px;
  color: var(--muted);
  font-size: 18px;
}

.legal-draft {
  margin-bottom: 28px;
  padding: 18px 20px;
  border: 1px solid #d4a62a;
  border-left: 5px solid #d4a62a;
  border-radius: var(--radius-sm);
  background: #fff9e8;
}

.legal-draft p {
  margin: 4px 0 0;
}

.legal-section {
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  margin: 0 0 14px;
  font-size: 23px;
  /* Phase 7: same class of bug as .legal-title h1 (Phase 6) -- a long
     unhyphenated German compound word ("Unternehmensangaben") overflowed
     at the 320px catastrophic-width check. Same fix, same safety-net
     rationale: only engages when a single word can't fit. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.legal-section p,
.legal-section address,
.legal-section li {
  color: var(--ink-soft);
}

.legal-section address {
  font-style: normal;
}

.legal-section li + li {
  margin-top: 8px;
}

.legal-section mark {
  padding: 1px 4px;
  background: #ffe9a8;
  color: #5f4500;
}

.legal-hint {
  font-size: 14px;
}

.legal-footer {
  min-height: 130px;
}

@media (max-width: 1050px) {
  .capabilities {
    grid-template-columns: repeat(2, 1fr);
  }

  .security-section,
  .faq-section {
    gap: 52px;
  }
}

/* Phase 6: was max-width:820px. Boundary testing found the full desktop
   nav (wordmark + 5 links + CTA button) wraps onto multiple lines and
   overlaps the hero heading anywhere from 821px up to ~839px -- a dead
   zone just above the old breakpoint, before there's actually room for it.
   860px gives a safety margin past the ~840px point where it reliably fits. */
@media (max-width: 860px) {
  .site-header {
    /* Phase 6: was a fixed height:64px. The legal pages' nav has no
       hamburger collapse (only 2 links, always visible), so on very
       narrow phones the wordmark can wrap to two lines -- min-height lets
       the bar grow to fit that instead of clipping it. No visible effect
       on the marketing header, which stays single-line down to 320px. */
    min-height: 64px;
    padding: 0 20px;
    background: rgba(14, 21, 19, 0.96);
  }

  /* Phase 7: catastrophic-width check (320px) found the legal pages' nav
     ("Impressum"/"Datenschutz", always visible -- no hamburger collapse)
     had no room left after the wordmark and clipped off the right edge.
     Letting the header wrap (it already has min-height to grow into) is
     the same fix pattern as the wordmark-wrap case above, just for the
     nav row instead of the wordmark text. */
  .legal-header {
    flex-wrap: wrap;
  }

  .legal-header .legal-nav {
    display: flex;
    position: static;
    flex-direction: row;
    /* Phase 6: .site-nav sets gap:0 for the mobile dropdown menu (each
       link is a full-width row there instead); this override restores a
       real gap for the legal nav's always-visible horizontal 2-link row,
       which was rendering "Impressum" and "Datenschutz" with zero space
       between them. */
    gap: 20px;
    width: auto;
    padding: 0;
    background: transparent;
  }

  .legal-main {
    padding-top: 108px;
  }

  .menu-toggle {
    display: flex;
  }

  .header-end {
    gap: 12px;
  }

  /* Icon-only next to the hamburger at this width -- the label and the
     nav links it would otherwise compete with both fit fine above 860px. */
  .profile-button {
    padding: 8px;
  }

  .profile-button span {
    display: none;
  }

  /* Logging out from here would be one more element crammed next to the
     icon-only profile button and the hamburger at this width. The colored
     profile button still reaches konto.html either way, which always has
     its own working logout -- so this one hides rather than shrinks. */
  .logout-button {
    display: none;
  }

  .site-nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 20px;
    border-top: 1px solid #2f3a36;
    background: #0e1513;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    padding: 12px 0;
  }

  .site-nav .nav-cta {
    justify-content: center;
    margin-top: 8px;
  }

  .hero {
    min-height: 700px;
    height: 84svh;
    max-height: 820px;
    background-position: 38% center;
  }

  .hero-shade {
    background: rgba(4, 12, 9, 0.58);
  }

  .hero-inner {
    width: calc(100% - 40px);
  }

  .hero h1 {
    font-size: 58px;
  }

  .hero-lead {
    font-size: 19px;
  }

  .hero-facts {
    gap: 20px;
  }

  .hero-facts dd {
    max-width: 105px;
  }

  .section,
  .hosting-explainer,
  .security-section,
  .early-access {
    padding: 82px 24px;
  }

  .section-heading h2,
  .security-section h2,
  .early-access h2 {
    font-size: 38px;
  }

  .capabilities,
  .price-panel {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-card:last-of-type {
    grid-column: 1 / 3;
  }


  .security-section,
  .faq-section {
    grid-template-columns: 1fr;
  }

  .host-choice {
    grid-template-columns: 1fr;
  }

  .cloud-row {
    grid-template-columns: 1fr 140px;
  }

  .cloud-row em {
    grid-column: 1 / 3;
    padding-bottom: 18px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 42px 24px;
  }

  .site-footer > p,
  .site-footer .legal-note {
    grid-column: 1;
    justify-self: start;
  }

  .footer-sitemap,
  .footer-links {
    grid-column: 1;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .status-line {
    display: none;
  }

  /* Phase 3A: the longer two-line headline pushed hero-inner's vertically
     centered content up behind the fixed 64px header at this breakpoint
     (centering means added content height shifts the top edge up, not just
     the bottom edge down). Top-anchoring with explicit clearance is
     deterministic regardless of future copy length, unlike re-tuning a
     centered height/svh value against a growing content block. */
  .hero {
    min-height: 740px;
    height: auto;
    align-items: flex-start;
    padding-bottom: 32px;
    background-position: 43% center;
  }

  .hero-inner {
    margin-top: 96px;
  }

  /* The headline joins "Minecraft-Welt" with a non-breaking hyphen
     (U+2011), so the word never splits; the size scales with the width so
     that unbreakable word (8.8em wide) still fits down to 320px. */
  .hero h1 {
    font-size: clamp(28px, calc(11.2vw - 5px), 40px);
  }

  .hero-lead {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.45;
  }

  .hero-cta-note {
    font-size: 12px;
  }

  .hero-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    font-size: 12px;
  }

  .hero-setup span {
    margin: 0 2px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
  }

  .hero-facts dt {
    font-size: 15px;
  }

  .hero-facts dd {
    /* Phase 6: was 11px -- below the general ~12px legibility floor for
       mobile body copy. Bumped 1px; the grid already wraps this text
       across two lines at narrow widths, so there's no overflow risk. */
    font-size: 12px;
  }

  .hero-next {
    display: none;
  }

  .steps li {
    grid-template-columns: 48px 1fr;
    padding: 22px 0;
  }

  /* Phase 4 originally cropped this screenshot to its top-left corner below
     560px (sidebar + world list only) to keep on-screen text legible --
     found in a later review to hide the right-hand status/detail panel
     entirely (join address, Start/Stop/Sync, live stats), the most
     demonstrative part of the app. Reverted to the base rule's plain
     width:100%/height:auto scaling above: the full window stays visible at
     every width, at the cost of small text on narrow phones -- a deliberate
     trade-off, not an oversight. */

  .capabilities,
  .price-panel {
    grid-template-columns: 1fr;
  }

  .price-card:last-of-type {
    grid-column: 1;
  }


  .cloud-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }

  .cloud-row em {
    grid-column: 1;
    padding: 0;
  }

  .release-status {
    width: 100%;
  }

  .pilot-actions .button {
    width: 100%;
  }

  .pilot-dialog {
    padding: 22px;
  }

  .pilot-form-actions .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* Games section: what is supported, what is new, what is planned. Its width
   comes from .section's padding like every other section: a max-width here
   as well took that padding off 1180px and squeezed the content to nothing on
   screens wider than about 2360px (WEB-GAMES-001). */

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(16, 21, 20, 0.03);
}

.game-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--dark-2);
}

.game-card.is-planned img {
  filter: grayscale(0.85) brightness(0.9);
}

.game-body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.game-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.game-body p {
  margin: 0;
  color: var(--ink-soft);
}

.game-facts {
  margin: var(--space-1) 0 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 0.93rem;
}

.game-facts li + li {
  margin-top: 4px;
}

.game-status {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-accent-wash);
  color: var(--green-600);
  font-size: 0.8rem;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.game-status.is-new {
  background: var(--signal-cloud-wash);
  color: #2e5fc2;
}

.game-status.is-planned {
  background: var(--ground);
  color: var(--muted);
}


.games-note {
  max-width: 78ch;
  margin: var(--space-4) auto 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}


/* ===== Landing page rework (WEB-REDESIGN-002): hero, drawn app window, pricing notice ===== */

/* ---------- hero ---------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--dark);
  padding: 132px 0 88px;
}
.lp-hero-inner {
  position: relative;
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.lp-hero h1 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 0.98;
  font-weight: var(--weight-bold);
}
.lp-hero .hero-lead { font-size: 20px; max-width: 560px; }
.lp-games-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.lp-games-line li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: var(--weight-medium);
}
.lp-games-line img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lp-games-line small { color: #baf4d5; font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- hero: drawn app window ---------- */
.lp-app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}
.lp-app-side { background: var(--dark-2); color: #fff; padding: 14px; display: grid; gap: 8px; align-content: start; }
.lp-app-side b { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb3aa; margin: 2px 0 4px; }
.lp-srv {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.lp-srv img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.lp-srv strong { display: block; font-size: 13px; line-height: 1.2; }
.lp-srv span { font-size: 11px; color: #9fb3aa; }
.lp-srv.is-on { background: rgba(37, 185, 111, 0.16); border-color: rgba(37, 185, 111, 0.55); }
.lp-srv.is-on span { color: #7ff0b4; }
.lp-app-main { padding: 20px; display: grid; gap: 14px; align-content: start; }
.lp-app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-app-head small { display: block; color: var(--muted); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.lp-app-head h3 { margin: 2px 0 0; font-size: 22px; }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--brand-accent-wash); color: var(--green-600); font-weight: var(--weight-bold); font-size: 12px; }
.lp-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.lp-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.lp-card label { display: block; font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.lp-addr { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; background: var(--ground); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 13px; overflow-wrap: anywhere; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lp-actions span { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-weight: var(--weight-medium); font-size: 13px; background: var(--paper); }
.lp-actions .go { background: var(--green-600); border-color: var(--green-600); color: #fff; font-weight: var(--weight-bold); }
.lp-people { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.lp-avatars { display: flex; }
.lp-avatars i { width: 28px; height: 28px; margin-left: -6px; border: 2px solid var(--ground); border-radius: 50%; display: grid; place-items: center; font: normal 700 12px/1 inherit; color: #fff; }
.lp-avatars i:first-child { margin-left: 0; }

/* ---------- pricing notice ---------- */
.lp-notice {
  max-width: 860px;
  margin: var(--space-4) auto 0;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid #ffd7a8;
  border-left: 6px solid #f2994a;
  background: #fff8ee;
  color: #4a2f10;
  font-size: 16px;
  line-height: 1.5;
}
.lp-notice strong { display: block; font-size: 18px; margin-bottom: 2px; }

@media (max-width: 980px) {
  .lp-hero { padding: 108px 0 56px; }
}
@media (max-width: 640px) {
  .lp-app { grid-template-columns: minmax(0, 1fr); }
  .lp-app-side { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .lp-app-side b { grid-column: 1 / -1; }
}

.lp-caption { margin: 12px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; }

/* ===== WEB-REVIEW-001: a tighter landing page, the pricing page and the shared header ===== */

/* First screen (round 2): positioning headline, what the app does, three
   points, one call to action and a real screenshot of the app. The hero used
   to keep its two columns on a phone (nothing collapsed .lp-hero-inner). */
.lp-hero { padding: 112px 0 56px; }
.lp-hero-inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 32px 56px; }
.lp-hero h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.06; }
.lp-hero .hero-lead { margin-top: 16px; font-size: 18px; font-weight: var(--weight-regular, 400); color: rgba(255, 255, 255, 0.86); }
.lp-hero .hero-actions { align-items: center; gap: 12px 20px; margin-top: 24px; }

.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.lp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.lp-steps .step-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-accent-wash);
  color: var(--green-dark);
  font-size: 16px;
}
.lp-steps h3 { margin: 6px 0 6px; font-size: 20px; }
.lp-steps p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* What the app does: eight short points and one more real screenshot. */
.feature-section { background: var(--ground); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin: 44px 0 0; padding: 0; list-style: none; }
.feature-grid li { padding-top: 18px; border-top: 1px solid #bfcac5; }
.feature-grid .signal { margin-bottom: 12px; }
.feature-grid h3 { margin: 0; font-size: 18px; }
.feature-grid p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* The difference to rented servers and free online hosts. */
.compare-scroll { margin-top: 36px; overflow-x: auto; }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare-table th,
.compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table thead th { font-size: 14px; color: var(--muted); }
.compare-table tbody th { width: 22%; font-weight: var(--weight-bold); }
.compare-table .is-us { background: var(--brand-accent-wash); color: var(--ink); font-weight: var(--weight-medium); }
.compare-table thead .is-us { color: var(--green-dark); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.compare-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); width: min(1240px, calc(100% - 40px)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  /* The beta status stays visible here, unlike on the old hero. */
  .lp-hero { padding-top: 96px; }
  .lp-hero .status-line { display: inline-flex; margin-bottom: 14px; font-size: 13px; }
  .lp-hero .hero-lead { font-size: 17px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .feature-grid li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding-top: 14px; }
  .feature-grid .signal { grid-row: span 2; margin: 0; }
}

/* Round 2: the game cards and the animation take less height. */
.games-grid .game-card > img { height: 150px; object-fit: cover; }
.hosting-explainer .sync-story { max-width: 920px; margin-left: auto; margin-right: auto; }

/* Shorter vertical rhythm for the remaining sections. */
.section,
.hosting-explainer { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 860px) {
  .section,
  .hosting-explainer { padding-top: 64px; padding-bottom: 64px; }
}

/* Games (WEB-SHOTS-001): a real app picture per game, switched by buttons,
   beside the three cards; the cards carry the game's picture as an icon. */
.games-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; margin-top: var(--space-4); }
.games-layout .games-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 0; }
.games-layout .game-body { gap: 6px; padding: 18px 20px; }
.games-layout .game-body > p { margin: 0; font-size: 15px; line-height: 1.5; }
.games-layout .game-facts { margin: 0; }
.game-head h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.game-head h3 img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.games-shot { margin: 0; }
.games-shot-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.games-shot-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.games-shot-tabs button:hover { border-color: var(--green-dark); }
.games-shot-tabs button[aria-pressed="true"] { border-color: var(--green-dark); background: var(--brand-accent-wash); color: var(--green-dark); }
.games-shot-tabs img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.games-shot-panel img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(9, 20, 16, 0.14); }
.games-shot-panel p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .games-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .games-shot-tabs { flex-wrap: nowrap; gap: 6px; }
  .games-shot-tabs button { flex: 1 1 auto; justify-content: center; padding: 6px 8px; font-size: 13px; }
  .games-shot-tabs img { display: none; }
}

/* Games: the wish list as one row of chips instead of twelve picture cards. */
.games-wishlist { margin-top: 40px; }
.games-wishlist h3 { margin: 0; font-size: 1.15rem; }
.games-wishlist p { max-width: 78ch; margin: 6px 0 0; color: var(--muted); }
.wish-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.wish-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--paper);
  font-size: 14px;
  font-weight: var(--weight-medium);
}
.wish-chips img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; filter: grayscale(0.4); }
.wish-chips small { color: var(--muted); font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; }

/* The app: video and the four points side by side. */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  margin-top: 44px;
}
.product-layout .product-shot { margin: 0; }
.product-layout .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
.product-layout .signal { margin-bottom: 12px; }
.product-layout .capabilities h3 { font-size: 18px; }
.product-layout .capabilities p { font-size: 15px; }
@media (max-width: 980px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .product-layout .capabilities { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing teaser: one line on the landing page, the rest on preise.html. */
.price-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 36px max(40px, calc((100% - 1180px) / 2));
  background: var(--brand-accent-wash);
}
.price-teaser h2 { margin: 0; font-size: 26px; }
.price-teaser p { margin: 4px 0 0; color: var(--ink-soft); }
@media (max-width: 700px) {
  .price-teaser { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
}

/* Early access: text and buttons beside the request form. */
.early-access {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
  padding: 88px max(40px, calc((100% - 1180px) / 2));
  text-align: left;
}
.early-access-main > p { margin: 20px 0 0; color: var(--muted); font-size: 18px; }
.early-access .pilot-actions { justify-content: flex-start; }
.early-access .release-status { margin-left: 0; }
.early-access .beta-request { max-width: none; margin: 0; }
@media (max-width: 900px) {
  .early-access { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 72px 20px; }
}

/* The pricing page (preise.html). */
.pricing-page-head { padding: 136px max(40px, calc((100% - 1180px) / 2)) 0; }
.pricing-page-head h1 { margin: 0; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; }
.pricing-page-head > p:last-child { max-width: 760px; margin: 16px 0 0; color: var(--muted); font-size: 18px; }
.pricing-page .pricing-section { padding-top: 40px; }
.pricing-page .lp-notice { margin: 0 0 28px; }
.credit-explainer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0 0;
}
.credit-explainer div { padding-top: 18px; border-top: 1px solid var(--line); }
.credit-explainer dt { font-weight: var(--weight-bold); }
.credit-explainer dd { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) {
  .pricing-page-head { padding: 112px 20px 0; }
  .credit-explainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .credit-explainer { grid-template-columns: minmax(0, 1fr); }
}

/* Shared header on the light pages: the same navigation as the landing
   page, on the dark bar the legal pages already had. */
/* ---------- the shared header (tools/website_frame.py), round 2 ----------
   One bar on every page: solid, 72 px, the same padding, the navigation
   left-aligned after the wordmark so it never moves when the right-hand side
   (language switch, account) differs between pages. The active page is
   marked like a tab. */
.site-header {
  justify-content: flex-start;
  gap: 28px;
  background: rgba(14, 21, 19, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  view-transition-name: site-header;
}
.site-header .site-nav { flex: 1; align-self: stretch; gap: 4px; }
.site-header .site-nav > a:not(.nav-cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.78);
}
.site-header .site-nav > a:not(.nav-cta):hover { color: #fff; }
.site-header .site-nav > a[aria-current="page"] { color: #fff; }
.site-header .site-nav > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--green);
}
.site-header .site-nav .nav-cta { margin-left: auto; align-self: center; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.profile-button[aria-current="page"] { border-color: var(--green); }
.legal-header .lang-switch { margin-left: 0; }
@media (max-width: 1100px) {
  .site-header { gap: 16px; }
  .site-header .site-nav > a:not(.nav-cta) { padding: 0 8px; }
  .profile-button span { display: none; }
  .profile-button { padding: 8px; }
}
@media (max-width: 860px) {
  .header-actions { margin-left: auto; }
  .site-header .site-nav { align-self: auto; }
  .site-header .site-nav > a:not(.nav-cta) { height: auto; padding: 12px 0; }
  .site-header .site-nav > a[aria-current="page"] { color: #89edbc; }
  .site-header .site-nav > a[aria-current="page"]::after { display: none; }
  .site-header .site-nav .nav-cta { margin-left: 0; }
  .site-header { height: 64px; }
}
@media (max-width: 440px) {
  /* One row on a phone, on every page: the wordmark no longer wraps. */
  .site-header { gap: 12px; }
  .wordmark { font-size: 17px; white-space: nowrap; }
  .header-actions { gap: 8px; }
}

/* Page changes feel like switching tabs: a short cross-fade of the content
   while the header stays put (cross-document view transitions; ignored by
   browsers without support and switched off for reduced motion). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ===== Guides (WEB-GUIDES-001): /anleitungen/ ===== */
.guide-main {
  width: min(980px, calc(100% - 40px));
  min-height: calc(100vh - 190px);
  margin: 0 auto;
  padding: 120px 0 100px;
}

.guide-crumbs {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}

.guide-crumbs a {
  color: var(--green-600);
}

.guide-title h1 {
  margin: 4px 0 14px;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.1;
  overflow-wrap: break-word;
}

.guide-title > p:last-child {
  max-width: 720px;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.5;
}

.guide-note {
  margin: 26px 0 8px;
  padding: 14px 18px;
  border: 1px solid #b9e8d0;
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius-md);
  background: var(--brand-accent-wash);
  color: var(--ink-soft);
  font-size: 15px;
}

.guide-before {
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.guide-before h2,
.guide-trouble h2,
.guide-more h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.guide-before ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
}

.guide-before li + li {
  margin-top: 8px;
}

.guide-steps {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.guide-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.guide-step .step-number {
  font-size: 38px;
  line-height: 1;
  color: var(--green-600);
  font-weight: var(--weight-bold);
}

.guide-step h3 {
  margin: 4px 0 12px;
  font-size: 24px;
  line-height: 1.2;
}

.guide-step p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.guide-step code,
.guide-trouble code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: #e6ece9;
  font-size: 0.92em;
}

.guide-callout {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  border-left-width: 5px;
  background: var(--paper);
  font-size: 16px;
}

.guide-callout-tip { border-left-color: var(--green-500); }
.guide-callout-info { border-left-color: var(--blue-500); }
.guide-callout-warn { border-color: #ffd7a8; border-left-color: #f2994a; background: #fff8ee; color: #4a2f10; }

.guide-figure {
  margin: 20px 0 0;
}

.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-window);
}

.guide-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.guide-trouble {
  margin-top: 20px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.guide-trouble details {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.guide-trouble summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: 17px;
}

.guide-trouble details p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.guide-more {
  margin-top: 44px;
}

.guide-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-list a {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.guide-list a:hover {
  border-color: var(--green-500);
}

.guide-list a span {
  color: var(--muted);
  font-size: 15px;
}

.guide-soon {
  color: var(--muted);
  font-size: 15px;
}

.guide-version {
  margin-top: 30px;
  color: var(--muted);
  font-size: 14px;
}

.guide-games {
  display: grid;
  gap: 22px;
  margin-top: 30px;
}

.guide-game {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.guide-game img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.guide-game-plain { grid-template-columns: minmax(0, 1fr); }

.guide-game h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.guide-game p {
  margin: 0 0 14px;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .guide-main { padding-top: 104px; }
  .guide-step { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .guide-step .step-number { font-size: 28px; }
  .guide-game { grid-template-columns: minmax(0, 1fr); }
}

/* ===== WEB-ROUND3: the USP headline, the drawn app panel back in the hero, the demo video beside the steps, one
   beta path ===== */

/* Hero: headline, the user's sentence, a short benefit strip, the games, two paths. */
.lp-hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.lp-hero .lp-hero-copy h1 { font-size: clamp(34px, 3.2vw, 46px); }
@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); }
}
.lp-avatars i { font-style: normal; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; }
.hero-benefits li { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: var(--weight-bold); }
.hero-benefits .icon { width: 20px; height: 20px; color: #62e89f; }
.lp-hero-copy .lp-games-line { margin-top: 18px; }
.lp-hero .hero-actions { margin-top: 26px; }
.lp-app-figure { margin: 0; }
.lp-hero .lp-app { grid-template-columns: 196px minmax(0, 1fr); }
@media (max-width: 640px) {
  .lp-hero .lp-app { grid-template-columns: minmax(0, 1fr); }
}
.lp-hero .lp-caption { color: rgba(255, 255, 255, 0.78); }

/* Demo video beside the three steps (stacked boxes); one column on narrow screens. */
.lp-flow { background: var(--paper); }
.lp-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr);
  gap: 36px;
  align-items: start;
  margin-top: 36px;
}
.lp-step-boxes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lp-step-boxes li {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ground);
}
.lp-step-boxes h3 { margin-top: 4px; font-size: 19px; }
.lp-step-boxes p { font-size: 15px; }
.flow-video { margin: 0; }
.flow-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 800;
  border-radius: var(--radius-lg);
  background: var(--dark);
  box-shadow: 0 24px 60px rgba(9, 20, 16, 0.18);
}
.flow-video figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
/* The play/pause toggle (WEB-POLISH-001) replaces the native controls, which
   covered the video's timeline. It sits in the top-right corner, which the
   stage keeps free (tools/demo_video/handover.html): the group bar's heads and
   the counter are on the left and in the middle. 40 px on a desktop, 28 px on
   a phone (still above the 24 px minimum target size), so it stays inside that
   corner at the phone's 0.27x scale too. */
.flow-video-frame { position: relative; }
.video-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(14, 21, 19, 0.78);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.video-toggle[hidden] { display: none; }
.video-toggle:hover { background: rgba(14, 21, 19, 0.95); }
.video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(14, 21, 19, 0.9); }
.video-toggle .icon { width: 18px; height: 18px; }
.video-toggle[data-playing="true"] .video-toggle-play,
.video-toggle:not([data-playing="true"]) .video-toggle-pause { display: none; }
@media (max-width: 600px) {
  .video-toggle { top: 4px; right: 4px; width: 28px; height: 28px; }
  .video-toggle .icon { width: 14px; height: 14px; }
}
@media (max-width: 980px) {
  .lp-flow-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Four core features in a row, the rest behind "Weitere Funktionen". */
.more-features { margin-top: 32px; border-top: 1px solid #bfcac5; border-bottom: 1px solid #bfcac5; }
.more-features summary {
  position: relative;
  padding: 18px 42px 18px 0;
  cursor: pointer;
  font-weight: var(--weight-bold);
  list-style: none;
}
.more-features summary::-webkit-details-marker { display: none; }
.more-features[open] .faq-chevron { transform: rotate(180deg); }
.more-features ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 0 0 22px; padding: 0; list-style: none; }
.more-features li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.more-features li .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--green-dark); }
.more-features strong { display: block; color: var(--ink); }
@media (max-width: 860px) {
  .more-features ul { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing teaser: the second line says what happens after the beta. */
.price-teaser p + p { margin-top: 4px; }
.price-teaser .button { flex: none; white-space: nowrap; }

/* Beta access: the request form (primary) and the code path; the installer only for those already approved. */
.access-paths { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.access-paths li { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.access-paths h3 { margin: 0; font-size: 18px; }
.access-paths p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.access-paths .button { margin-top: 14px; }
.installer-note { margin-top: 26px; font-size: 15px; }
.installer-note > p { margin: 0; color: var(--ink-soft); }
.installer-note .release-status { margin: 14px 0 0; }
.installer-note .pilot-actions-note { margin-top: 10px; }
.installer-note a { color: var(--ink); }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-button:disabled { color: var(--muted); cursor: not-allowed; }
.early-access .games-wishlist { grid-column: 1 / -1; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line); }

/* Print and PDF: no skip link or fixed header over the content, dark text on paper (the dark hero background is not
   printed by default, which left its white text unreadable), no video or dialogs. */
@media print {
  .skip-link,
  .menu-toggle,
  .header-actions,
  .site-nav,
  .flow-video video,
  .video-toggle,
  .host-choice,
  .pilot-dialog,
  .beta-request-form,
  .installer-note .release-status { display: none !important; }
  .button { border: 1px solid #000 !important; }
  .site-header { position: static; height: auto; padding: 0 0 12px; background: none !important; border-bottom: 1px solid #999; }
  body,
  body * { color: #000 !important; background-color: transparent !important; text-shadow: none !important; box-shadow: none !important; }
  .lp-app,
  .lp-card,
  .ss-step { border: 1px solid #999; }
  .lp-hero { padding: 24px 0; }
  .section,
  .hosting-explainer { padding-top: 24px; padding-bottom: 24px; }
}