/* ============================================================
   AVARUS — supplemental primitives + redesign components
   Extends styles.css. Uses ONLY the existing :root tokens.
   No new token system — everything resolves to your variables.
   ============================================================ */

/* ── NEW REUSABLE PRIMITIVES ───────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--border-2);}
.card-2{background:var(--bg-2);}

.input,.select,.textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;outline:none;transition:border-color .15s;box-sizing:border-box;
}
.input::placeholder,.textarea::placeholder{color:var(--muted);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);}
.textarea{min-height:96px;resize:vertical;line-height:1.5;}
.select{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2371717A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}

.badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);
}
.badge-accent{background:var(--accent-tint);border-color:var(--accent-soft);color:var(--accent);}
.badge-pro{
  background:color-mix(in oklab,var(--plan-pro) 14%,var(--bg));
  border-color:color-mix(in oklab,var(--plan-pro) 35%,transparent);color:var(--plan-pro);
}
.badge-good{
  background:color-mix(in oklab,var(--good) 14%,var(--bg));
  border-color:color-mix(in oklab,var(--good) 32%,transparent);color:var(--good);
}
.badge .bdot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ── HOW IT WORKS · steps (uses .card) ─────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.step{display:flex;flex-direction:column;gap:10px;}
.step-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--muted);}
.step h3{font-size:17px;font-weight:600;}
.step p{font-size:14px;color:var(--text-2);line-height:1.55;}
.step-srcs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
@media(max-width:760px){.steps{grid-template-columns:1fr;}}

/* ── HERO social proof near the CTA ────────────────────────── */
.hero-proof{
  display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap;
}
.stars-txt{color:var(--accent);letter-spacing:2px;font-size:14px;line-height:1;}
.hero-proof .pf{font-size:13.5px;color:var(--text-2);letter-spacing:-.01em;}
.hero-proof .pf b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.hero-proof .pf-sep{width:1px;height:16px;background:var(--border-2);}

.desktop-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.01em;
}
.desktop-note .badge{font-size:9.5px;}

/* ── DEMO: two-col field row (from your inline supplement) ─── */
.fb-two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* ── PASSWORD field with show/hide (lean signup) ───────────── */
.pw-wrap{position:relative;margin-bottom:10px;}
.pw-wrap .modal-field{margin-bottom:0;padding-right:60px;}
.pw-toggle{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:4px 6px;
}
.pw-toggle:hover{color:var(--text);}

/* ── ACCESSIBILITY: never gate the LCP behind JS (reinforce) ─ */
.hero .reveal{opacity:1 !important;transform:none !important;}

/* ── FOUNDING OFFER BAR ────────────────────────────────────── */
.founding-bar{
  display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:9px 16px;background:var(--surface);color:var(--text);
  font-size:13.5px;font-weight:500;text-align:center;line-height:1.4;
  border-bottom:1px solid var(--border);letter-spacing:-.01em;
}
.founding-bar strong{font-weight:700;}
.founding-bar .fb-muted{color:var(--text-2);}
.founding-bar .founding-cta{font-weight:700;color:var(--accent);white-space:nowrap;}
.founding-bar:hover .founding-cta{text-decoration:underline;text-underline-offset:2px;}
.founding-bar .bdot-good{
  width:7px;height:7px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--good) 22%,transparent);
}
@media(max-width:600px){.founding-bar{font-size:12.5px;padding:8px 12px;}}

/* ── TWEAK: Pro-purple primary CTA option ──────────────────── */
body.cta-pro .btn-accent{background:var(--plan-pro);color:#fff;}
body.cta-pro .btn-accent:hover{background:var(--plan-pro);filter:brightness(1.1);opacity:1;}
body.cta-pro .statsbar-pulse,body.cta-pro .stars-txt,body.cta-pro .hero-proof .stars-txt{color:var(--plan-pro);}

/* ============================================================
   AVARUS COLOR SYSTEM — black & white canvas, color only where it
   carries meaning. ONE brand purple = Avarus identity = primary
   actions = the Pro tier (the same purple everywhere Pro appears).
   Basic = blue, Premium = red (tiers only). Green = live/good.
   Gold = ratings & "coming soon". Everything else stays B&W.
   ============================================================ */
:root{
  --brand: #8B3FD9;          /* canonical Avarus purple */
  --brand-ink: #ffffff;
  /* Pro is ALWAYS the brand purple — tier card, Pro feature tags, Pro badge */
  --plan-pro: var(--brand);
  --plan-pro-bg: color-mix(in oklab, var(--brand) 12%, var(--bg));
}

/* Primary action → brand purple (hero / nav / founding / starter / contact) */
.btn-accent{ background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn-accent:hover{ opacity: 1; filter: brightness(1.08); }

/* Section signposts + the hero promise word carry the brand colour */
.eyebrow{ color: var(--brand); }
.hero h1 .accent{ color: var(--brand); }

/* Founding offer is a Pro deal → brand-coloured CTA */
.founding-bar .founding-cta{ color: var(--brand); }

/* Ratings read as gold stars (meaning, not chrome) */
.stars-txt{ color: var(--warn); }

/* "auto-filled" step badge → brand; speed badge stays green via .badge-good */
.badge-accent{ background: color-mix(in oklab,var(--brand) 14%,var(--bg)); border-color: color-mix(in oklab,var(--brand) 35%,transparent); color: var(--brand); }

/* Roadmap status dots carry meaning: live = green, in-build = gold, exploring = brand */
.rm-stage-dot.soon { background: var(--warn);  box-shadow: 0 0 0 4px color-mix(in oklab, var(--warn) 18%, transparent); }
.rm-stage-dot.phase{ background: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); }

/* ============================================================
   POLISH — smooth scroll, sticky-nav anchor offset, keyboard
   focus rings, button press, pending list items. All additive.
   ============================================================ */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* Anchor jumps shouldn't tuck section tops under the sticky nav */
section[id]{ scroll-margin-top: 84px; }

/* Keyboard accessibility: visible focus ring on interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tactile press feedback on buttons */
.btn:active{ transform: translateY(1px); }

/* Premium "coming soon" line items read as pending (muted) */
.tier li.pending{ color: var(--muted); }