/* ==========================================================================
   IzzyIRC — design system
   Tokens lifted from the app's own liquid-glass UI redesign (UI_Design/)
   and the brand guidelines (marketing/appstore-and-brand.md) so the site
   and the app read as one product.
   ========================================================================== */

:root {
  --blue: #4f7cff;
  --violet: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, var(--blue), var(--violet));
  --accent-shadow: 0 4px 14px rgba(79, 124, 255, 0.35);

  --green: #22c55e;
  --yellow: #ffc700;
  --pink: #ff1f7a;

  --text-primary: #1c2333;
  --text-secondary: #6b7280;
  --text-tertiary: #9aa1ad;

  --bg-base: #eef0f5;
  --bg-wash:
    radial-gradient(1100px 700px at 12% -8%, #eef4ff 0%, transparent 60%),
    radial-gradient(1000px 640px at 92% 6%, #f6eeff 0%, transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, #eafff6 0%, transparent 60%),
    var(--bg-base);

  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-fill-strong: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 8px 24px rgba(31, 41, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --chip-fill: rgba(28, 35, 51, 0.055);
  --card-border: rgba(28, 35, 51, 0.08);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --container: 1120px;
  --container-narrow: 760px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f2f3f7;
    --text-secondary: #a8adba;
    --text-tertiary: #6b7280;

    --bg-base: #12141c;
    --bg-wash:
      radial-gradient(1100px 700px at 12% -8%, rgba(79, 124, 255, 0.16) 0%, transparent 60%),
      radial-gradient(1000px 640px at 92% 6%, rgba(139, 92, 246, 0.16) 0%, transparent 55%),
      radial-gradient(1200px 800px at 50% 120%, rgba(16, 185, 129, 0.1) 0%, transparent 60%),
      var(--bg-base);

    --glass-fill: rgba(255, 255, 255, 0.06);
    --glass-fill-strong: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --chip-fill: rgba(255, 255, 255, 0.07);
    --card-border: rgba(255, 255, 255, 0.1);
  }
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-wash);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--violet); }
::selection { background: rgba(139, 92, 246, 0.25); }
h1, h2, h3, h4 { color: var(--text-primary); letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--text-primary); color: #fff; padding: 10px 16px;
  border-radius: 10px; transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Top stripe ---------- */
.stripe { display: flex; height: 4px; width: 100%; }
.stripe span { flex: 1; }
.stripe span:nth-child(1) { background: var(--green); }
.stripe span:nth-child(2) { background: var(--yellow); }
.stripe span:nth-child(3) { background: var(--pink); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 14px 20px 0;
}
.site-nav {
  width: 100%; max-width: var(--container);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--text-primary);
}
.brand:hover { color: var(--text-primary); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) {
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
}
.nav-links a.active, .nav-links a:not(.btn):hover { color: var(--text-primary); }
.nav-cta { margin-left: 4px; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; padding: 8px; border-radius: 8px;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; background: var(--text-primary);
  border-radius: 2px; margin: 5px 0; transition: transform 0.2s, opacity 0.2s;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; padding: 13px 26px;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--accent-gradient); box-shadow: var(--accent-shadow); }
.btn-primary:hover { color: #fff; }
.btn-secondary { color: var(--text-secondary); background: var(--chip-fill); }
.btn-secondary:hover { color: var(--text-primary); }
.btn-white { color: var(--blue); background: #fff; }
.btn-white:hover { color: var(--violet); }
.btn-small { padding: 9px 18px; font-size: 13px; }
.btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none !important;
}

/* ---------- Layout helpers ---------- */
.section { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 90px; }
.section-narrow { width: 100%; max-width: var(--container-narrow); }
.container { width: 100%; max-width: var(--container); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--chip-fill);
  padding: 7px 14px; border-radius: 999px; display: inline-block;
}
.eyebrow.accent { color: var(--violet); background: transparent; padding: 0; }
.dots { display: flex; gap: 5px; }
.dots span { width: 16px; height: 4px; border-radius: 2px; }
.dots span:nth-child(1) { background: var(--green); }
.dots span:nth-child(2) { background: var(--yellow); }
.dots span:nth-child(3) { background: var(--pink); }

/* ---------- Glass card ---------- */
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* ---------- Reveal-on-scroll ----------
   Content is visible by default — this is progressive enhancement, not a
   gate. JS marks off-screen sections .reveal-pending right before it starts
   observing them, then swaps to .is-visible when they scroll into view. If
   JS never runs (disabled, blocked, a crawler, a full-page screenshot tool
   that doesn't scroll), everything just stays visible with no animation. */
[data-reveal].reveal-pending { opacity: 0; transform: translateY(24px); }
[data-reveal] { transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-pending { opacity: 1; transform: none; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; padding: 64px 20px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.page-hero h1 { font-size: 42px; line-height: 1.12; font-weight: 800; max-width: 760px; }
.page-hero p { font-size: 17px; color: var(--text-secondary); max-width: 600px; }

/* ---------- Big hero (home) ---------- */
.hero {
  position: relative; min-height: 82vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 60px 20px 40px; text-align: center;
  overflow: hidden;
}
.hero-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); }
@keyframes blobDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(36px,-26px) scale(1.05); } }
@keyframes blobDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,30px) scale(1.04); } }
@keyframes blobDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,18px) scale(1.06); } }
.hero-blob-1 { top: 6%; left: 6%; width: 520px; height: 520px; background: rgba(79,124,255,0.22); animation: blobDrift1 16s ease-in-out infinite; }
.hero-blob-2 { bottom: 2%; right: 4%; width: 460px; height: 460px; background: rgba(139,92,246,0.2); animation: blobDrift2 19s ease-in-out infinite; }
.hero-blob-3 { bottom: 12%; left: 38%; width: 360px; height: 360px; background: rgba(16,185,129,0.14); animation: blobDrift3 14s ease-in-out infinite; }
.hero-blob-4 { top: 18%; right: 16%; width: 220px; height: 220px; background: rgba(255,199,0,0.16); animation: blobDrift2 17s ease-in-out infinite; }
.hero-blob-5 { bottom: 22%; left: 10%; width: 200px; height: 200px; background: rgba(255,31,122,0.14); animation: blobDrift1 15s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-blob { animation: none !important; } }

.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 760px; }
.hero-inner img.logo { width: 200px; height: auto; margin: 22px 0 8px; }
.hero-inner h1 { font-size: 54px; line-height: 1.06; font-weight: 800; margin: 18px 0; letter-spacing: -0.02em; }
.hero-inner .lede { font-size: 18px; line-height: 1.55; color: var(--text-secondary); max-width: 560px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
/* Spacing when CTAs directly follow a callout (e.g. the download page) --
   a real rule instead of an inline style, since the site's CSP
   (style-src 'self', no unsafe-inline) silently blocks inline styles
   entirely rather than erroring visibly. */
.callout + .hero-ctas { margin-top: 28px; }
.hero-ctas + .support-callout { margin-top: 28px; }

/* Slide-only, never opacity: a screenshot/print/crawler that captures the
   page before this finishes should still see fully-opaque hero text, just
   without the motion (same reasoning as the reveal-on-scroll system above). */
@keyframes fadeUp { from { transform: translateY(18px); } to { transform: translateY(0); } }
.hero-inner > * { animation: fadeUp 0.8s ease both; }
.hero-inner > *:nth-child(2) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.1s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.15s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) { .hero-inner > * { animation: none; } }

/* ---------- Window chrome (screenshot frame) ---------- */
.window-frame {
  /* Matches the native macOS window corner already baked into the
     screenshots themselves (measured off the source PNGs), so the frame's
     clip and the screenshot's own rounded corner line up instead of
     showing two different curves nested inside each other. */
  width: 100%; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--card-border);
  box-shadow: 0 30px 70px rgba(31, 41, 55, 0.16), 0 8px 24px rgba(31, 41, 55, 0.08);
}
.window-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: #eef0f5; border-bottom: 1px solid rgba(28, 35, 51, 0.08);
}
.window-titlebar .dot { width: 11px; height: 11px; border-radius: 50%; }
.window-titlebar .dot.red { background: #ff736a; }
.window-titlebar .dot.yellow { background: #febc2e; }
.window-titlebar .dot.green { background: #19c332; }
.window-titlebar .label { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-right: 44px; }
.window-frame img { width: 100%; height: auto; display: block; }

/* ---------- Feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.feature-card {
  padding: 30px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.25s ease;
}
.feature-card:hover { transform: translateY(-3px); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
  position: relative; background: var(--text-primary); flex-shrink: 0;
}
.feature-icon span {
  position: absolute; top: 8px; width: 9px; height: 36px; transform: skewX(-18deg);
}
.feature-icon span:nth-child(1) { left: 11px; background: var(--green); }
.feature-icon span:nth-child(2) { left: 24px; background: var(--yellow); }
.feature-icon span:nth-child(3) { left: 37px; background: var(--pink); }
.feature-card h3 { font-size: 19px; font-weight: 800; }
.feature-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

.mini-card { background: var(--chip-fill); border-radius: 14px; padding: 18px; }
.mini-card .title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.mini-card .desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- Scripting flow diagram ---------- */
.flow { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.flow-step {
  background: #fff; border: 1px solid var(--card-border); border-radius: 14px;
  padding: 16px 20px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); text-align: center;
}
@media (prefers-color-scheme: dark) { .flow-step { background: rgba(255,255,255,0.08); } }
.flow-step.accent { background: var(--accent-gradient); color: #fff; box-shadow: var(--accent-shadow); border: none; }
.flow-arrow { text-align: center; color: var(--text-tertiary); font-size: 18px; }

/* ---------- Code blocks ---------- */
.code-block {
  position: relative; background: #161a24; border-radius: var(--radius-sm);
  overflow: hidden; text-align: left; box-shadow: 0 8px 24px rgba(31,41,55,0.12);
}
.code-block .code-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: rgba(255,255,255,0.05);
  font-size: 12px; font-weight: 700; color: #9aa1ad; letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.code-block pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #e4e7ee;
}
.code-block code { font-family: inherit; }
.tok-kw { color: #8fb3ff; }
.tok-str { color: #b3f0c0; }
.tok-cmd { color: #ffc700; }
.tok-var { color: #ff9ecb; }
.tok-com { color: #6b7280; font-style: italic; }
.copy-btn {
  background: rgba(255,255,255,0.08); color: #d7dae2; border: none; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; cursor: pointer;
}
.copy-btn:hover { background: rgba(255,255,255,0.16); }

/* ---------- CTA banner ---------- */
.cta-banner {
  width: 100%; max-width: 900px; border-radius: 24px;
  background: var(--accent-gradient); padding: 64px 40px; text-align: center;
  box-shadow: 0 20px 60px rgba(79, 124, 255, 0.3);
}
.cta-banner h2 { color: #fff; font-size: 34px; margin-bottom: 14px; }
.cta-banner p { color: rgba(255,255,255,0.9); font-size: 16px; margin-bottom: 30px; }
.cta-banner .fine { color: rgba(255,255,255,0.75); font-size: 12.5px; margin-top: 22px; }

/* ---------- Status callout ---------- */
.callout {
  width: 100%; border-radius: var(--radius-md); border: 1px solid var(--card-border);
  background: var(--chip-fill); padding: 22px 26px; display: flex; gap: 14px; align-items: flex-start;
}
.callout .dot-status { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); margin-top: 6px; flex-shrink: 0; }
.callout h3 { font-size: 15px; margin-bottom: 6px; }
.callout p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }

/* ---------- Support callout ---------- */
.support-callout {
  width: 100%; border-radius: var(--radius-md); border: 1px solid var(--card-border);
  background: var(--chip-fill); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.support-callout p { font-size: 13.5px; color: var(--text-secondary); }
/* Modifier: stack text above button, both centered, instead of the default
   side-by-side/space-between layout -- used where the Donate button should
   read as a centered CTA rather than a pinned-right action. */
.support-callout--center { flex-direction: column; justify-content: center; text-align: center; }

/* ---------- Two-column content ---------- */
.split {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
  padding: 56px;
}
.prose h2 { font-size: 30px; line-height: 1.25; font-weight: 800; margin-bottom: 20px; }
.prose p { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.prose ul li { font-size: 14.5px; color: var(--text-secondary); padding-left: 22px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-gradient); }

/* ---------- Changelog ---------- */
.changelog-entry { padding: 28px 0; border-bottom: 1px solid var(--card-border); }
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry h2 { font-size: 20px; margin-bottom: 4px; }
.changelog-entry .tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--violet); background: rgba(139,92,246,0.12);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.changelog-entry ul { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.changelog-entry ul li { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); padding-left: 20px; position: relative; }
.changelog-entry ul li::before { content: "—"; position: absolute; left: 0; color: var(--text-tertiary); }
.changelog-entry ul li strong { color: var(--text-primary); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--card-border); padding: 22px 0; }
.faq-item h3 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }
.help-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; margin: 30px 0 10px; }
.help-link {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border-radius: 14px; border: 1px solid var(--card-border); background: var(--chip-fill);
}
.help-link .k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet); }
.help-link .t { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.help-link .d { font-size: 12.5px; color: var(--text-secondary); }
kbd {
  font-family: var(--font-mono); font-size: 12px; background: var(--chip-fill);
  border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 6px;
}

/* ---------- Footer ---------- */
.site-footer { padding: 48px 20px 36px; display: flex; flex-direction: column; align-items: center; border-top: 1px solid var(--card-border); }
.footer-top { width: 100%; max-width: var(--container); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-brand { max-width: 280px; }
.footer-brand .brand { margin-bottom: 10px; }
.footer-brand p { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.6; }
.footer-origin { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.footer-origin span { font-size: 11.5px; color: var(--text-tertiary); }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 3px; }
.footer-col a { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.footer-col a:hover { color: var(--blue); }
.footer-legal { font-size: 11.5px; color: var(--text-tertiary); max-width: 640px; text-align: center; line-height: 1.6; margin: 30px auto 0; }

/* ---------- 404 ---------- */
.error-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 40px 20px; }
.error-page .code { font-size: 88px; font-weight: 800; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Reusable utilities & page-specific component classes ----------
   Kept out of inline style="" attributes on purpose: the site ships a
   strict style-src 'self' CSP (see includes/bootstrap.php), which blocks
   inline styles outright. Everything visual lives here instead. */
.pt-0 { padding-top: 0; }
.pb-lg { padding-bottom: 110px; }
.mb-10 { margin-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.pad-lg { padding: 44px 48px; }
.pad-md { padding: 40px 44px; }

.window-frame.narrow { max-width: 760px; margin: 0 auto; }
.window-frame.wide { max-width: 920px; }

.grid-2 { align-items: start; }

.section-title { font-size: 26px; font-weight: 800; text-align: center; margin-bottom: 26px; }
.subsection-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.subsection-title.center { text-align: center; }

.lede-sm { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin-bottom: 22px; max-width: 640px; }
.lede-sm.mb-10 { margin-bottom: 10px; }
.text-center .lede-sm { margin-left: auto; margin-right: auto; }

.eyebrow.accent + h2 { margin-top: 14px; }
.split .dots { margin-bottom: 14px; }
.prose-cta { margin-top: 8px; }

.proof-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.proof-inner h2 { font-size: 32px; font-weight: 800; max-width: 640px; margin-bottom: 12px; }
.proof-inner p { font-size: 16px; color: var(--text-secondary); max-width: 520px; margin-bottom: 44px; }

.dot-status.ok { background: var(--green); }

.error-page h1 { font-size: 26px; margin: 0; }
.error-page p { color: var(--text-secondary); max-width: 420px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; padding: 36px 24px; }
  .hero-inner h1 { font-size: 40px; }
  .page-hero h1 { font-size: 32px; }
  .footer-top { flex-direction: column; gap: 28px; }
  .help-links { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 20px; right: 20px;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px; border-radius: var(--radius-md);
    background: var(--glass-fill-strong);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 10px 8px; }
  .nav-cta { margin-left: 0; text-align: center; }
}