/* Zeltro landing — dark navy / electric cyan, matching the logo */

:root {
  --bg-0: #04081d;
  --bg-1: #0a1232;
  --bg-2: #0f1a45;
  --line: rgba(56, 189, 248, 0.18);
  --line-strong: rgba(56, 189, 248, 0.4);
  --text: #e6edff;
  --muted: #9ba6c4;
  --accent: #38bdf8;
  --accent-2: #67e8f9;
  --accent-3: #0ea5e9;
  --grad-a: #67e8f9;
  --grad-b: #0ea5e9;
  --max: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 60px -20px rgba(14, 165, 233, 0.45);
  /* The app's Zeltro theme pairs the cyan with a neon pink. */
  --pink: #f472b6;
  --purple: #a78bfa;
  --grad-zeltro: linear-gradient(90deg, #f472b6, #a78bfa 45%, #67e8f9);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #fff; }

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent-3); color: white; padding: 10px 14px;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 8, 29, 0.85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; }
.brand-name { font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-mark { display: block; }
.brand.small { font-weight: 700; }
.brand.small span { font-size: 1rem; }

.site-header nav { display: flex; gap: 22px; }
.site-header nav a {
  color: var(--muted); font-weight: 500; font-size: 0.95rem;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.site-header nav a:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 540px) {
  .site-header nav { display: none; }
}

/* Hero */
.hero {
  position: relative;
  /* Bottom padding trimmed: the GUI panel now sits directly below, and the
     original 140px left a visible void once the second CTA button was removed. */
  padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.bg-glow {
  position: absolute; inset: -10% -10% auto -10%; height: 80%;
  background: radial-gradient(ellipse at 30% 30%, rgba(14, 165, 233, 0.25), transparent 60%),
              radial-gradient(ellipse at 75% 65%, rgba(103, 232, 249, 0.15), transparent 55%);
  pointer-events: none;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem; letter-spacing: 0.22em; font-weight: 700;
  color: var(--accent-2); margin: 0 0 18px;
}
.eyebrow.accent { color: var(--accent-2); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
}
h1 .grad {
  background: var(--grad-zeltro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted);
  margin-top: 24px;
  max-width: 60ch;
}
.lead strong { color: var(--text); font-weight: 600; }

.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cta.center { justify-content: center; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 0.98rem;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .15s, background .15s, color .15s;
  cursor: pointer;
}
.btn.primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #04081d;
  box-shadow: var(--shadow);
}
.btn.primary:hover { transform: translateY(-1px); color: #04081d; }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn.ghost:hover { background: rgba(56, 189, 248, 0.1); border-color: var(--accent); color: #fff; }

.meta {
  margin-top: 18px; color: var(--muted); font-size: 0.92rem;
}

.hero-visual {
  display: flex; justify-content: center; align-items: center;
}
.logo-large {
  filter: drop-shadow(0 30px 60px rgba(14, 165, 233, 0.5));
  width: min(380px, 80vw); height: auto;
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-large { animation: none; }
  html { scroll-behavior: auto; }
}

/* Sections */
section { padding: clamp(60px, 8vw, 110px) 0; position: relative; }
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  text-align: center;
}
.section-title.left { text-align: left; }
.section-sub {
  color: var(--muted); text-align: center; margin: 14px auto 50px;
  max-width: 60ch; font-size: 1.05rem;
}

/* Pillar cards */
.pillars { background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.4)); }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.6), rgba(10, 18, 50, 0.6));
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.18), rgba(14, 165, 233, 0.1));
  color: var(--accent-2);
  margin-bottom: 18px;
  border: 1px solid var(--line);
}
.card h3 {
  font-size: 1.18rem; font-weight: 700; margin-bottom: 12px;
  color: #fff;
}
.card p { color: var(--muted); margin: 0; font-size: 0.97rem; }
.card code, .card .cmd {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-2);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.9em;
  border: 1px solid rgba(14, 165, 233, 0.18);
}

/* Why Zeltro — compare table */
.why-zeltro {
  background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.4));
}
.eyebrow.center { display: block; text-align: center; }

.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1080px; margin: 0 auto;
}
@media (max-width: 900px) { .compare { grid-template-columns: 1fr; } }

.compare-col {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.55), rgba(10, 18, 50, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
}
.compare-col.cold {
  border-color: rgba(244, 114, 182, 0.25);
  background: linear-gradient(180deg, rgba(60, 22, 50, 0.35), rgba(10, 18, 50, 0.55));
}
.compare-col.hot {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(180deg, rgba(15, 56, 90, 0.55), rgba(10, 18, 50, 0.7));
  box-shadow: 0 12px 40px -16px rgba(14, 165, 233, 0.45);
}

.compare-tag {
  position: absolute;
  top: -12px; left: 22px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: #04081d;
  color: #fb7185;
  border: 1px solid rgba(244, 114, 182, 0.3);
  padding: 4px 11px;
  border-radius: 6px;
}
.compare-tag.accent {
  color: var(--accent-2);
  border-color: rgba(56, 189, 248, 0.4);
}

.compare-col h3 {
  font-size: 1.15rem; font-weight: 700; color: #fff;
  margin-bottom: 18px;
}
.compare-col ul {
  list-style: none; padding: 0; margin: 0;
}
.compare-col ul li {
  position: relative;
  padding: 10px 0 10px 26px;
  color: var(--muted);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.compare-col ul li:last-child { border-bottom: 0; }
.compare-col ul li::before {
  position: absolute;
  left: 0; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  content: '';
}
.compare-col.cold ul li::before {
  background: rgba(244, 114, 182, 0.18);
  border: 1px solid rgba(244, 114, 182, 0.5);
}
.compare-col.hot ul li::before {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid var(--accent);
}
.compare-col.hot ul li::after {
  position: absolute;
  left: 3px; top: 17px;
  content: '';
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
}
.compare-col code {
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid rgba(14, 165, 233, 0.2);
}
.compare-col em { font-style: normal; color: var(--text); }

.bottom-line {
  margin: 38px auto 0;
  text-align: center;
  max-width: 70ch;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Tokens / terminal */
.tokens {
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.4), transparent);
}
.tokens-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
@media (max-width: 900px) { .tokens-grid { grid-template-columns: 1fr; gap: 36px; } }

.terminal {
  background: #04081d;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(15, 26, 69, 0.6);
  border-bottom: 1px solid var(--line);
}
.terminal-bar .dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }
.t-title { color: var(--muted); font-size: 0.85rem; margin-left: 12px; font-family: 'JetBrains Mono', monospace; }
.terminal-body { padding: 18px 22px; }
.terminal pre { margin: 0; }
.terminal code { font-size: 0.92rem; line-height: 1.7; color: #cbd5e1; }
.prompt { color: var(--accent); user-select: none; margin-right: 6px; }
.cmd-fg { color: #fff; font-weight: 500; }
.muted { color: #6b7691; }
.ok { color: #34d399; }

/* Two-up snippets */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 12px;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.snippet {
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.55), rgba(10, 18, 50, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.snippet h3 {
  font-size: 1.1rem; color: #fff; margin-bottom: 12px;
}
.snippet h3 .kbd {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.95em;
  border: 1px solid rgba(14, 165, 233, 0.25);
  font-weight: 600;
}
.snippet p { color: var(--muted); font-size: 0.95rem; }
.snippet pre {
  margin: 16px 0;
  background: #04081d;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
}
.snippet code { font-size: 0.88rem; color: #cbd5e1; line-height: 1.85; }
.snippet .micro { color: #7a85a3; font-size: 0.85rem; margin-top: 0; }

/* Apps grid */
.apps {
  background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.35));
  /* Offset for sticky header so JS-driven scrollIntoView lands the heading
     fully in view instead of behind the nav. */
  scroll-margin-top: 80px;
}

.install-preview {
  max-width: 760px;
  margin: 0 auto 32px;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.5), rgba(10, 18, 50, 0.5));
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 22px 26px;
  text-align: center;
  transition: border-style .15s, background .15s;
}
.install-preview.has-cmd {
  border-style: solid;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.85), rgba(10, 18, 50, 0.85));
  text-align: left;
}
.preview-empty {
  color: var(--muted); font-size: 0.97rem;
}
.preview-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  background: #04081d;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px;
}
.preview-prompt {
  color: var(--accent); font-family: 'JetBrains Mono', monospace; font-weight: 600;
  user-select: none; flex: 0 0 auto;
}
.preview-cmd {
  flex: 1 1 auto;
  color: var(--accent-2);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 1rem;
  background: transparent;
  border: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.copy-btn {
  flex: 0 0 auto;
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  border: 1px solid rgba(14, 165, 233, 0.4);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.copy-btn:hover { background: rgba(14, 165, 233, 0.25); color: #fff; }
.preview-meta {
  margin: 14px 0 0; color: var(--muted); font-size: 0.92rem;
}
.preview-meta strong { color: var(--text); font-weight: 600; }
.preview-meta code {
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.app-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 6px;
}
.app-grid li { display: block; }
.app-grid button {
  width: 100%;
  background: rgba(15, 26, 69, 0.5);
  border: 1px solid var(--line);
  padding: 7px 8px;
  border-radius: 7px;
  text-align: center;
  font-weight: 500;
  color: #c3cee2;
  font-size: 0.78rem;
  line-height: 1.25;
  font-family: inherit;
  cursor: pointer;
  /* Long names must not widen the track or the grid loses its rhythm. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.app-grid button:hover {
  border-color: var(--accent);
  color: #fff;
}
.app-grid button.active {
  border-color: var(--accent);
  background: rgba(14, 165, 233, 0.18);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.app-grid button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Final CTA — numbered steps */
.cta-final { background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.55)); }

.steps {
  list-style: none; padding: 0; margin: 0 auto 36px;
  max-width: 820px;
  display: grid; gap: 24px;
}
.steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.55), rgba(10, 18, 50, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
@media (max-width: 600px) {
  .steps li { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 20px; }
}
.step-num {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #04081d;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.55);
  flex-shrink: 0;
}
@media (max-width: 600px) { .step-num { width: 42px; height: 42px; font-size: 1.2rem; } }
.step-body h3 {
  font-size: 1.18rem; font-weight: 700; margin: 4px 0 6px; color: #fff;
}
.step-sub {
  color: var(--muted); margin: 0 0 14px; font-size: 0.95rem;
}
.install-label { color: var(--muted); margin: 14px 0 6px; font-size: 0.88rem; font-weight: 500; }
.install-label:first-child { margin-top: 0; }
.install-cmd {
  background: #04081d;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0;
  overflow-x: auto;
}
.install-cmd code { color: var(--accent-2); font-size: 0.9rem; line-height: 1.6; }
.install-cmd .muted-cmd { color: #7a85a3; }
.install-cmd .cmt, .snippet .cmt { color: #5e6a85; font-style: italic; }

/* Three-option layout inside step 4 */
.option-label {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 8px;
}
.option + .or-divider, .or-divider + .option { /* spacing handled below */ }
.or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  user-select: none;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(56, 189, 248, 0.45), transparent);
}
.or-divider span {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Framework chips under zeltro new — clickable */
.framework-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}
.fw-chip {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-2);
  border: 1px solid rgba(14, 165, 233, 0.32);
  padding: 4px 10px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.fw-chip:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.fw-chip.active {
  background: rgba(14, 165, 233, 0.32);
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.fw-chip:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.install-cmd .fw-value {
  color: var(--accent-2);
  font-weight: 600;
}

/* Foot note under an OR option (e.g. the "Pull in existing" explanation) */
.option-foot {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 10px 0 0;
  line-height: 1.55;
}
.option-foot code {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Copy-to-clipboard button on terminal-style code blocks */
pre.has-copy {
  position: relative;
}
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.28);
  color: var(--muted);
  padding: 4px 9px 4px 7px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s, background .12s, color .12s, border-color .12s;
}
pre.has-copy:hover .code-copy,
pre.has-copy:focus-within .code-copy {
  opacity: 1;
}
.code-copy:hover {
  background: rgba(14, 165, 233, 0.22);
  color: #fff;
  border-color: var(--accent);
}
.code-copy:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.code-copy.copied {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
  opacity: 1;
}
.code-copy svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.code-copy-label {
  line-height: 1;
}
@media (max-width: 600px) {
  .code-copy-label { display: none; }
  .code-copy { padding: 5px; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  margin-top: 30px;
}
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-row .copy { color: var(--muted); font-size: 0.92rem; margin: 0; }
.footer-row a { color: var(--accent-2); }

/* Platform / package chooser + download button (landing page step 1 and 5) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.fw-chip.active {
  background: rgba(14, 165, 233, 0.28);
  border-color: var(--accent);
  color: #eaf7ff;
}
.btn-download {
  display: inline-block;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #04081d;
  font-weight: 650;
  padding: 10px 20px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform .12s, box-shadow .12s;
}
.btn-download:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,.35); }

/* GUI showcase */
.gui-showcase { padding: 64px 0; }
.shot { margin: 28px auto 18px; max-width: 1100px; }
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.shot figcaption {
  color: var(--muted); font-size: 0.86rem; text-align: center; margin-top: 12px;
}

/* Prominent GUI download band, directly below the hero */
.download-band {
  padding: 46px 0 52px;
  background: linear-gradient(180deg, rgba(14,165,233,.07), transparent 70%);
  border-top: 1px solid rgba(56,189,248,.14);
  border-bottom: 1px solid rgba(56,189,248,.10);
}
.band-title { font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin: 0 0 8px; }
.band-sub { color: var(--muted); text-align: center; margin: 0 auto 26px; max-width: 640px; }
.band-beta {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(14,165,233,.14); border: 1px solid rgba(56,189,248,.3);
  color: var(--accent-2); font-size: .78rem; white-space: nowrap;
}
.dl-grid {
  display: grid; gap: 14px; max-width: 980px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.dl-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, rgba(103,232,249,.10), rgba(14,165,233,.06));
  border: 1px solid rgba(56,189,248,.28);
  transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
}
.dl-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(103,232,249,.18), rgba(14,165,233,.12));
  box-shadow: 0 10px 30px rgba(14,165,233,.22);
}
.dl-for { color: #eaf7ff; font-weight: 650; font-size: 1.02rem; }
.dl-distros { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.dl-ext {
  margin-top: 6px; color: var(--accent-2); font-size: .8rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.band-note { text-align: center; color: var(--muted); margin: 22px auto 0; max-width: 720px; font-size: .92rem; }
.band-fine { display: inline-block; margin-top: 8px; font-size: .82rem; color: #7a85a3; }
.band-note a { color: var(--accent-2); }

/* Support / donation options */
.support { padding: 60px 0; }
.give-grid {
  display: grid; gap: 14px; max-width: 980px; margin: 26px auto 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.give-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-radius: 12px; text-decoration: none;
  background: rgba(15, 26, 69, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: transform .12s, border-color .12s, background .12s;
}
.give-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(15, 26, 69, 0.8);
}
.give-name { color: #eaf7ff; font-weight: 650; font-size: 1rem; }
.give-note { color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Nav donate button
   Deliberately the only nav item that reads as a control — the rest are plain
   links, so a filled pill is enough to make it the obvious action without
   competing with the hero CTA below it.
--------------------------------------------------------------------------- */
.site-header nav a.nav-donate {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.14), rgba(14, 165, 233, 0.14));
  color: var(--text); font-weight: 700; font-size: 0.92rem; line-height: 1;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.site-header nav a.nav-donate:hover {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border-color: transparent; color: #04081d; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.32);
}
.nav-donate-heart { font-size: 1rem; color: #ff6b8a; transition: color .18s; }
.site-header nav a.nav-donate:hover .nav-donate-heart { color: #04081d; }

/* Beta tester call to action: the one filled, full-gradient pill in the nav,
   so it is the first thing the eye lands on at the top of every page. */
.site-header nav a.nav-beta {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px; border: 0;
  background: var(--grad-zeltro); color: #04081d;
  font-weight: 800; font-size: 0.92rem; line-height: 1; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.35);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.site-header nav a.nav-beta:hover { color: #04081d; transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 24px rgba(244, 114, 182, 0.45); }
.nav-beta-short { display: none; }

/* The nav collapses on narrow screens, but Beta and Donate are calls to action
   and should survive — show them alone rather than losing them entirely. */
@media (max-width: 540px) {
  .site-header nav { display: flex; gap: 8px; }
  .site-header nav a { display: none; }
  .site-header nav a.nav-donate, .site-header nav a.nav-beta { display: inline-flex; }
  .site-header nav a.nav-donate, .site-header nav a.nav-beta { padding: 7px 12px; font-size: .85rem; }
  .nav-beta-long { display: none; }
  .nav-beta-short { display: inline; }
}

/* ---------------------------------------------------------------------------
   GUI showcase — an INSET well, not a card
   The screenshot used to sit full-width on a raised drop shadow, which made it
   read as one enormous clickable tile. Sinking it into the page, shrinking it
   and pairing it with copy makes it obviously an illustration. No hover state,
   no pointer cursor, and the image itself ignores pointer events so nothing
   about it invites a click.
--------------------------------------------------------------------------- */
/* Tight to the hero above: the hero already carries generous bottom padding,
   and stacking both left an obvious void once the second CTA button was removed. */
.gui-showcase { padding: 8px 0 8px; }
.gui-panel {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center;
  padding: 38px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(56, 189, 248, 0.14);
  background:
    radial-gradient(120% 140% at 85% 20%, rgba(14, 165, 233, 0.07), transparent 60%),
    #060c24;
  box-shadow:
    inset 0 2px 22px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.gui-panel-copy h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.18;
  letter-spacing: -0.02em; margin: 6px 0 14px;
}
.gui-panel-copy .eyebrow { margin: 0; }
.lead-sm { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 14px; }
.lead-sm strong { color: var(--text); }
.gui-panel-copy .btn { margin-top: 6px; }

.gui-panel-shot { margin: 0; justify-self: end; max-width: 560px; }
.gui-panel-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 10px;
  /* No drop shadow and no transform: a raised, animated image is what made the
     old one look like a button. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none; user-select: none;
}
.gui-panel-shot figcaption {
  color: var(--muted); font-size: 0.8rem; text-align: right; margin-top: 10px;
}

@media (max-width: 900px) {
  .gui-panel { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; }
  .gui-panel-shot { justify-self: stretch; max-width: none; }
  .gui-panel-shot figcaption { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Donate page
--------------------------------------------------------------------------- */
.nav-donate.is-current { border-color: var(--accent); }

.donate-hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.donate-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.03em; margin: 8px 0 16px;
}
/* Centered: the page is short and the hero has no visual on the right, so
   left-hugging text left a large dead area beside it. */
.donate-hero .wrap { text-align: center; }
.donate-lead { max-width: 660px; margin-left: auto; margin-right: auto; }
.give-icon-heart { color: #ff6b8a; }

.donate-channels { padding: 24px 0 8px; }
.donate-grid { max-width: 1000px; }

/* The channel cards ARE links, so unlike the screenshot panel they should look
   clickable — icon, and an explicit action line that underlines on hover. */
.give-icon { font-size: 1.35rem; line-height: 1; margin-bottom: 2px; }
.give-go {
  margin-top: auto; padding-top: 10px;
  color: var(--accent); font-size: .85rem; font-weight: 650;
}
.give-card:hover .give-go { color: var(--accent-2); text-decoration: underline; }

.donate-fine {
  max-width: 720px; margin: 26px auto 0; text-align: center;
  color: var(--muted); font-size: .92rem; line-height: 1.65;
}

.donate-story { padding: 56px 0 72px; }
.story-body {
  max-width: 680px; margin: 22px auto 0;
  color: #cfd8ef; font-size: 1.03rem; line-height: 1.75;
}
.story-body p { margin: 0 0 18px; }
.story-body strong { color: var(--text); }
.story-body em { color: var(--accent-2); font-style: italic; }
.story-sign { color: var(--muted); font-size: .95rem; margin-top: 26px; }

.story-cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 34px;
}

@media (max-width: 540px) {
  .donate-hero { padding: 48px 0 28px; }
  .story-cta .btn { width: 100%; text-align: center; }
}

/* Denser still on small screens — 217 chips at 122px would otherwise be a very
   long scroll on a phone. */
@media (max-width: 640px) {
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }
  .app-grid button { padding: 6px 6px; font-size: 0.72rem; }
}

/* ==========================================================================
   Guide
   Rendered from markdown by App\Support\Guide, so these rules style plain
   generated elements (h2, pre, table...) rather than authored classes. Uses
   the same tokens as the rest of the site so the guide reads as one site.
   ========================================================================== */

.guide-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
  padding: 40px 0 80px;
}

/* Sidebars stick; the article scrolls. min() keeps them from outgrowing a
   short viewport, which would otherwise strand the end of a long nav. */
.guide-nav,
.guide-toc {
  position: sticky;
  top: 88px;
  max-height: min(calc(100vh - 108px), 100%);
  overflow-y: auto;
  font-size: 0.92rem;
}

.guide-nav-title,
.guide-toc-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.guide-nav ul,
.guide-toc ul { list-style: none; margin: 0; padding: 0; }

.guide-nav li { margin: 0; }

.guide-nav a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.guide-nav a:hover { color: var(--text); background: rgba(56, 189, 248, 0.07); }

.guide-nav a.is-current {
  color: var(--accent-2);
  background: rgba(56, 189, 248, 0.1);
  border-left-color: var(--accent);
  font-weight: 600;
}

.guide-toc li { margin: 0 0 4px; }
.guide-toc li.is-sub { padding-left: 12px; }
.guide-toc a { color: var(--muted); text-decoration: none; }
.guide-toc a:hover { color: var(--accent-2); }

/* --- article ------------------------------------------------------------ */

.guide-body { min-width: 0; line-height: 1.7; }

.guide-body > h1:first-child { margin-top: 0; }

.guide-body h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); line-height: 1.15; margin: 0 0 24px; }
.guide-body h2 { font-size: 1.5rem; margin: 44px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.guide-body h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.guide-body h4 { font-size: 1rem; margin: 24px 0 8px; color: var(--accent-2); }

.guide-body p, .guide-body ul, .guide-body ol { margin: 0 0 16px; }
.guide-body ul, .guide-body ol { padding-left: 22px; }
.guide-body li { margin: 0 0 6px; }
.guide-body a { color: var(--accent-2); }

/* Anchors appear on hover so headings stay clean but remain linkable. */
.heading-anchor {
  margin-left: 8px;
  color: var(--line-strong);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.guide-body h2:hover .heading-anchor,
.guide-body h3:hover .heading-anchor,
.heading-anchor:focus { opacity: 1; }

/* --- code --------------------------------------------------------------- */

.guide-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.12em 0.4em;
}

.guide-body pre {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 20px;
  overflow-x: auto;          /* long commands scroll, page never does */
}

.guide-body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text);
}

/* --- tables ------------------------------------------------------------- */

/* The command reference is mostly tables and some are wide, so the wrapper
   scrolls rather than forcing a horizontal scrollbar on the whole page. */
.guide-body .table-scroll { overflow-x: auto; margin: 0 0 20px; }

.guide-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.guide-body th, .guide-body td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.guide-body th { background: rgba(56, 189, 248, 0.09); font-weight: 600; white-space: nowrap; }
.guide-body tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* --- callouts ----------------------------------------------------------- */

.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(56, 189, 248, 0.06);
  padding: 14px 18px;
  margin: 0 0 20px;
}
.callout > :last-child { margin-bottom: 0; }
.callout-warning { border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.07); }
.callout-important { border-left-color: #f472b6; background: rgba(244, 114, 182, 0.07); }

.guide-body blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}
.guide-body blockquote > :last-child { margin-bottom: 0; }

.guide-edit {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

.site-header .is-current { color: var(--accent-2); }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .guide-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .guide-toc { display: none; }
}

@media (max-width: 760px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  /* Unstick the nav on phones -- a sticky rail would eat the viewport. */
  .guide-nav {
    position: static;
    max-height: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }
  .guide-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .guide-nav a { border-left: 0; border-radius: 999px; padding: 6px 12px; }
  .guide-nav a.is-current { border-left: 0; }
}

/* ==========================================================================
   Article pages (comparisons, "alternative" pages)
   Reuse the guide's prose rules -- .guide-body styles the generated elements --
   so these read as the same site. Only the shell and the FAQ differ.
   ========================================================================== */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 48px;
  align-items: start;
  padding: 40px 0 80px;
}

.article-body { min-width: 0; line-height: 1.7; max-width: 76ch; }

.article-eyebrow {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 14px;
}
.article-eyebrow a { color: var(--muted); text-decoration: none; }
.article-eyebrow a:hover { color: var(--accent-2); }

.article-body h1 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.article-standfirst {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

/* The prose itself is styled by the .guide-body rules above; mirror the
   selectors rather than duplicating the declarations. */
.article-body h2 { font-size: 1.5rem; margin: 44px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.article-body h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.article-body h4 { font-size: 1rem; margin: 24px 0 8px; color: var(--accent-2); }
.article-body p, .article-body ul, .article-body ol { margin: 0 0 16px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { margin: 0 0 6px; }
.article-body a { color: var(--accent-2); }

.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.12em 0.4em;
}

.article-body pre {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 20px;
  overflow-x: auto;
}
.article-body pre code { background: none; border: 0; padding: 0; font-size: 0.86rem; line-height: 1.6; color: var(--text); }

.article-body .table-scroll { overflow-x: auto; margin: 0 0 20px; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.article-body th { background: rgba(56, 189, 248, 0.09); font-weight: 600; }
.article-body tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* Zeltro's own row in a comparison table, so the reader can find it without
   hunting. Applied by writing **Zeltro** as the first cell. */
.article-body tbody tr:has(td:first-child strong) { background: rgba(56, 189, 248, 0.08); }

.article-body blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}

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

.faq { display: grid; gap: 10px; margin: 0 0 28px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(56, 189, 248, 0.04);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }

/* A rotating caret drawn in CSS -- no icon font, no inline SVG per item. */
.faq summary::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::before { transform: rotate(45deg); }

.faq summary:hover { color: var(--accent-2); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.faq-answer { padding: 0 18px 16px 38px; color: var(--muted); }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer p, .faq-answer ul, .faq-answer ol { margin: 0 0 12px; }
.faq-answer a { color: var(--accent-2); }
.faq-answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.12em 0.4em;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::before { transition: none; }
}

.article-updated {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

.article-more {
  margin-top: 34px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(56, 189, 248, 0.04);
}
.article-more-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.article-more li { margin: 0; }

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-layout .guide-toc { display: none; }
}

@media (max-width: 760px) {
  .article-layout { padding-top: 24px; gap: 24px; }
}

/* Footer link block for the comparison pages. */
.footer-links { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.footer-links-title {
  margin: 0 0 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links li { margin: 0; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
.footer-links a:hover { color: var(--accent-2); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Install section: one platform at a time.
   The steps genuinely differ per platform — Linux needs a re-login for the
   docker group, macOS needs Docker Desktop running, Windows has no local
   engine at all — so this switches whole panels rather than just swapping a
   command string.
   --------------------------------------------------------------------------- */
.install-band { padding: 56px 0; border-top: 1px solid var(--line); }

.plat-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 26px auto 0; max-width: 640px;
}
.plat-tab {
  background: rgba(14, 165, 233, 0.08);
  color: var(--accent-2);
  border: 1px solid rgba(14, 165, 233, 0.28);
  padding: 9px 22px;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.plat-tab:hover { background: rgba(14, 165, 233, 0.18); color: #fff; }
.plat-tab.active {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border-color: transparent;
  color: #fff;
}

.plat-panel { display: none; margin-top: 26px; }
.plat-panel.active { display: block; }

/* The remote/SSH explainer: present but visibly secondary, so it informs
   without competing with the platform steps above it. */
.sub-note {
  max-width: 820px;
  margin: 34px auto 0;
  padding: 22px 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.sub-note h3 { margin: 0 0 10px; font-size: 1.08rem; }
.sub-note p { color: var(--muted); font-size: .94rem; margin: 0 0 12px; }
.sub-note p:last-child { margin-bottom: 0; }
.sub-note code { color: var(--accent-2); }

@media (max-width: 640px) {
  .plat-tab { flex: 1 1 auto; padding: 9px 12px; font-size: .88rem; }
  .sub-note { padding: 18px 16px; }
}

/* ---------------------------------------------------------------------------
   Screenshot gallery (partials/gallery.blade.php). A scroll-snap strip: swipe
   and trackpad scrolling work with no JS; the script adds buttons, dots, keys,
   autoplay and click-to-enlarge.
   --------------------------------------------------------------------------- */
.gallery { position: relative; margin-top: 28px; }
.gallery-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 6px 2px 14px; scrollbar-width: none;
  outline: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.gallery-slide {
  flex: 0 0 100%; margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
}
.gallery-zoom {
  display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-1); overflow: hidden; cursor: zoom-in;
  box-shadow: 0 30px 80px -30px rgba(14, 165, 233, 0.45), 0 0 0 1px rgba(103, 232, 249, 0.06) inset;
  transition: border-color .2s ease, transform .2s ease;
}
.gallery-zoom:hover { border-color: var(--line-strong); }
.gallery-zoom { aspect-ratio: 16 / 10; width: 100%; background: #030716; }
.gallery-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-slide figcaption { color: var(--muted); font-size: 15px; text-align: center; padding: 0 12px; }

.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.gallery-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: rgba(10, 18, 50, 0.7); color: var(--text); font-size: 18px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.gallery-btn:hover { background: var(--bg-2); border-color: var(--accent); }
.gallery-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 70%; }
.gallery-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(155, 166, 196, 0.35); transition: background .2s ease, transform .2s ease;
}
.gallery-dots button[aria-selected="true"] { background: var(--accent-2); transform: scale(1.35); }

.gallery-dialog {
  max-width: min(96vw, 1800px); max-height: 94vh; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--bg-0); overflow: auto;
}
.gallery-dialog::backdrop { background: rgba(2, 5, 15, 0.85); backdrop-filter: blur(3px); }
.gallery-dialog img { display: block; max-width: 100%; height: auto; }
.gallery-close {
  position: sticky; top: 8px; float: right; margin: 8px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(4, 8, 29, 0.85); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .gallery-track { scroll-behavior: auto; } }


/* ---------------------------------------------------------------------------
   2026-09 refresh: Zeltro-theme accents, hero screenshot, value strip,
   spotlights, "what you'll need".
   --------------------------------------------------------------------------- */
.btn.primary {
  background: var(--grad-zeltro); color: #04081d; border: 0;
  box-shadow: 0 10px 30px -10px rgba(244, 114, 182, 0.55), 0 10px 30px -12px rgba(103, 232, 249, 0.5);
}
.eyebrow { color: var(--pink); }
.eyebrow.accent { color: var(--accent-2); }
kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85em;
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong);
  background: var(--bg-1); color: var(--text);
}

/* Hero: copy centred above a framed screenshot of the app. */
.hero-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.hero-copy.center { text-align: center; max-width: 860px; }
.hero-copy.center .lead { margin-left: auto; margin-right: auto; }
.hero-shot {
  margin: 0; width: 100%; max-width: 1132px; position: relative;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(103, 232, 249, 0.28);
  background: #030716;
  box-shadow:
    0 40px 120px -40px rgba(244, 114, 182, 0.45),
    0 40px 120px -30px rgba(56, 189, 248, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.hero-shot::before {
  /* A thin pink-to-cyan rule along the top, like the app's dialog headers. */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-zeltro); z-index: 1;
}
.window-bar { display: flex; gap: 7px; padding: 12px 14px; background: #060c24; border-bottom: 1px solid var(--line); }
.window-bar span { width: 11px; height: 11px; border-radius: 50%; background: #1b2a5e; }
.window-bar span:nth-child(1) { background: #f472b6; }
.window-bar span:nth-child(2) { background: #fbbf24; }
.window-bar span:nth-child(3) { background: #34d399; }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot figcaption { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 12px 16px 14px; background: #060c24; border-top: 1px solid var(--line); }

/* Floating translucent blocks, borrowed from the app's Zeltro theme background. */
.glitch-blocks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glitch-blocks span {
  position: absolute; display: block; border-radius: 3px; opacity: 0.16;
  animation: drift 18s ease-in-out infinite alternate;
}
.glitch-blocks span:nth-child(1) { left: 6%;  top: 14%; width: 90px;  height: 34px; background: #f472b6; animation-duration: 17s; }
.glitch-blocks span:nth-child(2) { left: 82%; top: 10%; width: 120px; height: 46px; background: #67e8f9; animation-duration: 21s; }
.glitch-blocks span:nth-child(3) { left: 12%; top: 58%; width: 54px;  height: 54px; background: #a78bfa; animation-duration: 15s; }
.glitch-blocks span:nth-child(4) { left: 88%; top: 52%; width: 70px;  height: 26px; background: #f472b6; animation-duration: 19s; }
.glitch-blocks span:nth-child(5) { left: 3%;  top: 36%; width: 140px; height: 12px; background: #67e8f9; animation-duration: 23s; }
.glitch-blocks span:nth-child(6) { left: 72%; top: 34%; width: 40px;  height: 40px; background: #fbbf24; opacity: 0.1; animation-duration: 16s; }
.glitch-blocks span:nth-child(7) { left: 45%; top: 4%;  width: 80px;  height: 18px; background: #a78bfa; animation-duration: 20s; }
.glitch-blocks span:nth-child(8) { left: 58%; top: 70%; width: 110px; height: 16px; background: #67e8f9; animation-duration: 24s; }
@keyframes drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(18px, -14px); }
  100% { transform: translate(-12px, 10px); }
}
@media (prefers-reduced-motion: reduce) { .glitch-blocks span { animation: none; } }

/* Value strip */
.values { padding: 20px 0 10px; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.value {
  padding: 22px 22px 20px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.7), rgba(10, 18, 50, 0.5));
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.value::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad-zeltro); opacity: 0.8; }
.value h3 { font-size: 1.05rem; margin: 0 0 8px; }
.value p { color: var(--muted); margin: 0; font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 1000px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .value-grid { grid-template-columns: 1fr; } }

/* Tour */
.tour .gallery { max-width: 1060px; margin-left: auto; margin-right: auto; }

/* Spotlights: copy beside a screenshot, alternating sides. */
.spotlight { padding: clamp(50px, 7vw, 90px) 0; }
.spotlight.alt { background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.45), transparent); }
.spot-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.spot-grid.reverse { grid-template-columns: 1.25fr 1fr; }
.spot-grid.reverse .spot-copy { order: 2; }
.spot-copy .section-title { margin-bottom: 18px; }
.spot-copy .eyebrow { margin-bottom: 12px; }
.spot-shot { margin: 0; }
.spot-shot img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  box-shadow: 0 30px 80px -30px rgba(244, 114, 182, 0.35), 0 30px 80px -30px rgba(56, 189, 248, 0.4);
}
@media (max-width: 900px) {
  .spot-grid, .spot-grid.reverse { grid-template-columns: 1fr; gap: 28px; }
  .spot-grid.reverse .spot-copy { order: 0; }
}

/* What you'll need */
.needs-list { list-style: none; padding: 0; margin: 30px auto 0; max-width: 820px; display: grid; gap: 14px; }
.needs-list li {
  padding: 18px 22px 18px 54px; position: relative; border-radius: var(--radius);
  background: rgba(10, 18, 50, 0.6); border: 1px solid var(--line); color: var(--muted); line-height: 1.6;
}
.needs-list li::before {
  content: ""; position: absolute; left: 22px; top: 24px; width: 14px; height: 14px; border-radius: 4px;
  background: var(--grad-zeltro);
}
.needs-list strong { color: var(--text); }
.spot-stacked { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.spot-copy.center { text-align: center; max-width: 760px; }
.spot-shot.wide { width: 100%; max-width: 1060px; }

/* Install steps on phones: the long curl one-liner stretched each step (and the
   page) to ~1040px wide. Let grid children shrink so the command scrolls inside
   its own box instead. */
.steps li > * { min-width: 0; }
.step-body pre, .step-body .install-cmd { max-width: 100%; }
.duo > *, .option { min-width: 0; }
.snippet pre, .option pre { overflow-x: auto; max-width: 100%; }
p code, li code { overflow-wrap: anywhere; }

/* Second hero paragraph: a touch smaller than the lead. */
.lead.lead-2 { font-size: clamp(0.98rem, 1.3vw, 1.08rem); margin-top: 14px; }

/* Create with AI: the idea, an arrow, then the choices. */
.create-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; width: 100%; max-width: 1100px; }
.create-arrow { font-size: 2.2rem; background: var(--grad-zeltro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spot-shot figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; margin-top: 12px; }
@media (max-width: 800px) {
  .create-pair { grid-template-columns: 1fr; }
  .create-arrow { transform: rotate(90deg); justify-self: center; }
}

.spot-shot.narrow { max-width: 440px; justify-self: center; }
.dictate-art, .remote-art { display: block; width: 100%; height: auto; }
.remote-art-wrap { background: none; }
.remote { padding: clamp(60px, 8vw, 110px) 0; }

/* Install: one command and one line per platform. */
.install-simple { max-width: 820px; margin: 0 auto; }
.install-simple .chip-row { margin: 0 0 12px; }
.install-note { color: var(--muted); margin: 14px 0 0; font-size: 0.97rem; }
.install-soon {
  color: var(--muted); margin: 0; padding: 22px 24px; border-radius: var(--radius);
  background: rgba(10, 18, 50, 0.6); border: 1px solid var(--line); line-height: 1.6;
}
.install-soon strong { color: var(--text); }
.install-foot { text-align: center; color: var(--muted); margin: 34px 0 0; font-size: 0.95rem; }

/* "Prefer the terminal?" band */
.terminal-band { padding: 40px 0; }
.terminal-band-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(244, 114, 182, 0.08), rgba(103, 232, 249, 0.08));
}
.terminal-band h2 { font-size: 1.35rem; margin: 0 0 6px; }
.terminal-band p { color: var(--muted); margin: 0; max-width: 62ch; }

/* The terminal page's shorter hero */
.cli-hero { padding-bottom: 20px; }

/* Platform tabs: icon + label, with room before the command below. */
.plat-tabs { margin-bottom: 26px; }
.plat-tab { display: inline-flex; align-items: center; gap: 8px; }
.plat-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Footer: brand column + link columns, then a bottom bar.
   --------------------------------------------------------------------------- */
.site-footer {
  padding: 56px 0 26px; margin-top: 40px;
  background: linear-gradient(180deg, rgba(10, 18, 50, 0.35), rgba(4, 8, 29, 0.95));
  position: relative;
}
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad-zeltro); opacity: 0.7; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px 28px; }
.footer-brand .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.footer-brand .brand span { font-size: 1.2rem; }
.footer-tagline { margin: 16px 0 8px; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.footer-tagline .grad { background: var(--grad-zeltro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-blurb { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 16px; max-width: 34ch; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.9rem;
}
.footer-social a:hover { border-color: var(--accent); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }
.footer-col-title {
  margin: 0 0 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 0.93rem; }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
}
.footer-bottom p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.footer-bottom a { color: var(--accent-2); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Windows tab: a real download button */
.win-download { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.win-meta { color: var(--muted); font-size: 0.92rem; }

/* /commercial */
.commercial-who { padding: clamp(40px, 6vw, 80px) 0 20px; }
.commercial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 26px auto 0; }
.commercial-col { padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 18, 50, 0.6); position: relative; overflow: hidden; }
.commercial-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.commercial-col.free::before { background: #34d399; }
.commercial-col.paid::before { background: var(--grad-zeltro); }
.commercial-tag { margin: 0 0 12px; font-weight: 700; color: var(--text); }
.commercial-col ul { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 8px; }
.commercial-note { max-width: 760px; margin: 22px auto 0; text-align: center; color: var(--muted); }
.commercial-note a, .commercial-faq a { color: var(--accent-2); }
.commercial-pay { grid-template-columns: repeat(3, 1fr); }
.commercial-faq { padding: 30px 0 70px; }
.commercial-faq details { max-width: 820px; margin: 0 auto 10px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 18, 50, 0.5); }
.commercial-faq summary { cursor: pointer; font-weight: 600; color: var(--text); }
.commercial-faq details p { color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
@media (max-width: 800px) { .commercial-grid, .commercial-pay { grid-template-columns: 1fr; } }

/* Beta tester request form (/beta) */
.beta-form-section { padding: clamp(30px, 5vw, 60px) 0 20px; scroll-margin-top: 80px; }
.beta-form, .beta-thanks, .beta-errors { max-width: 820px; margin: 24px auto 0; }
.beta-form { display: grid; gap: 18px; padding: clamp(20px, 4vw, 34px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(10, 18, 50, 0.6); position: relative; overflow: hidden; }
.beta-form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-zeltro); }
.beta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.beta-field { display: grid; gap: 7px; min-width: 0; }
.beta-field > span { font-weight: 600; color: var(--text); font-size: .95rem; }
.beta-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.beta-field small { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.beta-field input, .beta-field select, .beta-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--text);
  background: #060c24; border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px;
}
.beta-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.beta-field select { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.beta-field select option { background: #060c24; color: var(--text); }
.beta-field input::placeholder { color: #5f6a8a; }
.beta-field input:focus, .beta-field select:focus, .beta-field textarea:focus { outline: none; border-color: var(--grad-a); box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.18); }
.beta-check { display: flex; gap: 12px; align-items: flex-start; color: var(--text); cursor: pointer; }
.beta-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--grad-a); flex: 0 0 auto; }
.beta-submit { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.beta-fine { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.beta-thanks { padding: 28px; border-radius: var(--radius-lg); border: 1px solid rgba(52, 211, 153, .5); background: rgba(16, 60, 50, .35); color: var(--muted); text-align: center; }
.beta-thanks-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; color: var(--text); }
.beta-thanks a { color: var(--accent-2); }
.beta-errors { padding: 16px 20px; border-radius: var(--radius); border: 1px solid rgba(244, 114, 182, .55); background: rgba(80, 20, 50, .35); color: var(--text); }
.beta-errors p { margin: 0 0 6px; font-weight: 700; }
.beta-errors ul { margin: 0; padding-left: 20px; color: #f9c4dd; }
@media (max-width: 700px) {
  .beta-row { grid-template-columns: 1fr; }
  .beta-submit { justify-self: stretch; text-align: center; }
}

/* /commercial: numbered steps to buy a license */
.license-steps { list-style: none; counter-reset: step; max-width: 760px; margin: 26px auto 0; padding: 0; display: grid; gap: 14px; }
.license-steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 66px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 18, 50, 0.6); display: grid; gap: 6px; }
.license-steps li::before { content: counter(step); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04081d; background: var(--grad-zeltro); }
.license-step-title { font-weight: 700; color: var(--text); }
.license-step-note { color: var(--muted); line-height: 1.55; }
.license-step-note code { color: var(--grad-a); }

/* /terms: the EULA, rendered from resources/legal/zeltro-gui-eula.txt */
.terms-body { padding: 10px 0 70px; }
.terms-doc { max-width: 820px; margin: 0 auto; padding: clamp(20px, 4vw, 40px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(10, 18, 50, 0.55); color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.terms-doc h2 { font-size: 1.1rem; color: var(--text); margin: 30px 0 10px; letter-spacing: .02em; scroll-margin-top: 80px; }
.terms-doc p { margin: 0 0 14px; }
.terms-doc a { color: var(--accent-2); }
.terms-title { font-weight: 800; color: var(--text) !important; letter-spacing: .03em; margin-bottom: 4px !important; }
.terms-version { font-size: .9rem; margin-bottom: 22px !important; }
.terms-caps { font-size: .9rem; }
.terms-list { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.beta-submit:disabled { opacity: .7; cursor: progress; transform: none; }