/* Palette + metrics mirror the desktop app (CalliforniaApp — resources/qml/Theme.qml):
   IBM Plex Sans, warm neutrals, tight 6–12px radii. Both app themes are
   available here too — dark is the default, [data-theme="light"] mirrors the
   app's light mode. */
:root {
  --canvas: #1C1B19;
  --surface: #2A2825;
  --elevated: #32302C;
  --border: #3A3834;
  --text: #F5F4F1;
  --muted: #A8A49C;
  --accent: #2778F6;
  --accent-soft: rgba(39, 120, 246, 0.2);
  --danger: #E22C2C;
  --tile-bg: #2A2825;
  --tile-border: rgba(255, 255, 255, 0.1);
  --tile-avatar: #4A4640;
  --control-bg: rgba(26, 25, 23, 0.72);
  --control-border: rgba(255, 255, 255, 0.12);
  --header-bg: rgba(28, 27, 25, 0.72);
  --glow-opacity: 0.45;
  --glow-opacity-2: 0.22;
  --shadow-btn: rgba(39, 120, 246, 0.3);
  --shadow-btn-hover: rgba(39, 120, 246, 0.4);
  --shadow-window: rgba(0, 0, 0, 0.5);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-xl: 12px;
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
}

:root[data-theme="light"] {
  --canvas: #F5F4F1;
  --surface: #EDECE8;
  --elevated: #FFFFFF;
  --border: #E0DED8;
  --text: #1A1917;
  --muted: #6B6860;
  --accent: #1577E8;
  --accent-soft: rgba(21, 119, 232, 0.12);
  --tile-bg: #E8E6E1;
  --tile-border: #D8D5CE;
  --tile-avatar: #DDD9D2;
  --control-bg: rgba(255, 255, 255, 0.92);
  --control-border: #E0DED8;
  --header-bg: rgba(245, 244, 241, 0.78);
  --glow-opacity: 0.18;
  --glow-opacity-2: 0.08;
  --shadow-btn: rgba(21, 119, 232, 0.25);
  --shadow-btn-hover: rgba(21, 119, 232, 0.35);
  --shadow-window: rgba(26, 25, 23, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.25s ease, color 0.25s ease;
}

.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow { max-width: 720px; }

/* Soft blurred background glows — a light landing-page touch over the flat app canvas. */
.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: var(--glow-opacity);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.bg-glow-1 {
  width: 560px;
  height: 560px;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}
.bg-glow-2 {
  width: 420px;
  height: 420px;
  bottom: -200px;
  right: -140px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: var(--glow-opacity-2);
}

/* ---------- Header ---------- */

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

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.brand-logo { border-radius: var(--radius-sm); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Theme toggle — same idea as the app's ThemeToggle. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--text); background: var(--surface); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Language switch — same shell as the theme toggle, wider for two letters.
   It names the language it takes you to, so the label is always the other
   one. Hidden without JavaScript, since nothing would happen on a click. */
.lang-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: 500 12px/1 var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.js .lang-toggle { display: inline-flex; }
.lang-toggle:hover { color: var(--text); background: var(--surface); }

main { position: relative; z-index: 1; flex: 1; }

/* ---------- Hero ---------- */

.hero {
  padding: 88px 24px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  border-radius: var(--radius-xl);
  margin-bottom: 26px;
  filter: drop-shadow(0 10px 34px rgba(39, 120, 246, 0.32));
}

.hero h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.12;
  margin: 0 0 16px;
  max-width: 680px;
}

.hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 500px;
  line-height: 1.55;
  margin: 0 0 38px;
}

.download-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

/* Primary button, mirrors the app's PrimaryButton (accent, 8px radius,
   brightness hover) — scaled up a touch for a hero call-to-action. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px var(--shadow-btn-hover);
}
.btn-primary:active { transform: translateY(0); }

.download-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}

.os-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.os-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--muted);
  background: none;
  font-family: inherit;
}

/* Windows/Linux pills are real <button>s so a visitor can override the
   auto-detected platform; macOS stays a plain <span> (nothing to switch
   to yet), so this only styles the interactive ones. */
button.os-pill {
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
button.os-pill:hover { color: var(--text); border-color: var(--accent); }
button.os-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.os-pill--active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.soon-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--surface);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Same shape as .soon-badge but accent-colored: Linux is real and
   downloadable, just newer than the Windows build. */
.beta-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Linux-only .deb/.rpm choice, shown under the download button. Toggled via
   the `hidden` attribute (main.js), not a class -- but `display: flex` below
   has the same specificity as the browser's default `[hidden] { display:
   none }` rule, and author styles win ties, so the plain .pkg-row rule alone
   would keep it visible even while hidden. The [hidden] rule needs the higher
   specificity to actually win. */
.pkg-row {
  display: flex;
  gap: 8px;
}
.pkg-row[hidden] {
  display: none;
}

.pkg-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--muted);
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pkg-pill:hover { color: var(--text); border-color: var(--accent); }
.pkg-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pkg-pill--active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pkg-pill-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}

/* Mobile fallback — no installer to offer, so hide the download UI
   entirely and show a plain "coming soon" notice instead. */
.cta-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mobile-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}

.mobile-text {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 320px;
  line-height: 1.55;
}

/* ---------- App window mockup ---------- */

.app-window {
  width: 100%;
  max-width: 780px;
  margin: 48px auto 0;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px -24px var(--shadow-window);
  overflow: hidden;
  text-align: left;
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* The real app has no custom in-window chrome — just the OS titlebar with
   the "Callifornia" title. This mirrors that: a plain brand strip, nothing invented. */
.app-titlebar {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.app-titlebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.app-titlebar-brand img { border-radius: 4px; }

.app-body {
  position: relative;
  /* Bottom padding reserves room for the absolutely-positioned .control-bar
     (56px tall + 14px offset from the bottom edge + a breathing margin) so it
     never overlaps the last row of tiles. */
  padding: 14px 14px 86px;
}

/* Top-right overlay: call timer + settings + invite — matches the real
   MeetingScreen header row exactly (top-right, muted mono timer, two icon buttons). */
.call-topbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.call-timer {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.call-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--muted);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* Clears .call-topbar (top:12px + ~26px tall) so it never sits over the
     first row of tiles. */
  margin-top: 36px;
}

.tile {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Only a screen-sharer's tile gets an accent border in the real app — there is
   no "speaking" indicator. Everyone else gets the same subtle tile border. */
.tile--sharing { border-color: var(--accent); border-width: 2px; }

.tile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tile-avatar);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
}

/* Plain text over the tile, no background chip — matches ParticipantTile.qml,
   which draws the name directly with no pill behind it. A muted participant
   gets a "muted" text label next to their name, not a crossed-mic icon. */
.tile-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #F5F4F1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.tile-name .muted-label {
  font-size: 10px;
  font-weight: 400;
  color: #E89B9B;
  text-shadow: none;
}

.control-bar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

.control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  color: var(--text);
  background: transparent;
}
.control-btn--leave {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--danger);
  color: #fff;
}

/* ---------- Sections ---------- */

.section {
  padding: 96px 24px;
}

.section + .section { padding-top: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.section-sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 56px;
  max-width: 520px;
}

.section-head--center { text-align: center; }
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Feature rows (editorial, no cards) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 44px 0;
}
.feature + .feature { border-top: 1px solid var(--border); }
.feature:nth-child(even) .feature-visual { order: -1; }

.feature-copy h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 0 10px;
}

.feature-copy p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.feature-visual { display: flex; justify-content: center; }

/* Mini-mockup panels inside feature rows. */
.panel {
  width: 100%;
  max-width: 360px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.panel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-row + .panel-row { margin-top: 12px; }

.panel-icon {
  flex: 0 0 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-title { font-size: 14px; font-weight: 600; margin: 0; }
.panel-note { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  margin-top: 14px;
}
.progress-fill {
  height: 100%;
  width: 72%;
  border-radius: inherit;
  background: var(--accent);
}

/* "Join a call" mockup — matches HomeScreen.qml's join step exactly:
   centered title/subtitle above the card, a Back row, then a Call ID
   field + Join button pinned to the same baseline. */
.join-mockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.join-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text);
}

.join-sub {
  margin: -10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.join-mockup .panel {
  max-width: none;
  text-align: left;
}

.join-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}

.join-field-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.join-field-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.join-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.join-field {
  border: 1px solid var(--border);
  background: var(--elevated);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.join-field span {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

.join-field-row .btn-mini {
  height: 39px;
  padding: 0 18px;
}

.panel .btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-md);
  padding: 8px 14px;
}
.panel .btn-mini--ghost {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}

.friend-avatar {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tile-avatar);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.step-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}

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

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-top: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  font-size: 16px;
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding: 0 4px 22px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 620px;
}
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Bottom CTA ---------- */

.cta-final {
  text-align: center;
  padding: 104px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-final h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 12px;
}

.cta-final .section-sub { margin-bottom: 36px; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 24px;
  font-size: 13px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 22px;
}

.footer-row a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-row a:hover { color: var(--text); }

/* ---------- Subpages (changelog / privacy) ---------- */

.page {
  padding: 72px 24px 104px;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 10px;
}

.page-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 56px;
  line-height: 1.6;
}

.release {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
}

.release-meta { position: sticky; top: 90px; align-self: start; }

.release-version {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px;
}

.release-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.release-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin-top: 10px;
}

.release-body h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.2px;
}

.release-body ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}

/* A closing remark under a release: what it requires, or why it never shipped. */
.release-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  opacity: 0.85;
}

.prose h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 40px 0 12px;
}

.prose p, .prose li {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.prose ul { padding-left: 20px; }

.prose strong { color: var(--text); font-weight: 600; }

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

/* ---------- Scroll reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-reveal].revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feature:nth-child(even) .feature-visual { order: 0; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .release { grid-template-columns: 1fr; gap: 12px; }
  .release-meta { position: static; }
}

@media (max-width: 720px) {
  .hero { padding: 56px 20px 48px; }
  .hero h1 { font-size: 34px; letter-spacing: -1px; }
  .hero-sub { font-size: 16px; }
  .section { padding: 72px 20px; }
  .section-title { font-size: 26px; }
  .cta-final h2 { font-size: 28px; }
  .site-nav { display: none; }

  .cta-desktop { display: none; }
  .cta-mobile { display: flex; }
}

/* --- Join page (join/index.html) -------------------------------------------
   The landing spot for a shared callifornia://join/<id> invite: hands off to the
   desktop app. No install fallback here on purpose -- the home page already
   owns that job, and duplicating it doubled the maintenance surface (the
   version/size line collided with main.js's home-page-only element id) for a
   case (no Callifornia installed) that is rare for someone who was just sent a link. */
.join-page { padding-bottom: 64px; }

.join-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* No margin-top: .hero-sub above already carries the standard 38px section
     gap (same rhythm as .download-block on the home page). */
}