/* =========================================================
   Semantic Integrity Gateway — landing page styles
   Dark-first, technical/dev-tool aesthetic.
   ========================================================= */

:root {
  /* colors — dark theme (default) */
  --bg: #0a0e14;
  --bg-alt: #0d1220;
  --bg-elevated: #111726;
  --bg-card: #131a2b;
  --border: #232c40;
  --border-strong: #2f3a52;
  --text: #e7ecf6;
  --text-dim: #9aa5bd;
  --text-faint: #6b7690;
  --accent: #5eead4;
  --accent-strong: #2dd4bf;
  --accent-soft: rgba(94, 234, 212, 0.12);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.12);
  --warn: #fbbf24;
  --good: #34d399;
  --code-bg: #0c1120;
  --gradient-a: #5eead4;
  --gradient-b: #818cf8;
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.55);
  --radius: 14px;
  --radius-sm: 10px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fb;
    --bg-alt: #ffffff;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --border: #e3e6ee;
    --border-strong: #d3d8e4;
    --text: #10141f;
    --text-dim: #4b5468;
    --text-faint: #7c8598;
    --accent: #0f9c8c;
    --accent-strong: #0b8577;
    --accent-soft: rgba(15, 156, 140, 0.08);
    --code-bg: #0f1420;
    --shadow-lg: 0 24px 60px -24px rgba(20, 26, 45, 0.18);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-sans); letter-spacing: -0.02em; }
p { margin: 0; }
code { font-family: var(--font-mono); }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: linear-gradient(135deg, var(--gradient-a), var(--gradient-b));
  color: #05131a;
  box-shadow: 0 8px 24px -8px rgba(94, 234, 212, 0.45);
}
.btn--primary:hover { box-shadow: 0 12px 30px -8px rgba(94, 234, 212, 0.6); }
.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost {
  background: transparent;
  color: var(--text-dim);
  padding: 10px 14px;
}
.btn--ghost:hover { color: var(--text); }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--full { width: 100%; }

/* ---------------- Nav ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15.5px;
}
.brand__mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
}
.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  color: var(--text-dim);
}
.nav__links a:hover { color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
}
.hero__bg {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(600px 300px at 15% 15%, rgba(94,234,212,0.16), transparent 60%),
    radial-gradient(560px 320px at 85% 0%, rgba(129,140,248,0.16), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hero h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.12;
  font-weight: 750;
  margin-bottom: 22px;
}
.hero__glitch {
  display: inline;
  white-space: nowrap; /* keep each "X apart from Y" pair on one line */
  background: linear-gradient(90deg, var(--gradient-a), var(--gradient-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* THE GLYPHS ARE THE PRODUCT DEMO -- they must render in full color.
   `background-clip:text` + `color:transparent` on the parent strips the
   color out of emoji too: the browser paints the emoji into the alpha mask,
   so 🔥 and 🎉 came out as flat gradient silhouettes. They only "lit up" on
   selection because the selection layer repaints over the clipped fill.
   .glyph opts each glyph back OUT of the clip so the color font shows. */
.hero__glitch .glyph,
.glyph {
  -webkit-background-clip: initial;
  background-clip: initial;
  background: none;
  color: var(--text);
  /* Explicit emoji stack. Without it, a box with no color-emoji font
     installed silently falls back to monochrome outline glyphs -- the exact
     bug this product is about, on the page selling the fix. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Segoe UI Symbol", "Noto Sans CJK SC", "Noto Sans SC",
               "Microsoft YaHei", "PingFang SC", "Hiragino Sans", sans-serif;
  font-variant-emoji: emoji;   /* force color presentation over text style */
  font-weight: 700;
  padding: 0 0.04em;
}
.hero__underline { display: block; font-size: 0.62em; color: var(--text-dim); font-weight: 600; margin-top: 6px; }
/* Proof line: the measured receipt, directly under the headline claim.
   Sits above the fold so the collapse is in your face on first look. */
.hero__proofline {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 560px;
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--danger);
  background: rgba(248, 113, 113, 0.07);
  border-radius: 0 8px 8px 0;
}
.hero__proofline strong { color: var(--danger); font-weight: 700; }
.hero__proofline em { color: var(--text-faint); font-style: normal; font-size: 0.9em; }
.hero__proofline .glyph { font-size: 1.25em; vertical-align: -0.08em; }
.hero__sub {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 30px;
}
.hero__sub strong { color: var(--text); }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-faint);
}
.hero__trust .dot { opacity: 0.5; }

/* --- Hero visual: collapse comparison cards --- */
.hero__visual { display: flex; flex-direction: column; gap: 16px; }
.collapse-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-lg);
}
.collapse-card--good { border-color: rgba(52, 211, 153, 0.35); }
.collapse-card__head { margin-bottom: 14px; }
.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
}
.pill--bad { background: var(--danger-soft); color: var(--danger); }
.pill--good { background: rgba(52, 211, 153, 0.12); color: var(--good); }
.vec-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.vec-emoji { font-size: 22px; width: 30px; text-align: center; }
.vec-bars { display: flex; gap: 3px; align-items: flex-end; height: 34px; flex: 1; }
.vec-bars span { flex: 1; border-radius: 3px 3px 0 0; background: var(--border-strong); }
.vec-bars--collapsed span { background: var(--danger); opacity: 0.55; }
.vec-bars--collapsed span:nth-child(1) { height: 60%; }
.vec-bars--collapsed span:nth-child(2) { height: 62%; }
.vec-bars--collapsed span:nth-child(3) { height: 58%; }
.vec-bars--collapsed span:nth-child(4) { height: 61%; }
.vec-bars--collapsed span:nth-child(5) { height: 59%; }
.vec-bars--collapsed span:nth-child(6) { height: 63%; }
.vec-bars--collapsed span:nth-child(7) { height: 60%; }
.vec-bars--collapsed span:nth-child(8) { height: 61%; }
.vec-bars--distinct span { background: var(--accent); }
.vec-bars--a span:nth-child(1) { height: 30%; } .vec-bars--a span:nth-child(2) { height: 80%; }
.vec-bars--a span:nth-child(3) { height: 45%; } .vec-bars--a span:nth-child(4) { height: 90%; }
.vec-bars--a span:nth-child(5) { height: 20%; } .vec-bars--a span:nth-child(6) { height: 65%; }
.vec-bars--a span:nth-child(7) { height: 55%; } .vec-bars--a span:nth-child(8) { height: 35%; }
.vec-bars--b { }
.vec-bars--b span { background: var(--gradient-b); }
.vec-bars--b span:nth-child(1) { height: 85%; } .vec-bars--b span:nth-child(2) { height: 40%; }
.vec-bars--b span:nth-child(3) { height: 70%; } .vec-bars--b span:nth-child(4) { height: 25%; }
.vec-bars--b span:nth-child(5) { height: 92%; } .vec-bars--b span:nth-child(6) { height: 50%; }
.vec-bars--b span:nth-child(7) { height: 30%; } .vec-bars--b span:nth-child(8) { height: 68%; }
.collapse-card__meta {
  font-size: 12.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.collapse-card__meta b { color: var(--text); }

/* ---------------- Credibility strip ---------------- */
.strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 0; background: var(--bg-alt); }
.strip__inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.strip__label { font-size: 13px; color: var(--text-faint); white-space: nowrap; }
.strip__items { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-dim); font-weight: 600; }

/* ---------------- Section layout ---------------- */
.section { padding: 96px 0; }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 700px; margin-bottom: 48px; }
.tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 14px; font-weight: 700; }
.section__lede { color: var(--text-dim); font-size: 16.5px; }

/* ---------------- Stat grid (proof) ---------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.stat-card--critical { border-color: rgba(251, 113, 133, 0.35); background: linear-gradient(180deg, var(--danger-soft), transparent 60%), var(--bg-card); }
.stat-card__num { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.stat-card__num span { font-size: 24px; color: var(--text-faint); font-weight: 700; }
.stat-card--critical .stat-card__num { color: var(--danger); }
.stat-card--critical .stat-card__num span { color: var(--danger); opacity: 0.7; }
.stat-card__label { margin-top: 10px; font-weight: 650; font-size: 15px; }
.stat-card__detail { margin-top: 8px; font-size: 13.5px; color: var(--text-faint); }
.stat-card__detail b { color: var(--text-dim); }

.proof-note {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.proof-note p { color: var(--text-dim); font-size: 15.5px; margin-bottom: 14px; }
.proof-note p strong { color: var(--text); }
.proof-note__link { color: var(--accent); font-weight: 600; font-size: 14.5px; }
.proof-note__link:hover { text-decoration: underline; }

/* ---------------- How it works / flow ---------------- */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 48px;
}
.flow__step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.flow__num {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 12px;
}
.flow__step h3 { font-size: 16.5px; margin-bottom: 8px; }
.flow__step p { color: var(--text-dim); font-size: 14px; }
.flow__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  font-size: 20px;
  padding-top: 34px;
}

.code-panel {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.code-panel__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.code-panel .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--r { background: #fb7185; } .dot--y { background: #fbbf24; } .dot--g { background: #34d399; }
.code-panel__title { margin-left: 8px; font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); }
.code-panel__body { margin: 0; padding: 20px 22px; font-family: var(--font-mono); font-size: 13.5px; overflow-x: auto; line-height: 1.7; }
.code-panel__body .ln { display: block; }
.code-panel__body .muted { color: var(--text-faint); }
.code-panel__body .del { color: var(--danger); }
.code-panel__body .add { color: var(--good); }

/* ---------------- Results ---------------- */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.result-card__icon {
  display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.12);
  color: var(--good);
  font-weight: 800;
  margin-bottom: 14px;
}
.result-card__num { font-size: 38px; font-weight: 800; color: var(--text); line-height: 1; }
.result-card__num span { font-size: 20px; color: var(--text-faint); }
.result-card__label { margin-top: 8px; font-weight: 650; font-size: 15px; }
.result-card__detail { margin-top: 8px; font-size: 13.5px; color: var(--text-faint); }
.result-card__detail b { color: var(--text-dim); }

.model-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.model-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--bg-card); }
.model-table caption { text-align: left; padding: 16px 20px; font-size: 13px; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.model-table th, .model-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.model-table th { color: var(--text-faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.model-table tr:last-child td { border-bottom: none; }
.v-bad { color: var(--danger); font-weight: 700; }
.v-warn { color: var(--warn); font-weight: 700; }
.v-good { color: var(--good); font-weight: 700; }

/* ---------------- Pricing ---------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 56px;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
  transform: translateY(-4px);
}
.price-card__badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--accent);
  color: #05131a;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.price-card h3 { font-size: 18px; margin-bottom: 14px; }
.price-card__price { font-size: 34px; font-weight: 800; margin-bottom: 10px; }
.price-card__price span { font-size: 14px; color: var(--text-faint); font-weight: 600; }
.price-card__desc { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; min-height: 42px; }
.price-card__list { margin-bottom: 26px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.price-card__list li { font-size: 14px; color: var(--text-dim); padding-left: 22px; position: relative; }
.price-card__list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 800;
}

.pricing-note { color: var(--text-dim); font-size: 14px; margin-top: 8px; }

.currency-toggle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.currency-toggle__btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}
.currency-toggle__btn.is-active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent);
}

.cta__form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 22px 0 14px;
}
.cta__input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  min-width: 260px;
}
.cta__quote {
  margin-top: 14px;
  font-size: 14px;
  min-height: 20px;
}

.roi-panel {
  background: linear-gradient(180deg, var(--accent-soft), transparent 40%), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 34px 28px;
}
.roi-panel__head h3 { font-size: 19px; margin-bottom: 8px; }
.roi-panel__head p { color: var(--text-dim); font-size: 14px; margin-bottom: 26px; }
.roi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.roi-item { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.roi-item--highlight { border-color: var(--accent); background: var(--accent-soft); }
.roi-item__label { font-size: 12.5px; color: var(--text-faint); margin-bottom: 6px; }
.roi-item__value { font-size: 19px; font-weight: 800; }
.roi-item__value span { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-faint); margin-top: 2px; }
.roi-panel__foot { font-size: 13.5px; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 16px; }
.roi-panel__foot b { color: var(--text); }

/* ---------------- FAQ ---------------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
.faq-item h4 { font-size: 16px; margin-bottom: 10px; }
.faq-item p { color: var(--text-dim); font-size: 14.5px; }
.faq-item code { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 13px; }

/* ---------------- CTA ---------------- */
.cta {
  padding: 100px 0;
  text-align: center;
  background: radial-gradient(700px 300px at 50% 0%, rgba(94,234,212,0.14), transparent 65%), var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta h2 { font-size: clamp(26px, 3.4vw, 38px); max-width: 720px; margin: 0 auto 16px; }
.cta p { color: var(--text-dim); font-size: 16px; max-width: 560px; margin: 0 auto 30px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.cta__fine { font-size: 13px; color: var(--text-faint); }

/* ---------------- Footer ---------------- */
.footer { padding: 64px 0 28px; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.footer__brand p { color: var(--text-faint); font-size: 13.5px; margin-top: 12px; max-width: 260px; }
.footer__col h5 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 14px; }
.footer__col a { display: block; color: var(--text-dim); font-size: 14px; margin-bottom: 10px; }
.footer__col a:hover { color: var(--accent); }
.footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Mobile reading order: headline + opening paragraph FIRST, charts after.
     (Was order:-1, which pushed the proof charts above the hero copy.) */
  .hero__copy   { order: 1; }
  .hero__visual { order: 2; }
  .stat-grid, .results-grid, .pricing-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { display: none; }
  .roi-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .price-card--featured { transform: none; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__actions .btn--ghost { display: none; }
  .strip__inner { flex-direction: column; align-items: flex-start; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav.nav--open .nav__links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px 22px;
    gap: 16px;
  }
}

/* ---- CJK proof table (added with the v3 CJK disambiguation launch) ---- */
.table-subhead{
  margin:3rem 0 .5rem;
  font-size:1.15rem;
  letter-spacing:-.01em;
}
.table-note{
  margin:0 0 1.25rem;
  font-size:.9rem;
  line-height:1.6;
  color:var(--muted,#8b949e);
  max-width:74ch;
}
.table-note--caveat{
  margin-top:1.25rem;
  padding:1rem 1.15rem;
  border-left:3px solid var(--accent,#2dd4bf);
  background:rgba(45,212,191,.06);
  border-radius:0 6px 6px 0;
  color:var(--text,#c9d1d9);
}
.datatable .num{
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:right;
  white-space:nowrap;
}
.datatable .num--bad{color:#f87171;font-weight:600;}
.datatable .num--good{color:#2dd4bf;font-weight:600;}
.datatable__total td{
  border-top:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
}

/* ---- Checkout modal (BTC QR + invoice, card fallback) ---- */
.currency-toggle__hint{
  margin:.6rem auto 0;
  max-width:60ch;
  text-align:center;
  font-size:.85rem;
  color:var(--muted,#8b949e);
}
.paymodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.paymodal[hidden]{display:none;}
.paymodal__backdrop{position:absolute;inset:0;background:rgba(1,4,9,.82);backdrop-filter:blur(3px);}
.paymodal__dialog{
  position:relative;z-index:1;width:100%;max-width:760px;max-height:90vh;overflow-y:auto;
  background:#0d1117;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:2rem 2rem 1.5rem;box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.paymodal__x{
  position:absolute;top:.6rem;right:.85rem;background:none;border:0;color:#8b949e;
  font-size:1.9rem;line-height:1;cursor:pointer;padding:.15rem .4rem;border-radius:6px;
}
.paymodal__x:hover{color:#fff;background:rgba(255,255,255,.08);}
.paymodal__title{margin:0 0 .35rem;font-size:1.45rem;letter-spacing:-.02em;}
.paymodal__sub{margin:0 0 1.25rem;color:var(--muted,#8b949e);font-size:.95rem;line-height:1.6;}
.paymodal__fine{margin:1rem 0 0;font-size:.8rem;color:#6e7681;line-height:1.55;}
.paymodal__prices{display:grid;gap:.9rem;margin:1.4rem 0 0;}
.payopt{
  display:flex;align-items:center;gap:1rem;width:100%;text-align:left;cursor:pointer;
  padding:1.1rem 1.2rem;border-radius:11px;background:#161b22;
  border:1px solid rgba(255,255,255,.12);transition:border-color .16s,background .16s,transform .16s;
}
.payopt:hover{border-color:#2dd4bf;background:#1a2029;transform:translateY(-1px);}
/* Lightning: yellow accent, distinct from on-chain orange so the two rails are
   never visually confused. */
.payopt--ln{border-color:rgba(255,209,71,.45);}
.payopt--ln:hover{border-color:#ffd147;}
.payopt--ln .payopt__icon{color:#ffd147;}
/* A rail we KNOW will fail must look unavailable, not merely styled. */
.payopt--disabled{opacity:.5;cursor:not-allowed;border-color:var(--border-strong)!important;}
.payopt--disabled:hover{border-color:var(--border-strong)!important;}
.payopt--btc{border-color:rgba(247,147,26,.45);}
.payopt--btc:hover{border-color:#f7931a;}
.payopt__icon{font-size:1.9rem;line-height:1;flex:0 0 auto;width:2.2rem;text-align:center;}
.payopt--btc .payopt__icon{color:#f7931a;}
.payopt__body{display:flex;flex-direction:column;gap:.18rem;flex:1 1 auto;}
.payopt__label{font-weight:650;font-size:1.02rem;color:#e6edf3;}
.payopt__price{font-size:1.35rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;}
.payopt__note{font-size:.8rem;color:#8b949e;}
.payopt__badge{
  flex:0 0 auto;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.3rem .55rem;border-radius:999px;background:rgba(45,212,191,.16);color:#2dd4bf;
}
.payopt__badge--muted{background:rgba(255,255,255,.08);color:#8b949e;}
.btcpay{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;}
.btcpay__qrwrap{background:#fff;padding:.7rem;border-radius:10px;line-height:0;}
.btcpay__qr{display:block;width:220px;height:220px;}
.btcpay__details{min-width:0;}
.btcpay__label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#8b949e;margin:.2rem 0 .3rem;}
.btcpay__copyrow{display:flex;gap:.5rem;margin-bottom:.85rem;}
.btcpay__addr{
  flex:1 1 auto;min-width:0;background:#010409;border:1px solid rgba(255,255,255,.14);
  color:#e6edf3;border-radius:7px;padding:.55rem .7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;user-select:all;
}
.btcpay__meta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;margin:.9rem 0 0;}
.btcpay__meta div{min-width:0;}
.btcpay__meta dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#6e7681;margin:0;}
.btcpay__meta dd{margin:.1rem 0 0;font-size:.9rem;color:#e6edf3;font-variant-numeric:tabular-nums;word-break:break-all;}
.btcpay__status{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:1.3rem 0 0;padding:.8rem 1rem;border-radius:9px;
  background:rgba(45,212,191,.07);border:1px solid rgba(45,212,191,.22);
  font-size:.9rem;color:#c9d1d9;
}
.btcpay__spinner{
  width:14px;height:14px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(45,212,191,.25);border-top-color:#2dd4bf;
  animation:btcspin .8s linear infinite;
}
@keyframes btcspin{to{transform:rotate(360deg);}}
.btcpay__keyout{margin-top:1rem;}
.btcpay__keylabel{font-size:.85rem;color:#2dd4bf;margin-bottom:.4rem;font-weight:600;}
.cta__api-key{
  display:block;padding:.6rem .9rem;background:#010409;border:1px solid #2ea04366;
  border-radius:6px;word-break:break-all;user-select:all;font-size:.9em;color:#7ee787;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.paymodal__form{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 0;}
.paymodal__form .cta__input{flex:1 1 240px;min-width:0;}
.paymodal__switch{
  margin-top:1.1rem;background:none;border:0;color:#2dd4bf;cursor:pointer;
  font-size:.88rem;padding:.3rem 0;text-decoration:underline;text-underline-offset:3px;
}
.paymodal__switch:hover{color:#5eead4;}
.btn--full{width:100%;text-align:center;}
@media (max-width:680px){
  .paymodal__dialog{padding:1.5rem 1.15rem 1.15rem;}
  .btcpay{grid-template-columns:1fr;justify-items:center;}
  .btcpay__details{width:100%;}
  .btcpay__meta{grid-template-columns:1fr;}
}
.btcpay__uri-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.btcpay__walletbtn{flex:1 1 auto;text-align:center;}
.btcpay__addr{overflow-wrap:anywhere;}

/* =========================================================
   ENTERPRISE DELIVERY MODELS
   Sales copy + "which delivery model do you want" capture.
   Uses the existing token set so light-mode inherits for free.
   ========================================================= */

.delivery {
  margin: 8px 0 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.delivery__head { max-width: 780px; margin-bottom: 34px; }
.delivery__head h3 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 14px 0 14px;
}
.delivery__lede { color: var(--text-dim); font-size: 15.5px; line-height: 1.65; margin: 0 0 16px; }
.delivery__lede strong { color: var(--text); }
.delivery__disclose {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0;
}
.delivery__disclose strong { color: var(--text); }
.delivery__disclose em { color: var(--warn); font-style: normal; font-weight: 600; }

.delivery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.dcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.dcard:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.dcard--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
}
.dcard__badge {
  position: absolute;
  top: -11px;
  left: 26px;
  background: var(--accent);
  color: #04211d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
.dcard__top { margin-bottom: 16px; }
.dcard__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.dcard__top h4 { font-size: 19px; margin: 0 0 6px; letter-spacing: -0.01em; }
.dcard__headline { margin: 0; font-size: 13.5px; color: var(--accent); font-weight: 600; }

.dcard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.dcard__from { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.dcard__price .price-val { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.dcard__unit { font-size: 12.5px; color: var(--text-faint); font-weight: 600; width: 100%; }

.dcard__summary { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin: 0 0 18px; }

.dcard__facts { margin: 0 0 18px; display: grid; gap: 9px; }
.dcard__facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
.dcard__facts dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-faint);
  font-weight: 700;
}
.dcard__facts dd { margin: 0; font-size: 13px; color: var(--text); }

.dcard__list { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.dcard__list li { font-size: 13px; color: var(--text-dim); padding-left: 21px; position: relative; line-height: 1.5; }
.dcard__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
}

.dcard__bestfor {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-faint);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin: 0 0 18px;
}
.dcard__bestfor strong { color: var(--text-dim); }

.delivery__foot {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-dim);
}
.delivery__foot-note { font-size: 13px; color: var(--text-faint); margin-left: auto; }
.delivery__foot-note a { color: var(--accent); }

.price-card__xlink {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
}
.price-card__xlink:hover { text-decoration: underline; }

/* ---- capture modal ---- */
.paymodal__dialog--wide { max-width: 720px; }

.dform { margin-top: 4px; }
.dform__models {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}
.dform__models legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-faint);
  font-weight: 700;
  padding: 0 6px;
}
.dform__req {
  color: var(--warn);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
  font-weight: 600;
}

.dradio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s ease;
}
.dradio:hover { border-color: var(--border-strong); }
.dradio input { margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.dradio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.dradio__body { display: flex; flex-direction: column; gap: 3px; }
.dradio__name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.dradio__desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.dradio__desc em { color: var(--text); font-style: normal; font-weight: 600; }

.dform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.dform__field { display: flex; flex-direction: column; gap: 6px; }
.dform__field > span {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  font-weight: 700;
}
.dform__field .cta__input { min-width: 0; width: 100%; font-family: inherit; }
.dform__field--full { margin-bottom: 18px; }
.dform__textarea { resize: vertical; line-height: 1.55; }
.dform__fine { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.6; text-align: center; }

.dform__done-facts {
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: var(--bg-card);
}
.dform__done-facts > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.dform__done-facts dt { color: var(--text-faint); }
.dform__done-facts dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }

@media (max-width: 960px) {
  .delivery__grid { grid-template-columns: 1fr; }
  .dcard__list { flex: 0 0 auto; }
}
@media (max-width: 680px) {
  .dform__row { grid-template-columns: 1fr; }
  .delivery__foot-note { margin-left: 0; }
}

/* Hero footnote -- small print for the tokenization-cost evidence.
   Deliberately understated: supporting evidence, not a headline.
   Uses the site's own design tokens so it tracks any theme change. */
.hero__footnote {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--border-strong);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 620px;
}
.hero__footnote strong { color: var(--text); font-weight: 600; }
.hero__footnote em { color: var(--text-faint); }
.hero__footnote code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.05em 0.34em;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--text-dim);
}
.hero__footnote a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero__footnote a:hover { color: var(--accent-strong); }
@media (max-width: 640px) {
  .hero__footnote { font-size: 12px; padding: 12px 13px; }
}