/* FaultLine — marketing landing page.
   Terminal aesthetic shared with the SaaS consoles (saas/dashboard/style.css):
   90s-clean monospace, the ⊢ turnstile mark, ▸/$ prompt motifs.
   ONE brand color — electric green (verified / true / pass / terminal-go — the
   product thesis). Dark-first identity + an airy light mode, WCAG-AA contrast,
   neon micro-glow on CTAs and focus states ("controlled energy").
   Self-contained: no external fonts/scripts/CDNs — everything ships inline or local. */

/* ── theme variables ──────────────────────────────────────────────────────────
   Base = the dark terminal look. Two theming layers, in priority order:
     1. no data-theme  → follow the OS via prefers-color-scheme (below)
     2. data-theme=dark|light → explicit override (toggle / persisted)
   The brand is LOCKED to electric green — no accent picker.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --bg:      #0C0D0C;
  --bg-soft: #141614;
  --bg-card: #111311;
  --fg:      #EAEDEA;
  --muted:   #6B726B;
  --border:  #2C312C;
  /* electric / neon green — saturated, terminal-go */
  --accent:      #2BE86B;
  --accent-2:    #55FF9A;
  --accent-dim:  #1c7a3e;
  --accent-glow: rgba(43,232,107,0.16);
  --accent-halo: rgba(43,232,107,0.55);
  --on-accent:   #05160B;
  --danger:  #e0655c;
  --warn:    #d9b45a;
  --mono: 'JetBrains Mono','IBM Plex Mono','SF Mono',ui-monospace,Menlo,Consolas,'DejaVu Sans Mono',monospace;
  --maxw: 1120px;
  color-scheme: dark;
}

/* Light-mode variable set — airy off-white ("Cloud Dancer" direction).
   The green used for TEXT/borders is deepened for AA contrast on white; the
   glow/halo stay vivid so the electric identity survives in the light. */
:root[data-theme="light"] {
  --bg:      #F7F7F3;
  --bg-soft: #FFFFFF;
  --bg-card: #FFFFFF;
  --fg:      #16181A;
  --muted:   #5F665F;
  --border:  #D9D9D0;
  --accent:      #0E8F3E;
  --accent-2:    #12A84A;
  --accent-dim:  #7fcf9c;
  --accent-glow: rgba(20,168,74,0.14);
  --accent-halo: rgba(20,168,74,0.42);
  --on-accent:   #FFFFFF;
  --danger:  #c0392b;
  --warn:    #a9781a;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:      #F7F7F3;
    --bg-soft: #FFFFFF;
    --bg-card: #FFFFFF;
    --fg:      #16181A;
    --muted:   #5F665F;
    --border:  #D9D9D0;
    --accent:      #0E8F3E;
    --accent-2:    #12A84A;
    --accent-dim:  #7fcf9c;
    --accent-glow: rgba(20,168,74,0.14);
    --accent-halo: rgba(20,168,74,0.42);
    --on-accent:   #FFFFFF;
    --danger:  #c0392b;
    --warn:    #a9781a;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; transition: background-color .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;            /* 16px reading base — evidence-based legibility */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* visible focus everywhere — a neon halo (accessibility + the brand's "controlled energy") */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* section label motif shared with the console */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 14px;
}
.eyebrow::before { content: "▸ "; color: var(--accent); }

.accent { color: var(--accent); }

/* ── flavour switcher ─────────────────────────────────────────────────────────
   The persistent "pick your flavour" tab bar that sits at the very TOP of every
   flavour page (above the sticky nav). All five flavour pages copy the SAME small
   markup block (see any flavour page's HTML) and just move which tab carries
   `.is-active` + `aria-current="page"`. Lightweight, mobile = horizontal scroll.
   ───────────────────────────────────────────────────────────────────────────── */
.flavour-switch {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12.5px;
}
.flavour-switch-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* ⊢ home link back to the splash chooser */
.flavour-switch .fs-home {
  flex: 0 0 auto; color: var(--accent);
  font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 700; line-height: 1;
  text-shadow: 0 0 12px var(--accent-halo); padding: 2px 6px; border-radius: 2px;
}
.flavour-switch .fs-home:hover { text-decoration: none; background: var(--accent-glow); }
.flavour-switch .fs-lead {
  flex: 0 0 auto; color: var(--muted); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 1px; font-size: 10px;
}
.flavour-switch .fs-tabs {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
.flavour-switch .fs-tabs a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--muted); padding: 5px 10px; border-radius: 3px;
  border: 1px solid transparent; letter-spacing: .3px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.flavour-switch .fs-tabs a:hover {
  color: var(--fg); text-decoration: none; border-color: var(--border);
}
.flavour-switch .fs-tabs .fs-ico { font-size: 13px; line-height: 1; }
/* the current page's tab: accent colour + underline flag */
.flavour-switch .fs-tabs a.is-active {
  color: var(--accent); border-color: var(--accent-dim);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.flavour-switch .fs-tabs a.is-active:hover { border-color: var(--accent); }
.flavour-switch .fs-switch-hint {
  flex: 0 0 auto; color: var(--muted); white-space: nowrap; font-size: 11px;
}
/* right-aligned "Log in" — the customer-access door, reachable from every flavour page */
.flavour-switch .fs-login {
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px;
  padding: 5px 12px; letter-spacing: .3px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.flavour-switch .fs-login:hover {
  text-decoration: none; border-color: var(--accent);
  background: var(--accent-glow); box-shadow: 0 0 14px -4px var(--accent-halo);
}
@media (max-width: 760px) {
  .flavour-switch .fs-lead, .flavour-switch .fs-switch-hint { display: none; }
  .flavour-switch-inner { gap: 8px; }
  .flavour-switch .fs-login { margin-left: auto; }
}

/* ── sticky top nav ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .mark {
  color: var(--accent); font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px; font-weight: 700; line-height: 1;
  text-shadow: 0 0 12px var(--accent-halo);
}
.brand .word { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: 12px; }
.nav-links a { color: var(--muted); font-size: 13px; letter-spacing: .5px; }
.nav-links a:hover { color: var(--fg); text-decoration: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* theme toggle (light / dark) */
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 11px; cursor: pointer; white-space: nowrap; border-radius: 2px;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle .ico { color: var(--accent); margin-right: 5px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  background: transparent; color: var(--fg); border: 1px solid var(--border);
  padding: 10px 18px; cursor: pointer; white-space: nowrap; border-radius: 2px;
  transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:hover { border-color: var(--fg); text-decoration: none; }
.btn.accent { border-color: var(--accent-dim); color: var(--accent); }
.btn.accent:hover { border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 18px -4px var(--accent-halo); }
.btn.solid {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
  box-shadow: 0 0 0 0 transparent;
}
.btn.solid:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent);
  box-shadow: 0 0 22px -2px var(--accent-halo);
}
.btn.solid:focus-visible { box-shadow: 0 0 22px -2px var(--accent-halo); }
.btn.sm { padding: 7px 13px; font-size: 12px; }
.btn.lg { padding: 13px 24px; font-size: 14px; }

/* mobile nav toggle */
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--border); color: var(--fg);
  width: 38px; height: 34px; border-radius: 2px; cursor: pointer; font-size: 16px; line-height: 1;
}

/* ── hero ─────────────────────────────────────────────────────────────────────── */
.hero { padding: 46px 0 34px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
/* faint neon horizon behind the hero */
.hero::before {
  content: ""; position: absolute; inset: -40% 0 auto 0; height: 70%;
  background: radial-gradient(60% 100% at 20% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(36px, 5.6vw, 62px); line-height: 1.03; letter-spacing: -1.2px;
  margin: 12px 0 20px; font-weight: 700;
}
.hero h1 .glow { color: var(--accent); text-shadow: 0 0 26px var(--accent-halo); }
.hero h1 .dot { color: var(--accent); text-shadow: 0 0 26px var(--accent-halo); }
.hero .sub { font-size: clamp(16px, 1.7vw, 18px); color: var(--muted); line-height: 1.6; max-width: 48ch; margin: 0 0 28px; }
.hero .sub strong { color: var(--fg); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 16px; font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.hero-note b { color: var(--accent); }

/* terminal demo card */
.term {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
  box-shadow: 0 24px 70px -30px var(--accent-halo), 0 8px 24px -12px rgba(0,0,0,.5);
  overflow: hidden; font-size: 12.5px; line-height: 1.7; position: relative; z-index: 1;
}
.term-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.term-bar .dots { display: inline-flex; gap: 6px; }
.term-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: block; }
.term-bar .dots i:first-child { background: var(--accent); box-shadow: 0 0 8px -1px var(--accent-halo); }
.term-bar .t-title { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-left: 6px; }
.term-body { padding: 16px 16px 18px; overflow-x: auto; }
.term-body pre { margin: 0; font-family: var(--mono); white-space: pre; }
.term .cmd { color: var(--fg); }
.term .cmd::before { content: "$ "; color: var(--accent); }
.term .ok { color: var(--accent); }
.term .val { color: var(--accent); }
.term .mut { color: var(--muted); }
.term .out { color: var(--fg); }
.term .warnc { color: var(--warn); }
.term .rowline { display: block; }

/* ── generic section scaffolding ─────────────────────────────────────────────── */
section.band { padding: 40px 0; border-bottom: 1px solid var(--border); }
.sec-head { max-width: 64ch; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.5px; margin: 0 0 12px; font-weight: 700; }
.sec-head p { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.6; }

/* feature cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.card {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  padding: 22px 22px 24px; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.card:hover { border-color: var(--accent-dim); transform: translateY(-2px); box-shadow: 0 18px 40px -30px var(--accent-halo); }
.card .ic { width: 30px; height: 30px; color: var(--accent); margin-bottom: 14px; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.card h3 { font-size: 16px; margin: 0 0 8px; font-weight: 600; letter-spacing: .2px; }
.card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.card p b { color: var(--fg); font-weight: 500; }

/* how it works — numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  padding: 22px; position: relative;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-size: 12px; color: var(--accent); border: 1px solid var(--accent-dim);
  border-radius: 50%; width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 14px; letter-spacing: 1px;
}
.step h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
.step h3 .verb { color: var(--accent); }
.step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }

/* two-audience split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aud {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  padding: 28px 26px; display: flex; flex-direction: column;
}
.aud .tag {
  align-self: flex-start; font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 3px 11px; margin-bottom: 16px;
}
.aud h3 { font-size: 20px; margin: 0 0 10px; font-weight: 600; }
.aud > p { color: var(--muted); margin: 0 0 18px; font-size: 1rem; line-height: 1.6; }
.aud ul { list-style: none; margin: 0 0 22px; padding: 0; }
.aud li { position: relative; padding: 5px 0 5px 22px; font-size: 15px; line-height: 1.55; color: var(--fg); }
.aud li::before { content: "⊢"; position: absolute; left: 0; color: var(--accent); font-family: Georgia, serif; }
.aud li span { color: var(--muted); }
.aud .aud-foot { margin-top: auto; }
.aud .compare { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* ── context reduction (headline differentiator) ─────────────────────────────── */
.ctx-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.ctx-col {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); padding: 26px 24px;
}
.ctx-col.them { border-style: dashed; }
.ctx-col.us {
  border-color: var(--accent-dim); background: var(--bg-card);
  box-shadow: 0 0 0 1px rgba(43,232,107,0.08), 0 24px 60px -34px var(--accent-halo);
}
.ctx-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 12px; }
.ctx-col.us .ctx-lbl { color: var(--accent); }
.ctx-big { font-size: clamp(19px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.4px; margin: 0 0 12px; font-weight: 700; color: var(--fg); }
.ctx-col.us .ctx-big { color: var(--accent); text-shadow: 0 0 22px var(--accent-glow); }
.ctx-sml { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.ctx-note { color: var(--muted); opacity: .8; font-size: 12px; }
.ctx-metrics {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.ctx-metrics li {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; background: var(--bg-soft); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ctx-metrics .m-k { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.ctx-metrics .m-v { color: var(--muted); font-size: 12px; line-height: 1.5; }
.ctx-foot {
  margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg);
  border-left: 3px solid var(--accent); background: var(--bg-soft);
  padding: 14px 18px; border-radius: 0 8px 8px 0;
}
.ctx-foot b { color: var(--accent); }

/* ── problem / agitation ─────────────────────────────────────────────────────── */
.pain {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.pain li {
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0; background: var(--bg-soft); padding: 15px 17px;
}
.pain .p-k { display: block; color: var(--warn); font-weight: 600; font-size: 15px; margin-bottom: 5px; letter-spacing: .2px; }
.pain .p-v { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* the two headline wins carry a small "win" flag on the eyebrow */
.eyebrow .win { color: var(--accent); }

/* ── comparison ──────────────────────────────────────────────────────────────── */
.compare-lede {
  border-left: 3px solid var(--accent); background: var(--bg-soft);
  padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 28px;
  font-size: 1rem; line-height: 1.6; color: var(--fg); max-width: 68ch;
}
.compare-lede b { color: var(--accent); }
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.comp {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  padding: 24px 24px 22px; display: flex; flex-direction: column;
  transition: border-color .14s ease;
}
.comp:hover { border-color: var(--accent-dim); }
.comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.comp-head h3 { font-size: 18px; margin: 0; font-weight: 600; }
.comp-head .visit { font-size: 12px; color: var(--accent); white-space: nowrap; }
.comp .kudos { color: var(--muted); font-size: 1rem; margin: 0 0 14px; line-height: 1.6; }
.comp .kudos b { color: var(--fg); font-weight: 500; }
.comp .stat {
  display: inline-block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 2px 10px; margin-bottom: 14px;
}
.comp .diff {
  margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 1rem; color: var(--fg); line-height: 1.6;
}
.comp .diff .lead { color: var(--accent); font-weight: 600; }

/* ── pricing ─────────────────────────────────────────────────────────────────────
   ONE card family across the whole ladder. Individual (.price), Team & Enterprise
   à-la-carte (.seat) and the Enterprise base (.ent-strip, now a card) all share the
   SAME frame — border, radius, background, hover, feature treatment and price
   typography — so the three tiers read as siblings even at different column counts.
   ─────────────────────────────────────────────────────────────────────────────── */
.tier-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.tier-head:first-of-type { margin-top: 8px; }
.tier-head h3 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: .3px; }
.tier-head h3 .k { color: var(--accent); }
.tier-head h3 .price-inline { color: var(--accent); font-weight: 700; }
.tier-head .tier-sub { font-size: 12.5px; color: var(--muted); }

/* additive framing — "everything below, plus …" so each tier visibly builds on the last */
.tier-adds { margin: 0 0 16px; }
.tier-adds .lead {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--accent); margin-bottom: 8px; text-transform: uppercase;
}
.tier-adds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 22px; }
.tier-adds li { position: relative; padding-left: 21px; font-size: 12.5px; color: var(--fg); line-height: 1.5; }
.tier-adds li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.tier-adds li b { color: var(--fg); }
/* Team's affordable-bridge narrative — the reason the tier exists, above its adds */
.tier-adds .bridge {
  margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--fg);
  padding-left: 12px; border-left: 2px solid var(--accent-dim);
}
.tier-adds .bridge b { color: var(--accent); }

/* SHARED card frame — the sibling look for every priced item on the ladder */
.price, .seat, .ent-strip {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  display: flex; flex-direction: column; position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.price:hover, .seat:hover, .ent-strip:hover {
  border-color: var(--accent-dim); transform: translateY(-2px);
  box-shadow: 0 18px 46px -30px var(--accent-halo);
}
.price.feature, .seat.feature, .ent-strip.feature {
  border-color: var(--accent); background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 24px 60px -30px var(--accent-halo);
}
/* shared price typography — same prominence on every card */
.price .p-cost .amt, .seat .s-cost .amt, .ent-strip .es-price .amt {
  font-size: 34px; font-weight: 700; color: var(--fg); letter-spacing: -1px; line-height: 1;
}
.price .p-cost .per, .seat .s-cost .per, .ent-strip .es-price .per { font-size: 12px; color: var(--muted); }

.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price { padding: 26px 24px; }
.price .badge {
  position: absolute; top: -11px; right: 18px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--on-accent); background: var(--accent); border-radius: 999px;
  padding: 3px 11px; font-weight: 600; box-shadow: 0 0 14px -3px var(--accent-halo);
}
.price .p-name { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-bottom: 4px; }
.price.feature .p-name { color: var(--accent); }
.price .p-for { font-size: 12.5px; color: var(--muted); min-height: 34px; margin-bottom: 12px; }
.price .p-cost { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price .p-trial { font-size: 12px; color: var(--accent); margin-bottom: 18px; min-height: 16px; }
.price ul { list-style: none; margin: 0 0 24px; padding: 0; }
.price li { position: relative; padding: 6px 0 6px 20px; font-size: 13px; color: var(--fg); border-bottom: 1px dotted var(--border); }
.price li:last-child { border-bottom: none; }
.price li::before { content: "+"; position: absolute; left: 0; color: var(--accent); }
.price .p-cta { margin-top: auto; }
.price .p-cta .btn { width: 100%; justify-content: center; }
.price .undercut { font-size: 11px; color: var(--muted); margin-top: 10px; text-align: center; }
.price .undercut s { color: var(--muted); opacity: .75; }

/* per-seat grid (4 across) — same card frame, tuned padding for the narrower column */
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.seat { padding: 22px 20px; }
.seat .s-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 8px; }
.seat.feature .s-name { color: var(--accent); }
.seat .s-cost { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.seat .s-for { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.team-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.team-note b { color: var(--accent); }

/* enterprise base — now a CARD in the same idiom (was a bare text strip) */
.ent-strip {
  margin-bottom: 14px; padding: 26px 24px;
  flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap;
}
.ent-strip .es-txt { flex: 1 1 380px; }
.ent-strip .es-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ent-strip .es-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; }
.ent-strip p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ent-strip .es-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.custom-strip {
  margin-top: 14px; border: 1px dashed var(--border); border-radius: 8px;
  background: transparent; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.custom-strip .cs-txt { flex: 1 1 380px; }
.custom-strip h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.custom-strip p { margin: 0; color: var(--muted); font-size: 13px; }

/* ── pricing comparison matrix ─────────────────────────────────────────────────
   The "money shot": one seat, three prices. Committing the monthly base (the
   tenant portal / control layer) buys the per-seat rate DOWN — Individual pays
   retail, Team ($750 base) less, Enterprise ($1,500 base) least. Scrolls inside
   its own wrapper on narrow screens so the page body never scrolls sideways. */
.pmatrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 4px; }
.pmatrix {
  width: 100%; min-width: 660px; border-collapse: collapse; font-family: var(--mono);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.pmatrix caption {
  caption-side: top; text-align: left; color: var(--muted);
  font-size: 12.5px; line-height: 1.55; padding: 0 0 14px;
}
.pmatrix caption b { color: var(--accent); }
.pmatrix th, .pmatrix td {
  padding: 12px 15px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.pmatrix tbody tr:last-child td, .pmatrix tbody tr:last-child th { border-bottom: none; }
/* column headers — the tier + the base it buys down from */
.pmatrix thead th { background: var(--bg-card); border-bottom: 1px solid var(--accent-dim); }
.pmatrix thead .pm-tier { display: block; font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .3px; }
.pmatrix thead .pm-base { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--muted); }
.pmatrix thead th.pm-corner {
  background: transparent; border-bottom-color: var(--border); text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 500;
}
/* row labels down the left */
.pmatrix .pm-rowlbl { text-align: left; color: var(--fg); font-weight: 600; font-size: 13px; white-space: nowrap; }
.pmatrix .pm-rowlbl small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 11px; }
/* seat prices — Individual = retail (neutral), Team/Enterprise = bought-down (accent) */
.pmatrix .pm-price { font-size: 18px; font-weight: 700; color: var(--fg); letter-spacing: -.3px; }
.pmatrix .pm-disc { color: var(--accent); }
.pmatrix .pm-na { color: var(--muted); }
/* the base-fee row — the thing the money actually buys */
.pmatrix .pm-baserow th, .pmatrix .pm-baserow td { background: var(--accent-glow); border-bottom: 1px solid var(--accent-dim); }
.pmatrix .pm-baserow .pm-price { color: var(--accent); }
/* fine rows (includes / seat cap) */
.pmatrix .pm-fine td, .pmatrix .pm-fine th { font-size: 11.5px; color: var(--muted); line-height: 1.45; font-weight: 400; }
.pmatrix .pm-fine .pm-rowlbl { font-weight: 600; color: var(--fg); }
.pmatrix tbody tr:hover td:not([class*="pm-base"]), .pmatrix tbody tr:hover th { background: var(--bg-card); }
.pmatrix .pm-baserow:hover th, .pmatrix .pm-baserow:hover td { background: var(--accent-glow); }

/* ── trust strip ─────────────────────────────────────────────────────────────── */
.trust { padding: 28px 0; border-bottom: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-item { display: flex; flex-direction: column; gap: 6px; }
.trust-item .ti-ic { width: 24px; height: 24px; color: var(--accent); }
.trust-item .ti-h { font-size: 13.5px; color: var(--fg); font-weight: 500; }
.trust-item .ti-p { font-size: 15px; color: var(--muted); line-height: 1.55; }

/* ── FAQ ─────────────────────────────────────────────────────────────────────── */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  padding: 20px 22px;
}
.faq h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; color: var(--fg); }
.faq h3::before { content: "› "; color: var(--accent); }
.faq p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.faq p b { color: var(--fg); font-weight: 500; }
.faq p a { color: var(--accent); }

/* ── final CTA ───────────────────────────────────────────────────────────────── */
.final { padding: 44px 0; text-align: center; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: auto 0 -50% 0; height: 90%;
  background: radial-gradient(50% 100% at 50% 100%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.final .wrap { position: relative; z-index: 1; }
.final h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -.5px; font-weight: 700; }
.final h2 .dot { color: var(--accent); text-shadow: 0 0 24px var(--accent-halo); }
.final p { color: var(--muted); max-width: 52ch; margin: 0 auto 28px; }
.final .hero-cta { justify-content: center; }

/* ── footer ──────────────────────────────────────────────────────────────────── */
footer.site { padding: 26px 0 32px; }
.foot-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-brand { max-width: 320px; }
.foot-brand .brand { margin-bottom: 10px; }
.foot-brand p { color: var(--muted); font-size: 12.5px; margin: 0; line-height: 1.6; }
.foot-links { display: flex; gap: 54px; flex-wrap: wrap; }
.foot-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 12px; font-weight: 500; }
.foot-col a { display: block; color: var(--fg); font-size: 13px; padding: 4px 0; }
.foot-col a:hover { color: var(--accent); text-decoration: none; }
.foot-bottom {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 12px; letter-spacing: .5px;
}
.foot-bottom .mono { font-family: var(--mono); }
.foot-bottom a { color: var(--muted); }
.foot-bottom a:hover { color: var(--accent); text-decoration: none; }
.foot-bottom .foot-green { flex: 1 1 320px; min-width: 240px; max-width: 460px;
  font-size: 11px; line-height: 1.5; color: var(--muted); opacity: .82; }
.foot-bottom .foot-green a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.foot-bottom .foot-green a:hover { color: var(--accent); }

/* ── responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero .sub { max-width: none; }
  .term { order: 2; }
  .cards, .steps, .split, .prices, .trust-grid, .compare-grid, .faq-list, .pain { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .seats { grid-template-columns: 1fr 1fr; }
  .ctx-contrast { grid-template-columns: 1fr; }
  .ctx-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav.open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 4px; margin: 0; padding: 12px 24px 18px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .nav.open .nav-links a { padding: 8px 0; font-size: 15px; }
  .hero { padding: 32px 0 28px; }
}
@media (max-width: 520px) {
  .trust-grid, .seats { grid-template-columns: 1fr; }
  .ctx-metrics { grid-template-columns: 1fr; }
  .brand .word { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPLASH CHOOSER (index.html) — the "pick your flavour" entry page.
   Full-viewport, centred, fast. Routes visitors to the five flavour pages.
   ══════════════════════════════════════════════════════════════════════════════ */
.splash {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 24px 40px; position: relative; overflow: hidden;
}
/* twin neon horizons top + bottom */
.splash::before {
  content: ""; position: absolute; inset: -30% 0 auto 0; height: 65%;
  background: radial-gradient(55% 100% at 50% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none; z-index: 0;
}
.splash::after {
  content: ""; position: absolute; inset: auto 0 -40% 0; height: 60%;
  background: radial-gradient(50% 100% at 50% 100%, var(--accent-glow), transparent 72%);
  pointer-events: none; z-index: 0;
}
.splash > * { position: relative; z-index: 1; }

/* light/dark toggle, parked top-right */
.splash-toggle { position: absolute; top: 18px; right: 20px; z-index: 3; }

.splash-mark {
  color: var(--accent); font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(46px, 8vw, 76px); font-weight: 700; line-height: 1;
  text-shadow: 0 0 34px var(--accent-halo); margin-bottom: 10px;
}
.splash-word {
  font-family: var(--mono); font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: 7px; text-transform: uppercase; font-weight: 600; margin: 0 0 12px;
}
.splash-tag { color: var(--muted); font-size: clamp(13px, 1.6vw, 15px); margin: 0 0 34px; letter-spacing: .3px; }
.splash-tag .accent { color: var(--accent); }

.splash-prompt {
  font-size: clamp(24px, 4.4vw, 40px); font-weight: 700; letter-spacing: -.6px;
  margin: 0 0 6px;
}
.splash-prompt .glow { color: var(--accent); text-shadow: 0 0 24px var(--accent-halo); }
.splash-sub { color: var(--muted); font-size: 14px; margin: 0 0 32px; }

/* the five flavour option cards */
.flavours {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; width: 100%; max-width: 940px; margin: 0 auto;
}
/* row 1 = 3 cards, row 2 = 2 cards centred */
.flavours .flavour:nth-child(4) { grid-column: 1 / 2; }
.flavour {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  padding: 24px 22px; display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--fg); gap: 6px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.flavour:hover {
  text-decoration: none; border-color: var(--accent);
  background: var(--bg-card); transform: translateY(-3px);
  box-shadow: 0 20px 50px -28px var(--accent-halo), 0 0 0 1px var(--accent-dim);
}
.flavour:focus-visible { border-color: var(--accent); }
.flavour .fl-ico {
  font-size: 30px; line-height: 1; margin-bottom: 4px;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
.flavour .fl-name { font-size: 17px; font-weight: 600; letter-spacing: .2px; color: var(--fg); }
.flavour:hover .fl-name { color: var(--accent); }
.flavour .fl-teaser { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.flavour .fl-go { margin-top: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .14s ease; }
.flavour:hover .fl-go { opacity: 1; }

/* access chooser — 2-up login option cards, reusing the splash shell */
.flavours.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 620px) { .flavours.duo { grid-template-columns: 1fr; max-width: 360px; } }
/* top-left "Customer access" door on the splash (mirrors .splash-toggle top-right) */
.splash-access { position: absolute; top: 18px; left: 20px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; }
.splash-access a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 2px;
  padding: 6px 12px; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.splash-access a:hover {
  text-decoration: none; border-color: var(--accent);
  background: var(--accent-glow); box-shadow: 0 0 14px -4px var(--accent-halo);
}

.splash-skip { margin: 30px 0 0; font-size: 13px; color: var(--muted); }
.splash-skip a { color: var(--accent); }
.splash-foot { margin-top: 28px; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.splash-foot .mono { font-family: var(--mono); }
.splash-foot a { color: var(--muted); }
.splash-foot a:hover { color: var(--accent); }

@media (max-width: 820px) {
  .flavours { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .flavours .flavour:nth-child(4) { grid-column: auto; }
}
@media (max-width: 480px) {
  .flavours { grid-template-columns: 1fr; max-width: 360px; }
  .splash { padding: 44px 20px 32px; }
}