@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ── Design tokens ─────────────────────────────────────────────── */
/* The `:root` token block now lives once in `_tokens.scss` (the SSOT, `@use`d above), which
 * emits it into every compiled sheet. Do not re-declare tokens here. */
/* ── Base ──────────────────────────────────────────────────────── */
/* box-sizing + the reset live once in foundation.css (_base), loaded first by every layout. */
body {
  font-family: "Geist", -apple-system, system-ui, sans-serif;
  color: var(--neutral-900);
  background: var(--white);
  margin: 0;
}

.font-display {
  font-family: "Geist", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

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

/* ── Grid background ───────────────────────────────────────────── */
.grid-bg {
  background-image: linear-gradient(to right, rgb(var(--black-rgb)/0.04) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--black-rgb)/0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── Accent underline ──────────────────────────────────────────── */
.accent-underline {
  background-image: linear-gradient(transparent 65%, var(--accent-mid) 65%, var(--accent-mid) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp 0.4s ease-out forwards;
}

/* ── Layout ────────────────────────────────────────────────────── */
.ev-section {
  border-bottom: 1px solid var(--neutral-200);
}

.ev-container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1201px) {
  .ev-container {
    padding: 0 2rem;
  }
}
.ev-container-md {
  max-width: 896px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-py {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* ── Navbar ────────────────────────────────────────────────────── */
.ev-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(var(--white-rgb)/0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(var(--neutral-200-rgb)/0.6);
  height: 64px;
}

.ev-logo-mark {
  width: 28px;
  height: 28px;
  background: var(--neutral-900);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.ev-logo-mark .at {
  color: var(--white);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-fine);
  font-weight: 700;
}

.ev-logo-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
}

.ev-nav-brand {
  text-decoration: none;
  color: var(--neutral-900);
  font-weight: 600;
  font-size: var(--fs-17);
  letter-spacing: -0.02em;
}

.ev-nav-brand:hover {
  color: var(--neutral-900);
}

.ev-nav-link {
  font-size: var(--fs-14);
  color: var(--neutral-600);
  text-decoration: none;
  transition: color 0.15s;
}

.ev-nav-link:hover {
  color: var(--neutral-900);
}

.ev-nav-link.active {
  color: var(--neutral-900);
  font-weight: 500;
}

.btn-start-free {
  background: var(--neutral-900);
  color: var(--white);
  font-size: var(--fs-14);
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}

.btn-start-free:hover {
  background: var(--neutral-700);
}

/* ── Mobile top-nav (hamburger + drop-down panel) ──────────────────
 * At and below 880px (the approved prototype's breakpoint) the desktop link group
 * and the bar's Sign in give way to a hamburger (top-left) that drops the same
 * links down as a panel. Start free never leaves the bar. Both pieces are hidden
 * by default, so the desktop nav is unchanged.
 * The desktop link row and the bar's Sign in own their display here rather than
 * via Bootstrap's d-none/d-md-* utilities: those hard-code the 768px boundary with
 * !important, which the 880px block below could not override without fighting it.
 * The button is styled after the in-app icon button (.ev-shell-icon-btn): 40×40 subtle
 * button, 18px icon, neutral-100 hover tint — on the locked 3px radius token. */
.ev-nav-links {
  display: flex;
}

.ev-nav-signin {
  display: block;
}

.ev-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-700);
  border-radius: var(--radius);
  transition: background 0.12s, color 0.12s;
}

.ev-nav-burger:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.ev-nav-burger svg {
  width: 18px;
  height: 18px;
}

.ev-nav-mobile {
  display: none;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.ev-hero {
  background: var(--white);
  color: var(--neutral-900);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--neutral-200);
}

.ev-hero::before {
  content: "";
  position: absolute;
  inset-x: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--neutral-300), transparent);
}

.ev-hero .grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
}

.ev-hero-scan {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(var(--black-rgb)/1) 55%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgb(var(--black-rgb)/1) 55%);
  opacity: 0.75;
}

.ev-hero-inner {
  position: relative;
  padding: 5rem 0 6rem;
}

.ev-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  font-size: var(--fs-sub);
  color: var(--neutral-700);
  margin-bottom: 2rem;
}

.ev-hero h1 {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--neutral-900);
}

.ev-hero .lead {
  font-size: var(--fs-18);
  color: var(--neutral-600);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 2.25rem;
}

.ev-hero-trust {
  font-size: var(--fs-sub);
  color: var(--neutral-500);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.ev-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-outline-light-ev {
  background: transparent;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
  font-size: var(--fs-14);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.btn-outline-light-ev:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}

.btn-white {
  background: var(--white);
  color: var(--neutral-900);
  border: none;
  font-size: var(--fs-14);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}

.btn-white:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}

/* ── Inline checker ────────────────────────────────────────────── */
.ev-checker {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--neutral-200);
  box-shadow: 0 1px 4px rgb(var(--black-rgb)/0.06);
  overflow: hidden;
  color: var(--neutral-900);
}

.ev-checker-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--neutral-100);
}

.ev-checker-body {
  padding: 1.25rem;
}

.ev-checker input[type=email] {
  flex: 1;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-heading);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}

.ev-checker input[type=email]:focus {
  border-color: var(--neutral-900);
  box-shadow: 0 0 0 2px rgb(var(--neutral-900-rgb)/0.1);
}

.btn-verify {
  padding: 0.6rem 1rem;
  background: var(--neutral-900);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-14);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-verify:hover {
  background: var(--neutral-700);
}

.btn-verify:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The .ev-status primitive (used by the checker verdict badge + the footer "All systems
   operational" badge) is now a UNIVERSAL primitive in _primitives.scss (foundation.css), which the
   public _Layout loads first. The former PUBLIC-ZONE mirror here is deleted — one SSOT. */
.ev-checker-flag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ev-checker-flag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius);
  font-size: var(--fs-body);
}

.ev-checker-flag .ev-checker-flag-val {
  font-family: "JetBrains Mono", monospace;
}

.ev-checker-flag-true {
  color: var(--neutral-900);
}

.ev-checker-flag-danger-true {
  color: var(--bad-dot);
}

.ev-checker-flag-false {
  color: var(--neutral-400);
}

.json-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  transition: color 0.15s;
}

.json-toggle:hover {
  color: var(--neutral-900);
}

.ev-checker pre {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-fine);
  line-height: 1.6;
  overflow-x: auto;
  margin: 0.5rem 0 0;
}

/* ── Section headings ──────────────────────────────────────────── */
.section-tag {
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
}

.section-h2 {
  font-size: var(--fs-section);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.dark-section .section-tag {
  color: var(--accent);
}

.dark-section .section-h2 {
  color: var(--white);
}

/* ── How it works ──────────────────────────────────────────────── */
.ev-steps {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
}

.ev-step {
  flex: 1;
  background: var(--white);
  padding: 2rem;
  transition: background 0.15s;
}

.ev-step:hover {
  background: var(--neutral-50);
}

.ev-step + .ev-step {
  border-left: 1px solid var(--neutral-200);
}

.ev-step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-sub);
  margin-bottom: 1.5rem;
  color: var(--neutral-400);
}

.ev-step-num.accent {
  color: var(--accent-dark);
}

.ev-step h3 {
  font-size: var(--fs-21);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.ev-step p {
  font-size: var(--fs-14);
  color: var(--neutral-600);
  line-height: 1.65;
  margin: 0;
}

/* ── Feature cards ─────────────────────────────────────────────── */
.ev-feature-card {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ev-feature-card:hover {
  border-color: var(--neutral-300);
  box-shadow: 0 2px 8px rgb(var(--black-rgb)/0.06);
}

.ev-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--neutral-900);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ev-feature-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--white);
  fill: none;
  stroke-width: 1.75;
}

.ev-feature-card h3 {
  font-size: var(--fs-17);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.ev-feature-card p {
  font-size: var(--fs-14);
  color: var(--neutral-600);
  line-height: 1.6;
  margin: 0;
}

/* ── Use case cards ────────────────────────────────────────────── */
.ev-use-card {
  padding: 1.75rem;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.ev-use-card:hover {
  border-color: var(--neutral-900);
}

.ev-use-card h3 {
  font-size: var(--fs-24);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.ev-use-card p {
  font-size: var(--fs-14);
  color: var(--neutral-600);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.ev-use-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-sub);
  color: var(--neutral-500);
}

.ev-use-card:hover .ev-use-tag {
  color: var(--neutral-900);
}

/* ── API First (dark) ──────────────────────────────────────────── */
.dark-section {
  background: var(--neutral-900);
  color: var(--white);
}

.dark-section p.ev-text-muted {
  color: rgb(var(--white-rgb)/0.45);
}

.dark-section h4 {
  color: var(--white);
  font-size: var(--fs-17);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ev-code-panel {
  background: var(--dark-bg);
  border: 1px solid rgb(var(--white-rgb)/0.1);
  border-radius: var(--radius);
  overflow: hidden;
}

.ev-code-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgb(var(--white-rgb)/0.08);
}

.ev-code-panel-header .panel-label {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--white-rgb)/0.35);
}

.ev-code-panel-header .latency {
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-micro);
}

.ev-code-panel pre {
  margin: 0;
  padding: 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-caption);
  line-height: 1.65;
  color: rgb(var(--white-rgb)/0.85);
  overflow-x: auto;
}

.btn-copy-code {
  background: none;
  border: none;
  cursor: pointer;
  color: rgb(var(--white-rgb)/0.4);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-micro);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  padding: 0;
}

.btn-copy-code:hover {
  color: var(--white);
}

/* ── Pricing card ──────────────────────────────────────────────── */
.ev-pricing-card {
  border: 2px solid var(--neutral-900);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--white) 0%, var(--accent-soft) 100%);
}

.ev-pricing-card .glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: var(--accent-dim);
  border-radius: 50%;
  filter: blur(48px);
  transform: translate(40%, -40%);
  pointer-events: none;
}

.ev-open-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.75rem;
}

.ev-open-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
}

/* ── Security badges ───────────────────────────────────────────── */
.ev-sec-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 1rem;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  font-size: var(--fs-14);
}

.ev-sec-icon {
  width: 24px;
  height: 24px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-sec-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--green);
  fill: none;
  stroke-width: 2;
}

/* ── Pricing table ─────────────────────────────────────────────── */
.ev-ptable {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.ev-ptable-header {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr 1fr;
  padding: 0.6rem 1.5rem;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
}

.ev-ptable-header span {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
}

.ev-ptable-row {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr 1fr;
  align-items: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--neutral-100);
  transition: background 0.1s;
  position: relative;
}

.ev-ptable-row:last-child {
  border-bottom: none;
}

.ev-ptable-row:hover {
  background: var(--neutral-50);
}

.ev-ptable-row.popular {
  background: var(--accent-soft);
}

.ev-ptable-row.popular::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

.ev-ptable-row .credits {
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ev-ptable-row .price {
  font-size: var(--fs-18);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ev-ptable-row .per {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-body);
  color: var(--neutral-500);
}

.ev-ptable-row .buy-btn {
  text-align: right;
  font-size: var(--fs-14);
  color: var(--neutral-600);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s;
}

.ev-ptable-row .buy-btn:hover {
  color: var(--neutral-900);
}

.popular-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--neutral-900);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--radius);
}

/* ── Included items ────────────────────────────────────────────── */
.ev-included {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 1rem;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  font-size: var(--fs-14);
}

.ev-included-icon {
  width: 20px;
  height: 20px;
  background: var(--accent-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-included-icon svg {
  width: 12px;
  height: 12px;
  stroke: var(--accent-dark);
  fill: none;
  stroke-width: 2.5;
}

/* ── FAQ (in-house collapse — no Bootstrap accordion) ─────────────────
   Single-open expand/collapse driven by initFaq() in site.js. The container carries the
   outer top/bottom rules (via .ev-border-top/.ev-border-bottom in the markup); items are
   separated by a top border between adjacent items. */
.ev-faq .ev-faq-item + .ev-faq-item {
  border-top: 1px solid var(--neutral-200);
}

.ev-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: none;
  padding: 1.25rem 0;
  font-family: "Geist", system-ui, sans-serif;
  font-size: var(--fs-17);
  font-weight: 500;
  color: var(--neutral-900);
  letter-spacing: -0.01em;
}

.ev-faq-q:focus {
  outline: none;
}

.ev-faq-q:focus-visible {
  outline: 2px solid var(--neutral-300);
  outline-offset: 2px;
}

.ev-faq-chev {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--neutral-500);
  transition: transform var(--dur-base) ease;
}

.ev-faq-q[aria-expanded=true] .ev-faq-chev {
  transform: rotate(180deg);
}

.ev-faq-a[hidden] {
  display: none;
}

.ev-faq-a-inner {
  font-size: var(--fs-14);
  color: var(--neutral-600);
  line-height: 1.7;
  padding: 0 3rem 1.25rem 0;
}

/* ── Status badge (footer) ─────────────────────────────────────────
   The "All systems operational" badge is the shared .ev-status component
   (data-sev="ok") with the shared .ev-status-dot (inherits --sev-dot). The
   component's own border-pulse (ev-status-frame, components.css) reads as "live",
   so no bespoke ping dot / keyframe is needed here. */
/* ── Footer ────────────────────────────────────────────────────── */
.ev-footer {
  padding: 4rem 0 2rem;
}

.ev-footer h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
  margin-bottom: 1rem;
}

.ev-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ev-footer li {
  margin-bottom: 0.5rem;
}

.ev-footer a {
  font-size: var(--fs-14);
  color: var(--neutral-700);
  text-decoration: none;
  transition: color 0.15s;
}

.ev-footer a:hover {
  color: var(--neutral-900);
}

.ev-footer-bottom {
  border-top: 1px solid var(--neutral-200);
  padding-top: 2rem;
  margin-top: 3rem;
}

.ev-footer-bottom p {
  font-size: var(--fs-sub);
  color: var(--neutral-500);
  margin: 0;
}

.ev-social-icon {
  color: var(--neutral-500);
  transition: color 0.15s;
}

.ev-social-icon:hover {
  color: var(--neutral-900);
}

/* ── Register page ─────────────────────────────────────────────── */
.ev-register-wrap {
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--neutral-50);
}

.ev-register-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
  max-width: 520px;
  width: 100%;
}

.ev-register-card h1 {
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.ev-register-card .sub {
  font-size: var(--fs-15);
  color: var(--neutral-600);
  margin-bottom: 2rem;
}

.ev-form-group {
  margin-bottom: 1.25rem;
}

.ev-form-group label {
  display: block;
  font-size: var(--fs-14);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.ev-form-group input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius);
  font-family: "Geist", system-ui, sans-serif;
  font-size: var(--fs-15);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ev-form-group input:focus {
  border-color: var(--neutral-900);
  box-shadow: 0 0 0 2px rgb(var(--neutral-900-rgb)/0.08);
}

/* ── Accept-invite page (AcceptInvite.cshtml) — on _Layout, so its styles live in site.css (not the
 * member-only team.css). Moved here in the design-system-remediation re-audit. */
.ev-invite-state {
  padding: 2rem 1rem;
}

.ev-invite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--neutral-600);
  margin-bottom: 0.5rem;
}

.ev-invite-icon--success {
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.ev-invite-icon--error {
  background: var(--bad-bg);
  color: var(--bad-fg);
}

.btn-submit {
  width: 100%;
  padding: 0.7rem;
  background: var(--neutral-900);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: "Geist", system-ui, sans-serif;
  font-size: var(--fs-15);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.5rem;
}

.btn-submit:hover {
  background: var(--neutral-700);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ev-form-msg {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-14);
  display: none;
}

.ev-form-msg.success {
  background: var(--green-light);
  color: var(--ok-fg);
  border: 1px solid var(--green-border);
  display: block;
}

.ev-form-msg.error {
  background: var(--bad-bg);
  color: var(--bad-dot);
  border: 1px solid var(--bad-border);
  display: block;
}

.ev-closed-msg {
  display: none;
  font-size: var(--fs-heading);
  color: var(--accent-dark);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.5rem;
}

/* ── Signup consent checkbox ───────────────────────────────────── */
.ev-consent-group {
  margin-bottom: 1.25rem;
}

/* Collection-time Art. 13 notice (_ConsentNotice partial). Muted on purpose: it informs, it is not
 * the binding click-wrap. Symmetric margins because it sits in two places — above the submit button
 * on the invite/waitlist forms, and above the social-auth group on /register. */
.ev-consent-notice {
  margin: 0.75rem 0;
  font-size: var(--fs-meta);
  color: var(--neutral-500);
  text-align: center;
}

.ev-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--fs-heading);
  color: var(--neutral-600);
  cursor: pointer;
}

.ev-checkbox-label input[type=checkbox] {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.ev-checkbox-label a {
  color: var(--neutral-900);
  text-decoration: underline;
}

/* ── Social auth buttons ───────────────────────────────────────── */
.ev-social-auth {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--neutral-300);
  background: var(--white);
  color: var(--neutral-900);
  transition: background 0.15s, border-color 0.15s;
}

.btn-social:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-400);
  color: var(--neutral-900);
}

.ev-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--neutral-400);
  font-size: var(--fs-body);
}

.ev-divider::before, .ev-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--neutral-200);
}

/* ── Top nav changeover ────────────────────────────────────────────
 * The nav collapses at the canonical phone breakpoint (≤800, was a bespoke 880) —
 * the desktop link row plus Sign in plus the CTA run out of bar width by phone widths.
 * Hamburger (left, beside the logo) + drop-down panel take over; Sign in moves into
 * the panel; Start free STAYS visible in the bar. */
@media (max-width: 800px) {
  .ev-nav-links {
    display: none;
  }
  .ev-nav-signin {
    display: none;
  }
  .ev-nav-burger {
    display: inline-flex;
  }
  .ev-nav-mobile {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--white);
    border-bottom: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 1.5rem 1.25rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    /* visibility:hidden — NOT just opacity/pointer-events. pointer-events stops the
       MOUSE only: with the panel merely transparent its four links stayed in the tab
       order and exposed to screen readers, so a phone user tabbing off the logo fell
       into an invisible menu. visibility:hidden removes them from both.
       It is stepped at the END of the close transition (0s delayed by the 0.16s fade)
       so the panel still fades out instead of snapping away. */
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }
  /* Opening reverses it with no delay, so the links are focusable as the panel appears. */
  .ev-nav-mobile.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
  }
  .ev-nav-mobile .ev-nav-link {
    display: block;
    padding: 0.8rem 2px;
    font-size: var(--fs-15);
    color: var(--neutral-700);
    text-decoration: none;
    border-bottom: 1px solid var(--neutral-100);
  }
  .ev-nav-mobile a:last-child {
    border-bottom: none;
  }
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .ev-steps {
    flex-direction: column;
  }
  .ev-step + .ev-step {
    border-left: none;
    border-top: 1px solid var(--neutral-200);
  }
  .ev-ptable-row {
    grid-template-columns: 1fr 1fr;
  }
  .ev-ptable-row .per, .ev-ptable-row .buy-btn {
    display: none;
  }
  .ev-ptable-header {
    display: none;
  }
  .ev-register-card {
    padding: 1.75rem 1.5rem;
  }
}
/* ── Silktide consent manager: suppress the persistent floating cookie badge ──
   The library always creates + shows #stcm-icon (bottom-left) after consent and
   exposes no config flag to disable it (it sets display:flex inline). Cookie
   preferences are reachable from the footer "Manage cookies" link and, when
   logged in, Settings → Data, so the always-on badge is redundant clutter. */
#stcm-icon {
  display: none !important;
}