@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  --bg: #0d1117;
  --surface: #111a25;
  --surface-soft: #172232;
  --border: rgba(88, 166, 255, 0.2);
  --text: #e6edf3;
  --muted: #9db0c7;
  --primary: #58a6ff;
  --accent: #00ffd0;
  --max-width: 1140px;
  --radius: 18px;
  --radius-sm: 12px;
  --glow: 0 0 30px rgba(0, 255, 208, 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  background: radial-gradient(circle at 10% 5%, rgba(88, 166, 255, 0.15), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(0, 255, 208, 0.1), transparent 35%), var(--bg);
  color: var(--text);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

.site-video-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -3;
  opacity: 0.24;
  filter: saturate(1.05) contrast(1.08) blur(0.5px);
  pointer-events: none;
}

.site-video-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(120deg, rgba(13, 17, 23, 0.86) 0%, rgba(13, 17, 23, 0.68) 45%, rgba(13, 17, 23, 0.82) 100%),
    radial-gradient(circle at top left, rgba(88, 166, 255, 0.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(0, 255, 208, 0.14), transparent 34%);
  backdrop-filter: blur(0.5px);
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(88, 166, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.17;
  pointer-events: none;
  z-index: -1;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(230, 237, 243, 0.08);
  background: rgba(13, 17, 23, 0.78);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.brand .brand-icon {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 12px rgba(0, 255, 208, 0.3));
}

.brand-logo {
  width: 152px;
  height: auto;
  filter: drop-shadow(0 0 16px rgba(88, 166, 255, 0.22));
}

.brand-text {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-link {
  border-radius: 10px;
  color: var(--muted);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: rgba(88, 166, 255, 0.16);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(230, 237, 243, 0.2);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
}

.mobile-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  margin: 3px auto;
}

main {
  padding: 1.4rem 0 4rem;
}

section {
  margin: 4.5rem 0;
}

.section-title {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.2;
  margin: 0 0 0.8rem;
}

.section-lead {
  max-width: 650px;
  color: var(--muted);
  margin: 0;
}

.hero {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  padding: 2.2rem 0;
}

.pill {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0;
  color: #9af6e7;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  opacity: 0.95;
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(0, 255, 208, 0.35);
}

.hero h1 {
  margin: 1rem 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  font-family: "Space Grotesk", sans-serif;
}

.hero-logo {
  width: 190px;
  height: auto;
  margin-bottom: 0.7rem;
}

.hero p {
  color: var(--muted);
  margin: 0 0 1.5rem;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.22s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(120deg, #58a6ff, #00ffd0);
  color: #081018;
  box-shadow: 0 8px 24px rgba(88, 166, 255, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 0 0 2px rgba(0, 255, 208, 0.2), 0 8px 30px rgba(0, 255, 208, 0.3);
}

.btn-secondary {
  border-color: rgba(88, 166, 255, 0.5);
  color: var(--text);
  background: rgba(88, 166, 255, 0.08);
}

.btn-secondary:hover {
  box-shadow: var(--glow);
  border-color: rgba(0, 255, 208, 0.5);
}

.hero-visual {
  border: 1px solid rgba(230, 237, 243, 0.08);
  border-radius: var(--radius);
  padding: 1rem;
  background: rgba(17, 26, 37, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pixel-window {
  background: #070a10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(230, 237, 243, 0.16);
}

.hero-image {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: rgba(7, 12, 18, 0.95);
}

.pixel-header {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid rgba(230, 237, 243, 0.1);
}

.pixel-header span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(230, 237, 243, 0.3);
}

.pixel-grid {
  height: 270px;
  background-image: linear-gradient(rgba(88, 166, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  position: relative;
}

.pixel-grid::before,
.pixel-grid::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  box-shadow: 0 0 20px rgba(0, 255, 208, 0.3);
}

.pixel-grid::before {
  top: 54px;
  left: 56px;
  background: conic-gradient(from 0deg, #58a6ff 0 25%, transparent 25% 50%, #00ffd0 50% 75%, transparent 75% 100%);
}

.pixel-grid::after {
  right: 60px;
  bottom: 48px;
  background: repeating-linear-gradient(45deg, #58a6ff, #58a6ff 10px, #00ffd0 10px, #00ffd0 20px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.stat-card {
  border: 1px solid rgba(230, 237, 243, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(17, 26, 37, 0.75);
  padding: 0.8rem;
}

.stat-card strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
}

.grid-cards {
  margin-top: 1.4rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  border: 1px solid rgba(230, 237, 243, 0.08);
  background: rgba(17, 26, 37, 0.6);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(88, 166, 255, 0.24);
  background: rgba(17, 26, 37, 0.74);
}

.card h3 {
  margin: 0.5rem 0;
  font-family: "Space Grotesk", sans-serif;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card-icon {
  display: inline-grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid rgba(0, 255, 208, 0.4);
  color: #89ffe9;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.section-heading {
  margin-bottom: 1.2rem;
}

.showcase-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.2rem;
}

.showcase-card {
  border: 1px solid rgba(230, 237, 243, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(17, 26, 37, 0.62);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.showcase-card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  background: rgba(7, 12, 18, 0.85);
  border-bottom: 1px solid rgba(230, 237, 243, 0.12);
}

.showcase-body {
  padding: 1rem 1.05rem 1.15rem;
}

.showcase-body h3 {
  margin: 0 0 0.45rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
}

.showcase-body p {
  margin: 0;
  color: var(--muted);
}

.comparison-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.8rem;
  background: rgba(230, 237, 243, 0.04);
}

.comparison-media figure {
  margin: 0;
}

.comparison-media img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  object-position: center;
  background: rgba(7, 12, 18, 0.85);
  border-radius: 10px;
  border: 1px solid rgba(230, 237, 243, 0.12);
}

.comparison-media figcaption {
  margin-top: 0.45rem;
  color: #9dfbe9;
  font-size: 0.82rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.onion-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.2rem;
}

.onion-card img {
  height: 220px;
}

.demo-wrap {
  margin-top: 1.4rem;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 255, 208, 0.28);
  padding: 1.1rem;
  background: rgba(17, 26, 37, 0.86);
  box-shadow: var(--glow);
}

.demo-wrap img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(230, 237, 243, 0.2);
}

.product-demo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(88, 166, 255, 0.15), transparent 34%),
    radial-gradient(circle at 92% 92%, rgba(0, 255, 208, 0.11), transparent 38%),
    rgba(17, 26, 37, 0.92);
}

.product-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(88, 166, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.25;
  pointer-events: none;
}

.demo-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(0, 255, 208, 0.7);
  box-shadow: 0 0 10px rgba(0, 255, 208, 0.18);
}

.demo-media-shell {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(88, 166, 255, 0.32);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 208, 0.2) inset;
}

.demo-image {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

.pricing-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.5rem;
  border: 1px solid rgba(230, 237, 243, 0.08);
  border-radius: var(--radius);
  padding: 1.4rem;
  background: rgba(17, 26, 37, 0.7);
}

.price {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: "Space Grotesk", sans-serif;
  line-height: 1;
}

.price small {
  color: var(--muted);
  font-size: 0.95rem;
  font-family: "Manrope", sans-serif;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
}

.list li {
  margin: 0.4rem 0;
  color: var(--muted);
}

.faq {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.8rem;
}

.faq details {
  border: 1px solid rgba(230, 237, 243, 0.08);
  background: rgba(17, 26, 37, 0.64);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
}

.faq p {
  margin-bottom: 0.2rem;
  color: var(--muted);
}

.site-footer {
  border-top: 1px solid rgba(230, 237, 243, 0.1);
  padding: 2rem 0;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-logo {
  width: 140px;
  height: auto;
  margin-bottom: 0.35rem;
}

.footer-links a:hover {
  color: var(--accent);
}

.page-head {
  margin-bottom: 1.6rem;
}

.page-head h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
}

.page-head p {
  margin: 0.75rem 0 0;
  color: var(--muted);
  max-width: 66ch;
}

.download-layout,
.contact-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-buttons {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.install-steps {
  margin-top: 0.4rem;
  padding-left: 1.1rem;
}

.install-steps li {
  margin: 0.55rem 0;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: "JetBrains Mono", monospace;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.8rem;
}

.table th,
.table td {
  text-align: left;
  border-bottom: 1px solid rgba(230, 237, 243, 0.15);
  padding: 0.65rem 0.3rem;
}

.table th {
  color: var(--text);
}

.docs-layout {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 260px 1fr;
}

.docs-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  border: 1px solid rgba(88, 166, 255, 0.24);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(17, 26, 37, 0.86);
}

.docs-sidebar a {
  display: block;
  color: var(--muted);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.docs-sidebar a:hover,
.docs-sidebar a.active {
  color: var(--text);
  background: rgba(88, 166, 255, 0.18);
}

.docs-block {
  border: 1px solid rgba(230, 237, 243, 0.08);
  border-radius: 14px;
  padding: 1.1rem;
  background: rgba(17, 26, 37, 0.64);
  margin-bottom: 1rem;
}

.docs-block h2 {
  margin-top: 0.1rem;
  font-family: "Space Grotesk", sans-serif;
}

.contact-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(230, 237, 243, 0.2);
  background: rgba(13, 17, 23, 0.95);
  color: var(--text);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  font: inherit;
}

.contact-form textarea {
  min-height: 132px;
  resize: vertical;
}

.contact-form .field {
  margin-bottom: 0.95rem;
}

.form-success {
  margin-top: 1rem;
  color: #8dffea;
  display: none;
}

.form-success.visible {
  display: block;
}

.support-card {
  border: 1px solid rgba(230, 237, 243, 0.08);
  border-radius: var(--radius);
  padding: 1.15rem;
  background: rgba(17, 26, 37, 0.68);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 255, 208, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 208, 0.25);
  }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-grid,
  .onion-grid {
    grid-template-columns: 1fr;
  }

  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    position: static;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
  }

  .docs-sidebar a {
    white-space: nowrap;
  }

  .download-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-logo {
    width: 162px;
  }

  .brand-logo {
    width: 132px;
  }

  .mobile-toggle {
    display: inline-block;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .site-nav.open .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    padding-top: 0.55rem;
  }

  .site-nav.open .nav-cta {
    display: flex;
    width: 100%;
    padding: 0.55rem 0 0.9rem;
  }

  .nav-inner {
    flex-wrap: wrap;
  }

  .pricing-panel {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  section {
    margin: 3.7rem 0;
  }

  .grid-cards {
    grid-template-columns: 1fr;
  }

  .showcase-card img {
    height: 220px;
  }
}

/* ── Accounts: auth pages, nav state, and the license dashboard ───────────── */

.form-error {
  margin-top: 1rem;
  color: #ff9d9d;
  display: none;
}

.form-error.visible {
  display: block;
}

.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.nav-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.auth-layout {
  max-width: 430px;
  margin: 0 auto;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(230, 237, 243, 0.14);
}

.btn-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid rgba(230, 237, 243, 0.22);
  background: rgba(13, 17, 23, 0.9);
  color: var(--text);
}

.btn-google:hover {
  border-color: var(--primary);
}

.auth-alt {
  margin-top: 1.15rem;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

.auth-inline-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

.license-key {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}

.license-key code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(13, 17, 23, 0.95);
  color: var(--accent);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-active {
  background: rgba(0, 255, 208, 0.14);
  color: #8dffea;
}

.badge-inactive {
  background: rgba(255, 120, 120, 0.14);
  color: #ff9d9d;
}

.device-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.state-block {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--muted);
}

/* ── Onion skin demo ─────────────────────────────────────────────────────── */
.onion-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
}

.onion-media {
  display: flex;
  justify-content: center;
}

/* The checkerboard behind the sprite is part of the capture, so the frame just
   needs a quiet border — no background of its own. */
.onion-video {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(88, 166, 255, 0.22);
  /* Keeps the pixel grid crisp if the element renders larger than the source. */
  image-rendering: pixelated;
  display: block;
}

.onion-legend {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onion-legend li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #c9d1d9;
  line-height: 1.55;
}

.onion-legend .dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Matches the tints the compositor applies to onion frames. */
.dot-prev { background: rgb(220, 60, 60); }
.dot-next { background: rgb(60, 120, 220); }

@media (max-width: 860px) {
  .onion-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .onion-copy { order: 2; }
  .onion-media { order: 1; }
}

/* ============================================================
   Install guide
   ------------------------------------------------------------
   Talixel's installer is unsigned, so Windows and every major
   browser interrupt the download and the first run. Buyers who
   have never installed indie software read those interruptions
   as "this is malware" and ask for a refund.

   These styles build faithful *replicas* of the two dialogs in
   plain HTML, rather than screenshots: they stay sharp at any
   zoom, survive Windows restyling better than a stale PNG, and
   let the button you actually need to press be highlighted.
   They are deliberately light-on-dark so they read as system
   UI quoted inside the page, never as the page's own chrome.
   ============================================================ */

.guide-steps {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide;
}

.guide-step {
  counter-increment: guide;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  align-items: start;
}

.guide-step::before {
  content: counter(guide);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.guide-step h3 {
  margin: 6px 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
}

.guide-step p {
  margin: 0 0 12px;
  color: #c9d1d9;
}

/* --- Replica of a Windows / browser dialog ---------------- */

.win-dialog {
  max-width: 520px;
  margin: 18px 0 10px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;
  color: #1b1b1b;
  font-family: "Segoe UI", Manrope, system-ui, sans-serif;
  line-height: 1.45;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.15);
  user-select: none;
}

.win-dialog__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #e6e6e6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
  color: #5a5a5a;
}

.win-dialog__body {
  padding: 20px 22px 8px;
}

.win-dialog__title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f4a8a;
}

.win-dialog__text {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #3a3a3a;
}

.win-dialog__meta {
  margin: 14px 0 4px;
  font-size: 0.85rem;
  color: #3a3a3a;
}

.win-dialog__meta div {
  margin-bottom: 3px;
}

.win-dialog__meta strong {
  display: inline-block;
  min-width: 74px;
  font-weight: 600;
}

.win-link {
  display: inline-block;
  color: #0a66c2;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: default;
}

.win-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
}

.win-btn {
  min-width: 108px;
  padding: 7px 16px;
  border-radius: 4px;
  border: 1px solid #b9b9b9;
  background: #fdfdfd;
  color: #1b1b1b;
  font-family: inherit;
  font-size: 0.86rem;
  cursor: default;
}

/* The one control the reader is being told to press. */
.win-btn.is-target,
.win-link.is-target {
  position: relative;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 255, 208, 0.85), 0 0 22px rgba(0, 255, 208, 0.55);
  font-weight: 700;
  z-index: 1;
}

.win-link.is-target {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 255, 208, 0.16);
}

/* Browser download shelf, e.g. Chrome's downloads bubble. */
.dl-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
}

.dl-bubble__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff4e5;
  color: #b45309;
  font-size: 1.05rem;
}

.dl-bubble__text {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}

.dl-bubble__name {
  font-weight: 600;
  color: #1b1b1b;
}

.dl-bubble__sub {
  color: #5a5a5a;
}

.figure-cap {
  margin: 0 0 4px;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

/* --- Reassurance blocks ----------------------------------- */

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  margin: 26px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: rgba(0, 255, 208, 0.06);
}

.callout__icon {
  font-size: 1.4rem;
  line-height: 1.2;
}

.callout p {
  margin: 0 0 8px;
  color: #c9d1d9;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.08rem;
}

.reassure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.reassure {
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(17, 26, 37, 0.72);
}

.reassure h3 {
  margin: 0 0 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.reassure p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Copyable checksum / command line. */
.code-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 10px 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(9, 13, 19, 0.85);
}

.code-line code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .guide-step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .win-dialog__actions {
    flex-direction: column-reverse;
  }
  .win-btn {
    width: 100%;
  }
}

/* Price, licence model and platform, answered at the hero rather than three
   scrolls down where a hesitant visitor never reaches. */
.hero-meta {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* The dialog replicas are light UI quoted inside a dark page, so they must not
   inherit the page's text colours. `.guide-step p` (0,1,1) outranks a bare
   `.win-dialog__title` (0,1,0), which painted the Windows text in the page's
   near-white and left it unreadable on light grey. These re-assert the light-UI
   palette at a specificity the surrounding page cannot override. */
.win-dialog .win-dialog__title {
  color: #0f4a8a;
}

.win-dialog .win-dialog__text,
.win-dialog .win-dialog__meta {
  color: #3a3a3a;
}

.guide-step .figure-cap {
  color: var(--muted);
}

/* The pricing panel's second track is `auto`, so it grows to its widest
   content. On the pricing page that column carries the Paddle reseller
   disclosure, which is long enough to swallow the panel and squeeze the
   feature list into a three-words-per-line ribbon. Capping the column keeps
   the list readable while leaving the home page's button-only variant, which
   has no .pricing-cta, sized to its content as before. */
.pricing-cta {
  max-width: 420px;
}

/* The global `a { color: inherit }` made the link out of the reassurance
   callouts read as ordinary body text, so the one thing a nervous buyer most
   needs to click looked like a sentence. Give it a button's affordance. */
.callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: rgba(0, 255, 208, 0.08);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.94rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.callout-cta:hover,
.callout-cta:focus-visible {
  background: rgba(0, 255, 208, 0.16);
  box-shadow: var(--glow);
}

.callout-cta .arrow {
  transition: transform 0.2s ease;
}

.callout-cta:hover .arrow {
  transform: translateX(4px);
}

/* ============================================================
   Legal pages
   ------------------------------------------------------------
   Terms, privacy and refunds are long-form prose, which the rest
   of the site's marketing rhythm doesn't suit. Constrain the
   measure to something readable and give the headings enough air
   that the document can be skimmed for the one clause someone
   actually came for.
   ============================================================ */

.legal {
  max-width: 72ch;
}

.legal h2 {
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  color: var(--text);
}

.legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal h3 {
  margin: 26px 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  color: var(--primary);
}

.legal p {
  margin: 0 0 14px;
  color: #c9d1d9;
}

.legal .list {
  margin-bottom: 18px;
}

.legal a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: var(--accent);
}

.legal .table {
  margin: 6px 0 18px;
}

/* Honeypot: off-screen rather than display:none, since some bots skip hidden
   inputs but still fill anything positioned out of view. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}