/* =========================================================
   NovaQuant — shared site stylesheet
   Consolidated from the original NovaQuant_Intro.html /
   NovaQuant_Why.html inline styles into a single sheet
   so every page renders identically.
   ========================================================= */

:root {
  --bg:#03060d;
  --bg-2:#081121;
  --bg-3:#0b1933;
  --panel:rgba(8, 14, 27, .82);
  --panel-soft:rgba(10, 18, 34, .66);
  --text:#eef7ff;
  --muted:#9fb4d7;
  --cyan:#22d6ff;
  --blue:#2f7fff;
  --violet:#8357ff;
  --magenta:#ca5eff;
  --hero-grad:linear-gradient(135deg,#93f1ff 0%,#57c0ff 24%,#5f8fff 56%,#9565ff 80%,#ebb4ff 100%);
  --max:1240px;
  --nav-offset:64px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-offset) - 2px); }
body {
  margin:0;
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 16%, rgba(34,214,255,.23), transparent 18%),
    radial-gradient(circle at 87% 12%, rgba(202,94,255,.18), transparent 18%),
    radial-gradient(circle at 72% 76%, rgba(47,127,255,.20), transparent 22%),
    linear-gradient(180deg,#010207 0%, #040913 16%, #07111e 52%, #050914 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::before, body::after {
  content:"";
  position:fixed;
  width:34rem;
  height:34rem;
  border-radius:999px;
  filter:blur(96px);
  pointer-events:none;
  z-index:0;
}
body::before {
  right:-10rem;
  top:-12rem;
  opacity:.68;
  background:radial-gradient(circle, rgba(34,214,255,.34), transparent 64%);
}
body::after {
  left:-11rem;
  bottom:-12rem;
  opacity:.62;
  background:radial-gradient(circle, rgba(133,85,255,.32), transparent 64%);
}

.shell { position:relative; z-index:1; }
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
section { padding:14px 0 34px; scroll-margin-top: calc(var(--nav-offset) - 2px); }

/* ---------- Top navigation ---------- */
.nav-wrap {
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid rgba(112,157,255,.12);
  background:linear-gradient(180deg, rgba(3,6,12,.92), rgba(3,6,12,.78));
  backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  /* Was overflow:hidden — that clipped nav-links silently when they
     didn't fit on one row at medium widths.  No rounded corners on
     nav-wrap, so nothing visual relied on the clip; removing it lets
     nav-links wrap to a second row instead of disappearing. */
}
.nav {
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:grid;
  /* minmax(0, 1fr) lets the nav-links cell shrink below its intrinsic
     content width, which then forces flex-wrap on the nav pills.
     With plain `1fr` the cell expanded to fit content and wrap never
     triggered, so pills overflowed silently. */
  grid-template-columns:auto minmax(0, 1fr);
  gap:12px 20px;
  align-items:center;
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.brand-mark {
  width:46px; height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  padding:5px;
  background:linear-gradient(180deg, rgba(12,18,32,.96), rgba(6,10,18,.96));
  border:1px solid rgba(100,192,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 30px rgba(34,214,255,.10);
  flex:0 0 auto;
}
.brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.brand-copy strong { display:block; font-size:1rem; }
.brand-copy span { display:block; color:var(--muted); font-size:.88rem; margin-top:2px; }

.nav-links {
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  row-gap:6px;
  padding-bottom:2px;
}
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:.92rem;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:.2s ease;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--text);
  border-color:rgba(104,198,255,.24);
  background:linear-gradient(180deg, rgba(15,24,44,.92), rgba(9,16,30,.88));
  box-shadow:0 0 28px rgba(34,214,255,.12), 0 0 20px rgba(133,85,255,.08);
  transform:translateY(-1px);
}

/* ---------- Hero ---------- */
.hero {
  padding:52px 0 18px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:34px;
  align-items:stretch;
  grid-auto-rows:1fr;
}
.hero > div { min-width:0; min-height:100%; display:flex; }

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(109,198,255,.24);
  background:linear-gradient(180deg, rgba(10,17,31,.88), rgba(8,14,26,.82));
  color:#dcecff;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.84rem;
  box-shadow:0 0 24px rgba(34,214,255,.10);
}
.eyebrow::before {
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan), var(--magenta));
  box-shadow:0 0 16px rgba(34,214,255,.34);
}
h1 {
  margin:20px 0 18px;
  font-size:clamp(3rem, 6vw, 5rem);
  line-height:.95;
  letter-spacing:-.058em;
  max-width:12ch;
}
.gradient-text {
  background:linear-gradient(90deg,#eefaff 0%, #abecff 24%, #78baff 48%, #ac7bff 78%, #efc6ff 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
.lead {
  margin:0;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.76;
  max-width:46rem;
}

/* ---------- Buttons ---------- */
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
  margin-bottom:8px;
  width:100%;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:0 22px;
  border-radius:18px;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:.2s ease;
  font-family:inherit;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn:focus { outline:none; }
.btn:focus-visible {
  outline:3px solid rgba(34,214,255,.55);
  outline-offset:3px;
}
.btn-primary {
  color:#07111d;
  background:var(--hero-grad);
  box-shadow:0 22px 56px rgba(107,136,255,.24), 0 0 42px rgba(34,214,255,.14), 0 0 24px rgba(202,94,255,.08);
}
.btn-secondary {
  color:var(--text);
  border-color:rgba(109,198,255,.18);
  background:linear-gradient(180deg, rgba(11,17,31,.95), rgba(7,12,22,.94));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 24px rgba(34,214,255,.06);
}

/* Stripe + PayPal payment buttons — visually equal, no
   dimming, same prominence.  Both use the full hero gradient
   and the same shadow palette as .btn-primary.  The class
   exists alongside .btn-primary so the markup can read as
   "Stripe primary, PayPal alt" in the source while looking
   identical in the rendered UI — neither feels like a
   second-class option. */
.btn-payment-alt {
  color:#07111d;
  background:var(--hero-grad);
  box-shadow:
    0 22px 56px rgba(107,136,255,.24),
    0 0 42px rgba(34,214,255,.14),
    0 0 24px rgba(202,94,255,.08);
}
.btn-payment-alt:hover {
  box-shadow:
    0 26px 62px rgba(107,136,255,.30),
    0 0 50px rgba(34,214,255,.18),
    0 0 28px rgba(202,94,255,.10);
}

/* ---------- Grid layouts ---------- */
.hero-points, .grid-3, .grid-2, .footer-grid, .workflow-grid {
  display:grid;
  gap:18px;
  align-items:stretch;
}
.hero-points, .grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2, .footer-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.workflow-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }

.hero-points > *, .grid-3 > *, .grid-2 > *, .footer-grid > *, .workflow-grid > * {
  min-width:0;
  min-height:100%;
  display:flex;
  align-self:stretch;
}

/* ---------- Cards / panels ---------- */
.panel, .card, .footer-card, .workflow-step {
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(10,16,29,.88), rgba(6,11,20,.94));
  border:1px solid rgba(110,188,255,.14);
  box-shadow:0 18px 46px rgba(0,0,0,.35), 0 0 24px rgba(34,214,255,.04), 0 0 0 1px rgba(255,255,255,.03) inset;
  border-radius:24px;
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel, .card, .workflow-step { padding:22px; }
.card::before, .panel::before, .workflow-step::after {
  content:"";
  position:absolute;
  inset:auto -20% -25% auto;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,214,255,.16), rgba(133,85,255,.08) 44%, transparent 68%);
}
.card h3, .panel h3, .card strong, .workflow-step h3 {
  display:block;
  font-size:1.12rem;
  letter-spacing:-.03em;
  margin:0 0 8px;
}
.card p, .panel p, .card span, .section-head p, .workflow-step p {
  color:var(--muted);
  line-height:1.72;
  margin:0;
}

.workflow-step::before {
  content:attr(data-step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  margin-bottom:12px;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  box-shadow:0 12px 26px rgba(107,136,255,.18);
  position:relative;
  z-index:1;
}

/* ---------- Logo stage (hero right column) ---------- */
.logo-stage {
  min-height:100%;
  display:grid;
  place-items:center;
  padding:30px 24px;
  border-radius:28px;
  background:
    radial-gradient(circle at center, rgba(34,214,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(8,13,24,.94), rgba(6,10,18,.96));
  border:1px solid rgba(109,198,255,.18);
  box-shadow:0 34px 90px rgba(0,0,0,.52), 0 0 42px rgba(34,214,255,.09), 0 0 60px rgba(133,85,255,.06), 0 0 0 1px rgba(255,255,255,.03) inset;
  position:relative;
  overflow:hidden;
  width:100%;
}
.logo-stage img {
  position:relative;
  z-index:1;
  width:min(100%, 340px);
  height:auto;
  filter:drop-shadow(0 0 40px rgba(34,214,255,.18)) drop-shadow(0 0 20px rgba(133,85,255,.12));
}

.hero-divider {
  height:1px;
  margin:4px 0 2px;
  background:linear-gradient(90deg, transparent, rgba(94,194,255,.40), rgba(164,105,255,.34), rgba(202,94,255,.24), transparent);
  opacity:.95;
}

/* ---------- Section headings + lists ---------- */
.section-head {
  max-width:880px;
  margin-bottom:18px;
}
.label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(109,198,255,.20);
  color:#d7ecff;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  background:linear-gradient(180deg, rgba(10,17,31,.86), rgba(8,14,26,.80));
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 0 24px rgba(34,214,255,.10);
}
.label::before {
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan), var(--magenta));
}
h2 {
  margin:0 0 12px;
  font-size:clamp(2rem, 3.6vw, 3.25rem);
  line-height:1.04;
  letter-spacing:-.04em;
}

.list {
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:12px;
}
.list li {
  position:relative;
  padding-left:18px;
  color:var(--muted);
  line-height:1.68;
}
.list li::before {
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  box-shadow:0 0 18px rgba(34,214,255,.20), 0 0 12px rgba(202,94,255,.10);
}

/* ---------- Pricing ---------- */
.price-tile {
  position:relative;
  overflow:hidden;
  padding:34px 32px;
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34,214,255,.16), transparent 38%),
    radial-gradient(circle at 90% 110%, rgba(202,94,255,.12), transparent 50%),
    linear-gradient(180deg, rgba(10,16,29,.92), rgba(6,11,20,.96));
  border:1px solid rgba(109,198,255,.22);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 60px rgba(34,214,255,.10),
    0 0 60px rgba(133,85,255,.08),
    0 0 0 1px rgba(255,255,255,.03) inset;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:30px;
  align-items:stretch;
  width:100%;
}
.price-tile > * { min-width:0; }
.price-tile .price-head {
  display:flex; flex-direction:column; gap:14px;
}
.price-badge {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  box-shadow:0 8px 22px rgba(107,136,255,.24);
}
.price-amount {
  display:flex;
  align-items:baseline;
  gap:10px;
  line-height:1;
  letter-spacing:-.04em;
}
.price-amount .num {
  font-size:clamp(3rem, 6vw, 4.6rem);
  font-weight:800;
  background:linear-gradient(90deg,#eefaff 0%, #abecff 28%, #78baff 56%, #ac7bff 84%, #efc6ff 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
.price-amount .per {
  color:var(--muted);
  font-size:1.05rem;
}
.price-amount .currency {
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.price-microcopy {
  color:var(--muted);
  line-height:1.72;
  margin:0;
  font-size:.98rem;
}
.price-features {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.price-features li {
  position:relative;
  padding-left:26px;
  color:var(--muted);
  line-height:1.65;
}
.price-features li::before {
  content:"";
  position:absolute;
  left:0; top:.34em;
  width:14px; height:14px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan), var(--magenta));
  box-shadow:0 0 18px rgba(34,214,255,.24), 0 0 12px rgba(202,94,255,.14);
}
.price-features li::after {
  content:"";
  position:absolute;
  left:4px; top:.66em;
  width:6px; height:3px;
  border-left:2px solid #07111d;
  border-bottom:2px solid #07111d;
  transform:rotate(-45deg);
}
/* Calm caption above the two payment buttons in the pricing tile.
   Frames the choice as a preference, not a sales push. */
.price-cta-intro {
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: .005em;
}

.price-cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:18px;
}
.price-cta-row .btn { flex:1 1 auto; min-width:200px; }
.price-foot {
  margin-top:12px;
  font-size:.86rem;
  color:var(--muted);
  letter-spacing:.02em;
}
.price-foot strong { color:var(--text); }

@media (max-width: 880px) {
  .price-tile {
    grid-template-columns:1fr;
    padding:28px 24px;
    gap:20px;
  }
}

/* CTAs whose URL is empty / placeholder in config.js get the
   .cta-pending class from site.js.  In manual-fulfillment mode
   (NOVAQUANT_DOWNLOAD_URL = "" and any future blank
   PAYPAL_PAYMENT_LINK), we hide them outright instead of leaving
   a "(coming soon)" stub that could confuse real customers. */
.btn.cta-pending {
  display:none !important;
}

/* Email / mailto CTAs — visible but clearly different from
   the primary purchase / download CTAs.  Reads as a "contact"
   surface, not a payment surface. */
.btn-email {
  color:var(--text);
  background:linear-gradient(180deg, rgba(20,32,58,.96), rgba(13,21,40,.96));
  border-color:rgba(143,186,255,.32);
  box-shadow:
    0 18px 38px rgba(60,98,180,.20),
    0 0 28px rgba(34,214,255,.10),
    0 0 0 1px rgba(255,255,255,.04) inset;
}
.btn-email::before {
  content:"✉";
  font-weight:600;
  font-size:1.05em;
  display:inline-block;
  transform:translateY(-1px);
}

/* Activation flow — emphasises the human-in-the-loop email
   step so the customer doesn't expect instant access. */
.activation-flow {
  display:grid;
  gap:14px;
  list-style:none;
  padding:0;
  margin:18px 0 0;
  counter-reset:astep;
}
.activation-flow > li {
  position:relative;
  padding:20px 22px 20px 78px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(10,16,29,.82), rgba(6,11,20,.92));
  border:1px solid rgba(110,188,255,.16);
  box-shadow:0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.02) inset;
  color:var(--muted);
  line-height:1.72;
}
.activation-flow > li::before {
  counter-increment:astep;
  content:counter(astep, decimal-leading-zero);
  position:absolute;
  left:18px; top:18px;
  width:46px; height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  font-size:.95rem;
  box-shadow:0 14px 30px rgba(107,136,255,.22);
}
.activation-flow > li strong {
  display:block;
  color:var(--text);
  margin-bottom:6px;
  font-size:1.06rem;
  letter-spacing:-.01em;
}
.activation-flow > li code {
  padding:1px 8px;
  border-radius:8px;
  background:rgba(34,214,255,.10);
  border:1px solid rgba(109,198,255,.22);
  color:var(--text);
  font-size:.92em;
}

/* Copy-to-clipboard fallback panel — for customers whose mail
   app doesn't open from a mailto:.  Sits directly below the
   primary Email activation request CTA on download.html /
   quick-start.html / support.html.  Visible email + Copy email
   + Copy activation template buttons. */
.copy-fallback {
  margin-top:18px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,16,29,.74), rgba(8,13,24,.66));
  border:1px solid rgba(109,198,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.copy-fallback-note {
  margin:0 0 12px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.55;
}
.copy-fallback-note strong { color:var(--text); }
.copy-fallback-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.copy-fallback-email {
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:12px;
  background:rgba(34,214,255,.10);
  border:1px solid rgba(109,198,255,.28);
  color:var(--text);
  font-size:.95rem;
  font-family:inherit;
  letter-spacing:.005em;
  user-select:all;
}

/* Smaller utility-style button that pairs with the copy-fallback
   panel.  Same border-radius family as .btn but quieter, so it
   reads as a fallback control rather than a payment CTA. */
.btn-copy {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:0 16px;
  border-radius:12px;
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--text);
  background:linear-gradient(180deg, rgba(15,24,44,.92), rgba(9,16,30,.88));
  border:1px solid rgba(109,198,255,.24);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 18px rgba(34,214,255,.05);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:.2s ease;
}
.btn-copy:hover {
  border-color:rgba(34,214,255,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 0 24px rgba(34,214,255,.14);
  transform:translateY(-1px);
}
.btn-copy:active { transform:translateY(0); }
.btn-copy:focus { outline:none; }
.btn-copy:focus-visible {
  outline:3px solid rgba(34,214,255,.55);
  outline-offset:2px;
}
.btn-copy.is-copied {
  color:#5effa2;
  border-color:rgba(94,255,162,.40);
  box-shadow:0 0 0 1px rgba(94,255,162,.10) inset, 0 0 24px rgba(94,255,162,.18);
}

/* Inline support callout used at the bottom of pages. */
.support-callout {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin-top:18px;
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(10,16,29,.62), rgba(8,13,24,.58));
  border:1px solid rgba(109,198,255,.14);
  color:var(--muted);
  font-size:.96rem;
  line-height:1.6;
}
.support-callout a {
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(109,198,255,.36);
  padding-bottom:1px;
}
.support-callout a:hover { border-bottom-color:var(--cyan); }

/* ---------- Skip-to-content (accessibility) ----------
   Visually hidden until keyboard-focused, then floats above
   the sticky nav so screen-reader / keyboard users can jump
   straight past navigation to the main content. */
.skip-link {
  position:absolute;
  top:-40px;
  left:12px;
  z-index:100;
  padding:10px 16px;
  border-radius:12px;
  background:var(--hero-grad);
  color:#07111d;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(107,136,255,.32);
  transition:top .2s ease;
}
.skip-link:focus {
  top:12px;
  outline:3px solid var(--cyan);
  outline-offset:2px;
}

/* ---------- Footer legal-links row ----------
   Sits below the existing two-card footer grid on every
   page.  Renders as a tidy row of pill-style links —
   Terms, Privacy, Refunds, Disclaimer, FAQ, Contact. */
.footer-legal {
  margin-top:18px;
  padding:18px 22px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,13,24,.62), rgba(6,10,18,.66));
  border:1px solid rgba(109,198,255,.12);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-legal-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px 6px;
  align-items:center;
}
.footer-legal-row a {
  color:var(--muted);
  text-decoration:none;
  padding:2px 4px;
  font-size:.86rem;
  border:0;
  background:transparent;
  transition:color .2s ease;
}
.footer-legal-row a:hover {
  color:var(--text);
}
.footer-legal-row .sep {
  color:var(--muted);
  opacity:.4;
  user-select:none;
}
.footer-legal-fineprint {
  color:var(--muted);
  font-size:.82rem;
  line-height:1.6;
  letter-spacing:.01em;
  opacity:.85;
}
.footer-legal-fineprint a {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(109,198,255,.32);
  text-underline-offset:3px;
}

/* ---------- Legal/long-form page typography ----------
   Used by terms.html, privacy.html, refunds.html,
   disclaimer.html, faq.html.  Optimised for reading
   density: narrower text column, generous line-height,
   clear h2/h3 hierarchy, and softer card backgrounds. */
.legal-shell {
  max-width: 880px;
  margin: 0 auto;
}
.legal-shell h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 30px 0 12px;
  letter-spacing: -.04em;
  line-height: 1.05;
  max-width: none;
}
.legal-shell h2 {
  margin-top: 40px;
  font-size: 1.5rem;
  letter-spacing: -.02em;
}
.legal-shell h3 {
  margin-top: 26px;
  margin-bottom: 4px;
  font-size: 1.08rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.legal-shell p,
.legal-shell li {
  color: var(--muted);
  line-height: 1.78;
  font-size: 1.02rem;
}
.legal-shell strong { color: var(--text); }
.legal-shell ul, .legal-shell ol {
  padding-left: 22px;
  margin: 10px 0 14px;
}
.legal-shell li { margin-bottom: 8px; }
.legal-shell a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(109,198,255,.36);
  padding-bottom: 1px;
}
.legal-shell a:hover { border-bottom-color: var(--cyan); }
.legal-shell code {
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(34,214,255,.10);
  border: 1px solid rgba(109,198,255,.22);
  color: var(--text);
  font-size: .92em;
}
.legal-shell .meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}
.legal-shell .legal-card {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  border: 1px solid rgba(110,188,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.legal-shell .legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 6px;
  padding: 0;
  list-style: none;
}
.legal-shell .legal-toc li { margin: 0; }
.legal-shell .legal-toc a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .88rem;
  background: linear-gradient(180deg, rgba(10,17,31,.86), rgba(8,14,26,.82));
  border: 1px solid rgba(109,198,255,.20);
  color: var(--muted);
}
.legal-shell .legal-toc a:hover {
  color: var(--text);
  border-color: rgba(109,198,255,.36);
}

/* ---------- FAQ accordion (no JS — uses <details>) ---------- */
.faq-list {
  display:grid;
  gap:12px;
  margin-top:18px;
}
.faq-item {
  border-radius:16px;
  border:1px solid rgba(110,188,255,.14);
  background:linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.faq-item > summary {
  cursor:pointer;
  list-style:none;
  padding:18px 22px;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:1.02rem;
  letter-spacing:-.01em;
}
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary::after {
  content:"+";
  font-size:1.2rem;
  font-weight:700;
  color:var(--muted);
  transition:transform .2s ease, color .2s ease;
}
.faq-item[open] > summary::after {
  transform:rotate(45deg);
  color:var(--cyan);
}
.faq-item > .faq-body {
  padding:0 22px 18px;
  color:var(--muted);
  line-height:1.74;
}
.faq-item > .faq-body :first-child { margin-top:0; }
.faq-item > .faq-body :last-child  { margin-bottom:0; }

/* ---------- Quick-start specific ---------- */
.steps {
  display:grid;
  gap:14px;
  list-style:none;
  padding:0;
  margin:18px 0 0;
  counter-reset:step;
}
.steps > li {
  position:relative;
  padding:18px 22px 18px 70px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  border:1px solid rgba(110,188,255,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.02) inset;
  color:var(--muted);
  line-height:1.72;
}
.steps > li::before {
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:18px; top:18px;
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  font-size:.85rem;
  box-shadow:0 12px 26px rgba(107,136,255,.18);
}
.steps > li strong {
  display:block;
  color:var(--text);
  margin-bottom:4px;
  font-size:1.04rem;
}

.note {
  margin-top:18px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(34,214,255,.06), rgba(133,85,255,.04));
  border:1px solid rgba(109,198,255,.20);
  color:var(--muted);
  line-height:1.72;
}
.note strong { color:var(--text); display:block; margin-bottom:4px; }
.note.warn {
  background:linear-gradient(180deg, rgba(255,180,80,.07), rgba(255,80,140,.05));
  border-color:rgba(255,170,80,.22);
}

.kv {
  display:grid;
  grid-template-columns:minmax(0, 0.36fr) minmax(0, 0.64fr);
  gap:12px 20px;
  margin:0;
  padding:0;
}
.kv dt {
  color:var(--text);
  font-weight:600;
}
.kv dd {
  color:var(--muted);
  margin:0;
  line-height:1.68;
}

/* ---------- Footer ---------- */
.footer { padding:4px 0 40px; }
.footer-card { padding:24px; }
.footer-brand {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.footer-brand img {
  width:56px; height:56px; object-fit:contain;
  border-radius:16px;
  background:rgba(9,15,27,.92);
  padding:6px;
  border:1px solid rgba(109,188,255,.16);
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.footer-links a {
  color:var(--muted);
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(104,180,255,.16);
  background:linear-gradient(180deg, rgba(10,16,29,.72), rgba(8,13,24,.66));
  transition:.2s ease;
}
.footer-links a:hover {
  color:var(--text);
  border-color:rgba(104,198,255,.32);
  transform:translateY(-1px);
}
.fine-print {
  margin-top:14px;
  color:var(--muted);
  line-height:1.72;
  font-size:.95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero, .hero-points, .grid-3, .grid-2, .footer-grid, .workflow-grid { grid-template-columns:1fr; }
  .hero { grid-auto-rows:auto; }
  .hero > div, .hero-points > *, .grid-3 > *, .grid-2 > *, .footer-grid > *, .workflow-grid > * { display:block; }
}
@media (max-width: 720px) {
  .container, .nav { padding-left:16px; padding-right:16px; }
  h1 { font-size:clamp(2.5rem, 10vw, 4rem); }
  .nav { grid-template-columns:1fr; align-items:start; row-gap:10px; }
  .nav-links { grid-column:auto; justify-content:flex-start; }
  .logo-stage img { width:min(100%, 280px); }
  .hero { gap:28px; }
  .hero-actions { width:100%; gap:12px; margin-top:26px; margin-bottom:12px; }
  /* Was flex:1 1 0 — fine for 2 buttons but squished labels when hero rows
     grew to 3 buttons (Stripe + PayPal + Why on index, Download + Email +
     Manage on download.html).  flex-basis 240px lets each button hold its
     full label and wrap to a new row when the screen can't fit them all. */
  .hero-actions .btn { flex:1 1 240px; min-width:0; }
  .hero-points { margin-top:22px; }
  .hero-points .card, .hero-points .panel { padding-top:24px; }
  .kv { grid-template-columns:1fr; gap:6px 0; }
  .kv dt { margin-top:10px; }
  .steps > li { padding:16px 18px 16px 64px; }
  .nav-links {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 4px;
    margin-top:2px;
    background:linear-gradient(180deg, rgba(3,6,12,.98), rgba(3,6,12,.94));
    border-top:1px solid rgba(255,255,255,.02);
  }
}