/* =========================================================
   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) auto;
  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. We hide them outright rather
   than leaving a dead "(coming soon)" stub that confuses real
   customers. */
.btn.cta-pending {
  display:none !important;
}

/* 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); }
  /* Mobile nav: keep the brand on the top row, drop the nav-links
     onto a second full-width row so they wrap cleanly on small screens. */
  .nav {
    grid-template-columns:1fr;
    align-items:center;
    row-gap:10px;
  }
  .brand        { grid-column:1; grid-row:1; }
  .nav-links    { grid-column:1; grid-row:2; 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; }
  .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);
  }
}



/* =========================================================
   Thank-you / next-steps page + reusable step list
   --------------------------------------------------------- */
.thanks-shell { max-width: 720px; }
.thanks-lead {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.72;
  margin: 6px 0 26px;
  max-width: 60ch;
}
.thanks-steps {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  counter-reset: thstep;
}
.thanks-steps > 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;
}
.thanks-steps > li::before {
  counter-increment: thstep;
  content: counter(thstep, 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);
}
.thanks-steps > li strong {
  display: block;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 1.06rem;
  letter-spacing: -.01em;
}
.thanks-steps > 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;
}
.thanks-actions { margin-top: 26px; }
.thanks-foot {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.65;
}

/* "Payment received" badge revealed by query-string detection on
   /thank-you. Purely visual reassurance for customers arriving from
   the Stripe / PayPal post-payment redirect. */
.thanks-paid-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 18px 0 6px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(94, 255, 162, .12), rgba(34, 214, 255, .10));
  border: 1px solid rgba(94, 255, 162, .42);
  color: var(--text);
  font-size: .96rem;
  line-height: 1.55;
  box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 28px rgba(94,255,162,.10);
}
.thanks-paid-banner strong {
  color: #5effa2;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(94,255,162,.10);
  border: 1px solid rgba(94,255,162,.32);
}
.thanks-paid-banner span { color: var(--muted); }

/* =========================================================
   Post-purchase support — inline chip + thank-you card
   --------------------------------------------------------- */

/* "Already subscribed?  [Send your setup details →]"
   Secondary helper sitting directly under the Subscribe buttons.
   Muted contextual label + a real .btn .btn-secondary action.
   The split (text question + button action) is what makes the
   element read as a finished, intentional component rather than
   a text-heavy button.

   Scaling:
   - Primary Subscribe buttons are 54px tall, 1rem text, weight 700.
   - This secondary helper is intentionally smaller at 48px tall,
     .94rem text, weight 600. The 6px height gap + lighter weight
     reads as "clearly secondary" rather than "almost the same."
   - Padding scales proportionally (22px horizontal vs 22px on
     primary, but with the shorter height the proportions still
     read as a smaller button).
   - Label sits on the same baseline as the button via
     align-items:center on the flex container. */
.purchase-help {
  margin-top: 22px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}
.purchase-help-label {
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
}
.purchase-help-btn {
  min-height: 48px;
  padding: 0 22px;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.005em;
  gap: 8px;
  white-space: nowrap;
}
.purchase-help-btn-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--cyan);
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease;
}
.purchase-help-btn:hover .purchase-help-btn-arrow {
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .purchase-help {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  .purchase-help-label {
    white-space: normal;
  }
  .purchase-help-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* Premium "Send your purchase details" card on /thank-you.
   Reuses the visual language of .price-tile (radial glass,
   gradient glow) so the post-purchase experience reads as
   first-class, not as an afterthought. */
.post-purchase-card {
  margin: 28px 0 8px;
  padding: 28px 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(34,214,255,.10), transparent 36%),
    linear-gradient(180deg, rgba(10,16,29,.92), rgba(6,11,20,.94));
  border: 1px solid rgba(110,188,255,.22);
  box-shadow:
    0 28px 60px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 36px rgba(34,214,255,.08);
}
.post-purchase-card-head { margin-bottom: 18px; }
.post-purchase-card-head .eyebrow { margin: 0 0 12px; }
.post-purchase-card-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  letter-spacing: -.025em;
  line-height: 1.22;
  color: var(--text);
}
.post-purchase-card-email {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: .92em;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(34,214,255,.10);
  border: 1px solid rgba(109,198,255,.28);
  color: var(--text);
  letter-spacing: 0;
  user-select: all;
  word-break: break-all;
}

/* Visible "What to include" checklist — replaces the previous
   card-lead paragraph + invisible template fields. Each row shows
   one piece of information the customer should put in their email.
   Bordered container so it reads as a distinct content block; small
   gradient dot per row keeps the cyan/magenta accent rhythm. */
.post-purchase-fields {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(110,188,255,.14);
  border-radius: 14px;
  background: rgba(7,12,22,.55);
  overflow: hidden;
}
.post-purchase-fields li {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: .95rem;
  letter-spacing: -.005em;
  border-bottom: 1px solid rgba(110,188,255,.08);
}
.post-purchase-fields li:last-child { border-bottom: 0; }
.post-purchase-fields li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 8px rgba(34,214,255,.35);
  flex: 0 0 auto;
}
.post-purchase-fields li em {
  font-style: normal;
  color: var(--muted);
  font-size: .88rem;
  margin-left: 2px;
}

.post-purchase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.post-purchase-actions .btn {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 20px;
  font-size: .95rem;
}
.post-purchase-actions .btn.is-copied {
  color: #5effa2;
  border-color: rgba(94,255,162,.42);
  background: linear-gradient(180deg, rgba(8,18,15,.95), rgba(5,12,9,.95));
  box-shadow:
    0 0 0 1px rgba(94,255,162,.10) inset,
    0 12px 28px rgba(0,0,0,.28),
    0 0 28px rgba(94,255,162,.16);
}

/* "About the machine code" note — quiet info callout that sits between
   the copy buttons and the template preview. Subtle cyan tint signals
   it's helpful context, not a required action. */
.post-purchase-note {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(34,214,255,.05);
  border: 1px solid rgba(109,198,255,.20);
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}
.post-purchase-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post-purchase-note p { margin: 0; }

/* Collapsible template preview — quiet by default, expands to show
   the exact subject + body the Copy / Email-with-template buttons
   use. Keeps the card compact for customers who don't need to read
   the template, while remaining honest about what gets sent. */
.post-purchase-template {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(7,12,22,.55);
  border: 1px solid rgba(110,188,255,.14);
}
.post-purchase-template > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 4px 0;
}
.post-purchase-template > summary::-webkit-details-marker { display: none; }
.post-purchase-template > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--cyan);
  transition: transform .18s ease;
}
.post-purchase-template[open] > summary::before { transform: rotate(90deg); }
.post-purchase-template > summary:hover { color: var(--text); }
.post-purchase-template-body { margin-top: 14px; }
.post-purchase-template-field {
  margin: 14px 0 6px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-purchase-template-field:first-child { margin-top: 0; }
.post-purchase-template-field strong { color: var(--text); font-weight: 700; }
.post-purchase-template pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(3,6,12,.62);
  border: 1px solid rgba(110,188,255,.10);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.thanks-flow-heading {
  margin: 34px 0 10px;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  color: var(--text);
}

@media (max-width: 560px) {
  .post-purchase-card { padding: 22px 20px; }
}

/* =========================================================
   Early-release note
   ---------------------------------------------------------
   A subtle, on-brand card used to communicate that NovaQuant
   is an active early release and to invite bug reports.
   Designed to feel secondary — never as loud as a warning
   banner — and to sit comfortably below primary content on
   the thank-you and support pages.
   ========================================================= */
.early-access-note {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10,16,29,.66), rgba(8,13,24,.58));
  border: 1px solid rgba(110,188,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.02) inset;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.early-access-note .early-access-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34,214,255,.08);
  border: 1px solid rgba(34,214,255,.22);
  color: var(--text);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.early-access-note .early-access-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(34,214,255,.65);
}
.early-access-note p {
  margin: 0;
  flex: 1 1 320px;
}
.early-access-note a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(109,198,255,.36);
  padding-bottom: 1px;
}
.early-access-note a:hover { border-bottom-color: var(--cyan); }

/* Footer variant of the early-release note — sits with the
   risk-disclaimer line in .footer-legal and inherits the same
   muted size; we just lighten it a touch so it reads as a
   secondary, ambient note rather than fresh content. */
.footer-legal .footer-legal-fineprint + .footer-legal-fineprint {
  margin-top: 6px;
  opacity: .72;
}