/* Inter, served from this host. The site tells people nothing of theirs
   leaves their device; a Google Fonts link sent their IP to Google on every
   page load, before they had read that sentence. The variable file covers
   every weight used here, 500 through 800, including the 650 on section
   headings. Copied out of the OFL package by build.mjs. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: #111827;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
svg { display: block; }

/* ─── Tokens ─────────────────────────────────────────── */
:root {
  --accent:        #6366F1;
  --accent-light:  #EEF2FF;
  --accent-border: #C7D2FE;
  --text-primary:  #111827;
  --text-secondary:#6B7280;
  --text-muted:    #9CA3AF;
  --surface-0:     #ffffff;
  --surface-1:     #F9FAFB;
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;
  --radius:        10px;
  --radius-lg:     18px;

  /* One hue per agent — same identity mapping the live app uses
     (blue/amber/orange/teal), tuned for text-on-white contrast here
     rather than the app's dark-surface values. */
  --analyst:    #3452c9;
  --guardian:   #a16207;
  --engineer:   #c2410c;
  --modernizer: #0f766e;

  /* Chart-only tokens. Kept apart from the agent hues on purpose: those are
     identity, these are status and emphasis, and reusing one for the other
     is how a chart starts lying. The grey is the "everything else" of an
     emphasis chart, not a categorical slot — it is deliberately low-chroma,
     and darkened to clear 3:1 against white. */
  --chart-bad:  #DC2626;
  --chart-mute: #8A93A1;
  --chart-now:  var(--accent);
}

/* ─── Icons — inline, no icon font/CDN, so nothing to load and
   nothing renders inconsistently across OSes the way emoji do. ── */
.icon { flex-shrink: 0; }

/* ─── Keyboard access ────────────────────────────────────
   A visible ring on anything focusable. :focus-visible rather than :focus
   so it appears for keyboard users without ringing every mouse click. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Skip link — first thing in the tab order, so a keyboard or screen-reader
   user isn't forced through the whole nav on every page. */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 300; background: var(--accent); color: #fff;
  padding: 0.7rem 1.4rem; border-radius: 0 0 10px 10px;
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
  transition: transform 0.16s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ─── Logo ───────────────────────────────────────────── */
.logo { font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.logo .gen  { color: var(--text-primary); }
.logo .qasx { color: var(--accent); }

/* ─── Nav — a floating pill rather than a full-width bar, so it reads
   as a distinct object sitting on top of the page. ─────────────── */
.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  padding: 14px 1.5rem 0;
}
.nav {
  position: relative;
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.65rem 1.25rem 0.65rem 1.5rem; height: 56px;
  background: rgba(255,255,255,0.85);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(17,24,39,0.07);
  backdrop-filter: blur(10px);
}
.nav .logo { font-size: 1.1rem; margin-right: 0.5rem; }
.nav-links { display: flex; gap: 2rem; list-style: none; margin-right: auto; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none;
  font-size: 0.8rem; font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text-primary); }

/* ─── Nav dropdowns — every top-level item that has somewhere deeper to
   go opens a panel on hover, and stays a real link you can click. The
   gap between the pill and the panel is bridged by the panel's own top
   padding, so the pointer never crosses dead space and closes it. */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-item > a::after {
  content: ''; width: 5px; height: 5px; flex-shrink: 0;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
}
.nav-item:hover > a::after { transform: rotate(225deg) translate(-2px, -2px); }
.nav-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  padding-top: 16px; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-panel-inner {
  background: var(--surface-0);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(17,24,39,0.13);
  padding: 0.9rem; min-width: 300px;
}
.nav-panel.wide .nav-panel-inner { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-drop {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 0.7rem 0.8rem; border-radius: 10px;
  text-decoration: none; transition: background 0.14s;
}
.nav-drop:hover { background: var(--surface-1); }
.nav-drop-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: color-mix(in srgb, var(--nd-accent, var(--accent)) 12%, white);
  color: var(--nd-accent, var(--accent));
  display: flex; align-items: center; justify-content: center;
}
.nav-drop-name { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; letter-spacing: -0.01em; }
.nav-drop-desc { display: block; font-size: 0.72rem; color: var(--text-secondary); line-height: 1.5; }
.nav-panel-foot {
  grid-column: 1 / -1; margin-top: 4px; padding: 0.75rem 0.8rem 0.3rem;
  border-top: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-panel-foot span { font-size: 0.72rem; color: var(--text-secondary); }
.nav-panel-foot a {
  font-size: 0.74rem; font-weight: 700; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.nav-panel-foot a:hover { text-decoration: underline; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  background: var(--accent); color: #fff; border: none;
  padding: 0.55rem 1.3rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer; transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.85; }
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: -0.25rem;
  background: none; border: 0.5px solid var(--border-strong); border-radius: 999px;
  color: var(--text-primary); cursor: pointer;
}

/* ─── Hero — a soft radial wash plus a few blurred colour blobs (one
   per agent hue) instead of a flat panel, so the page opens with some
   depth. Blobs sit at z-index:-1: painted above the hero's own
   background but behind every element in normal flow. ───────────── */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 100%, #ffffff 6%, var(--accent-light) 48%, #ECFDF9 82%, #DEF7F0 100%);
  padding: 3.25rem 2.5rem 3.25rem;
  border-bottom: 0.5px solid var(--border);
}
.hero-blob {
  position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px);
}
/* Two columns, like the live app's own overview screen — words on the
   left, the animated orbit on the right — rather than one centered
   column. Asymmetric on purpose: it's what makes the diagram read as
   a companion to the text instead of a decoration under it. */
.hero-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) 320px;
  gap: 2.5rem; align-items: center; text-align: left;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-light); color: var(--accent);
  border: 0.5px solid var(--accent-border);
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 650; line-height: 1.08;
  letter-spacing: -0.04em; color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent) 10%, var(--modernizer) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: 1.05rem; color: var(--text-secondary);
  max-width: 470px; margin: 0 0 1.9rem; line-height: 1.6;
}
.hero-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--accent); color: #fff; border: none;
  padding: 0.8rem 1.6rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.87rem;
  cursor: pointer; transition: opacity 0.15s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--surface-0); color: var(--text-primary);
  border: 0.5px solid var(--border-strong);
  padding: 0.8rem 1.6rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.87rem;
  cursor: pointer; transition: background 0.15s;
}
.btn-secondary:hover { background: var(--surface-1); }

/* A small, honest proof beat: a real example line from the live app
   (not a mockup), styled like a compact terminal card. Cycles through
   all four agents' real output — the same "work ticker" idea the app
   itself uses — instead of sitting static on Analyst alone. */
.proof-card {
  margin: 1.5rem 0 0; max-width: 400px; text-align: left;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-left: 3px solid var(--analyst);
  border-radius: var(--radius-lg); padding: 1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
  transition: border-color 0.4s ease;
}
.proof-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px;
}
.proof-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--analyst); transition: background 0.4s ease; }
.proof-agent { color: var(--analyst); font-weight: 700; transition: color 0.4s ease; }
.proof-body { animation: proof-fade 0.4s ease; }
@keyframes proof-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.proof-q { font-size: 0.83rem; color: var(--text-primary); margin-bottom: 5px; }
.proof-a { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; font-weight: 600; color: var(--analyst); transition: color 0.4s ease; }

/* A visible, concrete "four agents" strip right under the CTAs —
   proof, not just a claim, before the reader has scrolled at all. */
.hero-agents { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-agent {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 600; color: var(--a);
  padding: 6px 13px 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--a) 10%, white);
  border: 0.5px solid color-mix(in srgb, var(--a) 32%, white);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.hero-agent.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, white); transform: translateY(-1px); }

/* ─── Orbit diagram — a lightweight, CSS/SVG-only recreation of the
   live app's own animated diagram: four agents in relay around a
   center hub, each taking a turn "active" in pure CSS (no JS needed
   for the motion itself). ───────────────────────────────────────── */
.hero-orbit { display: flex; align-items: center; justify-content: center; }
.hero-orbit svg { width: 100%; max-width: 300px; overflow: visible; }
.orbit-ring { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: 0.55; }
.orbit-ring-spin { fill: none; stroke: var(--accent-border); stroke-width: 1; stroke-dasharray: 2 22; animation: orbit-spin 16s linear infinite; }
@keyframes orbit-spin { to { stroke-dashoffset: -755; } }
@media (prefers-reduced-motion: reduce) { .orbit-ring-spin, .orbit-node, .orbit-pulse { animation: none !important; } }
.orbit-spoke { stroke: var(--nc); stroke-width: 1; opacity: 0.28; }
.orbit-pulse { filter: drop-shadow(0 0 2px currentColor); }
.orbit-hub { fill: var(--surface-0); stroke: var(--border-strong); stroke-width: 1.5; }
.orbit-hub-icon { color: var(--text-secondary); }
.orbit-node { animation: orbit-pulse 8s ease-in-out infinite; }
.orbit-node circle { fill: color-mix(in srgb, var(--nc) 14%, white); stroke: var(--nc); stroke-width: 1.5; }
.orbit-node g { color: var(--nc); }
@keyframes orbit-pulse { 0%, 100% { opacity: 0.55; } 6%, 19% { opacity: 1; } 25% { opacity: 0.55; } }
/* Labels ride inside the same pulsing group as their node, so the name
   and the real task both brighten together on that agent's turn instead
   of sitting beside the diagram as static, disconnected captions. */
.orbit-label { font: 700 10px 'Inter', sans-serif; fill: var(--nc); }
.orbit-caption { font: 600 7.5px 'Inter', sans-serif; fill: var(--text-secondary); }

/* ─── Stats — the grid is width-capped and centered like every other
   section; only the border/background go full-bleed. Previously the
   4-column grid itself ran edge-to-edge, so on a wide screen the
   numbers sat far outside the column every other section uses. ──── */
.stats { border-bottom: 0.5px solid var(--border); }
.stats-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 1.75rem 1rem; text-align: center;
  border-right: 0.5px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat-n {
  font-size: 1.85rem; font-weight: 800; color: var(--accent);
  line-height: 1; margin-bottom: 5px; letter-spacing: -0.03em;
}
.stat-l { font-size: 0.69rem; color: var(--text-muted); font-weight: 500; }

/* ─── Stack strip — the honest substitute for a client-logo row we
   don't have yet: the real integrations already named in Capabilities,
   given the same "proof beneath the fold" visual beat. ───────────── */
.stack-strip {
  padding: 1.6rem 2.5rem; text-align: center;
  border-bottom: 0.5px solid var(--border); background: var(--surface-0);
}
.stack-label {
  display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.9rem;
}
.stack-items {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 1.8rem;
}
.stack-items span {
  font-size: 0.86rem; font-weight: 700; color: var(--text-secondary);
  letter-spacing: -0.01em;
}

/* ─── Section shell ──────────────────────────────────── */
.section { padding: 5.5rem 2.5rem; }
/* Any section carrying decorative blobs has to establish a containing block
   and clip them. Without this they escape the viewport and add a horizontal
   scrollbar to the whole page — .section-float was doing exactly that. */
.section-float, .section:has(> .hero-blob) { position: relative; overflow: hidden; }
.section.alt { background: var(--surface-1); }
.inner { max-width: 1120px; margin: 0 auto; }
.sec-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem;
}
/* Section headers sit centred over the grid below them. The cards themselves
   stay left-aligned, because centred body copy is harder to read than it
   looks — the eye loses the start of each line. */
.sec-h {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 650; letter-spacing: -0.035em;
  margin-bottom: 0.9rem; line-height: 1.15; color: var(--text-primary);
  text-align: center;
}
.sec-sub {
  font-size: 1rem; color: var(--text-secondary);
  max-width: 560px; line-height: 1.6; margin: 0 auto 2.6rem;
  text-align: center;
}
.sec-tag { margin-left: auto; margin-right: auto; margin-bottom: 1.1rem; }
.tiers-note, .run-note, .pay-note { text-align: center; margin-left: auto; margin-right: auto; }
.safe { margin-left: auto; margin-right: auto; }
.bill { justify-content: center; }

/* Inner pages: the same treatment for the page's own heading block. */
.page-head-inner { text-align: center; }
.page-lede { margin-left: auto; margin-right: auto; }
.page-note { text-align: left; margin-left: auto; margin-right: auto; max-width: 62ch; }
.page-head-inner .fcta { justify-content: center; }
.page-eyebrow { margin-left: auto; margin-right: auto; }

/* ─── Feature blocks — the section anatomy used for every agent and
   reused on the per-agent pages: category eyebrow, oversized headline,
   a row of icon-badge features, dual CTAs, then the agent's own real
   output as the supporting visual. Four chapters of one story rather
   than four rows in a list. Colour comes from --fb-accent, so the same
   markup serves all four agents. */
.fblock {
  --fb-tint: color-mix(in srgb, var(--fb-accent) 9%, white);
  --fb-border: color-mix(in srgb, var(--fb-accent) 28%, white);
  position: relative; overflow: hidden;
  padding: 3.25rem 2.5rem;
  border-top: 0.5px solid var(--border);
  background: linear-gradient(180deg, var(--fb-tint) 0%, var(--surface-0) 62%);
}
.fblock-inner { max-width: 1120px; margin: 0 auto; position: relative; }
.fblock-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-0); color: var(--fb-accent);
  border: 0.5px solid var(--fb-border);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 1.1rem;
}
.fblock-h {
  font-size: 2.35rem; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.12; color: var(--text-primary);
  margin-bottom: 0.7rem; max-width: 20ch;
}
.fblock-sub {
  font-size: 0.92rem; color: var(--text-secondary);
  line-height: 1.7; max-width: 58ch; margin-bottom: 2.2rem;
}
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; margin-bottom: 2rem; }
.fitem-badge {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--fb-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.9rem;
}
.fitem-h { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.4rem; letter-spacing: -0.015em; }
.fitem-p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.65; }
.fcta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.fcta a {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; padding: 0.68rem 1.4rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.83rem;
  transition: opacity 0.15s, background 0.15s;
}
.fcta .solid { background: var(--fb-accent); color: #fff; }
.fcta .solid:hover { opacity: 0.88; }
.fcta .ghost { background: var(--surface-0); color: var(--text-primary); border: 0.5px solid var(--border-strong); }
.fcta .ghost:hover { background: var(--fb-tint); }
/* The agent's real output, given the weight of a product screenshot —
   this is the block's visual, so it carries the same evidence the
   smaller cards used to, at a size someone actually reads. */
.fproof {
  background: var(--surface-0); border: 0.5px solid var(--fb-border);
  border-left: 3px solid var(--fb-accent);
  border-radius: var(--radius-lg); padding: 1.4rem 1.6rem;
  box-shadow: 0 8px 28px rgba(17,24,39,0.06);
}
.fproof-lbl {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fb-accent); margin-bottom: 0.6rem;
}
.fproof-line { font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.55; margin-bottom: 0.9rem; }
.fproof-line .mono { font-family: ui-monospace, Menlo, monospace; color: var(--fb-accent); }
.fproof-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.fproof-stats span {
  font-size: 0.72rem; color: var(--text-secondary);
  background: var(--fb-tint); border: 0.5px solid var(--fb-border);
  padding: 5px 11px; border-radius: 999px;
}
.fproof-stats b { color: var(--fb-accent); font-weight: 700; }


/* Chip rows. Still used by Industries and Capabilities — this rule was
   briefly removed with the old How-it-works markup, which left those
   chips as run-together inline text. */
.flow-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 0.85rem; }
.flow-chips span {
  font-size: 0.66rem; font-weight: 600; color: var(--text-secondary);
  background: var(--surface-1); border: 0.5px solid var(--border);
  padding: 3px 8px; border-radius: 999px;
}

/* ─── How it works — drawn as the flow it describes (sources → agents →
   outputs) rather than three cards of prose about it. Built from real
   elements rather than one SVG so it reflows: on narrow screens the
   columns stack and the connecting wires rotate to point downward. */
.flow {
  display: grid; grid-template-columns: 1fr auto 1.35fr auto 1fr;
  gap: 0.85rem; align-items: center; margin-top: 1.5rem;
}
.flow-lbl {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.7rem;
}
.flow-nodes { display: flex; flex-direction: column; gap: 6px; }
.flow-node {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: 999px; padding: 0.5rem 0.9rem;
}
.flow-node svg { color: var(--text-muted); flex-shrink: 0; }

/* The wire between columns. A spark runs along it so the diagram reads as
   a direction of travel, not just three groups sitting near each other. */
.flow-wire {
  position: relative; height: 2px; min-width: 46px; align-self: center;
  background: linear-gradient(90deg, var(--border), var(--accent-border), var(--border));
  border-radius: 2px;
}
.flow-wire::after {
  content: ''; position: absolute; right: -1px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-border); transform: translateY(-50%);
}
.flow-spark {
  position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--accent);
  animation: flow-travel 2.4s ease-in-out infinite;
}
@keyframes flow-travel {
  0%       { left: 0;    opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  100%     { left: 100%; opacity: 0; }
}

.flow-hub {
  background: var(--surface-1); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.2rem;
}
.flow-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flow-agent {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--surface-0);
  border: 0.5px solid color-mix(in srgb, var(--fa) 24%, white);
  border-radius: 10px; padding: 0.6rem 0.75rem;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.flow-agent:hover {
  border-color: var(--fa);
  box-shadow: 0 4px 16px rgba(17,24,39,0.08);
  transform: translateY(-1px);
}
.flow-agent svg { color: var(--fa); flex-shrink: 0; }
.flow-agent b { font-size: 0.79rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.flow-agent span { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

@media (prefers-reduced-motion: reduce) { .flow-spark { animation: none; opacity: 0; } }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 0.6rem; }
  .flow-wire {
    width: 2px; height: 34px; min-width: 0; justify-self: center;
    background: linear-gradient(180deg, var(--border), var(--accent-border), var(--border));
  }
  .flow-wire::after { right: 50%; top: auto; bottom: -1px; transform: translateX(50%); }
  .flow-spark { left: 50%; top: 0; animation-name: flow-travel-v; }
  @keyframes flow-travel-v {
    0%   { top: 0;    opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
  .flow-nodes { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .flow-agents { grid-template-columns: 1fr; }
}

/* ─── Tiers — this is a subscription product, low tier to high tier,
   not just four agents. Deployment facts here are pulled straight from
   the app's own tier profiles (data location, audit retention,
   governance), not invented for the page. Solo has a confirmed price;
   Cloud and Enterprise are priced in conversation, so those CTAs go to
   Contact rather than asserting a number nobody's confirmed. */
.tiers-section {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-1) 0%, #ffffff 100%);
}
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 0.5rem; }
/* Two plans on the home page instead of four: the other two are a business
   decision, and someone deciding whether this is for their shop at all does
   not need to read about VPCs to get there. */
.tiers-two { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.ind-go {
  display: inline-block; margin-top: 0.85rem;
  font-size: 0.76rem; font-weight: 700; color: var(--card-accent);
}

.tier-card {
  --tier-tint: color-mix(in srgb, var(--tier-accent) 8%, white);
  --tier-border: color-mix(in srgb, var(--tier-accent) 26%, white);
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.2rem;
  display: flex; flex-direction: column;
}
.tier-card.is-featured { border-color: var(--tier-border); box-shadow: 0 8px 28px rgba(17,24,39,0.07); }
/* Enterprise inverts to dark — the top of the ladder should look like the
   top of the ladder at a glance, before anyone reads a single feature. */
.tier-card.is-dark {
  background: linear-gradient(160deg, #111827 0%, #1E293B 100%);
  border-color: transparent;
}
.tier-card.is-dark .tier-name,
.tier-card.is-dark .tier-price-amount { color: #fff; }
.tier-card.is-dark .tier-price-custom,
.tier-card.is-dark .tier-price-period { color: #CBD5E1; }
.tier-card.is-dark .tier-price-note { color: #A5B4FC; }
.tier-card.is-dark .tier-tagline { color: #94A3B8; }
.tier-card.is-dark .tier-fact { color: #E2E8F0; }
.tier-card.is-dark .tier-fact svg { color: #6EE7B7; }
.tier-card.is-dark .tier-badge { background: rgba(255,255,255,0.1); color: #CBD5E1; border-color: rgba(255,255,255,0.18); }
.tier-card.is-dark .tier-cta.solid { background: #fff; color: #111827; }
.tier-badge {
  display: inline-flex; align-self: flex-start;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: var(--tier-tint); color: var(--tier-accent); border: 0.5px solid var(--tier-border);
  margin-bottom: 0.9rem;
}
.tier-name { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.02em; }
.tier-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 0.9rem; }
.tier-price-amount { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.tier-price-custom { font-size: 1rem; font-weight: 700; color: var(--text-secondary); }
.tier-price-note {
  font-size: 0.72rem; font-weight: 600; color: var(--tier-accent);
  margin: -0.5rem 0 0.9rem;
}
.tier-tagline { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 1.25rem; min-height: 2.6em; }
.tier-facts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 1.5rem; flex: 1; }
.tier-fact { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--text-primary); line-height: 1.5; }
.tier-fact svg { color: var(--tier-accent); flex-shrink: 0; margin-top: 3px; }
.tier-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; padding: 0.7rem 1rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem;
  transition: opacity 0.15s;
}
.tier-cta.solid { background: var(--tier-accent); color: #fff; }
.tier-cta.solid:hover { opacity: 0.88; }
.tier-cta.outline { background: transparent; color: var(--tier-accent); border: 0.5px solid var(--tier-border); }
.tier-cta.outline:hover { background: var(--tier-tint); }
@media (max-width: 1080px) and (min-width: 769px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .ev { grid-template-columns: 1fr; }
}

/* ─── Billing cycle switch — a subscription page has to answer "how much
   per month" before anything else, and the yearly saving is the reason to
   commit. Both prices live in the markup as data- attributes so the switch
   is a text swap, not a second set of cards to keep in sync. ────────── */
.bill {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -0.4rem 0 1.6rem;
}
.bill-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 999px;
}
.bill-opt {
  border: 0; background: none; border-radius: 999px; padding: 0.42rem 1rem;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.bill-opt.is-active { background: var(--surface-0); color: var(--text-primary); box-shadow: 0 1px 4px rgba(17,24,39,0.09); }
.bill-save {
  font-size: 0.74rem; font-weight: 700; color: var(--guardian);
  background: color-mix(in srgb, var(--guardian) 10%, white);
  border: 0.5px solid color-mix(in srgb, var(--guardian) 25%, white);
  padding: 3px 10px; border-radius: 999px;
}
.tier-price-period { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.tier-foot {
  font-size: 0.7rem; color: var(--text-muted); line-height: 1.45;
  margin-top: 0.6rem; text-align: center;
}
.tier-card.is-dark .tier-foot { color: #94A3B8; }

/* ─── Payback — the only honest argument for a monthly charge is that it
   returns more than it costs, so the two numbers are drawn to scale
   against each other rather than asserted in a sentence. ──────────── */
.pay {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; margin-bottom: 1.6rem;
}
.pay-row { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 12px; margin-bottom: 8px; }
.pay-k { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.pay-bar {
  width: var(--w); min-width: fit-content;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.pay-cost { background: var(--chart-mute); }
.pay-found { background: var(--accent); }
.pay-note { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.7rem; }

/* ─── Everyday runs — the shop and the household that ship inside the
   app. Each card is the same four-agent chain the demo actually walks
   through, drawn as a chain: the figure that changed, then one line per
   agent in its own colour, then the thing it tells you to do. ─────── */
.ev { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ev-card {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-left: 3px solid var(--ev); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
}
.ev-who {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ev);
  background: color-mix(in srgb, var(--ev) 9%, white);
  border: 0.5px solid color-mix(in srgb, var(--ev) 24%, white);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 0.7rem;
}
.ev-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 4px; }
.ev-trigger { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1.1rem; }
.ev-find {
  background: var(--surface-1); border-radius: var(--radius);
  padding: 0.95rem 1rem; margin-bottom: 1.1rem;
}
.ev-metric { display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem; }
.ev-from { font-size: 1.05rem; font-weight: 700; color: var(--text-muted); text-decoration: line-through; }
.ev-to { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ev); }
.ev-metric svg { color: var(--text-muted); flex-shrink: 0; }
.ev-metric-l { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.55; }
.ev-chain { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 1.1rem; }
.ev-step {
  display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: start;
  font-size: 0.76rem; line-height: 1.55; color: var(--text-primary);
  position: relative; padding-left: 14px;
}
/* One rail down the chain, so the four agents read as one pass over the
   same file rather than four separate products. */
.ev-step::before {
  content: ''; position: absolute; left: 3px; top: 10px; bottom: -12px;
  width: 1px; background: var(--border-strong);
}
.ev-step:last-child::before { display: none; }
.ev-step::after {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sc);
}
.ev-agent { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sc); padding-top: 1px; }
.ev-out {
  font-size: 0.78rem; line-height: 1.6; color: var(--text-primary);
  background: color-mix(in srgb, var(--ev) 7%, white);
  border: 0.5px solid color-mix(in srgb, var(--ev) 20%, white);
  border-radius: var(--radius); padding: 0.8rem 0.9rem;
}
.ev-out strong { color: var(--ev); }

/* ─── Guide pages — one story instead of two, cards tinted by whichever
   agent finds the thing, and the "where does my file go" list, which is
   the first question anyone sane asks before opening a statement. ──── */
.ev.one { grid-template-columns: 1fr; }
.ind-tinted { border-left: 3px solid var(--ind-accent); }
.ind-tinted .ind-h { color: var(--ind-accent); }
.safe { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; }
.safe-item {
  display: grid; grid-template-columns: 15px 1fr; gap: 12px; align-items: start;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius); padding: 0.95rem 1.1rem;
  font-size: 0.82rem; line-height: 1.65; color: var(--text-secondary);
}
.safe-item svg { color: var(--guardian); margin-top: 3px; }
.safe-item strong { color: var(--text-primary); font-weight: 700; }

/* The home page's version: three cards, not three ticked lines. This answers
   the first question anyone asks before handing over a bank statement, so it
   should look like an answer rather than like small print. The guide pages
   and the about page keep the plain .safe list — they have four items and a
   paragraph each, which does not fit in three columns. */
.safe-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; }
.safe-cards .safe-item {
  display: block; text-align: center;
  border-radius: var(--radius-lg); padding: 1.5rem 1.3rem;
}
.safe-ic {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 0.9rem;
  border-radius: 14px; color: var(--guardian);
  background: color-mix(in srgb, var(--guardian) 11%, white);
}
.safe-cards .safe-item strong { display: block; font-size: 0.97rem; letter-spacing: -0.01em; }
.safe-cards .safe-item span:not(.safe-ic) { display: block; margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 860px) { .safe-cards { grid-template-columns: 1fr; } }

/* ─── Section footer actions. The reference site closes every block with the
   same pair of links, which is what makes a long page feel like a route
   rather than a scroll. ──────────────────────────────────────────── */
.sec-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.sec-cta a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 0.7rem 1.4rem; border-radius: 999px;
  font-size: 0.84rem; font-weight: 650; transition: opacity 0.15s, background 0.15s;
}
.sec-cta .solid { background: var(--accent); color: #fff; }
.sec-cta .solid:hover { opacity: 0.88; }
.sec-cta .ghost { background: var(--surface-0); color: var(--text-primary); border: 0.5px solid var(--border-strong); }
.sec-cta .ghost:hover { background: var(--surface-1); }

/* ─── Three doors — personal, business, enterprise. The product is one
   thing; what changes is who is holding the file. Putting the audience
   first stops the page reading like a catalogue of products. ──────── */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.door {
  display: block; text-decoration: none;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-top: 3px solid var(--door); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; transition: box-shadow 0.18s, transform 0.15s;
}
.door:hover { box-shadow: 0 6px 24px rgba(17,24,39,0.08); transform: translateY(-2px); }
.door-icon { display: block; color: var(--door); margin-bottom: 0.85rem; }
/* These are spans inside an <a>, so each one has to be told to be a block —
   left inline they ran together into a single paragraph. */
.door-k { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--door); }
.door-h { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0.45rem 0 0.4rem; letter-spacing: -0.02em; }
.door-p { display: block; font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); }
.door-go { display: block; margin-top: 0.9rem; font-size: 0.78rem; font-weight: 700; color: var(--door); }

/* ─── Opening question — three one-line questions, each the thing that
   actually brings someone here. ──────────────────────────────────── */
.asks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ask {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.3rem 1.3rem;
  transition: border-color 0.18s, transform 0.15s;
}
.ask:hover { border-color: color-mix(in srgb, var(--ask) 40%, white); transform: translateY(-2px); }
.ask-icon { color: var(--ask); margin-bottom: 0.4rem; }
.ask-who { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ask-q { display: block; font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--text-primary); letter-spacing: -0.01em; }

/* ─── The two runs as a scoreboard: the number that moved, what it spotted
   on the way, and the thing to do. Four sentences of narration each was
   three paragraphs nobody reads. ─────────────────────────────────── */
.runs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.run {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.3rem;
  text-align: left;
}
.run-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.run-who { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); }
.run-file { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.run-lede { font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); margin-top: 0.3rem; }
.run-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 1.1rem; }
.run-list li { font-size: 0.8rem; line-height: 1.55; color: var(--text-primary); }
.run-list span {
  display: block; margin-bottom: 1px;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.run-note { font-size: 0.8rem; margin-top: 1.1rem; color: var(--text-secondary); }

/* ─── Charts ──────────────────────────────────────────────────────
   Drawn from the app's own scenario data (src/demo/everyday.ts) — the
   same rule as every figure on this site. Emphasis rather than a
   categorical palette: the one series the story is about carries a
   colour, the rest are a deliberate grey, so the shape of the data
   does the talking. Every value is also in the table below the chart,
   so nothing is readable only by colour. ─────────────────────────── */
/* The SVG scales to its container, so an uncapped chart in a full-width card
   renders its own labels at three times the intended size. */
.chart { margin-top: 1.1rem; max-width: 560px; }
.chart svg { width: 100%; height: auto; display: block; }
.ckeys { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0.5rem; }
.ckey {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.71rem; font-weight: 600; color: var(--text-secondary);
}
.ckey::before {
  content: ''; width: 12px; height: 3px; border-radius: 2px; background: var(--ck);
}
/* Gridlines and axes are solid hairlines a step off the surface — dashing
   reads as "projected" when it is only a grid. */
.c-grid { stroke: var(--border); stroke-width: 1; }
.c-zero { stroke: var(--text-muted); stroke-width: 1; opacity: 0.55; }
.c-mute path { fill: none; stroke: var(--chart-mute); stroke-width: 1.75; stroke-linecap: round; opacity: 0.8; }
.c-bad { fill: none; stroke: var(--chart-bad); stroke-width: 2.4; stroke-linecap: round; }
/* A 2px ring in the surface colour keeps an end-dot legible where it
   crosses its own line, without drawing a border around the mark. */
.c-dot { stroke: var(--surface-0); stroke-width: 2; }
.c-dot-bad { fill: var(--chart-bad); }
.c-bar-was { fill: var(--chart-mute); }
.c-bar-now { fill: var(--chart-now); }
.c-ax { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 500; fill: var(--text-muted); }
.c-cat { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; fill: var(--text-secondary); }
.c-val { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; fill: var(--text-primary); }
.c-val-bad { fill: var(--chart-bad); }
.c-tip { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.c-tip-now { fill: var(--text-primary); font-weight: 700; }
/* A status chip, not a series colour: it ships with its own label so the
   meaning never rests on the red alone. */
.c-chip rect { fill: color-mix(in srgb, var(--chart-bad) 11%, white); }
.c-chip text { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800; fill: var(--chart-bad); }
.chart figcaption {
  font-size: 0.78rem; line-height: 1.6; color: var(--text-secondary); margin-top: 0.7rem;
}
/* The table twin. Collapsed, so it costs no visual weight, but it means
   every number in the chart is reachable as text. */
.ctable { margin-top: 0.9rem; }
.ctable summary {
  font-size: 0.73rem; font-weight: 700; color: var(--text-muted); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.ctable summary::-webkit-details-marker { display: none; }
.ctable summary::before { content: '+'; font-weight: 700; }
.ctable[open] summary::before { content: '\2212'; }
.ctable summary:hover { color: var(--text-secondary); }
.ctable table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.75rem; }
.ctable th, .ctable td { padding: 5px 8px; text-align: right; border-bottom: 0.5px solid var(--border); }
.ctable thead th { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.ctable tbody th { text-align: left; font-weight: 600; color: var(--text-primary); }
.ctable td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ctable tr.is-bad th, .ctable tr.is-bad td { color: var(--chart-bad); font-weight: 700; }
.ctable-src { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.5; }

/* ─── The product in one picture: a file goes in, one assistant handles
   it, four kinds of thing come out. Built in HTML rather than one wide
   SVG — the SVG version scaled its own text down to about 5px on a
   phone, which is the opposite of the point. ─────────────────────── */
.hiw {
  display: grid; gap: 0 0;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 0.9fr) 46px minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  max-width: 1000px; margin: 0.8rem auto 1.9rem;
}
/* Artwork on the first row, captions on the second, rather than each column
   stacking its own — otherwise the three captions start at three different
   heights, which is what the column layout did before. */
.hiw-art { grid-row: 1; align-self: center; }
.hiw-cap {
  grid-row: 2; text-align: center; margin-top: 0.9rem;
  font-size: 0.79rem; line-height: 1.55; color: var(--text-secondary);
}
.hiw-cap b { color: var(--text-primary); font-weight: 700; }
.hiw-cap-1 { grid-column: 1; }
.hiw-cap-2 { grid-column: 3; }
.hiw-cap-3 { grid-column: 5; }

/* A file that looks like a file: header strip, rows of cells, and two
   cells flagged — which is what it actually does first. */
.ffile { background: var(--surface-0); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(17,24,39,0.04); }
.ffile-bar { display: flex; align-items: center; gap: 4px; padding: 7px 10px; background: var(--surface-1); border-bottom: 0.5px solid var(--border); }
.ffile-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.ffile-name { margin-left: 6px; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.ffile-rows { padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.ffile-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.8fr; gap: 5px; }
.ffile-row i { height: 7px; border-radius: 2px; background: var(--border); }
.ffile-row.is-head i { background: var(--border-strong); }
.ffile-row i.is-flag { background: color-mix(in srgb, var(--chart-bad) 55%, white); }

.fhub {
  background: var(--accent); border-radius: 14px; color: #fff;
  padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 6px 18px rgba(99,102,241,0.24);
}
.fhub-mark { color: rgba(255,255,255,0.9); margin-bottom: 0.4rem; }
.fhub-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; }
.fhub-sub { font-size: 0.74rem; color: rgba(255,255,255,0.8); margin-top: 1px; }

.fouts { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fout {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--o) 7%, white);
  border: 0.5px solid color-mix(in srgb, var(--o) 24%, white);
  border-radius: 11px; padding: 8px 12px;
}
.fout-ic {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--o);
  background: color-mix(in srgb, var(--o) 14%, white);
}
.fout-t { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); }
.fout-t b { display: block; font-size: 0.79rem; font-weight: 700; color: var(--text-primary); }

/* The connector, with a pulse travelling along it so the direction of
   the thing is readable without an arrowhead at every joint. */
.hiw-join { grid-row: 1; display: flex; align-items: center; justify-content: center; padding: 0 7px; }
.hiw-line { position: relative; width: 100%; height: 2px; background: var(--border); border-radius: 2px; }
.hiw-line::after {
  content: ''; position: absolute; top: -2px; left: 0; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
  animation: hiwpulse 2.4s linear infinite;
}
.hiw-join:last-of-type .hiw-line::after { animation-delay: 0.5s; }
@keyframes hiwpulse { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

@media (max-width: 920px) {
  .hiw { grid-template-columns: 1fr; grid-template-rows: none; max-width: 420px; }
  .hiw-art, .hiw-join, .hiw-cap { grid-row: auto; grid-column: 1; }
  /* Stacked, each caption has to follow its own picture — in source order the
     three captions come last, which would pile them all at the bottom. */
  .hiw > :nth-child(1) { order: 1; }  /* the file */
  .hiw > :nth-child(6) { order: 2; }
  .hiw > :nth-child(2) { order: 3; }
  .hiw > :nth-child(3) { order: 4; }  /* the assistant */
  .hiw > :nth-child(7) { order: 5; }
  .hiw > :nth-child(4) { order: 6; }
  .hiw > :nth-child(5) { order: 7; }  /* what comes back */
  .hiw > :nth-child(8) { order: 8; }
  .hiw-cap { margin: 0.7rem 0 0; }
  .hiw-join { height: 30px; padding: 0; }
  .hiw-line { width: 2px; height: 100%; }
  .hiw-line::after { animation-name: hiwpulsev; top: 0; left: -2px; }
  @keyframes hiwpulsev { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-line::after { animation: none; opacity: 0; }
}

@media (max-width: 860px) {
  .doors, .asks, .runs { grid-template-columns: 1fr; }
}

/* ─── Industries ─────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Four across, for the four things it does with a file — in .grid-3 the
   fourth sat alone on a second row. */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.ind {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: border-color 0.2s, transform 0.15s;
}
.ind:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.ind-icon {
  width: 38px; height: 38px; border-radius: 10px;
  /* Follow the card's own accent where it has one, so the tile matches the
     heading rather than being indigo on a card that is amber. */
  background: color-mix(in srgb, var(--ind-accent, var(--accent)) 12%, white);
  color: var(--ind-accent, var(--accent));
  margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.ind h3, .ind-h {
  font-size: 0.85rem; font-weight: 700;
  margin-bottom: 6px; color: var(--text-primary);
}
.ind p { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.65; }

/* ─── Capabilities ───────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cap {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: border-color 0.2s, transform 0.15s;
}
.cap:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.cap-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--accent-light); color: var(--accent);
  margin-bottom: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.cap h4 {
  font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 5px;
}
.cap p { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.7; }

/* ─── Timeline — the bridge between "easy to use" and "worth paying
   for": this is the real week-one sequence from inside the product
   (not marketing copy invented for this page), so usability and
   profitability read as one continuous story instead of two claims. */
.tl {
  list-style: none; margin-top: 1.75rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  position: relative;
}
/* The rail the markers sit on. Drawn behind them, inset so it starts and
   ends at the first and last dot rather than running off the edges. */
.tl::before {
  content: ''; position: absolute; top: 7px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg,
    var(--analyst), var(--guardian), var(--engineer), var(--modernizer));
  opacity: 0.35; border-radius: 2px;
}
.tl-stop { position: relative; display: flex; flex-direction: column; padding-top: 1.6rem; }
.tl-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-0); border: 3px solid var(--tl-accent);
}
.tl-when {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tl-accent); text-align: center; margin-bottom: 0.4rem;
}
.tl-what {
  font-size: 0.88rem; font-weight: 700; color: var(--text-primary);
  text-align: center; line-height: 1.35; letter-spacing: -0.015em; margin-bottom: 0.6rem;
}
.tl-win {
  align-self: center; text-align: center;
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  background: color-mix(in srgb, var(--tl-accent) 8%, white);
  border: 0.5px solid color-mix(in srgb, var(--tl-accent) 24%, white);
  border-radius: 999px; padding: 0.32rem 0.75rem;
}

@media (max-width: 820px) {
  .tl { grid-template-columns: 1fr; gap: 0; }
  /* Rail becomes vertical, running down the left through every dot. */
  .tl::before {
    top: 7px; bottom: 7px; left: 7px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg,
      var(--analyst), var(--guardian), var(--engineer), var(--modernizer));
  }
  .tl-stop {
    padding: 0 0 1.4rem 2rem; align-items: flex-start;
  }
  .tl-stop:last-child { padding-bottom: 0; }
  .tl-dot { left: 0; transform: none; }
  .tl-when, .tl-what { text-align: left; }
  .tl-win { align-self: flex-start; }
}

/* ─── Wins — feature cards tell you what an agent does; this section
   says what that's worth to the business, in the same terms someone
   signing off on a budget would use. Each card keeps its agent's
   colour so it reads as backed by something specific, not a slogan. */
/* ─── Before / After — a visual, infographic-style snapshot of the same
   facts already established elsewhere on the page (the real 40% stat,
   the real per-agent outcomes), not new numbers invented for this. */
.ba-sub-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 0.6rem 0.1rem;
}

.ba-board {
  border: 0.5px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-0); overflow: hidden; margin-bottom: 1rem;
}
.ba-board-head, .ba-line {
  display: grid; grid-template-columns: 150px 1fr 28px 1fr 160px;
  align-items: center; gap: 0.9rem; padding: 0.85rem 1.3rem;
}
.ba-board-head {
  background: var(--surface-1); border-bottom: 0.5px solid var(--border);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.ba-h-was { color: var(--text-muted); }
.ba-h-now { color: var(--text-primary); }
.ba-h-num { color: var(--text-muted); text-align: right; }
.ba-line { border-bottom: 0.5px solid var(--border); }
.ba-line:last-child { border-bottom: none; }
.ba-who {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em;
}
.ba-who svg { color: var(--row-accent); flex-shrink: 0; }
.ba-was {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.45;
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 45%, white);
}
.ba-arrow { display: flex; justify-content: center; color: var(--row-accent); opacity: 0.55; }
.ba-now { font-size: 0.79rem; color: var(--text-primary); font-weight: 600; line-height: 1.45; }
.ba-num {
  justify-self: end; text-align: right; white-space: nowrap;
  font-size: 0.73rem; color: var(--text-secondary);
  background: color-mix(in srgb, var(--row-accent) 8%, white);
  border: 0.5px solid color-mix(in srgb, var(--row-accent) 24%, white);
  border-radius: 999px; padding: 0.3rem 0.7rem;
}
.ba-num b { color: var(--row-accent); font-weight: 800; }

@media (max-width: 860px) {
  .ba-board-head { display: none; }
  .ba-line {
    grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem;
    padding: 1rem 1.1rem;
  }
  .ba-who { grid-column: 1; }
  .ba-num { grid-column: 2; grid-row: 1; }
  .ba-was { grid-column: 1 / -1; }
  .ba-arrow { display: none; }
  .ba-now { grid-column: 1 / -1; }
}

.ba-chart {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; margin-bottom: 1rem;
}
.ba-chart-title { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.ba-chart-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ba-chart-row:last-child { margin-bottom: 0; }
.ba-chart-lbl { width: 52px; flex-shrink: 0; font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.ba-bar-track { flex: 1; background: var(--surface-1); border-radius: 999px; overflow: hidden; height: 26px; }
.ba-bar { height: 100%; display: flex; align-items: center; padding: 0 12px; font-size: 0.7rem; font-weight: 700; color: #fff; white-space: nowrap; border-radius: 999px; }
.ba-bar-before { background: var(--text-muted); }
.ba-bar-after { background: var(--accent); }
.wins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.win {
  --win-tint: color-mix(in srgb, var(--win-accent) 8%, white);
  --win-border: color-mix(in srgb, var(--win-accent) 26%, white);
  background: var(--win-tint); border: 0.5px solid var(--win-border);
  border-top: 3px solid var(--win-accent);
  border-radius: var(--radius-lg); padding: 1.5rem 1.4rem;
}
.win-stat-num { font-size: 2rem; font-weight: 800; color: var(--win-accent); letter-spacing: -0.03em; line-height: 1; }
.win-stat-cap { font-size: 0.66rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 10px; }
.win-chip {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  color: var(--win-accent); background: var(--surface-0);
  border: 0.5px solid var(--win-border); border-radius: 999px;
  padding: 3px 9px; margin-bottom: 10px;
}
.win-h { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; }
.roi-note {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1.25rem 1.5rem;
  background: var(--surface-0); border: 0.5px solid var(--border); border-radius: var(--radius-lg);
}
.roi-note p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; max-width: 56ch; }
.roi-note strong { color: var(--text-primary); }
.roi-note a {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 0.78rem; font-weight: 700; color: var(--accent); text-decoration: none;
}
.roi-note a:hover { text-decoration: underline; }

/* ─── CTA band ───────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--accent); padding: 3.25rem 2.5rem; text-align: center;
}
.cta-band h2 {
  font-size: 1.6rem; font-weight: 800; color: #fff;
  letter-spacing: -0.03em; margin-bottom: 0.75rem;
}
.cta-band p {
  font-size: 0.9rem; color: rgba(255,255,255,0.82);
  margin-bottom: 1.4rem; line-height: 1.6;
}
.cta-band-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.cta-band-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: #fff; color: var(--accent); border: 1px solid #fff;
  padding: 0.8rem 1.8rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.87rem;
  cursor: pointer; transition: opacity 0.15s;
}
.cta-band-btn:hover { opacity: 0.9; }
.cta-band-btn-outline {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55);
  font-weight: 600;
}
.cta-band-btn-outline:hover { background: rgba(255,255,255,0.1); opacity: 1; }

/* ─── Contact ────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; align-items: stretch; }
.contacts-side { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.enquire-form {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.85rem 2rem;
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-field label { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); }
.form-field input, .form-field select, .form-field textarea {
  font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text-primary);
  padding: 0.65rem 0.8rem; border: 0.5px solid var(--border-strong);
  border-radius: 8px; background: var(--surface-0);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}
.form-field textarea { resize: vertical; min-height: 90px; font-family: 'Inter', sans-serif; }
.form-submit {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; border: none;
  padding: 0.75rem 1.6rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem;
  cursor: pointer; transition: opacity 0.15s;
}
.form-submit:hover { opacity: 0.88; }
.form-submit:disabled { opacity: 0.6; cursor: default; }
.form-status { margin-top: 12px; font-size: 0.8rem; font-weight: 600; }
.form-status.success { color: var(--modernizer); }
.form-status.error { color: var(--engineer); }
.form-status.notice { color: var(--text-secondary); font-weight: 500; line-height: 1.6; }
.form-status.notice a { color: var(--accent); font-weight: 600; }

/* ─── Product screenshots — real screens captured from the app's own demo
   (npm run shots), framed as a browser window so they read as the product
   itself rather than as another diagram. */
.shot {
  margin: 1.75rem 0 1.5rem; border-radius: 12px; overflow: hidden;
  border: 0.5px solid var(--border-strong); background: var(--surface-0);
  box-shadow: 0 18px 50px rgba(17,24,39,0.12), 0 2px 6px rgba(17,24,39,0.05);
}
.shot-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 0.55rem 0.8rem; background: var(--surface-1);
  border-bottom: 0.5px solid var(--border);
}
.shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.shot img { display: block; width: 100%; height: auto; }
/* On agent pages the shot sits between the page head and the next section,
   which brings its own top padding. */
.shot-section { padding-bottom: 0; }
.shot figcaption {
  font-size: 0.74rem; color: var(--text-muted); padding: 0.6rem 0.9rem;
  border-top: 0.5px solid var(--border);
}

/* ─── Legal pages — plain reading width and real paragraph rhythm; this is
   the one kind of page on the site that is meant to be read end to end. */
.legal { max-width: 68ch; }
.legal h2 {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary); margin: 2.25rem 0 0.7rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; }
.legal p + p { margin-top: 0.75rem; }
.legal ul { margin: 0.6rem 0 0.75rem 1.2rem; }
.legal li + li { margin-top: 0.35rem; }
.legal b { color: var(--text-primary); font-weight: 700; }
.legal a { color: var(--accent); font-weight: 600; }

.footer-legal { display: flex; gap: 1.25rem; }
.footer-legal a {
  font-size: 0.72rem; color: var(--text-muted);
  text-decoration: none; transition: color 0.15s;
}
.footer-legal a:hover { color: var(--text-primary); }
.form-alt { margin-top: 14px; font-size: 0.76rem; color: var(--text-muted); }
.form-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.form-alt a:hover { text-decoration: underline; }
.ci {
  background: var(--surface-1); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.4rem;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color 0.2s;
}
.ci:has(a):hover { border-color: var(--accent-border); }
.ci-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.ci-lbl {
  font-size: 0.65rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px; font-weight: 600;
}
.ci-val { font-size: 0.83rem; font-weight: 600; color: var(--text-primary); }
.ci-val a { color: inherit; text-decoration: none; }
.ci-val a:hover { text-decoration: underline; }
.ci-action {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 0.7rem; font-weight: 700; color: var(--accent); text-decoration: none;
}
.ci-action:hover { text-decoration: underline; }

/* ─── Interior pages — every page other than the home page opens with
   this instead of the full hero: same gradient wash and blobs, sized so
   the content underneath starts near the fold rather than a screen down. */
.page-head {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 100%, #ffffff 6%, var(--accent-light) 48%, #ECFDF9 82%, #DEF7F0 100%);
  border-bottom: 0.5px solid var(--border);
  padding: 3.5rem 2.5rem 3rem;
}
.page-head-inner { max-width: 1120px; margin: 0 auto; position: relative; }
.page-h1 {
  font-weight: 650;
  font-size: 3rem; font-weight: 800; letter-spacing: -0.045em;
  line-height: 1.08; color: var(--text-primary); margin-bottom: 0.75rem;
}
/* On an agent page: says which tier this presentation belongs to, so a shop
   owner who arrives here from a search is sent to the one assistant rather
   than left reading about SIEM exports. */
.page-note {
  font-size: 0.8rem; line-height: 1.65; color: var(--text-secondary);
  max-width: 62ch; margin-top: 0.9rem;
  padding-left: 0.85rem; border-left: 2px solid var(--border-strong);
}

.page-lede { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; max-width: 60ch; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-0); color: var(--pe-accent, var(--accent));
  border: 0.5px solid color-mix(in srgb, var(--pe-accent, var(--accent)) 28%, white);
  font-size: 0.7rem; font-weight: 700; padding: 5px 14px; border-radius: 999px;
  margin-bottom: 1.1rem;
}

.tiers-note {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.7;
  max-width: 70ch; margin-top: 1.5rem;
}

/* ─── Run steps — the same three-beat sequence the home page's simulator
   cycles through, laid out statically so a page can be read rather than
   waited on. */
.run-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.run-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.35rem;
}
.run-step-n {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--fb-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
}
.run-step-k {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fb-accent); margin-bottom: 0.35rem;
}
.run-step-p { font-size: 0.83rem; color: var(--text-primary); line-height: 1.6; }
.run-step-p .mono { font-family: ui-monospace, Menlo, monospace; color: var(--fb-accent); font-weight: 600; }

/* ─── Capability list — two columns of checked rows. Longer than the
   home page's four-up grid because a product page is where someone goes
   for the full list rather than the highlights. */
.cap-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.5rem; margin-top: 0.5rem; }
.cap-row { display: flex; gap: 11px; align-items: flex-start; }
.cap-check {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  background: color-mix(in srgb, var(--fb-accent) 12%, white);
  color: var(--fb-accent);
  display: flex; align-items: center; justify-content: center;
}
.cap-h { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.cap-p { font-size: 0.81rem; color: var(--text-secondary); line-height: 1.65; }

/* Sibling agent cards double as links on the per-agent pages. */
.agent-link { text-decoration: none; display: block; transition: border-color 0.2s, box-shadow 0.2s; }
.agent-link:hover { border-color: color-mix(in srgb, var(--card-accent) 35%, white); box-shadow: 0 4px 20px rgba(17,24,39,0.07); }

/* ─── Sign-up split — pitch on the left, form on the right, each half
   scrolling as one column. The left half keeps the page honest about what
   Basic actually is; the right half is the only thing being asked for. */
.signup { display: grid; grid-template-columns: 1fr 1.15fr; min-height: calc(100vh - 70px); align-items: stretch; }
.signup-aside {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 30% 20%, #ffffff 4%, var(--accent-light) 45%, #ECFDF9 80%, #DEF7F0 100%);
  border-right: 0.5px solid var(--border);
  padding: 3.5rem 3rem;
  display: flex; align-items: center;
}
.signup-aside-inner { position: relative; max-width: 30rem; margin-left: auto; }
.signup-h1 { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; color: var(--text-primary); margin-bottom: 0.85rem; }
.signup-lede { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 2rem; }
.signup-facts { display: flex; flex-direction: column; gap: 0.95rem; margin-bottom: 2rem; }
.signup-fact { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.signup-fact svg { color: var(--modernizer); flex-shrink: 0; margin-top: 4px; }
.signup-fact b { color: var(--text-primary); font-weight: 700; }
.signup-note {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.65;
  padding-top: 1.25rem; border-top: 0.5px solid var(--border-strong);
}
.signup-note a { color: var(--accent); font-weight: 600; }

.signup-form-side { padding: 3.5rem 3rem; display: flex; align-items: center; background: var(--surface-0); }
.signup-form-inner { width: 100%; max-width: 34rem; margin-right: auto; }
.signup-form-head { margin-bottom: 1.75rem; }
.signup-form-h { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); margin-bottom: 0.5rem; }
.signup-form-sub { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.65; }
.form-field .req {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-left: 0.35rem;
}

/* Two-step form: a filled rail rather than a spinner, so it's obvious how
   much is left before you start typing. */
.step-bar { margin-bottom: 1.5rem; }
.step-track { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.step-label { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.step-count { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.step-rail { height: 3px; background: var(--border); border-radius: 999px; overflow: hidden; }
.step-fill { height: 100%; width: 50%; background: var(--accent); border-radius: 999px; transition: width 0.25s ease; }
.step-actions { display: flex; gap: 10px; align-items: center; }
.step-actions .form-submit { flex: 1; }
.form-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-0); color: var(--text-secondary);
  border: 0.5px solid var(--border-strong); border-radius: 999px;
  padding: 0.75rem 1.2rem; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem;
  transition: background 0.15s, color 0.15s;
}
.form-back:hover { background: var(--surface-1); color: var(--text-primary); }

@media (max-width: 900px) {
  .signup { grid-template-columns: 1fr; min-height: 0; }
  .signup-aside { padding: 2.5rem 1.5rem; border-right: none; border-bottom: 0.5px solid var(--border); }
  .signup-aside-inner { margin-left: 0; max-width: none; }
  .signup-h1 { font-size: 2rem; }
  .signup-form-side { padding: 2.5rem 1.5rem; }
  .signup-form-inner { max-width: none; }
}

/* ─── Use cases — each one is a job someone arrives with, so it gets a
   whole row: the situation on the left, what the suite does about it on
   the right, and the agent that leads on it named up front. */
.uc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 0.5rem; }
.uc {
  --uc-tint: color-mix(in srgb, var(--uc-accent) 8%, white);
  --uc-border: color-mix(in srgb, var(--uc-accent) 26%, white);
  display: grid; grid-template-columns: 1fr 1.15fr auto;
  gap: 2rem; align-items: start;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-left: 3px solid var(--uc-accent);
  border-radius: var(--radius-lg); padding: 1.6rem 1.75rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.uc:hover { box-shadow: 0 4px 22px rgba(17,24,39,0.06); border-color: var(--uc-border); border-left-color: var(--uc-accent); }
.uc-agent {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--uc-accent); background: var(--uc-tint);
  border: 0.5px solid var(--uc-border);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 0.7rem;
}
.uc-h { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.45rem; letter-spacing: -0.02em; }
.uc-p { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.65; }
.uc-facts { display: flex; flex-direction: column; gap: 0.6rem; }
.uc-fact { font-size: 0.81rem; color: var(--text-secondary); line-height: 1.6; }
.uc-fact b { color: var(--text-primary); font-weight: 700; }
.uc-link {
  font-size: 0.78rem; font-weight: 700; color: var(--uc-accent);
  text-decoration: none; white-space: nowrap; align-self: center;
}
.uc-link:hover { text-decoration: underline; }

/* ─── Personas — the same "which one is for you" question the home page
   asks interactively, laid out as a grid you can scan and click. */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 0.5rem; }
.persona-card {
  --pc-tint: color-mix(in srgb, var(--pc-accent) 10%, white);
  --pc-border: color-mix(in srgb, var(--pc-accent) 28%, white);
  display: block; text-decoration: none;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.persona-card:hover {
  border-color: var(--pc-border);
  box-shadow: 0 6px 24px rgba(17,24,39,0.07);
  transform: translateY(-2px);
}
.persona-badge {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--pc-tint); color: var(--pc-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.95rem;
}
.persona-role { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.45rem; letter-spacing: -0.02em; }
.persona-p { font-size: 0.81rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 1rem; }
.persona-start { font-size: 0.76rem; font-weight: 700; color: var(--pc-accent); }
.persona-card:hover .persona-start { text-decoration: underline; }

@media (max-width: 1000px) {
  .uc { grid-template-columns: 1fr; gap: 1.1rem; }
  .uc-link { align-self: start; }
  .persona-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .persona-grid { grid-template-columns: 1fr; }
}

/* ─── Comparison table — the tier differences as a grid, for the reader
   who wants to check one specific row rather than read three cards. */
.cmp-wrap { overflow-x: auto; margin-top: 0.5rem; }
.cmp {
  width: 100%; border-collapse: collapse; min-width: 640px;
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.cmp th, .cmp td {
  padding: 0.85rem 1.1rem; text-align: left;
  border-bottom: 0.5px solid var(--border);
  font-size: 0.82rem; color: var(--text-secondary);
}
.cmp thead th {
  font-size: 0.85rem; font-weight: 800; color: var(--text-primary);
  background: var(--surface-1); letter-spacing: -0.01em;
}
.cmp tbody th {
  font-weight: 600; color: var(--text-primary); width: 30%;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.cmp td.yes { color: var(--modernizer); font-weight: 600; }
.cmp td.no { color: var(--text-muted); }

/* ─── FAQ — plain question/answer pairs. No accordion: the answers are
   short enough that hiding them behind a click only adds a step. */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; margin-top: 0.5rem; }
.faq-q { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.45rem; letter-spacing: -0.015em; }
.faq-a { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.7; }

@media (max-width: 900px) {
  .run-steps { grid-template-columns: 1fr; }
  .cap-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .page-head { padding: 2.5rem 1.5rem 2.25rem; }
  .page-h1 {
  font-weight: 650; font-size: 2.1rem; }
  .faq { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─── Footer — a real sitemap rather than a single row of links, so
   every destination on the site is reachable from the bottom of any
   page without scrolling back up. */
.footer {
  background: var(--surface-1); border-top: 0.5px solid var(--border);
  padding: 3rem 2.5rem 1.5rem;
}
.footer-inner { max-width: 1120px; margin: 0 auto; }
.footer-cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem; padding-bottom: 2.25rem;
}
.footer .logo { font-size: 1.05rem; margin-bottom: 0.55rem; }
.footer-tag { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; max-width: 30ch; margin-bottom: 1.1rem; }
.footer-place { font-size: 0.74rem; color: var(--text-muted); }
.footer-col-h {
  font-size: 0.78rem; font-weight: 800; color: var(--text-primary);
  margin-bottom: 0.85rem; letter-spacing: -0.01em;
}
.footer-col a {
  display: block; font-size: 0.78rem; color: var(--text-secondary);
  text-decoration: none; margin-bottom: 0.6rem; transition: color 0.15s;
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  border-top: 0.5px solid var(--border); padding-top: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.footer-copy { font-size: 0.72rem; color: var(--text-muted); }

/* Feature grids go two-up before they go one-up — four 240px columns
   stop being readable well before phone width. */
@media (max-width: 1000px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .fblock { padding: 2.5rem 1.5rem; }
  .fblock-h { font-size: 1.75rem; }
  .fgrid { grid-template-columns: 1fr; gap: 1.4rem; }
  .fcta a { flex: 1; justify-content: center; }
  .nav-wrap { padding: 12px 0.9rem 0; }
  .nav { padding: 0.55rem 0.9rem 0.55rem 1.1rem; gap: 0.75rem; height: auto; }
  .nav .logo { font-size: 1rem; margin-right: 0; }
  .nav-burger { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    flex-direction: column; gap: 0; margin: 0;
    background: var(--surface-0); border: 0.5px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(17,24,39,0.08); padding: 0.5rem 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.85rem 1.75rem; width: 100%; }
  /* Hover panels have no place on touch — the burger menu already lists
     every top-level destination, and a hover-only layer would be
     unreachable. */
  .nav-panel { display: none; }
  .nav-item > a::after { display: none; }
  .hero { padding: 3rem 1.5rem 3rem; }
  .hero-blob { display: none; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-orbit { display: none; }
  .hero-sub { margin: 0 auto 1.6rem; }
  .hero-btns, .hero-agents { justify-content: center; }
  .stack-items { gap: 0.5rem 1.1rem; }
  .stack-items span { font-size: 0.76rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero-agents { margin-top: 2rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .section { padding: 3.5rem 1.5rem; }
  .sim-card { padding: 1.4rem 1.5rem; }
  .sim-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .grid-3 { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; gap: 14px; }
  .ev { grid-template-columns: 1fr; }
  .ev-step { grid-template-columns: 1fr; gap: 2px; }
  .pay-row { grid-template-columns: 1fr; gap: 4px; }
  .grid-2 { grid-template-columns: 1fr; }
  .wins { grid-template-columns: 1fr 1fr; }
  .roi-note { flex-direction: column; align-items: flex-start; }
  .contacts { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .enquire-form { padding: 1.5rem; }
  .cta-band { padding: 3.5rem 1.5rem; }
  .footer { padding: 2.25rem 1.5rem 1.25rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ─── The trial, as three moments rather than a paragraph of small print.
   It answers the question people actually hesitate on — what happens on day
   fifteen — which the FAQ below answers too, but after they have scrolled
   past the prices. ──────────────────────────────────────────────── */
.tline { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: tl; }
.tline-step {
  position: relative; background: var(--surface-0); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; text-align: left;
}
/* The rule that joins them, so it reads as one sequence and not three cards. */
.tline-step::after {
  content: ''; position: absolute; top: 2.35rem; right: -16px; width: 16px; height: 2px;
  background: var(--border); z-index: 1;
}
.tline-step:last-child::after { display: none; }
.tline-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--ts); background: color-mix(in srgb, var(--ts) 12%, white); margin-bottom: 0.9rem;
}
.tline-k { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts); }
.tline-h { display: block; font-size: 1rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.015em; margin: 0.35rem 0 0.45rem; }
.tline-p { display: block; font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 860px) {
  .tline { grid-template-columns: 1fr; }
  .tline-step::after { top: auto; bottom: -16px; right: auto; left: 2.3rem; width: 2px; height: 16px; }
}

/* The problem cards on the agent pages get a deliberately grey tile: they are
   what is wrong today, and should not compete with the accented cards that say
   what the product does about it. */
.ind-icon-quiet { background: var(--surface-1); color: var(--text-muted); }

/* ─── The legal pages read as one column, but it was pinned to the left of a
   1120px container, which left half the page empty and looked unfinished. ── */
.legal { margin: 3.5rem auto 0; }

/* ─── Two paths, side by side: the enquiry you send, which reaches us, and
   the file you analyse, which does not. People ask about one and mean the
   other, and a paragraph does not separate them the way this does. ──────── */
.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; }
.split-side {
  background: var(--surface-0); border: 0.5px solid var(--border);
  border-top: 3px solid var(--sp); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; text-align: center;
}
.split-k { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp); }
.split-rule {
  height: 2px; margin: 0.9rem auto; width: 60%;
  background: linear-gradient(90deg, transparent, var(--sp), transparent); opacity: 0.45;
}
.split-p { font-size: 0.85rem; line-height: 1.65; color: var(--text-secondary); }
.split-end {
  display: inline-block; margin-top: 1rem;
  font-size: 0.78rem; font-weight: 700; color: var(--sp);
  background: color-mix(in srgb, var(--sp) 10%, white);
  border-radius: 999px; padding: 0.35rem 0.9rem;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* The thing a visitor weighs before clicking is not features, it is how much
   of their afternoon this will cost. Steps, not seconds — a time would be our
   connection rather than theirs. */
.hero-note { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); max-width: 46ch; }